/* ============================================================
   bond-portal.css  —  Bond Portal Tier 3 Design System
   ============================================================
   Locked 2026-05-13 against index.html (commit 640ea00).
   See: ~/.claude/.../memory/reference_portal_design_system.md

   Loaded automatically by portal-header.js. Higher-specificity
   selectors (body #bond-portal-header X) win against the legacy
   inline styles still injected by portal-header.js.

   Pages migrate progressively: when a page deletes its inline
   masthead/cat-bar/footer rules, this file takes over cleanly.
   ============================================================ */

/* ---------- Border-box reset ----------
   Pages that drop their legacy inline `* { box-sizing: border-box }` reset
   need this here, otherwise the masthead (default content-box) treats its
   min-height as content-only and grows by `padding-top + padding-bottom`
   every time syncLayout writes hdr.offsetHeight back to --bond-header-h.
   That feedback loop blew the cat-bar off the viewport on swept hub pages. */
body.bond-portal-page,
body.bond-portal-page *,
body.bond-portal-page *::before,
body.bond-portal-page *::after {
  box-sizing: border-box;
}

/* ---------- Design tokens ---------- */
:root {
  /* Surface palette — pure white body (2026-05-13 brighter pass v3 — body
     bg pushed all the way to #ffffff because dark hero/masthead were
     making any off-white perceive as gray by comparison) */
  --bond-bone:        #ffffff;
  --bond-paper:       #ffffff;
  --bond-rule:        #e5e7eb;
  --bond-rule-soft:   #eef0f3;

  /* Ink + body */
  --bond-ink:         #0a1224;
  --bond-navy:        #15233e;
  --bond-navy-soft:   #243a5e;
  --bond-text:        #1a1a1f;
  --bond-body:        #3d414c;
  --bond-muted:       #8a8b91;
  --bond-muted-2:     #b5b5b9;

  /* Brand accent — restraint only */
  --bond-gold:        #bf9a4a;
  --bond-gold-deep:   #9a7a32;
  --bond-gold-light:  #dabb78;
  --bond-gold-tint:   #f6efdb;

  /* State colors */
  --bond-red:         #8c2a2a;
  --bond-red-tint:    #fbeeee;
  --bond-green:       #2e5d3e;
  --bond-green-tint:  #ecf3ec;
  --bond-amber:       #8a5b0a;
  --bond-amber-tint:  #f9f0d8;
  --bond-blue:        #2a4a8a;
  --bond-blue-tint:   #ecf0fa;

  /* Elevation */
  --bond-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
  --bond-shadow-2: 0 1px 3px rgba(15, 23, 42, .04), 0 8px 16px -4px rgba(15, 23, 42, .06);
  --bond-shadow-3: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 36px -8px rgba(15, 23, 42, .10);
  --bond-shadow-lift: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -8px rgba(15, 23, 42, .12);

  /* Motion */
  --bond-ease:    cubic-bezier(.22, 1, .36, 1);
  --bond-ease-in: cubic-bezier(.4, 0, .2, 1);
  --bond-d-fast:  150ms;
  --bond-d-base:  220ms;
  --bond-d-slow:  400ms;

  /* Type stacks */
  --bond-ff-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bond-ff-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bond-ff-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bond-ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Sticky masthead height — used by sticky cat-bar offset */
  --bond-header-h:   100px;
}

/* ---------- Page-load fade keyframe (used by hero + cards) ---------- */
@keyframes bondFadeUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   MASTHEAD OVERRIDE
   portal-header.js injects #bond-portal-header with the legacy
   navy/Arial style. These rules use higher specificity to win.
   ============================================================ */

