/* ── INDEPENDENT BASEBALL PROJECTIONS — Shared Styles ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --bg:        #0b0f1a;
  --bg-card:   rgba(255,255,255,0.045);  /* lifted from 0.025 — cards were nearly invisible on the dark bg */
  --border:    rgba(255,255,255,0.07);
  --indigo:    #6366f1;
  --indigo-lt: #818cf8;
  --teal:      #14b8a6;
  --amber:     #f59e0b;
  --green:     #22c55e;
  --red:       #ef4444;
  --text:      #e2e8f0;
  --text-2:    #94a3b8;
  --text-3:    #8b97ab;  /* lifted from #475569 — failed WCAG AA on dark bg */
  --text-4:    #7c899e;  /* WCAG AA ~5.4:1 on --bg (was #6e7a90 = 4.42:1, failed AA) */
  --nav-h:     56px;
}

/* Accessibility: honour the OS "reduce motion" setting — kills the pulsing
   live dots, skeleton shimmer, and bar transitions for motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibility: visible keyboard-focus ring (site had none) */
:focus-visible {
  outline: 2px solid var(--indigo-lt);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Accessibility: screen-reader-only text + skip link */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--indigo); color: #fff; padding: 9px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(11,15,26,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-name {
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #f1f5f9;
}
.nav-fair { font-weight: 300 !important; color: #7c899e !important; }
.nav-bold { font-weight: 900 !important; color: #f1f5f9 !important; }
.nav-name em { color: var(--indigo-lt); font-style: normal; font-weight: 700; }

.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-link {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--indigo-lt); background: rgba(99,102,241,0.1); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}


.nav-updated {
  font-size: 11px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* Drop the timestamp in the tight tablet band so the cluster never wraps.
   Below 700px the broader responsive block hides it anyway. */
@media (max-width: 900px) {
  .nav-updated { display: none; }
}

/* ── Mobile hamburger menu ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-3);
  border-radius: 2px;
  transition: all 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 480px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(11,15,26,0.98);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 8px 16px 12px;
    gap: 2px;
    backdrop-filter: blur(12px);
    z-index: 99;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-link {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
  }
  .nav-right { display: none; }
  nav { position: relative; }
}

/* ── PAGE WRAPPER ── */
.page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }

/* ── SECTION LABEL ── */
.sec-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 12px;  /* reset UA heading margins now that .sec-lbl is an <h2> */
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.section { margin-bottom: 32px; }

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

/* ── STAT PILL ── */
.stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.stat-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); margin-bottom: 5px; }
.stat-val { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; }
.stat-sub { font-size: 9px; color: var(--text-4); margin-top: 3px; }
.stat-val.green  { color: var(--green); }
.stat-val.indigo { color: var(--indigo-lt); }
.stat-val.amber  { color: var(--amber); }
.stat-val.red    { color: var(--red); }
.stat-val.white  { color: #f1f5f9; }

/* ── PICK CARD ── */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick-grid .tier-header,
.pick-grid .share-all-row { grid-column: 1 / -1; }

.pick-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 18px;
  border-top: 2px solid var(--indigo);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.pick-card.strong  { border-top-color: var(--indigo); }
.pick-card.value   { border-top-color: var(--teal); }
.pick-card.marginal { border-top-color: var(--text-4); opacity: 0.75; }

.pick-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pick-tier {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pick-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.3);
  color: var(--indigo-lt);
}
.pick-badge.value  { background: rgba(20,184,166,0.1); border-color: rgba(20,184,166,0.3); color: var(--teal); }
.pick-badge.marginal { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-3); }

/* ── Other-markets signal badges (shown in card header) ── */
.om-signal-badge {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 3px; vertical-align: middle; line-height: 1.5;
}
.om-signal-badge.rl-badge { background: rgba(99,102,241,0.12); color: var(--indigo-lt); border: 1px solid rgba(99,102,241,0.25); }
.om-signal-badge.ou-badge { background: rgba(245,158,11,0.10); color: var(--amber);      border: 1px solid rgba(245,158,11,0.22); }

.pick-matchup {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f1f5f9;
  margin-bottom: 4px;
  line-height: 1.1;
}

.pick-meta {
  font-size: 10.5px;
  color: var(--text-3);
  margin-bottom: 12px;
}

.pick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.ps-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  padding: 8px 10px;
}
.ps-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-bottom: 3px; }
.ps-val { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; color: var(--indigo-lt); line-height: 1; }
.ps-val.amber { color: var(--amber); }
.ps-sub { font-size: 9px; color: var(--text-4); margin-top: 2px; }

.pick-mkt-row {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 10px;
  gap: 0;
}
.mkt-item { display: flex; align-items: center; gap: 6px; flex: 1; }
.mkt-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.06); margin: 0 10px; flex-shrink: 0; }
.mkt-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); white-space: nowrap; }
.mkt-val { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.mkt-val strong { color: var(--text); font-weight: 600; }
.mkt-badge { font-size: 8.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.mkt-badge.sharp { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; }
.mkt-badge.steam { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25); color: #f97316; }

.be-kelly-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.bk-box { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 7px; padding: 7px 10px; }
.bk-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; }
.bk-val { font-size: 14px; font-weight: 600; color: var(--text-2); }

.edge-bar-wrap { position: relative; margin-top: 4px; }
.edge-bar-track { height: 8px; background: rgba(255,255,255,0.04); border-radius: 100px; overflow: hidden; }
.edge-bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.edge-bar-label { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.edge-lbl { font-size: 8.5px; color: var(--text-4); }
.edge-val { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600; color: var(--amber); }

.corr-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: #d97706;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-4);
}
.empty-state .es-icon { font-size: 40px; margin-bottom: 16px; }
.empty-state .es-title { font-family: 'Oswald', sans-serif; font-size: 20px; color: var(--text-3); margin-bottom: 8px; }
.empty-state .es-sub { font-size: 13px; line-height: 1.6; }

/* ── ROI CHART ── */
.roi-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.roi-row:last-child { margin-bottom: 0; }
.roi-year { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3); min-width: 52px; }
.roi-bar-wrap { flex: 1; height: 7px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; }
.roi-fill { height: 100%; border-radius: 4px; }
.roi-fill.pos { background: linear-gradient(90deg, #16a34a, #22c55e); }
.roi-fill.neg { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.roi-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; min-width: 46px; text-align: right; }
.roi-pct.pos { color: var(--green); }
.roi-pct.neg { color: var(--red); }
.roi-meta { font-size: 9px; color: var(--text-4); min-width: 100px; text-align: right; }

/* ── CLV CHART ── */
.clv-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding-top: 10px; }
.clv-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity 0.15s; }
.clv-bar:hover { opacity: 0.8; }
.clv-bar.pos { background: var(--green); }
.clv-bar.neg { background: var(--red); }
.clv-zero { width: 100%; height: 1px; background: rgba(255,255,255,0.08); margin: 2px 0; }

