/* Look: a hand-operated ballpark scoreboard. Deep board green, hung number plates, and a single
   green rank scale. One family (Archivo) at two widths:
   wide for names, narrow for numbers. */

:root {
  --bg: #E9EEE6;
  --surface: #FBFCF9;
  --surface-2: #F1F4EE;
  --ink: #12241B;
  --ink-2: #3F5146;
  --ink-3: #566A5D;
  --rule: #D5DDD3;
  --rule-2: #A8B6AB;
  --band: #17402F;
  --band-2: #10321F;
  --band-ink: #F6F3DF;
  --band-ink-2: #BCCDBE;
  --plate: #17402F;
  --plate-ink: #F6F3DF;
  --plate-hole: rgba(0, 0, 0, .45);
  --ours: #16805A;
  --home: #16805A;
  --away: #8F4BB0;
  --neutral: #8B978F;
  --grid: #E1E7DF;
  --alert: #A23A22;
  --caution: #8A6A10;
  --focus: #0A5CAD;
  --sample-bg: #F2DFA6;
  --sample-ink: #3B2C05;
  /* Diverging rank scale: s1 = best (teal), s5 = neutral gray, s9 = worst (coral red).
     Red/green failed the CVD check (deutan dE < 1); teal vs coral clears dE >= 8 from step 2 out. */
  --s1: #10B8C6;
  --s2: #5DC9D4;
  --s3: #89D9E3;
  --s4: #B4E9EF;
  --s5: #EDEDEA;
  --s6: #FFD2C4;
  --s7: #F9B8A4;
  --s8: #EEA087;
  --s9: #E2876A;
  --rk: .74;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1F18;
    --surface: #14261E;
    --surface-2: #1A2F25;
    --ink: #E9F0E6;
    --ink-2: #BFCDC2;
    --ink-3: #9FB0A4;
    --rule: #2A3F34;
    --rule-2: #456052;
    --band: #17402F;
    --band-2: #0F2C1F;
    --band-ink: #F6F3DF;
    --band-ink-2: #B4C8B8;
    --plate: #1F5740;
    --plate-ink: #F6F3DF;
    --plate-hole: rgba(0, 0, 0, .5);
    --ours: #2FA074;
    --home: #2FA074;
    --away: #A56FCB;
    --neutral: #6F8176;
    --grid: #22372C;
    --alert: #E58B73;
    --caution: #D9B654;
    --focus: #8CC4FF;
    --sample-bg: #5A4610;
    --sample-ink: #FBF0CC;
    --s1: #007683;
    --s2: #00616C;
    --s3: #004D55;
    --s4: #08393E;
    --s5: #2A2B2A;
    --s6: #48291F;
    --s7: #643324;
    --s8: #7E3E2A;
    --s9: #9A4930;
    --rk: .8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1F18;
  --surface: #14261E;
  --surface-2: #1A2F25;
  --ink: #E9F0E6;
  --ink-2: #BFCDC2;
  --ink-3: #9FB0A4;
  --rule: #2A3F34;
  --rule-2: #456052;
  --band: #17402F;
  --band-2: #0F2C1F;
  --band-ink: #F6F3DF;
  --band-ink-2: #B4C8B8;
  --plate: #1F5740;
  --plate-ink: #F6F3DF;
  --plate-hole: rgba(0, 0, 0, .5);
  --ours: #2FA074;
  --home: #2FA074;
  --away: #A56FCB;
  --neutral: #6F8176;
  --grid: #22372C;
  --alert: #E58B73;
  --caution: #D9B654;
  --focus: #8CC4FF;
  --sample-bg: #5A4610;
  --sample-ink: #FBF0CC;
  --s1: #007683;
  --s2: #00616C;
  --s3: #004D55;
  --s4: #08393E;
  --s5: #2A2B2A;
  --s6: #48291F;
  --s7: #643324;
  --s8: #7E3E2A;
  --s9: #9A4930;
  --rk: .8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: lining-nums;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 4px; background: var(--surface); color: var(--ink); padding: 6px 10px; z-index: 20; }
.skip:focus { left: 8px; }
.sample-banner { background: var(--sample-bg); color: var(--sample-ink); padding: 5px 16px; font-size: 13px; font-weight: 600; text-align: center; }
.noscript { padding: 16px; }

/* Board */
.band { background: var(--band); color: var(--band-ink); }
.band-in {
  max-width: 1320px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap;
}
.band :focus-visible { outline-color: var(--band-ink); }
.wordmark { display: inline-flex; gap: 8px; text-decoration: none; font-size: 21px; }
.nav { display: flex; gap: 2px 18px; font-size: 15px; font-weight: 500; font-stretch: 100%; }
.nav a { color: var(--band-ink-2); text-decoration: none; padding: 3px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--band-ink); }
.nav a[aria-current="page"] { color: var(--band-ink); border-bottom-color: var(--band-ink); }
.updated { margin-left: 12px; color: var(--band-ink-2); font-size: 13px; font-stretch: 90%; }
.theme-btn {
  background: none; border: 1px solid rgba(246, 243, 223, .35); color: var(--band-ink-2);
  border-radius: 2px; padding: 2px 9px; font-size: 13px; cursor: pointer;
}
.theme-btn:hover { color: var(--band-ink); border-color: var(--band-ink-2); }

/* League tabs hang off the board like folder tabs dropping into the page. */
.subbar { background: var(--band-2); }
.subbar-in { max-width: 1320px; margin: 0 auto; padding: 5px 24px 0; display: flex; gap: 2px; }
.ltab {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 16px 6px; color: var(--band-ink-2); text-decoration: none;
  font-weight: 700; font-stretch: 112%; font-size: 14px; border-radius: 2px 2px 0 0;
}
.ltab small { font-weight: 400; font-stretch: 88%; font-size: 12px; opacity: .85; }
.ltab:hover { color: var(--band-ink); }
.ltab[aria-current="page"] { background: var(--bg); color: var(--ink); }
.ltab:focus-visible { outline-color: var(--band-ink); outline-offset: -3px; }
.ltab[aria-current="page"]:focus-visible { outline-color: var(--focus); }

.main { flex: 1 0 auto; width: 100%; max-width: 1320px; margin: 0 auto; padding: 18px 24px 44px; outline: none; }

.foot { border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 13px; }
.foot-in { max-width: 1320px; margin: 0 auto; padding: 14px 24px 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; }
.foot-in p:first-child { max-width: 78ch; }

