/* 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,
   indigo 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.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/Cormorant-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/Cormorant-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --ink: #031602;
  --ink-2: #2E2A22;
  --ink-3: #6B6557;
  --ink-surface: #1A1714;
  --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: #3A2FB8;
  --accent-deep: #2A2483;
  --accent-wash: #E7E4FA;
  --accent-ink: #2A2483;
  --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: #14110D;
  --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: #5B4FE5; /* FROZEN · exhibits only */
  --terracotta: #A24B28;
  --terracotta-deep: #7C3A1E;
  --ochre: #96702A;
  --warning: #8A6A1F;
  --info: #3A2FB8;          /* 2027: info = accent; #5B4FE5 stays exhibit-only */
  --accent-soft: #A39DEB;
  /* 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: #D4A017;
  --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: "Cormorant", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* shared content-column geometry, so the header, main and footer never drift */
  --col-max: 1180px;
  --col-pad: 24px;
  /* 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: 8px; --r-ctl: 10px; --r-card: 16px; --r-hero: 20px;
  /* 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 30px 30px;  /* section panel interior */
  --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 */
  --shadow-card: 0 1px 2px rgba(20, 17, 13,.06), 0 5px 12px -4px rgba(20, 17, 13,.11), 0 16px 30px -12px rgba(20, 17, 13,.14), 0 32px 56px -26px rgba(20, 17, 13,.15);
  --shadow-box:  0 1px 2px rgba(20, 17, 13,.06), 0 8px 18px -4px rgba(20, 17, 13,.13), 0 24px 46px -14px rgba(20, 17, 13,.20), 0 50px 84px -30px rgba(20, 17, 13,.22);
  --shadow-tile: 0 1px 2px rgba(20, 17, 13,.05), 0 3px 7px -2px rgba(20, 17, 13,.10), 0 11px 22px -8px rgba(20, 17, 13,.15);
  --shadow-lift: 0 2px 6px rgba(20, 17, 13,.09), 0 16px 30px -8px rgba(20, 17, 13,.22), 0 40px 64px -20px rgba(20, 17, 13,.28);
  --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: 15.5px; 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: 38px; width: 38px; object-fit: contain; display: block; }
header.site .brand a { display: flex; align-items: center; }
@media print { .brandmark { content: url("brand/mark.png"); } }
header.site .brand {
  font-family: var(--mono); font-size: 11.5px; 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: 10.5px; 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: 16.5px; 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: 60px; 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: 16px; letter-spacing: -0.012em; color: var(--ink); text-decoration: none; }
.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: 38px var(--col-pad) 34px; }
.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) — Benjie'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: 16.5px; 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: 13px; 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 indigo 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: 13.5px; 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: #CBC7BB; font-weight: 700; box-shadow: 0 2px 9px rgba(58, 47, 184,.5); }

/* tab grouping: each of the five areas is its own rounded panel on a shared dark
   base, colour-coded from the brand palette (indigo / 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: #211d2e;
  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: 10px; 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: 22px 22px 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: #CBC7BB;
  background: linear-gradient(110deg, #2C2660, var(--accent), var(--accent), var(--accent), #2C2660);
  background-size: 280% 100%; background-position: 0% 50%;
  animation: mnav-grad 8s ease-in-out infinite;
  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: 12px; 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: inherit; 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: #CBC7BB; }
.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: 1180px; margin: 0 auto; padding: 28px 24px 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: 10.5px; 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: 8px;
  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, indigo-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: #CBC7BB; padding: 9px 16px; font-weight: 700; font-size: 14px;
  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: 10.5px; 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: 11.5px; color: var(--ink-3); margin-top: 4px; min-height: 16px; }
.kpi .bench { font-size: 12px; 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(58, 47, 184,.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: 9.5px; 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 indigo magnitude tag — large is
   notable, never "good". A distinct colour from the green/red performance pulse. */
