/* ─────────────────────────────────────────────
   FirstSnap.net — broadcast-graphics design tokens

   Art direction: TV lower-third. Condensed heavy display type, solid colour
   blocks, square corners, thick accent bars keyed to tier. No glows, no
   atmosphere gradients, no grain — contrast does the work instead.

   Palette is the field green desaturated toward ink so the chalk yellow can
   carry every signal on its own.
───────────────────────────────────────────── */
:root {
  /* Surfaces — field green pulled toward ink */
  --bg:           #0d1a14;
  --bg-deep:      #08120d;
  --surface:      #10201a;
  --surface2:     #16291f;
  --surface3:     #1d3428;
  --border:       #24382c;
  --border-soft:  #1a2a21;

  /* Text — chalk */
  --text:    #eef2ee;
  --text-2:  #c9d4cb;
  --muted:   #7d8f84;
  --muted-2: #5b6b62;

  /* Primary signal — chalk yellow. Used sparingly; it means "our call". */
  --chalk:        #e8c33a;
  --chalk-bright: #f5d55c;
  --chalk-bg:     #241f0e;
  --chalk-border: #544712;
  --chalk-ink:    #0d1a14;      /* text colour on a solid chalk block */

  /* Live / success — turf green */
  --turf:    #4bbd84;
  --turf-bg: #0d2318;

  /* Two-sided market pair, muted so neither shouts over the chalk */
  --away:        #d98a4a;       /* pylon orange — away side / under */
  --away-bg:     #241608;
  --away-border: #5c3418;
  --home:        #6aa8c0;       /* sky blue — home side / over */
  --home-bg:     #0c2129;
  --home-border: #1c4a5c;
  --tie:         #8fa39a;       /* was violet; a tie is not a third signal */
  --tie-bg:      #1a2620;
  --tie-border:  #2f4238;

  /* Team identity tints. --away/--home above are SIDE colours and double as
     under/over, so a page that knows which two teams it is showing cannot just
     override them -- it would recolour every over/under lean on the page too.
     These two carry the team colour instead: they default to the side colour,
     and /today and /game re-point them at the actual teams' tints (see
     nfl_api.team_color, mirrored from TEAM_COLOR in data.js) on the page
     wrapper. Only rules that paint a team -- its code, its bar, its swatch --
     may use them. */
  --team-away: var(--away);
  --team-home: var(--home);

  /* Accent / focus */
  --accent:       #6aa8c0;
  --accent-hover: #83bcd2;
  --neutral:      #8fa39a;
  --neutral-bg:   #1a2620;

  /* Negative */
  --neg:    #d9636f;
  --neg-bg: #261014;

  /* Fonts — condensed heavy for display, its companion for body, Plex for
     figures. Barlow Condensed is the lower-third voice. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-sans:    'Barlow', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  /* Field markings only — a squared, uniform-stroke face. Deliberately not the
     display face: painted numerals that match the headline typeface read as
     dimmed text rather than as marks on a surface. */
  --font-field:   'Archivo Black', 'Barlow', system-ui, sans-serif;

  /* Broadcast graphics do not have rounded corners. */
  --radius: 0px;
  /* One exception, and only one: the primary call-to-action. See the note on
     .btn-primary. Nothing else may use this token. */
  --radius-press: 999px;

  /* Field geometry. One yard is the only figure set by hand; every other
     measure below is the real NFL dimension expressed in yards, so the whole
     field rescales from this one number. */
  /* The field is exactly as wide as the window: one yard is the viewport
     divided by the 53 1/3 yards between sidelines. Everything else is a real
     NFL measure stated as a fraction of that width, so the whole field scales
     with the screen and always meets both edges.
       sidelines   0% and 100%
       hash marks  70 ft 9 in in from each = 23.583 / 53.333 = 44.219%
       numbers     13 yd in to their centre = 24.375% */
  /* Width sets the scale, but height gets a veto. A row of numbers sits 10 yd
     off the 50, and the number plus its gap and arrow measures a further 2.96
     yd, so the half-height must cover ~13 yd for the neighbouring row to clear
     the top edge — hence 26 over the full height, and 27 to leave a margin.
     Without it a wide, short window scales the field up until the 40's chevron
     is cut off. Only the vertical rhythm and the glyph size ride on this; the
     sidelines and hash columns are set as fractions of the width, so the field
     still meets both edges however far the veto bites. */
  --yard:    min(calc(100vw / 53.3333), calc((100vh - var(--hdr)) / 27));
  --hash-l:  44.219%;
  --hash-r:  55.781%;
  --tick:    calc(var(--yard) * 0.6667);    /* a 2 ft yard tick */

  /* The widest content shell on the site, and the margin left either side of
     it. The yard numerals live in that margin rather than at their true 13-yard
     position, which would put them under the page's own columns. */
  --shell:   1440px;
  --gutter:  calc((100vw - var(--shell)) / 2);

  /* One 5-yard span of yard ticks: four marks, at 1, 2, 3 and 4 yards. There is
     deliberately none at 0 — that is where the 5-yard line runs, and a tick
     drawn on the line composites over it and reads as a heavier, thicker mark
     than its neighbours. A real field has no hash there either; the line is
     already carrying that yard. */
  --tick-ink: rgba(238, 242, 238, 0.05);
  --ticks: linear-gradient(to bottom,
    transparent 0 calc(var(--yard) * 1),
    var(--tick-ink) calc(var(--yard) * 1) calc(var(--yard) * 1 + 2px),
    transparent calc(var(--yard) * 1 + 2px) calc(var(--yard) * 2),
    var(--tick-ink) calc(var(--yard) * 2) calc(var(--yard) * 2 + 2px),
    transparent calc(var(--yard) * 2 + 2px) calc(var(--yard) * 3),
    var(--tick-ink) calc(var(--yard) * 3) calc(var(--yard) * 3 + 2px),
    transparent calc(var(--yard) * 3 + 2px) calc(var(--yard) * 4),
    var(--tick-ink) calc(var(--yard) * 4) calc(var(--yard) * 4 + 2px),
    transparent calc(var(--yard) * 4 + 2px) 100%);

  /* The sticky nav — 54px plus its 2px chalk rule. It is opaque and sits at
     z-index 50, so it paints over anything the field layer draws up there. The
     field starts below it instead, which also centres the 50 on the part of the
     screen you can actually see. */
  --hdr:     56px;

  --easing: cubic-bezier(.2,.7,.2,1);
}