/* ── MONTHLY CHART ── */
.monthly-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding-top: 8px; }
.mo-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.mo-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.mo-bar.pos { background: var(--green); }
.mo-bar.neg { background: var(--red); border-radius: 0 0 3px 3px; }
.mo-lbl { font-size: 9px; color: var(--text-4); }
.mo-val { font-size: 9px; font-weight: 600; }
.mo-val.pos { color: var(--green); }
.mo-val.neg { color: var(--red); }

/* ── PICK HISTORY TABLE ── */
.picks-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.picks-table th { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.picks-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-3); }
.picks-table tr:last-child td { border-bottom: none; }
.picks-table tr:hover td { background: rgba(255,255,255,0.015); }
.result-w { color: var(--green); font-weight: 600; }
.result-l { color: var(--red); font-weight: 600; }
.result-p { color: var(--text-4); }
.clv-pos { color: var(--green); }
.clv-neg { color: var(--red); }
.clv-neu { color: var(--text-4); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.7;
}
footer a { color: var(--text-3); text-decoration: none; }
footer a:hover { color: var(--text-2); }
.footer-brand { margin-bottom: 6px; }
.footer-links { margin-top: 8px; }
.site-disclaimer { font-size: 10px; color: var(--text-4); line-height: 1.6; max-width: 640px; margin: 6px auto; }

/* ── LOADING SPINNER ── */
.loading { text-align: center; padding: 40px; color: var(--text-4); font-size: 13px; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  /* Layout */
  .pick-grid { grid-template-columns: 1fr; }
  nav { padding: 0 12px; gap: 8px; }
  .page { padding: 20px 14px 48px; }

  /* Nav: hide "updated" timestamp on small screens, shrink links */
  .nav-updated { display: none; }
  .nav-link { padding: 5px 9px; font-size: 12px; }
  .nav-name { font-size: 14px; }

  /* Pick card: shrink large matchup text */
  .pick-matchup { font-size: 20px; }
  .ps-val { font-size: 15px; }

  /* History / performance tables: allow horizontal scroll */
  .card { overflow-x: auto; }
  .picks-table { min-width: 480px; }
  .edge-table  { min-width: 420px; }

  /* Two-col grids stack on mobile */
  .two-col, .three-col { grid-template-columns: 1fr !important; }

  /* Stat pills: allow natural wrapping */
  .metrics-row { gap: 6px; }
  .metrics-row .stat-pill { min-width: 80px; }

  /* Record strip pills smaller on mobile */
  .record-strip .stat-pill { padding: 8px 12px; }
  .stat-val { font-size: 18px; }

  /* Footer: smaller */
  footer { font-size: 10px; padding: 18px 14px; }
}

/* ══════════════════════════════════════════════════════════
   Option C: Unified pick card (per-game, all markets inside)
   ══════════════════════════════════════════════════════════ */

/* Compact header row: tier · teams · time · value badge */
.uc-header-row {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-bottom: 7px; font-size: 11px;
}
.uc-tier-star { font-size: 13px; line-height: 1; flex-shrink: 0; }
.uc-tier-label { font-weight: 700; color: var(--amber); flex-shrink: 0; }
.uc-tier-label.value-label { color: var(--green); }
.uc-tier-label.marginal-label { color: var(--text-3); }
.uc-tier-dot { color: var(--text-4); flex-shrink: 0; }
.uc-matchup { font-weight: 600; color: var(--text-2); }
.uc-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Narrative preview — first sentence, always visible */
.uc-narrative-preview {
  font-size: 11.5px; color: var(--text-3); line-height: 1.6;
  margin: 2px 0 12px;
  border-left: 2px solid rgba(99,102,241,0.25);
  padding-left: 10px;
}
.uc-narrative-preview strong { color: var(--text-2); }

/* Markets table — bleeds to card edges */
.uc-markets-table {
  margin: 4px -18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.uc-market-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; font-size: 12px;
}
.uc-market-row + .uc-market-row { border-top: 1px solid var(--border); }
.uc-market-row.ml-primary { background: rgba(52,211,153,0.035); }

/* Market type pills */
.uc-mtype {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0; width: 32px; text-align: center;
}
.uc-mtype.ml { background: rgba(52,211,153,0.10); color: var(--green); border: 1px solid rgba(52,211,153,0.22); }
.uc-mtype.rl { background: rgba(99,102,241,0.10); color: var(--indigo-lt); border: 1px solid rgba(99,102,241,0.22); }
.uc-mtype.ou { background: rgba(245,158,11,0.09); color: var(--amber); border: 1px solid rgba(245,158,11,0.22); }

/* Arrow + pick text */
.uc-market-arrow { font-size: 8px; flex-shrink: 0; }
.uc-market-row.ml-primary .uc-market-arrow { color: var(--green); }
.uc-market-row.rl-row .uc-market-arrow { color: var(--indigo-lt); }
.uc-market-row.ou-row .uc-market-arrow { color: var(--amber); }
.uc-market-pick { font-weight: 700; color: var(--text-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-market-row.ml-primary .uc-market-pick { color: var(--text-1, #f1f5f9); }
.uc-market-odds { font-weight: 600; flex-shrink: 0; }
.uc-market-row.ml-primary .uc-market-odds { color: var(--green); }
.uc-market-row.rl-row .uc-market-odds { color: var(--indigo-lt); }
.uc-market-row.ou-row .uc-market-odds { color: var(--amber); }
.uc-market-noedge-pick { color: var(--text-4); font-weight: 400; flex: 1; min-width: 0; font-size: 11px; }

/* Edge bar */
.uc-market-bar-wrap {
  width: 52px; height: 4px;
  background: rgba(255,255,255,0.07); border-radius: 2px;
  flex-shrink: 0; overflow: hidden;
}
.uc-market-bar { height: 4px; border-radius: 2px; }
.uc-market-row.ml-primary .uc-market-bar { background: var(--green); }
.uc-market-row.rl-row .uc-market-bar { background: var(--indigo-lt); }
.uc-market-row.ou-row .uc-market-bar { background: var(--amber); }

/* Edge label / No edge */
.uc-market-edge { font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 42px; text-align: right; }
.uc-market-row.ml-primary .uc-market-edge { color: var(--green); }
.uc-market-row.rl-row .uc-market-edge { color: var(--indigo-lt); }
.uc-market-row.ou-row .uc-market-edge { color: var(--amber); }
.uc-market-noedge { font-size: 10px; color: var(--text-4); font-style: italic; flex-shrink: 0; min-width: 42px; text-align: right; }

/* Action row at card bottom */
.uc-action-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 0; margin-top: 0;
  border-top: 1px solid var(--border);
}

/* Details toggle */
.details-toggle {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 5px; font-size: 10px; color: var(--text-4);
  padding: 3px 10px; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.details-toggle:hover { color: var(--text-2); background: rgba(255,255,255,0.06); }
.details-toggle.open { color: var(--text-2); border-color: rgba(255,255,255,0.15); }

/* Details expandable body */
.details-body { display: none; padding-top: 14px; }
.details-body.open { display: block; }

/* ── Performance charts ──────────────────────────────────────────────────── */
.perf-charts-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: flex-start;
}
.pchart-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px 10px;
  flex: 1;
  min-width: 160px;
}
.pchart-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pchart-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-4);
}
.pchart-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 60px;
}
.pchart-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.pchart-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  height: 44px;
}
.pchart-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 0.3s;
}
.pchart-bar-lbl {
  font-size: 9px;
  color: var(--text-4);
  text-align: center;
}
.pchart-bar-val {
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.pchart-clv-avg {
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
}
/* ROI pill highlight */
.stat-pill.roi-pill .stat-val {
  font-size: 18px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(52,211,153,0.04) 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 40px;
  margin-bottom: 28px;
}
.hero-inner { max-width: 680px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--indigo-lt); background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2); border-radius: 20px;
  padding: 3px 10px; margin-bottom: 14px;
}
.hero-headline {
  font-family: 'Oswald', sans-serif; font-size: clamp(22px, 4vw, 32px);
  font-weight: 700; color: #f1f5f9; line-height: 1.2;
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.hero-sub {
  font-size: 13.5px; color: var(--text-3); line-height: 1.7;
  margin-bottom: 22px; max-width: 600px;
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn-primary {
  display: inline-block; padding: 9px 20px;
  background: var(--indigo-lt); color: #0f172a;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 6px; text-decoration: none; transition: opacity 0.15s;
}
.hero-btn-primary:hover { opacity: 0.88; }
.hero-btn-secondary {
  display: inline-block; padding: 9px 20px;
  background: rgba(255,255,255,0.05); color: var(--text-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none; transition: background 0.15s;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.09); }
/* Always-visible credibility line (hero-proof is JS-gated; this never is) */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 7px 16px;
  list-style: none; margin: 16px 0 0; padding: 0;
}
.hero-trust li {
  position: relative; padding-left: 15px;
  font-size: 11px; font-weight: 500; color: var(--text-3);
  letter-spacing: 0.01em;
}
.hero-trust li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700; font-size: 10px;
}