.kpi-rank--scale { background: rgba(58, 47, 184,.08); border-color: rgba(58, 47, 184,.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: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kc-v small { font-weight: 500; font-size: 10px; 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: 11px; 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 indigo 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(58, 47, 184,.42); }
.kpi.kpi-scale::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none; box-shadow: 0 0 0 2px rgba(58, 47, 184,.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: 14px; 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: indigo 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: 16.5px; color: var(--accent); letter-spacing: -0.01em; }
.role-tile .rt-desc { display: block; font-size: 12.5px; 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: 13px; 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: 10px; 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: 12.5px; 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 indigo 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: 9.5px; 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: 11.5px; 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: 16px; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.01em; }
.campus-lead p { font-size: 13.5px; 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: 12px; 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: 9.5px; 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: 12px; }
.scd-strip { position: relative; height: 28px; background: linear-gradient(90deg, rgba(142,46,46,.14), rgba(20, 17, 13,.03) 50%, rgba(61,90,61,.16)); 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: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.scd-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 4px 12px; margin: 0 6px 7px 0; color: var(--ink-2); text-decoration: none; transition: border-color .15s; }
.scd-chip:hover { border-color: var(--accent); }
.scd-chip b { font-family: var(--display); font-weight: 700; }
.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: 10px; 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: 10px; }
.vs-table .vs-win { background: rgba(61,90,61,.12); font-weight: 700; }
.vs-table .vs-arrow { font-size: 15px; 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: #CBC7BB; }
.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: 12px; 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: #CBC7BB; 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: 13px; 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: 16px; font-weight: 700; }
.guess-reveal .gw-cap { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.guess-reveal .gw-note { font-size: 12px; 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: 13.5px; 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: #CBC7BB; 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(123, 112, 235, 0); } 50% { box-shadow: 0 0 0 5px rgba(123, 112, 235, .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: 17px; 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: 11px; }
details.disclose[open] > summary::before { content: "▾"; }
details.disclose > summary .disc-sub { font-family: var(--mono); font-size: 10px; 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: 12px; 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: 13px; 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: 15px; color: var(--ink); letter-spacing: -0.01em; }
.st-unis { font-size: 11px; color: var(--ink-3); margin-top: 3px; max-width: 360px; 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: 11px; 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: 12.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 16px; max-width: 900px; }
.yoy-legend .yoy { margin-left: 0; }

/* feedback / errata box (open public beta) */
.feedback-box { }
.feedback-box h3 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.feedback-box p { font-size: 13.5px; color: var(--ink-2); max-width: 760px; margin-bottom: 12px; }
.errata-badge { display: inline-block; font-family: var(--mono); font-size: 10px; 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: 10.5px; 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: 13px; 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: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ds-v { font-family: var(--display); font-weight: 700; font-size: 15px; 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(58, 47, 184,.62); border-color: var(--accent); } 50% { box-shadow: 0 0 0 12px rgba(58, 47, 184,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 24px; 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 indigo 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(58, 47, 184,.55); } 100% { box-shadow: 0 2px 9px rgba(58, 47, 184,.38), 0 0 0 8px rgba(58, 47, 184,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: 9.5px; 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 { 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: 13.5px; 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: 15px; color: var(--accent); letter-spacing: -0.01em; }
.scale-box .scale-unit { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.scale-box .scale-km { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.scale-box .scale-desc { font-size: 12.5px; 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: 14.5px; 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: 15px; margin-bottom: 8px; color: var(--ink-2); }
.chartcard .src { font-size: 11px; 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: 11px; 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 indigo 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: 11px; 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: 11.5px; 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(58, 47, 184,.14); border: 1.2px solid rgba(58, 47, 184,.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: 13px; color: var(--ink-3); }

table.data { width: 100%; border-collapse: collapse; background: var(--paper-bright); border: 1px solid var(--rule-soft); font-size: 14px; }
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: 11px; 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: 10.5px; 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: 12.5px; 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: 12.5px; color: var(--ink-2); line-height: 1.3; }
.cc-row .cc-v { font-size: 14px; 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: 13px; white-space: normal; }
.pill { display: inline-block; font-size: 10.5px; 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: 11px; color: var(--ink-3); line-height: 1.7; }
.attrib h4 { font-family: var(--mono); font-size: 10.5px; 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: 13px; 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: 11px; 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: 10.5px; 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: 13px; color: var(--accent-ink); margin: 12px 0; }

footer.site { background: var(--header); color: var(--paper-on-ink-2); padding: 26px 0; font-size: 12.5px; }
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: #CBC7BB; border: none; cursor: pointer;
  padding: 11px 20px; border-radius: 8px; 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: 16px; }
.methodology p, .methodology li { font-size: 14px; }
.methodology ul { padding-left: 20px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; 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: 15px; 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: 12px; 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: #CBC7BB; }
.add-cmp.on { background: var(--accent); color: #CBC7BB; 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: 1240px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cmp-tray-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-on-ink-2); }
.cmp-tray-label b { color: var(--chip-yellow); font-size: 12px; 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: 12.5px; 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: 15px; 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: 12px; 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: 12px; 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: 13.5px; cursor: pointer; }
.pickrow:hover { background: var(--paper); }
.pickrow.on { background: var(--accent-wash); font-weight: 600; }
.pickrow .meta2 { color: var(--ink-3); font-size: 12px; }

/* 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 24px 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. */
  /* mobile: the site header is removed; the CoreBridge mark now rides on the Jump-to-a-view bar,
     which is a rounded Apple-glass pill (frosted indigo, frosts content scrolling behind it). */
  .site-head { display: none; }
  .mobile-nav-wrap {
    display: flex; align-items: center; gap: 11px; position: sticky; top: 0; z-index: 60;
    border-radius: 16px; padding: 8px 12px 9px;
    /* Real Apple-glass: indigo 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:
      linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 36%),
      color-mix(in srgb, var(--accent) 78%, transparent);
    -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: 32px; height: 32px; 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(--r-ctl);
    background: rgba(255, 255, 255, .12); color: #CBC7BB;
    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: 12.5px; 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: 10px;
  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: 15px; 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: 9.5px; 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: 11.5px; color: var(--ink-3); }
.sig-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sig-meta { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.4; }
.sig-empty { padding: 14px 16px; font-size: 12.5px; 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 indigo 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: 14px; 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: 12px; }
.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: 11px; 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: 13.5px; color: var(--ink); }
.sm-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; color: var(--accent-deep); }
.sm-sub { font-size: 11px; 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: 10.5px; 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: 13.5px; 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: 10px; padding: 15px 20px 13px; margin: 0 0 22px; }
.tab-read-h { font-family: var(--mono); font-size: 10.5px; 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: 13.5px; 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: 11px; 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: 10.5px; 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: 13px; 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: 13px; 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: 9px; 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: 999px; 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: 15px; 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: 15px; 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: 14px; line-height: 1.3; }
.peer-item .peer-meta { font-size: 11.5px; 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, indigo =
   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: 10px; color: var(--ink-3); font-weight: 400; }
.sc-rankmove { font-weight: 700; font-size: 12px; 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 indigo 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: 12px; 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: #211D31 !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: 13.5px; 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; }
.sh-section-split .sh-lede { font-size:11.5px; line-height:1.65; color:var(--ink-3); font-style:italic; 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:12px; 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(58, 47, 184,.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(58, 47, 184,.5); animation:cb-blue-pulse 2.25s ease-in-out infinite; }
@keyframes cb-blue-pulse { 0% { box-shadow:0 0 0 0 rgba(58, 47, 184,.5); } 70%,100% { box-shadow:0 0 0 9px rgba(58, 47, 184,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;
  background:
    radial-gradient(60% 80% at 25% 118%, rgba(28,25,22,.42), transparent 62%),
    radial-gradient(55% 75% at 70% 122%, rgba(50,45,40,.36), transparent 62%),
    radial-gradient(48% 68% at 50% 132%, rgba(16,14,12,.46), transparent 58%);
  background-size: 180% 180%; background-position: 50% 100%;
  filter: blur(6px); clip-path: inset(0 round var(--r-card));
  animation: cb-smoke 11s ease-in-out infinite alternate;
}
@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:12.5px; 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 Benjie: 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:12.5px; }
.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:12.5px; 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:12.5px; 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:11.5px; }
  .sh-compare-row .val { font-size:11.5px; }
  /* 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; }
.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; }
.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 ===== */
.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:16px;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:11px;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:13.5px;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:12px;color:var(--accent);letter-spacing:.02em}
.home-sublinks{font-family:var(--mono);font-size:11px;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:13px;color:var(--paper-on-ink);margin-top:6px}
.home-leadstat b{color:#CBC7BB;font-size:17px}
.home-rank{display:flex;flex-direction:column;gap:6px;margin:2px 0}
.home-rank>div{display:flex;align-items:center;gap:8px;font-size:12px;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:12px;padding:5px 11px;border:1px solid var(--rule-soft);border-radius:20px;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:#CBC7BB;border-color:var(--accent)}
.home-search{width:100%;padding:11px 14px;font:inherit;border:1px solid var(--rule);border-radius:10px;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:13.5px;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:11px}
.home-region{width:100%;padding:9px 11px;font:inherit;border:1px solid var(--rule);border-radius:9px;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:11px;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:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.home-local-cols .sub{font-size:12px;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:12px;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:16px}
@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:34px; 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:1200px; 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:18px; 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: indigo-lit dark, bars grow to fill */
.home-card--lead{background:radial-gradient(135% 150% at 100% -12%,#2c2660 0%,var(--ink-surface) 58%);}
.home-card--lead .home-bars{flex:1 1 auto;height:auto;min-height:150px;gap:6px}
.home-card--lead .home-bars span{background:linear-gradient(180deg,var(--accent-soft),rgba(163,157,235,.4));border-radius:4px 4px 0 0}
.home-card--lead .home-bars span.hi{background:linear-gradient(180deg,#857bf4,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:linear-gradient(90deg,var(--accent),var(--accent-soft))}
/* 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:11px}
.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:11px;background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent-soft);font-family:var(--mono);font-size:12px;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:15px;line-height:1}
.home-card:hover .home-go,.home-card:focus-within .home-go{background:var(--accent);color:#CBC7BB;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:#CBC7BB;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:9.5px;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:11px;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:12.5px;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 ===== */
:root{ --ink-surface-indigo:#2C2660; --accent-mid:#857bf4; }

/* 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:radial-gradient(135% 150% at 100% -12%,var(--ink-surface-indigo) 0%,var(--ink-surface) 58%)}
.home-card--lead .home-bars span.hi{background:linear-gradient(180deg,var(--accent-mid),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:12px;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:10px;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:11px}
.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}
.home-go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ca,var(--accent)) 6.5%,transparent),transparent);transform:translateX(-100%);animation:homeGoSweep 2.8s ease-in-out infinite}
@keyframes homeGoSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(320%)}}
.home-card--lead .home-go::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}

/* rolling-chart caption on the lead card */
.home-bars-label{font-family:var(--mono);font-size:10.5px;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:11px;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:10px;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:radial-gradient(135% 150% at 100% -12%,var(--ink-surface-indigo) 0%,var(--ink-surface) 58%);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)}
.home-card--bench .home-go::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}

/* ===== Landing v7 — ALL cards dark (per-section --ca solid + --cal light), section numbers, Compare picker ===== */
.home-card{background:radial-gradient(135% 150% at 100% -12%,var(--ink-surface-indigo) 0%,var(--ink-surface) 58%);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)}
.home-go::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}

/* 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:linear-gradient(90deg,var(--ca),var(--cal))}
.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:11.5px;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:11px;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:10px;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}

/* ===== Nav v9 — numbered sections (01–06) matching the landing + Scorecard yellow ===== */
/* number badge in cluster kickers and solo tabs */
nav.tabs .tab-kicker .tab-n, nav.tabs .tab-solo .tab-n { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:14px; padding:0 3px; border-radius:4px; background:rgba(255,255,255,.14); color:inherit; font:700 9px var(--mono); margin-right:6px; }
nav.tabs .tab-kicker .tab-n { vertical-align:1px; }
/* solo numbered tabs (single-destination sections: Rank, Compare, Local, Scorecard) */
nav.tabs .tab-solo { display:inline-flex; align-items:center; padding:7px 11px; border-radius:9px; background:#211d2e; color:var(--clust-text,var(--accent-soft)); text-decoration:none; font:600 13px var(--text); letter-spacing:.01em; 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); }
nav.tabs .tab-solo.active .tab-n { background:rgba(0,0,0,.22); }
/* 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, 16px); background: radial-gradient(130% 170% at 100% -25%, var(--ink-surface-indigo, #2C2660) 0%, var(--ink-surface) 62%); 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: 7px; 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: color-mix(in srgb, var(--ca, var(--accent)) 58%, #031602); color: #CBC7BB; font: 700 9px var(--mono); }
.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: 11px; 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: #2c2742; border: 1px solid rgba(255,255,255,.10); }
nav.tabs .tab-solo:hover { background: #383152; }

/* #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: 20px; 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: 14px; 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 infinite; }
@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: radial-gradient(140% 180% at 100% -25%, color-mix(in srgb, var(--ca, var(--accent)) 48%, var(--ink-surface)) 0%, var(--ink-surface) 64%); border: 1px solid color-mix(in srgb, var(--ca, var(--accent)) 34%, rgba(255,255,255,.08)); }

/* #2 boxes float on the cream page with the standard brand shadow (the indigo-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: 16px; }
.beta-bar { margin-top: 14px; margin-bottom: 12px; padding: 11px 26px; }
.beta-bar .bandwrap { max-width: none; padding: 0; }
footer.site { margin-top: 26px; margin-bottom: 32px; padding: 24px 30px; }
footer.site .bandwrap { max-width: none; padding: 0; }
nav.tabs { max-width: var(--col-max); margin: 0 auto 14px; border-radius: 16px; padding: 11px 16px; }

/* #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 #2c2742 (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/indigo/
     red/green/yellow identity reading through the frost. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 26%),
    radial-gradient(140% 180% at 100% -25%,
      color-mix(in srgb, var(--ca, var(--accent)) 52%, rgba(44,38,96,.62)) 0%,
      color-mix(in srgb, var(--ink-surface) 86%, transparent) 64%),
    color-mix(in srgb, var(--ink-surface) 88%, transparent);
  -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:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 14px 26px -16px rgba(255,255,255,.30),
    inset 0 -16px 30px -22px rgba(20, 17, 13,.55),
    var(--lg-drop);
}
/* 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;
  background:
    linear-gradient(135deg,
      var(--lg-sheen) 0%,
      rgba(255,255,255,.12) 14%,
      rgba(255,255,255,0) 38%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
/* 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;
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0) 42%),
    color-mix(in srgb, var(--chip-yellow) 64%, rgba(255,255,255,.30));
  -webkit-backdrop-filter: saturate(180%) blur(var(--lg-blur));
  backdrop-filter: saturate(180%) blur(var(--lg-blur));
  border: 1px solid color-mix(in srgb, var(--chip-yellow) 60%, rgba(20, 17, 13,.18));
  border-top-color: rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -10px 20px -16px rgba(122,112,12,.5),
    0 10px 30px -14px rgba(122,112,12,.34);
}

/* ============================================================
   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.
   ============================================================ */
nav.tabs {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 34%),
    color-mix(in srgb, var(--ink-surface) 72%, transparent);
  -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,.10);
  border-top-color: rgba(255,255,255,.22);
  border-bottom-color: var(--lg-edge-bot);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -14px 26px -22px rgba(20, 17, 13,.6),
    var(--lg-drop);
}
/* the cluster / solo panels carry the LIGHT text, so keep them
   near-opaque (92% of the live #2c2742) 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, #2c2742 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:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%),
    color-mix(in srgb, var(--header) 74%, transparent);
  -webkit-backdrop-filter: saturate(var(--lg-sat)) blur(var(--lg-blur));
  backdrop-filter: saturate(var(--lg-sat)) blur(var(--lg-blur));
  border: 1px solid rgba(255,255,255,.09);
  border-top-color: rgba(255,255,255,.20);
  border-bottom-color: var(--lg-edge-bot);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 28px -22px rgba(20, 17, 13,.6),
    var(--lg-drop);
}

/* ============================================================
   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:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 26%),
      radial-gradient(140% 180% at 100% -25%,
        color-mix(in srgb, var(--ca, var(--accent)) 50%, var(--ink-surface)) 0%,
        var(--ink-surface) 64%);
  }
  .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: #2c2742;
  }
  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:
      radial-gradient(140% 180% at 100% -25%,
        color-mix(in srgb, var(--ca, var(--accent)) 48%, var(--ink-surface)) 0%,
        var(--ink-surface) 64%);
  }
  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: #2c2742;
  }
  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:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%),
    color-mix(in srgb, var(--ink-surface) 66%, transparent);
  -webkit-backdrop-filter: saturate(var(--lg-sat, 165%)) blur(16px);
  backdrop-filter: saturate(var(--lg-sat, 165%)) blur(16px);
  border: 1px solid rgba(255,255,255,.10);
  border-top-color: rgba(255,255,255,.22);
  border-bottom-color: var(--lg-edge-bot, rgba(20, 17, 13,.34));
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px -10px rgba(20, 17, 13,.42);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not(.is-home) #main .section-nav { background: #211c26; }
}
@media (prefers-reduced-transparency: reduce) {
  body:not(.is-home) #main .section-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #211c26; }
}

/* ===== 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, 16px);
  box-shadow: 0 0 0 1px rgba(58, 47, 184,.16), 0 10px 28px -8px rgba(58, 47, 184,.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: 13px; 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: 11.5px; 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: 10px; 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: 20px; -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: 13px; 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: 12px; } .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; }
nav.tabs .tab-cluster a.active .tab-let { background: rgba(0,0,0,.20); opacity: 1; }

/* ===== 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: 13px; 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: 14px; } }

/* ============================================================================
   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: 16px;  /* M3 carousel item shape */
  }
  #main .grid.kpis:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 18px; }
}
@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; }
.tab-head {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 9px; border-radius: 9px;
  background: color-mix(in srgb, #2c2742 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 13px var(--text); letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tab-head:hover { color: #CBC7BB; background: #383152; }
.tab-head[aria-expanded="true"] { color: #CBC7BB; background: var(--clust, var(--accent)); border-color: transparent; }
.tab-head[aria-expanded="true"] .tab-n { background: rgba(0,0,0,.22); }
.tab-head.is-current { box-shadow: inset 0 -2.5px 0 var(--clust, var(--accent)); }
.tab-head .tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 3px; border-radius: 4px; background: rgba(255,255,255,.14); color: inherit; font: 700 9px var(--mono); }
.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: #211d2e; border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--clust, var(--accent));
  border-radius: 12px; 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: 8px; 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; }
.tab-menu a.active .tab-let { background: rgba(0,0,0,.22); }
.tab-menu .tab-let { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 14px; padding: 0 3px; border-radius: 3px; background: rgba(255,255,255,.13); color: inherit; font: 700 9px var(--mono); }
@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: #9a7838; }
.scc-bench { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; 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: 11px; }
.scc-move .sc-rankmove { font-size: 11px; 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: #CBC7BB; }
.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: #9a7838; }
.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: color-mix(in srgb, var(--ca, var(--accent)) 55%, #031602); color: #CBC7BB;
  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: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), rgba(16,13,24,.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: 13px; 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: #CBC7BB; }
.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: 28px; 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: 13px; }
.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: 11.5px; margin-left: auto; }
.scd-src { font-size: 10.5px; 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: 8px; 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: 13px; 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: 9.5px; 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: 11px; 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: 13.5px; 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: 16px; 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: 14px; 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: 13.5px; 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: 999px; 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: 4px; 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: 12px; 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: 7px; 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; } }
.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: 9px; 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: 11.5px; 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 10.5px 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: 12px; 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: 12px; 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: 13px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 14px; max-width: 74ch; 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: 13.5px; 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: 12px; }
  nav.tabs .tab-head .tab-n, nav.tabs .tab-solo .tab-n { min-width: 14px; height: 13px; font-size: 8.5px; margin-right: 4px; }
}





/* -- 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: 13.5px; }
#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 .tab-n, nav.tabs .tab-solo .tab-n { display: none; }
  nav.tabs .tab-head, nav.tabs .tab-solo { padding: 6px 7px; font-size: 11.5px; }
}

/* -- 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: 11px; 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 indigo #3A2FB8 (soft #B7B0F2 on dark
   grounds), and the copper-indigo 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: #3A2FB8; --rp-accent-soft: #B7B0F2; --rp-accent-ink: #2D267A;
  --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: "Cormorant", 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-indigo atmospheric bloom + floor falloff (paper.css .atm) */
.rp-page--ink {
  background-color: #0F0D0B; color: var(--rp-on-ink);
  background-image:
    radial-gradient(ellipse 75% 65% at 8% 4%, rgba(212, 130, 76, 0.42), transparent 65%),
    radial-gradient(ellipse 70% 60% at 92% 10%, rgba(110, 96, 255, 0.50), transparent 70%),
    radial-gradient(ellipse 100% 70% at 50% 100%, #050403 0%, transparent 60%);
}
.rp-page--quiet {
  background-image:
    radial-gradient(ellipse 70% 60% at 12% 6%, rgba(212, 130, 76, 0.30), transparent 65%),
    radial-gradient(ellipse 65% 55% at 88% 12%, rgba(110, 96, 255, 0.38), transparent 68%),
    radial-gradient(ellipse 100% 70% at 50% 100%, #060504 0%, transparent 60%);
}
.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: 10px; 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: #14110D; 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: 13px; }
.rp-wm span { font-family: var(--rp-display); font-weight: 300; font-size: 13px; }
.rp-pg { font-family: var(--rp-display); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 10px; 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 {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 95% 55% at 18% 100%, rgba(15, 13, 11, 0.92) 0%, rgba(15, 13, 11, 0.78) 28%, rgba(15, 13, 11, 0.40) 55%, rgba(15, 13, 11, 0.00) 78%),
    linear-gradient(to bottom, rgba(15, 13, 11, 0.22) 0%, rgba(15, 13, 11, 0.00) 18%, rgba(15, 13, 11, 0.00) 55%, rgba(15, 13, 11, 0.50) 88%, rgba(15, 13, 11, 0.80) 100%),
    linear-gradient(to bottom, rgba(15, 13, 11, 0.42) 0%, rgba(15, 13, 11, 0.10) 14%, rgba(15, 13, 11, 0.00) 26%),
    radial-gradient(ellipse 60% 45% at 92% 6%, rgba(110, 96, 255, 0.22), transparent 65%);
}
.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: italic;
  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: 11px; 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: 11px; 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: italic; 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: italic; 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(58, 47, 184, 0.07); border-color: rgba(58, 47, 184, 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: italic; }

/* -- 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: italic; 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: italic; 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: italic; 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; }
}