/* ── Reset + base ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11','ss01';
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Atmospherics deliberately removed. The two radial glows and the fractal-grain
   overlay that used to sit here are the signature of a generated page; a
   broadcast graphic sits on flat colour. The elements stay in the markup so
   every template keeps rendering, but they paint nothing. */
.atmos, .noise { display: none; }

/* Page background — an NFL field to spec, laid out with its length running up
   the screen, so the yard lines run across it. That orientation is what makes
   the sideways numerals in _field.html correct rather than decorative: on a
   real field every number is painted to read from the sideline nearest it, and
   with the field vertical those sidelines are the left and right edges.

   Everything below derives from --yard, at true NFL measurements:
     field width      53 1/3 yd   = 26.667 yd either side of centre
     hash marks       70 ft 9 in from each sideline = 23.583 yd
     numbers          12 yd from each sideline to their outer edge, 2 yd tall
     yard lines       every 5 yd, spanning sideline to sideline
   A real field carries no full-width 1-yard lines — the single yards appear
   only as short ticks at the hashes and inside the sidelines, which is how
   they are drawn here. No mask fade: broadcast backgrounds do not dissolve at
   the edges. */
body::before {
  content: '';
  position: fixed;
  inset: var(--hdr) 0 0 0;
  pointer-events: none;
  background-image:
    /* sidelines */
    linear-gradient(to right, rgba(238, 242, 238, 0.055) 2px, transparent 2px),
    linear-gradient(to right, rgba(238, 242, 238, 0.055) 2px, transparent 2px),
    /* 1-yard ticks inside each sideline */
    var(--ticks), var(--ticks),
    /* 1-yard ticks at each hash */
    var(--ticks), var(--ticks),
    /* 5-yard lines, sideline to sideline */
    linear-gradient(to bottom, rgba(238, 242, 238, 0.055) 2px, transparent 2px);
  /* Every tick column tiles on the same 5-yard span as the lines and anchors to
     the same centre, so its four marks land between consecutive lines. */
  background-size:
    2px 100%, 2px 100%,
    var(--tick) calc(var(--yard) * 5), var(--tick) calc(var(--yard) * 5),
    var(--tick) calc(var(--yard) * 5), var(--tick) calc(var(--yard) * 5),
    100% calc(var(--yard) * 5);
  /* Sidelines on the window's edges; the 5-yard lines centred vertically so one
     lands dead centre, with the numerals — centred the same way — sitting on
     the lines rather than floating between them. */
  /* The 5-yard tiles carry their line at the top edge, and a percentage
     position measures against (container - tile). Left at `center` that puts a
     line 2.5 yd above the middle of the screen, so every numeral — which is
     placed on a multiple of 10 yd from that middle — ends up stranded halfway
     between two lines. The extra 2.5 yd lands a line dead centre instead, which
     is what puts each number on its own yard line, the line running through the
     gap between its digits. The tick columns share the offset, so their four
     marks still fall between lines. */
  /* Every entry is two values, or four when it needs an edge plus an offset.
     A three-value background-position (`left 2px center`) is not valid syntax,
     and one bad entry invalidates the whole declaration — every layer then
     falls back to 0% 0%, stacking both sidelines and all four tick columns on
     the left edge with the lines top-aligned. */
  background-position:
    left center,
    right center,
    left 2px top calc(50% + var(--yard) * 2.5),
    right 2px top calc(50% + var(--yard) * 2.5),
    calc(var(--hash-l) - var(--tick)) calc(50% + var(--yard) * 2.5),
    var(--hash-r) calc(50% + var(--yard) * 2.5),
    center calc(50% + var(--yard) * 2.5);
  background-repeat:
    no-repeat, no-repeat,
    repeat-y, repeat-y,
    repeat-y, repeat-y,
    repeat-y;
  /* Negative so the yard lines sit behind page content even when a page's
     wrapper never establishes a stacking context. At z-index 0 this fixed
     pseudo-element painted above in-flow content (bets.html). */
  z-index: -1;
}
#root { position: relative; z-index: 2; }

/* ── Field yard numerals (background) ──
   The numbering that belongs to the field itself: fixed to the viewport with
   the yard lines above, behind every page. Markup comes from _field.html, which
   every page includes.

   Weaker than the hero-band numerals below, because this layer repeats across
   the whole page and sits behind live figures rather than behind one headline.
   Two rows, inset from top and bottom, keeping the middle of the screen — where
   the reading happens — clear. */
