/* An almanac of the scoreboard: condensed scoreboard numerals, plain readable
   text, one league colour per page, everything else ink on paper. */
:root {
  --paper: #f5f6f2; --panel: #ffffff; --ink: #17202a; --muted: #5d6874; --rule: #dde1dc; --soft: #eceee9;
  --ok: #2f7d4f; --warn: #b07a12; --bad: #b3372b;
  --nhl: #1f6fb2; --nba: #c8571b; --mlb: #b5283a; --nfl: #2f6b3c; --cfl: #9b2335;
  --accent: var(--ink);
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12161b; --panel: #1a2027; --ink: #e8ebe6; --muted: #9aa4ad; --rule: #2c343d; --soft: #222931;
    --ok: #5cbf86; --warn: #e0a83d; --bad: #ef6b5d;
    --nhl: #5aa6e6; --nba: #f08a4b; --mlb: #ef5a6c; --nfl: #6fb37f; --cfl: #e06a7c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12161b; --panel: #1a2027; --ink: #e8ebe6; --muted: #9aa4ad; --rule: #2c343d; --soft: #222931;
  --ok: #5cbf86; --warn: #e0a83d; --bad: #ef6b5d;
  --nhl: #5aa6e6; --nba: #f08a4b; --mlb: #ef5a6c; --nfl: #6fb37f; --cfl: #e06a7c; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); padding-inline: max(16px, env(safe-area-inset-left)); }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 18px 14px; border-bottom: 2px solid var(--ink); max-width: 1180px; margin-inline: auto; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand-mark { font: 700 28px/1 var(--display); letter-spacing: .04em; background: var(--ink); color: var(--paper); padding: 2px 8px 0; }
.brand-name { font: 600 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.leagues, .aux { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.leagues a, .aux a { font: 600 17px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding-block: 6px; border-bottom: 3px solid transparent; }
.leagues a[aria-current="page"] { border-bottom-color: var(--accent); }
.aux { margin-left: auto; }
.aux a { color: var(--muted); }
.theme { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.theme:hover { border-color: var(--ink); }

main { max-width: 1180px; margin-inline: auto; padding-block: 28px 40px; display: flex; flex-direction: column; gap: 32px; min-height: 60vh; }
.loading { color: var(--muted); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1; text-transform: uppercase; }
h2 { font-size: 24px; text-transform: uppercase; letter-spacing: .04em; }
h3 { font-size: 19px; }
p { margin: 0; max-width: 70ch; }
.lede { color: var(--muted); font-size: 18px; }
.eyebrow { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.head { display: flex; flex-direction: column; gap: 10px; }
.section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.note { color: var(--muted); font-size: 14px; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; border-block: 1px solid var(--rule); }
.figure { padding: 14px 16px 12px 0; display: flex; flex-direction: column; gap: 2px; }
.figure b { font: 600 38px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.figure span { color: var(--muted); font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--rule); border-top: 5px solid var(--lg, var(--ink)); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.card h3 { font-size: 30px; text-transform: uppercase; }
.card .span { font: 500 15px/1.2 var(--mono); color: var(--muted); }
.card:hover { border-color: var(--lg); }

.chart { position: relative; width: 100%; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--body); fill: var(--muted); font-size: 12px; }
.chart .lab { fill: var(--ink); font: 600 14px var(--display); letter-spacing: .05em; }
.scroll { overflow-x: auto; }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 6px 10px; font-size: 13px; line-height: 1.4; max-width: 260px; z-index: 5; }
.tip b { font-family: var(--display); font-size: 16px; letter-spacing: .02em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 600 13px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; position: sticky; top: 0; background: var(--paper); }
td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.num, th.num { text-align: right; }
td.team { font-weight: 600; }
tr:hover td { background: var(--soft); }
.pctbar { display: inline-block; height: 8px; background: var(--accent); vertical-align: middle; margin-left: 8px; opacity: .85; }
.tablebox { max-height: 70vh; overflow: auto; border-block: 1px solid var(--rule); }

.banner { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-left: 8px solid var(--accent); padding: 16px 20px; }
.banner .badge { justify-self: start; }
.banner .cup { font: 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.banner .who { font: 700 34px/1.05 var(--display); text-transform: uppercase; grid-column: 1 / -1; }
.banner .how { color: var(--muted); grid-column: 1 / -1; }

.badge { display: inline-block; font: 500 11px/1 var(--mono); padding: 3px 5px 2px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.badge.spx { color: var(--accent); border-color: currentColor; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }

.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
select, input[type="search"] { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule); }
.seg button { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; border: 0; background: var(--panel); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 28px; }
.day { break-inside: avoid; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.day h3 { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.game { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 3px 0; font-size: 15px; }
.game .score { font: 500 15px var(--mono); text-align: right; white-space: nowrap; }
.game .won { font-weight: 600; }
.game .meta { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }

.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 28px; }
.award { padding: 9px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.award .name { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-family: var(--display); font-weight: 600; }
.award .winner { font-weight: 600; }
.award .note { font-size: 13px; color: var(--muted); }

.seasonlist { display: flex; flex-wrap: wrap; gap: 4px; }
.seasonlist a { font: 500 13px/1 var(--mono); padding: 6px 7px; background: var(--panel); border: 1px solid var(--rule); text-decoration: none; }
.seasonlist a.full { border-color: var(--accent); }

.foot { max-width: 1180px; margin-inline: auto; border-top: 2px solid var(--ink); padding-block: 18px 32px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
.foot .retro { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .fade { animation: fade .35s ease-out both; } @keyframes fade { from { opacity: .4; transform: translateY(4px); } } }
@media (max-width: 640px) { .aux { margin-left: 0; } .figure b { font-size: 30px; } }

.trophies { display: flex; align-items: center; gap: 14px; color: var(--accent); }
.trophies b { font: 700 clamp(88px, 14vw, 140px)/0.85 var(--display); font-variant-numeric: tabular-nums; }
.trophies .cup { display: block; width: clamp(56px, 8vw, 84px); }
.trophies .cup svg { display: block; width: 100%; height: auto; }
.trophyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.trophyrow .champs { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.seasoncell { white-space: nowrap; }
.minicup { display: inline-block; width: 11px; margin-left: 7px; vertical-align: -2px; color: var(--accent); }
.minicup svg { display: block; width: 100%; height: auto; }
main:focus { outline: none; }

.cal { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.calhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.calhead .nav { font: 600 22px/1 var(--display); width: 36px; height: 36px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; flex: none; }
.calhead .nav:disabled { opacity: .35; cursor: default; }
.months { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; flex: 1; min-width: 0; }
.months .mo { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; border: 1px solid var(--rule); background: var(--panel); color: var(--muted); cursor: pointer; white-space: nowrap; }
.months .mo[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.grid .wd { font: 600 12px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cell { position: relative; min-height: 58px; border: 1px solid var(--rule); background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; padding: 5px 6px; text-align: left; font: inherit; color: var(--muted); }
.cell.blank { border-color: transparent; background: none; }
.cell.has { background: color-mix(in srgb, var(--accent) var(--heat), var(--panel)); color: var(--ink); cursor: pointer; border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.cell.has:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell.on { outline: 3px solid var(--ink); outline-offset: -3px; }
.cell .dn { font: 600 13px/1 var(--mono); }
.cell .ct { font: 700 20px/1 var(--display); align-self: flex-end; }
.cell .mk { font: 600 12px/1.1 var(--mono); align-self: flex-end; white-space: nowrap; }
.cell.res { background: var(--panel); }
.cell.res.W { background: color-mix(in srgb, var(--ok) 26%, var(--panel)); border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.cell.res.L { background: color-mix(in srgb, var(--bad) 22%, var(--panel)); border-color: color-mix(in srgb, var(--bad) 50%, var(--rule)); }
.cell .mk { color: var(--ink); }
.daylist { display: flex; flex-direction: column; gap: 8px; }
.linkish { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .cell { min-height: 46px; padding: 3px 4px; } .cell .ct { font-size: 16px; } .cell .mk { font-size: 10px; } }

.logo { display: inline-block; vertical-align: -4px; margin-right: 8px; object-fit: contain; }
h1.teamname { display: flex; align-items: center; gap: 14px; }
h1.teamname .logo { margin: 0; vertical-align: middle; }
.teamband { height: 10px; background: linear-gradient(90deg, var(--tp) 0 70%, var(--ts) 70% 100%); margin-bottom: -18px; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 10px; }
.tablebox td.team { white-space: nowrap; }

.head { position: relative; }
.mapbtn { position: absolute; top: 0; right: 0; width: 180px; padding: 0; border: 1px solid var(--rule); background: var(--panel); cursor: pointer; }
.mapbtn:hover { border-color: var(--accent); }
.teammap svg { display: block; width: 100%; height: auto; }
.teammap .pin { fill: var(--accent); stroke: var(--paper); stroke-width: 0.6; }
.teammap .pin.me { fill: var(--ink); stroke: var(--accent); stroke-width: 1.2; }
.teammap.big .pin { stroke-width: 0.4; }
.teammap.big a:hover .pin { fill: var(--ink); }
.teammap { --cz-sea: color-mix(in srgb, var(--soft) 70%, #9fc3d6); --cz-land: var(--panel); --cz-faint: color-mix(in srgb, var(--soft) 60%, var(--panel)); --cz-line: var(--rule); }
.mapdlg { width: min(1100px, 96vw); max-height: 92vh; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 16px; }
.mapdlg::backdrop { background: rgba(0,0,0,.55); }
.dlghead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
@media (max-width: 640px) { .mapbtn { position: static; width: 100%; max-width: 260px; margin-bottom: 8px; } }

.seasonnav { position: absolute; top: 0; right: 0; display: flex; gap: 6px; }
.seasonnav a { font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 9px 12px; border: 1px solid var(--rule); background: var(--panel); text-decoration: none; }
.seasonnav a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .seasonnav { position: static; order: -1; } }

.reigning { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; padding: 7px 12px; background: var(--accent); color: var(--paper); text-decoration: none; }
.reigning .rcup { display: inline-block; width: 14px; height: 22px; }
.reigning .rcup svg { width: 100%; height: 100%; }
.defending { margin-left: 8px; font: 600 11px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 3px 6px; border: 1px solid var(--accent); color: var(--accent); vertical-align: 1px; white-space: nowrap; }

/* Sortable tables: the header is a button inside the th. */
th { padding: 0; }
th .sortbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 8px 10px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; }
th.num .sortbtn { justify-content: flex-end; }
th .sortbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th .arrow { font-size: 10px; opacity: .35; }
th .sortbtn:hover .arrow { opacity: .8; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }
th[aria-sort="ascending"] .arrow, th[aria-sort="descending"] .arrow { opacity: 1; color: var(--accent); }
th[aria-busy], table[aria-busy="true"] { opacity: .6; }
td a { text-underline-offset: 3px; }

/* Team charts */
.chartrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.donutbox { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.donutbox h3 { align-self: flex-start; }
.donut { width: min(100%, 230px); }
.donut text.big { fill: var(--ink); font: 700 30px var(--display); text-anchor: middle; }
.donut text.sub { fill: var(--muted); font: 600 11px var(--display); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.seg-w { fill: var(--accent); } .seg-l { fill: color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.seg-t { fill: color-mix(in srgb, var(--accent) 35%, var(--paper)); } .seg-o { fill: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
.legend i.seg-w { background: var(--accent); } .legend i.seg-l { background: color-mix(in srgb, var(--ink) 55%, var(--paper)); }
.legend i.seg-t { background: color-mix(in srgb, var(--accent) 35%, var(--paper)); } .legend i.seg-o { background: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
.donut path { stroke: var(--paper); stroke-width: 1.5; cursor: default; }
.chart .zero { stroke: var(--muted); stroke-dasharray: 4 3; }
.cell .mk.W { color: var(--ok); } .cell .mk.L { color: var(--bad); }
.tag { margin-left: 6px; }
td.res-W { color: var(--ok); font-weight: 600; } td.res-L { color: var(--bad); font-weight: 600; }