body #bond-portal-header {
  background: #050816;
  background-image:
    radial-gradient(ellipse 70% 90% at 12% 10%, rgba( 36,  58, 110, .55), transparent 62%),
    radial-gradient(ellipse 60% 80% at 92% 20%, rgba( 26,  42,  74, .55), transparent 62%),
    radial-gradient(ellipse 50% 90% at 50% 100%, rgba(218, 187, 120, .22), transparent 72%),
    linear-gradient(180deg, #050816 0%, #0a1224 100%);
  color: #f4eed7;
  border-bottom: 1px solid rgba(191,154,74,.22);
  box-shadow:
    inset 0 -1px 0 rgba(218,187,120,.12),
    0 1px 0 rgba(0,0,0,.4);
  padding-top: 18px;
  padding-bottom: 18px;
  min-height: var(--bond-header-h);
  font-family: var(--bond-ff-display);
  position: sticky;
  overflow: hidden;
}
body #bond-portal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 52% at 15% 0%, rgba( 36,  58, 110, .35), transparent 66%),
    radial-gradient(ellipse 36% 60% at 95% 100%, rgba(218, 187, 120, .25), transparent 72%);
  filter: blur(22px);
  opacity: .9;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: aurora-drift 36s ease-in-out infinite reverse;
}
@keyframes aurora-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(-3%, 2%, 0) rotate(2deg); }
  50%      { transform: translate3d(2%, -2%, 0) rotate(-1.5deg); }
  75%      { transform: translate3d(-1%, 3%, 0) rotate(1deg); }
}
body #bond-portal-header .bph-brand h1 {
  margin: 0;
  font-size: 0;
  line-height: 1;
}
body #bond-portal-header .bph-brand .bph-logo {
  display: block;
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
@media (max-width: 760px) {
  body #bond-portal-header .bph-brand .bph-logo { height: 40px; }
}
body #bond-portal-header .bph-brand .bph-sub {
  font-family: var(--bond-ff-display);
  color: var(--bond-gold-light);
  font-weight: 400;
  font-size: .76rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  margin-top: 4px;
}
body #bond-portal-header .bph-brand .bph-cert {
  color: rgba(244, 238, 215, .82);
  font-size: .7rem;
  font-weight: 300;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(5, 8, 22, .9);
}
body #bond-portal-header .bph-scope {
  border-color: rgba(191,154,74,.4);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
}
body #bond-portal-header .bph-scope button {
  background: transparent;
  color: var(--bond-gold-light);
  font-family: var(--bond-ff-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: 1.2px;
  padding: 0 16px;
  transition: background var(--bond-d-fast) var(--bond-ease), color var(--bond-d-fast) var(--bond-ease);
}
body #bond-portal-header .bph-scope button.bph-active {
  background: var(--bond-gold);
  color: var(--bond-ink);
}
body #bond-portal-header .bph-input-wrap input {
  border: 1px solid rgba(191,154,74,.45);
  background: rgba(255,255,255,.97);
  border-radius: 8px;
  padding: 11px 38px 11px 16px;
  font-family: var(--bond-ff-display);
  font-size: .9rem;
  color: var(--bond-ink);
  transition: border-color var(--bond-d-fast) var(--bond-ease), box-shadow var(--bond-d-fast) var(--bond-ease);
}
body #bond-portal-header .bph-input-wrap input:focus {
  border-color: var(--bond-gold);
  box-shadow: 0 0 0 4px rgba(191,154,74,.18);
}

/* ============================================================
   CAT-BAR  —  floating refined nav with gold underline on hover
   Higher specificity than typical inline `nav.cat-bar a` rules.
   ============================================================ */

body nav.cat-bar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--bond-rule);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  flex-wrap: wrap;
  position: sticky;
  top: var(--bond-header-h);
  z-index: 99;
  backdrop-filter: blur(12px) saturate(140%);
}
body nav.cat-bar > a,
body nav.cat-bar > .cat-item > .cat-master {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bond-ink);
  background: transparent;
  border: none;
  font-family: var(--bond-ff-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 16px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--bond-d-fast) var(--bond-ease);
}
body nav.cat-bar > a::after,
body nav.cat-bar > .cat-item > .cat-master::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 10px;
  height: 1.5px;
  background: var(--bond-gold);
  transition: left var(--bond-d-base) var(--bond-ease), right var(--bond-d-base) var(--bond-ease);
}
body nav.cat-bar > a:hover::after,
body nav.cat-bar > .cat-item:hover > .cat-master::after,
body nav.cat-bar > .cat-item.open > .cat-master::after,
body nav.cat-bar > a.active::after {
  left: 18px;
  right: 18px;
}
body nav.cat-bar > a.active { color: var(--bond-gold-deep); }
body nav.cat-bar .caret { font-size: .65rem; opacity: .55; }

