:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #14181f;
  --muted: #475161;
  --border: #d3d9e1;
  --accent: #0a58a8;
  --accent-ink: #ffffff;
  --accent-soft: #e3eefa;
  --pos: #0b6a3a;
  --neg: #a32118;
  --hi: #7a4b00;
  --hi-bg: #fff2c2;
  --focus: #1a66d6;
  --game: #c2410c;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101317;
    --surface: #181d23;
    --surface-2: #222932;
    --text: #edf0f4;
    --muted: #aab4c2;
    --border: #333c48;
    --accent: #80bdff;
    --accent-ink: #0a1420;
    --accent-soft: #1b2a3c;
    --pos: #74d6a0;
    --neg: #ff9a92;
    --hi: #ffd166;
    --hi-bg: #3a3112;
    --focus: #8cc4ff;
    --game: #ffa36b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101317;
  --surface: #181d23;
  --surface-2: #222932;
  --text: #edf0f4;
  --muted: #aab4c2;
  --border: #333c48;
  --accent: #80bdff;
  --accent-ink: #0a1420;
  --accent-soft: #1b2a3c;
  --pos: #74d6a0;
  --neg: #ff9a92;
  --hi: #ffd166;
  --hi-bg: #3a3112;
  --focus: #8cc4ff;
  --game: #ffa36b;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 var(--font);
  overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 1.6em 0 0.6em; }
