/* Layout: a workspace. One sticky shell (top bar + context bar), then per section:
   Leaderboards = stats pane | chart over leaderboard (stats-workspace.md W1); Scout = one subject's page, or for a position
   group the Scorecard: target strip, filters, verdict | map, screener | panel. Specs: docs/specs/ui-revamp.md, scorecard-rehaul.md.
   Every colour is a token; a theme change only swaps tokens (R13.8). */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e4e7ec;
  --line: #e1e4e9;
  --line-2: #cdd2d9;
  --ink: #101418;
  --ink-2: #424a55;
  --ink-3: #5b6470;
  --accent: #c2410c;          /* pylon orange, deep enough for white text */
  --accent-ink: #b13f06;
  --on-accent: #ffffff;
  --series: #2a78d6;
  --series-wash: rgba(42, 120, 214, 0.10);
  --up: #096e34;
  --down: #b12727;
  --good: #0d6c31; --good-bg: #e2f3e8;
  --fair: #7a5600; --fair-bg: #fbf0d4;
  --weak: #a8400f; --weak-bg: #fbe6db;
  --bad: #a82827;  --bad-bg: #f8e0df;
  --seq-1: #86b6ef; --seq-2: #5598e7; --seq-3: #256abf; --seq-4: #104281;
  --team-a: #2a78d6; --team-b: #c2410c; /* the two teams in Matchups; validated pair (dataviz validator) */
  /* rows on a chart (stats-workspace W2): fixed order, validated with the dataviz validator, adjacent pairs, light surface */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300;
  --code-bg: #12151b; --code-ink: #e6e9ee; --code-sel: rgba(57, 135, 229, 0.35);
  --shadow: 0 8px 28px rgba(16, 20, 24, 0.14);
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px;
  --r-lg: 10px;
  --hdr: 104px;               /* measured and updated by app.js */
  --status-h: 28px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1015; --surface: #151820; --surface-2: #1c2029; --surface-3: #252a35; --line: #242a35; --line-2: #333a48;
    --ink: #e6e9ee; --ink-2: #b0b7c3; --ink-3: #8c95a3;
    --accent: #f0782f; --accent-ink: #f59a5f; --on-accent: #1a0d04;
    --series: #3987e5; --series-wash: rgba(57, 135, 229, 0.16);
    --up: #3fcf7f; --down: #f59999;
    --good: #5ccc86; --good-bg: #133022; --fair: #e0b84a; --fair-bg: #2e2810; --weak: #f29d71; --weak-bg: #34200f; --bad: #f39c9a; --bad-bg: #361717;
    --code-bg: #0b0d11;
    --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #86b6ef;
    --team-a: #3987e5; --team-b: #e2692a;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0e1015; --surface: #151820; --surface-2: #1c2029; --surface-3: #252a35; --line: #242a35; --line-2: #333a48;
    --ink: #e6e9ee; --ink-2: #b0b7c3; --ink-3: #8c95a3;
    --accent: #f0782f; --accent-ink: #f59a5f; --on-accent: #1a0d04;
    --series: #3987e5; --series-wash: rgba(57, 135, 229, 0.16);
    --up: #3fcf7f; --down: #f59999;
    --good: #5ccc86; --good-bg: #133022; --fair: #e0b84a; --fair-bg: #2e2810; --weak: #f29d71; --weak-bg: #34200f; --bad: #f39c9a; --bad-bg: #361717;
    --code-bg: #0b0d11;
    --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #86b6ef;
    --team-a: #3987e5; --team-b: #e2692a;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 10px 32px rgba(0, 0, 0, 0.5); } }
:root[data-theme="dark"] { --shadow: 0 10px 32px rgba(0, 0, 0, 0.5); }
/* logo kit colours (docs/specs/logo-kit.md L7): the kit's own, per theme, not the UI's; the symbol is always turf */
:root { --brand-tile: #0E1116; --brand-ink: #0E1116; --brand-io: #6B7480; --brand-turf: #1FC97B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-tile: #1C222C; --brand-ink: #FFFFFF; --brand-io: #8D97A6; } }
:root[data-theme="dark"] { --brand-tile: #1C222C; --brand-ink: #FFFFFF; --brand-io: #8D97A6; }
/* contrast.md H5–H8: High contrast (data-contrast="more") on top of either theme. Text ≥ 7:1 (light) / 8:1 (dark),
   lines ≥ 2.5:1 / 3:1. Dark darkens the surfaces too (D1), so red and green keep their colour. This light block has the
   base dark selectors' specificity and comes later, so both dark blocks set every token it sets (H8). */
:root[data-contrast="more"] {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f3; --surface-3: #e4e7ec; --line: #9aa3af; --line-2: #7a8390;
  --ink: #000000; --ink-2: #2b313a; --ink-3: #495059; --accent-ink: #8a3105;
  --up: #075b2b; --down: #942020; --good: #0b5a29; --good-bg: #e2f3e8; --fair: #684900; --fair-bg: #fbf0d4;
  --weak: #85330c; --weak-bg: #fbe6db; --bad: #8d2221; --bad-bg: #f8e0df;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="more"]:not([data-theme="light"]) {
    --bg: #06070a; --surface: #0a0c10; --surface-2: #12151b; --surface-3: #1b1f27; --line: #4d5668; --line-2: #5a6478;
    --ink: #f5f7fa; --ink-2: #c9cfd8; --ink-3: #adb3bd; --accent-ink: #f59f66;
    --up: #3fcf7f; --down: #f59999; --good: #67d08e; --good-bg: #0e2a1b; --fair: #e0b84a; --fair-bg: #2a230a;
    --weak: #f3a37a; --weak-bg: #2e1b0a; --bad: #f39c9a; --bad-bg: #2c1010;
  }
}
:root[data-contrast="more"][data-theme="dark"] {
    --bg: #06070a; --surface: #0a0c10; --surface-2: #12151b; --surface-3: #1b1f27; --line: #4d5668; --line-2: #5a6478;
    --ink: #f5f7fa; --ink-2: #c9cfd8; --ink-3: #adb3bd; --accent-ink: #f59f66;
    --up: #3fcf7f; --down: #f59999; --good: #67d08e; --good-bg: #0e2a1b; --fair: #e0b84a; --fair-bg: #2a230a;
    --weak: #f3a37a; --weak-bg: #2e1b0a; --bad: #f39c9a; --bad-bg: #2c1010;
}

/* ---------- base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
@media (max-width: 899px) { html { scroll-padding-top: 8px; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; min-width: 0; }
a { color: var(--accent-ink); }
code { font-family: var(--font-mono); font-size: 0.88em; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }
.num, .tbl td, .mini, .plist { font-variant-numeric: tabular-nums; }

/* ---------- shell: top bar */
.shell { background: var(--surface); border-bottom: 1px solid var(--line); z-index: 20; padding-top: env(safe-area-inset-top, 0px); }
@media (min-width: 900px) { .shell { position: sticky; top: 0; } }
.topbar, .ctxbar { display: flex; align-items: center; gap: 12px 16px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.topbar { height: 54px; }
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; color: var(--ink); flex: none; } /* the wordmark's viewBox carries the kit's spacing */
.brand-tile { fill: var(--brand-tile); } .brand-turf { fill: var(--brand-turf); } .brand-ink { fill: var(--brand-ink); } .brand-io { fill: var(--brand-io); }
.tabs { display: flex; gap: 2px; align-self: stretch; }
.tabs button { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--font-body); color: var(--ink-2); background: none; border: 0; padding: 0 12px; cursor: pointer; white-space: nowrap; position: relative; }
.tabs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* search (combobox) */
.search { position: relative; flex: 1 1 260px; max-width: 420px; margin-left: auto; min-width: 0; }
.search-icon { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.search input[type="search"] { width: 100%; height: 34px; padding: 0 34px 0 34px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; font: 500 13.5px/1 var(--font-body); color: var(--ink); }
.search input::-webkit-search-cancel-button { display: none; }
.search input:hover { border-color: var(--line-2); }
.search input:focus { background: var(--surface); border-color: var(--series); outline: none; box-shadow: 0 0 0 3px var(--series-wash); }
.search-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--font-mono); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; pointer-events: none; }
.search input:focus ~ .search-key { display: none; }
.search-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: min(360px, calc(100vw - 32px)); }
.search-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1px 10px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; align-items: baseline; }
.search-list li[aria-selected="true"], .search-list li:hover { background: var(--surface-2); }
.search-list .k { grid-row: span 2; align-self: center; font: 600 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.search-list .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .n mark { background: none; color: var(--accent-ink); }
.search-list .d { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .none { display: block; color: var(--ink-3); cursor: default; }
.search-list .none:hover { background: none; }

/* theme control */
.theme { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; flex: none; }
.theme button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink-3); cursor: pointer; }
.theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.theme button span, .theme-more { display: none; } /* the labels and the button show only in the phone panel (below) */
/* season pill (docs/specs/top-bar.md TB1): the season sits in the top bar like an account switcher */
.season-pill { display: inline-flex; align-items: center; height: 34px; border-radius: 999px; background: var(--surface-2); flex: none; }
.season-pill[hidden] { display: none; }
.season-pill select { height: 34px; padding: 0 28px 0 14px; border: 1px solid transparent; border-radius: 999px; background-color: transparent;
  font: 700 13.5px/1 var(--font-body); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.season-pill select:hover { border-color: var(--line-2); }
.season-pill select:focus-visible { outline: 2px solid var(--series); outline-offset: 0; }
.season-pill em { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font: 600 11.5px/1 var(--font-body); font-style: normal;
  color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.season-pill em[hidden] { display: none; }
.season-pill em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 1399px) { .season-pill em { font-size: 0; gap: 0; margin-right: 10px; } } /* TB1.2 (amended): the dot alone, so the search keeps 200 px */
/* support link (docs/specs/support-link.md): icon + text from 1200px, icon only below */
.support { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-2); font: 600 12.5px/1 var(--font-body); text-decoration: none; white-space: nowrap; flex: none; }
.support svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.support:hover { color: var(--ink); }
@media (max-width: 1399px) { .support { width: 34px; padding: 0; justify-content: center; } .support span { display: none; } } /* SL6 (amended 2026-10-19) */

/* phone top bar: one row of name + season + support + theme, then the search. The theme group is a panel from one
   button; the season select draws its own chevron (gradients, so img-src needs no data:) so the pill stays narrow */
@media (max-width: 719px) {
  .season-pill select { appearance: none; -webkit-appearance: none; padding: 0 26px 0 13px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10.5px) 52%; background-size: 4.5px 4.5px; background-repeat: no-repeat; }
  .theme-more { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; flex: none;
    background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
  .theme-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .theme-more[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .theme { display: none; position: absolute; z-index: 40; top: 48px; right: max(16px, env(safe-area-inset-right, 0px)); width: 196px;
    flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .theme.open { display: flex; }
  .theme button { width: auto; height: 40px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: var(--r);
    font: 600 14px/1 var(--font-body); color: var(--ink-2); }
  .theme button span { display: inline; }
  .theme svg { width: 17px; height: 17px; }
  .theme button[aria-pressed="true"] { background: var(--surface-2); box-shadow: none; }
  .theme button[aria-pressed="true"]::after { content: ""; width: 5px; height: 10px; margin: -3px 3px 0 auto; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .theme [data-contrast-toggle] { margin-top: 5px; position: relative; }
  .theme [data-contrast-toggle]::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; border-top: 1px solid var(--line); }
}
@media (max-width: 359px) { .brand-name { display: none; } } /* 320 px phones: the icon alone (logo-kit L8) */

/* ---------- shell: context bar */
.ctxbar { min-height: 46px; padding-block: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.ctl { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-body); color: var(--ink-3); }
.ctl.stack { flex-direction: column; align-items: stretch; gap: 5px; }
.ctl em { font-style: normal; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
select, input[type="number"], input[type="text"], input[type="search"], textarea {
  font: 500 13.5px/1.3 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 6px 9px; min-width: 0; max-width: 100%; }
select { padding-right: 26px; height: 32px; }
select:hover, input:hover, textarea:hover { border-color: var(--ink-3); }
#ctl-min { width: 72px; height: 32px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg button { font: 600 12.5px/1 var(--font-body); padding: 7px 12px; border: 0; background: none; color: var(--ink-2); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
/* defenders.md REQ-051: the group switch's Offense and Defense sets; a thin rule between them, labels at phone width */
.seg-set { display: inline-flex; gap: 2px; align-items: center; }
.seg-set + .seg-set { border-left: 1px solid var(--line); margin-left: 3px; padding-left: 4px; }
/* mobile-bars MB2.1: one row at every width; Teams and each set share the row, split by thin rules. Under 700 px the
   switch fills the bar and the buttons share its width (7 buttons are 296 px at 12 px padding; 8 px fits 360 px) */
#ctl-entity > button + .seg-set, #scout-groups > button + .seg-set { border-left: 1px solid var(--line); margin-left: 3px; padding-left: 4px; }
@media (max-width: 699px) {
  #ctl-entity, #scout-groups { display: flex; width: 100%; }
  #ctl-entity .seg-set, #scout-groups .seg-set { flex: 3 1 auto; }
  #ctl-entity button, #scout-groups button { flex: 1 1 auto; padding-inline: 6px; }
}
/* U1: the position group sets the scope of every view, so its active state is the strongest one */
#ctl-entity button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 700; box-shadow: none; }

/* ---------- shell: status bar */
.statusbar { height: var(--status-h); display: flex; align-items: center; gap: 14px;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.statusbar span { overflow: hidden; text-overflow: ellipsis; }
/* disclaimer: static so it shows before data loads; wraps on every width */
.disclaimer { margin: 0; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface); font-size: 11px; line-height: 1.45; color: var(--ink-3); }

main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); max-width: 1680px; margin: 0 auto; }

/* ---------- common pieces */
.eyebrow { margin: 0 0 3px; font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); }
.caption { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; }
.hint { font: 500 12px/1.3 var(--font-body); color: var(--ink-3); }
.tn { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); max-width: 75ch; }
.tn.warn { color: var(--weak); font-weight: 600; }
.empty { color: var(--ink-3); padding: 14px 4px; margin: 0; }
.panel-sec { margin-top: 20px; }
.panel-sec > h3 { margin: 0 0 10px; font: 700 14px/1.3 var(--font-body); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.panel-sec h3 select { font-size: 13px; height: 28px; padding: 2px 24px 2px 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-body); padding: 9px 13px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.btn[aria-pressed="true"] svg { fill: currentColor; }
.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--bad); font-size: 12px; }
/* url-state U2.3: what a view link could not open */
.link-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--weak);
  border-radius: 8px; background: var(--weak-bg); color: var(--ink); font-size: 13px; line-height: 1.45; }
.link-note[hidden] { display: none; }
.link-note ul { margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.link-note li + li { margin-top: 4px; }
.formula { display: block; padding: 10px 12px; background: var(--code-bg); color: var(--code-ink); border-radius: var(--r); white-space: pre-wrap; word-break: break-word; font-size: 12.5px; }

.grade { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); padding: 4px 8px 4px 6px; border-radius: 999px; width: fit-content; white-space: nowrap; }
.grade i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.grade.g4, .grade.g3 { color: var(--good); background: var(--good-bg); }
.grade.g3 i { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.grade.g2 { color: var(--fair); background: var(--fair-bg); }
.grade.g1 { color: var(--weak); background: var(--weak-bg); }
.grade.g0 { color: var(--bad); background: var(--bad-bg); }
.grade.g-1 { color: var(--ink-3); background: var(--surface-2); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--ink-3); }

/* ---------- tables */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); position: relative; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl .dim { color: var(--ink-3); }
.tbl .rank { color: var(--ink-3); width: 2.6em; }
.tbl .val { font-weight: 600; }
.who .nm { font-weight: 600; white-space: nowrap; }
.who .sub, .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.tbl.compact td, .tbl.compact th { padding: 6px 10px; }
.tbl tr.total td { font-weight: 700; border-top: 1px solid var(--line); }

/* ---------- leaderboards: stat list | table | detail */
.lb-grid { display: grid; grid-template-columns: 212px minmax(0, 1fr) minmax(340px, 0.6fr); gap: 16px; align-items: start; }
.rail, .detail { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); scrollbar-width: thin; }
.rail { padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.rail-filter { width: 100%; height: 32px; }
.rail-list h4, .pins h4 { margin: 10px 6px 4px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.rail-list button, .pins button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font: 500 13px/1.25 var(--font-body); color: var(--ink-2); background: none; border: 0; border-radius: var(--r); padding: 6px 8px; cursor: pointer; }
.rail-list button:hover, .pins button:hover { background: var(--surface-2); color: var(--ink); }
.rail-list button[aria-current="true"] { background: var(--series-wash); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--series); }
.rail-list .yours { color: var(--accent-ink); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pins:empty { display: none; }
.pins { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pins button .pv { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pins button:disabled { cursor: default; opacity: 0.7; }
.pins button:disabled:hover { background: none; }
.rail .empty { padding: 6px 8px; font-size: 12.5px; }

.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.lb-title h1 { margin: 0; font: 700 26px/1.1 var(--font-body); letter-spacing: -0.01em; }
.lb-pick { display: none; }
.lb tbody tr { cursor: pointer; }
.lb tbody tr:hover td { background-color: var(--surface-2); }
.lb tbody tr.sel td { background-color: var(--surface-2); } /* explorer-table ET6.3 */
.lb tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lb tbody tr:focus-visible { outline: none; }
.lb tbody tr:focus-visible td { background-color: var(--surface-2); }
.lb .delta { font-size: 12.5px; }
.lb td, .lb th { padding-inline: 8px; }
.lb .who .nm { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.pct-cell { width: 104px; }
.pctbar { display: grid; grid-template-columns: minmax(40px, 1fr) 2.2em; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); text-align: right; }
.pbar { display: block; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.pbar > span { display: block; height: 100%; background: var(--series); border-radius: 3px; }
.spark-cell { width: 88px; }
.spark { display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--series); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--series); }
.spark path.avg { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.7; }

/* detail panel */
.detail { padding: 18px; }
.dt-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 14px; }
.dt-bar .seg button { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.back { display: none; }
.detail h2 { margin: 0; font: 700 24px/1.15 var(--font-body); letter-spacing: -0.01em; }
.desc { margin: 6px 0 12px; color: var(--ink-2); max-width: 62ch; }
.dt-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hero-k { margin: 16px 0 0; font: 600 12.5px/1.3 var(--font-body); color: var(--ink-2); }
.hero-k .when { color: var(--ink-3); font-weight: 500; }
.hero { margin: 2px 0 4px; font: 700 48px/1.05 var(--font-body); letter-spacing: -0.02em; }
.hero-sub { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.hero-sub b { color: var(--ink); }
.pf-note { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r); background: var(--fair-bg); color: var(--fair); font-size: 12.5px; font-weight: 600; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.legend .lg { display: inline-flex; align-items: center; white-space: nowrap; }
.legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--series); vertical-align: middle; margin-right: 6px; }
.legend i.avg { border-top: 2px dashed var(--ink-3); }
.pgroups h4 { margin: 14px 0 4px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.plist { list-style: none; margin: 0; padding: 0; }
.plist button { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 72px 2em; gap: 10px; align-items: center; padding: 5px 6px; margin: 0 -6px; width: calc(100% + 12px);
  font: 500 13px/1.3 var(--font-body); color: var(--ink); background: none; border: 0; border-radius: var(--r); cursor: pointer; text-align: left; }
.plist button:hover { background: var(--surface-2); }
.plist button[aria-current="true"] { background: var(--series-wash); }
.plist .pm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .pv { text-align: right; font-weight: 600; }
.plist .pp { text-align: right; color: var(--ink-3); font-size: 12px; }

/* test tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tk { margin: 0; font: 600 10.5px/1.25 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.tq { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.tb { margin: 2px 0 0; font: 700 26px/1 var(--font-body); letter-spacing: -0.01em; }
.similar { margin-top: 14px; }
.card > .similar { margin-top: 0; }
.similar ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.similar li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 3.2em; gap: 10px; align-items: center; font-size: 13px; }
.rbar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.rbar > span { display: block; height: 100%; background: var(--ink-3); border-radius: 3px; }
.similar .num { text-align: right; color: var(--ink-2); }

/* ---------- charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font: 500 10.5px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .axis-label { fill: var(--ink-2); font: 600 11px var(--font-body); }
.chart .bar { fill: var(--series); }
.chart .mean { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .marker { stroke: var(--accent); stroke-width: 2; }
.chart .marker-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .marker-label { fill: var(--ink); font: 600 11.5px var(--font-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.chart .dot { fill: var(--series); fill-opacity: 0.55; stroke: var(--surface); stroke-width: 0.8; }
.chart .dot.hl { fill: var(--accent); fill-opacity: 1; }
.chart .fit { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.chart .hover-ring { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.chart .violin-fill { fill: var(--series); fill-opacity: 0.18; }
.chart .violin-edge { stroke: var(--series); stroke-width: 1.5; }
.chart .violin-iqr { fill: var(--series); fill-opacity: 0.55; }
.chart .violin-median { stroke: var(--surface); stroke-width: 2.5; }
.chart .violin-median-dot { fill: var(--surface); stroke: var(--series); stroke-width: 2; }
.chart .stab-line { stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.trend { touch-action: pan-y; cursor: crosshair; }
.chart.trend:focus-visible { outline-offset: 4px; }
.chart .trend-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .trend-area { fill: var(--series-wash); stroke: none; }
.chart .trend-avg { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .trend-end { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--ink-3); stroke-width: 1; pointer-events: none; }
.chart .trend-dot { fill: var(--surface); stroke: var(--series); stroke-width: 2.5; pointer-events: none; }
.chart-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--bg); font: 500 12px/1.45 var(--font-body); padding: 7px 10px; border-radius: 6px; max-width: 260px; box-shadow: var(--shadow); }
.chart-tip .tip-dir { display: inline-block; margin-top: 3px; opacity: .78; } /* stat-explanations: the direction line */
.dist-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 5px; padding: 2px; }
.dist-tab { font: 600 11.5px/1 var(--font-body); padding: 5px 10px; border: 0; background: none; color: var(--ink-3); border-radius: 4px; cursor: pointer; }
.dist-tab:hover { color: var(--ink); }
.dist-tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/* ---------- leaderboards workspace (docs/specs/stats-workspace.md W1–W4) */
/* ≥ 1200: stats pane | chart over leaderboard, filling the window below the shell; each pane scrolls inside (W1.9) */
.ws { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
.stats-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sp-bar { display: none; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sp-bar h2 { margin: 0; font: 700 15px/1.2 var(--font-body); }
.sp-list { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; min-height: 0; flex: 1; }
.sp-tools { display: flex; gap: 8px; align-items: center; padding: 0 2px; }
.sp-tools .rail-filter { flex: 1; min-width: 0; }
.sp-order span { display: none; }
.sp-order select { height: 32px; }
.sp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--r); }
.sp-item.cur { background: var(--series-wash); box-shadow: inset 2px 0 0 var(--series); }
.sp-item .sp-name { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left; font: 500 13px/1.25 var(--font-body); color: var(--ink-2); background: none; border: 0; border-radius: var(--r); padding: 6px 8px; cursor: pointer; }
.sp-item .sp-name > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-item .sp-name:hover { color: var(--ink); background: var(--surface-2); }
.sp-item.cur .sp-name { color: var(--ink); font-weight: 600; }
.sp-num { font: 500 11.5px var(--font-body); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-col { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r); background: none; color: var(--ink-3); cursor: pointer; }
.sp-col svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sp-col:hover { background: var(--surface-2); color: var(--ink); }
.sp-col[aria-pressed="true"] { color: var(--series); }
.sp-col[aria-pressed="true"] svg { fill: var(--series-wash); }
.sp-act { grid-column: 1 / -1; padding: 0 8px 6px; font-size: 12px; }
.sp-new { margin: 0 2px; justify-content: center; }
.sp-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 8px 0; padding: 8px 10px; font: 600 12.5px/1.2 var(--font-body); color: var(--ink-2); background: var(--surface-2); border: 0; border-radius: var(--r); cursor: pointer; }
.sp-fold svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sp-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.sp-fold[aria-expanded="true"] + .sp-list { flex: none; max-height: 40%; border-bottom: 1px solid var(--line); }
.stats-pane .editor { border: 0; border-radius: 0; background: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; flex: 1; min-height: 0; position: static; max-height: none; }
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-head h2 { margin: 0; font: 700 15px/1.2 var(--font-body); }
/* stat-templates.md: one list of ready formulas; each row = name + tag, then leaders (stacked logos or photos) and the
   leader's team colour as the left bar (ST3.2). The pressed row is the Draft's template (ST1.3); its tint stays ≤ 10%. */
