/* webui/assets/site.css -- the shared stylesheet, moved out of base.html (UI-E2, 2026-09-30).
   Served at /assets/site.<content hash>.css with a year's caching (webui/assets.py). */
/* The same visual system as the published draft audit and report card -- an off-white
   plane, ink text, one cool and one warm pole for direction, Archivo for anything that
   carries a number or a heading -- with a football layer on top: turf for decoration, a
   yard-line band on the landing page, team marks whose colour follows the team. Light
   first; dark via the OS preference. */
:root { color-scheme: light dark;
  --plane:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e; --muted:#6f6e68;
  --grid:#e1e0d9; --rule:#c3c2b7; --ring:rgba(11,11,11,0.10);
  --pos:#1f66bd; --neg:#c93a39; --mid:#f0efec; --chip:#ffffff; --warn:#8f5d12;
  --warm-ink:#a8561a; --gold-ink:#8a6a12;   /* the accents, dark enough to be read at 12 px (4.5:1) */
  --line-l:40%;                             /* lightness of a team-hue chart line on this ground */
  --pos-bg:rgba(42,120,214,0.10); --neg-bg:rgba(227,73,72,0.10); --warn-bg:rgba(183,121,31,0.12);
  --turf:#2e7d4f; --turf-bg:rgba(46,125,79,0.10); --turf-line:rgba(46,125,79,0.16);
  --warm:#d9772b; --warm-bg:rgba(217,119,43,0.12); --gold:#c9962a; --gold-bg:rgba(201,150,42,0.14);
  --violet:#6b5bd2; --violet-bg:rgba(107,91,210,0.12);
  /* UI-V3 chart palette, run through the dataviz validator in both themes (tests.test_webui_primitives) */
  --c-me:#2e7d4f; --c-other:#9a9891; --c-up:var(--pos); --c-down:var(--neg);
  --c-seq-1:#95bca5; --c-seq-2:#73a788; --c-seq-3:#50926c; --c-seq-4:#2e7d4f;
  --c-seq-ink-1:var(--ink); --c-seq-ink-2:var(--ink); --c-seq-ink-3:var(--surface); --c-seq-ink-4:var(--surface);
  --g-brand: linear-gradient(100deg, #2e7d4f 0%, #2a78d6 55%, #6b5bd2 100%);
  --g-turf: linear-gradient(135deg, #2e7d4f, #4fae7b); --g-pos: linear-gradient(135deg, #1f66bd, #4a90e2);
  --g-gold: linear-gradient(135deg, #c9962a, #f0c24e); --g-warm: linear-gradient(135deg, #d9772b, #f2a25c); --g-violet: linear-gradient(135deg, #6b5bd2, #9a8cf0);
  --glow-turf: 0 8px 28px rgba(46,125,79,0.22); --glow-pos: 0 8px 28px rgba(42,120,214,0.22); --shadow: 0 10px 30px rgba(11,11,11,0.08), 0 1px 2px rgba(11,11,11,0.06);
  --display: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  /* one shape system: surfaces are soft, controls a touch softer, pills tight, tables square */
  --r-card: 8px; --r-ctl: 5px; --r-pill: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7; --muted:#9a9891;
  --grid:#2c2c2a; --rule:#383835; --ring:rgba(255,255,255,0.10);
  --pos:#3987e5; --neg:#e66767; --mid:#383835; --chip:#222221; --warn:#d9a441;
  --pos-bg:rgba(57,135,229,0.16); --neg-bg:rgba(230,103,103,0.16); --warn-bg:rgba(217,164,65,0.16);
  --turf:#4fae7b; --turf-bg:rgba(79,174,123,0.14); --turf-line:rgba(79,174,123,0.18);
  --warm:#eb8d45; --warm-bg:rgba(235,141,69,0.16); --gold:#dcae45; --gold-bg:rgba(220,174,69,0.16);
  --violet:#8f82e6; --violet-bg:rgba(143,130,230,0.16); --warm-ink:#eb8d45; --gold-ink:#dcae45; --line-l:62%;
  --c-me:#45a071; --c-other:#5a5954; --c-up:var(--pos); --c-down:var(--neg);
  --c-seq-1:#305d45; --c-seq-2:#377354; --c-seq-3:#3e8a62; --c-seq-4:#45a071;
  --c-seq-ink-1:var(--ink); --c-seq-ink-2:var(--ink); --c-seq-ink-3:var(--ink); --c-seq-ink-4:var(--plane);
  --g-brand: linear-gradient(100deg, #4fae7b 0%, #3987e5 55%, #8f82e6 100%);
  --glow-turf: 0 8px 28px rgba(79,174,123,0.28); --glow-pos: 0 8px 28px rgba(57,135,229,0.28); --shadow: 0 10px 30px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4); } }
:root[data-theme="dark"] {
  --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7; --muted:#9a9891;
  --grid:#2c2c2a; --rule:#383835; --ring:rgba(255,255,255,0.10);
  --pos:#3987e5; --neg:#e66767; --mid:#383835; --chip:#222221; --warn:#d9a441;
  --pos-bg:rgba(57,135,229,0.16); --neg-bg:rgba(230,103,103,0.16); --warn-bg:rgba(217,164,65,0.16);
  --turf:#4fae7b; --turf-bg:rgba(79,174,123,0.14); --turf-line:rgba(79,174,123,0.18);
  --warm:#eb8d45; --warm-bg:rgba(235,141,69,0.16); --gold:#dcae45; --gold-bg:rgba(220,174,69,0.16);
  --violet:#8f82e6; --violet-bg:rgba(143,130,230,0.16); --warm-ink:#eb8d45; --gold-ink:#dcae45; --line-l:62%;
  --c-me:#45a071; --c-other:#5a5954; --c-up:var(--pos); --c-down:var(--neg);
  --c-seq-1:#305d45; --c-seq-2:#377354; --c-seq-3:#3e8a62; --c-seq-4:#45a071;
  --c-seq-ink-1:var(--ink); --c-seq-ink-2:var(--ink); --c-seq-ink-3:var(--ink); --c-seq-ink-4:var(--plane);
  --g-brand: linear-gradient(100deg, #4fae7b 0%, #3987e5 55%, #8f82e6 100%);
  --glow-turf: 0 8px 28px rgba(79,174,123,0.28); --glow-pos: 0 8px 28px rgba(57,135,229,0.28); --shadow: 0 10px 30px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4); }
:root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }
@view-transition { navigation: auto; }

/* A script that hides something sets the `hidden` attribute, and the browser's own
   rule for it loses to any class that sets a display -- which is how a filtered row
   stayed on screen. One rule, so no component has to remember this again. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--plane); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 8% -10%, var(--turf-bg), transparent 60%), radial-gradient(800px 500px at 100% 0%, var(--violet-bg), transparent 60%); }
a { color: var(--pos); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
.tl, .row a.main, .card h4 a, .brand, .tabs a { color: var(--ink); }
.tl:hover, .row a.main:hover, .card h4 a:hover { color: var(--pos); text-decoration: none; }
.c-turf { color: var(--turf) !important; } .c-pos { color: var(--pos) !important; } .c-warm { color: var(--warm) !important; } .c-gold { color: var(--gold) !important; } .c-neg { color: var(--neg) !important; } .c-violet { color: var(--violet) !important; }
code { font-family: var(--mono); font-size: .88em; background: var(--mid); padding: .05em .35em; border-radius: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 0 72px; }
/* a big monitor is the room this is actually read in: give the column the width back */
@media (min-width: 1500px) { .wrap { max-width: 1440px; padding-inline: 28px; } }
svg.i { width: 1em; height: 1em; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- top bar ---- */
.top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; padding: 20px 0 0; border-bottom: 2px solid transparent; border-image: var(--g-brand) 1; position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--plane) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; padding-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.brand svg.i { width: 1.2em; height: 1.2em; color: var(--turf); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover svg.i { transform: rotate(-25deg) scale(1.15); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tabs a { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 6px 2px 12px; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s; position: relative; }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px 3px 0 0; background: var(--g-brand); transform: scaleX(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
.tabs a:hover { color: var(--ink); } .tabs a:hover::after { transform: scaleX(1); opacity: .5; }
.devmenu { position: relative; } .devmenu summary { list-style: none; cursor: pointer; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); padding: 6px 2px 12px; }
.devmenu summary::-webkit-details-marker { display: none; } .devmenu summary::after { content: " ▾"; } .devmenu summary.on, .devmenu summary:hover { color: var(--ink); }
.devmenu .dm { position: absolute; right: 0; top: 100%; z-index: 60; display: flex; flex-direction: column; min-width: 140px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; }
.devmenu .dm a { padding: 7px 10px; margin: 0; border-radius: 6px; } .devmenu .dm a::after { display: none; } .devmenu .dm a:hover, .devmenu .dm a.on { background: var(--mid); color: var(--ink); }
.tabs a.on { color: var(--ink); } .tabs a.on::after { transform: scaleX(1); opacity: 1; }
.top .meta { margin-left: auto; font-size: 12px; color: var(--muted); padding-bottom: 12px; font-variant-numeric: tabular-nums; }
.private { border-left: 3px solid var(--neg); background: var(--neg-bg); padding: 9px 14px; margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.private b { color: var(--ink); }

/* ---- page head ---- */
.head { margin: 34px 0 22px; }
.eyebrow { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.05; letter-spacing: -0.024em; margin: 0; text-wrap: balance; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
h1 { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .pill { -webkit-text-fill-color: initial; }
h1 .pill.OK, h1 .pill.RUNNING, h1 .pill.OPEN, h1 .pill.COVERED { color: #fff; } h1 .pill.STALE, h1 .pill.VOID { color: var(--neg); } h1 .pill.DEGRADED { color: var(--warn); }
.head { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
.lede { font-size: 16px; color: var(--ink-2); max-width: 70ch; margin: 12px 0 0; }
.lede b { color: var(--ink); font-weight: 600; }

/* ---- sections ---- */
section { margin-top: 40px; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
section:nth-of-type(2) { animation-delay: .06s; } section:nth-of-type(3) { animation-delay: .12s; } section:nth-of-type(4) { animation-delay: .18s; } section:nth-of-type(n+5) { animation-delay: .24s; }
h2 { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--turf) 0 56px, var(--grid) 56px) 1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
h2 svg.i { color: var(--turf); margin-right: 2px; width: 1.25em; height: 1.25em; }
h2 .hint { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: auto; }
h3 { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 22px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
h3 .hint { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
p { margin: .4em 0; }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin: 22px 0 0; }
.tile { position: relative; background: var(--surface); border: 1px solid var(--grid); border-top: 3px solid var(--turf); border-radius: var(--r-card); padding: 13px 16px 13px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .15s; animation: rise .5s ease both; overflow: hidden; }
.tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--turf-bg); opacity: .8; pointer-events: none; }
.tiles .tile:nth-child(4n+2)::after { background: var(--pos-bg); } .tiles .tile:nth-child(4n+3)::after { background: var(--gold-bg); } .tiles .tile:nth-child(4n+4)::after { background: var(--violet-bg); }
.tile:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: var(--shadow); }
.tile .v { position: relative; }
.tile .k { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.tile .v { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .v.pos { color: var(--pos); } .tile .v.neg { color: var(--neg); }
.tiles .tile:nth-child(4n+2) { border-top-color: var(--pos); } .tiles .tile:nth-child(4n+3) { border-top-color: var(--gold); } .tiles .tile:nth-child(4n+4) { border-top-color: var(--violet); }
.tiles .tile.pos { border-top-color: var(--pos); } .tiles .tile.neg { border-top-color: var(--neg); }
.tile .s { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.tiles .tile:nth-child(2) { animation-delay: .05s; } .tiles .tile:nth-child(3) { animation-delay: .1s; } .tiles .tile:nth-child(4) { animation-delay: .15s; } .tiles .tile:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- pills / callouts / chips ---- */
.pill { display: inline-block; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); vertical-align: middle; background: var(--mid); color: var(--ink-2); }
.pill { transition: transform .15s; }
.pill.OK { background: var(--g-turf); color: #fff; }
.pill.DEGRADED, .pill.UPCOMING { background: var(--warn-bg); color: var(--warn); }
.pill.STALE, .pill.VOID, .pill.MISSED { background: var(--neg-bg); color: var(--neg); }
.pill.RUNNING, .pill.OPEN, .pill.COVERED { background: var(--g-pos); color: #fff; }
.pill.RUNNING::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 6px; animation: blink 1.2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
@keyframes blink { 50% { opacity: .2; } }
.note { border-left: 3px solid var(--ink); background: var(--surface); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 12px 16px; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; box-shadow: 0 1px 2px rgba(11,11,11,.04); }
.note b { color: var(--ink); }
.note.warn { border-left-color: var(--warn); } .note.bad { border-left-color: var(--neg); } .note.good { border-left-color: var(--pos); }
.note + .note { margin-top: 10px; }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-card); padding: 8px 12px 8px 10px; font-size: 13px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.chip:hover { transform: translateY(-2px); border-color: var(--rule); box-shadow: var(--shadow); }
.chip svg.i { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--turf-bg); box-sizing: border-box; }
.chip:nth-child(2) svg.i { background: var(--pos-bg); } .chip:nth-child(3) svg.i { background: var(--gold-bg); } .chip:nth-child(4) svg.i { background: var(--violet-bg); } .chip:nth-child(5) svg.i { background: var(--warm-bg); }
.chip svg.i { color: var(--turf); } .chip:nth-child(2) svg.i { color: var(--pos); } .chip:nth-child(3) svg.i { color: var(--gold); } .chip:nth-child(4) svg.i { color: var(--violet); } .chip:nth-child(5) svg.i { color: var(--warm); }
.chip .k { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chip .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.chip.bad { border-color: var(--neg); } .chip.warn { border-color: var(--warn); }

/* ---- team marks ---- */
.mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0; color: #fff; vertical-align: middle; margin-right: 8px; flex: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--grid); }
.mark.lg { width: 56px; height: 56px; font-size: 18px; margin-right: 0; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--turf-line), var(--shadow); }
.rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--display); font-size: 11px; font-weight: 800; color: var(--muted); background: var(--mid); }
.rank.r1 { background: var(--g-gold); color: #2b2000; box-shadow: 0 2px 8px rgba(201,150,42,.45); } .rank.r2 { background: linear-gradient(135deg, #9aa3ad, #d4d9de); color: #fff; } .rank.r3 { background: linear-gradient(135deg, #a5602d, #d4906a); color: #fff; }
img.mark { object-fit: cover; background: var(--mid); border: 1px solid var(--grid); }
/* the page's name for a screen reader, where the design leads with something else (audit 2026-09-29) */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* UI-V4: an NFL team's colour as a swatch beside its code -- never the text's colour; neutral when none is cached */
.nflsw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--team, var(--mid)); box-shadow: 0 0 0 1px var(--rule); }
/* UI-P6: a player's face (the local headshot, or the NFL team's logo), after .mark so it wins */
.face { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; margin-right: 7px; flex: none; }
img.face { object-fit: cover; background: var(--mid); border: 1px solid var(--grid); }
img.face[src^="/img/teams/"] { object-fit: contain; background: var(--surface); padding: 2px; }
.face.lg { width: 76px; height: 76px; margin-right: 0; font-size: 22px; }
.face.mark { display: inline-flex; align-items: center; justify-content: center; margin-right: 0; }   /* the fallback keeps .mark's centring (audit 2026-09-29) */
.pcard .n img.face { width: 34px; height: 34px; margin-right: 9px; }

/* ---- tables ---- */
.scroller { margin-top: 4px; }
/* below tablet width a table scrolls inside its own box (and its header cannot stick, which is fine there);
   above it the page never scrolls sideways and sticky headers sit below the app header */
@media (max-width: 720px) { .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } }
.wrap { overflow-x: clip; }
.scroller { max-width: 100%; }
.scroller.xscroll { overflow-x: auto; scrollbar-width: thin; } .scroller.xscroll th { position: static; }   /* a table wider than its column scrolls in its box at any width, not just a phone's; the page clips what spills (owner report 2026-09-29) */
@media (min-width: 1800px) { .wrap { max-width: 1680px; } }
.st { display: inline-block; min-width: 1.6em; text-align: center; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 3px 5px; border-radius: 3px; background: var(--neg-bg); color: var(--neg); vertical-align: middle; }
.st.ir, .st.pup, .st.sus { background: var(--mid); color: var(--ink-2); } .st.q { background: var(--warm-bg); color: var(--warm-ink); } .st.bye { background: var(--violet-bg); color: var(--violet); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 6px 8px 8px; border-bottom: 2px solid var(--turf-line); white-space: normal; line-height: 1.25; vertical-align: bottom; background: var(--plane); position: sticky; top: var(--head-h, 0px); }
[id] { scroll-margin-top: calc(var(--head-h, 0px) + 12px); }
th.num, td.num { text-align: right; }
th[data-key] { cursor: pointer; user-select: none; }
th[data-key]:hover { color: var(--ink); }
th.sort-asc::after { content: " \25B2"; font-size: 9px; } th.sort-desc::after { content: " \25BC"; font-size: 9px; }
td { padding: 6px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
/* UI-V5: compact density -- table rows only; set from this browser's choice before first paint */
:root[data-density="compact"] td, :root[data-density="compact"] th { padding-top: 2px; padding-bottom: 2px; }
td.num, th.num, .tnum, td.nm { white-space: nowrap; }
td.tl, th.tl { text-align: left; }
td.nm { font-weight: 500; } td.wrap { white-space: normal; overflow-wrap: anywhere; }
tbody tr:hover td { background: var(--surface); }
tr.me td { background: var(--pos-bg); }
tr.me td.nm::after, .you { content: "you"; font-family: var(--display); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pos); margin-left: 8px; border: 1px solid var(--pos); padding: 1px 5px; border-radius: 2px; }
td .flag { color: var(--neg); font-weight: 500; }
td.wrap { white-space: normal; max-width: 34ch; }
.mini { display: block; height: 8px; background: var(--mid); border-radius: 999px; overflow: hidden; min-width: 80px; }
.mini i { display: block; height: 100%; background: var(--g-pos); width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1); border-radius: 999px; }
.mini.turf i { background: var(--g-turf); } .mini.gold i { background: var(--g-gold); } .mini.warm i { background: var(--g-warm); } .mini.violet i { background: var(--g-violet); }
.rng { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.rng .bar { position: relative; flex: 1; height: 8px; background: var(--mid); border-radius: 999px; min-width: 90px; }
.rng .bar i { position: absolute; top: 0; bottom: 0; background: var(--pos-bg); border: 1px solid var(--pos); border-radius: 999px; }
.rng .bar b { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--pos); margin-left: -1px; border-radius: 1px; }
.rng .n { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bc { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bc .mini { width: 64px; min-width: 64px; flex: none; }

/* ---- cards / lists ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 4px; }
.cards.wide { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
/* UI-F7: three across on a desktop, and a group that would end on one card ends on two pairs */
@media (min-width: 960px) {
  .cards.tidy { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cards.tidy > * { grid-column: span 2; }
  .cards.tidy > :nth-child(3n+1):nth-last-child(4), .cards.tidy > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
}
@media (max-width: 600px) { .cards.wide { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-card); padding: 16px 18px 14px; transition: border-color .15s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.card:hover { border-color: var(--rule); transform: translateY(-2px); box-shadow: var(--shadow); }
.card.s-turf { border-left: 3px solid var(--turf); } .card.s-pos { border-left: 3px solid var(--pos); } .card.s-gold { border-left: 3px solid var(--gold); } .card.s-warm { border-left: 3px solid var(--warm); } .card.s-violet { border-left: 3px solid var(--violet); }
.card h4 { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.card h4 a { text-decoration: none; }
.card .q { color: var(--ink-2); font-size: 14px; margin: 0 0 8px; }
.card .m { font-size: 12px; color: var(--muted); }
.rows { display: grid; gap: 0; margin-top: 4px; }
.row { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr auto; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.row a.main { font-weight: 500; text-decoration: none; }
.row a.main:hover { text-decoration: underline; }
.row .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.row a.raw, .raw { font-size: 11px; color: var(--muted); text-decoration: none; margin-left: 8px; white-space: nowrap; }
.row a.raw:hover, .raw:hover { color: var(--pos); }
.row .t { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.row .r { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13.5px; margin-top: 6px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 4px; }
/* U4 / U14: the command palette and the shortcut help; U5: the player card */
.pal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; backdrop-filter: blur(4px); }
.pal .box { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; animation: rise .2s ease both; }
.pal input { width: 100%; border: 0; border-bottom: 1px solid var(--grid); background: transparent; color: var(--ink); font: 17px var(--sans); padding: 16px 18px; outline: none; }
.pal ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.pal li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.pal li .k { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 3.4em; }
.pal li .d { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pal li.on, .pal li:hover { background: var(--mid); } .pal li.on .k { color: var(--pos); }
.pal .foot { display: flex; gap: 16px; padding: 8px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--grid); }
.keys { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.keys .box { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 22px; width: min(460px, 100%); animation: rise .2s ease both; }
.keys h3 { margin: 0 0 10px; } .keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; } .keys dt { color: var(--ink); } .keys dd { margin: 0; color: var(--ink-2); }
kbd { font-family: var(--display); font-size: 11px; font-weight: 700; background: var(--mid); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.pcard { position: fixed; z-index: 70; width: 260px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; animation: rise .15s ease both; }
.pcard .n { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.pcard .row { display: flex; justify-content: space-between; gap: 10px; } .pcard .row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard a { display: inline-block; margin-top: 6px; font-weight: 600; }
.pcard .strip { margin: 6px 0 2px; }
button.csv { margin-top: 6px; padding: 2px 10px; font-size: 11px; }
th[data-key]:focus-visible { outline: 2px solid var(--pos); outline-offset: -2px; }
.dstrip { display: block; overflow: visible; } .dstrip .h { fill: var(--turf); opacity: .16; } .dstrip .rng { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.dstrip .box { fill: var(--turf); opacity: .6; } .dstrip .mean { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; } .dstrip .wk { fill: var(--surface); stroke: var(--warm); stroke-width: 1.6; }
.dcell { display: flex; align-items: center; gap: 8px; } .dwide { max-width: 100%; } .dwide .dstrip { max-width: 100%; height: auto; }
.run { margin-top: 12px; border: 1px solid var(--grid); border-radius: var(--r-card); background: var(--surface); padding: 8px 12px 4px; }
.run .rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; } .row .hl { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 0 22px; }
/* UI-V3 primitives: colour only through the --c-* tokens */
.viz .sl { stroke: var(--c-other); stroke-width: 2; } .viz circle.sl { fill: var(--c-other); stroke: none; }
.viz .sl.me { stroke: var(--c-me); stroke-width: 3; } .viz circle.sl.me { fill: var(--c-me); stroke: none; }
.viz .vl, .viz .nl { font-size: 11px; fill: var(--ink-2); } .viz .nl.me { fill: var(--ink); font-weight: 700; }
.viz .dcol circle { fill: var(--c-other); } .viz .dcol.on circle { fill: var(--c-me); } .viz .hit { fill: transparent; }
.viz .dcol:hover circle { stroke: var(--ink); stroke-width: 1; }
.viz .note circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; } .viz .note text { font-size: 10px; font-weight: 700; fill: var(--ink); }   /* UI-H5 */
ol.story { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 13px; } ol.story .sn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 10px; font-weight: 700; }
.viz.relia .diag { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; } .viz.relia .band { fill: var(--mid); } .viz.relia .grid { stroke: var(--grid); }
.viz.relia .pt circle { fill: var(--c-me); stroke: var(--surface); stroke-width: 2; } .viz.relia .yl, .viz.relia .xl { font-size: 11px; fill: var(--ink-2); }
.viz .band.outer { fill: var(--c-seq-1); opacity: .7; } .viz .band.inner { fill: var(--c-seq-2); opacity: .85; }
.viz .med { fill: none; stroke: var(--c-me); stroke-width: 2; stroke-linejoin: round; }
.viz .hit:hover { fill: var(--ink); opacity: .05; }
table.heat2 td.hc { text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; padding: 6px 8px; border: 2px solid var(--surface); }
table.heat2 td.h1 { background: var(--c-seq-1); color: var(--c-seq-ink-1); } table.heat2 td.h2 { background: var(--c-seq-2); color: var(--c-seq-ink-2); }
table.heat2 td.h3 { background: var(--c-seq-3); color: var(--c-seq-ink-3); } table.heat2 td.h4 { background: var(--c-seq-4); color: var(--c-seq-ink-4); font-weight: 600; }
table.heat2 td.h0 { color: var(--muted); } table.heat2 tr.me th.nm { font-weight: 700; }
.pbar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbar .trk { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--mid); overflow: hidden; } .pbar .trk i { display: block; height: 100%; background: var(--c-seq-3); }
details.tview { margin-top: 6px; font-size: 12px; } details.tview summary { cursor: pointer; color: var(--muted); }
[data-player] { cursor: help; text-decoration: underline dotted var(--rule); text-underline-offset: 3px; }
.themeform { display: inline-flex; gap: 0; margin-left: 12px; vertical-align: middle; } .themeform button { padding: 3px 9px; font-size: 10px; border-radius: 0; box-shadow: none; letter-spacing: .08em; }
.densitybtn { padding: 3px 9px; font-size: 10px; letter-spacing: .08em; box-shadow: none; margin-left: 6px; vertical-align: middle; } .densitybtn[aria-pressed="true"], .densitybtn[aria-pressed="true"]:hover, .densitybtn[aria-pressed="true"]:focus-visible { background: var(--ink); color: var(--plane); }
.themeform button:first-of-type { border-radius: 999px 0 0 999px; } .themeform button:last-of-type { border-radius: 0 999px 999px 0; } .themeform button.on { background: var(--ink); color: var(--plane); border-color: var(--ink); }
/* U3: the job bar while a job runs, and the toast when it ends */
.jobbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--pos-bg); overflow: hidden; }
.jobbar i { display: block; height: 100%; width: 40%; background: var(--g-brand); border-radius: 999px; animation: jobslide 1.4s ease-in-out infinite; }
@keyframes jobslide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--turf); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 12px 12px 14px; font-size: 13.5px; color: var(--ink-2); max-width: min(380px, calc(100vw - 32px)); animation: rise .35s ease both; }
.toast b { color: var(--ink); } .toast a { font-weight: 700; color: var(--pos); white-space: nowrap; text-decoration: none; } .toast a:hover { text-decoration: underline; }
.toast button { padding: 2px 8px; font-size: 14px; line-height: 1; box-shadow: none; }
.charts figure { margin: 0; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-card); padding: 8px; overflow: hidden; }
/* inline SVG charts drawn by the templates */
.viz { width: 100%; height: auto; display: block; }
.viz text { font: 11.5px var(--sans); fill: var(--muted); } .viz text.vl { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.viz .ax { stroke: var(--grid); stroke-width: 1; } .viz .ax2 { stroke: var(--rule); stroke-width: 1; }
.viz .ln { fill: none; stroke: var(--rule); stroke-width: 1.4; opacity: .7; } .viz .ln.me { stroke: var(--turf); stroke-width: 2.6; opacity: 1; }
.viz .ln.pos { stroke: var(--pos); stroke-width: 2.4; opacity: 1; } .viz .ln.gold { stroke: var(--gold); stroke-width: 2.4; opacity: 1; }
.viz .ln.hue { stroke-width: 1.8; opacity: .85; stroke-linejoin: round; } .viz .ln.me[style] { stroke-width: 3.2; }
.viz .xh { stroke: var(--ink); stroke-width: 1; opacity: .35; pointer-events: none; }
.viztip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 11px; font-size: 12px; line-height: 1.55; color: var(--ink); max-width: 280px; }
.viztip b { display: block; color: var(--muted); font-weight: 600; margin-bottom: 3px; } .viztip span { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }
.viztip i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .viztip strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.spark { width: 64px; height: 18px; vertical-align: middle; overflow: visible; flex: none; } .spark polyline { fill: none; stroke: var(--turf); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .spark circle { fill: var(--turf); }
.rankd { display: inline-block; min-width: 24px; text-align: left; font-size: 11px; font-weight: 700; margin-left: 5px; letter-spacing: .02em; color: var(--muted); } .rankd.up { color: var(--turf); } .rankd.dn { color: var(--neg); }
.viz .dot { fill: var(--turf); } .viz .dot.pos { fill: var(--pos); } .viz .dot.gold { fill: var(--gold); }
.viz .area { fill: url(#vizg-turf); } .viz .area.pos { fill: url(#vizg-pos); }
.viz .ln.me, .viz .ln.pos, .viz .ln.gold, .viz .ln.hue { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: draw 1.6s cubic-bezier(.2,.8,.2,1) forwards; }
.viz .dot { animation: pop .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { r: 0; opacity: 0; } to { opacity: 1; } }
.vizg-turf-a { stop-color: var(--turf); stop-opacity: .35; } .vizg-turf-b { stop-color: var(--turf); stop-opacity: 0; }
.vizg-pos-a { stop-color: var(--pos); stop-opacity: .35; } .vizg-pos-b { stop-color: var(--pos); stop-opacity: 0; }
.vizbox { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-card); padding: 14px 16px 10px; }
.vizbox .k { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.viz2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; }
.hbar { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr 4.5rem; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.hbar .b { display: block; height: 14px; background: var(--mid); border-radius: 999px; overflow: hidden; }
.hbar.ledger { grid-template-columns: minmax(8rem, max-content) 1fr 11rem; } .hbar .v { white-space: nowrap; }
.hbar.durs { grid-template-columns: minmax(8rem, max-content) 1fr 13rem; } .hbar.durs .spark { width: 100%; max-width: 360px; height: 26px; }
.hbar .b i { display: block; height: 100%; width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1); border-radius: 999px; background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28)); }
.hbar .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.hbar .me { font-weight: 600; }
.hbar .b i { background-color: var(--c-other); } .hbar .b i.me { background-color: var(--c-me); }   /* UI-V2: no generated hue per team */
.heat td, .heat th { text-align: center; padding: 5px 4px; font-size: 12.5px; } .heat td.nm, .heat th.nm { text-align: left; }
.heat td span { display: block; border-radius: 4px; padding: 3px 4px; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-top: 8px; } .legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
.charts img { display: block; width: 100%; height: auto; }
figcaption { font-size: 12px; color: var(--muted); padding: 6px 4px 0; }

/* ---- console blocks ---- */
.con { margin-top: 4px; }
.con .con-h { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 6px; }
.con pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-ctl); padding: 10px 14px; margin: 6px 0; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.con table { font-size: 13px; }
.con .rec { margin: 10px 0; }
details { margin-top: 10px; }
summary { cursor: pointer; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
summary:hover { color: var(--ink); }
details pre { font-family: var(--mono); font-size: 12px; line-height: 1.45; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-ctl); padding: 10px 14px; white-space: pre-wrap; word-break: break-word; }
details.sec { margin-top: 0; }
details.sec > summary { padding: 10px 0; border-bottom: 1px solid var(--grid); }
details.sec > summary .n { color: var(--rule); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 8px; }

/* ---- forms ---- */
form.tool { display: grid; gap: 14px; }
form.tool .grp { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-card); padding: 16px 18px 6px; }
form.tool .grp.g-who { border-left: 3px solid var(--turf); } form.tool .grp.g-when { border-left: 3px solid var(--gold); } form.tool .grp.g-how { border-left: 3px solid var(--pos); } form.tool .grp.g-opt { border-left: 3px solid var(--violet); }
form.tool .grp h3 { margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; } form.tool .grp h3 .hint { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
form.tool .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 22px; }
form.tool .f { padding: 6px 0 12px; }
form.tool .f.wide { grid-column: 1 / -1; }
form.tool label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
form.tool label .req { color: var(--neg); margin-left: 3px; }
form.tool .help { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
input[type=text], input[type=number], select { font: 14px var(--sans); color: var(--ink); background: var(--chip); border: 1px solid var(--rule); padding: 8px 11px; border-radius: var(--r-ctl); width: 100%; }
input[type=number] { max-width: 160px; font-variant-numeric: tabular-nums; }
input[type=text]:focus, input[type=number]:focus, select:focus { outline: 2px solid var(--pos); outline-offset: 1px; border-color: var(--pos); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pos); }
form.tool .sw { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0 12px; }
form.tool .sw input { position: absolute; opacity: 0; width: 0; height: 0; }
form.tool .sw .tog { position: relative; width: 38px; height: 22px; background: var(--rule); border-radius: 999px; flex: none; transition: background .15s; cursor: pointer; margin-top: 1px; }
form.tool .sw .tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
form.tool .sw input:checked + .tog { background: var(--pos); } form.tool .sw input:checked + .tog::after { transform: translateX(16px); } form.tool .sw input:focus-visible + .tog { outline: 2px solid var(--pos); outline-offset: 2px; }
form.tool .sw label { margin: 0; cursor: pointer; } form.tool .sw .help { margin: 2px 0 0; }
form.tool .launch { position: sticky; bottom: 0; background: var(--plane); border-top: 1px solid var(--grid); padding: 14px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
form.tool .launch .cmd { flex: 1 1 320px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--grid); border-radius: var(--r-ctl); padding: 8px 12px; white-space: pre-wrap; word-break: break-word; min-width: 0; }
form.tool .launch button { padding: 12px 22px; font-size: 13px; }
button, .btn { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--g-turf); color: #fff; border: 1px solid transparent; padding: 10px 18px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, box-shadow .2s, filter .15s; box-shadow: 0 4px 14px rgba(46,125,79,.25); }
button:hover, .btn:hover { transform: translateY(-2px); box-shadow: var(--glow-turf); filter: saturate(1.1); }
button:active, .btn:active { transform: translateY(0) scale(.98); }
button.ghost, .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); box-shadow: none; }
button.ghost:hover, .btn.ghost:hover { border-color: var(--pos); color: var(--pos); box-shadow: var(--shadow); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--pos); outline-offset: 2px; border-radius: 4px; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.foot { margin-top: 56px; padding-top: 14px; border-top: 2px solid transparent; border-image: var(--g-brand) 1; font-size: 12px; opacity: .9; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.foot .modeform { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foot .meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.foot button { padding: 5px 11px; font-size: 10.5px; }

@media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: 2px; } form.tool .fields { grid-template-columns: 1fr; } .top .meta { margin-left: 0; } .hbar { grid-template-columns: 1fr; gap: 2px 0; } .hbar .v { text-align: left; } th { position: static; } }   /* after the base th rule: below tablet width a table scrolls in its box, where sticky would sit mid-table */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation: none !important; transition: none !important; } .viz .ln.me, .viz .ln.pos, .viz .ln.gold, .viz .ln.hue { stroke-dashoffset: 0; } }