/* Hung number plates: reserved for the handful of numbers a page is about. */
.plates { display: inline-flex; gap: .09em; line-height: 1; vertical-align: baseline; }
.plate {
  position: relative; display: inline-block; min-width: .74em; padding: .2em .13em .11em;
  background: var(--plate); color: var(--plate-ink); text-align: center;
  font-weight: 700; font-stretch: 80%; border-radius: 2px;
}
.plate::before {
  content: ""; position: absolute; top: .07em; left: 50%; width: .09em; height: .09em; min-width: 2px; min-height: 2px;
  margin-left: -.045em; border-radius: 50%; background: var(--plate-hole);
}
.plate.mark { background: none; color: var(--ink); min-width: 0; padding-left: 0; padding-right: 0; font-weight: 800; }
.plate.mark::before { display: none; }
.wordmark .plates { gap: 2px; }
.wordmark .plate { background: var(--band-ink); color: var(--band); min-width: .78em; font-weight: 800; font-stretch: 90%; }
.wordmark .plate::before { background: rgba(23, 64, 47, .45); }

/* Page heads */
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; margin-bottom: 12px; }
.phead-text { flex: 1 1 340px; min-width: 0; }
h1 { font-size: 27px; font-weight: 800; font-stretch: 118%; line-height: 1.12; letter-spacing: -.005em; }
h1:focus { outline: none; }
.lede { color: var(--ink-2); max-width: 72ch; margin-top: 4px; }
h2 { font-size: 17px; font-weight: 700; font-stretch: 112%; line-height: 1.2; }
h3 { font-size: 14px; font-weight: 700; font-stretch: 100%; margin: 0; }
.sect { margin-top: 28px; }
.sect > h2 { margin-bottom: 8px; }
.sect-note { color: var(--ink-3); font-size: 13.5px; max-width: 76ch; margin: -4px 0 8px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.search {
  width: 220px; max-width: 100%; height: 32px; padding: 0 9px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 2px; font: inherit; font-size: 14px;
}
.search::placeholder { color: var(--ink-3); opacity: 1; }
.count { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.scale { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12.5px; }
.scale i { display: block; width: 11px; height: 11px; }
.sect .scale { margin: 0 0 8px; }
.scale .sw { display: inline-flex; gap: 1px; border: 1px solid var(--rule); }
.toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chip {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
  padding: 3px 9px; font-size: 13px; font-weight: 600; font-stretch: 92%; cursor: pointer; min-height: 28px;
}
.chip:hover { border-color: var(--rule-2); }
.chip[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: var(--band-ink); }
a.chip { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.chip[aria-current="page"] { background: var(--band); border-color: var(--band); color: var(--band-ink); }
.pos-pick { display: grid; gap: 6px; margin: 4px 0 14px; }
.pos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pos-lab { color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 62px; }
.pos-h { font-size: 18px; margin: 0 0 8px; }
.pos-notes { display: grid; gap: 6px; margin-top: 14px; }
.pl-name { font-weight: 600; }
.inj { display: inline-block; margin-left: .4em; padding: 0 .35em; border-radius: 3px; font-size: .72em; font-weight: 700; letter-spacing: .02em;
  line-height: 1.5; vertical-align: .1em; text-decoration: none; cursor: help; border: 1px solid currentColor; }
.inj-out { color: var(--alert); }
.inj-doubt { color: var(--alert); border-style: dashed; }
.inj-q { color: var(--caution); }
.chip small { font-weight: 400; opacity: .8; margin-left: 3px; font-size: 11.5px; }

/* Data tables */
.tscroll {
  overflow: auto; background: var(--surface); border: 1px solid var(--rule);
  max-height: calc(100dvh - 16px); overscroll-behavior-x: contain;
}
.tscroll.flow { max-height: none; }
table.dt {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 13.5px; font-stretch: 90%; font-variant-numeric: tabular-nums lining-nums;
}
.dt th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2); padding: 0; font-weight: 600; text-align: left; vertical-align: bottom;
  white-space: nowrap;
}
.tscroll.flow .dt th { position: static; }
.tscroll.flow .dt th.pin { position: sticky; }
.dt th.num { text-align: right; }
.dt th > span, .th-btn { display: block; padding: 5px 8px 4px; line-height: 1.15; }
.th-btn {
  width: 100%; height: 100%; background: none; border: 0; cursor: pointer;
  text-align: inherit; font-weight: inherit; font-stretch: inherit;
}
.th-btn:hover { background: var(--grid); }
.th-btn:focus-visible { outline-offset: -2px; }
.th-unit { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); min-height: 12px; }
.th-arrow { display: inline-block; width: 8px; margin-left: 2px; font-size: 9px; color: var(--ink); vertical-align: 1px; }
.dt th[aria-sort="ascending"] .th-lab, .dt th[aria-sort="descending"] .th-lab { color: var(--ink); font-weight: 800; }
.dt td { height: 27px; padding: 0 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt td.num { text-align: right; }
.dt td.wrap { white-space: normal; min-width: 180px; }
.dt .pin { position: sticky; z-index: 1; background: var(--surface); }
.dt th.pin { z-index: 3; background: var(--surface-2); }
.dt tbody tr:hover td { border-bottom-color: var(--rule-2); }
.dt tbody tr:hover td.pin { background: var(--surface-2); }
.dt .pin-edge { box-shadow: 1px 0 0 var(--rule); }
.dt td.rkc { color: var(--ink-3); text-align: right; width: 34px; min-width: 34px; max-width: 34px; padding: 0 6px 0 2px; }
.dt th.rkc { width: 34px; min-width: 34px; max-width: 34px; }
.dt th.rkc .th-btn { padding-left: 2px; padding-right: 2px; }
.dt td.team a, .dt td.player a { font-weight: 600; text-decoration: none; }
.dt td.team a:hover, .dt td.player a:hover { text-decoration: underline; }
.dt tr.group-start td { border-top: 2px solid var(--rule-2); }
.team-short { display: none; }

.s0 { background: transparent; }
.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9 { box-shadow: inset 0 0 0 1px var(--surface); color: var(--ink); }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); }
.s4 { background: var(--s4); } .s5 { background: var(--s5); } .s6 { background: var(--s6); }
.s7 { background: var(--s7); } .s8 { background: var(--s8); } .s9 { background: var(--s9); }
/* On a shade, small ink (rank, unit) goes full strength so it keeps contrast on the strongest steps. */
td.s1 .rk, td.s2 .rk, td.s3 .rk, td.s4 .rk, td.s5 .rk, td.s6 .rk, td.s7 .rk, td.s8 .rk, td.s9 .rk,
td.s1 .u, td.s2 .u, td.s3 .u, td.s4 .u, td.s5 .u, td.s6 .u, td.s7 .u, td.s8 .u, td.s9 .u { opacity: .9; color: var(--ink); }