.fs-field {
  /* Paint, not a wash. These are mixed into an opaque colour rather than laid
     on at low alpha, so a yard line crossing a numeral or its arrow is covered
     by it instead of showing through — the way paint on turf actually behaves.
     The percentage is the same knob a low alpha was, just spelled as a mix. */
  --fieldnum-mix: 4.5%;
  --fieldnum-ink: color-mix(in srgb, #eef2ee var(--fieldnum-mix), var(--bg));
  --fieldarrow-ink: color-mix(in srgb, #eef2ee calc(var(--fieldnum-mix) * 1.7), var(--bg));

  position: fixed;
  inset: var(--hdr) 0 0 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}
.fs-field span {
  position: absolute;
  /* Down the field by tens of yards (--i); across into one of the two margins,
     set by .col-l / .col-r below. */
  top: calc(50% + var(--i) * var(--yard) * 10);
  /* Painted NFL numerals are 4 ft wide by 6 ft tall. Archivo Black gets most of
     that ratio on its own; the vertical scale carries it the rest of the way,
     which is what stops these reading as a font and starts them reading as
     paint. The digits are opened up the same way they are laid on a field.

     Rotate before scaling: transforms resolve right to left, so scaleY lands in
     the glyph's own axes and lengthens the digits. Ordered the other way the
     stretch would apply in screen space and fatten them instead. */
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleY(1.22);
  font-family: var(--font-field);
  font-weight: 400;
  /* Sized off the field, not the viewport: a painted numeral is 6 ft — 2 yards
     — tall. Archivo Black's caps run ~0.72em and the stretch adds 22%, so
     2 yards of cap height needs about 2.28 yards of font size.

     Capped by the margin it has to sit in, so narrowing the window shrinks the
     numerals into their gutter and finally out of sight, instead of sliding
     them back under the content. */
  font-size: min(calc(var(--yard) * 2.28), calc(var(--gutter) * 0.55));
  line-height: 0.8;
  letter-spacing: 0.07em;
  color: var(--fieldnum-ink);
}
/* Centred in the margin either side of the content shell. */
.fs-field .col-l { left: calc(var(--gutter) / 2); }
.fs-field .col-r { left: calc(100% - var(--gutter) / 2); }

/* The directional arrow beside every number but the 50, pointing at the goal
   line nearer to it. Drawn in the glyph's own rotated space, so it travels with
   the number: `goal-back` sits behind the digits in reading order, `goal-fwd`
   ahead of them, which is what puts both halves' arrows on the goalward side.

   Sized to the painted spec — 36 in long by 18 in across against a 6 ft number,
   so half the number's height and a quarter of it wide. The cap height is about
   0.88em after the stretch, which is what the ems below are measured against.

   Carried a little heavier than the digits: a thin triangle of the same alpha
   as an 80px numeral reads as nothing at all, so it gets its own multiplier
   rather than a second hand-set value to keep in sync. */
.fs-field span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.22em solid transparent;
  border-bottom: 0.22em solid transparent;
  transform: translateY(-50%);
}
.fs-field span.goal-back::after {
  right: 100%;
  margin-right: 0.13em;
  border-right: 0.44em solid var(--fieldarrow-ink);
}
.fs-field span.goal-fwd::after {
  left: 100%;
  margin-left: 0.13em;
  border-left: 0.44em solid var(--fieldarrow-ink);
}
/* Below 1000px the gutter is gone and the font-size cap above would take the
   numerals to nothing. mobile.css §1b re-sizes and re-places them for the
   cropped field it draws there, so nothing is hidden at this width. */

/* Numerals belong to the field layer above and nothing else. Hero bands carry
   no copy of their own: a band sitting on an opaque surface simply hides the
   field behind it, which is the correct read — the numbering is painted on the
   turf, not on the graphics laid over it. */

/* Display voice — the lower-third face. Condensed, heavy, set tight. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
}

.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }

/* Buttons inherit type and carry no chrome of their own. Without this the
   user agent paints its own grey bevel on any button a component forgot to
   style — the week arrows in the sidebar were doing exactly that. */
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

::selection { background: var(--chalk); color: #1a1208; }

/* ── Nav ──
   Opaque, not frosted. A broadcast bar sits on top of the picture, it does not
   blur what is behind it. Bottom edge is a hard 2px chalk rule. */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 0 24px;
  display: flex; justify-content: space-between; align-items: stretch;
  background: var(--bg-deep);
  border-bottom: 2px solid var(--chalk);
  min-height: 54px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.nav-brand img { width: 30px; height: 30px; }
.nav-brand-name {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 800; letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}
.nav-brand-name .tld { color: var(--chalk); font-weight: 800; }
.nav-links { display: flex; gap: 0; align-items: stretch; }
.nav-link {
  display: flex; align-items: center;
  padding: 0 17px;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  transition: color .12s, background .12s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.nav-link:hover { color: var(--text); cursor: pointer; background: var(--surface); }
.nav-link.active { color: var(--chalk); border-bottom-color: var(--chalk); }
.nav-actions { display: flex; gap: 8px; align-items: center; padding-left: 20px; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ── Buttons (pill variant — page level wins over ui.css) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.btn {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
}
.btn-lg { font-size: 19px; padding: 11px 24px; }
.btn-sm { font-size: 14.5px; padding: 6px 13px; }

/* THE ONE ROUND THING ON THE SITE. Everything else is --radius: 0 -- cards,
   inputs, badges, panels, the tier blocks, the field. A site where literally
   every corner is square reads as a default nobody chose rather than a
   decision, so exactly one element opts out: the button you are meant to
   press. It is the primary CTA only. Do not extend this to .btn-outline,
   .btn-ghost, .btn-sm-as-a-group, or anything that is not the single chalk
   call-to-action, or the point of it is gone. */
.btn-primary {
  background: var(--chalk);
  color: var(--chalk-ink);
  font-weight: 800;
  border-radius: var(--radius-press);
}
.btn-primary:hover {
  background: var(--chalk-bright);
}
/* Filled, not transparent. A transparent secondary CTA next to the solid
   chalk primary reads as a disabled outline rather than a second button you
   may press, so it sits on the lightest field-green surface and lifts one
   step on hover. */
.btn-outline {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover {
  background: #26402f;
  border-color: var(--chalk-border);
  color: var(--chalk);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); }

/* ── Layout containers ── */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 28px 80px;
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 28px;
}
@media (max-width: 1100px) {
  .page { grid-template-columns: 1fr; padding: 20px 16px 60px; }
  .sidebar { position: static !important; max-height: none !important; }
}

/* ── Sidebar ── */
.sidebar {
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding-right: 4px;
}
.sb-eyebrow {
  font-family: var(--font-display);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted-2); font-weight: 700; margin: 0 0 7px 0;
  padding-bottom: 5px; border-bottom: 2px solid var(--border-soft);
}
.sb-group { display: flex; flex-direction: column; gap: 1px; }
.sb-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  border: 0;
  border-left: 3px solid transparent;
  /* The slate filters render as <button>: strip the UA defaults so they sit
     flush with the <a> items in the Your tools group below them. Line-height is
     spelled out because a button does not inherit it from body the way the
     anchors do — left to `normal` the two groups end up different heights.
     Do NOT add `font-family: inherit` here: it would win over the
     var(--font-display) declaration above and drop every item out of Barlow
     Condensed. The explicit family already beats the UA button default. */
  background: none;
  width: 100%;
  text-align: left;
  line-height: 1.55;
}
.sb-nav:hover { background: var(--surface); color: var(--text); }
.sb-nav-empty, .sb-nav:disabled {
  opacity: 0.4;
  cursor: default;
}
.sb-nav-empty:hover, .sb-nav:disabled:hover { background: none; color: var(--muted); }
.sb-nav.active {
  background: var(--surface);
  color: var(--text);
  border-left-color: var(--chalk);
}
.sb-nav.locked { color: var(--muted); opacity: 0.78; }
.sb-nav.locked:hover { color: var(--chalk); opacity: 1; background: var(--surface); }
.sb-nav.locked .sb-lock { opacity: 0.75; }
.sb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border);
}
.sb-dot.live {
  background: var(--turf);
  animation: fs-pulse 1.8s infinite;
}
.sb-dot.gold {
  background: var(--chalk);
}
.sb-lock {
  margin-left: auto; font-size: 11px; opacity: 0.7;
}
.sb-card {
  background: var(--surface);
  border: 0;
  border-top: 3px solid var(--border);
  padding: 13px 14px;
  font-size: 12.5px; color: var(--muted);
  line-height: 1.5;
}
.sb-card-h {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--text);
  letter-spacing: 0.11em; text-transform: uppercase;
  margin: 0 0 7px;
}
.sb-week {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px;
  background: var(--surface);
  border: 0;
  border-left: 5px solid var(--chalk);
}
.sb-week-label {
  font-family: var(--font-display);
  font-size: 13px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.13em; font-weight: 700;
}
.sb-week-val {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 600; letter-spacing: -0.04em;
  color: var(--chalk); line-height: 1.05;
}
.sb-week-arrow {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  background: var(--bg-deep);
  font-size: 18px; line-height: 1;
  transition: color .12s, background .12s;
}
.sb-week-arrow:hover { color: var(--text); background: var(--surface2); }
.sb-week-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Main column ── */
.main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* ── Results banner ── */
.results-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 13px;
}
.rb-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--turf);
  animation: fs-pulse 2s infinite;
}
.rb-label { color: var(--muted); }
.rb-stat { color: var(--text); font-weight: 600; }
.rb-stat .num { color: var(--chalk); font-weight: 700; }
.rb-sep { color: var(--muted-2); }