/* UI-E11: what were inline styles, now utilities. !important keeps the precedence the inline
   style had over every stylesheet rule; tests.test_webui_no_inline_styles keeps them from coming back. */
.u-background-var-rule { background: var(--rule) !important; }
.u-background-var-turf { background: var(--turf) !important; }
.u-d-block { display: block !important; }
.u-d-block--font-weight-400 { display: block !important; font-weight: 400 !important; }
.u-d-flex--align-items-center--gap-8px--mt-8px { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 8px !important; }
.u-d-flex--gap-12px--align-items-center--flex-wrap-wrap--mt-8px { display: flex !important; gap: 12px !important; align-items: center !important; flex-wrap: wrap !important; margin-top: 8px !important; }
.u-d-grid--gtc-repeat-auto-fit-minmax-240px-1fr--gap-12px--mt-6px { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: 12px !important; margin-top: 6px !important; }
.u-d-grid--gtc-repeat-auto-fit-minmax-280px-1fr--gap-12px--mt-10px { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: 12px !important; margin-top: 10px !important; }
.u-ff-var-sans { font-family: var(--sans) !important; }
.u-fs-20px--ls-0 { font-size: 20px !important; letter-spacing: 0 !important; }
.u-gcol-1-1 { grid-column: 1 / -1 !important; }
.u-gtc-1fr { grid-template-columns: 1fr !important; }
.u-gtc-auto-1fr { grid-template-columns: auto 1fr !important; }
.u-gtc-repeat-auto-fit-minmax-240px-1fr { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; }
.u-jc-flex-start { justify-content: flex-start !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0-0-10px { margin: 0 0 10px !important; }
.u-m-0-0-8px { margin: 0 0 8px !important; }
.u-m-10px-0-0 { margin: 10px 0 0 !important; }
.u-m-16px-0-6px { margin: 16px 0 6px !important; }
.u-m-6px-0-0 { margin: 6px 0 0 !important; }
.u-m-6px-0-0-1-1em--p-0 { margin: 6px 0 0 1.1em !important; padding: 0 !important; }
.u-m-6px-0-0-1-2em { margin: 6px 0 0 1.2em !important; }
.u-m-8px-0-0 { margin: 8px 0 0 !important; }
.u-m-8px-0-0--maxw-80ch { margin: 8px 0 0 !important; max-width: 80ch !important; }
.u-maxw-80ch { max-width: 80ch !important; }
.u-mb-8px { margin-bottom: 8px !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mr-6px { margin-right: 6px !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-10px { margin-top: 10px !important; }
.u-mt-12px { margin-top: 12px !important; }
.u-mt-14px { margin-top: 14px !important; }
.u-mt-16px { margin-top: 16px !important; }
.u-mt-18px { margin-top: 18px !important; }
.u-mt-28px { margin-top: 28px !important; }
.u-mt-6px { margin-top: 6px !important; }
.u-mt-8px { margin-top: 8px !important; }
.u-mt-auto { margin-top: auto !important; }
.u-p-12px-16px { padding: 12px 16px !important; }
.u-p-12px-16px--mt-10px { padding: 12px 16px !important; margin-top: 10px !important; }
.u-p-5px-10px--fs-11px { padding: 5px 10px !important; font-size: 11px !important; }
.u-pos-absolute { position: absolute !important; }
.u-w-120px--minw-120px { width: 120px !important; min-width: 120px !important; }
.u-w-3-2em { width: 3.2em !important; }
.u-w-3-4em { width: 3.4em !important; }
.u-w-3-6em { width: 3.6em !important; }
.u-w-4-4em { width: 4.4em !important; }
.u-w-4-5em { width: 4.5em !important; }
.u-w-7-2em { width: 7.2em !important; }
.u-w-85em--h-85em--stroke-var-turf--tfc-initial { width: .85em !important; height: .85em !important; stroke: var(--turf) !important; -webkit-text-fill-color: initial !important; }
.u-w-auto--maxw-20rem--d-inline-block { width: auto !important; max-width: 20rem !important; display: inline-block !important; }
.u-ws-normal { white-space: normal !important; }
/* after the utilities: a `hidden` attribute still hides an element that carries one (audit 2026-09-29) */
[hidden] { display: none !important; }
/* on-page alerts (window.pageAlert): they work at any address, including an http one where the
   browser refuses system notifications (owner report 2026-09-30) */
.alertstack { position: fixed; top: calc(var(--head-h, 0px) + 12px); right: 16px; z-index: 60; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.alertcard { pointer-events: auto; position: relative; background: var(--plane); color: var(--ink); border: 1px solid var(--grid); border-left: 4px solid var(--pos); border-radius: 12px; padding: 12px 36px 12px 14px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.35); animation: alert-in .35s cubic-bezier(.2,.8,.2,1) both; }
.alertcard b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.alertcard span { font-size: 12.5px; color: var(--ink-2); }
.alertcard button { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.alertcard button:hover, .alertcard button:focus-visible { color: var(--ink); background: var(--mid); }
.alertcard.out { animation: alert-out .25s ease-in both; }
@keyframes alert-in { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes alert-out { to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .alertcard, .alertcard.out { animation: none; } }

/* ======================================================================================
   Polish layer (2026-09-30): light, depth and motion in one place, built on the tokens above.
   Everything that moves stops under prefers-reduced-motion, and the script half stands down
   for an automated browser (navigator.webdriver) so a test reads the page at rest.
   ====================================================================================== */
:root { --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --ring-pos: 0 0 0 1px color-mix(in srgb, var(--pos) 32%, transparent);
  --lift: 0 18px 40px -22px rgba(11,11,11,.35), 0 2px 6px -2px rgba(11,11,11,.08);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: color-mix(in srgb, var(--pos) 26%, transparent); color: var(--ink); }
html { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; border: 2px solid var(--plane); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }

/* the backdrop: three pools of team colour drifting slowly behind everything, and a whisper of grain */
body::before { background:
    radial-gradient(900px 520px at 8% -8%, var(--turf-bg), transparent 62%),
    radial-gradient(820px 520px at 100% 0%, var(--violet-bg), transparent 62%),
    radial-gradient(760px 520px at 55% 115%, var(--pos-bg), transparent 66%);
  background-size: 130% 130%; animation: aurora 38s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .045; mix-blend-mode: multiply; }
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .035; } }
@keyframes aurora { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 50% { background-position: 18% 10%, 82% 14%, 40% 88%; } 100% { background-position: 6% 22%, 94% 6%, 62% 96%; } }

/* the header: glass that deepens once the page scrolls under it */
.top { view-transition-name: topbar; transition: box-shadow .3s var(--ease), background-color .3s; }
.top.scrolled { background: color-mix(in srgb, var(--plane) 90%, transparent); box-shadow: 0 14px 30px -24px rgba(0,0,0,.55); }
.brand { background-size: 220% auto; background-position: 0% 0; transition: background-position .9s var(--ease); }
.brand:hover { background-position: 100% 0; }
.tabs a { transition: color .2s var(--ease), transform .2s var(--ease); }
.tabs a:hover { transform: translateY(-1px); }
.tabs a.on { text-shadow: 0 0 18px color-mix(in srgb, var(--pos) 35%, transparent); }

/* headings: the brand gradient breathes, slowly */
h1 { background-size: 220% auto; animation: sheen 14s ease-in-out 1s infinite alternate; }
@keyframes sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
h2 { position: relative; }
h2::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 56px; background: var(--g-brand); border-radius: 2px; transform-origin: left; animation: grow .8s var(--ease-out) .15s both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* surfaces: a lift, a coloured edge and a light that follows the pointer (.spot, set by the script) */
.tile, .card, .chip, .mg, .og { will-change: transform; }
.tile:hover, .card:hover, .mg:hover, .og:hover { box-shadow: var(--ring-pos), var(--lift); border-color: transparent; }
.chip:hover { box-shadow: var(--ring-pos), var(--lift); }
.spot { isolation: isolate; }
.spot > .glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pos) 13%, transparent), color-mix(in srgb, var(--violet) 6%, transparent) 40%, transparent 70%); }
.spot:hover > .glow { opacity: 1; }
.tile .v { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 72%, var(--pos))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tile .v.pos { background: var(--g-pos); -webkit-background-clip: text; background-clip: text; } .tile .v.neg { background: linear-gradient(135deg, var(--neg), #f08a7a); -webkit-background-clip: text; background-clip: text; }

/* buttons: a sheen that sweeps across on hover, and a ripple where you press (the script) */
button, .btn { position: relative; overflow: hidden; isolation: isolate; }
button:not(.ghost)::before, .btn:not(.ghost)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
button:not(.ghost):hover::before, .btn:not(.ghost):hover::before { transform: translateX(120%); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: ripple .6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* tables: rows answer the pointer; my row carries a coloured edge */
tbody tr td { transition: background-color .2s var(--ease); }
tbody tr:hover td { background: color-mix(in srgb, var(--pos) 5%, var(--surface)); }
tr.me td:first-child { box-shadow: inset 3px 0 0 var(--pos); }
tr.me:hover td { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); }

/* bars, medals, pills */
.mini { box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.mini i { position: relative; overflow: hidden; }
.mini i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: glint 2.8s var(--ease) 1.1s 1 both; }
@keyframes glint { to { transform: translateX(100%); } }
.rank.r1 { position: relative; overflow: hidden; }
.rank.r1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-130%); animation: shine 5s var(--ease) 1.4s infinite; }
@keyframes shine { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.pill.OK, .pill.RUNNING, .pill.OPEN, .pill.COVERED { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--pos) 60%, transparent); }
.mark { transition: transform .35s var(--spring), box-shadow .3s var(--ease); }
a:hover .mark, .mark:hover, tr:hover .mark { transform: scale(1.08); }
.mark.lg:hover { transform: scale(1.05) rotate(-4deg); }

