/* theme-tokens.css: the portal's four themes (Alabaster, Light, Bright, Dark), for pages that load page-theme.js.
   Values come from the Next.js sandbox (next-sandbox/src/portal/theme.css, the Designer's direction, 2026-10-23).
   page-theme.js puts data-theme on <html> before the first paint; the gear's Theme picker changes it.

   Part 1 is one token block per theme. The names carry a th- prefix because the live pages already use --text,
   --surface and --border for their own meanings (on the University pages --surface is the page, not a panel).
   Part 2 maps the University pages' own variables onto the tokens, so a page changes colour without its rules being
   rewritten. Part 3 restyles the surfaces those pages paint with fixed colours (the edit pages' gradients, the side
   menu, inline styles written by scripts). Load this AFTER the page's own styles.

   Rules the contrast test (tests/theme-tokens.test.mjs) holds: body text 4.5:1 or more on every plane; edges, marks
   and rings 3:1. Steel #2F6F9F is a fill, rule and ring only, never text on a light theme: text and links in steel use
   --th-blue-ink (#2A6590 on the light themes, #6CC7F5 on charcoal). Trinity green #78C832 is a fill only, never text
   on a light theme; green text is --th-accent-ink. --th-text-3 and the coloured inks never sit on --th-surface-3. */

/* ---------- Part 1: tokens ---------- */

