/* 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, #8DB3D6 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"] {
  /* Cool neutral grey page with white cards lifted by a soft shadow (Dan, 2026-10-24, after a trading-dashboard reference). */
  --th-bg: #E5E5E4;
  --th-bg-wash: radial-gradient(680px 440px at 100% 0%, rgb(47 111 159 / 0.04), transparent 72%);
  --th-surface: #FFFFFF; --th-surface-2: #F4F4F3; --th-surface-3: #DEDEDC; --th-surface-ink: #1A2332;
  --th-border: #CFCFCC; --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: 4px 4px 3px rgb(26 35 50 / 0.22); --th-card-line: #1A2332; /* option 3, as Alabaster */
  --th-text: #1A2332; --th-text-2: #45484E; --th-text-3: #5C5F65;
  --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: #B4261E; --th-bad-tint: #F9D3CD;
  --th-info: #245A82; --th-info-tint: #B9DCF2;
  --th-grad-eyebrow: linear-gradient(92deg, #2A7008, #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 */
}

/* ---------- 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; /* dark ink line, softened offset (Dan picked option 3, 2026-10-24) */
  --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 */
}

/* ---------- 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: #F1F3EE; --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: 4px 4px 3px rgb(26 35 50 / 0.28); --th-card-line: #1A2332; /* option 3, as Alabaster */
  --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;
  --th-selected: linear-gradient(135deg, #245A82, #2E7D74); --th-on-selected: #FFFFFF;
}

/* ---------- Dark: the live charcoal (admin-dark.css), lime as the hard edge, light steel for text, links and rings. */
: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: #5A8F2E; --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-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: #5AA8E8; /* steel lifted for 3:1 on the charcoal panel (fills, rules, edges only) */ --th-blue-ink: #8DB3D6; --th-focus: #8DB3D6;
  --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: #8DB3D6; --th-info-tint: #1D3342;
  --th-grad-eyebrow: linear-gradient(92deg, #8FDC4A, #8DB3D6);
  --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 */
}

/* ---------- The same in every theme ---------- */
:root {
  --th-r: 0;
  --th-on-ink: #FFFFFF; --th-on-ink-2: #B9C2D0; --th-hero-num: #78C832; /* on the navy --th-surface-ink tile */
  /* 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;
}
@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%); }

/* ---------- Part 2: the University pages' variables ---------- */
:root[data-theme] {
  color-scheme: light;
  --r: 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: a darker 1.5px line and a soft lift, so they stand off the page (Dan, 2026-10-24, after two references).
   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: 1.5px solid var(--th-card-line); box-shadow: var(--th-shadow-card); }
:root[data-theme] .card { border-top: 1.5px solid var(--th-card-line); border-right: 1.5px solid var(--th-card-line); border-bottom: 1.5px 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-surface); color: var(--th-text); border-color: var(--th-border); }
:root[data-theme] main :is(input, select, textarea):focus { background: var(--th-surface); border-color: var(--th-focus); }
: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); }
:root[data-theme] :is(.card.grad, button.item.on, .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.in_review, .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); }
: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); }
:root[data-theme] :is(#editor h3, section.panel > h3, .stage-card h3) { background: linear-gradient(90deg, var(--th-info-tint) 0, transparent 85%); color: var(--th-text); }
:root[data-theme] #editor h3:nth-of-type(2n) { background: linear-gradient(90deg, var(--th-warn-tint) 0, transparent 85%); }
:root[data-theme] #editor h3:nth-of-type(3n) { background: linear-gradient(90deg, var(--th-ok-tint) 0, transparent 85%); }
:root[data-theme] #editor h3:nth-of-type(5n) { background: linear-gradient(90deg, var(--th-surface-2) 0, transparent 85%); }
:root[data-theme] .stat.hard { color: var(--th-bad); }
:root[data-theme] .stat.easy { color: var(--th-warn); }
: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; }
: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; }
: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; }
:root[data-theme="dark"] .uni-nav :is(a.on, button.uni-item.on), :root[data-theme="dark"] .uni-nav :is(a.on, button.uni-item.on):hover { background: #24272D; color: #FFFFFF; box-shadow: inset 4px 0 0 #B8FF3C; }

/* Manager portal and My path */
:root[data-theme] button.kpi[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--th-text); border-color: var(--th-text); }
: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); }

/* 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-surface-ink); }
/* 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) {
  background: var(--th-selected); color: var(--th-on-selected); border-color: transparent; text-shadow: none; }