/* nhl.scyber.ai/2026-27 — one stylesheet, no build. Tokens first; every component below uses only them.
   Team identity is chrome (burgundy band, blue tracks); data fills are a lightened team blue so bar vs
   track vs background all clear WCAG 1.4.11's 3:1. Mint stays the site-family link color. */

:root {
  color-scheme: dark;
  --burgundy: #6f263d;
  --blue: #236192;
  --silver: #a2aaad;
  --bg0: #07090f;
  --bg1: #0c1220;
  --surface: color-mix(in oklab, var(--blue) 12%, var(--bg1));
  --surface-2: color-mix(in oklab, var(--blue) 20%, var(--bg1));
  --line: color-mix(in oklab, var(--silver) 22%, transparent);
  --ink: #e5e7eb;
  --muted: #a3acb8;
  --faint: #6b7380;
  --mint: #06d6a0;
  --warn: #f6c453;
  --fill: color-mix(in oklab, var(--blue) 45%, white);      /* data fill, ~7:1 on bg */
  --track: color-mix(in oklab, var(--blue) 35%, var(--bg1)); /* bar track */
  --good: var(--mint);
  /* semantic layer (design-review §7a): hue = category, intensity = importance */
  --c-info: var(--fill);
  --c-good: var(--mint);
  --c-warn: var(--warn);
  --c-bad: color-mix(in oklab, var(--burgundy) 55%, white); /* burgundy lifted to clear 3:1 as text */
  --c-elite: #fff;
  --c-steal: #e9c06a; /* draft-heat gold; used only on draft chips, never on a value bar */
  --c-pedigree: #4da3f5; /* draft-heat blue for top picks; same identity blue as the team name */
  --c-pedigree: oklch(0.72 0.17 247);
  --glow-elite: 0 0 10px color-mix(in oklab, white 55%, transparent);
  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-reveal: 550ms;
  --t-fill: 700ms;
  --stagger: 45ms;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 0.75rem;
  --r-s: 0.4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.5;
}
a { color: var(--mint); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }
h2 { color: #fff; font-size: 1.35rem; margin: 3rem 0 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); text-wrap: balance; }
h2 .tag { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); font-weight: 400; margin-top: 0.15rem; }
.label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--silver); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.big { font-size: 1.35rem; color: #fff; margin: 0.25rem 0 0.15rem; }
.big small { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
.footnote, .legend-note { font-size: 0.78rem; color: var(--faint); margin: 0.4rem 0 0; }
.legend-note { margin: -0.4rem 0 1rem; max-width: 60rem; }
main { flex: 1; padding-bottom: 2rem; }

/* chips */
.chip { display: inline-block; font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); white-space: nowrap; }
.chip--good { border-color: color-mix(in oklab, var(--good) 50%, transparent); color: var(--good); }
.chip--warn { border-color: color-mix(in oklab, var(--warn) 50%, transparent); color: var(--warn); }
.chip--muted { color: var(--muted); }
.chip--bad { border-color: color-mix(in oklab, var(--c-bad) 55%, transparent); color: var(--c-bad); }
.chip--date { color: var(--fill); }
.chip--soon { color: var(--c-good); border-color: color-mix(in oklab, var(--c-good) 55%, transparent); }
.chip--soon::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-good); margin-right: 0.35rem; vertical-align: 0.05rem; }
.chip--tiny { font-size: 0.66rem; padding: 0.05rem 0.45rem; }

/* Draft heat (design-review §7g, revised §7h): the ramp only ADDS. Tiers 0–1 (round one) are an ordinary
   chip, identical to every other chip on the card; nobody is dimmed for being a high pick. From round two
   on, gold is mixed in by how improbable the career is; undrafted gets full gold, bold, and a glow. */
/* Revised again (§7i): a two-ended spectrum instead of plain-vs-gold. Pedigree (top picks) sits in the
   identity blue, the middle rounds are neutral, late rounds warm to gold, undrafted is gold + a soft glow.
   Each step is one notch, so neighbors differ gently and only the two ends read as "a story". */
