/* The Analyst — box score / stadium information design (spec S10).
 *
 * PALETTE, and why it is not the AI default. Cream-and-terracotta and near-black-with-
 * an-acid-accent are both named in the brief as things to avoid. The ground here is a
 * cool grey-green — newsprint under fluorescent light, not warm paper — and the single
 * accent is a desaturated stadium navy used ONLY structurally: rules, focus, links.
 *
 * NO COLOUR EVER CARRIES AN OUTCOME. There is no win-green and no loss-red anywhere in
 * this file. S10: "Losses get displayed exactly as prominently as wins. Any visual
 * asymmetry there undermines the one thing the product is selling." A W and an L are
 * the same size, the same weight and the same ink; only the letter differs. That is
 * what makes the ledger read as a record rather than a marketing claim.
 *
 * Numerals are IBM Plex Mono throughout so columns align down the page — the detail
 * that makes the whole thing feel audited.
 */

:root {
  --paper:  #F1F3EF;
  --raise:  #E7EAE3;
  --ink:    #12171C;
  --dim:    #5F6863;
  --rule:   #D2D7CE;
  --navy:   #1E3A5C;

  /* chrome — the navy header. Deliberately separate from the content palette: these
     tokens do NOT flip in dark mode, because the header is dark in both. */
  --chrome:      #16243B;
  --chrome-2:    #1B2C47;
  --chrome-line: #22374F;
  --chrome-on:   #0C1626;   /* active nav block */
  --gfoot:       #6E8CA6;   /* per-game footer bar */
  --rowhover:    #E2E6DE;   /* whole-game hover, both lines together */
  --brand:       #22C55E;   /* active section — never a result colour */
  --gold:        #C8901A;   /* the paid item — never a result colour */
  --gold-edge:   #9C6E0E;   /* CTA border / shadow */
  --gold-hi:     #B07F14;   /* CTA hover — DARKER, not lighter */
  --gold-ink:    #241A02;   /* text ON gold. DARK: light ink on a gold this
                               deep measures 2.62:1, under the 4.5:1 floor. */
  --gold-deep:   #7A5A0C;   /* gold text on the page ground */
  --gold-wash:   #F6EDD8;   /* faint gold fill */

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11151A;
    --raise: #171C22;
    --ink:   #E9ECE6;
    --dim:   #868E95;
    --rule:  #242A31;
    --navy:  #87ADD6;
    --gfoot: #2C4152;
    --rowhover: #1C222A;
    --gold: #D9A32B; --gold-edge: #8C6410; --gold-hi: #C08F1E;
    --gold-ink: #1F1704;
    --gold-deep: #E0B455; --gold-wash: #2A2109;
  }
}
:root[data-theme="dark"] {
  --paper: #11151A; --raise: #171C22; --ink: #E9ECE6;
  --dim: #868E95; --rule: #242A31; --navy: #87ADD6;
  --gfoot: #2C4152; --rowhover: #1C222A;
  --gold: #D9A32B; --gold-edge: #8C6410; --gold-hi: #C08F1E;
  --gold-ink: #1F1704;
  --gold-deep: #E0B455; --gold-wash: #2A2109;
}

/* TYPE SCALE. rem resolves against the ROOT element, so the whole design scales from
 * this one value -- every size, gap and radius in this file is expressed in rem for
 * exactly that reason. Browser default is 16px; 18px is a uniform +12.5%.
 * Changing it here is the ONLY place a global size change should ever be made. */
html { font-size: 18px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);   /* 1rem, so it follows the root */
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