/* "Suggest an Edit" pill — disable legacy inline override on the anchor */
body nav.cat-bar > a[href*="outlook.office.com"] {
  margin-left: 8px;
  background: transparent !important;
  color: var(--bond-ink) !important;
  border: 1px solid var(--bond-rule);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .68rem;
  letter-spacing: 1.6px;
}
body nav.cat-bar > a[href*="outlook.office.com"]:hover {
  border-color: var(--bond-gold);
  color: var(--bond-gold-deep) !important;
}
body nav.cat-bar > a[href*="outlook.office.com"]::after { display: none; }

/* Dropdown panels */
body nav.cat-bar .cat-item { position: relative; }
body nav.cat-bar .cat-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--bond-paper);
  border: 1px solid var(--bond-rule);
  border-radius: 10px;
  box-shadow: var(--bond-shadow-3);
  padding: 8px;
  z-index: 200;
  animation: bondFadeUp .25s var(--bond-ease);
}
body nav.cat-bar .cat-item:hover > .cat-sub,
body nav.cat-bar .cat-item.open > .cat-sub { display: block; }
body nav.cat-bar .cat-sub a {
  display: block;
  padding: 9px 14px;
  font-family: var(--bond-ff-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--bond-body);
  text-transform: none;
  border-radius: 6px;
  transition: background var(--bond-d-fast) var(--bond-ease), color var(--bond-d-fast) var(--bond-ease);
}
body nav.cat-bar .cat-sub a:hover {
  background: var(--bond-gold-tint);
  color: var(--bond-ink);
}

/* ============================================================
   Cat-bar dropdowns — click-to-open behavior support
   The opener JS toggles .open on .cat-item.has-sub
   ============================================================ */

/* ============================================================
   Generic patterns to be inherited as pages migrate
   ============================================================ */

/* Page-load fade-up — applied via class on a section if desired */
.bond-fade-up { animation: bondFadeUp .6s var(--bond-ease) both; }

/* ============================================================
   DEPARTMENT-HUB PATTERNS  (operations / maintenance / occ /
   safety / training / hr)
   Pages add <section class="dept-hero"> after the cat-bar.
   These rules override legacy inline .card / .card-grid / footer
   styles via specificity (body + class) so each page modernizes
   without a heavy rewrite of its inline <style> block.
   Locked 2026-05-13.
   ============================================================ */

/* Body baseline (department + tool pages) */
body.bond-portal-page {
  background: #ffffff;
  font-family: var(--bond-ff-body);
  color: var(--bond-body);
}