.vr { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 5px; width: 100%; }
.vr .rk { width: 2ch; text-align: right; font-size: 10.5px; font-stretch: 82%; opacity: var(--rk); }
.vr-main { font-weight: 800; font-size: 14.5px; }
.u { color: var(--ink-3); font-size: 11px; margin-left: 3px; font-stretch: 85%; }
.muted { color: var(--ink-3); }
.na { color: var(--ink-3); font-size: 12px; }
.thin-num { color: var(--ink-3); }
.thin-tag { color: var(--ink-3); font-size: 11px; margin-left: 4px; border-bottom: 1px dotted var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 4px; }
.status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status.out i { background: var(--alert); }
.status.doubt i { background: linear-gradient(90deg, var(--caution) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--caution); }

.form { display: inline-flex; gap: 1px; vertical-align: middle; }
.form b {
  display: inline-block; width: 15px; height: 17px; line-height: 17px; text-align: center;
  font-size: 10.5px; font-weight: 700; font-stretch: 85%; border-radius: 1px;
}
.form .w { background: var(--plate); color: var(--plate-ink); }
.form .l { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule-2); font-weight: 500; }
.form .o { color: var(--ink-2); background: var(--grid); }

.more { margin-top: 8px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.btn {
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 2px; padding: 4px 11px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-stretch: 95%;
}
.btn:hover { border-color: var(--ink-3); }
.linkbtn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; }

/* States */
.state { padding: 34px 20px; background: var(--surface); border: 1px solid var(--rule); max-width: 760px; }
.state h2 { margin-bottom: 4px; }
.state p { color: var(--ink-2); max-width: 66ch; }
.state .btn { margin-top: 10px; }
.state.inline { padding: 18px 16px; }
.loading { color: var(--ink-3); padding: 28px 0; min-height: 200px; }
.empty-row { padding: 22px 14px; color: var(--ink-2); white-space: normal; }

/* Team */
.thead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--band); }
.thead h1 { font-size: clamp(26px, 4.2vw, 42px); font-stretch: 122%; }
.tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--ink-2); }
.tover { text-align: right; }
.tover .plates { font-size: 54px; }
.tover-cap { color: var(--ink-2); font-size: 13.5px; margin-top: 5px; max-width: 30ch; margin-left: auto; }
.statline { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule); border-top: 0; font-stretch: 92%; }
.stat { flex: 1 1 120px; padding: 8px 12px 9px; border-right: 1px solid var(--rule); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat dt { color: var(--ink-3); font-size: 12.5px; }
.stat dd { font-size: 20px; font-weight: 700; font-stretch: 88%; line-height: 1.2; }
.stat .u { font-size: 12px; font-weight: 400; }
.stat .srk { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); font-stretch: 92%; }
.twocol { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.twocol > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px; }
.note { color: var(--ink-2); font-size: 14px; max-width: 66ch; }
.coach-name { font-weight: 700; margin-bottom: 6px; }

/* Charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg:focus-visible { outline-offset: 3px; }
.chart text { font-family: inherit; fill: var(--ink-3); font-size: 12px; font-stretch: 88%; font-variant-numeric: tabular-nums; }
.chart text.strong { fill: var(--ink); font-weight: 700; }
.chart text.lab { fill: var(--ink-2); }
.tip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--surface);
  padding: 5px 8px; font-size: 12.5px; line-height: 1.25; border-radius: 2px; white-space: nowrap; font-stretch: 92%;
}
.tip b { display: block; font-size: 14px; font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--ink-2); font-size: 13px; margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 1px; }
.legend i.ln { height: 0; width: 14px; border-top: 2px solid; border-radius: 0; }
.chart-foot { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
details.twin { margin-top: 8px; font-size: 13.5px; }
details.twin summary { cursor: pointer; color: var(--ink-2); }
details.twin .tscroll { margin-top: 6px; max-height: 320px; }

.th-lab 
/* Games */
.lgblock { margin-top: 22px; }
.lgblock:first-of-type { margin-top: 6px; }
.lgblock > h2 { padding-bottom: 6px; border-bottom: 2px solid var(--band); }
.game {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px 32px;
  padding: 12px 14px 13px; background: var(--surface); border: 1px solid var(--rule); border-top: 0;
}
.game > * { min-width: 0; }
.gwhen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; color: var(--ink-2); font-size: 13.5px; }
.gwhen .glink { margin-left: auto; font-weight: 600; color: var(--ink); }
.locktag { color: var(--ink-3); }
.ls { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums lining-nums; font-stretch: 92%; }
.ls th { font-size: 12px; font-weight: 500; color: var(--ink-3); text-align: right; padding: 0 0 3px 12px; white-space: nowrap; }
.ls th:first-child, .ls td:first-child { text-align: left; padding-left: 0; }
.ls td { padding: 4px 0 4px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--rule); }
.ls .tn { font-size: 15px; font-weight: 600; white-space: normal; }
.ls .tn a { text-decoration: none; }
.ls .tn a:hover { text-decoration: underline; }
.ls .st { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.ls .fav { font-weight: 800; }
.ls .score .plates { font-size: 17px; }
.ls .win { font-size: 15px; min-width: 40px; }
.ls .lw { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 16px; align-content: start; font-stretch: 92%; }
.facts dt { color: var(--ink-3); font-size: 12.5px; line-height: 1.2; }
.facts dd { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; line-height: 1.25; }

/* Game page */
.ghead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 6px 0 16px; border-bottom: 2px solid var(--band); }
.gteam h1, .gteam .gname { font-size: clamp(18px, 2.6vw, 28px); font-weight: 800; font-stretch: 116%; line-height: 1.12; }
.gteam a { text-decoration: none; }
.gteam a:hover { text-decoration: underline; }
.gteam .gsub { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.gteam.right { text-align: right; }
.gcenter { text-align: center; }
.gscore { display: flex; align-items: center; gap: 12px; font-size: 46px; justify-content: center; }
.gs { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gs-ab { font-size: 13px; font-weight: 700; font-stretch: 100%; color: var(--ink-2); line-height: 1; }
.gwin { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.ls td.st-col { text-align: left; }
.gcrumb { color: var(--ink-2); font-size: 13.5px; margin-bottom: 6px; }
.gfacts { margin-top: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--rule); border-top: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.why { display: grid; gap: 2px; font-stretch: 92%; font-variant-numeric: tabular-nums lining-nums; }
.why-head, .why-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; }
.why-head { color: var(--ink-3); font-size: 12.5px; margin-bottom: 2px; }
.why-sides { display: flex; justify-content: space-between; }
.why-name { font-size: 13.5px; line-height: 1.15; }
.why-track { position: relative; height: 24px; }
.why-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule-2); }
.why-bar { position: absolute; top: 5px; height: 14px; }
.why-bar.pos { background: var(--home); border-radius: 0 4px 4px 0; }
.why-bar.neg { background: var(--away); border-radius: 4px 0 0 4px; }
.why-val { position: absolute; top: 3px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.why-sum { border-top: 1px solid var(--rule-2); margin-top: 4px; padding-top: 4px; font-weight: 700; }
.why-sum .why-name { font-weight: 700; }
.why-foot { color: var(--ink-3); font-size: 13px; margin-top: 6px; }

/* Record */
.rstart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 28px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--band); }
.rstart .plates { font-size: 42px; gap: .07em; }
.rdate { display: inline-flex; flex-wrap: wrap; gap: .3em; font-size: 42px; }
.rstart h2 { font-size: 19px; }
.rstart p { color: var(--ink-2); max-width: 62ch; margin-top: 3px; }
.vs-summary { font-size: 15px; color: var(--ink); max-width: 76ch; margin-bottom: 8px; }
.better { font-weight: 800; }
.smalls { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.smalls .panel h3 { margin-bottom: 6px; }

/* Method */
.defs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 24px; }
.defs dt { font-weight: 700; padding: 10px 0; border-top: 1px solid var(--rule); font-stretch: 100%; }
.defs dd { padding: 10px 0; border-top: 1px solid var(--rule); max-width: 72ch; color: var(--ink); }
.prose { max-width: 72ch; }
.prose p + p { margin-top: 10px; }
.mhead { max-width: 72ch; }