h1 { font-size: 1.6rem; margin-top: 0.8em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
p { margin: 0.5em 0; }
abbr[title] { text-decoration: none; cursor: help; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 10;
  background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip:focus { top: 0.5rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.h-sub { display: block; font-size: 0.95rem; font-weight: 500; color: var(--muted); margin-top: 0.3rem; }
.lede { font-size: 1.05rem; color: var(--muted); }
.facts, .note { color: var(--muted); font-size: 0.9rem; }
.empty { color: var(--muted); font-style: italic; }
.notice {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  padding: 0.6rem 0.8rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.badge {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); vertical-align: middle;
}
.badge-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button, button {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; padding: 0.45rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; flex: none;
}
input[type="search"] {
  font: inherit; min-height: 44px; padding: 0.45rem 0.7rem; width: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
}

/* header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.brand { font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; margin-right: auto; }
.header-search { display: flex; gap: 0.4rem; flex: 1 1 100%; order: 3; }
.theme-toggle { background: var(--surface-2); color: var(--text); border-color: var(--border); padding: 0.35rem 0.8rem; font-weight: 500; }
.theme-toggle[aria-pressed="true"] { background: var(--accent-soft); }
@media (min-width: 48rem) {
  .header-search { flex: 0 1 24rem; order: 0; }
}

/* breadcrumbs + league nav */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0.7rem 0 0; font-size: 0.9rem; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: 0.25rem; }
.crumbs [aria-current] { color: var(--muted); }
.league-nav { border-bottom: 1px solid var(--border); margin-top: 0.4rem; }
.league-nav .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; }
.league-nav-name { margin: 0.4rem 0 0; font-weight: 700; }
.league-nav-name a { color: var(--text); text-decoration: none; }
.league-nav .season { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.league-nav ul { list-style: none; display: flex; gap: 0.2rem; padding: 0; margin: 0; overflow-x: auto; max-width: 100%; }
.league-nav ul a {
  display: block; padding: 0.7rem 0.7rem; text-decoration: none; color: var(--muted); font-weight: 600;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.league-nav ul a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
/* Phones: the breadcrumb already names the league, and the four tabs must fit 343px without scrolling. */
@media (max-width: 29.99rem) {
  .league-nav.has-crumbs .league-nav-name { display: none; }
  .league-nav ul { gap: 0; }
  .league-nav ul a { padding: 0.65rem 0.5rem; }
}
@media (max-width: 22rem) {
  .league-nav ul a { padding: 0.65rem 0.35rem; font-size: 0.92rem; }
}

/* footer */
.site-footer { margin-top: 3rem; padding: 1.2rem 0 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.as-of { color: var(--text); }

/* cards */
.card-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.card-title { margin: 0 0 0.3rem; font-size: 1.1rem; }
.card-facts, .card-updated { color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0; }
.league-card .card-title a { text-decoration: none; }
.league-card .card-title a:hover { text-decoration: underline; }
.is-final { opacity: 0.92; }
.team-no { color: var(--muted); font-weight: 600; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 0.15rem 0; }
.empty-state { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.75rem; }
.stat dt { font-size: 0.8rem; color: var(--muted); }
.stat dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0.5rem 0 1rem; }
.data, .compact { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data th, .data td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data thead th { background: var(--surface-2); font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.data tbody th { font-weight: 600; }
.data tbody tr:last-child > * { border-bottom: 0; }
.data .num { text-align: right; }
.data .name { min-width: 8rem; }
.opt { display: none; }
@media (min-width: 40rem) {
  .opt { display: table-cell; }
  th.opt, td.opt { display: table-cell; }
}
/* opt-sm: shown from 30rem up. Game columns use it so the deciding columns (series, points, +/-) stay
   on screen on a 375px phone. */
@media (max-width: 29.99rem) {
  .opt-sm { display: none; }
}
.place { font-weight: 700; }
.pos { color: var(--pos); font-weight: 600; }
.neg { color: var(--neg); }
td.hi strong { color: var(--hi); background: var(--hi-bg); padding: 0 0.2rem; border-radius: 3px; }
td.abs { color: var(--muted); font-style: italic; cursor: help; }
tr.period-row th { text-align: left; font-weight: 700; padding-top: 0.8rem; color: var(--muted); }
.mv { font-size: 0.75rem; white-space: nowrap; }
.mv-up { color: var(--pos); }
.mv-down { color: var(--neg); }
.mv-same { color: var(--muted); }
.matchups tbody.match { border-top: 2px solid var(--border); }
.matchups .lanes { white-space: nowrap; vertical-align: middle; color: var(--muted); }
.side-absent .note, .side-unknown .note, .row-absent .note { font-style: italic; }
.sm-only { display: none; }
@media (max-width: 29.99rem) {
  .sm-only { display: inline; }
  .sm-hide { display: none; }
  td .sm-only.note { white-space: nowrap; font-size: 0.85rem; }
}
.sort-btn {
  all: unset; cursor: pointer; display: inline-flex; gap: 0.25rem; align-items: center; min-height: 32px;
}
.sort-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sort-btn::after { content: "\21C5"; font-size: 0.8em; opacity: 0.6; }
th[aria-sort] .sort-btn::after { opacity: 1; }
@media (pointer: coarse) {
  .sort-btn { min-height: 44px; }
}
th[aria-sort="ascending"] .sort-btn::after { content: "\25B2"; font-size: 0.7em; }
th[aria-sort="descending"] .sort-btn::after { content: "\25BC"; font-size: 0.7em; }

/* week navigation */
.week-nav { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0; }
.week-strip { list-style: none; display: flex; gap: 0.3rem; padding: 0.2rem; margin: 0; overflow-x: auto; flex: 1 1 auto; }
.week-strip a {
  display: flex; flex-direction: column; align-items: center; min-width: 3rem; min-height: 44px; padding: 0.25rem 0.4rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text);
}
.week-strip a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.wk-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-d { font-size: 0.7rem; opacity: 0.85; }
.wk-step { white-space: nowrap; padding: 0.4rem 0.2rem; font-weight: 600; }
.week-strip .wk-gap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 0.25rem 0.4rem;
  border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); white-space: nowrap;
}
.wk-gl { font-size: 0.75rem; font-weight: 600; }
.wk-period { border-style: solid; }
.wk-step.disabled { color: var(--border); }

/* high score cards */
.high-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.high-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.6rem 0.6rem; }
.high-title { margin: 0.3rem 0 0.4rem; font-size: 0.95rem; }
.compact th, .compact td { padding: 0.25rem 0.3rem; text-align: left; }
.compact thead th { font-size: 0.75rem; color: var(--muted); }
.compact .num { text-align: right; }
.rank { color: var(--muted); width: 2.2rem; }
.highs-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.hl-label { display: inline-block; min-width: 9rem; }

/* leaders */
.leader-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.leader-col h3 { margin-top: 0.6rem; }

/* chart */
.chart { margin: 0.5rem 0 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; }
.trend { width: 100%; height: auto; display: block; }
.trend .grid { stroke: var(--border); stroke-width: 1; }
.trend .axis-line { stroke: var(--muted); stroke-width: 1; }
.trend .axis { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.trend .line-avg { stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.trend .dot-avg { fill: var(--accent); }
.trend .dot-game { fill: var(--game); stroke: var(--surface); stroke-width: 2; }
.legend { font-size: 0.85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin-top: 0.3rem; }
.key { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; }
.key-avg { background: var(--accent); border-radius: 2px; height: 0.3rem; width: 1.2rem; }
.key-game { background: var(--game); }

/* search */
.search-form label { font-weight: 600; display: block; margin-bottom: 0.3rem; }
.search-row { display: flex; gap: 0.4rem; max-width: 36rem; }
.results { list-style: none; padding: 0; margin: 0; }
.result { padding: 0.6rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; }
.result-name { font-weight: 700; font-size: 1.05rem; }
.result-meta { color: var(--muted); font-size: 0.9rem; }
.result-meta .sub { display: inline; }
.count { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.result-former { color: var(--muted); font-size: 0.9rem; font-style: italic; }
.entering { color: var(--muted); }
.ent-mark { font-size: 0.75em; margin-left: 0.1em; vertical-align: super; }

/* error */
.error-page { text-align: center; padding: 2rem 0; }
.error-code { font-size: 3rem; font-weight: 800; color: var(--muted); margin: 0; }

@media (min-width: 48rem) {
  h1 { font-size: 2rem; }
  .data th, .data td { padding: 0.5rem 0.7rem; }
}
@media print {
  .site-header, .league-nav, .week-nav, .theme-toggle, .skip, .site-footer form { display: none !important; }
  body { background: #fff; color: #000; }
  .table-wrap { overflow: visible; border: 0; }
  .opt { display: table-cell; }
}