/* ── Trust strip ──────────────────────────────────────────────────────── */
.trust-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.trust-card {
  flex: 1; min-width: 140px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 13px;
}
.trust-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 3px;
}
.trust-val {
  font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 1.3;
}

/* ── Freshness row ─────────────────────────────────────────────────────── */
.freshness-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 10px; color: var(--text-4);
}
.freshness-sep { color: var(--border); }
.freshness-item { white-space: nowrap; }

/* ── Loading / Empty / Error states ──────────────────────────────────── */
.state-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 40px 24px;
  text-align: center; max-width: 480px; margin: 0 auto;
}
.state-icon { font-size: 32px; margin-bottom: 10px; }
.state-title {
  font-family: 'Oswald', sans-serif; font-size: 16px;
  color: var(--text-2); margin-bottom: 6px; letter-spacing: 0.04em;
}
.state-sub { font-size: 12px; color: var(--text-4); line-height: 1.6; }
.loading-state { border-color: rgba(99,102,241,0.2); }
.error-state { border-color: rgba(239,68,68,0.2); }
.error-state .state-title { color: #f87171; }

/* ── Methodology note ──────────────────────────────────────────────────── */
.methodology-note {
  background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.15);
  border-radius: 10px; margin-bottom: 22px; overflow: hidden;
}
.mn-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; cursor: pointer; list-style: none; user-select: none;
}
.mn-summary::-webkit-details-marker { display: none; }
.mn-icon { font-size: 15px; flex-shrink: 0; }
.mn-title { font-size: 11.5px; font-weight: 700; color: var(--indigo-lt); flex: 1; }
.mn-chevron { font-size: 14px; color: var(--text-4); transition: transform 0.2s; }
details[open] .mn-chevron { transform: rotate(90deg); }
.mn-body { padding: 0 16px 12px; border-top: 1px solid rgba(99,102,241,0.12); }
.mn-text { font-size: 11.5px; color: var(--text-3); line-height: 1.65; margin: 10px 0 6px; }
.mn-note { font-size: 10.5px; color: var(--text-4); font-style: italic; line-height: 1.5; margin: 0; }

/* ── Transparency section ──────────────────────────────────────────────── */
.transparency-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 20px; margin-bottom: 24px;
}
.ts-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.ts-icon { font-size: 16px; }
.ts-title {
  font-family: 'Oswald', sans-serif; font-size: 14px;
  font-weight: 600; color: var(--text-2); letter-spacing: 0.05em;
}
.ts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ts-list li {
  font-size: 11.5px; color: var(--text-3); padding-left: 18px;
  position: relative; line-height: 1.5;
}
.ts-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--green); font-weight: 700; font-size: 10px; top: 1px;
}