/* ── Slim Department Hero (~24vh, navy iridescent, NO aircraft) ── */
section.dept-hero {
  position: relative;
  min-height: 24vh;
  padding: 56px 32px 60px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: #050816;
  color: #f4eed7;
  margin-bottom: 8px;
}
section.dept-hero::before {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,    rgba(40, 60, 120, .45), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%,  rgba(10,  6, 30, .85), transparent 70%),
    linear-gradient(180deg, #050816 0%, #08102a 50%, #0a1430 100%);
  z-index: -3;
  pointer-events: none;
}
section.dept-hero::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 44% 38% at 14% 22%, rgba( 40,  68, 130, .55), transparent 62%),
    radial-gradient(ellipse 42% 36% at 88% 14%, rgba( 32,  52,  96, .50), transparent 62%),
    radial-gradient(ellipse 36% 30% at 12% 88%, rgba(218, 187, 120, .22), transparent 60%),
    radial-gradient(ellipse 50% 42% at 50% 105%, rgba( 26,  42,  74, .50), transparent 70%);
  filter: blur(36px) saturate(115%);
  opacity: .85;
  mix-blend-mode: screen;
  z-index: -2;
  pointer-events: none;
  animation: aurora-drift 32s ease-in-out infinite;
}
section.dept-hero .dept-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 28% 24% at 50% 50%,
      rgba(218, 187, 120, .12) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 75% at center,
      rgba(22, 38,  78, .55) 0%,
      rgba(18, 30,  62, .35) 35%,
      rgba(14, 24,  50, .15) 60%,
      transparent 82%
    );
}
section.dept-hero .dept-hero-inner {
  position: relative;
  z-index: 5;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
section.dept-hero .dept-eyebrow {
  font-family: var(--bond-ff-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: #f3dca3;
  margin-bottom: 18px;
  text-shadow: 0 1px 4px rgba(5, 8, 22, .9);
}
section.dept-hero .dept-eyebrow::before,
section.dept-hero .dept-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bond-gold-light));
  vertical-align: middle;
  margin: 0 14px 4px;
}
section.dept-hero .dept-eyebrow::after {
  background: linear-gradient(90deg, var(--bond-gold-light), transparent);
}
section.dept-hero h1 {
  font-family: var(--bond-ff-display);
  font-weight: 200;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -.8px;
  line-height: 1.1;
  margin: 0;
  color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, #fbf3d4 35%, #f5d889 50%, #fbf3d4 65%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 1.5px rgba(5, 8, 22, 1))
    drop-shadow(0 0 1.5px rgba(5, 8, 22, 1))
    drop-shadow(0 0 3px   rgba(5, 8, 22, 1))
    drop-shadow(0 2px 8px rgba(5, 8, 22, .9));
}
section.dept-hero .dept-rule {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bond-gold-light), transparent);
  margin: 22px auto 18px;
  position: relative;
}
section.dept-hero .dept-rule::after {
  content: '';
  position: absolute;
  inset: -3px 50% -3px 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bond-gold-light);
  box-shadow: 0 0 10px rgba(218,187,120,.85), 0 0 20px rgba(218,187,120,.45);
  transform: translateX(-50%);
}
section.dept-hero .dept-tagline {
  font-family: var(--bond-ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(.98rem, 1.4vw, 1.18rem);
  color: #f6f0db;
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto;
  text-shadow:
    0 1px 4px rgba(5, 8, 22, .85),
    0 0 24px rgba(5, 8, 22, .5);
}
@media (max-width: 760px) {
  section.dept-hero { min-height: 20vh; padding: 40px 20px 44px; }
}

/* ── Card grid + cards modernized via specificity override ── */
body .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
body .card {
  background: var(--bond-paper);
  border: 1px solid var(--bond-rule);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--bond-body);
  transition: border-color var(--bond-d-fast) var(--bond-ease),
              box-shadow var(--bond-d-base) var(--bond-ease),
              transform var(--bond-d-base) var(--bond-ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: var(--bond-shadow-1);
}
body .card:hover {
  border-color: var(--bond-gold);
  box-shadow: var(--bond-shadow-lift);
  transform: translateY(-1px);
}
body .card .card-title {
  font-family: var(--bond-ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bond-ink);
  letter-spacing: -.1px;
}
body .card .card-desc {
  font-size: .84rem;
  color: var(--bond-body);
  flex: 1;
  line-height: 1.55;
}
body .card .card-badge {
  display: inline-block;
  font-family: var(--bond-ff-display);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
  border: 1px solid transparent;
}
body .card .badge-active { background: var(--bond-green-tint); color: var(--bond-green); border-color: rgba(46,93,62,.25); }
body .card .badge-draft  { background: var(--bond-amber-tint); color: var(--bond-amber); border-color: rgba(138,91,10,.25); }
body .card .badge-wip    { background: #fff8e1; color: #b8860b; border-color: rgba(184,134,11,.25); }
body .card .badge-ref    { background: var(--bond-blue-tint); color: var(--bond-blue); border-color: rgba(42,74,138,.25); }
body .card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .7rem;
  color: var(--bond-muted);
  border-top: 1px solid var(--bond-rule-soft);
  padding-top: 8px;
  margin-top: 2px;
}
body .card .card-meta .rev,
body .card .card-meta .rev-date { color: var(--bond-ink); font-weight: 600; }
body .card .card-meta .updated { color: var(--bond-muted); font-size: .65rem; }

/* PDF download chip on card */
body .card-pdf-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bond-ink);
  color: var(--bond-gold-light);
  font-family: var(--bond-ff-display);
  font-size: .62rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 2;
  transition: background var(--bond-d-fast) var(--bond-ease),
              color var(--bond-d-fast) var(--bond-ease),
              transform var(--bond-d-fast) var(--bond-ease);
  white-space: nowrap;
  user-select: none;
  border: 1px solid rgba(191,154,74,.3);
}
body .card-pdf-btn:hover {
  background: var(--bond-gold);
  color: var(--bond-ink);
  transform: translateY(-1px);
  border-color: var(--bond-gold);
}