/* charts draw themselves in (the script sets the dash) */
svg .drawn { transition: stroke-dashoffset 1.3s var(--ease-out); }

/* sections that sit below the fold arrive as you scroll to them (the script adds .pre) */
.pre { opacity: 0; transform: translateY(18px); }
.pre-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* the public snapshot (webui.static_site): a countdown frozen at build time would be wrong */
.static-site .kick .in { display: none; }

/* a thin bar while the next page loads */
.navprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 95; background: var(--g-brand); box-shadow: 0 0 12px color-mix(in srgb, var(--pos) 60%, transparent); border-radius: 0 3px 3px 0; transition: width 2.4s cubic-bezier(.1,.7,.2,1), opacity .3s; }
.navprog.go { width: 82%; }

/* page changes cross-fade; the header stays put */
::view-transition-old(root) { animation: .22s ease-in both vt-out; }
::view-transition-new(root) { animation: .32s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }


/* the active tab reads as a lit pill, not only an underline */
.tabs a { border-radius: 8px 8px 0 0; padding-inline: 8px; }
.tabs a:hover { background: color-mix(in srgb, var(--pos) 5%, transparent); }
.tabs a.on { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pos) 10%, transparent)); }

/* the page head: a soft light behind the title and yard lines fading out to the right */
.head { position: relative; isolation: isolate; padding: 6px 0 2px; }
.head::before { content: ""; position: absolute; z-index: -1; left: -60px; top: -70px; width: 520px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pos) 14%, transparent), color-mix(in srgb, var(--turf) 8%, transparent) 55%, transparent); filter: blur(8px); pointer-events: none; }
.head::after { content: ""; position: absolute; z-index: -1; right: 0; top: -10px; bottom: -10px; width: min(46%, 560px); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 46px, var(--turf-line) 46px 47px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, transparent); mask-image: linear-gradient(90deg, transparent, #000 45%, transparent); opacity: .9; }

/* a section's icon sits in a small lit badge */
h2 svg.i { box-sizing: content-box; padding: 5px; border-radius: 9px; background: linear-gradient(135deg, var(--turf-bg), color-mix(in srgb, var(--pos) 10%, transparent)); box-shadow: inset 0 0 0 1px var(--turf-line); vertical-align: -0.45em; }

/* tiles and cards: glass with a faint wash of colour from the top */
.tile { background: linear-gradient(170deg, color-mix(in srgb, var(--surface) 86%, var(--pos) 3%) 0%, var(--surface) 55%); backdrop-filter: blur(6px); }
.card { background: linear-gradient(170deg, color-mix(in srgb, var(--surface) 90%, var(--turf) 2%) 0%, var(--surface) 60%); }
.tile .k svg.i, .card h4 svg.i { color: var(--pos); }
.note { background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 92%, var(--pos) 3%), var(--surface)); }

/* team marks carry a faint halo of their own colour (the mark's background) */
.mark { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--grid), 0 4px 12px -4px color-mix(in srgb, currentColor 0%, rgba(0,0,0,.35)); }
.mark.lg { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--turf-line), 0 12px 30px -8px rgba(0,0,0,.35); }

/* the footer: one quiet line under a gradient rule */
.foot { opacity: 1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent)); border-radius: 0 0 12px 12px; padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
  body::before, h1, h2::after, .mini i::after, .rank.r1::after { animation: none !important; }
  .pre { opacity: 1; transform: none; }
  button:not(.ghost)::before, .btn:not(.ghost)::before { display: none; }
}

@media (max-width: 600px) {
  table.data-dense {
    display: block;
  }
  table.data-dense thead {
    display: none;
  }
  table.data-dense tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
  }
}