/* Design tokens. Light values on :root; dark redefined under both the OS media
   query and an explicit [data-theme] stamp so the toggle wins either way.
   Categorical slots are the validated reference order (blue, orange, aqua…);
   diverging is blue <-> red around a gray midpoint. */
:root {
  color-scheme: light;
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --surface-2:   #f3f2ef;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --muted:       #898781;
  --grid:        #e1e0d9;
  --baseline:    #c3c2b7;
  --border:      rgba(11,11,11,.10);
  --series-1:    #2a78d6;
  --series-2:    #eb6834;
  --series-3:    #1baf7a;
  --series-7:    #4a3aa7;
  --home:        #2a78d6;   /* categorical slot 1 */
  --away:        #eb6834;   /* categorical slot 2 */
  --pos:         #2a78d6;   /* diverging: above baseline / model above market */
  --neg:         #e34948;   /* diverging: below */
  --pos-rgb:     42,120,214;
  --neg-rgb:     227,73,72;
  --neutral:     #f0efec;   /* diverging midpoint */
  --good:        #0ca30c;
  --warn:        #fab219;
  --crit:        #d03b3b;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --ink: #fff; --ink-2: #c3c2b7;
    --muted: #898781; --grid: #2c2c2a; --baseline: #383835;
    --border: rgba(255,255,255,.10);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-7: #9085e9;
    --home: #3987e5; --away: #d95926; --pos: #3987e5; --neg: #e66767;
    --pos-rgb: 57,135,229; --neg-rgb: 230,103,103;
    --neutral: #383835;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #222220; --ink: #fff; --ink-2: #c3c2b7;
  --muted: #898781; --grid: #2c2c2a; --baseline: #383835;
  --border: rgba(255,255,255,.10);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-7: #9085e9;
  --home: #3987e5; --away: #d95926; --pos: #3987e5; --neg: #e66767;
  --pos-rgb: 57,135,229; --neg-rgb: 230,103,103;
  --neutral: #383835;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 16px; }
code { font-size: 12px; background: var(--neutral); padding: 1px 4px; border-radius: 4px; }

/* --- top bar ---------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--page); border-bottom: 1px solid var(--border); }
header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
h1 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
h1 .mark { color: var(--series-1); }
h3 { font-size: 13px; margin: 14px 0 6px; }
.sub { color: var(--ink-2); font-size: 13px; }
.spacer { flex: 1 1 auto; }
#search {
  font: inherit; font-size: 13px; padding: 6px 10px; width: 220px; max-width: 45vw;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink);
}
button.ghost {
  background: none; border: 1px solid var(--border); color: var(--ink-2);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12px;
}
button.ghost:hover { background: var(--neutral); }

.ticker { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; }
.tk {
  display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; background: var(--surface);
}
.tk b { font-variant-numeric: tabular-nums; }
.tk .at { color: var(--muted); }
.tk em { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 3px; }
.tk em.lv { color: var(--good); font-weight: 650; }
.tk.live { border-color: var(--good); }
.tk:hover { text-decoration: none; background: var(--neutral); }

nav { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 6px; }
nav button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-2); padding: 7px 12px; cursor: pointer; font: inherit;
  font-size: 13px; border-radius: 6px 6px 0 0;
}
nav button:hover { color: var(--ink); background: var(--neutral); }
nav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--home); font-weight: 600; }

.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.subnav a {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink-2); font-size: 12.5px; text-decoration: none; background: var(--surface);
}
.subnav a:hover { color: var(--ink); background: var(--neutral); text-decoration: none; }
.subnav a[aria-selected="true"] { color: var(--surface); background: var(--ink); border-color: var(--ink); font-weight: 600; }
.ev-pos { color: var(--good); font-weight: 650; }
.ev-neg { color: var(--neg); }

#panel { padding-top: 16px; transition: opacity .15s; }
#panel.refreshing { opacity: .72; }

/* --- cards, tiles, grids ---------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; min-width: 0;
}
.card-h { display: flex; align-items: baseline; gap: 10px; }
.card-h .more { margin-left: auto; font-size: 12px; color: var(--series-1); }
.card h2 { font-size: 14px; margin: 0 0 2px; }
.note { color: var(--ink-2); font-size: 12.5px; margin: 2px 0 12px; max-width: 90ch; }
.grid2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.grid2 > .card { margin-bottom: 0; }
.grid2 + .grid2, .grid2 + .card, .card + .grid2 { margin-top: 12px; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 12px; }
.tiles.small { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
.tile > span { display: block; color: var(--ink-2); font-size: 12px; }
.tile b { display: block; font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tiles.small .tile b { font-size: 17px; }
.tile small { color: var(--muted); font-size: 11.5px; }
.pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 2px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* --- slate tiles ------------------------------------------------------------ */
.slate { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.slate.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gt { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.gt:hover { text-decoration: none; border-color: var(--baseline); background: var(--surface-2); }
.gt.live { border-color: var(--good); }
.gt.final { opacity: .82; }
.gt-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.clk { font-size: 11.5px; color: var(--good); font-weight: 650; font-variant-numeric: tabular-nums; }
.gt-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; padding: 1px 0; }
.gt-row b { font-size: 17px; font-variant-numeric: tabular-nums; }
.gt-sit { font-size: 11.5px; color: var(--ink-2); }
.gt-wp { display: flex; gap: 2px; height: 6px; margin: 8px 0 6px; }
.gt-wp i { display: block; height: 100%; border-radius: 3px; }
.gt-lines { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--muted); }
.gt-lines b { display: block; color: var(--ink); font-weight: 600; font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* --- tables ----------------------------------------------------------------- */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: right; padding: 6px 9px; white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child, th.txt, td.txt { text-align: left; }
thead th {
  color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--grid); background: var(--surface);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
tbody tr + tr td, tbody tr + tr th { border-top: 1px solid var(--grid); }
tbody tr:hover td { background: var(--neutral); }
td.num { font-variant-numeric: tabular-nums; }
td a { color: var(--ink); }
.dim { color: var(--muted); }
.empty { color: var(--ink-2); padding: 14px 2px; }
.err { color: var(--crit); font-size: 13px; white-space: pre-wrap; }

.tm { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.tm img { object-fit: contain; }
.pl { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.pl .hs { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--neutral); flex: none; }
.pl b { font-weight: 600; }
.pl small { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; }

.chip { display: inline-block; font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); margin-left: 4px; vertical-align: 1px; }
.chip.pos { color: var(--pos); border-color: currentColor; }
.chip.pos.soft { opacity: .7; }
.chip.warn { color: #9a6700; border-color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }
.chip.crit { color: #fff; background: var(--crit); border-color: transparent; }
.chip.blue { color: var(--series-1); border-color: currentColor; margin: 0; }
.chip.violet { color: var(--series-7); border-color: currentColor; margin: 0; }
:root[data-theme="dark"] .chip.warn { color: var(--warn); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.warn { color: var(--warn); } }

.badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 600; border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.badge.live { color: #fff; background: var(--good); border-color: transparent; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pills.small .pill { font-size: 11.5px; padding: 3px 9px; }
.pill {
  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
}
.pill:hover { background: var(--neutral); color: var(--ink); }
.pill.on { background: var(--ink); color: var(--page); border-color: var(--ink); }
.toolbar { margin-bottom: 4px; }
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.filters select { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }

/* --- small marks ------------------------------------------------------------ */
.dv { position: relative; display: inline-block; height: 14px; background: var(--neutral); border-radius: 3px; vertical-align: middle; }
.dv i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.dv b { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--baseline); }
.meter { position: relative; display: inline-block; height: 8px; background: var(--neutral); border-radius: 4px; vertical-align: middle; }
.meter i { position: absolute; left: 0; top: 0; height: 100%; background: var(--series-1); border-radius: 4px; }
.meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.prog { position: relative; display: inline-block; width: 120px; height: 10px; background: var(--neutral); border-radius: 5px; vertical-align: middle; }
.prog i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; }
.prog u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; }
.prog u.ln { background: var(--ink); }
.prog u.pc { background: var(--series-2); width: 3px; }

.mcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; }
.mcard.pos { border-left: 3px solid var(--pos); }
.mcard.neg { border-left: 3px solid var(--neg); }
.mcard > div { flex: 1; min-width: 0; }
.mcard small { display: block; color: var(--muted); font-size: 11.5px; white-space: normal; }
.mcard strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.mcard .pl { flex: 1; }
.pos-t { color: var(--pos); } .neg-t { color: var(--neg); }

/* --- heatmap matrix --------------------------------------------------------- */
table.matrix th, table.matrix td { padding: 4px 3px; font-size: 11.5px; text-align: center; }
table.matrix thead th { text-transform: none; letter-spacing: 0; font-size: 10.5px; }
table.matrix th.txt { text-align: left; padding-right: 10px; }
table.matrix th small { display: block; color: var(--muted); font-weight: 400; font-size: 10.5px; }
td.hm { min-width: 38px; border: 2px solid var(--surface); border-radius: 5px; font-variant-numeric: tabular-nums; cursor: default; }
td.hm.ring { box-shadow: inset 0 0 0 2px var(--ink); }
td.hm.empty { color: var(--muted); }
td.hm:hover, td.hm:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
table.matrix tbody tr:hover td { background-color: inherit; }

/* --- live game cards -------------------------------------------------------- */
.games { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); margin-bottom: 12px; }
.game { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.game .top { display: flex; align-items: center; gap: 10px; }
.game .match { font-size: 15px; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.score { font-size: 26px; font-weight: 680; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.sit { color: var(--ink-2); font-size: 12.5px; min-height: 1.4em; }
.wpbar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 12px 0 6px; gap: 2px; }
.wpbar span { display: flex; align-items: center; color: #fff; font-size: 12px; font-weight: 650; padding: 0 8px; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wpbar .h { background: var(--home); justify-content: flex-start; border-radius: 6px 0 0 6px; }
.wpbar .a { background: var(--away); justify-content: flex-end; border-radius: 0 6px 6px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); margin: 4px 0 8px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.legend i.ln { width: 16px; height: 2px; border-radius: 1px; background: var(--c); vertical-align: 3px; }
.legend i.ln.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.legend i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.kv { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--grid); padding-top: 8px; margin-top: 10px; }
.kv b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 640; }

/* --- game header / player header -------------------------------------------- */
.gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 12px; }
.gh-t { display: flex; align-items: center; gap: 16px; font-size: 20px; }
.gh-t .tm { font-size: 20px; gap: 10px; }
.gh-s { font-size: 34px; font-variant-numeric: tabular-nums; }
.gh-m { text-align: center; }
.gh-c { font-size: 13px; font-weight: 650; color: var(--good); margin-top: 4px; }
.ph { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
.ph-img { width: 96px; height: 70px; object-fit: cover; object-position: top; border-radius: 8px; background: var(--neutral); }
.ph-n { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ph-s { color: var(--ink-2); font-size: 13px; }
.sched { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48px; padding: 5px 0; border-radius: 6px; font-variant-numeric: tabular-nums; }
.sw small { font-size: 10.5px; color: var(--ink); }

/* --- charts ----------------------------------------------------------------- */
.chart { width: 100%; min-height: 200px; }
.chart svg { display: block; max-width: 100%; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--baseline); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .line.dash { stroke-dasharray: 5 4; }
.chart .dotm { stroke: var(--surface); stroke-width: 2; }
.chart .whisk { stroke-width: 1.5; opacity: .45; }
.chart .ref, .chart .refh { stroke: var(--ink-2); stroke-width: 1; }
.chart .refh.dash { stroke-dasharray: 5 4; stroke: var(--series-2); stroke-width: 1.5; }
.chart .reflab { fill: var(--ink-2); font-size: 11px; }
.chart .cross { stroke: var(--ink-2); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart .bhit { fill: transparent; }
.chart .bar:hover path, .chart .bar:focus path { opacity: .75; }
.chart .bar:focus { outline: none; }

.hbars { display: grid; gap: 4px; }
.hb { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 8px; font-size: 12.5px; }
.hb .ht { height: 12px; background: var(--neutral); border-radius: 3px; overflow: hidden; }
.hb .ht i { display: block; height: 100%; border-radius: 3px; }
.hb b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
pre.rep { font-size: 11.5px; overflow-x: auto; background: var(--surface-2); padding: 10px; border-radius: 8px; margin: 0; }

/* --- tooltip ---------------------------------------------------------------- */
#tip {
  position: fixed; z-index: 50; display: none; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 8px 10px; font-size: 12px; min-width: 140px;
}
#tip .tt { color: var(--ink-2); font-size: 11.5px; margin-bottom: 4px; }
#tip .tr { display: flex; align-items: center; gap: 6px; }
#tip .tr i { width: 12px; height: 2px; border-radius: 1px; flex: none; }
#tip .tr b { color: var(--ink); font-variant-numeric: tabular-nums; }
#tip .tr span { color: var(--ink-2); }

footer { color: var(--muted); font-size: 12px; margin: 18px 0 30px; }
@media (max-width: 640px) {
  .gh { padding: 10px; } .gh-s { font-size: 24px; } .gh-t .tm { font-size: 15px; }
  .tile b { font-size: 18px; } .score { font-size: 22px; }
  #search { width: 140px; }
  .hb { grid-template-columns: 80px 1fr 56px; }
}

/* --- touchdowns ------------------------------------------------------------- */
#tdpaste { width: 100%; font: 12.5px/1.5 ui-monospace, Menlo, monospace; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); resize: vertical; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-left: 6px; }
.chip .x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }
.tdhead { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--ink-2); margin: 2px 0 10px; }
.tdhead b { color: var(--ink); font-variant-numeric: tabular-nums; }
.more-btn { margin-top: 8px; font: inherit; font-size: 12px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.card-h h2 small { font-weight: 400; margin-left: 6px; }
.card-h h2 .tm img { vertical-align: -4px; }
.bookbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.pill[disabled] { opacity: .5; cursor: default; }
.warnbar { border-left: 3px solid var(--warn); font-size: 13px; color: var(--ink-2); }
.warnbar b { color: var(--ink); }

/* wide tables scroll sideways inside their card instead of clipping */
.card { overflow-x: auto; }

/* US consensus cell: % + book count, popup with each book's logo and fair % */
.uscell { position: relative; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; cursor: help; }
.uscell small { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.uscell .uspop { display: none !important; }        /* source only; shown by #uspop-float */
td.wrap { white-space: normal; min-width: 200px; max-width: 320px; font-size: 12px; line-height: 1.35; }
.uspop { display: none; position: fixed; z-index: 50; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); text-align: left; }
.uspop em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.uspop div { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; padding: 3px 0; }
.uspop img, .uspop i { width: 64px; height: 20px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px 4px; box-sizing: border-box; display: block; }
.uspop span { font-size: 12px; } .uspop b { font-size: 12px; }

/* US popup: per-book position vs consensus */
.uspop div { grid-template-columns: 64px 1fr 70px auto !important; }
.uspop img.dk { background: #1d1d20; }
.uspop u { position: relative; height: 10px; text-decoration: none; display: block; }
.uspop u::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--border); border-radius: 2px; }
.uspop s { position: absolute; top: 0; width: 2px; height: 10px; background: var(--muted); }
.uspop q { position: absolute; top: 1px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--pos); }
.uspop q::before, .uspop q::after { content: none; }
.uspop div.off { background: rgba(var(--neg-rgb), .09); border-radius: 6px; }
.uspop div.off q { background: var(--neg); }
.uspop em.foot { margin: 6px 0 0; text-transform: none; letter-spacing: 0; }
/* hedge calculator */
.hedgeform h4 { margin: 14px 0 4px; font-size: 13px; }
.hedgeform input, .hedgeform select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.hgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