/* ── Live vs Backtest sections ─────────────────────────────────────────── */
.results-section { margin-bottom: 32px; }
.live-section { border-left: 3px solid var(--green); padding-left: 14px; }
.backtest-section { border-left: 3px solid var(--text-4); padding-left: 14px; }
.section-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 4px;
}
.live-badge-lg {
  background: rgba(52,211,153,0.1); color: var(--green);
  border: 1px solid rgba(52,211,153,0.25);
}
.backtest-badge-lg {
  background: rgba(255,255,255,0.05); color: var(--text-4);
  border: 1px solid var(--border);
}
.badge-dot.live-dot-lg {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.section-sub {
  font-size: 11px; color: var(--text-4); margin-bottom: 16px; line-height: 1.5;
}

/* ── Live metrics row ──────────────────────────────────────────────────── */
.live-metrics-note {
  font-size: 10.5px; color: var(--text-4); margin-bottom: 12px;
  padding: 7px 12px; background: rgba(52,211,153,0.04);
  border: 1px solid rgba(52,211,153,0.12); border-radius: 6px;
}
.live-metrics-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.lm-card {
  flex: 1; min-width: 90px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.lm-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 4px;
}
.lm-val {
  font-size: 15px; font-weight: 700; color: var(--text-2);
}
.lm-val.green { color: var(--green); }

/* ── Pick key info line ─────────────────────────────────────────────────── */
.pick-key-info {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10.5px; margin-bottom: 8px; padding: 5px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pki-item { display: flex; align-items: center; gap: 3px; }
.pki-lbl { color: var(--text-4); }
.pki-val { color: var(--text-2); font-weight: 600; }
.pki-val.pki-threshold { color: var(--amber); }
.pki-val.pki-playable  { color: var(--green); font-weight: 700; }
.pki-sep { color: var(--border); }

/* ── Pick flags ─────────────────────────────────────────────────────────── */
.pick-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pick-flag {
  font-size: 9.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; letter-spacing: 0.03em;
}
.flag-ok { background: rgba(52,211,153,0.1); color: var(--green); border: 1px solid rgba(52,211,153,0.2); }
.flag-warn { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.flag-caution { background: rgba(245,158,11,0.1); color: var(--amber); border: 1px solid rgba(245,158,11,0.2); }
.flag-strong { background: rgba(245,158,11,0.12); color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-section { margin-bottom: 32px; }
.faq-heading {
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600;
  color: var(--text-2); letter-spacing: 0.05em; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.faq-list { display: flex; flex-direction: column; gap: 1px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.faq-item + .faq-item { border-top: none; border-radius: 0; }
.faq-item:first-child { border-radius: 8px 8px 0 0; }
.faq-item:last-child  { border-radius: 0 0 8px 8px; }
.faq-q {
  padding: 12px 16px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; color: var(--text-4); font-size: 16px; font-weight: 400; }
details[open] .faq-q::after { content: '−'; }
.faq-a {
  padding: 0 16px 12px; font-size: 12px;
  color: var(--text-3); line-height: 1.65;
}

/* ── Disclaimer ─────────────────────────────────────────────────────────── */
.site-disclaimer {
  font-size: 10.5px; color: var(--text-4); line-height: 1.7;
}
.page-updated {
  font-size: 10px; color: var(--text-4); margin-bottom: 12px;
}

/* ── Mobile polish ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero-section { padding: 32px 0 28px; }
  .hero-headline { font-size: 22px; }
  .hero-sub { font-size: 12.5px; }
  .trust-strip { gap: 6px; }
  .trust-card { min-width: 120px; }
  .live-metrics-row { gap: 6px; }
  .lm-card { min-width: 80px; }
  .pick-key-info { gap: 4px; font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   STATUS STRIP — daily picks state indicator
══════════════════════════════════════════════════════════════ */
.status-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 9px; margin-bottom: 14px;
  font-size: 12px; border: 1px solid;
}
.status-strip.ss-pending {
  background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.18);
}
.status-strip.ss-locked {
  background: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.2);
}
.status-strip.ss-active {
  background: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.22);
}
.status-strip.ss-done {
  background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.07);
}
.ss-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.ss-badge-locked { background: rgba(34,197,94,0.14); color: var(--green); }
.ss-badge-live   { background: rgba(239,68,68,0.16); color: #f87171; animation: ss-pulse 2s infinite; }
.ss-badge-done   { background: rgba(255,255,255,0.07); color: var(--text-3); }
.ss-badge-pending{ background: rgba(99,102,241,0.14); color: var(--indigo-lt); }
@keyframes ss-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
.ss-text { flex: 1; color: var(--text-2); min-width: 0; }
.ss-time { font-size: 11px; color: var(--text-4); flex-shrink: 0; }
.ss-link {
  font-size: 11px; color: var(--indigo-lt); text-decoration: none;
  flex-shrink: 0; white-space: nowrap;
}
.ss-link:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   PICK LIFECYCLE BADGE
══════════════════════════════════════════════════════════════ */
.plc-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0; align-self: flex-start;
}
.plc-locked { background: rgba(34,197,94,0.10); color: var(--green); }
.plc-live   { background: rgba(239,68,68,0.14); color: #f87171; }
.plc-win    { background: rgba(34,197,94,0.10); color: var(--green); }
.plc-loss   { background: rgba(239,68,68,0.06); color: var(--text-4); }

/* ══════════════════════════════════════════════════════════════
   NO-PICKS-YET STATE (before 9 AM)
══════════════════════════════════════════════════════════════ */
.picks-pending-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 36px 24px; text-align: center;
}
.ppc-time { font-size: 28px; margin-bottom: 10px; }
.ppc-title {
  font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600;
  color: var(--text-2); letter-spacing: 0.04em; margin-bottom: 6px;
}
.ppc-sub { font-size: 12px; color: var(--text-4); line-height: 1.65; margin-bottom: 18px; }
.ppc-preview-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
  border-radius: 7px; padding: 8px 16px; text-decoration: none;
  font-size: 12px; font-weight: 600; color: var(--indigo-lt);
  transition: background 0.15s;
}
.ppc-preview-link:hover { background: rgba(99,102,241,0.18); }

/* ══════════════════════════════════════════════════════════════
   ABOUT THIS MODEL — collapsed below-fold section
══════════════════════════════════════════════════════════════ */
.about-model {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 16px; overflow: hidden;
}
.about-model summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  color: var(--text-4); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; user-select: none;
}
.about-model summary::-webkit-details-marker { display: none; }
.about-model summary:hover { color: var(--text-3); background: rgba(255,255,255,0.02); }
.about-model[open] summary { border-bottom: 1px solid var(--border); color: var(--text-3); }
.am-chevron { margin-left: auto; font-size: 10px; transition: transform 0.2s; }
.about-model[open] .am-chevron { transform: rotate(180deg); }
.about-model-body { padding: 16px; }

/* ══════════════════════════════════════════════════════════════
   PREVIEW PAGE — tomorrow's opening lines
══════════════════════════════════════════════════════════════ */
.preview-page-disclaimer {
  background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 20px;
  display: flex; gap: 10px; align-items: flex-start;
}
.ppd-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ppd-text { font-size: 12px; color: var(--text-3); line-height: 1.65; }
.ppd-text strong { color: var(--amber); font-weight: 600; }

.preview-pick-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 14px;
}
.ppc-left { flex: 1; min-width: 0; }
.ppc-team {
  font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700;
  color: var(--text); letter-spacing: 0.02em; line-height: 1;
}
.ppc-game { font-size: 11px; color: var(--text-4); margin-top: 3px; }
.ppc-pitchers { font-size: 11px; color: var(--text-4); margin-top: 2px; }
.ppc-right { text-align: right; flex-shrink: 0; }
.ppc-edge { font-size: 18px; font-weight: 800; color: var(--green); line-height: 1; }
.ppc-odds { font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.ppc-book { font-size: 11px; color: var(--text-4); }
.ppc-prelim {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 4px; margin-top: 6px; display: inline-block;
  background: rgba(245,158,11,0.12); color: var(--amber);
}
.preview-empty {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 40px 24px; text-align: center;
}
.preview-empty-icon { font-size: 32px; margin-bottom: 10px; }
.preview-empty-title { font-family: 'Oswald',sans-serif; font-size:16px; color:var(--text-3); margin-bottom:6px; }
.preview-empty-sub { font-size: 12px; color: var(--text-4); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   FOOTER SPORT MARKS
══════════════════════════════════════════════════════════════ */
.footer-sport-marks {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; margin-bottom: 12px;
}
.fsm-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fsm-item.fsm-soon { opacity: 0.28; }
.fsm-sep {
  width: 1px; height: 32px; background: rgba(255,255,255,0.07);
  margin: 0 3px; align-self: center;
}
.fsm-lbl {
  font-family: system-ui, sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7c899e;
}
.fsm-lbl.fsm-active { color: #94a3b8; }
.fsm-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(99,102,241,0.15); color: #6366f1;
  padding: 1px 5px; border-radius: 3px;
}

/* ════════════════ Compact pick rows (analytics-table layout) ════════════════ */
.pr-headline { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:2px 0 14px; }
.pr-headline .prh-title { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:.01em; color:var(--text); }
.pr-headline .prh-meta { font-size:13px; color:var(--text-3); }
.pr-headline .g { color:var(--green); font-weight:700; }

/* Sizing + exposure bar (moved below the picks heading from the stats card) */
.sizing-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.022); padding:9px 14px; margin-bottom:14px; }
.sizing-bar .sizing-expo { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-3); display:inline-flex; align-items:center; gap:6px; }
.sizing-bar .sizing-expo strong { color:var(--text); font-weight:700; }
.sizing-bar .se-lbl { font-family:var(--font-ui); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); }
@media (max-width:640px) { .sizing-bar .sizing-expo { margin-left:0; width:100%; } }