@media (max-width: 1040px) {
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .game { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .band-in { padding: 8px 16px; gap: 6px 12px; }
  .wordmark { font-size: 18px; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 2px 8px; font-size: 14.5px; }
  .updated { display: none; }
  .theme-btn { margin-left: auto; }
  .subbar-in { padding: 4px 16px 0; }
  .ltab { padding: 5px 12px 6px; }
  .ltab small { display: none; }
  .main { padding: 14px 16px 36px; }
  .foot-in { padding: 12px 16px 20px; }
  h1 { font-size: 23px; }
  .search { width: 100%; }
  .tools { width: 100%; }
  .thead { grid-template-columns: minmax(0, 1fr); }
  .tover { text-align: left; }
  .tover .plates { font-size: 42px; }
  .tover-cap { margin-left: 0; max-width: none; }
  .stat { flex: 1 1 33%; border-bottom: 1px solid var(--rule); }
  .team-full { display: none; }
  .team-short { display: inline; }
  .gscore { font-size: 32px; gap: 8px; }
  .ghead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gcenter { grid-column: 1 / -1; grid-row: 2; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-head, .why-row { grid-template-columns: 78px minmax(0, 1fr); gap: 6px; }
  .why-name { font-size: 12.5px; }
  .rstart { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .rdate { font-size: 34px; }
  .defs { grid-template-columns: minmax(0, 1fr); }
  .defs dd { border-top: 0; padding-top: 0; }
  .ls .st-col { display: none; }
}
@media (min-width: 721px) {
  .ls .st-inline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .s1, .s2, .s3, .s4, .s5, .s6 { forced-color-adjust: none; }
  .why-bar, .legend i { forced-color-adjust: none; }
}
@media print {
  .band, .subbar, .foot, .tools, .theme-btn { display: none; }
  .tscroll { overflow: visible; max-height: none; }
}

/* Plain-language layer: the read, one-line explanations, sharing. */
.read { font-size: 16px; line-height: 1.42; max-width: 62ch; }
.read-lg { font-size: 19px; line-height: 1.38; margin-top: 14px; max-width: 58ch; font-weight: 500; }
.term {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help; text-align: inherit;
  text-decoration: underline dotted var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.term:hover { text-decoration-color: currentColor; }
.th-wrap { display: flex; align-items: flex-start; }
.dt th.num .th-wrap { justify-content: flex-end; }
.th-wrap > span, .th-wrap > .th-btn { display: block; padding: 5px 8px 4px; line-height: 1.15; }
.th-wrap > .th-btn { width: auto; flex: 0 1 auto; height: auto; }
.q {
  flex: none; width: 15px; height: 15px; margin: 5px 3px 0 -6px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%;
  background: none; color: var(--ink-3); font-size: 10px; font-weight: 600; line-height: 13px; text-align: center; cursor: help;
}
.q:hover { color: var(--ink); border-color: var(--ink-3); }
.pop {
  position: fixed; z-index: 30; width: max-content; max-width: min(300px, calc(100vw - 16px)); background: var(--ink); color: var(--surface);
  padding: 7px 10px; font-size: 13.5px; line-height: 1.35; border-radius: 2px; font-weight: 400; white-space: normal; text-align: left; pointer-events: none;
}
.sharebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
a.btn { display: inline-block; text-decoration: none; }
.btn:disabled { opacity: .65; cursor: default; }
.more { margin-top: 8px; }
.more > summary { cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 600; font-stretch: 95%; width: fit-content; padding: 3px 0; }
.more > summary:hover { color: var(--ink); }
.more-in { margin-top: 6px; }
.facts .wide { grid-column: 1 / -1; }
.facts .wide dd { font-weight: 500; }

/* Game rows: the score and win chance first, the read beside them. */
.game { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.gread { min-width: 0; }
.gactions { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.gactions .glink { margin-left: 0; }
.gactions .linkbtn { color: var(--ink-2); font-size: 13.5px; }
.ls .win { font-size: 20px; font-weight: 500; font-stretch: 88%; }
.ls .isfav .win { font-weight: 800; }
.ls .isfav .tn { font-weight: 800; }
.ls .tn { font-size: 16px; }
.ls .score .plates { font-size: 19px; }
.chart-foot { max-width: 70ch; }
.tover-cap { max-width: none; }
.statline { border-top: 1px solid var(--rule); margin-top: 12px; }
.gfacts { border-top: 1px solid var(--rule); }
.thin-num .term { color: var(--ink-3); font-size: 11px; margin-left: 4px; }
@media (max-width: 1040px) {
  .game { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .read { font-size: 15.5px; }
  .read-lg { font-size: 17px; }
  .gactions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* The day's talking points */
.heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.hl {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--band); color: var(--band-ink);
  text-decoration: none; border-radius: 2px; min-width: 0;
}
.hl:hover .hl-main { text-decoration: underline; }
.hl:focus-visible { outline-offset: 2px; }
.hl-plates { font-size: 32px; flex: none; line-height: 1; }
.hl .plate { background: var(--band-ink); color: var(--band); }
.hl .plate::before { background: rgba(23, 64, 47, .45); }
.hl-text { min-width: 0; }
.hl-label { display: block; color: var(--band-ink-2); font-size: 13px; }
.hl-main { display: block; font-size: 17px; font-weight: 700; font-stretch: 105%; line-height: 1.2; }
.swing { color: var(--ink-2); font-size: 14px; line-height: 1.4; margin-top: 4px; max-width: 66ch; }
.swing-lg { font-size: 15.5px; margin-top: 6px; }
.dt td.market { color: var(--ink-2); font-weight: 400; white-space: normal; min-width: 170px; }
.dt tr.market-row td { background: var(--surface-2); }
.dt tr.market-row td.pin { background: var(--surface-2); }
.dt tr:not(.market-row) td.wrap-cell { white-space: normal; min-width: 170px; }
@media (max-width: 720px) {
  .heads { grid-template-columns: minmax(0, 1fr); }
  .hl-plates { font-size: 26px; }
  .dt td.market, .dt tr:not(.market-row) td.wrap-cell { min-width: 128px; max-width: 150px; }
}

/* Page review: open weeks on football schedules read as a quiet row, not a missing game. */
.dt tr.bye-row td { color: var(--ink-2); font-style: italic; }
.dt tr.bye-row td .na { display: none; }

/* Roster moves (Now with X, Not on an NFL roster, practice squad): neutral, not an injury color. */
.status.move { color: var(--ink-2); }
.status.move i { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-2); }
/* Players who left their team, shown only when the filter is on. */
.dt tr.left-row td { opacity: .6; }
.leftpick { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-2); margin-left: 8px; }
/* The paging row and the open/close block share the .more class; the block must not be a flex row, or an open table pushes past a phone screen. */
details.more { display: block; }
.more-in { min-width: 0; max-width: 100%; }

/* The take (team page) and its one-line version (ratings table) */
.take { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--accent, var(--ink)); background: var(--surface-2); max-width: 70ch; }
.take-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.take .take-text { margin-top: 4px; }
.take-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.dt td.team .take-short { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--ink-3); white-space: normal; max-width: 34ch; margin-top: 1px; }
.qb-tag { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--ink-2, var(--ink)); }
/* Books beside our numbers */
.books { margin: 8px 0 4px; padding: 7px 10px; border: 1px dashed var(--rule-2); border-radius: 4px; }
.books p { margin: 0; }
.books-row { font-size: 14px; font-variant-numeric: tabular-nums; }
.books-label { font-weight: 700; }
.books-note { margin-top: 2px !important; font-size: 13.5px; color: var(--ink-3); }
.books-lg { margin-top: 14px; max-width: 62ch; }
.books-lg .books-row { font-size: 15.5px; }
@media (max-width: 720px) {
  .dt td.team .take-short { max-width: 21ch; font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Home page: one day at a time. */
.daychips { margin: 0 0 14px; gap: 6px; }
.daychips .chip { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.gover { font-weight: 600; color: var(--ink-2); }
.lgcount { font-size: 13.5px; font-weight: 400; color: var(--ink-2); font-stretch: 100%; }
.state.stale { margin-bottom: 16px; max-width: none; }
.daychips .chip small { margin-left: 6px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.daychips .chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
.pl-read { white-space: nowrap; color: var(--ink-2); }
.pl-from { color: var(--ink-2); font-size: .85em; white-space: nowrap; }

/* Where we differ most from the books (top of the games page) */
.gaps { margin: 0 0 1.25rem; }
.gaps h2 { margin: 0 0 .25rem; }
.gaps .note { margin: 0 0 .6rem; }
.gap-list { display: grid; gap: .4rem; }
.gap { display: flex; gap: .8rem; align-items: center; padding: .55rem .75rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; }
.gap:hover, .gap:focus-visible { border-color: var(--rule-2); }
.gap-n { flex: 0 0 4.2rem; font-size: 1.35rem; font-weight: 700; line-height: 1; text-align: center; color: var(--ours); }
.gap-n small { display: block; font-size: .62rem; font-weight: 600; color: var(--ink-3); margin-top: .2rem; letter-spacing: .02em; }
.gap-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gap-match { font-weight: 600; }
.gap-match small { font-weight: 400; color: var(--ink-3); }
.gap-line { color: var(--ink-2); font-size: .92em; }
.gap-sep { white-space: pre; color: var(--ink-3); }
@media (max-width: 560px) { .gap-sep { display: block; height: 0; overflow: hidden; } }

/* Realistic rank beside Rk (college ratings) */
.rdelta { font-size: .72em; font-weight: 600; margin-left: .15em; }
.rdelta.up { color: var(--ours); }
.rdelta.down { color: var(--alert); }

/* Header search (teams and players) */
.gsearch { position: relative; margin-left: auto; flex: 0 1 240px; min-width: 0; }
.gsearch input { width: 100%; box-sizing: border-box; padding: .38rem .6rem; border-radius: 6px; border: 1px solid var(--band-ink-2); background: var(--band-2); color: var(--band-ink); font: inherit; font-size: .9rem; }
.gsearch input::placeholder { color: var(--band-ink-2); }
.gsearch-list { position: absolute; z-index: 50; right: 0; top: calc(100% + 4px); width: min(360px, 92vw); margin: 0; padding: .25rem; list-style: none; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.gs-item { display: flex; flex-direction: column; padding: .45rem .55rem; border-radius: 5px; cursor: pointer; }
.gs-item:hover, .gs-item[aria-selected="true"] { background: var(--surface-2); }
.gs-name { font-weight: 600; color: var(--ink); }
.gs-sub { font-size: .8rem; color: var(--ink-3); }
.gs-empty { padding: .5rem .6rem; color: var(--ink-3); font-size: .9rem; }
@media (max-width: 720px) { .gsearch { order: 10; flex: 1 1 100%; margin: .4rem 0 0; } }
/* Team page: best players */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem; }
.tp { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .5rem; padding: .5rem .65rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; }
.tp:hover, .tp:focus-visible { border-color: var(--rule-2); }
.tp-pos { font-size: .75rem; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; }
.tp-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-rank { font-size: .82rem; color: var(--ink-2); white-space: nowrap; }

/* Player page */
.player-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pl-badge { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--plate); color: var(--plate-ink); font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.player-head .phead-text { flex: 1 1 280px; min-width: 0; }
.crumb { margin: 0 0 2px; font-size: 13px; }
.crumb a { color: var(--ink-3); }
.pl-big { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pl-big-n { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ours); }
.pl-big-l { font-size: 12.5px; color: var(--ink-3); }
.pl-big-r { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pl-tools { margin: 6px 0 0; }
.pl-stats { display: grid; gap: 6px; max-width: 720px; }
.pl-stat { display: grid; grid-template-columns: minmax(110px, 180px) 70px 1fr 44px; align-items: center; gap: 10px; font-size: 14px; }
.pl-stat-l { color: var(--ink-2); }
.pl-stat-v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pl-bar { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }
.pl-stat-r { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.tp-me { border-color: var(--ours); box-shadow: inset 3px 0 0 var(--ours); }
.dt a.pl-name, a.pl-name { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.dt a.pl-name:hover, a.pl-name:hover { text-decoration-color: currentColor; }
@media (max-width: 560px) { .pl-big { align-items: flex-start; } .pl-stat { grid-template-columns: 1fr 60px 70px 38px; } }

.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-width: 860px; }
.rt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.rt-l { font-size: 12.5px; color: var(--ink-3); }
.rt-v { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rt-s { font-size: 13px; color: var(--ink-2); font-weight: 600; }
details.how { max-width: 760px; }
details.how ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }

/* Scores strip (top of every page) */
.ticker { background: var(--surface); border-bottom: 1px solid var(--rule); }
.tk-in { max-width: 1320px; margin: 0 auto; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; padding: 0 16px; }
.tk { flex: 0 0 auto; display: grid; gap: 1px; min-width: 112px; padding: 6px 12px; border-right: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 13px; }
.tk:hover, .tk:focus-visible { background: var(--surface-2); }
.tk-when { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tk-when b { color: var(--ink-2); font-weight: 700; letter-spacing: .03em; }
.tk-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.tk-fav { color: var(--ink); font-weight: 700; }
.tk-p { font-variant-numeric: tabular-nums; }
/* Sticky section tabs on team and player pages */
.sectabs { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); margin: 10px 0 14px; }
.st-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.st-a { flex: 0 0 auto; padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent; }
.st-a:hover { color: var(--ink); border-bottom-color: var(--team, var(--ink)); }
main .sect > h2, main section > h2 { scroll-margin-top: 56px; }
/* Team colors */
main.has-team .team-head { border-top: 6px solid var(--team); padding-top: 12px; }
main.has-team .pl-badge { background: var(--team); color: #fff; box-shadow: 0 0 0 3px var(--team2); }
main.has-team .take { border-left-color: var(--team); }
main.has-team .rt { border-top: 3px solid var(--team); }
main.has-team .pl-bar i { background: var(--team); }

.pl-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.pl-key { display: flex; flex-direction: column; line-height: 1.1; }
.pl-key b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-key small { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* Matchup block: win chance + predicted score, nothing else */
.mu { display: grid; gap: 4px; margin: 8px 0 6px; }
.mu-head, .mu-row { display: grid; grid-template-columns: 1fr 88px 96px; align-items: center; gap: 10px; }
.mu-head { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.mu-head span:nth-child(n+2) { text-align: right; }
.mu-row { padding: 6px 0; border-top: 1px solid var(--rule); }
.mu-team { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.mu-team:hover .mu-name { text-decoration: underline; }
.mu-name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-where { font-size: 12px; color: var(--ink-3); }
.mu-dog .mu-name { font-weight: 500; color: var(--ink-2); }
.mu-win { justify-self: end; min-width: 58px; text-align: center; padding: 3px 8px; border-radius: 5px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.mu-win.up { color: #fff; background: var(--ours); }
.mu-win.down { color: var(--alert); background: transparent; box-shadow: inset 0 0 0 1.5px var(--alert); }
.mu-pts { text-align: right; font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mu-dog .mu-pts { color: var(--ink-2); }
.mu-big .mu-head, .mu-big .mu-row { grid-template-columns: 1fr 110px 120px; }
.mu-big .mu-name { font-size: 24px; }
.mu-big .mu-win { font-size: 20px; padding: 5px 12px; }
.mu-big .mu-pts { font-size: 48px; }
.gtitle { font-size: 22px; margin: 4px 0 6px; }
details.gmore { margin-top: 6px; }
details.gmore > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
details.gmore[open] > summary { margin-bottom: 6px; }
.gstate { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 560px) {
  .mu-head, .mu-row { grid-template-columns: 1fr 64px 56px; }
  .mu-name { font-size: 15px; } .mu-pts { font-size: 24px; } .mu-win { min-width: 50px; font-size: 14px; }
  .mu-big .mu-head, .mu-big .mu-row { grid-template-columns: 1fr 72px 64px; }
  .mu-big .mu-name { font-size: 18px; } .mu-big .mu-pts { font-size: 34px; } .mu-big .mu-win { font-size: 16px; }
}
/* Scores strip: stock-ticker colors and slow scroll */
.tk-row .tk-p { padding: 0 4px; border-radius: 3px; font-weight: 700; }
.tk-fav .tk-p { color: #fff; background: var(--ours); }
.tk-row:not(.tk-fav) .tk-p { color: var(--alert); }
.tk-in.tk-run { overflow: hidden; }
.tk-track { display: flex; width: max-content; animation: tk-scroll var(--tk-dur, 90s) linear infinite; }
.ticker:hover .tk-track, .ticker:focus-within .tk-track { animation-play-state: paused; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } .tk-in.tk-run { overflow-x: auto; } }

/* Day picker: one swipeable row instead of a wall of buttons */
.chips.daychips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.daychips .chip { flex: 0 0 auto; }

/* Team roster */
.roster { display: grid; gap: 6px; }
details.rg { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 2px 12px; }
details.rg > summary { cursor: pointer; padding: 8px 0; font-weight: 700; }
details.rg > summary small { color: var(--ink-3); font-weight: 500; }
.rr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 18px; padding-bottom: 8px; }
.rr { display: grid; grid-template-columns: 38px 1fr 40px auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; }
.rr:hover .rr-name { text-decoration: underline; }
.rr-num { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-pos { font-size: 12px; color: var(--ink-3); }
.rr-tag { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.rr-rk .rr-tag { color: var(--ours); font-weight: 700; }
.pl-bio { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* Scoreboard (games page) */
.sb-slot { margin: 10px 0 16px; }
.sb-time { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sb { display: block; padding: 8px 12px 9px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.sb:hover, .sb:focus-visible { border-color: var(--rule-2); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.sb-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.sb-row { display: grid; grid-template-columns: 6px 1fr auto 40px; align-items: center; gap: 10px; padding: 4px 0; }
.sb-chip { width: 6px; height: 26px; border-radius: 3px; background: var(--rule-2); }
.sb-team { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sb-name { font-size: 15.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-rec { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sb-fav .sb-name { font-weight: 700; color: var(--ink); }
.sb-win { font-size: 13px; font-weight: 800; padding: 2px 7px; border-radius: 5px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.sb-win.up { color: #fff; background: var(--ours); }
.sb-win.down { color: var(--alert); box-shadow: inset 0 0 0 1.5px var(--alert); }
.sb-pts { font-size: 22px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.sb-fav .sb-pts { color: var(--ink); }
.sb-foot { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 560px) { .sb-grid { grid-template-columns: 1fr; } }

.sb-was { color: var(--ink-3) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--rule-2) !important; font-weight: 600; }
.sb-right { color: var(--ours); } .sb-wrong { color: var(--alert); }

/* 0-100 grade */
.pl-grade { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 14px; font-size: 32px; font-weight: 900; line-height: 1; color: #fff; }
.pl-grade small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-top: 2px; }
.gpill { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 5px; font-weight: 800; color: #fff; text-align: center; }
.ga { background: #157a52; } .gb { background: #4f9a3a; } .gc { background: #b8860b; } .gd { background: #b5462f; }

/* Today + my team */
.today { margin: 4px 0 14px; }
.today h2 { margin: 0 0 6px; }
.stories { display: grid; gap: 6px; }
.story { display: block; padding: 9px 12px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ours); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.story:hover { border-color: var(--rule-2); }
.mine { margin: 4px 0 14px; } .mine-l { margin: 0 0 6px; font-weight: 700; color: var(--ink-2); }
.myteam-row { margin-top: 8px; } .myteam-btn[aria-pressed="true"] { background: var(--ours); color: #fff; border-color: var(--ours); }

/* game log */
.dt.gl td, .dt.gl th { white-space: nowrap; padding: 6px 8px; font-size: 13.5px; }
.dt.gl .gl-w { color: var(--ours); font-weight: 600; } .dt.gl .gl-l { color: var(--alert); font-weight: 600; }
.dt.gl .gl-tot td { font-weight: 700; border-top: 2px solid var(--rule-2); }
.gamelog:empty { display: none; }

/* Games page, 2026-11-11: league picker, top games first, one-line rows for the long lists */
.lgchips { margin: 0 0 16px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.lgchips .chip { flex: 0 0 auto; min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.lgchips .chip small { margin-left: 6px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lgchips .chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
.sb-rk { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-right: 1px; font-variant-numeric: tabular-nums; }
.sb-live { color: var(--alert); font-weight: 700; }
.morebtn { display: block; width: 100%; margin: 10px 0 0; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px; cursor: pointer; }
.morebtn:hover, .morebtn:focus-visible { border-color: var(--ours); color: var(--ours); }
.gl-head, .gl { display: grid; grid-template-columns: 86px minmax(0, 1fr) 54px 76px 76px; align-items: center; gap: 10px; padding: 0 12px; }
.gl-head { margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.gl-head span:nth-child(n+3), .gl-p, .gl-s, .gl-o { text-align: right; }
.gl-list { margin-top: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.gl { min-height: 40px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule); font-size: 14.5px; }
.gl:first-child { border-top: 0; }
.gl:hover, .gl:focus-visible { background: var(--bg); }
.gl-t { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.gl-m { display: flex; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.gl-tm { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.gl-fav { font-weight: 700; color: var(--ink); }
.gl-at { color: var(--ink-3); font-size: 12.5px; align-self: center; }
.gl-p { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ours); }
.gl-s { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 560px) { .gl-head, .gl { grid-template-columns: 54px minmax(0, 1fr) 38px 52px 52px; gap: 6px; padding: 0 8px; } .gl { font-size: 13.5px; } .gl-m { flex-wrap: wrap; row-gap: 0; white-space: normal; padding: 5px 0; } }
@media (max-width: 560px) { .today .stories .story:nth-child(n+2) { display: none; } .today h2 { display: none; } .today { margin-bottom: 4px; } }

/* Results page (site_results.py): our predicted score beside the final */
.rs-tabs { margin: 2px 0 6px; }
.rs-tabs .chip, .rs-tools .chip { min-height: 34px; padding: 5px 11px; font-size: 14px; }
.rs-note { margin: 0 0 10px; }
.rs-tools { margin-bottom: 8px; }
.rs-rec { margin: 6px 0 4px; font-size: 15px; color: var(--ink-2); }
.rs-rec b { color: var(--ink); font-size: 17px; }
.rs-dot { color: var(--ink-3); }
.rs-day { margin-top: 18px; }
.rs-day > h2 { font-size: 16px; padding-bottom: 5px; border-bottom: 2px solid var(--band); }
.rs-list { margin-top: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.rs { display: grid; grid-template-columns: minmax(0, 1fr) 128px 112px 64px; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.rs:first-child { border-top: 0; }
.rs-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.rs-tm { color: var(--ink-2); text-decoration: none; }
a.rs-tm:hover { text-decoration: underline; }
.rs-fav .rs-tm { color: var(--ink); font-weight: 700; }
.rs-at { color: var(--ink-3); font-size: 12.5px; }
.rs-lg { font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; }
.rs-us, .rs-fin { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rs-us b { color: var(--ours); }
.rs-fin b { color: var(--ink); }
.rs-us small, .rs-fin small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.rs-l { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rs-dash { color: var(--ink-3); font-weight: 400; }
.rs-mk { justify-self: end; font-size: 13px; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.rs-ok { color: var(--ours); font-size: 17px; }
.rs-no { color: var(--alert); font-size: 17px; }
.rs-wait { font-weight: 600; font-size: 12px; }
@media (max-width: 720px) {
  .rs { grid-template-columns: minmax(0, 1fr) auto auto 26px; gap: 8px; padding: 8px 10px; font-size: 14px; }
  .rs-m { grid-column: 1 / -1; }
  .rs-us { grid-column: 1; align-items: flex-start; }
  .rs-fin { grid-column: 2 / 4; }
  .rs-mk { grid-column: 4; }
  .rs-tools .search { width: 100%; }
}
.rs-body { max-width: 860px; }

/* O/U beside our total (owner 2026-11-12) */
.gl-o { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.gl-o small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.sb-ou { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rs-tot { grid-column: 1 / -1; margin-top: -2px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* moneyline value block on Us vs the books (site_value.py) */
.vp-block > h2 { margin-bottom: 4px; }
.vp-rec { margin-top: 10px; max-width: 80ch; }
.gap-ml { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.vp-res { font-weight: 700; } .vp-w { color: var(--ours); } .vp-l { color: var(--alert); }
.vp-safe { margin-top: 10px; max-width: 80ch; padding: 8px 10px; border-left: 3px solid var(--caution); background: var(--surface); }
.foot-credits { font-size: 12px; color: var(--ink-3); margin-top: 6px; max-width: 90ch; }
.foot-credits a { color: inherit; }

/* Fantasy (2026-11-13): six nav links on a phone stay on one line */
@media (max-width: 560px) { .nav { gap: 2px 5px; font-size: 12.8px; overflow-x: auto; scrollbar-width: none; } .nav a { white-space: nowrap; } }
.ff-last { margin-top: 28px; }
.ff-last h2 { margin-bottom: 6px; }
.ff-rng { color: var(--ink-3); white-space: nowrap; }

/* Email signup (js/signup.js, owner 2026-11-13) */
.su { flex: 1 1 100%; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; margin: 4px 0 10px; color: var(--ink-2); }
.su h2 { font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.su-lede { margin: 0 0 10px; max-width: 70ch; }
.su-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.su-form input[type=email] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--bg); color: var(--ink); }
.su-form button { font: inherit; font-size: 15px; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 4px; background: var(--band); color: var(--band-ink); cursor: pointer; }
.su-form button:disabled { opacity: .6; cursor: default; }
.su-form input:focus-visible, .su-form button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-msg { min-height: 1.4em; margin: 6px 0 0; font-weight: 600; color: var(--ink); }
.su-fine { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.su-fine a, .foot-links a { color: inherit; }
.foot-links { margin: 0; }
.privacy h2 { font-size: 18px; margin: 20px 0 6px; }
.privacy ul { padding-left: 20px; }
.privacy li + li { margin-top: 4px; }
.su-remove { max-width: 560px; }

/* Record line on the games page (owner 2026-11-13) */
.hook { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.hook b { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.hook-go { color: var(--ours); font-weight: 700; white-space: nowrap; }
.hook:hover .hook-go, .hook:focus-visible .hook-go { text-decoration: underline; }
@media (max-width: 560px) { .hook-sep, .hook-more { display: none; } .hook { font-size: 14px; margin-bottom: 8px; } }

/* Phone header (owner 2026-11-13 UI review): search behind a button, thinner score strip */
.gs-btn { display: none; }
@media (max-width: 560px) {
  .gs-btn { display: inline-grid; place-items: center; margin-left: auto; width: 34px; height: 30px; padding: 0; border: 1px solid var(--band-ink-2); border-radius: 6px; background: transparent; color: var(--band-ink); cursor: pointer; }
  .gs-btn:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 2px; }
  .band .theme-btn { margin-left: 0; }
  .band:not(.gs-open) .gsearch { display: none; }
  .band.gs-open .gs-btn { background: var(--band-2); }
  .band-in { padding: 6px 16px; gap: 4px 8px; }
  .tk { min-width: 92px; padding: 3px 9px; font-size: 12px; }
  .tk-when { font-size: 10.5px; }
}
/* Ratings on a phone (owner 2026-11-13 UI review): the best-win note made every row three lines tall; the record column and the team page carry it */
@media (max-width: 560px) { .dt td.team .take-short { display: none; } }
@media (max-width: 560px) {
  .wordmark { font-size: 16px; }
  .band .theme-btn { padding: 4px 8px; font-size: 12.5px; }
}
@media (min-width: 561px) { .hook-go { margin-left: auto; } }
@media (max-width: 560px) {
  .subbar-in { overflow-x: auto; scrollbar-width: none; }
  .ltab { white-space: nowrap; flex: 0 0 auto; padding: 5px 11px 6px; font-size: 14px; }
}

/* Sports Gradebook logo (owner 2026-11-13) */
.wordmark { align-items: center; gap: 0; color: var(--band-ink); line-height: 1; }
.wm-badge { display: inline-flex; align-items: flex-start; justify-content: center; width: 1.6em; height: 1.6em; border-radius: .26em; background: var(--band-ink); color: var(--band); font-weight: 900; font-size: 1em; font-stretch: 100%; padding-top: .3em; box-sizing: border-box; letter-spacing: -.02em; }
.wm-badge sup { font-size: .62em; line-height: 1; margin-left: .02em; margin-top: -.12em; vertical-align: 0; }
.wm-text { display: inline-flex; gap: 0; align-items: baseline; font-size: 1.08em; letter-spacing: -.01em; white-space: nowrap; }
.wm-a { font-weight: 500; font-stretch: 100%; color: var(--band-ink-2); }
.wm-b { font-weight: 850; font-stretch: 112%; color: var(--band-ink); }
.wordmark:hover .wm-b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* owner 2026-11-13: make the record grab attention */
.hook { align-items: center; gap: 2px 10px; padding: 10px 14px; border-left: 4px solid var(--ours); }
.hook b { font-size: 30px; font-weight: 900; font-stretch: 112%; line-height: 1; letter-spacing: -.01em; color: var(--ours); }
.hook > span:first-of-type { font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .hook b { font-size: 26px; } .hook > span:first-of-type { font-size: 15px; } }
.hook-sep { display: none; }