/* ===== NO UA LINK COLOURS — 26 Jul 2026 (per urgent direction) ==================
   §2A.3: no blue or purple hues outside the ink/teal/gold system. No `:visited`
   was declared anywhere, so any anchor an author rule did not reach fell
   through to the browser defaults — #0000EE unvisited, #551A8B PURPLE once
   visited. Lowest specificity in the file and placed FIRST, so every existing
   author rule still wins.
   ======================================================================== */
a { color: inherit; }
a:visited { color: inherit; }

/* CoreBridge Sector Data Tool — BETA
   Design authority: DASHBOARD_DESIGN_ANNEX.md (tracks the 2027 CoreBridge system).
   Tokens: ink #031602, paper var(--paper), accent var(--accent) (deep var(--accent-deep)), chip yellow
   var(--chip-yellow), chart-gold var(--chart-gold), var(--force-external) frozen as exhibit-only. Type: Hanken Grotesk
   (display/UI), Cormorant (serif register), JetBrains Mono (chrome); Neue Haas is
   retired. Brand fonts load from the production site when online; system fallbacks
   otherwise. The dashboard's sanctioned departures from the print canonical (density,
   teal dark chrome, chart palette, pulse rings, square-ish radii, left-accent cards)
   are recorded in the annex §2. */

/* Tiempos Headline — the editorial serif of the CoreBridge magazine system. Loaded
   on screen (not just print) so the hero and section titles read as CoreBridge. */
/* v3.1 type system — Hanken Grotesk (display/chrome) + Cormorant (serif titles); JetBrains Mono kept for tabular data */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-VariableFont_wght.woff2") format("woff2-variations"), url("fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Regular.woff2") format("woff2"), url("fonts/Spectral-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Medium.woff2") format("woff2"), url("fonts/Spectral-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-SemiBold.woff2") format("woff2"), url("fonts/Spectral-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Bold.woff2") format("woff2"), url("fonts/Spectral-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  /* Always light (26 July 2026). Without this the browser still paints native
     controls, scrollbars and form widgets dark on a dark-appearance OS, against a
     cream page. Declaring the scheme keeps the whole surface light. */
  color-scheme: light;
  --ink: #031602;
  --ink-2: #2E2A22;
  --ink-3: #6B6557;
  --ink-surface: #031602;
  --header: rgba(20, 17, 13, 0.97);
  --paper: #F2F0EF;
  --paper-bright: #FEFCF7;
  --paper-on-ink: #CBC7BB;
  --paper-on-ink-2: #B8B1A1;
  --rule: #A6A294;
  --rule-soft: #DDD9CF;
  --accent: #234C50;
  --accent-deep: #16363A;
  --accent-wash: #E1ECEA;
  --accent-ink: #16363A;
  --chip-yellow: #D4AF67;
  --chip-gold: #D4AF67;
  /* 2027 token completion (Dashboard Design Annex, 5 Jul 2026) */
  --paper-2: #EFEDE6;
  --paper-3: #E4E0D6;
  --paper-tint: #FBF9F4;
  --paper-deep: #D2CCBE;
  --rule-hairline: #CBC7BB;
  --ink-4: #9C9583;
  --ink-chip: #031602;
  --force-community: #C2466B;
  --force-bestpractice: #9C6A00;
  --force-stewardship: #2E7D52;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;
  --force-external: #113235; /* FROZEN · exhibits only */
  --terracotta: #A24B28;
  --terracotta-deep: #7C3A1E;
  --ochre: #96702A;
  --warning: #8A6A1F;
  --info: #234C50;          /* 2027: info = accent; #113235 stays exhibit-only */
  --accent-control: #2F686D; --accent-soft: #9CC2C0;
  /* canonical semantic colours (replace the retired terracotta #B8553F and the
     off-palette green #2E7D5B that used to carry good/bad meaning) */
  --success: #3D5A3D;
  --danger: #8E2E2E;
  --chart-gold: #96702A;
  --chart-amber: #C77D11;   /* amber FILL for charts/markers (AI-exposure, JSA caveat) */
  --warn-text:   #8E6E2E;   /* darker amber for TEXT — meets AA on light surfaces */
  --chart-h: 260px;         /* standard chart-card canvas height; taller/shorter charts override explicitly */
  --display: "Hanken Grotesk", "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --mono: "Hanken Grotesk", ui-monospace, "SF Mono", Menlo, monospace;  /* v4.0.1 two-face (14 Jul 2026): JetBrains Mono retired; chrome/tabular = Hanken. Pair with tabular-nums. */
  /* shared content-column geometry, so the header, main and footer never drift */
  --col-max: 1440px;
  --col-pad: clamp(20px, 4vw, 64px);
  /* radius scale + layered material depth (Apple/Google surfaces): a tonal step
     below the card, a top rim-light, a multi-stop ambient shadow */
  --r-chip: 5px;          /* v4.2: clickable chip = a control */   /* canonical scale 0/2/3/5/8/10; 7px was off-scale (25 Jul 2026) */ --r-ctl: 5px;           /* v4.2: interaction is rounded 4-6px */ --r-card: 0;            /* v4.2: structure is square */ --r-hero: 0;            /* v4.2: structure is square */
  /* bento spacing scale: one rhythm for grid gaps, card padding and section gutters,
     so the dashboard breathes consistently and reflows cleanly across desktop / iPad /
     phone. Tuned down a step on tablet and phone via the breakpoints below. */
  --gap: 16px;            /* default grid gap (cards / charts) */
  --gap-sm: 13px;         /* tighter gap for dense KPI tiles */
  --pad-card: 17px 19px;  /* card interior */
  --pad-section: 26px var(--col-pad) 30px;  /* section panel interior — horizontal = the page gutter so panel text sits on the header text line */
  --surface: var(--paper-bright);   /* card fill = canonical elevated-card paper (#FEFCF7) */
  --surface-sunk: #F2F0EF;     /* page, one tonal step below paper, so cards float */
  --rim: rgba(255, 255, 255, .72);
  --lead-ring: rgba(61, 90, 61, .60);      /* green top-10 pulse (success) */
  --watch-ring: rgba(142, 46, 46, .62);    /* red bottom-10 pulse (danger) */
  /* layered material depth (3D): three shadow tiers so a tab reads as boxes lifting
     off the page, tiles lifting off the boxes, and cells set into the tiles.
       --shadow-box  : section panels + headline box (deepest, far-reaching lift)
       --shadow-tile : the KPI / chart cards floating inside a box (medium)
       --shadow-card : standalone cards not inside a box
       --shadow-lift : hover (strongest)
       --inset-cell  : innermost cells, pressed slightly INTO their tile */
  /* 26 Jul 2026 — capped at two layers, per §2A.5: shadows are "always warm,
     faint, and lifted — never black, never hard, never more than two layers."
     These carried three and four, which is what made the dashboards read heavier
     and glossier than the marketing pages they sit beside: the same card, more
     lift. The four-tier depth hierarchy the comment above describes is kept —
     box still sits deeper than tile, tile deeper than card — it is just drawn
     with two layers each instead of four, and the marketing --shadow-card is
     now the reference the hub card matches. */
  --shadow-card: 0 2px 6px rgba(20, 17, 13,.05), 0 12px 28px -12px rgba(20, 17, 13,.12);
  --shadow-box:  0 2px 6px rgba(20, 17, 13,.06), 0 22px 44px -18px rgba(20, 17, 13,.17);
  --shadow-tile: 0 1px 3px rgba(20, 17, 13,.05), 0 8px 18px -8px rgba(20, 17, 13,.11);
  --shadow-lift: 0 3px 8px rgba(20, 17, 13,.08), 0 20px 38px -14px rgba(20, 17, 13,.20);
  --rim-inset: inset 0 1px 0 var(--rim), inset 0 0 0 1px rgba(255,255,255,.04);
  --inset-cell: inset 0 1px 2px rgba(20, 17, 13,.06), inset 0 0 0 1px rgba(20, 17, 13,.015);
  --shadow-chip: 0 1px 2px rgba(20, 17, 13,.07), 0 3px 8px -3px rgba(20, 17, 13,.16);  /* small number boxes (rank pill, rank/median cells) — a crisp little lift */
  /* legacy aliases used in inline styles */
  --ink-soft: #6B6557;
  --line: #DDD9CF;
  --card: var(--paper-bright);
}
* { box-sizing: border-box; margin: 0; }
body { font-family: var(--text); background: var(--surface-sunk); color: var(--ink); font-size: 16px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; }

/* the dark band runs full-bleed, but its content (brand row, H1, lede) is held to
   the SAME column as main, so the H1/lede left and right edges align with the cards
   at every desktop width (fixes the lede sitting inset from the content below). */
header.site { background: var(--header); color: var(--paper-on-ink); padding: 30px 0 24px; }
header.site > * { max-width: var(--col-max); margin-left: auto; margin-right: auto; padding-left: var(--col-pad); padding-right: var(--col-pad); }
.brandmark { height: 30px; width: 30px; object-fit: contain; display: block; }
header.site .brand a { display: flex; align-items: center; }
@media print { .brandmark { content: url("brand/mark.png?v=3"); } }
header.site .brand {
  font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-on-ink-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.beta-chip {
  font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  background: var(--chip-yellow); color: var(--ink); padding: 3px 10px; font-weight: 700;
}
header.site h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 46px); margin-top: 10px; letter-spacing: -0.022em; line-height: 1.06; color: #CBC7BB; }
header.site p.lede { margin-top: 12px; color: var(--paper-on-ink); font-size: var(--fs-base); line-height: 1.55; }

/* ===== site header — replicates the live corebridgeadvisory.com.au top bar:
   a slim, frosted cream bar with the CoreBridge mark + wordmark and the site nav,
   then a cream page-hero carrying the product title. ===== */
.site-head { background: rgba(247,245,240,0.96); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; z-index: 70; }
.site-head__inner { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--col-pad); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-head .brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: var(--fs-base); letter-spacing: -0.022em; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* Shared wordmark component. Canonical lockup per the root site stylesheet
   (.brand__word / .brand__name / .brand__descriptor): CoreBridge 700 /
   Advisory 300, baseline-aligned, no space, one colour. Written unscoped so
   the same markup renders identically in the site header, the advisory band
   and the advisory box, on all four hubs. */
.brand__word { display: inline-flex; align-items: baseline; gap: 0; }
.brand__name { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; }
.brand__descriptor { font-family: var(--display); font-weight: 300; letter-spacing: -0.005em; }
.site-head .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; display: block; }
.site-head .nav { display: none; }
@media (min-width: 880px) { .site-head .nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 30px); } }
.site-head .nav a { font: 400 14px var(--text); letter-spacing: .005em; color: var(--ink-2); position: relative; padding: 6px 0; text-decoration: none; transition: color .12s ease; white-space: nowrap; }
.site-head .nav a:hover { color: var(--ink); }
.site-head .nav a.is-active { color: var(--ink); font-weight: 500; }
.site-head .nav a.is-active::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent); }
.menu-btn { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; font: 500 13px var(--text); color: var(--ink); padding: 8px 0; }
@media (min-width: 880px) { .menu-btn { display: none; } }
.menu-btn__icon { position: relative; width: 18px; height: 14px; display: inline-block; }
.menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform .2s ease; }
.menu-btn__icon::before { top: 2px; }
.menu-btn__icon::after { bottom: 2px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }
.drawer { display: none; background: var(--ink-surface); border-bottom: 1px solid rgba(255,255,255,.10); }
.drawer.is-open { display: block; }
@media (min-width: 880px) { .drawer { display: none !important; } }
.drawer__nav { max-width: var(--col-max); margin: 0 auto; padding: 6px var(--col-pad) 16px; display: flex; flex-direction: column; }
.drawer__nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px; color: var(--paper-on-ink); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 16px var(--text); }
.drawer__nav a:last-child { border-bottom: 0; }
.drawer__nav a .num { color: rgba(255,255,255,.4); font: 400 12px var(--mono); }

/* page hero — the product title on cream, in the website's editorial serif */
.page-hero { background: var(--paper); border-bottom: 1px solid var(--rule-soft); }
.page-hero .bandwrap { padding: 24px var(--col-pad) 22px; }
.page-hero .hero-eyebrow { display: inline-block; font: 700 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; background: var(--chip-yellow); color: var(--ink); padding: 3px 10px; margin-bottom: 15px; }
.page-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(29px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); }
/* body text fills to the card/page right edge (no width cap) — the principal's standing rule;
   the 1180px main container still bounds line length. The gremlin keeps re-adding these
   880/900px caps on revert, so if a paragraph suddenly stops short on the right, check here. */
.page-hero .lede { margin-top: 14px; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 640px) { .page-hero .bandwrap { padding: 26px var(--col-pad) 24px; } }

/* full-bleed band whose text aligns to the shared content column */
.bandwrap { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--col-pad); }
.beta-bar {
  background: var(--chip-yellow); color: var(--ink); padding: 9px 0;
  font-size: var(--fs-chrome); font-weight: 500; line-height: 1.45;
}
.beta-bar b { font-weight: 700; }

/* tab bar (restyled 14 Jun): short labels in rounded cluster panels; the active
   tab is a filled teal pill so where-you-are reads instantly. */
/* full-bleed dark band, but the tab content aligns to the SAME centred content
   column as the header and main, so the menu and the headings below line up. */
nav.tabs { display: flex; gap: 10px; background: var(--ink-surface); flex-wrap: wrap; align-items: center;
  position: sticky; top: var(--headh, 0px); z-index: 60;
  padding: 11px max(var(--col-pad), calc((100% - var(--col-max)) / 2 + var(--col-pad))); }
nav.tabs a {
  color: var(--paper-on-ink-2); text-decoration: none; padding: 9px 13px; font-size: var(--fs-chrome); font-weight: 500;
  border-radius: var(--r-chip); letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
nav.tabs a:hover { color: #CBC7BB; background: rgba(255,255,255,.08); }
nav.tabs a.active { background: var(--accent); color: var(--paper-bright, #FEFCF7); font-weight: 700; box-shadow: 0 2px 9px rgba(35, 76, 80,.5); }

/* tab grouping: each of the five areas is its own rounded panel on a shared dark
   base, colour-coded from the brand palette (teal / green / gold / clay, plus a
   neutral utility). The colour is carried on the kicker, a top accent rule, and the
   active pill, so each area reads as a distinct topic at a glance. */
nav.tabs .tab-cluster { display: flex; align-items: center; gap: 3px; background: #0C2410;
  border: 1px solid rgba(255,255,255,.09); border-top: 2px solid var(--clust, var(--accent));
  border-radius: var(--r-ctl); padding: 3px 5px 4px; }
nav.tabs .tab-cluster .tab-kicker { color: var(--clust-text, var(--accent-soft)); }
nav.tabs .tab-cluster a.active { background: var(--clust, var(--accent)); color: #CBC7BB;
  box-shadow: 0 2px 9px rgba(0,0,0,.45); }
/* No per-section nav colour scheme: every section falls back to the one brand accent (the --clust / --clust-text
   defaults), so the tabs carry no colour differences. */
nav.tabs .tab-kicker {
  display: flex; align-items: center; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 0 9px 0 11px; white-space: nowrap; pointer-events: none; user-select: none;
}
nav.tabs a.tab-util { margin-left: auto; border: 1px solid rgba(255,255,255,.16); }
nav.tabs a.tab-util.active { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #CBC7BB; box-shadow: none; }
/* mobile nav: a grouped dropdown replaces the tab strip below 640px, so the 14
   views never get lost behind a sideways scroll. Shown only on mobile. */
.mobile-nav-wrap { display: none; }

/* Mobile view menu, built to the Material 3 menu spec and presented as a bottom sheet
   (M3's mobile pattern for a long, grouped navigation list): a light surface-container
   surface, 1dp outline-variant dividers between groups, title-small subheaders, 52px
   single-line items with a leading letter chip, the current view shown selected, and the
   emphasized open/close motion. Defined globally but inert until body.mnav-open, which only
   the mobile trigger sets, so desktop is untouched. M3 roles map to CoreBridge tokens. */
.mnav-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(20, 17, 13, .46);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.mnav-open { overflow: hidden; }
body.mnav-open .mnav-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
.mnav-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  display: flex; flex-direction: column; max-height: 82vh; max-height: 82dvh;
  background: var(--paper-bright); color: var(--ink);
  border-radius: 10px 10px 0 0; padding: 6px 8px max(10px, env(safe-area-inset-bottom)) 8px;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .26), 0 -8px 26px 2px rgba(0, 0, 0, .22);
  transform: translateY(101%); visibility: hidden; pointer-events: none;
  transition: transform .24s cubic-bezier(.05, .7, .1, 1), visibility .24s ease; }
body.mnav-open .mnav-sheet { transform: translateY(0); visibility: visible; pointer-events: auto; }
.mnav-sheet-grip { flex: 0 0 auto; width: 34px; height: 4px; border-radius: 2px; background: var(--rule); margin: 6px auto 2px; }
.mnav-sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px 12px; }
.mnav-sheet-title { font: 700 11px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.mnav-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: none; background: none; color: var(--ink-2); border-radius: 50%; cursor: pointer; }
.mnav-sheet-close:active { background: rgba(20, 17, 13, .08); }
.mnav-sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; }
.mnav-grp + .mnav-grp { margin-top: 8px; }   /* the coloured heading band is the group separator now */
/* every group heading shares one CoreBridge dark-purple band with a slowly moving gradient (no per-section colours) */
.mnav-subhead { display: block; margin: 8px 4px 7px; padding: 9px 13px; border-radius: 9px;
  font: 800 13.5px var(--text); letter-spacing: .01em; color: var(--paper-bright, #FEFCF7);
  /* Flat accent band (WI-1). The 8s looping gradient sweep was decoration on
     a navigation label: motion with nothing to say. */
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(20, 17, 13, .2); }
@keyframes mnav-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .mnav-subhead { animation: none; } }
.mnav-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 52px; padding: 8px 12px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-control, 5px); font: 400 16px/1.35 var(--text); letter-spacing: .01em; color: var(--ink); text-align: left; }
.mnav-item::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-control, 5px); background: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .1s ease; }
.mnav-item:hover::after { opacity: .05; }
.mnav-item:active::after { opacity: .11; }
.mnav-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px;
  border-radius: 8px; background: var(--accent-wash); color: var(--accent-deep); font: 700 12px var(--mono); }
.mnav-chip--solo { background: transparent; }
.mnav-item-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-item-check { flex: 0 0 auto; color: var(--accent); opacity: 0; }
.mnav-item.is-active { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }
.mnav-item.is-active .mnav-chip { background: var(--accent); color: var(--paper-bright, #FEFCF7); }
.mnav-item.is-active .mnav-item-check { opacity: 1; }
.mnav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .mnav-sheet, .mnav-scrim { transition: none; } }

main { max-width: var(--col-max); margin: 0 auto; padding: 28px 0 60px; }
.controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-bottom: 22px; }
.controls label { display: block; font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; font-weight: 500; }
/* the selectors share the row equally so they sit on one line (a compact locked header) and only
   wrap on narrow screens; each select fills its share, truncating the longest option rather than
   forcing the row taller. */
.controls > div { flex: 1 1 240px; min-width: 0; }
.controls > div > select { width: 100%; }
select, input[type=range], input[type=text] {
  font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius-control, 5px);
  background: var(--paper-bright); min-width: 220px; color: var(--ink);
}
select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Picker "search bars" styled as Apple/M3-style search fields: a soft rounded surface with a leading magnifying
   glass and a trailing chevron, while staying native <select> dropdowns (the options list is unchanged). */
.controls select, .instselect select {
  -webkit-appearance: none; appearance: none;
  width: 100%; color: var(--ink); padding: 11px 44px;
  border: 1px solid var(--rule-soft); border-radius: 999px;   /* full pill, M3 search-bar shape */
  background-color: var(--surface-sunk);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6557' stroke-width='2.1' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.7' y2='16.7'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B6557' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: left 17px center, right 17px center;
  background-size: 17px, 13px;
  cursor: pointer; text-overflow: ellipsis;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.controls select:hover, .instselect select:hover { border-color: var(--accent-soft); background-color: var(--paper-bright); }
.controls select:focus, .instselect select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); background-color: var(--paper-bright); }

/* accessibility: visible brand focus ring for keyboard users, and a skip link */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 1px;
}
/* on the dark nav/header/footer, teal-on-dark is low contrast — use white there */
nav.tabs a:focus-visible, header.site a:focus-visible, footer.site a:focus-visible { outline-color: #fff; }
main:focus { outline: none; }  /* programmatic focus target for the skip link; no ring needed */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--accent); color: var(--paper-bright, #FEFCF7); padding: 9px 16px; font-weight: 700; font-size: var(--fs-small);
  text-decoration: none; transition: top .12s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid #fff; outline-offset: 2px; }
/* visually hidden but available to screen readers (carries non-colour meaning) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.grid { display: grid; gap: var(--gap); }
.kpis { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--gap-sm); margin-bottom: 24px; }
/* cards: softened (curved) corners and a layered, slightly-3D shadow stack, with
   a lift on hover. A deliberate departure from the canonical square geometry for
   this public tool, to read like a contemporary Apple/Google-style dashboard. */
.card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); padding: var(--pad-card);
  box-shadow: var(--shadow-card), var(--rim-inset);
  transition: box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) {
  .card:hover { box-shadow: var(--shadow-lift), var(--rim-inset); transform: translateY(-2px); }
  .no-data:hover { box-shadow: none; transform: none; }   /* a placeholder, not an interactive card */
}
@media (prefers-reduced-motion: reduce) { .card, .role-tile { transition: none; } .card:hover, .role-tile:hover { transform: none; } }
/* cards in a row are equal height (grid stretch); their internals line up because
   every block ABOVE the divider has a fixed min-height: the title reserves two
   lines (a one-line and a two-line title push the value to the SAME baseline), the
   value reserves one line, the reference one line. So the .kpi-ctx divider sits at
   the same offset on every card and the lines align across the whole row. */
.kpi { display: flex; flex-direction: column; }
.kpi .label { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; line-height: 1.3; min-height: 27px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi .value { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; line-height: 1.1; min-height: 33px; white-space: nowrap; }
/* the change badge sits on its own line below the number (the inline badge was too
   wide for the card and pushed the divider out of line); reserves one line whether
   or not a prior year exists, so every card's divider lands at the same height. */
.kpi-yoy { min-height: 18px; margin-top: 3px; line-height: 1.2; }
.kpi-yoy .yoy { margin-left: 0; }
.kpi .ref { font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 4px; min-height: 16px; }
.kpi .bench { font-size: var(--fs-chrome-sm); margin-top: 6px; color: var(--ink-3); }
.kpi .bench div { margin-top: 2px; }
.kpi .bench b { color: var(--accent-deep); }
/* KPI context: every datum is shown by default (no hover/click reveal). The
   national rank of 36 is promoted to a colour-keyed tile; state, mission,
   benchmark median and the multi-year move sit in a quiet 2-up labelled grid. */
.kpi-ctx { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.kpi-rank { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px; border-radius: var(--r-ctl); background: var(--accent-wash); border: 1px solid rgba(35, 76, 80,.30); margin-bottom: 9px; box-shadow: var(--shadow-chip); }
.kpi-rank .kr-pos { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--accent-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-rank .kr-of { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kpi-rank--good { background: rgba(61,90,61,.10); border-color: rgba(61,90,61,.42); }
.kpi-rank--good .kr-pos { color: var(--success); }
.kpi-rank--bad { background: rgba(142,46,46,.08); border-color: rgba(142,46,46,.38); }
.kpi-rank--bad .kr-pos { color: var(--danger); }
/* scale/exposure (no good direction): a neutral teal magnitude tag — large is
   notable, never "good". A distinct colour from the green/red performance pulse. */
.kpi-rank--scale { background: rgba(35, 76, 80,.08); border-color: rgba(35, 76, 80,.34); }
.kpi-rank--scale .kr-pos { color: var(--accent); }
.kc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); overflow: hidden; }
.kc { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: var(--surface); }
.kc-l { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); line-height: 1.25; }
.kc-v { font-size: var(--fs-small); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kc-v small { font-weight: 500; font-size: var(--fs-caption); color: var(--ink-3); }
.kc-na .kc-v { color: var(--ink-3); font-weight: 500; }   /* reserved (n/a) rank slot: a quiet dash */
.kc-mv { font-size: var(--fs-kicker); font-weight: 700; margin-left: 2px; font-variant-numeric: tabular-nums; }
.kc-grid > .kc:only-child { grid-column: 1 / -1; }
.kc-grid > .kc:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kc-trend { margin-top: 7px; }

/* colour pulse on key information: a green halo + green number on a top-10
   national rank, a red halo + red number on a bottom-10 rank (good-direction
   measures only). Both settle after a few cycles; both reduced-motion guarded. */
.kpi.kpi-lead, .kpi.kpi-watch { position: relative; }
.kpi.kpi-lead { border-color: rgba(61,90,61,.48); }
.kpi.kpi-lead .value { color: var(--success); }
.kpi.kpi-lead { border-color: rgba(61,90,61,.65); }
.kpi.kpi-lead::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 0 var(--lead-ring); animation: cb-lead-pulse 2.2s ease-in-out infinite; }
@keyframes cb-lead-pulse { 0% { box-shadow: 0 0 0 0 var(--lead-ring); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61,90,61,0); } }
.kpi.kpi-watch { border-color: rgba(142,46,46,.65); }
.kpi.kpi-watch .value { color: var(--danger); }
.kpi.kpi-watch::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 0 var(--watch-ring); animation: cb-watch-pulse 2.3s ease-in-out infinite; }
@keyframes cb-watch-pulse { 0% { box-shadow: 0 0 0 0 var(--watch-ring); } 70%, 100% { box-shadow: 0 0 0 9px rgba(142,46,46,0); } }
/* top-decile on a scale measure: a STATIC teal ring (no animation) so "among
   the largest" draws the eye without implying a good/bad performance signal. */
.kpi.kpi-scale { position: relative; border-color: rgba(35, 76, 80,.42); }
.kpi.kpi-scale::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 2px rgba(35, 76, 80,.26); }
@media (prefers-reduced-motion: reduce) {
  .kpi.kpi-lead::after { animation: none; box-shadow: 0 0 0 2px var(--lead-ring); }
  .kpi.kpi-watch::after { animation: none; box-shadow: 0 0 0 2px var(--watch-ring); }
}

/* guided-entry "start here" action strip on the landing: one clear way in, so a
   first-time reader is not left to parse the full tab bar to begin */
.starter { margin: 2px 0 30px; }
.starter-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 13px; flex-wrap: wrap; }
.starter-eyebrow { font: 700 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: var(--chip-yellow); padding: 4px 10px; border-radius: 4px; }
.starter-sub { font-size: var(--fs-small); color: var(--ink-2); }
.role-router { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin: 0; }
/* each tile reads as an action: teal title, a persistent arrow affordance, and a
   hover lift that nudges the arrow. No constant pulse — the arrow and the "Start
   here" framing carry the affordance without the noise of five pulsing rings. */
.role-tile { position: relative; display: block; padding: 18px 20px 42px; background: var(--surface); border: 1.5px solid var(--accent-soft); border-radius: var(--r-card); text-decoration: none; color: inherit; box-shadow: var(--shadow-card), var(--rim-inset); transition: box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s; }
@media (hover: hover) { .role-tile:hover { box-shadow: var(--shadow-lift), var(--rim-inset); transform: translateY(-2px); border-color: var(--accent); } .role-tile:hover .rt-go { transform: translateX(4px); } }
.role-tile .rt-title { display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-base); color: var(--accent); letter-spacing: -0.01em; }
.role-tile .rt-desc { display: block; font-size: var(--fs-chrome-sm); color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.role-tile .rt-go { position: absolute; right: 18px; bottom: 13px; font-size: 19px; line-height: 1; color: var(--accent); font-weight: 700; transition: transform .2s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .role-tile, .role-tile .rt-go { transition: none; } }
/* secondary paths as quiet text links beneath the three primary tiles */
.starter-more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 2px 0; }
.starter-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-chrome); font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .15s; }
.starter-link .sl-go { color: var(--accent); transition: transform .2s; }
@media (hover: hover) { .starter-link:hover { color: var(--accent); } .starter-link:hover .sl-go { transform: translateX(3px); } }

/* Low-SES focus band (Universities Accord parity agenda): a lead hero tile carrying
   the institution's headline share, then gap-to-target tiles laid 2-4 per row. The
   government's central equity measure gets its own prominent treatment. */
.lowses-band { grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: stretch; }
@media (max-width: 920px) { .lowses-band { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .lowses-band { grid-template-columns: 1fr; } }
.lowses-hero { display: flex; flex-direction: column; }
.lowses-hero .ls-eyebrow { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; line-height: 1.3; }
.lowses-hero .ls-big { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 6vw, 62px); line-height: 1; letter-spacing: -0.03em; color: var(--accent-deep); margin: 8px 0 5px; font-variant-numeric: tabular-nums; }
.lowses-hero .ls-sub { font-size: var(--fs-chrome-sm); color: var(--ink-3); line-height: 1.45; }
.lowses-hero .ls-rank { margin-top: auto; padding-top: 13px; }
.lowses-hero .ls-rank .kpi-rank { margin-bottom: 0; }
/* at or above the 2035 target: the hero reads green, matching the kpi-lead pulse on the
   equity-intake cards. Below target it stays the calm teal hero (never red, per R10). */
.lowses-hero.ls-meets { position: relative; border-color: rgba(61,90,61,.65); }
.lowses-hero.ls-meets .ls-big { color: var(--success); }
.lowses-hero.ls-meets::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 0 var(--lead-ring); animation: cb-lead-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lowses-hero.ls-meets::after { animation: none; box-shadow: 0 0 0 2px var(--lead-ring); } }
.lowses-tile { display: flex; flex-direction: column; gap: 4px; }
.lowses-tile .lt-l { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
.lowses-tile .lt-v { font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lowses-tile .lt-sub { font-size: var(--fs-kicker); color: var(--ink-3); line-height: 1.4; margin-top: auto; padding-top: 6px; }
.lowses-tile.lt-gap-pos .lt-v { color: var(--success); }   /* at or above the target = success-green */
.lowses-tile.lt-gap-neg .lt-v { color: var(--ink-2); }     /* below target: neutral, not red (equity is never flagged as a failing, R10) */

/* Campuses tab lead statement: answers "is there enrolment by campus?" up front,
   so the catchment cards are never mistaken for a campus headcount. A clean panel,
   not a left-border callout (the canonical lists that as an AI tell). */
.campus-lead { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card), var(--rim-inset); padding: 16px 20px 17px; margin: 0 0 6px; max-width: 940px; }
.campus-lead .cl-head { font-family: var(--display); font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: 5px; letter-spacing: -0.01em; }
.campus-lead p { font-size: var(--fs-chrome); color: var(--ink-2); line-height: 1.55; }
.campus-lead a { color: var(--accent); text-decoration: underline; }

/* scorecard summary band: quartile counts, a rank-profile strip, lead/lag chips */
.scd-summary { margin: 0 0 20px; }
.scd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.scd-stat { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); padding: 12px 16px; box-shadow: var(--rim-inset); }
.scd-stat .scd-n { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.scd-stat .scd-l { font-size: var(--fs-chrome-sm); color: var(--ink-3); margin-top: 4px; line-height: 1.35; }
.scd-stat.good .scd-n { color: var(--success); }
.scd-stat.bad .scd-n { color: var(--danger); }
.scd-strip-wrap { margin-bottom: 18px; }
.scd-strip-lbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.scd-strip-lbl span:nth-child(2) { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-family: var(--text); font-size: var(--fs-chrome-sm); }
/* DATA MARK, not chrome. The strip is a continuous scale — behind-sector to
   ahead-of-sector — and a scale legend has to be continuous to mean anything.
   It reads as a chart element, never as page furniture. */
/* WI-1, 26 Jul 2026: the red-to-green wash behind this strip is gone. It was
   the last decorative gradient in page chrome, and its two hues were not in
   the token set at all. Nothing was lost: the dots already carry good/bad in
   --success/--danger, and the weakest/strongest ends are labelled above. */
.scd-strip { position: relative; height: 28px; background: var(--paper-deep, rgba(20,17,13,.05)); border: 1px solid var(--rule-soft); border-radius: 999px; }
.scd-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--ink-3); border: 1.5px solid var(--surface); box-shadow: 0 1px 2px rgba(20, 17, 13,.18); }
.scd-dot.good { background: var(--success); }
.scd-dot.bad { background: var(--danger); }
.scd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.scd-col h4 { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
/* DS9, 26 Jul 2026 — rank chips become inline badges.
   These were pills: a box, a border and a fill around a rank and a measure
   name, eight of them stacked in two columns. §2A.5 allows one chip family per
   view and the tab bar already owns it, and a box that can be replaced by
   whitespace without losing meaning should be. What carries the reading is the
   ordinal, so the ordinal is the badge — set tight, tabular and coloured by
   direction — and the measure name is plain text beside it. */
.scd-chip { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--fs-chrome);
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 18px 9px 0;
  color: var(--ink-2); text-decoration: none; transition: color .15s; }
.scd-chip:hover { color: var(--ink); }
.scd-chip:hover b { text-decoration: underline; text-underline-offset: 3px; }
.scd-chip b { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; }
.scd-chip.good b { color: var(--success); }
.scd-chip.bad b { color: var(--danger); }
/* compact rank pill for the Compare table — the one view where ranks are read side by
   side, so the rank earns the same colour-keyed treatment as the kpiPulse rings. */
