/* Drop Coverage — static site styles (docs/brand/BRAND.md, tokens.json).
   Day on maple, night on navy (the tokens below), a printed game-day
   programme: square corners,
   borders not shadows, Archivo for words, DM Mono for every number.
   Six colours and no more:
     maple      the ground          cream      panels and tables
     navy       ink, borders, and the ground of every data panel
     court-red  ours (our figure, the stripe) and NOT COVERED
     mint       COVERED, and a clear edge: only ever on navy
     brown      secondary text and labels
   Colour never carries meaning alone: sides are ▲O / ▼U, results say
   COVERED / NOT COVERED. The old variable names are kept so the page
   logic needn't change; each now points at a brand token. */

:root {
  --maple: #EAD7B2; --cream: #F5EAD3; --navy: #16203A;
  --court-red: #C8352B; --mint: #7FD4A4; --brown: #5B4A2F;
  --label-on-navy: rgba(234, 215, 178, .7);

  /* day (owner, 15 Oct 2026: day is maple and cream, night is navy).
     Everything below reads these, so night only swaps them. */
  --ground: var(--maple); --surface: var(--cream); --ink: var(--navy); --on-ink: var(--cream);
  --rule: var(--navy); --hairline: rgba(22, 32, 58, .16); --sub: var(--brown);
  --data: var(--navy); --tint: rgba(22, 32, 58, .05); --tint-2: rgba(22, 32, 58, .07);
  --red-text: var(--court-red); --red-soft: rgba(200, 53, 43, .08);
  --over: var(--navy); --under: var(--red-text);
  --fmark: url("/assets/brand/wordmark-stacked.svg");
  color-scheme: light;

  /* the older names, kept so the page logic needn't change */
  --bg: var(--ground); --panel: var(--surface); --panel-2: var(--tint);
  --line: var(--hairline); --line-strong: var(--rule);
  --muted: var(--sub); --faint: var(--sub);
  --accent: var(--red-text); --accent-ink: var(--on-ink); --accent-soft: var(--red-soft);
  --signal: var(--ink); --signal-soft: var(--data);
  --bad: var(--red-text); --chip: var(--tint);
  --tierA: var(--mint); --tierB: var(--sub);
  --good: var(--ink);
  --dn: var(--red-text); --dn-soft: var(--red-soft);
  /* no market shades: markets are told apart by their label */
  --st-pts: var(--ink); --st-reb: var(--ink); --st-ast: var(--ink); --st-3pm: var(--ink);
  --st-combo: var(--ink); --st-other: var(--ink);
  --sans: "Archivo", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* night: navy ground, cream ink, maple rules. Still the six colours
   (brand kit): the panel is maple at 6% over navy, flattened (#232B41),
   and small red text is court-red 40% toward cream, flattened (#DA7D6E,
   5.5:1 on navy, 4.8:1 on a panel); court-red fills and the stripe stay
   as they are. Follows the device until the reader picks (data-theme,
   set before paint from localStorage "dc.mode"). */
:root[data-theme="dark"] {
  --ground: var(--navy); --surface: #232B41; --ink: var(--cream); --on-ink: var(--navy);
  --rule: rgba(234, 215, 178, .42); --hairline: rgba(234, 215, 178, .14);
  --sub: var(--label-on-navy); --data: var(--navy);
  --tint: rgba(234, 215, 178, .05); --tint-2: rgba(234, 215, 178, .08);
  --red-text: #DA7D6E; --red-soft: rgba(218, 125, 110, .12);
  --over: var(--mint); --fmark: url("/assets/brand/wordmark-stacked-night.svg");
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: var(--navy); --surface: #232B41; --ink: var(--cream); --on-ink: var(--navy);
    --rule: rgba(234, 215, 178, .42); --hairline: rgba(234, 215, 178, .14);
    --sub: var(--label-on-navy); --data: var(--navy);
    --tint: rgba(234, 215, 178, .05); --tint-2: rgba(234, 215, 178, .08);
    --red-text: #DA7D6E; --red-soft: rgba(218, 125, 110, .12);
    --over: var(--mint); --fmark: url("/assets/brand/wordmark-stacked-night.svg");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.ph { display: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
b, strong { font-weight: 600; }

/* ---- header: one row at every width ---- */
header.site {
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.logo { text-decoration: none; display: inline-flex; flex: none; color: var(--ink); }
/* the lane-line wordmark, live type (Wordmark component): Archivo 900 at
   70% width over a straight stripe, navy 36%, gap, court-red 13%, gap,
   navy to the end */
.wm {
  position: relative; display: inline-block; padding-bottom: .3em;
  font: 900 23px/1 var(--sans); font-stretch: 70%; text-transform: uppercase;
  letter-spacing: -.005em; word-spacing: .12em; white-space: nowrap;
}
.wm::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .12em;
  background: linear-gradient(90deg, var(--ink) 0 36%, transparent 36% 37.6%,
    var(--court-red) 37.6% 50.6%, transparent 50.6% 52.2%, var(--ink) 52.2% 100%);
}
nav.site {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  flex: 1 1 auto; min-width: 0; mask-image: linear-gradient(90deg, #000 88%, transparent);
}
nav.site::-webkit-scrollbar { display: none; }
nav.site a {
  text-decoration: none; color: var(--muted); padding: 6px 10px;
  font: 500 14px/1 var(--sans); white-space: nowrap; border-radius: 0;
  letter-spacing: .01em;
}
nav.site a.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--court-red); border-radius: 0; }
nav.site a:hover { color: var(--ink); }
/* ---- freshness strip: one line, scrolls sideways on a phone ---- */
.fresh {
  display: flex; gap: 0; align-items: center; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  padding: 7px 16px; font: 12.5px/1.4 var(--mono); color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.fresh::-webkit-scrollbar { display: none; }
.fresh > span + span::before { content: "·"; margin: 0 10px; color: var(--faint); }
.fresh b { color: var(--ink); font-weight: 500; }
.fresh .demo { color: var(--accent); }

/* Degraded mode: loud enough that nobody mistakes yesterday for today. */
.fresh.stale { flex-wrap: wrap; white-space: normal; border-left: 3px solid var(--bad); }
.fresh .staleline {
  flex: 1 0 100%; color: var(--bad); font: 13px/1.45 var(--sans);
  margin: 0 0 6px; max-width: 70ch;
}
.fresh .staleline b { color: var(--bad); font-weight: 700; }

main { max-width: 1120px; margin: 0 auto; padding: 22px 16px 60px; }
h1 {
  font: 600 26px/1.15 var(--sans); margin: 4px 0 6px; letter-spacing: -0.01em;
}
p.sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; max-width: 75ch; }
p.lead {
  margin: 0 0 18px; font-size: 16.5px; line-height: 1.45; max-width: 68ch;
  color: var(--ink);
}
p.lead .n { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.kicker {
  font: 500 11.5px/1 var(--mono); color: var(--muted); letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 8px;
}

.controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; }
.controls select, .controls input {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 7px 10px; font: 14px var(--sans); min-width: 0;
}
.controls select:focus, .controls input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.controls input[type="search"] { flex: 1 1 180px; }

/* ---- tables ---- */
.tablewrap {
  overflow-x: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 0;
}
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td {
  padding: 8px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
td { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
td.s { font-family: var(--sans); font-size: 14px; }
th {
  color: var(--faint); font: 500 11px/1.2 var(--mono);
  text-transform: uppercase; letter-spacing: 0.07em;
  position: sticky; top: 0; background: var(--panel);
  cursor: pointer; user-select: none;
}
th.s, td.s { text-align: left; }
th.sorted { color: var(--accent); }
tbody tr:hover td { background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
td a { text-decoration: none; font-weight: 600; }
td a:hover { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--signal); font-weight: 600; }
.neg { color: var(--muted); }
.dim { color: var(--muted); }
td .sm, .sm { font: 11.5px/1.3 var(--mono); color: var(--muted); font-weight: 400; }
td .sm.l { font-family: var(--sans); font-size: 12px; }

/* board rows: the player cell carries team, opponent and minutes */
td.pl { line-height: 1.25; }
td.pl .tbadge { margin-right: 6px; }
.pred b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.side { font: 600 12px/1 var(--mono); letter-spacing: .03em; color: var(--ink); }
.side .ar { color: var(--muted); font-size: 10px; margin-right: 2px; }
.edge { display: inline-block; min-width: 54px; padding: 3px 6px; border-radius: 0; text-align: right; }
.edge.hot { background: var(--signal-soft); color: var(--signal); font-weight: 600; }
.edge.hot.under { background: var(--dn-soft); color: var(--dn); }
.edge .ar { font-size: 9px; margin-right: 1px; vertical-align: 1px; }
.edge.warm { color: var(--signal); }
.edge.cold { color: var(--muted); }
.hit.good { color: var(--signal); }
.mu { color: var(--muted); }
.mu.soft { color: var(--ink); font-weight: 600; }
.mu.soft::before { content: "▲"; font-size: 9px; color: var(--accent); margin-right: 3px; vertical-align: 1px; }
.mu.hard { color: var(--faint); }
.hit.meh { color: var(--muted); }

.badge {
  display: inline-block; padding: 2px 7px; border-radius: 0;
  font: 600 11px/1.2 var(--mono); letter-spacing: 0.03em;
}
.badge.A { background: var(--signal-soft); color: var(--tierA); }
.badge.B { background: var(--chip); color: var(--tierB); }
.badge.src { background: var(--chip); color: var(--muted); font-weight: 500; }
.badge.over, .badge.under { background: var(--chip); color: var(--ink); }

.cards { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: 14px 0; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 10px 12px;
}
.card .k { color: var(--faint); font: 500 11px/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: 0.07em; }
.card .v { font: 600 22px/1.2 var(--mono); margin: 4px 0 2px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.card .r { color: var(--muted); font: 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }

.section { margin: 26px 0 10px; }
.section h2 {
  font: 500 12px/1.2 var(--mono); margin: 0 0 8px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---- team identity ---- */
.tbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 18px; padding: 0 5px; border-radius: 0;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.03em;
  border: 1px solid; vertical-align: 1px;
}
.singlet { width: 44px; height: 46px; vertical-align: -12px; }
.singlet text { font-family: var(--mono); }
.playerhead { display: flex; align-items: center; gap: 12px; }

/* ---- chips, stepper ---- */
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 0; padding: 6px 11px; font: 600 12.5px/1 var(--mono);
  letter-spacing: .03em; cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.seg .chip { border: 0; border-radius: 0; }
.seg .chip + .chip { border-left: 1px solid var(--line); }
.stepper { display: inline-flex; align-items: center; gap: 0; }
.stepper button {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  width: 32px; height: 34px; cursor: pointer; font-size: 16px;
}
.stepper button:first-child { border-radius: 0 0 0 6px; }
.stepper button:last-child { border-radius: 0 6px 6px 0; }
.stepper input {
  width: 74px; height: 34px; text-align: center; border: 1px solid var(--line);
  border-left: 0; border-right: 0; background: var(--panel); color: var(--ink);
  font: 600 14px var(--mono); font-variant-numeric: tabular-nums;
}
.hitcards { display: grid; gap: 8px; margin: 12px 0;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.hitcards .card .v { font-size: 18px; }
.hitcards .dot { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 5px; vertical-align: 2px; }

/* ---- prop chart (player hub) ---- */
.chartpanel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 12px 8px 4px; position: relative;
}
.chartpanel svg { display: block; width: 100%; height: auto; }
.chartpanel text { fill: var(--muted); font-size: 11px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chartpanel .gline { stroke: var(--line); stroke-width: 1; }
.chartpanel .propline { stroke: var(--ink); stroke-width: 1.5; }
.chartpanel .proplbl { fill: var(--ink); font-weight: 600; }
.chartpanel .projtick { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.chartpanel .projlbl { fill: var(--accent); font-weight: 600; }
.legendrow { display: flex; gap: 14px; align-items: center;
  padding: 6px 8px 8px; font: 12px var(--mono); color: var(--muted); flex-wrap: wrap; }
.legendrow .key { display: inline-block; width: 10px; height: 10px;
  border-radius: 0; margin-right: 5px; vertical-align: -1px; }
.tip {
  position: absolute; pointer-events: none; background: var(--ink);
  color: var(--bg); border-radius: 0; padding: 7px 10px; font: 12px/1.45 var(--mono);
  opacity: 0; transition: opacity 0.08s; z-index: 10; white-space: nowrap;
}
.tip b { font-size: 13.5px; }

footer.rg {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 16px 26px;
  color: var(--muted); font-size: 13px; text-align: center; background: var(--panel);
}
footer.rg b { color: var(--ink); }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ---- movement since the morning ---- */
.mv { font: 600 11px var(--mono); }
.mv.up { color: var(--signal); }
.mv.down { color: var(--accent); }
td .ww { font: 11.5px/1.35 var(--sans); color: var(--muted); font-weight: 400; white-space: nowrap; }
td .was { font: 11px var(--mono); color: var(--muted); font-weight: 400;
  white-space: nowrap; margin-top: 1px; }
.movers { margin: 0 0 14px; }

/* ---- market colours ---- */
[data-stat="PTS"], [data-s="PTS"] { --st: var(--st-pts); }
[data-stat="REB"], [data-s="REB"] { --st: var(--st-reb); }
[data-stat="AST"], [data-s="AST"] { --st: var(--st-ast); }
[data-stat="3PM"], [data-s="3PM"] { --st: var(--st-3pm); }
[data-stat="PRA"], [data-s="PRA"], [data-stat="PR"], [data-s="PR"],
[data-stat="PA"], [data-s="PA"], [data-stat="RA"], [data-s="RA"] { --st: var(--st-combo); }
[data-stat="STL"], [data-s="STL"], [data-stat="BLK"], [data-s="BLK"],
[data-stat="TOV"], [data-s="TOV"] { --st: var(--st-other); }
.block .tablewrap { border-top: 2px solid var(--st, var(--line)); }
.block .section h2::before, .chip[data-s]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 0;
  background: var(--st, var(--faint)); margin-right: 7px; vertical-align: 1px;
}
.chip[data-s].on { background: var(--st, var(--accent)); border-color: var(--st, var(--accent)); color: var(--accent-ink); }
.chip[data-s].on::before { background: var(--accent-ink); opacity: .55; }
.side.mkt { color: var(--st, var(--ink)); }
.card[data-stat] .k { color: var(--st, var(--faint)); }
.card[data-stat] { border-top: 2px solid var(--st, var(--line)); }

/* ---- leaders grid (wide screens): the owner's Best Bets 2x2 ---- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0 0 16px; }
.grid2.grid3 { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.grid2 .section { margin: 0 0 8px; }
.grid2 .section h2 { color: var(--ink); }
table.board.lead { min-width: 0; }
.grid2 table.board.lead th, .grid2 table.board.lead td { padding: 7px 8px; }
@media (min-width: 900px) { main:has(.grid2) { max-width: 1280px; } }
td .sm + .sm { margin-top: 1px; }
@media (min-width: 641px) { td.num .sm { } }

/* ---- player hub: the owner's layout (filters left, summary right) ---- */
.playerhead .kicker { margin: 0 0 4px; }
.playerhead .kicker .tbadge { margin-right: 4px; }
.cards.tonight { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.card .cl { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  font: 500 13px/1.2 var(--mono); }
.card .cl .edge { min-width: 0; padding: 2px 5px; font-size: 11.5px; }
.filters { background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px 12px; margin: 0 0 14px; }
.filters summary { cursor: pointer; font: 500 12px/1.2 var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }
.filters[open] summary { margin-bottom: 10px; }
.filters .fgrid { display: grid; gap: 8px 10px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.filters label { display: flex; flex-direction: column; gap: 3px; margin: 0;
  font: 500 11px/1.2 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.filters select, .filters input {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 6px 8px; font: 14px var(--sans); text-transform: none; letter-spacing: 0;
  width: 100%; min-width: 0; }
.filters .minrange { display: flex; gap: 6px; }
.filters .chip { width: 100%; height: 33px; }
/* the filter bar stays in view on wide screens while you read the chart */
@media (min-width: 901px) {
  .filters { position: sticky; top: 60px; z-index: 4; box-shadow: none;
    padding: 8px 12px 10px; }
  .filters summary { display: inline-block; margin: 0 0 6px; }
  .filters .fgrid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px 8px; }
  .filters .fgrid label:has(.minrange) { grid-column: span 1; }
  /* game trends and team pages: six filters a row, dates on the right */
  .sits { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .daterange { justify-content: space-between; }   /* dates right of the chips, or left on their own row */
  /* with / without: the two teammate pickers side by side, not five columns of nothing */
  #wPick { grid-template-columns: repeat(2, minmax(0, 320px)); }
  .controls > select { max-width: 320px; }
}
.chartctl { align-items: center; }
table.summary-t { min-width: 760px; }
table.summary-t th.st { color: var(--st, var(--faint)); }
table.summary-t td.s { color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
table.summary-t tr.dimrow td.num { color: var(--muted); }
table.summary-t tr.sep td { border-top: 1px solid var(--line-strong); }
table.summary-t .pv { color: var(--accent); font-weight: 600; }
table.summary-t tr.linerow td { background: var(--accent-soft); }
table.summary-t .lineIn { width: 58px; text-align: right; background: var(--panel);
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0;
  padding: 3px 5px; font: 600 13px var(--mono); }
table.summary-t .hi { color: var(--signal); font-weight: 600; }
table.summary-t .lo { color: var(--dn); font-weight: 600; }

/* ---- phone ---- */
@media (max-width: 640px) {
  header.site { gap: 10px; padding: 0 12px; }
  .wm { font-size: 20px; }
  nav.site a { padding: 6px 8px; font-size: 13.5px; }
  main { padding: 16px 12px 48px; }
  h1 { font-size: 22px; }
  p.lead { font-size: 15.5px; }
  th, td { padding: 8px 7px; }
  /* the board fits a phone: secondary columns fold away */
  table.board { min-width: 0; }
  table.board .opt { display: none; }
  .ph { display: block; }
  .cards.tonight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cards.tonight .card { padding: 8px 9px; }
  .cards.tonight .card .v { font-size: 19px; }
  .fresh { font-size: 11.5px; }
  .kicker { font-size: 11px; }
  /* Just the Tip's record: posted/closed prices fold away, cells wrap */
  table#tips { min-width: 0; }
  table#tips .opt { display: none; }
  table#tips td.s { white-space: normal; }
}

/* ---------- Just the Tip ---------- */
.tipcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 16px 18px; margin: 0 0 8px; max-width: 760px;
}
.tipcard .who { font: 700 26px/1.15 var(--sans); margin: 2px 0 4px; }
.tipcard .ctx { color: var(--muted); font: 13px/1.4 var(--mono); }
.tipcard .bet { font: 500 19px/1.3 var(--sans); margin: 10px 0 12px; }
.tipcard .bet b { font-family: var(--mono); font-weight: 600; }
.tipcard .figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tipcard .fig { border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; }
.tipcard .fig .k { color: var(--faint); font: 500 10.5px/1.3 var(--mono);
  text-transform: uppercase; letter-spacing: .07em; }
.tipcard .fig .v { font: 600 24px/1.2 var(--mono); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.tipcard .fig .v.ours { color: var(--accent); }
.tipcard .fig .v.over { color: var(--signal); }
.tipcard .fig .v.under { color: var(--dn); }
.tipcard .foot { color: var(--muted); font: 12px/1.4 var(--mono); margin-top: 10px; }
.tag.trial { display: inline-block; padding: 2px 7px; border-radius: 0; margin-left: 6px;
  background: var(--chip); color: var(--muted); font: 600 10.5px/1.2 var(--mono);
  letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.prose { max-width: 70ch; color: var(--ink); font-size: 15px; line-height: 1.55; }
.prose p { margin: 0 0 12px; }
tr.trial td { opacity: .62; }
@media (max-width: 560px) {
  .tipcard .who { font-size: 22px; }
  .tipcard .fig .v { font-size: 19px; }
}

footer.rg .social { margin-top: 6px; }

/* ---------- home ---------- */
.ours { color: var(--accent); font-family: var(--mono); font-weight: 600; }
h1.home-h1 { font-size: 30px; max-width: 24ch; }
.hgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin: 18px 0 6px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; }
.ph2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px;
  font: 500 11.5px/1.2 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.ph2 a { text-transform: none; letter-spacing: 0; color: var(--muted); }
.ph2 a:hover { color: var(--ink); }
.tipmini .who { font: 700 22px/1.15 var(--sans); }
.tipmini .bet { font: 500 16px/1.35 var(--sans); margin: 6px 0; }
.tipmini .bet b { font-family: var(--mono); font-weight: 600; }
.panel .sm { font: 12.5px/1.5 var(--mono); }
table.mini { min-width: 0; }
table.mini td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.mini tr:last-child td { border-bottom: 0; }
table.mini td.s a { color: var(--ink); font-weight: 600; }
table.mini .sm { font: 12px var(--mono); }
.gstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.gmini { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 9px 11px; color: var(--ink); text-decoration: none; }
.gmini:hover { border-color: var(--line-strong, var(--muted)); }
.gmini .t { font: 500 11.5px var(--mono); color: var(--muted); margin-bottom: 5px; }
.gmini .m { margin-bottom: 5px; }
.gmini .sm { font: 12px/1.45 var(--mono); }
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lcard { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 11px 13px; text-decoration: none; color: var(--ink); }
.lcard b { display: block; font: 600 15px var(--sans); margin-bottom: 3px; }
.lcard span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.lcard:hover b { color: var(--accent); }

/* ---------- game predictions ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.game { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 11px 13px; }
.game header { font: 500 11.5px var(--mono); color: var(--muted); margin-bottom: 8px; }
.game .score .side { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.game .score .nm { flex: 1; font: 600 15px var(--sans); }
.game .score b.ours { font-size: 20px; }
table.gt { min-width: 0; margin-top: 8px; }
table.gt th, table.gt td { padding: 6px 4px; }
table.gt td.s { color: var(--muted); font-size: 13px; }
table.gt td.gap { color: var(--ink); font-weight: 600; }

/* ---------- game trends (was splits) ---------- */
.fsel { display: flex; flex-direction: column; gap: 3px; }
.fsel span { font: 500 10.5px var(--mono); color: var(--faint); letter-spacing: .07em; text-transform: uppercase; }
.fsel select { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 6px 8px; font: 13px var(--sans); }
.toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; margin: 2px 0 10px; }
tr.thin td { opacity: .6; }
table#splits th[data-k] { cursor: pointer; }
@media (max-width: 760px) {
  .hgrid { grid-template-columns: 1fr; }
  h1.home-h1 { font-size: 24px; }
  table#splits, table#sched { min-width: 0; }
  table#splits .opt, table#splits .tn, table#sched .tn { display: none; }
  .fsel { flex: 1 1 45%; }
  .games { grid-template-columns: 1fr; }
}
.hgrid > * { min-width: 0; }
table.mini td.s { white-space: normal; }
@media (max-width: 760px) { table.mini td.s .sm { display: block; } }

/* ---------- static pages (previews, matchups) ---------- */
main.static { max-width: 860px; }
main.static h2 { font: 600 18px/1.3 var(--sans); margin: 26px 0 8px; }
main.static p.lead a, main.static .sub a { color: inherit; }
ul.plain { margin: 0 0 8px; padding-left: 18px; line-height: 1.6; }
ul.plain a { color: var(--ink); }
table.stat { min-width: 0; }
table.stat td.s a { color: var(--ink); font-weight: 600; }
table.stat .sm { font: 11.5px var(--mono); }
table.stat td.s { white-space: normal; }
@media (max-width: 640px) { table.stat .opt { display: none; } }

/* track record */
table.rec { min-width: 0; }
@media (max-width: 640px) { table.rec .opt, table.rec .sm { display: none; } }

/* ---------- email signup ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signup { max-width: 1120px; margin: 24px auto 0; padding: 16px; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  border-top: 1px solid var(--line); }
.signup .su-copy b { font: 600 16px var(--sans); color: var(--ink); display: block; }
.signup .su-copy span { color: var(--muted); font-size: 14px; }
.signup form { display: flex; gap: 8px; }
.signup input[type=email] { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 9px 11px; font: 14px var(--sans); width: 240px; }
.signup input[type=email]:focus-visible, .signup button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signup button { background: var(--accent); color: #111; border: 0; border-radius: 0;
  padding: 9px 16px; font: 600 14px var(--sans); cursor: pointer; }
.signup button:disabled { opacity: .6; cursor: default; }
.signup .su-msg { grid-column: 1 / -1; margin: 0; font-size: 14px; min-height: 0; }
.signup .su-msg:empty { display: none; }
.signup .su-msg.ok { color: var(--ink); }
.signup .su-msg.err { color: var(--dn); }
.signup .su-fine { grid-column: 1 / -1; margin: 0; color: var(--faint); font-size: 12.5px; }
.signup .su-fine a { color: var(--muted); }
@media (max-width: 640px) {
  .signup { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .signup form { width: 100%; }
  .signup input[type=email] { flex: 1; width: auto; min-width: 0; }
}
td.empty { white-space: normal; }

/* ---------- Game trends (owner, 6 Oct 2026) ---------- */
.daterange { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin: 10px 0 12px; }
.daterange .dates { display: flex; gap: 8px 14px; }   /* the two dates move as one unit */
.daterange label { display: flex; flex-direction: column; gap: 3px; font: 500 11px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.daterange input[type="date"] { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 8px; font: 13px var(--mono); }
.sits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; margin: 0 0 12px; }
.fsel { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.fsel span { font: 500 11px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fsel select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 8px; font: 13px var(--mono); width: 100%; }
.game header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.game header .line { color: var(--ink); font-weight: 600; }
.game .sides { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .game .sides { grid-template-columns: 1fr 1fr; } }
.game .side h3 { font: 600 14px/1.2 var(--sans); margin: 0 0 6px; }
.game .side h3 a { color: var(--ink); text-decoration: none; }
ul.trend { list-style: none; margin: 0; padding: 0; font: 12.5px/1.55 var(--mono); }
ul.trend li { padding: 3px 0; border-top: 1px solid var(--line); }
ul.trend li:first-child { border-top: 0; }
ul.trend .lbl { color: var(--muted); display: block; font-size: 11.5px; }
.neg { color: var(--accent); }
tr.thin td { color: var(--muted); }
#glog td.sm { font: 11.5px/1.4 var(--mono); color: var(--muted); max-width: 180px; }
.tmtonight { font: 13.5px/1.5 var(--sans); color: var(--muted); margin: 0 0 12px; }

/* the "i" note on a moved prediction: one line on a phone, the detail on tap or hover */
.info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px;
  border-radius: 50%; border: 1px solid var(--line-strong, var(--muted)); background: transparent; color: var(--muted);
  font: 600 10px/1 var(--mono); cursor: pointer; vertical-align: 1px; padding: 0; }
.info:hover { color: var(--ink); border-color: var(--ink); }
.infotip { position: absolute; z-index: 30; max-width: 260px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong, var(--line));
  border-radius: 0; padding: 7px 9px; font: 12px/1.45 var(--mono); box-shadow: none; }
td .was { display: none; }
/* with / without: a button that opens a checklist */
.msel { position: relative; }
.msel summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.msel summary::-webkit-details-marker { display: none; }
.msel summary .k { font: 500 11px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.msel summary .v { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 8px;
  font: 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msel summary .v::after { content: " ▾"; color: var(--muted); }
.msel .list { position: absolute; z-index: 20; left: 0; right: 0; max-height: 260px; overflow: auto; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--line-strong, var(--line)); border-radius: 0; padding: 6px; box-shadow: none; }
.msel .list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font: 13px var(--mono); color: var(--ink); cursor: pointer; }
.msel .list label:hover { background: var(--chip); border-radius: 0; }
#glog td.num .dim { font-size: 11px; }
ul.plain.cols { columns: 2; column-gap: 24px; }
@media (min-width: 720px) { ul.plain.cols { columns: 3; } }
/* player page: tonight in one line */
.pstrip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; font: 13px var(--mono); }
.pst .k { color: var(--faint); font-size: 11px; letter-spacing: .06em; margin-right: 6px; }
.pst b { font-size: 16px; color: var(--ink); }

/* ================= Drop Coverage brand layer (15 Oct 2026) ================= */
body { background: var(--ground); color: var(--ink); font: 400 15.5px/1.5 var(--sans); }
b, strong { font-weight: 700; }
::selection { background: var(--ink); color: var(--on-ink); }

/* header: maple, a navy rule; the nav in Archivo, sentence case */
header.site { background: var(--ground); border-bottom: 2px solid var(--rule); height: 60px; }
nav.site { mask-image: none; }
nav.site a { color: var(--sub); font: 600 14.5px/1 var(--sans); font-stretch: 88%; border-radius: 0; }
nav.site a:hover, nav.site a.on { color: var(--ink); }
.fresh { background: var(--ground); color: var(--sub); border-bottom: 1px solid var(--hairline); }
.fresh b { color: var(--ink); }
.fresh.stale { border-left: 4px solid var(--court-red); background: var(--surface); }

/* type: one H1 per page in the page-title style, section heads in the
   section style, kickers and labels in DM Mono */
h1, main.static h1 {
  font: 900 40px/0.95 var(--sans); font-stretch: 70%; text-transform: uppercase;
  letter-spacing: -.005em; word-spacing: .08em; margin: 6px 0 12px; max-width: 26ch;
}
h1.home-h1 { font-size: 52px; max-width: 18ch; }
.section h2, main.static h2, .prose h2 {
  font: 800 23px/1.1 var(--sans); font-stretch: 75%; text-transform: uppercase;
  color: var(--ink); letter-spacing: 0; margin: 30px 0 10px;
}
.section { margin: 30px 0 10px; }
.section h2 { margin: 0 0 8px; }
.grid2 .section h2 { color: var(--ink); font-size: 20px; }
.kicker, .ph2, .card .k, th, .filters label, .fsel span, .daterange label, .msel summary .k, .pst .k {
  font-family: var(--mono); color: var(--sub);
}
p.lead { font-size: 18px; line-height: 1.45; color: var(--ink); }
p.lead .n, .ours, .pv, .tipcard .fig .v.ours { color: var(--red-text); font-weight: 600; }
p.sub, .sm, .dim, .mu { color: var(--sub); }
a { text-underline-offset: 2px; }
td a:hover, .lcard:hover b { color: var(--red-text); }

/* panels and tables: cream, a 2px navy frame, hairline rows */
.tablewrap, .card, .panel, .gmini, .lcard, .game, .tipcard, .filters, .signup input[type=email],
.controls select, .controls input, .fsel select, .filters select, .filters input,
.daterange input[type="date"], .msel summary .v, .msel .list, .infotip, .stepper button, .stepper input {
  border: 2px solid var(--rule); border-radius: 0;
}
.tablewrap, .card, .panel, .gmini, .lcard, .game, .tipcard, .filters { background: var(--surface); }
.filters select, .filters input { background: var(--surface); }
th { background: var(--surface); color: var(--sub); font-weight: 500; }
th, td { border-bottom: 1px solid var(--hairline); }
th.sorted { color: var(--ink); text-decoration: underline 2px var(--court-red); text-underline-offset: 3px; }
tbody tr:hover td { background: var(--tint); }
.block .tablewrap { border-top: 2px solid var(--rule); }
.card[data-stat] { border-top: 2px solid var(--rule); }
.card .v { color: var(--ink); }
.tipcard .fig { border: 1px solid var(--hairline); border-radius: 0; }
.gmini:hover, .lcard:hover { border-color: var(--court-red); }

/* chips and buttons: navy when on, square */
.chip { border: 2px solid var(--rule); border-radius: 2px; color: var(--ink); background: transparent; }
.chip:hover { background: var(--tint); color: var(--ink); }
.chip.on, .chip[data-s].on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.block .section h2::before, .chip[data-s]::before { display: none; }
.seg { border: 2px solid var(--rule); border-radius: 0; }
.seg .chip { border: 0; }
.seg .chip + .chip { border-left: 2px solid var(--rule); }
.signup button { background: var(--ink); color: var(--on-ink); border-radius: 0; font-weight: 700; }
.signup button:hover { opacity: .88; }
.tbadge { border-radius: 2px; }

/* edges: a clear edge is mint on a navy chip with its side glyph; below
   the threshold it's plain navy text, no colour */
.edge.hot, .edge.hot.under { background: var(--data); color: var(--mint); font-weight: 600; border-radius: 0; }
.edge.warm { color: var(--ink); font-weight: 600; }
.edge.cold { color: var(--sub); }
.pos, .hit.good, table.summary-t .hi, .mv.up { color: var(--ink); font-weight: 700; }
.neg, table.summary-t .lo, .mv.down { color: var(--red-text); font-weight: 600; }
.mu.soft::before { color: var(--red-text); }
.badge { border-radius: 0; }
.badge.A { background: var(--data); color: var(--mint); }
.badge.B, .badge.src, .badge.over, .badge.under { background: var(--tint-2); color: var(--ink); }
.tipcard .fig .v.over, .tipcard .fig .v.under { color: var(--ink); }
table.summary-t tr.linerow td { background: var(--red-soft); }

/* the prop chart sits on a panel like every table (owner, 15 Oct: no
   navy backdrop): bars over the line navy by day and mint by night,
   red under; the bookmaker line in ink, our prediction dashed red */
.chartpanel { background: var(--surface); border: 2px solid var(--rule); border-radius: 0; }
.chartpanel text { fill: var(--sub); }
.chartpanel .gline { stroke: var(--hairline); }
.chartpanel .propline { stroke: var(--ink); stroke-width: 2.5; }
.chartpanel .proplbl { fill: var(--ink); }
.chartpanel .projtick { stroke: var(--red-text); }
.chartpanel .projlbl { fill: var(--red-text); }
.chartpanel + .legendrow, .legendrow { color: var(--sub); }
.tip { background: var(--ink); color: var(--on-ink); border-radius: 0; }

/* result stamps (graded plays and Just the Tip only): the words carry
   the meaning, the colour backs it up */
.stamp {
  display: inline-block; padding: 3px 7px 2px; font: 700 11.5px/1.2 var(--sans);
  font-stretch: 70%; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.stamp.cov { background: var(--mint); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.stamp.nc { background: var(--court-red); color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); }
.stamp.flat { background: transparent; color: var(--sub); box-shadow: inset 0 0 0 2px var(--sub); }

/* footer: the stacked wordmark, both help lines, the links */
footer.rg { background: var(--ground); border-top: 2px solid var(--rule); color: var(--sub);
  font-size: 13.5px; padding: 28px 16px 34px; }
/* the stacked wordmark: the img keeps the alt text and the size, the
   colour comes from --fmark (navy by day, cream by night) */
footer.rg .fmark { display: inline-block; margin-bottom: 14px;
  background: var(--fmark) no-repeat center / contain; }
footer.rg .fmark img { display: block; width: 104px; height: auto; visibility: hidden; }
footer.rg .rgline { margin: 0 auto 6px; max-width: 70ch; }
footer.rg b { color: var(--ink); }
footer.rg a { color: var(--ink); }
footer.rg .flinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 14px 0 8px; font-weight: 600; }
.signup { border-top: 2px solid var(--rule); }
.signup .su-copy b { font: 800 19px/1.2 var(--sans); font-stretch: 80%; text-transform: uppercase; }

/* legal pages */
table.legal { min-width: 0; }
table.legal td.s { white-space: normal; font-family: var(--sans); vertical-align: top; }
main.legal .prose { max-width: 78ch; }
main.static h1 { max-width: 34ch; }
main.legal .tablewrap { margin: 6px 0 14px; }

@media (max-width: 640px) {
  header.site { height: 56px; }
  h1, main.static h1 { font-size: 30px; }
  h1.home-h1 { font-size: 36px; }
  .section h2, main.static h2, .prose h2 { font-size: 20px; }
  p.lead { font-size: 16.5px; }
}
/* phone: Archivo is wider than the old condensed face, so the board's
   player cell sets condensed and the cells tighten to keep five columns
   on a 390px screen */
@media (max-width: 640px) {
  table.board th, table.board td { padding: 7px 5px; }
  table.board td.pl, table.board td.s { font-stretch: 82%; font-size: 14px; }
  table.board td.pl .sm { font-size: 10.5px; letter-spacing: -.02em; }
  table.board td { font-size: 13px; }
  .edge { min-width: 0; }
}
@media (max-width: 640px) {
  /* game pages: the last-five column keeps its shape and the table
     scrolls sideways instead of crushing it */
  table.stat td.s.sm { min-width: 10.5em; }
  table.stat td.s > a { white-space: nowrap; }
}

/* day / night switch (owner, 15 Oct 2026), added to the header by app.js */
.modebtn { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: transparent; color: var(--ink);
  border: 2px solid var(--rule); border-radius: 0; cursor: pointer; }
.modebtn:hover { background: var(--tint); }
.modebtn:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.modebtn svg { display: block; width: 18px; height: 18px; }
@media (max-width: 640px) { .modebtn { width: 32px; height: 32px; } }

/* region switch in the footer (Australia / the US) */
footer.rg .regionsw { margin: 10px 0 6px; font-size: 13px; }
footer.rg .regionsw button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
footer.rg .regionsw button[aria-pressed="true"] { font-weight: 700; text-decoration: none; cursor: default; }