/* ── Hero free pick ──
   The full-screen graphic: flat surface, a thick chalk bar down the left, and
   the call set as large as it will go. No gradients. */
.free-pick {
  display: grid; grid-template-columns: 1fr auto; gap: 30px;
  background: var(--surface);
  border: 0;
  border-left: 9px solid var(--chalk);
  padding: 22px 24px;
  position: relative;
}
.fp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--chalk); font-weight: 700;
  margin: 0 0 12px;
}
.fp-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--turf);
  animation: fs-pulse 1.8s infinite;
}
.fp-headline {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 800; letter-spacing: 0.008em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 0.96;
  max-width: 24ch;
}
/* Second line of the stack — the call itself, knocked into chalk. */
.fp-headline .accent {
  color: var(--chalk);
  display: block;
}
.fp-sub {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  color: var(--muted); margin: 0 0 16px;
  max-width: 640px;
}
.fp-game {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 14px;
}
.fp-teams {
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.012em; line-height: 1;
}
.fp-team-mono {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800;
  color: var(--chalk);
  letter-spacing: 0.012em;
}
.fp-at { color: var(--muted); font-weight: 600; font-size: 20px; }
.fp-meta { color: var(--muted); font-size: 13px; }
.fp-meta .sep { margin: 0 8px; color: var(--muted-2); }
.fp-reasoning {
  font-size: 14px; color: var(--text-2);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
.fp-reasoning .pill {
  background: var(--bg-deep);
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--chalk);
  border: 0;
}

/* Right side — stat chips on the deep ground, flush together */
.fp-right {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 250px;
}
.fp-prob {
  background: var(--bg-deep);
  border: 0;
  border-left: 4px solid var(--away);
  padding: 12px 16px;
  text-align: left;
  position: relative;
}
.fp-prob.home { border-left-color: var(--home); }
.fp-prob.gold-zone { border-left-color: var(--chalk); }
.fp-prob-lbl {
  font-family: var(--font-display);
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.fp-prob-val {
  font-size: 42px; font-weight: 600; line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  color: var(--away);
}
.fp-prob.home .fp-prob-val { color: var(--home); }
.fp-prob.gold-zone .fp-prob-val { color: var(--chalk); }
.fp-prob-meta {
  font-size: 11.5px; color: var(--muted-2); margin-top: 3px;
}
.fp-prob-meta .delta { color: var(--turf); font-weight: 600; }
.fp-right .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .free-pick { grid-template-columns: 1fr; padding: 18px 16px; border-left-width: 6px; }
  .fp-right { min-width: 0; }
  .fp-headline { font-size: 33px; max-width: none; }
  .fp-teams, .fp-team-mono { font-size: 25px; }
}

/* ── Section tabs — hard blocks, active one knocked out in chalk ── */
.section-tabs {
  display: flex; gap: 2px;
  border-bottom: 0;
  overflow-x: auto;
  margin-bottom: 0;
}
.section-tab {
  padding: 8px 20px 7px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 0;
  margin-bottom: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, background .12s;
}
.section-tab.active {
  color: var(--chalk-ink);
  background: var(--chalk);
}
.section-tab.active:hover { background: var(--chalk-bright); color: var(--chalk-ink); }
.section-tab .tab-count {
  display: inline-block;
  margin-left: 7px;
  font-size: 13px;
  color: var(--muted-2);
  font-weight: 500;
  font-family: var(--font-mono);
}
.section-tab.active .tab-count { color: var(--chalk-ink); opacity: 0.62; }
.section-tab.locked { color: var(--muted); opacity: 0.7; }
.section-tab.locked:hover { color: var(--chalk); opacity: 1; }
.section-tab .lock { font-size: 11px; margin-left: 6px; opacity: 0.65; }

/* ── Slot header — the segment title bar ── */
.slot {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 20px;
}
.slot-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 6px;
}
.slot-eyebrow {
  font-family: var(--font-display);
  font-size: 20px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text); font-weight: 800;
}
.slot-meta {
  color: var(--muted); font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.slot-sep {
  flex: 1; height: 2px;
  background: var(--border);
}

/* ── Publishing window ──
   Shown when the week on screen is not the week we publish on: a played week
   (locked picks + grades) or an upcoming one (schedule only). Borrows the
   how-to-read band's shape so it reads as page furniture, not an error. */
.phase-banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: var(--surface);
  border: 0;
  border-left: 6px solid var(--muted-2);
  padding: 13px 16px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-2);
}
.phase-banner.past   { border-left-color: var(--turf); }
.phase-banner.future { border-left-color: var(--muted-2); }
.phase-banner strong { color: var(--text); }
.phase-banner-cur {
  flex: none;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--chalk); white-space: nowrap; padding-top: 2px;
}

/* Graded outcome of a pick that was locked before kickoff. */
.gc-outcome {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 2px;
  color: var(--bg); background: var(--muted);
}
.gc-outcome.outcome-win  { background: var(--turf); }
.gc-outcome.outcome-loss { background: var(--away); }
.gc-outcome.outcome-push { background: var(--muted); }
.dr-card.locked-pick { border-left: 3px solid var(--muted-2); }
.dr-card.locked-pick.outcome-win  { border-left-color: var(--turf); }
.dr-card.locked-pick.outcome-loss { border-left-color: var(--away); }