.chip--draft { --tone: var(--ink); --tone-mix: 0%; color: color-mix(in oklab, var(--ink), var(--tone) var(--tone-mix)); border-color: color-mix(in oklab, var(--line), var(--tone) calc(var(--tone-mix) * 0.8)); background: color-mix(in oklab, var(--surface), var(--tone) calc(var(--tone-mix) / 7)); white-space: nowrap; }
.chip--draft[data-heat="0"] { --tone: var(--c-pedigree); --tone-mix: 100%; font-weight: 700; } /* top-10 pick */
.chip--draft[data-heat="1"] { --tone: var(--c-pedigree); --tone-mix: 55%; }                  /* rest of round one */
.chip--draft[data-heat="2"] { --tone-mix: 0%; }                                                 /* rounds 2–3: neutral */
.chip--draft[data-heat="3"] { --tone: var(--c-steal); --tone-mix: 55%; }                      /* rounds 4–5 */
.chip--draft[data-heat="4"] { --tone: var(--c-steal); --tone-mix: 100%; }                     /* rounds 6–7 */
.chip--draft[data-heat="5"] { --tone: var(--c-steal); --tone-mix: 100%; font-weight: 700; box-shadow: 0 0 8px color-mix(in oklab, var(--c-steal) 35%, transparent); } /* undrafted */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a.plain { color: inherit; text-decoration: underline dotted color-mix(in oklab, var(--silver) 45%, transparent); text-underline-offset: 0.2em; }
a.plain:hover, a.plain:focus-visible { color: var(--mint); text-decoration-color: var(--mint); text-decoration-style: solid; }