.pr-stack { display:block; }
.pr-table { border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.022); overflow:hidden; margin-bottom:16px; }

/* table: matchup+time · pick(team+line) · mkt→model · edge · current-odds · play-to · stake · chevron */
.pr-cols {
  display:grid;
  grid-template-columns:
    minmax(116px,1.4fr)   /* matchup + time */
    minmax(70px,.8fr)     /* pick: team + captured line */
    minmax(104px,1.15fr)  /* mkt → model */
    .72fr                 /* edge */
    minmax(116px,1.4fr)   /* current odds */
    minmax(54px,.72fr)    /* play to */
    minmax(58px,.8fr)     /* stake */
    20px;                 /* chevron */
  align-items:center; gap:11px;
}
.pr-head { padding:7px 16px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); }
.pr-head .pr-h { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-4); display:flex; align-items:center; gap:3px; min-width:0; white-space:nowrap; }
.pr-head .pr-h.h-mm, .pr-head .pr-h.h-edge, .pr-head .pr-h.h-odds, .pr-head .pr-h.h-play, .pr-head .pr-h.h-stake { justify-content:flex-end; }
.pr-head .pr-h.sortable { cursor:pointer; }
.pr-head .pr-h.sortable:hover { color:var(--text-3); }
.pr-head .pr-h.active { color:var(--text-2); }
.pr-head .pr-sortarr { color:var(--indigo-lt); font-size:9px; margin-left:2px; }
.pr-head .pr-sortarr.inactive { color:var(--text-4); opacity:.45; }  /* persistent "sortable" hint */
.pr-head .pr-h.sortable:hover .pr-sortarr.inactive { opacity:.8; }