.tpl { margin: 12px 0 14px; }
.tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 0 6px; border: 0; background: none; cursor: pointer;
  font: 700 11.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }
.tpl-head .hint { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.tpl-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tpl-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.tpl-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tpl .tn { margin: 0 0 8px; }
.tpl-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.tpl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name how" "stack lead lead"; align-items: center; gap: 3px 8px;
  width: 100%; padding: 7px 10px 7px 13px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--tc, var(--line-2)); }
.tpl-row:last-child { border-bottom: 0; }
.tpl-row:hover { background: var(--surface-2); }
.tpl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tpl-row[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 3px 0 0 var(--tc, var(--line-2)), inset 0 0 0 1px var(--accent); }
.tpl-row[aria-pressed="true"] .tpl-name::after { content: " ✓"; color: var(--accent-ink); }
.tpl-name { grid-area: name; min-width: 0; font: 600 13.5px/1.25 var(--font-body); color: var(--ink); }
.tpl-how { grid-area: how; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 600 10.5px/1.3 var(--font-body); white-space: nowrap; }
.tpl-row:hover .tpl-how { background: var(--surface-3); }
.tpl-stack { grid-area: stack; display: inline-flex; min-height: 22px; }
.tpl-stack:empty { display: none; }
.tpl-stack .logo, .tpl-stack .face { border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.tpl-stack > * + * { margin-left: -6px; }
.tpl-lead { grid-area: lead; display: flex; min-width: 0; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.tpl-lead > * { overflow: hidden; text-overflow: ellipsis; }
.tpl-v { flex: none; white-space: pre; } /* a long name gives way; the value never does */
.tpl-stack:empty + .tpl-lead, .tpl-row:has(.tpl-stack:empty) .tpl-lead { grid-column: 1 / -1; }
.tpl-who { min-width: 0; font-weight: 600; color: var(--ink-2); }
.tpl-lead b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tpl-wait { font-style: italic; }

.ws-main { --split: 58%; display: grid; grid-template-rows: minmax(0, var(--split)) 10px minmax(0, 1fr); min-width: 0; min-height: 0; }
.ws-main.v-chart { grid-template-rows: minmax(0, 1fr) 0 auto; }
.ws-main.v-lb { grid-template-rows: auto 0 minmax(0, 1fr); }
.ws-main.v-compact { grid-template-rows: auto 0 minmax(0, 1fr); }
.ws-main.v-chart .lb-pane > :not(.pane-bar) { display: none; }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.pane-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pane-btns { display: inline-flex; gap: 4px; margin-left: auto; }
.pane-btns .btn[aria-pressed="true"] { background: var(--surface-2); }
.chart-xc { display: contents; } /* an empty slot adds no gap */
.sp-open { display: none; }
.split { cursor: row-resize; position: relative; touch-action: none; }
.split::after { content: ""; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--line-2); }
.split:hover::after, .split:focus-visible::after { background: var(--series); }
.split:focus-visible { outline: none; }
.chart-main { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 8px 14px 6px; overflow-y: auto; scrollbar-width: thin; } /* a short pane scrolls, so its buttons stay reachable */
.chart-head { flex: none; }
.chart-body { flex: 1; min-height: 80px; overflow-y: auto; scrollbar-width: thin; }
.chart-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 6px; }
.chart-foot .tn { margin: 0; }
/* explorer-tests-pane: with the Tests pane docked the chart is about 700 px wide; the footer stays one line so the plot
   keeps its height (workbench V3.5). Compact buttons; the "top 3" hint gives way first, its full text in its title. */