.rank-pill { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 8px; border-radius: 999px; font: 700 12px var(--display); background: var(--surface-sunk); color: var(--ink-2); box-shadow: var(--shadow-chip); }
.rank-pill small { font-weight: 500; font-size: var(--fs-caption); color: var(--ink-3); }
.rank-pill.good { background: rgba(61,90,61,.10); color: var(--success); }
.rank-pill.bad  { background: rgba(142,46,46,.10); color: var(--danger); }
/* ── Head-to-head versus mode ──────────────────────────────────────── */
.vs-tally { display: flex; justify-content: center; margin: 4px 0 14px; }
.vs-tally__score { font: 800 22px var(--display); letter-spacing: -.01em; color: var(--ink); background: var(--surface-sunk); border-radius: 999px; padding: 8px 24px; box-shadow: var(--shadow-chip); }
.vs-table th, .vs-table td { vertical-align: middle; }
.vs-table td small { color: var(--ink-3); font-weight: 400; font-size: var(--fs-caption); }
.vs-table .vs-win { background: rgba(61,90,61,.12); font-weight: 700; }
.vs-table .vs-arrow { font-size: var(--fs-card); color: var(--ink-3); text-align: center; width: 34px; }
.vs-table .vs-na { color: var(--ink-3); }
.vs-table .vs-ctx { font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-sunk); border-radius: var(--r-chip); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.cmp-mode-btn { font: 600 12.5px var(--text); background: var(--ink); color: var(--paper-on-ink); border: none; border-radius: var(--r-chip); padding: 9px 16px; cursor: pointer; transition: background .15s; white-space: nowrap; }
.cmp-mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--paper-bright, #FEFCF7); }
.cmp-mode-btn:hover { background: var(--accent-deep); color: #CBC7BB; }
@media (max-width: 640px) { .scd-stats, .scd-cols { grid-template-columns: 1fr; } }

/* ── Guess-first "test your intuition" widgets ─────────────────────── */
.guess-pair { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.guess-widget { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-tile); padding: 18px 20px; }
.guess-widget .gw-q { font: 600 14.5px var(--text); color: var(--ink); margin: 0 0 4px; line-height: 1.35; }
.guess-widget .gw-sub { font-size: var(--fs-chrome-sm); color: var(--ink-3); margin: 0 0 12px; }
.guess-widget .gw-val { font: 700 16px var(--display); color: var(--accent-deep); }
.guess-widget input[type=range] { width: 100%; accent-color: var(--accent); margin: 8px 0 12px; height: 22px; cursor: grab; }
.guess-widget input[type=range]:active { cursor: grabbing; }
.guess-btn { font: 600 12.5px var(--text); background: var(--accent); color: var(--paper-bright, #FEFCF7); border: none; border-radius: var(--r-chip); padding: 8px 18px; cursor: pointer; transition: background .15s; }
.guess-btn:hover { background: var(--accent-deep); }
.guess-btn:disabled { background: var(--surface-sunk); color: var(--ink-3); cursor: default; }
.guess-reveal { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .35s ease; font-size: var(--fs-chrome); line-height: 1.6; color: var(--ink-2); }
.guess-reveal.shown { opacity: 1; max-height: 520px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
/* reveal becomes a card of flashing big numbers */
.guess-reveal .gw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 10px; }
.guess-reveal .gw-stat { background: var(--surface-sunk); border-radius: var(--r-chip); padding: 12px 14px; }
.guess-reveal .gw-big { font: 800 30px var(--display); color: var(--danger); line-height: 1.04; letter-spacing: -.01em; }
.guess-reveal .gw-big .gw-unit { font-size: var(--fs-base); font-weight: 700; }
.guess-reveal .gw-cap { font-size: var(--fs-kicker); color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.guess-reveal .gw-note { font-size: var(--fs-chrome-sm); color: var(--ink-3); margin: 6px 0 0; }
.gw-flash { animation: cb-gw-flash 1.6s ease-in-out infinite; }
@keyframes cb-gw-flash { 0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(142,46,46,0); } 50% { opacity: .6; text-shadow: 0 0 16px rgba(142,46,46,.45); } }
@media (prefers-reduced-motion: reduce) { .gw-flash { animation: none; } }
.guess-reveal .gw-pointer { display: inline-block; margin-top: 6px; font: 600 12px var(--mono); letter-spacing: .03em; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.guess-reveal .gw-pointer:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .guess-reveal { transition: none; } }

/* ── Scrollytelling for the $13.1B gap section ─────────────────────── */
.sh-scrolly { display: grid; grid-template-columns: 1fr; gap: 0; }
.sh-scrolly__step { padding: 22px 2px; border-top: 1px solid var(--rule-soft); }
.sh-scrolly__step:first-child { border-top: none; }
.sh-scrolly__step h4 { font: 700 14.5px var(--display); color: var(--ink-3); margin: 0 0 6px; transition: color .25s; }
.sh-scrolly__step p { font-size: var(--fs-chrome); line-height: 1.6; color: var(--ink-2); margin: 0; }
.sh-scrolly__step.is-active h4 { color: var(--accent-deep); }
@media (min-width: 900px) {
  .sh-scrolly { grid-template-columns: 1.05fr .95fr; gap: 0 30px; align-items: start; }
  .sh-scrolly__sticky { position: sticky; top: calc(var(--headh, 0px) + var(--navh, 70px) + 16px); }
  .sh-scrolly__step { min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sh-scrolly__sticky { position: static; } }

/* shareable stat-card button — sits top-right of each sector-health KPI tile */
.sh-share-btn { position: absolute; top: 9px; right: 9px; z-index: 2; font: 600 9.5px var(--mono); letter-spacing: .04em; background: var(--surface); color: var(--ink-3); border: 1px solid var(--rule-soft); border-radius: var(--r-chip); padding: 3px 8px; cursor: pointer; opacity: .5; transition: opacity .15s, color .15s, border-color .15s; }
.sh-kpi:hover .sh-share-btn, .sh-share-btn:focus-visible { opacity: 1; }
.sh-share-btn:hover { color: var(--accent-deep); border-color: var(--accent); }
@media (hover: none) { .sh-share-btn { opacity: .85; } }

/* (removed .sector-hero — the duplicate big-number block above the sector-totals cards) */

/* "Explore CoreBridge" dropdown in the header (far right): coloured + pulsing
   so the route back to corebridgeadvisory.com.au is obvious */
.cb-nav {
  margin-left: auto; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--accent); color: var(--paper-bright, #FEFCF7); border: none; border-radius: 0;
  font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 28px 8px 12px; min-width: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
  animation: cb-nav-pulse 2.6s ease-in-out 4;   /* draws the eye on load, then settles */
}
.cb-nav:hover { background-color: var(--accent-deep); }
.cb-nav:focus { outline: 2px solid #fff; outline-offset: 2px; }
.cb-nav option { color: var(--ink); background: #fff; font-family: var(--text); }
@keyframes cb-nav-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 76, 80, 0); } 50% { box-shadow: 0 0 0 5px rgba(35, 76, 80, .45); } }
@media (prefers-reduced-motion: reduce) { .cb-nav { animation: none; } }

/* progressive disclosure: collapsible secondary sections. The ▸ caret carries the
   "there is more" affordance, so no attention pulse is needed here. */
details.disclose { margin: 16px 0; border-top: 1px solid var(--rule); }
details.disclose > summary { cursor: pointer; list-style: none; padding: 13px 2px 3px; font-family: var(--display); font-weight: 700; font-size: var(--fs-body); color: var(--ink); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 9px; }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before { content: "▸"; color: var(--accent); font-size: var(--fs-kicker); }
details.disclose[open] > summary::before { content: "▾"; }
details.disclose > summary .disc-sub { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
details.disclose > summary:hover { color: var(--accent-deep); }

/* year-on-year change badge (KPI values, scorecard + compare tables) */
.yoy { font-family: var(--text); font-size: var(--fs-chrome-sm); font-weight: 700; vertical-align: middle; margin-left: 5px; letter-spacing: 0; white-space: nowrap; }
.yoy-good { color: var(--success); }
.yoy-bad { color: var(--danger); }
.yoy-neutral { color: var(--ink-3); }
.yoy-period { font-weight: 400; font-size: 0.82em; color: var(--ink-3); }

/* real-terms change: a clear green/red pill so "outpaced inflation" vs "fell behind"
   is unmistakable, not a muted dark number */
.real-chg { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-chrome); line-height: 1.3; border: 1px solid transparent; }
.real-chg.up { color: var(--success); background: rgba(61,90,61,.14); border-color: rgba(61,90,61,.34); }
.real-chg.down { color: var(--danger); background: rgba(142,46,46,.13); border-color: rgba(142,46,46,.36); }

/* state & territory table */
.state-table td, .state-table th { vertical-align: middle; }
.state-table tbody td { padding: 11px 12px; }
.st-name { font-family: var(--display); font-weight: 700; font-size: var(--fs-card); color: var(--ink); letter-spacing: -0.01em; }
/* 4 Aug 2026 (per direction): the 360px cap left 61px empty in a 421px cell, on every
   state row. Small, but the same rule as everywhere else on the estate: text
   fills its container. The cell is the container here. */
.st-unis { font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 3px; max-width: none; line-height: 1.4; }
.st-unis b { color: var(--ink-2); }
.st-share { width: 156px; }
.share-bar { height: 8px; background: var(--rule-soft); overflow: hidden; border-radius: 999px; }
.share-bar span { display: block; height: 100%; background: var(--accent); }
.share-lbl { font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.yoy-legend { background: var(--paper-bright); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); padding: 8px 12px; font-size: var(--fs-chrome-sm); line-height: 1.5; color: var(--ink-2); margin-bottom: 16px; }
.yoy-legend .yoy { margin-left: 0; }

/* feedback / errata box (open public beta) */
.feedback-box { }
.feedback-box h3 { font-size: var(--fs-body); color: var(--ink); margin-bottom: 6px; }
.feedback-box p { font-size: var(--fs-chrome); color: var(--ink-2); margin-bottom: 12px; }
.errata-badge { display: inline-block; font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; background: var(--chip-yellow); color: var(--ink); padding: 3px 9px; font-weight: 700; margin-bottom: 8px; }

/* data-status / corrections card (Method tab) */
.data-status { }
.data-status h3 { font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.data-status h4 { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 14px 0 6px; }
.data-status ul { margin: 0; padding-left: 18px; }
.data-status li { font-size: var(--fs-chrome); color: var(--ink-2); margin-bottom: 4px; line-height: 1.5; }
.ds-head { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start; justify-content: space-between; }
.ds-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.ds-meta > div { display: flex; flex-direction: column; }
.ds-k { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ds-v { font-family: var(--display); font-weight: 700; font-size: var(--fs-card); color: var(--ink); margin-top: 2px; white-space: nowrap; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.ds-corr li { color: var(--ink); }
.ds-corr b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ds-grid { grid-template-columns: 1fr; } .ds-meta { gap: 16px; } }
footer.site a { text-decoration: underline; }

/* blank-on-open prompt + pulsing institution selector */
.blank-prompt { max-width: 640px; padding: 26px 26px 30px; }
.blank-prompt h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
/* the "select a university" control gets a clearer, stronger pulse: a 2px accent
   border that breathes and a larger halo ring, so the one action that unlocks every
   single-university tab is unmistakable. The label also pulses to reinforce it. */
.instselect.pulse select { border: 2px solid var(--accent); background: var(--accent-wash); animation: cb-pulse 1.5s ease-in-out infinite; }
@keyframes cb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 76, 80,.62); border-color: var(--accent); } 50% { box-shadow: 0 0 0 12px rgba(35, 76, 80,0); border-color: var(--accent-deep); } }
.instselect.pulse label { color: var(--accent-deep); animation: cb-label-pulse 1.5s ease-in-out infinite; }
.instselect.pulse label::after { content: " — start here"; color: var(--accent); font-weight: 700; }
@keyframes cb-label-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .instselect.pulse select { animation: none; outline: 2px solid var(--accent); } .instselect.pulse label { animation: none; opacity: 1; } }

/* "On this tab" contents strip: a map of the tab's sections so a long, data-dense
   view reads as a navigable set of labelled chunks, not a wall. Built from the
   section headings (buildSectionNav). */
/* sticky so the contents strip stays available while reading a long tab; scroll-spy
   (setupScrollSpy) lights the section you're in. Opaque page-tone bg so cards scroll
   cleanly beneath it. */
.section-nav { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin: 2px 0 30px; padding: 13px 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50; background: var(--surface-sunk); }
/* desktop: lock the whole top control stack as you scroll — the tab bar (top), the institution
   and benchmark selectors below it, and the "on this tab" strip below those. The selector and
   strip carry extra left padding so their labels sit clear of the edge and read easily. */
@media (min-width: 641px) {
  #main > .controls { position: sticky; top: calc(var(--headh, 0px) + var(--navh, 56px)); z-index: 56; margin: 0 0 22px; padding: 15px var(--col-pad); background: var(--paper); box-shadow: inset 0 -1px 0 var(--rule-soft); }
  .section-nav { top: calc(var(--headh, 0px) + var(--navh, 56px) + var(--ctrlh, 70px)); }
}
@media (max-width: 640px) {
  /* mobile: the controls are a stacked card, so give them the padding + surface the desktop sticky bar has,
     otherwise the labels and selects sit flush against the card's rounded edges. */
  #main > .controls { background: var(--surface); padding: 13px 14px; }
  /* offset the sticky section-nav (and the sticky table headers) below the mobile view-switcher
     (.mobile-nav-wrap, z-index 60); without this the "On this tab" strip slid under it on scroll.
     --mnavh is measured in setStickyVars; the switcher can wrap, so never hardcode its height. */
  .section-nav { padding: 13px 16px; position: static; }
  #main.has-secnav table.data th { top: calc(var(--mnavh, 0px) + 50px); }
}
/* programmatic focus target on view change: no visible box on the whole content column */
#main:focus { outline: none; }
/* the section you're currently reading: filled teal pill, same language as the active tab */
.sn-link.active { background: var(--page-accent, var(--accent)); border-color: var(--page-accent, var(--accent)); color: var(--page-accent-on, #fff); box-shadow: 0 2px 9px rgba(20, 17, 13,.22); }
.sn-link.active .sn-num { background: color-mix(in srgb, var(--page-accent, var(--accent)) 52%, #031602); color: #CBC7BB; }
/* colour pulses: a flash as a pill becomes the active section (scroll-spy), and a flash
   on a section's number chip when you jump to it — both confirm where you've landed */
.sn-link.cb-pill-flash { animation: cb-pill-flash .9s ease-out 1; }
@keyframes cb-pill-flash { 0% { box-shadow: 0 0 0 0 rgba(35, 76, 80,.55); } 100% { box-shadow: 0 2px 9px rgba(35, 76, 80,.38), 0 0 0 8px rgba(35, 76, 80,0); } }
.sec-n.cb-flash { animation: cb-chip-flash 1.1s ease-out 1; }
@keyframes cb-chip-flash { 0% { background: var(--page-accent, var(--accent)); color: var(--page-accent-on, #fff); box-shadow: 0 0 0 0 rgba(20, 17, 13,.45); } 100% { box-shadow: 0 0 0 11px rgba(20, 17, 13,0); } }
@media (prefers-reduced-motion: reduce) { .sn-link.cb-pill-flash, .sec-n.cb-flash { animation: none; } }
/* data-table headers stick below the contents strip, but only on tabs that have one */
#main.has-secnav table.data th { top: 50px; z-index: 2; }
/* inside a scroll box the header sticks to the box's own top, not 50px (else the section-nav rides over it) */
#main.has-secnav div[style*="overflow:auto"] table.data th { top: 0; }
.sn-label { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 5px; }
.sn-links { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }
.sn-link { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--text); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; box-shadow: var(--shadow-card); }
.sn-link:hover { border-color: var(--page-accent, var(--accent)); color: var(--page-accent-deep, var(--accent-deep)); }
.sn-num { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font: 700 10px var(--mono); flex: none; }
.sn-link:hover .sn-num { background: var(--page-accent, var(--accent)); color: var(--page-accent-on, #fff); }

/* each section is its own rounded, shadowed box (a card), so a tab reads as a stack
   of discrete, layered panels rather than one continuous scroll. The white panel
   floats on the sunk page; its content (KPI/chart cards) sits inside as sub-panels. */
section.block { margin: 24px 0; scroll-margin-top: 80px; background: var(--surface); border: 1px solid var(--rule-soft);
  border-radius: var(--r-hero); box-shadow: var(--shadow-box), var(--rim-inset); padding: var(--pad-section); }
@media (max-width: 640px) { section.block { padding: 20px 16px 22px; } }
/* section titles lead in the editorial serif, fronted by a numbered anchor chip
   that ties each section to the "on this tab" strip and marks it as a discrete chunk */
section.block > h2,
section.block > .sec-head > h2 { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
section.block h2 .sec-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--page-accent, var(--accent)); color: var(--page-accent-on, #fff); border: 1px solid var(--page-accent, var(--accent)); font: 700 12px var(--mono); margin-right: 12px; vertical-align: 4px; }
section.block > p.note { color: var(--ink-3); font-size: var(--fs-chrome); margin-bottom: 14px; }
/* nested "boxes within a box" — the three catchment scales, readable tiles inside a panel */
.scale-explainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 16px; background: var(--surface-sunk); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-box); margin: 0 0 12px; }
.scale-box { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); padding: 13px 15px; box-shadow: var(--shadow-tile); }
.scale-box .scale-tag { display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-card); color: var(--accent); letter-spacing: -0.01em; }
.scale-box .scale-unit { display: block; font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.scale-box .scale-km { display: block; font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 2px; }
.scale-box .scale-desc { font-size: var(--fs-chrome-sm); color: var(--ink-2); line-height: 1.45; margin: 9px 0 0; }
/* an interpretive "read": one finding-carrying sentence, weighted darker than the
   descriptive note above it so the reader's eye lands on the so-what */
p.note.read-line { color: var(--ink); font-size: var(--fs-small); font-weight: 500; margin: -2px 0 14px; }
p.note.read-line b { color: var(--accent-deep); font-weight: 700; }
/* a headline KPI grid sitting bare at the top of a tab (the "at a glance" lead, not
   itself inside a section) gets the same boxed-panel treatment, so every chunk on a
   tab reads as a discrete, shadowed box rather than a loose row of floating cards. */
main > .grid.kpis { background: var(--surface); border: 1px solid var(--rule-soft);
  border-radius: var(--r-hero); box-shadow: var(--shadow-box), var(--rim-inset);
  padding: 24px 30px 28px; margin: 18px 0 24px; }
@media (max-width: 640px) { main > .grid.kpis { padding: 18px 16px 20px; } }

/* inside a section box (or the headline box above), the KPI / chart tiles FLOAT: a
   near-white fill, a top rim-light and a medium drop shadow, so each tile lifts off
   the box the way the box lifts off the page — boxes within boxes, real depth. Hover
   raises them further. */
section.block .card,
main > .grid.kpis > .card { background: var(--paper-bright); box-shadow: var(--shadow-tile), var(--rim-inset); }
@media (hover: hover) {
  section.block .card:hover,
  main > .grid.kpis > .card:hover { background: #fff; box-shadow: var(--shadow-lift), var(--rim-inset); transform: translateY(-3px); }
  section.block .no-data:hover { background: var(--paper); box-shadow: none; transform: none; }
}
/* placeholders stay flat (a missing measure should not float like real data) */
section.block .no-data, main > .grid.kpis .no-data { box-shadow: none; }
/* the in-tile mini-grid (rank tile + 2-up context) is set INTO the floating tile with
   a soft inner shadow, the deepest layer in the stack */
section.block .kc, main > .grid.kpis .kc { background: var(--surface); }
/* the rank/median panel lifts off the tile as its own raised number box */
section.block .kc-grid, main > .grid.kpis .kc-grid { box-shadow: var(--shadow-chip); }
/* a section whose only content is a single full-width card (a heading-less panel
   like the Method data-status or feedback box) would double-box; collapse the outer
   box and let that one card BE the panel, white and floating, not a card on a box. */
section.block:has(> .card:only-child) { background: transparent; border: none; box-shadow: none; padding: 0; }
section.block:has(> .card:only-child) > .card { background: var(--surface); box-shadow: var(--shadow-box), var(--rim-inset); }
.charts { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
.chartcard h3 { font-size: var(--fs-card); margin-bottom: 8px; color: var(--ink-2); }
.chartcard .src { font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 8px; }
/* base .src rule so source captions placed OUTSIDE a chartcard (tables, loose cards,
   sector sections) still render at the muted 11px caption size, not full body size.
   .chartcard .src above is more specific and keeps its margin inside charts. */
.src { font-size: var(--fs-kicker); line-height: 1.5; color: var(--ink-3); margin-top: 8px; }
/* every section's chart grid sits a consistent --gap below its lede (was 51 inline
   margin-top:14px magic numbers across the views). */
.block .grid.charts { margin-top: var(--gap); }
/* "no strong position" rank tile — used by kpiCard/pgRankTile in 5 views but the rule
   was never defined, so a neutral rank looked identical to a directional one. */
.kpi-rank--mid { background: var(--surface-sunk); border-color: var(--rule); }
.kpi-rank--mid .kr-pos { color: var(--ink-3); }
/* repeated OECD/section sub-heading (was a 7-property inline style duplicated 6×,
   with an off-token colour fallback and a raw 'JetBrains Mono' string). */
.sh-subsec-head {
  font: 600 10.5px/1.3 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 24px 0 10px; border-bottom: 1px solid rgba(20, 17, 13,.08); padding-bottom: 6px;
}
/* a brand-coloured marker that pulses over a key chart point (the latest value, or an
   important line crossover) — draws the eye to where the story is. CSS-animated (no JS
   redraw loop), placed by placePulseDot(); reduced-motion drops the pulse, keeps the dot. */
.chart-pulse { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.chart-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .5; animation: cb-pt-pulse 1.9s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes cb-pt-pulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.chart-pulse.good { background: var(--success); }
.chart-pulse.warn { background: var(--danger); }
.chart-pulse.gold { background: var(--chart-gold); }
.chart-pulse.teal { background: #1F6F5C; }
@media (prefers-reduced-motion: reduce) { .chart-pulse::after { animation: none; } }
/* matrix direction arrow (Jobs scatter): a thin teal arrow rooted at the key uni's dot,
   rotated toward the sweet spot; a ghost stroke nudges toward the head to read as "move this way".
   Direction is the information, so reduced-motion keeps the static arrow and drops only the nudge. */
.matrix-arrow { position: absolute; width: 42px; height: 0; transform-origin: 0 50%; pointer-events: none; z-index: 5; border-top: 2px solid var(--accent); opacity: .75; }
.matrix-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.matrix-arrow::before { content: ""; position: absolute; inset: 0; border-top: 2px solid var(--accent-deep, var(--accent)); opacity: .5; animation: cb-arrow-nudge 1.9s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes cb-arrow-nudge { 0% { transform: translateX(0); opacity: .55; } 60% { transform: translateX(10px); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }
.matrix-here { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--success); background: rgba(61,90,61,.10); border: 1px solid rgba(61,90,61,.4); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .matrix-arrow::before { animation: none; opacity: 0; } }
/* occBar "does this uni teach into this field" legend swatches */
.occ-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-kicker); color: var(--ink-2); margin: 0 0 8px; }
.occ-key { display: inline-block; width: 14px; height: 9px; border-radius: 2px; vertical-align: middle; margin-right: 2px; }
.occ-key.solid { background: var(--accent); }
.occ-key.faint { background: rgba(35, 76, 80,.14); border: 1.2px solid rgba(35, 76, 80,.55); }
.occ-key.ai { background: var(--chart-amber); }
/* intentional no-data state, so a missing measure reads as data discipline, not a gap */
.no-data { display: flex; align-items: center; gap: 10px; padding: 18px 20px; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--r-card); box-shadow: none; font-size: var(--fs-chrome); color: var(--ink-3); }

table.data { width: 100%; border-collapse: collapse; background: var(--paper-bright); border: 1px solid var(--rule-soft); font-size: var(--fs-small); }
table.data th { background: var(--ink-surface); color: var(--paper-on-ink); text-align: left; padding: 9px 12px; font-weight: 500; font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: .04em; text-transform: uppercase; position: sticky; top: 0; z-index: 2; }
table.data td { padding: 8px 12px; border-top: 1px solid var(--rule-soft); }
table.data tr.me td { background: var(--accent-wash); font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.section-row td { background: var(--accent-wash); color: var(--accent-ink); font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 9px 12px; border-top: 2px solid var(--accent); position: sticky; top: 33px; }
select optgroup { font-weight: 700; color: var(--ink); font-style: normal; }
select option { font-weight: 400; }

.campuscards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.campus h3 { font-size: 15.5px; color: var(--ink); }
.campus .meta { font-size: var(--fs-chrome-sm); color: var(--ink-3); margin-bottom: 8px; }
/* each catchment metric in its own padded box inside the campus card */
.cc-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 14px; background: var(--surface-sunk); border: 1px solid var(--rule-soft); border-radius: var(--r-ctl); }
.cc-row .cc-l { font-size: var(--fs-chrome-sm); color: var(--ink-2); line-height: 1.3; }
.cc-row .cc-v { font-size: var(--fs-small); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cc-row--wide { flex-direction: column; align-items: stretch; gap: 4px; }
.cc-row--wide .cc-v { text-align: left; font-weight: 600; font-size: var(--fs-chrome); white-space: normal; }
.pill { display: inline-block; font-size: var(--fs-caption); font-family: var(--mono); letter-spacing: .03em; padding: 2px 9px; background: var(--accent-wash); color: var(--accent-ink); margin-left: 6px; border-radius: var(--r-chip); }

.attrib { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-kicker); color: var(--ink-3); line-height: 1.7; }
.attrib h4 { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.scenario-h { font-family: var(--display); font-weight: 700; font-size: 17.5px; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px; }
.scenario .out { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--accent-deep); }
/* ── "What if" scenario slider card (gap-closure on the $13.1B section) ── */
.scn-card { background: var(--surface); border: 1.5px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-tile); padding: 18px 20px; margin: 0 0 14px; }
.scn-card .scn-head { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.scn-card .scn-q { font: 600 15px var(--text); color: var(--ink); margin: 0 0 10px; }
.scn-card label { font-size: var(--fs-chrome); color: var(--ink-2); }
.scn-card label b { font: 700 15px var(--display); color: var(--accent-deep); }
.scn-card input[type=range] { width: 100%; accent-color: var(--accent); margin: 8px 0 14px; height: 22px; cursor: grab; }
.scn-card input[type=range]:active { cursor: grabbing; }
.scn-out { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.scn-out > div { background: var(--surface-sunk); border-radius: var(--r-chip); padding: 10px 13px; }
.scn-out .scn-l { display: block; font-size: var(--fs-kicker); color: var(--ink-3); margin-bottom: 3px; }
.scn-out .scn-v { font: 800 21px var(--display); color: var(--ink); line-height: 1.05; }
.scn-out .scn-v--good { color: var(--success); }
.scn-card .scn-note { font-size: var(--fs-caption); color: var(--ink-3); margin: 10px 0 0; line-height: 1.5; }
.flag { background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r-ctl); padding: 10px 14px; font-size: var(--fs-chrome); color: var(--accent-ink); margin: 12px 0; }

footer.site { background: var(--header); color: var(--paper-on-ink-2); padding: 26px 0; font-size: var(--fs-chrome-sm); }
footer.site b { color: var(--paper-on-ink); }
/* footer row linking out to the main CoreBridge site + its menus (always visible, all viewports), so dashboard
   readers know to look at the firm's website (the desktop site-header nav is hidden on mobile). */
.site-foot-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 16px;
  margin: 0 0 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.site-foot-nav__lead { font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-on-ink); margin-right: 4px; }
.site-foot-nav a { color: var(--paper-on-ink-2); text-decoration: none; font-weight: 600; }
.site-foot-nav a:hover { color: #CBC7BB; text-decoration: underline; }
/* "CoreBridge Advisory" external links at the bottom of the mobile menu sheet */
.mnav-extlink { text-decoration: none; color: var(--ink); }
.mnav-exticon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; color: var(--accent-deep); }

.btn {
  display: inline-block; background: var(--accent); color: var(--paper-bright, #FEFCF7); border: none; cursor: pointer;
  padding: 11px 20px; border-radius: var(--radius-control, 5px); font: 600 13.5px var(--text); letter-spacing: .01em;
}
.btn:hover { background: var(--accent-deep); }

.methodology h3 { margin: 18px 0 6px; color: var(--ink); font-size: var(--fs-base); }
.methodology p, .methodology li { font-size: var(--fs-small); }
.methodology ul { padding-left: 20px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-chrome); font-weight: 600; background: var(--paper-bright); border: 1.5px solid var(--rule); padding: 4px 10px; border-radius: var(--r-chip); }
.chip i { width: 10px; height: 10px; display: inline-block; }
.chip button { border: none; background: none; cursor: pointer; font-size: var(--fs-card); color: var(--ink-3); padding: 0 2px; }
.chip button:hover { color: var(--accent); }
.picklist { max-height: 200px; overflow: auto; padding: 4px; }

/* "Add to compare" toggle injected into each institution view's controls row */
.add-cmp-wrap { display: flex; align-items: end; }
.add-cmp {
  font-family: var(--mono); font-size: var(--fs-chrome-sm); font-weight: 600; letter-spacing: .02em;
  background: var(--accent-wash); color: var(--accent-ink); border: 1.5px solid var(--accent);
  border-radius: 10px; padding: 9px 15px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.add-cmp:hover:not(:disabled) { background: var(--accent); color: var(--paper-bright, #FEFCF7); }
.add-cmp.on { background: var(--accent); color: var(--paper-bright, #FEFCF7); border-color: var(--accent-deep); }
.add-cmp:disabled { opacity: .5; cursor: not-allowed; }

/* sticky compare tray — the user's peer group, visible and editable on every view */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(26, 23, 20, .94); color: var(--paper-on-ink);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 26px rgba(20, 17, 13, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.cmp-tray.open { transform: translateY(0); }
.cmp-tray-inner {
  max-width: var(--col-max); margin: 0 auto; padding: 11px var(--col-pad);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cmp-tray-label { font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-on-ink-2); }
.cmp-tray-label b { color: var(--chip-yellow); font-size: var(--fs-chrome-sm); margin-left: 4px; }
.cmp-tray-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.cmp-tchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-chrome-sm); font-weight: 600;
  background: rgba(255, 255, 255, .07); color: var(--paper-on-ink);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 4px 6px 4px 11px;
}
.cmp-tchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); display: inline-block; }
.cmp-tchip button { border: none; background: none; cursor: pointer; font-size: var(--fs-card); line-height: 1; color: var(--paper-on-ink-2); padding: 0 2px; }
.cmp-tchip button:hover { color: #CBC7BB; }
.cmp-tray-acts { display: flex; gap: 8px; }
.cmp-tray-go {
  font-family: var(--mono); font-size: var(--fs-chrome-sm); font-weight: 700; letter-spacing: .02em;
  background: var(--chip-yellow); color: var(--ink); border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer;
}
.cmp-tray-go:disabled { opacity: .45; cursor: not-allowed; }
.cmp-tray-clear {
  font-family: var(--mono); font-size: var(--fs-chrome-sm); font-weight: 600;
  background: none; color: var(--paper-on-ink-2); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.cmp-tray-clear:hover { color: #CBC7BB; border-color: rgba(255, 255, 255, .5); }
body.tray-open { padding-bottom: 76px; }
@media (max-width: 640px) {
  .cmp-tray-inner { padding: 9px 14px; gap: 9px; }
  .cmp-tray-label { width: 100%; }
  body.tray-open { padding-bottom: 116px; }
}
@media (prefers-reduced-motion: reduce) { .cmp-tray { transition: none; } }
.pickrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; font-size: var(--fs-chrome); cursor: pointer; }
.pickrow:hover { background: var(--paper); }
.pickrow.on { background: var(--accent-wash); font-weight: 600; }
.pickrow .meta2 { color: var(--ink-3); font-size: var(--fs-chrome-sm); }

/* KPI tiles stay a uniform size and pack densely (DO NOT re-add a double-width hero
   first tile — it pushed the last tile onto its own row and left dead space; removed
   16 Jun, and removed again after a file-revert re-introduced it). Uniform tiles keep
   the grid compact and the rows full. */

/* iPad / tablet tier (641–1024px), added in the bento refinement. The base layout
   jumped straight from desktop to phone, so iPad got the desktop tab bar wrapping
   into three rows. Here the tab bar becomes one clean swipeable strip, the content
   column tightens, and the bento grids reflow to a comfortable two-up via the
   existing auto-fit floors. A range query so it never collides with the ≤640 rules. */
@media (min-width: 641px) and (max-width: 1024px) {
  main { padding: 24px 20px 52px; }
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs .tab-cluster { flex: 0 0 auto; }
  nav.tabs a.tab-util { margin-left: 8px; flex: 0 0 auto; }
  section.block { padding: 24px var(--col-pad) 28px; }
  .controls { gap: 12px; }
}

/* Mobile — added 11 Jun 2026. The base layout had no phone breakpoints; at ~390px
   the charts (420px grid floor) and the select controls (grow to content width)
   overflowed the screen. This stacks the controls full-width, drops charts to one
   fluid column that shrinks to fit, makes the 9-tab bar swipe sideways instead of
   stacking, and lets wide data tables scroll inside their own box. */
@media (max-width: 640px) {
  header.site { padding: 22px 0 18px; }
  header.site > *, .bandwrap { padding-left: 16px; padding-right: 16px; }
  header.site h1 { font-size: clamp(25px, 7.5vw, 36px); }
  .cb-nav { animation: none; }   /* on mobile only the sticky mobile-nav pulses, not both */
  .beta-bar { padding: 9px 0; }
  nav.tabs { display: none; }
  /* the mobile nav reads unambiguously as a view switcher: a sticky accent bar
     with a persistent "jump to a view" cue above a clearly-bordered control that
     shows the current view and a prominent caret. No pulse needed; the cue +
     border + caret carry the affordance. */
  /* 26 Jul 2026, per direction: "make sure the CoreBridge menu is at the top on all the
     pages." This rule hid it outright on phones, on the reasoning that the mark
     rides on the Jump-to-a-view bar instead. But the mark is not the menu: with
     the header gone, the four hubs were the only pages on the site with no way
     to reach Our Team, Practices, Perspectives or Contact from a phone at all.
     The bar below still carries the tool's own views; this carries the firm's,
     collapsed behind the same Menu button every other page now uses. */
  .site-head { display: flex; }
  .site-head__inner { height: 64px; }
  .mobile-nav-wrap {
    display: flex; align-items: center; gap: 11px; position: sticky; top: 0; z-index: 60;
    border-radius: 0; padding: 8px 12px 9px;
    /* Real Apple-glass: teal tint dropped to ~78% so content actually frosts through,
       a top sheen highlight, and the shared liquid-glass blur/edge/drop tokens (matches the desktop nav). */
    background: var(--accent);
    -webkit-backdrop-filter: saturate(var(--lg-sat)) blur(var(--lg-blur-nav));
    backdrop-filter: saturate(var(--lg-sat)) blur(var(--lg-blur-nav));
    border: 1px solid rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.40);
    border-bottom-color: var(--lg-edge-bot);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--lg-drop);
  }
  .mobile-nav-brand { flex: 0 0 auto; display: flex; align-items: center; }
  .mobile-nav-brand img { width: 30px; height: 30px; display: block; }
  .mobile-nav-main { flex: 1 1 auto; min-width: 0; }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mobile-nav-wrap { background: var(--accent); }
  }
  .mobile-nav-cue {
    display: block; font: 700 9.5px var(--mono); letter-spacing: .15em; text-transform: uppercase;
    color: rgba(255, 255, 255, .92); margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(20, 17, 13, .35);   /* keeps the small cue legible over the frosted glass */
  }
  /* the native <select> is kept only as the data + routing source; the visible control
     is the M3 menu trigger (a button), styled to match the frosted nav pill it sits in */
  .mnav-data { display: none; }
  .mnav-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin: 0; padding: 12px 14px; text-align: left; cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, .55); border-radius: var(--radius-control, 5px);
    /* AUDIT 26 Jul 2026 (§4.7 contrast): #CBC7BB over the 12% white frost on the
       nav ground measured 3.99:1 at 16px/700 — under the 4.5:1 AA floor, because
       16px is not "large text". --paper #F2F0EF on the same ground is 5.97:1 and
       matches the .mnav-cue above it. */
    background: rgba(255, 255, 255, .12); color: #F2F0EF;
    font: 700 16px var(--text); letter-spacing: .01em;
    -webkit-appearance: none; appearance: none;
  }
  .mnav-trigger-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav-trigger-caret { flex: 0 0 auto; transition: transform .2s ease; }
  .mnav-trigger[aria-expanded="true"] .mnav-trigger-caret { transform: rotate(180deg); }
  .mnav-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  main { padding: 22px 16px 48px; }
  .controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .controls > * { width: 100%; }
  /* the desktop rule (.controls > div { flex: 1 1 240px }) makes 240px a horizontal
     basis when the row flexes; in this column it becomes a 240px MINIMUM HEIGHT, so each
     dropdown sat in a 240px box with ~190px of dead space below it. Reset to content height
     here — matched at .controls > div specificity so it actually overrides the base rule. */
  .controls > div { flex: 0 0 auto; }
  select, input[type=range], input[type=text] { width: 100%; min-width: 0; max-width: 100%; }
  select { font-size: var(--fs-chrome-sm); padding: 9px 13px; }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .charts > * { min-width: 0; }
  .charts canvas { max-width: 100%; }
  /* allow y-axis labels to overflow the card edge rather than being clipped */
  .card.chartcard { overflow: visible; }
  table.data { display: block; overflow-x: auto; }
  footer.site { padding: 22px 0; }
}

/* ── Section-3 gap cards: shadow + ROI pulse animations ────────────── */
.sh-gap-card {
  border-radius: 0;
  overflow: hidden;
  border: 1.5px solid rgba(142,46,46,.22);
  box-shadow: 0 2px 14px rgba(142,46,46,.11), 0 1px 4px rgba(20, 17, 13,.07);
  transition: box-shadow .25s;
}
.sh-gap-card:hover {
  box-shadow: 0 4px 22px rgba(142,46,46,.18), 0 2px 8px rgba(20, 17, 13,.1);
}
@keyframes shRoiBg {
  0%, 100% { background: rgba(61,90,61,.06); }
  50%       { background: rgba(61,90,61,.16); }
}
@keyframes shGoldBg {
  0%, 100% { background: rgba(212,160,23,.07); }
  50%       { background: rgba(212,160,23,.18); }
}
.sh-roi-pulse  { animation: shRoiBg  2.4s ease-in-out infinite; }
.sh-gold-pulse { animation: shGoldBg 2.4s ease-in-out infinite; }

/* signal panel (profile) — "don't make me find the signal", 13 Jun 2026.
   Three columns (strengths / watch / fastest), then a stands-out band. Each
   item is a link to the measure's full series. On brand: square cards, warm
   shadow, the canonical success-green / danger-red (--success / --danger). */
.signal-block { margin-top: 26px; }
.signal-cols { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }
.signal-col, .signal-standout { padding: 0; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--shadow-tile); }
.signal-standout { margin-top: 14px; border-top: 3px solid var(--ink); }
.sg-strength { border-top: 3px solid var(--success); }
.sg-watch { border-top: 3px solid var(--danger); }
.sg-move { border-top: 3px solid var(--accent); }
.sig-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-card); color: var(--ink);
  letter-spacing: -0.01em; padding: 13px 16px; border-bottom: 1px solid var(--rule-soft);
}
.sig-head span {
  font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; white-space: nowrap;
}
.sig-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; }
.sig-item:last-child { border-bottom: none; }
.sig-item:hover { background: var(--accent-wash); }
.sig-rank { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; min-width: 60px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sg-strength .sig-rank { color: var(--success); }
.sg-watch .sig-rank { color: var(--danger); }
.sig-rank.yoy-good { color: var(--success); }
.sig-rank.yoy-bad { color: var(--danger); }
.sig-rank.yoy-neutral { color: var(--ink-2); }
.sig-rank .of { font-family: var(--text); font-weight: 400; font-size: var(--fs-kicker); color: var(--ink-3); }
.sig-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-name { font-size: var(--fs-chrome); font-weight: 600; color: var(--ink); line-height: 1.3; }
.sig-meta { font-size: var(--fs-kicker); color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.4; }
.sig-empty { padding: 14px 16px; font-size: var(--fs-chrome-sm); color: var(--ink-3); line-height: 1.5; }
/* the honest zero case (ranked, but nothing in the quartile): state the finding plainly as a
   deliberate read, not a grey blank. A hairline teal top rule and the editorial serif; no icon. */
.sig-empty--honest { margin: 2px 14px; padding: 13px 0 2px; border-top: 1px solid var(--accent); font-family: var(--serif); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
/* fastest-moving items: name on top, then a year-on-year and a multi-year row,
   each coloured success-green (rise) / danger-red (fall) with the sector move beside it */
.sig-move-item { flex-direction: column; align-items: stretch; gap: 5px; }
.sig-move-body { gap: 4px; }
.sig-move-row { display: flex; align-items: baseline; gap: 9px; font-size: var(--fs-chrome-sm); }
.sig-move-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); min-width: 30px; }
.sig-move-row b { font-weight: 700; min-width: 58px; font-variant-numeric: tabular-nums; }
.sig-move-row b.yoy-good { color: var(--success); }
.sig-move-row b.yoy-bad { color: var(--danger); }
.sig-peer { font-size: var(--fs-kicker); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sig-standout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
/* Source-country small multiples: a grid of mini trend charts, each built like the full
   trend charts (year ticks across the bottom, compact enrolment ticks up the side) with a
   green-peak / red-trough pulse. The canvas is taller than a sparkline so the axis labels fit. */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; margin: 4px 0 2px; }
.sm-card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-tile); padding: 12px 13px 10px; }
.sm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sm-name { font-weight: 600; font-size: var(--fs-chrome); color: var(--ink); }
.sm-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-chrome); color: var(--accent-deep); }
.sm-sub { font-size: var(--fs-kicker); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 1px; min-height: 14px; }
.sm-cv { position: relative; height: 112px; margin-top: 8px; }
/* "How to read the numbers": themed subheadings + bulleted figures */
/* themed reading flows into balanced columns so it fills the box width (no lopsided
   empty right margin) while keeping a readable line length; collapses to one column
   on narrow screens via the column-width floor. */