/* ---------- player card dialog ---------- */
.player-dialog { background: var(--surface); color: var(--ink); border: 1px solid color-mix(in oklab, var(--silver) 35%, transparent); border-radius: var(--r); padding: 0; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.player-dialog::backdrop { background: color-mix(in oklab, var(--bg0) 70%, transparent); backdrop-filter: blur(4px); }
.player-dialog .dialog-body { padding: 0.75rem; }
.player-dialog .roster--single { grid-template-columns: 1fr; }
.player-dialog .player { border-top-width: 3px; }
.dialog-close { position: absolute; top: 0.4rem; right: 0.5rem; z-index: 1; appearance: none; background: color-mix(in oklab, var(--bg0) 60%, transparent); border: 1px solid var(--line); color: var(--muted); width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dialog-close:hover, .dialog-close:focus-visible { color: #fff; border-color: var(--silver); }
.player.flash { animation: flash 1.4s var(--ease-out) 1; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mint) 70%, transparent); border-color: var(--mint); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* jump nav */
.jump { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.9rem; padding-bottom: 0; }
.jump a { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.65rem; }
.jump a:hover, .jump a:focus-visible { color: #fff; border-color: var(--silver); text-decoration: none; }



/* ---------- hero ---------- */
.hero {
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--burgundy) 85%, black) 0%, color-mix(in oklab, var(--burgundy) 55%, var(--bg1)) 42%, var(--bg1) 78%, var(--bg0) 100%);
  border-bottom: 1px solid color-mix(in oklab, var(--silver) 30%, transparent);
  padding: 1.25rem 0 1.75rem;
  position: relative;
  overflow: hidden;
}
.hero::after { /* one silver diagonal, the sweater stripe */
  content: ""; position: absolute; inset: 0 auto 0 82%; width: 2px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--silver) 45%, transparent) 30%, color-mix(in oklab, var(--blue) 70%, white) 70%, transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0.7;
}
.hero .wrap { position: relative; }
.crumbs { font-family: var(--mono); font-size: 0.75rem; color: color-mix(in oklab, var(--silver) 80%, transparent); }
.crumbs a { color: #fff; }
.hero-title { margin: 1.25rem 0 1rem; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; color: var(--silver); margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
/* Team name in identity blue (test color, Donny 2026-10-04). The raw #236192 is ~1.8:1 against the
   burgundy band, so it is lifted toward white until it clears 4.5:1 while keeping the hue. */
/* Mixing toward white kept the hue but drained the chroma (read as steel gray on the band, Donny 2026-10-04).
   Instead: the team blue's hue at higher lightness WITH its saturation kept, in oklch. */
.eyebrow .team-name { color: var(--c-pedigree); font-weight: 700; letter-spacing: 0.08em; }
/* Hierarchy rule for the hero: exactly two things are large and white (the record, the pace number);
   the title is smaller and silver; every label is gray mono; every caveat is muted. */
h1 { color: var(--silver); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; margin: 0; letter-spacing: -0.01em; font-weight: 600; }
.hero-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem; margin-top: 1.5rem; }
.hero-record .label { display: block; margin-bottom: 0.2rem; }
.label-sub { text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: 0.4rem; }
.hero-num { font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; display: block; }
.hero-pts { display: block; color: var(--muted); font-size: 1rem; margin-top: 0.35rem; }
.hero-pts strong { color: var(--ink); font-size: 1.15rem; }
.hero-gp { color: var(--muted); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.5rem; }
.hero-chips .chip { background: color-mix(in oklab, white 8%, transparent); border-color: color-mix(in oklab, white 22%, transparent); color: #fff; padding: 0.2rem 0.6rem; }
.chip .k { color: var(--silver); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.04em; margin-right: 0.4rem; }
.hero-pace { margin-top: 1.5rem; max-width: 60rem; }
.hero-pace-head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin-bottom: 0.5rem; }
.hero-pace-text { color: var(--ink); }
.hero-pace-text strong { color: #fff; font-size: 1.15rem; }
.hero-caveat { color: var(--muted); font-size: 0.9rem; }
.hero-fresh { margin-top: 1rem; }
.fresh { font-family: var(--mono); font-size: 0.74rem; color: color-mix(in oklab, var(--silver) 85%, transparent); margin: 0; }
.fresh.stale { color: var(--warn); }

/* ---------- loading / error ---------- */
body[data-state="loading"] [data-slot]:empty::before { content: "loading…"; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); }
body[data-state="error"] main { display: none; }

/* ---------- viz: percentile bar ---------- */
.bar { display: grid; grid-template-columns: 6.2rem 1fr 4.2rem; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin: 0.3rem 0; }
.bar-label { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { position: relative; height: 0.5rem; background: var(--track); border-radius: 999px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--fill); border-radius: 999px; }
.bar--good .bar-fill { background: var(--good); }
.bar--warn .bar-fill { background: var(--warn); }
.bar--elite .bar-fill { background: linear-gradient(90deg, var(--fill), var(--c-elite) 85%); box-shadow: var(--glow-elite); }
.bar--elite .bar-value { font-weight: 700; }
.bar-mid { position: absolute; top: -1px; bottom: -1px; left: 50%; width: 1px; background: color-mix(in oklab, var(--silver) 55%, transparent); }
.bar-value { text-align: right; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- viz: progress ---------- */
.progress-track { display: block; height: 0.4rem; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress-fill { display: block; height: 100%; width: var(--p); background: var(--fill); border-radius: 999px; }
.progress--done .progress-fill { background: var(--good); }

/* ---------- viz: pace track ---------- */
.track { padding: 1.35rem 0 1.5rem; }
.track-rail { position: relative; display: block; height: 0.65rem; background: var(--track); border-radius: 999px; }
.track-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--fill); border-radius: 999px; }
.track--good .track-fill { background: var(--good); }
.track--warn .track-fill { background: var(--warn); }
.track--muted .track-fill { background: color-mix(in oklab, var(--silver) 55%, var(--track)); }
.track--hatched .track-fill { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklab, black 35%, transparent) 4px 7px); }
.track-tick { position: absolute; top: -0.35rem; bottom: -0.35rem; left: var(--at); width: 2px; background: #fff; transform: translateX(-1px); }
.track-tick--secondary { background: var(--silver); top: -0.15rem; bottom: -0.15rem; }
.track-tick-label { position: absolute; top: 100%; margin-top: 0.3rem; right: 0; transform: translateX(50%); font-family: var(--mono); font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
/* secondary marks label above the rail so two close records (121 and 119) never collide */
.track-tick--secondary .track-tick-label { color: var(--faint); top: auto; bottom: 100%; margin: 0 0 0.3rem; font-size: 0.62rem; }
.track-value { position: absolute; bottom: 100%; margin-bottom: 0.3rem; left: var(--at); transform: translateX(-50%); font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: #fff; }

/* ---------- viz: sparkline + boxes ---------- */
.spark { display: block; width: 100%; height: 5rem; overflow: visible; }
.spark-ref { stroke: color-mix(in oklab, var(--silver) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.spark-proj { stroke: var(--fill); stroke-width: 1.5; stroke-dasharray: 0.02 0.02; opacity: 0.8; vector-effect: non-scaling-stroke; } /* dash units are pathLength="1" fractions */
.spark-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--good); }
.legend { font-weight: 400; margin-left: 0.5rem; text-transform: none; letter-spacing: 0; color: var(--faint); white-space: nowrap; }
.panel--spark h3 { display: flex; flex-wrap: wrap; gap: 0.2rem 0; }
.lg { display: inline-block; width: 0.9rem; height: 2px; vertical-align: middle; margin: 0 0.3rem 0 0.6rem; background: #fff; }
.lg-proj { background: var(--fill); }
.lg-ref { background: var(--silver); opacity: 0.6; }
.boxes { display: inline-flex; gap: 0.3rem; vertical-align: middle; }
.box { width: 2.2rem; height: 1.6rem; display: inline-grid; place-items: center; border-radius: var(--r-s); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; border: 1px solid var(--line); background: var(--surface); }
.box--w { background: color-mix(in oklab, var(--good) 25%, var(--surface)); color: var(--good); border-color: color-mix(in oklab, var(--good) 45%, transparent); }
.box--l { background: color-mix(in oklab, var(--burgundy) 55%, var(--surface)); color: #fff; }
.box--otl { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }

/* ---------- season so far ---------- */
.season-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.75rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1rem; }
.panel h3 { margin: 0 0 0.35rem; }
.panel p { margin: 0; }
.panel--spark { grid-row: span 1; }
.results { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0; padding: 0; }
.res { width: 2.4rem; text-align: center; border-radius: var(--r-s); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; line-height: 1.1; padding: 0.2rem 0; }
.res span { display: block; font-weight: 700; }
.res small { color: var(--muted); font-size: 0.6rem; }
.res--w { border-color: color-mix(in oklab, var(--good) 45%, transparent); color: var(--good); }
.res--l { background: color-mix(in oklab, var(--burgundy) 55%, var(--surface)); color: #fff; }
.res--otl { color: var(--warn); }
.res-tag { font-family: var(--mono); font-size: 0.8rem; padding: 0.1rem 0.45rem; border-radius: var(--r-s); border: 1px solid var(--line); vertical-align: middle; }
.res-tag.res--w { color: var(--good); }

/* ---------- record chase ---------- */
.chase-list { display: grid; gap: 0.75rem; }
.chase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem 0.6rem; border-left: 4px solid var(--silver); }
.chase--good { border-left-color: var(--good); }
.chase--warn { border-left-color: var(--warn); }
.chase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; }
.chase-who { color: var(--ink); }
.chase-who strong { color: #fff; }
.chase-head .chip { margin-left: auto; }
.chase-foot { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* ---------- winter classic ---------- */
.wc-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; background: linear-gradient(120deg, color-mix(in oklab, var(--blue) 30%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.25rem; }
.wc-count { text-align: center; min-width: 7rem; padding-right: 1.25rem; border-right: 1px solid var(--line); }
.wc-num { display: block; font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; color: #fff; line-height: 1; }
.wc-unit { font-family: var(--mono); font-size: 0.72rem; color: var(--silver); text-transform: uppercase; letter-spacing: 0.08em; }
.wc-body p { margin: 0 0 0.2rem; }
.wc-series { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 0.85rem; }

/* ---------- milestone watch (a table) ---------- */
.watch { width: 100%; border-collapse: collapse; }
.watch td, .watch th { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-weight: 400; }
.watch thead th { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); padding-top: 0; }
.watch-img { width: 2.5rem; padding-left: 0 !important; }
.watch-img img { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-2); object-fit: cover; display: block; }
.watch-who { width: 13rem; }
.watch-who strong { color: #fff; }
.watch-bar { min-width: 8rem; }
.watch-need { color: #fff; font-weight: 600; white-space: nowrap; }
.watch-target { font-size: 0.85rem; white-space: nowrap; }
.watch-when { text-align: right !important; white-space: nowrap; padding-right: 0 !important; }
.watch-row--done .watch-need { color: var(--good); }

/* ---------- recent games (a table) ---------- */
.recent { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.82rem; }
.recent th { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); font-weight: 400; text-align: left; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--line); }
.recent td { padding: 0.25rem 0.4rem; border-bottom: 1px solid color-mix(in oklab, var(--line) 50%, transparent); }
.recent td:last-child, .recent th:last-child { text-align: right; }

/* ---------- roster: view toggle + table ---------- */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 0.75rem; }
.toggle { appearance: none; background: transparent; border: 0; color: var(--muted); font-family: var(--mono); font-size: 0.74rem; padding: 0.3rem 0.9rem; cursor: pointer; }
.toggle[aria-pressed="true"] { background: var(--surface-2); color: #fff; }
.toggle:hover { color: #fff; }
body[data-view="table"] .roster-cards { display: none; }
body[data-view="cards"] .roster-table { display: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 0.75rem; }
.grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 56rem; }
.grid--goalies { min-width: 40rem; }
.grid th, .grid td { padding: 0.45rem 0.6rem; border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); white-space: nowrap; text-align: left; }
.grid thead th { position: sticky; top: 0; background: var(--surface-2); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--silver); font-weight: 400; z-index: 1; }
.grid tbody th { font-weight: 600; color: #fff; }
.grid .n { text-align: right; }
.grid .num { color: var(--silver); font-family: var(--mono); }
.grid .strong { color: #fff; font-weight: 700; }
.grid tbody tr:hover { background: color-mix(in oklab, white 4%, transparent); }
.sort { appearance: none; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.sort:hover { color: #fff; }
th[aria-sort="ascending"] .sort::after { content: " ▲"; color: var(--mint); }
th[aria-sort="descending"] .sort::after { content: " ▼"; color: var(--mint); }
.cell-bar { min-width: 7.5rem; }
.draft-cell .chip { font-size: 0.68rem; }
/* phones: the table scrolls sideways; keep the name column pinned so a row stays readable */
@media (max-width: 44rem) {
  .grid tbody th, .grid thead th:nth-child(2) { position: sticky; left: 0; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .grid thead th:nth-child(2) { z-index: 2; background: var(--surface-2); }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap::after { content: "swipe left for draft, skating, xG, milestones →"; display: block; padding: 0.4rem 0.6rem; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); position: sticky; left: 0; }
  /* right-edge fade while more columns are off-screen; app.mjs lifts .more-right at the end */
  .table-wrap.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), rgba(0, 0, 0, 0.15)); }
  .table-wrap.more-right::after { content: "swipe left for draft, skating, xG, milestones →"; }
  .table-wrap:not(.more-right)::after { content: "end of row · swipe right to go back"; }
}
.mini { display: inline-block; width: 3.4rem; height: 0.4rem; background: var(--track); border-radius: 999px; vertical-align: middle; margin-right: 0.5rem; position: relative; overflow: hidden; }
.mini-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--c-info); border-radius: 999px; }
.mini--good .mini-fill { background: var(--c-good); }
.mini--warn .mini-fill { background: var(--c-warn); }
.cell-bar--elite .mini-fill { background: linear-gradient(90deg, var(--fill), var(--c-elite) 85%); }
.cell-bar--elite { color: #fff; font-weight: 700; }
.more { margin-top: 0.6rem; }
.more summary, .career summary { cursor: pointer; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.more summary:hover, .career summary:hover { color: var(--mint); }

/* ---------- roster ---------- */
.group { margin-top: 1.5rem; }
.group-head { position: sticky; top: 0; z-index: 2; margin: 0 0 0.6rem; padding: 0.5rem 0; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--silver); background: color-mix(in oklab, var(--bg0) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 0.75rem; }
.player { container-type: inline-size; display: grid; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem; border-top: 3px solid var(--burgundy); }
.who { display: flex; gap: 0.75rem; align-items: center; }
.who img { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--bg1)); object-fit: cover; flex: none; border: 2px solid color-mix(in oklab, var(--blue) 60%, var(--surface)); }
.who h4 { margin: 0; font-size: 1.02rem; color: #fff; line-height: 1.2; }
.num { font-family: var(--mono); color: var(--silver); font-size: 0.85rem; margin-right: 0.15rem; }
.pos { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); margin-left: 0.2rem; }
.bio { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; background: var(--bg1); border-radius: var(--r-s); padding: 0.45rem 0.5rem; }
.cell { text-align: center; }
.cell .label { display: block; font-size: 0.6rem; color: var(--faint); }
.cell .val { font-size: 1.05rem; color: #fff; font-weight: 600; }
.bars { display: grid; }
.next { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; }
.next .label { grid-column: 1; }
.next .progress { grid-column: 2; }
.next-text { grid-column: 1 / -1; font-size: 0.85rem; }
.next-text strong { color: #fff; }
.next .chip--date { grid-column: 1 / -1; justify-self: start; }
.career p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); font-family: var(--mono); }

/* ---------- footer ---------- */
footer { padding: 1.5rem 1.25rem; text-align: center; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); border-top: 1px solid var(--line); margin-top: 2rem; }
footer a { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 64rem) {
  .season-grid { grid-template-columns: 1fr 1fr; }
  .panel--spark { grid-column: 1 / -1; }
}
@media (max-width: 44rem) {
  .season-grid { grid-template-columns: 1fr; }
  .watch-row { grid-template-columns: 2.25rem 1fr auto; grid-template-areas: "img who when" "img bar bar" "img need target"; row-gap: 0.25rem; }
  .watch-row img { grid-area: img; }
  .watch-who { grid-area: who; }
  .watch-row .progress { grid-area: bar; }
  .watch-need { grid-area: need; }
  .watch-target { grid-area: target; justify-self: end; }
  .watch-row .chip--date { grid-area: when; }
  /* watch table on a phone: drop the "from N" column, let names wrap, keep need + date */
  /* watch table on a phone: each row becomes a small grid (semantics stay a table; layout does not) */
  .watch thead { display: none; }
  .watch, .watch tbody { display: block; }
  .watch tr { display: grid; grid-template-columns: 2.5rem 1fr auto; grid-template-areas: "img who when" "img need need" "img bar bar"; column-gap: 0.6rem; row-gap: 0.2rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .watch td, .watch th { display: block; padding: 0; border: 0; white-space: normal; width: auto; }
  .watch-img { grid-area: img; }
  .watch-who { grid-area: who; }
  .watch-when { grid-area: when; text-align: right !important; }
  .watch-need { grid-area: need; }
  .watch-need::after { content: " " attr(data-target); color: var(--muted); font-weight: 400; font-size: 0.85rem; }
  .watch td.watch-target { display: none; }
  .watch-bar { grid-area: bar; min-width: 0; margin-top: 0.15rem; }
  .watch td, .watch th { padding: 0.4rem 0.3rem; }
  .wc-grid { grid-template-columns: 1fr; text-align: center; }
  .wc-count { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 0.75rem; }
  .wc-series { justify-content: center; }
  .roster { grid-template-columns: 1fr; }
  .hero::after { display: none; }
  .chase-head .chip { margin-left: 0; }
}
@container (max-width: 20rem) {
  .bar { grid-template-columns: 5rem 1fr 3.6rem; }
}
/* ---------- motion (design-review §7c) ----------
   Quiet by default: reveals on view, staggered by --i, three set pieces (hero entrance, sparkline
   draw, cascading bar fills). Everything lives inside the no-preference query; with reduced motion
   the .in class is irrelevant and every element is simply present. */
@media (prefers-reduced-motion: no-preference) {
  /* reveal: fade + 10px rise, staggered */
  [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(min(var(--i, 0), 12) * var(--stagger)); }
  [data-reveal].in { opacity: 1; transform: none; }
  /* bars fill only once their container is in view, each a beat after the last */
  [data-reveal] .bar-fill, [data-reveal] .progress-fill, [data-reveal] .mini-fill { width: 0; transition: width var(--t-fill) var(--ease-out); transition-delay: calc(120ms + min(var(--i, 0), 6) * 70ms); }
  [data-reveal].in .bar-fill, [data-reveal].in .progress-fill, [data-reveal].in .mini-fill { width: var(--p); }
  [data-reveal].in .bar--elite .bar-fill { animation: bloom 900ms var(--ease-out) 700ms 1; }
  @keyframes bloom { 0% { box-shadow: none; } 50% { box-shadow: 0 0 16px color-mix(in oklab, white 80%, transparent); } 100% { box-shadow: var(--glow-elite); } }
  /* set piece 1: the hero number and its track, once, on load */
  .hero-num { animation: rise 800ms var(--ease-out) both; }
  .hero-chips .chip { animation: rise 600ms var(--ease-out) 250ms both; }
  .hero-pace .track-fill { width: 0; animation: fill 1000ms var(--ease-out) 350ms both; }
  tr[data-reveal] { transform: none; } /* opacity-only for table rows; transforms on <tr> are uneven across engines */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes fill { to { width: var(--p); } }
  /* set piece 2: the sparkline draws itself when seen (pathLength="1" on the strokes) */
  .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .spark-proj { opacity: 0; }
  [data-reveal].in .spark-line { animation: draw 1200ms var(--ease-out) 200ms forwards; }
  [data-reveal].in .spark-proj { animation: appear 500ms ease-out 1300ms forwards; }
  [data-reveal].in .spark-dot { animation: pop 400ms var(--ease-out) 1250ms both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes appear { to { opacity: 0.8; } }
  @keyframes pop { from { transform: scale(0); transform-origin: center; transform-box: fill-box; } to { transform: scale(1); transform-origin: center; transform-box: fill-box; } }
  /* dialog: rise in, backdrop fades; @starting-style covers the display:none → open edge */
  .player-dialog[open] { animation: rise 320ms var(--ease-out) both; }
  .player-dialog[open]::backdrop { animation: fade 320ms ease-out both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  /* micro: hover lift, 2 px, no more */
  .player, .chase, .panel { transition: border-color 0.2s, transform 0.25s var(--ease-out); }
  .player:hover, .chase:hover { border-color: color-mix(in oklab, var(--silver) 50%, transparent); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .player.flash { animation: none; border-color: var(--mint); }
}
@media print {
  .hero { background: none; color: #000; }
  body { background: #fff; color: #000; }
}