a { color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- chrome: dark navy sportsbook header ----------
 *
 * Matched to the sports-odds convention KZA asked for: navy bar, white nav, the ACTIVE
 * section sitting in a darker full-height box with green text, gold for the paid item,
 * and a second contextual row on the SAME navy rather than a lighter shade.
 *
 * Density is deliberate. These headers carry a lot of navigation and read as a control
 * surface, not a marketing band; loose vertical padding is what makes a sports site
 * look like a brochure.
 *
 * THE RULE THAT SURVIVES FROM S10: green and gold are CHROME. Neither ever touches a
 * pick result -- a green W beside a red L turns the ledger into marketing, which S10
 * calls fatal to the one thing this product sells.
 */
.chrome { background: var(--chrome); }
.chrome-sub { background: var(--chrome); border-top: 1px solid var(--chrome-line); }
.chrome-in { display: flex; align-items: stretch; gap: .9rem; min-height: 2.65rem; }

.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex: none; }
.brand-mark {
  display: grid; place-items: center; width: 1.95rem; height: 1.95rem; border-radius: 50%;
  background: var(--brand); color: var(--chrome);
  font: 700 .68rem/1 var(--cond); letter-spacing: .02em;
}
/* Three stacked lines, tight leading — the wordmark reads as a block, like a masthead. */
.brand-word { display: flex; flex-direction: column; line-height: .88; }
.brand-1 { font: 700 .84rem/.9 var(--cond); color: #fff; letter-spacing: .03em; }
.brand-2 { font: 700 .5rem/1 var(--cond); color: var(--brand); letter-spacing: .3em; }
.brand-3 { font: 700 .84rem/.9 var(--cond); color: #fff; letter-spacing: .03em; }

.nav-main { display: flex; align-items: stretch; gap: 0; overflow-x: auto; flex: 1 1 auto;
            scrollbar-width: none; }
.nav-main::-webkit-scrollbar { display: none; }
.nav-main a {
  display: flex; align-items: center; white-space: nowrap; text-decoration: none;
  padding: 0 .78rem; color: #E8EDF5;
  font: 700 .78rem/1 var(--sans); letter-spacing: .01em;
}
.nav-main a:hover { background: rgba(255,255,255,.07); }
/* Active section: a darker full-height block with green text — not an underline. */
.nav-main a.on { background: var(--chrome-on); color: var(--brand); }
.nav-main a.paid { color: var(--gold); }
.nav-main a.paid.on { background: var(--chrome-on); color: var(--gold); }

.chrome-acct { display: flex; align-items: center; gap: .55rem; flex: none; padding-left: .3rem; }
.acct-link { color: #C8D4E4; text-decoration: none; font: 700 .6rem/1 var(--sans); letter-spacing: .09em; }
.acct-link:hover { color: #fff; }
/* Person glyph, drawn in CSS so there is no icon font or SVG request. */
.acct-person {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; position: relative;
  background: #8FA2B8; flex: none;
}
.acct-person::before {
  content: ""; position: absolute; left: 50%; top: .17rem; transform: translateX(-50%);
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--chrome);
}
.acct-person::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: .72rem; height: .38rem; border-radius: .36rem .36rem 0 0; background: var(--chrome);
}
.acct-chip {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--brand); color: var(--chrome); text-decoration: none;
  font: 700 .8rem/1 var(--mono); flex: none;
}

.nav-sub { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; }
.nav-sub::-webkit-scrollbar { display: none; }
.nav-sub a {
  display: flex; align-items: center; white-space: nowrap; text-decoration: none;
  padding: .5rem .7rem; color: #C3CFDE;
  font: 600 .78rem/1 var(--sans);
  border-bottom: 3px solid transparent;
}
.nav-sub a:first-child { padding-left: 0; }
.nav-sub a:hover { color: #fff; }
.nav-sub a.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- hero: the scoreline is the signature element ---------- */
.hero { border-bottom: 1px solid var(--rule); padding: 2.4rem 0 1.9rem; }
.hero h1 {
  margin: 0 0 .5rem;
  font: 700 clamp(1.5rem, 4.5vw, 2.1rem)/1.05 var(--cond);
  letter-spacing: -.005em; text-wrap: balance;
}
.lede { margin: 0 0 1.6rem; max-width: 46ch; color: var(--dim); font-size: .95rem; }

.scoreline { display: flex; align-items: flex-end; gap: clamp(1.2rem, 5vw, 3rem); flex-wrap: wrap; }
.sl-main { display: flex; align-items: baseline; }
.sl-n {
  font: 600 clamp(2.8rem, 12vw, 4.6rem)/.9 var(--mono);
  letter-spacing: -.03em;
}
.sl-d { font: 400 clamp(2rem, 8vw, 3.2rem)/.9 var(--mono); color: var(--dim); padding: 0 .12em; }

.sl-side { display: flex; gap: clamp(1rem, 4vw, 2.2rem); margin: 0; padding-bottom: .5rem; }
.sl-side dt {
  font: 500 .6rem/1 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .3rem;
}
.sl-side dd { margin: 0; font: 500 1.15rem/1 var(--mono); }

.sl-empty p { margin: .7rem 0 0; color: var(--dim); font-size: .9rem; max-width: 34ch; }

.splits {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.7rem;
}
.split {
  display: flex; align-items: baseline; gap: .5rem;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .42rem .7rem; background: var(--raise);
}
.split-k { font: 500 .6rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.split-v { font: 500 .88rem/1 var(--mono); }
.split-p { font: 400 .72rem/1 var(--mono); color: var(--dim); }

/* ---------- the ledger ---------- */
.ledger-scroll { overflow-x: auto; margin: 1.9rem 0 3rem; }
.ledger { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ledger thead th {
  text-align: left; padding: 0 .7rem .55rem;
  font: 500 .58rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.ledger td { padding: .62rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.row:hover { background: var(--raise); }

/* The result mark. Identical geometry for every status — the letter is the only
   difference. No colour, no fill, no weight change. This is the S10 requirement. */
.mk {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  font: 600 .8rem/1 var(--mono);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
}
.mk-pending { color: var(--dim); }

.c-res { width: 1px; white-space: nowrap; }
.c-date, .c-kick { font-family: var(--mono); font-size: .78rem; color: var(--dim); white-space: nowrap; }
.c-line { font-family: var(--mono); text-align: right; white-space: nowrap; }
.c-match { min-width: 11rem; }
.match { display: block; }
.sport, .mkt {
  display: block; font: 500 .58rem/1.4 var(--mono);
  letter-spacing: .11em; text-transform: uppercase; color: var(--dim);
}
.sel { display: block; font-weight: 500; }

.row-detail td { border-bottom: 1px solid var(--rule); padding-top: 0; }
.note, .reason, .withheld { margin: 0 0 .35rem; font-size: .82rem; max-width: 68ch; }
.note { color: var(--dim); font-family: var(--mono); font-size: .75rem; }
.reason { color: var(--ink); }
.withheld { color: var(--dim); }

.empty { color: var(--dim); padding: 3rem 0; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 2rem; padding: 1.6rem 0 2.6rem; }
.foot p { margin: 0 0 .55rem; font-size: .74rem; color: var(--dim); max-width: 68ch; }
.foot-legal { font-family: var(--mono); line-height: 1.6; }

@media (max-width: 630px) {
  .ledger { font-size: .82rem; }
  .ledger td, .ledger thead th { padding-left: .45rem; padding-right: .45rem; }
  .c-kick { display: none; }        /* posted time is the one that proves the record */
  .masthead nav { gap: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   ODDS BOARD — the standard sports-odds screen layout: brand bar, sport tabs,
   contextual sub-bar, then games as two-line rows (away over home) with columns
   aligned down the page so a whole slate scans vertically.
   ========================================================================== */

.btn, .btn-quiet {
  font: 500 .68rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; padding: .5rem .8rem; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink); background: transparent;
  cursor: pointer; display: inline-block;
}
.btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover { opacity: .88; }
.btn-quiet:hover { border-color: var(--ink); }


/* contextual sub-bar: date + capture note */
.subbar { border-top: 1px solid var(--rule); background: var(--raise); }
.subbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem;
}
.dates { display: flex; gap: .3rem; }
.dates a {
  font: 500 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--dim);
  padding: .38rem .6rem; border: 1px solid transparent; border-radius: 2px;
}
.dates a.on { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.subbar-note { font: 400 .66rem/1 var(--mono); color: var(--dim); }

.page-h { font: 700 clamp(1.35rem,4vw,1.8rem)/1.1 var(--cond); margin: 1.7rem 0 .4rem; }
.page-lede { margin: 0 0 1.4rem; color: var(--dim); font-size: .92rem; max-width: 48ch; }

/* the board */
.board-scroll { overflow-x: auto; margin-bottom: 2.4rem; }
.board { width: 100%; border-collapse: collapse; font-size: .875rem; }
/* Column headers ride the same navy band as the day label, so each day reads as one
   block - the scoreboard convention. */
.board thead th {
  text-align: right; padding: .45rem .6rem;
  font: 600 .58rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: #9DB3CC; background: var(--chrome-2); white-space: nowrap;
}
.board thead th.b-time, .board thead th.b-team { text-align: left; }
.board tbody.game { border-bottom: 1px solid var(--rule); }
.board tbody.game:hover { background: var(--raise); }

.team-row td { padding: .42rem .6rem; vertical-align: middle; }
.team-row.is-away td { padding-top: .7rem; }
.team-row.is-home td { padding-bottom: .7rem; }

.b-time { white-space: nowrap; font-family: var(--mono); font-size: .78rem; }
.b-date { display: block; font-size: .62rem; color: var(--dim); letter-spacing: .06em; }
.b-team { min-width: 10rem; }
.tm { font-weight: 500; }
.at {
  margin-left: .45rem; font: 500 .54rem/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.b-num {
  text-align: right; white-space: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.px { display: block; font-size: .64rem; color: var(--dim); }
.b-move { text-align: right; white-space: nowrap; }
.mv { display: block; font: 500 .68rem/1.5 var(--mono); }
.mv-link { font: 500 .6rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.book-row td { padding: 0 .6rem .5rem; }
.bk { font: 400 .6rem/1 var(--mono); letter-spacing: .07em; color: var(--dim); }

/* forms */
.form-page { max-width: 30rem; padding-top: 2.2rem; padding-bottom: 3rem; }
.form-page h1 { font: 700 1.5rem/1.1 var(--cond); margin: 0 0 .5rem; }
.form-lede { color: var(--dim); font-size: .9rem; margin: 0 0 1.6rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack label { display: flex; flex-direction: column; gap: .35rem; }
.lbl { font: 500 .6rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.stack input {
  font: 400 1rem/1.3 var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; padding: .6rem .65rem;
  min-height: 44px;                     /* S9: 44px touch targets */
}
.stack input:focus-visible { border-color: var(--navy); }
.hint { font-size: .74rem; color: var(--dim); }
.stack button {
  font: 500 .72rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: 2px; padding: .85rem 1rem; min-height: 44px; cursor: pointer;
}
.err {
  border-left: 3px solid var(--ink); background: var(--raise);
  padding: .7rem .85rem; font-size: .86rem; margin: 0 0 1.2rem;
}
.alt { margin-top: 1.4rem; font-size: .86rem; color: var(--dim); }
.inline { display: inline; }
.sub { font: 700 1rem/1.2 var(--cond); margin: 2.2rem 0 .8rem; }
.muted { color: var(--dim); }
.small { font-size: .76rem; }

.balance {
  border: 1px solid var(--rule); border-radius: 2px; background: var(--raise);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.bal-k { display: block; font: 500 .6rem/1 var(--mono); letter-spacing: .13em;
         text-transform: uppercase; color: var(--dim); margin-bottom: .4rem; }
.bal-v { display: block; font: 600 2rem/1 var(--mono); }
.bal-note { display: block; margin-top: .5rem; font-size: .76rem; color: var(--dim); }
.acct-actions { display: flex; gap: .6rem; align-items: center; }

@media (max-width: 630px) {
  .board { font-size: .8rem; }
  .team-row td, .board thead th { padding-left: .4rem; padding-right: .4rem; }
  .b-move { display: none; }          /* history is one tap away on the game page */
  .b-team { min-width: 7.5rem; }
}

/* pricing */
.price-table td { padding: .7rem .2rem; }
.price-table .c-line { text-align: right; font-family: var(--mono); }
.pricing-note {
  border-left: 3px solid var(--ink); background: var(--raise);
  padding: .8rem .9rem; font-size: .86rem; margin: 1.4rem 0 0; max-width: 54ch;
}
.packs { display: flex; gap: .7rem; flex-wrap: wrap; margin: .9rem 0 1.2rem; }
.pack {
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: 2px; padding: .9rem 1rem;
  background: var(--raise); min-width: 8.5rem;
}
.pack-v { font: 600 1.5rem/1 var(--mono); }
.pack-n { font: 500 .6rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }

/* ---------- the slate ---------- */
.slate { display: flex; flex-direction: column; gap: .55rem; margin: 1.5rem 0 2.6rem; }
.pk { border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); }
.pk-head {
  display: grid; grid-template-columns: 4.6rem 1fr auto;
  gap: .9rem; align-items: center; padding: .8rem .95rem;
}
.pk-when { display: flex; flex-direction: column; gap: .18rem; }
.pk-time { font: 600 .95rem/1 var(--mono); }
.pk-sport { font: 500 .56rem/1 var(--mono); letter-spacing: .13em; color: var(--dim); }
.pk-mu { display: block; font-weight: 600; font-size: .96rem; }
.pk-mkt {
  display: block; font: 500 .56rem/1.5 var(--mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.pk-state { text-align: right; }
.pk-live, .pk-soon {
  font: 500 .56rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--rule); border-radius: 2px;
  padding: .35rem .5rem; display: inline-block;
}
.pk-body { padding: 0 .95rem .9rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.pk-pick { margin: 0 0 .35rem; display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.pk-sel { font-weight: 600; font-size: 1.05rem; }
.pk-line { font: 600 1.05rem/1 var(--mono); }
.pk-book { font: 500 .58rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.pk-conf { margin: 0 0 .5rem; font: 500 .68rem/1 var(--mono); letter-spacing: .06em; color: var(--dim); }
.pk-why { margin: 0 0 .4rem; font-size: .88rem; max-width: 70ch; }
.pk-freed { margin: .5rem 0 0; font: 500 .62rem/1 var(--mono); letter-spacing: .1em;
            text-transform: uppercase; color: var(--dim); }

.pk-gate { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pk-hidden { margin: 0; flex: 1 1 16rem; font-size: .86rem; color: var(--dim); }
.pk-or { font-size: .78rem; color: var(--dim); }
.pk-gate form { margin: 0; }

@media (max-width: 630px) {
  .pk-head { grid-template-columns: 3.6rem 1fr auto; gap: .6rem; padding: .7rem .75rem; }
  .pk-body { padding-left: .75rem; padding-right: .75rem; }
  .pk-mu { font-size: .9rem; }
}

.sms-form { max-width: 22rem; margin-bottom: .5rem; }
.check { flex-direction: row !important; align-items: center; gap: .55rem !important; }
.check input { width: auto; min-height: 0; margin: 0; }
.check span { font-size: .9rem; }

/* Add-to-home-screen bar. Appears on the second visit, never the first. */
.a2hs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .8rem 1rem; background: var(--chrome); color: #E8EDF5;
  border-top: 2px solid var(--brand);
  font-size: .86rem;
}
.a2hs span { flex: 1 1 12rem; }
.a2hs button {
  font: 600 .7rem/1 var(--sans); letter-spacing: .04em;
  border-radius: 2px; padding: .62rem .9rem; min-height: 44px; cursor: pointer;
  border: 1px solid transparent;
}
.a2hs-yes { background: var(--brand); color: var(--chrome); }
.a2hs-no  { background: transparent; color: #B9C6D8; border-color: #2C3F58; }

/* ---------- event detail: chart + prose ---------- */
.crumb { margin: 1.4rem 0 0; font: 500 .62rem/1 var(--mono); letter-spacing: .11em;
         text-transform: uppercase; }
.chart { margin: .9rem 0 2rem; padding: .9rem 1rem 1.1rem;
         border: 1px solid var(--rule); border-radius: 3px; background: var(--raise); }
.chart svg { display: block; overflow: visible; }
.grid { stroke: var(--rule); stroke-width: 1; }
.axis { font: 500 10px var(--mono); fill: var(--dim); }
.mv-path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Four distinguishable strokes. These identify a BOOK, never an outcome. */
.mv-path.mv-0 { stroke: var(--ink); }
.mv-path.mv-1 { stroke: var(--navy); }
.mv-path.mv-2 { stroke: var(--dim); stroke-dasharray: 5 3; }
.mv-path.mv-3 { stroke: var(--ink); stroke-dasharray: 2 3; }
.mv-dot.mv-0 { fill: var(--ink); }
.mv-dot.mv-1 { fill: var(--navy); }
.mv-dot.mv-2, .mv-dot.mv-3 { fill: var(--dim); }
.chart figcaption { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .7rem; }
.key { display: flex; align-items: center; gap: .4rem;
       font: 500 .68rem/1 var(--mono); color: var(--dim); }
.key i { width: 14px; height: 2px; display: inline-block; background: var(--ink); }
.key i.mv-1 { background: var(--navy); }
.key i.mv-2, .key i.mv-3 { background: var(--dim); }
.key b { color: var(--ink); }

.game-picks { list-style: none; padding: 0; margin: .6rem 0 2rem;
              display: flex; flex-direction: column; gap: .5rem; }
.game-picks li { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
                 font-size: .88rem; }

.prose { max-width: 42rem; padding-bottom: 3rem; }
.prose p { max-width: 66ch; }
.prose ul { max-width: 66ch; padding-left: 1.1rem; }
.prose li { margin-bottom: .45rem; }

/* weekly grouping on the odds board */
.dayblock { margin-bottom: 1.6rem; border: 1px solid var(--rule);
            border-radius: 3px; overflow: hidden; }
.dayhead {
  display: flex; align-items: center; gap: .6rem;
  background: var(--chrome); color: #fff;
  padding: .5rem .8rem; border-radius: 3px 3px 0 0;
  margin: 0;
}
.dh-label { font: 700 .88rem/1 var(--cond); letter-spacing: .02em; }
.today-tag {
  font: 600 .54rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--chrome); background: var(--brand); padding: .22rem .4rem; border-radius: 2px;
}
.daycount {
  margin-left: auto; font: 500 .6rem/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: #9DB3CC;
}
.empty-board { padding: 2.2rem 0 3rem; }
.empty-board .empty { padding: 0 0 .5rem; }

/* team initials badge - stands in for a licensed club logo */
.tmark {
  display: inline-grid; place-items: center;
  width: 1.55rem; height: 1.55rem; border-radius: 4px;
  margin-right: .45rem; vertical-align: -.35rem;
  font: 700 .6rem/1 var(--mono); letter-spacing: .01em;
  /* hue varies per team; saturation and lightness are FIXED so no badge shouts
     louder than another and none can be read as a result colour */
  background: hsl(var(--h) 32% 42%);
  color: #fff;
}
:root:not([data-theme="light"]) .tmark { background: hsl(var(--h) 30% 46%); }

/* open -> current indicator, sitting under the price */
.mvi {
  display: block; margin-top: .1rem;
  font: 500 .58rem/1 var(--mono); letter-spacing: .02em;
  color: var(--dim);
}
/* Direction is carried by the ARROW, not by colour. Green-up/red-down would read as
   good/bad, and on this site colour never means an outcome. */
.mvi.up::before, .mvi.dn::before { content: ""; }
.b-team .at {
  display: inline-block; margin-left: .35rem;
  font: 700 .5rem/1 var(--mono); color: var(--dim);
  border: 1px solid var(--rule); border-radius: 2px; padding: .12rem .22rem;
}

.soon-tag {
  font: 600 .54rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: #9DB3CC; border: 1px solid #2C4763; border-radius: 2px;
  padding: .22rem .4rem;
}
.lede-note {
  border-left: 3px solid var(--rule); padding: .6rem .8rem; margin: 0 0 1.2rem;
  font-size: .84rem; color: var(--dim); background: var(--raise); max-width: 60ch;
}

/* live / final status and the score, on the board */
.status-live, .status-final {
  display: inline-block; font: 700 .56rem/1 var(--mono);
  letter-spacing: .12em; padding: .22rem .34rem; border-radius: 2px;
}
/* LIVE is filled so it reads at a glance; FINAL is outlined and recedes. Neither is
   an outcome colour - they describe the clock, not who is winning. */
.status-live  { background: var(--ink); color: var(--paper); }
.status-final { border: 1px solid var(--rule); color: var(--dim); }
.tscore {
  float: right; font: 700 1.05rem/1 var(--mono);
  font-variant-numeric: tabular-nums; padding-left: .6rem;
}

/* line-movements column: the last three actual changes, oldest first */
.b-moves { white-space: nowrap; }
.board thead th.b-moves { text-align: left; }
.mvcell {
  display: inline-block; margin-right: .55rem; text-align: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.mvcell b { display: block; font-weight: 500; font-size: .78rem; }
.mvcell i { display: block; font-style: normal; font-size: .62rem; color: var(--dim); }
/* Older entries recede so the eye lands on the current number first. */
.mvcell:not(:last-child) { opacity: .55; }
@media (max-width: 1012px) { .b-moves { display: none; } }

/* A finished game's winning score carries weight - a scoreboard convention.
   Deliberately NOT applied to pick results on the record page. */
.tscore.won { color: var(--navy); }
.tscore:not(.won) { color: var(--dim); }

/* ---------- the business model, on every page ----------
 * Sits above the content because the model IS the differentiator: without it this
 * reads as one more picks site. Dense and low-contrast so it informs without
 * competing with the board underneath.
 */
.model { background: var(--raise); border-bottom: 1px solid var(--rule); }
.model-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding-top: .85rem; padding-bottom: .85rem;
}
.model-item {
  display: flex; flex-direction: column; gap: .22rem;
  padding: 0 1rem; border-left: 1px solid var(--rule);
}
.model-item:first-child { padding-left: 0; border-left: 0; }
.model-k {
  font: 700 .6rem/1 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink);
}
.model-paid .model-k { color: var(--navy); }
.model-v { font-size: .76rem; line-height: 1.45; color: var(--dim); max-width: 30ch; }
.model-v em { font-style: normal; font-weight: 600; color: var(--ink); }

@media (max-width: 968px) {
  .model-in { grid-template-columns: repeat(2, 1fr); gap: .8rem 0; }
  .model-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 585px) {
  .model-in { grid-template-columns: 1fr; gap: .7rem; }
  .model-item { padding-left: 0; border-left: 0; }
  .model-v { max-width: none; }
}

/* ---------- control bar: sort / filter / date navigation ---------- */
.ctrl {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem;
}
.ctrl-group { display: flex; gap: .5rem; margin: 0; }
.sel { position: relative; display: inline-flex; }
.sel select {
  appearance: none; -webkit-appearance: none;
  font: 500 .78rem/1 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: .52rem 1.9rem .52rem .7rem; min-height: 40px; cursor: pointer;
}
/* the caret, drawn in CSS so there is no icon request */
.sel::after {
  content: ""; position: absolute; right: .7rem; top: 50%;
  width: .4rem; height: .4rem; margin-top: -.28rem;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg); pointer-events: none;
}
.sel select:focus-visible { border-color: var(--navy); }

.datenav {
  display: flex; align-items: stretch; gap: .18rem; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); padding: .18rem;
}
.dn-month {
  display: flex; align-items: center; padding: 0 .6rem;
  font: 700 .62rem/1 var(--mono); letter-spacing: .1em; color: var(--dim);
}
.dn-arrow {
  display: grid; place-items: center; width: 1.9rem;
  text-decoration: none; color: var(--dim); font-size: 1.1rem; line-height: 1;
  border-radius: 2px;
}
.dn-arrow:hover { background: var(--raise); color: var(--ink); }
.dn-day {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .3rem .6rem; text-decoration: none; border-radius: 2px; color: var(--dim);
  min-width: 2.9rem;
}
.dn-day:hover { background: var(--raise); }
.dn-day.on { background: var(--chrome); }
.dn-dow { font: 700 .54rem/1 var(--mono); letter-spacing: .09em; }
.dn-num { font: 600 .95rem/1 var(--mono); color: var(--ink); }
.dn-day.on .dn-dow { color: #9DB3CC; }
.dn-day.on .dn-num { color: #fff; }
.dn-sep { width: 1px; background: var(--rule); margin: .25rem .35rem; }
.dn-view {
  display: flex; align-items: center; padding: 0 .6rem; text-decoration: none;
  font: 600 .7rem/1 var(--sans); color: var(--dim); border-radius: 2px;
}
.dn-view:hover { background: var(--raise); color: var(--ink); }
.dn-view.on { background: var(--chrome); color: #fff; }

@media (max-width: 700px) {
  .ctrl { gap: .55rem; }
  .ctrl-group { width: 100%; }
  .sel { flex: 1; }
  .sel select { width: 100%; }
  .dn-month, .dn-sep { display: none; }
}

/* ---------- two-tone game rows + per-game footer bar ----------
 * The away row sits on the page ground and the home row on a tint, so a two-line game
 * reads as ONE unit at a glance. Scanning a long slate is the whole job of this table.
 * The tint carries no meaning beyond "second line" - it is not tied to any outcome.
 */
.team-row.is-away td { background: var(--paper); }
.team-row.is-home td { background: var(--raise); }
.board tbody.game:hover .team-row td { background: var(--rowhover); }

.gfoot td {
  padding: 0; background: var(--gfoot); border-top: 1px solid var(--rule);
}
.gf-cell {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1.1rem; text-decoration: none; color: #fff;
  font: 600 .72rem/1 var(--sans);
  border-right: 1px solid rgba(255,255,255,.22);
}
.gf-cell:hover { background: rgba(255,255,255,.12); }
.gf-caret { opacity: .7; }
.gf-note {
  float: right; padding: .55rem .9rem;
  font: 400 .62rem/1 var(--mono); letter-spacing: .06em; color: rgba(255,255,255,.75);
}
@media (max-width: 585px) {
  .gf-cell { padding: .5rem .7rem; font-size: .68rem; }
  .gf-note { display: none; }
}

/* ---------- per-game CTA boxes ----------
 * GOLD, matching "Picks" in the top nav. Gold is already this site's money colour, so
 * a buy box wearing it reads as the same thing wherever it appears. It is also the one
 * hue the board itself never uses, so a live box separates instantly from a page of
 * grey-green prices and navy chrome.
 *
 * S10 still holds: gold marks a PURCHASE, never a result. No pick outcome is ever gold.
 */
.b-cta { white-space: nowrap; padding-left: .3rem !important; }
.cta {
  display: inline-flex; flex-direction: column; gap: .1rem;
  min-width: 6.4rem; margin-right: .35rem; padding: .34rem .55rem;
  border: 1px solid var(--rule); border-radius: 3px; text-decoration: none;
  vertical-align: top;
}
.cta-k {
  font: 700 .56rem/1.2 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}
.cta-v { font: 700 .78rem/1.1 var(--sans); color: var(--ink); }

/* SOMETHING TO BUY - filled gold, the loudest thing on the row. */
.cta-buy {
  background: var(--gold); border: 2px solid var(--gold-edge);
  padding: .27rem .5rem;
  box-shadow: 0 1px 0 var(--gold-edge);
}
.cta-buy .cta-k { color: var(--gold-ink); opacity: .75; }
.cta-buy .cta-v { color: var(--gold-ink); }
.cta-buy:hover { background: var(--gold-hi); }

/* CLICKABLE BUT NOT ASKING FOR MONEY - free post-kickoff, or a link to the slate when
   this game has no pick. Most games show this state, so it carries the gold visibly:
   2px edge and a gold wash, not a hairline nobody notices. */
.cta-open {
  background: var(--gold-wash); border: 2px solid var(--gold-edge);
  padding: .27rem .5rem;                 /* offset the thicker border */
}
.cta-open .cta-k { color: var(--gold-deep); }
.cta-open .cta-v { color: var(--gold-deep); }
.cta-open:hover { background: var(--gold); }
.cta-open:hover .cta-k, .cta-open:hover .cta-v { color: var(--gold-ink); }

/* NOTHING POSTED / NOT A PRODUCT YET.
   Inert, but NOT invisible. A dashed box a reader never notices fails to tell them
   picks are sold here at all -- and most games will have no pick most of the time, so
   this is the state they see first. Faint gold tint keeps it in the same family as the
   live box without pretending to be clickable. */
.cta-none {
  background: var(--gold-wash); border-style: dashed; border-color: var(--gold-edge);
  cursor: default; opacity: .85;
}
.cta-none .cta-k { color: var(--gold-deep); }
.cta-none .cta-v { color: var(--dim); font-weight: 500; }

/* Hidden only on genuinely narrow screens. 1012px was hiding these on any split
   window, which is most of the time on a laptop. */
@media (max-width: 760px) { .b-cta { display: none; } }