/* ── How to read this page ── */
.how-to-read {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface);
  border: 0;
  border-left: 6px solid var(--chalk);
  padding: 13px 16px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-2);
}
.how-to-read strong { color: var(--text); }
.how-to-read em { color: var(--chalk); font-style: normal; font-weight: 600; }
.how-to-read-x {
  flex: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  padding: 2px 0 1px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.how-to-read-x:hover { color: var(--text); border-color: var(--chalk-border); }

/* ── Game card ──
   A lower-third strip: tier-coloured accent bar, a dark team block, the call,
   then the number. No border, no lift on hover — the accent bar and the block
   contrast carry the structure. */
.game-card {
  display: grid;
  grid-template-columns: 9px 200px 1fr 190px;
  gap: 0;
  align-items: stretch;
  background: var(--surface);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.game-card::before {
  content: '';
  grid-column: 1;
  background: var(--border);
}
.game-card:hover { background: var(--surface2); }
.game-card.gold-zone::before { background: var(--chalk); }
.game-card.wager-tier::before { background: var(--turf); }
.game-card.no-bet::before { background: var(--border); }
.game-card.no-bet { opacity: 0.72; }

/* Responsive overrides for the card live below the .gc-* base rules — see the
   "Game card — responsive" block further down. Same specificity, so they only
   win if they come last. */

/* Game card — team block. Sits on the deep ground so it reads as a plate. */
.gc-left {
  grid-column: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: var(--bg-deep);
  padding: 13px 15px;
  min-width: 0;
}
.gc-teams { display: flex; flex-direction: column; gap: 1px; }
.gc-team {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-display);
  font-size: 25px; font-weight: 800;
  text-transform: uppercase; line-height: 1.04;
  letter-spacing: 0.012em;
}
/* The three-letter code is the name at this size — the city is redundant. */
.gc-team-mono {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 800;
  color: var(--text);
  letter-spacing: 0.012em;
}
.gc-team-name { display: none; }
.gc-team-rec {
  color: var(--muted-2); font-size: 11.5px;
  font-family: var(--font-mono); margin-left: auto;
  align-self: center;
}
.gc-meta {
  font-size: 11.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 7px;
  align-items: center;
  font-family: var(--font-display);
  letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600;
}
.gc-meta .chip {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--muted-2);
  font-weight: 600;
}

/* Game card — middle: the one pick, as a sentence */
.gc-bet {
  display: flex; flex-direction: column; gap: 4px;
  grid-column: 3;
  justify-content: center;
  padding: 13px 20px;
  border: 0;
  min-width: 0;
}
.gc-bet-head {
  display: flex; justify-content: flex-start; align-items: center; gap: 12px;
}
.gc-bet-eyebrow { display: none; }   /* the accent bar already says "our call" */
.gc-tier { cursor: help; }
.gc-bet-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px; font-weight: 700; line-height: 1.06;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: 0.012em;
}
/* The headline reads in three runs: the TEAM in its own brand tint, the bet
   DESCRIPTION in white, the PRICE in chalk. One colour system on the card --
   the same tint the team code wears in the left rail -- instead of the old
   home/away blue+orange, which competed with those tints (CHI's brand orange
   sat 3.5 degrees off --away) and meant two different things depending on
   whether the pick was a moneyline or a total. A total names no team, so it is
   simply all white. Team tints are applied inline from window.teamColor; every
   one of them clears WCAG AAA on --surface at this size. */
.gc-bet-line .bl-text  { color: var(--text); }
.gc-bet-line .bl-price { color: var(--chalk); }
.gc-bet-line.tone-none { color: var(--muted); font-weight: 600; font-size: 24px; }
.gc-bet-why {
  margin: 3px 0 0;
  font-size: 13px; line-height: 1.45;
  color: var(--muted);
}

