/* ==========================================================================
   TriAthy RMS Console — stylesheet (A56 W4 skin)
   --------------------------------------------------------------------------
   Reconciled against Arthur's approved concept,
   scratch/console-skin/A50_CONSOLE_LOOKFEEL_CONCEPT.html (sha256 413976ea…).
   Where the two differed, the concept wins: its palette, its accent triple, its
   dark values, its card density and its top-bar composition are what he signed
   off visually. What the concept does not cover — the price-tier ramp, RAG, the
   race bars, the brand marks — is W4's own, and is built in the concept's idiom.

   Structure: [1] tokens  [2] dark  [3] event accents  [4] shell  [5] cards
              [6] tables  [7] tiers & RAG  [8] charts  [9] forms  [10] responsive

   THE RULE THAT SHAPES THE FILE (concept, restated by Arthur):
   switching event recolours the ACCENT TRIPLE ONLY — --acc, --acc2, --accbg,
   --accink. The neutral frame (--bg, --panel, --sidebar, --line, --ink, --muted)
   never moves. A brand tints what the console is doing; it never repaints the
   console itself.

   Tier colours live HERE (--t1..--t6). PHP emits the token `t3` and never picks
   a colour, which is what makes "same tier = same colour on every screen" true
   by construction. Inline SVG paints with var(--t3), so charts follow the dark
   toggle with no PHP involved.
   ========================================================================== */