/* Card-group + sub-cards modernization (MEL etc.) */
body .card-group {
  background: var(--bond-paper);
  border: 1px solid var(--bond-rule);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--bond-body);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--bond-d-fast) var(--bond-ease);
  box-shadow: var(--bond-shadow-1);
}
body .card-group:hover { border-color: var(--bond-gold); }
body .sub-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
body .sub-card {
  background: var(--bond-bone);
  border: 1px solid var(--bond-rule);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--bond-body);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--bond-d-fast) var(--bond-ease);
}
body .sub-card:hover {
  border-color: var(--bond-gold);
  background: var(--bond-paper);
  box-shadow: var(--bond-shadow-2);
}
body .sub-card .sub-title { font-weight: 700; color: var(--bond-ink); font-size: .92rem; }
body .sub-card .sub-desc  { font-size: .76rem; color: var(--bond-muted); }
body .sub-card .sub-badge {
  align-self: flex-start;
  font-family: var(--bond-ff-display);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bond-blue-tint);
  color: var(--bond-blue);
}

/* Section title (modernized) */
body .section-title {
  font-family: var(--bond-ff-display);
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: -.3px;
  color: var(--bond-ink);
  margin: 40px 0 20px;
  padding: 0 0 12px;
  border: none;
  position: relative;
}
body .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: var(--bond-gold);
}
body .container > .section-title:first-of-type { margin-top: 28px; }

/* Container baseline */
body .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px 80px;
}