.reading { column-width: 360px; column-gap: 36px; }
.reading-sec { margin-bottom: 15px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.reading-sec:last-child { margin-bottom: 0; }
.reading-sec h4 { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin: 0 0 6px; }
.reading-sec ul { margin: 0; padding-left: 18px; }
.reading-sec li { font-size: var(--fs-chrome); color: var(--ink-2); margin-bottom: 5px; line-height: 1.55; }
.reading-sec li b { color: var(--ink); font-weight: 600; }

/* Per-tab "read": the interpretation layer carried onto every deep single-university tab. */
.tab-read { border: 1px solid var(--line); background: var(--paper-2); border-radius: var(--radius-control, 5px); padding: 15px 20px 13px; margin: 0 0 22px; }
.tab-read-h { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin: 0 0 9px; }
.tab-read ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 34px; }
.tab-read li { font-size: var(--fs-chrome); color: var(--ink-2); margin-bottom: 6px; line-height: 1.55; break-inside: avoid; -webkit-column-break-inside: avoid; }
.tab-read li b { color: var(--ink); font-weight: 600; }
.tab-read-foot { font-size: var(--fs-kicker); color: var(--ink-3); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .tab-read ul { columns: 1; } }

/* Method-page contents: jump box to each sub-section on the long Method tab. */
.method-toc { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); padding: 15px 20px 16px; margin: 0 0 24px; }
.method-toc .mt-h { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin: 0 0 10px; }
.method-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 34px; counter-reset: mt; }
.method-toc li { font-size: var(--fs-chrome); line-height: 1.5; margin-bottom: 6px; break-inside: avoid; -webkit-column-break-inside: avoid; counter-increment: mt; }
.method-toc a { color: var(--ink-2); text-decoration: none; }
.method-toc a::before { content: counter(mt) ". "; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.method-toc a:hover { color: var(--accent-deep); text-decoration: underline; }
@media (max-width: 720px) { .method-toc ol { columns: 1; } }

/* Measure definition surfaced at point of selection in Rank / Compare / Explore. */
.measure-meta { font-size: var(--fs-chrome); color: var(--ink-2); line-height: 1.55; margin: -2px 0 14px; max-width: none; }
.measure-meta .mm-dir { color: var(--ink); font-weight: 600; }
.measure-meta a { color: var(--accent-deep); text-decoration: none; }
.measure-meta a:hover { text-decoration: underline; }

/* Progressive disclosure on the marathon pages: per-section collapse + a "Collapse all" control. */
.sec-toggle { float: right; width: 30px; height: 30px; margin: 0 0 6px 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-soft); border-radius: var(--radius-control, 5px); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.sec-toggle:hover { border-color: var(--page-accent, var(--accent)); color: var(--page-accent-deep, var(--accent-deep)); }
.sec-toggle-i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); margin-top: 3px; transition: transform .18s; }
section.block.sec-collapsed .sec-toggle-i { transform: rotate(45deg); margin-top: -3px; }
section.block.sec-collapsed > :not(h2) { display: none; }
section.block.sec-collapsed { padding-bottom: 18px; }
.sn-collapse-all { font: 600 11.5px var(--mono); letter-spacing: .04em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 0; padding: 5px 14px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-card); transition: border-color .15s, color .15s; }
.sn-collapse-all:hover { border-color: var(--page-accent, var(--accent)); color: var(--page-accent-deep, var(--accent-deep)); }
@media (prefers-reduced-motion: reduce) { .sec-toggle-i { transition: none; } }

/* inline glossary term: dotted underline + native hover definition */
abbr.gloss { text-decoration: none; border-bottom: 1px dotted var(--accent-soft); cursor: help; }
abbr.gloss:hover { border-bottom-color: var(--accent); }

/* signature read: the cross-dataset tension callout */
.card.tension { background: var(--accent-wash); }
.card.tension .tension-line { margin: 0 0 10px; font-size: var(--fs-card); line-height: 1.55; color: var(--ink); }
.card.tension .tension-line:last-child { margin-bottom: 0; }
/* worry-briefing "question to ask" card — accent lead-in, mirrors the tension card */
.worry-briefing .worry-q { margin-top: var(--gap); background: var(--accent-wash); }
.worry-briefing .worry-q .tension-line { margin: 6px 0 0; font-size: var(--fs-card); line-height: 1.55; color: var(--ink); }

/* empirical peer group: a compact grid of nearest universities */
.peer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.peer-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-chip); text-decoration: none; box-shadow: var(--shadow-chip); transition: border-color .12s, box-shadow .12s; }
.peer-item:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-lift); }
.peer-item .peer-name { font-weight: 600; color: var(--ink); font-size: var(--fs-small); line-height: 1.3; }
.peer-item .peer-meta { font-size: var(--fs-kicker); color: var(--ink-3); font-family: var(--mono); letter-spacing: .02em; }

/* full scorecard: rank-of-36 (tier-coloured), direction-coloured trend sparkline,
   1yr move + 5-yr rank movement */
.sc-table th, .sc-table td { white-space: nowrap; }
.sc-table td:first-child { white-space: normal; min-width: 200px; }
.sc-spark { padding: 3px 10px; vertical-align: middle; }
.spark { display: block; }
/* per-step trend colours: green = moved the good way, red = the other way, teal =
   flat or no clear good direction */