/* ---- [1] tokens — light is the default (concept :root) ------------------- */
:root {
  --bg:#eef1f5;
  --panel:#ffffff;
  --panel2:#f7f9fb;
  --ink:#1c2733;
  --muted:#67788a;
  --line:#dde4ec;
  --shadow:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --good:#178a50; --bad:#c0392b; --warn:#8a6d00;
  --sidebar:#141c26; --sidebar-ink:#aeb9c6; --sidebar-active:#ffffff;

  /* accents — the event switcher rewrites these four and nothing else */
  --acc:#3b4d63; --acc2:#7c8fa5; --accbg:#eef2f6; --accink:#3b4d63;

  /* derived from the concept's palette, for surfaces it does not name */
  --panel3:#eef1f6;                 /* table chips, quiet fills */
  --ink2:#3f5164;

  /* semantic tints: rgba over the panel — the concept's own .delta technique,
     so one value reads correctly in both themes */
  --good-bg:rgba(23,138,80,.10);
  --bad-bg:rgba(192,57,43,.09);
  --warn-bg:rgba(138,109,0,.12);
  --info:#2a5f9e; --info-bg:rgba(42,95,158,.10);
  /* Campaign markers (backlog #14.1). A marker is a margin note, so it recedes by
     DESATURATION, not by going faint: --marker-ink is 5.46:1 on --panel (better than
     --muted's 4.54:1, which only just clears AA at 9px) and --marker-line is 3.63:1,
     over the 3:1 floor for a graphic. Measured, not eyeballed — A61 shipped a nudge
     at 1.46:1 because nobody computed it. */
  --marker-ink:#5b6b7d; --marker-line:#6f88ab;

  /* price-tier ramp — ordinal blue → rose, W4's own. Deliberately NOT
     green/amber/red, so a tier badge is never mistaken for a health signal. */
  --t1:#0f6fa8; --t2:#3f5fb8; --t3:#6a4fb0; --t4:#94429c; --t5:#b23c78; --t6:#c23f56;
  --tx:#8a94a6;

  /* brand paints for charts (a navy line must survive the dark toggle) */
  --brand-triathy:#13265c; --brand-swimathy:#00a6cc;
  --series-1:#13265c; --series-2:#00a6cc; --series-3:#c9a300; --series-4:#c0392b;
  --series-5:#178a50; --series-6:#8e44ad; --series-7:#7f8c8d;

  /* county-map heat ramp (Insights P1.5). Sequential, single hue, five steps —
     the most a reader can tell apart without studying the legend. --heat-0 is
     "no entries", which is a shade of nothing, not the pale end of the ramp.
     --heat-ink paints steps 1-3, --heat-ink-on paints steps 4-5; both are
     tokens because the dark theme inverts which end needs which. */
  --heat-0:#eef1f6; --heat-1:#d3e2f2; --heat-2:#a5c4e4;
  --heat-3:#6f9dd0; --heat-4:#3a6fae; --heat-5:#13265c;
  --heat-ink:#13265c; --heat-ink-on:#ffffff;


  --radius:12px;
  --radius-sm:7px;
  --rail-w:216px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---- [2] dark (concept html[data-theme="dark"]) -------------------------- */
/* Explicit choice only: the brief is "light default + dark toggle", so an unset
   system preference stays light — exactly as the concept behaves. */
html[data-theme="dark"] {
  --bg:#10161d;
  --panel:#1a222c;
  --panel2:#151d26;
  --ink:#e8edf3;
  --muted:#8fa0b2;
  --line:#2a3543;
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --sidebar:#0b1117; --sidebar-ink:#8fa0b2;
  --accbg:#1e2a38;

  --panel3:#212b38;
  --ink2:#c3ccdd;

  /* the concept leaves --good/--bad/--warn alone; these lift only enough to
     stay legible as TEXT on a dark panel, and the rgba tints still work */
  --good:#54c79a; --bad:#f08585; --warn:#e0ac4a;
  --good-bg:rgba(84,199,154,.13); --bad-bg:rgba(240,133,133,.13); --warn-bg:rgba(224,172,74,.14);
  --info:#7aaaf0; --info-bg:rgba(122,170,240,.13);
  --marker-ink:#93a3b6; --marker-line:#6288ad;   /* 6.23:1 and 4.31:1 on the dark panel */

  --t1:#4aa8dd; --t2:#7b90e2; --t3:#a184dd; --t4:#cc77cf; --t5:#e072a4; --t6:#ea7d82;
  --tx:#6f7a90;
  --brand-triathy:#8fa6e0; --brand-swimathy:#3fd0f0;
  --series-1:#8fa6e0; --series-2:#3fd0f0; --series-3:#e6c243; --series-4:#f5865f;
  --series-5:#6cc98b; --series-6:#b98ade; --series-7:#a3adbd;

  /* the ramp lifts on dark, and the ink ends swap: the bright end is now the
     one that needs dark text on it. */
  --heat-0:#222c38; --heat-1:#1f3a52; --heat-2:#24557a;
  --heat-3:#245f8a; --heat-4:#3f9fd0; --heat-5:#6fd0f0;
  --heat-ink:#dbe6f2; --heat-ink-on:#0e1720;
}

/* ---- [3] event accents (concept html[data-event=…]) ---------------------- */
html[data-event="triathy"]  { --acc:#13265c; --acc2:#FFD400; --accbg:#fffbe6; --accink:#13265c }
html[data-event="swimathy"] { --acc:#0d2c6b; --acc2:#00bbe7; --accbg:#e9f8fd; --accink:#0d2c6b }
html[data-theme="dark"][data-event="triathy"]  { --accbg:#242b18; --accink:#e6c243 }
html[data-theme="dark"][data-event="swimathy"] { --accbg:#122a38; --accink:#3fd0f0 }
html[data-theme="dark"]:not([data-event="triathy"]):not([data-event="swimathy"]) { --accink:#9fb0c4 }

/* ---- [4] shell ----------------------------------------------------------- */
* { box-sizing:border-box; margin:0; padding:0 }
body {
  font-family:var(--font); font-size:13.5px; line-height:1.5;
  background:var(--bg); color:var(--ink);
  display:grid; grid-template-columns:var(--rail-w) minmax(0, 1fr); min-height:100vh;
  transition:background .25s;
  -webkit-font-smoothing:antialiased;
}
body.bare { grid-template-columns:1fr }               /* login */
h1, h2, h3, .navlogo { letter-spacing:.02em }
h1 { font-size:17px; font-weight:800 }
h2 { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin:20px 0 9px }
h3 { font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); font-weight:800; margin:14px 0 8px }
a { color:var(--accink); text-decoration-thickness:1px; text-underline-offset:2px }
.mono, code { font-family:var(--mono); font-size:.92em }
.small { font-size:11.5px }
.muted, .meta, .hint { color:var(--muted) }
.meta { font-size:11.5px }
.num { font-variant-numeric:tabular-nums }

/* sidebar */
nav.rail {
  background:var(--sidebar); color:var(--sidebar-ink);
  padding:18px 0; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
nav.rail .navlogo { color:#fff; font-weight:900; font-size:15px; padding:0 18px 4px; text-transform:uppercase; text-decoration:none; display:block }
nav.rail .navlogo span { color:var(--acc2) }
nav.rail .navsub { font-size:10px; color:var(--sidebar-ink); padding:0 18px 16px; text-transform:uppercase; letter-spacing:1.6px }
nav.rail a.item {
  display:flex; align-items:center; gap:10px; padding:10px 18px;
  color:var(--sidebar-ink); text-decoration:none; font-size:13.5px; font-weight:600;
  border-left:3px solid transparent;
}
nav.rail a.item:hover { color:#fff }
/* the ACTIVE item takes a neutral wash and an accent EDGE — the frame itself
   is never repainted in the brand colour (concept `nav a.on`) */
nav.rail a.item.on { color:var(--sidebar-active); background:rgba(255,255,255,.06); border-left-color:var(--acc2) }
nav.rail a.item .ic { width:17px; height:17px; flex:0 0 17px; opacity:.9 }
nav.rail a.item.on .ic { opacity:1 }
nav.rail .navfoot { margin-top:auto; padding:14px 18px; font-size:10.5px; line-height:1.6; color:#5f6f80; border-top:1px solid rgba(255,255,255,.08) }
nav.rail .navfoot b { color:#cdd7e2 }
nav.rail .navfoot .link { color:#8fa0b2; font-size:10.5px }
nav.rail .navfoot .link:hover { color:#fff }
nav.rail .navfoot .brands { display:flex; align-items:center; gap:9px; margin-bottom:9px; opacity:.75; color:#8fa0b2 }

/* main + top bar */
main.page { padding:0 26px 40px; min-width:0; overflow-x:hidden }
header.top {
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; min-width:0;
}
header.top .crumb { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px }
header.top .who { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:nowrap }
.chip { font-size:11.5px; font-weight:700; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:6px 12px; color:var(--muted); box-shadow:var(--shadow) }
.chip.usr { color:var(--ink) }
.chip.usr i { font-style:normal; color:var(--muted); font-weight:600 }
.chip.tgl { cursor:pointer; user-select:none; font:inherit; font-size:11.5px; font-weight:700 }
.chip.tgl:hover { color:var(--ink); border-color:var(--muted) }

/* the event switcher — segmented, accent-filled when on (concept .evsw) */
form.evsw { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 }
.evsw .seg { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:9px; overflow:hidden; box-shadow:var(--shadow) }
.evsw .seg a { border:0; background:transparent; color:var(--muted); font-weight:700; font-size:12.5px; padding:7px 14px; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:6px; white-space:nowrap }
.evsw .seg a:hover { color:var(--ink) }
.evsw .seg a.on { background:var(--acc); color:#fff }
.evsw .seg a .brandmark { color:currentColor }
.evsw label { font-size:11px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:5px; margin:0 }
.pick, .evsw select { font:inherit; font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:4px 8px; background:var(--panel); max-width:200px }
.evsw button[type=submit] { font-size:11px; padding:5px 11px; border-radius:6px }

footer.foot { font-size:10.5px; color:var(--muted); border-top:1px solid var(--line); padding:12px 0 20px; line-height:1.7 }
body.bare main.page { max-width:none }
.page-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:14px }
.page-head .lede { color:var(--muted); font-size:12px; max-width:76ch; margin:4px 0 0; line-height:1.55 }

/* ---- [5] cards & KPIs (concept density) ---------------------------------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); min-width:0 }
.card > h2:first-child, .card > h3:first-child { margin-top:0 }
.card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); font-weight:800; margin:0 0 8px }
.cards { display:grid; gap:14px; margin:4px 0 18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.cards.two   { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) }
.cards.three { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.cards.identity { grid-template-columns:1.6fr 1fr 1fr }
@media (max-width:1100px) { .cards.identity { grid-template-columns:1fr } }
.card.off { opacity:.6 }
.tag { display:inline-block; font-size:9.5px; font-weight:800; background:var(--accbg); color:var(--accink); padding:2px 7px; border-radius:4px; letter-spacing:.6px; text-transform:uppercase }

.kpis { display:grid; gap:14px; margin:4px 0 18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); min-width:0 }
.kpi .l { font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); font-weight:800; margin:0 0 8px; display:flex; align-items:center; gap:6px }
.kpi .l .brandmark { color:var(--muted) }
.kpi .v { font-size:24px; font-weight:900; color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums }
.kpi .v small { font-size:.5em; font-weight:700; color:var(--muted); letter-spacing:0 }
.kpi .s { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.5 }
.kpi.ok .v { color:var(--good) }
.kpi.risk .v { color:var(--bad) }
.kpi.quiet .v { color:var(--muted) }
.delta { font-size:11px; font-weight:800; border-radius:4px; padding:1px 6px; display:inline-block }
.delta.up { color:var(--good); background:var(--good-bg) }
.delta.down { color:var(--bad); background:var(--bad-bg) }
.delta.flat { color:var(--muted); background:var(--panel3) }

/* books check — the plain-words replacement for the INVARIANT tile */
.bookscheck { font-size:12px; background:var(--good-bg); color:var(--good); border-radius:var(--radius); padding:9px 14px; margin:0 0 18px }
.bookscheck.bad { background:var(--bad-bg); color:var(--bad) }
.bookscheck summary { cursor:pointer; font-weight:800 }
.bookscheck .detail { color:inherit; opacity:.9; margin-top:6px; line-height:1.55 }

/* event/race block header with its brand mark */
.blockhead { display:flex; align-items:center; gap:10px; margin:18px 0 8px; flex-wrap:wrap }
.blockhead h2 { margin:0; font-size:13px; text-transform:none; letter-spacing:.02em; color:var(--ink); font-weight:800 }
.blockhead .when { color:var(--muted); font-size:11.5px }
.blockhead .total { margin-left:auto; text-align:right; line-height:1.25 }
.blockhead .total .v { font-weight:900; font-variant-numeric:tabular-nums; font-size:15px }
.blockhead .total .l { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1.2px }

/* per-race bar */
.racebar { padding:10px 0; border-top:1px dashed var(--line) }
.racebar:first-child { border-top:0; padding-top:2px }
.racebar .rb-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px }
.racebar .rb-name { font-weight:800; font-size:13px }
.racebar .rb-count { color:var(--muted); font-size:11.5px }
.racebar .rb-money { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:800; text-align:right }
.racebar .rb-money i { display:block; font-style:normal; font-weight:400; font-size:10.5px; color:var(--muted) }
.racebar .bar { display:flex; height:18px; border-radius:5px; overflow:hidden; background:var(--panel3) }
.racebar .bar span { display:block; min-width:2px }
.racebar .bar .cap { background:repeating-linear-gradient(135deg,var(--panel3),var(--panel3) 4px,var(--line) 4px,var(--line) 8px) }
/* A62.8 DECLARED RIDER (Arthur, 28 Aug 2026). This rule was scoped `.racebar
   .rb-legend` only, but propbar() emits its legend as `.propbar > .rb-legend` —
   outside the selector — so it got no flex and no gap and the entries ran
   together. Live on the dashboard's five propbar() call sites, money figures
   included (`Kept €11,483.18Paid to Stripe €3,382.99`). Pre-existing, NOT A62's:
   it rides this window by Arthur's explicit ruling rather than by convenience,
   and it is named in the gate table because it changes a DEPLOYED surface. */
.racebar .rb-legend,
.propbar .rb-legend { display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:6px; font-size:11px; color:var(--muted) }

/* proportion bar + fact list for the infographic cards */
.propbar { margin:8px 0 2px }
.propbar .bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--panel3) }
.propbar .bar span { display:block; min-width:2px }
.rb-legend .dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:middle }
ul.kv { list-style:none; padding:0; margin:0 }
ul.kv li { padding:6px 0; border-bottom:1px dashed var(--line); font-size:12px; overflow:hidden }
ul.kv li:last-child { border-bottom:0 }
ul.kv li.sub { padding-left:14px; color:var(--muted); font-size:11.5px }
ul.kv b { font-weight:700 }
ul.kv .fv { float:right; font-variant-numeric:tabular-nums; font-weight:800 }
ul.kv .fn { clear:both; color:var(--muted); font-size:11px; padding-top:2px; line-height:1.5 }

/* brand marks — the real mono logos, painted by CSS mask so ONE file per brand
   serves white on the rail and navy on a card */
.brandmark {
  display:inline-block; background:currentColor; flex:0 0 auto;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.brandmark.triathy  { -webkit-mask-image:url(/assets/mark-triathy.svg);  mask-image:url(/assets/mark-triathy.svg);  aspect-ratio:772/345 }
.brandmark.swimathy { -webkit-mask-image:url(/assets/mark-swimathy.svg); mask-image:url(/assets/mark-swimathy.svg); aspect-ratio:591/370 }
.brandmark.sz-rail  { height:17px }
.brandmark.sz-block { height:22px }
.brandmark.sz-chip  { height:12px; vertical-align:-1px }
.blockhead .brandmark { color:var(--ink) }
.blockhead.b-triathy .brandmark  { color:var(--brand-triathy) }
.blockhead.b-swimathy .brandmark { color:var(--brand-swimathy) }

/* athlete card summary strip */
.athlete-summary { margin:0 0 16px }
.athlete-summary .as-figs { display:flex; gap:34px; flex-wrap:wrap }
.athlete-summary .as-figs .l { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px }
.athlete-summary .as-figs .v { font-size:19px; font-weight:900; line-height:1.3 }
.athlete-summary .as-figs .n { color:var(--muted); font-size:10.5px; line-height:1.4; max-width:28ch; margin-top:2px; font-weight:400 }
.athlete-summary .as-figs .brandmark { color:var(--ink); height:15px }
.athlete-summary .as-flags { margin-top:11px; padding-top:10px; border-top:1px dashed var(--line); display:flex; gap:6px; flex-wrap:wrap }
address.postal { font-style:normal; line-height:1.6; font-size:12.5px }
.reveal-row { margin-top:5px }

/* ---- [6] tables (concept table) ------------------------------------------ */
.tablewrap { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin:8px 0 16px }
.card .tablewrap { border:0; box-shadow:none; margin:6px 0 0; background:transparent }
table.data { width:100%; border-collapse:collapse; font-size:12.5px }
table.data th { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:1; white-space:nowrap; font-weight:800 }
table.data td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap }
table.data tbody tr:last-child td { border-bottom:0 }
table.data tbody tr:hover td { background:var(--panel2) }
table.data td.num, table.data th.num { text-align:right; font-variant-numeric:tabular-nums }
p.empty { color:var(--muted); font-size:12px; font-style:italic; margin:6px 0 12px }

table.kv { border-collapse:collapse; width:100% }
table.kv th { text-align:left; font-weight:700; color:var(--muted); padding:4px 12px 4px 0; white-space:nowrap; vertical-align:top; width:1%; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px }
table.kv td { padding:4px 0; word-break:break-word; vertical-align:top; font-size:12.5px; min-width:0 }
table.kv tr + tr th, table.kv tr + tr td { border-top:1px dashed var(--line) }

code.machine { background:var(--panel3); color:var(--muted); border-radius:4px; padding:1px 5px; font-size:10.5px; white-space:nowrap; font-weight:600 }
.status { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; letter-spacing:.4px; background:var(--panel3); color:var(--ink2) }
.status.s-confirmed { background:var(--good-bg); color:var(--good) }
.status.s-refunded, .status.s-cancelled { background:var(--bad-bg); color:var(--bad) }
.status.s-pending_payment { background:var(--warn-bg); color:var(--warn) }
.status.s-superseded, .status.s-transferred, .status.s-deferred { background:var(--panel3); color:var(--muted) }
.tag.ok { background:var(--good-bg); color:var(--good) }
.tag.warn { background:var(--warn-bg); color:var(--warn) }
.tag.err, .tag.pii { background:var(--bad-bg); color:var(--bad) }
.tag.multi { background:var(--acc); color:#fff }
.wrapcell { white-space:normal; display:inline-block; max-width:44ch }
table.data td:has(.wrapcell) { white-space:normal }

/* ---- [7] tiers & RAG ----------------------------------------------------- */
.tier { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; white-space:nowrap; color:var(--ink2) }
.tier .sw { width:9px; height:9px; border-radius:2px; background:var(--tx); flex:0 0 9px }
.tier b { font-weight:900; font-variant-numeric:tabular-nums }
.tier.t1 .sw { background:var(--t1) } .tier.t2 .sw { background:var(--t2) } .tier.t3 .sw { background:var(--t3) }
.tier.t4 .sw { background:var(--t4) } .tier.t5 .sw { background:var(--t5) } .tier.t6 .sw { background:var(--t6) }
.tier.tx .sw { background:var(--tx) }
.tierkey { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin:2px 0 12px; align-items:center }

.rag { display:inline-block; font-size:11px; font-weight:800; border-radius:4px; padding:1px 6px; font-variant-numeric:tabular-nums }
.rag.good  { background:var(--good-bg); color:var(--good) }
.rag.watch { background:var(--warn-bg); color:var(--warn) }
.rag.risk  { background:var(--bad-bg);  color:var(--bad) }
.rag.none  { background:transparent; color:inherit; font-weight:inherit; padding:0 }

/* ---- [8] charts ---------------------------------------------------------- */
.chartwrap, .chart { overflow-x:auto; margin:6px 0 8px; max-width:100% }
.chartwrap svg, .chart svg, svg.chart { max-width:100%; height:auto; display:block }
svg.chart text { font-family:var(--font); fill:var(--muted) }
svg.chart .ttl { fill:var(--ink); font-weight:800 }
.minibar, .spark { display:block; width:100%; height:34px }
.legend { display:flex; gap:14px; font-size:11px; color:var(--muted); margin-top:8px; flex-wrap:wrap }
nav.toggle { display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 12px }
nav.toggle a { font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:4px 11px; text-decoration:none }
nav.toggle a:hover { color:var(--ink) }
nav.toggle a.on { background:var(--acc); border-color:var(--acc); color:#fff }
p.warn { color:var(--warn); font-size:11.5px }
section.card { margin:0 0 16px }
section.card h3 small { font-weight:400; font-size:11px; text-transform:none; letter-spacing:0 }

/* ---- [9] forms (concept .run / .pick / .search) --------------------------- */
form.inline { display:inline; margin:0 }
button.link, .link { background:none; border:0; padding:0; color:inherit; text-decoration:underline; cursor:pointer; font:inherit }
form label { display:inline-block; margin:2px 9px 2px 0; font-size:11.5px; color:var(--ink2) }
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea {
  font:inherit; font-size:12.5px; padding:6px 9px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--panel); color:var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--acc2); outline-offset:1px }
button, input[type=submit] {
  font:inherit; background:var(--acc); color:#fff; border:0; border-radius:var(--radius-sm);
  font-weight:800; font-size:11.5px; padding:7px 14px; cursor:pointer;
}
button.secondary { background:transparent; color:var(--accink); border:1.5px solid var(--acc) }
button.small { font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; background:var(--accbg); color:var(--accink) }
button:disabled { opacity:.5; cursor:default }
form.filters { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:11px 14px; margin-bottom:14px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center }
form.login { max-width:390px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; margin:44px auto }
form.login label { display:block; margin:0 0 14px; font-weight:700; font-size:12px }
form.login input { width:100%; margin-top:4px; font-size:14px; padding:9px 11px }
form.login button { width:100%; padding:10px }

.notice { border:1px solid var(--line); border-left:4px solid var(--info); background:var(--panel); padding:10px 14px; border-radius:var(--radius-sm); margin:10px 0; box-shadow:var(--shadow); font-size:12px }
.notice.error { border-left-color:var(--bad) } .notice.warn { border-left-color:var(--warn) } .notice.ok { border-left-color:var(--good) }
.notice.small { font-size:11px; padding:7px 10px }
details.card > summary { cursor:pointer; font-weight:800; font-size:12.5px; list-style:revert }
details.card[open] > summary { margin-bottom:10px }
.pager { display:flex; gap:7px; align-items:center; margin:10px 0; font-size:11.5px }
.pager a, .pager span { padding:4px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); text-decoration:none }
.pager span[aria-current] { background:var(--acc); color:#fff; border-color:var(--acc) }
.dob { font-family:var(--mono) }
.dob.masked { letter-spacing:.1em; color:var(--muted) }
.dob.revealed { background:var(--warn-bg); color:var(--warn); padding:0 4px; border-radius:4px }

/* report + export cards */
.cards.reports, .cards.exports { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.card.report, .card.export { display:flex; flex-direction:column }
.card.report h2, .card.export h2 { font-size:13px; text-transform:none; letter-spacing:.02em; color:var(--ink); font-weight:800; margin:0 0 6px }
.card .chips { margin:0 0 8px; display:flex; gap:5px; flex-wrap:wrap }
.card .desc { margin:0 0 10px; font-size:12px; color:var(--ink2); line-height:1.55 }
.card .meta { margin:0 0 10px; font-size:11px; color:var(--muted) }
.card .why { margin:0; font-size:11.5px; color:var(--warn) }
.card .actions { margin-top:auto; padding-top:10px; display:flex; gap:7px; flex-wrap:wrap }
.card form.run label.opt { display:block; margin:5px 0; font-size:11.5px }
.card form.run label.opt input[type=text] { width:100% }
fieldset.cols { border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; margin:0 0 10px; max-height:250px; overflow-y:auto }
fieldset.cols legend { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); padding:0 4px }
label.col { display:block; margin:3px 0; font-size:11.5px }
label.col.pii { color:var(--bad) }
pre.report { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; overflow-x:auto; font-size:11.5px; line-height:1.5; box-shadow:var(--shadow) }
pre.report.err { border-left:4px solid var(--bad) }
.notice.runmeta { line-height:1.7 }

/* ---- [10] responsive & print (concept breakpoints) ----------------------- */
@media (max-width:1050px) { .cards.three, .cards.two { grid-template-columns:1fr } }
@media (max-width:760px) {
  body { grid-template-columns:1fr }
  nav.rail { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:8px 0 }
  nav.rail .navlogo, nav.rail .navsub, nav.rail .navfoot { display:none }
  nav.rail a.item { border-left:0; border-bottom:3px solid transparent; padding:9px 13px }
  nav.rail a.item.on { border-left:0; border-bottom-color:var(--acc2) }
  main.page { padding:0 14px 30px }
  footer.foot { grid-column:1; margin:0 14px }
  .kpis, .cards { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) }
  .athlete-summary .as-figs { gap:18px }
}
@media print {
  nav.rail, header.top, form.filters, footer.foot, .noprint, button { display:none !important }
  body { display:block; background:#fff }
  main.page { padding:0 }
  .card, .kpi, .tablewrap { box-shadow:none; break-inside:avoid }
  table.data th { position:static }
}
@media (prefers-reduced-motion:reduce) { *, body { animation:none !important; transition:none !important } }

/* ---- [11] Insights (P1.5) ------------------------------------------------ */
/* The map and its ranking are one reading: the eye finds a dark square, the
   table names it. Side by side above 980px, stacked below — the map keeps its
   aspect either way because svg_county_map() ships a viewBox, not a size. */
/* A67: the map column was minmax(320px,auto), which fitted the 376px tile
   cartogram and starves the real-boundary map — that one is 644 units wide and
   PORTRAIT, and at 320px its county labels render at about 4px and cannot be read
   at all. The labels measured fine in viewBox units the whole time; it is the
   rendered size that was wrong, which is this file's recurring failure. Give the
   column the map's own width and let the media query below stack them when there
   is not room. */
.ins-split { display:grid; grid-template-columns:minmax(320px,560px) 1fr; gap:22px; align-items:start; margin:14px 0 18px }
.ins-map { min-width:0 }
.ins-side { min-width:0 }
.ins-side h3 { margin:0 0 8px; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted) }
/* ---- shared chart interaction (S2 addendum B) -------------------------------
   Hover readout, drag-to-zoom brush and crosshair. Every one of these is an
   ENHANCEMENT: the chart underneath is fully drawn by PHP, so with JavaScript
   off none of these rules ever matches anything and nothing is lost but speed.

   No new colour is introduced, but the readout sits ON a --panel card, so it is
   given --panel2 to separate from it — a border and a shadow alone would be
   nearly invisible in dark mode. Re-derived against THAT surface, not inherited
   from the panel figures: --ink 14.34:1 light / 14.44:1 dark, --ink2 7.74:1 /
   10.52:1, the marker row --marker-ink 5.18:1 / 6.60:1. The brush border is
   --info (6.50:1 / 6.75:1) and the crosshair --marker-line (3.63:1 / 4.31:1),
   both over the 3:1 floor for a graphic. Re-deriving was the point; reusing the
   proven ramp is the result. */
.c-host { position:relative }
.c-host svg.chart-line { touch-action:pan-y }          /* let the page still scroll on touch */
.c-host.c-zoomed svg.chart-line { cursor:zoom-out }

svg.chart .c-brush { fill:var(--info-bg); stroke:var(--info); stroke-width:1; pointer-events:none }
svg.chart .c-cross { pointer-events:none; opacity:.75 }
svg.chart .c-dot   { pointer-events:none; stroke:var(--panel); stroke-width:1.5 }   /* a halo, so a dot on a gridline still reads */

.c-tip {
  position:absolute; z-index:5; pointer-events:none;
  min-width:150px; max-width:280px; padding:8px 10px;
  background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-size:12px; line-height:1.45;
}
.c-tip[hidden] { display:none }
.c-tip .c-tip-head { font-weight:700; margin-bottom:4px }
.c-tip .c-tip-row  { display:flex; align-items:center; gap:6px; margin-top:4px }
.c-tip .c-tip-lab  { flex:1 1 auto; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.c-tip .c-tip-val  { font-variant-numeric:tabular-nums; font-weight:700 }
.c-tip .c-tip-sub  { color:var(--ink2); font-size:11px; margin-left:16px }
.c-tip .c-sw       { width:9px; height:9px; border-radius:2px; flex:0 0 auto }
.c-tip .c-tip-brk  { margin-top:7px; padding-top:6px; border-top:1px solid var(--line); color:var(--ink2); font-size:11px; font-weight:700 }
.c-tip .c-tip-brkrow .c-tip-lab { color:var(--ink2) }
.c-tip .c-tip-brkrow .c-tip-val { font-weight:400 }
.c-tip .c-tip-brkrow { margin-top:2px; padding-left:2px }
.c-tip .c-tip-mk   { margin-top:6px; padding-top:6px; border-top:1px solid var(--line); color:var(--marker-ink); font-size:11px }

/* ---- campaign markers (backlog #14.1 / #14.2) ------------------------------
   The marker sits quiet until it is approached. Before this it was 9px of
   saturated --info with a <title> on each of two thin shapes: legible, but it
   read as loud decoration and nothing said it could be hovered at all. Now the
   whole group is one hover target with one tooltip, the cap gives the eye
   something to aim at, and approaching it resolves the note into a control.
   .mk-hit is a transparent strip because a 1px dashed rule is not a target on a
   mouse and is no target whatsoever on a touch screen. */
svg.chart .mk .mk-label { transition:fill .12s ease }
svg.chart .mk .mk-rule, svg.chart .mk .mk-cap { transition:stroke .12s ease, fill .12s ease, opacity .12s ease }
svg.chart .mk .mk-cap { opacity:.85 }
svg.chart .mk:hover .mk-label { fill:var(--ink) }
svg.chart .mk:hover .mk-rule  { stroke:var(--info); stroke-dasharray:none }
svg.chart .mk:hover .mk-cap   { fill:var(--info); opacity:1 }
svg.chart .mk .mk-hit { cursor:help }
/* A marker that goes somewhere says so with the cursor, and underlines on
   approach — the one affordance a reader already knows means "this is a link". */
svg.chart a.mk-a { cursor:pointer }
svg.chart a.mk-a .mk-hit { cursor:pointer }
svg.chart a.mk-a:hover .mk-label { fill:var(--info); text-decoration:underline }
svg.chart a.mk-a:focus-visible .mk-label { fill:var(--info); text-decoration:underline }
svg.chart a.mk-a:focus-visible { outline:2px solid var(--info); outline-offset:2px }
@media (prefers-reduced-motion:reduce) {
  svg.chart .mk .mk-label, svg.chart .mk .mk-rule, svg.chart .mk .mk-cap { transition:none }
}

.chart-map .cty rect { transition:opacity .12s ease }
.chart-map .cty:hover rect { opacity:.82 }
.chart-map .cty.zero rect { stroke-dasharray:3 3 }

/* one block per edition, so two brands never bleed into each other */
.ins-block { margin:18px 0 26px; padding-top:2px }
.ins-block + .ins-block { border-top:1px solid var(--line); padding-top:20px }
.ins-block h3 { margin:16px 0 7px; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted) }

/* the folded-spellings disclosure, inside a table cell */
.inline-det { font-size:11.5px }
.inline-det > summary { cursor:pointer; color:var(--muted) }
.inline-det > summary:hover { color:var(--ink) }
.inline-det .detail { padding:6px 0 2px; color:var(--ink2); line-height:1.7 }

/* the lift-and-quote block */
.ins-press { margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--accbg); border:1px solid var(--line) }
.ins-press h3 { margin:0 0 8px; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--accink) }
.ins-press ul { margin:0; padding-left:18px }
.ins-press li { margin:5px 0; line-height:1.55 }
.ins-press p { margin:9px 0 0 }

/* the question a first-timer figure answers, printed with the figure */
.kpi .q { font-style:italic; color:var(--muted) }

@media (max-width:980px) { .ins-split { grid-template-columns:1fr } }
/* ---- A65 write-actions -----------------------------------------------------
   The confirm step is deliberately plain: one emphasised button, one way back.
   A destructive action is never the thing your eye lands on first by accident. */
form.confirm { margin-top: 1.1rem; }
/* The token is --accink, not --acc-ink. Written wrong first time, so this fell
   back to navy #13265c on the slate --acc: 1.66 : 1, under the 4.5 AA floor and
   invisible at a glance — the same shape as A61's confirmed-page nudge. It
   inherits the base button's white ink (8.65 : 1 on --acc, both themes) and only
   changes the size, which was the whole point of the class.
   scripts/console/write_proof.sh section H measures it; do not re-colour by eye. */
button.do {
  font-size: 12.5px; padding: .55rem 1.1rem;
}
button.do:hover { filter: brightness(1.06); }
button.do:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
fieldset.cols legend { font-weight: 700; padding: 0 .4rem; }