/* Game card — right: the number, big and flush right */
.gc-right {
  grid-column: 4;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 5px;
  text-align: right;
  padding: 13px 16px;
}
.gc-edge {
  display: flex; align-items: baseline; gap: 6px;
  cursor: help;
}
.gc-edge-val {
  font-size: 33px; font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  color: var(--turf);
  line-height: 1;
}
.gc-edge-lbl {
  font-family: var(--font-display);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--muted); font-weight: 700;
}
.gc-context {
  margin: 0;
  font-size: 11.5px; line-height: 1.4;
  color: var(--muted-2);
  max-width: 165px;
}
.gc-context strong { color: var(--text-2); font-family: var(--font-mono); font-weight: 600; }
.gc-more {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  padding: 2px 0 1px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.gc-more:hover { color: var(--chalk); border-bottom-color: var(--chalk); }
.gc-more:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

/* "+ Track" — sends the pick to /bets with the log form prefilled. Reads as an
   action rather than a link (it is the only one on the card that writes
   anything), so it wears the outline-button shape instead of gc-more's rule. */
.gc-track {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  padding: 4px 10px 3px;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.gc-track:hover {
  color: var(--chalk); border-color: var(--chalk);
  background: color-mix(in srgb, var(--chalk) 10%, transparent);
}
.gc-track:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

/* Game card — responsive. Must stay after the .gc-* base rules above. */
@media (max-width: 1100px) {
  .game-card { grid-template-columns: 9px 180px 1fr; }
  .gc-right {
    grid-column: 2 / -1;
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 18px;
    padding-top: 0;
  }
  .gc-context { margin-right: auto; }
}
@media (max-width: 720px) {
  /* Stacked: the accent bar becomes a full-width cap across the top. */
  .game-card { grid-template-columns: 1fr; }
  .game-card::before { grid-column: 1; height: 6px; }
  .gc-left { grid-column: 1; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
  .gc-teams { flex-direction: row; gap: 12px; align-items: baseline; }
  .gc-team-rec { margin-left: 0; }
  .gc-meta { margin-left: auto; }
  .gc-bet { grid-column: 1; padding: 13px 15px; }
  .gc-right {
    grid-column: 1; flex-wrap: wrap; gap: 12px;
    padding: 0 15px 14px;
  }
  .gc-context { max-width: none; flex: 1 1 100%; order: 3; margin-right: 0; }
  /* The auto margin stays on gc-more, which every card has — moving it to the
     optional Track button would leave a no-bet card's "see all numbers"
     stranded mid-row. */
  .gc-track { order: 2; }
  .gc-more { order: 2; margin-left: auto; }
  .how-to-read { flex-direction: column; align-items: stretch; }
  .how-to-read-x { align-self: flex-start; }
}

/* Sidebar badge legend */
/* One row per tier, each a single line. The badge sits in a fixed column so
   all three definitions start at the same x -- the three badges are different
   widths (LEAN is a rule, not a block), and left-flowing text off them read as
   ragged. Legend badges run a size down from the board so the column stays
   narrow enough to leave the definition its own line in a 232px rail. */
.sb-legend { margin: 8px 0 9px; display: flex; flex-direction: column; gap: 6px; }
.sb-legend > div { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; }
.sb-legend dt { min-width: 0; }
.sb-legend .wager-badge { font-size: 12px; letter-spacing: 0.08em; padding: 2px 7px 1px; }
.sb-legend .wager-lean { padding-left: 0; padding-right: 0; }
.sb-legend dd { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.sb-legend-note {
  font-size: 11px; line-height: 1.5; color: var(--muted-2);
  padding-top: 8px; border-top: 1px solid var(--border-soft);
  margin-bottom: 7px;
}
.sb-legend-more { font-size: 11.5px; color: var(--chalk); }

.gc-q1-splits {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.gc-bar-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.gc-bar {
  flex: 1;
  height: 6px;
  background: var(--surface3);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: flex;
}
.gc-bar-away {
  background: var(--away);
}
.gc-bar-home {
  background: var(--home);
}
.gc-bar-none {
  background: var(--surface3);
}
.gc-bar-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  min-width: 32px;
  text-align: right;
}

/* Game card — right (markets) */
.gc-markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gc-mkt {
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.gc-mkt-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700;
}
.gc-mkt-val {
  font-size: 14px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}
.gc-mkt-edge {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--muted);
}
.gc-mkt-edge.positive { color: var(--turf); }
.gc-mkt-edge.negative { color: var(--neg); }

/* ── Badges / leans ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 0;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lean-away    { background: var(--away-bg); color: var(--away); border: 1px solid var(--away-border); }
.lean-home    { background: var(--home-bg); color: var(--home); border: 1px solid var(--home-border); }
.lean-neutral { background: var(--neutral-bg); color: #b8c2ff; border: 1px solid #252845; }
.lean-tie     { background: var(--tie-bg); color: var(--tie); border: 1px solid var(--tie-border); }

.tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-away { background: var(--away-bg); color: var(--away); border: 1px solid var(--away-border); }
.tag-home { background: var(--home-bg); color: var(--home); border: 1px solid var(--home-border); }
.tag-chalk { background: var(--chalk-bg); color: var(--chalk); border: 1px solid var(--chalk-border); }
.tag-neutral { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

/* Tier badges are solid blocks of the tier colour with knocked-out text — the
   way a score bug flags a stat. No outlines, no star glyph. */
.wager-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px 1px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  white-space: nowrap;
}
.wager-gold {
  background: var(--chalk);
  color: var(--chalk-ink);
}
.wager-wager {
  background: var(--turf);
  color: var(--chalk-ink);
}
.wager-lean {
  background: transparent;
  color: var(--muted);
  padding-left: 0; padding-right: 0;
  border-bottom: 2px solid var(--border);
}

/* ── Drawer ── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(3, 17, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--easing);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(920px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .28s var(--easing);
  overflow-y: auto;
  /* overflow-y alone computes overflow-x to `auto`, which turns the
     whole panel into a sideways scroller the moment one table inside it
     is wider than a phone — and a panel that IS the viewport sliding
     sideways reads as the page itself coming apart. Anything too wide
     gets its own .fs-tscroll box instead. */
  overflow-x: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  position: sticky; top: 0;
  background: rgba(6, 26, 19, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  z-index: 5;
}
/* The title column is the only part of the header allowed to shrink;
   without min-width: 0 its min-content width is the floor and the two
   controls beside it get pushed off the right edge. */
.dr-head-main { min-width: 0; }
.dr-head-actions {
  display: flex; align-items: center; gap: 10px;
  flex: none;
}
/* The drawer's "Open in full" reads as a labelled button here; the arrow
   is only the phone's icon-only stand-in for that label (mobile.css). */
.dr-head-full-icon { display: none; }
.drawer-close {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.drawer-close:hover { background: var(--surface2); color: var(--text); }
.drawer-body { padding: 24px; display: flex; flex-direction: column; gap: 24px; }

.dr-header-teams {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 22px; letter-spacing: -0.025em;
  min-width: 0;
}
.dr-header-side {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 0;
}
.dr-header-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

.dr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px) { .dr-grid { grid-template-columns: 1fr; } }

.dr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.dr-card-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700;
}
.dr-card-val {
  font-size: 24px; font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* .away/.home modifiers retired: a value that stands for a team now takes that
   team's own tint inline (teamTint in game-card.jsx), matching the abbreviation
   chips beside it. --home/--away survive for the things that are genuinely a
   side and not a club: over/under leans and the tie state. */
.dr-card-val.chalk { color: var(--chalk); }
.dr-card-val.turf { color: var(--turf); }
.dr-card-sub { font-size: 12px; color: var(--muted); }

.dr-section-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--chalk); font-weight: 700;
  margin: 8px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.dr-section-h::before {
  content: ''; width: 18px; height: 2px; background: var(--chalk); border-radius: 0;
}

/* Drive-by-drive sim */
.drive-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.drive-row {
  display: grid;
  grid-template-columns: 60px 60px 1fr 80px 90px;
  align-items: center;
  padding: 11px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.drive-row:last-child { border-bottom: none; }
.drive-row.head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700;
  background: var(--surface2);
}
.drive-team-mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 0;
  background: var(--surface3);
  border: 1px solid var(--border);
  width: fit-content;
}
.drive-result {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.drive-result.td { color: var(--turf); }
.drive-result.fg { color: var(--chalk); }
.drive-result.punt { color: var(--muted); }
.drive-result.to { color: var(--neg); }
.drive-bar {
  height: 6px; background: var(--surface3); border-radius: 0;
  position: relative; overflow: hidden;
}
.drive-bar-fill {
  height: 100%;
  background: var(--turf);
  border-radius: 0;
}
.drive-bar-fill.fg { background: var(--chalk); }
.drive-bar-fill.punt { background: var(--muted); }
.drive-bar-fill.to { background: var(--neg); }
.drive-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.drive-points {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  text-align: right;
  color: var(--text);
}

/* Market table */
.mkt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.mkt-table th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
  padding: 10px 14px; text-align: left;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.mkt-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table .mkt-name { font-family: var(--font-sans); font-weight: 600; }
.mkt-table .edge.positive { color: var(--turf); font-weight: 700; }
.mkt-table .edge.negative { color: var(--neg); font-weight: 700; }
.mkt-table .lean-cell { font-family: var(--font-sans); }

/* Player props */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.prop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.prop:hover { border-color: var(--chalk-border); background: var(--surface2); }
.prop-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
}
.prop-pos {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface3); padding: 1px 6px; border-radius: 0;
  color: var(--muted); font-weight: 700; letter-spacing: 0.05em;
}
.prop-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.prop-line .val { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
.prop-edge {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  margin-top: 2px;
}
.prop-edge .lean { font-family: var(--font-sans); font-weight: 700; }
.prop-edge.over .lean { color: var(--home); }
.prop-edge.under .lean { color: var(--away); }
.prop-edge .num { font-family: var(--font-mono); color: var(--turf); font-weight: 700; }

/* ── Footer CTA ── */
.footer-cta {
  background: var(--surface);
  border: 0;
  border-top: 4px solid var(--chalk);
  padding: 30px 36px;
  display: grid;
  grid-template-columns: minmax(auto, 640px) max-content;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; padding: 24px; }
}
.fc-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--chalk); font-weight: 700; margin-bottom: 10px;
}
.fc-h {
  font-size: 28px; font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 12px;
  line-height: 1.15;
}
.fc-h .accent { color: var(--chalk); }
.fc-features {
  display: flex; flex-direction: column; gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
  font-size: 13.5px; color: var(--text-2);
}
.fc-features li {
  display: flex; align-items: center; gap: 8px;
}
.fc-features li::before {
  content: '✓'; color: var(--turf); font-weight: 700;
}
.fc-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  min-width: 220px;
}
.fc-price-line { font-size: 12.5px; color: var(--muted); }
.fc-price-line .num { color: var(--text); font-weight: 700; font-size: 14.5px; }
.fc-price {
  font-size: 40px; font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--font-mono);
}
.fc-price-suffix {
  font-size: 14px; color: var(--muted); font-weight: 500;
  font-family: var(--font-sans);
  margin-left: 2px;
}
@media (max-width: 900px) {
  .fc-right { align-items: flex-start; }
}

