/* ===========================================================================
 simplyodds v2 — Polymarket-inspired probability-first design system.
 One sans (Switzer), one mono (JetBrains Mono), one accent (#7C3AED).
 =========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
 /* type */
 --sans: "Switzer", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
 --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

 /* ink — Polymarket-like, mostly neutrals + one accent */
 --ink-0: #0a0a0b; /* main text */
 --ink-1: #2a2a2e; /* secondary text */
 --ink-2: #5b5b63; /* tertiary text */
 --ink-3: #8a8a93; /* hint */
 --ink-4: #b8b8c0; /* faint */

 --bg-0: #ffffff; /* page */
 --bg-1: #f7f7f8; /* subtle surface */
 --bg-2: #f0f0f2; /* hover */
 --bg-3: #e7e7eb; /* divider strong */
 --line: #ebebef; /* divider */
 --line-2: #d8d8de; /* divider stronger */

 /* accent */
 --accent: #7C3AED;
 --accent-soft: #f3eafe;
 --accent-ink: #ffffff;

 /* state */
 --up: #16a34a;
 --up-soft: #ecfdf3;
 --down: #dc2626;
 --down-soft: #fef2f2;
 --warn: #f59e0b;

 /* bookmaker CTA — electric blue, replaces prior orange */
 --cta: #1B5BFF;
 --cta-hover: #1448D6;
 --cta-ink: #ffffff;

 /* shape */
 --r-sm: 6px;
 --r-md: 10px;
 --r-lg: 14px;
 --r-pill: 999px;

 /* shadow — used sparingly */
 --shadow-1: 0 1px 2px rgba(15,15,30,.04), 0 1px 0 rgba(15,15,30,.02);
 --shadow-2: 0 4px 16px rgba(15,15,30,.06), 0 1px 0 rgba(15,15,30,.03);
 --shadow-pop: 0 12px 32px rgba(15,15,30,.10);

 /* layout */
 --content-max: 1120px;
 --rail: 240px;
 --header-h: 60px;

 /* type sizes */
 --t-display: 36px;
 --t-h1: 28px;
 --t-h2: 22px;
 --t-h3: 17px;
 --t-body: 15px;
 --t-sm: 13px;
 --t-xs: 12px;

 /* Legacy v1 token aliases. The SEO match-page CSS (ported in from
 /styles.css) references --text-1/2/3, --line-1, --bg-3 etc. Map them
 onto the v2 tokens so a single source of truth still controls colour. */
 --text-1: var(--ink-0);
 --text-2: var(--ink-2);
 --text-3: var(--ink-3);
 --line-1: var(--line);
 --cta-text: var(--cta-ink);
 --cta-shadow: 0 1px 0 rgba(0,0,0,.10) inset, 0 1px 0 rgba(255,255,255,.18) inset;
}

/* Mobile font bump: nudge body and the smaller scales up so cards read comfortably on phones */
@media (max-width: 720px) {
 :root {
 --t-body: 16px;
 --t-sm: 14px;
 --t-xs: 13px;
 --t-h3: 18px;
 --t-h2: 22px;
 --t-h1: 26px;
 }
}

/* ── Reset (lightweight) ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body {
 font-family: var(--sans);
 font-size: var(--t-body);
 line-height: 1.5;
 color: var(--ink-0);
 background: var(--bg-0);
 min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
input, select { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* numeric — wherever we show prices/percentages */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ── Odds chip ───────────────────────────────────────────────────────────────
 Every decimal odd shown on the site — in tables, inline prose, best-price
 summaries — is rendered through oddsChip() in components.js. When the chip
 has a known book it is an <a> with affiliate exit tracking; otherwise it is
 a non-interactive <span>. Default style is a subtle ink-tinted pill, with a
 --best variant in CTA blue to highlight the longest price in a row.
 ────────────────────────────────────────────────────────────────────────── */