.chart-foot .seg button { padding: 5px 9px; font-size: 12px; }
.chart-foot .foot-hint { flex: 1 1 0; min-width: 60px; max-width: none; white-space: nowrap; /* not .tn's 75ch: the hint may use the whole free row */ overflow: hidden; text-overflow: ellipsis; }
.chart-main { container-type: inline-size; }
@container (max-width: 760px) { .chart-foot .foot-hint { display: none; } } /* the leaderboard note and + Compare say the same */
.ch-name { margin: 0; font: 700 14px/1.3 var(--font-body); }
.ch-hero { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ch-hero .ch-name { flex-basis: 100%; }
@media (min-width: 1200px) { .ch-hero .ch-name { flex-basis: auto; margin-right: 4px; } }
.ch-hero .hero { margin: 0; font: 700 28px/1.1 var(--font-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ch-when { font-size: 12.5px; }
.chart-head .legend { flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; }
.chart-head .legend b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 5px; }
.chart-head .desc { margin: 4px 0; color: var(--ink-2); font-size: 13px; }
.chart-head .formula { margin: 4px 0; }
.chart-mini { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 14px; }
.chart-mini .cm-name { font-weight: 700; }
.chart-mini .cm-who { color: var(--ink-2); font-size: 12.5px; }
.chart-mini .cm-val { font: 700 20px/1 var(--font-body); font-variant-numeric: tabular-nums; }
/* series swatches and lines: identity is also in the legend text, so colour is never the only cue */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--series); flex: none; }
.sw.avg { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--ink-3); background: none; }
.sw.band { width: 16px; border-radius: 2px; background: var(--surface-3); }
.sw.dotgray { background: var(--line-2); }
.c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); } .c4 { --c: var(--c4); } .c5 { --c: var(--c5); } .c6 { --c: var(--c6); }
.sw[class*=" c"] { background: var(--c); }
.legend i.sw { width: 10px; height: 10px; border: 0; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.sw.avg { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--ink-3); }
.legend i.sw.band { width: 16px; border-radius: 2px; }
.chart .band { fill: var(--surface-3); fill-opacity: 0.7; }
.chart .ln { fill: none; stroke: var(--c, var(--series)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.bold { stroke-width: 3.2; }
.chart .pt { fill: var(--c); }
.chart .dot-on { fill: var(--surface); stroke: var(--c); stroke-width: 2.5; pointer-events: none; }
.chart .vol { fill: var(--ink-3); fill-opacity: 0.45; }
.chart .season-edge { stroke: var(--line-2); stroke-dasharray: 2 3; }
.chart.tchart { touch-action: pan-y; cursor: crosshair; }
.chart.faded .ln { opacity: 0.4; }
.chart .pdot { fill: var(--line-2); stroke: var(--surface); stroke-width: 1; }
.chart .pdot.on { fill: var(--c); stroke-width: 2; }
.chart .quad { fill: var(--ink-3); font: 600 10.5px var(--font-body); }
.chart .mk { stroke: var(--c); stroke-width: 2; }
.chart .mk-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.pchart { cursor: pointer; }
.tests { display: flex; flex-direction: column; }
.tests > .panel-sec:first-child { margin-top: 0; }

.lb-bar { padding-block: 10px; }
.lb-title h1 { margin: 0; font: 700 18px/1.2 var(--font-body); }
.lb-title .caption { margin: 2px 0 0; }
.lb-actions { display: inline-flex; align-items: center; gap: 6px; }
.lb-actions .sel-name { font-weight: 600; font-size: 13px; }
.lb-wrap { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.lb-note { padding: 6px 12px 8px; margin: 0; border-top: 1px solid var(--line); }
.lb th.col, .lb td.cv { min-width: 92px; }
.lb th.col .sort { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.lb td.cv .cval { display: block; font-weight: 600; }
.lb td.cv .pbar { height: 4px; margin-top: 3px; margin-left: auto; width: 64px; }
.lb td.draft, .lb th.draft { box-shadow: inset 2px 0 0 var(--accent); }
.lb td.draft.stale { opacity: 0.45; }
.tag-draft { display: inline-block; margin-right: 5px; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; letter-spacing: 0.06em; }
.lb td.cmp, .lb th.cmp { width: 30px; padding-right: 0; }
.lb tbody tr.hot td { background-color: var(--surface-2); }
.lb .who .nm { display: flex; align-items: center; }
.lb .sort { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.lb .sort:hover { color: var(--ink); }
.lb th.num .sort { text-align: right; }


/* ---------- leaderboards workbench (docs/specs/leaderboards-workbench.md) */
body[data-tab="explorer"] main { max-width: none; } /* V1.1 */
/* V1.2–V1.6: dense rows, value and bar on one line, fixed stat columns, spare width at the end, sticky name */
.lb td { padding-block: 3px; line-height: 1.25; }
.lb th { padding-block: 6px; }
.lb-pane .lb-bar { padding-block: 6px; }
.lb-pane .lb-title h1 { font-size: 16px; }
.lb-pane .lb-note { padding-block: 4px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.lb th { white-space: normal; vertical-align: bottom; }
.lb th.col, .lb td.cv { width: 112px; min-width: 112px; max-width: 112px; }
.lb th.col .sort { max-width: none; overflow: visible; white-space: normal; text-align: right; }
.lb td.cv { white-space: nowrap; }
.lb td.cv .cval { display: inline-block; min-width: 6ch; text-align: right; }
.lb td.cv .pbar { display: inline-block; width: 40px; height: 4px; margin: 0 0 0 8px; vertical-align: middle; }
.lb td.cv .pbar.none { background: none; }
.lb .who .nm { display: flex; align-items: baseline; gap: 6px; max-width: 240px; white-space: nowrap; overflow: hidden; }
.lb .who .nt { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lb .who .sub { display: inline; }
.lb .form-col { width: 96px; min-width: 96px; white-space: nowrap; }
.lb .form-col .delta { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lb .stk { position: sticky; z-index: 1; background: var(--surface); }
.lb th.stk { z-index: 3; }
.lb .cmp.stk { left: 0; width: 30px; min-width: 30px; }
.lb .rank.stk { left: 30px; width: 36px; min-width: 36px; }
.lb .who.stk { left: 66px; box-shadow: inset -1px 0 0 var(--line); }
@media (max-width: 899px) { .lb .stk { position: static; } }

/* ---------- explorer table (docs/specs/explorer-table.md) */
/* ET6.4: sentence-case headers */
.lb th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-2); }
/* ET1: media in the name cell; the cell keeps its content width, so spare width goes to the Lead column (ET2.7) */
.lb th.who, .lb td.who { width: 1px; }
.lb .who .nm { align-items: center; gap: 8px; max-width: 280px; }
.lb .who .sub { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.lb-wrap { container-type: inline-size; }
@container (max-width: 719px) { .lb .who .sub { display: none; } } /* ET1.3 */
/* ET2: the Lead column: value, then the Gap bar from the average (better points right). No column wash (ET2.8). */
.lb th.lead, .lb td.lead { width: 1px; min-width: 0; max-width: none; } /* content width; the table spreads spare width over all columns */
.lb th.lead { text-align: left; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.lb th.col.lead .sort { text-align: left; }
.lb td.lead { position: relative; }
.lb td.lead .lv { display: flex; align-items: center; gap: 10px; }
.lb td.lead .cval { flex: none; }
.gap { position: relative; flex: none; width: 240px; height: 10px; }
@container (max-width: 1099px) { .gap { width: 160px; } }
@container (max-width: 719px) { .gap { width: 96px; } }
.gap-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--ink-3); }
.gap-bar { position: absolute; top: 2px; height: 6px; border-radius: 2px; }
.gap-bar.up { background: var(--up); }
.gap-bar.down { background: var(--down); }
/* ET2.4: the Average line: a dashed rule on the first row past the average, its label on the rule. z-index 0 keeps the
   label above the row cells and under the sticky header. */
.lb tbody tr.avg-from td { background-image: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0; }
.avg-tag { position: absolute; z-index: 0; top: 0; right: 8px; transform: translateY(-50%); padding: 2px 6px; border-radius: 4px; border: 1px dashed var(--ink-3); background: var(--surface); color: var(--ink-2); font: 600 10.5px/1 var(--font-body); white-space: nowrap; pointer-events: none; }
/* ET3: other Columns: Rank tint in one colour for every row */
.lb td.cv .tv { padding: 2px 6px; margin-right: -6px; border-radius: 5px; }
.lb td.tint .tv { background: color-mix(in oklab, var(--series) var(--tint), transparent); color: var(--ink); }
/* ET4: Form pill */
.lb .form-col { width: 112px; min-width: 112px; }
.fp { display: inline-block; padding: 2px 7px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); font: 600 12px/1.3 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp.up { background: color-mix(in oklab, var(--up) 10%, transparent); color: var(--up); }
.fp.down { background: color-mix(in oklab, var(--down) 10%, transparent); color: var(--down); }
/* ET5: Trend coloured by better or worse than average now; the row's chart colour while it is drawn */
.lb .spark-cell { width: 104px; --sc: var(--ink-3); }
.lb .spark-cell.up { --sc: var(--up); }
.lb .spark-cell.down { --sc: var(--down); }
.lb .spark-cell .spark path:not(.avg) { stroke: var(--sc); }
.lb .spark-cell .spark circle { fill: var(--sc); }
/* ET6.1: volume last, muted */
.lb th.vol, .lb td.vol { width: 64px; color: var(--ink-3); }
/* ET6.2: the draw toggle: a ring that fills with the row's chart colour */
.lb td.cmp input { appearance: none; -webkit-appearance: none; display: block; width: 14px; height: 14px; margin: 0; border: 1.5px solid var(--ink-3); border-radius: 50%; background: transparent; cursor: pointer; }
.lb td.cmp input:hover:not(:disabled) { border-color: var(--ink); }
.lb td.cmp input:checked { background: var(--rc, var(--series)); border-color: var(--rc, var(--series)); }
.lb td.cmp input:disabled { opacity: 0.35; cursor: not-allowed; }
.lb td.cmp input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ET6.6: hint and Keys */
.lb-note .lb-keys { margin-left: 10px; font-size: inherit; }
/* V7: stats pane number column and Column toggle */
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 8px; padding: 2px 8px 4px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.sp-head span:nth-child(2) { text-align: right; }
.sp-num { display: inline-flex; align-items: center; gap: 6px; }
.sp-meter { display: inline-block; width: 32px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.sp-meter > i { display: block; height: 100%; background: var(--series); }
.sp-col span { font: 700 14px/1 var(--font-body); }
/* V3: value tags, a week in progress, chips and the + Compare search */
/* tag text is ink on the surface (contrast ≥ 4.5:1 in both themes, Q8); the colour is the outline and the edge mark */
.chart .vtag rect { fill: var(--surface); stroke: var(--c, var(--series)); stroke-width: 1.5; }
.chart .vtag .edge { fill: var(--c, var(--series)); stroke: none; }
.chart .vtag text { fill: var(--ink); font: 700 10.5px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .vtag { pointer-events: none; }
.chart .partial { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.chart .partial-label { font-size: 9.5px; font-style: italic; }
.chart .fit { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: 0.8; }
.sw.fitline, .legend i.sw.fitline { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--ink-2); background: none; }
.legend .lg.chip { font: inherit; display: inline-flex; align-items: center; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.legend .lg.chip .x { margin-left: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font: 600 14px/1 var(--font-body); cursor: pointer; }
.legend .lg.chip .x:hover, .legend .lg.chip .x:focus-visible { background: var(--surface-3); color: var(--ink); }
.cmp-add { position: relative; display: inline-flex; }
.cmp-add .btn { height: 26px; padding: 0 10px; }
.cmp-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.cmp-pop input { width: 100%; }
.cmp-pop ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.cmp-pop li { padding: 6px 8px; border-radius: var(--r); cursor: pointer; font-size: 13px; }
.cmp-pop li[aria-selected="true"], .cmp-pop li:hover { background: var(--series-wash); }
.cmp-pop .tn:empty { display: none; }
/* V4: Related mode */
.related { display: grid; grid-template-columns: minmax(0, auto) minmax(320px, 1fr); gap: 16px 28px; align-items: start; }
.related h3 { margin: 0 0 8px; font: 700 13px/1.3 var(--font-body); }
@media (max-width: 1099px) { .related { grid-template-columns: minmax(0, 1fr); } }
.corr { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.corr th { font: 600 11px/1.2 var(--font-body); color: var(--ink-3); padding: 2px 4px; text-align: right; white-space: nowrap; }
.corr thead th { text-align: center; max-width: 76px; overflow: hidden; text-overflow: ellipsis; writing-mode: horizontal-tb; }
.corr td { width: 56px; height: 30px; padding: 0; text-align: center; border-radius: 4px; background: var(--surface-2); }
.corr td.pos { background: color-mix(in srgb, var(--series) calc(var(--a, 0) * 60%), var(--surface-2)); }
.corr td.neg { background: color-mix(in srgb, var(--c2) calc(var(--a, 0) * 60%), var(--surface-2)); }
.corr td.diag { color: var(--ink-3); font-size: 12px; }
.corr td button { width: 100%; height: 100%; border: 0; background: none; color: var(--ink); font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 4px; }
.corr td button:hover, .corr td button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { display: grid; grid-template-columns: minmax(120px, 1fr) 40px 140px 56px 112px 72px 28px; align-items: center; gap: 4px 10px; padding: 2px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rel-list li:last-child { border-bottom: 0; }
.rel-name { text-align: left; background: none; border: 0; padding: 5px 0; color: var(--ink); font: 500 13px/1.25 var(--font-body); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-name:hover { text-decoration: underline; }
.rel-r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-n { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rel-few { grid-column: 2 / 5; color: var(--ink-3); font-size: 12px; }
.rel-bar { position: relative; height: 12px; }
.rel-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--surface-3); border-radius: 1px; }
.rel-bar .zero { position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; background: var(--line-2); }
.rel-bar .rng { position: absolute; top: 4px; height: 4px; background: var(--series); opacity: 0.35; border-radius: 2px; }
.rel-bar .pt { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--series); }
.rel-tag { font-size: 11px; font-weight: 600; color: var(--weak); white-space: nowrap; }
.rel-list .sp-col { grid-column: 7; }
.rel-list .rel-ot { grid-column: 6; padding: 3px 8px; font-size: 11.5px; } /* explorer-chart OT6.3 */
/* V6: the Answer card */
.ans-change { margin: 10px 0 0; font-size: 13px; }

@media (min-width: 900px) {
  .ws { height: calc(100vh - var(--hdr) - var(--status-h) - 32px); min-height: 560px; }
}
/* ---------- Explorer Tests pane (docs/specs/explorer-tests-pane.md TP2, TP3): one drawer at every width (D2) */
.tests-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.tp-box { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tp-bar { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tp-title { flex: 1; min-width: 0; }
.tp-title .ch-name { overflow-wrap: anywhere; }
.tp-title .tn { margin: 2px 0 0; }
.tp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 0 12px 12px; } /* a steady width: the pane's key holds it (TP4.2) */
.tp-act:empty { display: none; }
/* TP3.1: the Answer stays at the top while the pane scrolls */
/* tests-pane-rehaul: Meter (TR2.2), Verdict (TR1), test rows (TR2), Forecast bars (TR3) */
.meter { display: inline-flex; gap: 2px; flex: none; }
.meter i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); }
.meter i.on { box-shadow: none; }
.meter i.g4, .meter i.g3 { background: var(--good); } .meter i.g2 { background: var(--fair); } .meter i.g1 { background: var(--weak); }
.meter.m-none i { box-shadow: none; outline: 1px dashed var(--line-2); outline-offset: -1px; }
.meter.v { flex-direction: column-reverse; }
.g4, .g3 { --g: var(--good); } .g2 { --g: var(--fair); } .g1 { --g: var(--weak); } .g0 { --g: var(--bad); } .g-1 { --g: var(--ink-3); }
.tp-verdict { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.vd-word { display: flex; align-items: center; gap: 10px; margin: 0; }
.vd-word b { font: 700 22px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--g); }
.vd-word .meter i { width: 10px; height: 10px; }
.vd-s { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.vd-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vd-counts span { display: inline-flex; align-items: center; gap: 5px; }
.vd-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--g); }
.tp-verdict .ans-change { margin: 8px 0 0; font-size: 12.5px; }
.tr-list { padding: 6px 0; border-bottom: 1px solid var(--line); }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px 54px 44px 54px 8px; gap: 6px; align-items: center; width: 100%; padding: 6px 4px; margin: 0;
  font: 500 12.5px/1.2 var(--font-body); color: var(--ink); text-align: left; background: none; border: 0; border-radius: var(--r); cursor: pointer; }
.tr-row:hover { background: var(--surface-2); }
.tr-row:focus-visible { outline: 2px solid var(--series); outline-offset: -2px; }
.tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tr-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-g { font-weight: 600; font-size: 12px; color: var(--g); }
.tr-row .tr-rank { text-align: right; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-chev { width: 6px; height: 6px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .12s; }
.tr-row[aria-expanded="true"] .tr-chev { transform: rotate(45deg); }
.tr-d { padding: 0 4px 8px; font-size: 12px; }
.tr-d .tq { margin: 2px 0; color: var(--ink); }
.tr-d .tn { margin: 2px 0 6px; }
.tp-fc { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-head h3 { margin: 0; font: 700 13px/1.3 var(--font-body); flex: 1; }
.fc-head select { max-width: 200px; }
.fc-q { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.fc-a { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; }
.fc-bars { display: grid; gap: 8px; }
.fc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name v" "track track"; gap: 3px 8px; align-items: center; font-size: 12px; }
.fc-bar .fc-name { grid-area: name; } .fc-bar .fc-track { grid-area: track; } .fc-bar .fc-v { grid-area: v; }
.fc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.fc-name .grade { margin-left: 4px; padding: 2px 6px 2px 4px; font-size: 10.5px; }
.fc-track { position: relative; height: 10px; border-radius: 3px; background: var(--surface-3); }
.fc-fill { position: absolute; inset: 2px auto 2px 0; border-radius: 2px; background: var(--series); }
.fc-bar.self .fc-fill { background: var(--ink-3); }
.fc-rng { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--series) 28%, transparent); }
.fc-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-fc .tn { margin: 8px 0 0; }
.tp-evh { margin: 14px 0 0; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.tp-evh .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tp-sec { border-bottom: 1px solid var(--line); padding: 2px 0 10px; }
.tp-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; }
.tp-sec > summary::-webkit-details-marker { display: none; }
.tp-sec > summary::before { content: ""; width: 6px; height: 6px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .12s; flex: none; }
.tp-sec[open] > summary::before { transform: rotate(45deg); }
.tp-sec > summary h3 { margin: 0; font: 700 13px/1.3 var(--font-body); }
.tp-sec .hint { font-weight: 500; }
.tp-sec .tn { margin: 6px 0 0; }
/* TP3.2: a two-column grid of label and value; the question and details open on select */
.tp-close { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.tp-close li { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; }
.tp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 56px 3em; gap: 8px; align-items: center; padding: 4px 6px; font: 500 12.5px/1.25 var(--font-body); color: var(--ink-2); text-align: left; background: none; border: 0; border-radius: var(--r); cursor: pointer; }
.tp-pair:hover { background: var(--surface-2); color: var(--ink); }
.tp-pair > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pair .num { text-align: right; font-variant-numeric: tabular-nums; }
.tp-marks { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0 4px; min-height: 0; font-size: 12px; color: var(--ink-2); }
.tp-marks:empty { display: none; }
.tp-rail { display: none; }
.tp-open[aria-pressed="true"] { background: var(--surface-2); }
/* ≥ 1440: docked; hidden, it folds to a 40 px rail that still shows the Signal (TP2.2, TP2.8) */
@media (min-width: 1440px) {
  .ws { grid-template-columns: 300px minmax(0, 1fr) 360px; }
  body.tp-folded .ws { grid-template-columns: 300px minmax(0, 1fr) 40px; }
  body.tp-folded .tp-box { display: none; }
  body.tp-folded .tp-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 12px 0; border: 0; background: none; color: var(--ink-2); font: 600 12px/1 var(--font-body); cursor: pointer; }
  .tp-rail:hover { color: var(--ink); background: var(--surface-2); }
  .tp-rail-k { writing-mode: vertical-rl; letter-spacing: 0.04em; }
  .tp-rail-v { font-variant-numeric: tabular-nums; color: var(--ink); }
  .tp-open { display: none; }
}
/* < 1440: over the content from the right, opened by the Tests button (TP2.3); a closed drawer leaves the tab order */
@media (max-width: 1439px) {
  .tests-pane { position: fixed; z-index: 28; top: var(--hdr); right: 0; bottom: 0; width: 360px; max-width: 100%; border-radius: 0; box-shadow: var(--shadow);
    transform: translateX(105%); visibility: hidden; transition: transform .18s, visibility 0s .18s; }
  body.tp-open .tests-pane { transform: none; visibility: visible; transition: transform .18s; }
}
/* < 900: a full-screen sheet, as the stats pane (TP2.4) */
@media (max-width: 899px) { .tests-pane { top: 0; width: 100%; z-index: 40; } }

/* 900–1199: the stats pane is a drawer */
@media (max-width: 1199px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
  .stats-pane { position: fixed; z-index: 28; top: var(--hdr); left: 0; bottom: 0; width: 260px; border-radius: 0; transform: translateX(-105%); transition: transform .18s; box-shadow: var(--shadow); }
  body.sp-shown .stats-pane { transform: none; }
  .sp-bar, .sp-open { display: flex; }
}
/* < 900: a full-screen sheet; chart and leaderboard stack and the page scrolls */
@media (max-width: 899px) {
  .stats-pane { top: 0; width: 100%; z-index: 40; }
  .ws-main, .ws-main.v-chart, .ws-main.v-lb, .ws-main.v-compact { display: flex; flex-direction: column; gap: 12px; }
  .split { display: none; }
  .chart-main { height: auto; flex: none; }
  .chart-body { flex: none; height: 270px; }
  .ws-main.v-chart .chart-body { height: 420px; }
  .lb-wrap { max-height: none; }
  .lb td.cv:not(.sorted) ~ td.cv:not(.sorted), .lb th.col:not(.sorted) ~ th.col:not(.sorted) { min-width: 84px; }
  .pane-btns { margin-left: 0; }
}

/* ---------- scout (docs/specs/stats-workspace.md S1–S9, scout-rehaul.md SR1–SR11) */
.scout-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 18px; } /* amendment 4: the group switch alone, left, as tabs over the page */
.scout-note { margin-bottom: 12px; }
.sc-top5 { margin-top: 14px; }
.sc-top5 .mini li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 0; }

/* SR11.1, SR11.2: inside the page the series slots are the team line colours (lineVars, both themes) */
.sx { --c1: var(--l0-l); --c2: var(--l1-l); --c3: var(--l2-l); --c4: var(--l3-l); --c5: var(--l4-l); --c6: var(--l5-l); --wash-pct: 8%; } /* c5, c6: up to 5 compared (scout-chart-layers amendment 14) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sx { --c1: var(--l0-d); --c2: var(--l1-d); --c3: var(--l2-d); --c4: var(--l3-d); --c5: var(--l4-d); --c6: var(--l5-d); --wash-pct: 14%; } }
:root[data-theme="dark"] .sx { --c1: var(--l0-d); --c2: var(--l1-d); --c3: var(--l2-d); --c4: var(--l3-d); --c5: var(--l4-d); --c6: var(--l5-d); --wash-pct: 14%; }
.sx { --series: var(--c1); --team-a: var(--c1); --team-b: var(--ink-3);
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.sx-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* SR8: Pinned and Recent */
.sx-rail { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow-y: auto; scrollbar-width: thin; }
.sx-rail h2 { margin: 0 0 6px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.sx-rail h2 + .tn { margin: 0 0 14px; }
.sx-rail ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sx-rail button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sx-rail button:hover { background: var(--surface-2); }
.sx-rail button[aria-current="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ink); }
.sx-rail .logo, .sx-rail .face { grid-row: span 2; }
.sx-rail .rn { font: 600 13px/1.25 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rail .rv { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rail .rv b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* SR1: hero */
.sx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; padding: 18px 20px 16px;
  border: 1px solid var(--line); border-top: 3px solid var(--c1); border-radius: var(--r-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wash) var(--wash-pct), var(--surface)), var(--surface) 85%); }
.sx-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sx-media { position: relative; flex: none; }
.sx-badge { position: absolute; right: -4px; bottom: -4px; padding: 2px; border-radius: 50%; background: var(--surface); line-height: 0; }
.sx-idt { min-width: 0; }
.sx-id .eyebrow { margin: 0 0 2px; }
.sx-id h1 { margin: 0; font: 700 32px/1.1 var(--font-body); letter-spacing: -0.01em; }
.sx-id h1:focus { outline: none; }
.sx-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sx-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-next { display: inline-flex; align-items: center; gap: 6px; }
.sx-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1 var(--font-body); background: var(--fair-bg); color: var(--fair); }
.sx-status.s-O { background: var(--bad-bg); color: var(--bad); }
.sx-status.s-D { background: var(--weak-bg); color: var(--weak); }

/* SR2: chart and About; the chart's readout sits beside it, above About (one column: readout, chart, About) */
.sx-over { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "chart read" "chart about"; gap: 12px 14px; align-items: start; }
.sx-chart { grid-area: chart; }
.sx-about { grid-area: about; }
.sx-read { grid-area: read; padding-block: 12px; }
.sx-read .ch-hero { margin: 0; gap: 0 10px; }
.sx-read .ch-hero .ch-name { flex-basis: 100%; margin: 0; font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.sx-read .ch-hero .ch-name .dim { color: inherit; }
.sx-read .ch-hero .hero { font-size: 40px; line-height: 1; }
.sx-read .ch-when { flex-basis: 100%; } /* one line (ellipsis), so pointing at the chart never changes the card's height */
.sx-read .ch-likely { margin-top: 2px; min-height: calc(2 * 1.45em); line-height: 1.45; }
.sx-read .legend { margin: 6px 0 0; }
/* The rows' values change as the pointer moves; a wrapping flex legend then gained or lost a row, the card's height
   changed, and the fill observer redrew the chart on every move (the redraw cleared the pointer, so it flickered).
   A grid whose columns depend only on the card's width keeps one fixed cell per row, whatever its text. */
.sx-read .legend:not(.rs-legend) { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 4px 12px; }
.sx-read .legend:not(.rs-legend) .lg { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; justify-self: start; max-width: 100%; }
/* Strength's reasons: one fixed row each (header, ≤ 7 reasons, notes: 9 at most), so a pointed week keeps the card's height */
.sx-read .rs-legend { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.6em; grid-auto-rows: 18px; gap: 0 6px; align-content: start; min-height: calc(9 * 18px); }
.sx-read .rs-legend .lg { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-width: 0; white-space: nowrap; }
.sx-read .rs-legend .lg > :is(.rn, b, small) { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.sx-read .rs-legend .lg > :is(b, small) { text-align: right; }
.sx-read .rs-legend .lg:is(.dim, .rs-tog, .rs-none) { display: block; overflow: hidden; text-overflow: ellipsis; }
.sx-chart .chart-body { overflow: visible; height: auto; } /* scout-chart-layers: under 900 px the generic 270 px cut Scout's 300 px chart (and its flag row) */
.sx-about { display: flex; flex-direction: column; gap: 12px; }
.sx-words .vd-sub { margin-top: 0; padding-top: 0; border-top: 0; } /* first in its card: no divider */
.sx-words .plain-list { margin: 0; }
.sx-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-keys li, .sx-about > * { min-width: 0; }
.sx-keys button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sx-keys button:hover { background: var(--surface-2); }
.sx-keys button[aria-current="true"] { border-color: var(--ink-3); background: var(--surface-2); }
.sx-keys .kn { font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-keys .kv { font: 700 20px/1.15 var(--font-body); font-variant-numeric: tabular-nums; }
.sx-keys small { color: var(--ink-3); font-size: 12px; }
.sx-keys .rs { margin-top: 6px; }
.sx-line { margin: 0; font-size: 13px; color: var(--ink-2); }
.sx-line b { color: var(--ink); }
.sx-more summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.sx-outlook-list { list-style: none; margin: 0; padding: 0; }
.sx-outlook-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sx-outlook-list li .tn { grid-column: 1 / -1; margin: 0; }
.sx-outlook-list li.no .pm { color: var(--ink-3); }
.sx-outlook-list b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sx-sec > h2 { margin: 0 0 10px; font: 700 17px/1.3 var(--font-body); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sx-sec > h2 { scroll-margin-top: 64px; }
.sx-sec > h2:focus { outline: none; }

/* SR3: section bar (as the Matchups jump bar) */
.sx-sections { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 8px 0; background: var(--bg);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sx-sections::-webkit-scrollbar { display: none; }
.sx-sections a { flex: none; padding: 5px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sx-sections a:hover { color: var(--ink); background: var(--surface-2); }
.sx-sections a[aria-current="true"] { background: var(--ink); color: var(--bg); }
@media (min-width: 900px) { .sx-sections { top: var(--hdr); } }

/* SR4: range strips. Right is better; the dot is the subject, diamonds are compared rows */
.rs { position: relative; display: block; height: 14px; min-width: 80px; }
.rs::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--line-2); }
.rs-band { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--surface-3); }
.rs-med { position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
.rs-dot, .rs-dia { position: absolute; top: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface); }
.rs-dot { width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }
.rs-dot.hollow { background: var(--surface); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--surface); }
.rs-dia { width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); z-index: 1; }
.rs-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rs-key .rs-dot, .rs-key .rs-dia { position: static; transform: none; box-shadow: none; display: inline-block; }
.rs-key .rs-dia { transform: rotate(45deg); }
.rs-key .k-band { display: inline-block; width: 16px; height: 8px; border-radius: 3px; background: var(--surface-3); }
.rs-key .k-med { display: inline-block; width: 2px; height: 10px; background: var(--ink-3); }

/* SR5: compare */
.sx-cmp { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sx-cmp-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.sx-lab { font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-right: 4px; }
.chip-row { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chip-row .x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.chip-row .x:hover { color: var(--ink); }
.chip-row.add { border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: 600 12.5px/1.2 var(--font-body); }
.chip-row.add:hover:not(:disabled) { background: var(--surface-2); }
.chip-row.add:disabled { opacity: 0.5; cursor: default; }
.sx-sim { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sx-sim li { display: inline-flex; align-items: center; gap: 2px; }
.sx-sim .go { padding: 0 4px; }
.sx-add { position: relative; flex: 0 1 220px; }
.sx-add input { width: 100%; }
.sx-add .search-list { min-width: 300px; }

/* SR6.1: stats */
.sx-phead, .sx-plist button { display: grid; grid-template-columns: minmax(0, 1.3fr) 4.8em 3.4em minmax(120px, 2fr) 88px; gap: 12px; align-items: center; }
.sx-phead { padding: 0 6px 8px; border-bottom: 1px solid var(--line); font: 600 10.5px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.sx-phead > span:nth-child(2), .sx-phead > span:nth-child(3) { text-align: right; }
.sx-phead .rs-key { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; }
.sx-grp summary { list-style: none; cursor: pointer; padding: 10px 0 4px; }
.sx-grp summary::-webkit-details-marker { display: none; }
.sx-grp summary h3 { display: inline; margin: 0; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.sx-grp summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--ink-3); font-size: 10px; transition: transform 0.15s; }
.sx-grp[open] summary::before { transform: rotate(90deg); }
.sx-plist button { padding: 6px; margin: 0; width: 100%; }
.sx-plist .pr { text-align: right; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sx-plist .psp, .sx-phead .psp { justify-self: end; }
.sx-plist .psp .spark { width: 100%; max-width: 84px; height: auto; }
.sx .spark path { stroke: var(--c1); } .sx .spark circle { fill: var(--c1); }
#sx-profile > .tn { margin: 10px 0 0; }
/* wide screens: two columns of groups (a dense key-stats grid); the column labels give way to the strip key */
@media (min-width: 1360px) {
  .sx-groups { columns: 2; column-gap: 32px; }
  .sx-grp { break-inside: avoid; }
  .sx-phead { display: block; }
  .sx-phead > span:not(.rs-key) { display: none; }
  .sx-plist button { grid-template-columns: minmax(0, 1.3fr) 4.4em 3em minmax(100px, 1.6fr) 72px; gap: 10px; }
}
.sx-logt td, .sx-seasons td { padding-top: 7px; padding-bottom: 7px; }

/* scout-games-seasons: Games and Seasons. The Lead stat gets a strip; other stats a Rank tint in the subject colour (--c1,
   already per theme). Text stays --ink on every tint (α ≤ 24%), so no tint-specific text colour. */
.sx-logt, .sx-seasons { font-variant-numeric: tabular-nums; }
.sx-logt th.sx-lead, .sx-seasons th.sx-lead { text-align: left; }
.sx-lead { width: 34%; min-width: 220px; }
.sx-lead .ld { display: grid; grid-template-columns: 4.6em minmax(80px, 1fr) 5.6em; gap: 10px; align-items: center; }
.sx-lead .lv { font-weight: 650; text-align: right; color: var(--ink); }
.sx-lead .lr { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.sx-logt td .tv, .sx-seasons td .tv { display: inline-block; padding: 2px 7px; margin-right: -7px; border-radius: 6px; }
td.tint .tv { background: color-mix(in oklab, var(--c1) var(--tint), transparent); color: var(--ink); }
.sx-logt td.num, .sx-seasons td.num { white-space: nowrap; }
.sx-gsum { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.sx-gsum > span:first-child { color: var(--ink); }
.sx-logt .site { display: inline-block; min-width: 1.4em; font-size: 12px; }
.sx-logt .res { white-space: nowrap; color: var(--ink-2); }
.sx-logt tbody tr[data-week] { cursor: pointer; }
.sx-logt tbody tr[data-week]:hover td, .sx-logt tbody tr[data-week]:focus-visible td { box-shadow: inset 0 9999px 0 color-mix(in oklab, var(--ink) 5%, transparent); outline: none; }
.sx-logt tbody tr[aria-selected="true"] td:first-child, .sx-seasons tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--c1); }
.sx-logt tr.miss td { color: var(--ink-3); }
.sx-logt tr.miss .av { width: 18px; height: 18px; font-size: 9px; }
.opp { display: inline-flex; align-items: center; gap: 6px; }

/* SR7: seasons and availability (played weeks are quiet; only Q, D, O and I carry colour) */
.sx-seasons .sx-yr { background: none; border: 0; padding: 0; font: 650 14px/1.2 var(--font-body); color: var(--ink); cursor: pointer; }
.sx-seasons .sx-yr:hover { text-decoration: underline; }
.sx-seasons tr:not(.sel) .sx-yr { color: var(--ink-2); }
.sx-seasons .av-cells { gap: 2px; }
.sx-seasons .av { width: 15px; height: 15px; font-size: 9px; border-radius: 3px; }
.av-cells { gap: 2px; }
.sx-seasons .av { width: 15px; height: 15px; font-size: 9px; border-radius: 3px; }
.av-cells { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; position: relative; }
.av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 700 10.5px/1 var(--font-body); font-style: normal; background: var(--surface-2); color: var(--ink-3); flex: none; }
.av.s-played { background: var(--surface-3); color: var(--ink-3); }
.av.s-Q { background: var(--fair-bg); color: var(--fair); box-shadow: inset 0 0 0 1px var(--fair); }
.av.s-D { background: var(--weak-bg); color: var(--weak); box-shadow: inset 0 0 0 1px var(--weak); }
.av.s-O { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.av.s-I { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.av.s-bye { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.av.s-none { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.av-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.av-key span { display: inline-flex; align-items: center; gap: 6px; }
.av-key .av { width: 16px; height: 16px; font-size: 9px; }

/* SR9: team */
#sx-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 24px; }
#sx-roster h3 { margin: 0 0 6px; font: 600 12.5px/1.3 var(--font-body); }
.sx-rost { list-style: none; margin: 0; padding: 0; }
.sx-rost button { display: grid; grid-template-columns: 3.4em 32px minmax(0, 1fr) 4.8em 64px; gap: 10px; align-items: center; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sx-rost button:hover { background: var(--surface-2); }
.sx-rost .rank { color: var(--ink-3); font-size: 12px; }
.sx-rost .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* scout-refinements R3: Role (share of the team's volume) leads each row; position and report status under the name */
.sx-rost .role { font-weight: 650; line-height: 1.1; text-align: right; }
.sx-rost .role small, .sx-rost .nm small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-3); }
.sx-rost .nm small { display: flex; gap: 6px; align-items: center; margin-top: 1px; }
.sx-rost .val { text-align: right; line-height: 1.15; }
.sx-rost .val .rank { display: block; white-space: nowrap; }
.sx-rost .kp-st, .sx-injcols .kp-st { position: static; transform: none; border: 0; }
.sx-sec > h2 .sx-rside { margin-left: auto; align-self: center; }
.sx-injcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 24px; }
.sx-injcols h3 { margin: 0 0 8px; font: 600 12.5px/1.3 var(--font-body); }
.sx-injcols .link { font-weight: 600; font-size: 13px; }
/* REQ-203: a team's stats in Offense, Defense and Game panels */
.sx-groups.sides { columns: auto; }
.sx-sides3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; }
.sx-sideh { margin: 6px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 13px/1.2 var(--font-body); color: var(--ink); }
@media (min-width: 1200px) {
  .sx-sides3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-groups.sides .sx-plist button { grid-template-columns: minmax(0, 1.5fr) 4.2em 2.8em minmax(70px, 1fr); gap: 8px; }
  .sx-groups.sides .psp, .sx-groups.sides ~ * .psp { display: none; }
}
.sx-sides { white-space: nowrap; }
.sx-sides b { color: var(--ink); }

@media (max-width: 1199px) {
  .sx { grid-template-columns: minmax(0, 1fr); }
  .sx-rail { position: static; max-height: none; overflow: visible; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .sx-rail h2 { margin: 0; flex: none; }
  .sx-rail h2 + .tn { margin: 0 8px 0 0; flex: none; white-space: nowrap; }
  .sx-rail ul { flex-direction: row; margin: 0 8px 0 0; flex: none; }
  .sx-rail button { width: auto; grid-template-columns: 28px auto; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; }
  .sx-rail .rv { display: none; }
  .sx-rail .logo, .sx-rail .face { grid-row: auto; }
  .sx-over { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "read" "chart" "about"; }
}
@media (max-width: 899px) {
  .sx-phead, .sx-plist button { grid-template-columns: minmax(0, 1fr) 4.4em 3em minmax(90px, 1.4fr); gap: 8px; }
  .sx-plist .psp, .sx-phead .psp { display: none; }
}
@media (max-width: 719px) {
  .sx-id h1 { font-size: 24px; }
  .sx-media .face, .sx-media .logo { --sz: 72px !important; width: 72px; height: 72px; }
  .sx-read .ch-hero .hero { font-size: 30px; }
  .sx-keys { grid-template-columns: 1fr; }
  .sx-phead { display: none; }
  .sx-plist button { grid-template-columns: minmax(0, 1fr) auto; }
  .sx-plist .pr { display: none; }
  .sx-plist .rs { grid-column: 1 / -1; }
  .sx-rost button { grid-template-columns: 3.4em 32px minmax(0, 1fr) auto; }
  .sx-rost .rs { grid-column: 3 / -1; }
}

/* ---------- stat lab */
.lab { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.editor { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
@media (min-width: 900px) { .editor { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow-y: auto; scrollbar-width: thin; } }
.ed-top { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-top select { flex: 1; }
.field { display: flex; flex-direction: column; gap: 5px; font: 600 12px/1.2 var(--font-body); color: var(--ink-2); }
.field em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.field-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
#lab-formula { font: 500 14px/1.6 var(--font-mono); resize: vertical; min-height: 104px; background: var(--code-bg); color: var(--code-ink); border-color: transparent; caret-color: #f0782f; }
/* U3.5: the highlight layer copies the textarea box exactly (font, padding, border, wrap, scrollbar space) */
.fx { position: relative; display: block; border-radius: var(--r); background: var(--code-bg); }
.fx #lab-formula { position: relative; background: transparent; display: block; scrollbar-gutter: stable; }
.fx-hl { position: absolute; inset: 0; margin: 0; overflow: hidden; pointer-events: none; color: transparent;
  font: 500 14px/1.6 var(--font-mono); padding: 6px 9px; border: 1px solid transparent; border-radius: var(--r);
  white-space: pre-wrap; overflow-wrap: break-word; scrollbar-gutter: stable; }
.fx-hl mark { color: transparent; border-radius: 2px; background: rgba(57, 135, 229, 0.45); box-shadow: 0 0 0 1px rgba(134, 182, 239, 0.8); }
.fx-hl mark.bad { background: rgba(239, 122, 120, 0.45); box-shadow: 0 0 0 1px #ef7a78; }
#lab-formula::selection { background: var(--code-sel); }
#lab-formula:focus { border-color: var(--series); outline: none; box-shadow: 0 0 0 3px var(--series-wash); }
#lab-formula[aria-invalid="true"] { border-color: var(--bad); }
textarea { resize: vertical; width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding-bottom: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.status { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; }
.status.ok { color: var(--good); }
.status.err { color: var(--bad); font-weight: 600; }
.caret { display: block; margin-top: 4px; padding: 4px 8px; background: var(--bad-bg); border-radius: 4px; color: var(--ink); font-weight: 400; white-space: pre; overflow-x: auto; }
.caret mark { background: var(--bad); color: var(--surface); border-radius: 2px; }
.ed-actions { display: flex; gap: 8px; }
.ref { border-top: 1px solid var(--line); padding-top: 10px; }
.ref summary { cursor: pointer; font-weight: 700; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.ref summary::-webkit-details-marker { display: none; }
.ref summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; }
.ref[open] summary::before { content: "▾"; }
.ref input[type="search"] { width: 100%; margin: 10px 0 6px; }
.comps { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 1px; }
.comps li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 4px 0; font-size: 12px; color: var(--ink-3); }
.ins-btn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ins-btn code { color: var(--accent-ink); font-weight: 500; }
.ins-btn:hover code { text-decoration: underline; }
.funcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: 500 12px/1 var(--font-mono); padding: 6px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink); border: 0; cursor: pointer; }
.chip:hover { background: var(--surface-3); }
.saved { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.saved li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
.saved li code { grid-column: 1; color: var(--ink-3); font-size: 11.5px; word-break: break-word; }
.saved li .danger { grid-column: 2; grid-row: 1; }
.share { display: flex; flex-direction: column; gap: 8px; }
.share textarea { font: 12px/1.4 var(--font-mono); }

.lab-results { display: flex; flex-direction: column; min-width: 0; transition: opacity .15s; }
.lab-results.stale { opacity: 0.4; pointer-events: none; }
.lab-results > .panel-sec:first-child { margin-top: 0; }
.strip-sec { background: var(--bg); padding-bottom: 8px; z-index: 2; }
@media (min-width: 900px) and (min-height: 820px) { .strip-sec { position: sticky; top: var(--hdr); padding-top: 16px; margin-top: -16px; } }
.strip { display: flex; flex-wrap: wrap; gap: 8px; }
.strip .tile { flex: 1 1 160px; padding: 10px 12px; gap: 4px; }
.strip .tq { font-size: 11.5px; }
.strip .tb { font-size: 22px; }
.strip .tn { margin-top: 0; font-size: 11.5px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; }
.two > .card, .lab-results > .card { margin-top: 16px; }
.card > h3 { margin: 0 0 10px; font: 700 14px/1.3 var(--font-body); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.mini li:last-child { border-bottom: 0; }
.mini .rank { color: var(--ink-3); text-align: right; }
.mini .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .sub { display: inline; }
.mini .val { font-weight: 600; }
.mini-gap { margin: 8px 0 2px; }
.bias-checks { display: grid; gap: 8px; }
.bias-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.6em 4em; gap: 10px; align-items: center; padding: 9px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.bias-row.flagged { background: var(--weak-bg); }
.bias-name { font-weight: 600; }
.bias-r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.bias-n { text-align: right; color: var(--ink-3); font-size: 12px; }
.bias-warn { grid-column: 1 / -1; font-size: 12px; color: var(--weak); font-weight: 600; }
.bias-ok { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }

/* ---------- scorecard: strip, filters, verdict + map, screener + panel (docs/specs/scorecard-rehaul.md) */
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 10px; }
.sc-head h1 { margin: 0; font: 700 22px/1.1 var(--font-body); letter-spacing: -0.01em; }
.lede { margin: 0; max-width: 100ch; color: var(--ink-3); font-size: 13px; }

/* R1 target strip: picker + the target's own numbers */
.sc-strip { display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; padding: 10px 16px; margin: 0 -16px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 6; }
@media (min-width: 900px) { .sc-strip { position: sticky; top: var(--hdr); } }
.sc-pick { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); }
.sc-pick select { font: 700 16px/1.2 var(--font-body); height: 38px; min-width: 220px; text-transform: none; letter-spacing: 0; }
.kpis { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 1px solid var(--line); }
.kpi dt { font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.kpi dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.kpi .kv { font: 700 17px/1.1 var(--font-body); font-variant-numeric: tabular-nums; }
.kpi .kv small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.kpi .grade { padding: 3px 7px 3px 5px; font-size: 11px; }

/* R4.4 one filter row above everything it scopes */
.sc-filters { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 12px 0; }
.fchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 1px; }
.fchips button { flex: none; font: 600 12.5px/1 var(--font-body); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.fchips button:hover { color: var(--ink); border-color: var(--ink-3); }
.fchips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.check.sc-hide { padding: 0; font-size: 12.5px; color: var(--ink-2); }

/* R2 verdict and R3 map, side by side when there is room */
.sc-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.sc-top > .card { margin: 0; padding: 18px 20px; }
.sc-verdict .eyebrow { margin-bottom: 6px; }
.vd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.vd-name { font: 700 30px/1.1 var(--font-body); letter-spacing: -0.015em; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.vd-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vd-num { font: 700 40px/1 var(--font-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vd-num small { font-size: 16px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.vd-line { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.vd-line.chance { color: var(--fair); font-weight: 600; }
.vd-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.vd-bar h3 { margin: 0 auto 0 0; font: 700 13.5px/1.3 var(--font-body); }
.vd-bar .seg button { padding: 5px 10px; font-size: 12px; }
.vd-sub { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.plain-list li { font-size: 14.5px; line-height: 1.5; padding-left: 16px; position: relative; color: var(--ink); }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* forecast ladder: name | track (range + dot + self line) | value */
.ladder { list-style: none; margin: 0; padding: 0; }
.ld-row button, .ld-axis { display: grid; grid-template-columns: minmax(110px, 0.9fr) minmax(120px, 1.6fr) 3em; gap: 12px; align-items: center; width: 100%; }
.ld-row button { padding: 0 6px; height: 30px; margin: 0 -6px; width: calc(100% + 12px); background: none; border: 0; border-radius: var(--r); font: 500 13px/1.2 var(--font-body); color: var(--ink); cursor: pointer; text-align: left; }
.ld-row button:hover, .ld-row button.hot { background: var(--surface-2); }
.ld-row button[aria-pressed="true"] { background: var(--series-wash); }
.ld-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row.target .ld-name { font-weight: 700; }
.ld-track { position: relative; height: 100%; }
.ld-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.ld-range { position: absolute; top: calc(50% - 3px); height: 6px; border-radius: 3px; background: var(--seq-1); }
.ld-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--series); box-shadow: 0 0 0 2px var(--surface); }
.ld-row.target .ld-dot { background: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.ld-row button[aria-pressed="true"] .ld-dot { background: var(--accent); }
.ld-self { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--ink-3); }
.ld-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-axis { height: 18px; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ld-ticks { position: relative; height: 100%; }
.ld-ticks span { position: absolute; transform: translateX(-50%); top: 3px; }
.ld-key, .sm-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.ld-key i, .sm-key i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.k-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--series); }
.k-ring { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.k-range { width: 22px; height: 6px; border-radius: 3px; background: var(--seq-1); }
.k-self { width: 18px; border-top: 1.5px dashed var(--ink-3); }
.k-mid { width: 18px; border-top: 1.5px dotted var(--ink-3); }
.tag { display: inline-block; font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }

/* stat map */
.sc-mapcard { display: flex; flex-direction: column; }
.sc-mapcard > h3 { margin: 0 0 8px; font: 700 14px/1.3 var(--font-body); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
#sc-map { flex: 1; min-height: 260px; position: relative; }
#sc-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stat-map { cursor: crosshair; touch-action: pan-y; }
.stat-map .sm-self { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.stat-map .sm-mid { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 1.5 3.5; }
.stat-map .sm-corner { fill: var(--ink-3); font: 600 11px var(--font-body); }
.stat-map .sm-dot { fill: var(--series); fill-opacity: 0.8; stroke: var(--surface); stroke-width: 2; }
.stat-map .sm-dot.target { fill: var(--surface); fill-opacity: 1; stroke: var(--ink); stroke-width: 2.2; }
.stat-map .sm-dot.sel { fill: var(--accent); fill-opacity: 1; }
.stat-map .sm-dot.hot { stroke: var(--ink); stroke-width: 2; fill-opacity: 1; }
.stat-map .sm-label { fill: var(--ink); font: 600 11.5px var(--font-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* R4 screener + R5 detail panel */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr); gap: 16px; align-items: start; }
.sc-main { min-width: 0; }
.sc-detail { top: calc(var(--hdr) + var(--sc-strip, 0px) + 12px); max-height: calc(100vh - var(--hdr) - var(--sc-strip, 0px) - 24px); }
.sc-detail .back { display: none; }
.sc-detail .dt-bar:has(.back) { margin: 0; }
.sc-wrap { max-height: calc(100vh - var(--hdr) - var(--sc-strip, 0px) - 32px); }
.sc th, .sc td { white-space: nowrap; }
.sc thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.sc thead th { z-index: 3; }
.sc .stat-col { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 170px; max-width: 200px; box-shadow: inset -1px 0 0 var(--line); }
.sc thead .stat-col { z-index: 4; }
.sc td { padding: 0 10px; height: 34px; }
.sc tbody tr { cursor: pointer; }
.sc .who { overflow: hidden; text-overflow: ellipsis; }
.sc .who .nm { font-weight: 600; }
.sc .who .grp { margin-left: 8px; font-size: 11.5px; color: var(--ink-3); }
.sc tbody tr:hover td, .sc tbody tr.hot td { background: var(--surface-2); }
.sc tbody tr.sel td { background: var(--series-wash); }
.sc tbody tr.sel .stat-col { box-shadow: inset 3px 0 0 var(--series), inset -1px 0 0 var(--line); }
.sc tbody tr.is-target .stat-col .nm::after { content: "Target"; margin-left: 8px; font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.sc tbody tr:focus-visible { outline: none; }
.sc tbody tr:focus-visible td { background: var(--surface-2); }
.sc tbody tr:focus-visible .stat-col { box-shadow: inset 2px 0 0 var(--series), inset -1px 0 0 var(--line); }
/* bar cells: number + bar on a fixed scale, fill by grade (R4.1-R4.3b) */
.bc { min-width: 0; }
.bc .bv { display: inline-block; width: 2.7em; text-align: right; margin-right: 6px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.bt { display: inline-block; position: relative; width: 36px; height: 6px; border-radius: 3px; background: var(--surface-3); vertical-align: middle; }
.bf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.bf.l4 { background: var(--seq-4); } .bf.l3 { background: var(--seq-3); } .bf.l2 { background: var(--seq-2); } .bf.l1 { background: var(--seq-1); }
.bf.l0, .bf.l-1 { background: var(--line-2); }
.bk { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.bc .tag { min-width: 36px; text-align: center; vertical-align: middle; }
.bc .tag[tabindex] { cursor: help; }
.sc td.num { padding-inline: 8px; }
.bc.wide .bv { width: 3.3em; }
.sort { background: none; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.sort:hover { color: var(--ink); }
.heat-key { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); margin: 10px 0 0; flex-wrap: wrap; }
.heat-key i { width: 20px; height: 6px; border-radius: 3px; }
.heat-key i.l0 { background: var(--line-2); } .heat-key i.l1 { background: var(--seq-1); } .heat-key i.l2 { background: var(--seq-2); } .heat-key i.l3 { background: var(--seq-3); } .heat-key i.l4 { background: var(--seq-4); }
.hk-tick { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; }
.hk-tick i { width: 2px !important; height: 12px !important; background: var(--ink); border-radius: 1px; }
#sc-notes { margin-top: 6px; }
.fifths { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fifths > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.fc-say { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; }

/* ---------- matchups jump bar (U5) */
.mu-jump { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; margin: 0 0 14px; padding: 8px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mu-jump::-webkit-scrollbar { display: none; }
.mu-jump a { flex: none; padding: 5px 10px; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.mu-jump a:hover { color: var(--ink); background: var(--surface-2); }
.mu-jump a[aria-current="true"] { background: var(--ink); color: var(--bg); }
/* html's scroll-padding already clears the shell; this clears the bar itself */
#mu-body .mu-hero, #mu-body h2.mu-sec, #mu-body .gp-unit { scroll-margin-top: 60px; }
@media (min-width: 900px) { .mu-jump { top: var(--hdr); } }

/* ---------- method */
.prose { max-width: 72ch; }
.prose h2 { font: 700 30px/1.1 var(--font-body); letter-spacing: -0.01em; margin: 4px 0 12px; }
/* html's scroll-padding-top already clears the top bar (or the scores bar on phones); this adds a little air */
.prose h3 { font: 700 16px/1.3 var(--font-body); margin: 28px 0 6px; scroll-margin-top: 8px; }
.prose p, .prose li { color: var(--ink-2); margin: 0 0 10px; }
.prose #technical { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--line); scroll-margin-top: 8px; }
/* Method groups: one per tab, each a smaller heading than the page title */
.prose h2.m-group { font: 700 21px/1.2 var(--font-body); margin: 44px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 8px; }
.prose h2.m-group + h3 { margin-top: 12px; }
/* under 1200 px: the group links as one wrapping row under the lede; the sections stay in the page */
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.toc p, .toc .toc-s { display: none; }
.toc .toc-gh { padding: 4px 10px; font-size: 13px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; }
.toc .toc-gh:hover { color: var(--ink); border-color: var(--line-2); }
@media (min-width: 1200px) {
  #view-method:not([hidden]) { display: grid; grid-template-columns: 200px minmax(0, 72ch); column-gap: 48px; max-width: none; }
  #view-method > :not(.toc) { grid-column: 2; }
  /* buildToc sets grid-row to span every child, so the column stays sticky to the end of the page */
  .toc { display: block; grid-column: 1; grid-row: 1 / span 100; position: sticky; top: calc(var(--hdr) + 20px); align-self: start; margin: 0; max-height: calc(100vh - var(--hdr) - 40px); overflow-y: auto; }
  .toc p { display: block; margin: 0 0 8px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
  .toc a { display: block; padding: 4px 10px 4px 20px; font-size: 13px; color: var(--ink-2); text-decoration: none; border-left: 2px solid var(--line); }
  .toc .toc-gh { padding: 6px 10px; font-weight: 600; border: 0; border-left: 2px solid var(--line); border-radius: 0; }
  .toc .toc-g.on .toc-s { display: block; }
  .toc a:hover { color: var(--ink); }
  .toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
}

/* U6: Method side notes. Inline under 1440 px; in the right-hand column from 1440 px.
   In the wide layout the figure takes no row height, so it does not push the next paragraph down. */
.m-note { margin: 4px 0 16px; padding: 12px 14px; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.m-note svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-note figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.m-note .wk.odd, .m-note .mn-half.odd { fill: var(--series); }
.m-note .wk.even, .m-note .mn-half.even { fill: var(--team-b); }
.m-note .mn-half { opacity: 0.2; }
.m-note .mn-in { font: 600 11px var(--font-body); fill: var(--ink); }
.m-note .mn-q { font: 700 12px var(--font-body); fill: var(--ink); }
.m-note .mn-ax { font: 500 10px var(--font-mono); fill: var(--ink-3); }
.m-note .mn-gr { font: 600 10.5px var(--font-body); fill: var(--ink-2); }
.m-note .mn-join, .m-note .mn-rest { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.m-note .mn-rest { stroke-dasharray: 2 2; }
.m-note .mn-track { stroke: var(--surface-3); stroke-width: 6; stroke-linecap: round; }
.m-note .mn-seg { stroke-width: 6; }
.m-note .mn-seg.l0 { stroke: var(--surface-3); } .m-note .mn-seg.l1 { stroke: var(--seq-1); } .m-note .mn-seg.l2 { stroke: var(--seq-2); }
.m-note .mn-seg.l3 { stroke: var(--seq-3); } .m-note .mn-seg.l4 { stroke: var(--seq-4); }
.m-note .mn-tick { stroke: var(--ink); stroke-width: 1.5; }
@media (min-width: 1440px) {
  #view-method:not([hidden]) { grid-template-columns: 200px minmax(0, 72ch) minmax(240px, 300px); }
  #view-method > .m-note { grid-column: 3; height: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
  #view-method > .m-note > * { position: relative; top: 2px; }
  #view-method > .m-note svg { padding: 12px 14px 0; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
  #view-method > .m-note figcaption { margin: 0; padding: 8px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
}

/* ---------- breakpoints */
@media (max-width: 1199px) {
  .lb-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr); }
  .rail { display: none; }
  .lb-pick { display: inline-flex; }
  .sc-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) { .two { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 899px) {
  .lb-grid, .lab { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; max-height: none; }
  .detail.open { position: fixed; inset: 0; z-index: 30; border-radius: 0; border: 0; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  body.sheet-open { overflow: hidden; }
  .back { display: inline-flex; }
  .lb-head { flex-direction: column; align-items: stretch; }
  .lb-pick { width: 100%; }
  .lb-pick select { flex: 1; }
  .spark-cell, .lb td.spark-cell { display: none; }
  .sc-wrap { max-height: none; }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-detail:not(.open) { display: none; }
  .sc-detail.open .back { display: inline-flex; }
  .sc-strip { margin: 0; padding: 10px 0; }
}
/* the tabs: icons only between the phone layout and wide screens; the label stays for screen readers.
   Breakpoints (top-bar.md TB6): each label set appears only where the search still keeps 200 px. Measured with the season
   pill shown: icon tabs + compact pill/coffee = 704 px of fixed items, + tab labels = 1013, + "In progress" and coffee text = 1189. */
@media (min-width: 720px) and (max-width: 1219px) {
  .tabs button { padding: 0 10px; }
  .tabs button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 720–899 px: icon tabs still leave under 200 px, so the search takes its own row, as on phones (the shell is not sticky here) */
@media (min-width: 720px) and (max-width: 899px) {
  .topbar { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 10px; }
  .tabs { align-self: center; height: 34px; }
  .season-pill, .season-pill[hidden] + .search + .support { margin-left: auto; }
  .search { order: 9; flex-basis: 100%; max-width: none; margin-left: 0; }
}
@media (max-width: 719px) {
  .topbar { gap: 8px; position: relative; }
  .brand { margin-right: auto; } /* the logo on the left; season, support and theme on the right */
  .search { max-width: none; order: 9; flex-basis: 100%; margin-left: 0; } /* TB1.3 */
  .topbar { flex-wrap: wrap; height: auto; padding-block: 8px; row-gap: 8px; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--line); justify-content: space-around; }
  .tabs button { flex-direction: column; justify-content: center; gap: 4px; flex: 1; font-size: 11px; padding: 0 4px; }
  .tabs svg { width: 20px; height: 20px; }
  .tabs button[aria-selected="true"]::after { top: 0; bottom: auto; left: 28%; right: 28%; }
  .tabs button:hover { background: none; }
  .statusbar { position: static; height: auto; padding-block: 10px 6px; white-space: normal; }
  .disclaimer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* clears the fixed tab bar */
  main { padding-bottom: 24px; }
  .ctxbar { gap: 8px 12px; }
  .hero { font-size: 40px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .pct-cell, .lb td.pct-cell { display: none; }
  .sc .stat-col { min-width: 150px; max-width: 170px; }
  .sc .who .grp { display: none; }
  .sc tbody tr.is-target .stat-col .nm::after { display: none; }
  .sc tbody tr.is-target .stat-col { box-shadow: inset 3px 0 0 var(--ink-3), inset -1px 0 0 var(--line); }
  .sc-pick { width: 100%; }
  .sc-pick select { flex: 1; min-width: 0; }
  .kpi { padding-left: 0; border-left: 0; }
  .vd-name { font-size: 26px; }
  .vd-num { font-size: 32px; }
  .sc-top > .card { padding: 16px; }
  .ld-row button, .ld-axis { grid-template-columns: minmax(90px, 0.9fr) minmax(90px, 1.2fr) 2.6em; gap: 8px; }
}
@media (max-width: 420px) {
  .tiles { grid-template-columns: 1fr; }
  .plist button { grid-template-columns: minmax(0, 1fr) 4.4em 48px 2em; }
  .seg button { padding: 7px 9px; }
}
/* ---------- matchups (docs/specs/matchups.md, matchups-rehaul.md) */
#view-matchups { max-width: 1180px; margin: 0 auto; }
#view-matchups.gp-wide { max-width: none; } /* game-page GP1.2: the Game view takes main's 1,680 px */
.mu-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.mu-head h1 { margin: 0 0 4px; font: 700 30px/1.1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.mu-head .lede { max-width: 62ch; }
.mu-sec { margin: 28px 0 10px; font: 700 20px/1.2 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.mu-sec .hint { font: 500 12px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }

/* media (R2): a fixed box; the monogram sits under the image and shows when the image is missing or fails */
.logo, .face { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--sz); height: var(--sz); vertical-align: middle; }
.logo .mono, .face .mono { font: 700 calc(var(--sz) * 0.34)/1 var(--font-display); letter-spacing: 0.02em; color: #fff; }
.logo .mono { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--mono-bg, var(--ink-3)); }
.face { border-radius: 50%; overflow: hidden; background: var(--surface-3); }
.face .mono { color: var(--ink-2); }
.logo img, .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.face img { object-fit: cover; }
.logo:has(img) .mono { visibility: hidden; } /* logos are transparent; photos are opaque and cover the initials once loaded */

/* brand colours per theme (R2.5): media.js pairVars sets light and dark values; the theme picks one */
/* rehaul R2.5b: the Game view's two team colours are the teams' bar colours (pairVars on #mu-h2h). */
#mu-h2h { --team-a: var(--a-l); --team-b: var(--b-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #mu-h2h { --team-a: var(--a-d); --team-b: var(--b-d); } }
:root[data-theme="dark"] #mu-h2h { --team-a: var(--a-d); --team-b: var(--b-d); }
.mu-game { --ca: var(--a-l); --cb: var(--b-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mu-game { --ca: var(--a-d); --cb: var(--b-d); } }
:root[data-theme="dark"] .mu-game { --ca: var(--a-d); --cb: var(--b-d); }

/* week strip (rehaul R4.4, R4.5): scrolls inside itself */
.mu-weeks { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; }
.mu-weeks button { flex: none; scroll-snap-align: center; display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 2.7em; height: 40px; padding: 0 10px;
  font: 600 13px/1 var(--font-body); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.mu-weeks button:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink); }
.mu-weeks button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mu-weeks button:disabled { opacity: 0.4; cursor: default; }
.mu-weeks small { font: 600 9px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.mu-weeks button[aria-pressed="true"] small { color: inherit; opacity: 0.8; }

/* season record (rehaul R4.6) */
.mu-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 12px 0; }
.mu-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; }
.mu-tile .tv { margin: 4px 0 2px; font: 700 26px/1.05 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.mu-tile .tv .vs { font: 500 13px var(--font-body); color: var(--ink-3); margin: 0 4px; }
.mu-tile .ts { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* spotlight (rehaul R4.7) */
.mu-spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 8px; }
.mu-spots:empty { display: none; }
.mu-spot { display: grid; gap: 6px; text-align: left; padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: linear-gradient(135deg, var(--series-wash), transparent 60%), var(--surface); }
.mu-spot:hover { border-color: var(--line-2); }
.mu-spot .tk { color: var(--accent-ink); }
.sp-teams { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.sp-teams .dim { color: var(--ink-3); font-size: 12px; }
.sp-text { font-size: 12.5px; color: var(--ink-2); }

/* order control (schedule-order.md O5, O8) */
.mu-order { margin-top: 14px; }
.mu-order .tn:empty { display: none; }
#mu-games.by-day .mg-day { display: none; } /* O7: the day heading names it */

/* game rows (rehaul R4.1–R4.3) */
.mu-day h3 { margin: 18px 0 8px; font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.mu-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.mu-game { width: 100%; display: grid; gap: 7px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.mu-game:hover { border-color: var(--line-2); box-shadow: 0 2px 10px rgba(16, 20, 24, 0.06); }
.mg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.mg-status { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-ink); }
.mg-status.final { color: var(--ink-3); }
.mg-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) 2.2em 4.8em; align-items: center; gap: 10px; }
.mg-name { display: grid; min-width: 0; line-height: 1.2; }
.mg-name b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-name .code { display: none; }
.mg-name small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mg-score { text-align: right; font: 700 20px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.mg-team.won .mg-score, .mg-team.won .mg-name b { color: var(--ink); }
.mg-team.won .mg-name b::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-right-color: var(--ink); vertical-align: 1px; }
.mg-pct { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-pct.pk { font-weight: 700; color: var(--ink); }
.mg-pct i { font: 600 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 5px; color: var(--ink-3); font-style: normal; }
.mg-bar { display: flex; gap: 2px; height: 6px; }
.mg-bar i { display: block; min-width: 3px; }
.mg-bar i.a { background: var(--ca); border-radius: 3px 0 0 3px; }
.mg-bar i.b { background: var(--cb); border-radius: 0 3px 3px 0; }
.mg-meta { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-none { font-size: 12.5px; color: var(--ink-3); }
.mg-lines { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mg-lines i { font: 600 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 5px; color: var(--ink-3); font-style: normal; }
.mg-lines.differ { color: var(--ink); font-weight: 600; }
/* live-matchups LM1: live rows and ESPN finals (score, state, ball, game leaders); colour only in the pill and the ball */
.mg-status.live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mg-name .ls-ball { display: inline-block; flex: none; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; vertical-align: 2px; background: var(--ink-2); }
.mg-name .ls-ball.rz { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.mu-game.live .mg-score { color: var(--ink); }
.mg-lead { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-team[data-side="away"] { --t: var(--ca); }
.mg-team[data-side="home"] { --t: var(--cb); }
.mg-team.flash { animation: ls-flash 1.2s ease-out; border-radius: 6px; } /* LM1.6 */
@media (prefers-reduced-motion: reduce) { .mg-team.flash { animation: none; background: color-mix(in srgb, var(--t) 10%, transparent); } }
.mg-apart { color: var(--ink-3); font-weight: 400; }
.mu-ok { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 1px 7px 1px 4px; border-radius: 999px; }
.mu-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mu-ok.yes { color: var(--good); background: var(--good-bg); }
.mu-ok.no { color: var(--bad); background: var(--bad-bg); }

/* team pickers (rehaul R5.1) */
.mu-pickers { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tpick { position: relative; flex: 1 1 0; min-width: 0; max-width: 340px; }
.tp-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); border-left: 3px solid var(--team-a); }
.tp-btn.b { border-left-color: var(--team-b); }
.tp-btn:hover { border-color: var(--line-2); }
.tp-btn.b:hover { border-left-color: var(--team-b); } .tp-btn.a:hover { border-left-color: var(--team-a); }
.tp-name { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.tp-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-name small { font-size: 11.5px; color: var(--ink-3); }
.tp-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; }
.tp-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(560px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 10px; padding: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
#mu-b .tp-pop { left: auto; right: 0; }
.tp-pop:focus { outline: none; }
.tp-group p { margin: 6px 6px 4px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.tp-group [role="option"] { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r); font-size: 13px; cursor: pointer; }
.tp-group [role="option"]:hover, .tp-group [role="option"].active { background: var(--surface-2); }
.tp-group [role="option"].active { outline: 2px solid var(--series); outline-offset: -2px; }
.tp-group [role="option"][aria-selected="true"] { font-weight: 700; }
.mu-swap { flex: none; font-size: 15px; }

/* hero (rehaul R5.2, R5.3): brand colours only as a soft wash at each edge (D2) */
.mu-hero { position: relative; overflow: hidden; padding: 18px 20px; background:
  linear-gradient(90deg, color-mix(in srgb, var(--wa) 16%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--wb) 16%, transparent)), var(--surface); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 10px 0 14px; }
.hero-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-team.b { flex-direction: row-reverse; text-align: right; }
.ht-text { min-width: 0; flex: 1; }
.ht-name { margin: 0; font: 700 22px/1.1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ht-rec { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ht-pct { margin: 0; display: grid; justify-items: end; line-height: 1; }
.hero-team.b .ht-pct { justify-items: start; }
.ht-pct b { font: 700 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ht-pct small { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.hero-mid { text-align: center; }
.hero-score { margin: 0; display: flex; gap: 10px; align-items: baseline; font: 700 34px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.hero-score b.won { color: var(--ink); }
.hero-final { margin: 4px 0 0; font: 600 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.hero-vs { margin: 0; font: 700 18px/1 var(--font-display); color: var(--ink-3); text-transform: uppercase; }
.mu-split { display: flex; gap: 2px; }
.mu-split i { display: block; min-width: 2px; }
.mu-split.big { position: relative; height: 8px; } /* game-summary GS4.3: thinner, with a tick at 50% */
.mu-split.big::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.mu-split i.a { background: var(--team-a); border-radius: 4px 0 0 4px; }
.mu-split i.b { background: var(--team-b); border-radius: 0 4px 4px 0; }
.mu-kpis { margin: 16px 0 0; }
.mu-kpis .kpi:first-child { padding-left: 0; border-left: 0; }
.mu-kpis .mu-ok { margin-left: 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.sw.a { background: var(--team-a); }
.sw.b { background: var(--team-b); }

/* docs/specs/game-page.md GP1, GP3: main chart | rail. The Why card fills the row, so it ends level with Head to head
   (GP1.3, amended 2026-10-19); on Team strength the chart takes the height left in its card (GP3.5). */
.gp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); align-items: stretch; gap: 16px; margin-top: 16px; }
.gp-row > .card, .gp-rail > .card { margin: 0; }
.gp-main { display: flex; flex-direction: column; min-width: 0; }
.gp-rail { display: flex; flex-direction: column; min-width: 0; }
.gp-rail > .mu-why { flex: 1; display: flex; flex-direction: column; }
.gp-str:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.gp-head { margin-bottom: 6px; }
.gp-hint { margin: 0; font-size: 12.5px; color: var(--ink-3); }
#mu-strength { flex: 1; min-height: 200px; }
/* 2026-10-19 (user): when the Why card is the taller one, the meeting's lead chart takes the rest of the card instead of
   a blank strip under it. Its SVG is a 0–100 viewBox with no aspect lock and the markers sit at %, so no redraw. */
.gp-main > #mu-line, .gp-main #mu-tl { flex: 1 0 auto; display: flex; flex-direction: column; }
.gp-main .tl-body { flex: 1 0 auto; grid-template-rows: 1fr auto; }
.gp-main .tl-plot { display: flex; flex-direction: column; }
.gp-main .tl-lead { flex: 1 0 auto; }
.gp-row h3, .gp-sub { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
@media (max-width: 1099px) { .gp-row { grid-template-columns: minmax(0, 1fr); } .gp-rail { order: -1; } } /* GP1.4 */
/* GP4: one panel per side of the ball, banded from the offense's colour to the defense's (≤ 10%, rehaul R2.5) */
.gp-unit { --to: var(--team-a); --td: var(--team-b); --t: var(--to); margin-top: 20px; padding: 0; overflow: clip; border-top: 3px solid var(--to); }
/* clip, not hidden: hidden makes the panel a scroll container, and the strip's jump then ignores its scroll-margin (U5.3) */
.gp-unit.b { --to: var(--team-b); --td: var(--team-a); }
.gp-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--to) 10%, var(--surface)), var(--surface) 50%, color-mix(in srgb, var(--td) 10%, var(--surface))); }
.gp-uh { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 20px/1.2 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.gp-vs { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.gp-src { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-3); }
.gp-mx { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 18px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.gp-mx .logo { margin-top: 1px; }
.gp-mx b { color: var(--ink); font-weight: 600; }
.gp-mx.none { color: var(--ink-3); }
/* side-of-ball-stats.md: the story, Key players, then two open columns (SS1.2): the 7 matchup stats as forecast rows (SS3)
   beside How {team} plays (SS4.1). Both columns use one marker language: offense dot, defense ring, on a range track. */
.sb-none { margin: 0; padding: 16px 18px; }
.sb-tell { min-width: 0; padding: 16px 18px 18px; }
.sb-tell > .gp-sub { margin-top: 0; }
.sb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; padding: 16px 18px 20px; border-top: 1px solid var(--line); }
.sb-stats, .sb-style { min-width: 0; }
.sb-stats > .gp-sub { margin: 0; }
.sty-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sty-h .gp-sub { margin: 0; }
.sty-key .logo { margin-right: -2px; }
.sb-fcs { list-style: none; margin: 0; padding: 0; }
.sb-fc { padding: 10px 0 9px; border-top: 1px solid var(--line); cursor: default; }
.sb-fc:first-child { border-top: 0; }
.sb-fc:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; border-radius: 6px; }
.sb-fh { margin: 0 0 7px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.sb-n { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font: 600 13px/1.25 var(--font-body); color: var(--ink); }
.sb-n small { font-size: 10.5px; font-weight: 500; }
.sb-v { font-size: 12px; color: var(--ink-3); }
.sb-v b { font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--to); margin-right: 2px; }
.sb-u { color: var(--ink-2); }
/* side-of-ball-stats SS3.6 (amendment 1): a plain track with the league average as a centre mark; the two ranks in a fixed
   column at the right, so they line up down the seven rows (a Webull-style table). */
.sb-ln { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 14px; }
.sb-track { height: 10px; background: none; }
.sb-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 1px; background: var(--line-2); }
.sb-mid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: .55; }
.sb-rk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-rk > span { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.sb-rk b { font-weight: 600; color: var(--ink); }
.sb-rk .sty-dot, .sb-rk .sty-ring { position: static; transform: none; flex: none; width: 8px; height: 8px; }
.sb-rk .sty-ring { width: 9px; height: 9px; border-width: 2px; }
.sb-top2 { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sb-axis { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.sb-keyrk { margin-left: auto; color: var(--ink-3); }
.sb-dia { position: absolute; top: 50%; width: 10px; height: 10px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%) rotate(45deg); z-index: 2; }
.sty-key .sb-dia { position: static; transform: rotate(45deg); display: inline-block; width: 8px; height: 8px; margin: 0 2px; }
.sb-n small.mx-tag { padding: 1px 7px; border-radius: 999px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--tt) 10%, transparent); box-shadow: inset 0 0 0 1px var(--tt); } /* GP4.5, SB3.5: the colour of the side it favours */
.mx-tag.a { --tt: var(--team-a); } .mx-tag.b { --tt: var(--team-b); }
/* SB10.3: a panel below the fold is not laid out until it nears the view. Measured: the Game view draw's forced layout went from
   ~10 ms to ~3.5 ms, the warm draw from 16–19 to ~10 ms. The size hint is the panel's usual height; "auto" remembers the real one. */
.gp-unit { content-visibility: auto; contain-intrinsic-size: auto 1700px; }
.sb-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-story li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--ink); }
.sb-story li .logo { margin-top: 2px; }
.sb-story b { font-weight: 600; }
.sb-dot { display: block; width: 8px; height: 8px; margin: 6px 5px; border-radius: 50%; background: var(--line-2); }
.sb-face { display: block; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--team-a); } .sb-face.b { box-shadow: 0 0 0 2px var(--team-b); }
.sb-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-unit > .gp-players { min-width: 0; padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.gp-style .sty-look { margin-top: 2px; font-size: 17px; }
@media (max-width: 1099px) { .sb-cols { grid-template-columns: minmax(0, 1fr); } }
/* stats-style-columns SC1.2: one row grid for both columns (head, 7 rows, fold). Each column, its list and .gp-style pass
   the grid down (subgrid / contents), so row i has the same top and height on both sides, and opening a fold grows only
   the last row. */
@media (min-width: 1100px) {
  .sb-cols { grid-template-rows: auto repeat(7, auto) auto; row-gap: 0; }
  .sb-stats, .sb-style { display: grid; grid-row: span 9; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); } /* an open table must not widen the track */
  .sb-style > .gp-style { display: contents; }
  .sb-fcs, .sty-rows { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
}
/* stats-style-columns SC2–SC4: one head, one row shape, one tag, one strip in both columns */
.sb-hd { margin-bottom: 6px; }
.sb-ttl, .sb-cols .sty-h { display: inline-flex; align-items: center; gap: 6px; }
.sb-ttl .gp-sub, .sb-cols .sty-h .gp-sub { margin: 0 0 0 2px; }
.sb-cols .sb-say { margin: 6px 0 0; font: 500 13.5px/1.4 var(--font-body); color: var(--ink); } /* beats .gp-style .sty-look: both heads read alike */
.sb-cols .sty-key { margin: 10px 0 2px; }
.sty-key .sb-mid { position: static; display: inline-block; width: 1px; height: 10px; }
.sb-cols .sty-r { padding: 10px 0 9px; }
.sb-cols .sty-r .sb-fh { margin: 0 0 7px; }
.sb-tag { padding: 1px 7px; border-radius: 999px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; } /* the Mismatch pill's shape (SC2.2) */
.sb-track .sty-span { top: 50%; height: 4px; transform: translateY(-50%); opacity: 0.35; }
.sb-fc.mx .sb-track .sty-span, .sty-r.big .sb-track .sty-span, .sty-r.same .sb-track .sty-span { background: var(--t); opacity: 0.7; }
@media (max-width: 559px) { .sb-ln { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; } .sb-keyrk { display: none; } }
@media (max-width: 899px) {
  .gp-unit > .gp-players, .sb-tell, .sb-cols { padding-inline: 14px; }
  .gp-band { grid-template-columns: minmax(0, 1fr); padding-inline: 14px; } .gp-mx { padding-inline: 14px; } .gp-uh { font-size: 18px; } }
/* SB1.2: this game's chip in the ribbon */
.h2-chipb.this { border-style: dashed; }
.h2-chipb.this[aria-pressed="true"] { border-style: solid; }
/* GP3.3: the hero's score follows the crosshair while the main chart shows this game */
.hero-score.tl-live + .hero-final { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-radius: 999px; padding: 3px 9px; }
.mc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mc-head h3 .hint { font-weight: 500; }
.mc-read { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; min-height: 1.5em; margin: 6px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.mc-read .dim { color: var(--ink-3); }
/* game-summary GS5: the legend on top of the strength chart (TradingView style); it follows the crosshair */
.mc-read.top { margin: 2px 0 8px; min-height: 22px; }
.ml-t { display: inline-flex; align-items: center; gap: 5px; }
.ml-t .sw { margin-right: 2px; }
.ml-t b { font-weight: 700; }
.chart.strength { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart .zero { stroke: var(--line-2); stroke-width: 1.2; }
.chart .marker { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .mark-label { fill: var(--accent-ink); }
.chart .sl { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .sl.a, .chart .sl-end.a, .chart .sl-dot.a { stroke: var(--team-a); }
.chart .sl.b, .chart .sl-end.b, .chart .sl-dot.b { stroke: var(--team-b); }
.chart .sl-end { fill: var(--surface); stroke-width: 2; }
.chart .sl-gap { stroke: none; }
.chart .sl-gap.a { fill: color-mix(in srgb, var(--team-a) 16%, transparent); }
.chart .sl-gap.b { fill: color-mix(in srgb, var(--team-b) 16%, transparent); }
.chart .po-band { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.chart .po-rule { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .po-label { fill: var(--ink-3); font-size: 10.5px; }
.chart .season-rule { stroke: var(--line-2); stroke-width: 1; }
.chart .sl-dot { fill: var(--surface); stroke-width: 2.5; pointer-events: none; }
/* game-summary GS1, GS2: the Why card as a tally. Rows are an order book: a's points | a's bar | reason | b's bar | b's points.
   The rows are subgrids of one grid, so the reason column and both bar columns line up down the card. */
.ty-lede { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.ty-notes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.ty-notes li { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.ty-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ty-side { display: inline-flex; align-items: center; gap: 6px; }
.ty-side b { font-size: 15px; color: var(--ink); }
.ty-op { color: var(--ink-3); }
.ty-net { margin-left: auto; font: 700 16px/1 var(--font-body); color: var(--ink); white-space: nowrap; }
.ty-none { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.mu-why > .tn { margin-top: auto; padding-top: 12px; } /* the footnote sits at the card's foot, level with Head to head's */
.ty-none [data-tip] { cursor: help; }
/* docs/specs/why-bridge.md: the Why card as a bridge from Even to the pick. Every row (head, group, step, total) uses one
   column template, so names, the plot and the points line up. Steps stretch 34–56 px to fill the card (WB12): the card
   must never set the row's height, so the list has basis 0 and minmax(34px, 1fr) tracks (inline, from whyHtml). */
.mu-why { --wb-cols: minmax(0, 1.3fr) minmax(88px, 1fr) 50px; }
.wb-row, .wb-grp, .wb-step { display: grid; grid-template-columns: var(--wb-cols); column-gap: 10px; align-items: center; }
.wb-head { margin: 2px 0 0; padding: 0 6px; font: 600 11px/18px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.wb-head > :last-child, .wb-pts { display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; text-align: right; }
.wb-axis { display: flex; justify-content: space-between; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.wb-axis em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; white-space: nowrap; }
.wb-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } /* each step its own height (1fr rows all took the tallest) */
.wb-steps > li { display: flex; }
.wb-grp { padding: 0 6px; font: 600 10.5px/20px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.wb-grp > span:first-child, .wb-for { display: inline-flex; align-items: center; gap: 4px; }
.wb-step { flex: 1; min-height: 34px; margin: 0; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wb-step[aria-pressed="true"], .wb-z[aria-pressed="true"] { background: var(--surface-2); }
@media (hover: hover) { .wb-step:hover, .wb-z:hover { background: var(--surface-2); } } /* a tap's :hover sticks on touch screens */
.wb-step:focus-visible, .wb-z:focus-visible { outline-offset: -2px; }
.wb-name { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 1px 0; font-size: 13px; line-height: 16px; color: var(--ink); }
.wb-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 11.5px; line-height: 16px; color: var(--ink-3); }
.wb-ev b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-ev .face { flex: none; }
.wb-pts { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
/* the plot: Even is a dashed line at --z; a step is a bar in its team's colour; thin connectors join each step's end to
   the next step's start, through the group heads, into the total */
.wb-plot { position: relative; align-self: stretch; min-height: 18px; }
.wb-plot::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--z); margin-left: -0.5px; border-left: 1px dashed var(--line-2); }
.wb-plot > i { position: absolute; top: 50%; height: 12px; margin-top: -6px; min-width: 2px; border-radius: 2px; }
.wb-plot > i.a { background: var(--team-a); } .wb-plot > i.b { background: var(--team-b); }
.wb-c { position: absolute; top: 0; bottom: 0; margin-left: -0.5px; border-left: 1px solid var(--ink-3); opacity: 0.55; }
.wb-c.in { bottom: calc(50% + 6px); } .wb-c.out { top: calc(50% + 6px); }
.wb-total { min-height: 34px; margin-bottom: 10px; padding: 0 6px; border-top: 1px solid var(--line); }
.wb-total .wb-name { flex-direction: row; align-items: baseline; gap: 6px; color: var(--ink-2); }
.wb-net { font-size: 15px; color: var(--ink); white-space: nowrap; }
.wb-total .wb-plot > i { height: 14px; margin-top: -7px; }
.wb-total .wb-c.in { bottom: calc(50% + 7px); }
.wb-none { margin: -4px 0 10px; font-size: 12px; line-height: 20px; color: var(--ink-3); }
.wb-z { margin: 0; padding: 0 3px; border: 0; border-radius: 4px; background: none; font: inherit; color: var(--ink-2); cursor: pointer; }
/* WB10: the readout. Every pane sits in one grid cell, so the box keeps the tallest pane's height and never moves.
   It takes the height left in the card (2026-10-19, user), so the card ends level with Head to head with no gap. */
.mu-why > .wb-read { flex: 1 0 auto; display: grid; align-content: start; padding: 8px 10px; max-width: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; line-height: 18px; }
.wb-read > p { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.wb-read > .on { visibility: visible; }
.wb-read b { font-weight: 600; color: var(--ink); }
.wb-read .wb-rw { color: var(--ink-3); }
.wy-tag { padding: 0 5px; border-radius: 4px; background: var(--surface-2); font-size: 10.5px; line-height: 16px; color: var(--ink-2); }
@media (max-width: 420px) { .ty-net { margin-left: 0; } }

/* quarterbacks (rehaul R5.8) */

/* mirrored rank bars (rehaul R5.10, R5.13) */
.mm-all { margin-top: 10px; }
.mm-all summary { cursor: pointer; font-size: 12.5px; color: var(--accent-ink); font-weight: 600; }
.mm-all .tbl-wrap { margin-top: 8px; }
.mm-all td .dim { font-size: 11.5px; margin-left: 2px; color: var(--ink-3); }
/* Style strips (docs/specs/matchups-style.md amendment e), one block per unit panel (game-page GP4.4) */
.mm-chip { font: 500 11px/1 var(--font-body); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.sty-r:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; border-radius: 6px; }
.sty-det { display: none; margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sty-r:focus .sty-det { display: block; }
.sty-look { margin: 8px 0 0; font: 650 19px/1.25 var(--font-body); color: var(--ink); }
.sty-lead { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sty-key { margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-3); }
.sty-key span { display: inline-flex; align-items: center; gap: 6px; }
.sty-key .sty-dot, .sty-key .sty-ring, .sty-key .sty-mid { position: static; transform: none; }
.sty-rows { list-style: none; margin: 0; padding: 0; }
.sty-r { padding: 10px 0 8px; border-top: 1px solid var(--line); cursor: default; }
.sty-r:first-child { border-top: 0; }
.sty-n { margin: 0 0 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 13px/1.2 var(--font-body); color: var(--ink); }
.sty-n small { font: 600 10.5px/1 var(--font-body); padding: 3px 7px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); border: 1px solid var(--line); }
.sty-r.big .sty-n small { color: var(--ink); border-color: color-mix(in srgb, var(--t) 60%, transparent); background: color-mix(in srgb, var(--t) 18%, transparent); }
.sty-track { position: relative; display: block; height: 4px; margin: 0 7px; border-radius: 2px; background: var(--line); }
.sty-mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: var(--ink-3); opacity: 0.5; }
.sty-span { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--ink-3); opacity: 0.45; }
.sty-r.big .sty-span { background: var(--t); opacity: 0.75; }
.sty-dot, .sty-ring { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; display: inline-block; }
.sty-dot { width: 12px; height: 12px; background: var(--team-a); box-shadow: 0 0 0 2px var(--surface); z-index: 1; }
.sty-ring { width: 16px; height: 16px; border: 2.5px solid var(--team-a); background: var(--surface); }
.sty-dot.b { background: var(--team-b); } .sty-ring.b { border-color: var(--team-b); }
.sty-ends { margin: 7px 0 0; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-3); }
.sty-r:hover .sty-ends { color: var(--ink-2); }
.sty-tbl td:first-child { white-space: nowrap; }
.mm-how-h { margin: 12px 0 6px; font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.mm-how { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 12.5px; line-height: 1.4; }
.mm-how dt { font-weight: 600; color: var(--ink); }
.mm-how dd { margin: 0; color: var(--ink-2); }
.mm-how .dim { display: block; color: var(--ink-3); font-size: 11.5px; }
@media (max-width: 560px) { .mm-how { grid-template-columns: 1fr; gap: 2px; } .mm-how dd { margin-bottom: 6px; } }

/* key players, strengths, meetings (rehaul R5.12, R5.5, R5.13) */
/* key-players-section.md KS4–KS8 (key-players R4, R7; game-view-layout L3.2): the offense's key players as a grid of
   cards in its unit panel. Value box: width = usage, height = per play above the backup line. --t is the offense colour,
   set by .gp-unit; the team-a/b classes on the SVGs follow the panel's side. */
.kp-key { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.kp-key svg { width: 34px; height: 18px; flex: none; }
.kp-key rect { fill: color-mix(in srgb, var(--ink-3) 22%, transparent); stroke: var(--ink-3); stroke-width: 1.5; }
.kp-key line { stroke: var(--line-2); stroke-width: 1; }
/* KS17, KS22: five across; each card spans seven grid rows and takes them as a subgrid, so the head, number, fact, box,
   stats, strips and rank line up across a row of cards. The row gap is 0 so the cards' own gap (8 px) rules inside them. */
.ks-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 1099px) { .ks-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 559px) { .ks-grid { grid-template-columns: minmax(0, 1fr); } }
.ks-grid > li { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 12px; padding: 14px 14px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--t) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--t); }
@supports (grid-template-rows: subgrid) { .ks-grid > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 7; grid-template-rows: subgrid; row-gap: 8px; align-content: start; } } /* one column that never grows past the card */
.ks-grid > li.kp-d { --t: var(--td); } /* KS14: the defender takes the defense's colour */
.ks-grid > li > .empty { grid-row: 1 / -1; margin: 0; }
.kp-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kp-c .face { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--t); } /* KS20: every photo in the team colour */
.kp-id { min-width: 0; display: grid; gap: 1px; }
.kp-id p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line each */
.kp-eye { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--t) 70%, var(--ink)); } /* KS21: the role, text not a pill */
.kp-name { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.kp-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.kp-meta .logo { flex: none; }
.kp-note { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.kp-val { margin: 0; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.kp-val b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.kp-val b.up { color: color-mix(in srgb, var(--t) 80%, var(--ink)); } .kp-val b.dn { color: var(--ink-3); }
.kp-say { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.kb-none { min-height: 1px; }
.kp-stats { margin: 0; display: grid; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; } /* KS23: label left, value right */
.kp-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.kp-stats dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.kp-stats dd { margin: 0; flex: none; font-weight: 600; color: var(--ink); }
.kp-stats dd span { font-weight: 400; color: var(--ink-3); }
.kb { display: block; width: 100%; height: auto; overflow: visible; }
.kb-cloud { stroke: var(--ink-3); stroke-opacity: .35; stroke-width: 3; stroke-linecap: round; fill: none; }
.kb-box { fill-opacity: .24; }
.kb.a .kb-box { fill: var(--team-a); } .kb.b .kb-box { fill: var(--team-b); }
.kb-box.below { fill: var(--ink-3) !important; }
.kb-base { stroke: var(--line-2); stroke-width: 1; }
.kb-pull { stroke: var(--ink-3); stroke-width: 1; }
.kb-raw { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.5; }
.kb-dot { stroke: var(--surface); stroke-width: 2; }
.kb.a .kb-dot { fill: var(--team-a); } .kb.b .kb-dot { fill: var(--team-b); }
.kb-dot.below { fill: var(--ink-3) !important; }
.kb-tagbg { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; } /* KS22: the line's label, a price tag in the gutter */
.kb-tag { font: 500 8.5px/1 var(--font-body); fill: var(--ink-3); }
.kb-tag.v { font-size: 9.5px; font-weight: 700; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.kp-rank { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kp-strip { flex: 1; min-width: 0; height: 11px; }
.ks-all { stroke: var(--ink-3); stroke-opacity: .4; stroke-width: 1; }
.ks-me { stroke-width: 2.5; stroke-linecap: round; }
.kp-strip.a .ks-me { stroke: var(--team-a); } .kp-strip.b .ks-me { stroke: var(--team-b); }
.kp-two { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: 3px 8px; font-size: 12px; color: var(--ink-3); }
.kp-two b { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kp-two .kp-strip { width: 100%; }
.kp-strip.faint .ks-all { stroke-opacity: .22; }
.ks-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; }
.kp-strip .ks-me.muted { stroke: var(--ink-3); }
.kp-sum { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kp-sum span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-sum span:last-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.kp-pts { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; cursor: help; }
.kp-face { position: relative; flex: none; }
.kp-st { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; border: 2px solid var(--surface); }
.kp-st.bad { background: var(--bad-bg); color: var(--bad); }
.kp-st.fair { background: var(--fair-bg); color: var(--fair); }
/* Head to head (docs/specs/head-to-head.md) */
.h2-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.h2-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.h2-pair { display: inline-flex; } .h2-pair .logo + .logo { margin-left: -8px; }
.h2-big { margin: 0; font: 700 30px/1.05 var(--font-display); letter-spacing: 0.01em; color: var(--ink); }
.h2-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
/* game-view-layout L4: meeting ribbon, one row; it scrolls inside itself when the meetings do not fit (L4.3) */
.h2-ribbon { position: relative; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: thin; }
.h2-chipb { --t: var(--ink-3); position: relative; flex: none; scroll-snap-align: end; display: flex; align-items: center; gap: 8px; min-width: 116px; padding: 8px 12px 11px 10px;
  font: inherit; color: var(--ink-2); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; }
.h2-chipb.a { --t: var(--team-a); } .h2-chipb.b { --t: var(--team-b); }
.h2-chipb:hover { background: var(--surface-2); }
.h2-chipb[aria-pressed="true"] { border-color: var(--t); background: color-mix(in srgb, var(--t) 12%, var(--surface)); color: var(--ink); }
.h2-chipb:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.h2-ct { display: grid; gap: 2px; }
.h2-ct b { font: 650 15px/1.1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.h2-ct small { font-size: 11px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; }
.h2-mbar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(10% + var(--m) * 90%); background: var(--t); opacity: .55; }
.h2-chipb[aria-pressed="true"] .h2-mbar, .h2-chipb:hover .h2-mbar { opacity: 1; }
.h2-chipb.tie .h2-mbar { width: 18px; }
.h2-game { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.h2-when { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-3); }
.h2-score { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 600 18px/1.2 var(--font-body); color: var(--ink-2); }
.h2-score > span { display: inline-flex; align-items: center; gap: 8px; }
.h2-score b { font: 700 30px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.h2-score .won, .h2-score .won b { color: var(--ink); }
.h2-score small { font: 600 12px/1 var(--font-body); padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.h2-score.tl-live small { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); }

/* Game timeline (docs/specs/game-timeline.md): baseline lead chart, drive bars, crosshair band, readout */
.tl { min-height: 318px; margin: 18px 0 6px; } /* T2.2: same height while loading */
.tl-msg { margin: 0; min-height: 300px; display: grid; place-items: center; font-size: 13px; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-lg); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.tl-head .tk { margin: 0; }
.tl-chips button { min-width: 2.6em; }
.tl-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-note { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); }
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto auto; column-gap: 24px; }
.tl-plot { position: relative; grid-column: 1; padding-right: 30px; cursor: crosshair; touch-action: pan-y; outline: none; border-radius: var(--r); }
.tl-plot:focus-visible { box-shadow: 0 0 0 2px var(--accent-ink); }
.tl-lead { position: relative; height: 184px; }
.tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.tl-svg path, .tl-svg line { vector-effect: non-scaling-stroke; }
.tl-grid { stroke: var(--line); stroke-width: 1; }
.tl-qline { stroke: var(--line-2); stroke-width: 1; }
.tl-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.tl-area { stroke: none; }
.tl-area.a { fill: color-mix(in srgb, var(--team-a) 18%, transparent); } .tl-area.b { fill: color-mix(in srgb, var(--team-b) 18%, transparent); }
.tl-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.tl-line.a { stroke: var(--team-a); } .tl-line.b { stroke: var(--team-b); }
.tl-tick { position: absolute; right: -30px; width: 24px; transform: translateY(-50%); font: 500 10.5px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tl-side { position: absolute; left: 4px; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-body); color: var(--ink-2); pointer-events: none; }
.tl-side.a { top: 4px; } .tl-side.b { bottom: 4px; }
.tl-key { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.tl-key .face, .tl-key .logo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--team-a); border-radius: 50%; background: var(--surface); }
.tl-key.b .face, .tl-key.b .logo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--team-b); }
.tl-key small { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 3px); padding: 1px 4px; border-radius: 3px; font: 700 8.5px/1.2 var(--font-body); letter-spacing: 0.04em; background: var(--ink); color: var(--bg); }
.tl-drives { position: relative; height: 46px; margin-top: 8px; border-top: 1px solid var(--line); }
.tl-dr { position: absolute; bottom: 0; height: max(2px, var(--h)); box-sizing: border-box; border-right: 2px solid var(--surface); border-radius: 4px 4px 0 0; background: var(--team-a); opacity: 0.32; }
.tl-dr.b { background: var(--team-b); } .tl-dr.x { background: var(--ink-3); }
.tl-dr.on { opacity: 1; }
.tl-dr b { position: absolute; bottom: 100%; left: 0; right: 2px; text-align: center; font: 700 9px/1.4 var(--font-body); color: var(--ink-2); }
.tl-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); border-left: 1.5px solid var(--ink-2); pointer-events: none; z-index: 1; }
.tl-plot.pinned .tl-band { border-left-color: var(--accent-ink); }
.tl-xtag, .tl-ytag { position: absolute; z-index: 3; padding: 3px 6px; border-radius: 4px; font: 600 10.5px/1.2 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--ink); color: var(--bg); pointer-events: none; }
.tl-xtag { top: 100%; transform: translate(-50%, 4px); }
.tl-ytag { right: -30px; transform: translateY(-50%); } /* grows inward from the tick column, never past the card */
.tl-qs { position: relative; grid-column: 1; height: 26px; margin-right: 30px; }
.tl-qs span { position: absolute; top: 8px; transform: translateX(-50%); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.06em; color: var(--ink-3); }
.tl-read { grid-column: 2; grid-row: 1 / span 2; min-width: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.tl-rh { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.tl-rl, .tl-rs { margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tl-rs { color: var(--ink-3); }
.tl-sum { margin: 0 0 8px; font: 500 15px/1.45 var(--font-body); color: var(--ink); }
.tl-hint { margin: 0; font-size: 12px; color: var(--ink-3); }
.tl-keys { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-keys li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; color: var(--ink); }
.tl-kind { font-size: 11.5px; color: var(--ink-3); }
.tl-keys small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 719px) {
  .tl-body { grid-template-columns: minmax(0, 1fr); }
  .tl-read { grid-column: 1; grid-row: auto; min-height: 112px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } /* T5.2 */
  .tl-lead { height: 160px; }
}

@media (max-width: 899px) {
  .ht-name { font-size: 18px; }
  .ht-pct b { font-size: 30px; }
}
@media (max-width: 719px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .hero-team, .hero-team.b { flex-direction: column; text-align: center; gap: 6px; }
  .hero-team .ht-pct, .hero-team.b .ht-pct { justify-items: center; }
  .hero-team .logo { --sz: 52px !important; }
  .ht-rec { display: none; }
  .hero-score { font-size: 26px; gap: 6px; }
  .mu-reasons li { grid-template-columns: minmax(0, 1fr) 5em; }
  .mu-reasons .mr-track { grid-column: 1 / -1; grid-row: 2; }
  .h2-big { font-size: 26px; }
}
@media (max-width: 519px) {
  .mg-name .full { display: none; }
  .mg-name .code { display: inline; }
  .mu-pickers { gap: 6px; }
  .tp-name small { display: none; }
  .tp-btn { padding: 6px 8px 6px 6px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Rankings (docs/specs/power-rankings.md, rankings-redesign.md): week cards, one-line lead; sortable table
   with three views | detail panel; league map */
.rk-top { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.rk-wh { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rk-wh h1 { margin: 0; font: 700 28px/1.1 var(--font-display); letter-spacing: 0.01em; }
.rk-weekpick { display: flex; align-items: center; gap: 6px; }
.rk-weekpick .btn.icon { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.rk-weekpick .btn.icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rk-weekpick .btn:disabled { opacity: 0.4; cursor: default; }
.rk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rk-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
button.rk-card { cursor: pointer; }
button.rk-card:hover { border-color: var(--ink-3); }
.rk-card.tc { box-shadow: inset 0 3px 0 var(--tc); }
.rk-card .lbl { font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.rk-card-m { display: flex; align-items: center; gap: 8px; min-width: 0; font-variant-numeric: tabular-nums; }
.rk-card-m > b { font: 700 18px/1 var(--font-display); letter-spacing: 0.02em; }
.rk-card-m .logo { flex: none; }
.rk-card-n, .rk-card .rk-pill.big { margin-left: auto; }
.rk-card-n { font: 700 24px/1 var(--font-display); }
.rk-card small { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  align-self: stretch; } /* the cards are <button>s: Chromium's button default (align-items: flex-start) sizes the line to its text, so it ran past the card instead of ending in … */
.rk-card-g .rk-card-m > b { font-size: 16px; }
.rk-card .dim, .rk .dim { color: var(--ink-3); }
.rk-lead { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.rk-lead b { color: var(--ink); font-weight: 600; }

.rk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; padding: 12px 0 32px; }
.rk-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rk-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rk-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.rk-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.rk-tbl thead th { position: sticky; top: 0; background: var(--surface); text-align: left; font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rk-tbl thead th.num { text-align: right; }
.rk-tbl thead th[aria-sort] { color: var(--ink); }
.rk-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.rk-sort:hover { color: var(--ink); }
.rk-arr { font-size: 9px; }
.rk-tbl .num { text-align: right; }
.rk-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.rk-tier > tr > :first-child { box-shadow: inset 3px 0 0 var(--line-2); }
.rk-tier.t1 > tr > :first-child { box-shadow: inset 3px 0 0 var(--ink-3); }
.rk-tier-h th { text-align: left; font: 600 11.5px/1 var(--font-body); color: var(--ink-3); background: var(--surface-2); padding: 7px 8px 7px 12px; }
.rk-tbl tr[data-team] { cursor: pointer; }
.rk-tbl tr[data-team]:hover td { background: var(--surface-2); }
.rk-tbl tr[aria-selected="true"] td { background: var(--series-wash); }
.rk-rank { width: 52px; font-weight: 700; color: var(--ink-2); }
.rk-rank > span { display: inline-block; min-width: 2ch; }
.rk-mv, .rk-tier-tag { display: inline-block; min-width: 3ch; margin-left: 4px; font-size: 10.5px; font-weight: 600; text-align: left; }
.rk-mv.up { color: var(--up); } .rk-mv.down { color: var(--down); } .rk-mv.flat, .rk-tier-tag { color: var(--ink-3); }
.rk-name { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.rk-name b { font-weight: 700; min-width: 3ch; }
.rk-name small { color: var(--ink-3); font-size: 12px; }
.rk-str { font-weight: 700; font-size: 14.5px; }
.rk-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 3px 7px; border-radius: 999px; font: 600 12px/1.2 var(--font-body);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-pill.up { color: var(--up); background: color-mix(in srgb, var(--up) 10%, var(--surface)); }
.rk-pill.down { color: var(--down); background: color-mix(in srgb, var(--down) 10%, var(--surface)); }
.rk-pill.flat { color: var(--ink-3); background: var(--surface-2); }
.rk-pill.big { font-size: 14px; padding: 4px 9px; }
.rk-pill.m-only { display: none; }
.rk-trend .spark path { stroke-width: 1.6; }
.rk-trend.up .spark path, .rk-trend.up .spark circle { stroke: var(--up); } .rk-trend.up .spark circle { fill: var(--up); }
.rk-trend.down .spark path, .rk-trend.down .spark circle { stroke: var(--down); } .rk-trend.down .spark circle { fill: var(--down); }
.rk-po { min-width: 104px; }
.rk-po b { display: inline-block; min-width: 4ch; text-align: right; font-weight: 700; }
.rk-pobar { display: inline-block; width: 44px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--surface-3); vertical-align: middle; overflow: hidden; }
.rk-pobar i { display: block; height: 100%; background: var(--series); border-radius: 3px; }
.rk-nx { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12.5px; }
.rk-nx b { color: var(--ink); }
.rk-nx small { color: var(--ink-2); font-size: 12px; margin-left: 2px; }
.rk-diff.up { color: var(--up); } .rk-diff.down { color: var(--down); }
.rk-line-row td { padding: 0; border-bottom: 2px dashed var(--ink-3); }
.rk-line-row span { display: inline-block; transform: translateY(50%); margin-left: 12px; padding: 0 6px; background: var(--surface); color: var(--ink-3); font: 600 10.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.rk-v-race tr.in .rk-rank { color: var(--ink); }
.rk-pin { width: 36px; }
.rk-pin .pin-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--ink-3); cursor: pointer; }
.rk-pin .pin-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.rk-pin .pin-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rk-pin .pin-btn[aria-pressed="true"] { color: var(--accent-ink); }
.rk-pin .pin-btn[aria-pressed="true"] svg { fill: currentColor; }
.rk-pin .pin-btn:disabled { opacity: 0.35; cursor: default; }
.rk-check { padding: 2px 4px; color: var(--ink-2); font-size: 13px; }
.rk-check p { margin: 4px 0; }

/* league map: tint = direction of this week's strength change, opacity by size (P4.2); text stays ink */
.rk-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rk-div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; min-width: 0; }
.rk-div h3 { margin: 0 0 8px; font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.rk-tiles { display: grid; gap: 6px; }
.rk-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.rk-tile.up { background: color-mix(in srgb, var(--up) calc(var(--a) * 26%), var(--surface)); }
.rk-tile.down { background: color-mix(in srgb, var(--down) calc(var(--a) * 26%), var(--surface)); }
.rk-tile:hover { border-color: var(--ink-3); }
.rk-tile[aria-pressed="true"] { border-color: var(--series); box-shadow: 0 0 0 1px var(--series); }
.rk-tt, .rk-tv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-tt small { color: var(--ink-2); font-size: 11.5px; }
.rk-tv { align-items: flex-end; }
.rk-tile .delta { font-size: 11.5px; color: var(--ink-2); }

/* detail panel (RR6): hero, chart, key stats, next game, injury report, why it moved, key players */
.rk-detail { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow-y: auto; scrollbar-width: thin; }
.rk-hero { display: flex; align-items: center; gap: 12px; }
.rk-hero h2 { font-size: 22px; }
.rk-place { margin: 4px 0 0; color: var(--ink-2); font-size: 12.5px; }
.rk-big { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.rk-num { font: 700 44px/1 var(--font-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.rk-unit { color: var(--ink-3); font-size: 13px; }
.rk-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; min-height: 1.6em; display: flex; align-items: center; gap: 6px; }
.rk-chart-sec { margin-top: 10px; }
.rk-chart-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg.sm button { padding: 5px 9px; font-size: 11.5px; }
.rk-sec { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.rk-sec h3 { margin: 0 0 10px; font: 700 13.5px/1.3 var(--font-body); }
.rk-sec h3 .hint { font-weight: 500; margin-left: 4px; }
.rk-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rk-kv .kv { background: var(--surface-2); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-kv .kv b { font: 700 19px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.rk-kv .kv small { color: var(--ink-3); font-size: 11.5px; line-height: 1.3; }
.rk-next-card { display: flex; align-items: center; gap: 12px; }
.rk-next-card > div:first-of-type { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-next-card small { color: var(--ink-2); font-size: 12.5px; }
.rk-next-p { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.rk-next-p b { font: 700 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.rk-next-p small { color: var(--ink-3); font-size: 11px; }
.rk-inj { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rk-inj li { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.rk-inj .kp-st { position: static; transform: none; border: 0; min-width: 88px; text-align: center; }
.rk-inj .dim { color: var(--ink-3); font-size: 12px; }
.rk-key { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }
.rk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 12px/1.4 var(--font-body); }
.rk-legend .link { padding: 0 2px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--ink-3); }
.sw.c1 { background: var(--c1); } .sw.c2 { background: var(--c2); } .sw.c3 { background: var(--c3); } .sw.c4 { background: var(--c4); }
.sw.pos { background: var(--series); } .sw.neg { background: var(--ink-3); }
.chart .rl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .rl.c1, .chart .rl-dot.c1 { stroke: var(--c1); } .chart .rl.c2, .chart .rl-dot.c2 { stroke: var(--c2); }
.chart .rl.c3, .chart .rl-dot.c3 { stroke: var(--c3); } .chart .rl.c4, .chart .rl-dot.c4 { stroke: var(--c4); }
.chart .rl.c1 { stroke-width: 2.5; }
.chart .rl-dot { fill: var(--surface); stroke-width: 2.5; pointer-events: none; }
.rk-parts { display: flex; align-items: stretch; height: 14px; }
.rk-parts .side { display: flex; gap: 2px; min-width: 0; }
.rk-parts .side.neg { justify-content: flex-end; }
.rk-parts .zero { width: 2px; background: var(--ink); margin: -3px 2px; border-radius: 1px; flex: none; }
.rk-parts .pt { display: block; min-width: 2px; }
.rk-parts .pt.pos { background: var(--series); }
.rk-parts .pt.neg { background: var(--ink-3); }
.rk-parts .side.pos .pt:last-child { border-radius: 0 4px 4px 0; }
.rk-parts .side.neg .pt:last-child { border-radius: 4px 0 0 4px; }
.rk-plist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); }
.rk-plist li { display: flex; align-items: center; }
.rk-plist b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk-why { margin: 0 0 8px; font-size: 13px; }
.rk-sec .hint + .rk-parts { margin-top: 6px; }
.rk-detail .lbl { font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.rk-next { margin-top: 12px; width: 100%; justify-content: center; white-space: normal; }

@media (max-width: 1199px) { .rk-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .rk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .rk { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .rk-detail:not(.open) { display: none; }
  .rk-detail.open { max-height: none; top: 0; }
  .rk-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .rk-card { flex: 0 0 min(72%, 260px); scroll-snap-align: start; }
  .rk-tbl .opt { display: none; }
  .rk-pill.m-only { display: inline-flex; min-width: 0; margin-left: 6px; font-size: 11px; padding: 2px 6px; }
  .rk-name small { display: none; }
  .rk-filters { margin-left: 0; }
  .rk-legend .hint { display: none; } /* the star column is a desktop control */
  .rk-bar .seg { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 559px) { .rk-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rk-tile { grid-template-columns: auto minmax(0, 1fr); } .rk-tile .rk-tv { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } }

/* ---------- Rankings team colours (power-rankings P11; rules: matchups-rehaul R2.5). Brand colours mark bars, never text. */
.tc { --tc: var(--tc-l); }
#rk-detail { --l0: var(--l0-l); --l1: var(--l1-l); --l2: var(--l2-l); --l3: var(--l3-l); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc { --tc: var(--tc-d); }
  :root:not([data-theme="light"]) #rk-detail { --l0: var(--l0-d); --l1: var(--l1-d); --l2: var(--l2-d); --l3: var(--l3-d); }
}
:root[data-theme="dark"] .tc { --tc: var(--tc-d); }
:root[data-theme="dark"] #rk-detail { --l0: var(--l0-d); --l1: var(--l1-d); --l2: var(--l2-d); --l3: var(--l3-d); }
.tcm { display: block; width: 3px; height: 22px; border-radius: 2px; background: var(--tc); flex: none; }
.rk-tile.tc { box-shadow: inset 4px 0 0 var(--tc); padding-left: 12px; }
.rk-tile.tc[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--tc), 0 0 0 1px var(--series); }
.rk-detail.tc { box-shadow: inset 0 5px 0 var(--tc); padding-top: 24px; }
.chart .rl.l0, .chart .rl-dot.l0 { stroke: var(--l0); } .chart .rl.l1, .chart .rl-dot.l1 { stroke: var(--l1); }
.chart .rl.l2, .chart .rl-dot.l2 { stroke: var(--l2); } .chart .rl.l3, .chart .rl-dot.l3 { stroke: var(--l3); }
.chart .rl.l0 { stroke-width: 2.5; }
.sw.l0 { background: var(--l0); } .sw.l1 { background: var(--l1); } .sw.l2 { background: var(--l2); } .sw.l3 { background: var(--l3); }
.rk-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.rk-legend .sw { margin-right: 2px; }
.rk-detail .rk-parts .pt.pos, .rk-detail .sw.pos { background: var(--tc); }
.rk-pls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-pl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 6px 8px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rk-pl:hover:not(:disabled) { background: var(--surface-2); }
.rk-pl:disabled { cursor: default; }
.rk-pl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.rk-pl-t .dim { color: var(--ink-3); font-size: 12px; }
.rk-pl-t small { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- explorer chart: Over time rebuilt (docs/specs/explorer-chart.md OT1–OT7) */
.chart-pane { container: cpane / inline-size; }
.chart-tools { display: inline-flex; align-items: center; gap: 8px; }
.chart-tools[hidden] { display: none; }
.ct-inline { display: inline-flex; align-items: center; gap: 8px; }
.ct-more { display: none; position: relative; }
@container cpane (max-width: 1099px) { .ct-inline { display: none; } .ct-more { display: inline-flex; } } /* OT2.2 */
.ct-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; display: grid; gap: 10px; justify-items: start; width: 250px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ct-pop[hidden] { display: none; }
.ct-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.ct-line select { height: 28px; padding: 0 6px; font-size: 12px; }
.ct-dots[aria-pressed="true"], .ct-proj[aria-pressed="true"], .ct-shade[aria-pressed="true"] { background: var(--series-wash); border-color: var(--series); } /* amendment 2: one look for the chart toggles */
.ct-dots:disabled, .ct-proj:disabled, .ct-shade:disabled { opacity: 0.6; cursor: default; }
.chart-tools .seg button, #sx-chart-foot .seg button { padding: 5px 9px; font-size: 12px; }
#sx-chart-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* OT1: one headline row; the sentence takes what is left and ends in "…" (its full text is the title) */
#chart-head .ch-hero { flex-wrap: nowrap; gap: 2px 10px; min-width: 0; }
.ch-stat { font: 600 13px/1.2 var(--font-body); white-space: nowrap; }
#chart-head .ch-hero .ch-stat { flex-basis: auto; margin-right: 0; } /* .ch-hero .ch-name takes a full row elsewhere (Scout) */
.chart-head .legend .lg.focus { font-weight: 600; color: var(--ink); }
.chart-head .legend .cmp-add .btn { height: 24px; padding: 0 8px; font-size: 11.5px; }
.foot-keys { margin: 0; gap: 4px 12px; flex-wrap: wrap; font-size: 11.5px; }
.ch-sub { white-space: nowrap; font-size: 13px; }
.ch-when { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.chart-head .legend .lg-stat b { margin-left: 0; font-weight: 700; }
.legend i.sw.gdot { width: 6px; height: 6px; background: var(--ink-3); }
/* the SVG */
.chart .gdots { fill: var(--c); fill-opacity: 0.55; stroke: var(--surface); stroke-width: 0.6; }
.chart .gdots.solo { fill-opacity: 0.95; }
.chart .ln.gap { stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.75; }
.chart .vtag .edge2 { fill: var(--c); stroke: none; }
.chart .xpill { pointer-events: none; }
.chart .xpill rect { fill: var(--ink); }
.chart .xpill text { fill: var(--bg); font: 600 10.5px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .ov-bg { fill: var(--surface-2); }
.chart .ov-line { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.chart .ov-win { fill: var(--series-wash); stroke: var(--series); stroke-width: 1.2; pointer-events: none; }
.chart .ov-hit { cursor: ew-resize; touch-action: none; }
.chart .pane-head { cursor: pointer; }
.chart .pane-head:focus { outline: none; }
.chart .pane-head:focus-visible text, .chart .pane-head:hover text { fill: var(--ink); text-decoration: underline; }
.chart.tchart .hit { cursor: crosshair; }
.chart.tchart.panning, .chart.tchart.panning .hit { cursor: grabbing; }
@container (max-width: 620px) { #chart-head .ch-hero { flex-wrap: wrap; } #chart-head .ch-when { flex-basis: 100%; } } /* narrow: the sentence takes its own line */
.chart-foot .seg, #sx-chart-foot .seg, .ct-pop .seg { max-width: 100%; flex-wrap: wrap; } /* four range buttons are wider than a 360 px phone */

/* ---------- explorer chart part 2: every row by default; chosen rows in team colours (explorer-chart AR1–AR10) */
/* each chosen row's slot takes its team's line colour (app.js applyRowColours sets --tcN-l / --tcN-d on the view) */
#view-explorer { --c1: var(--tc1-l, #2a78d6); --c2: var(--tc2-l, #eb6834); --c3: var(--tc3-l, #1baf7a); --c4: var(--tc4-l, #eda100); --c5: var(--tc5-l, #e87ba4); --c6: var(--tc6-l, #008300); --c7: var(--tc7-l, #6250d6); --c8: var(--tc8-l, #e34948); --c9: var(--tc9-l, #2a78d6); --c10: var(--tc10-l, #eb6834); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-explorer { --c1: var(--tc1-d, #3987e5); --c2: var(--tc2-d, #d95926); --c3: var(--tc3-d, #199e70); --c4: var(--tc4-d, #c98500); --c5: var(--tc5-d, #d55181); --c6: var(--tc6-d, #008300); --c7: var(--tc7-d, #9085e9); --c8: var(--tc8-d, #e66767); --c9: var(--tc9-d, #3987e5); --c10: var(--tc10-d, #d95926); } }
:root[data-theme="dark"] #view-explorer { --c1: var(--tc1-d, #3987e5); --c2: var(--tc2-d, #d95926); --c3: var(--tc3-d, #199e70); --c4: var(--tc4-d, #c98500); --c5: var(--tc5-d, #d55181); --c6: var(--tc6-d, #008300); --c7: var(--tc7-d, #9085e9); --c8: var(--tc8-d, #e66767); --c9: var(--tc9-d, #3987e5); --c10: var(--tc10-d, #d95926); }
.c7 { --c: var(--c7); } .c8 { --c: var(--c8); } .c9 { --c: var(--c9); } .c10 { --c: var(--c10); }
.sw.c5 { background: var(--c5); } .sw.c6 { background: var(--c6); } .sw.c7 { background: var(--c7); } .sw.c8 { background: var(--c8); } .sw.c9 { background: var(--c9); } .sw.c10 { background: var(--c10); }
/* contrast.md X1–X3: each crowd line in its team's colour (--x-l / --x-d: brandBar per theme, the named line's rule) and
   its End tag too; a named line fades the rest (has-hot), so it is the only bright one */
.chart .crowd { fill: none; stroke: var(--c); stroke-width: 1.25; stroke-opacity: 0.55; stroke-linejoin: round; pointer-events: none; }
.chart .crowd, .chart .vtag.end { --c: var(--x-l, var(--ink-3)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart .crowd, :root:not([data-theme="light"]) .chart .vtag.end { --c: var(--x-d, var(--ink-3)); } }
:root[data-theme="dark"] .chart .crowd, :root[data-theme="dark"] .chart .vtag.end { --c: var(--x-d, var(--ink-3)); }
.chart.has-hot .crowd { stroke-opacity: 0.18; }
:root[data-contrast="more"] .chart .crowd { stroke-width: 1.5; stroke-opacity: 0.85; }
:root[data-contrast="more"] .chart.has-hot .crowd { stroke-opacity: 0.3; }
/* contrast.md: High contrast draws chart lines 0.5 px wider */
:root[data-contrast="more"] .chart .ln { stroke-width: 2.5; }
:root[data-contrast="more"] .chart .ln.bold { stroke-width: 3.7; }
:root[data-contrast="more"] .chart .ln.gap { stroke-width: 2; }
:root[data-contrast="more"] .chart .ln.hot { stroke-width: 3; }
.chart .hot { --c: var(--h-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart .hot { --c: var(--h-d); } }
:root[data-theme="dark"] .chart .hot { --c: var(--h-d); }
.chart .ln.hot { stroke: var(--c); stroke-width: 2.5; pointer-events: none; }
.legend i.sw.crowd { width: 16px; height: 0; border-radius: 0; border-top: 1px solid var(--ink-3); background: none; }
/* contrast.md X6: the crowd swatch is a short run of the first team colours (--s1…--s4 per theme, set by app.js) */
.legend i.sw.crowd.teams { height: 3px; border: 0; border-radius: 2px; background: linear-gradient(90deg, var(--s1-l) 0 25%, var(--s2-l) 0 50%, var(--s3-l) 0 75%, var(--s4-l) 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legend i.sw.crowd.teams { background: linear-gradient(90deg, var(--s1-d) 0 25%, var(--s2-d) 0 50%, var(--s3-d) 0 75%, var(--s4-d) 0); } }
:root[data-theme="dark"] .legend i.sw.crowd.teams { background: linear-gradient(90deg, var(--s1-d) 0 25%, var(--s2-d) 0 50%, var(--s3-d) 0 75%, var(--s4-d) 0); }
.legend .logo, .legend .face { margin-right: 4px; vertical-align: -3px; }
.legend .hot-name { min-width: 0; }
.legend .hot-name b { margin-left: 0; }

/* scout-refinements R5: the Board a position-group button opens. Leaders on the left, Rising / Falling and the
   injury report in a side column (one column below 1100 px); the Scorecard folds below. */
.sb { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
/* ---------------------------------------------------------------- Scout boards (docs/specs/scout-boards.md)
   Find (Team picker + Team panel) and Your list on top; What changed and Injuries side by side; 5 Leaders tiles. The team
   colour (--tc, from .tc + teamVars) marks rules, rings, lines and bars only; text keeps the ink colours (R6.1). */
.bd-head h1 { margin: 2px 0 4px; font: 700 26px/1.1 var(--font-body); letter-spacing: -0.01em; }
.bd-head .lede { margin: 0; }
.bd-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.bd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } /* amendment 1: both cards one height */
.bd-grid > .bd-card { display: flex; flex-direction: column; }
@media (min-width: 1100px) { .bd-top > .bd-list.sx-rail { contain: size; overflow-y: auto; overscroll-behavior: contain; } } /* .sx-rail scoped, so it beats the static rule below */ /* amendment 1: Your list takes the Find card's height, scrolls inside */
.bd-top { align-items: stretch; }
.bd-colh > span { min-width: 0; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.bd-list-rows > li.bd-colh { padding: 0 0 6px; border-top: 0; align-items: end; }
.bd-colh.bd-moves > span:nth-child(2) { white-space: nowrap; }
.bd-colh.bd-injs > span:nth-child(3) { text-align: right; }
.bd-colh.bd-moves > span:nth-child(n+3), .bd-colh.bd-lost > span:last-child { text-align: right; }
.bd-moves .num { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bd-find h2, .bd-card h2 { margin: 0; font: 700 15px/1.3 var(--font-body); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.bd-find h2 { margin-bottom: 12px; }
.bd-ch { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bd-say { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.bd-ud button { padding: 5px 12px; }
.bd-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.bd-div h3 { margin: 0 0 6px; font: 600 10.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); white-space: nowrap; }
.bd-tiles { display: grid; gap: 4px; }
.bd-tile { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 var(--tc); }
.bd-tile > :first-child { grid-row: 1 / span 2; }
.bd-tile:hover { background: var(--surface-2); }
.bd-tile[aria-pressed="true"] { background: var(--surface-2); border-color: var(--tc); box-shadow: inset 3px 0 0 var(--tc), 0 0 0 1px var(--tc); }
.bd-tile:focus-visible, .bd-logo:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.bd-code { font: 700 12.5px/1.15 var(--font-body); }
.bd-rec { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bd-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bd-ph { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 4px 0 0 var(--tc); }
.bd-ph b { font-size: 14px; }
.bd-ph .btn { margin-left: auto; }
.bd-roster { list-style: none; margin: 6px 0 0; padding: 0; }
.bd-roster li { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) 7.6em; gap: 12px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); }
.bd-roster li:first-child { border-top: 0; }
.bd-role, .bd-lv { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bd-lv b { font-weight: 650; color: var(--ink); }
.bd-who { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; min-width: 0; max-width: 100%; }
button.bd-who { cursor: pointer; }
.bd-who > :first-child, .bd-who > .nm:last-child { grid-row: 1 / span 2; } /* a team has no second line: its name centres on the logo */
.bd-who .nm { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.bd-who:hover .nm { text-decoration: underline; }
.bd-tm { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-card .kp-st, .bd-roster .kp-st, .bd-leaders .kp-st { position: static; transform: none; border: 0; justify-self: start; }
.bd-list-rows { list-style: none; margin: 0; padding: 0; }
.bd-list-rows > li { display: grid; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.bd-list-rows > li:first-child { border-top: 0; }
.bd-moves > li { grid-template-columns: minmax(0, 1fr) 84px 4em 4em 7.8em; }
.bd-spark .spark path { stroke: var(--tc); stroke-width: 2; }
.bd-spark .spark circle { fill: var(--tc); }
.bd-fx { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-fx b { font-weight: 650; }
.bd-moves .delta { justify-content: flex-end; font-size: 12.5px; }
.bd-starts > li { grid-template-columns: 32px minmax(0, 1fr) 16px minmax(0, 1fr); }
.bd-logo { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 2px var(--tc); }
.bd-arrow { text-align: center; color: var(--ink-3); }
.bd-injs > li { grid-template-columns: 7.6em minmax(0, 1fr) 190px; }
/* amendment 3: points lost, a bar scaled to the list's biggest stake; a Questionable player's bar is hatched (if he sits) */
.bd-imp { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bd-imp .num { text-align: right; white-space: nowrap; }
.bd-imp.none { display: block; text-align: right; color: var(--ink-3); }
.bd-impbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bd-impbar i { display: block; height: 100%; border-radius: 3px; background: var(--tc); }
.bd-impbar.maybe i { background: repeating-linear-gradient(135deg, var(--tc) 0 3px, transparent 3px 5px); box-shadow: inset 0 0 0 1px var(--tc); }
.bd-lost > li { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; }
.bd-outs { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-size: 12px; color: var(--ink-2); }
.bd-out { display: inline-flex; align-items: center; gap: 6px; }
.bd-pts { font-size: 13px; font-variant-numeric: tabular-nums; }
.bd-card .tn { margin: 8px 0 0; }
.bd-card > div > .btn, #bd-injuries > .btn { margin-top: 10px; }
.bd-lead .sb-chips { margin: 8px 0 12px; }
.bd-leaders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* amendment 2: a compact tile: rank | who … value on one line; games, volume and the season line under it */
.bd-leaders li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr) auto; grid-template-areas: "rank who val" "rank sub spark"; gap: 6px 8px; align-items: center; min-width: 0;
  padding: 9px 10px 8px; border: 1px solid var(--line); border-radius: 10px; box-shadow: inset 3px 0 0 var(--tc); }
.bd-rank { grid-area: rank; align-self: start; padding-top: 9px; font: 700 12px/1 var(--font-body); color: var(--ink-3); }
.bd-val { grid-area: val; justify-self: end; font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bd-leaders .bd-who { grid-area: who; }
.bd-sub { grid-area: sub; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-leaders .bd-spark { grid-area: spark; justify-self: end; }
.bd-tm .kp-st { position: static; transform: none; border: 0; margin-left: 4px; padding: 1px 6px; font-size: 10px; line-height: 1.2; } /* a status on the team line */
.bd-leaders .bd-spark .spark path { stroke-width: 1.5; }
.bd-list.sx-rail { position: static; max-height: none; overflow: visible; } /* the rail's markup (drawRail), not sticky on the Board */
@media (max-width: 1199px) { .bd-list.sx-rail { overflow-x: auto; } } /* mobile-menus MM2: the strip scrolls itself; "visible" above made every board 591 px wide at 360 */
@media (max-width: 1279px) { .bd-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
  .bd-top, .bd-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-leaders { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bd-leaders li { grid-template-columns: 2em minmax(0, 1fr) auto; grid-template-areas: "rank who val" "rank sub spark"; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 8px 0; }
  .bd-leaders li:first-child { border-top: 0; }
  .bd-val { font-size: 16px; }
}
@media (max-width: 700px) {
  .bd-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* two divisions a row: the picker stays ~1/3 of a phone screen */
  .bd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .bd-tile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 5px 0; box-shadow: inset 0 3px 0 var(--tc); }
  .bd-tile[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--tc), 0 0 0 1px var(--tc); }
  .bd-tile > :first-child { grid-row: auto; }
  .bd-tile .logo { --sz: 22px !important; }
  .bd-code { font-size: 10.5px; }
  .bd-rec { display: none; } /* the Team panel header carries the record */
  .bd-roster li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .bd-roster .bd-role, .bd-roster .bd-lv { grid-column: 1 / -1; }
  .bd-starts > li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .bd-starts .bd-arrow { display: none; }
  .bd-starts > li > :last-child { grid-column: 2; } /* the new starter under the usual one */
  .bd-moves > li { grid-template-columns: minmax(0, 1fr) 3em 3em auto; }
  .bd-moves > li > :nth-child(2) { display: none; } /* the line: the numbers say it at phone width */
  .bd-injs > li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bd-imp { grid-template-columns: auto; }
  .bd-impbar { display: none; }
  .bd-lost > li { grid-template-columns: minmax(0, 1fr) auto; }
  .bd-lost .bd-outs { grid-column: 1 / -1; grid-row: 2; }
}
.sb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sb-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 12.5px/1.2 var(--font-body); cursor: pointer; }
.sb-chip:hover { color: var(--ink); background: var(--surface-2); }
.sb-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sc-fold { border-top: 1px solid var(--line); padding-top: 6px; }
.sc-fold > summary { list-style: none; cursor: pointer; padding: 10px 0; }
.sc-fold > summary::-webkit-details-marker { display: none; }
.sc-fold > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); transition: transform 0.15s; }
.sc-fold[open] > summary::before { transform: rotate(90deg); }
.sc-fold-t { font: 700 17px/1.3 var(--font-body); }

/* ---------------------------------------------------------------- injury report states (injury-report-waiting IR3, IR4)
   A state word first (session banner), a four-step timeline (order status), times under the list (data-as-of badge).
   The timeline's done steps and rule take the team colour (--tc, from .tc + teamVars); the waiting pill stays amber. */
.ir-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ir-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 11.5px/1.4 var(--font-body); white-space: nowrap; }
.ir-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ir-pill.wait { background: var(--fair-bg); color: var(--fair); }
.ir-pill.final { background: var(--good-bg); color: var(--good); }
.ir-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 0; }
.ir-steps li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.ir-steps li i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2, var(--line)); background: var(--surface); justify-self: center; z-index: 1; }
.ir-steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 50%; height: 100%; width: 2px; background: var(--line); }
.ir-steps li.done i { border-color: var(--tc, var(--ink-2)); background: var(--tc, var(--ink-2)); }
.ir-steps li.done::after { background: var(--tc, var(--ink-2)); }
.ir-steps li span { color: var(--ink-2); }
.ir-steps li b { font-weight: 600; text-align: right; }
.ir-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; flex-wrap: nowrap; }
.ir-list .ir-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.ir-list .ir-who .dim { flex-basis: 100%; }
.rk-inj.ir-list .kp-st { min-width: 0; }
.ir-prac { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin: 0 0 14px; }
.ir-prac h4, .ir-last h4 { margin: 0 0 6px; font: 600 12.5px/1.3 var(--font-body); }
.ir-prac ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ir-prac li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.ir-prac li .dim { color: var(--ink-3); font-size: 11.5px; }
.ir-prac .link { font-weight: 600; font-size: 12.5px; }
.ir-last { padding: 12px 0 0; border-top: 1px solid var(--line); box-shadow: inset 3px 0 0 transparent; }
.ir-last .ir-list { opacity: 0.92; }
.ir.tc .ir-last { border-top-color: var(--tc); }
.ir-asof { margin: 12px 0 0; font-size: 11.5px; }
.ir-board { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; }
.ir.tc .face, .tc .ir .face { background: color-mix(in srgb, var(--tc) 22%, var(--surface-3)); }

/* ---------- Scores bar (docs/specs/live-scores.md LV5, LV6; layout: docs/specs/top-bar.md TB3–TB6). Patterns: one thin strip of
   cells (TradingView), a session dot (Webull), the one number per row on the right (Robinhood), calm grey for what does not move
   (Wealthsimple). Team colours mark edges and lines, never text. */
.ls { display: flex; align-items: center; gap: 12px; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px)); /* TB3.1: ≤ 56 px */
  border-top: 1px solid var(--line); background: var(--surface); }
.ls[hidden] { display: none; }
/* TB4: the live status: the week over one word with a dot */
.ls-status { flex: none; display: grid; gap: 5px; width: 78px; cursor: default; }
.ls-tag { font: 700 14px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-playoffs .ls-tag { color: var(--accent-ink); }
.ls-now { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-now i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.ls-now.is-live { color: var(--ink); }
.ls-now.is-live i { background: var(--accent); animation: ls-pulse 1.8s ease-in-out infinite; }
.ls-now.is-wait i { background: var(--ink-3); }
.ls-now.is-off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
@keyframes ls-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 60% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .ls-now.is-live i { animation: none; } } /* TB4.4 */
.ls-track { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.ls-track::-webkit-scrollbar { display: none; }
.ls-track > span { flex: none; scroll-snap-align: start; display: flex; }
/* TB5.1: two team rows on the left, the state in its own column on the right (46 px tall) */
.ls-chip { --sa: var(--sa-l); --sh: var(--sh-l); position: relative; display: flex; align-items: stretch; gap: 8px;
  width: 176px; height: 46px; box-sizing: border-box; padding: 5px 0 5px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; }
.ls-chip.is-live { width: 220px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ls-chip { --sa: var(--sa-d); --sh: var(--sh-d); } }
:root[data-theme="dark"] .ls-chip { --sa: var(--sa-d); --sh: var(--sh-d); }
.ls-chip:hover { background: var(--surface-2); }
.ls-chip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.ls-rows { display: grid; gap: 2px; flex: 1; min-width: 0; align-content: center; }
.ls-row { --t: var(--sa); display: flex; align-items: center; gap: 6px; height: 16px; margin-inline: -3px; padding-inline: 3px; border-radius: 3px; }
.ls-row[data-side="home"] { --t: var(--sh); }
.ls-code { flex: 1; min-width: 0; font: 600 12.5px/1 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-code small { font: 600 10px/1 var(--font-body); color: var(--ink-3); margin-right: 3px; }
.ls-pts { flex: none; font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.ls-pts.ls-pct { font: 600 11.5px/1 var(--font-body); color: var(--ink-3); } /* TB5.2: our pick when there is no score */
.ls-pts.ls-pct.fav { color: var(--ink-2); }
.ls-row.lose { color: var(--ink-3); }
.ls-row.lose .logo { opacity: 0.55; }
.ls-ball { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.ls-row.has .ls-ball { background: var(--ink-2); }
.ls-row:not(.has) .ls-ball { display: none; } /* the mark's room only where the ball is */
.ls-row.has .ls-ball.rz { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } /* LV5.6 (amended): red zone */
.ls-state { flex: none; display: grid; gap: 4px; align-content: center; min-width: 50px; padding: 0 9px 0 8px; border-left: 1px solid var(--line);
  font: 500 11px/1 var(--font-body); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-state b { font-weight: 600; color: var(--ink-2); }
.ls-state small { font-size: 11px; }
.ls-chip.is-live .ls-state b { color: var(--ink); }
.ls-chip.is-live .ls-state small { color: var(--ink-2); font-weight: 600; }
.ls-chip.is-live::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-2); } /* LV5.5: who has the ball */
.ls-chip.pos-away::before { background: var(--sa); }
.ls-chip.pos-home::before { background: var(--sh); }
.ls-spark { flex: none; width: 40px; height: 28px; align-self: center; overflow: visible; }
.ls-spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ls-spark .mid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.ls-spark.a polyline { stroke: var(--sa); } .ls-spark.a circle { fill: var(--sa); }
.ls-spark.h polyline { stroke: var(--sh); } .ls-spark.h circle { fill: var(--sh); }
.ls-row.flash { animation: ls-flash 1.2s ease-out; } /* LV5.7 */
@keyframes ls-flash { from { background: color-mix(in srgb, var(--t) 10%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ls-row.flash { animation: none; background: color-mix(in srgb, var(--t) 10%, transparent); } }
/* LV6.2: the Super Bowl: one wide chip, its name, both colours split along the bottom */
.ls-chip.ls-final { width: 320px; height: auto; min-height: 46px; flex-wrap: wrap; row-gap: 2px; }
.ls-title { width: 100%; font: 700 12px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.ls-chip.ls-final::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--sa) 50%, var(--sh) 50%); }
/* D3: below 900 px the shell scrolls away and only the scores bar stays at the top */
@media (max-width: 899px) {
  body.has-scores .shell { position: sticky; top: calc(var(--ls-h, 0px) - var(--hdr)); }
  .ls { gap: 8px; }
  .ls-status { width: 58px; }
  .ls-tag { font-size: 12.5px; }
  .ls-chip { width: 158px; padding-left: 8px; gap: 6px; }
  .ls-chip.is-live { width: 196px; }
  .ls-chip.ls-final { width: min(320px, calc(100vw - 32px)); }
  .ls-pts { font-size: 14px; }
  .ls-state { min-width: 44px; padding-inline: 6px 7px; }
}

/* ---------- Live Game view (live-scores.md LV8): one calm card, the score first, plain stats; brand colour only in logos */
.lv-pill { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); padding: 3px 7px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.lv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .lv-pill::before { animation: lv-beat 2s ease-in-out infinite; } }
@keyframes lv-beat { 50% { opacity: 0.35; } }
.lv-card { margin: 14px 0; display: grid; gap: 10px; }
.lv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-state { font: 600 13px/1.3 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.lv-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; flex-wrap: wrap; }
.lv-score > span { display: inline-flex; align-items: center; gap: 10px; }
.lv-score b { font: 600 14px/1 var(--font-body); color: var(--ink-2); }
.lv-score strong { font: 700 40px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 1.4ch; text-align: center; }
.lv-last { margin: 0; font-size: 13px; color: var(--ink-2); }
.lv-last span { font-weight: 600; color: var(--ink-3); margin-right: 4px; }
/* LM3.3: game leaders in the live card */
.lv-leads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; }
.lv-leads li { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.lv-leads li > :first-child { grid-row: 1 / 3; }
.lv-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lv-who > b, .lv-who > .link { font: 600 13px/1.25 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-who small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.lv-what { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero-final .lv-pill { margin-right: 4px; vertical-align: 1px; }
.hero-score.live b { color: var(--ink); } /* LM3.1: a live score is not dimmed; the winner stands out only once final */
.hero-score.live b:not(.won):has(~ b.won), .hero-score.live b.won ~ b:not(.won) { color: var(--ink-3); }
@media (max-width: 719px) { .hero-score.live + .hero-final { max-width: 8.5em; margin-inline: auto; line-height: 1.5; } } /* the narrow middle column wraps it */
/* LM4.1: the Matchups tab while games are live; LM4.3: our pick on a live or final chip */
.tabs .tab-dot { position: absolute; top: calc(50% - 11px); left: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.tabs .tab-dot[hidden] { display: none; }
@media (min-width: 720px) and (max-width: 1219px) { .tabs .tab-dot { left: 22px; } }
@media (max-width: 719px) { .tabs .tab-dot { top: 9px; left: calc(50% + 5px); } }
@media (prefers-reduced-motion: no-preference) { .tabs .tab-dot { animation: lv-beat 2s ease-in-out infinite; } }
.ls-pk { flex: none; font: 600 8.5px/1 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.h2-chipb.live { --t: var(--accent); flex-direction: column; align-items: flex-start; gap: 4px; }
.lv-axis { display: grid; grid-template-columns: 1fr 1fr; font: 700 11px/1 var(--font-body); color: var(--ink-3); letter-spacing: 0.04em; margin: 10px 0 4px; }
.lv-axis span:last-child { text-align: right; }
.lv-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.lv-r { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lv-r span { text-align: center; font-size: 12.5px; color: var(--ink-3); }
.lv-r b { font: 500 14px/1.2 var(--font-body); color: var(--ink-3); }
.lv-r b:last-child { text-align: right; }
.lv-r b.best { font-weight: 700; color: var(--ink); }

/* two-stats-distribution: faces (TS1), name tags (TS4), focus (TS3.3), key tiles (DV1), Strip / Histogram / Share below / Q-Q (DV2, DV3) */
.chart .pface { transition: opacity 0.12s; }
.chart .pface .pf-dot { fill: var(--tc); fill-opacity: 0.7; stroke: var(--surface); stroke-width: 1; }
.chart .pface .pf-bg { fill: var(--tc); fill-opacity: 0.22; }
.chart .pface .pf-bg.logo { fill: var(--surface); fill-opacity: 1; }
.chart .pface .pf-ring { fill: none; stroke: var(--tc); stroke-width: 2; }
.chart .pface .pf-mono { fill: var(--ink); font-family: var(--font-body); font-weight: 700; pointer-events: none; }
.chart .pface .pf-on { fill: none; stroke: var(--c); stroke-width: 3; }
.chart.focus .pface:not(.hot) { opacity: 0.3; }
.chart.focus .ptag { opacity: 0.4; }
.chart .ptag { pointer-events: none; }
.chart .ptag rect { fill: var(--surface); stroke: var(--c, var(--line-2)); stroke-width: 1.5; }
.chart .ptag.so rect { stroke: var(--ink-3); stroke-width: 1; }
.chart .ptag text { fill: var(--ink); font: 600 10.5px var(--font-body); }
.chart .pover { pointer-events: none; }
.chart .quad { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.chart .y-name { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.r-chip { display: inline-block; padding: 1px 8px; margin: 0 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 11.5px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw.sotag, .legend i.sw.sotag { width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--ink-3); background: var(--surface); }
.sw.pastline, .legend i.sw.pastline { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--ink-3); background: none; }
.dv-headrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 4px; }
.dv-tiles { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dv-tile { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.dv-tile small { color: var(--ink-3); font: 500 11px var(--font-body); }
.dv-tile b { color: var(--ink); font: 650 12.5px var(--font-body); font-variant-numeric: tabular-nums; }
.dv-tile .dv-delta { color: var(--ink-2); font: 600 11px var(--font-body); font-variant-numeric: tabular-nums; }
.chart-head .legend .ch-say { flex: 1 1 0; min-width: 180px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* fills the rest of the key line; full text in its title */
.chart-head .legend .dv-past .dv-delta { margin-left: 4px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .dv-band { fill: var(--series); fill-opacity: 0.07; }
.chart .dv-pos { stroke: var(--ink-3); stroke-width: 1.5; }
.chart .dv-posline { stroke: var(--line-2); stroke-dasharray: 2 4; }
.chart .dv-poslab { fill: var(--ink-3); font: 600 10px var(--font-body); }
.chart .dv-dens { fill: var(--series); fill-opacity: 0.1; stroke: var(--series); stroke-opacity: 0.55; stroke-width: 1.25; }
.chart .dv-curve, .chart .dv-step { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; }
.chart .dv-dens.past, .chart .dv-curve.past, .chart .dv-step.past { fill: none; stroke: var(--ink-3); stroke-opacity: 0.9; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .grid.mid { stroke-dasharray: 3 3; }
.chart.d-hist .bar { fill-opacity: 0.55; }
.chart.d-hist .bar.hot { fill-opacity: 0.9; }
.chart.d-hist .mk { stroke-width: 1.5; stroke-dasharray: 2 3; }
.chart-tip .fcard { min-width: 200px; }
.chart-tip .fc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chart-tip .fc-head small { display: block; opacity: 0.75; font-size: 11px; }
.chart-tip .fc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; font-variant-numeric: tabular-nums; }
.chart-tip .fc-row span:first-child { opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-tip .fc-rk { opacity: 0.7; }
.chart-tip .fc-say { margin: 5px 0 0; color: inherit; }
.chart-tip .tip-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 6px; }
.chart-tip .tip-faces .more { margin-left: 3px; font-size: 11px; opacity: 0.8; }

/* image-cards (docs/specs/image-cards.md): Copy image buttons and the card panel. The card itself is a canvas drawn by
   imagecard.js with its own fixed palette; only the panel follows the page theme. */
.xc-btn .xc-ico { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mu-hero > .mu-xc { position: absolute; top: 12px; right: 14px; z-index: 1; }
.mu-hero > .eyebrow { padding-right: 128px; }
.xc-pop { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); padding: 12px; display: grid; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.xc-pop[hidden] { display: none; }
.xc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xc-title { margin: 0; font: 600 13px/1.2 var(--font-body); }
.xc-close { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.xc-prev { min-height: 120px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r); overflow: hidden; }
.xc-prev canvas { display: block; width: 100%; height: auto; }
.xc-prev.tall canvas { width: auto; max-width: 100%; max-height: min(320px, 45vh); }
.xc-msg { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.xc-msg.bad { color: var(--bad); }
.xc-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- mobile refinement (docs/specs/mobile-refinement.md) */
/* MR1.1, MR1.2: below 900 px only the scores bar stays at the top (top-bar D3), so jump bars stick under it and anchors clear it */
@media (max-width: 899px) {
  html { scroll-padding-top: calc(var(--ls-h, 0px) + 8px); }
  body.has-scores .mu-jump, body.has-scores .sx-sections { top: var(--ls-h, 0px); }
  .ls-status { width: 70px; } /* MR2: "Next Mon" and "All final" fit beside the dot */
}
/* MR3, MR4: a touch screen. 16 px fields stop iOS zooming on focus; controls are 24 px or more (WCAG 2.5.8), segments 36 px */
@media (hover: none) and (pointer: coarse) {
  /* a device rule over every component's font shorthand, like the reduced-motion rule; the formula's highlight layer
     takes the same size so its marks stay under the text */
  input, select, textarea, .fx-hl { font-size: 16px !important; }
  .seg button { min-height: 36px; }
  .lb td.cmp input { width: 24px; height: 24px; }
  .rk-sort, .lb th .sort, .sx-seasons .sx-yr, .wb-z, #lb-keys { min-height: 24px; min-width: 24px; justify-content: center; }
  .sx-sim .link { min-width: 24px; min-height: 24px; }
  details.mm-all > summary { padding-block: 5px; }
}
.chart.rk-chart { touch-action: pan-y; } /* MR5.4 */
/* MR7.2: at phone width long lines wrap instead of ending in "…" */
@media (max-width: 559px) {
  .ch-when { white-space: normal; overflow: visible; }
  .tp-name .full, .bd-who .full { display: none; } /* MR7.1 (D2): pickers and the Teams board show the nickname */
  .bd-who .nm, .bd-tm { white-space: normal; overflow: visible; } /* MR7.2: Board names wrap, never "…" */
}
@media (min-width: 560px) { .tp-name .nick, .bd-who .nick { display: none; } }
@media (max-width: 400px) { /* MR7.1: room for "Commanders" at 360 px */
  .mu-pickers { gap: 4px; }
  .tp-btn { gap: 4px; padding-inline: 5px 6px; }
  .tp-btn .logo { --sz: 24px !important; }
  .tp-name b { font-size: 14px; }
}
/* MR8: at phone width the sorted column and its Gap bar fit before any sideways scroll */
@container (max-width: 520px) {
  .gap { width: 56px; }
  .lb td.lead .lv { gap: 6px; }
  .lb .rank.stk { width: 28px; min-width: 28px; }
}

/* scout-chart-layers (Scout's main chart): league crowd behind the subject, likely level, strength reasons, flags */
/* amendment 1 (user: "fade a bit better into the background"): thin, faint, and fainter still while one is named */
.chart.with-crowd .crowd { stroke-width: 1; stroke-opacity: 0.16; }
.chart.with-crowd.has-hot .crowd { stroke-opacity: 0.07; }
.chart.with-crowd .band { fill-opacity: 0.35; }
:root[data-contrast="more"] .chart.with-crowd .crowd { stroke-width: 1.25; stroke-opacity: 0.32; }
.chart .vol-n { font: 600 9.5px var(--font-body); fill: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.chart .vol-n.on { fill: var(--ink); font-weight: 700; }
.chart .ln.likely { stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.9; }
.chart .ln.likely.bold { stroke-width: 2.2; }
.chart .ln.likely.gap { opacity: 0.55; }
:root[data-contrast="more"] .chart .ln.likely { stroke-width: 2.5; }
.chart .vtag.likely rect { stroke-dasharray: 3 2; }
.chart .fl-res { font: 600 9.5px var(--font-body); fill: var(--ink-3); }
.chart .fl-res.r-W { fill: var(--ink-2); }
.chart .flag { cursor: default; outline: none; }
.chart .flag path { fill: var(--accent); stroke: var(--surface); stroke-width: 1; }
.chart .flag.out path { fill: var(--weak); }
.chart .flag.status path { fill: var(--fair); }
.chart .flag:focus-visible path { stroke: var(--ink); stroke-width: 2; }
.legend .lg-league { cursor: pointer; }
.legend .lg-league[aria-pressed="false"] { opacity: 0.6; }
.legend .lg-league[aria-pressed="false"] i.sw { opacity: 0.35; }
.ch-likely { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.ch-likely b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* amendment 1: the league fan, the actual-vs-projected shade, the league ruler */
.chart .band.band-mid { fill-opacity: 0.55; }
.chart.with-crowd .band.band-mid { fill-opacity: 0.45; }
.chart .gap-shade { fill: var(--c, var(--series)); fill-opacity: 0.1; stroke: none; pointer-events: none; }
:root[data-contrast="more"] .chart .gap-shade { fill-opacity: 0.2; }
.chart .ruler line { stroke: var(--ink-3); stroke-width: 1.5; }
.chart .ruler text { font: 600 9.5px var(--font-body); fill: var(--ink-3); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.legend i.sw.band.mid { background: var(--surface-3); box-shadow: inset 0 0 0 10px rgba(127, 127, 127, 0.18); }
.sw.proj, .legend i.sw.proj { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--c1); background: none; }
.sw.shade, .legend i.sw.shade { width: 16px; height: 9px; border-radius: 2px; background: var(--c1); opacity: 0.3; }
/* amendment 3: Scout's chart foot, time controls left and settings right */
#sx-chart-foot .foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; width: 100%; }
#sx-chart-foot .foot-time, #sx-chart-foot .foot-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#sx-chart-foot .foot-set { margin-left: auto; gap: 6px; }
#sx-chart-foot .foot-set .btn .sw { display: inline-block; margin-right: 6px; vertical-align: middle; }
/* amendment 5 (user: "in dark mode, you cannot see the shading or other teams at all"): the dark surface needs more
   opacity for the same visibility; light keeps its values */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart.with-crowd .crowd { stroke-opacity: 0.34; }
  :root:not([data-theme="light"]) .chart.with-crowd.has-hot .crowd { stroke-opacity: 0.14; }
  :root:not([data-theme="light"]) .chart .gap-shade { fill-opacity: 0.2; }
  :root:not([data-theme="light"]) .chart.with-crowd .band { fill-opacity: 0.6; }
  :root:not([data-theme="light"]) .chart.with-crowd .band.band-mid { fill-opacity: 0.9; }
}
:root[data-theme="dark"] .chart.with-crowd .crowd { stroke-opacity: 0.34; }
:root[data-theme="dark"] .chart.with-crowd.has-hot .crowd { stroke-opacity: 0.14; }
:root[data-theme="dark"] .chart .gap-shade { fill-opacity: 0.2; }
:root[data-theme="dark"] .chart.with-crowd .band { fill-opacity: 0.6; }
:root[data-theme="dark"] .chart.with-crowd .band.band-mid { fill-opacity: 0.9; }
:root[data-contrast="more"][data-theme="dark"] .chart.with-crowd .crowd, :root[data-contrast="more"]:not([data-theme="light"]) .chart.with-crowd .crowd { stroke-opacity: 0.5; }
/* amendment 7: the shade stands on the league average: average → projected (lasts) is darker, projected → actual (fades) lighter */
.chart .gap-shade.last { fill-opacity: 0.2; }
.chart .gap-shade.fade { fill-opacity: 0.07; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart .gap-shade.last { fill-opacity: 0.3; }
  :root:not([data-theme="light"]) .chart .gap-shade.fade { fill-opacity: 0.12; }
}
:root[data-theme="dark"] .chart .gap-shade.last { fill-opacity: 0.3; }
:root[data-theme="dark"] .chart .gap-shade.fade { fill-opacity: 0.12; }
:root[data-contrast="more"] .chart .gap-shade.last { fill-opacity: 0.36; }
:root[data-contrast="more"] .chart .gap-shade.fade { fill-opacity: 0.16; }
.sw.shade, .legend i.sw.shade { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 45%, transparent) 0 50%, color-mix(in srgb, var(--c1) 18%, transparent) 50%); }
/* amendment 9: the section bar holds the links (their own sideways scroller) and, right-aligned, the add box; the bar
   itself no longer clips, so the add box's list can open below it */
.sx-sections { overflow: visible; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sx-sec-links { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sx-sec-links::-webkit-scrollbar { display: none; }
.sx-sections > .sx-add { margin-left: auto; flex: 0 1 300px; }
/* amendment 9c: under 900 px the add box takes the bar's second line every time, so the bar's height is known and the
   section jumps land below it (MR1.2): the one-line offset (64 px) plus that line (40 px) */
@media (max-width: 899px) {
  .sx-sections > .sx-add { flex-basis: 100%; margin-left: 0; }
  .sx-sec > h2 { scroll-margin-top: 104px; }
}
/* amendment 11: the add field holds the compared rows as chips; the field (not the input) wears the search look */
.sx-tok { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 2px 0 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; }
.sx-tok:hover { border-color: var(--line-2); }
.sx-tok:focus-within { background: var(--surface); border-color: var(--series); box-shadow: 0 0 0 3px var(--series-wash); }
.sx-tok-chips { display: flex; gap: 4px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.sx-tok-chips::-webkit-scrollbar { display: none; }
.sx-tok .chip-row.tok { flex: none; gap: 4px; padding: 1px 6px 1px 2px; font-size: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sx-tok .chip-row.tok .sw { width: 8px; height: 8px; border-radius: 50%; }
.sx-tok .chip-row.tok .x { padding: 0 2px; }
.sx-sections > .sx-add { flex: 0 1 auto; min-width: 300px; max-width: 70%; }
.sx-sections > .sx-add .sx-tok input[type="search"] { flex: 1 1 140px; min-width: 140px; height: 100%; padding: 0 10px 0 8px; background: transparent; border: 0; box-shadow: none; font-size: 12.5px; }
@media (hover: none) and (pointer: coarse) {
  .sx-tok { height: 38px; }
  .sx-tok .chip-row.tok { min-height: 28px; }
  .sx-tok .chip-row.tok .x { min-width: 24px; min-height: 24px; font-size: 18px; }
  .sx-sections > .sx-add .sx-tok input[type="search"] { font-size: 16px; min-width: 120px; } /* iOS: no zoom on focus */
}
@media (max-width: 899px) { .sx-sections > .sx-add { max-width: none; min-width: 0; } }
.sx-sim .go { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 999px; color: var(--ink-3); }
.sx-sim .go:hover { color: var(--ink); background: var(--surface-2); }
.sx-sim .go .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ---------- mobile-bars.md: bars at narrow width (under 700 px) */
/* MB1: from 700 px the filters wrapper and panel are boxless, so Weeks and Minimum sit in the context bar as before */
.ctx-filters, .ctx-pop { display: contents; }
.ctx-more, .ctx-pop-h, .ctx-done { display: none; }
@media (max-width: 699px) {
  .ctx-filters { display: block; position: relative; max-width: 100%; }
  .ctx-more { display: inline-flex; max-width: 100%; }
  .ctx-more .chev, .ct-more .chev { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ctx-pop { display: none; position: absolute; z-index: 35; top: calc(100% + 4px); left: 0; width: min(340px, calc(100vw - 32px)); padding: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .ctx-filters.open .ctx-pop { display: grid; gap: 12px; justify-items: start; }
  .ctx-pop-h { display: block; font: 700 13px/1.2 var(--font-body); color: var(--ink); }
  .ctx-pop .ctl { flex-wrap: wrap; row-gap: 6px; }
  .ctx-done { display: inline-flex; justify-self: end; }
  /* MB1.2 (scout-boards amendment 4): Scout's bar is the groups, then the filters button (beside them, or on the next line) */
  .scout-bar { gap: 10px 8px; }
  .scout-bar > #scout-groups { order: 1; }
  .scout-bar > .ctx-filters { order: 2; flex: none; max-width: 100%; }
  .scout-bar .ctx-more { height: 34px; border-radius: 999px; }
  .ctx-more > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* mobile-menus MM1.1: the panel hangs from the whole bar's left edge. It was pinned to the button's right edge while the
     button sat at the right beside the search; with the search gone the button is at the left and the panel opened off screen */
  .scout-bar { position: relative; }
  .scout-bar > .ctx-filters { position: static; }
}
/* MB4: under 900 px the Scout section bar is one line (links + "+ Compare"); the add box is a full-width second line
   only while it is open (this also undoes amendment 11's 300 px minimum, which cut the box's text) */
.sx-cmp-btn { display: none; }
@media (max-width: 899px) {
  .sx-sections { flex-wrap: wrap; }
  .sx-sec-links { flex: 1 1 0; }
  .sx-cmp-btn { display: inline-flex; flex: none; }
  .sx-sections > .sx-add { display: none; flex: 1 1 100%; min-width: 0; max-width: none; margin-left: 0; }
  .sx-sections.cmp-open > .sx-add { display: block; }
}
/* part 5 (chart-settings-mobile.md): the popover is placed against the chart pane's bar, not the button, so it stays
   inside the pane at any width (CS1.5); each setting is a named row with its note (CS1.1, CS1.3) */
#chart-pane .pane-bar { position: relative; }
#chart-tools .ct-more { position: static; }
#ct-more { gap: 6px; }
#ct-more .dim { font-weight: 500; }
#chart-tools .ct-pop { top: calc(100% + 4px); left: 12px; width: min(320px, calc(100% - 24px)); gap: 0; justify-items: stretch; padding: 12px 14px; }
.ct-pop-h { margin: 0 0 4px; font: 700 13px/1.2 var(--font-body); color: var(--ink); }
.ct-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ct-name { font: 600 12px/1.2 var(--font-body); color: var(--ink-2); }
.ct-ctl { min-width: 0; }
.ct-ctl select { width: 100%; height: 30px; }
.ct-note { grid-column: 2; margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.ct-pop .seg button:disabled { opacity: 0.55; cursor: default; }
.ct-done { justify-self: end; margin-top: 10px; }
.foot-range { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.foot-lab { font: 600 12px/1 var(--font-body); color: var(--ink-3); }
@media (max-width: 699px) {
  /* CS3.1: pane buttons, then the chart views, then the settings button just above the chart */
  #chart-pane .pane-bar { gap: 8px; }
  #chart-pane .pane-bar > #sp-open, #chart-pane .pane-bar > #tp-open, #chart-pane .pane-bar > .pane-btns { order: 1; }
  #chart-pane .pane-bar > .pane-btns { margin-left: auto; }
  #chart-pane .pane-bar > #chart-modes { order: 2; display: flex; flex-basis: 100%; }
  #chart-modes button { flex: 1 1 auto; padding-inline: 6px; }
  #chart-pane .pane-bar > #chart-tools { order: 3; flex-basis: 100%; }
  #chart-tools .ct-more, #ct-more { width: 100%; }
  #ct-more { justify-content: space-between; }
  #ct-more > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #chart-tools .ct-pop { left: 12px; right: 12px; width: auto; }
}

/* ---------- mobile-menus.md: menus and selectors at narrow widths */
/* MM3.1: the four Rankings tabs fit one row at 360 px (they were 14 px too wide) */
@media (max-width: 379px) { .rk-bar .rk-views button { padding-inline: 6px; } }
/* MM3.2, MM3.3 (D1): the Scout links row fades on each end that has more to scroll (app.js sets data-fade) */
@media (max-width: 899px) {
  .sx-sec-links[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .sx-sec-links[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
  .sx-sec-links[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}
/* MM4.1: Related row labels carry the short and the full name; the full one shows (and wraps) under 700 px */
.corr .nm-f { display: none; }
@media (max-width: 699px) {
  .corr tbody th { white-space: normal; max-width: 120px; }
  .corr tbody th .nm-s { display: none; }
  .corr tbody th .nm-f { display: inline; }
  .rel-name { white-space: normal; overflow: visible; text-overflow: clip; }
  /* MM4.2: the chart sentence takes its own line and wraps, on every chart mode */
  .chart-head .legend .ch-say { flex-basis: 100%; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
}
/* MM5.2: at phone width a chart settings segment is one row; the name stays left of its control (CS1.1), in a narrower column */
@media (max-width: 559px) {
  .ct-row { grid-template-columns: 68px minmax(0, 1fr); column-gap: 8px; }
  .ct-pop .seg button { padding-inline: 8px; }
}
/* MM5.1 (D3): the Keys list names keyboard keys, which a touch screen has none of */
@media (hover: none) and (pointer: coarse) { .lb-note .lb-keys { display: none; } }