/* ── Footer ── */
.foot {
  margin-top: 12px;
  padding: 24px 28px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  text-align: center;
}
.foot a { color: var(--chalk); }
.foot .disc {
  max-width: 720px; line-height: 1.6;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.92;
}

/* ── Animations ── */
@keyframes fs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes fs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise-in > * {
  opacity: 0;
  animation: fs-rise .5s var(--easing) forwards;
}
.rise-in > *:nth-child(1)  { animation-delay: 0.04s; }
.rise-in > *:nth-child(2)  { animation-delay: 0.10s; }
.rise-in > *:nth-child(3)  { animation-delay: 0.16s; }
.rise-in > *:nth-child(4)  { animation-delay: 0.22s; }
.rise-in > *:nth-child(5)  { animation-delay: 0.28s; }
.rise-in > *:nth-child(6)  { animation-delay: 0.34s; }
.rise-in > *:nth-child(7)  { animation-delay: 0.40s; }
.rise-in > *:nth-child(8)  { animation-delay: 0.46s; }
.rise-in > *:nth-child(n+9) { animation-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Subscriber-mode nav: user chip + icon buttons ── */
.nav-icon-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-icon-btn:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.nav-icon-btn .nav-icon { display: inline-flex; }
.nav-icon-btn .nav-icon-dot[hidden] { display: none; }
.nav-icon-btn .nav-icon-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--turf);
  border: 2px solid var(--bg);
}

.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.user-chip:hover {
  background: var(--surface2);
  border-color: var(--chalk-border);
}
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--chalk-bg);
  border: 1px solid var(--chalk-border);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
}
.user-meta {
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1.1;
}
.user-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.user-tier {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--chalk);
  display: inline-flex; align-items: center; gap: 4px;
}
.user-tier .star { font-size: 10px; }

/* Button reset — the chip is a <button> now that it opens a menu. */
.user-chip { font: inherit; color: inherit; text-align: left; }
.user-caret {
  font-size: 10px; color: var(--muted);
  transition: transform .15s, color .15s;
}
.user-menu.open .user-caret { transform: rotate(180deg); color: var(--chalk); }
.user-menu.open .user-chip { border-color: var(--chalk-border); background: var(--surface2); }