.spark line { stroke-width: 1.5px; stroke-linecap: round; }
.spark .sp-good { stroke: var(--success); }
.spark .sp-bad  { stroke: var(--danger); }
.spark .sp-neu  { stroke: var(--accent); }
.spark circle.spd-good { fill: var(--success); }
.spark circle.spd-bad  { fill: var(--danger); }
.spark circle.spd-neu  { fill: var(--accent); }
.sc-year { font-size: var(--fs-caption); color: var(--ink-3); font-weight: 400; }
.sc-rankmove { font-weight: 700; font-size: var(--fs-chrome-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-rankmove .of, .sc-rank .of { color: var(--ink-3); font-size: 0.82em; font-weight: 400; }
.sc-rank { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sc-rank.sc-good { color: var(--success); }
.sc-rank.sc-bad { color: var(--danger); }
@media print {
  /* keep the direction colours in the printed pack; only the neutral teal needs
     darkening for paper (good/bad already use print-safe brand tokens) */
  .spark .sp-neu { stroke: var(--accent-deep) !important; }
  .spark circle.spd-neu { fill: var(--accent-deep) !important; }
  .sc-rankmove.yoy-good { color: var(--success) !important; }
  .sc-rankmove.yoy-bad { color: var(--danger) !important; }
  /* neutral 1-yr / rank-move text darkens for paper so it reads as "no clear
     direction", not as a disabled grey */
  .sc-table .yoy-neutral, .sc-rankmove.yoy-neutral { color: #45403A !important; }
}
.sig-standout-grid .sig-item { border-right: 1px solid var(--rule-soft); }
@media (max-width: 640px) {
  .signal-cols { grid-template-columns: 1fr; }
  .sig-standout-grid { grid-template-columns: 1fr; }
  .sig-standout-grid .sig-item { border-right: none; }
}

/* A4 information pack: print-only front matter (masthead + at-a-glance), hidden on screen */
.print-pack { display: none; }
@page { size: A4 landscape; margin: 11mm 13mm; }   /* the scorecard pack prints A4 landscape so the 9-column table has room */
@media print {
  /* bespoke A4 print: show ONLY the content container. One rule hides the whole page shell
     (site header + nav, the hero, the beta bar, the view tabs, mobile + drawer nav, footer,
     and any decoration) so none of the web chrome can leak onto the PDF. */
  body > *:not(#main) { display: none !important; }
  /* and the interactive bits that live inside the content itself */
  #main .controls, #main .btn, #main .section-nav, .sc-screen-wordmark, .sc-screen-title,
  .cmp-tray, .starter { display: none !important; }
  body { background: #fff; color: #031602; font-size: 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main { padding: 0; max-width: none; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid var(--rule); }
  .kpi.kpi-lead::after, .kpi.kpi-watch::after { display: none !important; }   /* no on-screen pulses in the PDF */
  .sc-screen-wordmark, .sc-screen-title { display: none !important; }   /* the print pack replaces the on-screen header */
  .print-pack { display: block; }
  .ppk-head { border-bottom: 2.5px solid var(--accent); padding-bottom: 9px; margin-bottom: 12px; position: relative; }
  .ppk-wordmark { height: 28px; position: absolute; right: 0; top: 2px; }
  .ppk-kicker { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
  .ppk-name { font-family: var(--serif); font-size: 27px; line-height: 1.04; margin: 4px 0 3px; color: #031602; letter-spacing: -0.01em; }
  .ppk-sub { font-size: 9px; color: #666; max-width: 78%; }
  /* key-findings band: pulls the dashboard's signal, real-terms and focus reads */
  .ppk-findings { background: var(--paper-bright); border: 0.5pt solid var(--rule-hairline); border-radius: 3mm; padding: 9px 12px 10px; margin-bottom: 12px; break-inside: avoid; box-shadow: 0 0.3mm 0.8mm rgba(20, 17, 13, .05), 0 1.2mm 2.6mm -1mm rgba(20, 17, 13, .09); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ppk-fh { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 4px; }
  .ppk-findings ul { margin: 0; padding: 0; list-style: none; }
  .ppk-findings li { font-size: 9.7px; line-height: 1.5; color: var(--ink-2); margin-bottom: 2px; }
  .ppk-flbl { display: inline-block; min-width: 52px; font-family: var(--mono); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; color: #888; font-weight: 700; vertical-align: 1px; }
  .ppk-fstr { color: var(--success); } .ppk-fwat { color: var(--danger); }
  .ppk-gh { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #999; margin-bottom: 5px; }
  .ppk-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 6px; }
  .ppk-stat { border: 1px solid #E0DCCF; border-radius: 6px; padding: 6px 8px 7px; break-inside: avoid; background: var(--paper-bright); }
  .ppk-k { font-family: var(--mono); font-size: 7px; letter-spacing: .03em; text-transform: uppercase; color: #777; line-height: 1.2; min-height: 17px; }
  .ppk-v { font-family: var(--display); font-weight: 700; font-size: 18px; color: #031602; line-height: 1.05; }
  .ppk-v.ppk-good { color: var(--success); } .ppk-v.ppk-bad { color: var(--danger); }
  .ppk-r { font-size: 7.3px; color: #777; margin-top: 1px; }
  .ppk-med { font-size: 6.8px; color: #999; margin-top: 2px; line-height: 1.4; }
  /* interpretation + questions: turns the pack from a data sheet into a briefing */
  .ppk-rh { font-family: var(--serif); font-size: var(--fs-chrome-sm); color: #031602; margin: 13px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--paper-3); break-after: avoid; }
  .ppk-reading { columns: 3; column-gap: 20px; margin-bottom: 4px; }   /* 3-up reading suits the landscape width */
  .ppk-reading .reading-sec { break-inside: avoid; margin-bottom: 6px; }
  .ppk-reading .reading-sec h4 { font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 2px; }
  .ppk-reading .reading-sec ul { margin: 0; padding-left: 12px; }
  .ppk-reading .reading-sec li { font-size: 8.4px; line-height: 1.4; color: var(--ink-2); margin-bottom: 1.5px; }
  .ppk-reading .reading-sec li b { color: #031602; }
  .ppk-prompts { margin: 0 0 8px; padding-left: 15px; break-inside: avoid; }
  .ppk-prompts li { font-size: 9.3px; line-height: 1.45; color: var(--ink-2); margin-bottom: 3px; }
  /* the scorecard table must fit A4 width without clipping: kill the scroll wrapper, fix the
     layout to the page, scale the sparkline into its cell, repeat the header on each page */
  #main div[style*="overflow"] { overflow: visible !important; }
  /* table starts on its own page after the front matter */
  .sc-table-wrap { break-before: page; overflow: visible !important; }
  .sc-table { font-size: 8.4px; table-layout: fixed; width: 100%; break-before: auto; }
  .sc-table thead { display: table-header-group; }
  .sc-table th, .sc-table td { padding: 2.5px 4px; overflow: hidden; }
  .sc-table th:first-child, .sc-table td:first-child { width: 20%; white-space: normal; word-break: break-word; }
  .sc-table .sc-spark { width: 11%; }
  .sc-table .sc-spark svg { width: 100% !important; max-width: 60px; height: 15px; }
  .sc-table th { background: #0C2410 !important; color: #CBC7BB !important; position: static; }
  .sc-table tr.section-row td { background: var(--accent-wash) !important; color: var(--accent-deep) !important; }
  .sc-table tr, .sc-spark { break-inside: avoid; }
  .sc-rank.sc-good { color: var(--success) !important; } .sc-rank.sc-bad { color: var(--danger) !important; }
}
/* ---- Sector Financial Health panels (sh-*) ----
   Aligned to the standard .card system: same background, shadows, padding, font tokens and
   hover lift as section.block .card. Pulse rings use the same ::after / cb-*-pulse mechanism
   as .kpi.kpi-lead / .kpi.kpi-watch so the animation rhythm is identical site-wide. */
.sh-h2 { font-family: var(--display); font-size: clamp(21px,2.1vw,26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 6px; color: var(--ink); }
.sh-lede { font-size: var(--fs-chrome); color: var(--ink-3); max-width: 720px; line-height: 1.6; margin-bottom: 24px; }
.sh-section-split { display:grid; grid-template-columns:2fr 1fr; gap:0 36px; align-items:start; margin-bottom:28px; }
.sh-section-split .sh-h2 { margin-bottom:0; }
/* DS11, 26 Jul 2026: upright, not italic. Canonical v4.1 retired the italic
   register; a chart-section lede is apparatus and reads as apparatus through
   size, colour and the rule beside it, not through a slant. */
.sh-section-split .sh-lede { font-size: var(--fs-kicker); line-height:1.65; color:var(--ink-3); font-style:normal; border-left:2px solid rgba(20, 17, 13,.12); padding-left:12px; margin:4px 0 0; max-width:none; }
@media (max-width:700px) { .sh-section-split { grid-template-columns:1fr; gap:12px; } .sh-section-split .sh-lede { border-left:none; padding-left:0; } }

/* KPI tiles — standard card inside a section */
.sh-kpi-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(208px,1fr)); gap:var(--gap-sm); margin-bottom:24px; }
/* Formula row (Section 02): hide + and = operators on mobile, stack cards */
@media (max-width:640px) { .sh-formula-row { grid-template-columns:1fr !important; } .sh-formula-op { display:none !important; } }
.sh-kpi { background:var(--paper-bright); border:1px solid var(--rule-soft); border-radius:var(--r-card); padding:var(--pad-card); display:flex; flex-direction:column; box-shadow:var(--shadow-tile), var(--rim-inset); position:relative; transition:box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1), background .2s; }
@media (hover:hover) { .sh-kpi:hover { background:#fff; box-shadow:var(--shadow-lift), var(--rim-inset); transform:translateY(-3px); } }
.sh-kpi__label { font:700 10.5px var(--mono); letter-spacing:.06em; color:var(--ink-3); margin-bottom:6px; text-transform:uppercase; min-height:27px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sh-kpi__value { font:700 30px var(--display); letter-spacing:-0.02em; line-height:1.1; margin-bottom:6px; min-height:33px; white-space:nowrap; }
.sh-kpi__note { font-size: var(--fs-chrome-sm); color:var(--ink-3); line-height:1.45; flex:1; }
.sh-kpi__source { font:400 10px var(--mono); letter-spacing:.03em; color:var(--ink-3); opacity:.75; margin-top:10px; padding-top:8px; border-top:1px solid var(--rule-soft); line-height:1.5; }
/* colour-keyed tiles: border + value colour + pulsing ::after ring — identical mechanism to .kpi.kpi-lead / .kpi.kpi-watch */
.sh-kpi--red { border-color:rgba(142,46,46,.65); }
.sh-kpi--red .sh-kpi__value { color:var(--danger); }
.sh-kpi--red::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 var(--watch-ring); animation:cb-watch-pulse 2.3s ease-in-out infinite; }
.sh-kpi--green { border-color:rgba(61,90,61,.65); }
.sh-kpi--green .sh-kpi__value { color:var(--success); }
.sh-kpi--green::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 var(--lead-ring); animation:cb-lead-pulse 2.2s ease-in-out infinite; }
.sh-kpi--amber { border-color:rgba(180,110,20,.55); }
.sh-kpi--amber .sh-kpi__value { color:#8E6E2E; }
.sh-kpi--amber::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(180,110,20,.55); animation:cb-amber-pulse 2.3s ease-in-out infinite; }
@keyframes cb-amber-pulse { 0% { box-shadow:0 0 0 0 rgba(180,110,20,.55); } 70%,100% { box-shadow:0 0 0 9px rgba(180,110,20,0); } }
.sh-kpi--blue { border-color:rgba(35, 76, 80,.5); }
.sh-kpi--blue .sh-kpi__value { color:var(--accent-deep); }
.sh-kpi--blue::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(35, 76, 80,.5); animation:cb-blue-pulse 2.25s ease-in-out infinite; }
@keyframes cb-blue-pulse { 0% { box-shadow:0 0 0 0 rgba(35, 76, 80,.5); } 70%,100% { box-shadow:0 0 0 9px rgba(35, 76, 80,0); } }
@media (prefers-reduced-motion:reduce) { .sh-kpi--red::after, .sh-kpi--green::after, .sh-kpi--amber::after, .sh-kpi--blue::after { animation:none; } }
/* drifting smoke behind a card (fossil-fuel context) — charcoal wisps rising from the
   base. Uses ::before (the pulse uses ::after); animated via background-position so it
   stays clipped inside the rounded card and never disturbs the pulse ring. */
.sh-smoke > * { position: relative; z-index: 1; }
.sh-smoke::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  /* The drifting smoke illustration is retired (WI-1). It literalised a data
     point with atmosphere; the figure and its caption carry the meaning. */
  background: none;
}
@keyframes cb-smoke { 0% { background-position: 38% 100%; } 100% { background-position: 62% 78%; } }
@media (prefers-reduced-motion: reduce) { .sh-smoke::before { animation: none; } }

/* chart cards — same base as standard .card.chartcard, with hover lift */
.sh-chart-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px,1fr)); gap:var(--gap); margin-bottom:24px; }
.sh-chart-card { background:var(--paper-bright); border:1px solid var(--rule-soft); border-radius:var(--r-card); padding:var(--pad-card); box-shadow:var(--shadow-tile), var(--rim-inset); position:relative; transition:box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1), background .2s; }
@media (hover:hover) { .sh-chart-card:hover { background:#fff; box-shadow:var(--shadow-lift), var(--rim-inset); transform:translateY(-3px); } }
.sh-chart-card h3 { font:700 15px var(--display); letter-spacing:-0.01em; margin-bottom:4px; color:var(--ink-2); }
.sh-chart-card p { font-size: var(--fs-chrome-sm); color:var(--ink-3); margin-bottom:12px; line-height:1.45; }
.sh-chart-card .sh-ref { margin-top:10px; }
.sh-chart-wrap { position:relative; }
.sh-ref { font:400 10px var(--mono); letter-spacing:.03em; color:var(--ink-3); opacity:.75; padding-top:8px; border-top:1px solid var(--rule-soft); line-height:1.5; margin-top:8px; }
/* (removed the .sh-trend-dot pulsing corner markers per direction: red dots flashing in the section-2 card corners) */

/* country comparison cards */
.sh-compare-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--gap-sm); margin-bottom:24px; }
.sh-compare-card { background:var(--paper-bright); border:1px solid var(--rule-soft); border-radius:var(--r-card); padding:var(--pad-card); box-shadow:var(--shadow-tile), var(--rim-inset); transition:box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1), background .2s; }
@media (hover:hover) { .sh-compare-card:hover { background:#fff; box-shadow:var(--shadow-lift), var(--rim-inset); transform:translateY(-3px); } }
.sh-compare-card h3 { font:700 15px var(--display); letter-spacing:-0.01em; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--rule-soft); color:var(--ink); }
.sh-compare-card h3 .country-code { font:400 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:2px; }
.sh-compare-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--rule-soft); font-size: var(--fs-chrome-sm); }
.sh-compare-row:last-child { border-bottom:none; }
.sh-compare-row .metric { color:var(--ink-3); padding-right:8px; }
.sh-compare-row .val { font-weight:600; font-size: var(--fs-chrome-sm); text-align:right; }
.sh-compare-row .val--strong { color:var(--success); }
.sh-compare-row .val--mid { color:#8E6E2E; }
.sh-compare-row .val--weak { color:var(--danger); }

/* force / pressure grid */
.sh-force-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--gap-sm); margin-bottom:24px; }
.sh-force { background:var(--paper-bright); border:1px solid var(--rule-soft); border-radius:var(--r-card); padding:var(--pad-card); box-shadow:var(--shadow-tile), var(--rim-inset); transition:box-shadow .2s cubic-bezier(.2,.7,.3,1), transform .2s cubic-bezier(.2,.7,.3,1), background .2s; }
@media (hover:hover) { .sh-force:hover { background:#fff; box-shadow:var(--shadow-lift), var(--rim-inset); transform:translateY(-3px); } }
.sh-force__dir { font:700 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.sh-force__dir--up   { color:var(--success); }
.sh-force__dir--down { color:var(--danger); }
.sh-force__dir--both { color:#8E6E2E; }
.sh-force h3 { font:700 14px var(--display); margin-bottom:6px; color:var(--ink); }
.sh-force p  { font-size: var(--fs-chrome-sm); color:var(--ink-2); line-height:1.5; margin-bottom:8px; }
.sh-force .stat { font:700 14px var(--display); color:var(--ink); margin-bottom:4px; }

/* ── Mobile audit fixes ── */
@media (max-width:640px) {
  /* 1. KPI value: allow wrapping so long dollar/percent strings don't bleed outside cards */
  .sh-kpi__value { white-space:normal; overflow-wrap:break-word; font-size:24px; }
  /* 2. KPI label: allow 3 lines on single-column mobile layout */
  .sh-kpi__label { -webkit-line-clamp:3; min-height:auto; }
  /* 3. All KPI rows: restore auto-fill responsive — overrides every inline repeat(N,1fr) */
  .sh-kpi-row { grid-template-columns:repeat(auto-fill, minmax(208px,1fr)) !important; }
  /* 4. Chart cards: 380px minimum exceeds phone width — force single column */
  .sh-chart-grid { grid-template-columns:1fr; }
  /* 5. Compare rows: reduce font so long metric labels don't crowd the value */
  .sh-compare-row { font-size: var(--fs-kicker); }
  .sh-compare-row .val { font-size: var(--fs-kicker); }
  /* 6. Overhead comparison bars: constrain label cell on narrow screens */
  .sh-oc__lbl-cell { flex:0 0 110px; }
  /* 7. Scroll margin: account for taller sticky nav stack on mobile */
  section.block { scroll-margin-top:120px; }
}

/* research overhead comparison bars (sh-oc) */
.sh-oc { padding:2px 0 4px; }
.sh-oc__scale { display:flex; margin-bottom:8px; }
.sh-oc__lbl-cell { flex:0 0 148px; padding-right:12px; }
.sh-oc__lbl-cell strong { font:700 13px var(--display); display:block; line-height:1.2; }
.sh-oc__lbl-cell em { font:400 10px var(--mono); color:var(--ink-3); font-style:normal; display:block; margin-top:1px; }
.sh-oc__lbl-cell--inst { font:400 11.5px var(--mono); color:var(--ink-3); padding-left:12px; }
.sh-oc__ticks { flex:1; position:relative; height:16px; }
.sh-oc__ticks span { position:absolute; font:400 9.5px var(--mono); color:var(--ink-3); transform:translateX(-50%); }
.sh-oc__ticks span:first-child { transform:none; }
.sh-oc__row { display:flex; align-items:center; margin-bottom:8px; min-height:28px; }
.sh-oc__row--sm { margin-bottom:5px; min-height:20px; }
/* DATA MARK: repeating-linear-gradient here draws the chart's vertical
   gridlines at fixed percentages — a ruled axis in --rule-soft, not a wash. */
.sh-oc__bars { flex:1; display:flex; align-items:center; position:relative; min-height:26px; background-image:linear-gradient(90deg,transparent calc(23.53% - 0.5px),var(--rule-soft) calc(23.53% - 0.5px),var(--rule-soft) calc(23.53% + 0.5px),transparent calc(23.53% + 0.5px),transparent calc(47.06% - 0.5px),var(--rule-soft) calc(47.06% - 0.5px),var(--rule-soft) calc(47.06% + 0.5px),transparent calc(47.06% + 0.5px),transparent calc(70.59% - 0.5px),var(--rule-soft) calc(70.59% - 0.5px),var(--rule-soft) calc(70.59% + 0.5px),transparent calc(70.59% + 0.5px),transparent calc(94.12% - 0.5px),var(--rule-soft) calc(94.12% - 0.5px),var(--rule-soft) calc(94.12% + 0.5px),transparent calc(94.12% + 0.5px)); }
.sh-oc__bar { height:26px; border-radius:2px; display:flex; align-items:center; flex-shrink:0; }
.sh-oc__bar--sm { height:18px; }
.sh-oc__bar--au   { background:var(--danger); }
.sh-oc__bar--uk   { background:#B08010; }
.sh-oc__bar--us   { background:var(--success); }
.sh-oc__bar--inst { background:#2D4A2D; opacity:.7; }
.sh-oc__pct { font:700 11px var(--mono); color:#CBC7BB; padding:0 8px; white-space:nowrap; }
/* AUDIT 26 Jul 2026 (§4.7 contrast): the value sits inside its bar, and #CBC7BB on the gold
   bar is 2.09:1. Ink on gold is 5.31:1. Same fix as the Australian hub, kept in step. */
.sh-oc__bar--uk .sh-oc__pct { color: #031602; }
.sh-oc__gap { height:26px; border:1.5px dashed var(--danger); border-radius:0 2px 2px 0; opacity:.6; display:flex; align-items:center; flex-shrink:0; margin-left:2px; }
.sh-oc__gap-txt { font:400 9.5px var(--mono); color:var(--danger); padding:0 7px; white-space:nowrap; }
.sh-oc__sect { font:700 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:10px 0 7px 148px; border-top:1px solid var(--rule-soft); margin-top:4px; }
@media (max-width:560px) { .sh-oc__lbl-cell { flex:0 0 90px; } .sh-oc__lbl-cell--inst { padding-left:6px; } .sh-oc__sect { padding-left:90px; } .sh-oc__gap-txt { display:none; } }

/* ===== Landing (home) view ===== */
/* Country photo beside the hero text (10 Aug 2026, per direction: "a photo of the country, to help
   knowing where your landing is, a visual key also"). Same photo, same grayscale treatment as the
   university-intelligence chooser page's mosaic — a reader who has already picked a sector gets
   the visual anchor the chooser used to help pick it, one screen down. --r-card is 0 under the
   current canonical (structure is square), so this is square by inheritance, not by choice here. */
/* ROW HEIGHT NOW SET BY REAL CONTENT, 10 Aug 2026 (per direction: "the photo is to the right, this will
   reduce white space"). The start-here picker moved inside .home-hero__copy (was its own
   full-width row below the hero), so the copy column now holds the intro paragraph AND the
   picker, and the photo sits beside that whole stack rather than two lines of text alone. The
   spacing that used to live on .mineband's own bottom margin moves here, onto the row, since the
   picker no longer ends a standalone block. align-items is flex-start, not center: the copy
   column is now often TALLER than the photo, and centring a taller column against a shorter photo
   would put empty space above the photo — flex-start lets both start level at the top instead,
   which is right for whichever one happens to be taller on a given hub. */
.home-hero{display:flex;align-items:flex-start;gap:28px;margin-bottom:clamp(28px, 3vw, 40px)}
.home-hero__copy{flex:1 1 480px;min-width:0}
.home-hero__photo{flex:0 0 220px;position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/5}
.home-hero__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.home-hero__photo span{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font:700 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(3,22,2,.74),transparent)}
@media (max-width:760px){.home-hero{flex-direction:column}
/* THE MOBILE WHITESPACE BUG, 10 Aug 2026 (per direction: "fix the mobile phone as it has white space
   also"). .home-hero__copy carries `flex-basis:480px` for the DESKTOP row, where flex-basis sets
   a minimum WIDTH. Nothing reset it for this column layout, so under flex-direction:column the
   same 480px is read as a minimum HEIGHT instead — flex-basis follows the main axis, and the main
   axis rotates with the direction. Measured on AU: the copy column held 99px of actual text and
   stood 480px tall, a 381px gap of dead air that had nothing to do with the photo at all.
   flex-basis:auto lets it size to its own content, the same fix rotated 90 degrees. */
.home-hero__copy{flex-basis:auto}
.home-hero__photo{flex-basis:auto;width:100%;aspect-ratio:16/9}
.mineband__ctl{width:100%}.mineband__ctl .instselect{flex:1 1 auto;min-width:0}.mineband-go{flex:0 0 auto}}
.home{max-width:none}
.home-intro{font-family:var(--serif);font-size:clamp(15px,1.8vw,19px);color:var(--ink-soft);margin:0 0 20px;max-width:62ch;line-height:1.5}
.home-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.home-card{grid-column:span 2;display:flex;flex-direction:column;gap:9px;background:var(--paper-bright);border:1px solid var(--rule-soft);border-radius:0;padding:20px;text-decoration:none;color:var(--ink);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
a.home-card:hover,.home-card:focus-within{transform:translateY(-2px);box-shadow:0 10px 28px rgba(20, 17, 13,.09);border-color:var(--accent)}
.home-card--lead{grid-column:span 4;grid-row:span 2;background:var(--ink-surface);color:var(--paper-on-ink);border-color:transparent}
.home-card--lead:hover{box-shadow:0 14px 36px rgba(20, 17, 13,.22)}
.home-card--wide{grid-column:span 4}
.home-kick{font-family:var(--mono);font-size: var(--fs-kicker);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.home-card--lead .home-kick{color:var(--chip-yellow)}
.home-card h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,28px);line-height:1.04;margin:0;color:inherit}
.home-card p{font-size: var(--fs-chrome);color:var(--ink-soft);margin:0;line-height:1.5}
.home-card--lead p{color:var(--paper-on-ink);opacity:.82}
.home-cta{margin-top:auto;font-family:var(--mono);font-size: var(--fs-chrome-sm);color:var(--accent);letter-spacing:.02em}
.home-sublinks{font-family:var(--mono);font-size: var(--fs-kicker);color:var(--ink-soft);letter-spacing:.02em;margin-top:auto}
.home-card--lead .home-sublinks{color:var(--accent-soft)}
.home-bars{display:flex;align-items:flex-end;gap:5px;height:110px;margin:8px 0 4px}
.home-bars span{flex:1;background:var(--accent-soft);border-radius:3px 3px 0 0;min-height:4px}
.home-bars span.hi{background:var(--accent)}
.home-leadstat{font-family:var(--mono);font-size: var(--fs-chrome);color:var(--paper-on-ink);margin-top:6px}
.home-leadstat b{color:#CBC7BB;font-size: var(--fs-body)}
.home-rank{display:flex;flex-direction:column;gap:6px;margin:2px 0}
.home-rank>div{display:flex;align-items:center;gap:8px;font-size: var(--fs-chrome-sm);white-space:nowrap}
.home-rank b{flex:0 0 92px;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.home-rank i{height:8px;background:var(--accent);border-radius:4px;display:inline-block;min-width:6px}
.home-rank em{color:var(--ink-soft);font-family:var(--mono);font-style:normal;margin-left:auto}
.home-chips{display:flex;flex-wrap:wrap;gap:6px}
.home-chip{font-family:var(--mono);font-size: var(--fs-chrome-sm);padding:5px 11px;border:1px solid var(--rule-soft);border-radius: var(--radius-control, 5px);background:var(--paper);cursor:pointer;color:var(--ink)}
.home-chip:hover{border-color:var(--accent);color:var(--accent)}
.home-chip.on{background:var(--accent);color:var(--paper-bright, #FEFCF7);border-color:var(--accent)}
.home-search{width:100%;padding:11px 14px;font:inherit;border:1px solid var(--rule);border-radius:var(--radius-control, 5px);background:var(--paper)}
.home-search:focus{outline:none;border-color:var(--accent)}
.home-results{display:flex;flex-direction:column;gap:1px;max-height:148px;overflow:auto}
.home-results a{padding:7px 10px;border-radius:7px;text-decoration:none;color:var(--ink);font-size: var(--fs-chrome);display:flex;justify-content:space-between;gap:8px}
.home-results a:hover{background:var(--accent-wash)}
.home-results a span{color:var(--ink-soft);font-family:var(--mono);font-size: var(--fs-kicker)}
.home-region{width:100%;padding:9px 11px;font:inherit;border:1px solid var(--rule);border-radius: var(--radius-control, 5px);background:var(--paper-bright)}
.home-local-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.home-local-cols a{display:flex;flex-direction:column;gap:3px;padding:13px;border:1px solid var(--rule-soft);border-radius:0;text-decoration:none;color:var(--ink);background:var(--paper)}
.home-local-cols a:hover{border-color:var(--accent);background:var(--accent-wash)}
.home-local-cols .big{font-family:var(--display);font-weight:600;font-size:26px;color:var(--accent);line-height:1}
.home-local-cols .lbl{font-family:var(--mono);font-size: var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.home-local-cols .sub{font-size: var(--fs-chrome-sm);color:var(--ink-soft)}
.home-strip{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-soft);font-family:var(--mono);font-size: var(--fs-chrome-sm);color:var(--ink-soft);letter-spacing:.03em;display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.home-strip b{color:var(--accent);font-size: var(--fs-base)}
@media(max-width:980px){.home-grid{grid-template-columns:repeat(2,1fr)}.home-card,.home-card--lead,.home-card--wide{grid-column:span 2;grid-row:auto}}
@media(max-width:620px){.home-grid{grid-template-columns:1fr}.home-card,.home-card--lead,.home-card--wide{grid-column:span 1}.home-local-cols{grid-template-columns:1fr}}

/* ===== Landing — world-class pass (declutter chrome + depth + motion) ===== */
/* On the home view the cards are the primary navigation; the top menu now also shows for quick jumps,
   but the beta-bar stays hidden (the hero already carries the beta eyebrow). */
body.is-home .beta-bar { display:none; }
/* the mobile "Jump to a view" bar stays available on the landing page too (it is mobile-only via its own media query) */
body.is-home .page-hero .lede { display:none; }
body.is-home .page-hero { padding-top:12px; padding-bottom:6px; }
body.is-home .page-hero h1 { font-size:clamp(30px,4.4vw,52px); letter-spacing:-.015em; }
body.is-home #main { padding-top:6px; }

.home { max-width:100%; margin:0 auto; }
.home-intro { font-family:var(--serif); font-size:clamp(17px,1.9vw,22px); color:var(--ink-2); margin:2px 0 24px; max-width:56ch; line-height:1.45; }
.home-grid { gap:16px; }
.home-card { border-radius:0; padding:22px 22px 20px; position:relative; animation:homeRise .55s cubic-bezier(.2,.7,.2,1) both; }
.home-grid>*:nth-child(2){animation-delay:.05s}.home-grid>*:nth-child(3){animation-delay:.1s}
.home-grid>*:nth-child(4){animation-delay:.15s}.home-grid>*:nth-child(5){animation-delay:.2s}.home-grid>*:nth-child(6){animation-delay:.25s}
@keyframes homeRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.home-card{animation:none}}
.home-card h3{letter-spacing:-.012em}
.home-card.clickable{cursor:pointer}
a.home-card:hover,.home-card.clickable:hover,.home-card:focus-within{transform:translateY(-3px);box-shadow:0 16px 38px rgba(20, 17, 13,.11);border-color:var(--accent)}
.home-card.clickable:active{transform:translateY(-1px)}
/* lead card: teal-lit dark, bars grow to fill */
.home-card--lead{background:var(--ink-surface);}
.home-card--lead .home-bars{flex:1 1 auto;height:auto;min-height:150px;gap:6px}
.home-card--lead .home-bars span{background:var(--accent-soft);border-radius:4px 4px 0 0}
.home-card--lead .home-bars span.hi{background:var(--accent)}
.home-leadstat{margin-top:10px}.home-leadstat b{font-size:19px}
.home-card--lead .home-sublinks{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
/* rank rows a touch crisper */
.home-rank>div{padding:1px 0}.home-rank i{background:var(--accent)}
/* stat strip */
.home-strip{justify-content:flex-start;gap:26px;align-items:baseline}
.home-strip .home-method{margin-left:auto;color:var(--ink-soft);text-decoration:none;font-size: var(--fs-kicker)}
.home-strip .home-method:hover{color:var(--accent)}
/* local card: let the two stat tiles fill the row height (kills dead space next to the taller search card) */
.home-card--wide .home-local-cols{flex:1 1 auto}
.home-card--wide .home-local-cols a{justify-content:center;gap:5px}
.home-card--wide .home-local-cols .big{font-size:30px}

/* ===== Landing v2 — Benchmark beside Health-of-Sector, per-card CTA, deep chips, animated chart ===== */
.home-intro{max-width:780px}
/* hero row: Health of the sector (left) + Benchmark a university (right), both tall */
.home-card--lead{grid-column:span 3;grid-row:span 2}
.home-card--bench{grid-column:span 3;grid-row:span 2}
.home-card--rank{grid-column:span 3}
#homeCompareCard{grid-column:span 3}
.home-card--wide{grid-column:span 4}
.home-card--bench .home-results{flex:1 1 auto;max-height:none;min-height:130px}
@media(max-width:980px){.home-card--lead,.home-card--bench,.home-card--rank,#homeCompareCard,.home-card--wide{grid-column:span 2;grid-row:auto}}
@media(max-width:620px){.home-card--lead,.home-card--bench,.home-card--rank,#homeCompareCard,.home-card--wide{grid-column:span 1}}

/* per-card CTA box — "click here for X" with an arrow, in its own box */
.home-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-radius:10px;background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent-soft);font-family:var(--mono);font-size: var(--fs-chrome-sm);letter-spacing:.01em;font-weight:600;text-decoration:none;transition:background .14s ease,color .14s ease,border-color .14s ease}
.home-go .arr{font-size: var(--fs-card);line-height:1}
.home-card:hover .home-go,.home-card:focus-within .home-go{background:var(--accent);color:var(--paper-bright, #FEFCF7);border-color:var(--accent)}
.home-card--lead .home-go{background:rgba(255,255,255,.09);color:var(--paper-on-ink);border-color:rgba(255,255,255,.2)}
.home-card--lead:hover .home-go{background:var(--accent);color:var(--paper-bright, #FEFCF7);border-color:var(--accent)}
/* the lead/bench cards have a flex-fill child above, so the CTA already sits low; keep a little gap */
.home-card--lead .home-go,.home-card--bench .home-go{margin-top:14px}

/* deep-detail chips — make clear these open the detailed views */
.home-deep{margin-top:13px}
.home-deep-label{font-family:var(--mono);font-size: var(--fs-caption);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.home-deep-chips{display:flex;flex-wrap:wrap;gap:5px}
.home-deep-chip{font-family:var(--mono);font-size: var(--fs-kicker);padding:4px 9px;border:1px solid var(--rule-soft);border-radius:7px;text-decoration:none;color:var(--ink-2);background:var(--paper);transition:border-color .12s ease,color .12s ease,background .12s ease}
.home-deep-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.home-card--lead .home-deep-label{color:var(--accent-soft)}
.home-card--lead .home-deep-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.17);color:var(--paper-on-ink)}
.home-card--lead .home-deep-chip:hover{border-color:var(--accent-soft);color:#CBC7BB;background:rgba(255,255,255,.13)}

/* rank: how many measures / categories */
.home-rankmeta{font-family:var(--text);font-size: var(--fs-chrome-sm);color:var(--ink-2);margin-top:10px;line-height:1.4}
.home-rankmeta b{color:var(--accent);font-weight:600}

/* animate the chart: bars rise, rank bars sweep in */
@keyframes homeGrowBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.home-bars span{transform-origin:bottom;animation:homeGrowBar .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes homeGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.home-rank i{transform-origin:left;animation:homeGrowX .65s cubic-bezier(.2,.7,.2,1) both .12s}
@media (prefers-reduced-motion: reduce){.home-bars span,.home-rank i{animation:none;transform:none}}

/* ===== Landing v3 — section colours, shadows, pulse, rolling tickers, scroll cue ===== */
/* Name kept for compatibility with existing rules; the value has been teal
   since 23 Jul 2026 and no teal remains anywhere in this stylesheet. */
:root{ --ink-surface-teal:#123A3E; --accent-mid:#7FA9AD; }

/* intro spans the full box width (left to right) */
.home-intro{max-width:none}

/* tokenise the dark lead card gradient + highlighted bar (were raw hex) */
.home-card--lead{background:var(--ink-surface)}
.home-card--lead .home-bars span.hi{background:var(--accent)}

/* SECTION COLOUR LINKING — each card themes by its destination's page accent (--ca / --cad) */
.home-kick{color:var(--ca,var(--accent))}
.home-rankmeta b{color:var(--cad,var(--accent-deep))}
.home-deep-chip:hover{border-color:var(--ca,var(--accent));color:var(--cad,var(--accent-deep));background:color-mix(in srgb,var(--ca,var(--accent)) 9%,var(--paper))}
.home-card--lead .home-kick,.home-card--lead .home-deep-label{color:var(--ca)}

/* CTA box: stronger resting affordance (full accent border + deep-accent text, was washed out), fills on hover */
.home-go{color:var(--cad,var(--accent-deep));background:color-mix(in srgb,var(--ca,var(--accent)) 12%,var(--paper));border:1px solid var(--ca,var(--accent))}
.home-card:hover .home-go,.home-card:focus-within .home-go,.home-go:hover,.home-go:focus-visible{background:var(--ca,var(--accent));color:#CBC7BB;border-color:var(--ca,var(--accent))}
/* dark lead card (gold accent) needs dark text on its fill */
.home-card--lead .home-go{color:var(--paper-on-ink);background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--ca) 55%,rgba(255,255,255,.22))}
.home-card--lead:hover .home-go,.home-card--lead .home-go:hover,.home-card--lead .home-go:focus-visible{background:var(--ca);color:var(--ink);border-color:var(--ca)}
.home-card--lead .home-deep-chip:hover{border-color:var(--ca);color:var(--ink);background:var(--ca)}

/* SHADOWS — every box, outside and inside */
.home-card{box-shadow:0 1px 2px rgba(20, 17, 13,.05),0 12px 30px rgba(20, 17, 13,.06)}
.home-card--lead{box-shadow:0 14px 40px rgba(20, 17, 13,.22)}
.home-card:hover{box-shadow:0 6px 16px rgba(20, 17, 13,.09),0 20px 46px rgba(20, 17, 13,.11)}
.home-go,.home-local-cols a,.home-search,.home-region,.home-chip,.home-deep-chip{box-shadow:0 1px 2px rgba(20, 17, 13,.07)}
.home-card--lead .home-deep-chip{box-shadow:0 1px 2px rgba(0,0,0,.28)}

/* PULSE the CTA boxes (gentle accent ring), staggered, steady on hover */
@keyframes homeGoPulse{0%,100%{box-shadow:0 1px 2px rgba(20, 17, 13,.07),0 0 0 0 transparent}50%{box-shadow:0 1px 2px rgba(20, 17, 13,.07),0 0 0 5px color-mix(in srgb,var(--ca,var(--accent)) 16%,transparent)}}
.home-go{animation:homeGoPulse 2.8s ease-in-out infinite}
.home-grid>*:nth-child(2) .home-go{animation-delay:.3s}
.home-grid>*:nth-child(3) .home-go{animation-delay:.6s}
.home-grid>*:nth-child(4) .home-go{animation-delay:.9s}
.home-grid>*:nth-child(5) .home-go{animation-delay:1.2s}
.home-grid>*:nth-child(6) .home-go{animation-delay:1.5s}
.home-card:hover .home-go{animation:none}

/* ROLLING TICKER line (real figures, cycles) */
.home-ticker{font-family:var(--mono);font-size: var(--fs-chrome-sm);color:var(--ink-2);transition:opacity .24s ease;min-height:1.25em;display:flex;align-items:center;gap:8px;margin-top:10px}
.home-ticker::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--ca,var(--accent));animation:homeTkDot 1.6s ease-in-out infinite}
@keyframes homeTkDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.home-card--lead .home-ticker{color:var(--paper-on-ink)}

/* BENCHMARK scroll cue (pulses to show the list scrolls through all 36) + cap the list so it never balloons the hero row */
.home-card--bench .home-results{flex:1 1 auto;min-height:140px;max-height:236px}
.home-scrollcue{font-family:var(--mono);font-size: var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--ca,var(--accent));text-align:center;padding:6px 0 0;animation:homeCue 1.5s ease-in-out infinite}
.home-scrollcue.hide{display:none}
@keyframes homeCue{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(2px)}}

/* legibility + motion sequencing */
.home-deep-label{font-size: var(--fs-kicker)}
.home-rank i{animation-delay:.45s}

@media (prefers-reduced-motion: reduce){.home-go,.home-ticker::before,.home-scrollcue{animation:none}}

/* ===== Landing v4 — CTA colour sweep, rolling-chart caption, glass cue + rank badges, tile scroll ===== */
/* CTA: a colour band sweeps left->right inside the box (on top of the existing ring pulse) */
.home-go{position:relative;overflow:hidden}
.home-go>*{position:relative;z-index:1}
/* The looping light sweep across the entry cards is retired (WI-1): an
   infinite shimmer is the loudest thing on a page that is meant to whisper. */
@keyframes homeGoSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(320%)}}


/* rolling-chart caption on the lead card */
.home-bars-label{font-family:var(--mono);font-size: var(--fs-caption);letter-spacing:.04em;color:var(--paper-on-ink-2,var(--paper-on-ink-2));margin-top:7px;transition:opacity .24s ease}

/* GLASS: benchmark scroll cue (a floating frosted pill) */
.home-scrollcue{display:block;width:-moz-fit-content;width:fit-content;margin:9px auto 0;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(9px) saturate(150%);backdrop-filter:blur(9px) saturate(150%);border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 10px rgba(20, 17, 13,.08)}

/* GLASS: rank 1-6 badges */
.home-rank .rk-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 21px;width:21px;height:21px;border-radius:7px;font-family:var(--mono);font-size: var(--fs-kicker);color:var(--cad,var(--accent));background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px) saturate(150%);backdrop-filter:blur(6px) saturate(150%);border:1px solid rgba(255,255,255,.72);box-shadow:0 1px 4px rgba(20, 17, 13,.09)}

/* local hero tiles fade as they scroll through regions */
.home-local-cols .big,.home-local-cols .sub{transition:opacity .2s ease}

@media (prefers-reduced-motion: reduce){.home-go::after{animation:none;display:none}}

/* ===== Landing v5 — kicker as a coloured section box + live chart container ===== */
/* kicker becomes a clear filled colour box (section tag), themed per card via --ca */
.home-kick{display:inline-flex;align-self:flex-start;align-items:center;padding:4px 11px;border-radius:7px;background:var(--ca,var(--accent));color:#CBC7BB;font-family:var(--mono);font-size: var(--fs-caption);font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 1px 3px rgba(20, 17, 13,.14)}
.home-card--lead .home-kick{color:var(--ink);background:var(--ca)}

/* live sector chart fills the lead card; canvas absolutely fills the relative wrap (robust Chart.js sizing) */
.home-chartwrap{position:relative;flex:1 1 auto;min-height:158px;margin-top:2px}
.home-chartwrap canvas{position:absolute;inset:0;transition:opacity .24s ease}
@media (prefers-reduced-motion: reduce){.home-chartwrap canvas{transition:none}}

/* ===== Landing v6 — Benchmark a university as a dark card (matches Health of the sector) ===== */
.home-card--bench{background:var(--ink-surface);color:var(--paper-on-ink);border-color:transparent;box-shadow:0 14px 40px rgba(20, 17, 13,.22)}
.home-card--bench p{color:var(--paper-on-ink);opacity:.82}
.home-card--bench .home-search{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--paper-on-ink)}
.home-card--bench .home-search::placeholder{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-card--bench .home-search:focus{border-color:var(--accent-soft)}
.home-card--bench .home-results a{color:var(--paper-on-ink)}
.home-card--bench .home-results a span{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-card--bench .home-results a:hover{background:rgba(255,255,255,.09)}
.home-card--bench .home-deep-label{color:var(--accent-soft)}
.home-card--bench .home-deep-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.17);color:var(--paper-on-ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.home-card--bench .home-deep-chip:hover{border-color:var(--accent-soft);color:#CBC7BB;background:rgba(255,255,255,.13)}
.home-card--bench .home-scrollcue{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:var(--accent-soft)}
.home-card--bench .home-go{color:var(--paper-on-ink);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.home-card--bench:hover .home-go,.home-card--bench .home-go:hover,.home-card--bench .home-go:focus-visible{background:var(--ca);color:#CBC7BB;border-color:var(--ca)}


/* ===== Landing v7 — ALL cards dark (per-section --ca solid + --cal light), section numbers, Compare picker ===== */
.home-card{background:var(--ink-surface);color:var(--paper-on-ink);border-color:transparent;box-shadow:0 12px 34px rgba(20, 17, 13,.20)}
.home-card:hover{box-shadow:0 16px 46px rgba(20, 17, 13,.30)}
.home-card h3{color:var(--paper-on-ink)}
.home-card p{color:var(--paper-on-ink);opacity:.82}

/* section number chip inside the kicker box */
.home-kick{gap:7px}
.home-kick-n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:14px;padding:0 3px;border-radius:4px;background:rgba(0,0,0,.28);color:#CBC7BB;font-size:9px;font-weight:700;letter-spacing:.02em}

/* deep chips / labels on dark */
.home-deep-label{color:var(--cal,var(--accent-soft))}
.home-deep-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--paper-on-ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.home-deep-chip:hover{border-color:var(--cal,var(--accent-soft));color:#CBC7BB;background:rgba(255,255,255,.13)}
.home-card--lead .home-deep-chip:hover{color:var(--ink);background:var(--cal);border-color:var(--cal)}

/* CTA on dark */
.home-go{color:var(--paper-on-ink);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.home-card:hover .home-go,.home-card:focus-within .home-go,.home-go:hover,.home-go:focus-visible{background:var(--ca);color:#CBC7BB;border-color:var(--ca)}
.home-card--lead:hover .home-go,.home-card--lead .home-go:hover,.home-card--lead .home-go:focus-visible{background:var(--ca);color:var(--ink);border-color:var(--ca)}


/* search + results on dark */
.home-search{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--paper-on-ink)}
.home-search::placeholder{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-search:focus{border-color:var(--cal,var(--accent-soft))}
.home-results a{color:var(--paper-on-ink)}
.home-results a span{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-results a:hover{background:rgba(255,255,255,.09)}
.home-scrollcue{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:var(--cal,var(--accent-soft))}

/* rank list on dark + per-section bars */
.home-rank b{color:var(--paper-on-ink)}
.home-rank em{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-rank i{background:var(--ca)}
.rk-num{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:var(--cal,#fff)}
.home-rankmeta{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-rankmeta b{color:var(--cal,var(--accent-soft))}

/* local tiles + region select on dark */
.home-local-cols a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.home-local-cols a:hover{border-color:var(--cal);background:rgba(255,255,255,.1)}
.home-local-cols .lbl,.home-local-cols .sub{color:var(--paper-on-ink-2,var(--paper-on-ink-2))}
.home-local-cols .big{color:var(--cal,var(--accent-soft))}
.home-region{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--paper-on-ink)}

/* Compare picker (redesigned) */
.home-cmp-pick{display:flex;flex-wrap:wrap;gap:6px}
.home-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:var(--paper-on-ink);box-shadow:0 1px 2px rgba(0,0,0,.22)}
.home-chip:hover{border-color:var(--cal)}
.home-chip.on{background:var(--ca);border-color:var(--ca);color:#CBC7BB}
.home-cmp-status{font-family:var(--mono);font-size: var(--fs-kicker);color:var(--paper-on-ink-2,var(--paper-on-ink-2));min-height:1.25em;margin-top:2px}
.home-go.is-off{opacity:.45;cursor:not-allowed}
.home-go.is-off::after{display:none}

/* fix: rank badge colour was falling back to --accent (removed --cad); pin to per-section --cal at matching specificity */
.home-rank .rk-num{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:var(--cal,#fff)}

/* ===== Landing v8 — glass results, scorecard colour, hero logo, all-36 compare chips ===== */
/* benchmark scrolling results sit in a clear glass box */
.home-card--bench .home-results{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:0;padding:5px;-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}

/* scorecard accent is light (chip-yellow) → dark text on its filled boxes, like the gold lead card */
.home-card--score .home-kick{color:var(--ink)}
.home-card--score:hover .home-go,.home-card--score .home-go:hover,.home-card--score .home-go:focus-visible{background:var(--ca);color:var(--ink);border-color:var(--ca)}

/* CoreBridge mark at the start of the hero title */
.page-hero h1 .hero-mark{height:.74em;width:auto;vertical-align:-.04em;margin-right:.34em}

/* compact compare chips so all 36 fit in the box */
.home-card--compare .home-cmp-pick{gap:5px}
.home-card--compare .home-chip{font-family:var(--mono);font-size: var(--fs-caption);letter-spacing:.02em;padding:4px 0;min-width:38px;text-align:center;justify-content:center}

/* snappy rank bars for the 2s rotation */
.home-rank i{animation-delay:.06s}
/* solo numbered tabs (single-destination sections: Rank, Compare, Local, Scorecard) */
/* 26 Jul 2026 — third variant of the same control, now on the same metrics as
   the group heads and the plain tabs. A standalone tab (Method, Report, and
   every top-level view on New Zealand and Asia, which do not group) was
   drawn at 7/11 with a bare 9px radius and +.01em, while a grouped head next
   to it was 9/13 at --r-chip and -.005em. Same bar, same job, three boxes.
   Padding, radius, size and tracking now come from one place. */
nav.tabs .tab-solo { display:inline-flex; align-items:center; padding:9px 13px; border-radius:var(--r-chip); background:#0C2410; color:var(--clust-text,var(--accent-soft)); text-decoration:none; font:600 var(--fs-chrome) var(--text); letter-spacing:-0.005em; transition:background .14s ease, color .14s ease; }
nav.tabs .tab-solo:hover { color:#CBC7BB; background:rgba(255,255,255,.07); }
nav.tabs .tab-solo.active { background:var(--clust,var(--accent)); color:#CBC7BB; box-shadow:0 2px 9px rgba(20, 17, 13,.45); }
/* solo tabs (Scorecard, Method) also use the one brand accent, no per-section colours */

/* ===== Deeper redesign — dark page-hero "key card" on every inner view + numbered-section alignment ===== */
.page-hero-band { margin: 0 0 24px; padding: 20px 24px 19px; border-radius: var(--r-card, 10px); background: var(--ink-surface); color: var(--paper-on-ink); box-shadow: 0 12px 34px rgba(20, 17, 13,.20); display: flex; flex-direction: column; gap: 9px; }
.page-hero-band .ph-kick { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 0; background: var(--ca, var(--accent)); color: var(--ck, #fff); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(20, 17, 13,.18); }
.page-hero-band .ph-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 3px; border-radius: 4px; background: var(--ca, var(--accent)); color: var(--ck, #CBC7BB); font: 700 9px var(--mono); }
/* AUDIT 26 Jul 2026 (§4.7 contrast). Two faults in one declaration. The colour was
   hardcoded #CBC7BB even though the band sets both halves of its pair — --ca for the
   ground and --ck for the text on it — and on the two bright clusters PAGE_HERO_CA pairs
   gold with INK, so paper type landed on #96702A at 1.41:1, the worst reading in the
   suite. Honouring --ck alone was not enough: the ground was --ca mixed 58% into ink,
   which lands mid-tone, and 9px bold clears neither ink (3.36:1) nor paper (3.30:1)
   against it. The mix is dropped. --ca at full strength is what PAGE_HERO_CA was built
   for ("the dark page-hero band keeps the bright versions"), and every cluster now
   clears AA on its own pair: teal 5.59, green 4.55, red 4.82, gold 7.90, yellow 8.29. */
.page-hero-band .ph-title { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.4vw, 28px); letter-spacing: -.018em; line-height: 1.12; color: var(--paper-on-ink); }
@media (max-width: 640px) { .page-hero-band { padding: 16px 18px; } }

/* align the per-page section-number badge to the landing's square number-chip look (was a circle) */
section.block h2 .sec-n { border-radius: 6px; }

/* hierarchical section labels (0X/A) — widen the badges that were sized for a single digit */
section.block h2 .sec-n { width: auto; min-width: 24px; padding: 0 7px; font-size: var(--fs-kicker); letter-spacing: .03em; }
.sn-num { width: auto; min-width: 19px; padding: 0 6px; border-radius: 5px; letter-spacing: .03em; }

/* ===== Batch fixes — nav box contrast, sub-tab pulse, vs-national pulse ===== */
/* #2 lift the nav cluster/solo boxes off the dark nav background for clearer separation */
nav.tabs .tab-cluster, nav.tabs .tab-solo { background: #0C2410; border: 1px solid rgba(255,255,255,.10); }
nav.tabs .tab-solo:hover { background: #12302A; }

/* #7 pulse the Local sub-tab when clicked */
@keyframes cb-subtab-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 72%, transparent); } 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); } }
.localsubtab.pulse { animation: cb-subtab-pulse .65s ease-out 1; }

/* #8 Local Skills vs-national: ≥15% deviation pulses blue */
@keyframes cb-vs-pulse { 0%, 100% { background: transparent; } 50% { background: color-mix(in srgb, var(--accent) 14%, transparent); } }
.occ4-vs-big { animation: cb-vs-pulse 2s ease-in-out infinite; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { .localsubtab.pulse, .occ4-vs-big { animation: none; } }

/* ===== Detail section sits on the cream page (the dark "tab frame" panel was removed): the heading band
   and the boxes float directly on the paper, like the rest of the brand. One less layer. ===== */
body:not(.is-home) #main { background: transparent; border-radius: 0; box-shadow: none; padding: 20px 0 34px; margin: 14px auto 44px; color: var(--ink); }
/* light-bg content boxes keep dark text */
body:not(.is-home) #main section.block, body:not(.is-home) #main .card, body:not(.is-home) #main > .grid.kpis, body:not(.is-home) #main > .controls, body:not(.is-home) #main table.data { color: var(--ink); }
/* section-nav reads on the dark frame */
body:not(.is-home) #main .section-nav { background: #211c26; border-color: rgba(255,255,255,.10); }
body:not(.is-home) #main .section-nav .sn-label { color: var(--paper-on-ink-2, var(--paper-on-ink-2)); }
/* shadows on all the boxes, so they float on the dark frame */
body:not(.is-home) #main section.block { box-shadow: 0 3px 10px rgba(0,0,0,.22), 0 18px 44px rgba(0,0,0,.24); }
body:not(.is-home) #main > .grid.kpis, body:not(.is-home) #main > .controls { box-shadow: 0 3px 10px rgba(0,0,0,.20); }
body:not(.is-home) #main .page-hero-band { border: 1px solid rgba(255,255,255,.08); }
@media (max-width: 640px) { body:not(.is-home) #main { border-radius: 0; padding: 14px 0 24px; } }
/* loose notes/paragraphs sitting directly on the cream page read in muted ink */
body:not(.is-home) #main > .note, body:not(.is-home) #main > p { color: var(--ink-3); }

/* Local sub-tabs: gently pulse the inactive one so it's clear there are two parts to switch between */
@keyframes cb-subtab-attract { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 40%, transparent); } }
.localsubtab:not(.is-on) { animation: cb-subtab-attract 2s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .localsubtab:not(.is-on) { animation: none; } }

/* ===== Chrome batch — tinted heading band, lighter card shadows, page-chrome boxes ===== */
/* #1 heading band tinted by its section colour so it stands clear of the neutral dark tab frame */
body:not(.is-home) #main .page-hero-band { background: var(--ink-surface); border: 1px solid color-mix(in srgb, var(--ca, var(--accent)) 34%, rgba(246, 242, 236, 0.12)); }

/* #2 boxes float on the cream page with the standard brand shadow (the teal-glow float for the dark frame is gone) */
body:not(.is-home) #main section.block { box-shadow: var(--shadow-box), var(--rim-inset); }
body:not(.is-home) #main > .grid.kpis, body:not(.is-home) #main > .controls { box-shadow: var(--shadow-card), var(--rim-inset); }

/* #7 'Reference' (Method) cluster uses the one brand accent like the rest */

/* #6 page chrome (beta bar, tab menu, footer) become centred boxes aligned to the content column, framed by cream, with gaps */
.beta-bar, footer.site { max-width: var(--col-max); margin-left: auto; margin-right: auto; border-radius: 10px; }
.beta-bar { margin-top: 14px; margin-bottom: 12px; padding: 11px var(--col-pad); }
.beta-bar .bandwrap { max-width: none; padding: 0; }
footer.site { margin-top: 26px; margin-bottom: 32px; padding: 24px var(--col-pad); }
footer.site .bandwrap { max-width: none; padding: 0; }
nav.tabs { max-width: var(--col-max); margin: 0 auto 14px; border-radius: 10px; padding: 11px var(--col-pad); }

/* #5 mobile: a small cream margin on the sides so the dark frame and chrome boxes are framed */
@media (max-width: 640px) {
  body:not(.is-home) #main { margin-left: 12px; margin-right: 12px; }
  .beta-bar, nav.tabs, footer.site, .mobile-nav-wrap { margin-left: 12px; margin-right: 12px; }
}


/* ============================================================
   LIQUID GLASS MATERIAL — appended v17 (later rules win on ties)
   Direction: faithful Apple "liquid glass" (Approach 1 base) with
   accessibility grafts: explicit child z-index lift on the band,
   near-opaque text-bearing nav cluster panels, and a complete
   @supports-not block that re-solidifies all five selectors.
   Four chrome targets: heading band, beta bar, sticky nav, footer.
   Geometry (max-width / margin / padding / radius / position /
   z-index) is NEVER touched here, only the material.
   Backdrop-filter only frosts what is painted behind, so the
   heading band (solid #211c26 frame behind it) leans on specular
   highlight + tint + inner glow rather than blur. Live cluster
   colour is #0C2410 (styles.css line 1593, later rule wins).
   Australian English in comments. No em-dashes.
   ============================================================ */

/* ---- shared liquid-glass tuning knobs ---- */
:root {
  --lg-blur: 18px;
  --lg-blur-nav: 24px;                  /* heavier frost on the sticky nav where it pays off */
  --lg-sat: 165%;
  --lg-sheen: rgba(255,255,255,.55);    /* specular top edge on dark glass */
  --lg-edge-top: rgba(255,255,255,.32); /* bright hairline at the top */
  --lg-edge-bot: rgba(20, 17, 13,.34);    /* darker hairline at the bottom */
  --lg-drop: 0 18px 46px -12px rgba(20, 17, 13,.46); /* long soft drop */
}

/* ============================================================
   1) HEADING BAND  body:not(.is-home) #main .page-hero-band
   Sits on a solid dark tab frame, so blur shows almost nothing.
   The glass illusion is built from: a translucent saturated
   per-section tint (var(--ca) wash over the dark surface), a
   bright masked specular sheen across the top via ::before, a
   hairline border brighter at top, a triple inner shadow (top
   white line + specular bloom + base shade), and a long outer
   drop. Title text stays light and untouched.
   ============================================================ */
body:not(.is-home) #main .page-hero-band {
  position: relative;            /* anchor the specular pseudo-element */
  isolation: isolate;            /* keep sheen under flex children */
  /* translucent saturated body: a per-section colour wash floated
     over a layered dark glass. color-mix keeps the gold/teal/
     red/green/yellow identity reading through the frost. */
  /* Flat ink ground with the section accent as a hairline, not a wash (WI-1).
     The sheen + radial bloom + purple mix are retired. */
  background: var(--ink-surface);
  -webkit-backdrop-filter: saturate(var(--lg-sat)) blur(10px);
  backdrop-filter: saturate(var(--lg-sat)) blur(10px);
  border: 1px solid color-mix(in srgb, var(--ca, var(--accent)) 30%, var(--lg-edge-top));
  border-top-color: color-mix(in srgb, var(--ca, var(--accent)) 24%, rgba(255,255,255,.42));
  border-bottom-color: var(--lg-edge-bot);
  /* inner top glow (specular bloom) + faint base shade + long drop */
  box-shadow: var(--shadow-card, 0 2px 6px rgba(20,17,13,.04), 0 12px 28px -12px rgba(20,17,13,.10));
}
/* specular sheen sweeping the top-left, the signature liquid cue.
   Masked so the highlight physically fades out before it can reach
   the light .ph-title, robust regardless of stacking order. */
body:not(.is-home) #main .page-hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                    /* behind the lifted flex children below */
  border-radius: inherit;
  pointer-events: none;
  /* Specular sheen removed (WI-1) — the signature liquid cue is exactly the
     embellishment §1 rules out. The element is kept as an empty layer so the
     z-index contract with .page-hero-band > * is unchanged. */
  background: none;
}
/* explicitly lift the band's real children above the sheen, so title
   legibility never depends on isolation behaviour (grafted from A3) */
body:not(.is-home) #main .page-hero-band > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   2) BETA BAR  .beta-bar  (warning notice — keep yellow salience)
   Static on cream, so blur mostly frosts the paper beneath.
   Frosted YELLOW-tinted glass: a translucent chip-yellow body so
   the warning still reads, with a bright top sheen and hairline.
   Dark ink text is untouched and stays legible.
   ============================================================ */
.beta-bar {
  position: relative;
  /* Flat chip-gold notice on a hairline (WI-1). Gold is a chip device, and a
     chip does not need frost, sheen, or a coloured drop shadow. */
  background: color-mix(in srgb, var(--chip-yellow) 64%, var(--paper-bright));
  border: 1px solid color-mix(in srgb, var(--chip-yellow) 60%, rgba(20, 17, 13,.18));
  box-shadow: none;
}

/* ============================================================
   3) NAV / MENU BAR  nav.tabs  (#tabs, sticky — real frost here)
   Page content scrolls behind the sticky strip, so this is the
   classic Apple frosted nav. DARK glass: translucent dark body +
   heavier 24px blur + saturate, keeping the light-on-dark tab
   clusters working. position / z-index / sticky untouched.
   ============================================================ */
/* Flat ink bar, hairline edge (WI-1). A sticky nav needs to stay legible over
   whatever scrolls beneath it; an opaque ink ground does that better than frost,
   and matches the ink sections on the marketing pages. */
nav.tabs {
  background: var(--ink-surface);
  border: 1px solid rgba(246, 242, 236, 0.12);
  box-shadow: var(--shadow-card, 0 2px 6px rgba(20,17,13,.04), 0 12px 28px -12px rgba(20,17,13,.10));
}
/* the cluster / solo panels carry the LIGHT text, so keep them
   near-opaque (92% of the live #0C2410) with only a whisper of blur
   so bright cards scrolling behind the sticky bar cannot lift their
   luminance and erode contrast (accessibility graft from A3). */
nav.tabs .tab-cluster, nav.tabs .tab-solo {
  background: color-mix(in srgb, #0C2410 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  backdrop-filter: saturate(140%) blur(4px);
  border-color: rgba(255,255,255,.12);
}

/* ============================================================
   4) FOOTER BAR  footer.site  (static on cream — dark glass)
   Matches the nav: translucent dark body, blur + saturate, bright
   top hairline, long drop. Light text + links untouched.
   ============================================================ */
footer.site {
  position: relative;
  background: var(--header);
  border: 1px solid rgba(246, 242, 236, 0.12);
  box-shadow: none;
}

/* ============================================================
   FALLBACK A — no backdrop-filter support: raise body opacity so
   nothing reads as see-through-to-nothing. Re-solidify ALL FIVE
   selectors INCLUDING the band and the text-bearing cluster panels
   (closing A2's gap, per A3 and the accessibility judge).
   ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not(.is-home) #main .page-hero-band { background: var(--ink-surface); }
  .beta-bar {
    background: var(--chip-yellow);
    border-color: color-mix(in srgb, var(--chip-yellow) 60%, rgba(20, 17, 13,.2));
  }
  nav.tabs {
    background: var(--ink-surface);
  }
  nav.tabs .tab-cluster, nav.tabs .tab-solo {
    background: #0C2410;
  }
  footer.site {
    background: var(--header);
  }
}

/* ============================================================
   FALLBACK B — user asked for reduced transparency: push every
   target to near-solid, drop the blur, keep the dimensional edges.
   The band is restored to the literal v16 --ca radial so per-section
   identity survives at full solidity, and the sheen is hidden.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  body:not(.is-home) #main .page-hero-band {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--ink-surface);
  }
  body:not(.is-home) #main .page-hero-band::before {
    display: none;
  }
  .beta-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--chip-yellow);
  }
  nav.tabs {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--ink-surface);
  }
  nav.tabs .tab-cluster, nav.tabs .tab-solo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #0C2410;
  }
  footer.site {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--header);
  }
}

/* ===== "On this tab" rail as a dark-glass box, matching the liquid-glass chrome ===== */
/* The section-nav is sticky, so as the white cards scroll behind it the blur gives a real
   Apple frost; on the solid dark frame (not scrolled) it reads as a translucent dark slab.
   It was a flat full-bleed band (border-top/bottom only); now a rounded glass box. */
body:not(.is-home) #main .section-nav {
  background: var(--ink-surface);
  border: 1px solid rgba(246, 242, 236, 0.12);
  border-radius: 0;
  box-shadow: var(--shadow-card, 0 2px 6px rgba(20,17,13,.04), 0 12px 28px -12px rgba(20,17,13,.10));
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not(.is-home) #main .section-nav { background: var(--ink-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  body:not(.is-home) #main .section-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ink-surface); }
}

/* ===== institution/benchmark controls bar: a rounded card with the CoreBridge purple shadow, matching the content boxes on the dark frame ===== */
body:not(.is-home) #main > .controls {
  border-radius: var(--r-card, 10px);
  box-shadow: 0 0 0 1px rgba(35, 76, 80,.16), 0 10px 28px -8px rgba(35, 76, 80,.34), 0 3px 9px rgba(20, 17, 13,.14);
}

/* ===== EIF infrastructure: postcard gallery + lightbox ===== */
.eif-gallery-head { padding: 12px 16px 10px; font-weight: 600; font-size: var(--fs-chrome); color: var(--ink); border-bottom: 1px solid rgba(20, 17, 13,.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eif-gallery-count { font-size: var(--fs-kicker); font-weight: 500; color: var(--ink-2); background: rgba(20, 17, 13,.06); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.eif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 16px; background: rgba(20, 17, 13,.025); }
.eif-card { display: block; width: 100%; padding: 8px 8px 11px; background: #fff; border: 1px solid rgba(20, 17, 13,.09); border-radius: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 17, 13,.10); transition: transform .18s ease, box-shadow .18s ease; }
.eif-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 17, 13,.20); }
.eif-card:focus-visible { outline: none; box-shadow: 0 12px 28px rgba(20, 17, 13,.20), 0 0 0 2px var(--accent); }
.eif-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: #e9e6e0; }
@media (max-width: 520px) { .eif-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .eif-card { transition: none; } .eif-card:hover { transform: none; } }

.eif-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; }
.eif-lightbox.open { display: flex; }
.eif-lb-backdrop { position: absolute; inset: 0; background: rgba(8,6,12,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eif-lb-img { position: relative; z-index: 1; max-width: 90vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.6); transition: opacity .12s ease; }
.eif-lb-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.12); color: #CBC7BB; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s ease; }
.eif-lb-nav:hover { background: rgba(255,255,255,.24); }
.eif-lb-prev { left: 18px; } .eif-lb-next { right: 18px; }
.eif-lb-close { position: absolute; z-index: 2; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.12); color: #CBC7BB; font-size: 24px; line-height: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s ease; }
.eif-lb-close:hover { background: rgba(255,255,255,.24); }
.eif-lb-count { position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.88); font: 600 12px var(--mono); background: rgba(0,0,0,.4); padding: 5px 12px; border-radius: 10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 520px) { .eif-lb-nav { width: 42px; height: 42px; font-size: 24px; } .eif-lb-prev { left: 8px; } .eif-lb-next { right: 8px; } }

/* ===== Rank-by-trend dumbbell list (DOM, replaces the fragile Chart.js floating bar) ===== */
.trd-card h3 { margin-bottom: 6px; }
.trd-axis { display: flex; justify-content: space-between; align-items: baseline; font: 600 10px var(--mono); color: var(--ink-3); letter-spacing: .03em; padding: 0 0 8px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; }
.trd-axis-mid { text-transform: uppercase; letter-spacing: .12em; }
.trd-list { display: flex; flex-direction: column; }
.trd-row { display: grid; grid-template-columns: 26px minmax(120px, 1.4fr) 3fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid rgba(20, 17, 13,.05); padding: 7px 6px; cursor: pointer; font: inherit; color: var(--ink); border-radius: 6px; transition: background .14s ease; }
.trd-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.trd-row.is-me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.trd-rank { font: 700 11px var(--mono); color: var(--ink-3); text-align: right; }
.trd-name { font-size: var(--fs-chrome); font-weight: 600; line-height: 1.15; }
.trd-state { display: block; font: 500 10px var(--mono); color: var(--ink-3); letter-spacing: .02em; margin-top: 1px; }
.trd-track { position: relative; height: 18px; }
.trd-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(20, 17, 13,.08); }
.trd-bar { position: absolute; top: 50%; height: 5px; border-radius: 3px; background: var(--col, var(--accent)); transform: translateY(-50%) scaleX(1); animation: trdGrow .55s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
@keyframes trdGrow { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
.trd-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.trd-dot--start { background: #fff; border: 2px solid rgba(20, 17, 13,.34); animation: trdFade .3s ease both; animation-delay: var(--d, 0ms); }
.trd-dot--end { background: var(--col, var(--accent)); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 17, 13,.3); animation: trdPop .42s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--d, 0ms) + .26s); }
@keyframes trdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trdPop { 0% { transform: translate(-50%,-50%) scale(0); } 100% { transform: translate(-50%,-50%) scale(1); } }
.trd-chg { font: 700 12.5px var(--mono); text-align: right; min-width: 52px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .trd-row { grid-template-columns: 22px minmax(78px,1fr) 2.2fr auto; gap: 7px; } .trd-name { font-size: var(--fs-chrome-sm); } .trd-axis-mid { display: none; } }
@media (prefers-reduced-motion: reduce) { .trd-bar, .trd-dot--start, .trd-dot--end { animation: none; } }

/* ===== Charts render final geometry instantly (app.js Chart.defaults.animation duration 0, so nothing can stick collapsed); a gentle CSS opacity fade supplies the entry motion safely ===== */
@keyframes cb-chart-fade { from { opacity: 0; } to { opacity: 1; } }
body:not(.is-home) #main canvas { animation: cb-chart-fade .4s ease both; }
@media (prefers-reduced-motion: reduce) { body:not(.is-home) #main canvas { animation: none; } }

/* mobile jump-to-view glass: solid fallback when the user prefers reduced transparency */
@media (prefers-reduced-transparency: reduce) { .mobile-nav-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--accent); } }

/* ===== Tactile press feedback: clickable controls dip slightly when pressed (GPU-only transform, reduced-motion guarded) ===== */
.btn:active, .sn-link:active, .scd-chip:active, .home-chip:active, .home-deep-chip:active, .localsubtab:active, .home-go:active, .role-tile:active, .eif-card:active, .home-cmp-cta:active, .home-scrollcue:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .sn-link:active, .scd-chip:active, .home-chip:active, .home-deep-chip:active, .localsubtab:active, .home-go:active, .role-tile:active, .eif-card:active, .home-cmp-cta:active, .home-scrollcue:active { transform: none; }
}

/* ===== Tab-letter badges in the menu clusters (group 01-06 / tab A,B,C / section 1,2,3) ===== */
nav.tabs .tab-cluster a .tab-let { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 13px; padding: 0 2px; border-radius: 3px; background: rgba(255,255,255,.13); color: inherit; font: 700 8.5px var(--mono); margin-right: 5px; vertical-align: 1px; opacity: .9; }

/* ===== Mobile "Jump to a view" dropdown: Apple-glass control ===== */
.mobile-nav { background: rgba(255,255,255,.16); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-radius: 10px; border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px -6px rgba(20, 17, 13,.35); }
@media (prefers-reduced-transparency: reduce) { .mobile-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.18); } }

/* Landing data-scale counter: one rotating headline figure, counts up to its peak then rotates */
.home-scale { display: flex; align-items: baseline; gap: 14px; margin: 2px 0 22px; min-height: 58px; flex-wrap: wrap; }
.home-scale-pre { font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.home-scale-stat { display: inline-flex; align-items: baseline; gap: 12px; transition: opacity .32s ease; }
.home-scale-num { font: 800 clamp(34px, 6.5vw, 54px)/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.home-scale-lbl { font: 600 15px var(--text); color: var(--ink-2); }
@media (max-width: 640px) { .home-scale { gap: 8px 12px; min-height: 50px; margin-bottom: 16px; } .home-scale-lbl { font-size: var(--fs-small); } }

/* ============================================================================
   Material 3 motion — MOBILE ONLY (<=640px). Desktop is deliberately untouched:
   the page transition is gated in JS (CB_MOBILE_MOTION) so it never fires on a
   wide viewport, and the pseudo-elements + carousel below live inside the mobile
   media query. Tokens per m3.material.io (motion easing/duration + carousel specs).
   ============================================================================ */
:root {
  /* M3 easing tokens */
  --m3-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --m3-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --m3-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --m3-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* M3 duration tokens */
  --m3-dur-short2: 100ms;
  --m3-dur-short4: 200ms;
  --m3-dur-medium2: 300ms;
}
/* Fade-through keyframes (M3 pattern for switching between unrelated destinations):
   outgoing fades out on an accelerate curve; incoming fades in + settles up from 96% on a decelerate curve. */
@keyframes cb-ft-out { to { opacity: 0; } }
@keyframes cb-ft-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  ::view-transition-old(root) { animation: cb-ft-out var(--m3-dur-short2) var(--m3-ease-emphasized-accel) both; }
  ::view-transition-new(root) { animation: cb-ft-in var(--m3-dur-medium2) 60ms var(--m3-ease-emphasized-decel) both; }

  /* M3 "uncontained" carousel: equal-size cards, edge-to-edge horizontal scroll, snap to the start of each,
     a peek of the next card as the swipe affordance. Applies to every KPI stat row (headline figure strips). */
  #main .grid.kpis {
    display: flex; grid-template-columns: none;
    gap: 12px; margin-bottom: 20px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #main .grid.kpis::-webkit-scrollbar { display: none; }
  #main .grid.kpis > .card {
    flex: 0 0 76%; max-width: 76%;
    scroll-snap-align: start;
    border-radius: 0;  /* M3 carousel item shape */
  }
  #main .grid.kpis:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================================
   Single-row tab headings + click dropdowns (replaces the always-expanded cluster block,
   reclaiming vertical space). The five section headings collapse to dropdown buttons; the
   standalone views (Rank, Compare, Scorecard, Method) stay as direct pills. Desktop/tablet
   only — mobile uses the select. The old .tab-cluster/.tab-kicker rules are now inert
   (the markup keeps only the .tab-cluster--X modifier classes, for the --clust colours).
   ============================================================================ */
nav.tabs { flex-wrap: wrap; gap: 5px; }
.tab-group { position: relative; display: inline-flex; flex: 0 0 auto; }
/* 26 Jul 2026 — the group head now shares the tab bar's own box metrics.
   The bar is the most-seen chrome on all four hubs, and the same control was
   drawn differently depending on which hub you were on: Australia and the UK
   group their thirty-odd views behind disclosure heads, New Zealand and Asia
   list theirs flat, and the head carried padding 8/9 with a bare 9px radius
   against the plain tab's 9/13 and --r-chip. 9px is not a step on the radius
   register at all (§2A.5). Padding, radius and tracking now come from the same
   place as the links beside them; the head keeps its border, its blur and its
   caret, because it is a different control and should still read as one. */
.tab-head {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--r-chip);
  background: color-mix(in srgb, #0C2410 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(4px); backdrop-filter: saturate(140%) blur(4px);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--clust-text, var(--paper-on-ink-2));
  font: 600 var(--fs-chrome) var(--text); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tab-head:hover { color: #CBC7BB; background: #12302A; }
.tab-head[aria-expanded="true"] { color: #CBC7BB; background: var(--clust, var(--accent)); border-color: transparent; }
.tab-head.is-current { box-shadow: inset 0 -2.5px 0 var(--clust, var(--accent)); }
.tab-caret { width: 6px; height: 6px; margin-left: 1px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: .75; transition: transform .18s var(--m3-ease-standard, ease); }
.tab-head[aria-expanded="true"] .tab-caret { transform: rotate(-135deg) translateY(1px); opacity: 1; }

.tab-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 80;
  display: none; flex-direction: column; gap: 2px; min-width: 220px;
  background: #0C2410; border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--clust, var(--accent));
  border-radius: 0; padding: 7px; box-shadow: 0 20px 48px -12px rgba(20, 17, 13,.55);
}
.tab-menu.is-open { display: flex; animation: cb-tabmenu-in .16s cubic-bezier(.05,.7,.1,1) both; }
@keyframes cb-tabmenu-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.tab-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius-control, 5px); color: var(--paper-on-ink-2); font: 500 13.5px var(--text); text-decoration: none; white-space: nowrap; }
.tab-menu a:hover { background: rgba(255,255,255,.08); color: #CBC7BB; }
.tab-menu a.active { background: var(--clust, var(--accent)); color: #CBC7BB; }
@media (prefers-reduced-motion: reduce) { .tab-menu.is-open { animation: none; } }

/* ============================================================================
   Scorecard — screen-native grouped metric cards (replaced the print-style 9-column table).
   Each metric group is a labelled block; each measure is a compact card with value, sparkline,
   colour-keyed national rank, year-on-year move, sector/group/state medians, and 5-year rank move.
   ============================================================================ */
.sc-group { margin-bottom: var(--gap); }
.sc-grp-title { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-soft); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.scc { display: flex; flex-direction: column; gap: 7px; background: var(--paper-bright); border: 1px solid var(--rule-soft); border-left: 3px solid var(--rule); border-radius: var(--r-card); padding: 13px 15px 12px; box-shadow: var(--shadow-tile), var(--rim-inset); }
.scc--good { border-left-color: var(--success); }
.scc--bad { border-left-color: var(--danger); }
.scc--scale { border-left-color: var(--accent); }
.scc--bronze { border-left-color: #b08a4e; }
.scc-name { font: 600 12.5px var(--text); color: var(--ink-2); line-height: 1.32; min-height: 2.5em; }
.scc-figure { display: flex; align-items: baseline; gap: 6px; }
.scc-val { font: 700 22px var(--display); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.scc-yr { font: 400 10px var(--mono); color: var(--ink-3); }
.scc-figure .spark { margin-left: auto; align-self: center; width: 66px; height: 20px; }
.scc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scc-meta .yoy { margin-left: 0; }
.scc-rank { font: 700 13.5px var(--text); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.scc-rank small { font-weight: 400; color: var(--ink-3); font-size: .8em; }
.scc-rank--good { color: var(--success); }
.scc-rank--bad { color: var(--danger); }
.scc-rank--scale { color: var(--accent); }
.scc-rank--bronze { color: #775520; }   /* AUDIT 26 Jul 2026 (§4.7): #9a7838 was 3.46:1 at 12px; #775520 is 5.71:1 and holds the bronze read */
.scc-bench { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: var(--fs-kicker); color: var(--ink-3); border-top: 1px dashed var(--rule-soft); padding-top: 7px; }
.scc-bench b { color: var(--ink-2); font-weight: 600; }
.scc-move { font-size: var(--fs-kicker); }
.scc-move .sc-rankmove { font-size: var(--fs-kicker); font-weight: 600; }
@media (max-width: 640px) { .sc-grid { grid-template-columns: 1fr; } .scc-name { min-height: 0; } }

/* scorecard Profile view: rank-coloured heat grid (the at-a-glance read; cells open their full card) */
.sc-modetabs { display: flex; gap: 7px; margin: 0 0 6px; }
.sc-modetab { font: 600 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rule-soft); background: var(--paper-bright); color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sc-modetab:hover { border-color: var(--accent); }
.sc-modetab.is-on { background: var(--accent); border-color: var(--accent); color: var(--paper-bright, #FEFCF7); }
.sc-heat { display: flex; flex-wrap: wrap; gap: 7px; }
.sch { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--rule-soft); background: var(--paper-bright); cursor: pointer; font: inherit; text-align: left; transition: transform .08s ease, box-shadow .12s ease; }
.sch:hover { transform: translateY(-1px); box-shadow: var(--shadow-tile); }
.sch-name { font: 600 12px var(--text); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.sch-rank { font: 700 12px var(--mono); margin-left: auto; color: var(--ink-3); }
.sch--good { background: color-mix(in srgb, var(--success) 13%, var(--paper-bright)); border-color: color-mix(in srgb, var(--success) 38%, var(--rule-soft)); }
.sch--good .sch-rank { color: var(--success); }
.sch--bad { background: color-mix(in srgb, var(--danger) 12%, var(--paper-bright)); border-color: color-mix(in srgb, var(--danger) 36%, var(--rule-soft)); }
.sch--bad .sch-rank { color: var(--danger); }
.sch--scale { background: color-mix(in srgb, var(--accent) 11%, var(--paper-bright)); border-color: color-mix(in srgb, var(--accent) 32%, var(--rule-soft)); }
.sch--scale .sch-rank { color: var(--accent); }
.sch--bronze { background: color-mix(in srgb, #b08a4e 15%, var(--paper-bright)); border-color: color-mix(in srgb, #b08a4e 36%, var(--rule-soft)); }
.sch--bronze .sch-rank { color: #775520; }   /* AUDIT 26 Jul 2026 (§4.7): was 3.46:1 at 12px, now 5.71:1 */
.sch.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-heat-detail:not(:empty) { margin-top: 13px; }
.sc-grid--one { grid-template-columns: minmax(260px, 380px); }
@media (prefers-reduced-motion: reduce) { .sch:hover { transform: none; } }

/* scorecard: light sections exactly like every other tab; each group keeps its own accent only in its kicker pill */
/* the numbered kicker-pill header (filled accent box + a darker number chip), sitting on the white card */
.sc-group .sc-kick { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin: 0 0 15px;
  padding: 5px 12px; border-radius: 8px; background: var(--ca, var(--accent)); color: var(--ck, #fff);
  font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(20, 17, 13,.18); }
.sc-group .sc-kick-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 15px;
  padding: 0 3px; border-radius: 4px; background: var(--ca, var(--accent)); color: var(--ck, #CBC7BB);
  /* AUDIT 26 Jul 2026 (§4.7): same fault as .page-hero-band .ph-n — paper text hardcoded over
     a 55%-into-ink mix reached only 3.53:1 at 9.5px. Full --ca ground, --ck text, AA on every cluster. */
  font: 700 9.5px var(--mono); letter-spacing: .02em; }

/* floating measure-detail modal (Profile cell click) */
body.scd-locked { overflow: hidden; }
.scd-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .16s ease; }
.scd-modal.is-open { opacity: 1; }
.scd-modal-bg { position: absolute; inset: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: rgba(3, 22, 2, 0.82); }
/* M3 hero carousel: a transparent shell holding the nav bar + the sliding deck; each slide is a distinct
   apple-glass M3 card, one large focused item with the neighbours peeking smaller. M3 emphasized easing. */
.scd-modal-card { position: relative; z-index: 1; width: min(600px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(12px) scale(.98); transition: transform var(--m3-dur-medium2, 300ms) cubic-bezier(0.2, 0, 0, 1); }
.scd-modal.is-open .scd-modal-card { transform: none; }
/* carousel controls: prev / position / next on the left, close on the right (44px touch targets) */
.scd-modal-top { display: flex; align-items: center; gap: 8px; margin: 0 4px 12px; }
.scd-nav, .scd-modal-x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper-on-ink); font: 400 22px/1 var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, transform .1s; }
.scd-nav:hover, .scd-modal-x:hover { background: var(--accent); border-color: var(--accent); color: var(--paper-bright, #FEFCF7); }
.scd-nav:active { transform: scale(.93); }
.scd-nav:focus-visible, .scd-modal-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scd-pos { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--paper-on-ink-2, #c2bcae); min-width: 56px; }
.scd-modal-x { margin-left: auto; }
/* native scroll-snap scroller: every measure is a real card in one horizontal track, so momentum, wheel and
   drag are the browser's own (smooth). padding-inline gives the first/last card room to centre. */
.scd-scroller { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; min-height: 0;
  scroll-snap-type: x mandatory; padding-inline: var(--scd-peek, 56px); scroll-padding-inline: var(--scd-peek, 56px);
  -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; cursor: grab; outline: none;
  scrollbar-width: none; -ms-overflow-style: none; }
.scd-scroller::-webkit-scrollbar { display: none; }
.scd-scroller:active { cursor: grabbing; }
/* each slide = an apple-glass M3 card (28px shape); centred large, neighbours peek smaller (hero layout).
   scale + opacity are written inline from scroll position (the M3 hero resize) so there is NO transition here. */
.scd-slide { box-sizing: border-box; scroll-snap-align: center; border-radius: 10px; padding: 24px 24px 20px;
  overflow-y: auto; max-height: 78vh;
  background: color-mix(in srgb, var(--paper-bright) 96%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 22px 60px -14px rgba(20, 17, 13,.5), 0 0 60px -10px color-mix(in srgb, var(--accent) 50%, transparent);
  transform: scale(.85); opacity: .5; transform-origin: center; will-change: transform;
  user-select: none; -webkit-user-select: none; }
.scd-slide.is-center { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sc-group::after, .sc-group .sch--good, .sc-group .sch--bad, .scd-modal-card, .scd-slide { transition: none; animation: none; }
  .scd-scroller { scroll-behavior: auto; } }
.scd { display: flex; flex-direction: column; gap: 14px; border-left: 4px solid var(--rule); padding-left: 16px; }
.scd--good { border-left-color: var(--success); } .scd--bad { border-left-color: var(--danger); } .scd--scale { border-left-color: var(--accent); } .scd--bronze { border-left-color: #b08a4e; }
.scd-name { font: 600 15px var(--text); color: var(--ink-2); padding-right: 30px; line-height: 1.3; }
.scd-figure { display: flex; align-items: baseline; gap: 9px; }
.scd-val { font: 700 38px var(--display); color: var(--ink); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.scd-yr { font: 400 12px var(--mono); color: var(--ink-3); }
.scd-figure .spark { margin-left: auto; align-self: center; width: 120px; height: 34px; }
/* The sparkline pulses in the DIRECTION of the line: a bright, slightly thicker swell travels left to right
   (oldest to latest) along the coloured segments and arrives at the end dot. Each segment is phase-shifted by
   its position along the line (--sp, set inline 0 to 1 in sparkline()), so the highlight sweeps rather than
   the whole line breathing in unison. delay = (sp - 1) x period keeps every segment already mid-cycle (no
   first-loop ramp) while making later segments peak later, i.e. the swell moves toward the latest year. */
@keyframes spkFlow { 0%, 100% { opacity: .42; stroke-width: 1.3px; } 50% { opacity: 1; stroke-width: 2.1px; } }
@keyframes spkFlowBig { 0%, 100% { opacity: .42; stroke-width: 1.5px; } 50% { opacity: 1; stroke-width: 3px; } }
@keyframes spkDot { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.9); opacity: 1; } }
/* flow only on the card-grid tiles and the CENTRED carousel slide (not all 103 modal cards at once) */
.scc-figure .spark line, .scd-slide.is-center .scd-figure .spark line {
  animation: spkFlow 2.4s ease-in-out infinite; animation-delay: calc((var(--sp, 0) - 1) * 2.4s); will-change: opacity, stroke-width; }
.scd-slide.is-center .scd-figure .spark line { animation-name: spkFlowBig; }
.scc-figure .spark circle, .scd-slide.is-center .scd-figure .spark circle {
  transform-box: fill-box; transform-origin: center;
  animation: spkDot 2.4s ease-in-out infinite; animation-delay: calc((var(--sp, 1) - 1) * 2.4s); }
@media (prefers-reduced-motion: reduce) { .scc-figure .spark line, .scd-figure .spark line, .scc-figure .spark circle, .scd-figure .spark circle { animation: none; } }
.scd-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.scd-block-t { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.scd-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--rule-soft); font-size: var(--fs-chrome); }
.scd-row:last-child { border-bottom: none; }
.scd-row-l { color: var(--ink-2); min-width: 128px; }
.scd-row-v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.scd-row-v small { font-weight: 400; color: var(--ink-3); }
.scd-row-x { color: var(--ink-3); font-size: var(--fs-kicker); margin-left: auto; }
.scd-src { font-size: var(--fs-caption); color: var(--ink-soft); border-top: 1px solid var(--rule-soft); padding-top: 10px; }

/* Trend-change view: median reference rows (national gold, or one per state / mission group in its colour via --mc),
   so each university's move reads against the median(s). A divider sits under the last median row. */
/* a light shadow + faint gold tint lifts each median row off the ranked list (no horizontal padding, so the bars stay aligned with the universities below) */
.trd-row--median { background: color-mix(in srgb, var(--chart-gold) 6%, var(--paper-bright)); box-shadow: 0 1px 2px rgba(20, 17, 13,.06), 0 3px 9px -3px rgba(20, 17, 13,.11); border-radius: 0; margin-bottom: 3px; }
.trd-row--median:hover { background: color-mix(in srgb, var(--chart-gold) 9%, var(--paper-bright)); }
.trd-row--median .trd-rank { color: var(--chart-gold); font-size: var(--fs-chrome); line-height: 1; }
.trd-row--median .trd-name { color: var(--ink-2); font-weight: 600; }
.trd-row--median .trd-chg { color: var(--ink-2); }
.trd-bar--median { background: var(--chart-gold) !important; height: 4px; opacity: .95; }
.trd-dot--median.trd-dot--end { background: var(--chart-gold) !important; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 17, 13,.3); }
.trd-row--medlast { margin-bottom: 10px; }

/* ============================================================================
   Stage 1+2 UX layer (5 Jul 2026): compact interior masthead, rich empty state,
   command palette, copy-link chip, back-to-top, board-brief print surfacing.
   Palette stays the shipped v2.1 set (R8 freeze) — no new hues introduced.
   ============================================================================ */

/* -- F3: interior routes get a compact masthead (home keeps the full hero; the
      lede's copy already lives in the landing intro card, so it hides here) -- */
body:not(.is-home) .page-hero .bandwrap { padding: 13px var(--col-pad) 11px; }
body:not(.is-home) .page-hero h1 { font-size: clamp(19px, 2.3vw, 25px); letter-spacing: -0.012em; }
body:not(.is-home) .page-hero .lede { display: none; }
body:not(.is-home) .page-hero .hero-eyebrow { font-size: var(--fs-caption); padding: 2px 8px; margin-bottom: 8px; }
body:not(.is-home) .beta-bar .bandwrap { padding-top: 7px; padding-bottom: 7px; }

/* -- F2: rich empty state — grouped university tiles instead of a bare select -- */
.pick-intro { max-width: 720px; }
.pick-groups { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.pick-grp-name { font: 700 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.pick-tile { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 13px 10px; border: 1px solid var(--rule-soft); border-radius: 0; background: var(--card, var(--paper-tint)); cursor: pointer; font-family: var(--text); transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.pick-tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20, 17, 13, .08); }
.pick-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-tile b { font-size: var(--fs-chrome); font-weight: 600; color: var(--ink); line-height: 1.25; }
.pick-tile span { font: 500 10.5px var(--mono); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .pick-tile, .pick-tile:hover { transition: none; transform: none; } }

/* -- F1: command palette (Cmd/Ctrl-K) -- */
.cbk-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(20, 17, 13, .48); opacity: 0; pointer-events: none; transition: opacity .16s ease; }
body.cbk-open .cbk-scrim { opacity: 1; pointer-events: auto; }
.cbk { position: fixed; left: 50%; top: min(14vh, 130px); transform: translateX(-50%) translateY(6px); z-index: 301; width: min(640px, calc(100vw - 28px)); background: var(--card, var(--paper-tint)); border: 1px solid var(--rule-soft); border-radius: 10px; box-shadow: 0 24px 70px rgba(20, 17, 13, .35); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; display: flex; flex-direction: column; overflow: hidden; }
body.cbk-open .cbk { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .cbk, .cbk-scrim { transition: none; } }
.cbk-inputrow { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--rule-soft); }
.cbk-inputrow svg { flex: 0 0 auto; color: var(--ink-3); }
.cbk-input { flex: 1; border: 0; background: transparent; font: 500 15.5px var(--text); color: var(--ink); outline: none; }
.cbk-input::placeholder { color: var(--ink-3); }
.cbk-esc { flex: 0 0 auto; font: 600 9.5px var(--mono); letter-spacing: .08em; color: var(--ink-3); border: 1px solid var(--rule-soft); border-radius: 5px; padding: 3px 6px; background: transparent; cursor: pointer; }
.cbk-list { max-height: min(46vh, 430px); overflow-y: auto; padding: 7px; }
.cbk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-family: var(--text); }
.cbk-item.is-active, .cbk-item:hover { background: var(--accent-soft, var(--accent-wash)); }
.cbk-item.is-active .cbk-lbl { color: var(--accent-deep, var(--accent-deep)); }
.cbk-type { flex: 0 0 auto; min-width: 58px; text-align: center; font: 700 8.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: var(--paper-2, var(--paper-2)); color: var(--ink-3); }
.cbk-type--uni { background: var(--accent-wash); color: var(--accent-deep); }
.cbk-type--metric { background: #F4EAD1; color: #6b5410; }
.cbk-lbl { flex: 1 1 auto; font-size: var(--fs-small); font-weight: 500; color: var(--ink); line-height: 1.3; }
.cbk-sub { flex: 0 1 auto; font: 500 10.5px var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.cbk-none { padding: 18px 14px; font-size: var(--fs-chrome); color: var(--ink-3); }
.cbk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--rule-soft); font: 500 10.5px var(--mono); color: var(--ink-3); }
.cbk-foot a { color: var(--accent); text-decoration: none; }
.cbk-foot a:hover { text-decoration: underline; }
.cbk-foot .cbk-keys { display: flex; gap: 8px; }
.cbk-foot kbd { font: 600 9.5px var(--mono); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 1px 5px; background: var(--paper-2, var(--paper-2)); }
@media (max-width: 640px) { .cbk { top: 10px; } .cbk-sub { display: none; } .cbk-foot .cbk-keys { display: none; } }

/* the Search affordances: a solo pill in the desktop tab bar, an icon button on mobile */
.head-search { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; margin-left: 14px; border: 1px solid var(--rule-soft, #CBC7BB); border-radius: var(--radius-control, 5px); background: transparent; color: var(--ink-2, var(--ink-2)); font: 600 12.5px var(--text); letter-spacing: .01em; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.head-search:hover { border-color: var(--accent); background: var(--accent-soft, var(--accent-wash)); }
.head-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.head-search kbd { font: 600 9px var(--mono); border: 1px solid var(--rule-soft, #CBC7BB); border-radius: var(--radius-control, 5px); padding: 1px 4px; background: var(--paper-2, var(--paper-2)); color: var(--ink-3, var(--ink-3)); }
@media (max-width: 640px) { .head-search { display: none; } }
.mnav-search { display: none; }
@media (max-width: 640px) {
  /* the jump bar becomes a two-column grid: the cue spans the row, then search + trigger share it */
  .mobile-nav-main { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; }
  .mobile-nav-cue { grid-column: 1 / -1; }
  .mnav-search { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1.6px solid rgba(255, 255, 255, .55); border-radius: var(--radius-control, 5px); background: transparent; color: #fff; cursor: pointer; }
  .mnav-search:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}

/* -- F7: copy-link chip in the view hero band + quiet toast -- */
.page-hero-band { position: relative; }
#main .page-hero-band > .ph-copy.ph-copy { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; background: rgba(255, 255, 255, .07); color: var(--paper-on-ink-2, #CBC7BB); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .14s ease; }
.ph-copy:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.ph-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { #main .page-hero-band > .ph-copy.ph-copy { position: static; align-self: flex-start; margin-top: 2px; } }
/* cross-link pill in the page-hero band: a university tab points at its sector counterpart, a sector
   tab points back at the selected university. A normal flex child, so it never collides with the
   absolutely positioned copy-link button at any width. */
#main .page-hero-band > .ph-ctx { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; background: rgba(255, 255, 255, .07); color: var(--paper-on-ink-2, #CBC7BB); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .14s ease; }
#main .page-hero-band > .ph-ctx:hover { background: rgba(255, 255, 255, .15); color: #fff; }
#main .page-hero-band > .ph-ctx:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cb-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px); z-index: 400; background: var(--ink-surface, var(--ink-chip)); color: var(--paper-on-ink, var(--paper)); font: 600 12.5px var(--text); padding: 10px 18px; border-radius: 9px; box-shadow: 0 10px 30px rgba(20, 17, 13, .35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.cb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .cb-toast { transition: none; } }

/* -- F5: back-to-top (appears after ~a screen and a half of scroll) -- */
#toTop { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-soft); border-radius: 999px; background: var(--ink-surface, var(--ink-chip)); color: var(--paper-on-ink, var(--paper)); cursor: pointer; box-shadow: 0 8px 22px rgba(20, 17, 13, .3); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
#toTop.is-vis { opacity: .92; pointer-events: auto; transform: translateY(0); }
#toTop:hover { opacity: 1; }
#toTop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body:has(.cmp-tray.open) #toTop { bottom: 84px; }
@media (prefers-reduced-motion: reduce) { #toTop { transition: none; } }

/* -- F6: board-brief action row (screen-only; print output is the pack + content) -- */
.brief-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.brief-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: var(--radius-control, 5px); background: var(--accent); color: #fff; font: 600 12.5px var(--text); cursor: pointer; transition: background .14s ease; }
.brief-btn:hover { background: var(--accent-deep, var(--accent-deep)); }
.brief-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-hint { font-size: var(--fs-kicker); color: var(--ink-soft, var(--ink-3)); }

/* print: none of the new interactive layer reaches paper, and the dark hero band
   gives way to the print pack masthead */
@media print {
  .cbk, .cbk-scrim, .cb-toast, #toTop, .ph-copy, .brief-actions, .head-search, .mnav-search,
  .page-hero-band, .pick-groups { display: none !important; }
}

/* -- Stage 4 (5 Jul 2026): persona quick-starts on the landing -- */
.home-personas { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 10px; align-items: stretch; margin: 18px 0 14px; }
.home-personas-label { align-self: center; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-right: 4px; white-space: nowrap; }
.home-persona { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 11px; border: 1px solid var(--rule-soft); border-radius: 10px; background: var(--paper-tint); text-decoration: none; transition: border-color .14s var(--ease-out), transform .14s var(--ease-out), box-shadow .14s var(--ease-out); }
.home-persona:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-chip); }
.home-persona:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-persona b { font: 700 13.5px var(--display); color: var(--ink); letter-spacing: -.01em; }
.home-persona span { font-size: var(--fs-chrome-sm); line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 980px) { .home-personas { grid-template-columns: 1fr 1fr; } .home-personas-label { grid-column: 1 / -1; } }
@media (max-width: 520px) { .home-personas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .home-persona, .home-persona:hover { transition: none; transform: none; } }
@media print { .home-personas { display: none !important; } }

/* -- 08 · Report (5 Jul 2026): screen framing + the A4 portrait print document -- */
.rpt-disc { border: 0.5pt solid rgba(212, 175, 103, .5); border-radius: 3mm; background: #FAF3E3; padding: 12px 15px; font-size: var(--fs-chrome); line-height: 1.55; color: var(--ink-2); margin: 12px 0 14px; box-shadow: 0 0.3mm 0.8mm rgba(20, 17, 13, .05), 0 1.5mm 3.5mm -1.2mm rgba(20, 17, 13, .10); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-disc b { color: var(--ink); }
.rpt-toc { margin: 0; padding: 0 0 0 4px; list-style: none; columns: 2; column-gap: 36px; }
.rpt-toc li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); break-inside: avoid; font-size: var(--fs-chrome); color: var(--ink); }
.rpt-toc li:last-child { border-bottom: 0; }
.rpt-tocn { font: 700 10px var(--mono); color: var(--accent-deep); background: var(--accent-wash); border-radius: 5px; padding: 2px 6px; }
.rpt-tocc { margin-left: auto; font: 500 10.5px var(--mono); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 700px) { .rpt-toc { columns: 1; } }

/* the print document itself: never on screen, the whole story in print */
.rpt { display: none; }

/* with 08 · Report added, the tab row overflows between ~1250 and ~1540px; step the pill
   density down one notch there so all nine entries hold a single row */
@media (min-width: 981px) {
  nav.tabs .tab-head, nav.tabs .tab-solo { padding: 6px 8px; font-size: var(--fs-chrome-sm); }
}





/* -- big-select searchable sheet (reuses the palette shell; own open state) -- */
body.cbs-open #cbsScrim { opacity: 1; pointer-events: auto; }
body.cbs-open #cbs { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#cbs .cbs-list { max-height: min(58vh, 560px); }
.cbs-grp { position: sticky; top: 0; z-index: 1; background: var(--card, var(--paper-tint)); font: 700 9.5px var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); padding: 8px 11px 4px; border-bottom: 1px solid var(--rule-soft); }
#cbs .cbk-item { padding: 8px 11px; }
#cbs .cbk-lbl { font-size: var(--fs-chrome); }
#cbs .cbk-item.is-current .cbk-lbl { color: var(--accent-deep); font-weight: 600; }
.cbs-tick { margin-left: auto; color: var(--accent); font-weight: 700; }
#cbs .cbk-item.is-dis { opacity: .45; cursor: default; }

/* -- tab bar: below ~1300px the number chips go and the pills tighten, so all nine
      entries plus Method hold one row on laptop widths -- */
/* the tab bar lives in a fixed 1180px container at every desktop width, so the number
   chips are hidden and the bar is pinned to one row (never wraps) across all desktop sizes,
   not just up to 1300px — above that the full-size pills overflowed and Method dropped to a
   second line (fixed 6 Jul 2026). */
@media (min-width: 981px) {
  nav.tabs { flex-wrap: nowrap; gap: 4px; }
  nav.tabs .tab-head, nav.tabs .tab-solo { padding: 6px 7px; font-size: var(--fs-kicker); }
}

/* -- Offshore-campus finance caveat (6 Jul 2026): flags the four per-EFTSL finance measures
      that understate universities with controlled offshore campuses. Muted gold, never alarm-red. -- */
.kpi-caveat, .scc-caveat, .scd-caveat {
  margin-top: 9px; padding: 7px 9px 6px 10px;
  border-left: 2px solid var(--chip-gold, var(--chip-yellow));
  background: color-mix(in srgb, var(--chip-gold, var(--chip-yellow)) 8%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-kicker); line-height: 1.45; color: var(--ink-2);
}
.kpi-caveat::before, .scc-caveat::before, .scd-caveat::before, .note--caveat::before {
  content: "\2020\00a0"; color: var(--warn-text, #8E6E2E); font-weight: 700;
}
.note.note--caveat {
  border-left: 2px solid var(--chip-gold, var(--chip-yellow));
  background: color-mix(in srgb, var(--chip-gold, var(--chip-yellow)) 7%, transparent);
  padding: 8px 12px; border-radius: 0 8px 8px 0; margin-top: 8px; color: var(--ink-2);
}
.sch-cav { color: var(--warn-text, #8E6E2E); font-weight: 700; font-size: 0.7em; margin-left: 1px; }
.sch--cav { outline: 1px dashed color-mix(in srgb, var(--chip-gold, var(--chip-yellow)) 60%, transparent); outline-offset: -2px; }

/* == 08 · Report — the 2027 CoreBridge paper document (16 Jul 2026) ==============
   The downloadable university report is built page-for-page in the 2027 CoreBridge
   design system ("2027 CoreBridge Design" project → documents paper.css): fixed
   210×297mm pages with painted head/foot bands, Hanken Grotesk display over
   Cormorant serif, #F2F0EF paper, deep teal #234C50 (soft #9CC2C0 on dark
   grounds), and the copper-teal atmospheric ground on the cover, dividers and
   back cover. Pages are assembled and PAGINATED in app.js (rptCompose): content is
   measured in a hidden on-screen stage (.rpt--measure) at true mm metrics, packed
   into pages, and printed with @page margin 0 — every painted surface carries
   print-color-adjust: exact, so the document no longer depends on the print
   dialog's Margins or Background-graphics settings. */

.rpt {
  /* tokens scoped to the document so it matches paper.css exactly, independent of dashboard drift */
  --rp-paper: #F2F0EF; --rp-paper-bright: #FBF9F4; --rp-paper-deep: #D2CCBE;
  --rp-ink: #031602; --rp-ink-2: #3A352D; --rp-ink-3: #6B6557;
  --rp-rule: rgba(3, 22, 2, 0.18); --rp-rule-soft: rgba(3, 22, 2, 0.10);
  --rp-accent: #234C50; --rp-accent-soft: #9CC2C0; --rp-accent-ink: #16363A;
  --rp-chip-yellow: #E8C45F;
  --rp-on-ink: #CBC7BB; --rp-on-ink-2: rgba(239, 234, 224, 0.72); --rp-on-ink-3: rgba(239, 234, 224, 0.50);
  --rp-wm-white: #F5F3EF;   /* the cover/back wordmark white, per the 2027 project's own cover source */
  --rp-good: #3D5A3D; --rp-bad: #8E2E2E; --rp-warn: #8E6E2E;
  --rp-display: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --rp-serif: "Spectral", Georgia, "Times New Roman", serif;
  font-family: var(--rp-serif); color: var(--rp-ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* the hidden measuring stage: laid out on screen at true print metrics, never visible */
.rpt.rpt--measure { display: block; position: fixed; left: -12000px; top: 0; visibility: hidden; pointer-events: none; }
.rpt--measure .rp-mbody { width: 158mm; display: flow-root; padding: 0; height: auto; overflow: visible; }

/* -- page shell ------------------------------------------------------------ */
.rp-page {
  width: 210mm; height: 297mm; position: relative; overflow: hidden;
  background: var(--rp-paper); color: var(--rp-ink);
  display: grid; grid-template-rows: 17mm 1fr 17mm;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* crop ticks, per paper.css */
.rp-page::before, .rp-page::after { content: ""; position: absolute; width: 4mm; height: 0.3mm; background: var(--rp-rule); z-index: 5; }
.rp-page::before { top: 5mm; left: 5mm; }
.rp-page::after { bottom: 5mm; right: 5mm; }
.rp-page--ink::before, .rp-page--ink::after { background: rgba(255, 255, 255, 0.16); }

/* dark ground: the copper-teal atmospheric bloom + floor falloff (paper.css .atm) */
/* Dark ground, flat (WI-1 + WI-12). The copper-and-teal atmospheric bloom
   is retired: off-palette in both hues, and a generated document has to
   print cleanly in black and white on a Council member's office printer. */
.rp-page--ink {
  background-color: #031602; color: var(--rp-on-ink);
}
.rp-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjQwIDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
  background-size: 160px 160px; opacity: 0.10; mix-blend-mode: overlay;
}

/* -- head & foot bands (paper pages) --------------------------------------- */
.rp-head, .rp-foot {
  display: flex; justify-content: space-between; gap: 6mm; white-space: nowrap;
  padding-left: 26mm; padding-right: 26mm;
  font-family: var(--rp-display); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #5A6357;
  min-width: 0; overflow: hidden;
}
.rp-head { align-items: flex-end; padding-top: 8mm; padding-bottom: 2.2mm; border-bottom: 0.2mm solid var(--rp-rule); }
.rp-foot { align-items: center; border-top: 0.2mm solid var(--rp-rule); }
.rp-head .rp-head-sec { color: var(--rp-ink); overflow: hidden; text-overflow: ellipsis; }
.rp-chip {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  background: #031602; color: var(--rp-chip-yellow);
  font-family: var(--rp-display); font-size: 9px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 8px 3px; border-radius: 3px; line-height: 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-wm { display: inline-flex; align-items: baseline; text-transform: none; letter-spacing: -0.012em; color: var(--rp-ink); }
.rp-wm b { font-family: var(--rp-display); font-weight: 700; font-size: var(--fs-chrome); }
.rp-wm span { font-family: var(--rp-display); font-weight: 300; font-size: var(--fs-chrome); }
.rp-pg { font-family: var(--rp-display); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.14em; color: var(--rp-ink); }

/* -- page body -------------------------------------------------------------- */
.rp-body { grid-row: 2; padding: 8mm 26mm 6mm; overflow: hidden; min-height: 0; }
.rp-body > :first-child { margin-top: 0 !important; }
.rp-body img, .rp-body svg { max-width: 100%; }
.rp-body table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; word-wrap: break-word; }

/* -- kicker + headline (paper.css .kicker/.headline) ------------------------ */
.rp-kicker {
  display: flex; align-items: baseline; gap: 4mm; margin-top: 7mm;
  font-family: var(--rp-display); font-size: 8pt; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; padding-bottom: 3mm; border-bottom: 0.2mm solid var(--rp-rule);
}
.rp-kicker .num { color: var(--rp-accent); }
.rp-kicker .ttl { color: var(--rp-ink-3); font-weight: 500; }
.rp-headline {
  font-family: var(--rp-display); font-weight: 700; font-size: 22pt; line-height: 1.10;
  letter-spacing: -0.025em; color: var(--rp-ink); text-wrap: pretty; margin: 6mm 0 0;
}
.rp-kickline {
  margin-top: 7mm; font-family: var(--rp-display); font-size: 8pt; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-accent);
  padding-bottom: 2mm; border-bottom: 0.2mm solid var(--rp-rule);
}

/* -- cover ------------------------------------------------------------------ */
.rp-cover { display: block; padding: 0; }
.rp-cover-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 32%; z-index: 0; filter: saturate(0.94) contrast(1.02);
}
.rp-cover-scrim {
  /* THE GRADIENT EXCEPTION (functional, not decorative), same standing as
     .photo-divider::after in the main stylesheet: a cover title set over a
     photograph needs a legibility ramp. Ink #031602 only, single hue, no
     second colour introduced. */
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 95% 55% at 18% 100%, rgba(3, 22, 2, 0.92) 0%, rgba(3, 22, 2, 0.78) 28%, rgba(3, 22, 2, 0.40) 55%, rgba(3, 22, 2, 0.00) 78%),
    linear-gradient(to bottom, rgba(3, 22, 2, 0.22) 0%, rgba(3, 22, 2, 0.00) 18%, rgba(3, 22, 2, 0.00) 55%, rgba(3, 22, 2, 0.50) 88%, rgba(3, 22, 2, 0.80) 100%),
    linear-gradient(to bottom, rgba(3, 22, 2, 0.42) 0%, rgba(3, 22, 2, 0.10) 14%, rgba(3, 22, 2, 0.00) 26%);
}
.rp-cover .rp-grain { z-index: 1; opacity: 0.08; }
.rp-cover-top {
  position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; padding: 16mm 26mm 0;
}
.rp-cover-brand { display: inline-flex; align-items: center; gap: 14px; }
.rp-cover-brand img { width: 12mm; height: 12mm; display: block; }
.rp-cover-brand .rp-wm b, .rp-cover-brand .rp-wm span { font-size: 19px; color: var(--rp-wm-white); }
.rp-cover-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 26mm 18mm; }
.rp-cover-eyebrow {
  font-family: var(--rp-display); font-size: 9pt; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rp-accent-soft); margin-bottom: 6mm;
}
.rp-cover-title {
  font-family: var(--rp-display); font-weight: 700; font-size: 42pt; line-height: 0.98;
  letter-spacing: -0.035em; color: var(--rp-on-ink); margin: 0; max-width: 100%;
  text-wrap: balance;
}
.rp-cover-sub {
  margin: 6mm 0 0; max-width: 30em; font-family: var(--rp-serif); font-style: normal;
  font-size: 12pt; line-height: 1.45; color: var(--rp-on-ink-2);
}
.rp-cover-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12mm;
  margin-top: 11mm; padding-top: 5mm; border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--rp-display); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rp-on-ink-2);
}
.rp-cover-meta span:last-child { color: var(--rp-on-ink); flex: 0 0 auto; }
.rp-cover-fine {
  margin: 4mm 0 0; font-family: var(--rp-display); font-size: 6.5pt; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42);
}

/* -- section divider pages --------------------------------------------------- */
.rp-div { display: block; padding: 0; }
.rp-div-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; padding: 22mm 26mm 20mm;
}
.rp-div-numeral {
  font-family: var(--rp-display); font-weight: 600; font-size: 118px; line-height: 0.85;
  letter-spacing: -0.04em; color: var(--rp-accent-soft);
}
.rp-div-main { margin-top: auto; padding-top: 10mm; }
.rp-div-eyebrow {
  font-family: var(--rp-display); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rp-accent-soft); margin-bottom: 5mm;
}
.rp-div-title {
  font-family: var(--rp-display); font-weight: 800; font-size: 34px; line-height: 1.05;
  letter-spacing: 0.004em; color: var(--rp-on-ink); margin: 0 0 5mm; text-wrap: pretty; max-width: 15em;
}
.rp-div-stmt {
  font-family: var(--rp-serif); font-style: normal; font-weight: 400; font-size: 12.5pt;
  line-height: 1.5; color: var(--rp-on-ink-2); margin: 0; max-width: 34em; text-wrap: pretty;
}
.rp-div-read { margin-top: 8mm; border-top: 0.2mm solid rgba(255, 255, 255, 0.16); padding-top: 5mm; max-width: 150mm; }
.rp-div-read-h {
  font-family: var(--rp-display); font-size: 8pt; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rp-accent-soft); margin-bottom: 3mm;
}
.rp-div-read ul { margin: 0; padding-left: 5mm; }
.rp-div-read li { font-family: var(--rp-serif); font-size: 11pt; line-height: 1.5; color: var(--rp-on-ink); margin-bottom: 2mm; }
.rp-div-read li::marker { color: var(--rp-on-ink-3); }
.rp-div-read b { color: var(--rp-on-ink); font-weight: 600; }
.rp-div-bot {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10mm;
  margin-top: 9mm; border-top: 0.2mm solid rgba(255, 255, 255, 0.16); padding-top: 5mm;
}
.rp-dstat { display: flex; flex-direction: column; gap: 1.4mm; min-width: 0; }
.rp-dstat-v { font-family: var(--rp-display); font-weight: 700; font-size: 21pt; letter-spacing: -0.02em; color: var(--rp-on-ink); line-height: 1; }
.rp-dstat-l { font-family: var(--rp-display); font-size: 7pt; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-on-ink-3); line-height: 1.5; }
.rp-dstat-r { font-family: var(--rp-display); font-size: 7pt; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--rp-accent-soft); }

/* -- contents ---------------------------------------------------------------- */
.rp-contents-grid { display: grid; grid-template-columns: 1fr 52mm; gap: 8mm; margin-top: 6mm; align-items: start; }
.rp-toc-section {
  font-family: var(--rp-display); font-size: 7.5pt; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rp-accent); margin: 5mm 0 1.5mm;
  border-top: 0.3mm solid var(--rp-rule); padding-top: 2.5mm;
}
.rp-toc-section:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.rp-toc-row { display: grid; grid-template-columns: 9mm 1fr 17mm; gap: 2mm; align-items: baseline; padding: 1.8mm 0; border-bottom: 0.15mm dotted rgba(3, 22, 2, 0.20); }
.rp-toc-no { font-family: var(--rp-display); font-size: 7.5pt; font-weight: 500; letter-spacing: 0.10em; color: var(--rp-ink-3); }
.rp-toc-ttl { font-family: var(--rp-display); font-size: 10.5pt; font-weight: 600; color: var(--rp-ink); letter-spacing: -0.012em; }
.rp-toc-desc { display: block; font-family: var(--rp-serif); font-size: 8pt; font-style: normal; color: var(--rp-ink-3); letter-spacing: 0; margin-top: 0.4mm; line-height: 1.35; }
.rp-toc-pg { font-family: var(--rp-display); font-size: 8pt; font-weight: 500; letter-spacing: 0.10em; font-variant-numeric: tabular-nums; color: var(--rp-ink-3); text-align: right; }

/* -- boxes (paper.css .box) --------------------------------------------------- */
.rp-box {
  background: var(--rp-paper-bright); border: 0.3mm solid var(--rp-rule); border-radius: 1mm;
  padding: 4mm; margin-top: 4mm;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-box:first-child { margin-top: 0; }
.rp-box--ink { background: var(--rp-ink); color: var(--rp-on-ink); border-color: transparent; }
.rp-box--accent { background: rgba(35, 76, 80, 0.07); border-color: rgba(35, 76, 80, 0.24); }
.rp-box-tag {
  font-family: var(--rp-display); font-size: 7pt; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rp-accent); margin-bottom: 2mm;
}
.rp-box--ink .rp-box-tag { color: var(--rp-chip-yellow); }
.rp-box-title { font-family: var(--rp-display); font-size: 10.5pt; font-weight: 700; color: var(--rp-ink); letter-spacing: -0.014em; line-height: 1.25; text-wrap: balance; }
.rp-box--ink .rp-box-title { color: var(--rp-on-ink); }
.rp-box-body { font-family: var(--rp-serif); font-size: 8.5pt; line-height: 1.5; color: var(--rp-ink-2); margin-top: 1.5mm; }
.rp-box--ink .rp-box-body { color: var(--rp-on-ink-2); }
.rp-box-body b { color: var(--rp-ink); font-weight: 600; }
.rp-box--ink .rp-box-body b { color: var(--rp-on-ink); }
.rp-box-body p { margin: 0 0 2mm; }
.rp-box-body p:last-child { margin-bottom: 0; }
.rp-box--accent .rp-box-body em { font-style: normal; }

/* -- key findings ------------------------------------------------------------- */
.rp-lede { margin-top: 5mm; max-width: 128mm; }
.rp-lede p { font-family: var(--rp-serif); font-size: 10.5pt; line-height: 1.55; color: var(--rp-ink-2); letter-spacing: -0.005em; margin: 0 0 3mm; text-wrap: pretty; }
.rp-lede p b { color: var(--rp-ink); font-weight: 600; }
.rp-lede > p:first-child::first-letter {
  font-family: var(--rp-serif); font-weight: 500; font-size: 4.6em; line-height: 0.85;
  float: left; padding: 1mm 2mm 0 0; color: var(--rp-accent-ink);
}
.rp-lede-tension { font-style: normal; color: var(--rp-ink) !important; border-top: 0.2mm solid var(--rp-rule-soft); padding-top: 3mm; }
.rp-execgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 6mm; margin-top: 6mm; }
.rp-move { border-top: 0.3mm solid var(--rp-rule); padding-top: 2.5mm; min-width: 0; }
.rp-move .lbl {
  font-family: var(--rp-display); font-size: 7.5pt; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rp-accent); margin-bottom: 1.5mm;
}
.rp-move .lbl.is-good { color: var(--rp-good); }
.rp-move .lbl.is-watch { color: var(--rp-bad); }
.rp-move .body { font-family: var(--rp-serif); font-size: 9.5pt; line-height: 1.5; color: var(--rp-ink-2); text-wrap: pretty; }
.rp-move .body b { font-weight: 600; color: var(--rp-ink); }
.rp-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm 6mm; margin-top: 6mm; }
.rp-gt { border-top: 0.3mm solid var(--rp-rule); padding-top: 2.2mm; min-width: 0; }
.rp-gt-k { font-family: var(--rp-display); font-size: 6.8pt; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-ink-3); margin-bottom: 1.6mm; min-height: 6.4mm; }
.rp-gt-v { font-family: var(--rp-display); font-weight: 700; font-size: 16.5pt; letter-spacing: -0.025em; color: var(--rp-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.rp-gt-v.is-good { color: var(--rp-good); }
.rp-gt-v.is-bad { color: var(--rp-bad); }
.rp-gt-r { font-family: var(--rp-serif); font-size: 8pt; color: var(--rp-ink-2); margin-top: 1.6mm; line-height: 1.4; }
.rp-gt-r b { font-weight: 600; color: var(--rp-ink); }
.rp-gt-m { font-family: var(--rp-display); font-size: 6.4pt; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-ink-3); margin-top: 1.2mm; line-height: 1.6; }
.rp-evidence { list-style: none; padding: 0; margin: 3mm 0 0; }
.rp-evidence li {
  font-family: var(--rp-serif); font-size: 9.5pt; line-height: 1.5; color: var(--rp-ink-2);
  letter-spacing: -0.003em; padding: 2.4mm 0 2.4mm 9mm;
  border-bottom: 0.15mm dotted var(--rp-rule); position: relative; text-wrap: pretty;
}
.rp-evidence li::before { content: "\2192"; position: absolute; left: 0; top: 2.4mm; font-family: var(--rp-display); font-size: 9pt; color: var(--rp-accent); font-weight: 500; }
.rp-evidence li:last-child { border-bottom: 0; }

/* -- exhibits (paper.css .fig) -------------------------------------------------- */
.rp-exrow { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 6mm; margin-top: 5mm; }
.rp-fig { margin: 0; border-top: 0.4mm solid var(--rp-ink); min-width: 0; }
.rp-fig-head { display: grid; grid-template-columns: 11mm 1fr; gap: 2.5mm; align-items: baseline; padding: 2.2mm 0 1.8mm; }
.rp-fig-no { font-family: var(--rp-display); font-size: 7pt; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-accent); }
.rp-fig-title { font-family: var(--rp-display); font-size: 9pt; font-weight: 700; color: var(--rp-ink); letter-spacing: -0.012em; line-height: 1.3; }
.rp-fig img { width: 100%; height: auto; display: block; }
.rp-fig-meta {
  font-family: var(--rp-display); font-size: 6.5pt; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rp-ink-3); margin-top: 1.6mm;
  border-top: 0.15mm dotted var(--rp-rule); padding-top: 1.6mm;
}
.rp-exkey {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--rp-display); font-size: 6.8pt; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rp-ink-3); margin-top: 4mm;
}
.rp-exkey-uni, .rp-exkey-med { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--rp-accent); border-radius: 2px; }
.rp-exkey-med { border-top: 2px dashed var(--rp-ink); }
.rp-cav { color: var(--rp-warn); font-weight: 700; font-size: 0.72em; }

/* -- benchmark tables (paper.css .tbl) ------------------------------------------- */
.rp-sec { margin-top: 7mm; }
.rp-sech { display: flex; align-items: baseline; gap: 3mm; margin-bottom: 2.2mm; }
.rp-secn { font-family: var(--rp-display); font-size: 8pt; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-accent); flex: 0 0 auto; }
.rp-sech h3 { font-family: var(--rp-display); font-size: 11.5pt; font-weight: 700; letter-spacing: -0.014em; color: var(--rp-ink); margin: 0; line-height: 1.2; }
.rp-tbl { width: 100%; max-width: 100%; table-layout: fixed; word-wrap: break-word; border-collapse: collapse; font-family: var(--rp-serif); font-size: 9pt; }
.rp-tbl thead th {
  font-family: var(--rp-display); font-size: 6.6pt; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rp-ink-3); text-align: right;
  padding: 1.6mm 0 1.6mm 3mm; border-bottom: 0.3mm solid var(--rp-ink); line-height: 1.35;
}
.rp-tbl thead th:first-child { text-align: left; padding-left: 0; }
.rp-tbl tbody td {
  padding: 1.7mm 0 1.7mm 3mm; border-bottom: 0.15mm solid var(--rp-rule);
  text-align: right; vertical-align: top; color: var(--rp-ink-2); line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.rp-tbl tbody tr:last-child td { border-bottom: 0.15mm solid var(--rp-rule); }
.rp-tbl td.rp-m { text-align: left; padding-left: 0; color: var(--rp-ink); width: 52mm; }
.rp-tbl td.rp-n { font-family: var(--rp-display); font-size: 8pt; font-weight: 500; color: var(--rp-ink); }
.rp-tbl td.rp-n small { color: var(--rp-ink-3); font-size: 0.82em; font-weight: 400; }
.rp-tbl td.rp-y, .rp-tbl td.rp-mv { font-family: var(--rp-display); font-size: 7.2pt; font-weight: 500; color: var(--rp-ink-3); }
.rp-tbl .rp-good { color: var(--rp-good) !important; font-weight: 700; }
.rp-tbl .rp-bad { color: var(--rp-bad) !important; font-weight: 700; }
.rp-camp-sub { font-family: var(--rp-display); font-size: 6.2pt; font-weight: 500; letter-spacing: 0.03em; color: var(--rp-ink-3); margin-top: 0.6mm; }

/* -- analysis panels (scenario, regional impact) ---------------------------------- */
.rp-secn--x { color: var(--rp-accent-ink); }
.rp-slede { font-family: var(--rp-serif); font-size: 10pt; line-height: 1.55; color: var(--rp-ink-2); margin: 0 0 2.5mm; max-width: 150mm; text-wrap: pretty; }
.rp-slede b { color: var(--rp-ink); font-weight: 600; }
.rp-fine {
  font-family: var(--rp-serif); font-style: normal; font-size: 8pt; line-height: 1.5;
  color: var(--rp-ink-3); margin: 2mm 0 0; border-top: 0.15mm dotted var(--rp-rule);
  padding-top: 1.8mm; max-width: 158mm; text-wrap: pretty;
}
.rp-fine b { font-style: normal; font-weight: 600; color: var(--rp-ink-2); }

/* -- sources & colophon ------------------------------------------------------------ */
.rp-srcline {
  font-family: var(--rp-serif); font-size: 8.5pt; line-height: 1.5; color: var(--rp-ink-2);
  padding: 1.6mm 0; border-bottom: 0.15mm dotted var(--rp-rule); text-wrap: pretty;
}
.rp-srcline a { color: var(--rp-ink-2); text-decoration: none; }
.rp-colophon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; margin-top: 7mm; border-top: 0.3mm solid var(--rp-rule); padding-top: 4mm; }
.rp-cph-lbl { font-family: var(--rp-display); font-size: 7pt; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-accent); margin-bottom: 1.5mm; }
.rp-cph-val { font-family: var(--rp-display); font-size: 9pt; font-weight: 600; color: var(--rp-ink); letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: break-word; }
.rp-cph-val .mut { display: block; font-weight: 400; color: var(--rp-ink-3); font-size: 8pt; margin-top: 0.6mm; }

/* -- back cover ---------------------------------------------------------------------- */
.rp-back { display: block; padding: 0; }
.rp-back-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30mm 26mm;
}
.rp-back-inner img { width: 15mm; height: 15mm; margin-bottom: 7mm; }
.rp-back-wm { font-family: var(--rp-display); font-size: 24px; color: var(--rp-wm-white); letter-spacing: -0.012em; }
.rp-back-wm b { font-weight: 700; }
.rp-back-line {
  margin-top: 4mm; font-family: var(--rp-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--rp-on-ink-2);
}
.rp-back-tag { margin-top: 9mm; font-family: var(--rp-serif); font-style: normal; font-size: 13pt; color: var(--rp-on-ink-2); max-width: 26em; line-height: 1.5; }
.rp-back-foot {
  position: absolute; left: 26mm; right: 26mm; bottom: 18mm; z-index: 2;
  border-top: 0.2mm solid rgba(255, 255, 255, 0.16); padding-top: 4mm;
  font-family: var(--rp-display); font-size: 7.5pt; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rp-on-ink-3);
  display: flex; justify-content: space-between; gap: 8mm;
}

/* the inline glossary decorates the whole view after render; inside the printed
   document its dotted underlines are noise, so they are suppressed here */
.rpt abbr.gloss { border-bottom: 0 !important; text-decoration: none !important; cursor: auto; }

/* -- print --------------------------------------------------------------------------- */
@media print {
  body[data-view="report"] { background: #FFFFFF !important; }
  body[data-view="report"] #main { margin: 0 !important; padding: 0 !important; }
  body[data-view="report"] .rpt-screen { display: none !important; }
  body[data-view="report"] .rpt { display: block; }
  .rpt.rpt--measure { display: none !important; }
  .rp-page { page-break-after: always; break-after: page; margin: 0; box-shadow: none; }
  .rp-page:last-child { page-break-after: auto; break-after: auto; }
}


/* Site-menu consistency + mobile key-pages menu · 18 Jul 2026
   Nav typography aligned to the live corebridgeadvisory.com.au header spec
   (14px/400, active = 1px currentColor underline); the mobile bar gains a
   hamburger that opens the existing site drawer as an overlay, so every
   CoreBridge key page is reachable on a phone. */
.site-head .nav a.is-active { font-weight: 400; }
.site-head .nav a.is-active::after { height: 1px; background: currentColor; inset: auto 0 -2px 0; }
.mnav-site-btn { display: none; }
@media (max-width: 640px) {
  .mnav-site-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer; border-radius: var(--radius-control, 5px); }
  .mnav-site-btn .menu-btn__icon::before, .mnav-site-btn .menu-btn__icon::after { background: #fff; }
  .mnav-site-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
  .mnav-site-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }
  .drawer.is-open { display: block; position: fixed; inset: 0 0 auto 0; z-index: 130; max-height: 100vh; overflow-y: auto; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
  .drawer.is-open .drawer__nav a { min-height: 44px; align-items: center; }
}

/* Three-digit rank fit · 18 Jul 2026: UK ranks run to "157th of 157", wider than the
   two-digit fields the AU tool sized these tiles for. Tabular numerals and a tighter
   "of N" keep rank pairs on one line at every width. */
.kc-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-v small { font-size: 0.72em; letter-spacing: -0.01em; }
table.data td.num, table.data th.num { font-variant-numeric: tabular-nums; }
.scd-row-v, .scd-n { font-variant-numeric: tabular-nums; }

/* UK mobile + accessibility pass · 18 Jul 2026 */
/* One appended block. Nothing above this line is edited, and the :root token set is untouched. */

/* 16 · the mobile view trigger sits on a dark band: its label and caret were --paper-tint
   against that band, short of AA. Pure white clears it at both weights. */
.mnav-trigger-lbl, .mnav-trigger-caret { color: #fff; }

/* 17 · tablet: three stacked sticky layers (site head, tab bar, controls, section strip) ate
   most of a 1024px-tall viewport. Below 1024px only the site head and the tab bar stay locked;
   the controls and the "On this tab" strip scroll away with the page. setStickyVars reads the
   computed position, so --ctrlh resolves to 0 here and nothing is left hanging. */
@media (max-width: 1024px) {
  #main > .controls { position: static; top: auto; z-index: auto; }
  .section-nav { position: static; top: auto; z-index: auto; }
}

/* 18 · mobile tables scroll in both directions inside their own box, so the sticky column
   headers pin against the top of the scroller instead of the page. */
@media (max-width: 640px) {
  table.data { display: block; overflow: auto; max-height: 72vh; }
  #main.has-secnav table.data th { top: 0; }
}

/* 19-22 · phone ergonomics: 40px minimum touch targets, 16px inputs (any smaller and iOS
   Safari zooms the page on focus), a single-row scrolling section strip, and the two
   mono micro-labels lifted off 9-10px. */
@media (max-width: 640px) {
  .home-chip { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .home-card--compare .home-chip { min-height: 40px; padding: 4px 2px; }
  .home-deep-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .sn-link { min-height: 40px; }
  .chart-dl a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; margin-left: 2px; }
  .ph-copy { min-height: 40px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  .home-results a, .home-cmp-results .home-cmp-hit { min-height: 40px; align-items: center; }
  .cbk-item { min-height: 40px; }
  .trd-row { min-height: 40px; }

  .cbk-input, .home-search { font-size: var(--fs-base); }

  /* the section strip becomes one horizontal lane rather than a wrapped block that can run
     half the screen tall; the scrollbar itself is hidden, the swipe is the affordance. */
  .sn-links { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .sn-links::-webkit-scrollbar { display: none; }
  .sn-link { flex: 0 0 auto; white-space: nowrap; }

  .kc-l { font-size: var(--fs-kicker); }
  .sn-num { font-size: var(--fs-kicker); }
}

/* 23a · the collapse control is now a sibling of the section heading inside a flex .sec-head,
   not a child of the h2. One rule keeps the old visual: heading left, control hard right. */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sec-head > h2 { flex: 1 1 auto; min-width: 0; }
.sec-head > .sec-toggle { float: none; flex: 0 0 auto; margin: 2px 0 0 0; }
/* the collapse rule hides every child of a folded section except the h2; the heading now sits
   one level down, so the wrapper has to be re-shown explicitly. */
section.block.sec-collapsed > .sec-head { display: flex; }

/* 23b · glossary popover: the dotted term is focusable and toggles .open on tap or Enter, and
   the definition is read from data-def. Hover title stays for mouse users. */
abbr.gloss { position: relative; }
abbr.gloss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
abbr.gloss.open::after {
  content: attr(data-def);
  position: absolute; left: 0; top: calc(100% + 7px); z-index: 90;
  width: max-content; max-width: 280px;
  padding: 10px 12px;
  background: var(--paper-bright); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(3, 22, 2, .18);
  font: 400 13px/1.45 var(--text); text-transform: none; letter-spacing: 0; white-space: normal; cursor: auto;
}
@media (max-width: 640px) { abbr.gloss.open::after { max-width: min(280px, calc(100vw - 40px)); } }

/* 12 · the compare card's type-to-add search is a phone affordance: at 640px and under the
   157-chip grid is unusable, so the search leads and the grid follows. Wider screens keep the
   grid alone, exactly as before. */
.home-cmp-find { display: none; }
.home-cmp-hit { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: var(--fs-chrome); cursor: pointer; }
.home-cmp-hit span { color: var(--paper-on-ink-2, var(--ink-soft)); font-family: var(--mono); font-size: var(--fs-kicker); }
.home-cmp-hit:hover, .home-cmp-hit.on { background: rgba(255, 255, 255, .10); }
@media (max-width: 640px) {
  .home-cmp-find { display: block; margin: 0 0 10px; }
  .home-cmp-results { max-height: 190px; overflow: auto; }
}

/* 6 · the two hero chips reuse .home-deep-chip, but the hero band is paper, not ink, so the
   on-dark treatment those chips carry elsewhere is overridden back to ink on paper here. */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-chips .hero-chip { font-size: var(--fs-chrome-sm); padding: 7px 12px; min-height: 34px; display: inline-flex; align-items: center; background: var(--paper-bright); border: 1px solid var(--rule); color: var(--ink-2); box-shadow: 0 1px 2px rgba(20, 17, 13, .07); }
.hero-chips .hero-chip:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink, var(--ink)); }
@media (max-width: 640px) { .hero-chips .hero-chip { min-height: 40px; } }

/* ── CoreBridge advisory band + box — ink-black chrome (matches the footer/header band),
   carrying the practice tagline on every page. Longhand font properties throughout:
   clamp() inside the font shorthand is dropped by some Android browsers. ── */
.advisory-band, .advisory-box {
  background: #031602;
  color: var(--paper-bright);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.advisory-band .bandwrap { padding: 11px var(--col-pad) 13px; display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; }
.advisory-lede { font-family: var(--serif); font-weight: 500; font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.35; letter-spacing: .005em; }
.advisory-fields { font-family: var(--display); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--chip-yellow); }
.advisory-box { border-radius: 0; padding: 26px 28px 24px; margin: 34px 0 30px; box-shadow: 0 10px 28px rgba(20, 17, 13, .14); }
.advisory-box .advisory-lede { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.28; max-width: none; }
.advisory-box .advisory-fields { margin-top: 10px; }
.advisory-box__link { display: inline-block; margin-top: 14px; color: var(--paper-bright); font-family: var(--display); font-weight: 600; font-size: var(--fs-chrome); text-decoration: underline; text-underline-offset: 3px; }
.advisory-box__link:hover { color: #fff; }
.advisory-switch { margin-left: auto; color: var(--paper-on-ink); font-family: var(--display); font-weight: 600; font-size: var(--fs-chrome-sm); text-decoration: underline; text-underline-offset: 3px; }
.advisory-switch:hover { color: var(--paper-bright); }
@media (max-width: 640px) { .advisory-switch { margin-left: 0; } }
@media (max-width: 640px) {
  .advisory-box { padding: 20px 18px 18px; margin: 26px 0 22px; }
}

/* Mobile: the advisory band compresses to a slim two-line strip; the sector-switch link
   drops (the drawer and the footer advisory box both carry the other dashboard), and the
   hero tightens so the first screen leads with the product, not stacked chrome. */
@media (max-width: 640px) {
  .advisory-band .bandwrap { padding: 8px var(--col-pad) 9px; gap: 2px 12px; }
  .advisory-band .advisory-lede { font-size: var(--fs-chrome); line-height: 1.3; }
  .advisory-band .advisory-fields { font-size: 9px; letter-spacing: .13em; }
  .advisory-switch { display: none; }
  .page-hero .bandwrap { padding: 16px var(--col-pad) 14px; }
  .page-hero h1 { font-size: 25px; }
  .page-hero .hero-eyebrow { font-size: var(--fs-caption); margin-bottom: 10px; }
}
@media (max-width: 640px) {
  body.is-home .page-hero { padding-top: 6px; }
}

/* Mobile header lives IN the black band: CoreBridge logo left, site menu right (22 Jul 2026).
   The purple view bar below keeps only search + jump-to-a-view. Desktop keeps the site header,
   so this row exists on small screens only. */
.advisory-band__bar { display: none; }
@media (max-width: 640px) {
  .advisory-band__bar { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 7px; }
  .advisory-band__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--paper-bright); text-decoration: none; font: 700 15px var(--display); }
  .advisory-band__brand img { width: 30px; height: 30px; }
  .advisory-band__menu { color: var(--paper-bright); margin-left: 0; display: inline-flex; }
  .advisory-band__menu .menu-btn__icon::before, .advisory-band__menu .menu-btn__icon::after { background: var(--paper-bright); }
}

/* Mobile: the band header row + fields line only — the boutique-advisory sentence is
   desktop-only (per direction, 22 Jul 2026). */
@media (max-width: 640px) {
  .advisory-band .advisory-lede { display: none; }
  .advisory-band__bar { margin-bottom: 4px; }
}

/* One-time "how each card reads" explainer on the profile (dismiss persists) */
.cardhelp { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 0; background: var(--accent-wash); border: 1px solid var(--accent); font-size: var(--fs-chrome); color: var(--accent-ink); }
.cardhelp-x { margin-left: auto; border: 1.5px solid var(--accent); background: transparent; color: var(--accent-ink); border-radius: 0; padding: 4px 12px; font: 600 12px var(--display); cursor: pointer; }
.cardhelp-x:hover { background: var(--accent); color: #FEFCF7; }

/* Mobile: section caveats fold behind a tap */
.note-fold { display: none; }
@media (max-width: 640px) {
  .note-fold { display: inline-flex; align-items: center; margin: 2px 0 10px; border: 1px solid var(--rule-soft); background: var(--paper-tint); color: var(--ink-3); border-radius: 0; padding: 5px 13px; font: 600 12px var(--display); cursor: pointer; }
  .note-fold[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink); }
  section.block > .note.note-folded { display: none; }
  section.block > .note.note-folded.note-open { display: block; }
}

/* Streamline pass 22 Jul 2026 */
.ranklink { text-decoration: none; display: block; color: inherit; }
.read90-btn { border: 1.5px solid var(--accent); background: transparent; color: var(--accent-ink); border-radius: 999px; padding: 6px 14px; font: 600 12.5px var(--display); cursor: pointer; margin: 0 0 10px; }
body.read90 #main .chartcard, body.read90 #main .grid.charts, body.read90 #main .grid.kpis, body.read90 #main table.data { display: none !important; }
/* WI-8, 26 Jul 2026 — the landing's primary action (AU/UK origin; brought onto this hub 10 Aug
   2026, per direction: "make the start with a university... more front and centre - clear click - then a
   next button"). This hub's picker never had a button at all — the CSS below existed, unused,
   since this stylesheet forked from the same template as AU and UK's; only the markup was
   missing, restored in app.js. Real padding and a card shadow so the band holds its own against
   the two large, dark, high-contrast cards immediately below it. --set reads quieter than --pick
   — cream instead of teal-wash — because a returning reader does not need the loud version, just
   the working one. */
/* No bottom margin here, 10 Aug 2026: the band moved inside .home-hero__copy, which is no longer
   the last thing before .home-grid — the hero row itself carries that spacing now (see
   .home-hero's margin-bottom above), so a margin here would only add dead air under the band that
   the "reduce white space" fix is specifically trying to remove. */
.mineband { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 0; padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-card); background: var(--accent-wash); border: 1px solid var(--accent);
  box-shadow: var(--shadow-card); font-size: var(--fs-card); }
.mineband--set { background: var(--paper-bright, #FEFCF7); border-color: var(--rule-soft); }
.mineband__txt { flex: 1 1 300px; min-width: 0; }
.mineband__head { display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -0.012em; color: var(--ink); margin-bottom: 3px; }
.mineband__sub { display: block; color: var(--ink-2); }
.mineband__ctl { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.mineband-now { display: block; color: var(--ink-2); }
.mineband-now b { color: var(--ink); font-weight: 600; }
/* The band's action. Square per the canonical, accent-control ground so it reads as the one
   primary action in the band. Sometimes a real disabled <button> rather than only an <a> — the
   --pick state has nowhere to send a reader yet, so it reads "Next" and does nothing until a
   university is chosen. Ported verbatim from AU/UK, where this exact ramp went through three
   rounds of the principal's own contrast fixes (29 Jul, 4 Aug) before it was right; not re-litigated here. */
.mineband-go {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-control, #2F686D); color: var(--paper-bright, #FEFCF7);
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.005em; line-height: 1; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius-control, 5px);
  text-decoration: none; border: 1px solid var(--accent-control, #2F686D);
  box-shadow: var(--shadow-card);
}
.mineband-go::after { content: "\2192"; font-weight: 700; }
.mineband-go:hover { background: var(--accent, #234C50); border-color: var(--accent, #234C50); color: var(--paper-bright, #FEFCF7); }
.mineband-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mineband-go[disabled] {
  background: var(--paper-2, #EFEBE2); color: var(--ink-3, #8A8477);
  border-color: var(--rule-soft); box-shadow: none; cursor: not-allowed;
}
.mineband-go[disabled]:hover { background: var(--paper-2, #EFEBE2); border-color: var(--rule-soft); color: var(--ink-3, #8A8477); }
.cmp-modes { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.cmp-mode { text-decoration: none; border: 1.5px solid var(--rule-soft); border-radius: 999px; padding: 6px 14px; font: 600 12.5px var(--display); color: var(--ink-2); }
.cmp-mode.is-on { border-color: var(--accent); background: var(--accent); color: #FEFCF7; }
.head-search-hint { display: none; }
@media (min-width: 1100px) { .head-search-hint { display: inline; color: var(--ink-3); font-weight: 400; margin-left: 6px; } }

/* v4.0.1: Hanken carries tabular figures where the mono aligned columns */
.kc-v, .value, table.data td, .rk-num { font-variant-numeric: tabular-nums; }

/* ============ Dark scheme (22 Jul 2026, A-grade pass) ============
   prefers-color-scheme only: no toggle, the OS decides. Desktop and tablet only —
   on phones (≤640px, the tool's mobile breakpoint) the light design always serves,
   per direction 22 Jul 2026: dark did not read well on mobile. The whole chrome runs on the
   token layer, so the override is one token block plus a handful of hardcoded washes.
   Chart chrome (grids, ticks, reference lines) resolves per-scheme in app.js, which
   cannot read these vars from canvas. Print stays light by design. */
/* ============ DARK SCHEME DISABLED — 26 July 2026 ============
   per direction: "desktop always light". Phones were already always light (22 July 2026, dark did not
   read well on mobile); this extends that to every width, so the tool serves the light design
   everywhere and the OS setting no longer changes it.

   The rules below are kept intact rather than deleted, behind `and (max-width: 0px)`: that clause
   cannot match at any viewport, and a parser that does not understand it drops the whole query.
   Both outcomes are light, which is the point — this fails safe.

   TO RESTORE: delete the `and (max-width: 0px)` clause from the three blocks in this file, and in
   app.js set DARKMODE back to
     matchMedia("(prefers-color-scheme: dark)").matches && matchMedia("(min-width: 641px)").matches
   ============================================================ */
@media (prefers-color-scheme: dark) and (min-width: 641px) and (max-width: 0px) {
  html { color-scheme: dark; }
  :root {
    --ink: #E9EDE7;
    --ink-2: #CBD0C7;
    --ink-3: #9AA096;
    --ink-4: #7C8278;
    --ink-soft: #9AA096;
    --ink-chip: #E9EDE7;
    --header: rgba(6, 8, 5, 0.97);
    --paper: #171C15;
    --paper-bright: #1E241C;
    --paper-2: #1A1F18;
    --paper-3: #232922;
    --paper-tint: #1B211A;
    --paper-deep: #2A302A;
    --rule: #4A5046;
    --rule-soft: #333930;
    --rule-hairline: #3A403A;
    --line: #333930;
    --accent: #9CC2C0;
    --accent-deep: #8FB4B8;
    --accent-ink: #C2D6D8;
    --accent-wash: #0C2410;
    --accent-soft: #3B6A6F;
    --info: #9CC2C0;
    --success: #8FBF8F;
    --danger: #E08585;
    --warn-text: #D9B36A;
    --warning: #D9B36A;
    --surface: var(--paper-bright);
    --surface-sunk: #121711;
    --card: var(--paper-bright);
    --rim: rgba(255, 255, 255, .05);
    --lead-ring: rgba(143, 191, 143, .55);
    --watch-ring: rgba(224, 133, 133, .55);
    --shadow-card: 0 1px 2px rgba(0,0,0,.28), 0 5px 12px -4px rgba(0,0,0,.38), 0 16px 30px -12px rgba(0,0,0,.42);
    --shadow-box: 0 1px 2px rgba(0,0,0,.30), 0 8px 18px -4px rgba(0,0,0,.40), 0 24px 46px -14px rgba(0,0,0,.48);
    --shadow-tile: 0 1px 2px rgba(0,0,0,.26), 0 3px 7px -2px rgba(0,0,0,.32), 0 11px 22px -8px rgba(0,0,0,.40);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.32), 0 16px 30px -8px rgba(0,0,0,.48);
    --shadow-chip: 0 1px 2px rgba(0,0,0,.30), 0 3px 8px -3px rgba(0,0,0,.42);
    --inset-cell: inset 0 1px 2px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
  }
  /* hardcoded light fills that sit outside the token layer */
  .site-head { background: rgba(18, 23, 17, 0.94); }
  /* the black advisory band/box colours its text with --paper-bright (light paper on ink);
     in dark mode that token becomes a dark surface, so pin the on-ink paper directly */
  .advisory-band, .advisory-box, .advisory-box__link, .advisory-band__brand, .advisory-band__menu { color: #CBC7BB; }
  .advisory-switch:hover, .advisory-box__link:hover { color: #FFFFFF; }
  .advisory-band__menu .menu-btn__icon::before, .advisory-band__menu .menu-btn__icon::after { background: #CBC7BB; }
  .cb-nav option { background: var(--paper-bright); }
  main > .grid.kpis > .card:hover { background: var(--paper-3); }
  .eif-card { background: var(--paper-bright); border-color: rgba(255,255,255,.10); }
  .eif-card__img { background: #2A302A; }
  .trd-dot--start { background: var(--paper-bright); border-color: rgba(233,237,231,.4); }
  .cbk-type--metric { background: #3A3323; color: #D9B36A; }
}

/* 22 Jul 2026 layout audit: readable text measure, compact phone KPI cards, larger context type */
#main .note, #main p.note { max-width: 72ch; }
.kpi-fold { display: none; }
@media (max-width: 640px) {
  .kpi-fold { display: inline-flex; align-self: flex-start; margin-top: 8px; border: 1px solid var(--rule-soft); background: var(--paper-tint); color: var(--ink-3); border-radius: 0; padding: 4px 12px; font: 600 11.5px var(--display); cursor: pointer; }
  .kpi-fold[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink); }
  .kpi-ctx .kc-grid.kc-folded { display: none; }
  .kpi-ctx .kc-grid.kc-folded.kc-open { display: grid; }
  .kc-l { font-size: var(--fs-chrome-sm); }
  .kc-v { font-size: var(--fs-chrome); }
  .kpi-ctx .kc { padding: 5px 0; }
}

/* KPI sparkline sits inline after the value */
.kpi-spark { display: inline-block; vertical-align: baseline; margin-left: 10px; }
@media (max-width: 640px) { .kpi-spark { margin-left: 8px; } }

.tab-delta { margin: 2px 0 12px; font-size: var(--fs-small); color: var(--ink); }
.tab-delta b { font-weight: 700; }

.tab-next { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 8px; padding: 15px 20px; border: 1.5px solid var(--accent); border-radius: var(--radius-control, 5px); background: var(--accent-wash); color: var(--accent-ink); text-decoration: none; font: 600 15px var(--display); }
.tab-next:hover { background: var(--accent); color: #FEFCF7; }
.tab-menu-grp { display: block; padding: 8px 12px 3px; font: 700 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tab-menu-grp:not(:first-child) { border-top: 1px solid var(--rule-soft); margin-top: 5px; }

/* 22 Jul 2026 (per direction): the advisory band is a MOBILE header only — desktop and tablet
   keep the white site header and go straight to the hero. The bottom advisory box stays. */
@media (min-width: 641px) { .advisory-band { display: none; } }

/* Search redesigned as a true search field (opens the same command palette): input-shaped,
   left-aligned hint, keyboard chip at the far end. */
.head-search { display: inline-flex; align-items: center; gap: 9px; width: clamp(220px, 24vw, 330px); padding: 8px 14px; margin-left: 14px; border: 1px solid var(--rule-soft, #CBC7BB); border-radius: var(--radius-control, 5px); background: var(--paper-tint, #FBF9F4); color: var(--ink-3); font: 500 12.5px var(--text); letter-spacing: .01em; cursor: text; transition: border-color .14s ease, box-shadow .14s ease; text-align: left; }
.head-search:hover, .head-search:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); outline: none; }
.head-search svg { flex: 0 0 auto; color: var(--ink-3); }
.head-search .head-search-hint { display: inline; margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; color: var(--ink-3); font-weight: 500; }
.head-search kbd { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 1099px) { .head-search { width: auto; } .head-search .head-search-hint { display: none; } }

/* 22 Jul 2026 alignment audit (per direction): text fills its container edge to edge — the 72ch
   ragged-right cap is retired; numeric table columns right-align; the delta line joins the
   content rail.

   AMENDED 30 Jul, THEN WITHDRAWN THE SAME DAY. The measure was capped at 62-96ch on the reading
   argument, and it was wrong here for a reason the character counts never showed: these cards are
   1,400px wide. On a 1512px screen the capped source line filled 45% of its card and the note 55%,
   stranding 500-700px of empty space to the right of every paragraph. the principal's word for it was
   "AI design slop", and looking at it she is right — a short measure is only correct inside a
   container built for prose, and these containers are built for charts and tables.

   The genuine fix is to narrow the CONTAINER for running text, not the text inside it, so a
   comfortable measure and a filled edge stop being in conflict. That is a layout change and is
   not being made quietly at the end of a long day. Edge to edge stands until then. */
#main .note, #main p.note { max-width: none; }
.home-intro { max-width: none; }
table.data td:not(:first-child), table.data th:not(:first-child) { text-align: right; }
table.data { width: 100%; }
.tab-delta { padding: 0 var(--col-pad); max-width: var(--col-max); margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* 22 Jul 2026 (per direction): the continue cue breathes so the onward path is noticed */
@keyframes tabnext-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 76, 80, .35); } 55% { box-shadow: 0 0 0 9px rgba(35, 76, 80, 0); } }
.tab-next { animation: tabnext-pulse 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .tab-next { animation: none; } }
/* Advisory box: brand row (mark + wordmark) with the founding principle beneath the vision line */
.advisory-box__brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.advisory-box__brandrow img { width: 30px; height: 30px; }
.advisory-box__brandrow span { color: var(--paper-bright); font: 700 14px var(--display); }
.advisory-box__principle { margin-top: 8px; color: var(--paper-on-ink); font-family: var(--serif); font-size: var(--fs-card); }

/* Advisory box, after the canonical Pledge Band (2027 CoreBridge Design project,
   preview/components-pledge.html, imported 23 Jul 2026): warm-black statement
   ground, mono kick, upright serif statement.
   WI-1, 26 Jul 2026: the "permitted single-hue corner wash" this rule used to
   carry is gone. Canonical v4.1 (24 Jul) retired --gradient-accent and every
   gradient with it, so the permission the comment relied on no longer exists.
   The panel is a flat ink ground; the corner element is kept as an empty hook
   so the markup in all four hubs stays valid. */
.advisory-box { position: relative; overflow: hidden; border-radius: 0; padding: 0; box-shadow: 0 14px 36px rgba(20, 17, 13, .22); background: var(--ink-chip, #031602); }
.advisory-box__ground { display: none; }
.advisory-box__content { position: relative; padding: 30px 34px 26px; }
.advisory-box__kick { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9CC2C0; }
.advisory-box__kick img { width: 24px; height: 24px; }
.advisory-box .advisory-lede { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.22; letter-spacing: -0.01em; color: var(--paper-on-ink, #CBC7BB); max-width: none; }
.advisory-box .advisory-box__principle { margin-top: 10px; font-family: var(--serif); font-style: normal; font-size: 15.5px; color: var(--paper-on-ink-2, #B8B1A1); }
.advisory-box__sig { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.advisory-box__sig .advisory-fields { margin: 0; }
.advisory-box .advisory-box__link { margin-top: 0; }
@media (max-width: 640px) { .advisory-box__content { padding: 22px 20px 20px; } }

/* The contour-motif ground rules were removed on 26 Jul 2026 (WI-1): the
   element is display:none further down this cascade, so they painted
   nothing and only kept off-palette values alive in the file. */

/* The "Mist" ground is removed (WI-1 + §2B.1: the asset was AI-generated,
   which the imagery standard bans outright). The advisory box is a flat
   #031602 panel with paper type, per the 23 Jul ruling. */
.advisory-box { background: var(--paper-tint, #FBF9F4); }
.advisory-box__kick { color: var(--accent-deep, #16363A); }
.advisory-box .advisory-lede { color: var(--ink, #031602); }
.advisory-box .advisory-box__principle { color: var(--ink-2, #2E2A22); }
.advisory-box__sig .advisory-fields { color: #9C6A00; }
.advisory-box .advisory-box__link { color: var(--ink, #031602); }
.advisory-box .advisory-box__link:hover { color: var(--accent-deep, #16363A); }

/* Mist box under dark mode (per direction: "mist background doesn't work", 22 Jul evening):
   the pre-Mist dark block pinned the box text to light #CBC7BB — unreadable on the light
   sage ground. The Mist treatment is scheme-invariant: ink text in BOTH schemes. */
@media (prefers-color-scheme: dark) and (min-width: 641px) and (max-width: 0px) {
  .advisory-box, .advisory-box .advisory-lede { color: #031602; }
  .advisory-box__kick { color: #16363A; }
  .advisory-box .advisory-box__principle { color: #2E2A22; }
  .advisory-box__sig .advisory-fields { color: #9C6A00; }
  .advisory-box .advisory-box__link { color: #031602; }
  .advisory-box .advisory-box__link:hover { color: #16363A; }
  .advisory-box { background: #FBF9F4; }
}

/* Streamlined advisory box (per direction, 23 Jul 2026 late): the mist ground is
   retired; flat oil-slick panel, paper type, gold fields. */
.advisory-box { background: #031602; border-radius: 0; box-shadow: none; }
.advisory-box__ground { display: none; }
.advisory-box__content { position: relative; padding: clamp(26px, 3vw, 40px); }
.advisory-box__kick { color: #F2F0EF; }
.advisory-box__kick img { width: 24px; height: 24px; }
.advisory-box .advisory-lede { color: #F2F0EF; font-size: clamp(21px, 2.4vw, 26px); }
.advisory-box .advisory-box__principle { color: rgba(203, 199, 187, 0.8); }
.advisory-box__sig .advisory-fields { color: #D4AF67; }
.advisory-box .advisory-box__link { color: #F2F0EF; }
.advisory-box .advisory-box__link:hover { color: #D4AF67; }
@media (prefers-color-scheme: dark) and (min-width: 641px) and (max-width: 0px) {
  .advisory-box { background: #031602; }
  .advisory-box, .advisory-box .advisory-lede { color: #F2F0EF; }
  .advisory-box__kick { color: #F2F0EF; }
  .advisory-box .advisory-box__principle { color: rgba(203, 199, 187, 0.8); }
  .advisory-box__sig .advisory-fields { color: #D4AF67; }
  .advisory-box .advisory-box__link { color: #F2F0EF; }
  .advisory-box .advisory-box__link:hover { color: #D4AF67; }
}

/* kick lockup polish + upright lede */
.advisory-box__kick { text-transform: none; letter-spacing: -0.022em; font-size: var(--fs-card); font-weight: 700; }
.advisory-box__kick .brand__descriptor { font-weight: 300; letter-spacing: -0.005em; }
.advisory-box .advisory-lede { font-style: normal; }

/* 23 Jul 2026 (per direction): rank tiles like "145th · national bottom 10 of 150"
   could collide when the of-text wrapped beside the big ordinal (baseline
   flex + wrap). Stacked layout — ordinal on its own line, context beneath —
   cannot overlap at any width. */
.kpi-rank { display: block; }
.kpi-rank .kr-pos { display: block; }
.kpi-rank .kr-of { display: block; margin-top: 3px; line-height: 1.4; }

/* 23 Jul 2026: nav right-aligned to match the estate header (brand left,
   nav pushed right, search at the far edge). */
.site-head .nav { margin-left: auto; gap: clamp(20px, 2.4vw, 36px); }
.site-head__inner { max-width: var(--col-max); padding: 0 var(--col-pad); }


/* ---------------------------------------------------------------------------
   Citation affordances (25 Jul 2026).
   A hash route is not a citable address: it returns no server response and no
   crawler resolves it. Every profile therefore points at its permanent static
   twin, and every view can hand back a formatted citation carrying both the
   data build and the product release.
   --------------------------------------------------------------------------- */
.permalink { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:2px 0 12px; }
.permalink a { color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; }
.permalink a:hover { color:var(--accent-deep, var(--accent)); }
.citebtn { font:inherit; font-size: var(--fs-chrome-sm); line-height:1.2; padding:5px 10px; border:1px solid var(--rule, #DDD9CF);
           background:var(--paper-tint, #FBF9F4); color:var(--ink-2, #2E2A22); border-radius:5px; cursor:pointer; }
.citebtn:hover { border-color:var(--accent); color:var(--accent); }
.citebtn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.citebtn[data-copied="1"] { border-color:var(--accent); color:var(--accent); }


/* Provenance flags: the definition moved to the shared `enhance.css` on 25 July 2026 (DS16), where
   it became a footnote marker with a hover and focus tooltip instead of a bordered pill. It lives
   in the shared layer because all four hubs render the same flag from the same `CBX.provenance`,
   and two copies of a rule is how the old one drifted. Do not re-add `.provflag` rules here. */

.cbx-stories__prov { margin:0 0 10px; }

/* NZ full scorecard. Standing is carried by a word and an arrow first, colour second. */
.sc-tbl th[scope="row"] { font-weight: 500; width: 34%; }
.sc-tbl .sc-y { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sc-tbl .sc-r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-tbl .sc-good { color: #3D5A3D; font-weight: 600; }
.sc-tbl .sc-watch { color: #8E2E2E; font-weight: 600; }

/* Declared gaps. Same weight as the caveats they sit under: a gap that is only in a handoff
   note is a silence, not a disclosure. */
.ds-gaps { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-chrome); }
.ds-gaps li { margin: 0 0 8px; }

/* ---------------------------------------------------------------------------
   Accessibility pass, 25 July 2026 (WCAG 2.2 AA).
   1.4.1 Use of colour — rank standing carries a glyph and a worded band, not
   only a green or red fill. 2.4.7/2.4.11 Focus — every interactive control
   shows a focus ring that does not depend on the browser default, and the ring
   is never obscured by a sticky layer.
   --------------------------------------------------------------------------- */
.kpi-rank .kr-dir { font-size: var(--fs-kicker); line-height: 1; margin-right: 4px; opacity: .95; }
.kpi-rank { display: inline-flex; align-items: baseline; }

:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent, #234C50);
  outline-offset: 2px;
  border-radius: 4px;
}
select:focus-visible, .nz-uni-sel:focus-visible, .ctl select:focus-visible {
  outline: 3px solid var(--accent, #234C50);
  outline-offset: 1px;
}
/* A focus ring inside a sticky control bar must not be clipped by it. */
.controls, .ctlbar { overflow: visible; }

/* Move of the week. Quiet, one claim, one route out. The teal left bar it used to carry was
   removed 26 Jul 2026: `_canonical/SKILL.md` forbids coloured left/top accent bars on boxes.
   The 1px --rule-soft border and the --paper-tint fill do the containment. */
.cbx-featured { margin: 18px 0 22px; padding: 18px 22px; background: var(--paper-tint, #FBF9F4);
                border: 1px solid var(--rule-soft, #DDD9CF);
                border-radius: 8px; }
.cbx-featured__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                      font-size: var(--fs-kicker); letter-spacing: .16em; text-transform: uppercase;
                      font-weight: 700; color: var(--accent, #234C50); margin-bottom: 8px; }
/* Edge to edge with everything else (30 Jul 2026). This 72ch cap predates the alignment
   audit and survived it, so the featured block was the last paragraph on the page still
   stopping short of its card: 54% of a 1,196px container. */
.cbx-featured__b { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-2, #2E2A22); }
.cbx-featured__go { font-size: var(--fs-small); font-weight: 600; color: var(--accent-deep, #16363A);
                    text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 640px) { .cbx-featured { padding: 14px 16px; } .cbx-featured__b { font-size: var(--fs-card); } }

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile pass, 25 July 2026.

   The hubs already avoided the worst mobile failure: no page scrolls sideways,
   because every wide table scrolls inside itself. What that left was subtler.
   A ranking table scrolled sideways and took the university name with it, so a
   reader four columns across no longer knew whose row they were reading. Dense
   card rows kept their desktop column count down to phone widths. And the
   chip-sized controls sat below a comfortable touch target.

   Everything here is scoped to <=640px and changes nothing on desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* 1 · A scrolling table keeps its subject. The first cell of every row stays
        pinned while the measures scroll past it, so the row never loses its name. */
  table.data { position: relative; }
  table.data thead th:first-child,
  table.data tbody th:first-child,
  table.data tbody td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--paper, #F2F0EF);
    box-shadow: 1px 0 0 var(--rule-soft, #DDD9CF);
  }
  /* AUDIT 26 Jul 2026 (§4.7 contrast): the sticky rule above paints --paper behind
     the pinned cell so rows do not show through. On a tbody cell that is right — the
     text is already ink. On the HEADER cell it was not: `table.data th` sets
     colour --paper-on-ink #CBC7BB for the ink header ground, and #CBC7BB on #F2F0EF
     is 1.49:1, so the first column heading of every data table went invisible on
     phones. The header keeps its own ink ground while it is pinned. */
  table.data thead th:first-child { z-index: 3; background: var(--ink-surface, #031602); }

  /* 2 · A table that scrolls says so. The cue sits above the table, not inside
        it, so it cannot itself be scrolled out of view. */
  .tblwrap::before, .scroll-cue::before {
    content: "Scroll sideways for the rest of the columns";
    display: block; margin: 0 0 6px;
    font-size: var(--fs-kicker); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3, #6B6557);
  }

  /* 3 · No dense grid keeps a desktop column count on a phone. This is a floor
        under every grid on every hub, whatever it was authored as. */
  .grid, .kpis, .grid.g2, .grid.g3, .grid.g4, .mkt-grid, .peer-grid, .rp-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid.charts, .grid.kpis.kpis--wide { grid-template-columns: 1fr !important; }

  /* 4 · Comfortable touch targets on the chip-sized controls (WCAG 2.2, 2.5.8).
        Prose links are exempt and are deliberately not touched. */
  .tab-solo, .cmp-mode, .home-deep-chip, .starter-link, .citebtn,
  .brief-btn, .mnav-item, .mnav-trigger, .menu-btn, .head-search,
  .chip, .pill-btn, [role="tab"] {
    min-height: 40px;
    display: inline-flex; align-items: center;
  }

  /* 5 · Nothing overflows its own container by a hairline. */
  .scd-strip, .cbx-featured, .card, .block { max-width: 100%; }
}

@media (max-width: 430px) {
  /* On the narrowest phones two columns of figures is one too many. */
  .grid, .kpis, .grid.g2, .grid.g3, .grid.g4, .mkt-grid, .peer-grid, .rp-glance {
    grid-template-columns: 1fr !important;
  }
}


/* WI-10 — Method cross-tool block. Hairline rows, no card chrome: a list of
   four links does not need boxes (§2A.5, "if a card can be replaced by a
   hairline and whitespace without losing meaning, replace it"). */
.method-xtool .mxt { list-style: none; margin: 20px 0 18px; padding: 0; border-top: 1px solid var(--rule); }
.method-xtool .mxt li { border-bottom: 1px solid var(--rule-hairline); }
.method-xtool .mxt a { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  padding: 15px 0; text-decoration: none; color: var(--ink); }
.method-xtool .mxt a:hover { color: var(--accent); }
.method-xtool .mxt b { font-size: var(--fs-base); font-weight: 650; letter-spacing: -0.012em; flex: 0 0 auto; }
.method-xtool .mxt span { font-family: var(--serif, Spectral, Georgia, serif); font-size: var(--fs-small);
  color: var(--ink-3); }


/* WI-8 — provenance chip on the Move of the week card. Caption scale (§2A.1),
   ink-3, hairline pill, no fill: it labels the card without competing with it. */
.cbx-prov {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 9px 2px;
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
  white-space: nowrap;
}
.section--ink .cbx-prov, .cbx-featured--dark .cbx-prov {
  border-color: rgba(246, 242, 236, 0.22);
  color: rgba(203, 199, 187, 0.7);
}
@media (max-width: 560px) { .cbx-prov { white-space: normal; margin-left: 0; margin-top: 6px; } }

/* WI-8, 26 Jul 2026. On the landing view the enhance layer builds its "You are
   here" strip before there is a path to put in it, so the page showed an empty
   33px band between the tab bar and the lede — a rule and a gap that separated
   nothing. A strip with no links and an empty label describes nothing and now
   collapses itself. */
.section-nav:not(:has(.sn-link)):has(.sn-label:empty) { display: none; }

/* DS10, 26 Jul 2026 — the chart export controls become ghost buttons.
   They were two bare teal words after the label "Download:", which read as
   body text that happened to be a link: no target, no affordance, and at 11px
   they sat below the caption size the scale allows (§2A.1). A ghost button is
   the house form for a secondary control — transparent fill, one hairline, pill
   radius (§2A.5) — so it reads as a control without competing with the chart it
   sits under. Label and buttons both at caption size, ink-3, right-aligned. */
.dlbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.dlbar__lbl { font-family: var(--display); font-size: var(--fs-caption, 10.5px); font-weight: 500;
  /* QA7: --ink-4 measures 2.91:1 on paper. A label meant to be read clears 4.5:1,
     and --ink-3 is 5.10:1 — the other colour §2A.1 names for this register. */
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ghostbtn { display: inline-flex; align-items: center; font-family: var(--display);
  font-size: var(--fs-caption, 10.5px); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); background: transparent;
  border: 1px solid var(--rule-soft); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; }
.ghostbtn:hover, .ghostbtn:focus-visible { color: var(--accent-deep); border-color: var(--accent); }

/* DS7, 26 Jul 2026 — THE TAG COLOUR RULE. Stated here because it was being
   decided per component, which is how five hues ended up on six landing cards.

   Colour on a chip, tag, pill or badge means exactly one thing: the DIRECTION
   OF A DATA READING. --success for a good-direction reading, --danger for a
   bad-direction one, and only where the dataset actually declares a favourable
   direction (the NZ register declares none, so nothing there is coloured).

   Colour never means category, section, tab, brand or emphasis. A chip that
   labels a kind of thing is neutral: paper ground, hairline border, ink text.
   A chip that carries state is teal. Gold is reserved twice over — --chip-gold
   for the Beta pill and dark-section numerals, --chart-gold for data marks —
   and neither is available for a tag.

   The test: if two chips in one view differ in colour, a reader must be able to
   say what the difference MEANS. If the answer is "they are different sections",
   the colour is wrong and the difference belongs to the numeral or the label. */
.chip, .pill, .tag { --chip-semantic: none; }
.chip.is-good, .pill.is-good, .tag.is-good { color: var(--success); border-color: var(--success); }
.chip.is-bad,  .pill.is-bad,  .tag.is-bad  { color: var(--danger);  border-color: var(--danger); }

/* DS13, 26 Jul 2026 — TYPOGRAPHY RULE.
   (a) Every figure, axis label, chart label, table cell and stat numeral is set
       in the sans (Hanken Grotesk) with tabular numerals. Data is never set in
       the serif: columns must align, and a proportional serif figure will not.
   (b) Italics are retired. Canonical v4.1 (24 Jul 2026) made the serif accent
       register upright everywhere; the italic faces stay on disk for legacy
       documents and are not used here. Emphasis in prose is by weight or by
       phrasing. This rule is the enforcement, not a suggestion. */
em, i, cite, dfn, var, address { font-style: normal; }
.data, table.data, .data th, .data td, .num, .n,
[class*="-n"], [class*="stat"], [class*="numeral"] { font-variant-numeric: tabular-nums; }

/* DS12, 26 Jul 2026 — the tab bar shrinks to its content.
   NZ carries four destinations and Asia five, against Australia's seven plus a
   country switcher, so the same full-width dark band left half the bar empty:
   a rule of colour with nothing on it, which §2A.4 rules out ("separation is
   achieved with 1px rules and whitespace, not coloured bands"). The bar is now
   only as wide as what it holds, and still starts on the container's left edge
   so it lines up with everything below it. Above --col-max it stays centred
   with the rest of the page. */
@media (min-width: 861px) {
  /* margin-right:auto, not margin:auto — the existing rule centres the bar with
     `margin: 0 auto`, and once it stopped being full width that turned it into a
     floating pill while every block below it started at the container's left
     edge. It now shrinks AND stays on that edge, which is the alignment the
     change was for. */
  /* REVERSED 27 Jul 2026 (per direction): the bar spans the container again, like Australia and
     the UK. Shrinking it to its contents did answer the empty-band objection above, but it
     also made New Zealand and Asia the two hubs whose menu did not reach the page margins,
     which is the inconsistency the reader actually notices when moving between dashboards.
     One menu, one width, all four hubs. To restore the shrink-to-fit behaviour, put the two
     declarations below back; nothing else about this block changed.
  nav.tabs { width: fit-content; max-width: min(100%, var(--col-max, 1440px));
    margin-left: 0; margin-right: auto; } */
}

/* DS8, 26 Jul 2026 — stat-card grid alignment, and the clamp caveat.
   THE CAVEAT, written down because it is what broke: these cards were aligned
   by reserving fixed pixel heights on each part (label 27px, value 33px, yoy
   18px, ref 16px). A fixed reservation is a guess about how many lines a string
   will take AT ONE FONT SIZE. Every one of those sizes is set by a clamp, so
   the moment the viewport moves, the reserved box and the rendered text stop
   agreeing: too much space at small widths, a label pushing the row out of line
   at large ones. Two-line labels held; "Students per academic staff member"
   over three lines did not.

   THE FIX: the cards share the grid's rows instead of guessing at them. Each
   card is a subgrid spanning four rows, so every label sits on one baseline,
   every value on the next, and the row is as tall as its tallest member — at
   any viewport, any clamp, any number of lines. The pixel reservations below
   remain only as the fallback for engines without subgrid. */
.kpis { grid-auto-rows: auto; }
@supports (grid-template-rows: subgrid) {
  .kpis > .kpi { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .kpi .label, .kpi .value, .kpi-yoy, .kpi .ref { min-height: 0; }
  .kpi .label { align-self: end; }
}

/* §2A.7.1 CONSOLIDATION, 26 Jul 2026 — the dashboard type scale.
   This stylesheet carried fourteen micro sizes: 9.5 · 10 · 10.5 · 11 · 11.5 ·
   12 · 12.5 · 13 · 13.5 · 14 · 14.5 · 15 · 16 · 16.5 · 17. Most of the
   differences were accidents of the component that introduced them, not
   decisions — no reader can tell 12 from 12.5, and nothing was gained by having
   both. They now resolve to eight named steps, and no value moved by more than
   0.5px, so the dense layouts this register depends on hold exactly.

   THE JUSTIFYING EXCEPTION §2A.7.1 asks for: this is eight steps where the
   marketing scale is five. §2A.6's density rule allows the data-tool chrome to
   compress, and it genuinely needs three steps the marketing pages do not — a
   chrome size for tab and control labels, a smaller one for dense table
   furniture, and a card size between them. It keeps the same gutter, radii and
   rule weights as the marketing pages, which is what §2A.6 actually requires.
   New components take a token from this list. A component that needs a size
   that is not here extends the list; it does not write a bare px (§2A.7.4). */
:root {
  --fs-caption:   11.5px;  /* museum caption, source lines, provenance labels  */
  --fs-kicker:    12px;    /* kicker / eyebrow, uppercase +0.14–0.16em         */
  --fs-chrome-sm: 13px;  /* dense table furniture, axis and legend text      */
  --fs-chrome:    13px;    /* tab and control labels, nav, footer lists        */
  --fs-small:     14px;    /* small / meta — dates, notes, metadata lines      */
  --fs-card:      15px;    /* body inside a card, where the measure is short   */
  --fs-base:      16.5px;  /* page default                                    */
  --fs-body:      17px;    /* running body inside a measure                    */
}

/* 26 Jul 2026 — the horizontal-scroll loop on phones.
   THE BUG: `.mnav-scrim`, `.mnav-sheet` and `.mobile-nav-wrap` are all
   position:fixed and take their width from left/right offsets. A fixed element
   sized that way measures against the initial containing block, and once a page
   overflows horizontally that block is the document's SCROLL width, not the
   viewport. So the three of them widened to match the overflow and, being wider
   than the viewport, re-asserted it. A momentary overflow during first paint
   became permanent: 584px of scroll width against a 375px viewport, with every
   ancestor stretched to match and the whole dashboard sliding sideways under a
   thumb.

   Proof it was the loop and not the content: hiding every positioned element
   dropped scrollWidth from 584 straight back to 375, with nothing left over.

   THE FIX: size them against the viewport itself, which the overflow cannot
   change, instead of against offsets the overflow can. `max-width` is the belt
   to the `width` braces — neither can now be widened by a scroll width. */
@media (max-width: 860px) {
  .mnav-scrim, .mnav-sheet {
    width: 100vw; max-width: 100vw; right: auto;
  }
  /* .mobile-nav-wrap is sticky again (26 Jul), so it is in flow and sizes
     itself; it needs the guard but not the fixed width. */
  .mobile-nav-wrap { max-width: 100%; }
}

/* 26 Jul 2026 — the KPI card uses its right-hand half on a phone.
   Measured before: a 317px card in a 375px viewport, one per row, with the
   label occupying 111px of it and everything below stacked in a single column.
   Roughly half the card was empty, and the ranks, medians and trend that make
   the figure mean something were folded behind a "Full context" pill.
   Now: two columns. The reading (label, figure, movement, reference year) holds
   the left; the context grid — national rank, state and group rank, the medians,
   the move since the reference year — fills the right. Same card height, no tap.
   The DS8 subgrid row-sharing is switched off here: it aligns cards against each
   other in a multi-column grid, and on a phone there is only ever one column. */
@media (max-width: 640px) {
  /* The two-column layout is only right for a card that HAS a context column.
     Applied to every .card.kpi it also halved the cards that carry no context —
     the market-view context cards — squeezing "US$2,702" into a column too
     narrow for it. Scoped with :has() so a card without context stays a single
     full-width column, which is what it always was. */
  .kpis > .kpi:has(> .kpi-ctx),
  .card.kpi:has(> .kpi-ctx) {
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-rows: auto;
    column-gap: 16px;
    align-items: start;
  }
  /* Every grid item needs min-width:0 or it refuses to shrink below its content
     — and `.value` is `white-space: nowrap`, so a long figure plus its sparkline
     simply ran out of the card. Measured on the Asia market view: a .value in a
     123px column reporting a scrollWidth of 383px, which pushed the card to 402
     and the whole document to 432 against a 375px screen. The figure wraps now
     rather than overflowing, and the sparkline is capped to the column. */
  .card.kpi, .card.kpi > * { min-width: 0; }
  .card.kpi > .label { grid-column: 1; grid-row: 1; min-height: 0; }
  /* `overflow-wrap: anywhere` stopped the overflow and broke the figures
     instead — "US$2,702" rendered as "US$2,70 / 2". A number in a data product
     must never break mid-token. It wraps at spaces only; min-width:0 above is
     what actually lets the column shrink. */
  .card.kpi > .value { grid-column: 1; grid-row: 2; min-height: 0;
    white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
  .card.kpi > .value svg, .card.kpi > .value canvas { max-width: 100%; height: auto; }
  .grid.cards > *, .grid.g4 > * { min-width: 0; }
  .card.kpi > .kpi-yoy { grid-column: 1; grid-row: 3; min-height: 0; }
  .card.kpi > .ref { grid-column: 1; grid-row: 4; min-height: 0; }
  /* .kpi-ctx stops being a box so its children can be placed individually: the
     rank chip drops into the left column, which was carrying a block of dead
     space below the reference year, and the context grid gets the full right
     column instead of sharing it with the chip. That balances the two columns
     and takes the card from 351px to roughly 230px. Rows are pinned rather than
     auto-placed: with auto placement the main grid landed in row 1 and stretched
     the label's row to its own height. */
  .card.kpi > .kpi-ctx { display: contents; }
  .card.kpi .ranklink,
  .card.kpi > .kpi-ctx > .kpi-rank { grid-column: 1; grid-row: 5;
    margin-top: 12px; justify-self: start; }
  .card.kpi .kc-grid { grid-column: 2; grid-row: 1 / span 4;
    border-left: 1px solid var(--rule-soft); padding-left: 14px; }
  .card.kpi .kc-grid.kc-trend { grid-row: 5; }
  .card.kpi .kpi-caveat { grid-column: 1 / -1; }
  /* never folded on a phone again: the fold button is not rendered, and any
     grid that a cached script marked folded is shown regardless. */
  .card.kpi .kc-grid,
  .card.kpi .kc-grid.kc-folded { display: grid; }
  .card.kpi .kpi-fold { display: none; }
  /* Stacked, not side by side. Laid out as label-left / value-right every one
     of the six rows wrapped to two lines in a ~130px column ("Sector median"
     and "34,967" will not sit together at that width), which pushed the card
     from 260px to 407px — taller than the folded version it replaced. Stacked,
     each row is one line for the label and one for the figure, the column reads
     down cleanly, and the card comes back to roughly its original height with
     nothing hidden. */
  /* Flattened. .kc-grid draws a bordered, rounded, hairline-gapped mini-table
     — right for a two-up grid inside a wide desktop card, wrong stacked in a
     narrow column, where it rendered as six little boxes: a decorative
     container around content that a hairline and whitespace already separate
     (§2A.5, "if a card can be replaced by a hairline + whitespace without
     losing meaning, replace it"). The column already has its own rule down the
     left; the rows need nothing else. */
  .card.kpi .kc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0; background: none; border: 0; border-radius: 0; overflow: visible;
  }
  /* the two grids sit in different rows now, so the separator is the row gap
     plus the column rule, not a border between them. */
  .card.kpi .kc-grid + .kc-grid { margin-top: 10px; padding-top: 0; border-top: 0; }
  .card.kpi .kc { display: block; padding: 0; margin-bottom: 9px; background: none; }
  .card.kpi .kc:last-child { margin-bottom: 0; }
  .card.kpi .kc-l { display: block; line-height: 1.25; }
  .card.kpi .kc-v { display: block; line-height: 1.2; margin-top: 1px;
    font-variant-numeric: tabular-nums; }
}
/* Under ~340px two columns stop being readable; fall back to one, context still
   unfolded and still not behind a tap. */
@media (max-width: 339px) {
  .card.kpi { grid-template-columns: minmax(0, 1fr); }
  .card.kpi > .label { grid-row: auto; } .card.kpi > .value { grid-row: auto; }
  .card.kpi > .kpi-yoy { grid-row: auto; } .card.kpi > .ref { grid-row: auto; }
  .card.kpi .ranklink,
  .card.kpi > .kpi-ctx > .kpi-rank { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .card.kpi .kc-grid, .card.kpi .kc-grid.kc-trend {
    grid-column: 1; grid-row: auto;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule-soft); padding-top: 10px; margin-top: 10px;
  }
}

/* 26 Jul 2026 — one menu design estate-wide. Australia and the UK collapsed the
   firm nav behind a Menu button on a phone; New Zealand and Asia laid the same
   seven links out flat. Same menu, two designs. This is the shared pattern. */
.menu-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; font: 500 13px var(--display); color: var(--ink); padding: 8px 0; }
@media (min-width: 880px) { .menu-btn { display: none; } }
.menu-btn__icon { position: relative; width: 18px; height: 14px; display: inline-block; }
.menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); transition: transform .2s ease; }
.menu-btn__icon::before { top: 2px; }
.menu-btn__icon::after { bottom: 2px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }
.drawer { display: none; background: #031602; border-bottom: 1px solid rgba(255,255,255,.10); }
.drawer.is-open { display: block; }
@media (min-width: 880px) { .drawer { display: none !important; } }
.drawer__nav { max-width: var(--col-max, 1440px); margin: 0 auto; padding: 6px clamp(20px,4vw,64px) 16px; display: flex; flex-direction: column; }
.drawer__nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px; color: var(--paper-bright); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 16px var(--display); }
.drawer__nav a:last-child { border-bottom: 0; }
.drawer__nav a .num { color: rgba(255,255,255,.4); font-size: 12px; font-weight: 400; }
@media (max-width: 879px) { header .nav, .site-head nav { display: none; } }

/* 26 Jul 2026 — cleaning up after restoring the site header on phones.
   Two things were sized for a page that had no header above them:
   1. The ink `.advisory-band` repeated the CoreBridge wordmark. It existed
      because the header was hidden; with the header back it was the same
      wordmark twice, stacked. Hidden on phones, kept on desktop where it is
      the section band it was drawn to be.
   2. The header's ⌘K search pushed the Menu button off the right edge at
      375px. The search has its own control inside the tool; in the firm bar on
      a phone it is the third thing competing for a 375px row, so it stands
      down there and the row is brand | Menu. */
@media (max-width: 767px) {
  .advisory-band { display: none; }
  .site-head .head-search { display: none; }
  .site-head__inner { gap: 12px; padding-left: var(--col-pad, 16px); padding-right: var(--col-pad, 16px); }
  .site-head .menu-btn { margin-left: auto; flex: 0 0 auto; }
  .site-head .brand { min-width: 0; overflow: hidden; }
}

/* =========================================================================
   26 Jul 2026, per direction: "can you not have the blue teal on the black, too hard
   to read across the website."

   Measured, and she is right — it is not a matter of taste:
     --accent #234C50 on --ink #031602            1.98 : 1
     --accent #234C50 on --ink-surface-2 #0C2410  1.74 : 1
   WCAG wants 3:1 for the boundary of a UI component. Two teal-on-black
   surfaces at ~1.9 are, for practical purposes, one surface.

   Worse, the selection was inverted. On every dark bar the SELECTED chip was
   the teal one and the unselected chips were paper — so the current state was
   the least legible thing on the bar, and the eye landed on everything except
   where you are.

   The rule from here: teal is a LIGHT-GROUND colour. On paper it is 8.32:1 and
   it stays. On a dark ground the accent ladder already provides the answer and
   §2A.3 names it — --accent-soft #9CC2C0, which is 9.73:1 on ink. So:

     selected on dark    = paper fill + ink text        11.1 : 1
     unselected on dark  = transparent + accent-soft    9.73 : 1

   Selection is now the brightest thing on the bar, which is what selection
   should be, and no teal fill sits on black anywhere.
   ========================================================================= */

/* --- the section-nav chips (the "1 / 2 / 3" strip under the tab bar) ------ */
.sn-link {
  background: transparent;
  border-color: rgba(246, 242, 236, .22);
  color: var(--accent-soft, #9CC2C0);
}
.sn-link:hover {
  background: rgba(246, 242, 236, .10);
  border-color: rgba(246, 242, 236, .45);
  color: var(--paper-bright, #FEFCF7);
}
.sn-link.active {
  background: var(--paper-bright, #FEFCF7);
  border-color: var(--paper-bright, #FEFCF7);
  color: var(--ink, #031602);
  box-shadow: none;
}
.sn-link.active .sn-num {
  background: var(--accent-wash, #E1ECEA);
  color: var(--accent-deep, #16363A);
}

/* --- the tab bar: groups, solos and the dropdown heads ------------------- */
nav.tabs a.active,
nav.tabs .tab-cluster a.active,
nav.tabs .tab-solo.active,
nav.tabs .tab-menu a.active {
  background: var(--paper-bright, #FEFCF7);
  color: var(--ink, #031602);
  font-weight: 700;
  box-shadow: none;
}
/* an unselected standalone tab was a #0C2410 fill on #031602 — 1.74:1, a box
   you could not see. Hairline and accent-soft instead. */
nav.tabs .tab-solo {
  background: transparent;
  border: 1px solid rgba(246, 242, 236, .18);
  color: var(--accent-soft, #9CC2C0);
}
nav.tabs .tab-solo:hover {
  background: rgba(246, 242, 236, .10);
  border-color: rgba(246, 242, 236, .42);
  color: var(--paper-bright, #FEFCF7);
}
.tab-head[aria-expanded="true"] {
  background: var(--paper-bright, #FEFCF7);
  color: var(--ink, #031602);
  border-color: var(--paper-bright, #FEFCF7);
}
/* the "you are here" underline under a closed group head */
.tab-head.is-current { box-shadow: inset 0 -2.5px 0 var(--accent-soft, #9CC2C0); }

/* 26 Jul 2026 — the resting group heads were invisible boxes.
   `.tab-head` and `.tab-cluster` sat on #0C2410 against the bar's #031602:
   1.14:1. The label was legible (8.79:1) but the CHIP was not there, so a bar
   of five controls read as loose words on black. Same treatment as .tab-solo
   now: no fill, one hairline, accent-soft label. Selected states are unchanged
   — they are a paper fill, and they are now the only filled things on the bar,
   which is the point. */
nav.tabs .tab-head,
nav.tabs .tab-cluster,
nav.tabs .tab-group > .tab-head {
  background: transparent;
  border: 1px solid rgba(246, 242, 236, .18);
  color: var(--accent-soft, #9CC2C0);
}
nav.tabs .tab-head:hover,
nav.tabs .tab-cluster:hover {
  background: rgba(246, 242, 236, .10);
  border-color: rgba(246, 242, 236, .42);
  color: var(--paper-bright, #FEFCF7);
}


/* =========================================================================
   DARK-GROUND LEGIBILITY — 26 Jul 2026 (per urgent direction)

   Reported as "purple text hard to read on the dark background where the
   university list appears". Measured on the live AU landing, the university
   list rendered #16363A on #031602 — a contrast ratio of 1.45:1 against the
   4.5:1 AA floor. Four more dark-on-dark cases sat beside it, one of them at
   1.00:1 (the picker value was the same colour as its own card).

   Two causes, both traceable:

   1. The reading-column link safety net added earlier today was written with
      an ID (`#main a...`), so it outranked the hub's own correct dark-card
      rule (`.home-card--bench .home-results a { color: var(--paper-on-ink) }`)
      and repainted all 39 university links in the deep accent. Fixed in
      enhance.css by dropping the specificity, not by adding more weight here.

   2. The lead and scorecard kickers and deep-labels were written when those
      cards had light fills — dark text on a light chip was right then. Every
      landing card is now dark (`--ca` resolves to the teal accent on all four
      hubs), so the same rules put ink on teal at 1.98:1.

   Ratios after this block, measured against #031602 and the #234C50 chip:
     university links   --paper-on-ink #CBC7BB on #031602 = 11.10:1  AA/AAA
     deep labels        --cal          #9CC2C0 on #031602 =  9.73:1  AA/AAA
     kicker chips       --paper-on-ink #CBC7BB on #234C50 =  5.59:1  AA
     picker value       --paper-on-ink #CBC7BB on #031602 = 11.10:1  AA/AAA

   Per §2A.3 no blue or purple hue is introduced: every colour here is already
   in the ink/teal/gold system.
   ========================================================================= */

/* the kicker chip keeps its teal fill; its text goes light like the base rule
   already says. The two card-specific overrides below it are the ones that
   still assumed a light chip. */
/* CORRECTED 30 Jul 2026 (per direction: "needs the corebridge white font colour").
   The tone above was --paper-on-ink #CBC7BB. It clears AA on the accent at 5.59:1, which
   is why this passed review, but the number was answering the wrong question: that token
   exists to carry BODY COPY quietly across a LARGE INK ground, and an 11px uppercase chip
   on a 37px accent fill is the opposite job. Reading it beside the .mineband-go button in
   the same viewport — already #FEFCF7 at 9.22:1 — the chips looked switched off.
   --paper-bright takes them to 9.22:1 and matches the rule stated further down this file:
   anything sitting on the ACCENT takes the bright tone, not the quieted one. */
.home-card--lead .home-kick,
.home-card--score .home-kick { color: var(--paper-bright, #FEFCF7); background: var(--ca); }

/* deep labels on dark cards take the light accent, never the deep one */
.home-card--lead .home-deep-label,
.home-card--score .home-deep-label,
.home-card--bench .home-deep-label,
.home-card--wide .home-deep-label { color: var(--cal, var(--accent-soft)); }

/* the university list itself, on every dark landing card */
.home-card--lead .home-results a,
.home-card--score .home-results a,
.home-card--bench .home-results a,
.home-card--wide .home-results a { color: var(--paper-on-ink); }
.home-card--lead .home-results a span,
.home-card--score .home-results a span,
.home-card--bench .home-results a span,
.home-card--wide .home-results a span { color: var(--paper-on-ink-2, var(--accent-soft)); }

/* the picker trigger sits on the card's own dark ground, so it cannot use ink */
.home-card .cbx-pick__trigger { color: var(--paper-on-ink); }
.home-card .cbx-pick__val { color: var(--paper-on-ink); }
.home-card .cbx-pick__val.is-empty { color: var(--accent-soft); }
.home-card .cbx-pick__trigger:hover { border-bottom-color: var(--accent-soft); }


/* =========================================================================
   DRAWER — header overlap + one menu design (26 Jul 2026, per direction: P0)

   TWO FAULTS, both only visible on a phone.

   1. THE MENU TRAPPED YOU. Under 640px the open drawer was pinned with
      `inset: 0 0 auto 0` at z-index 130. The site header is sticky at
      z-index 70, so the drawer was drawn straight over it: brand, Close
      button and all. Once open there was no visible way to shut it — only
      an outside tap or the Escape key, neither of which a phone user can
      see. The drawer now starts below the header and is capped to the space
      that is actually left, so the Close control stays on screen the whole
      time it is open.

   2. THREE DIFFERENT MENUS. the principal asked for one menu design across the
      site. The homepage drawer moved to a paper ground earlier today; the
      hub and static-page drawers were left as the old dark slab, so the
      same control looked like two different components depending on which
      page you opened it from. They are one design now: paper ground, ink
      text, hairline rules — matching the homepage exactly.

   `--headh` is published by setStickyVars() in each hub's app.js on every
   render; 65px is the measured fallback for the first paint before it runs.
   ========================================================================= */

.drawer {
  background: var(--paper);
  border-bottom: 1px solid var(--rule, rgba(3,22,2,.12));
}
.drawer__nav a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft, rgba(3,22,2,.08));
}
.drawer__nav a:hover { color: var(--ink); }
.drawer__nav a:last-child { border-bottom: 0; }
.drawer__nav a .num { color: var(--ink-3); }

@media (max-width: 640px) {
  .drawer.is-open {
    top: var(--headh, 65px);
    max-height: calc(100vh - var(--headh, 65px));
    box-shadow: 0 18px 40px rgba(20,17,13,.18);
  }
}

/* ==========================================================================
   v4.2 TYPE RHYTHM — one scale, one measure, one rhythm (27 Jul 2026, the principal)

   Audited on the live build first, which is why this exists. Body copy was running at three
   different sizes across four page types (21.7px on Perspectives and Leadership Evolution,
   20.4px on the homepage, 16.5px on the dashboards) against a spec of 14. Line-height was
   1.5-1.55 against a spec of 1.6. Worst of all, the gap between paragraphs was 0px on the
   homepage, 17px on Leadership Evolution and 89px on Perspectives: the same content type with
   three unrelated rhythms, which is what makes a site feel assembled rather than designed.

   The 14px in the scale is the DOCUMENT figure and reads small on screen, so the web body is
   set at 17px on the spec's own 1.6 leading. Everything else keeps the spec's ratios: the
   heading ladder, the lede, the negative tracking on display sizes and the positive, uppercase
   tracking on chrome. Sizes clamp down on small screens rather than being redefined per page.
   ========================================================================== */
:root {
  --t-body: 17px;
  --t-lead: 1.6;          /* the spec's leading, applied everywhere rather than per page */
  --t-para: 1em;          /* one paragraph rhythm, not 0 / 17 / 89 */
}

/* Running copy. One size, one leading, one gap. */
p, li, dd, blockquote,
.body, .copy, .prose p { font-size: var(--t-body); line-height: var(--t-lead); }
p { margin-block-end: var(--t-para); }
p:last-child { margin-block-end: 0; }

/* The lede sits one step above body, as the scale has it. */
/* MEASURE, 30 Jul 2026 (per direction: "is this font too big?"). The size was right — one step above
   body is what the scale specifies — but with no cap the Asia overview lede ran to 107 characters
   a line on a 1280px screen, against the 60-62ch this estate uses everywhere it has said so:
   .body on the marketing site is 62ch, the university profile lede is 60ch. A long line of
   slightly larger type reads as oversized even when the type is correct, because the eye loses
   its place on the return sweep. Capping the measure fixes what actually looked wrong without
   touching a size the canonical had already settled. */
.lede, .hero__lede, .cb-lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }

/* ── MEASURE, THE REST OF IT (30 Jul 2026) ────────────────────────────────────────────────────
   Capping the lede exposed that nothing else was capped either. Measured across all four hubs at
   1280px, before this block:

     .src / .cbx-gb__basis   199 characters a line at 11px   (source line under every chart)
     bare p / li in Method   181-183 at 13px
     .tension-line           146 at 15px
     .note                   128-145 at 17px                 (the explanation under every heading)
     .home-intro             117 at 22px

   .note is the one that matters most: it is the running prose a reader actually reads, and at 145
   characters the return sweep is long enough to lose the line. 74ch for body-size prose and 96ch
   for the small captions — captions tolerate a longer line because there are only two of them,
   but not twice the comfortable maximum.

   Set in ch so each cap scales with its own font size, and as max-width only, so nothing is ever
   made wider than its container and no existing narrow layout changes at all. */

/* Heading ladder, on the spec's ratios: 72 / 48 / 32 / 24 / 18 / 14.
   Clamped so the ratio survives a phone instead of each page inventing its own sizes. */
h1 { font-size: clamp(34px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.018em; }
h2 { font-size: clamp(27px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.014em; }
h3 { font-size: clamp(21px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.010em; }
h4 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -0.008em; }
h5 { font-size: 18px; line-height: 1.3; }
h6 { font-size: 14px; line-height: 1.35; }

/* Chrome and eyebrows: positive tracking, uppercase, and inside the 0.04-0.16em band.
   These were sitting at 0.18em, just outside it, on every page. */
.eyebrow, .eyebrow-chip, .hero__eyebrow, .kicker, .crumb, .label,
.meta, .ref, .srcs, .sc-year, .tab-n {
  letter-spacing: 0.16em;
}
.meta, .ref, .figure-caption { font-size: 12px; line-height: 1.5; }

/* Chrome never wraps. A two-line head or foot label is a bug, so it is prevented here rather
   than discovered later. */
.site-head nav a, .site-foot-nav a, .eyebrow, .kicker, .crumb { white-space: nowrap; }
/* EXCEPT WHEN THE LABEL IS A PRODUCT NAME (30 Jul 2026). The rule above was written for nav and
   footer chrome, where a second line really is a bug. The 29 July rebrand then turned the Asia
   overview's eyebrow from "Asia Markets" into "CoreBridge Intelligence: Asia Markets" — 384px of
   text in a 309px box on a phone, clipped mid-word with no ellipsis, because nowrap plus visible
   overflow just runs it off the edge. On a narrow screen that is content, not chrome, and two
   legible lines beat one truncated one. Desktop is untouched: it fits there. */
@media (max-width: 720px) {
  .eyebrow { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   v4.2 RADIUS, HUB SWEEP (27 Jul 2026)
   Written from an enumeration of every element on the live hub that renders a box, which caught
   what the class-name pass missed. Containers square, controls in the 4-6px band, the mobile
   sheet on the spec's 8px top-only. .tab-let stays at 3px: it is a micro index chip inside a
   link, which the ruling allows as the 2px-ish micro-rounding, not a control in its own right.
   ========================================================================== */
nav.tabs, .tab-menu, .mineband, .home-kick, .cbx-featured, .mnav-subhead,
footer.site, .site { border-radius: 0 !important; }
.home-persona, .home-go, .home-deep-chip, .rk-num, .mnav-chip,
.home-chip, .home-region, .citebtn { border-radius: var(--radius-control, 5px) !important; }
.mnav-sheet { border-radius: var(--radius-sheet, 8px) var(--radius-sheet, 8px) 0 0 !important; }

/* ==========================================================================
   v4.2 RADIUS, HUB TAIL (27 Jul 2026)
   A re-audit at r81 found the big containers correct but a tail of small chrome still off:
   section indices and legends carrying 4-8px, and four mobile-nav CONTROLS sitting square when
   the ruling puts a control in the 4-6px band. Fixed here rather than left, because "mostly
   square" is how a radius system drifts back.
   ========================================================================== */
.sec-n, .dest-legend, .cbx-halo__lbl, .cbx-gb__breadth,
.home-kick-n, .ph-n, .verif { border-radius: 0 !important; }
.skip-link, .mnav-search, .mnav-step, .mnav-trigger { border-radius: var(--radius-control, 5px) !important; }

/* =========================================================================
   27 Jul 2026 — the section-nav chips on the LANDING view.

   The 26 Jul block above ("teal is a light-ground colour") is right, and its
   measurements hold. What it missed is that the strip it restyled has two
   grounds, not one:

     body:not(.is-home) #main .section-nav   -> --ink-surface  (dark)
     body.is-home       #main .section-nav   -> --paper        (cream)

   The 26 Jul rules were written unqualified, so the dark-ground treatment
   also landed on the cream one. Measured on the live build:

     --accent-soft #9CC2C0 on --ink-surface #031602   9.73 : 1   correct
     --accent-soft #9CC2C0 on --paper       #F2F0EF   1.70 : 1   invisible

   and the chip border went with it, from --rule-soft to a near-white
   rgba(246,242,236,.22) that has nothing to sit against on cream. So on the
   landing view the strip read as pale teal text floating on paper with no
   chip around it.

   It surfaced on NZ and Asia because restoring is-home on those two hubs
   earlier today brought their landing view back. AU and UK render no chips
   on their landing view, so the same broken rule was there and simply had
   nothing to show it on.

   The fix applies the 26 Jul block's own rule to the ground it actually has.
   On paper the accent proper is the legible teal (--accent #234C50, 8.32:1),
   so resting chips take it, and the selected chip becomes a filled accent
   pill so selection is still the strongest thing on the strip. Everything is
   expressed in tokens, so the dark-mode block further down flips it without
   a second rule. Scoped to body.is-home, which leaves the drilled-in dark
   strip exactly as 26 Jul set it.
   ========================================================================= */
body.is-home #main .section-nav .sn-link {
  background: var(--surface);
  /* The chip outline carries the chip's shape on paper, so it is held to WCAG 1.4.11's 3:1 for a
     UI-component boundary. --rule-soft #DDD9CF measures 1.24:1 against the #F2F0EF strip, which is
     why the resting chip read as floating text; the accent mixed 65% into paper measures 3.45:1,
     stays in the accent family the chip text already uses, and sits well under the selected pill
     at 8.32:1 so selection still wins the strip. --rule-soft is kept first as the fallback for any
     engine without color-mix, which degrades to the old faint outline rather than to none. */
  border-color: var(--rule-soft);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--paper));
  color: var(--accent);
}
body.is-home #main .section-nav .sn-link .sn-num {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
body.is-home #main .section-nav .sn-link:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-deep);
}
body.is-home #main .section-nav .sn-link:hover .sn-num {
  background: var(--accent);
  color: var(--paper-bright);
}
body.is-home #main .section-nav .sn-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-bright);
}
body.is-home #main .section-nav .sn-link.active .sn-num {
  background: var(--accent-wash);
  color: var(--accent-deep);
}

/* =========================================================================
   27 Jul 2026, per direction: "some boxes have a colour line on top of the boxes - that is against the
   rules." She is right and the canonical says so in as many words — `_canonical/SKILL.md` §Colour:
   "Rules divide paragraphs and sections, never decorate. No coloured left/top accent bars on
   boxes — containment relies on fills, type and neutral hairlines."

   Removed here rather than edited in place, so the original declarations stay readable as history.

   NOTHING IS LOST BY REMOVING THE SIGNAL BARS. .sg-strength / .sg-watch / .sg-move encoded
   strength, watch and move as a 3px green / red / teal cap. That reading is already carried twice
   over inside the card: .sig-head states it in words, and .sg-strength .sig-rank / .sg-watch
   .sig-rank keep the semantic colour on the rank figure itself. So the meaning survives on type
   and figure, which is exactly the containment the canonical prescribes.
   ========================================================================= */
.signal-standout, .sg-strength, .sg-watch, .sg-move { border-top: 0; }
nav.tabs .tab-cluster, .tab-menu { border-top-width: 1px; border-top-color: rgba(255,255,255,.09); }
.cmp-tray { border-top: 1px solid var(--rule-soft); }
.sig-empty--honest { border-top: 1px solid var(--rule-soft); }

/* WHICH PAPER TONE ON WHICH GROUND (29 Jul 2026, per direction: "the dark text on the dark teal
   doesn't work"). Two tones, two jobs, and they are not interchangeable:
     · --paper-on-ink  #CBC7BB  quieted, for body copy across a LARGE INK ground. 12.4:1 on
       ink, so it reads without shouting over a whole dark section.
     · --paper-bright  #FEFCF7  for anything sitting on the ACCENT #234C50 — controls, chips,
       active tabs, buttons. 9.22:1, against 5.59:1 for the quieted tone.
   The quieted tone technically clears AA on the accent, which is how sixty declarations came
   to use it, but AA is a floor for readability, not a licence to make a button look switched
   off. On a small control the low-chroma grey on desaturated teal reads as disabled. If you
   add a control on the accent, use --paper-bright. */

/* ------------------------------------------------------------------ the palette and the keyboard
   29 Jul 2026 (per direction: "as soon as I put 1-2 letters into the search it stops" on a phone).
   Nothing stopped. The results were rendering underneath the on-screen keyboard.

   `.cbk` was pinned at `top: min(14vh, 130px)` with its list capped at `min(46vh, 430px)`, and
   `vh` resolves against the LAYOUT viewport, which does not shrink when the keyboard opens. On an
   844px phone that put the first result at roughly 170px and the last at 556px, while the keyboard
   covers everything below about 540px. You type, the list fills, and you see nothing move.

   Two changes. `dvh` tracks the viewport that actually shrinks, and `--cbk-vh` is set from
   window.visualViewport where it exists, which is exact rather than approximate. The panel also
   moves to the top of the screen on a phone, because the space above the keyboard is the only
   space there is. */
@media (max-width: 720px) {
  .cbk {
    top: 8px;
    width: calc(100vw - 16px);
    max-height: calc(var(--cbk-vh, 100dvh) - 16px);
  }
  .cbk-list {
    /* whatever is left after the input row and the panel's own offsets */
    max-height: calc(var(--cbk-vh, 100dvh) - 124px);
  }
}

/* --------------------------------------------------- the phone gutter for UNBOXED text
   29 Jul 2026 (per direction: this text "is hard against the margin — ok for desktop, but doesn't work
   for mobile phone").

   The 12px inset above is a FRAME gap: it exists so the dark chrome is framed by a little cream,
   and it is the right size for that job. It is not a reading gutter. Anything with a box of its
   own — a card, the print pack, a section — carries its own padding on top of it and reads fine
   at 29px and beyond. What sits at a bare 12px is the loose text: the money-terms toggle, the
   `NSW · Table A · Memberships…` line, the headline read, the card-help note. On a 390px screen
   that is a hairline of air, and it was the only thing on the page set that tight.

   These are direct children of #main, so the `>` keeps the rule off anything nested inside a card
   (which would otherwise be inset twice). 8px on top of the 12px frame lands text on 20px, which
   is what --col-pad already resolves to at this width — so loose text now sits exactly where the
   grid says it should, rather than 8px outside it. */
@media (max-width: 640px) {
  body:not(.is-home) #main > p,
  body:not(.is-home) #main > h1,
  body:not(.is-home) #main > h2,
  body:not(.is-home) #main > h3,
  body:not(.is-home) #main > h4,
  body:not(.is-home) #main > ul,
  body:not(.is-home) #main > ol,
  body:not(.is-home) #main > .note,
  body:not(.is-home) #main > .src,
  body:not(.is-home) #main > .eyebrow,
  body:not(.is-home) #main > .vh,
  body:not(.is-home) #main > .home-intro,
  body:not(.is-home) #main > .cardhelp,
  body:not(.is-home) #main > .terms-toggle,
  body:not(.is-home) #main > .flag {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* The signal-card header is a flex row with the measure on the left and a `year-on-year and
   multi-year, vs the sector` caption pinned right, and that caption is `white-space: nowrap`.
   Nowrap in a flex row that has run out of room does not shrink — it overflows, and it was
   running 43px past the right edge of a 390px screen. It wraps to its own line now. */
@media (max-width: 640px) {
  .sig-head { flex-wrap: wrap; }
  .sig-head span { white-space: normal; }
}

/* CoreBridge Intelligence in the menu (29 Jul 2026, the principal): the mark on the parent row and
   the four sectors grouped beneath it against a hairline, so the menu shows one product with
   four parts rather than five sibling links. Matches the marketing site and the landing page. */
.drawer__nav a .drawer__lbl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.drawer__mark { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; display: block; }
.drawer__nav a.drawer__sub {
  font-size: 14.5px; font-weight: 450; letter-spacing: -0.004em;
  padding-top: 10px; padding-bottom: 10px; padding-left: 34px;
  position: relative;
}
.drawer__nav a.drawer__sub::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: -1px;
  border-left: 1px solid var(--rule-hairline);
}

/* The product name is a wordmark, so a menu sets it as one: CoreBridge 700 against
   Intelligence 300, no space between them (per direction, 29 Jul 2026 — "keep it all the same").
   Same canonical inline lockup as the masthead. The weights are absolute so the nav row's
   own 500 cannot flatten the contrast between the two halves. */
.nav .brand__word, .drawer__nav .brand__word,
.site-head nav .brand__word { display: inline-flex; align-items: baseline; gap: 0; }
.nav .brand__name, .drawer__nav .brand__name,
.site-head nav .brand__name { font-weight: 700; letter-spacing: -0.022em; }
.nav .brand__descriptor, .drawer__nav .brand__descriptor,
.site-head nav .brand__descriptor { font-weight: 300; letter-spacing: -0.005em; }

/* The trade mark symbol rides the lockup without disturbing it: superscript, regular weight
   so it never inherits the 700 of brand__name, and no tracking of its own. */
.brand__tm { font-size: .5em; line-height: 1; vertical-align: super; font-weight: 400;
  letter-spacing: 0; margin-left: 1px; }

/* ── The twenty-year small multiple (30 Jul 2026, the principal) ──────────────────────
   Eight frames on one shared scale. Four across on a desktop, two on a tablet and
   one on a phone: below two columns the frames are too narrow to read a swing, and
   a single column is better than four unreadable ones. The te reo name sits under
   the English one as a second line rather than beside it, so a long name cannot
   push the frame out of the grid. */
.nz-sm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nz-sm__cell { padding: 12px 12px 10px; min-width: 0; }
.nz-sm__t { margin: 0 0 8px; font-size: 13px; line-height: 1.25; font-weight: 600; }
.nz-sm__mi { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3, #6B6557); margin-top: 2px; }
.nz-sm__c { height: 96px; }
@media (max-width: 1080px) { .nz-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .nz-sm { grid-template-columns: 1fr; } .nz-sm__c { height: 120px; } }

/* ── The legal line (30 Jul 2026, the principal) ─────────────────────────────────────
   Entity, business names, copyright and trade mark status, in one sentence at the
   foot of every page in the estate. Quiet by design: it is the thing a reader
   looks for deliberately and should never compete with the content above it. */
.legal-line { margin-top: 18px; padding-top: 14px; font-size: 12px; line-height: 1.55; }
.legal-line b { font-weight: 600; color: inherit; }
/* WHICH TONE ON WHICH GROUND, again. The hub site footer is an ink band: --ink-3 sits at 3.25:1
   there and fails AA at 12px, while --paper-on-ink is 11.14:1. On a paper footer the two swap,
   --paper-on-ink dropping to 1.49:1, so each is scoped to the ground it belongs on rather than
   set once and hoped over. */
footer.site .legal-line { color: var(--paper-on-ink, #CBC7BB); border-top: 1px solid rgba(255,255,255,.12); }
.foot .legal-line, .legal-line { border-top: 1px solid var(--rule-soft, rgba(3,22,2,.10)); }
footer.site .legal-line { border-top-color: rgba(255,255,255,.12); }

/* ── Section-jump chip row: history, and why it is NOT hidden ─────────────────────────
   4 Aug 2026, morning: hidden here because the principal met it directly under the main heading on
   arrival. 4 Aug 2026, later: unhidden, because the cause was fixed rather than masked.
   These two hubs had no landing view and booted into their first data view, so an in-view
   navigator was the first thing a reader saw. They now open on `vHome()`, which has no
   numbered sections, so the row is empty and collapses on arrival exactly as it does on
   Australia and the UK, and appears only once a reader has chosen a view — which is where
   it is useful and where the other two hubs show it. Estate parity restored. */
/* The landing has no numbered sections, so the section navigator has nothing to point at.
   New Zealand's collapses on its own; Asia's boot path builds the shell regardless and left
   a "Sector views › Next Compare →" strip under the heading on first load with no chips
   between them. Scoped to the landing so the navigator still works inside every view. */
body.is-home .section-nav { display: none; }

/* ── Landing grid: even rows (per direction, 4 Aug 2026) ──────────────────────────────────────
   "the boxes on the landing page are not in an even grid make up." They were not. The six
   column tracks are shared across all four hubs but the CARD SETS are not, so the same
   spans tiled differently on each: Australia ran 3+3, 3+3, then 4+2; the UK left its last
   card alone in a third of a row; New Zealand and Asia (five cards) opened with the lead
   card stranded on half an empty row and closed on a two-thirds row.
   One rule now, applied per hub below: every row fills all six tracks, and cards sharing a
   row are the same width. */
/* New Zealand and Asia — five cards, and the worst of the four: the lead card opened on
   half an empty row because the next card (span 4) could not fit beside it, and the last
   row ran two-thirds wide. Two across, then three across. Both rows full, equal within
   each row. The lead loses its row-span here: it made the first row two units tall with
   nothing to fill the second. */
@media (min-width: 921px) {
  .home-grid > .home-card { grid-column: span 2; }
  .home-grid > .home-card--lead { grid-column: span 3; grid-row: auto; }
  .home-grid > .home-card--wide { grid-column: span 3; }
}

/* ── Sticky stack: reserve nothing for a control bar that is not there ─────────────────
   4 Aug 2026 (per direction): on New Zealand and Asia a 70px strip of page content scrolled
   through between the tab bar and the "on this tab" row. The section-nav sticks at
   headh + navh + ctrlh, and --ctrlh is only ever SET by the hubs that measure a real
   control bar. These two have no `.controls` element at all, so the variable stayed
   unset and the CSS fallback of 70px reserved a gap for a bar that does not exist:
   the tabs ended at 129px and the row stuck at 199px.
   Australia and the UK were fine because their institution picker genuinely fills it.
   Written as a :has() test rather than a flat override so it stays correct in both
   directions — add a control bar to a hub and the reservation returns by itself. */
#main:not(:has(> .controls)) { --ctrlh: 0px; }

/* Readout under each small multiple (4 Aug 2026). The eight frames carry no axes by design,
   so the number a reader is looking for lives here in text instead. Tabular figures so the
   column of values aligns down the grid. */
.nz-sm__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px;
  font-variant-numeric: lining-nums tabular-nums; }
.nz-sm__v b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.nz-sm__v b.is-neg { color: var(--danger, #8E2E2E); }
.nz-sm__yr { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.nz-sm__rg { font-size: var(--fs-chrome-sm); color: var(--ink-3); }
.nz-sm__v--none { font-size: var(--fs-chrome-sm); color: var(--ink-4); }
/* ── Phone: the card label and the rank chip (per direction, 8 Aug 2026) ──────────────────────
   Two reports on the UK hub: "headings in mobile not showing it all", and numbers
   overlapping their text on the rank chips ("121st of 141").

   1. THE RANK CHIP IS A REGRESSION, not a new bug. The stacked layout at line ~3426
      was written on 23 July for exactly this complaint. The 25 July accessibility pass
      then added `.kpi-rank { display: inline-flex; align-items: baseline }` further down
      the file to seat the new direction glyph beside the ordinal, and because it sits
      later it won: the children went back to sharing a line. It never resurfaced on a
      desktop, where the chip has room. In the phone card the chip lives in a 123px
      column, so "of 156 in the UK" wrapped into a four-line ribbon pressed against a
      20px ordinal — measured, not guessed: kr-of 39.9px wide and 67px tall beside a
      20px-tall number.
      Fixed as flex-wrap rather than by reverting either rule, so the glyph still sits
      inline with the ordinal (1.4.1 is not weakened) and the of-text always takes a
      full-width line of its own. The two cannot collide at any width.

   2. THE LABEL CLAMP HAS NO JOB ON A PHONE. `.kpi .label` carries -webkit-line-clamp:2
      so that a one-line and a two-line title push the value to the same baseline across
      a desktop ROW. On a phone there is one card per row, so there is nothing to align
      against — and the label column is 123px, where two lines is roughly half a title:
      "Tuition fees as a share of incom…". The mobile block already resets the sibling
      min-height and simply missed the clamp. A truncated measure name in a data product
      is a fact withheld, so it wraps to as many lines as it needs. */
.kpi-rank { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
.kpi-rank .kr-dir, .kpi-rank .kr-pos { flex: 0 0 auto; }
.kpi-rank .kr-of { flex: 1 0 100%; margin-top: 3px; line-height: 1.4; }

@media (max-width: 640px) {
  .card.kpi > .label, .kpis > .kpi > .label {
    display: block; -webkit-line-clamp: none; -webkit-box-orient: horizontal;
    overflow: visible; min-height: 0;
  }
}


/* ========================================================================
   CoreBridge Intelligence — standalone navigation (11 Aug 2026)
   Added by build_standalone.py. Not present in the advisory stylesheet.
   ===================================================================== */
.nav .nav-soon-item {
  font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.005em;
  color: var(--ink-4); padding: 6px 0; display: inline-flex;
  align-items: center; gap: .4em; white-space: nowrap; cursor: default;
}
.nav .nav-soon, .drawer__soon .num {
  font-size: .68em; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-3);
  border-radius: var(--radius-pill, 999px); padding: .15em .5em;
}
.nav a.nav-out { color: var(--ink-3); }
.drawer__soon {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-4); cursor: default;
}
.drawer__nav a.drawer__out { color: var(--ink-3); }