/* ---------- Light (default) ---------- */
:root, :root[data-theme="light"] {
  /* Light's identity is the soft lift (council design A4): a cool blue-grey page, white cards with a 1px cool line and
     a two-layer soft shadow, no offset. Text-3 on the page is 4.73. */
  --th-bg: #D9DEE4;
  --th-bg-wash: radial-gradient(680px 440px at 100% 0%, rgb(47 111 159 / 0.04), transparent 72%);
  --th-surface: #FFFFFF; --th-surface-2: #EEF1F5; --th-surface-3: #D3DAE2; --th-surface-ink: #1A2332;
  --th-border: #B3BCC7; --th-edge-navy: #1A2332; --th-border-strong: var(--th-edge-navy);
  --th-shadow-hard: 4px 4px 0 var(--th-border-strong); --th-shadow-soft: 2px 2px 0 rgb(26 35 50 / 0.12); --th-shadow-press: 1px 1px 0 var(--th-border-strong);
  --th-shadow-card: 0 1px 2px rgb(26 35 50 / 0.10), 0 6px 16px rgb(26 35 50 / 0.10); --th-card-line: #B3BCC7; --th-card-w: 1px;
  --th-text: #1A2332; --th-text-2: #45484E; --th-text-3: #5C5F65;
  --th-accent: #78C832; --th-accent-ink: #276806; --th-on-accent: #1A2332;
  --th-blue: #2F6F9F; --th-blue-ink: #2A6590; --th-focus: #2F6F9F;
  --th-ok: #266406; --th-ok-tint: #C8E8A3;
  --th-warn: #864E00; --th-warn-tint: #FBE0A6; --th-warn-mark: var(--th-warn);
  --th-bad: #B4261E; --th-bad-tint: #F9D3CD;
  --th-info: #245A82; --th-info-tint: #B9DCF2;
  --th-grad-eyebrow: linear-gradient(92deg, #276806, #2A6590); /* #2E780A was 4.38 on the page at 11.5px */
  --th-heat-1: #F2A766; --th-heat-2: #F0D374; --th-heat-3: #86C8C0; --th-heat-4: #86C953;
  --th-selected: linear-gradient(135deg, #245A82, #2E7D74); --th-on-selected: #FFFFFF; /* selected buttons: steel to teal */
  --th-field: #FFFFFF; --th-field-line: var(--th-border);
  /* Table heads and heading strips in the theme's own tones, never a navy slab (Dan, 2026-10-24). */
  --th-thead: linear-gradient(90deg, #245A82, #2F6F9F); --th-on-thead: #FFFFFF; --th-thead-edge: #A6E26A; /* steel, white letters, a lime rule */
  --th-strip: linear-gradient(90deg, #CFE0EE 0, transparent 85%); --th-strip-edge: #245A82; /* a cool steel wash */
  /* Hero tiles (council design A3): deep navy through steel to teal, a lime figure (4.05 on the teal end, large text),
     white labels (4.88 on the teal end). */
  --th-hero-tile: linear-gradient(135deg, #1E3A57 0%, #245A82 55%, #2E7D74 100%); --th-hero-num: #B8FF3C; --th-hero-ink-2: #FFFFFF;
}

/* ---------- Alabaster (warm). A Sherwin-Williams inspired set: Alabaster, Shoji White, Natural Linen, Urbane Bronze,
   Evergreen Fog, Cavern Clay and Shiitake, used as a direction and adjusted where it reads better (Dan, 2026-10-23).
   The hard edge is navy (the Designer, 2026-10-23); bronze is the one-line alternative (point --th-border-strong at
   --th-edge-bronze). Warning marks are clay, since the bronze-amber warn ink merges into the page as a fill. ---------- */
:root[data-theme="alabaster"] {
  /* Retuned toward tan and khaki, away from the peach cast of Shoji White and Natural Linen (Dan, 2026-10-24). */
  --th-bg: #EDEADB;
  --th-bg-wash: radial-gradient(620px 420px at 0% 0%, rgb(120 200 50 / 0.12), transparent 72%),
    radial-gradient(680px 440px at 100% 0%, rgb(222 214 184 / 0.70), transparent 72%);
  --th-surface: #FCFBF4; --th-surface-2: #E8E4D0; --th-surface-3: #DAD4BC; --th-surface-ink: #1A2332;
  --th-border: #C2BA9E; --th-edge-bronze: #55513F; --th-edge-navy: #1A2332; --th-border-strong: var(--th-edge-navy);
  --th-shadow-hard: 4px 4px 0 var(--th-border-strong); --th-shadow-soft: 2px 2px 0 rgb(76 68 40 / 0.18); --th-shadow-press: 1px 1px 0 var(--th-border-strong); --th-shadow-card: 4px 4px 3px rgb(85 81 63 / 0.25); --th-card-line: #25241B; --th-card-w: 1.5px; /* Alabaster's identity is the warm offset: a dark ink line and a softened offset (council design A4) */
  --th-text: #25241B; --th-text-2: #524E3B; --th-text-3: #5A5642;
  --th-muted-fill: #95978A; --th-shiitake: #A59E86; /* decorative only: inactive ticks, zebra edge, sparkline baseline */
  --th-accent: #78C832; --th-accent-ink: #2A7008; --th-on-accent: #25241B;
  --th-blue: #2F6F9F; --th-blue-ink: #2A6590; --th-focus: #2F6F9F;
  --th-clay: #9E7410; --th-clay-ink: #7A5410;
  --th-ok: #266406; --th-ok-tint: #CBE5A6;
  --th-warn: #7A5200; --th-warn-tint: #F0DB9A; --th-warn-mark: var(--th-clay);
  --th-bad: #A8301F; --th-bad-tint: #F2CDBB;
  --th-info: #245A82; --th-info-tint: #B6D7EA;
  --th-grad-eyebrow: linear-gradient(92deg, #2A7008, #2A6590);
  --th-heat-1: #E3A25B; --th-heat-2: #E6CF72; --th-heat-3: #8CC5C0; --th-heat-4: #8CCB5E;
  --th-selected: linear-gradient(135deg, #1F5F73, #2C7A5E); --th-on-selected: #FFFFFF; /* selected buttons: teal, the complement of tan */
  --th-field: #FFFFFF; --th-field-line: var(--th-border);
  --th-thead: linear-gradient(90deg, #5E5236, #7A6A45); --th-on-thead: #FFFFFF; --th-thead-edge: #E3C77A; /* bronze to olive, white letters, a gold rule */
  --th-strip: linear-gradient(90deg, #E6D7AE 0, transparent 85%); --th-strip-edge: #6E5A2E; /* a warm gold wash */
  /* Hero tiles: bronze through olive to evergreen, a pale lime figure (4.89 on the olive), warm linen labels (5.23). */
  --th-hero-tile: linear-gradient(135deg, #4A4632 0%, #6E5F3C 60%, #2C6B52 100%); --th-hero-num: #C9F27A; --th-hero-ink-2: #F2EBD3;
}

/* ---------- Bright: white page and white panels; structure comes from edges and the planes inside a panel. No wash. */
:root[data-theme="bright"] {
  --th-bg: #FFFFFF;
  --th-bg-wash: none;
  --th-surface: #FFFFFF; --th-surface-2: #F1F5FB; --th-surface-3: #E1E5DB; --th-surface-ink: #1A2332;
  --th-border: #B8BFB0; --th-edge-navy: #1A2332; --th-border-strong: var(--th-edge-navy);
  --th-shadow-hard: 4px 4px 0 var(--th-border-strong); --th-shadow-soft: 2px 2px 0 rgb(26 35 50 / 0.14); --th-shadow-press: 1px 1px 0 var(--th-border-strong); --th-shadow-card: none; --th-card-line: #1A2332; --th-card-w: 1px; /* Bright's identity is the crisp edge: a 1px navy line, no shadow (council design A4) */
  --th-text: #1A2332; --th-text-2: #3F4A59; --th-text-3: #566171;
  --th-accent: #78C832; --th-accent-ink: #2A7008; --th-on-accent: #1A2332;
  --th-blue: #2F6F9F; --th-blue-ink: #2A6590; --th-focus: #2F6F9F;
  --th-ok: #266406; --th-ok-tint: #C8E8A3;
  --th-warn: #8F5400; --th-warn-tint: #FBE0A6; --th-warn-mark: var(--th-warn);
  --th-bad: #B01F18; --th-bad-tint: #F9D3CD;
  --th-info: #245A82; --th-info-tint: #B9DCF2;
  --th-grad-eyebrow: linear-gradient(92deg, #2A7008, #2A6590);
  --th-heat-1: #F2A766; --th-heat-2: #F0D374; --th-heat-3: #86C8C0; --th-heat-4: #86C953;
  /* Bright's own selected fill: cobalt to sky, so it reads apart from Light's steel to teal (white 8.18 and 4.66). */
  --th-selected: linear-gradient(135deg, #1D4F8F, #2A7AB0); --th-on-selected: #FFFFFF;
  --th-field: #FFFFFF; --th-field-line: var(--th-border);
  --th-thead: linear-gradient(90deg, #1D4F8F, #2A7AB0); --th-on-thead: #FFFFFF; --th-thead-edge: #A6E26A; /* cobalt to sky, white letters, a lime rule */
  --th-strip: linear-gradient(90deg, #D5EDC0 0, transparent 85%); --th-strip-edge: #2E7A0A; /* a crisp brand-green wash */
  /* Hero tiles: cobalt to sky, a lime figure (3.86 on sky, large text only), white labels (4.66). */
  --th-hero-tile: linear-gradient(135deg, #1D4F8F 0%, #2A7AB0 100%); --th-hero-num: #B8FF3C; --th-hero-ink-2: #FFFFFF;
}

/* ---------- Dark: the live charcoal (admin-dark.css), lime as the hard edge, bright sky blue for text, links and rings
   (Dan, 2026-10-24: more contrast, brighter blues; Total Home blue #29A9E1 for fills and edges, #6CC7F5 as text). */
:root[data-theme="dark"] {
  --th-bg: #17181B;
  --th-bg-wash: radial-gradient(620px 420px at 0% 0%, rgb(120 200 50 / 0.08), transparent 72%),
    radial-gradient(680px 440px at 100% 0%, rgb(47 111 159 / 0.16), transparent 72%);
  --th-surface: #202226; --th-surface-2: #1B1C1F; --th-surface-3: #2C2F34; --th-surface-ink: #1A2332;
  --th-border: #35383E; --th-edge-lime: #78C832; --th-edge-navy: #1A2332; --th-border-strong: var(--th-edge-lime);
  --th-shadow-hard: 4px 4px 0 rgb(120 200 50 / 0.55); --th-shadow-soft: 2px 2px 0 rgb(0 0 0 / 0.5); --th-shadow-press: 1px 1px 0 rgb(120 200 50 / 0.55); --th-shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 6px 16px rgb(0 0 0 / 0.45); --th-card-line: #555962; --th-card-w: 1.5px;
  /* --th-text-3 lifted from #6F7076 (3.48 on the panel) to #8A8B91. */
  --th-text: #ECECEE; --th-text-2: #B0B1B6; --th-text-3: #9B9DA4;
  --th-accent: #78C832; --th-accent-ink: #8FDC4A; --th-on-accent: #1A2332;
  --th-blue: #29A9E1; /* Total Home blue: fills, rules, edges (5.96 on the panel) */ --th-blue-ink: #6CC7F5; --th-focus: #6CC7F5; /* sky: 8.44 on the panel */
  --th-ok: #8FDC4A; --th-ok-tint: #1C2E10;
  --th-warn: #FFB648; --th-warn-tint: #3A2C10; --th-warn-mark: var(--th-warn);
  --th-bad: #FF5D6C; --th-bad-tint: #3A1A1E;
  --th-info: #6CC7F5; --th-info-tint: #12344A;
  --th-grad-eyebrow: linear-gradient(92deg, #8FDC4A, #6CC7F5);
  --th-heat-1: #D99A5A; --th-heat-2: #D7BE62; --th-heat-3: #78B9B0; --th-heat-4: #82C152; /* light cells, navy labels, on the charcoal */
  --th-selected: linear-gradient(135deg, #3FD4FF, #B8FF3C); --th-on-selected: #1A2332; /* neon cyan to lime, navy text */
  /* Fields: a well below the panel, a 3.62 line, sky focus. */
  --th-field: #141518; --th-field-line: #6A6F79;
  --th-thead: linear-gradient(90deg, #1E3A57, #245A82); --th-on-thead: #FFFFFF; --th-thead-edge: #6CC7F5; /* deep navy to steel, a sky rule */
  --th-strip: linear-gradient(90deg, #23364A 0, transparent 85%); --th-strip-edge: #6CC7F5;
  /* Hero tiles: deep navy to steel, a lime figure (6.09 on steel), white labels (7.34). */
  --th-hero-tile: linear-gradient(135deg, #1E3A57, #245A82); --th-hero-num: #B8FF3C; --th-hero-ink-2: #FFFFFF;
}

/* ---------- The same in every theme ---------- */
:root {
  --th-r: 0;
  --th-on-ink: #FFFFFF; --th-on-ink-2: #B9C2D0; /* on the navy --th-surface-ink tile; the hero tile tokens are per theme */
  /* Type scale (council design A2). Caps labels take weight 700 and --th-caps-track. */
  --th-fs-cap: 11.5px; --th-fs-sm: 13px; --th-fs-body: 15px; --th-fs-lead: 17px;
  --th-fs-h3: 20px; --th-fs-h2: 26px; --th-fs-hero: clamp(56px, 14vw, 84px); --th-caps-track: .08em;
  /* Every bar fill: green to steel, lightness falling evenly (OKLab). The explicit stops are the fallback. */
  --th-grad-bar: linear-gradient(90deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%);
  --th-grad-bar-neg: linear-gradient(90deg, #B4261E, #E8685F);
  /* The header band: navy, shifting toward steel. White on its lightest end is 9.50. */
  --th-grad-band: linear-gradient(92deg, #1A2332, #22374D 55%, #24486A);
  color-scheme: light;
}
/* The bar gradient standing up (the Cohorts columns), per theme: the same stops as --th-grad-bar. */
:root { --th-grad-bar-v: linear-gradient(0deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%);
  /* The Pathway calendar's topic palette (council design C), so stage hues mean stages only. Each topic has its own
     label ink: navy on gold, teal and sand; white on clay and slate (slate darkened from #6B7A8F, 4.37, to #65748A, 4.75). */
  --th-stage-3: #5A4A96; /* the Stage 3 and advanced hue, as the Pathway Editor's violet */
  --th-topic-1: #C9A227; --th-topic-2: #8C6A5A; --th-topic-3: #2E9C8F; --th-topic-4: #65748A; --th-topic-5: #D8C7A0;
  --th-topic-ink-1: #1A2332; --th-topic-ink-2: #FFFFFF; --th-topic-ink-3: #1A2332; --th-topic-ink-4: #FFFFFF; --th-topic-ink-5: #1A2332; }
@supports (background: linear-gradient(in oklab 90deg, red, blue)) {
  :root { --th-grad-bar: linear-gradient(in oklab 90deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%); }
}
:root[data-theme="dark"] { color-scheme: dark; }
/* Dark bars: lime to neon cyan so a bar stands off the charcoal card (Dan, 2026-10-24). */
:root[data-theme="dark"] { --th-grad-bar: linear-gradient(90deg, #B8FF3C 0%, #8BEA6E 33%, #5EDDB0 66%, #3FD4FF 100%);
  --th-grad-bar-v: linear-gradient(0deg, #B8FF3C 0%, #8BEA6E 33%, #5EDDB0 66%, #3FD4FF 100%);
  --th-stage-3: #C77DFF;
  --th-topic-1: #E3C25A; --th-topic-2: #B08E7E; --th-topic-3: #5CC4B6; --th-topic-4: #9AA8BA; --th-topic-5: #C9B98F;
  --th-topic-ink-1: #1A2332; --th-topic-ink-2: #1A2332; --th-topic-ink-3: #1A2332; --th-topic-ink-4: #1A2332; --th-topic-ink-5: #1A2332; }

/* ---------- Part 2: the University pages' variables ---------- */
:root[data-theme] {
  color-scheme: light;
  --r: 0;
  /* Square corners everywhere (council design fixes A1): the page radius tokens all read 0. */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; --radius-card: 0;
  --ink: var(--th-text); --ink-soft: var(--th-text); --ink-band: var(--th-surface-ink);
  --text: var(--th-text); --text-muted: var(--th-text-2); --muted: var(--th-text-2); --text-subtle: var(--th-text-3);
  --surface: var(--th-bg); --surface-raised: var(--th-surface-2); --raised: var(--th-surface-2); --surface-soft: var(--th-surface-2);
  --surface-white: var(--th-surface); --white: var(--th-surface);
  --hairline: var(--th-border); --line: var(--th-border);
  --hairline-soft: color-mix(in srgb, var(--th-border) 60%, var(--th-surface)); --line-soft: color-mix(in srgb, var(--th-border) 60%, var(--th-surface));
  --green-dark: var(--th-accent-ink); --edit-green-dark: var(--th-accent-ink);
  --blue-dark: var(--th-blue-ink); --totalhome-blue-dark: var(--th-blue-ink); --edit-blue-dark: var(--th-blue-ink);
  --accent-steel-text: var(--th-blue-ink); --accent-steel-focus: var(--th-focus);
  --rose: var(--th-bad); --edit-rose: var(--th-bad);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.08); --shadow-md: var(--th-shadow-card);
}
:root[data-theme="dark"] { color-scheme: dark; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-md: 0 4px 14px rgb(0 0 0 / 0.5); }
/* Cards: the theme's line at the theme's width (--th-card-w) and its card shadow, so they stand off the page.
   The .card left accent keeps its own width and colour; only its other three sides take the line. */
:root[data-theme] :is(.kpi, .panel) { border: var(--th-card-w) solid var(--th-card-line); box-shadow: var(--th-shadow-card); }
/* Safety net for the controls a page still rounds with a literal (A1). Data markers and spinners keep their 50% circle:
   they are not in this list (ramp-board.css .rb-pace and .rb-grad, the Designer's .spin, My Page's loader). */
:root[data-theme] :is(button, input, select, textarea, .chip, .pill, .badge, .btn, .tag, kbd) { border-radius: 0; }
:root[data-theme] .card { border-top: var(--th-card-w) solid var(--th-card-line); border-right: var(--th-card-w) solid var(--th-card-line); border-bottom: var(--th-card-w) solid var(--th-card-line); box-shadow: var(--th-shadow-card); }

/* ---------- Part 3: surfaces painted with fixed colours ---------- */
/* The header band and footer: navy shifting toward steel, the same in every theme (white on its lightest stop is 9.5). */
:root[data-theme] :is(.page-header, header.top, .page-footer) { background: var(--th-grad-band); }
/* The wash covers the first screen and scrolls away with the page (a fixed wash repeats in tall captures). */
:root[data-theme] body { background-color: var(--th-bg); background-image: var(--th-bg-wash); background-repeat: no-repeat; background-size: 100% 100vh; background-position: 0 0; background-attachment: scroll; color: var(--th-text); }

/* Fields */
:root[data-theme] main :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]) { background: var(--th-field); color: var(--th-text); border-color: var(--th-field-line); }
:root[data-theme] main :is(input, select, textarea):focus { background: var(--th-field); border-color: var(--th-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--th-focus) 45%, transparent); }
:root[data-theme] :is(input, textarea)::placeholder { color: var(--th-text-3); }

/* The edit pages (Certification Designer and Pathway Editor): panels, cards, notices, chips */
:root[data-theme] :is(.panel, aside.panel, .stage-card, .card, .card .card, .card.rule, button.item, .bar, .panel > .bar.pw-save) { background: var(--th-surface); color: var(--th-text); }
:root[data-theme] :is(.cal-row.head, .whytext) { background: var(--th-surface-2); color: var(--th-text); }
/* The open certification in the Designer list keeps the one selected fill (the panel rule above outranks the shared selected rule). */
:root[data-theme] :is(.panel, aside, main, body) button.item.on { background: var(--th-selected); color: var(--th-on-selected); border-color: transparent; }
:root[data-theme] :is(.card.grad, .grad-line, .cal-zone.z1) { background: var(--th-ok-tint); color: var(--th-text); }
:root[data-theme] :is(.ok, .note.ok, .chip.published, .chip.req) { background: var(--th-ok-tint); color: var(--th-text); }
:root[data-theme] :is(.mockbar, .note, .note.warn, .chip.lock, .betabadge) { background: var(--th-warn-tint); color: var(--th-text); }
:root[data-theme] .problems { background: var(--th-bad-tint); color: var(--th-text); }
/* In review is the info group: blue, so it reads apart from draft grey and the amber warnings (A8). */
:root[data-theme] .chip.in_review { background: var(--th-info-tint); color: var(--th-text); border-color: var(--th-info); }
:root[data-theme] :is(.aibar, .cal-zone.z0) { background: var(--th-info-tint); color: var(--th-text); border-color: var(--th-border); }
:root[data-theme] :is(.chip.draft, .code.none) { background: var(--th-surface-3); color: var(--th-text); }
:root[data-theme] .btn.sec { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text); }
:root[data-theme] button.item:not(.on) { border-left-color: var(--th-border); }
:root[data-theme] .btn.sec:hover { background: var(--th-surface-2); border-color: var(--th-blue); }
:root[data-theme] .cal-bar.opt { background: var(--th-surface); color: var(--th-text); }
:root[data-theme] .group h4 { color: var(--th-blue-ink); border-bottom-color: var(--th-border); }
:root[data-theme] #editor h4 { color: var(--th-accent-ink); }
/* Heading strips (Compare classes and the edit pages): the theme's own well fading out, a theme edge, the words inset. */
:root[data-theme] :is(#editor h3, section.panel > h3, .stage-card h3) { background: var(--th-strip); color: var(--th-text); padding: 8px 12px; border-left: 4px solid var(--th-strip-edge); }
:root[data-theme] .stat.hard { color: var(--th-bad); }
:root[data-theme] .stat.easy { color: var(--th-warn); }
/* :where keeps this at zero weight, so a label styled as a button (Coming due All, the AI draft button) keeps its own text colour. */
:where(:root[data-theme]) label { color: var(--th-text-2); }

/* Pathway Editor stages: the tints are mixed into the panel, the rule stays a mark */
:root[data-theme] .pw-stage { --pw-tint: color-mix(in srgb, var(--pw-rule) 7%, var(--th-surface)); --pw-band: color-mix(in srgb, var(--pw-rule) 16%, var(--th-surface)); }
/* Dark stages: neon-bright, no glow (Dan, 2026-10-24); the band takes a stronger share of the stage colour. */
:root[data-theme="dark"] .pw-stage { --pw-rule: #B8FF3C; --pw-band: color-mix(in srgb, var(--pw-rule) 30%, var(--th-surface)); }
:root[data-theme="dark"] .pw-stage.pw-l2 { --pw-rule: #3FD4FF; }
:root[data-theme="dark"] .pw-stage:is(.pw-l3, .pw-adv) { --pw-rule: #C77DFF; }
:root[data-theme="dark"] .pw-stage-num { color: #1A2332; } /* navy on the neon disc: 8.0 or better on all three */
:root[data-theme="dark"] main .pw-ends-tag { color: #1A2332; } /* navy on the neon stage fill */
:root[data-theme="dark"] .pw-stage.pw-none { --pw-rule: #8A8B91; }
/* Course-code badges on Dark: a pale ink of each neon rule on its 24% tint (Dan, 2026-10-23: the violet was hard to read). */
:root[data-theme="dark"] .pw-stage { --pw-ink: #D4FF8A; }
:root[data-theme="dark"] .pw-stage.pw-l2 { --pw-ink: #A6ECFF; }
:root[data-theme="dark"] .pw-stage:is(.pw-l3, .pw-adv) { --pw-ink: #EBD4FF; }
/* Pathway Editor logic cards in Dark: deep amber stripes, a bright orange edge, pale orange ink (10.0:1 on the stripes). */
:root[data-theme="dark"] .pf-logic { --pf-a: #3A2814; --pf-b: #33230F; --pf-line: #FF9F43; --pf-ink: #FFD2A1; --pf-text: #ECECEE; --pf-chip: #1B1C1F; }
:root[data-theme="dark"] .pf-ib-logic { background: #3A2814; border-color: #FF9F43; color: #FFD2A1; }
/* KPI cards and type spines in Dark: a bright magenta edge, a deep plum card, pale pink ink; navy type on the bright spines. */
:root[data-theme="dark"] { --pk-line: #FF5DB1; --pk-ink: #FFB3D9; --pk-tint: #3A1A2B; --pk-spine: #FF5DB1; --pk-on-spine: #1A2332; --pf-spine: #FF9F43; --pf-on-spine: #1A2332; --pw-on-spine: #1A2332; }
:root[data-theme] .pw-stage .pw-items > .card.pw-kpi { background: var(--pk-tint); }
:root[data-theme="dark"] .pw-stage.pw-none { --pw-ink: var(--th-text); }
:root[data-theme] main .pw-stage-meta { color: var(--th-text-2); }
:root[data-theme] .uni-shell > .uni-nav.open .uni-menu { background: var(--th-surface-2); }

/* The University side menu (written by university-nav.js) */
:root[data-theme] .uni-nav { border-color: var(--th-border); scrollbar-color: var(--th-border) transparent;
  background: linear-gradient(var(--th-surface-2) 30%, transparent) top/100% 40px no-repeat local, linear-gradient(transparent, var(--th-surface-2) 70%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .2), transparent) top/100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .2), transparent) bottom/100% 12px no-repeat scroll, var(--th-surface-2); }
/* The rail under the menu runs the full height of the page, in the menu's own plane. */
:root[data-theme] .uni-shell::before { background: var(--th-surface-2); border-right-color: var(--th-border); }
/* Section eyebrows: the gradient strip behind each section title, restored at Dan's request (2026-10-24), drawn from
   the theme's planes (the well fading into the panel), with the coloured left edge and solid --th-text letters
   (12.0 or better on every stop, tested). */
:root[data-theme] .uni-nav h2 { background: linear-gradient(90deg, color-mix(in srgb, var(--th-surface-3) 82%, var(--th-text)), var(--th-surface)); color: var(--th-text); }
:root[data-theme] .uni-group, :root[data-theme] .uni-nav a.uni-feedback { border-top-color: var(--th-border); }
:root[data-theme] .uni-nav :is(a, button.uni-item, .uni-menu) { color: var(--th-text); }
:root[data-theme] .uni-nav :is(a, button.uni-item):hover { background: var(--th-surface-3); }
:root[data-theme] .uni-nav :is(a.on, button.uni-item.on), :root[data-theme] .uni-nav :is(a.on, button.uni-item.on):hover { background: var(--th-selected); color: var(--th-on-selected); }
:root[data-theme] .uni-nav a.uni-feedback { color: var(--th-blue-ink); }
/* Dark side menu: a deep charcoal rail a step below the page, white section titles over a charcoal strip, a neon
   edge per group, near-white items, the active item on a lime edge (Dan picked option A, 2026-10-24). */
:root[data-theme="dark"] .uni-nav { --nav-bg: #111214;
  background: linear-gradient(var(--nav-bg) 30%, transparent) top/100% 40px no-repeat local, linear-gradient(transparent, var(--nav-bg) 70%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .4), transparent) top/100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .4), transparent) bottom/100% 12px no-repeat scroll, var(--nav-bg); }
:root[data-theme="dark"] .uni-shell > .uni-nav.open .uni-menu { background: #111214; }
:root[data-theme="dark"] .uni-shell::before { background: #111214; }
:root[data-theme="dark"] .uni-nav h2 { background: linear-gradient(90deg, #26292E, #111214); color: #FFFFFF; }
/* Each rail section keeps its own edge colour (Dan, 2026-10-25); Dark uses neon versions. */
:root[data-theme="dark"] .uni-group { --k: #B8FF3C; }
:root[data-theme="dark"] .uni-group[data-tone="review"] { --k: #FF5D8F; }
:root[data-theme="dark"] .uni-group[data-tone="people"] { --k: #3FD4FF; }
:root[data-theme="dark"] .uni-group[data-tone="build"] { --k: #FFB23F; }
:root[data-theme="dark"] .uni-group[data-tone="insights"] { --k: #C77DFF; }
:root[data-theme="dark"] .uni-group[data-tone="admin"] { --k: #B0B1B6; }
:root[data-theme="dark"] .uni-nav :is(a, button.uni-item, .uni-menu) { color: #F2F2F4; }
:root[data-theme="dark"] .uni-nav :is(a, button.uni-item):hover { background: #1E2024; }
/* The selected item is one spec in every theme: a filled --th-selected block, set apart from the section strips. */
/* Light side menu: a cool blue-grey rail a clear step darker than the page, with a 1px edge (council design A4: the old
   rail measured 1.15:1 against its page). Navy items on #C4CDD8 are 10.4:1. */
:root[data-theme="light"] .uni-nav { --nav-bg: #C4CDD8; border-right: 1px solid #9AA6B4;
  background: linear-gradient(var(--nav-bg) 30%, transparent) top/100% 40px no-repeat local, linear-gradient(transparent, var(--nav-bg) 70%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .2), transparent) top/100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .2), transparent) bottom/100% 12px no-repeat scroll, var(--nav-bg); }
:root[data-theme="light"] .uni-shell::before, :root[data-theme="light"] .uni-shell > .uni-nav.open .uni-menu { background: #C4CDD8; border-right: 1px solid #9AA6B4; }
:root[data-theme="light"] .uni-nav h2 { background: linear-gradient(90deg, #AEB9C6, #F6F8FA); color: #1A2332; }
:root[data-theme="light"] :is(.uni-group, .uni-nav a.uni-feedback) { border-top-color: #A9B4C1; }
:root[data-theme="light"] .uni-nav :is(a, button.uni-item):hover { background: #B6C0CC; }
/* Bright side menu: a cool white rail and neutral strips, set off by a 2px navy edge (council design A4: the rail had
   no edge at all). */
:root[data-theme="bright"] .uni-nav { --nav-bg: #F1F5FB; border-right: 2px solid #1A2332;
  background: linear-gradient(var(--nav-bg) 30%, transparent) top/100% 40px no-repeat local, linear-gradient(transparent, var(--nav-bg) 70%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .12), transparent) top/100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .12), transparent) bottom/100% 12px no-repeat scroll, var(--nav-bg); }
:root[data-theme="bright"] .uni-shell::before, :root[data-theme="bright"] .uni-shell > .uni-nav.open .uni-menu { background: #F1F5FB; border-right: 2px solid #1A2332; }
:root[data-theme="bright"] .uni-nav h2 { background: linear-gradient(90deg, #DCE2EA, #F1F5FB); color: #1A2332; }
:root[data-theme="bright"] :is(.uni-group, .uni-nav a.uni-feedback) { border-top-color: #D9DFE8; }
:root[data-theme="bright"] .uni-nav :is(a, button.uni-item):hover { background: #E3E9F1; }
/* Alabaster side menu: a warm linen rail a step below the page, a 1px tan edge (council design A4). */
:root[data-theme="alabaster"] .uni-nav { --nav-bg: #E2DCC4; border-right: 1px solid #C2BA9E;
  background: linear-gradient(var(--nav-bg) 30%, transparent) top/100% 40px no-repeat local, linear-gradient(transparent, var(--nav-bg) 70%) bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .14), transparent) top/100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .14), transparent) bottom/100% 12px no-repeat scroll, var(--nav-bg); }
:root[data-theme="alabaster"] .uni-shell::before, :root[data-theme="alabaster"] .uni-shell > .uni-nav.open .uni-menu { background: #E2DCC4; border-right: 1px solid #C2BA9E; }
:root[data-theme="alabaster"] .uni-nav :is(a, button.uni-item):hover { background: #D6CFB3; }

/* Manager portal and My path */
:root[data-theme] .msg-info { background: var(--th-info-tint); color: var(--th-info); }
:root[data-theme] :is(.queue-item.shadow .type-chip, .status-pending, .cert-card.stage-1 .stage-chip) { background: var(--th-info-tint); color: var(--th-info); }
:root[data-theme] .q-option.selected { background: var(--th-info-tint); }
:root[data-theme] .nh-risk, :root[data-theme] .nh-count { background: var(--th-bad-tint); color: var(--th-text); }
:root[data-theme] .nh-watch { background: var(--th-warn-tint); color: var(--th-text); }
:root[data-theme] table.data tbody tr:hover { background: var(--th-surface-2); }
/* Table heads: a soft gradient in the theme's own tones with a theme rule under it, never a navy slab (Dan, 2026-10-24). */
:root[data-theme] table.data thead, :root[data-theme] table.data thead th { background: var(--th-thead); color: var(--th-on-thead); }
:root[data-theme] table.data thead th { box-shadow: inset 0 -2px 0 var(--th-thead-edge); }
:root[data-theme] table.data thead :is(.th-sort, .pg-sort):focus-visible { outline-color: var(--th-focus); }
/* Hero tiles (council design A3, B4): the theme's --th-hero-tile gradient with the hard 4px offset, which belongs to the
   hero only. Labels on the tile take --th-hero-ink-2, which clears 4.5 on the tile's lightest stop. */
:root[data-theme] :is(.rb-hero, .rh-hero, .rv-hero) { background: var(--th-hero-tile); color: var(--th-on-ink); box-shadow: var(--th-shadow-hard);
  --th-on-ink-2: var(--th-hero-ink-2); --rb-on-ink-2: var(--th-hero-ink-2); }
/* Course codes (B5): a quiet plate on the panel, never a navy slab. Codes inside a Pathway stage keep the stage tint. */
:root[data-theme] :is(.code, .mp-code) { background: var(--th-surface-2); color: var(--th-text); border: 1px solid var(--th-border); }

/* Inline styles written by the page scripts (Cohorts, Notes and the rest) */
:root[data-theme] [style*="background:#fff"], :root[data-theme] [style*="background: #fff"],
:root[data-theme] [style*="background:#FFF"] { background: var(--th-surface) !important; color: var(--th-text); }
:root[data-theme] [style*="background:#FAFBF7"], :root[data-theme] [style*="background:#fafbf7"], :root[data-theme] [style*="background:var(--surface-soft"] { background: var(--th-surface-2) !important; }
:root[data-theme] [style*="color:#8A1F2B"], :root[data-theme] [style*="color:#8a1f2b"] { color: var(--th-bad) !important; }
:root[data-theme] [style*="color:#2F6A0C"], :root[data-theme] [style*="color:#2f6a0c"] { color: var(--th-ok) !important; }
:root[data-theme] [style*="color:#5B6576"], :root[data-theme] [style*="color:#5b6576"] { color: var(--th-text-2) !important; }
:root[data-theme] table.att-grid thead th:first-child { background: var(--th-thead); box-shadow: inset -1px 0 0 var(--th-border), inset 0 -2px 0 var(--th-thead-edge); }
/* My path chips (index.html keeps its own lines, so the Ramp board branch rewrites them cleanly) */
:root[data-theme] .mp-chip.ok { background: var(--th-ok-tint); color: var(--th-ok); }
:root[data-theme] .mp-chip.lock { background: var(--th-warn-tint); color: var(--th-warn); }
:root[data-theme] .mp-chip.late { background: var(--th-bad-tint); color: var(--th-bad); border-color: var(--th-bad); }

/* Selected buttons and chips: a gradient in the theme's complementary colour, never solid black (Dan, 2026-10-24). */
:root[data-theme] :is(.pg-seg button[aria-pressed="true"], .chip.active, .nh-filters button[aria-pressed="true"], .tabs .btn.on, .btn.on, .rv-seg button[aria-pressed="true"]) {
  background: var(--th-selected); color: var(--th-on-selected); border-color: transparent; text-shadow: none; }

/* One "selected" look (council design fixes A5): every selected, pressed, current or checked control is the theme's
   --th-selected fill with its own text colour. Matrix cells and bar segments are data, where pressed means assigned,
   so they keep their state colours. */
:root[data-theme] :is(.on, [aria-pressed="true"]:not(.mx-cell, .mx-seg), [aria-current="page"], [aria-selected="true"], .tabs .active, .dsh-on, button.item.on, .rb-due-g:has(:checked), .seg .active) {
  background: var(--th-selected); color: var(--th-on-selected); border-color: transparent; box-shadow: none; }
.rb-due-all:has(:checked) span { color: inherit; } /* MGR-08 */
/* Text inside a selected tile or card takes the selected text colour; chips keep their own fill and ink. */
:root[data-theme] :is(button.kpi[aria-pressed="true"], .dsh-card.dsh-on, button.item.on, .rb-due-g:has(:checked), [aria-selected="true"]) :not([class*="chip"]):not([class*="chip"] *) { color: inherit; }

/* Ramp timeline marks in Light and Bright: a brighter green and orange than the text inks (Dan, 2026-10-25).
   Marks only, never text: #34A02C is 3.38 and #D96A00 3.49 on the white card. */
:root[data-theme="light"], :root[data-theme="bright"] { --th-mark-pace: #34A02C; --th-mark-help: #D96A00; }