/* ── User dropdown ── */
.user-menu { position: relative; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: 400;
  min-width: 208px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.user-dropdown[hidden] { display: none; }
.user-dropdown-item {
  display: block;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  transition: color .12s, background .12s;
}
.user-dropdown-item:hover { color: var(--text); background: var(--surface2); cursor: pointer; }
.user-dropdown-item.upgrade { color: var(--chalk); }
.user-dropdown-item.danger:hover { color: var(--away); }
/* Sign out is a POST form, not a link, so a GET from another origin cannot end
   someone's session. The submit button has to read as one more dropdown row. */
button.user-dropdown-item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.user-dropdown-sep { height: 1px; margin: 6px 0; background: var(--border); }

@media (max-width: 720px) {
  .user-meta { display: none; }
  .user-chip { padding: 5px; }
  .user-caret { display: none; }
  .nav-icon-btn { width: 30px; height: 30px; }
}

/* ── Subscriber dashboard (replaces marketing footer CTA) ── */
.subscriber-dash {
  background: var(--surface);
  border: 0;
  border-top: 4px solid var(--turf);
  padding: 20px 24px 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.sd-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.sd-eyebrow {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.sd-eyebrow::before {
  content: ''; width: 16px; height: 2px;
  background: var(--chalk); border-radius: 0;
}
.sd-link {
  font-size: 12.5px; font-weight: 600;
  color: var(--chalk);
  cursor: pointer;
  transition: color .15s;
}
.sd-link:hover { color: var(--chalk-bright); }

.sd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 760px) { .sd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sd-grid { grid-template-columns: 1fr; } }

.sd-stat {
  background: rgba(3, 17, 10, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sd-stat-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700;
}
.sd-stat-v {
  font-size: 28px; font-weight: 900;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.05;
}
.sd-stat-v.turf { color: var(--turf); }
.sd-stat-v.neg  { color: var(--neg); }
.sd-stat-v.chalk { color: var(--chalk); }
.sd-stat-sub {
  font-size: 11.5px; color: var(--muted);
  font-family: var(--font-mono);
}

.sd-foot {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--text-2);
}
.sd-foot-row {
  display: flex; align-items: center; gap: 10px;
}
.sd-foot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.sd-foot-dot.live {
  background: var(--turf);
  animation: fs-pulse 1.8s infinite;
}
.sd-foot-lbl { color: var(--muted); }
.sd-foot-v {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ── Palette variants (used by Tweaks) ── */
[data-palette="midnight"] {
  --bg: #060a18;
  --bg-deep: #03081a;
  --surface: #0c1830;
  --surface2: #112143;
  --surface3: #182d5a;
  --border: rgba(96,124,178,0.22);
  --border-soft: rgba(96,124,178,0.12);
  --chalk: #f5c542;
  --chalk-bright: #ffd66b;
  --chalk-bg: #2a2410;
  --chalk-border: #5c4a10;
  --away: #ffb347;
  --away-bg: #2a1d08;
  --away-border: #5e3f14;
  --home: #5fc3f5;
  --home-bg: #0a1f30;
  --home-border: #1c4a6e;
}
[data-palette="vintage"] {
  --bg: #1a0f0c;
  --bg-deep: #0c0805;
  --surface: #261814;
  --surface2: #32221c;
  --surface3: #432e26;
  --border: #5a3d31;
  --border-soft: #3a2820;
  --text: #f6ebd6;
  --text-2: #ddc9a8;
  --muted: #a8927a;
  --muted-2: #806d59;
  --chalk: #e8c878;
  --chalk-bright: #f4d990;
  --chalk-bg: #2d2210;
  --chalk-border: #5c4520;
  --turf: #92c270;
  --away: #d96b3f;
  --away-bg: #2a1408;
  --away-border: #6e3014;
  --home: #6ba8c2;
  --home-bg: #0a2027;
  --home-border: #1f4a5c;
}

/* ── Slate filter bar (top of the game list, only while a filter is on) ───── */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  padding: 9px 13px;
  background: var(--surface);
  border-left: 3px solid var(--chalk);
  font-size: 12.5px; color: var(--muted);
}
.filter-bar .fb-tier { color: var(--text); font-weight: 700; }
.filter-bar .fb-clear {
  margin-left: auto;
  background: none; border: 0; padding: 0;
  color: var(--chalk); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.filter-bar .fb-clear:hover { text-decoration: underline; }

/* ── Navigation progress (nav-progress.js) ────────────────────────────────
   Every link on this site is a full page load, and the screen holds still
   until the next document paints. This is what fills that silence: a chalk
   bar across the top, plus a chip that appears only once the wait is long
   enough to look like a hang. See nav-progress.js for the timings. */
.fs-navprog {
  position: fixed;
  inset: 0 0 auto 0;
  /* Over everything: the sticky nav (50), the mobile sheet (60), the game
     drawer (100) and the user dropdown (400) — a nav can start from any of
     them, and the bar reporting it must not end up underneath. */
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.fs-navprog-on  { visibility: visible; opacity: 1; }
.fs-navprog-off { opacity: 0; transition: opacity .22s var(--easing); }

.fs-navprog-bar {
  width: 0;
  height: 3px;
  /* currentColor throughout so the palette overrides at the bottom of this
     sheet (midnight, ember) recolour the glow along with the bar. */
  color: var(--chalk);
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  transition: width .2s var(--easing);
}

.fs-navprog-chip {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  /* Bottom-centre, not under the header: a phone's header is sticky and
     already crowded, and down here the chip sits where the thumb that just
     tapped is already looking. */
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chalk);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fs-navprog-slow .fs-navprog-chip { display: flex; }

/* The one round thing on a site with no rounded corners. A square spinner
   reads as a rendering glitch rather than as work in progress. */
.fs-navprog-spin {
  width: 13px;
  height: 13px;
  border: 2px solid var(--chalk-border);
  border-top-color: var(--chalk);
  border-radius: 50%;
  animation: fs-navprog-spin .7s linear infinite;
}
@keyframes fs-navprog-spin { to { transform: rotate(360deg); } }

/* The blanket reduced-motion rule above cuts every animation to 0.01ms, which
   would freeze the ring mid-rotation and leave a broken-looking circle on
   screen for the whole wait. Drop it and let the chip's word do the work —
   the bar still advances, because nav-progress.js sets its width outright
   rather than leaning on the transition. */
@media (prefers-reduced-motion: reduce) {
  .fs-navprog-spin { display: none; }
}

/* ── Wordmark trademark glyph ───────────────────────────────────────
   Renders the lockup as FirstSnap(TM).net, with the mark's top flush against
   the cap height of the wordmark.

   The mark deliberately opts OUT of the display face: Barlow Condensed at 800
   renders the TM ligature as a solid blob that fuses to the preceding P. A
   plain system sans keeps the two tiny letterforms open, which is what lets it
   carry this much size without turning into a smudge.

   Weight 600 rather than 500: at nav size the glyph is only ~16px, and below
   about 20px added stroke weight buys more legibility than added size does.

   CAREFUL with vertical-align: a length there resolves against THIS element's
   own font-size, not the wordmark's. The two values below are a matched pair —
   change font-size and the lift MUST be recomputed or the mark drifts off the
   cap line:

       vertical-align = (0.703 - 0.700 * scale) / scale

   where 0.703em is Barlow Condensed's cap height and 0.700 is the TM glyph's
   ink ascent as a fraction of its own font-size. At scale 0.65 that is 0.38em.

   Sized in em so it tracks every scale the wordmark ships at (nav 25px,
   coming-soon hero 44px, footer 16px). Colour is inherited from the wordmark,
   not the chalk .tld, which keeps the mark attached to "FirstSnap" rather than
   to ".net". aria-hidden keeps screen readers saying "FirstSnap dot net". */
.tm {
  font-family: system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.65em;
  font-weight: 600;
  vertical-align: 0.38em;
  letter-spacing: 0;
  margin: 0 0.03em 0 0.10em;
}