/* Modernized footer (single-line legacy footer becomes refined dark slab) */
body > footer:not(.site):not(.no-modernize) {
  background: var(--bond-ink);
  background-image: linear-gradient(180deg, #0a1224 0%, #060b18 100%);
  color: rgba(244,238,215,.55);
  margin-top: 64px;
  padding: 32px 24px 28px;
  border-top: 1px solid rgba(191,154,74,.18);
  font-family: var(--bond-ff-display);
  font-size: .72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
}

/* Hide legacy <header> on department-hub pages where the modern
   #bond-portal-header is injected — prevents the double-masthead
   artifact some hubs are showing. Page can opt out with .keep-legacy-header */
body.bond-portal-page > header:not(#bond-portal-header):not(.keep-legacy-header) { display: none; }

/* ============================================================
   MANUAL PAGES (GOM, GMM, FSOM, IOM, SMS, ESD, etc.)
   Manual pages keep their own chapter chrome (nav.section-nav +
   sidebar nav#toc) but the legacy <header> is hidden. The sticky
   `top` offsets need to adjust to the injected masthead height
   instead of the now-hidden legacy header.
   ============================================================ */
body.bond-portal-page nav.section-nav {
  top: var(--bond-header-h, 104px) !important;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--bond-rule);
  border-bottom: 1px solid var(--bond-rule);
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
  flex-wrap: wrap;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
body.bond-portal-page nav.section-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--bond-ink);
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--bond-ff-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 12px 14px;
  text-decoration: none;
  transition: color var(--bond-d-fast) var(--bond-ease);
}
body.bond-portal-page nav.section-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 1px;
  background: var(--bond-gold);
  transition: left var(--bond-d-fast) var(--bond-ease),
              right var(--bond-d-fast) var(--bond-ease);
}
body.bond-portal-page nav.section-nav a:hover {
  color: var(--bond-gold-deep);
  background: transparent;
}
body.bond-portal-page nav.section-nav a:hover::after,
body.bond-portal-page nav.section-nav a.active::after {
  left: 14px;
  right: 14px;
}
body.bond-portal-page nav.section-nav a.active {
  color: var(--bond-gold-deep);
}
body.bond-portal-page nav.section-nav a:visited {
  color: var(--bond-ink);
}
body.bond-portal-page nav#toc {
  top: calc(var(--bond-header-h, 104px) + 40px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Legacy admin class → Bond token bridge
   Maps pre-Bond structural classes to design-system values so that
   unrewritten setting templates render consistently without needing
   individual template rewrites.
   ───────────────────────────────────────────────────────────────── */
.panelbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--bond-ink) !important;
  border: none !important;
  border-bottom: 2px solid var(--bond-gold) !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  font-family: var(--bond-ff-display) !important;
}
.panelbar > span:first-child {
  font-family: var(--bond-ff-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bond-paper) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
}
/* Reset the jxButton sprite/container system — fully flatten inside panelbar */
.panelbar .jxButtonContainer {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  position: static !important;
}
.panelbar .jxButton {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bond-gold) !important;
  background-image: none !important;
  color: var(--bond-ink) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 5px 14px !important;
  margin: 0 !important;
  font-family: var(--bond-ff-display) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: static !important;
}
.panelbar .jxButton:hover { background: var(--bond-gold-deep) !important; }
.panelbar .jxButtonContent {
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  position: static !important;
}
.panelbar .jxButtonLabel {
  color: var(--bond-ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--bond-ff-display) !important;
  background: none !important;
  padding: 0 !important;
}
.panelbar .jxButtonIcon { display: none !important; }
.dividingDiv,
.dividingDiv2 {
  height: 0 !important;
  border: none !important;
  border-top: 1px solid var(--bond-rule-soft) !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  float: none !important;
}
.dividingDiv p.reqtxt {
  color: var(--bond-muted);
  font-size: 11px;
  font-family: var(--bond-ff-display);
  padding: 4px 0;
  margin: 0;
}
tr.tbl_header_new > td,
tr.tbl_header_new > th {
  background: transparent !important;
  color: var(--bond-muted) !important;
  font-family: var(--bond-ff-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--bond-rule) !important;
  padding: 8px 12px !important;
}
tr.tbl_row_odd > td  { background: var(--bond-bone, #f7f8fa) !important; }
tr.tbl_row_even > td { background: var(--bond-paper) !important; }
tr.tbl_row_odd > td,
tr.tbl_row_even > td {
  border-bottom: 1px solid var(--bond-rule-soft) !important;
  font-family: var(--bond-ff-display) !important;
  font-size: 13px !important;
  color: var(--bond-body) !important;
}

/* ─────────────────────────────────────────────────────────────────
   jxMenu dropdown — global Bond token override.
   Actual DOM: div.jxMenuContainer > ul.jxMenu
     > li.jxMenuItemContainer > a.jxMenuItem
     > span.jxMenuItemContent > span.jxMenuItemLabel
   WARNING: li.jxMenuItem does NOT exist — the <li> class is
   jxMenuItemContainer. Never write selectors against li.jxMenuItem.
   ───────────────────────────────────────────────────────────────── */
ul.jxMenu, ul.jxSubMenu {
  background: var(--bond-navy, #15233e) !important;
  border: 1px solid rgba(191,154,74,.22) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  padding: 4px 0 !important;
}
li.jxMenuItemContainer a.jxMenuItem {
  display: block !important;
  font-family: var(--bond-ff-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.85) !important;
  background: transparent !important;
  background-image: none !important;
  padding: 7px 16px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
li.jxMenuItemContainer span.jxMenuItemContent { background-image: none !important; padding: 0 !important; }
li.jxMenuItemContainer span.jxMenuItemLabel  { color: rgba(255,255,255,.85) !important; }
li.jxMenuItemContainer a.jxMenuItem:hover { background: var(--bond-navy-soft, #243a5e) !important; }
li.jxMenuItemContainer a.jxMenuItem:hover .jxMenuItemLabel { color: #fff !important; }
img.jxMenuItemIcon { display: none !important; }