/* SharpCast design tokens — UI/UX spec v1.1 section 4.
   Layered alongside base.css. Existing vars (--bg, --t1, --blue, --green, etc)
   stay; new spec-named tokens alias to them where they overlap so we have a
   single source of truth without breaking the 4,800 lines of inline HTML. */

:root {
  /* Spec elevation tokens — alias to existing where it makes sense */
  --bg-elev:        var(--bg2);                       /* cards, panels */
  --bg-elev-2:      var(--bg3);                       /* nested panels, hover */
  --bg-elev-3:      var(--bg4);                       /* deepest — modal backdrops, tooltips (brand pack §6.3) */
  --border-strong:  var(--borderB);                   /* emphasised dividers */
  --border-brand:   rgba(47, 240, 214, 0.40);         /* brand-owned panels (brand pack §6.3) */

  /* Spec text tokens */
  --text:           var(--t1);
  --text-muted:     var(--t2);
  --text-dim:       var(--t3);
  --text-inverse:   #04130f;                          /* text on brand aqua / result colour bg — matches Next globals.css */

  /* Spec brand tokens */
  --brand:          var(--blue);
  --brand-strong:   #14b8a3;
  --brand-soft:     rgba(47, 240, 214, 0.12);         /* subtle bg, info chips (brand pack §6.2) */
  --brand-line:     rgba(47, 240, 214, 0.30);         /* dividers in brand sections */

  /* Spec semantic tokens */
  --positive:       var(--green);
  --positive-soft:  rgba(74, 222, 128, 0.12);         /* chip bg, equity curve fill (brand pack §6.5) */
  --positive-tint-30: rgba(74,222,128,0.30);
  --positive-tint-50: rgba(74,222,128,0.50);
  --positive-tint-70: rgba(74,222,128,0.70);
  --negative:       var(--red);
  --negative-soft:  rgba(251, 93, 107, 0.12);
  --negative-tint:  rgba(251,93,107,0.18);
  --warning:        var(--gold);
  --warning-soft:   rgba(245, 185, 66, 0.12);
  --warning-tint:   rgba(245,185,66,0.16);
  --neutral:        var(--t2);
  --neutral-soft:   rgba(123, 142, 171, 0.12);
  /* v5.7.347 — legacy aliases. Inline styles across web.py reference
     var(--good, ...) and var(--bad, ...) which were never defined, so their
     hard coded brick red / mid green fallbacks rendered off the Broadsheet
     palette. Define them onto the semantic tokens so every usage resolves to
     the win green and loss red regardless of the fallback. */
  --good:           var(--green);
  --bad:            var(--red);
  --neutral-tint:   rgba(123,142,171,0.18);
  --blur:           rgba(11, 15, 20, 0.85);

  /* Spacing scale (brand pack §11.2) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii (brand pack §11.3) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Easing tokens (brand pack §10.4) */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:  linear;

  /* Type families — the loaded stack (base.css @import pulls in Titillium
     Web and IBM Plex Mono). Titillium Web for headings, the wordmark, body
     and UI (one modern, highly readable sans across the site); IBM Plex Mono
     for tabular numerals. Keep these vars in lockstep with the Next
     globals.css @theme so both surfaces render one identity. */
  --font-serif: 'Titillium Web', system-ui, sans-serif;
  --font-sans: 'Titillium Web', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* v5.7.145 — Premium UI tokens.
     Adds depth (shadow scale), motion (durations), and surface treatments
     (gradients + glows) that the rest of the codebase can opt into without
     rewriting every component. Sparingly applied — these are the difference
     between "looks like 2010 HTML" and "feels modern". */

  /* Shadow scale — subtle by default, heavier for hero surfaces. Each layer
     mixes a faint brand-cyan ambient so dark surfaces don't read as flat
     black. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-brand: 0 12px 32px rgba(47, 240, 214, 0.18), 0 0 0 1px rgba(47, 240, 214, 0.20);

  /* Glow tokens — for accents, hover states, focus rings */
  --glow-brand:    0 0 24px rgba(47, 240, 214, 0.30);
  --glow-positive: 0 0 24px rgba(74, 222, 128, 0.28);
  --glow-warning:  0 0 24px rgba(245, 185, 66, 0.26);

  /* Surface gradients — for hero cards and primary CTAs */
  --grad-brand:        linear-gradient(135deg, #2ff0d6 0%, #14b8a3 100%);
  --grad-brand-soft:   linear-gradient(135deg, rgba(47,240,214,0.16) 0%, rgba(47,240,214,0.04) 100%);
  --grad-positive:     linear-gradient(135deg, #4ade80 0%, #1ea25b 100%);
  --grad-surface:      linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  --grad-surface-tilt: linear-gradient(140deg, rgba(255,255,255,0.04) 0%, transparent 60%);

  /* Motion — durations + standard easings */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-stagger: 80ms;       /* between items in a sequence */
}

/* ── Premium card pattern (v5.7.145) ───────────────────────────────────
   `.surface` is the new baseline for elevated panels. Replaces the
   ad-hoc `background: var(--bg2); border: 1px solid var(--border)`
   pattern repeated across the codebase with a coherent depth +
   gradient + hairline highlight that reads as "modern dark UI" not
   "default Bootstrap". Apply via `class="surface"` on any panel. */
.surface {
  background: var(--bg-elev);
  background-image: var(--grad-surface-tilt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.surface-elevated {
  background: var(--bg-elev);
  background-image: var(--grad-surface-tilt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.surface-hero {
  background: var(--bg-elev);
  background-image:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(47,240,214,0.10), transparent 60%),
    var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.surface-brand {
  background: var(--grad-brand);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brand);
}
/* Subtle interactive lift on hover — applies only when the surface is
   inside an anchor/button (i.e. clickable). */
a.surface:hover, button.surface:hover,
a.surface-elevated:hover, button.surface-elevated:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* Sparkline / horizontal probability bar — used for visual probability
   display in lists, replacing the "%.1f%%" stamp where space allows. */
.prob-bar {
  position: relative;
  height: 6px;
  background: var(--bg-elev-3);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.prob-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--grad-brand);
  border-radius: 3px;
  transition: width var(--dur-base) var(--ease-out);
}
.prob-bar.positive .prob-bar-fill { background: var(--grad-positive); }
.prob-bar-large { height: 10px; border-radius: 5px; }
.prob-bar-large .prob-bar-fill { border-radius: 5px; }

/* Donut percentage ring — for showing a single probability prominently
   (e.g. SharpCast pick conviction on the Hero card). Implemented with
   conic-gradient so it scales without SVG. */
.donut {
  --donut-pct: 50;
  --donut-size: 56px;
  --donut-thickness: 6px;
  --donut-color: var(--brand);
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  background: conic-gradient(
    var(--donut-color) calc(var(--donut-pct) * 1%),
    var(--bg-elev-3) calc(var(--donut-pct) * 1%)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.donut::after {
  content: "";
  position: absolute;
  inset: var(--donut-thickness);
  background: var(--bg-elev);
  border-radius: 50%;
}
.donut-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}

/* Segmented 1/X/2 probability bar (per competitor research, "probability
   bars beat donuts"). Three side-by-side segments whose widths reflect
   each outcome's probability. The dominant segment shows its % inside.
   Used on /fixture/<id> for Match Result. */
/* v5.7.215 — Goals distribution histogram. Bars 0..5 + 6+ collapse
   bin. Heights normalised to the max bar = 96% so the tallest reads
   confidently against the 120px frame. Modal bar in brand cyan. */
.goals-histo-meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.goals-histo-meta strong { color: var(--text); font-weight: 600; }
.goals-histo {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 130px;
  padding: 18px 4px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ghi-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: end;
  position: relative;
}
.ghi-fill {
  width: 100%;
  background: var(--bg-elev, var(--bg3, rgba(255, 255, 255, 0.06)));
  border-radius: 3px 3px 0 0;
  transition: all 300ms ease;
}
.ghi-bar.is-mode .ghi-fill { background: var(--brand, #2ff0d6); }
.ghi-pct {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.ghi-bar.is-mode .ghi-pct { color: var(--brand, #2ff0d6); font-weight: 600; }
.ghi-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ghi-bar.is-mode .ghi-label { color: var(--brand, #2ff0d6); font-weight: 600; }

/* Market-line list — compact rows of over/under thresholds under the
   Goals/Cards histograms. Picked row gets the green-positive treatment. */
.market-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ml-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card, rgba(255, 255, 255, 0.02));
  font-size: 13px;
  transition: border-color 0.18s ease;
}
.ml-row:hover { border-color: rgba(255, 255, 255, 0.18); }
.ml-row-pick {
  border-color: var(--positive, #4ADE80);
  background: rgba(74, 222, 128, 0.08);
}
.ml-row-pick .ml-name { color: var(--positive, #4ADE80); font-weight: 600; }
/* v5.7.232 — softer "Our pick" tier for per-market favourites that
   are NOT the Main Outcome. Brand-cyan border instead of positive-
   green; no fill tint to keep it visually quieter. */
.ml-row-our-pick {
  border-color: rgba(47, 240, 214, 0.50);
  background: rgba(47, 240, 214, 0.04);
}
.ml-row-our-pick .ml-name { color: var(--brand, #2ff0d6); font-weight: 500; }
.ml-our-mark {
  background: rgba(47, 240, 214, 0.18);
  color: var(--brand, #2ff0d6);
  border: 1px solid rgba(47, 240, 214, 0.32);
}
.ml-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ml-prob {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 500;
}
.ml-row-pick .ml-prob { color: var(--text); }
.ml-edge {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ml-edge.pos { color: var(--positive, #4ADE80); }
.ml-edge.neg { color: var(--bad, #d04d3a); font-weight: 500; }
.ml-edge.dim { color: var(--text-dim); font-weight: 500; }
.sc-mark-tiny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--brand, #2ff0d6);
  color: var(--bg, #07090e);
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* v5.7.214 — Match Result segmented bar (replaces prob-stack on
   /fixture/<id>). Visual treatment per user-mockup: full-bleed bar,
   percentage on top + short-name underneath, the model's pick gets
   green-positive fill so it's the visual anchor. */
.seg-legend {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 0 4px;
}
.seg-bar {
  display: flex;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card, var(--bg-elev));
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 250ms ease;
  min-width: 0;
  position: relative;
  padding: 0 4px;
}
.seg-pct {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.seg-name {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.85;
}
.seg-home { background: rgba(47, 240, 214, 0.15); color: #B6E3FA; }
.seg-draw { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.seg-away { background: rgba(74, 222, 128, 0.15); color: #A7E9BD; }
.seg.is-pick {
  background: var(--positive, #4ADE80);
  color: #052711;
}
.seg.is-pick .seg-pct { font-weight: 700; }
.seg.is-pick .seg-name { opacity: 1; font-weight: 600; }

/* v5.7.232 — "Our pick" treatment for per-market favourites that are
   NOT the Main Outcome / SharpCast Pick. Per James 2026-05-08:
   "we only should have 1 'smartcast' this represents our best pick,
    others are just 'our pick' or something similar".
   Brand-cyan tint instead of positive-green; less prominent than
   .is-pick but still tagged so the user knows it's a model pick. */
.seg.is-our-pick {
  background: rgba(47, 240, 214, 0.30);
  color: #DCE9FF;
}
.seg.is-our-pick .seg-pct { font-weight: 700; }
.seg.is-our-pick .seg-name { opacity: 1; font-weight: 500; }
.split.is-our-pick {
  background: rgba(47, 240, 214, 0.30);
}
.split.is-our-pick .split-name,
.split.is-our-pick .split-pct,
.split.is-our-pick .split-pick-tag { color: #DCE9FF; }

/* v5.7.221 — flat .is-dominant treatment for non-Markets seg-bars (H2H,
   future surfaces) where there's no SharpCast pick to highlight as
   .is-pick. Slight opacity boost on the dominant slice so the eye knows
   where to land without misrepresenting it as a recommended bet. */
.seg.is-dominant { box-shadow: inset 0 -2px 0 var(--brand, #2ff0d6); }
.seg.is-dominant .seg-pct { font-weight: 700; }
.seg.is-dominant .seg-name { opacity: 1; }

/* v5.7.221 — H2H summary strip (Avg goals · BTTS rate · Sample). Mono
   numerics, sits below the seg-bar in the Form tab's H2H block. Same
   pattern as the goals-histo-meta but tighter; not a card, just a
   stacked-label row. */
/* v5.7.236 — H2H redesigned: row of W/L/D pills + aggregate seg-bar
   + 3-cell summary strip. Pattern lifted from SofaScore / FotMob
   match-detail H2H blocks (per the design-research agents). */
.h2h-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.h2h-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
}
.h2h-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.h2h-sig {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(245, 185, 66, 0.10);
  color: var(--gold, #f5b942);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: 6px;
  cursor: help;
}
.h2h-recent {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.h2h-recent-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.h2h-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: help;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.h2h-pill-w {
  background: rgba(74, 222, 128, 0.18);
  color: var(--positive, #4ADE80);
  border-color: rgba(74, 222, 128, 0.40);
}
.h2h-pill-d {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border-color: var(--border);
}
.h2h-pill-l {
  background: rgba(208, 77, 58, 0.18);
  color: var(--bad, #d04d3a);
  border-color: rgba(208, 77, 58, 0.40);
}
.h2h-recent-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
  padding: 0 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}
.h2h-recent-key-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.h2h-recent-key-item .h2h-pill {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.h2h-aggregate {
  margin-bottom: 8px;
}
.h2h-aggregate-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.h2h-aggregate .seg-bar { margin-bottom: 0; height: 44px; }
.h2h-aggregate .seg-pct { font-size: 18px; }
.h2h-foot {
  font-size: 11px;
  margin-top: 10px;
  font-style: italic;
  color: var(--text-dim);
}

.h2h-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.h2h-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.h2h-strip-lab {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.h2h-strip-val {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* BTTS split bar — 2-segment yes/no, sharpcast pick gets positive fill. */
.split-bar {
  display: flex;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card, var(--bg-elev));
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 0 12px;
  transition: all 250ms ease;
}
.split-name {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.split-pct {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.split-pick-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
}
.split.is-pick {
  background: var(--positive, #4ADE80);
}
.split.is-pick .split-name,
.split.is-pick .split-pct,
.split.is-pick .split-pick-tag { color: #052711; }
.split.dim { background: rgba(255, 255, 255, 0.04); }

/* v5.7.231 — Draw No Bet foot disclaimer (one-liner explaining stake-
   refund mechanic). Sits below the .split-bar, italic, low-emphasis. */
.dnb-foot {
  margin-top: 8px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  font-style: italic;
}

.prob-stack {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  margin: var(--space-3) 0 var(--space-4);
}
.prob-stack-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 0 8px;
  min-width: 0;
  position: relative;
  transition: flex-grow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
}
.prob-stack-seg-home { background: linear-gradient(135deg, rgba(47,240,214,0.32), rgba(47,240,214,0.20)); border-right: 1px solid rgba(0,0,0,0.20); }
.prob-stack-seg-draw { background: linear-gradient(135deg, rgba(123,142,171,0.20), rgba(123,142,171,0.12)); color: var(--text-muted); border-right: 1px solid rgba(0,0,0,0.20); }
.prob-stack-seg-away { background: linear-gradient(135deg, rgba(74,222,128,0.32), rgba(74,222,128,0.20)); }
.prob-stack-seg.is-dominant { color: var(--text); font-weight: 700; }
.prob-stack-seg.is-dominant.prob-stack-seg-home { background: var(--grad-brand); color: var(--text-inverse); }
.prob-stack-seg.is-dominant.prob-stack-seg-away { background: var(--grad-positive); color: var(--text-inverse); }
.prob-stack-seg.is-dominant.prob-stack-seg-draw { background: linear-gradient(135deg, rgba(123,142,171,0.55), rgba(123,142,171,0.40)); color: var(--text); }
/* Below 6% width, hide the % label (no room) */
.prob-stack-seg-tiny { font-size: 0; padding: 0; }

/* Companion legend strip with team names + tiny prob */
.prob-stack-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.prob-stack-legend > * { display: flex; align-items: center; gap: 6px; }
.prob-stack-legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.prob-stack-legend-dot.home { background: var(--brand); }
.prob-stack-legend-dot.draw { background: rgba(123,142,171,0.6); }
.prob-stack-legend-dot.away { background: var(--positive); }

/* Sparkline path — small inline SVG line chart */
.sparkline {
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: 64px;
}
.sparkline-path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sparkline-fill {
  fill: var(--brand-soft);
  stroke: none;
}
.sparkline.positive .sparkline-path { stroke: var(--positive); }
.sparkline.positive .sparkline-fill { fill: var(--positive-soft); }
.sparkline.negative .sparkline-path { stroke: var(--negative); }
.sparkline.negative .sparkline-fill { fill: var(--negative-soft); }

/* Section-fade-in — applies when a section is first revealed. Lightweight,
   no JS required. Used for staggered card grids. Respects prefers-reduced. */
@keyframes section-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: section-fade-in var(--dur-base) var(--ease-out) both;
}
.fade-in-stagger > * {
  opacity: 0;
  animation: section-fade-in var(--dur-base) var(--ease-out) both;
}
.fade-in-stagger > *:nth-child(1) { animation-delay: calc(var(--dur-stagger) * 0); }
.fade-in-stagger > *:nth-child(2) { animation-delay: calc(var(--dur-stagger) * 1); }
.fade-in-stagger > *:nth-child(3) { animation-delay: calc(var(--dur-stagger) * 2); }
.fade-in-stagger > *:nth-child(4) { animation-delay: calc(var(--dur-stagger) * 3); }
.fade-in-stagger > *:nth-child(5) { animation-delay: calc(var(--dur-stagger) * 4); }
.fade-in-stagger > *:nth-child(6) { animation-delay: calc(var(--dur-stagger) * 5); }
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-stagger > * { animation: none; opacity: 1; transform: none; }
}

/* Helper classes for tabular numbers (brand pack §13.1).
   `.mono` already exists in base.css — `.tabular` is the explicit
   tabular-numbers helper for tables of differential values. */
.tabular { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Edge tier chips (spec amendments v1.3 §6.1-6.2) ──────────────────────
   Used on every Tip Card and every Markets-tab row. Same labels, same
   colours, same shape across the site. Chip text always present — never
   colour alone (WCAG 1.4.1).

   v1.3 finalised the ladder + restyled the chip:
     - Pill shape (border-radius 999px, was 4px)
     - Sentence case (no text-transform: uppercase)
     - "Strong" tier promoted to --positive solid (was tint 70%)
     - "Healthy" promoted to --brand (was tint 50%)
     - "Under review" replaces v1.0's "Huge" — uses --warning for the
       quarantine signal (likely data error), not green/positive.
     - Padding tightened to spec values (0.25rem 0.625rem). */
.edge-chip,
.conf-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}

/* v5.7.223 — Confidence chip (replaces Conviction/Edge-tier vocabulary
   in the user-facing UI per James 2026-05-08: "Confidence makes more
   sense, High/Medium/Low and for our picks 'SharpCast'"). Three tiers
   keyed off model edge:
     2-5%   Low      — quiet outline, secondary text
     5-8%   Medium   — brand-cyan fill (positive but not dominant)
     8-12%  High     — green fill (peak confidence)
     SharpCast       — brand-cyan strong fill, the committed pick badge */
.conf-chip-low      { background: transparent; color: var(--text); border-color: var(--bg-elev-3); }
.conf-chip-medium   { background: var(--brand); color: var(--bg); border-color: var(--brand); }
.conf-chip-high     { background: var(--positive); color: var(--bg); border-color: var(--positive); }
.conf-chip-sharpcast { background: var(--brand-strong, var(--brand)); color: var(--bg); border-color: var(--brand-strong, var(--brand)); font-weight: 600; }

/* Legacy edge-chip-* selectors — kept so any surface that hasn't been
   swept yet still styles. New templates should use .conf-chip-* (above).
   v5.7.197 contrast bumps preserved; the tier names map onto the new
   confidence buckets (Slight+Modest → Low, Healthy → Medium, Strong →
   High, SharpCast unchanged, Underreview/Negative no longer surfaced
   from the macro). */
.edge-chip-Negative   { background: var(--negative-tint); color: var(--text); border-color: rgba(251,93,107,0.42); }
.edge-chip-Slight     { background: transparent; color: var(--text-muted); border-color: var(--bg-elev-3); }
.edge-chip-Modest     { background: transparent; color: var(--text); border-color: var(--bg-elev-3); }
.edge-chip-Healthy    { background: var(--brand); color: var(--bg); border-color: var(--brand); }
.edge-chip-Strong     { background: var(--positive); color: var(--bg); border-color: var(--positive); }
.edge-chip-Underreview { background: var(--warning); color: var(--bg); border-color: var(--warning); }
.edge-chip-Headline   { background: var(--brand-strong); color: var(--bg); border-color: var(--brand-strong); }
.edge-chip-SharpCast  { background: var(--brand); color: var(--bg); border-color: var(--brand); }

/* ── Status pills (spec 12.1) ────────────────────────────────────────
   Open / Locked / Settled W / Settled L / Settled Push. */
.status-pill {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.status-pill-open    { background: rgba(47,240,214,0.10); color: var(--brand); border-color: rgba(47,240,214,0.30); }
.status-pill-locked  { background: var(--neutral-tint); color: var(--text-muted); border-color: rgba(123,142,171,0.28); }
.status-pill-w       { background: var(--positive-tint-30); color: var(--positive); border-color: rgba(74,222,128,0.40); }
.status-pill-w::before { content: "✓ "; }
.status-pill-l       { background: var(--negative-tint); color: var(--negative); border-color: rgba(251,93,107,0.28); }
.status-pill-l::before { content: "✗ "; }
.status-pill-push    { background: var(--neutral-tint); color: var(--text-muted); border-color: rgba(123,142,171,0.28); }
.status-pill-push::before { content: "= "; }
/* Live state — populated by v5.7.105 poll-live cron from /fixtures?live=all.
   The pulsing dot signals the score is live data, not a snapshot. */
.status-pill-live {
  background: rgba(231, 76, 60, 0.12);
  color: #ff6b5e;
  border-color: rgba(231, 76, 60, 0.40);
}
.status-pill-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5247;
  margin-right: 5px;
  vertical-align: 1px;
  animation: status-pill-pulse 1.6s ease-in-out infinite;
}
.status-pill-ht  { background: var(--neutral-tint); color: var(--text); border-color: rgba(123,142,171,0.50); }
.status-pill-warn { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.45); }
@keyframes status-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill-dot { animation: none; }
}

/* "Pre-game pick" tag — appears next to the SC pick badge whenever a fixture
   is in-play, locked, or settled. Spec §11.1: a kicked-off fixture is Locked
   and the model does not adjust during play, so the pick visible to the user
   is always a pre-kickoff recommendation. The tag makes that explicit. */
.pregame-tag {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  margin-left: 6px;
  cursor: help;
  vertical-align: 1px;
}

/* ── Glossary popover (spec §12.5) ───────────────────────────────────
   Terms wear a dotted underline + cursor: help. On hover/focus/tap the
   .gloss-popover element is positioned absolutely under the term by
   /static/js/glossary_popover.js — definitions fetched once from
   /api/glossary and cached in memory. */
.gloss-term {
  border-bottom: 1px dotted var(--text-dim);
  cursor: help;
  position: relative;
}
.gloss-term:hover, .gloss-term:focus { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Glossary popover — desktop (v1.3 §12.2) ────────────────────────────
   Inverted colour treatment: --text background + --bg text. The contrast
   makes the popover stand out from the dark page bg, drawing attention
   to the definition. */
.gloss-popover {
  position: absolute;
  z-index: 100;
  max-width: 320px;
  min-width: 240px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-size: 0.8125rem;  /* 13px per v1.3 §12.2 */
  line-height: 1.5;
  pointer-events: auto;
}
.gloss-popover-name {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bg);
  margin-bottom: 4px;
  text-transform: none;
}
.gloss-popover-def {
  color: var(--bg);
  margin-bottom: 6px;
}
.gloss-popover-eg {
  color: var(--bg-elev-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
/* v5.7.187 — accessibility pack (WCAG 2.1 AA spot fixes).
   Skip-to-content link: visually hidden until focused; reveals as a
   high-contrast pill anchored to the top-left so keyboard users
   bypass the masthead nav on every page (WCAG 2.4.1). */
.skip-link {
  position: fixed;
  top: -40px;
  left: 12px;
  z-index: 10000;
  background: var(--brand);
  color: var(--bg, #07090e);
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; }

/* Global focus-visible baseline so every interactive element gets a
   visible focus ring for keyboard users (WCAG 2.4.7). Components can
   override with their own .nav-dd-trigger:focus-visible etc. */
:where(a, button, [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* aria-current="page" — applies the same active styling as the legacy
   .active class so navs that opt into aria-current don't lose their
   visual indicator. */
[aria-current="page"] { color: var(--text); }

/* v5.7.182 — glossary popover footer links. Two-up flex when both
   "Formula →" (methodology deep-link) and "Full glossary →" are
   present; single link stretches edge-to-edge. */
.gloss-popover-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gloss-popover-link {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--bg-elev-3);
  letter-spacing: .02em;
  text-decoration: none;
  font-weight: 500;
}
.gloss-popover-link-method { color: var(--brand); font-weight: 600; }
.gloss-popover-link:hover { color: var(--bg); text-decoration: underline; }
.gloss-popover-link-method:hover { color: var(--brand-strong, var(--brand)); }
/* Mobile sheet variants. */
.gloss-sheet-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); }
.gloss-sheet-link-method { color: var(--brand); font-weight: 600; }

/* ── Glossary mobile bottom sheet (v1.3 §12.3) ──────────────────────────
   On phones (< 600px / 37.5em), tap a glossary term opens a sheet that
   slides up from the bottom. Inverted colour treatment again so the
   sheet stands out against the dark dimmed page. */
.gloss-sheet-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(7, 9, 14, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.gloss-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.gloss-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  max-height: 50vh;
  background: var(--bg-elev-2);
  color: var(--text);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 250ms var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gloss-sheet.open { transform: translateY(0); }
.gloss-sheet-handle {
  display: block;
  width: 36px; height: 4px;
  background: var(--text-dim);
  border-radius: 2px;
  margin: 8px auto;
  flex-shrink: 0;
}
.gloss-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 4px 16px 8px;
  flex-shrink: 0;
}
.gloss-sheet-name {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}
.gloss-sheet-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 8px;
  margin: -4px -8px 0 0;
}
.gloss-sheet-close:hover { color: var(--text); }
.gloss-sheet-body {
  padding: 0 16px 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-y: auto;
  flex: 1 1 auto;
}
.gloss-sheet-body p { color: var(--text); margin: 0 0 12px; }
.gloss-sheet-eg {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--bg);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin: 8px 0;
  color: var(--text-muted);
}
.gloss-sheet-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--brand);
  text-decoration: none;
}
.gloss-sheet-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .gloss-sheet, .gloss-sheet-backdrop { transition-duration: 0ms; }
}

/* ── Paywall scrim (spec section 6) ─────────────────────────────────
   filter: blur(6px) on the underlying content; overlay panel with
   --blur background and CTA inside. One paywall scrim per page max. */
.paywall-section { position: relative; }
.paywall-content { filter: blur(6px); pointer-events: none; user-select: none; }
.paywall-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blur);
  border-radius: var(--radius-md);
  z-index: 2;
}
.paywall-cta {
  background: var(--bg-elev);
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  max-width: 440px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(47,240,214,0.15), 0 8px 32px rgba(0,0,0,0.4);
}
.paywall-cta h3,
.paywall-cta h2.paywall-headline { font-family: 'Geist', system-ui, sans-serif; font-size: 22px; letter-spacing: .04em; color: var(--text); margin-bottom: var(--space-2); margin-top: 0; }
.paywall-cta p  { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-bottom: var(--space-4); }
.paywall-cta .btn-primary {
  display: inline-block; background: var(--brand); color: #04130f;
  padding: 10px 18px; border-radius: var(--radius-sm); text-decoration: none;
  font-weight: 600; font-size: 13px; letter-spacing: .03em; margin-right: var(--space-2);
}
.paywall-cta .btn-primary:hover { background: var(--brand-strong); }
.paywall-cta .btn-secondary {
  display: inline-block; color: var(--text-muted);
  padding: 10px 14px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: 13px; border: 1px solid var(--border);
}
.paywall-cta .btn-secondary:hover { color: var(--text); border-color: var(--border-strong); }

/* ── KPI card (brand pack §6.4 + UI/UX spec §5.11.2) ──────────────────
   Big-number cards used on home, dashboard, results. The numeric value
   stays in --text; the sign character (+/−) carries result colour. This
   separates "this is a number" from "this number is good news". */
.kpi-card {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}
.kpi-card-link:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.kpi-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.kpi-card-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.kpi-card-sign-positive { color: var(--positive); }
.kpi-card-sign-negative { color: var(--negative); }
.kpi-card-sign-neutral  { color: var(--text-muted); }
.kpi-card-num { color: var(--text); }
.kpi-card-unit { color: var(--text); margin-left: 1px; }
.kpi-card-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* ── Historical-mode banner (spec amendments §5.3) ────────────────────
   Top of /fixture/<slug> when the fixture has settled. Calm, informative,
   not an alert — uses --warning-soft as a tinted backdrop, not the full
   warning palette. */
.hist-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 var(--space-4);
  background: var(--warning-soft);
  border: 1px solid rgba(245, 185, 66, 0.35);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.hist-banner-icon { color: var(--warning); font-size: 14px; flex-shrink: 0; }
.hist-banner-text { flex: 1 1 auto; color: var(--text-muted); }
.hist-banner-text .hist-banner-ts { color: var(--text); }
.hist-banner-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.hist-banner-link:hover { color: var(--brand-strong); text-decoration: underline; }
@media (max-width: 540px) {
  .hist-banner { flex-wrap: wrap; }
  .hist-banner-link { width: 100%; padding-top: 4px; border-top: 1px solid rgba(245, 185, 66, 0.20); margin-top: 4px; }
}