.odds-chip {
 display: inline-flex; align-items: center;
 padding: 1px 6px;
 border-radius: 6px;
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 font-feature-settings: "tnum";
 font-size: inherit;
 line-height: 1.4;
 background: var(--bg-2);
 color: var(--ink-0);
 text-decoration: none;
 border: 1px solid transparent;
 transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
a.odds-chip {
 color: var(--cta);
 cursor: pointer;
}
a.odds-chip:hover,
a.odds-chip:focus-visible {
 background: rgba(27, 91, 255, 0.10);
 border-color: rgba(27, 91, 255, 0.30);
 color: var(--cta-hover, #1448D6);
 text-decoration: none;
}
.odds-chip--best {
 background: rgba(27, 91, 255, 0.08);
 color: var(--cta);
 font-weight: 600;
}
a.odds-chip--best:hover {
 background: rgba(27, 91, 255, 0.16);
 border-color: rgba(27, 91, 255, 0.40);
}
.odds-chip--static {
 color: var(--ink-0);
}

/* Inside a market-table cell, drop the gutter so the chip fills naturally
 and the row stays compact. The cell already has its own padding. */
.mp-mkt__cell .odds-chip { padding: 2px 8px; font-size: 13px; }
.mp-mkt__cell.is-best .odds-chip { background: rgba(27, 91, 255, 0.12); font-weight: 600; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.so-header {
 position: sticky; top: 0; z-index: 50;
 height: var(--header-h);
 background: rgba(255,255,255,.94);
 backdrop-filter: saturate(140%) blur(8px);
 border-bottom: 1px solid var(--line);
}
.so-header__inner {
 max-width: var(--content-max);
 margin: 0 auto;
 height: 100%;
 padding: 0 20px;
 display: flex; align-items: center; gap: 16px;
}
.so-logo { display: inline-flex; align-items: center; }
.so-logo svg { height: 24px; width: auto; }

.so-nav { display: flex; gap: 4px; margin-left: 18px; }
.so-nav a {
 padding: 6px 10px; border-radius: var(--r-sm);
 font-size: 15px; font-weight: 500; color: var(--ink-1);
}
.so-nav a:hover { background: var(--bg-2); color: var(--ink-0); }
.so-nav a.is-active { color: var(--accent); background: var(--accent-soft); }

.so-header__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Search button in the top bar */
.so-search-btn {
 display: inline-flex; align-items: center; gap: 8px;
 height: 34px; padding: 0 10px 0 10px;
 background: var(--bg-1); border: 1px solid var(--line);
 border-radius: var(--r-sm); color: var(--ink-2);
 font-size: 13px; font-weight: 500; cursor: pointer;
 transition: background .12s, color .12s, border-color .12s;
}
.so-search-btn:hover { background: var(--bg-2); color: var(--ink-0); border-color: var(--line-2); }
.so-search-btn__hint { color: var(--ink-2); }
.so-search-btn__kbd {
 display: inline-flex; align-items: center; justify-content: center;
 min-width: 18px; height: 18px; padding: 0 4px;
 background: var(--bg-0); border: 1px solid var(--line); border-radius: 4px;
 font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 color: var(--ink-2);
}
@media (max-width: 720px) {
 .so-search-btn__hint, .so-search-btn__kbd { display: none; }
 .so-search-btn { padding: 0; width: 34px; justify-content: center; }
}

/* Mode toggle (Simple / Pro) — single source of truth via [data-mode] on <html> */
.mode-toggle {
 display: inline-flex; align-items: center; gap: 0;
 background: var(--bg-1); border: 1px solid var(--line);
 border-radius: var(--r-pill); padding: 3px;
 font-size: var(--t-xs); font-weight: 600;
}
.mode-toggle button {
 padding: 5px 12px; border-radius: var(--r-pill);
 color: var(--ink-2); letter-spacing: .02em; text-transform: uppercase;
 transition: color .12s, background .12s;
}
.mode-toggle button:hover { color: var(--ink-0); }
html[data-mode="simple"] .mode-toggle [data-mode-target="simple"],
html[data-mode="pro"] .mode-toggle [data-mode-target="pro"] {
 background: var(--ink-0); color: #fff;
}

/* ── Sub-nav (sticky competition pills) ──────────────────────────────────── */
.so-subnav {
 border-bottom: 1px solid var(--line);
 background: var(--bg-0);
}
.so-subnav__inner {
 max-width: var(--content-max);
 margin: 0 auto;
 padding: 0 20px;
 display: flex; gap: 6px;
 overflow-x: auto;
 scrollbar-width: none; -ms-overflow-style: none;
}
.so-subnav__inner::-webkit-scrollbar { display: none; }
.so-subnav__inner a {
 flex: 0 0 auto;
 padding: 9px 12px;
 font-size: 13px; font-weight: 500;
 color: var(--ink-2);
 border-bottom: 2px solid transparent;
 white-space: nowrap;
 transition: color .12s, border-color .12s;
}
.so-subnav__inner a:hover { color: var(--ink-0); }
.so-subnav__inner a.is-active {
 color: var(--accent);
 border-bottom-color: var(--accent);
 font-weight: 600;
}

/* ── Layout shell ────────────────────────────────────────────────────────── */
/* Hard guard: nothing should ever push the document wider than the viewport */
html, body { max-width: 100%; overflow-x: hidden; }
.so-main { padding: 0 0 80px; }

/* Site-wide shell: persistent left sidebar + scrolling content */
.so-shell {
 max-width: calc(var(--content-max) + var(--sidebar-w) + 36px);
 margin: 0 auto;
 padding: 24px 20px 0;
 display: grid;
 grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
 gap: 28px;
}
:root { --sidebar-w: 220px; }
.so-content { min-width: 0; }
.so-sidebar { align-self: start; position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 16px); }
:root { --subnav-h: 40px; }
.so-sidebar__group { margin-bottom: 22px; }
.so-sidebar__h {
 font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
 letter-spacing: .08em; text-transform: uppercase;
 margin: 0 0 8px 10px;
}
.so-sidebar__list { display: flex; flex-direction: column; }
.so-sidebar__list a {
 padding: 7px 10px; border-radius: var(--r-sm);
 font-size: 14px; color: var(--ink-1);
 display: flex; align-items: center; justify-content: space-between; gap: 8px;
 line-height: 1.3;
}
.so-sidebar__list a .count {
 font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
 background: var(--bg-1); padding: 1px 6px; border-radius: 999px;
}
.so-sidebar__list a:hover { background: var(--bg-2); color: var(--ink-0); }
.so-sidebar__list a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.so-sidebar__list a.is-active .count { background: rgba(124, 58, 237, 0.14); color: var(--accent); }

@media (max-width: 1024px) {
 .so-shell { grid-template-columns: 1fr; padding: 16px 16px 0; }
 .so-sidebar { display: none; }
}

/* Breadcrumbs */
.so-breadcrumbs {
 font-size: 13px; color: var(--ink-2);
 margin: 0 0 12px;
 display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.so-breadcrumbs a { color: var(--ink-2); }
.so-breadcrumbs a:hover { color: var(--accent); }
.so-breadcrumbs .crumb-sep { color: var(--ink-3); margin: 0 2px; }
.so-breadcrumbs .crumb-current { color: var(--ink-0); font-weight: 500; }

.so-container { max-width: var(--content-max); margin: 0 auto; min-width: 0; }
.so-grid {
 display: grid;
 grid-template-columns: var(--rail) 1fr;
 gap: 28px;
 min-width: 0;
}
/* Single-column variant for pages that already have the persistent shell sidebar */
.so-grid--single { grid-template-columns: minmax(0, 1fr); }
/* Grid items default to min-width:auto which lets intrinsic content blow out
 the track width. Force every grid child to be allowed to shrink. */
.so-grid > * { min-width: 0; }
@media (max-width: 880px) { .so-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ── Page intro ──────────────────────────────────────────────────────────── */
.page-eyebrow {
 font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
 letter-spacing: .08em; text-transform: uppercase;
}
.page-title { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 4px; }
.page-sub { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 56ch; }

@media (max-width: 600px) { :root { --t-display: 26px; } }

/* ── Rail ────────────────────────────────────────────────────────────────── */
.rail { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.rail h3 { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
 letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 8px; }
.rail h3:first-child { margin-top: 0; }
.rail-list { display: flex; flex-direction: column; }
.rail-list a {
 padding: 8px 10px; border-radius: var(--r-sm);
 font-size: 14px; color: var(--ink-1); /* explicit 14px per UX brief */
 display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rail-list a:hover { background: var(--bg-2); color: var(--ink-0); }
.rail-list a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail-list a .count { color: var(--ink-3); font-size: var(--t-xs); }

@media (max-width: 880px) {
 /* Mobile: rail is moved into the hamburger drawer, hide on page */
 .rail { display: none; }
 .so-grid { grid-template-columns: 1fr; }
}

/* ── Match list ──────────────────────────────────────────────────────────── */
.match-list { display: flex; flex-direction: column; gap: 10px; }

/* MatchRow — the single most important component */
.match-row {
 background: var(--bg-0);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 16px;
 display: grid;
 grid-template-columns: 78px 1fr 200px 168px;
 grid-template-areas:
 "when teams pbar verdict"
 "pro pro pro pro";
 gap: 16px;
 align-items: center;
 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
 transition: border-color .12s, transform .12s, box-shadow .15s;
}
.match-row:hover { border-color: var(--line-2); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.match-row a, .match-row a:hover { color: inherit; text-decoration: none; }

.mr-when {
 grid-area: when;
 font-size: 12px; color: var(--ink-2);
 display: flex; flex-direction: column; gap: 2px;
 font-family: var(--sans);
}
.mr-when .day { font-weight: 600; color: var(--ink-1); font-size: 12px; }
.mr-when .time { font-family: var(--sans); font-size: 13px; color: var(--ink-0); font-weight: 700; font-variant-numeric: tabular-nums; }

.mr-teams { grid-area: teams; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-teams .league { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mr-teams__stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mr-team__name {
 font-size: 15px; font-weight: 600; color: var(--ink-0);
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Team monogram - 22px circle, deterministic colour, white initials */
.team-mono {
 display: inline-flex; align-items: center; justify-content: center;
 width: 22px; height: 22px; min-width: 22px;
 border-radius: 50%;
 background: var(--ink-2); color: #fff;
 font-family: var(--sans);
 font-size: 10px; font-weight: 700; letter-spacing: .02em;
 line-height: 1;
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Make the prob-bar slot in the match-row grid */
.match-row > .pbar { grid-area: pbar; }

/* ── ProbabilityBar — the "fair line" visualization ──────────────────────── */
.pbar {
 display: flex; flex-direction: column; gap: 6px;
 font-family: var(--sans);
 min-width: 0;
}
.pbar__track {
 display: flex;
 width: 100%;
 height: 18px;
 border-radius: 4px;
 overflow: hidden;
 background: var(--bg-2);
 border: 1px solid var(--line);
}
.pbar__fill {
 display: flex; align-items: center; justify-content: center;
 height: 100%;
 min-width: 0;
 overflow: hidden;
 background: color-mix(in srgb, var(--ink-2) 22%, transparent);
 transition: width .2s ease;
 position: relative;
}
.pbar__fill + .pbar__fill { box-shadow: inset 1px 0 0 rgba(255,255,255,.6); }
[data-theme="dark"] .pbar__fill + .pbar__fill { box-shadow: inset 1px 0 0 rgba(0,0,0,.4); }
/* Purple-themed outcome colours - Home & Away tuned to the #7C3AED accent */
.pbar__fill--home { background: #7C3AED; } /* primary purple, the accent */
.pbar__fill--draw { background: #94a3b8; } /* neutral grey, unchanged */
.pbar__fill--away { background: #1a1a1f; } /* near-black, matches ink-0 */
/* The best-value segment gets a subtle accent ring instead of a colour swap */
.pbar__fill.is-best { box-shadow: inset 0 0 0 2px var(--accent); }
.pbar__fill-pct {
 font-family: var(--mono); font-variant-numeric: tabular-nums;
 font-size: 11px; font-weight: 700;
 color: #ffffff;
 letter-spacing: .02em;
 text-shadow: 0 1px 1px rgba(0,0,0,.25);
 white-space: nowrap;
}
.pbar__legend {
 display: flex; gap: 14px;
 font-family: var(--sans);
 font-size: 12px;
 color: var(--ink-3);
 letter-spacing: .02em;
}
.pbar__leg {
 display: inline-flex; gap: 6px; align-items: center;
}
.pbar__leg-swatch {
 display: inline-block; width: 8px; height: 8px; border-radius: 2px;
 background: var(--ink-3);
}
.pbar__leg--home .pbar__leg-swatch { background: #7C3AED; }
.pbar__leg--draw .pbar__leg-swatch { background: #94a3b8; }
.pbar__leg--away .pbar__leg-swatch { background: #1a1a1f; }
.pbar__leg-key {
 text-transform: uppercase;
 font-weight: 600;
 color: var(--ink-3);
 font-size: 11px;
 letter-spacing: .06em;
}
.pbar__leg-val {
 font-family: var(--sans);
 font-weight: 700;
 color: var(--ink-0);
 font-size: 13px;
 font-variant-numeric: tabular-nums;
}
/* Compact variant used by the homepage match-row, drops the legend gap */
.pbar--compact { gap: 4px; }
.pbar--compact .pbar__track { height: 22px; }
.pbar--compact .pbar__legend { gap: 12px; font-size: 11px; }

/* In-bar overlay labels: small "1 78%" style inside each segment */
.pbar__fill-inner {
 display: inline-flex;
 align-items: baseline;
 gap: 4px;
 color: #ffffff;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 font-family: var(--sans);
 letter-spacing: 0.01em;
 white-space: nowrap;
 padding: 0 4px;
 max-width: 100%;
 overflow: hidden;
}
.pbar__fill-key {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 opacity: 0.9;
}
.pbar__fill .pbar__fill-pct {
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 font-size: 11px;
 font-weight: 700;
 color: #ffffff;
 letter-spacing: 0;
 text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.pbar--compact .pbar__fill-key { font-size: 10px; }
.pbar--compact .pbar__fill .pbar__fill-pct { font-size: 10.5px; }
.pbar__leg.is-best .pbar__leg-key,
.pbar__leg.is-best .pbar__leg-val { color: var(--accent); }
.pbar--empty .pbar__track { background: var(--bg-2); }

/* Verdict block - edge pill on top, best-price line below, right-aligned */
.mr-verdict {
 grid-area: verdict;
 font-size: 12px; color: var(--ink-2);
 display: flex; flex-direction: column; gap: 6px;
 align-items: flex-end;
 text-align: right;
 min-width: 0;
}

/* Animated edge percentage on first paint, counts up as page loads */
@keyframes edge-pill-pop {
 0% { opacity: 0; transform: translateY(2px) scale(0.95); }
 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.edge-pill__val.is-counting {
 display: inline-block;
 animation: edge-pill-pop .4s ease-out both;
}
.mr-verdict .edge { color: var(--up); font-weight: 700; font-family: var(--sans); }

/* The green edge pill - the visual hero of every value-bearing row */
.edge-pill {
 display: inline-flex; align-items: baseline; gap: 6px;
 padding: 5px 10px;
 border-radius: var(--r-pill);
 background: var(--up-soft);
 color: var(--up);
 border: 1px solid color-mix(in srgb, var(--up) 22%, transparent);
 font-weight: 700;
 white-space: nowrap;
 max-width: 100%;
}
.edge-pill__val {
 font-family: var(--mono); font-variant-numeric: tabular-nums;
 font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.edge-pill__where {
 font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--up) 80%, var(--ink-1));
 text-transform: none; letter-spacing: 0;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 max-width: 140px;
}
.edge-pill--none {
 background: var(--bg-1);
 color: var(--ink-3);
 border-color: var(--line);
}
.edge-pill--none .edge-pill__val { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; }

/* Best decimal price + book on each row, in mono, right of the edge pill */
.mr-best {
 display: inline-flex; align-items: baseline; gap: 4px;
 font-family: var(--mono); font-variant-numeric: tabular-nums;
 font-size: 12px; color: var(--ink-2);
 white-space: nowrap; max-width: 100%;
}
.mr-best__price { font-size: 14px; font-weight: 700; color: var(--ink-0); letter-spacing: -0.01em; }
.mr-best__sep { color: var(--ink-3); font-weight: 500; }
.mr-best__book { color: var(--ink-1); font-weight: 600; }
.mr-best--empty { color: var(--ink-3); font-style: italic; font-size: 12px; }

/* Pro-mode strip below each match row - shows the longest price per outcome */
.mr-pro {
 grid-area: pro;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 6px;
 margin-top: 4px;
 padding-top: 10px;
 border-top: 1px dashed var(--line);
}
.mr-pro__cell {
 display: inline-flex; align-items: baseline; gap: 6px;
 padding: 4px 8px;
 background: var(--bg-1);
 border-radius: var(--r-sm);
 font-family: var(--mono); font-variant-numeric: tabular-nums;
 font-size: 12px;
 min-width: 0;
}
.mr-pro__key {
 font-weight: 700; color: var(--ink-2);
 font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
}
.mr-pro__price { font-weight: 700; color: var(--ink-0); font-size: 13px; }
.mr-pro__book {
 color: var(--ink-2); font-weight: 600;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 min-width: 0;
}

/* Pro-only inline cells under each prob-bar segment */
.pbar-meta {
 display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
 margin-top: 4px;
}
.pbar-meta__cell {
 display: flex; flex-direction: column; align-items: center; padding: 4px 6px;
 font-size: 10px; color: var(--ink-3); letter-spacing: .02em;
}
.pbar-meta__cell .price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-1); font-size: var(--t-xs); }
.pbar-meta__cell .book { text-transform: uppercase; letter-spacing: .04em; }

/* Pro is OFF by default in Simple mode */
html[data-mode="simple"] .pro-only { display: none !important; }
html[data-mode="pro"] .simple-only { display: none !important; }

/* ── Match page ──────────────────────────────────────────────────────────── */
.mp { display: flex; flex-direction: column; gap: 24px; }
.mp-hero {
 border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px;
 background: linear-gradient(180deg, #fdfcff 0%, #ffffff 60%);
}
.mp-bc { font-size: var(--t-xs); color: var(--ink-2); margin-bottom: 8px; }
.mp-bc a:hover { color: var(--accent); }
.mp-bc span + span:before { content: "/"; padding: 0 6px; color: var(--ink-4); }
.mp-title { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.mp-when { font-size: var(--t-sm); color: var(--ink-2); }
.mp-pbar { margin-top: 16px; }
.mp-pbar .pbar { height: 44px; font-size: var(--t-body); }
.mp-pbar .pbar__seg { font-weight: 600; }
.mp-pbar-cap {
 display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
 margin-top: 6px;
}
.mp-pbar-cap div {
 text-align: center; font-size: var(--t-xs); color: var(--ink-2);
}
.mp-pbar-cap div b { color: var(--ink-0); display: block; font-size: var(--t-sm); font-weight: 600; }

/* ────────────────────────────────────────────────────────────────────────────
 Match-page verdict block
 ────────────────────────────────────────────────────────────────────────────
 Design rules:
 • Vertical single-column layout, never flex-row (children stack reliably).
 • Max content width 68ch — readable measure, avoids text overlap.
 • Background colour ENCODES meaning:
 High confidence → accent-soft (the brand positive tint)
 Medium / outlier → neutral surface, no celebratory colour
 Speculative → neutral surface with a quiet warning border
 We never use the value-positive purple on a speculative pick — that would
 be misencoding meaning, which the design system forbids.
 • One CTA, placed at the end of the block, not floated right.
*/
.mp-verdict {
 display: grid; gap: 10px;
 margin-top: 16px; padding: 18px 22px;
 background: var(--bg-1, #fff); border: 1px solid var(--line-2);
 border-radius: var(--r-md);
 font-size: var(--t-body);
 /* No max-width — match the rest of the hero column so the card doesn't
 read as off-centre next to the full-width Polymarket preview and line
 movement card. Prose lines inside are still capped at 68ch below. */
}
.mp-verdict > p { max-width: 68ch; }
.mp-verdict p { margin: 0; color: var(--ink-0); line-height: 1.55; }
.mp-verdict p b { color: var(--ink-0); font-weight: 600; }
.mp-verdict p.mp-ev {
 font-size: var(--t-sm, 14px);
 color: var(--ink-1);
}
.mp-verdict p.mp-ev .mp-ev-row {
 display: block;
 margin-top: 2px;
 color: var(--ink-2);
 font-size: var(--t-xs, 12px);
 font-family: var(--sans);
}

/* High confidence — celebrate */
.mp-verdict.is-high {
 background: var(--accent-soft);
 border-color: rgba(255, 153, 0, 0.30);
}
.mp-verdict.is-high p b { color: var(--accent); }

/* Medium confidence — calm amber, no shouting */
.mp-verdict.is-medium {
 background: rgba(217, 138, 0, 0.05);
 border-color: rgba(217, 138, 0, 0.35);
}

/* Speculative / marginal — quiet, neutral. We still need the card to read
 as a deliberate callout, so it gets a tiny accent stripe on the left edge
 and slightly stronger surface contrast than the page bg. No value-positive
 colour anywhere — the message is "no clear edge", not "bet this". */
.mp-verdict.is-speculative,
.mp-verdict.is-marginal {
 background: var(--bg-1, #fff);
 border-color: var(--line-2);
 border-left: 3px solid var(--ink-3);
 padding-left: 19px;
}
.mp-verdict.is-marginal .mp-verdict-tag { color: var(--ink-2); }

/* Inner hierarchy inside the verdict block.
 tag → headline → body → note → CTA (one direction down the page) */
.mp-verdict-tag {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--ink-2);
 margin: 0;
}
.mp-verdict.is-high .mp-verdict-tag { color: var(--accent); }
.mp-verdict.is-medium .mp-verdict-tag { color: #B07000; }
.mp-verdict-head {
 font-size: 17px;
 line-height: 1.4;
 color: var(--ink-0);
 margin: 0;
}
.mp-verdict-body {
 font-size: 14px;
 line-height: 1.55;
 color: var(--ink-1);
 margin: 0;
}
.mp-verdict-note {
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-2);
 font-style: italic;
 margin: 0;
 padding-top: 4px;
 border-top: 1px dashed var(--line);
}

/* Medium / Speculative / Marginal CTA — deliberately muted secondary button.
 It should read as a clear, clickable button (not a broken primary CTA),
 while still signalling "this isn't a recommendation". Solid white surface,
 strong ink border, justify content so it doesn't stretch full width. */
.mp-cta.mp-cta--is-medium,
.mp-cta.mp-cta--is-marginal,
.mp-cta.mp-cta--is-speculative {
 background: #fff !important;
 color: var(--ink-0) !important;
 border: 1.5px solid var(--ink-1);
 box-shadow: none;
 font-weight: 600;
 justify-self: start;
 min-height: 44px;
}
.mp-cta.mp-cta--is-medium:hover,
.mp-cta.mp-cta--is-marginal:hover,
.mp-cta.mp-cta--is-speculative:hover {
 border-color: var(--ink-0);
 background: var(--bg-1) !important;
 color: var(--ink-0) !important;
 transform: translateY(-1px);
}

/* Generic muted CTA modifier — used by book-ladder rows that aren't best */
.cta--muted {
 background: transparent !important;
 color: var(--ink-1) !important;
 border: 1px solid var(--line-2);
 box-shadow: none;
}
.cta--muted:hover {
 border-color: var(--ink-2);
 color: var(--ink-0) !important;
}

.mp-verdict .num.up,
.num.up { color: var(--up); }
.num.down { color: var(--down); }
.mp-cta {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 12px 20px; border-radius: var(--r-md);
 background: var(--cta) !important; color: var(--cta-ink) !important;
 font-weight: 700; font-size: var(--t-body); letter-spacing: .01em;
 white-space: nowrap;
 box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(255,153,0,0.18);
 text-decoration: none;
}
.mp-cta:hover { background: var(--cta-hover) !important; color: var(--cta-ink) !important; transform: translateY(-1px); }
.mp-cta .arrow { font-size: 16px; }

/* Book ladder */
.mp-books {
 border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.mp-books header {
 display: flex; align-items: center; justify-content: space-between; gap: 12px;
 padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-1);
}
.mp-books header h2 { margin: 0; font-size: var(--t-h3); font-weight: 600; }
.mp-books header .hint { font-size: var(--t-xs); color: var(--ink-2); }
.mp-books__list { display: flex; flex-direction: column; }
.mp-book-row {
 display: grid;
 grid-template-columns: 30px 1fr 90px 90px 90px 110px;
 gap: 12px; align-items: center;
 padding: 12px 18px; border-top: 1px solid var(--line);
 font-size: var(--t-sm);
}
.mp-book-row:first-child { border-top: 0; }
.mp-book-row.is-best { background: var(--accent-soft); }
.mp-book-row .logo {
 width: 28px; height: 28px;
 border-radius: var(--r-sm);
 display: flex; align-items: center; justify-content: center;
 overflow: hidden; position: relative;
}
.book-logo-wrap {
 position: relative; display: block; width: 100%; height: 100%;
}
.book-logo-img {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: contain; padding: 4px; background: transparent;
 border-radius: var(--r-sm);
}
.book-tile {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 border-radius: var(--r-sm);
}
.mp-book-row .book-name { font-weight: 600; color: var(--ink-0); }
.mp-book-row .price, .mp-book-row .implied, .mp-book-row .delta { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.mp-book-row .delta.up { color: var(--up); font-weight: 600; }
.mp-book-row .delta.down { color: var(--down); }
.mp-book-row .cta {
 justify-self: end;
 background: transparent; color: var(--ink-1);
 border: 1px solid var(--line-2); border-radius: var(--r-sm);
 padding: 6px 12px; font-weight: 600; font-size: var(--t-xs); letter-spacing: .02em;
}
.mp-book-row.is-best .cta { background: var(--cta) !important; color: var(--cta-ink) !important; border-color: var(--cta) !important; }
.mp-book-row .cta:hover { border-color: var(--accent); color: var(--accent); }
.mp-book-row.is-best .cta:hover { background: var(--cta-hover) !important; color: var(--cta-ink) !important; border-color: var(--cta-hover) !important; }

@media (max-width: 880px) {
 .match-row {
 /* Wider kick-off track + sans, day above time. Stops the time bleeding
 into the team-name column that we had at 64px. */
 grid-template-columns: 88px 1fr;
 grid-template-areas:
 "when teams"
 "pbar pbar"
 "verdict verdict"
 "pro pro";
 gap: 10px; padding: 12px 14px;
 }
 .match-row .mr-when { grid-area: when; }
 .match-row .mr-teams { grid-area: teams; }
 .match-row .pbar { grid-area: pbar; }
 .match-row .mr-verdict { grid-area: verdict; text-align: left; }
 .mr-when {
 flex-direction: column;
 align-items: flex-start;
 gap: 0;
 font-family: var(--sans);
 font-size: 12px;
 color: var(--ink-2);
 white-space: nowrap;
 text-transform: none;
 letter-spacing: 0;
 }
 .mr-when .day { font-size: 12px; font-weight: 600; color: var(--ink-1); text-transform: none; letter-spacing: 0; }
 .mr-when .time { font-size: 13px; font-weight: 700; color: var(--ink-0); font-variant-numeric: tabular-nums; font-family: var(--sans); }
 .mr-team { font-size: 15px; gap: 10px; }
 .team-mono { width: 22px; height: 22px; font-size: 11px; }
 .pbar__legend { font-size: 12px; }
 .pbar__leg-val { font-size: 13px; }
 .edge-pill__val { font-size: 16px; }
 .edge-pill__where { font-size: 13px; }
 .mr-best__price { font-size: 14px; }
 .mr-best__book { font-size: 11px; }
 /* Verdict row, brand odds on the left, edge pill on the right, separated by a grey stroke */
 .mr-verdict {
 display: flex; align-items: center; justify-content: space-between;
 gap: 12px; flex-wrap: nowrap; text-align: left;
 }
 .mr-verdict .edge-pill { order: 2; margin-left: auto; }
 .mr-verdict .mr-best {
 order: 1; flex: 0 1 auto;
 padding-right: 12px;
 border-right: 1px solid var(--line);
 }
 .mp-book-row { grid-template-columns: 28px 1fr 70px 70px; gap: 8px; padding: 10px 12px; }
 .mp-book-row .implied, .mp-book-row .cta { display: none; }
}

/* ── Filters row (above match list) ──────────────────────────────────────── */
.filters {
 display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
 margin: 18px 0 14px;
}
.filters .seg {
 display: inline-flex; background: var(--bg-1); border: 1px solid var(--line);
 border-radius: var(--r-pill); padding: 3px;
}
.filters .seg button {
 padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600;
 color: var(--ink-2); letter-spacing: .02em; text-transform: uppercase;
}
.filters .seg button:hover { color: var(--ink-0); }
.filters .seg button { transition: background .2s ease, color .15s ease, transform .12s ease; }
.filters .seg button.is-active { background: var(--ink-0); color: #fff; transform: scale(1.0); }
.filters .seg-soft button.is-active { background: var(--accent-soft); color: var(--accent); }
.mode-toggle button { transition: background .2s ease, color .15s ease; }
.so-nav a { transition: background .15s ease, color .15s ease; }

/* ── Empty / loading states ──────────────────────────────────────────────── */
.so-empty {
 border: 1px dashed var(--line-2); border-radius: var(--r-lg);
 padding: 40px 24px; text-align: center; color: var(--ink-2);
 background: var(--bg-1);
}
.so-empty h3 { margin: 0 0 4px; color: var(--ink-0); font-size: var(--t-h3); font-weight: 600; }
.so-loading {
 display: inline-flex; align-items: center; gap: 8px;
 color: var(--ink-2); font-size: var(--t-sm);
}
.so-loading::before {
 content: ""; width: 12px; height: 12px;
 border-radius: 50%; border: 2px solid var(--bg-3); border-top-color: var(--accent);
 animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton */
.skeleton {
 background: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
 background-size: 200% 100%;
 animation: shimmer 1.4s infinite linear;
 border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.match-row.is-skeleton { pointer-events: none; }
.match-row.is-skeleton > * { height: 22px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.so-footer {
 margin-top: 60px; padding: 30px 20px;
 border-top: 1px solid var(--line);
 font-size: var(--t-sm); color: var(--ink-2);
}
.so-footer__inner {
 max-width: var(--content-max); margin: 0 auto;
 display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px;
}
.so-footer h4 { font-size: var(--t-xs); font-weight: 600; color: var(--ink-1);
 letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.so-footer a:hover { color: var(--accent); }
.so-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.so-footer__legal { grid-column: 1 / -1; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-xs); }
@media (max-width: 700px) { .so-footer__inner { grid-template-columns: 1fr 1fr; } }

/* Badges */
.badge-soon {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 2px 8px; border-radius: var(--r-pill);
 background: var(--accent-soft); color: var(--accent);
 font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Compact, the eight-col odds grid (Pro view inside .mp-books) */
.pro-odds-grid {
 display: grid; grid-template-columns: repeat(10, 1fr);
 gap: 1px; background: var(--line); padding: 1px;
}
.pro-odds-grid > * { background: #fff; padding: 8px 6px; text-align: center; font-size: var(--t-xs); }
.pro-odds-grid .head { background: var(--bg-1); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }

/* ── Pro mode panels (match page) ─────────────────────────────────────────── */
.pro-section { margin-top: 28px; }
.pro-section__header {
 display: flex; align-items: baseline; justify-content: space-between;
 margin-bottom: 14px;
}
.pro-section__header h2 {
 font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; margin: 0;
}
.pro-section__header .hint { font-size: var(--t-xs); color: var(--ink-2); }
.pro-grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 760px) { .pro-grid { grid-template-columns: 1fr; } }
.pro-card {
 border: 1px solid var(--line); border-radius: var(--r-lg);
 padding: 18px 20px; background: #fff;
}
.pro-card h3 {
 font-size: var(--t-body); font-weight: 700; margin: 0 0 12px;
 letter-spacing: -.005em;
}
.pro-row {
 display: flex; justify-content: space-between; align-items: baseline;
 padding: 7px 0; border-bottom: 1px dashed var(--line);
 font-size: var(--t-sm); margin: 0;
}
.pro-row:last-child { border-bottom: 0; }
.pro-row span { color: var(--ink-2); }
.pro-row b { color: var(--ink-0); }
.pro-hint {
 margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5;
}
.pro-table { display: block; margin-top: 4px; }
.pro-thead, .pro-trow {
 display: grid; grid-template-columns: 1.4fr .8fr .7fr .7fr .7fr;
 gap: 8px; padding: 7px 0; font-size: var(--t-xs);
 border-bottom: 1px dashed var(--line);
 align-items: center;
}
.pro-thead {
 color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.pro-trow:last-child { border-bottom: 0; }
.pro-trow span:first-child { color: var(--ink-0); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────
 V2 COMPAT LAYER — reskin v1 page renderers (.lf-*, .tool-*, .lh-*,
 .tools-*, .mp-related) into the v2 design language.
 Applied via .v2-compat wrapper from main.js.
 ───────────────────────────────────────────────────────────────────────── */
.v2-compat { padding: 32px 0 80px; }
.v2-compat .v2-compat-sink { display: block; }

/* Breadcrumbs */
.v2-compat .lf-breadcrumb {
 display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
 font-size: var(--t-xs); color: var(--ink-2);
 margin: 0 0 22px;
}
.v2-compat .lf-breadcrumb a {
 color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.v2-compat .lf-breadcrumb a:hover { color: var(--accent); }
.v2-compat .lf-breadcrumb span:not([aria-current]) { color: var(--ink-3, #b5b5b5); }
.v2-compat .lf-breadcrumb [aria-current] { color: var(--ink-0); font-weight: 600; }

/* Article container + heads */
.v2-compat .lf-article { max-width: 880px; }
.v2-compat .lf-article.league-hub,
.v2-compat .lf-article.market-hub { max-width: 1080px; }

.v2-compat .lf-head { margin: 0 0 28px; }
.v2-compat .lf-head h1 {
 font-size: clamp(28px, 4.2vw, 40px);
 line-height: 1.1; letter-spacing: -0.02em; font-weight: 700;
 color: var(--ink-0); margin: 0 0 10px;
}
.v2-compat .lf-lede {
 font-size: var(--t-lg); color: var(--ink-1); line-height: 1.5;
 margin: 0; max-width: 64ch;
}

/* Sections + sub-heads */
.v2-compat .lf-section { margin: 36px 0; }
.v2-compat .lf-section h2 {
 font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em;
 margin: 0 0 14px; color: var(--ink-0);
}
.v2-compat .lf-section h3 {
 font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
 margin: 22px 0 10px; color: var(--ink-0);
}
.v2-compat .lf-section p { color: var(--ink-1); line-height: 1.6; font-size: 16px; margin: 0 0 12px; }
.v2-compat .lf-section ul,
.v2-compat .lf-section ol { color: var(--ink-1); line-height: 1.6; font-size: 16px; padding-left: 22px; margin: 0 0 12px; }
.v2-compat .lf-section li { margin-bottom: 6px; }
.v2-compat .lf-sub { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: -6px 0 14px; }
/* Match-list table on league + odds pages */
.v2-compat .lh-table { font-size: 14px; }
.v2-compat .lh-match { font-size: 14px; }
.v2-compat .lh-match a { color: var(--ink-0); text-decoration: none; }
.v2-compat .lh-match a:hover { color: var(--accent); }

/* TLDR - help-block treatment, neutral surface rather than accent tint */
.v2-compat .lf-tldr {
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-left: 3px solid var(--accent);
 border-radius: var(--r-md);
 padding: 14px 18px;
 color: var(--ink-0);
 font-size: var(--t-body);
 line-height: 1.55;
 margin: 0 0 24px;
}

/* FAQ */
.v2-compat .lf-faq { margin: 36px 0; }
.v2-compat .lf-faq h2 {
 font-size: var(--t-xl); font-weight: 700; margin: 0 0 14px;
}
.v2-compat .lf-faq-item {
 border-top: 1px solid var(--line);
 padding: 14px 0;
}
.v2-compat .lf-faq-item:last-child { border-bottom: 1px solid var(--line); }
.v2-compat .lf-faq-item summary {
 cursor: pointer; font-weight: 600; color: var(--ink-0);
 font-size: var(--t-body); list-style: none;
 display: flex; justify-content: space-between; align-items: center;
}
.v2-compat .lf-faq-item summary::-webkit-details-marker { display: none; }
.v2-compat .lf-faq-item summary::after {
 content: '+'; font-weight: 400; color: var(--ink-2); font-size: 20px;
}
.v2-compat .lf-faq-item[open] summary::after { content: '−'; color: var(--accent); }
.v2-compat .lf-faq-item p { margin: 10px 0 0; color: var(--ink-1); line-height: 1.6; }

/* Formula blocks */
.v2-compat .lf-formula {
 background: var(--bg-soft, #fafafa);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 18px;
 font-family: var(--mono); font-size: var(--t-sm);
 color: var(--ink-0); margin: 12px 0;
}

/* Empty state */
.v2-compat .lf-empty,
.v2-compat .tool-empty {
 border: 1px dashed var(--line-2);
 border-radius: var(--r-md);
 padding: 24px 20px;
 color: var(--ink-2);
 text-align: center;
}

/* TOC */
.v2-compat .lf-toc {
 background: var(--bg-soft, #fafafa);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 18px;
 margin: 0 0 24px;
}
.v2-compat .lf-toc h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; color: var(--ink-2); }
.v2-compat .lf-toc ul { padding: 0; list-style: none; margin: 0; }
.v2-compat .lf-toc a { color: var(--ink-1); text-decoration: none; }
.v2-compat .lf-toc a:hover { color: var(--accent); }

/* Related, presented as button chips not bullet links */
.v2-compat .mp-related {
 margin-top: 32px; padding: 18px 20px;
 border: 1px solid var(--line); border-radius: var(--r-md);
 background: var(--bg-soft, #fafafa);
}
.v2-compat .mp-related h2 { font-size: var(--t-body); margin: 0 0 10px; color: var(--ink-0); }
.v2-compat .mp-related ul { padding: 0; list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-compat .mp-related li { margin: 0; }
.v2-compat .mp-related a {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 14px;
 border: 1px solid var(--line);
 background: #fff;
 border-radius: var(--r-pill);
 color: var(--ink-0); text-decoration: none;
 font-weight: 600; font-size: 14px;
 transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.v2-compat .mp-related a:hover {
 background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
 text-decoration: none;
}

/* Tools grid */
.v2-compat .tools-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 12px; margin: 18px 0;
}
.v2-compat .tools-card {
 display: block; padding: 18px 20px;
 border: 1px solid var(--line); border-radius: var(--r-md);
 background: #fff; color: inherit; text-decoration: none;
 transition: border-color .15s, transform .15s;
}
.v2-compat .tools-card:hover {
 border-color: var(--accent); transform: translateY(-1px);
}
.v2-compat .tools-card h3 {
 margin: 0 0 6px; font-size: var(--t-body); color: var(--ink-0); font-weight: 600;
}
.v2-compat .tools-card p {
 margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5;
}
.v2-compat .tools-card--feature {
 background: var(--accent-soft); border-color: var(--accent);
}

/* Tool form + result */
.v2-compat .tool-form-card {
 border: 1px solid var(--line); border-radius: var(--r-md);
 padding: 20px 22px; margin: 18px 0 24px;
 background: #fff;
}
.v2-compat .tool-form {
 display: grid; gap: 14px;
}
.v2-compat .tool-form label {
 display: block; font-size: var(--t-sm); color: var(--ink-1);
 font-weight: 600; margin-bottom: 4px;
}
.v2-compat .tool-form input,
.v2-compat .tool-form select {
 width: 100%; padding: 10px 12px;
 border: 1px solid var(--line-2); border-radius: var(--r-sm);
 background: #fff; color: var(--ink-0);
 font-family: var(--sans); font-size: var(--t-body);
 font-variant-numeric: tabular-nums;
}
.v2-compat .tool-form input:focus,
.v2-compat .tool-form select:focus {
 outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.v2-compat .tool-btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.v2-compat .tool-btn {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 10px 16px; border-radius: var(--r-sm);
 border: 1px solid var(--accent); background: var(--accent); color: #fff;
 font-weight: 600; font-size: var(--t-sm); cursor: pointer;
}
.v2-compat .tool-btn:hover { background: var(--accent-hover, #6928d9); border-color: var(--accent-hover, #6928d9); }
.v2-compat .tool-btn[data-variant="ghost"],
.v2-compat .tool-btn.ghost {
 background: transparent; color: var(--ink-1); border-color: var(--line-2);
}
.v2-compat .tool-btn[data-variant="ghost"]:hover,
.v2-compat .tool-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.v2-compat .tool-result {
 margin-top: 14px; padding-top: 14px;
 border-top: 1px dashed var(--line);
}
.v2-compat .tool-result-card {
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 16px;
}
.v2-compat .tool-result-h {
 font-size: var(--t-xs); color: var(--ink-2); text-transform: uppercase;
 letter-spacing: .04em; font-weight: 600; margin: 0 0 6px;
}
.v2-compat .tool-result-row {
 display: flex; justify-content: space-between; align-items: baseline;
 padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.v2-compat .tool-result-row:last-child { border-bottom: 0; }
.v2-compat .tool-result-row b {
 font-family: var(--mono); font-variant-numeric: tabular-nums;
 color: var(--ink-0); font-weight: 700;
}

/* League hub specific */
.v2-compat .league-flag { font-size: 28px; margin-right: 6px; vertical-align: -3px; }
.v2-compat .lh-table-wrap {
 border: 1px solid var(--line); border-radius: var(--r-md);
 margin: 16px 0; overflow: hidden;
}
.v2-compat .lh-table-scroll {
 overflow-x: auto;
 position: relative;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x proximity;
}
/* Right-edge fade so mobile users see there is more table to swipe to */
@media (max-width: 720px) {
 .v2-compat .lh-table-scroll {
 -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
 mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
 }
 /* Sticky kick-off column keeps the time visible while swiping H/D/A */
 .v2-compat .lh-table th:first-child,
 .v2-compat .lh-table td:first-child {
 position: sticky; left: 0; background: #fff; z-index: 1;
 border-right: 1px solid var(--line);
 }
 .v2-compat .lh-table thead th:first-child { background: var(--bg-soft, #fafafa); }
 /* Swipe hint sits above the table, dismissible by tapping */
 .lh-swipe-hint {
 display: flex; align-items: center; gap: 6px;
 font-size: 12px; color: var(--ink-3);
 margin: 0 0 8px;
 }
 .lh-swipe-hint__arrow { font-weight: 700; }
}
@media (min-width: 721px) {
 .lh-swipe-hint { display: none; }
}
.v2-compat .lh-table {
 width: 100%; border-collapse: collapse;
 font-size: var(--t-sm); background: #fff;
}
.v2-compat .lh-table th,
.v2-compat .lh-table td {
 text-align: left; padding: 10px 12px;
 border-bottom: 1px solid var(--line);
}
.v2-compat .lh-table th {
 background: var(--bg-soft, #fafafa);
 font-weight: 600; color: var(--ink-2);
 font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
}
.v2-compat .lh-table tr:last-child td { border-bottom: 0; }
.v2-compat .lh-match { font-weight: 500; color: var(--ink-0); }
.v2-compat .lh-vs { color: var(--ink-2); margin: 0 4px; font-weight: 400; }
.v2-compat .lh-time { color: var(--ink-2); font-family: var(--sans); font-weight: 600; font-size: var(--t-xs); white-space: nowrap; }
.v2-compat .lh-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-1); }
.v2-compat .lh-num.lh-best,
.v2-compat .lh-price.lh-best { color: var(--accent); font-weight: 700; background: var(--accent-soft); }

/* Stacked price cell: big decimal price on top, small book name + exit link under it.
 Default state is plain, only cells that also carry .lh-best (highest price in the row)
 get the purple accent background. */
.v2-compat .lh-cell-stack {
 padding: 10px 14px;
 vertical-align: middle;
 text-align: right;
}
.v2-compat .lh-cell-stack.lh-best { background: var(--accent-soft); }
.v2-compat .lh-cell-stack .lh-price {
 display: block;
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 font-size: var(--t-base, 15px);
 font-weight: 700;
 color: var(--ink-1);
 line-height: 1.1;
 background: transparent;
}
.v2-compat .lh-cell-stack.lh-best .lh-price { color: var(--accent); }
.v2-compat .lh-cell-stack .lh-book {
 display: block;
 margin-top: 4px;
 font-family: var(--sans);
 font-size: var(--t-xs, 11px);
 font-weight: 500;
 letter-spacing: 0.01em;
 color: var(--ink-2);
 text-decoration: none;
 white-space: nowrap;
}
.v2-compat .lh-cell-stack .lh-book:hover {
 color: var(--accent);
 text-decoration: underline;
}

/* Legacy (non-stacked) lh-book chip — only used in old templates if any remain. */
.v2-compat .lh-book:not(a) {
 display: inline-flex; align-items: center; gap: 6px;
 font-weight: 500; font-size: var(--t-xs); color: var(--ink-1);
}

/* Book exit links — used anywhere we mention an operator in body copy or chips. */
/* Default = inline body-text link: accent colour, underline on hover. Override
 with --bare / --inline modifiers when the parent needs different behaviour. */
.book-link {
 color: var(--accent);
 text-decoration: none;
 font-weight: 500;
}
.book-link:hover { text-decoration: underline; }
.book-link--inline {
 color: var(--accent);
 text-decoration: none;
 font-weight: 500;
}
.book-link--inline:hover {
 text-decoration: underline;
}
.book-link--bare {
 color: inherit;
 text-decoration: none;
}
.book-link--bare:hover {
 filter: brightness(0.95);
}
.v2-compat .lh-why {
 background: var(--bg-soft, #fafafa); border: 1px solid var(--line);
 border-radius: var(--r-md); padding: 12px 16px; margin: 12px 0;
 font-size: 14px; color: var(--ink-1); line-height: 1.55;
}
.v2-compat .lh-why-swatch {
 display: inline-block; width: 12px; height: 12px;
 border-radius: 3px; vertical-align: -1px; margin-right: 6px;
 background: var(--accent-soft); border: 1px solid var(--accent);
}
.v2-compat .lh-related { margin-top: 24px; }

/* Book page */
.v2-compat .book-page { max-width: 880px; }

/* ─── Book CTA bar (used on review + promo pages) ──────────────────────── */
.v2-compat .book-cta-bar {
 display: flex; align-items: center; gap: 16px;
 flex-wrap: wrap;
 margin: 20px 0;
 padding: 16px 18px;
 background: var(--bg-soft, #fafafa);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
}
.v2-compat .book-cta-bar__brand {
 display: flex; align-items: center; gap: 14px;
 min-width: 240px; flex: 1 1 240px;
}
.v2-compat .book-cta-bar__logo {
 width: 56px; height: 56px;
 border-radius: var(--r-sm, 6px);
 overflow: hidden;
 flex-shrink: 0;
 position: relative;
}
.v2-compat .book-cta-bar__logo .book-tile { width: 100%; height: 100%; display: block; border-radius: inherit; }
.v2-compat .book-cta-bar__logo .book-logo-wrap { width: 100%; height: 100%; display: block; position: relative; }
.v2-compat .book-cta-bar__logo .book-logo-img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.v2-compat .book-cta-bar__text { display: flex; flex-direction: column; gap: 2px; }
.v2-compat .book-cta-bar__text strong { font-size: var(--t-md, 16px); color: var(--ink-0); }
.v2-compat .book-cta-bar__bonus { color: var(--ink-1); font-size: var(--t-sm, 14px); }
.v2-compat .book-cta-bar__actions {
 display: flex; align-items: center; gap: 10px;
 flex-wrap: wrap;
}
.v2-compat .book-cta-bar__code {
 font-family: var(--mono); font-size: var(--t-sm, 14px); font-weight: 600;
 padding: 8px 14px;
 background: #fff;
 border: 1px dashed var(--ink-2);
 border-radius: var(--r-sm, 6px);
 color: var(--ink-0);
 cursor: pointer;
 letter-spacing: 0.04em;
 transition: all 120ms ease;
}
.v2-compat .book-cta-bar__code:hover { border-color: var(--accent); color: var(--accent); }
.v2-compat .book-cta-bar__code.is-copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.v2-compat .book-cta-bar__btn {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 11px 20px;
 background: #1B5BFF !important;
 color: #ffffff !important;
 font-weight: 700;
 border-radius: var(--r-sm, 6px);
 text-decoration: none;
 transition: filter 120ms ease;
}
.v2-compat .book-cta-bar__btn:hover { filter: brightness(0.95); }
.v2-compat .book-cta-bar__rg {
 flex-basis: 100%;
 margin: 6px 0 0 0;
 font-size: 12px;
 color: var(--ink-2);
 line-height: 1.5;
}
.v2-compat .book-cta-bar__rg a { color: var(--ink-1); text-decoration: underline; }

/* ─── Learn end-of-article CTA cards ── */
.v2-compat .learn-endcta { margin-top: 32px; }
.v2-compat .learn-endcta__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 14px;
 margin-top: 12px;
}
.v2-compat .learn-endcta__card {
 display: flex; flex-direction: column; gap: 6px;
 padding: 18px 20px;
 background: var(--bg-soft, #fafafa);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 text-decoration: none;
 transition: border-color 120ms ease, transform 120ms ease;
}
.v2-compat .learn-endcta__card:hover { border-color: var(--accent); transform: translateY(-1px); }
.v2-compat .learn-endcta__card strong { color: var(--ink-0); font-size: var(--t-md, 16px); }
.v2-compat .learn-endcta__card span { color: var(--ink-2); font-size: var(--t-sm, 14px); line-height: 1.5; }

/* ─── Books index grid (rebuilt) ──────────────────────────────────────── */
.v2-compat .books-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 16px;
 margin: 24px 0;
}
.v2-compat .book-card {
 display: flex; flex-direction: column; gap: 12px;
 padding: 18px;
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 transition: border-color 120ms ease, box-shadow 120ms ease;
}
.v2-compat .book-card:hover { border-color: var(--accent); box-shadow: 0 1px 8px rgba(124,58,237,0.08); }
.v2-compat .book-card__head { display: flex; align-items: center; gap: 14px; }
.v2-compat .book-card__logo {
 width: 56px; height: 56px;
 border-radius: var(--r-sm, 6px);
 overflow: hidden;
 flex-shrink: 0;
 position: relative;
}
.v2-compat .book-card__logo .book-tile { width: 100%; height: 100%; display: block; border-radius: inherit; }
.v2-compat .book-card__logo .book-logo-wrap { width: 100%; height: 100%; display: block; position: relative; }
.v2-compat .book-card__logo .book-logo-img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.v2-compat .book-card__name h3 {
 margin: 0 0 2px 0;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.25;
 letter-spacing: -0.01em;
 color: var(--ink-0);
 font-family: var(--sans);
}
.v2-compat .book-card__name p {
 margin: 0;
 color: var(--ink-3);
 font-size: 12px;
 font-weight: 500;
 line-height: 1.35;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.v2-compat .book-card__bonus {
 padding: 0;
 background: transparent;
 border-radius: 0;
 color: var(--ink-0);
 font-family: var(--sans);
 font-weight: 700;
 font-size: 16px;
 line-height: 1.4;
 letter-spacing: -0.005em;
}
.v2-compat .book-card__code {
 font-size: var(--t-sm, 13px);
 color: var(--ink-1);
}
.v2-compat .book-card__code-val {
 font-family: var(--mono);
 font-weight: 700;
 background: #fff;
 border: 1px dashed var(--ink-2);
 border-radius: 4px;
 padding: 2px 8px;
 letter-spacing: 0.03em;
 color: var(--ink-0);
}
.v2-compat .book-card__actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.v2-compat .book-card__btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
 padding: 10px 16px;
 background: #1B5BFF !important;
 color: #ffffff !important;
 font-weight: 700;
 border-radius: var(--r-sm, 6px);
 text-decoration: none;
 transition: filter 120ms ease;
}
.v2-compat .book-card__btn:hover { filter: brightness(0.95); }
.v2-compat .book-card__links {
 display: flex; gap: 14px;
 font-size: var(--t-sm, 13px);
}
.v2-compat .book-card__links a { color: var(--ink-1); text-decoration: none; }
.v2-compat .book-card__links a:hover { color: var(--accent); text-decoration: underline; }

/* ─── Promo-code page styling ────────────────────────────────────────── */
.v2-compat .book-promo-page h1 .book-code-inline {
 font-family: var(--mono);
 font-weight: 700;
 background: var(--accent-soft);
 color: var(--accent);
 padding: 2px 10px;
 border-radius: 6px;
 letter-spacing: 0.04em;
}
.v2-compat .book-spec-table {
 width: 100%; border-collapse: collapse;
 margin: 12px 0;
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 overflow: hidden;
}
.v2-compat .book-spec-table th,
.v2-compat .book-spec-table td {
 padding: 10px 14px;
 text-align: left;
 font-size: var(--t-sm, 14px);
 border-bottom: 1px solid var(--line);
}
.v2-compat .book-spec-table tr:last-child th,
.v2-compat .book-spec-table tr:last-child td { border-bottom: 0; }
.v2-compat .book-spec-table th {
 width: 30%;
 background: var(--bg-soft, #fafafa);
 color: var(--ink-1);
 font-weight: 600;
}
.v2-compat .book-spec-table td { color: var(--ink-0); }

/* ─── FAQ styling (used across review / promo / telegram) ───────────── */
.v2-compat .lf-faq { margin: 8px 0 0; }
.v2-compat .lf-faq dt {
 font-weight: 600; color: var(--ink-0);
 margin-top: 14px;
 font-size: var(--t-md, 16px);
}
.v2-compat .lf-faq dd {
 margin: 4px 0 0 0;
 color: var(--ink-1);
 line-height: 1.55;
}
.v2-compat .lf-faq dd code,
.v2-compat .tg-cmd-row code {
 background: var(--bg-soft, #fafafa);
 border: 1px solid var(--line);
 border-radius: 4px;
 padding: 1px 6px;
 font-family: var(--mono);
 font-size: 0.92em;
 color: var(--ink-0);
}

/* ─── Telegram page ─────────────────────────────────────────────────── */
.v2-compat .tg-page { max-width: 880px; }
.v2-compat .tg-cta-row {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 14px;
 margin: 20px 0 28px;
}
.v2-compat .tg-cta {
 display: flex; align-items: center; gap: 14px;
 padding: 16px 18px;
 border-radius: var(--r-md);
 text-decoration: none;
 transition: transform 120ms ease, box-shadow 120ms ease;
}
.v2-compat .tg-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.v2-compat .tg-cta--primary {
 background: #229ED9; color: #fff;
}
.v2-compat .tg-cta--secondary {
 background: #fff; color: var(--ink-0);
 border: 1px solid var(--line);
}
.v2-compat .tg-cta__icon { font-size: 28px; line-height: 1; }
.v2-compat .tg-cta__text { display: flex; flex-direction: column; gap: 2px; }
.v2-compat .tg-cta__text strong { font-size: var(--t-md, 16px); }
.v2-compat .tg-cta__text small { font-size: var(--t-sm, 13px); opacity: 0.85; }

.v2-compat .tg-types-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 14px;
 margin: 14px 0;
}
.v2-compat .tg-type-card {
 padding: 16px;
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
}
.v2-compat .tg-type-card__icon { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.v2-compat .tg-type-card h3 { margin: 0 0 4px 0; font-size: var(--t-md, 16px); color: var(--ink-0); }
.v2-compat .tg-type-card p { margin: 0; color: var(--ink-1); font-size: var(--t-sm, 14px); line-height: 1.5; }

.v2-compat .tg-msg-preview {
 margin: 14px 0;
 padding: 16px 18px;
 background: #f0f4f7;
 border-left: 3px solid #229ED9;
 border-radius: 8px;
 font-family: var(--sans);
 font-size: var(--t-sm, 13px);
 color: var(--ink-0);
 line-height: 1.7;
 white-space: pre-wrap;
 overflow-x: auto;
}

.v2-compat .tg-cmd-table {
 display: flex; flex-direction: column;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 overflow: hidden;
 margin: 12px 0;
 background: #fff;
}
.v2-compat .tg-cmd-row {
 display: grid;
 grid-template-columns: 220px 1fr;
 gap: 14px;
 padding: 10px 14px;
 border-bottom: 1px solid var(--line);
 font-size: var(--t-sm, 14px);
 align-items: center;
}
.v2-compat .tg-cmd-row:last-child { border-bottom: 0; }
.v2-compat .tg-cmd-row--head {
 background: var(--bg-soft, #fafafa);
 color: var(--ink-1);
 font-weight: 600;
 font-size: var(--t-xs, 12px);
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
@media (max-width: 640px) {
 .v2-compat .tg-cmd-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── More markets (Totals/BTTS/Spread) ────────────────────────────────────── */
.mp-markets { margin-top: 32px; }
.mp-markets__header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-markets__header h2 { margin: 0; font-size: var(--t-h3); font-weight: 600; }
.mp-markets__header .hint { font-size: var(--t-xs); color: var(--ink-2); }
.mp-mk {
 margin-bottom: 10px;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: #fff;
 overflow: hidden;
}
.mp-mk > summary {
 list-style: none;
 cursor: pointer;
 padding: 14px 18px;
 display: flex; align-items: center; justify-content: space-between; gap: 14px;
 font-size: var(--t-body);
 user-select: none;
}
.mp-mk > summary::-webkit-details-marker { display: none; }
.mp-mk > summary::after {
 content: "›";
 font-size: 20px;
 color: var(--ink-3);
 transform: rotate(90deg);
 transition: transform .15s ease;
 flex: 0 0 auto;
}
.mp-mk[open] > summary::after { transform: rotate(-90deg); }
.mp-mk[open] > summary { border-bottom: 1px solid var(--line); }
.mp-mk > summary b { font-weight: 600; color: var(--ink-0); }
.mp-mk-line { font-size: var(--t-sm); color: var(--ink-2); margin-left: 8px; }

.mp-mk-table { display: flex; flex-direction: column; }
.mp-mk-head, .mp-mk-row {
 display: grid;
 grid-template-columns: 36px 1.4fr repeat(var(--mk-cols, 2), 1fr);
 align-items: center;
 padding: 10px 18px;
 gap: 12px;
}
.mp-mk-logo {
 width: 36px; height: 36px;
 border-radius: var(--r-sm, 6px);
 display: flex; align-items: center; justify-content: center;
 overflow: hidden; position: relative;
}
.mp-mk-logo .book-link--bare { display: block; width: 100%; height: 100%; }
.mp-mk-logo .book-logo-wrap { width: 100%; height: 100%; display: block; position: relative; }
.mp-mk-logo .book-tile { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-sm, 6px); }
.mp-mk-logo .book-logo-img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.mp-mk-head .mp-mk-logo { background: transparent; }
.mp-mk-note {
 padding: 12px 18px;
 background: var(--bg-soft, #fafafa);
 border-bottom: 1px solid var(--line);
 font-size: 13px;
 color: var(--ink-1);
 max-width: 68ch;
 line-height: 1.5;
}
.mp-mk-note p { margin: 0 0 6px; }
.mp-mk-note p:last-child { margin-bottom: 0; }
.mp-mk-value { color: var(--ink-0); font-weight: 600; }

.mp-mk-row { border-top: 1px solid var(--line); }
.mp-mk-head {
 background: var(--bg-soft, #fafafa);
 font-size: var(--t-xs);
 color: var(--ink-2);
 text-transform: uppercase;
 letter-spacing: 0.04em;
 font-weight: 600;
}
.mp-mk-head-cell { text-align: right; }
.mp-mk-book { font-size: var(--t-sm); color: var(--ink-0); font-weight: 500; }
.mp-mk-cell {
 text-align: right;
 font-size: var(--t-body);
 color: var(--ink-0);
 padding: 6px 8px;
 border-radius: var(--r-sm, 6px);
 text-decoration: none;
 display: inline-block;
 min-width: 56px;
 justify-self: end;
 transition: background .12s ease;
}
.mp-mk-cell:hover { background: var(--bg-soft, #f5f6f7); }
.mp-mk-cell.is-best {
 background: transparent;
 color: var(--accent, #1B5BFF);
 font-weight: 700;
 box-shadow: inset 0 0 0 1.5px var(--accent, #1B5BFF);
 border-radius: 999px;
 padding: 5px 12px;
 min-width: 0;
 width: max-content;
}
.mp-mk-cell.is-best:hover { background: rgba(27, 91, 255, 0.08); }

/* ── Oddschecker-style grid: book pill, fair-line row, 24h arrows ─────────── */
.mp-mk-table {
  --mk-book-col: 200px;
  position: relative;
  background: var(--surface, #fff);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
}
.mp-mk-head, .mp-mk-row {
  grid-template-columns: var(--mk-book-col) repeat(var(--mk-cols, 2), minmax(72px, 1fr));
}
.mp-mk-head-book {
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: left;
}
.mp-mk-book-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: var(--bg-soft, #fafafa);
  color: var(--ink-0);
  font-size: var(--t-sm);
  font-weight: 600;
  max-width: 100%;
  transition: background .12s ease, transform .12s ease;
}
a.book-link--bare:hover .mp-mk-book-pill { background: rgba(124, 58, 237, 0.08); }
.mp-mk-book-pill .book-logo-wrap,
.mp-mk-book-pill .book-tile,
.mp-mk-book-pill .book-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: 0 0 32px;
}
.mp-mk-book-pill .book-tile { position: relative; }
.mp-mk-book-pill .book-logo-img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.mp-mk-book-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.mp-mk-book-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(124, 58, 237, 0.08);
  color: var(--accent, #7C3AED);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.mp-mk-row--poly {
  border-top: 1px dashed var(--line);
  background: linear-gradient(to right, rgba(124, 58, 237, 0.025), transparent 60%);
}
.mp-mk-row--poly .mp-mk-book-pill { background: transparent; }
.mp-mk-row--poly .mp-mk-cell { cursor: default; color: var(--ink-2); }
.mp-mk-row--poly .mp-mk-cell:hover { background: transparent; }
.mp-mk-cell-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #7C3AED);
  background: rgba(124, 58, 237, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.mp-mk-cell { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.mp-mk-cell .num { display: inline-block; }
.mp-mk-arrow {
  display: inline-block;
  width: 0;
  font-size: 11px;
  line-height: 1;
  text-align: left;
  margin-left: 2px;
  color: transparent;
  font-weight: 700;
}
.mp-mk-arrow.up { color: #16a34a; width: 12px; }
.mp-mk-arrow.up::before { content: '\25B2'; }
.mp-mk-arrow.down { color: #dc2626; width: 12px; }
.mp-mk-arrow.down::before { content: '\25BC'; }

/* Mobile: 360-414px first-class. Sticky book column + horizontal scroll. */
@media (max-width: 720px) {
  .mp-mk { border-radius: 12px; overflow: hidden; }
  .mp-mk > summary { padding: 14px 14px; min-height: 56px; }
  .mp-mk-table {
    --mk-book-col: 148px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .mp-mk-head, .mp-mk-row {
    padding: 10px 12px;
    gap: 8px;
    min-width: max-content;
  }
  .mp-mk-head .mp-mk-head-book,
  .mp-mk-row .mp-mk-book-pill,
  .mp-mk-row > a.book-link--bare:first-child,
  .mp-mk-row > .book-link:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface, #fff);
    padding-right: 6px;
  }
  .mp-mk-head .mp-mk-head-book { background: var(--bg-soft, #fafafa); }
  .mp-mk-row--poly > .mp-mk-book-pill,
  .mp-mk-row--poly > a:first-child { background: #fbfafe; }
  .mp-mk-book-pill { padding: 4px 8px 4px 4px; gap: 8px; }
  .mp-mk-book-pill .book-logo-wrap,
  .mp-mk-book-pill .book-tile,
  .mp-mk-book-pill .book-logo-img { width: 28px; height: 28px; flex: 0 0 28px; }
  .mp-mk-book-name { max-width: 86px; font-size: 13px; }
  .mp-mk-book-tag { display: none; }
  .mp-mk-cell { min-width: 64px; padding: 6px 10px; scroll-snap-align: start; }
  .mp-mk-cell.is-best { padding: 5px 10px; }
}

/* ── Home: "Next up" rail + "Top movers" strip ────────────────────────────── */
.home-nextup { margin: 18px 0 8px; }
.home-nextup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 0 4px;
}
.home-nextup__head h2 {
  font-family: var(--font-display, inherit);
  font-size: var(--t-md, 16px);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
  color: var(--ink-0);
}
.home-nextup__head a {
  font-size: var(--t-sm);
  color: var(--accent, #7C3AED);
  text-decoration: none;
  font-weight: 500;
}
.home-nextup__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;
  margin: 0 -4px;
}
.home-nextup__rail::-webkit-scrollbar { height: 6px; }
.home-nextup__rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.home-nextup__card {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 240px;
  min-height: 96px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.home-nextup__card:hover {
  border-color: var(--accent, #7C3AED);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -8px rgba(124, 58, 237, .25);
}
.home-nextup__when {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.home-nextup__when.is-live { color: #dc2626; }
.home-nextup__when.is-soon { color: var(--accent, #7C3AED); }
.home-nextup__teams {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-0);
  line-height: 1.35;
  margin-bottom: 4px;
}
.home-nextup__league {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: auto;
}
.home-nextup__odds {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-2);
}
.home-nextup__odd { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-weight: 600; color: var(--ink-1); }

.home-movers { margin: 16px 0 8px; }
.home-movers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 0 4px;
}
.home-movers__head h2 {
  font-family: var(--font-display, inherit);
  font-size: var(--t-md, 16px);
  font-weight: 700;
  margin: 0;
  color: var(--ink-0);
}
.home-movers__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;
  margin: 0 -4px;
}
.home-movers__card {
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 260px;
  min-height: 96px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .12s ease;
}
.home-movers__card:hover { border-color: var(--accent, #7C3AED); }
.home-movers__card .drift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.home-movers__card.is-drift-up .drift { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.home-movers__card.is-drift-down .drift { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.home-movers__card.is-drift-up .drift::before { content: '\25B2 '; }
.home-movers__card.is-drift-down .drift::before { content: '\25BC '; }
.home-movers__card .teams {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-0);
  line-height: 1.35;
  margin-bottom: 4px;
}
.home-movers__card .mv-move {
  font-size: 12px;
  color: var(--ink-2);
}
.home-movers__card .mv-move .from { color: var(--ink-3); text-decoration: line-through; margin-right: 4px; }
.home-movers__card .mv-move .to { color: var(--ink-0); font-weight: 700; }
.home-movers__card .league-tag {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .home-nextup__card { min-width: 200px; padding: 12px; }
  .home-movers__card { min-width: 220px; padding: 12px; }
}

/* Mobile-only sticky 'Next up' bottom strip on home (shows when rail scrolled past) */
.home-nextup-sticky {
  display: none;
}
@media (max-width: 720px) {
  .home-nextup-sticky {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 8px 12px env(safe-area-inset-bottom);
    gap: 8px;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px -10px rgba(0,0,0,0.18);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .home-nextup-sticky.is-shown { transform: translateY(0); }
  .home-nextup-sticky a {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink-0);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .home-nextup-sticky a .when { color: var(--accent, #7C3AED); font-weight: 700; }
}

/* ── Payout panel: per-outcome best-price + £1/£10/£100 bars ───────────────── */
.mp-payout {
 margin: 18px 0 8px;
 display: grid;
 gap: 10px;
}
.mp-payout__head { margin: 0 0 2px; }
.mp-payout__head h2 {
 font-family: var(--font-display, inherit);
 font-size: var(--t-md, 16px);
 font-weight: 700;
 letter-spacing: .01em;
 margin: 0;
 color: var(--ink-1);
}
.mp-payout__hint {
 margin: 4px 0 0;
 font-size: var(--t-xs, 12px);
 color: var(--ink-3);
}
.mp-payout__row {
 display: grid;
 grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.4fr) minmax(220px, 2fr) auto;
 gap: 16px;
 align-items: center;
 padding: 12px 14px;
 border: 1px solid var(--line, rgba(0,0,0,.08));
 border-radius: 14px;
 background: var(--surface, #fff);
 color: inherit;
 text-decoration: none;
 transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mp-payout__row:hover {
 border-color: var(--accent, #7C3AED);
 box-shadow: 0 4px 14px -8px rgba(124, 58, 237, .25);
 transform: translateY(-1px);
}
.mp-payout__row.is-fav {
 border-color: var(--accent, #7C3AED);
 box-shadow: inset 0 0 0 1px var(--accent, #7C3AED);
}
.mp-payout__pick { min-width: 0; }
.mp-payout__label {
 font-weight: 700;
 font-size: var(--t-sm, 14px);
 color: var(--ink-1);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mp-payout__fair {
 margin-top: 2px;
 font-size: var(--t-xs, 12px);
 color: var(--ink-3);
}
.mp-payout__odds {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}
.mp-payout__book {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 flex: 1 1 auto;
}
.mp-payout__book .book-logo-wrap,
.mp-payout__book .book-tile {
 width: 26px; height: 26px;
 border-radius: 6px;
 flex: 0 0 26px;
 display: inline-block;
 position: relative;
 overflow: hidden;
}
.mp-payout__book .book-logo-img,
.mp-payout__book img {
 position: absolute;
 inset: 0;
 width: 26px; height: 26px;
 border-radius: 6px;
 object-fit: contain;
 flex: 0 0 26px;
}
.mp-payout__book .book-tile { position: relative; }
.mp-payout__book .book-logo-wrap .book-tile { position: absolute; inset: 0; }
.mp-payout__book-name {
 font-size: var(--t-sm, 14px);
 font-weight: 600;
 color: var(--ink-2);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 flex: 1 1 auto;
 min-width: 0;
}
.mp-payout__odds-num {
 margin-left: auto;
 background: transparent;
 box-shadow: inset 0 0 0 1.5px var(--accent-cta, #1B5BFF);
 color: var(--accent-cta, #1B5BFF);
 border-radius: 999px;
 padding: 4px 12px;
 font-weight: 700;
 font-size: var(--t-sm, 14px);
 white-space: nowrap;
 flex: 0 0 auto;
}
.mp-payout__bars {
 display: grid;
 gap: 4px;
 min-width: 0;
}
.mp-payout__bar {
 position: relative;
 height: 22px;
 width: var(--w, 50%);
 min-width: 84px;
 background: linear-gradient(90deg, rgba(27,91,255,.16), rgba(27,91,255,.06));
 border: 1px solid rgba(27, 91, 255, .2);
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 8px;
 font-size: 11px;
 font-weight: 600;
 color: var(--ink-2);
}
.mp-payout__bar-stake {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--ink-3);
}
.mp-payout__bar-ret {
 font-weight: 700;
 color: var(--ink-1);
}
.mp-payout__row.is-fav .mp-payout__bar {
 background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(124,58,237,.06));
 border-color: rgba(124, 58, 237, .35);
}
.mp-payout__go {
 font-size: var(--t-xs, 12px);
 font-weight: 600;
 color: var(--accent-cta, #1B5BFF);
 white-space: nowrap;
}
.mp-payout__go .arrow { font-weight: 400; }

@media (max-width: 720px) {
 .mp-payout__row {
 grid-template-columns: 1fr 1fr;
 grid-template-areas:
 'pick odds'
 'bars bars'
 'go go';
 gap: 10px;
 padding: 12px;
 }
 .mp-payout__pick { grid-area: pick; }
 .mp-payout__odds { grid-area: odds; justify-content: flex-end; }
 .mp-payout__odds-num { margin-left: 0; }
 .mp-payout__book-name { display: none; }
 .mp-payout__bars { grid-area: bars; }
 .mp-payout__go { grid-area: go; text-align: right; }
 .mp-payout__bar { min-width: 112px; }
 /* Clear the fixed sticky bet dock (only shown on mobile) so the last 
 content is not hidden behind the dock. */
 .mp2 { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
 .mp-mk-head, .mp-mk-row {
 grid-template-columns: 28px 1.1fr repeat(var(--mk-cols, 2), 1fr);
 padding: 8px 10px; gap: 8px;
 }
 .mp-mk-logo { width: 28px; height: 28px; }
 .mp-mk-logo .book-logo-img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
 .mp-mk-book { font-size: var(--t-xs); }
 .mp-mk-note { padding: 10px 12px; font-size: 12px; }
}

/* Date input filter, presented as a compact calendar button. Clicking opens the
 native picker via the showPicker() API (or falls back to focus on Safari). */
.filters .filter-date {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 height: 32px;
 padding: 0 12px;
 border: 1px solid var(--line);
 border-radius: var(--r-pill);
 background: #fff;
 font-size: var(--t-xs);
 font-weight: 600;
 color: var(--ink-1);
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: .02em;
 transition: border-color .12s ease, background .12s ease, color .12s ease;
 position: relative;
}
.filters .filter-date:hover { border-color: var(--ink-3); color: var(--ink-0); }
.filters .filter-date.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filters .filter-date::before {
 content: "";
 width: 14px; height: 14px;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 9h14v11H5V9z'/></svg>") center/contain no-repeat;
 mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 9h14v11H5V9z'/></svg>") center/contain no-repeat;
}
.filters .filter-date__label { display: inline-block; }
.filters .filter-date input[type="date"] {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 opacity: 0;
 border: 0; background: transparent;
 font: inherit;
 padding: 0;
 outline: 0;
 cursor: pointer;
}
.filters .filter-date input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
@media (max-width: 640px) {
 .filters .filter-date { padding: 0 10px; font-size: 10px; }
}

/* Sort-by dropdown, replaces the old kickoff/edge segmented control */
.filters .filter-sort {
 display: inline-flex; align-items: center; gap: 6px;
 height: 32px;
 padding: 0 12px 0 14px;
 border: 1px solid var(--line);
 border-radius: var(--r-pill);
 background: #fff;
 font-size: var(--t-xs); font-weight: 600;
 color: var(--ink-1);
 text-transform: uppercase; letter-spacing: .02em;
 cursor: pointer;
 position: relative;
}
.filters .filter-sort:hover { border-color: var(--ink-3); color: var(--ink-0); }
.filters .filter-sort__label { color: var(--ink-2); margin-right: 2px; }
.filters .filter-sort select {
 appearance: none; -webkit-appearance: none; -moz-appearance: none;
 border: 0; background: transparent;
 font: inherit; color: inherit;
 padding: 0 16px 0 0;
 cursor: pointer;
 outline: 0;
 text-transform: inherit; letter-spacing: inherit;
}
.filters .filter-sort::after {
 content: "";
 width: 8px; height: 8px;
 border-right: 2px solid currentColor;
 border-bottom: 2px solid currentColor;
 transform: translateY(-2px) rotate(45deg);
 margin-left: -10px;
 pointer-events: none;
}

/* ============================================================
 Match page — confidence-aware verdict (Speculative / Medium / High)
 ============================================================ */
.mp-confidence-row {
 display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
 margin: 0 0 8px 0 !important;
}
.mp-confidence-chip {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 3px 10px; border-radius: 999px;
 font-size: var(--t-xs, 12px); font-weight: 700;
 letter-spacing: .02em; text-transform: uppercase;
 border: 1px solid transparent;
 line-height: 1.4;
}
.mp-confidence-chip.is-high {
 background: rgba(34, 139, 60, 0.12);
 color: var(--up, #228b3c);
 border-color: rgba(34, 139, 60, 0.30);
}
.mp-confidence-chip.is-medium {
 background: rgba(217, 138, 0, 0.14);
 color: #a86700;
 border-color: rgba(217, 138, 0, 0.32);
}
.mp-confidence-chip.is-speculative {
 background: rgba(180, 50, 50, 0.10);
 color: #a83232;
 border-color: rgba(180, 50, 50, 0.30);
}
.mp-confidence-lead {
 font-size: var(--t-sm, 14px);
 color: var(--ink-2);
 font-weight: 500;
}

.mp-caveats {
 margin: 10px 0 0 0;
 padding-left: 20px;
 font-size: var(--t-sm, 14px);
 color: var(--ink-1);
 line-height: 1.5;
}
.mp-caveats li { margin: 4px 0; }
.mp-caveats li b.num { font-family: var(--mono); color: var(--ink-0); }

.mp-disclaimer {
 margin: 10px 0 0 0 !important;
 font-size: var(--t-sm, 14px);
 font-style: italic;
 color: var(--ink-2);
}

/* CTA variants by confidence */
.mp-cta.mp-cta--is-high {
 /* keep the orange default */
}
.mp-cta.mp-cta--is-medium {
 background: var(--bg-1) !important;
 color: var(--ink-0) !important;
 border: 1px solid var(--accent, #1B5BFF);
 box-shadow: none;
}
.mp-cta.mp-cta--is-medium:hover {
 background: var(--accent-soft, #fff3df) !important;
 color: var(--ink-0) !important;
}
.mp-cta.mp-cta--is-speculative {
 background: transparent !important;
 color: var(--ink-1) !important;
 border: 1px solid var(--line);
 box-shadow: none;
 font-weight: 600;
}
.mp-cta.mp-cta--is-speculative:hover {
 background: var(--bg-1) !important;
 color: var(--ink-0) !important;
 border-color: var(--ink-2);
}

@media (max-width: 700px) {
 .mp-cta { width: 100%; justify-content: center; }
}

/* ── Mobile pass (≤ 720px) ───────────────────────────────────────────────────
 Goals:
 • Header never wraps. Logo + scrolling nav + mode toggle stay on one line.
 • League rail (already horizontal-scroll on mobile) bleeds edge-to-edge so
 users can SEE there's more to swipe to.
 • Filters row stays one wrap-friendly group with smaller pills.
 • Match hero stays readable. Verdict block tightens padding, CTA full-width.
 • Book ladder + other markets keep their existing 700px stack rules.
*/
@media (max-width: 720px) {
 /* Header: hamburger + logo + (no inline nav) + mode toggle */
 .so-header__inner {
 gap: 10px;
 padding: 0 12px;
 }
 .so-logo svg { height: 20px; }
 /* Hide the desktop horizontal nav entirely on mobile — we use the drawer */
 .so-nav { display: none; }
 .so-header__right { gap: 6px; flex: 0 0 auto; margin-left: auto; }
 .mode-toggle { font-size: 11px; }
 .mode-toggle button { padding: 4px 9px; }

 /* Page intro */
 .so-main { padding: 18px 14px 60px; }
 .page-title { font-size: 26px; line-height: 1.2; }
 .page-sub { font-size: 16px; line-height: 1.55; }

 /* League rail — bleed edges so the cut-off hint is visible */
 .rail-list {
 margin-left: -14px;
 margin-right: -14px;
 padding-left: 14px;
 padding-right: 14px;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x proximity;
 }
 .rail-list a { scroll-snap-align: start; }

 /* Filters row */
 .filters { gap: 6px; margin: 14px 0 12px; }
 .filters .seg { padding: 2px; }
 .filters .seg button { padding: 5px 9px; font-size: 11px; letter-spacing: .01em; }

 /* Match page hero */
 .mp-hero { padding: 14px 0 4px; }
 .mp-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
 .mp-when { font-size: 12px; }
 .mp-bc { font-size: 11px; }

 /* Probability bar caption row — wrap nicely on narrow screens */
 .mp-pbar { margin-top: 14px; }
 .mp-pbar .pbar { height: 38px; }
 .mp-pbar-cap {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr);
 gap: 6px;
 margin-top: 8px;
 }
 .mp-pbar-cap div {
 text-align: center;
 font-size: 12px;
 }
 .mp-pbar-cap div b { font-size: 13px; }

 /* Verdict block tightens up */
 .mp-verdict {
 margin-top: 14px;
 padding: 14px;
 gap: 8px;
 }
 .mp-verdict > * { max-width: 100%; }
 .mp-verdict-head { font-size: 15px; line-height: 1.35; }
 .mp-verdict-body { font-size: 13px; }
 .mp-verdict-note { font-size: 12px; }
 .mp-verdict-tag { font-size: 11px; }
 .mp-ev { font-size: 13px; }

 /* Book ladder rows — already collapse at 700px, just tighten the header */
 .mp-books header { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
 .mp-books header h2 { font-size: 15px; }
 .mp-books header .hint { font-size: 11px; flex: 1 1 100%; }

 /* More markets: keep tables tight */
 .mp-markets { margin-top: 18px; }
}

/* Very narrow phones (≤ 380px) — belt-and-braces */
@media (max-width: 380px) {
 .mode-toggle button { padding: 4px 7px; font-size: 10px; }
 .page-title { font-size: 22px; }
 .mp-title { font-size: 19px; }
}

/* ── Hamburger button ───────────────────────────────────────────────────────────────────────────
 Hidden on desktop, visible ≤720px. Sits before the logo for thumb-reach. */
.so-hamburger {
 display: none;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 margin-left: -6px;
 padding: 0;
 background: transparent;
 border: 0;
 border-radius: var(--r-sm);
 color: var(--ink-0);
 cursor: pointer;
}
.so-hamburger:hover { background: var(--bg-2); }
.so-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
 .so-hamburger { display: inline-flex; }
}

/* ── Drawer + backdrop ───────────────────────────────────────────────────────────────────────────── */
.so-drawer {
 position: fixed;
 top: 0; left: 0; bottom: 0;
 width: min(82vw, 320px);
 background: #fff;
 border-right: 1px solid var(--line);
 z-index: 80;
 transform: translateX(-100%);
 transition: transform .22s ease-out;
 display: flex; flex-direction: column;
 box-shadow: 4px 0 24px rgba(0,0,0,0.10);
}
.so-drawer.is-open { transform: translateX(0); }
.so-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.so-drawer__head {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 16px;
 border-bottom: 1px solid var(--line);
 min-height: var(--header-h);
}
.so-drawer__close {
 display: inline-flex; align-items: center; justify-content: center;
 width: 36px; height: 36px; padding: 0;
 background: transparent; border: 0; border-radius: var(--r-sm);
 color: var(--ink-0); cursor: pointer;
}
.so-drawer__close:hover { background: var(--bg-2); }
.so-drawer__nav {
 display: flex; flex-direction: column;
 padding: 12px 8px;
 flex: 1;
}
.so-drawer__nav a {
 display: flex; align-items: center;
 padding: 14px 14px;
 font-size: 16px;
 font-weight: 500;
 color: var(--ink-0);
 text-decoration: none;
 border-radius: var(--r-sm);
}
.so-drawer__nav a:hover { background: var(--bg-2); }
.so-drawer__nav a.is-active {
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 600;
}
.so-drawer__section {
 padding: 6px 8px 4px;
 border-top: 1px solid var(--line);
}
.so-drawer__h {
 margin: 8px 14px 4px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--ink-2);
}
.so-drawer__leagues {
 display: flex; flex-direction: column;
}
.so-drawer__leagues a {
 display: flex; align-items: center;
 padding: 10px 14px;
 font-size: 15px;
 color: var(--ink-1);
 text-decoration: none;
 border-radius: var(--r-sm);
}
.so-drawer__leagues a:hover { background: var(--bg-2); color: var(--ink-0); }
.so-drawer__foot {
 padding: 14px 18px;
 border-top: 1px solid var(--line);
}
.so-drawer__legal {
 margin: 0;
 font-size: 12px;
 color: var(--ink-2);
}

.so-drawer-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.40);
 z-index: 70;
 opacity: 0;
 transition: opacity .22s ease-out;
}
.so-drawer-backdrop.is-open { opacity: 1; }

/* Desktop: drawer never opens via CSS, but defensively hide it */
@media (min-width: 721px) {
 .so-drawer, .so-drawer-backdrop { display: none !important; }
}

/* ===========================================================================
 Phase 1: Multi-market match page — .mp-nav, .mp-preview, .mp-mkt
 =========================================================================== */

/* ── Sticky in-page nav ──────────────────────────────────────────────────────────── */
.mp-nav {
 position: sticky;
 top: calc(var(--header-h) + var(--subnav-h));
 z-index: 30;
 background: var(--bg-0);
 border-bottom: 1px solid var(--line);
 /* widen visually on match pages: stretch to content edges */
 margin: 0 -16px 12px;
 padding: 8px 16px;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 overflow-x: auto;
 overflow-y: hidden;
 gap: 4px;
 padding: 8px 16px;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
}
.mp-nav::-webkit-scrollbar { display: none; }
.mp-nav__pill {
 flex: 0 0 auto;
 white-space: nowrap;
 display: inline-block;
 padding: 5px 12px;
 border-radius: var(--r-pill);
 font-size: var(--t-sm);
 font-weight: 500;
 color: var(--ink-1);
 border: 1px solid var(--line);
 background: var(--bg-0);
 transition: background .15s, color .15s;
}
.mp-nav__pill:hover { background: var(--bg-2); color: var(--ink-0); }
.mp-nav__pill.is-active {
 background: var(--accent-soft);
 color: var(--accent);
 border-color: var(--accent);
 font-weight: 600;
}

/* ── Editorial preview block ─────────────────────────────────────────────────── */
.mp-preview {
 margin-top: 12px;
 padding: 12px 16px;
 background: var(--bg-1);
 border-radius: var(--r-md);
 border-left: 3px solid var(--accent);
 font-size: var(--t-sm);
 line-height: 1.6;
 color: var(--ink-1);
}
.mp-preview p { margin: 0; }
.mp-preview .up { color: var(--up); }

/* ── Line-movement sparkline (.mp-spk) ─────────────────────────────────────── */
.mp-spk {
 background: var(--bg-0);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 margin-top: 16px;
 padding: 14px 16px;
 font-family: var(--font-sans);
}
.mp-spk--empty { padding: 18px 16px; }
.mp-spk__bar {
 display: flex; justify-content: space-between; align-items: baseline;
 gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.mp-spk__title {
 font-family: var(--font-sans);
 font-weight: 600; font-size: 14px; color: var(--ink-0);
 letter-spacing: -0.01em;
}
.mp-spk__meta { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
.mp-spk__meta .num { font-family: var(--font-mono); }
.mp-spk__empty {
 font-family: var(--font-sans); font-size: 13px; color: var(--ink-2);
 padding: 4px 0;
}
.mp-spk__legs {
 display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
}
@media (max-width: 600px) {
 .mp-spk__legs { grid-template-columns: 1fr; gap: 10px; }
}
.mp-spk__leg {
 position: relative;
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-radius: 6px;
 padding: 8px 10px 6px;
 font-family: var(--font-sans);
}
/* Header row inside one leg: label (HOME/DRAW/AWAY) on the left,
 movement delta chip on the right. The big "current" price now sits
 under the line in the endpoints row, so head stays compact. */
.mp-spk__head {
 display: flex; justify-content: space-between; align-items: baseline;
 gap: 8px;
 margin-bottom: 4px;
}
.mp-spk__label {
 font-family: var(--sans);
 font-size: 11px; font-weight: 600;
 text-transform: uppercase; letter-spacing: 0.04em;
 color: var(--ink-2);
}

/* Endpoint captions — "Opened 1.92" left, "Now 2.17" right, ABOVE the line.
 This makes it obvious what the floating numbers on the line mean. */
.mp-spk__endpoints {
 display: flex; justify-content: space-between; align-items: baseline;
 gap: 8px;
 margin-bottom: 2px;
}
.mp-spk__endpoint {
 display: inline-flex; align-items: baseline; gap: 4px;
 font-family: var(--sans);
 font-size: 11px;
 color: var(--ink-2);
}
.mp-spk__endpoint-lbl {
 text-transform: uppercase;
 letter-spacing: 0.04em;
 font-weight: 600;
}
.mp-spk__endpoint-val {
 font-family: var(--mono);
 color: var(--ink-1);
 font-size: 12px;
}
.mp-spk__endpoint-val--now {
 color: var(--ink-0);
 font-weight: 600;
 font-size: 14px;
}

/* Plot wrapper holds the SVG and the absolutely-positioned hover pill
 so the pill can sit top-right of the line without overlapping the axis. */
.mp-spk__plot {
 position: relative;
}
.mp-spk__svg {
 display: block; width: 100%; height: 44px;
 margin: 2px 0 4px;
}
.mp-spk__line {
 fill: none; stroke: var(--ink-1); stroke-width: 1.8;
 stroke-linecap: round; stroke-linejoin: round;
}
.mp-spk__svg--short .mp-spk__line { stroke: #DC2626; }
.mp-spk__svg--drift .mp-spk__line { stroke: #16A34A; }
.mp-spk__svg--flat .mp-spk__line { stroke: var(--ink-2); }

/* Soft area-fill below each line, tinted by tone (CoinMarketCap-style). */
.mp-spk__area { fill: var(--ink-2); fill-opacity: 0.06; stroke: none; }
.mp-spk__svg--short .mp-spk__area { fill: #DC2626; fill-opacity: 0.10; }
.mp-spk__svg--drift .mp-spk__area { fill: #16A34A; fill-opacity: 0.10; }
.mp-spk__svg--flat .mp-spk__area { fill: var(--ink-2); fill-opacity: 0.05; }
.mp-spk__line--sharp {
 stroke: #7C3AED; stroke-width: 1.1; stroke-dasharray: 3 3; opacity: 0.85;
}
.mp-spk__sharp { fill: #7C3AED; stroke: var(--bg-1); stroke-width: 1.2; }
.mp-spk__hit { fill: transparent; cursor: pointer; }
.mp-spk__hit:hover { fill: var(--ink-0); fill-opacity: 0.18; }

/* X-axis time strip: first snapshot time, span in the middle, latest on right.
 Sits under the line and is the user's only visual cue for when these prices
 were observed. */
.mp-spk__axis {
 display: flex; justify-content: space-between; align-items: baseline;
 gap: 8px;
 padding-top: 4px;
 border-top: 1px dashed var(--line);
 font-family: var(--sans);
 font-size: 10.5px;
 color: var(--ink-3);
 letter-spacing: 0.02em;
}
.mp-spk__axis-tick {
 font-variant-numeric: tabular-nums;
}
.mp-spk__axis-span {
 font-size: 10px;
 color: var(--ink-3);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}
.mp-spk__axis-tick--right {
 color: var(--ink-2);
 font-weight: 600;
}

/* Delta chip in the leg header — colour-coded movement at a glance. */
.mp-spk__delta {
 display: inline-flex; align-items: center;
 padding: 1px 6px; border-radius: 999px;
 font-family: var(--mono);
 font-size: 11px; font-weight: 600;
 background: var(--bg-2);
 color: var(--ink-1);
}
.mp-spk__delta--short { color: #DC2626; background: rgba(220,38,38,0.08); }
.mp-spk__delta--drift { color: #16A34A; background: rgba(22,163,74,0.08); }
.mp-spk__delta--flat { color: var(--ink-2); background: var(--bg-2); }

/* Bet365 affiliate hover pill — anchored top-right of the plot strip
 so it never overlaps the endpoint captions or the axis timestamps. */
.mp-spk__pill {
 position: absolute; right: 4px; top: -2px;
 display: inline-flex; align-items: center; gap: 6px;
 background: #1B5BFF; color: #fff;
 padding: 4px 10px; border-radius: 999px;
 font-family: var(--sans);
 font-size: 11px; font-weight: 600;
 text-decoration: none;
 box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.mp-spk__pill:hover { background: #1448D6; }
.mp-spk__pill-price { font-family: var(--mono); }

/* One-line helper caption explaining the chart. Sits between the header bar
 and the three legs so first-time visitors understand what they're looking
 at without hovering. */
.mp-spk__caption {
 margin: 0 0 10px;
 font-family: var(--sans);
 font-size: 12px;
 color: var(--ink-2);
 line-height: 1.55;
 max-width: 760px;
}
.mp-spk__legend {
 display: inline-flex; align-items: center;
 padding: 0 5px; border-radius: 4px;
 font-weight: 600;
}
.mp-spk__legend--short { color: #DC2626; background: rgba(220,38,38,0.10); }
.mp-spk__legend--drift { color: #16A34A; background: rgba(22,163,74,0.10); }

/* ── Market section (.mp-mkt) ──────────────────────────────────────────────────── */
.mp-mkt {
 background: var(--bg-0);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 margin-top: 16px;
 overflow: hidden;
}

/* Section header */
.mp-mkt__head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 16px 10px;
 border-bottom: 1px solid var(--line);
}
.mp-mkt__head-text {}
.mp-mkt__head h2 {
 font-size: var(--t-h3);
 font-weight: 700;
 margin: 0 0 2px;
 line-height: 1.3;
 color: var(--ink-0);
}
.mp-mkt__sub {
 font-size: var(--t-sm);
 color: var(--ink-2);
 margin: 0;
 line-height: 1.5;
}

/* Only-at pill */
.mp-mkt__only {
 display: inline-block;
 flex-shrink: 0;
 padding: 3px 8px;
 border-radius: var(--r-pill);
 font-size: var(--t-xs);
 font-weight: 600;
 letter-spacing: .04em;
 text-transform: uppercase;
 white-space: nowrap;
 margin-top: 2px;
}

/* Best-price summary row */
.mp-mkt__best {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 16px;
 padding: 8px 16px;
 background: var(--bg-1);
 border-bottom: 1px solid var(--line);
}
.mp-mkt__best-item {
 display: flex;
 align-items: center;
 gap: 4px;
 font-size: var(--t-sm);
}
.mp-mkt__best-label {
 color: var(--ink-2);
}
.mp-mkt__best-price {
 font-size: 15px;
 font-weight: 600;
 color: var(--cta);
 text-decoration: none;
}
.mp-mkt__best-price:hover { text-decoration: underline; }
.mp-mkt__best-book {
 color: var(--ink-3);
 font-size: var(--t-xs);
}

/* Table wrapper (horizontal scroll on mobile) */
.mp-mkt__table-wrap {
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}
.mp-mkt__table {
 width: 100%;
 border-collapse: collapse;
 font-size: var(--t-sm);
 min-width: 320px;
}
.mp-mkt__table th {
 padding: 6px 12px;
 font-size: var(--t-xs);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .04em;
 color: var(--ink-3);
 text-align: right;
 background: var(--bg-1);
 border-bottom: 1px solid var(--line);
}
.mp-mkt__th-book { text-align: left; }
.mp-mkt__table tbody tr {
 border-bottom: 1px solid var(--line);
 transition: background .1s;
}
.mp-mkt__table tbody tr:last-child { border-bottom: 0; }
.mp-mkt__table tbody tr:hover { background: var(--bg-1); }

.mp-mkt__book-cell { padding: 8px 12px; }
.mp-mkt__book-inner {
 display: flex;
 align-items: center;
 gap: 8px;
}
.mp-mkt__book-inner .book-tile { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.mp-mkt__book-inner .book-logo-wrap { width: 20px; height: 20px; flex-shrink: 0; }
.mp-mkt__book-inner .book-logo-img { width: 20px; height: 20px; object-fit: contain; }

.mp-mkt__cell {
 padding: 8px 12px;
 text-align: right;
 color: var(--ink-2);
 font-size: var(--t-sm);
}
.mp-mkt__cell a {
 color: var(--ink-1);
 text-decoration: none;
 font-weight: 500;
}
.mp-mkt__cell a:hover { color: var(--cta); text-decoration: underline; }
.mp-mkt__cell.is-best a { color: var(--cta); font-weight: 700; }
.mp-mkt__cell.is-empty { color: var(--ink-4); }

/* Ladder table variant */
.mp-mkt__table--ladder .mp-mkt__ladder-hdp {
 padding: 6px 12px;
 text-align: left;
 color: var(--ink-1);
 font-weight: 600;
}
.mp-mkt__ladder-book {
 display: block;
 font-size: var(--t-xs);
 color: var(--ink-3);
 font-family: var(--sans);
 font-weight: 400;
 white-space: nowrap;
}

/* Collapsible alt-lines block */
.mp-mkt__alt {
 border-top: 1px solid var(--line);
 padding: 0;
}
.mp-mkt__alt summary {
 padding: 8px 16px;
 font-size: var(--t-sm);
 color: var(--ink-2);
 cursor: pointer;
 user-select: none;
 list-style: none;
}
.mp-mkt__alt summary::-webkit-details-marker { display: none; }
.mp-mkt__alt summary::before { content: '▶ '; font-size: 10px; }
.mp-mkt__alt[open] summary::before { content: '▼ '; }
.mp-mkt__alt summary:hover { color: var(--ink-0); background: var(--bg-1); }

/* Sub-tabs */
.mp-mkt__tabs-bar {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 gap: 0;
 border-bottom: 1px solid var(--line);
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
 padding: 0 12px;
}
.mp-mkt__tabs-bar::-webkit-scrollbar { display: none; }
.mp-mkt__tab {
 flex: 0 0 auto;
 padding: 8px 14px;
 font-size: var(--t-sm);
 font-weight: 500;
 color: var(--ink-2);
 border: 0;
 border-bottom: 2px solid transparent;
 background: none;
 cursor: pointer;
 white-space: nowrap;
 transition: color .15s, border-color .15s;
}
.mp-mkt__tab:hover { color: var(--ink-0); }
.mp-mkt__tab.is-active {
 color: var(--accent);
 border-bottom-color: var(--accent);
 font-weight: 600;
}
.mp-mkt__pane { }
.mp-mkt__pane.is-hidden { display: none; }

/* Team sub-label inside team-cards pane */
.mp-mkt__team-sub { margin-top: 4px; }
.mp-mkt__team-label {
 display: block;
 padding: 6px 16px 2px;
 font-size: var(--t-xs);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .05em;
 color: var(--ink-3);
 background: var(--bg-1);
 border-bottom: 1px solid var(--line);
}

/* Correct-score grid */
.mp-cs__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
 gap: 6px;
 padding: 12px 16px;
}
.mp-cs__cell {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 padding: 8px 6px;
 border: 1px solid var(--line);
 border-radius: var(--r-sm);
 background: var(--bg-0);
 transition: border-color .1s;
}
.mp-cs__cell:hover { border-color: var(--cta); }
.mp-cs__label {
 font-size: var(--t-sm);
 font-weight: 700;
 color: var(--ink-0);
 font-family: var(--sans);
}
.mp-cs__price {
 font-size: 13px;
 font-weight: 600;
 color: var(--cta);
 text-decoration: none;
}
.mp-cs__price:hover { text-decoration: underline; }
.mp-cs__book {
 font-size: 10px;
 color: var(--ink-3);
 white-space: nowrap;
}

/* Goals-in-match rows */
.mp-mkt__gim {
 padding: 8px 16px;
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.mp-mkt__gim-row {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 6px 0;
 border-bottom: 1px solid var(--line);
 font-size: var(--t-sm);
}
.mp-mkt__gim-row:last-child { border-bottom: 0; }
.mp-mkt__gim-label { flex: 1; color: var(--ink-1); }
.mp-mkt__gim-price { color: var(--cta); font-weight: 600; text-decoration: none; }
.mp-mkt__gim-price:hover { text-decoration: underline; }
.mp-mkt__gim-book { color: var(--ink-3); font-size: var(--t-xs); }

/* ── Mobile overrides for .mp-nav and .mp-mkt ─────────────────────────────────── */
@media (max-width: 540px) {
 .mp-nav {
 margin-left: -14px;
 margin-right: -14px;
 padding-left: 14px;
 padding-right: 14px;
 scroll-snap-type: x proximity;
 }
 .mp-nav__pill { scroll-snap-align: start; }
 .mp-mkt { border-radius: var(--r-sm); }
 .mp-mkt__head { padding: 10px 12px 8px; }
 .mp-mkt__head h2 { font-size: 15px; }
 .mp-mkt__best { padding: 6px 12px; gap: 6px 12px; }
 .mp-mkt__book-cell { padding: 7px 8px; }
 .mp-mkt__cell { padding: 7px 8px; }
 .mp-cs__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; padding: 8px; }
 .mp-preview { margin-top: 10px; padding: 10px 12px; font-size: 12px; }
}

/* ============================================================================
 Phase 2 — Player Props: .mp-pp__* and player page layout
 ============================================================================ */

/* ── Player props teaser grid (match page section) ─────────────────────────── */
.mp-pp {
 /* Inherits .mp-mkt card styling */
}

.mp-pp__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 12px;
 padding: 12px 14px;
}

/* Per-market full prop tables (below the player teaser grid). */
.mp-pp__markets {
 border-top: 1px solid var(--line);
 padding: 14px;
}
.mp-pp__markets-h {
 margin: 0 0 10px;
 font-size: 14px;
 font-weight: 600;
 color: var(--text-2);
 letter-spacing: 0.02em;
 text-transform: uppercase;
}
.mp-pp__markets-section-h {
 margin: 0 0 14px;
 font-size: 15px;
 font-weight: 700;
 color: var(--text-1);
 letter-spacing: 0.02em;
 text-transform: uppercase;
}
.mp-pp__markets-block {
 margin-bottom: 22px;
}
.mp-pp__markets-block:last-child {
 margin-bottom: 0;
}
.mp-pp__more {
 margin-top: 8px;
 font-size: 13px;
 color: var(--text-2);
 cursor: pointer;
}
.mp-pp__more summary {
 padding: 6px 10px;
 background: var(--bg-2);
 border-radius: 6px;
}

.mp-pp__card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 14px 10px 12px;
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 text-decoration: none;
 color: inherit;
 transition: background .15s, border-color .15s, box-shadow .15s;
 cursor: pointer;
}

.mp-pp__card:hover {
 background: var(--bg-2);
 border-color: var(--accent);
 box-shadow: var(--shadow-1);
}

/* Photo or initials avatar */
.mp-pp__avatar {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 display: block;
 flex-shrink: 0;
}

/* Initials avatar fallback */
.mp-pp__avatar--initials {
 display: flex;
 align-items: center;
 justify-content: center;
 background: oklch(0.65 0.15 var(--avatar-hue, 250deg));
 color: #fff;
 font-weight: 700;
 font-size: 24px;
 font-family: var(--sans);
 letter-spacing: .03em;
 border-radius: 50%;
 flex-shrink: 0;
}

.mp-pp__name {
 font-size: 13px;
 font-weight: 600;
 color: var(--ink-0);
 text-align: center;
 line-height: 1.3;
}

.mp-pp__role {
 font-size: 11px;
 color: var(--ink-3);
 text-align: center;
 line-height: 1.4;
}

.mp-pp__price {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 margin-top: 2px;
}

.mp-pp__lbl {
 font-size: 10px;
 color: var(--ink-3);
 text-transform: uppercase;
 letter-spacing: .04em;
 text-align: center;
}

.mp-pp__price .num {
 font-size: 18px;
 font-weight: 700;
 font-family: var(--mono);
 color: var(--cta);
 line-height: 1;
}

.mp-pp__book {
 font-size: 10px;
 color: var(--ink-2);
}

/* Show-more button */
.mp-pp__show-more {
 display: block;
 width: calc(100% - 28px);
 margin: 0 14px 14px;
 padding: 10px;
 border: 1px solid var(--line-2);
 border-radius: var(--r-md);
 background: var(--bg-1);
 color: var(--ink-2);
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 text-align: center;
 transition: background .1s, color .1s;
}
.mp-pp__show-more:hover { background: var(--bg-2); color: var(--ink-0); }

/* Match + Player page max-width container */
.mp-page {
 max-width: var(--content-max, 1200px);
 margin: 0 auto;
 padding: 0 20px;
 width: 100%;
 box-sizing: border-box;
}
@media (max-width: 600px) {
 .mp-page { padding: 0 14px; }
}

/* Player auto-text narrative block */
.player-narrative {
 margin: 24px 0 8px;
 padding: 18px 22px;
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
}
.player-narrative h2 {
 font-size: var(--t-h3, 18px);
 margin: 0 0 10px;
 color: var(--ink-0);
}
.player-narrative p {
 margin: 0 0 10px;
 line-height: 1.65;
 color: var(--ink-1);
 font-size: var(--t-body, 15px);
}
.player-narrative p:last-child { margin-bottom: 0; }
.player-narrative .num {
 font-family: var(--font-mono, ui-monospace, monospace);
 font-variant-numeric: tabular-nums;
 font-weight: 600;
}
.player-narrative__stats {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 gap: 10px;
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px solid var(--line);
}
.player-narrative__stat { display: flex; flex-direction: column; }
.player-narrative__stat strong {
 font-family: var(--font-mono, ui-monospace, monospace);
 font-variant-numeric: tabular-nums;
 font-size: 18px;
 color: var(--ink-0);
 line-height: 1.2;
}
.player-narrative__stat span {
 font-size: 12px;
 color: var(--ink-2);
 margin-top: 2px;
}

/* ── Player page layout (.player-page) ─────────────────────────────────────── */
.player-page {
 /* Extends .mp-page */
}

.player-hero {
 display: grid;
 grid-template-columns: 200px 1fr;
 gap: 28px;
 padding: 28px 0 24px;
 align-items: flex-start;
}

.player-hero__media {
 flex-shrink: 0;
}

.player-hero__photo {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 object-fit: cover;
 /* Wikipedia portrait photos are tall (e.g. 330×495). With default centred
 cropping the face often ends up cut off at the top. Bias the crop to the
 upper-centre so the head stays visible. */
 object-position: 50% 20%;
 display: block;
 background: var(--bg-2);
}

/* Large initials avatar on player page */
.player-hero .mp-pp__avatar--initials {
 width: 200px !important;
 height: 200px !important;
 font-size: 56px;
}

.player-hero__name {
 font-size: 24px;
 font-weight: 700;
 color: var(--ink-0);
 line-height: 1.2;
 margin: 0 0 6px;
}

.player-hero__subtitle {
 font-size: 14px;
 color: var(--ink-2);
 margin: 0 0 12px;
}

/* Attribution line on the player hero. The selector beats the broader
 .player-page p rule below (which would otherwise force 16px). Keep it
 deliberately tiny — the user only cares about it for licence/CC compliance. */
.player-page .player-hero__attr,
.player-page .player-bio .player-hero__attr,
p.player-hero__attr {
 font-size: 10px;
 line-height: 1.4;
 color: var(--ink-3);
 margin: 6px 0 0;
 opacity: 0.7;
 font-weight: 400;
}
.player-page .player-hero__attr a,
.player-page .player-bio .player-hero__attr a {
 font-size: 10px;
 color: var(--ink-3);
 text-decoration: underline;
}

/* Player bio — verbatim Wikipedia extract */
.player-bio {
 background: var(--bg-1);
 border-left: 3px solid var(--accent);
 padding: 12px 16px;
 border-radius: 0 var(--r-sm) var(--r-sm) 0;
 margin: 12px 0 0;
 font-size: 14px;
 line-height: 1.7;
 color: var(--ink-1);
}

/* Upcoming fixtures grid */
.player-fixtures {
 margin-top: 24px;
}

.player-fixtures__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 12px;
 padding: 12px 14px;
}

.player-fixture-card {
 background: var(--bg-1);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 padding: 14px 16px;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.player-fixture-card__date {
 font-size: 11px;
 color: var(--ink-3);
 font-weight: 500;
}

.player-fixture-card__match {
 font-size: 15px;
 font-weight: 600;
 color: var(--ink-0);
 line-height: 1.25;
}

.player-fixture-card__league {
 font-size: 11px;
 color: var(--ink-3);
}

.player-fixture-card__hl {
 display: flex;
 align-items: baseline;
 gap: 6px;
 margin-top: 4px;
}

.player-fixture-card__mkt {
 font-size: 11px;
 color: var(--ink-2);
}

.player-fixture-card__link {
 display: inline-block;
 margin-top: 8px;
 font-size: 12px;
 font-weight: 600;
 color: var(--cta);
 text-decoration: none;
}
.player-fixture-card__link:hover { text-decoration: underline; }

/* All markets section */
.player-markets {
 margin-top: 24px;
}

.player-markets__section {
 margin-bottom: 24px;
}

.player-markets__section h2 {
 font-size: 17px;
 font-weight: 700;
 color: var(--ink-0);
 margin: 0 0 10px;
 padding: 0 14px;
}

.player-markets__fixture-group {
 margin-bottom: 14px;
}

.player-markets__fixture-label {
 font-size: 12px;
 font-weight: 600;
 color: var(--ink-2);
 padding: 6px 14px;
 background: var(--bg-1);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}

/* Best-row highlight in markets table */
.mp-mkt__table tbody tr.is-best-row td {
 background: var(--up-soft);
}

/* FAQ on player page */
.player-faq {
 margin-top: 24px;
}

/* ── Mobile overrides for player pages ─────────────────────────────────────── */
@media (max-width: 640px) {
 .player-hero {
 grid-template-columns: 1fr;
 gap: 16px;
 padding: 16px 0;
 }
 .player-hero__media {
 display: flex;
 justify-content: center;
 }
 .player-hero__photo,
 .player-hero .mp-pp__avatar--initials {
 width: 120px !important;
 height: 120px !important;
 }
 .player-hero .mp-pp__avatar--initials {
 font-size: 32px !important;
 }
 .player-hero__name {
 font-size: 20px;
 text-align: center;
 }
 .player-hero__subtitle { text-align: center; }
 .player-fixtures__grid {
 grid-template-columns: 1fr;
 }
 /* Player props grid: 2 columns on mobile */
 .mp-pp__grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
 padding: 8px 10px;
 }
 .mp-pp__card {
 padding: 10px 8px 8px;
 }
 .mp-pp__avatar,
 .mp-pp__avatar--initials {
 width: 60px !important;
 height: 60px !important;
 font-size: 18px !important;
 }
 .mp-pp__price .num { font-size: 16px; }
}

/* ============================================================================
 Comments fix pass — May 2026
 Devendra feedback batch: FAQ buttons, brand logo box, mobile breadcrumb,
 player page purple override, sticky pills enhancement.
 ============================================================================ */

/* Mobile breadcrumb: remove the 32px top padding above table pages */
@media (max-width: 880px) {
 .lf-breadcrumb {
 padding-top: 0;
 margin-top: 4px;
 }
 .v2-compat .lf-article {
 padding-top: 8px;
 }
}

/* Player page: purple accent override for CTAs and price highlights */
.player-page .mp-mkt__cell.is-best a,
.player-page .mp-mkt__cell.is-best .num {
 color: var(--accent);
}
.player-page .mp-best-badge {
 background: var(--accent-soft);
 color: var(--accent);
 border-color: var(--accent);
}
.player-page .mp-nav__pill.is-active {
 background: var(--accent-soft);
 color: var(--accent);
 border-color: var(--accent);
}

/* Player page H2 / H3 typography */
.player-page h2,
.player-markets__section > h2,
.player-narrative h2 {
 font-size: 22px;
 line-height: 1.3;
 font-weight: 700;
}
.player-markets__fixture-label {
 font-size: 18px;
 font-weight: 600;
 line-height: 1.35;
 color: var(--ink-0);
 padding: 10px 14px 6px;
}
.player-page p,
.player-page li,
.player-narrative p {
 font-size: 16px;
 line-height: 1.6;
}

/* Brand logo box inside the player props table */
.mp-mkt__book-cell .mp-book-link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 text-decoration: none;
 color: inherit;
}
.mp-mkt__logo-box {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: 6px;
 flex-shrink: 0;
 overflow: hidden;
 position: relative;
}
.mp-mkt__logo-img {
 width: 70%;
 height: 70%;
 object-fit: contain;
 display: block;
}
.mp-book-link__name {
 font-size: 14px;
 font-weight: 600;
 color: var(--ink-0);
}
@media (max-width: 640px) {
 .mp-mkt__logo-box { width: 24px; height: 24px; }
 .mp-book-link__name { font-size: 13px; }
}

/* FAQ as expanding question buttons (player page) */
.player-faq .mp-faq-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 12px;
}
.player-faq .mp-faq-item {
 border: 1px solid var(--line);
 border-radius: 10px;
 background: var(--bg-0);
 overflow: hidden;
 transition: border-color .15s, box-shadow .15s;
}
.player-faq .mp-faq-item[open] {
 border-color: var(--accent);
 box-shadow: 0 1px 3px rgba(124, 58, 237, 0.08);
}
.player-faq .mp-faq-item > summary {
 list-style: none;
 cursor: pointer;
 padding: 14px 44px 14px 16px;
 font-size: 16px;
 font-weight: 600;
 color: var(--ink-0);
 line-height: 1.45;
 position: relative;
 user-select: none;
}
.player-faq .mp-faq-item > summary::-webkit-details-marker { display: none; }
.player-faq .mp-faq-item > summary::after {
 content: '';
 position: absolute;
 right: 18px;
 top: 50%;
 width: 8px;
 height: 8px;
 border-right: 2px solid var(--ink-2);
 border-bottom: 2px solid var(--ink-2);
 transform: translateY(-70%) rotate(45deg);
 transition: transform .2s ease;
}
.player-faq .mp-faq-item[open] > summary::after {
 transform: translateY(-30%) rotate(-135deg);
 border-color: var(--accent);
}
.player-faq .mp-faq-item > summary:hover {
 background: var(--bg-1);
}
.player-faq .mp-faq-item > p {
 margin: 0;
 padding: 0 16px 16px;
 font-size: 16px;
 line-height: 1.6;
 color: var(--ink-1);
}

/* Better sticky behaviour for .mp-nav: light blur, more breathing room */
.mp-nav {
 backdrop-filter: blur(8px);
 background: color-mix(in srgb, var(--bg-0) 92%, transparent);
}
@supports not (backdrop-filter: blur(8px)) {
 .mp-nav { background: var(--bg-0); }
}

/* ============================================================================
 Comments fix pass — May 15, 2026 (round 2)
 - sticky header drop-shadow once scrolled (.is-scrolled toggle in ui-shell.js)
 - smoother .mode-toggle and .seg tab transitions (200ms ease, all)
 - player page: blue link/highlight CTAs -> purple
 - player-markets__section <h3> at 18px
 - count-up animation: see v2/page-home.js (IntersectionObserver, 800ms)
 ============================================================================ */

/* Sticky nav drop-shadow on scroll */
/* Search overlay */
.so-search-overlay {
 position: fixed; inset: 0; z-index: 100;
 display: flex; flex-direction: column; align-items: center;
 padding: 80px 16px 16px;
}
.so-search-overlay[hidden] { display: none; }
.so-search-overlay__backdrop {
 position: absolute; inset: 0;
 background: rgba(10, 10, 11, 0.4);
 backdrop-filter: blur(2px);
}
.so-search-overlay__panel {
 position: relative; z-index: 1;
 width: 100%; max-width: 640px;
 background: var(--bg-0);
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 box-shadow: 0 20px 60px rgba(10, 10, 11, 0.18);
 overflow: hidden;
 display: flex; flex-direction: column;
 max-height: calc(100vh - 96px);
}
.so-search-overlay__box {
 display: flex; align-items: center; gap: 10px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--line);
 color: var(--ink-2);
}
.so-search-overlay__box input {
 flex: 1; border: 0; outline: 0; background: transparent;
 font-size: 16px; color: var(--ink-0);
}
.so-search-overlay__close {
 padding: 3px 8px; border-radius: 6px;
 font-size: 11px; font-weight: 600; letter-spacing: .04em;
 background: var(--bg-1); color: var(--ink-2);
 border: 1px solid var(--line);
 cursor: pointer;
}
.so-search-overlay__close:hover { background: var(--bg-2); color: var(--ink-0); }
.so-search-overlay__results {
 overflow-y: auto;
 flex: 1; min-height: 0;
}
.so-search-overlay__results:empty::after {
 content: 'Type at least 2 characters to search teams, leagues or players.';
 display: block; padding: 24px 16px; color: var(--ink-3); font-size: 13px; text-align: center;
}
.so-result-group { padding: 8px 0; border-bottom: 1px solid var(--line); }
.so-result-group:last-child { border-bottom: 0; }
.so-result-group__h {
 padding: 6px 16px;
 font-size: 11px; font-weight: 600; letter-spacing: .08em;
 text-transform: uppercase; color: var(--ink-3);
}
.so-result {
 display: flex; align-items: center; justify-content: space-between; gap: 12px;
 padding: 10px 16px;
 font-size: 14px; color: var(--ink-0); cursor: pointer;
}
.so-result:hover, .so-result.is-active { background: var(--bg-2); }
.so-result__meta { color: var(--ink-3); font-size: 12px; }
.so-result mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 1px; }

.so-header { transition: box-shadow .15s ease, border-bottom-color .15s ease; }
.so-header.is-scrolled {
 box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
 border-bottom-color: var(--line-2, var(--line));
}

/* Smooth tab transitions on the homepage filters */
.filters .seg button,
.mode-toggle button {
 transition: all 200ms ease;
}

/* Player page: recolour any remaining blue CTAs/highlights to SimplyOdds purple */
.player-page .player-fixture-card__link,
.player-page .mp-pp__price .num,
.player-page .player-fixture-card__hl .num {
 color: var(--accent);
}
.player-page .player-fixture-card__link:hover,
.player-page .player-fixture-card__link:focus-visible {
 color: var(--accent-hover, #6D28D9);
}
.player-page a:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
 border-radius: 4px;
}

/* Player page: market section H3 sized down from the default H2 step */
.player-markets__section h3 {
 font-size: 18px;
 line-height: 1.35;
 font-weight: 700;
 color: var(--ink-0);
 margin: 0 0 10px;
 padding: 0 14px;
}
/* Override the older 22px H2 rule for any legacy pages still on H2 */
.player-page .player-markets__section > h3,
.player-page .player-markets__section > h2 {
 font-size: 18px;
 line-height: 1.35;
 font-weight: 700;
}

/* ============================================================================
 Deep-dive Fix 9 - May 2026
 Collapse player markets into one unified table per fixture.
 Replaces 11x repeated single-row "sections" with one clean table per match.
 ============================================================================ */
.player-markets__fixture {
 margin: 0 0 24px;
 border: 1px solid var(--line);
 border-radius: 10px;
 overflow: hidden;
 background: var(--bg-0);
}
.player-markets__fixture-head {
 padding: 12px 14px;
 background: var(--bg-1);
 border-bottom: 1px solid var(--line);
}
.player-markets__fixture .player-markets__fixture-label {
 font-family: var(--sans);
 font-size: 16px;
 font-weight: 700;
 line-height: 1.3;
 color: var(--ink-0);
 background: transparent;
 border: 0;
 padding: 0;
 margin: 0 0 2px;
}
.player-markets__fixture-meta {
 font-family: var(--sans);
 font-size: 12px;
 font-weight: 500;
 color: var(--ink-3);
 letter-spacing: 0;
}
.player-markets-table-wrap {
 width: 100%;
 overflow-x: auto;
}
.player-markets-table {
 width: 100%;
 border-collapse: collapse;
 font-family: var(--sans);
}
.player-markets-table thead th {
 text-align: left;
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--ink-3);
 padding: 10px 14px;
 border-bottom: 1px solid var(--line);
 background: var(--bg-0);
 white-space: nowrap;
}
.player-markets-table thead th.pmt-price,
.player-markets-table thead th.pmt-implied {
 text-align: right;
}
.player-markets-table tbody td {
 padding: 12px 14px;
 border-bottom: 1px solid var(--line);
 font-size: 14px;
 line-height: 1.4;
 color: var(--ink-1);
}
.player-markets-table tbody tr:last-child td {
 border-bottom: 0;
}
.player-markets-table tbody tr:hover td {
 background: var(--bg-1);
}
.player-markets-table .pmt-market {
 font-weight: 600;
 color: var(--ink-0);
}
.player-markets-table .pmt-price {
 text-align: right;
 font-family: var(--mono);
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 color: var(--accent);
 font-size: 15px;
}
.player-markets-table .pmt-book {
 font-weight: 500;
 color: var(--ink-1);
 white-space: nowrap;
}
.player-markets-table .pmt-implied {
 text-align: right;
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 color: var(--ink-2);
 font-size: 13px;
}
@media (max-width: 640px) {
 .player-markets-table thead th,
 .player-markets-table tbody td {
 padding: 10px 10px;
 }
 .player-markets-table .pmt-market {
 font-size: 13px;
 }
 .player-markets-table .pmt-book {
 font-size: 13px;
 }
}

/* ============================================================================
 Deep-dive Fix 1 - May 2026
 Global heading line-heights and letter-spacing reset.
 Default 1.5 was too airy. Display titles get 1.1, h2 1.2, h3 1.25.
 ============================================================================ */
.v2-compat h1,
.v2-compat .page-title {
 line-height: 1.1;
 letter-spacing: -0.025em;
}
.v2-compat h2 {
 line-height: 1.2;
 letter-spacing: -0.015em;
}
.v2-compat h3 {
 line-height: 1.25;
 letter-spacing: -0.01em;
}

/* ============================================================================
 Deep-dive Fix 4 + Fix 5 - May 2026
 Homepage hero compress + filter row lockups with labels.
 ============================================================================ */
.filters.filters--lockups {
 display: flex;
 flex-wrap: wrap;
 gap: 18px 24px;
 align-items: flex-end;
 margin: 18px 0 8px;
}
.filter-lockup {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
}
.filter-lockup__label {
 font-family: var(--sans);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ink-3);
 line-height: 1;
}
.filter-lockup__group {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}
.filters--lockups .filter-sort {
 display: inline-flex;
 align-items: center;
 gap: 0;
}
.filters--lockups .filter-sort__label {
 display: none;
}
.match-list-caption {
 display: flex;
 justify-content: flex-end;
 margin: 0 0 8px;
 font-size: 12px;
 color: var(--ink-3);
 font-family: var(--sans);
}
.match-list-caption #match-count {
 font-size: 12px;
 color: var(--ink-3);
}
@media (max-width: 640px) {
 .filters.filters--lockups {
 gap: 14px;
 }
 .filter-lockup {
 width: 100%;
 }
 .match-list-caption {
 justify-content: flex-start;
 }
}

/* ============================================================================
 Deep-dive Fix 7 - May 2026
 League page hero: replaces inline lh-why callout with collapsible details.
 ============================================================================ */
.v2-compat .lh-method {
 margin: 18px 0 0;
 border: 1px solid var(--line);
 border-radius: var(--r-md);
 background: var(--bg-1);
}
.v2-compat .lh-method > summary {
 list-style: none;
 cursor: pointer;
 padding: 10px 14px;
 font-family: var(--sans);
 font-size: 13px;
 font-weight: 600;
 color: var(--ink-1);
 display: flex;
 align-items: center;
 gap: 8px;
}
.v2-compat .lh-method > summary::-webkit-details-marker { display: none; }
.v2-compat .lh-method > summary::after {
 content: "+";
 margin-left: auto;
 font-size: 16px;
 color: var(--ink-3);
 transition: transform .2s ease;
}
.v2-compat .lh-method[open] > summary::after {
 content: "−";
}
.v2-compat .lh-method > p {
 margin: 0;
 padding: 0 14px 14px;
 font-size: 13px;
 color: var(--ink-2);
 line-height: 1.55;
}

/* ============================================================================
 Deep-dive Fix 10 - May 2026
 Books index card hierarchy: tighter label, monospace chip, review as link.
 ============================================================================ */
.v2-compat .book-card__code-label {
 font-family: var(--sans);
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--ink-3);
 margin-right: 4px;
}
.v2-compat .book-card__review-link {
 font-weight: 600;
 color: var(--ink-1);
}
.v2-compat .book-card__review-link:hover {
 color: var(--accent);
}

/* ============================================================================
 Deep-dive Fix 11 - May 2026
 Match page THE BET sticky dock - keeps the bet anchored at viewport bottom.
 ============================================================================ */
.mp-bet-dock {
 position: sticky;
 bottom: 0;
 z-index: 30;
 margin: 32px -16px 0;
 background: var(--ink-0);
 color: #ffffff;
 border-top: 1px solid rgba(255,255,255,0.08);
 box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
 padding: 12px 16px;
}
.mp-bet-dock__inner {
 display: flex;
 align-items: center;
 gap: 16px;
 max-width: 1080px;
 margin: 0 auto;
 flex-wrap: wrap;
}
.mp-bet-dock__copy {
 display: inline-flex;
 align-items: baseline;
 gap: 8px;
 flex: 1 1 auto;
 min-width: 0;
 flex-wrap: wrap;
 font-family: var(--sans);
 line-height: 1.3;
}
.mp-bet-dock__label {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: rgba(255,255,255,0.55);
}
.mp-bet-dock__pick {
 font-size: 16px;
 font-weight: 700;
 color: #ffffff;
}
.mp-bet-dock__price {
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 font-size: 18px;
 font-weight: 800;
 color: #ffffff;
}
.mp-bet-dock__at {
 font-size: 14px;
 font-weight: 500;
 color: rgba(255,255,255,0.75);
}
.mp-bet-dock__edge {
 font-size: 13px;
 font-weight: 700;
 color: #34d399;
 margin-left: 4px;
}
.mp-bet-dock__cta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 10px 16px;
 background: var(--cta, #1B5BFF);
 color: #ffffff;
 font-weight: 700;
 font-size: 14px;
 border-radius: 8px;
 text-decoration: none;
 white-space: nowrap;
 transition: background .15s ease, transform .12s ease;
}
.mp-bet-dock__cta:hover { background: var(--cta-hover, #1448D6); }
.mp-bet-dock__cta:active { transform: translateY(1px); }
@media (max-width: 640px) {
 .mp-bet-dock {
 margin: 24px -12px 0;
 padding: 10px 12px;
 }
 .mp-bet-dock__inner { gap: 10px; }
 .mp-bet-dock__pick { font-size: 14px; }
 .mp-bet-dock__price { font-size: 16px; }
 .mp-bet-dock__at { font-size: 12px; }
 .mp-bet-dock__edge { font-size: 11px; }
 .mp-bet-dock__cta {
 padding: 9px 14px;
 font-size: 13px;
 }
}

/* ============================================================================
 Deep-dive Fix 12 - May 2026
 Kelly result hero: stake is the headline number, maths drops to support scale.
 ============================================================================ */
.v2-compat .kelly-result {
 padding: 24px 22px;
 border: 1px solid var(--line);
 border-radius: 12px;
 background: var(--bg-0);
}
.v2-compat .kelly-result.is-good {
 background: var(--up-soft, #e7f7ec);
 border-color: var(--up, #16a34a);
}
.v2-compat .kelly-result.is-bad {
 background: var(--bg-1);
 border-color: var(--line-2);
}
.v2-compat .kelly-hero {
 display: flex;
 flex-direction: column;
 gap: 4px;
 text-align: left;
}
.v2-compat .kelly-hero__label {
 font-family: var(--sans);
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--ink-2);
}
.v2-compat .kelly-hero__value {
 font-family: var(--mono);
 font-variant-numeric: tabular-nums;
 font-size: 48px;
 font-weight: 700;
 line-height: 1.05;
 color: var(--ink-0);
 letter-spacing: -0.02em;
}
.v2-compat .kelly-result.is-bad .kelly-hero__value {
 font-family: var(--sans);
 font-size: 28px;
 font-weight: 700;
 color: var(--down, #dc2626);
}
.v2-compat .kelly-hero__sub {
 font-size: 14px;
 color: var(--ink-2);
 font-weight: 500;
}
.v2-compat .kelly-maths {
 margin-top: 18px;
 padding-top: 14px;
 border-top: 1px solid rgba(0,0,0,0.08);
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.v2-compat .kelly-maths__row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 font-size: 13px;
 color: var(--ink-2);
}
.v2-compat .kelly-maths__row b {
 color: var(--ink-1);
 font-weight: 700;
 font-size: 13px;
}
@media (max-width: 640px) {
 .v2-compat .kelly-result { padding: 20px 16px; }
 .v2-compat .kelly-hero__value { font-size: 40px; }
}


/* ============================================================================
 SEO match-page legacy rules, ported from /styles.css to /v2/styles.css.
 These styles were authored against the original v1 design tokens (--text-1,
 --line-1, etc.). v2 added the SEO match HTML to the new shell but never
 migrated these rules, so every .mp-context, .mp-team-card, .mp-form-pill,
 .mp-venue, .mp-meta, .mp-where, .mp-poly, .mp-odds-table etc. on /match/
 pages was rendering on browser defaults. Variable aliases sit at the top
 of this stylesheet to bridge legacy token names to v2 tokens.
 ============================================================================ */

.mp-head {
 background: var(--bg-2);
 border: 1px solid var(--line-1);
 border-radius: 12px;
 padding: 22px 24px;
 box-shadow: var(--shadow-1);
}

@media (max-width: 640px) {
 .mp-head { padding: 16px 16px; border-radius: 10px; }
 .mp-title { font-size: 22px; }
}

.mp-vs { color: var(--text-3); font-weight: 500; margin: 0 6px; }

.mp-meta {
 display: flex; flex-wrap: wrap; gap: 10px 14px;
 font-size: 12px; color: var(--text-2);
 font-family: var(--sans);
 margin-bottom: 12px;
}

.mp-league { font-weight: 600; color: var(--text-1); }

.mp-kick, .mp-venue { color: var(--text-2); }

.mp-summary {
 margin: 12px 0 0;
 padding: 0;
 background: transparent;
 border: 0;
 font-family: var(--sans);
 font-size: 15px;
 line-height: 1.65;
 color: var(--text-2);
 max-width: 68ch;
}

.mp-poly {
 display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
 margin: 16px 0;
 padding: 12px 14px;
 background: var(--accent-soft);
 border: 1px solid var(--accent);
 border-radius: 8px;
}

.mp-poly-label {
 font-family: var(--sans);
 font-size: 11px; font-weight: 600;
 text-transform: uppercase; letter-spacing: .04em;
 color: var(--accent);
}

.mp-poly-prob {
 font-family: var(--mono);
 font-size: 13px; font-weight: 600;
 color: var(--text-1);
}

.mp-odds { margin: 22px 0; }

.mp-odds-head {
 display: flex; justify-content: space-between; align-items: baseline;
 margin-bottom: 10px;
}

.mp-odds-head h2 {
 font-family: var(--sans);
 font-size: 16px; font-weight: 700;
 margin: 0; color: var(--text-1);
}

.mp-odds-table {
 width: 100%; border-collapse: collapse;
 background: var(--bg-2);
 border: 1px solid var(--line-1);
 border-radius: 8px; overflow: hidden;
 font-family: var(--mono);
 font-size: 12px;
}

.mp-odds-table th,
.mp-odds-table td {
 padding: 9px 10px;
 text-align: right;
 border-bottom: 1px solid var(--line-1);
}

.mp-odds-table th {
 background: var(--bg-1);
 font-family: var(--sans);
 font-size: 11px; font-weight: 600;
 text-transform: uppercase; letter-spacing: .04em;
 color: var(--text-2);
}

.mp-odds-table tr:last-child td { border-bottom: 0; }

.mp-odds-table tbody tr:hover { background: var(--bg-3); }

.mp-th-book {
 text-align: left !important;
 font-family: var(--sans) !important;
 font-weight: 600; color: var(--text-1) !important;
 font-size: 12px !important; text-transform: none !important;
 letter-spacing: 0 !important;
}

.mp-td-price { font-family: var(--mono); font-weight: 500; color: var(--text-1); }

.mp-td-price .mp-price { font-family: var(--mono); }

.mp-td-price.is-best {
 background: transparent;
 box-shadow: none;
}

.mp-td-price.is-best .mp-price {
 display: inline-block;
 box-shadow: inset 0 0 0 1.5px var(--accent-cta, #1B5BFF);
 border-radius: 999px;
 padding: 3px 10px;
 color: var(--accent-cta, #1B5BFF);
 font-weight: 700;
 white-space: nowrap;
}

@media (max-width: 640px) {
 .mp-td-price.is-best .mp-price {
 padding: 2px 7px;
 font-size: 12px;
 }
 .mp-td-price { white-space: nowrap; }
 .mp-td-price .mp-price { font-size: 12px; }
}

.mp-titlerow {
 display: flex; align-items: flex-start; gap: 12px;
 flex-wrap: wrap;
}

.mp-titlerow .mp-title { flex: 1 1 auto; margin: 0; }

.mp-actions {
 display: flex; gap: 8px; flex-wrap: wrap;
 align-self: flex-start;
 margin-top: 4px;
}

.mp-action {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 7px 11px;
 background: var(--bg-2); color: var(--text-2);
 border: 1px solid var(--line-1);
 border-radius: 8px;
 font-family: var(--sans); font-size: 12px; font-weight: 600;
 cursor: pointer;
 transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.mp-action:hover { background: var(--bg-3, var(--bg-2)); color: var(--text-1); border-color: var(--line-2, var(--line-1)); }

.mp-action svg { display: block; }

.mp-action.is-watched {
 background: rgba(36, 184, 99, 0.12);
 color: var(--up);
 border-color: rgba(36, 184, 99, 0.4);
}

.mp-action.is-watched svg { fill: currentColor; }

.mp-action.is-flash {
 background: rgba(36, 184, 99, 0.12);
 color: var(--up);
 border-color: rgba(36, 184, 99, 0.4);
}

@media (max-width: 600px) {
 .mp-action-label { display: none; }
 .mp-action { padding: 8px; }
}

.mp-verdict-line {
 font-size: 14px; line-height: 1.5;
 color: var(--text-1);
 margin: 0;
}

.mp-where {
 display: flex; align-items: center; justify-content: space-between;
 gap: 10px; flex-wrap: wrap;
 margin: 0 0 10px;
 padding: 10px 12px;
 background: var(--bg-2);
 border: 1px solid var(--line-1);
 border-radius: 8px;
}

.mp-where-text {
 display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
 font-family: var(--sans); font-size: 13px;
 color: var(--text-2);
}

.mp-where-label {
 font-size: 10px; font-weight: 700; letter-spacing: .08em;
 text-transform: uppercase; color: var(--text-3);
}

.mp-where-side { color: var(--text-1); font-weight: 600; }

.mp-where-price {
 font-family: var(--mono);
 color: var(--up); font-weight: 700;
}

.mp-where-book { color: var(--text-3); }

.mp-where-cta {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 14px;
 background: var(--cta);
 color: var(--cta-text);
 border: 1px solid var(--cta-hover);
 border-radius: 6px;
 font-family: var(--sans); font-size: 13px; font-weight: 700;
 text-decoration: none;
 white-space: nowrap;
 box-shadow: var(--cta-shadow);
 transition: background-color .12s ease, transform .12s ease;
}

.mp-where-cta:hover { background: var(--cta-hover); color: var(--cta-text); text-decoration: none; transform: translateY(-1px); }

.mp-where-cta:active { transform: translateY(0); }

.mp-where-cta .book-logo,
.mp-where-cta img.book-logo {
 height: 20px; width: 20px;
 object-fit: contain;
 filter: brightness(0) saturate(100%); /* logos render dark on the orange */
 opacity: .88;
 display: inline-block;
 flex: 0 0 auto;
}

.mp-odds-note {
 margin-top: 8px;
 font-size: 11px; color: var(--text-3);
 font-family: var(--sans);
}

.mp-context { margin: 18px 0 22px; }

.mp-context-head {
 display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
 margin: 0 0 10px;
}

.mp-context-head h2 {
 font-family: var(--sans);
 font-size: 13px; font-weight: 600;
 text-transform: uppercase; letter-spacing: .06em;
 color: var(--text-2);
 margin: 0;
}

.mp-context-sub {
 font-family: var(--sans);
 font-size: 11px; color: var(--text-3);
 letter-spacing: .02em;
}

.mp-context-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}

.mp-team-card {
 background: var(--bg-2);
 border: 1px solid var(--line-1);
 border-radius: 10px;
 padding: 14px 16px;
 box-shadow: var(--shadow-1);
 transition: border-color .12s ease, transform .12s ease;
}

.mp-team-card:hover { border-color: var(--line-2); }

.mp-team-card-head {
 font-family: var(--sans);
 font-weight: 700; font-size: 15px;
 margin: 0 0 10px;
 padding-bottom: 8px;
 border-bottom: 1px solid var(--line-1);
 color: var(--text-1);
 letter-spacing: -.005em;
}

.mp-team-card-row {
 display: flex; align-items: center; justify-content: space-between;
 gap: 12px;
 font-size: 13px;
 padding: 6px 0;
 font-family: var(--sans);
 min-height: 28px;
}

.mp-team-card-row + .mp-team-card-row { border-top: 1px dashed var(--line-1); }

.mp-team-card-row > span:first-child {
 color: var(--text-3);
 font-size: 12px; font-weight: 500;
 letter-spacing: .01em;
}

.mp-team-card-row > b {
 color: var(--text-1); font-weight: 600;
 font-family: var(--mono); font-size: 13px;
}

.mp-team-card-row .mp-tcr-em {
 color: var(--text-3); font-style: normal; font-weight: 400;
 font-family: var(--sans); font-size: 11px;
 margin-left: 4px;
}

.mp-team-card-row--form { padding: 8px 0; }

.mp-form {
 display: inline-flex; gap: 4px;
}

.mp-form-pill {
 display: inline-flex; align-items: center; justify-content: center;
 width: 22px; height: 22px;
 font-family: var(--mono); font-size: 11px; font-weight: 700;
 border-radius: 5px;
 color: #fff;
 letter-spacing: 0;
 box-shadow: 0 1px 0 rgba(0,0,0,.18) inset;
}

.mp-form-pill.mp-form-W { background: var(--up); }

.mp-form-pill.mp-form-D { background: #d97706; }

.mp-form-pill.mp-form-L { background: var(--down); }

[data-theme="light"] .mp-form-pill.mp-form-D { background: #f59e0b; }

.mp-form span:not(.mp-form-pill) {
 display: inline-flex; align-items: center; justify-content: center;
 width: 22px; height: 22px;
 font-family: var(--mono); font-size: 11px; font-weight: 700;
 border-radius: 5px; color: #fff;
}

.mp-form-W { background: var(--up); }

.mp-form-D { background: #d97706; }

.mp-form-L { background: var(--down); }

.mp-page--gone .mp-head {
 border-color: var(--down);
}

.mp-page--gone .mp-summary {
 border-left-color: var(--down);
 background: var(--down-soft);
}

@media (max-width: 720px) {
 .mp-page { padding: 12px 12px 96px; }
 .mp-title { font-size: 18px; }
 .mp-summary { font-size: 14px; padding: 10px 12px; }
 .mp-context-grid { grid-template-columns: 1fr; }
 .mp-odds-table { font-size: 11px; }
 .mp-odds-table th, .mp-odds-table td { padding: 7px 6px; }

 .lf-article { padding: 16px 14px 60px; }
 .lf-head h1 { font-size: 22px; }
 .lf-lede { font-size: 15px; }
 .lf-section p, .lf-section ul, .lf-section ol { font-size: 15px; }

 .tool-wrap { padding: 16px 14px 60px; }
 .tool-wrap h1 { font-size: 20px; }
 .tool-row { flex-direction: column; align-items: stretch; gap: 4px; }
 .tool-row label { min-width: 0; }
 .tool-input { width: 100%; }
}

@media (max-width: 640px) {
 .opp-card { padding: 14px 14px 12px !important; }
 .opp-card-title { font-size: 16px; }
 .opp-card-edge { font-size: 18px; }
 .opp-arb-leg, .opp-ev-instr {
 flex-wrap: wrap; white-space: normal; font-size: 12.5px;
 }
 .opp-card-explain { font-size: 13.5px; }
 /* Allow horizontal scroll on any wide table */
 .table-wrap, .compare-wrap, .book-grid-wrap {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 /* Stop bottom tab bar from overlapping last card */
 main, #app, .view {
 padding-bottom: 80px !important;
 }
 /* Watch/share — icons only on mobile, compact tap targets */
 .mp-actions .mp-action, .mp-actions a, .mp-actions button {
 min-width: 0; flex: 0 0 auto; padding: 7px 9px;
 }
 .mp-actions .mp-action-label { display: none !important; }
 /* Segmented control no truncation */
 .market-tabs, .seg-control { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .market-tabs::-webkit-scrollbar, .seg-control::-webkit-scrollbar { display: none; }
}

/* ============================================================
 MP2 — MATCH PAGE REBUILD (mobile-first, design tokens, no !important)
 Namespace: .mp2 (article-level class) and all .mp2-* descendants.
 Built fresh: poster hero, single verdict card, price story sparkline,
 single odds table with Polymarket as a row, collapsibles below.
 Pulse / heartbeat used throughout: live dot, favourite ring,
 sparkline pulse, CTA shimmer, sticky dock pulse.
 ============================================================ */

/* ── MP2 design tokens (light + dark inherit from page) ──────── */
.mp2 {
 --mp2-pad: 14px;
 --mp2-radius-lg: 16px;
 --mp2-radius-md: 12px;
 --mp2-radius-sm: 8px;
 --mp2-gap: 16px;

 --mp2-bg: var(--bg-1, #ffffff);
 --mp2-bg-soft: var(--bg-2, #f6f6f9);
 --mp2-line: var(--line, #e5e5e9);
 --mp2-line-soft: color-mix(in srgb, var(--mp2-line) 50%, transparent);
 --mp2-ink-0: var(--ink-0, #0a0a0b);
 --mp2-ink-1: var(--ink-1, #2a2a2e);
 --mp2-ink-2: var(--ink-2, #5b5b63);
 --mp2-ink-3: var(--ink-3, #8a8a93);

 --mp2-accent: #7C3AED;
 --mp2-accent-soft: color-mix(in srgb, var(--mp2-accent) 10%, transparent);
 --mp2-cta: #1B5BFF;
 --mp2-cta-ink: #ffffff;

 --mp2-up: #16a34a;
 --mp2-up-soft: color-mix(in srgb, var(--mp2-up) 12%, transparent);
 --mp2-down: #dc2626;
 --mp2-down-soft: color-mix(in srgb, var(--mp2-down) 10%, transparent);
 --mp2-gold: #f5b400;
 --mp2-gold-soft: color-mix(in srgb, var(--mp2-gold) 22%, transparent);

 /* Whole article spacing on mobile */
 padding: var(--mp2-pad);
 padding-bottom: 96px; /* room for sticky dock */
 display: flex;
 flex-direction: column;
 gap: var(--mp2-gap);
}

/* ── MP2 keyframes — the heartbeat ───────────────────────────── */
@keyframes mp2-pulse-dot {
 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp2-up) 55%, transparent); }
 70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mp2-up) 0%, transparent); }
 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp2-up) 0%, transparent); }
}
@keyframes mp2-pulse-ring {
 0%, 100% { transform: scale(1); opacity: 0.55; }
 50% { transform: scale(1.08); opacity: 0.9; }
}
@keyframes mp2-pulse-star {
 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
 50% { transform: scale(1.18); filter: drop-shadow(0 0 6px var(--mp2-gold-soft)); }
}
@keyframes mp2-pulse-cta {
 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp2-cta) 40%, transparent); }
 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--mp2-cta) 0%, transparent); }
 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp2-cta) 0%, transparent); }
}
@keyframes mp2-shimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}
@keyframes mp2-draw {
 to { stroke-dashoffset: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
 .mp2 .mp2-live-dot,
 .mp2 .mp2-fav-ring,
 .mp2 .mp2-fav-star,
 .mp2 .mp2-verdict__cta,
 .mp2 .mp2-spk__pulse,
 .mp2 .mp2-dock__cta {
 animation: none !important;
 }
}

/* ── Hide the SSR mp-nav inside mp2 (we've redesigned navigation) ──
 The old sticky pills nav added clutter at the top. */
.mp2 .mp-nav { display: none; }

/* ============================================================
 SECTION 1 — HERO (poster)
 ============================================================ */
.mp2-hero {
 display: flex;
 flex-direction: column;
 gap: 14px;
 padding: 16px;
 background: linear-gradient(180deg,
 color-mix(in srgb, var(--mp2-accent) 4%, var(--mp2-bg)) 0%,
 var(--mp2-bg) 70%);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 position: relative;
 overflow: hidden;
}
.mp2-hero__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}

/* League pill with heartbeat dot */
.mp2-league-pill {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 10px 6px 8px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--mp2-ink-1);
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: 999px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 70%;
}
.mp2-live-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--mp2-up);
 animation: mp2-pulse-dot 2s ease-out infinite;
 flex-shrink: 0;
}

/* Action chips (watch / share) */
.mp2-chips {
 display: flex;
 gap: 6px;
 flex-shrink: 0;
}
.mp2-chip {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 padding: 0;
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: 50%;
 color: var(--mp2-ink-1);
 cursor: pointer;
 transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mp2-chip:hover { background: var(--mp2-bg-soft); color: var(--mp2-ink-0); }
.mp2-chip:active { transform: scale(0.94); }
.mp2-chip .mp-action-label { display: none; }
.mp2-chip.is-watched,
.mp2-chip[aria-pressed="true"] {
 background: var(--mp2-gold-soft);
 color: var(--mp2-gold);
 border-color: var(--mp2-gold);
}
.mp2-chip.is-flash {
 background: var(--mp2-up-soft);
 color: var(--mp2-up);
 border-color: var(--mp2-up);
}

/* Poster: three columns home / vs / away */
.mp2-poster {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 10px;
 align-items: start;
 padding: 6px 0 2px;
}
.mp2-team {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 min-width: 0;
 text-align: center;
}
.mp2-team__crest-wrap {
 position: relative;
 width: 64px;
 height: 64px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.mp2-team__crest-wrap .mp-crest {
 width: 64px;
 height: 64px;
 border-radius: 12px;
 object-fit: contain;
 background: var(--mp2-bg);
}
.mp2-team__crest-wrap .mp-crest--mono {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 font-weight: 800;
 color: #fff;
 background: hsl(var(--mono-hue, 250deg) 60% 50%);
}
.mp2-fav-ring {
 position: absolute;
 inset: -6px;
 border: 2px solid var(--mp2-gold);
 border-radius: 16px;
 pointer-events: none;
 animation: mp2-pulse-ring 2.6s ease-in-out infinite;
}
.mp2-team__name {
 font-size: 16px;
 font-weight: 800;
 line-height: 1.2;
 color: var(--mp2-ink-0);
 letter-spacing: -0.015em;
 word-break: break-word;
 hyphens: auto;
}
.mp2-team--away .mp2-team__name { /* visually symmetric */ }
.mp2-team__fav {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 8px;
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--mp2-gold) 80%, var(--mp2-ink-0));
 background: var(--mp2-gold-soft);
 border-radius: 999px;
}
.mp2-fav-star {
 display: inline-block;
 color: var(--mp2-gold);
 font-size: 12px;
 animation: mp2-pulse-star 2.4s ease-in-out infinite;
}

/* VS column */
.mp2-vs {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 padding-top: 22px;
 min-width: 28px;
}
.mp2-vs__word {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--mp2-ink-3);
}
.mp2-live {
 margin-top: 6px;
 font-size: 10px;
 font-weight: 700;
}

/* Kick-off row */
.mp2-kick {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 6px;
 padding-top: 10px;
 border-top: 1px dashed var(--mp2-line-soft);
 font-size: 12px;
 color: var(--mp2-ink-2);
}
.mp2-kick__when { font-weight: 600; color: var(--mp2-ink-1); }
.mp2-kick__countdown {
 font-weight: 700;
 color: var(--mp2-accent);
}
.mp2-kick__sep { color: var(--mp2-ink-3); }

/* ============================================================
 SECTION 2 — VERDICT
 ============================================================ */
.mp2-verdict {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 16px;
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 position: relative;
}
.mp2-verdict--high {
 background: linear-gradient(180deg, color-mix(in srgb, var(--mp2-up) 6%, var(--mp2-bg)) 0%, var(--mp2-bg) 100%);
 border-color: color-mix(in srgb, var(--mp2-up) 25%, var(--mp2-line));
}
.mp2-verdict--medium,
.mp2-verdict--pivot {
 background: linear-gradient(180deg, color-mix(in srgb, var(--mp2-accent) 6%, var(--mp2-bg)) 0%, var(--mp2-bg) 100%);
 border-color: color-mix(in srgb, var(--mp2-accent) 22%, var(--mp2-line));
}
.mp2-verdict--neutral {
 background: var(--mp2-bg-soft);
}

.mp2-verdict__row {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}
.mp2-verdict__tag {
 font-size: 10.5px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--mp2-up);
}
.mp2-verdict--medium .mp2-verdict__tag,
.mp2-verdict--pivot .mp2-verdict__tag { color: var(--mp2-accent); }
.mp2-verdict--neutral .mp2-verdict__tag { color: var(--mp2-ink-2); }

.mp2-verdict__edge {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 font-size: 10.5px;
 font-weight: 700;
 color: var(--mp2-up);
 background: var(--mp2-up-soft);
 border-radius: 999px;
}
.mp2-verdict__conf {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 font-size: 10.5px;
 font-weight: 700;
 color: var(--mp2-accent);
 background: var(--mp2-accent-soft);
 border-radius: 999px;
}

.mp2-verdict__headline {
 font-size: 20px;
 font-weight: 800;
 line-height: 1.25;
 letter-spacing: -0.015em;
 color: var(--mp2-ink-0);
 margin: 0;
}
.mp2-verdict__pass {
 font-size: 13px;
 line-height: 1.5;
 color: var(--mp2-ink-2);
 margin: 0;
}

.mp2-verdict__cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 13px 16px;
 background: var(--mp2-cta);
 color: var(--mp2-cta-ink);
 font-weight: 700;
 font-size: 14.5px;
 border-radius: var(--mp2-radius-md);
 text-decoration: none;
 position: relative;
 isolation: isolate;
 animation: mp2-pulse-cta 2.4s ease-out infinite;
 transition: transform .1s ease, background .15s ease;
}
.mp2-verdict__cta::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(120deg,
 transparent 30%,
 color-mix(in srgb, #fff 22%, transparent) 50%,
 transparent 70%);
 background-size: 200% 100%;
 background-position: -200% 0;
 animation: mp2-shimmer 3.6s linear infinite;
 pointer-events: none;
 z-index: -1;
}
.mp2-verdict__cta:hover { background: color-mix(in srgb, var(--mp2-cta) 92%, black); color: #fff; }
.mp2-verdict__cta:active { transform: scale(0.985); }
.mp2-verdict__cta-arrow { font-size: 16px; transition: transform .15s ease; }
.mp2-verdict__cta:hover .mp2-verdict__cta-arrow { transform: translateX(2px); }

/* ============================================================
 SECTION 3 — PRICE STORY (sparkline)
 ============================================================ */
.mp2-pricestory {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
}
.mp2 .mp-spk-mount { margin: 0; }
.mp2 .mp-spk { display: flex; flex-direction: column; gap: 10px; }
.mp2 .mp-spk__bar {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 8px;
 flex-wrap: wrap;
}
.mp2 .mp-spk__title { font-size: 14.5px; font-weight: 700; color: var(--mp2-ink-0); }
.mp2 .mp-spk__meta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 11.5px;
 color: var(--mp2-ink-2);
}
.mp2 .mp-spk__pulse {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--mp2-up);
 display: inline-block;
 animation: mp2-pulse-dot 2s ease-out infinite;
 margin-right: 2px;
}

/* WRITTEN HEADLINE — the price story */
.mp2 .mp-spk__story {
 font-size: 14.5px;
 font-weight: 700;
 line-height: 1.35;
 color: var(--mp2-ink-0);
 margin: 0;
 padding: 8px 10px;
 border-radius: var(--mp2-radius-sm);
 background: var(--mp2-bg-soft);
 border-left: 3px solid var(--mp2-ink-3);
}
.mp2 .mp-spk__story--short {
 background: var(--mp2-down-soft);
 border-left-color: var(--mp2-down);
 color: color-mix(in srgb, var(--mp2-down) 30%, var(--mp2-ink-0));
}
.mp2 .mp-spk__story--drift {
 background: var(--mp2-up-soft);
 border-left-color: var(--mp2-up);
 color: color-mix(in srgb, var(--mp2-up) 30%, var(--mp2-ink-0));
}
.mp2 .mp-spk__story--flat {
 background: var(--mp2-bg-soft);
 border-left-color: var(--mp2-ink-3);
 color: var(--mp2-ink-1);
}

/* Caption stays small */
.mp2 .mp-spk__caption {
 font-size: 11.5px;
 line-height: 1.45;
 color: var(--mp2-ink-2);
 margin: 0;
}
.mp2 .mp-spk__legend { font-weight: 700; }
.mp2 .mp-spk__legend--short { color: var(--mp2-down); }
.mp2 .mp-spk__legend--drift { color: var(--mp2-up); }

/* The three leg charts */
.mp2 .mp-spk__legs {
 display: grid;
 grid-template-columns: 1fr;
 gap: 12px;
}
.mp2 .mp-spk__leg {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 10px;
 background: var(--mp2-bg-soft);
 border-radius: var(--mp2-radius-sm);
}
.mp2 .mp-spk__head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 12px;
}
.mp2 .mp-spk__label { font-weight: 700; color: var(--mp2-ink-0); }
.mp2 .mp-spk__delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.mp2 .mp-spk__delta--short { color: var(--mp2-down); }
.mp2 .mp-spk__delta--drift { color: var(--mp2-up); }
.mp2 .mp-spk__delta--flat { color: var(--mp2-ink-3); }

.mp2 .mp-spk__endpoints {
 display: flex;
 justify-content: space-between;
 font-size: 11px;
 color: var(--mp2-ink-2);
}
.mp2 .mp-spk__endpoint-lbl { color: var(--mp2-ink-3); margin-right: 2px; }
.mp2 .mp-spk__endpoint-val { font-weight: 700; color: var(--mp2-ink-1); }
.mp2 .mp-spk__endpoint-val--now { color: var(--mp2-ink-0); }

.mp2 .mp-spk__plot { position: relative; width: 100%; height: 56px; }
.mp2 .mp-spk__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mp2 .mp-spk__area { fill: color-mix(in srgb, var(--mp2-ink-3) 8%, transparent); }
.mp2 .mp-spk__line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp2 .mp-spk__svg--short .mp-spk__line { stroke: var(--mp2-down); }
.mp2 .mp-spk__svg--short .mp-spk__area { fill: color-mix(in srgb, var(--mp2-down) 10%, transparent); }
.mp2 .mp-spk__svg--drift .mp-spk__line { stroke: var(--mp2-up); }
.mp2 .mp-spk__svg--drift .mp-spk__area { fill: color-mix(in srgb, var(--mp2-up) 10%, transparent); }
.mp2 .mp-spk__svg--flat .mp-spk__line { stroke: var(--mp2-ink-3); }

/* Animated trace draw — the line "draws in" on mount, gives a heartbeat feel */
.mp2 .mp-spk__line {
 stroke-dasharray: 600;
 stroke-dashoffset: 600;
 animation: mp2-draw 1.2s ease-out forwards;
}
.mp2 .mp-spk__line--sharp {
 stroke: var(--mp2-accent);
 stroke-dasharray: 3 3;
 stroke-width: 1.4;
 animation: none;
}
.mp2 .mp-spk__sharp { fill: var(--mp2-accent); }
.mp2 .mp-spk__hit { fill: transparent; cursor: pointer; }
.mp2 .mp-spk__hit:hover { fill: color-mix(in srgb, var(--mp2-ink-0) 18%, transparent); }

.mp2 .mp-spk__axis {
 display: flex;
 justify-content: space-between;
 font-size: 10px;
 color: var(--mp2-ink-3);
 font-variant-numeric: tabular-nums;
}
.mp2 .mp-spk__axis-span { font-weight: 700; color: var(--mp2-ink-2); }

.mp2 .mp-spk__pill {
 position: absolute;
 top: 2px;
 right: 2px;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 7px;
 background: var(--mp2-ink-0);
 color: #fff;
 font-size: 11px;
 border-radius: 999px;
 text-decoration: none;
}
.mp2 .mp-spk__pill-book { font-weight: 700; }
.mp2 .mp-spk__pill-price { font-weight: 600; }

.mp2 .mp-spk--empty {
 padding: 20px 12px;
 text-align: center;
}
.mp2 .mp-spk__empty {
 font-size: 12px;
 color: var(--mp2-ink-2);
}

/* ============================================================
 SECTION 4 — ODDS ACTION (single table)
 ============================================================ */
.mp2-odds-section {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.mp2-odds-head {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.mp2-odds-title {
 font-size: 16px;
 font-weight: 800;
 letter-spacing: -0.01em;
 margin: 0;
 color: var(--mp2-ink-0);
}
.mp2-odds-sub {
 font-size: 11.5px;
 color: var(--mp2-ink-2);
}
/* In pro mode the simple hint is replaced by the pro one. */
html[data-mode="pro"] .mp2-odds-sub--simple { display: none; }

/* Market pills (inherits old .mp-market-pills) */
.mp2 .mp-market-pills {
 display: flex;
 gap: 6px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 margin: 0;
 padding: 2px 0;
}
.mp2 .mp-market-pills::-webkit-scrollbar { display: none; }
.mp2 .mp-market-pills button {
 flex: 0 0 auto;
 padding: 6px 12px;
 font-size: 12px;
 font-weight: 700;
 border-radius: 999px;
 background: var(--mp2-bg-soft);
 color: var(--mp2-ink-1);
 border: 1px solid transparent;
 cursor: pointer;
 white-space: nowrap;
 transition: background .15s ease, color .15s ease;
}
.mp2 .mp-market-pills button:hover { background: color-mix(in srgb, var(--mp2-accent) 8%, var(--mp2-bg-soft)); color: var(--mp2-ink-0); }
.mp2 .mp-market-pills button.active {
 background: var(--mp2-ink-0);
 color: #fff;
}

/* Where-to-bet strip (legacy) — keep compact inside mp2 */
.mp2 .mp-where {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 10px;
 background: var(--mp2-bg-soft);
 border-radius: var(--mp2-radius-sm);
}
.mp2 .mp-where-text {
 display: flex;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 6px;
 font-size: 12px;
}
.mp2 .mp-where-label { color: var(--mp2-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 10.5px; }
.mp2 .mp-where-side { font-weight: 700; color: var(--mp2-ink-0); }
.mp2 .mp-where-price { font-weight: 700; color: var(--mp2-up); font-variant-numeric: tabular-nums; font-size: 14px; }
.mp2 .mp-where-book { color: var(--mp2-ink-2); }
.mp2 .mp-where-cta {
 align-self: flex-start;
 display: inline-flex;
 padding: 7px 12px;
 background: var(--mp2-ink-0);
 color: #fff;
 border-radius: 8px;
 font-size: 12.5px;
 font-weight: 700;
 text-decoration: none;
}

/* The MP2 odds table */
.mp2-odds-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 13px;
}
.mp2-odds-table thead th {
 text-align: right;
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: var(--mp2-ink-3);
 padding: 8px 6px;
 border-bottom: 1px solid var(--mp2-line);
}
.mp2-odds-table thead .mp2-th-book {
 text-align: left;
}
.mp2-odds-table tbody tr {
 border-bottom: 1px solid var(--mp2-line-soft);
}
.mp2-odds-table tbody tr:last-child { border-bottom: none; }

.mp2-book-cell {
 padding: 10px 6px;
 text-align: left;
 font-weight: 600;
}
.mp2-book-link {
 color: var(--mp2-ink-0);
 text-decoration: none;
 font-weight: 700;
 font-size: 13px;
}
.mp2-book-link:hover { color: var(--mp2-accent); }

.mp2-row--poly {
 background: var(--mp2-accent-soft);
}
.mp2-row--poly .mp2-book-name {
 display: block;
 font-weight: 800;
 color: var(--mp2-accent);
 font-size: 13px;
}
.mp2-row--poly .mp2-book-tag {
 display: block;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: color-mix(in srgb, var(--mp2-accent) 70%, var(--mp2-ink-2));
}

.mp2-cell {
 padding: 10px 6px;
 text-align: right;
 font-variant-numeric: tabular-nums;
 position: relative;
}
.mp2-price {
 display: inline-block;
 font-size: 14px;
 font-weight: 700;
 color: var(--mp2-ink-0);
}
.mp2-row--poly .mp2-price { color: var(--mp2-accent); }
.mp2-cell--empty { color: var(--mp2-ink-3); font-weight: 500; }

.mp2-cell.is-best {
 background: var(--mp2-up-soft);
}
.mp2-cell.is-best .mp2-price { color: var(--mp2-up); }
.mp2-best-flag {
 display: inline-block;
 margin-left: 4px;
 padding: 1px 5px;
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: #fff;
 background: var(--mp2-up);
 border-radius: 3px;
 vertical-align: middle;
}

.mp2-odds-note {
 font-size: 11px;
 color: var(--mp2-ink-3);
 margin: 0;
 line-height: 1.5;
}
.mp2-odds-note a { color: var(--mp2-accent); }
.mp2-empty {
 padding: 14px;
 text-align: center;
 color: var(--mp2-ink-2);
 font-size: 13px;
}

/* ============================================================
 SECTION 5 — COLLAPSIBLES / CONTEXT (keep mp- styles, tighten margins inside mp2)
 ============================================================ */
.mp2 .mp-mkt {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 margin: 0;
 padding: 0;
}
.mp2 .mp-mkt__summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 14px;
 cursor: pointer;
 list-style: none;
}
.mp2 .mp-mkt__summary::-webkit-details-marker { display: none; }
.mp2 .mp-mkt__title { font-size: 15px; font-weight: 700; margin: 0; color: var(--mp2-ink-0); }
.mp2 .mp-mkt__chev { color: var(--mp2-ink-3); font-size: 18px; transition: transform .15s ease; }
.mp2 .mp-mkt[open] .mp-mkt__chev { transform: rotate(90deg); }
.mp2 .mp-mkt__summary-best {
 display: inline-flex;
 gap: 8px;
 flex-wrap: wrap;
 font-size: 11.5px;
 color: var(--mp2-ink-2);
}
.mp2 .mp-mkt__best-label { font-weight: 600; }
.mp2 .mp-mkt__best-price { font-weight: 700; color: var(--mp2-ink-0); }
.mp2 .mp-mkt__best-book { color: var(--mp2-ink-3); }
.mp2 .mp-mkt__table-wrap {
 padding: 0 12px 12px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}
.mp2 .mp-mkt__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mp2 .mp-mkt__table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mp2-ink-3); padding: 6px; text-align: right; }
.mp2 .mp-mkt__table th.mp-mkt__th-book { text-align: left; }
.mp2 .mp-mkt__table td { padding: 8px 6px; border-top: 1px solid var(--mp2-line-soft); text-align: right; font-variant-numeric: tabular-nums; }
.mp2 .mp-mkt__cell.is-best {
 background: transparent;
 position: relative;
}
.mp2 .mp-mkt__cell.is-best a,
.mp2 .mp-mkt__cell.is-best .num {
 display: inline-block;
 box-shadow: inset 0 0 0 1.5px var(--accent-cta, #1B5BFF);
 border-radius: 999px;
 padding: 3px 10px;
 color: var(--accent-cta, #1B5BFF);
 font-weight: 700;
}
.mp2 .mp-mkt__book-cell { text-align: left; }
.mp2 .mp-mkt__sub { font-size: 12px; color: var(--mp2-ink-2); margin: 0 14px 12px; }

/* Form / context cards */
.mp2 .mp-context {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
}
.mp2 .mp-context-head { margin-bottom: 10px; }
.mp2 .mp-context-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--mp2-ink-0); }
.mp2 .mp-context-sub { font-size: 11.5px; color: var(--mp2-ink-2); }
.mp2 .mp-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp2 .mp-team-card {
 background: var(--mp2-bg-soft);
 border-radius: var(--mp2-radius-sm);
 padding: 10px;
}
.mp2 .mp-team-card-head { font-weight: 700; font-size: 13px; color: var(--mp2-ink-0); margin-bottom: 6px; }
.mp2 .mp-team-card-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 3px 0; color: var(--mp2-ink-2); }
.mp2 .mp-form { display: inline-flex; gap: 3px; }
.mp2 .mp-form-pill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 9.5px; font-weight: 800; color: #fff; }
.mp2 .mp-form-W { background: var(--mp2-up); }
.mp2 .mp-form-D { background: var(--mp2-ink-3); }
.mp2 .mp-form-L { background: var(--mp2-down); }

/* FAQ */
.mp2 .mp-faq {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
}
.mp2 .mp-faq h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--mp2-ink-0); }
.mp2 .mp-faq-item { border-top: 1px solid var(--mp2-line-soft); padding: 10px 0; }
.mp2 .mp-faq-item:first-of-type { border-top: none; }
.mp2 .mp-faq-item summary { font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--mp2-ink-0); list-style: none; display: flex; justify-content: space-between; }
.mp2 .mp-faq-item summary::after { content: '+'; color: var(--mp2-ink-3); font-weight: 400; font-size: 18px; line-height: 1; }
.mp2 .mp-faq-item[open] summary::after { content: '−'; color: var(--mp2-accent); }
.mp2 .mp-faq-item p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--mp2-ink-1); }

/* Why / related / summary */
.mp2 .mp-why,
.mp2 .mp-related {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
}
.mp2 .mp-why h2,
.mp2 .mp-related h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--mp2-ink-0); }
.mp2 .mp-why ul,
.mp2 .mp-related ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--mp2-ink-1); }
.mp2 .mp-related a { color: var(--mp2-accent); text-decoration: none; }
.mp2 .mp2-summary {
 background: var(--mp2-bg);
 border: 1px solid var(--mp2-line);
 border-radius: var(--mp2-radius-lg);
 padding: 14px;
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--mp2-ink-1);
 margin: 0;
}

/* ============================================================
 STICKY BET DOCK (mp2 version)
 ============================================================ */
.mp2-dock {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 60;
 padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
 background: color-mix(in srgb, var(--mp2-bg) 92%, transparent);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-top: 1px solid var(--mp2-line);
}
.mp2-dock__inner {
 display: flex;
 align-items: center;
 gap: 10px;
 max-width: 760px;
 margin: 0 auto;
}
.mp2-dock__copy {
 display: flex;
 align-items: baseline;
 gap: 6px;
 flex: 1 1 auto;
 min-width: 0;
 flex-wrap: wrap;
}
.mp2-dock__label {
 font-size: 9.5px;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--mp2-ink-3);
}
.mp2-dock__pick {
 font-weight: 800;
 color: var(--mp2-ink-0);
 font-size: 13.5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 50%;
}
.mp2-dock__price {
 font-weight: 800;
 color: var(--mp2-up);
 font-size: 15px;
 font-variant-numeric: tabular-nums;
}
.mp2-dock__at {
 font-size: 11.5px;
 color: var(--mp2-ink-2);
 white-space: nowrap;
}
.mp2-dock__cta {
 flex-shrink: 0;
 padding: 11px 16px;
 background: var(--mp2-cta);
 color: #fff;
 font-weight: 700;
 font-size: 13.5px;
 border-radius: 10px;
 text-decoration: none;
 animation: mp2-pulse-cta 2.4s ease-out infinite;
}

/* Hide ssrPhase1 collapsibles' SUMMARY BEST PRICE when nothing to show */
.mp2 .mp-mkt__summary-best:empty { display: none; }

/* Hide the legacy mp-verdict, mp-poly, mp-odds inside mp2 page when they appear
 from any SSR snippet that wasn't replaced. Keeps stale styles dormant. */
.mp2 > .mp-verdict,
.mp2 > .mp-poly,
.mp2 > .mp-odds { display: none; }

/* ============================================================
 DESKTOP — relax to a clean two-column layout
 ============================================================ */
@media (min-width: 760px) {
 .mp2 {
 padding: 24px;
 --mp2-gap: 20px;
 max-width: 920px;
 margin: 0 auto;
 }
 .mp2-poster { gap: 20px; }
 .mp2-team__crest-wrap, .mp2-team__crest-wrap .mp-crest { width: 80px; height: 80px; }
 .mp2-team__name { font-size: 20px; }
 .mp2-verdict__headline { font-size: 24px; }
 .mp2 .mp-spk__legs { grid-template-columns: 1fr 1fr 1fr; }
 .mp2 .mp-context-grid { gap: 14px; }
}

/* Dark mode tweaks (page already has --bg-1/--ink-0 swapped) */
[data-theme="dark"] .mp2 {
 --mp2-bg: var(--bg-1, #0f0f12);
 --mp2-bg-soft: var(--bg-2, #1a1a20);
 --mp2-line: var(--line, #2a2a32);
}
[data-theme="dark"] .mp2-verdict__cta::before {
 background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, #fff 14%, transparent) 50%, transparent 70%);
}
[data-theme="dark"] .mp2-dock {
 background: color-mix(in srgb, var(--mp2-bg) 90%, transparent);
}

/* End MP2 */

/* ==============================================================================
 MATCH PAGE — MP2 NAMESPACE (full rebuild, mobile-first, with heartbeat)
 No !important. No fighting v2/styles.css. Fresh selectors only.
 Tokens come from :root above (--ink-*, --accent, --bg, etc.).
 ============================================================================== */

/* ---- Local tokens for the match page ---- */
.mp-page.mp2 {
 --mp2-card-bg: var(--bg, #ffffff);
 --mp2-card-border: var(--line, #e5e7eb);
 --mp2-card-shadow: 0 1px 0 rgba(0,0,0,.02), 0 4px 16px rgba(15,15,30,.04);
 --mp2-r-sm: 8px;
 --mp2-r-md: 12px;
 --mp2-r-lg: 16px;
 --mp2-fav: #f5b400;
 --mp2-fav-soft: rgba(245,180,0,.12);
 --mp2-up: #16a34a;
 --mp2-up-soft: rgba(22,163,74,.10);
 --mp2-down: #dc2626;
 --mp2-down-soft: rgba(220,38,38,.10);
 --mp2-live: #16a34a;
 --mp2-poster-bg: linear-gradient(180deg, #fbfaff 0%, #ffffff 70%);
 padding: 16px 14px 96px;
 max-width: 980px;
 margin: 0 auto;
}
[data-theme="dark"] .mp-page.mp2 {
 --mp2-card-bg: var(--bg-2, #16161b);
 --mp2-card-border: rgba(255,255,255,.08);
 --mp2-card-shadow: 0 1px 0 rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.35);
 --mp2-poster-bg: linear-gradient(180deg, rgba(124,58,237,.06) 0%, var(--bg, #0e0e12) 70%);
}

/* ---- Heartbeat / pulse keyframes (the global "pulse") ---- */
@keyframes mp2-pulse-ring {
 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@keyframes mp2-fav-breathe {
 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,180,0,0)); }
 50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(245,180,0,.55)); }
}
@keyframes mp2-cta-pulse {
 0%, 100% { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(28,91,255,.22); }
 50% { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 22px rgba(28,91,255,.42); }
}
@keyframes mp2-ring-breathe {
 0%, 100% { box-shadow: 0 0 0 0 var(--mp2-fav-soft), 0 0 0 2px var(--mp2-fav); }
 50% { box-shadow: 0 0 0 8px transparent, 0 0 0 2px var(--mp2-fav); }
}
@keyframes mp2-spk-draw {
 from { stroke-dashoffset: 320; }
 to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .mp2-live__dot, .mp2-fav-ring, .mp2-fav-star, .mp2-pulse, .mp-spk__pulse,
 .mp-spk__line { animation: none !important; }
}

/* ============================== HERO ============================== */
.mp2-hero {
 background: var(--mp2-poster-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: var(--mp2-r-lg);
 padding: 14px 14px 16px;
 margin: 0 0 14px;
}

/* TOP ROW — league pill + chips */
.mp2-hero__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 14px;
}

.mp2-league-pill {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--ink-1, #2a2a2e);
 background: var(--bg-2, #f5f5f7);
 border: 1px solid var(--mp2-card-border);
 border-radius: 999px;
 padding: 5px 10px 5px 9px;
 white-space: nowrap;
 max-width: 70%;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mp2-league-pill__text {
 overflow: hidden;
 text-overflow: ellipsis;
}
.mp2-live-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--mp2-live);
 flex-shrink: 0;
 animation: mp2-pulse-ring 2s ease-out infinite;
}

.mp2-chips {
 display: flex;
 gap: 6px;
 flex-shrink: 0;
}
.mp2-chip {
 width: 34px;
 height: 34px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--mp2-card-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: 50%;
 color: var(--ink-1, #2a2a2e);
 cursor: pointer;
 transition: background .15s, color .15s, transform .15s;
 padding: 0;
}
.mp2-chip:hover {
 background: var(--bg-2, #f5f5f7);
 color: var(--ink-0, #0a0a0b);
}
.mp2-chip:active { transform: scale(.94); }
.mp2-chip.is-watched,
.mp2-chip[aria-pressed="true"] {
 background: var(--mp2-fav-soft);
 border-color: var(--mp2-fav);
 color: var(--mp2-fav);
}
.mp2-chip.is-flash {
 background: var(--mp2-up-soft);
 border-color: var(--mp2-up);
 color: var(--mp2-up);
}
.mp2-chip .mp-action-label {
 /* Icon-only chips on every viewport */
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
}

/* POSTER — big crests, names, vs */
.mp2-poster {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 10px;
 align-items: center;
 text-align: center;
 margin-bottom: 12px;
}
.mp2-team {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.mp2-team__crest-wrap {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 72px;
 height: 72px;
}
.mp2-team .mp-crest {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 object-fit: contain;
 background: var(--mp2-card-bg);
 padding: 4px;
 border: 1px solid var(--mp2-card-border);
}
.mp2-team .mp-crest.mp-crest--mono {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 color: #fff;
 background: hsl(var(--mono-hue, 220deg), 55%, 48%);
 font-size: 22px;
 letter-spacing: .02em;
}
.mp2-fav-ring {
 position: absolute;
 inset: -2px;
 border-radius: 50%;
 pointer-events: none;
 animation: mp2-ring-breathe 2.6s ease-in-out infinite;
}
.mp2-team__name {
 font-size: 16px;
 font-weight: 800;
 letter-spacing: -.01em;
 color: var(--ink-0, #0a0a0b);
 line-height: 1.2;
 word-break: break-word;
 hyphens: auto;
 max-width: 100%;
}
.mp2-team__fav {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--mp2-fav);
}
.mp2-fav-star {
 display: inline-block;
 color: var(--mp2-fav);
 font-size: 12px;
 line-height: 1;
 animation: mp2-fav-breathe 2.6s ease-in-out infinite;
}

.mp2-vs {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 padding: 0 4px;
 min-width: 44px;
}
.mp2-vs__word {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ink-3, #8a8a93);
}

/* KICKOFF strip under poster */
.mp2-kick {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 4px 8px;
 font-size: 13px;
 color: var(--ink-2, #5b5b63);
 padding-top: 10px;
 border-top: 1px dashed var(--mp2-card-border);
}
.mp2-kick__when {
 font-weight: 700;
 color: var(--ink-0, #0a0a0b);
}
.mp2-kick__countdown {
 font-weight: 600;
 color: var(--accent, #7C3AED);
 background: var(--accent-soft, #f3eafe);
 padding: 2px 8px;
 border-radius: 999px;
 font-size: 12px;
 letter-spacing: .01em;
}
.mp2-kick__sep { color: var(--ink-3, #8a8a93); }
.mp2-kick .mp-venue {
 font-size: 12.5px;
 color: var(--ink-2, #5b5b63);
}

/* ============================== VERDICT ============================== */
.mp2-verdict {
 background: var(--mp2-card-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: var(--mp2-r-md);
 padding: 14px 14px 12px;
 margin: 0 0 14px;
 box-shadow: var(--mp2-card-shadow);
 position: relative;
 overflow: hidden;
}
.mp2-verdict::before {
 /* Left accent bar — colour-coded by confidence */
 content: "";
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 4px;
 background: var(--accent, #7C3AED);
}
.mp2-verdict--high::before { background: var(--mp2-up, #16a34a); }
.mp2-verdict--medium::before { background: var(--mp2-fav, #f5b400); }
.mp2-verdict--speculative::before,
.mp2-verdict--pivot::before { background: var(--accent, #7C3AED); }
.mp2-verdict--neutral::before { background: var(--ink-3, #8a8a93); }
.mp2-verdict--marginal::before { background: var(--ink-3, #8a8a93); }

.mp2-verdict__row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px 8px;
 margin-bottom: 6px;
}
.mp2-verdict__tag {
 font-size: 10.5px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ink-1, #2a2a2e);
}
.mp2-verdict--high .mp2-verdict__tag { color: var(--mp2-up); }
.mp2-verdict--medium .mp2-verdict__tag { color: #b58600; }
.mp2-verdict--pivot .mp2-verdict__tag,
.mp2-verdict--speculative .mp2-verdict__tag { color: var(--accent, #7C3AED); }
.mp2-verdict--neutral .mp2-verdict__tag { color: var(--ink-2, #5b5b63); }

.mp2-verdict__edge {
 font-size: 11px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 999px;
 background: var(--mp2-up-soft);
 color: var(--mp2-up);
 letter-spacing: .01em;
}
.mp2-verdict__conf {
 font-size: 11px;
 font-weight: 600;
 padding: 2px 8px;
 border-radius: 999px;
 background: var(--bg-2, #f5f5f7);
 color: var(--ink-2, #5b5b63);
 letter-spacing: .01em;
}

.mp2-verdict__headline {
 font-size: 18px;
 font-weight: 800;
 line-height: 1.3;
 letter-spacing: -.01em;
 margin: 0 0 10px;
 color: var(--ink-0, #0a0a0b);
}

.mp2-verdict__cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 padding: 12px 16px;
 background: #1B5BFF;
 color: #ffffff;
 font-weight: 700;
 font-size: 14.5px;
 letter-spacing: .01em;
 border-radius: 10px;
 text-decoration: none;
 box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(28,91,255,.22);
 animation: mp2-cta-pulse 2.4s ease-in-out infinite;
 transition: transform .12s, box-shadow .12s, background .15s;
}
.mp2-verdict__cta:hover {
 background: #134AE0;
 transform: translateY(-1px);
}
.mp2-verdict__cta:active { transform: translateY(0); }
.mp2-verdict__cta-arrow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 line-height: 1;
 transition: transform .15s;
}
.mp2-verdict__cta:hover .mp2-verdict__cta-arrow { transform: translateX(3px); }

.mp2-verdict__pass {
 margin: 4px 0 0;
 padding: 10px 12px;
 background: var(--bg-2, #f5f5f7);
 border-radius: var(--mp2-r-sm);
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-2, #5b5b63);
}

/* "Why this call" details — keep the data accessible without bloating the card */
.mp2-verdict details,
.mp-page.mp2 .mp2-verdict__why {
 margin-top: 10px;
 border-top: 1px solid var(--mp2-card-border);
 padding-top: 8px;
}
.mp-page.mp2 .mp2-verdict__why summary {
 cursor: pointer;
 list-style: none;
 font-size: 12px;
 font-weight: 600;
 color: var(--ink-2, #5b5b63);
 display: inline-flex;
 align-items: center;
 gap: 4px;
}
.mp-page.mp2 .mp2-verdict__why summary::-webkit-details-marker { display: none; }
.mp-page.mp2 .mp2-verdict__why summary::after {
 content: "›";
 display: inline-block;
 font-size: 14px;
 transition: transform .15s;
}
.mp-page.mp2 .mp2-verdict__why[open] summary::after { transform: rotate(90deg); }
.mp-page.mp2 .mp2-verdict__why p {
 margin: 8px 0 0;
 font-size: 13px;
 line-height: 1.55;
 color: var(--ink-1, #2a2a2e);
}

/* ============================== PRICE STORY ============================== */
.mp2-pricestory {
 background: var(--mp2-card-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: var(--mp2-r-md);
 padding: 14px 12px 10px;
 margin: 0 0 14px;
 box-shadow: var(--mp2-card-shadow);
}
.mp2-pricestory .mp-spk-mount { margin: 0; }
.mp2-pricestory .mp-spk { padding: 0; background: transparent; border: none; }
.mp2-pricestory .mp-spk__bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 6px;
}
.mp2-pricestory .mp-spk__title {
 font-size: 11.5px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--ink-2, #5b5b63);
}
.mp2-pricestory .mp-spk__meta {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
 color: var(--ink-3, #8a8a93);
}
.mp-spk__pulse {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--mp2-live);
 display: inline-block;
 animation: mp2-pulse-ring 2s ease-out infinite;
 margin-right: 2px;
}
.mp2-pricestory .mp-spk__story {
 margin: 6px 0 10px;
 font-size: 14.5px;
 font-weight: 700;
 line-height: 1.35;
 color: var(--ink-0, #0a0a0b);
}
.mp2-pricestory .mp-spk__story--short { color: var(--mp2-down); }
.mp2-pricestory .mp-spk__story--drift { color: var(--mp2-up); }
.mp2-pricestory .mp-spk__story--flat { color: var(--ink-2, #5b5b63); font-weight: 600; }
.mp2-pricestory .mp-spk__caption {
 display: none; /* legacy verbose caption — story headline replaces it */
}
.mp2-pricestory .mp-spk__legs {
 display: grid;
 gap: 8px;
}
.mp2-pricestory .mp-spk__leg {
 background: var(--bg-2, #f5f5f7);
 border-radius: var(--mp2-r-sm);
 padding: 8px 10px;
}
.mp2-pricestory .mp-spk__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 2px;
}
.mp2-pricestory .mp-spk__label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--ink-2, #5b5b63);
}
.mp2-pricestory .mp-spk__delta {
 font-size: 11.5px;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
}
.mp2-pricestory .mp-spk__delta--short { color: var(--mp2-down); }
.mp2-pricestory .mp-spk__delta--drift { color: var(--mp2-up); }
.mp2-pricestory .mp-spk__delta--flat { color: var(--ink-3, #8a8a93); }
.mp2-pricestory .mp-spk__endpoints {
 display: flex;
 justify-content: space-between;
 font-size: 11px;
 color: var(--ink-2, #5b5b63);
 margin-bottom: 2px;
}
.mp2-pricestory .mp-spk__endpoint-lbl {
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: .06em;
 color: var(--ink-3, #8a8a93);
 margin-right: 3px;
}
.mp2-pricestory .mp-spk__endpoint-val { font-weight: 700; color: var(--ink-0, #0a0a0b); font-variant-numeric: tabular-nums; }
.mp2-pricestory .mp-spk__plot {
 position: relative;
 height: 44px;
}
.mp-spk__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mp-spk__line {
 fill: none;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-dasharray: 320;
 stroke-dashoffset: 320;
 animation: mp2-spk-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.mp-spk__svg--short .mp-spk__line { stroke: var(--mp2-down); }
.mp-spk__svg--drift .mp-spk__line { stroke: var(--mp2-up); }
.mp-spk__svg--flat .mp-spk__line { stroke: var(--ink-3, #8a8a93); }
.mp-spk__line--sharp {
 stroke: var(--accent, #7C3AED);
 stroke-dasharray: 3 3;
 animation: none;
 stroke-dashoffset: 0;
 opacity: .7;
}
.mp-spk__area { fill: currentColor; opacity: .08; }
.mp-spk__svg--short .mp-spk__area { color: var(--mp2-down); }
.mp-spk__svg--drift .mp-spk__area { color: var(--mp2-up); }
.mp-spk__svg--flat .mp-spk__area { color: var(--ink-3, #8a8a93); }
.mp-spk__sharp { fill: var(--accent, #7C3AED); }
.mp-spk__hit { fill: transparent; cursor: pointer; }
.mp-spk__hit:hover { fill: rgba(0,0,0,.12); }
.mp2-pricestory .mp-spk__axis {
 display: flex;
 justify-content: space-between;
 font-size: 10px;
 color: var(--ink-3, #8a8a93);
 margin-top: 2px;
}
.mp-spk__pill {
 position: absolute;
 right: 4px;
 top: -4px;
 background: var(--ink-0, #0a0a0b);
 color: #fff;
 font-size: 11px;
 padding: 4px 8px;
 border-radius: 6px;
 text-decoration: none;
}
.mp-spk--empty {
 padding: 14px 6px;
 text-align: center;
 color: var(--ink-2, #5b5b63);
 font-size: 13px;
}

/* ============================== ODDS SECTION ============================== */
.mp2-odds-section {
 background: var(--mp2-card-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: var(--mp2-r-md);
 padding: 14px;
 margin: 0 0 14px;
 box-shadow: var(--mp2-card-shadow);
}
.mp2-odds-head { margin-bottom: 10px; }
.mp2-odds-title {
 margin: 0;
 font-size: 15px;
 font-weight: 800;
 letter-spacing: -.01em;
 color: var(--ink-0, #0a0a0b);
}
.mp2-odds-sub {
 display: block;
 font-size: 12px;
 font-weight: 500;
 color: var(--ink-2, #5b5b63);
 margin-top: 2px;
}
.mp-page.mp2 .mp-market-pills {
 display: flex;
 gap: 4px;
 margin: 4px 0 10px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 2px;
}
.mp-page.mp2 .mp-market-pills::-webkit-scrollbar { display: none; }
.mp-page.mp2 .mp-market-pills button {
 flex-shrink: 0;
 background: var(--bg-2, #f5f5f7);
 border: 1px solid transparent;
 color: var(--ink-2, #5b5b63);
 font-size: 12.5px;
 font-weight: 600;
 padding: 6px 12px;
 border-radius: 999px;
 cursor: pointer;
 transition: background .15s, color .15s, border-color .15s;
}
.mp-page.mp2 .mp-market-pills button:hover { color: var(--ink-0, #0a0a0b); }
.mp-page.mp2 .mp-market-pills button.active {
 background: var(--accent-soft, #f3eafe);
 color: var(--accent, #7C3AED);
 border-color: var(--accent, #7C3AED);
}

/* "Longest price" strip above the table */
.mp-page.mp2 .mp-where {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 10px 12px;
 background: var(--accent-soft, #f3eafe);
 border-radius: var(--mp2-r-sm);
 margin-bottom: 10px;
 border: 1px solid color-mix(in srgb, var(--accent, #7C3AED) 20%, transparent);
}
.mp-page.mp2 .mp-where-text {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 4px 8px;
 font-size: 13px;
}
.mp-page.mp2 .mp-where-label {
 font-size: 10.5px;
 text-transform: uppercase;
 letter-spacing: .08em;
 font-weight: 700;
 color: var(--accent, #7C3AED);
}
.mp-page.mp2 .mp-where-side { font-weight: 700; color: var(--ink-0); }
.mp-page.mp2 .mp-where-price {
 font-weight: 800;
 color: var(--ink-0);
 font-variant-numeric: tabular-nums;
}
.mp-page.mp2 .mp-where-book { color: var(--ink-2); font-size: 12px; }
.mp-page.mp2 .mp-where-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--accent, #7C3AED);
 color: #fff;
 font-weight: 700;
 font-size: 13px;
 padding: 8px 12px;
 border-radius: 8px;
 text-decoration: none;
 white-space: nowrap;
}
.mp-page.mp2 .mp-where-cta:hover { background: color-mix(in srgb, var(--accent, #7C3AED) 85%, black); }

/* ODDS TABLE — mp2 namespace */
.mp2-odds-body { overflow: hidden; }
.mp2-odds-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 13px;
 table-layout: fixed;
}
.mp2-odds-table colgroup col.mp2-col-book { width: 38%; }
.mp2-odds-table colgroup col.mp2-col-odds { width: 20.66%; }
.mp2-odds-table thead th {
 text-align: right;
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: .03em;
 text-transform: uppercase;
 color: var(--ink-3, #8a8a93);
 padding: 6px 4px;
 border-bottom: 1px solid var(--mp2-card-border);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mp2-odds-table thead th.mp2-th-book {
 text-align: left;
 padding-left: 0;
}
/* Very narrow phones: swap team names for HOME/DRAW/AWAY to keep table inside viewport */
@media (max-width: 400px) {
 .mp2-odds-table thead th.mp2-th-odds { font-size: 0; }
 .mp2-odds-table thead th.mp2-th-odds::after {
 content: attr(data-short);
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: .03em;
 text-transform: uppercase;
 }
}
.mp2-odds-table tbody td {
 padding: 10px 4px;
 border-bottom: 1px solid var(--mp2-card-border);
 text-align: right;
 vertical-align: middle;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
/* On narrow viewports, hide the inline 'Best' wordmark in odds-comparison
 cells. The green background already signals 'best price', and the wordmark
 was getting truncated to an ellipsis (e.g. '1.86\2026') on iPhone-width
 screens. Keep the wordmark on tablets and up. */
@media (max-width: 480px) {
 .mp2-odds-table tbody td.mp2-cell.is-best .mp2-best-flag { display: none; }
 .mp2-odds-table tbody td.mp2-cell { padding: 10px 4px; }
}
.mp2-odds-table tbody td.mp2-book-cell {
 text-align: left;
 padding-left: 0;
}
.mp2-odds-table tbody tr:last-child td { border-bottom: none; }

.mp2-book-link {
 font-weight: 600;
 color: var(--ink-0, #0a0a0b);
 text-decoration: none;
 font-size: 13.5px;
}
.mp2-book-link:hover { color: var(--accent, #7C3AED); }
.mp2-row--poly { background: color-mix(in srgb, var(--accent, #7C3AED) 5%, transparent); }
.mp2-row--poly .mp2-book-name {
 font-weight: 800;
 color: var(--accent, #7C3AED);
 font-size: 13.5px;
}
.mp2-row--poly .mp2-book-tag {
 font-size: 10.5px;
 text-transform: uppercase;
 letter-spacing: .06em;
 color: var(--accent, #7C3AED);
 background: var(--accent-soft, #f3eafe);
 padding: 1px 6px;
 border-radius: 999px;
 margin-left: 6px;
 font-weight: 700;
}
.mp2-cell {
 font-variant-numeric: tabular-nums;
 font-weight: 600;
 color: var(--ink-1, #2a2a2e);
}
.mp2-cell.is-best {
 background: var(--mp2-up-soft);
 color: var(--mp2-up);
 font-weight: 800;
 position: relative;
}
.mp2-cell.is-best .mp2-price { color: var(--mp2-up); }
.mp2-best-flag {
 display: inline-block;
 margin-left: 4px;
 font-size: 9.5px;
 font-weight: 800;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: var(--mp2-up);
 vertical-align: middle;
}
.mp2-cell.is-poly { color: var(--accent, #7C3AED); font-weight: 700; }
.mp2-cell.mp2-cell--empty { color: var(--ink-4, #b8b8c0); }
.mp2-price { display: inline-block; }

.mp2-odds-note {
 margin: 10px 0 0;
 font-size: 11.5px;
 color: var(--ink-3, #8a8a93);
 line-height: 1.5;
}
.mp2-odds-note a { color: var(--accent, #7C3AED); }

.mp2-empty {
 padding: 24px 12px;
 text-align: center;
 font-size: 13px;
 color: var(--ink-2, #5b5b63);
}

/* ============================== STICKY DOCK ============================== */
.mp2-dock {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 50;
 background: var(--mp2-card-bg);
 border-top: 1px solid var(--mp2-card-border);
 box-shadow: 0 -4px 20px rgba(15,15,30,.08);
 padding: 8px max(env(safe-area-inset-left, 12px), 12px) calc(8px + env(safe-area-inset-bottom, 0px)) max(env(safe-area-inset-right, 12px), 12px);
}
.mp2-dock__inner {
 display: flex;
 align-items: center;
 gap: 10px;
 max-width: 980px;
 margin: 0 auto;
}
.mp2-dock__copy {
 display: flex;
 flex-direction: column;
 gap: 1px;
 min-width: 0;
 flex: 1 1 auto;
}
.mp2-dock__label {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--ink-3, #8a8a93);
}
.mp2-dock__pick {
 font-size: 14px;
 font-weight: 800;
 color: var(--ink-0, #0a0a0b);
 display: inline;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.mp2-dock__price {
 font-size: 14px;
 font-weight: 800;
 color: var(--ink-0, #0a0a0b);
 font-variant-numeric: tabular-nums;
 margin-left: 4px;
}
.mp2-dock__at {
 font-size: 12px;
 color: var(--ink-2, #5b5b63);
 margin-left: 4px;
}
.mp2-dock__cta {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: #1B5BFF;
 color: #fff;
 font-weight: 700;
 font-size: 13.5px;
 padding: 10px 14px;
 border-radius: 999px;
 text-decoration: none;
 box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(28,91,255,.32);
 animation: mp2-cta-pulse 2.4s ease-in-out infinite;
}
.mp2-dock__cta:hover { background: #134AE0; }

/* ============================== EXISTING COLLAPSIBLES — tighten margins only ============================== */
.mp-page.mp2 .mp-mkt,
.mp-page.mp2 .mp-context,
.mp-page.mp2 .mp-why,
.mp-page.mp2 .mp-faq,
.mp-page.mp2 .mp-related {
 background: var(--mp2-card-bg);
 border: 1px solid var(--mp2-card-border);
 border-radius: var(--mp2-r-md);
 padding: 12px 14px;
 margin: 0 0 12px;
 box-shadow: var(--mp2-card-shadow);
}
.mp-page.mp2 .mp-mkt--collapsible summary {
 cursor: pointer;
 list-style: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 4px 0;
}
.mp-page.mp2 .mp-mkt--collapsible summary::-webkit-details-marker { display: none; }
.mp-page.mp2 .mp-mkt__title {
 font-size: 14px;
 font-weight: 800;
 margin: 0;
 color: var(--ink-0, #0a0a0b);
 letter-spacing: -.01em;
}
.mp-page.mp2 .mp-mkt__chev {
 font-size: 16px;
 color: var(--ink-3, #8a8a93);
 transition: transform .2s;
}
.mp-page.mp2 .mp-mkt[open] .mp-mkt__chev { transform: rotate(90deg); }
.mp-page.mp2 .mp-mkt__summary-best {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
 color: var(--ink-2, #5b5b63);
 margin-left: auto;
 margin-right: 4px;
}
.mp-page.mp2 .mp-mkt__best-item { display: inline-flex; align-items: baseline; gap: 3px; }
.mp-page.mp2 .mp-mkt__best-price { font-weight: 700; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.mp-page.mp2 .mp-mkt__table-wrap {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 margin-top: 8px;
}
.mp-page.mp2 .mp-mkt__table {
 width: 100%;
 border-collapse: collapse;
 font-size: 12.5px;
}
.mp-page.mp2 .mp-mkt__table th {
 text-align: right;
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 color: var(--ink-3, #8a8a93);
 padding: 6px;
 border-bottom: 1px solid var(--mp2-card-border);
}
.mp-page.mp2 .mp-mkt__table td {
 padding: 6px;
 border-bottom: 1px solid var(--mp2-card-border);
 text-align: right;
 font-variant-numeric: tabular-nums;
}
.mp-page.mp2 .mp-mkt__th-book,
.mp-page.mp2 .mp-mkt__book-cell { text-align: left; }
.mp-page.mp2 .mp-mkt__cell.is-best {
 background: var(--mp2-up-soft);
 color: var(--mp2-up);
 font-weight: 800;
}

/* FAQ */
.mp-page.mp2 .mp-faq h2 {
 font-size: 15px;
 font-weight: 800;
 margin: 0 0 8px;
 color: var(--ink-0);
 letter-spacing: -.01em;
}
.mp-page.mp2 .mp-faq-item {
 border-top: 1px solid var(--mp2-card-border);
 padding: 8px 0;
}
.mp-page.mp2 .mp-faq-item:first-child { border-top: none; padding-top: 0; }
.mp-page.mp2 .mp-faq-item summary {
 cursor: pointer;
 list-style: none;
 font-weight: 600;
 font-size: 13.5px;
 color: var(--ink-0, #0a0a0b);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}
.mp-page.mp2 .mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-page.mp2 .mp-faq-item summary::after {
 content: "+";
 font-size: 16px;
 font-weight: 400;
 color: var(--ink-3);
 transition: transform .2s;
}
.mp-page.mp2 .mp-faq-item[open] summary::after { content: "–"; color: var(--accent); }
.mp-page.mp2 .mp-faq-item p {
 margin: 8px 0 0;
 font-size: 13px;
 line-height: 1.55;
 color: var(--ink-1, #2a2a2e);
}

/* Form & context */
.mp-page.mp2 .mp-context-head {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}
.mp-page.mp2 .mp-context-head h2 {
 font-size: 14px;
 font-weight: 800;
 margin: 0;
 color: var(--ink-0);
 letter-spacing: -.01em;
}
.mp-page.mp2 .mp-context-sub {
 font-size: 11px;
 color: var(--ink-3);
}
.mp-page.mp2 .mp-context-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}
.mp-page.mp2 .mp-team-card {
 background: var(--bg-2, #f5f5f7);
 border-radius: var(--mp2-r-sm);
 padding: 10px 12px;
}
.mp-page.mp2 .mp-team-card-head {
 font-size: 12.5px;
 font-weight: 800;
 color: var(--ink-0);
 margin-bottom: 6px;
 letter-spacing: -.005em;
}
.mp-page.mp2 .mp-team-card-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 font-size: 11.5px;
 color: var(--ink-2);
 padding: 3px 0;
 border-top: 1px solid var(--mp2-card-border);
}
.mp-page.mp2 .mp-team-card-row:first-of-type { border-top: none; }
.mp-page.mp2 .mp-team-card-row b { color: var(--ink-0); font-weight: 700; }
.mp-page.mp2 .mp-form { display: inline-flex; gap: 3px; }
.mp-page.mp2 .mp-form-pill {
 width: 18px; height: 18px;
 display: inline-flex; align-items: center; justify-content: center;
 border-radius: 4px;
 font-size: 10px; font-weight: 800;
 color: #fff;
}
.mp-page.mp2 .mp-form-W { background: var(--mp2-up); }
.mp-page.mp2 .mp-form-D { background: var(--ink-3, #8a8a93); }
.mp-page.mp2 .mp-form-L { background: var(--mp2-down); }

/* Related links */
.mp-page.mp2 .mp-related h2 {
 font-size: 13px;
 font-weight: 800;
 margin: 0 0 8px;
 color: var(--ink-0);
 text-transform: uppercase;
 letter-spacing: .04em;
}
.mp-page.mp2 .mp-related ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.mp-page.mp2 .mp-related li { margin: 0; padding: 6px 0; border-top: 1px solid var(--mp2-card-border); }
.mp-page.mp2 .mp-related li:first-child { border-top: none; padding-top: 0; }
.mp-page.mp2 .mp-related a { color: var(--accent, #7C3AED); font-size: 13px; text-decoration: none; }
.mp-page.mp2 .mp-related a:hover { text-decoration: underline; }

.mp-page.mp2 .mp-summary {
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--ink-1, #2a2a2e);
 margin: 0 0 12px;
 padding: 12px 14px;
 background: var(--bg-2, #f5f5f7);
 border-radius: var(--mp2-r-sm);
}

/* SSR top-nav pills — hide on mobile, redundant with market pills */
.mp-page.mp2 .mp-nav { display: none; }

/* Player props grid stays compact */
.mp-page.mp2 .mp-pp__grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
 gap: 8px;
 margin-top: 8px;
}
.mp-page.mp2 .mp-pp__card {
 background: var(--bg-2, #f5f5f7);
 border-radius: var(--mp2-r-sm);
 padding: 10px;
 text-align: center;
 text-decoration: none;
 color: var(--ink-0, #0a0a0b);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
}
.mp-page.mp2 .mp-pp__avatar {
 width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
 margin-bottom: 4px;
}
.mp-page.mp2 .mp-pp__avatar--initials {
 display: inline-flex; align-items: center; justify-content: center;
 background: hsl(var(--avatar-hue, 220deg), 55%, 50%);
 color: #fff; font-weight: 800; font-size: 18px;
}
.mp-page.mp2 .mp-pp__name {
 font-size: 12px; font-weight: 700;
 line-height: 1.2;
}
.mp-page.mp2 .mp-pp__role {
 font-size: 10.5px; color: var(--ink-3);
}
.mp-page.mp2 .mp-pp__price {
 font-size: 11px; color: var(--ink-2); margin-top: 4px;
}
.mp-page.mp2 .mp-pp__price .num {
 font-weight: 800; color: var(--ink-0); font-variant-numeric: tabular-nums;
 margin: 0 3px;
}
.mp-page.mp2 .mp-pp__show-more {
 margin: 8px auto 0;
 background: var(--bg-2);
 border: 1px solid var(--mp2-card-border);
 color: var(--ink-1);
 padding: 6px 14px;
 border-radius: 999px;
 cursor: pointer;
 font-size: 12px;
 font-weight: 600;
 display: block;
}

/* ============================== DESKTOP TWEAKS ============================== */
@media (min-width: 720px) {
 .mp-page.mp2 {
 padding: 24px 24px 96px;
 }
 .mp2-hero {
 padding: 22px 24px 22px;
 }
 .mp2-poster { gap: 18px; }
 .mp2-team__crest-wrap { width: 96px; height: 96px; }
 .mp2-team .mp-crest { width: 88px; height: 88px; }
 .mp2-team .mp-crest.mp-crest--mono { font-size: 32px; }
 .mp2-team__name { font-size: 22px; }
 .mp2-vs { min-width: 60px; }
 .mp2-vs__word { font-size: 13px; }
 .mp2-verdict__headline { font-size: 22px; }
 .mp2-odds-title { font-size: 17px; }
 .mp2-odds-table { font-size: 14px; }
 .mp-page.mp2 .mp-where {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 }
 .mp-page.mp2 .mp-where-cta { flex-shrink: 0; }
 /* Hide sticky dock on desktop — primary CTA is in the verdict card */
 .mp2-dock { display: none; }
}

/* End MP2 namespace */

/* ============================================================================
 /accas/ — daily acca page
 ========================================================================== */
.acca-page { max-width: var(--content-max); margin: 0 auto; padding: 24px 16px 64px; }
.acca-page__head { margin-bottom: 32px; }
.acca-page__eyebrow { color: var(--ink-2); font-size: var(--t-sm); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.acca-page__title { font-size: var(--t-display); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.acca-page__lede { color: var(--ink-1); font-size: 17px; line-height: 1.55; max-width: 720px; margin: 0 0 20px; }
.acca-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.acca-nav__pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg-1); color: var(--ink-0); font-size: var(--t-sm); font-weight: 500; text-decoration: none; border: 1px solid var(--line); }
.acca-nav__pill:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.acca-cat { margin-top: 40px; scroll-margin-top: 80px; }
.acca-cat__head { margin-bottom: 16px; }
.acca-cat__title { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.acca-cat__blurb { color: var(--ink-2); font-size: var(--t-body); margin: 0; }
.acca-cat__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

.acca-card { background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.acca-card--empty { background: var(--bg-1); }
.acca-card--empty .acca-card__empty { color: var(--ink-2); font-size: var(--t-sm); margin: 8px 0 0; }
.acca-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acca-card__title { font-size: var(--t-h3); font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.acca-card__band { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.acca-card__band--tame { background: #ecfdf3; color: #15803d; }
.acca-card__band--medium { background: #fef3c7; color: #b45309; }
.acca-card__band--aggressive { background: #fce7f3; color: #be185d; }
[data-theme="dark"] .acca-card__band--tame { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .acca-card__band--medium { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .acca-card__band--aggressive { background: rgba(236,72,153,.15); color: #f472b6; }

.acca-card__hero { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 14px; background: var(--bg-1); border-radius: var(--r-md); }
.acca-card__odds, .acca-card__payout, .acca-card__fair { display: flex; flex-direction: column; align-items: center; text-align: center; }
.acca-card__odds-num { font-size: 22px; font-weight: 700; color: var(--accent); }
.acca-card__payout-num { font-size: 22px; font-weight: 700; color: var(--up); }
.acca-card__fair-num { font-size: 22px; font-weight: 700; color: var(--ink-0); }
.acca-card__odds-label, .acca-card__payout-label, .acca-card__fair-label { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.acca-card__blurb { color: var(--ink-2); font-size: var(--t-sm); margin: 0; line-height: 1.5; }

.acca-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acca-leg { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 10px 12px; background: var(--bg-1); border-radius: var(--r-md); border: 1px solid var(--line); }
.acca-leg__pick { grid-column: 1 / 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acca-leg__type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.acca-leg__label { font-weight: 600; color: var(--ink-0); font-size: var(--t-sm); }
.acca-leg__label a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--ink-3); }
.acca-leg__label a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.acca-leg__match { grid-column: 1 / 2; display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; flex-wrap: wrap; }
.acca-leg__matchlink { color: var(--ink-2); text-decoration: none; }
.acca-leg__matchlink:hover { color: var(--accent); }
.acca-leg__vs { color: var(--ink-3); }
.acca-leg__kick { color: var(--ink-3); }
.acca-leg__league { color: var(--ink-3); }
.acca-leg__league::before { content: "·"; margin-right: 4px; }
.acca-leg__price { grid-column: 2 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-width: 70px; }
.acca-leg__num { font-size: 18px; font-weight: 700; color: var(--ink-0); }
.acca-leg__book { font-size: 11px; color: var(--cta); text-decoration: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--bg-2); }
.acca-leg__book:hover { background: var(--cta); color: var(--cta-ink); }

/* Payout illustration bar chart */
.acca-chart { margin: 0; padding: 14px; background: var(--bg-1); border-radius: var(--r-md); border: 1px solid var(--line); }
.acca-chart__caption { font-size: var(--t-sm); font-weight: 600; color: var(--ink-0); margin: 0 0 12px; }
.acca-chart__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acca-chart__bar { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; }
.acca-chart__leg { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acca-chart__leg-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-3); color: var(--ink-1); font-size: 10px; font-weight: 700; flex-shrink: 0; }
.acca-chart__leg-text { font-size: 12px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acca-chart__leg-type { color: var(--ink-3); font-size: 10px; margin-left: 4px; }
.acca-chart__track { height: 14px; background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; position: relative; }
.acca-chart__fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--cta) 100%); border-radius: var(--r-sm); transition: width .3s ease; }
.acca-chart__bar.is-final .acca-chart__fill { background: linear-gradient(90deg, var(--up) 0%, var(--accent) 100%); }
.acca-chart__val { font-size: 13px; font-weight: 700; color: var(--ink-0); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.acca-chart__bar.is-final .acca-chart__val { color: var(--up); }
.acca-chart__foot { font-size: 11px; color: var(--ink-3); margin: 10px 0 0; }

.acca-page__foot { margin-top: 48px; padding: 20px; background: var(--bg-1); border-radius: var(--r-md); }
.acca-page__foot h2 { font-size: var(--t-h3); margin: 0 0 8px; }
.acca-page__foot p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin: 0 0 8px; }
.acca-disclaimer { font-style: italic; color: var(--ink-3); }

/* Homepage: today's accas card */
.home-accas { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-1) 100%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-bottom: 24px; }
.home-accas__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.home-accas__title { font-size: var(--t-h3); font-weight: 700; margin: 0; }
.home-accas__cta { font-size: var(--t-sm); color: var(--accent); text-decoration: none; font-weight: 600; }
.home-accas__cta:hover { text-decoration: underline; }
.home-accas__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-accas__tile { background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.home-accas__tile:hover { border-color: var(--accent); transform: translateY(-1px); transition: all .15s ease; }
.home-accas__tile-band { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.home-accas__tile-odds { font-size: 20px; font-weight: 700; color: var(--accent); }
.home-accas__tile-foot { font-size: 11px; color: var(--ink-3); }
@media (max-width: 600px) {
 .home-accas__tiles { grid-template-columns: 1fr 1fr 1fr; }
 .home-accas__tile { padding: 10px 8px; }
 .home-accas__tile-odds { font-size: 17px; }
 .acca-card__hero { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
 .acca-card__odds, .acca-card__payout, .acca-card__fair { flex-direction: row; gap: 8px; justify-content: space-between; }
 .acca-card__odds-num, .acca-card__payout-num, .acca-card__fair-num { font-size: 18px; }
 .acca-chart__bar { grid-template-columns: 1fr auto; gap: 6px; }
 .acca-chart__track { grid-column: 1 / 3; height: 10px; }
 .acca-chart__leg { grid-column: 1 / 2; }
 .acca-chart__val { grid-column: 2 / 3; }
 .acca-page__title { font-size: 26px; }
}

/* ── Accas v2: per-category pages + player photos + compact hero ─────────── */

/* Compact hero (two-row layout instead of three columns) */
.acca-card__hero { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--bg-1); border-radius: var(--r-md); }
.acca-card__hero-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acca-card__hero-row--meta { font-size: var(--t-sm); color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 8px; }
.acca-card__fair-inline strong { color: var(--ink-0); font-weight: 700; }
.acca-card__legcount { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* AGS leg with player photo */
.acca-leg--ags { grid-template-columns: 48px 1fr auto; }
.acca-leg__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acca-leg__photo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); align-self: center; text-decoration: none; flex-shrink: 0; }
.acca-leg__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.acca-leg__photo--initials { font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.acca-leg--ags .acca-leg__pick { grid-column: 2 / 3; }
.acca-leg--ags .acca-leg__match { grid-column: 2 / 3; }
.acca-leg--ags .acca-leg__price { grid-column: 3 / 4; grid-row: 1 / 3; }

/* Accas index landing — 4 category tiles */
.acca-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 32px; }
.acca-index-tile { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.acca-index-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.acca-index-tile__title { font-size: var(--t-h3); font-weight: 700; margin: 0; color: var(--ink-0); }
.acca-index-tile__blurb { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.45; }
.acca-index-tile__odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; padding: 12px; background: var(--bg-1); border-radius: var(--r-md); }
.acca-index-tile__odds > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.acca-index-tile__odds dt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 0; }
.acca-index-tile__odds dd { font-size: 18px; font-weight: 700; color: var(--accent); margin: 0; font-variant-numeric: tabular-nums; }
.acca-index-tile__cta { font-size: var(--t-sm); color: var(--accent); font-weight: 600; margin-top: 4px; }

/* Breadcrumb on per-category page */
.acca-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 16px; flex-wrap: wrap; }
.acca-breadcrumb a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dashed var(--ink-3); }
.acca-breadcrumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.acca-breadcrumb span { color: var(--ink-3); }

/* Active state on nav pill */
.acca-nav__pill.is-active { background: var(--accent); color: var(--cta-ink, #fff); border-color: var(--accent); }
[data-theme="dark"] .acca-nav__pill.is-active { color: #fff; }

/* Homepage: 4-card category grid */
.home-accas__sub { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.home-accas__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.home-accas__card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.home-accas__card:hover { border-color: var(--accent); transform: translateY(-1px); }
.home-accas__card-head { display: flex; flex-direction: column; gap: 2px; }
.home-accas__card-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--ink-0); }
.home-accas__card-blurb { font-size: 12px; color: var(--ink-2); }
.home-accas__bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: var(--bg-1); border-radius: var(--r-sm); }
.home-accas__band { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.home-accas__band-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.home-accas__band-odds { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.home-accas__card-cta { font-size: 12px; color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
 .acca-index-grid { grid-template-columns: 1fr; }
 .home-accas__cards { grid-template-columns: 1fr; }
 .acca-index-tile__odds dd { font-size: 16px; }
}
@media (max-width: 600px) {
 .acca-card__hero-row { flex-wrap: wrap; gap: 8px; }
 .acca-card__hero-row--meta { font-size: 12px; }
 .acca-leg--ags { grid-template-columns: 36px 1fr auto; }
 .acca-leg__photo { width: 32px; height: 32px; }
 .acca-leg__photo--initials { font-size: 11px; }
}

/* Acca card CTA — primary "Place this acca at X" button (top + bottom of card) */
.acca-card__book-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--bg-2); color: var(--ink-2); text-transform: none; letter-spacing: 0; margin-left: auto; }
.acca-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--cta, #1B5BFF); color: #fff; border-radius: var(--r-md); text-decoration: none; font-weight: 600; transition: transform .12s ease, filter .12s ease; }
.acca-card__cta:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff; }
.acca-card__cta:active { transform: translateY(0); }
.acca-card__cta-label { font-size: 14px; line-height: 1.3; }
.acca-card__cta-label strong { font-weight: 700; }
.acca-card__cta-payout { font-size: 14px; font-weight: 700; opacity: .95; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Homepage card — book badge */
.home-accas__card-book { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: none; }
.home-accas__card-book strong { color: var(--accent); font-weight: 700; }

@media (max-width: 600px) {
 .acca-card__cta { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
 .acca-card__cta-payout { font-size: 13px; }
}

.home-accas__card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }

/* ── Accas card alignment: make all three cards in a row line up ─────────── */
/* Equal-height cards across the grid row */
.acca-cat__grid { align-items: stretch; }
.acca-cat__grid > .acca-card { height: 100%; }

/* Header: reserve room for two-line title + book badge so hero row sits at
   the same Y across all cards in the row. Title clamps to 2 lines. */
.acca-card__head { align-items: flex-start; min-height: 56px; }
.acca-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: calc(var(--t-h3, 18px) * 1.25 * 2);
}
.acca-card__band { align-self: flex-start; flex-shrink: 0; }
.acca-card__book-badge { align-self: flex-start; flex-shrink: 0; }

/* Reserve two lines for the blurb so the legs list begins at the same Y */
.acca-card__blurb { min-height: calc(var(--t-sm, 14px) * 1.5 * 2); }

/* Every leg row takes the same vertical space whether the match name wraps
   to one or two lines. 76px fits a 1-line pick + 2-line match comfortably. */
.acca-leg { min-height: 64px; align-items: center; }
.acca-leg--ags { min-height: 64px; }
.acca-leg__body { justify-content: center; }

@media (max-width: 600px) {
  .acca-card__head { min-height: 0; }
  .acca-card__title { min-height: 0; -webkit-line-clamp: unset; }
  .acca-card__blurb { min-height: 0; }
  .acca-leg, .acca-leg--ags { min-height: 0; }
}