.hedgeform { display: block; }
.hedgeform [data-out] input[name=oname] { max-width: 320px; }
.hedgeform .pill { margin-top: 4px; }

/* bookmaker logo chips */
.bk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bk + .bk { margin-left: 8px; }
.bk-logo { flex: none; border-radius: 4px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.bk-ini { display: inline-grid; place-items: center; font-style: normal; font-weight: 700; color: var(--ink-2); background: var(--surface); text-transform: uppercase; }
.bkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bk-stat { display: inline-flex; align-items: center; gap: 4px; }
.bk-stat small { color: var(--muted); }

/* --- betting boards (board_views.js) ------------------------------------------ */
/* green = model +EV at the best AU price; deeper green = Pinnacle agrees too */
.page-h { margin: 4px 0 14px; }
.page-h h2 { font-size: 20px; margin: 0 0 2px; letter-spacing: -.01em; }
.page-h p { margin: 0; color: var(--ink-2); font-size: 13px; max-width: 75ch; }
.gb-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.gb-card { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); min-width: 0; }
.gb-card:hover { text-decoration: none; border-color: var(--baseline); background: var(--surface-2); }
.gb-card.final { opacity: .8; }
.gb-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-2); }
.gb-live { color: var(--good); font-weight: 650; }
.gb-n { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 999px; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.gb-side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 16px; }
.gb-side small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-side b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gb-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--grid); }
.gb-lines div { min-width: 0; }
.gb-lines dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gb-lines dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 14px; }
.gb-lines small { font-size: 11px; color: var(--ink-2); }
.gb-top-play { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev { font-variant-numeric: tabular-nums; font-weight: 650; }
.ev.pos { color: var(--good); }
.ev.soft { color: var(--ink-2); }
.ev.neg { color: var(--muted); font-weight: 500; }
:root { --hot: color-mix(in srgb, var(--good) 13%, transparent); --hot-2: color-mix(in srgb, var(--good) 26%, transparent); }
table.box td.bx { text-align: right; line-height: 1.15; cursor: default; }
table.box td.bx b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
table.box td.bx small { display: block; font-size: 11px; color: var(--muted); }
td.bx.hot, tr.hot td { background: var(--hot); }
td.bx.hot.sharp, tr.hot.sharp td { background: var(--hot-2); }
tbody tr.hot:hover td { background: var(--hot-2); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.legend .sw { margin-right: 5px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; background: var(--hot); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); }
.sw.sharp { background: var(--hot-2); }
.lad-row { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--grid); }
.lad-rungs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; min-width: 0; }
.rung { flex: none; display: grid; justify-items: center; min-width: 64px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-variant-numeric: tabular-nums; cursor: default; }
.rung i { font-style: normal; font-size: 11px; color: var(--ink-2); }
.rung b { font-size: 14px; }
.rung small { font-size: 10.5px; color: var(--muted); }
.rung.hot { background: var(--hot); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.rung.hot.sharp { background: var(--hot-2); }
.rung.hot small { color: var(--good); font-weight: 650; }
.rung.tail { opacity: .45; }
@media (max-width: 640px) { .lad-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.gb-pred { color: var(--ink-2); font-weight: 600; }
.gb-predlab { font-size: 11px; color: var(--muted); text-align: right; margin-top: -4px; }

.inj-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.inj-side { min-width: 0; }
.inj-side h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0; }
.inj-side h3 small { font-weight: 500; font-size: 12px; }

/* shared static copy: no jobs, no personal book */
#refresh-books, #refresh-futures, [data-scrape] { display: none !important; }
.static-note { font-size: 12px; opacity: .7; }