.pr-row { padding:10px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s, opacity .12s; background:transparent; width:100%; }
.pr-wrap:last-child > .pr-row { border-bottom:none; }
.pr-row:hover { background:rgba(255,255,255,.028); }
.pr-row:focus-visible { outline:2px solid var(--indigo-lt); outline-offset:-2px; }
.pr-row.open { background:rgba(99,102,241,.06); }
.pr-row.pr-faded { opacity:.62; }
.pr-row.pr-faded:hover { opacity:.85; }
/* live / final / postponed — distinct from the faded "skip" rows */
.pr-row.pr-state-live  { opacity:1; box-shadow:inset 3px 0 0 var(--indigo-lt, #818cf8); }
.pr-row.pr-state-final { opacity:.8; }
.pr-row.pr-final-win   { box-shadow:inset 3px 0 0 var(--green); }
.pr-row.pr-final-loss  { box-shadow:inset 3px 0 0 var(--red); }
.pr-row.pr-state-ppd   { opacity:.55; }

/* matchup + time — plain game label (the Pick column names the side) */
.pr-mu { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pr-mu-main { min-width:0; }
.pr-match { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--text-2); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-match .pr-at { color:var(--text-4); font-weight:400; margin:0 1px; }
.pr-time { font-family:var(--font-mono); font-size:9.5px; color:var(--text-4); margin-top:2px; white-space:nowrap; }

/* pick — team + the line it was captured at */
.pr-pick { font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pr-pick .pr-bo { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-3); margin-left:5px; }

/* mkt → model win prob (neutral — Edge is the coloured one) */
.pr-mm { font-family:var(--font-mono); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; }
.pr-mm .pr-mm-mkt { color:var(--text-4); }
.pr-mm .pr-mm-arr { color:var(--text-4); margin:0 6px; }
.pr-mm .pr-mm-mdl { color:var(--text); font-weight:600; }

/* edge — the one emphasised, colour-coded number */
.pr-edge { font-family:var(--font-mono); font-size:15px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; line-height:1.05; white-space:nowrap; }
.pr-edge.pos { color:var(--green); }
.pr-edge.neg { color:var(--red); }
/* re-rated marker — model moved the edge off the posted value since posting */
.pr-edge .pr-upd { font-size:9px; margin-left:2px; vertical-align:1px; color:var(--text-4); font-weight:600; }
/* drawer "posted → now" / re-rate note */
.dw-upd { color:#fbbf24 !important; font-weight:600; }

/* current odds + book + ¢ movement vs the captured line */
.pr-odds { text-align:right; min-width:0; }
.pr-odds .pr-o-main { display:flex; align-items:baseline; justify-content:flex-end; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-odds .pr-o-mv { min-width:50px; text-align:left; padding-left:7px; box-sizing:border-box; flex:none; }  /* reserved slot → odds stay aligned whether or not there's a chip */
.pr-odds .pr-o-na { color:var(--text-4); font-weight:400; }  /* live/final — no actionable price */
.pr-mv { font-size:10px; }
.pr-mv.ahead  { color:#5ea87f; }   /* muted green — we locked a better number than now (CLV+) */
.pr-mv.behind { color:#cc7a7a; }   /* muted red — better price available now */

/* ── Live / final score chip — right edge of the matchup column ('LAA 1–0') ──── */
.pr-mu-score { font-family:var(--font-mono); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; flex:none; display:inline-block; transform-origin:right center; }
.pr-mu-score.sc-ahead, .pr-mu-score.sc-win  { color:var(--green); }
.pr-mu-score.sc-behind, .pr-mu-score.sc-loss { color:var(--red); }
.pr-mu-score.sc-tied { color:var(--text-3, #94a3b8); }
@keyframes prFlash { 0%{ transform:scale(1); } 28%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.pr-mu-score.pr-flash { animation:prFlash .85s ease-out; }
@media (prefers-reduced-motion:reduce) { .pr-mu-score.pr-flash { animation:none; } }

/* matchup subline state (replaces the start time once a game is underway) */
.pr-sub { font-family:var(--font-mono); font-size:9.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; letter-spacing:.02em; }
.pr-sub-live { color:var(--green); }
.pr-sub-final, .pr-sub-ppd { color:var(--text-4); }

/* play to — worst price still worth betting */
.pr-play { text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* stake — units primary, $ secondary */
.pr-stake { text-align:right; font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-stake .pr-st-usd { display:block; font-size:9px; font-weight:400; color:var(--text-4); margin-top:1px; min-height:11px; }

.pr-chev { justify-self:end; color:var(--text-4); font-size:15px; line-height:1; transition:transform .16s; }
.pr-row.open .pr-chev { transform:rotate(90deg); color:var(--indigo-lt); }

/* ── Group divider — separates actionable plays from no-longer-playable / near-miss ── */
.pr-group-label {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px 7px; margin-top:5px;
  border-top:1px solid var(--border);
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-4);
}
.pr-group-label .pgl-n {
  font-family:var(--font-mono); font-weight:600; letter-spacing:0; font-size:10px;
  color:var(--text-4); background:rgba(255,255,255,.05); padding:1px 6px; border-radius:10px;
}

/* ── Recap (all-done) variant — replaces current-odds/play-to with results ───── */
.pr-cols.pr-recap {
  grid-template-columns:
    minmax(116px,1.5fr)   /* matchup */
    minmax(74px,.85fr)    /* pick */
    minmax(70px,.8fr)     /* last tracked */
    minmax(78px,1fr)      /* result */
    minmax(58px,.8fr)     /* P&L */
    minmax(58px,.8fr)     /* stake */
    20px;                 /* chevron */
}
.pr-head .pr-h.h-last, .pr-head .pr-h.h-result, .pr-head .pr-h.h-pnl { justify-content:flex-end; }
.pr-recap .pr-last { text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-recap .pr-result-cell, .pr-recap .pr-pnl-cell { text-align:right; }
.pr-result { font-family:var(--font-mono); font-size:12.5px; font-weight:700; white-space:nowrap; }
.pr-result.win { color:var(--green); }
.pr-result.loss { color:var(--red); }
.pr-result.ppd { color:var(--text-4); font-weight:600; }
.pr-pnl { font-family:var(--font-mono); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-4); }
.pr-pnl.pos { color:var(--green); }
.pr-pnl.neg { color:var(--red); }
/* graded-card forward link in the Action Today note */
.at-note .at-tmr { color:var(--indigo-lt); text-decoration:none; font-weight:600; white-space:nowrap; }
.at-note .at-tmr:hover { text-decoration:underline; }
/* Recap responsive — the global rules hide .pr-stake (≤1024) and .pr-chev (≤620),
   so the recap grid must drop those tracks too or its cells misalign. (Phase 4
   delivers the full mobile ticket; this just keeps the recap aligned meanwhile.) */
@media (max-width:1024px) {
  /* 760–1024 (tablet): recap drops its stake column. Below 760 the mobile ticket takes over. */
  .pr-cols.pr-recap { grid-template-columns:minmax(112px,1.5fr) minmax(70px,.85fr) minmax(64px,.8fr) minmax(74px,1fr) minmax(54px,.8fr) 18px; }
}

/* Action Today strip — one consolidated band: counts · top edge · state · updated */
.action-today { background:rgba(255,255,255,.022); border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin:2px 0 12px; }
.action-today .at-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.action-today .at-meta { font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.action-today .at-meta strong { color:var(--text); font-weight:700; }
.action-today .at-meta .g { color:var(--green); }
.action-today .at-meta .at-strong { color:var(--amber); }
.action-today .at-meta .at-bt { color:var(--text-3); font-family:var(--font-mono); font-size:12px; }
.action-today .at-meta .at-dim { color:var(--text-4); }
.action-today .at-meta .at-sep { color:var(--text-4); margin:0 5px; }
.action-today .at-state { font-size:12px; margin:0; }
.action-today .at-upd { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-4); white-space:nowrap; }
.action-today .at-note { font-size:11px; color:var(--text-4); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
@media (max-width:640px) { .action-today .at-upd { margin-left:0; } }

/* expanded details — the existing pickCardHTML, nested; strip its outer card chrome */
.pr-details { border-bottom:1px solid var(--border); background:rgba(0,0,0,.14); padding:2px 12px 12px; }
.pr-wrap:last-child > .pr-details { border-bottom:none; }
.pr-details .pick-card-v8, .pr-details .pick-card { margin:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; }

/* ── Expanded pick drawer — decision-first, two-column ───────────────────── */
.dw { display:flex; flex-direction:column; padding:8px 4px 4px; font-family:var(--font-ui); }

/* ── Shareable pick image: the exact expanded drawer + slim brand/disclaimer frame ── */
/* flex-shrink:0 — .share-modal-preview is a flex container; without this the card
   shrinks below 680px on narrow phones, cramming the two-column layout (and
   html2canvas then captures it shrunk). Pinning the width keeps the exported
   card identical on every device; the modal preview is fit via JS transform. */
.sc-wrap { width:680px; flex-shrink:0; box-sizing:border-box; background:#0b0e16; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:16px 20px 14px; }
.sc-wrap-hdr { display:flex; align-items:center; gap:9px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.07); }
.sc-wrap-name { font-family:var(--font-display); font-size:14px; letter-spacing:0.04em; color:var(--text-3); }
.sc-wrap-name b { color:var(--text); font-weight:800; }
.sc-wrap-date { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-4); }
.sc-wrap-body .dw { padding-top:2px; }
.sc-wrap-ftr { margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,0.07); }
.sc-wrap-disc { font-size:9.5px; color:var(--text-4); line-height:1.5; }
.sc-wrap-url { margin-top:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--indigo-lt); letter-spacing:0.02em; }

/* the bet — verdict that cites the numbers */
.dw-head { display:flex; align-items:baseline; gap:8px 10px; flex-wrap:wrap; margin-bottom:13px; }
.dw-head-name { font-family:var(--font-display); font-size:19px; font-weight:800; letter-spacing:.01em; color:var(--text); }
.dw-pill { font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; }
.dw-pill.good { color:var(--green); background:rgba(34,197,94,.13); }
.dw-pill.bad  { color:var(--red);   background:rgba(239,68,68,.12); }
.dw-pill.neu  { color:var(--text-3); background:rgba(255,255,255,.05); }
.dw-head-detail { font-size:12px; color:var(--text-3); }

/* decision band — current · posted · play-to · stake (dividers, no panel) */
.dw-band { display:flex; flex-wrap:wrap; margin-bottom:2px; }
.dw-bi { flex:1 1 0; min-width:120px; padding:0 16px; text-align:center; border-left:1px solid var(--border); }
.dw-bi:first-child { border-left:none; padding-left:0; }
.dw-bi-k { display:block; font-size:10.5px; color:var(--text-4); }
.dw-bi-v { display:block; font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--text); line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums; }
.dw-bi-v.good { color:var(--green); }
.dw-bi-s { display:block; font-size:9.5px; color:var(--text-4); margin-top:1px; }

/* shared section — divider + sentence-case header (no panels) */
.dw-sec { border-top:1px solid var(--border); margin-top:14px; padding-top:14px; }
.dw-h2 { font-size:12px; font-weight:700; color:var(--text-2); margin-bottom:10px; }
.dw-h3 { font-size:11px; font-weight:700; color:var(--text-3); margin:16px 0 8px; }
.dw-cap { font-size:10.5px; color:var(--text-4); margin-top:7px; line-height:1.5; }

/* two-column body — faint panels group each side (no heavy borders) */
.dw-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.dw-cols .dw-col { min-width:0; background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:13px 15px; }

/* why — meter + key-drivers/offsets + model read */
.dw-meter { position:relative; height:8px; border-radius:4px; background:rgba(255,255,255,.07); margin-top:8px; }
.dw-meter > i { position:absolute; top:0; height:100%; display:block; }
.dw-meter .m-mkt { left:0; border-radius:4px 0 0 4px; background:rgba(148,163,184,.4); }
.dw-meter .m-gap { background:var(--green); }
.dw-meter .m-tick { top:-2px; width:2px; height:12px; border-radius:1px; background:var(--text); }
.dw-meter-cap { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); }
.dw-meter-cap b { color:var(--text); font-weight:700; }
.dw-meter-cap .dw-arr { color:var(--text-4); }
.dw-meter-cap .g { color:var(--green); font-weight:700; margin-left:auto; }
.dw-factors { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:15px; }
.dw-fcol { min-width:0; }
.dw-fh { font-size:11px; font-weight:700; margin-bottom:7px; }
.dw-fh.good { color:var(--green); } .dw-fh.bad { color:var(--red); }
.dw-frow { display:flex; gap:9px; align-items:baseline; font-size:12px; color:var(--text-2); padding:3px 0; }
.dw-frow b { font-family:var(--font-mono); font-weight:700; min-width:30px; }
.dw-frow b.good { color:var(--green); } .dw-frow b.bad { color:var(--red); }
.dw-read { font-size:12.5px; line-height:1.55; color:var(--text-3); }
.dw-narrative { font-size:13px; line-height:1.6; color:var(--text-2); margin-bottom:12px; padding-left:10px; border-left:2px solid rgba(129,140,248,0.40); }

/* "What changed since posting" — collapsible re-rate explainer */
.dwc { border:1px solid var(--border); border-radius:10px; background:rgba(251,191,36,.04); margin:2px 0 14px; }
.dwc-sum { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:9px 12px; cursor:pointer; list-style:none; }
.dwc-sum::-webkit-details-marker { display:none; }
.dwc-t { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fbbf24; }
.dwc-hl { font-family:var(--font-mono); font-size:12px; color:var(--text-2); }
.dwc-hl b { color:var(--text); font-weight:700; }
.dwc-d { font-weight:700; }
.dwc-d.good { color:var(--green); } .dwc-d.bad { color:var(--red); }
.dwc .am-chevron { margin-left:auto; transition:transform .16s; color:var(--text-4); }
.dwc[open] .am-chevron { transform:rotate(180deg); }
.dwc-body { padding:2px 12px 11px; border-top:1px solid var(--border); }
.dwc-row { display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--text-2); padding:5px 0 2px; }
.dwc-row .dwc-k { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-4); min-width:54px; }
.dwc-row .dwc-v { font-family:var(--font-mono); }
.dwc-row .dwc-v b.good { color:var(--green); } .dwc-row .dwc-v b.bad { color:var(--red); }
.dwc-fh { font-size:11px; font-weight:700; color:var(--text-3); margin:10px 0 4px; }
.dwc-frow { display:flex; gap:9px; align-items:baseline; font-size:12px; color:var(--text-2); padding:3px 0; }
.dwc-frow b { font-family:var(--font-mono); font-weight:700; min-width:34px; }
.dwc-frow b.good { color:var(--green); } .dwc-frow b.bad { color:var(--red); }
.dwc-frow .dwc-fl { flex:1; min-width:0; }
.dwc-frow .dwc-fdd { font-family:var(--font-mono); font-size:10.5px; color:var(--text-4); white-space:nowrap; }

/* matchup data table */
.dw-mtable { width:100%; border-collapse:collapse; table-layout:fixed; }
.dw-mtable th { font-size:10px; font-weight:700; color:var(--text-4); text-align:right; padding:0 4px 8px; border-bottom:1px solid var(--border); vertical-align:bottom; }
.dw-mtable th:first-child { width:37%; text-align:left; padding-left:0; }
.dw-mtable th:last-child  { width:16%; padding-right:0; }
.dw-mtable th span { display:block; font-weight:400; color:var(--text-4); font-size:8.5px; margin-top:2px; white-space:normal; line-height:1.2; }
.dw-mtable td { font-family:var(--font-mono); font-size:12px; color:var(--text-2); text-align:right; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.05); font-variant-numeric:tabular-nums; }
.dw-mtable td:first-child { padding-left:0; }
.dw-mtable td:last-child  { padding-right:0; }
.dw-mtable tr:last-child td { border-bottom:none; }
.dw-mtable td.dw-mt-metric { font-family:var(--font-ui); color:var(--text-3); text-align:left; }
.dw-mtable td.good { color:var(--green); font-weight:700; }
.dw-mtable td.bad  { color:var(--red);   font-weight:700; }
.dw-dir { display:block; color:var(--text-4); font-size:9px; font-weight:400; margin-top:1px; }

/* status & context rows — compact: label column + value right after (not far right) */
.dw-rows { display:flex; flex-direction:column; gap:1px; }
.dw-rc { display:grid; grid-template-columns:74px 1fr; gap:8px; align-items:baseline; font-size:12px; padding:2px 0; }
.dw-rk { color:var(--text-4); }
.dw-rv { color:var(--text-2); }
.dw-rv.good { color:var(--green); }

/* line movement — full-width price graph; CLV sits on the header line */
.dw-move-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dw-move-head .dw-h2 { margin-bottom:0; }
.dw-lgwrap { margin-top:10px; }
.dw-lg { width:100%; height:auto; display:block; }
.dw-lg .dw-lg-val { font-family:var(--font-mono); font-size:17px; font-weight:600; fill:var(--text); }
.dw-lg .dw-lg-lbl { font-family:var(--font-ui); font-size:15px; fill:var(--text-4); }
.dw-lg .dw-lg-time { font-family:var(--font-mono); font-size:11px; fill:var(--text-4); opacity:0.85; }
.dw-lg circle { cursor:default; }
.dw-lg .dw-lg-hit { cursor:pointer; }
.lg-tip {
  position:fixed; z-index:2000; transform:translate(-50%,-100%);
  background:#0f1623; color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:5px 9px; font:600 12px/1 var(--font-mono);
  white-space:nowrap; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,0.45);
}
.lg-tip[hidden] { display:none; }
.dw-lg-cap { font-size:10px; color:var(--text-4); margin-top:6px; line-height:1.5; }
.dw-clv { display:flex; align-items:baseline; gap:6px; flex-shrink:0; }
.dw-clv .dw-clv-k, .dw-clv .dw-clv-s { font-size:10px; color:var(--text-4); }
.dw-clv b { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-2); }
.dw-clv b.g { color:var(--green); } .dw-clv b.r { color:var(--red); }

/* actions */
.dw-actions { display:flex; gap:8px; margin-top:14px; }
.dw-act { font-family:var(--font-ui); font-size:12px; color:var(--text-3); background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:7px 14px; cursor:pointer; }
.dw-act:hover { color:var(--text); background:rgba(255,255,255,.06); }
/* Touch devices: meet the 44px tap-target guideline (compact on desktop/mouse) */
@media (pointer: coarse) { .dw-act { min-height:44px; display:inline-flex; align-items:center; justify-content:center; } }
.dw-usd { color:var(--text-4); font-weight:400; }

@media (max-width:760px) {
  .dw-cols { grid-template-columns:1fr; }
  .dw-bi { min-width:100px; }
}

@media (max-width:560px) {
  /* top band: clean 2×2 grid instead of a cramped 3-then-1 wrap */
  .dw-band { display:grid; grid-template-columns:1fr 1fr; gap:12px 0; margin-bottom:6px; }
  .dw-bi { min-width:0; padding:8px 12px; border-left:none; }
  .dw-bi:nth-child(2n)   { border-left:1px solid var(--border); }   /* divider between the two columns */
  .dw-bi:nth-child(n+3)  { border-top:1px solid var(--border); }    /* divider between the two rows */
  /* line-movement graph: its 900-wide viewBox shrinks SVG text hard on phones — enlarge it */
  .dw-lg .dw-lg-val { font-size:28px; }
  .dw-lg .dw-lg-lbl { font-size:24px; }
  .dw-lg .dw-lg-time { font-size:17px; }
}

/* ── Share card: always export the wide / desktop layout ─────────────────────
   The shared PNG is an html2canvas capture of the fixed-680px .sc-wrap, but the
   drawer's viewport media queries (above) fire on phones and stack everything
   into a very tall portrait. These .sc-wrap-scoped rules re-assert the desktop
   layout so the exported image is consistent on every device. They affect ONLY
   the share card — the live expanded drawer keeps its responsive behaviour.
   (Placed after the media blocks so they win equal-specificity ties.) */
.sc-wrap .dw-cols { grid-template-columns:1fr 1fr; }
.sc-wrap .dw-band { display:flex; flex-wrap:wrap; }
.sc-wrap .dw-bi { min-width:120px; padding:0 16px; border-left:1px solid var(--border); border-top:none; }
.sc-wrap .dw-bi:first-child { border-left:none; padding-left:0; }
.sc-wrap .dw-lg .dw-lg-val { font-size:17px; }
.sc-wrap .dw-lg .dw-lg-lbl { font-size:15px; }
.sc-wrap .dw-lg .dw-lg-time { font-size:11px; }

/* collapsible sections (Marginal / Completed) */
.pr-collapse { margin-bottom:14px; }
.pr-collapse-hd { display:flex; align-items:center; width:100%; min-height:44px; background:transparent; border:0; padding:6px 0; cursor:pointer; color:inherit; font:inherit; text-align:left; }
.pr-collapse-chev { margin-left:10px; color:var(--text-4); font-size:16px; transition:transform .16s; flex-shrink:0; }
.pr-collapse.open .pr-collapse-chev { transform:rotate(90deg); color:var(--indigo-lt); }
.pr-collapse-body { margin-top:10px; }

/* Responsive — progressively hide lower-priority columns (no side-scroll).
   Core that always survives: Matchup · Pick · Edge · Current odds.
   Drop order as width shrinks: Stake → Mkt→Model → Play-to → chevron. */
@media (max-width:1024px) {
  .pr-stake, .pr-head .h-stake { display:none; }
  .pr-cols { grid-template-columns:minmax(112px,1.4fr) minmax(68px,.8fr) minmax(100px,1.15fr) .72fr minmax(112px,1.4fr) minmax(52px,.72fr) 18px; }
  .pr-head, .pr-row { padding-left:14px; padding-right:14px; }
}
@media (max-width:900px) {
  .pr-mm, .pr-head .h-mm { display:none; }
  .pr-cols { grid-template-columns:minmax(108px,1.45fr) minmax(68px,.8fr) .75fr minmax(112px,1.45fr) minmax(52px,.72fr) 18px; }
}
@media (max-width:760px) {
  /* ── Mobile bet-ticket ──────────────────────────────────────────────────────
     Below 760px (phones; real tablets are ≥768) each row reflows into a 3-line
     ticket so the decision fields (play-to / stake, and recap last / P&L) are
     never dropped. Column header is hidden and the cells carry inline labels.
     The SAME DOM serves the live table and the Phase 2 recap — no JS, no second
     row builder. Must come after the ≤900/≤1024 rules so it re-shows what they hide. */
  .pr-head { display:none; }
  .pr-chev, .pr-head .h-chev { display:none; }
  .pr-row { padding:11px 13px; }
  /* minmax(0,1fr) — NOT 1fr (=minmax(auto,1fr)) — so the nowrap matchup/odds
     content can't hold the tracks open and overflow-clip the right column on phones. */
  .pr-cols { grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px 10px; align-items:start; }
  .pr-cols > * { min-width:0; }

  /* matchup stacks its name + inning/Final onto their own lines */
  .pr-mu { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:1px; }
  .pr-mu-score { text-align:left; transform-origin:left center; }

  /* live / actionable ticket */
  .pr-cols:not(.pr-recap) {
    grid-template-areas:
      "mu   mu   edge"
      "pick pick pick"
      "odds play stake";
  }
  .pr-cols:not(.pr-recap) .pr-mm { display:none; }
  .pr-cols:not(.pr-recap) .pr-play,
  .pr-cols:not(.pr-recap) .pr-stake { display:block; }   /* re-show — earlier rules hid these */
  .pr-mu{grid-area:mu;} .pr-pick{grid-area:pick;} .pr-edge{grid-area:edge;}
  .pr-odds{grid-area:odds;} .pr-play{grid-area:play;} .pr-stake{grid-area:stake;}

  /* recap ticket */
  .pr-cols.pr-recap {
    grid-template-areas:
      "mu   mu   result"
      "pick pick pick"
      "last pnl  stake";
  }
  .pr-cols.pr-recap .pr-stake { display:block; }
  .pr-recap .pr-result-cell{grid-area:result;} .pr-recap .pr-last{grid-area:last;} .pr-recap .pr-pnl-cell{grid-area:pnl;}

  /* edge (live) / result (recap) stay the prominent top-right element */
  .pr-edge { font-size:17px; justify-self:end; }
  .pr-recap .pr-result-cell { justify-self:end; }

  /* decision chips — small uppercase label above a left-aligned value */
  .pr-odds, .pr-play, .pr-stake, .pr-last, .pr-pnl-cell { text-align:left; }
  .pr-odds::before, .pr-play::before, .pr-stake::before, .pr-last::before, .pr-pnl-cell::before {
    display:block; font-size:8.5px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--text-4); margin-bottom:2px; line-height:1;
  }
  .pr-odds::before     { content:"Now"; }
  .pr-play::before     { content:"Play to"; }
  .pr-stake::before    { content:"Stake"; }
  .pr-last::before     { content:"Last"; }
  .pr-pnl-cell::before { content:"P&L"; }

  /* current-odds: left-align the value and tighten the movement-chip slot */
  .pr-odds .pr-o-main { justify-content:flex-start; }
  .pr-odds .pr-o-mv { min-width:0; padding-left:6px; }
}
@media (max-width:620px) {
  /* The ≤760 ticket already owns the row layout; just tighten padding on small phones. */
  .pr-row { padding:11px 12px; }
}