/*
 * LINEHOUND v1 SCREEN COMPOSITION -- Gameday, Bet Check and Game View,
 * traced from the frozen artboards in
 * design/linehound-v1/LINEHOUND Gameday.dc.html.
 *
 * The canvas is authored with inline styles; per its own build note
 * ("port to your own class or token layer; the values in section 02 are
 * the contract, not the delivery mechanism") the geometry, clamps,
 * gradients, clip-paths and tracking below are transcribed from it into
 * classes. Numbers here are READ FROM THE CANVAS, not re-derived.
 *
 * Team colors arrive as inline custom properties (--team-a / --team-b /
 * --rule-a / --rule-b) from js/teamcolors.js -- the only inline styling
 * in this client, because a club palette is per-game data, not a rule.
 */

/* =====================================================================
   HERO -- team seam
   Desktop: two clip-path halves either side of a skewed 3px seam.
   Mobile:  the same two halves at -4.46deg, stacked.
   ===================================================================== */
.hero {
  position: relative;
  min-height: clamp(540px, 66vh, 700px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ground);
}
.hero__half {
  position: absolute;
  inset: -40px 0;                 /* so parallax never reveals an edge */
  will-change: transform;
  transition: filter var(--dur-seam-side) ease;
}
.hero__half--a {
  clip-path: polygon(0 0, 56% 0, 40% 100%, 0 100%);
  background: var(--team-a);
}
.hero__half--b {
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 40% 100%);
  background: var(--team-b);
}
.hero:hover .hero__half { filter: brightness(.84); }
.hero .hero__half:hover { filter: brightness(1.24) saturate(1.16); }

.hero__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 62%);
}
.hero__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: skewX(-9deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 38%,
                                      rgba(0, 224, 255, .5) 66%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 30px rgba(0, 224, 255, .4);
  pointer-events: none;
}
.hero__sweep {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -11px;
  overflow: hidden; transform: skewX(-9deg); pointer-events: none;
}
.hero__sweep i {
  position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(180deg, rgba(0, 224, 255, 0), rgba(168, 244, 255, .85) 50%, rgba(0, 224, 255, 0));
  filter: blur(5px);
  animation: gseam var(--dur-gseam) var(--ease-seam) infinite;
}
.hero__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 330px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 13, 0), rgba(8, 10, 13, .9) 46%, #080A0D);
}

.hero__eyebrow {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 26px var(--gutter-desktop) 0;
}
.hero__tick {
  flex: none; width: 20px; height: 20px;
  border-left: 2px solid rgba(0, 224, 255, .7);
  border-top: 2px solid rgba(0, 224, 255, .7);
}
.hero__tick--right {
  border-left: 0; border-top: 2px solid rgba(0, 224, 255, .45);
  border-right: 2px solid rgba(0, 224, 255, .45);
}
.hero__kicker {
  flex: none;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: .28em;
  color: var(--live-label);
  white-space: nowrap;
}
.hero__spacer { flex: 1; }
.hero__venue--time { display: none; }
.hero__venue {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .2em;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__matchup {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-9);
  padding: 34px var(--gutter-desktop) 0;
}
.hero__side { flex: 1; min-width: 0; }
.hero__side--home { text-align: right; }
.hero__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 7.4vw, 112px);
  font-weight: 800;
  line-height: .84;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.hero__rule {
  width: 100px; height: 6px; margin-top: 12px;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, var(--rule-a, var(--text-mute)), transparent);
}
.hero__side--home .hero__rule {
  margin: 12px 0 0 auto;
  background: linear-gradient(270deg, var(--rule-b, var(--text-mute)), transparent);
}
.hero__line {
  display: flex; align-items: baseline; gap: var(--sp-7);
  margin-top: 16px;
  white-space: nowrap;
}
.hero__side--home .hero__line { justify-content: flex-end; }
.hero__record {
  flex: none;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: .06em;
  color: #EAF1FF;
}
.hero__probable {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .14em;
  color: rgba(234, 241, 255, .55);
  overflow: hidden; text-overflow: ellipsis;
}
.hero__vs {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: 0 4px;
}
.hero__vs-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px; font-weight: 800; letter-spacing: .06em;
  color: rgba(255, 255, 255, .34);
}
.hero__vs-time {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
}
.hero__gap { flex: 0 1 auto; height: 44px; max-height: 44px; }

.hero__foot {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 26px var(--sp-12);
  padding: 0 var(--gutter-desktop) var(--gutter-desktop);
}
.hero__foot-spacer { flex: 1; min-width: 12px; }

/* ---- price bug ------------------------------------------------------*/
.pricebug {
  position: relative;
  flex: none;
  padding: 24px 36px 22px 30px;
  --r: var(--r-tile);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 61, 87, .22), rgba(255, 61, 87, .05) 58%, rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .45), 0 30px 70px -24px rgba(255, 61, 87, .45);
}
.pricebug::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--money), var(--money-2));
}
.pricebug__sheen {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  animation: gsheen var(--dur-gsheen) ease-in-out infinite;
}
.pricebug__head {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  white-space: nowrap;
  flex-wrap: wrap;
}
.pricebug__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--money-lit);
  box-shadow: 0 0 14px rgba(255, 61, 87, .9);
}
.pricebug__label {
  flex: none;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: .24em;
  color: var(--money-label);
}
.pricebug__divider { flex: none; width: 1px; height: 12px; background: rgba(255, 255, 255, .2); }
.pricebug__age {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em;
  color: rgba(255, 255, 255, .45);
}
.pricebug__figures { position: relative; display: flex; align-items: flex-end; gap: var(--sp-10); }
.pricebug__price {
  flex: none;
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(94px, 11.4vw, 166px);   /* the loudest element anywhere */
  line-height: .76;
  letter-spacing: -.025em;
  color: #FFFFFF;
  text-shadow: 0 10px 54px rgba(255, 61, 87, .5);
}
.pricebug__aside { flex: none; padding-bottom: 16px; }
.pricebug__was {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 300; letter-spacing: -.03em;
  color: rgba(255, 255, 255, .34);
  text-decoration: line-through;
}
.pricebug__was-label {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .2em;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
}
.pricebug__none {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-hi);
  max-width: 22ch;
}

.hero__pill-col { flex: none; padding-bottom: 14px; }
.hero__move {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
}
.hero__actions { flex: none; display: flex; align-items: center; gap: var(--sp-6); padding-bottom: 14px; }

/* NO PLAY / empty-slate hero body: keeps the hero geometry, states the
   position in plain language, quantifies the work. Never a row of zeros
   (handoff section 10). */
.noplay {
  position: relative;
  flex: none;
  max-width: 640px;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.noplay__eyebrow {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: .28em;
  color: var(--money-label);
}
.noplay__title {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: .92;
  color: var(--text-hi);
}
.noplay__body { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.noplay__meta {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em; color: var(--text-faint);
}

/* ---- hero at 390px: horizontal seam, halves stacked -----------------*/
@media (max-width: 899px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero__half { inset: 0; }
  .hero__half--a { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 50%); }
  .hero__half--b { clip-path: polygon(0 50%, 100% 42%, 100% 100%, 0 100%); }
  .hero__seam, .hero__sweep { display: none; }
  .hero__eyebrow { padding: 18px var(--gutter-mobile) 0; gap: var(--sp-4); }
  .hero__kicker { font-size: 13px; letter-spacing: .22em; }
  .hero__venue { display: none; }
  .hero__venue--time { display: block; font-size: 12.5px; letter-spacing: .16em; }
  .hero__tick--right { display: none; }
  .hero__matchup {
    display: block;
    padding: 12px var(--gutter-mobile) 0;
  }
  .hero__wordmark { font-size: 62px; line-height: .84; letter-spacing: -.012em; }
  .hero__line { margin-top: 10px; }
  .hero__rule { margin-top: 8px; }
  .hero__side--home { margin-top: 22px; }
  .hero__vs {
    position: relative;
    margin: 10px 0 0;
    align-items: center;
  }
  .hero__vs-time { display: none; }
  .hero__vs-mark {
    padding: 6px 16px;
    --r: var(--r-badge);
    background: rgba(13, 14, 17, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  }
  .hero__gap { height: 10px; }
  /* The price bug breaks the seam, but it must never land on top of the
     home team's record line -- that line is data, the overlap is styling. */
  .hero__side--home .hero__line { margin-bottom: 26px; }
  .hero__foot { display: block; padding: 0 var(--gutter-mobile) 26px; }
  .pricebug { margin-top: -18px; padding: 20px 20px 18px 18px; }
  .pricebug__head { gap: var(--sp-3); white-space: normal; }
  .pricebug__label { font-size: 13px; letter-spacing: .16em; white-space: normal; }
  .pricebug__divider { display: none; }
  .pricebug__was-label { font-size: 12.5px; letter-spacing: .14em; white-space: normal; }
  .pricebug__aside { padding-bottom: 6px; }
  .pricebug__price { font-size: 92px; letter-spacing: -.026em; }
  .pricebug__figures { gap: var(--sp-7); }
  .pricebug__was { font-size: 22px; }
  .hero__pill-col, .hero__actions { padding: var(--sp-7) 0 0; }
  .hero__actions { display: block; }
  .hero__actions .btn { width: 100%; }
}

/* =====================================================================
   TONIGHT'S SLATE -- angled tile rail
   ===================================================================== */
.slate { padding: 56px var(--gutter-desktop) 10px; }
@media (max-width: 899px) { .slate { padding: 30px 0 6px; }
  .slate > .sechead { padding: 0 var(--gutter-mobile); } }

.slate__rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.slate__rail > * { scroll-snap-align: start; }
@media (max-width: 899px) {
  .slate__rail { gap: 12px; padding: 0 var(--gutter-mobile) 14px; }
}

.tile {
  position: relative;
  flex: none;
  width: 298px;
  height: 214px;
  --r: var(--r-lg);
  overflow: hidden;
  background: var(--tile-base);
  opacity: .9;
  transition: transform var(--dur-tile-lift) var(--ease-rise), opacity var(--dur-tile-lift) ease;
}
.tile:hover { transform: translateY(-8px); opacity: 1; }
@media (max-width: 899px) { .tile { width: 226px; height: 172px; --r: var(--r-panel); } }

.tile__half {
  position: absolute; inset: 0;
}
.tile__half--a { clip-path: polygon(0 0, 62% 0, 44% 100%, 0 100%); background: var(--team-a); }
.tile__half--b { clip-path: polygon(62% 0, 100% 0, 100% 100%, 44% 100%); background: var(--team-b); }
.tile__sheen {
  position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
}
.tile__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 13, 0), rgba(8, 10, 13, .9));
}
.tile__ring {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.tile__spec {
  position: absolute; left: -40%; top: -60%; width: 80%; height: 220%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0));
  opacity: 0;
  transform: translateX(-30%) rotate(18deg);
  transition: opacity .45s ease, transform var(--dur-tile-sweep) cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.tile:hover .tile__spec { opacity: 1; transform: translateX(60%) rotate(18deg); }
.tile__corner {
  position: absolute; width: 14px; height: 14px;
}
.tile__corner--tl { left: 16px; top: 14px;
  border-left: 2px solid rgba(255, 255, 255, .35); border-top: 2px solid rgba(255, 255, 255, .35); }
.tile__corner--br { right: 16px; bottom: 14px;
  border-right: 2px solid rgba(255, 255, 255, .22); border-bottom: 2px solid rgba(255, 255, 255, .22); }
.tile__flag { position: absolute; right: 14px; top: 14px; }
.tile__teams {
  position: absolute; left: 20px; top: 52px; right: 20px;
  display: flex; align-items: baseline; gap: var(--sp-4);
  white-space: nowrap;
}
.tile__abbr {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px; font-weight: 800; line-height: .9; letter-spacing: -.01em;
}
.tile__at {
  flex: none;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: .14em;
  color: rgba(255, 255, 255, .35);
}
.tile__prices {
  position: absolute; left: 20px; bottom: 52px;
  display: flex; align-items: baseline; gap: 18px;
  white-space: nowrap;
}
.tile__price {
  flex: none;
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 500; letter-spacing: -.04em;
  color: var(--text);
}
.tile__price--muted { font-weight: 300; color: rgba(242, 244, 248, .55); }
.tile__price-rule { flex: none; width: 1px; height: 18px; background: rgba(255, 255, 255, .16); }
.tile__noprice {
  position: absolute; left: 20px; right: 20px; bottom: 48px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-3);
  line-height: 1.2;
}
.tile__foot {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display: flex; align-items: baseline; gap: var(--sp-5);
  white-space: nowrap;
}
.tile__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .1em;
  color: var(--live);
}
.tile__venue {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600; letter-spacing: .16em;
  color: rgba(255, 255, 255, .34);
}
.tile--feature { opacity: 1; transform: translateY(-6px); }
.tile--feature .tile__ring { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34); }
@media (max-width: 899px) {
  .tile__teams { top: 40px; }
  .tile__abbr { font-size: 32px; }
  .tile__prices { bottom: 44px; }
  .tile__price { font-size: 22px; }
}

/* =====================================================================
   WHAT CHANGED
   ===================================================================== */
.changed {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  padding: 46px var(--gutter-desktop) 20px;
}
@media (max-width: 899px) {
  .changed { grid-template-columns: minmax(0, 1fr); gap: var(--sp-9);
    padding: 30px var(--gutter-mobile) 12px; }
}
.changed__lead {
  position: relative;
  padding: 26px 30px;
  --r: var(--r-tile);
  background: linear-gradient(150deg, rgba(0, 224, 255, .09), rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .2);
}
.changed__lead::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--live), rgba(0, 224, 255, 0));
}
.changed__meta {
  display: flex; align-items: baseline; gap: var(--sp-6);
  margin-bottom: var(--sp-5);
  white-space: nowrap; flex-wrap: wrap;
}
.changed__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 14.5px; font-weight: 500; letter-spacing: .1em;
  color: var(--live);
}
.changed__cat {
  flex: none;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--text-mute);
}
.changed__cat--risk { color: var(--money-lit); }
.changed__headline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--text-hi);
  margin-bottom: var(--sp-1);
}
.changed__sub { font-size: 16px; color: var(--text-mute); margin-top: var(--sp-3); }
.changed__stream { display: flex; flex-direction: column; gap: var(--sp-6); }
.changed__row {
  position: relative;
  padding: 20px 24px;
  --r: var(--r-panel);
  background: linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow var(--dur-hover-lift) ease;
}
.changed__row::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--live);
}
.changed__row:hover { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3); }
.changed__row-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--text);
}
.changed__reaction {
  display: flex; align-items: baseline; gap: var(--sp-5);
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 18px; letter-spacing: -.02em;
  color: var(--text-faint);
  white-space: nowrap;
}
.changed__reaction b { color: var(--text); font-weight: 500; }
.changed__more {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em;
  color: var(--text-faint);
}

/* =====================================================================
   BET CHECK ENTRY BAND (on Gameday)
   ===================================================================== */
.checkband {
  position: relative;
  margin: 46px var(--gutter-desktop) 0;
  padding: 44px 48px;
  --r: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(112deg, #141922 0%, #0F131A 52%, #0C0F14 100%);
}
.checkband__glow {
  position: absolute; right: -120px; top: -120px; width: 520px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 224, 255, .14), rgba(0, 224, 255, 0) 72%);
}
.checkband__eyebrow {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  margin-bottom: var(--sp-9);
  white-space: nowrap;
}
.checkband__tick {
  flex: none; width: 20px; height: 20px;
  border-left: 2px solid rgba(0, 224, 255, .6);
  border-top: 2px solid rgba(0, 224, 255, .6);
}
.checkband__label {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: .26em;
  color: var(--live);
}
.checkband__row { position: relative; display: flex; align-items: center; gap: var(--sp-9); }
.checkband__field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-7);
  height: 74px; padding: 0 26px;
  --r: var(--r-panel);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
  transition: box-shadow var(--dur-ring-bloom) ease;
}
.checkband__field:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .75), 0 0 40px -8px rgba(0, 224, 255, .35);
}
.checkband__bullet { flex: none; width: 15px; height: 15px; border: 2px solid var(--text-faint); border-radius: 50%; }
.checkband__prompt {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checkband__note {
  position: relative;
  margin-top: var(--sp-8);
  font-size: 15px;
  color: var(--text-dim);
}
@media (max-width: 899px) {
  /* Section 07: at 390px the Bet Check band stops being an inline
     section and becomes a sticky 58px field above the tab bar -- always
     one tap away, never covering the slate. The eyebrow, the note and
     the glow drop out; what is left is the field and a compact CHECK. */
  .checkband {
    position: fixed;
    left: 0; right: 0;
    /* Rides on top of the tab bar, which is now itself taller by the
       home-indicator inset (nav.css). Without adding the same inset here
       the field would slide down behind the bar on a notched phone. */
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    margin: 0;
    padding: 8px var(--gutter-mobile);
    --r: 0px;
    background: rgba(13, 14, 17, .94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .checkband__eyebrow, .checkband__note, .checkband__glow { display: none; }
  .checkband__row { gap: var(--sp-5); }
  .checkband__field { height: 58px; padding: 0 16px; gap: var(--sp-5); }
  .checkband__prompt { font-size: 18px; }
  .checkband .btn { padding: 0 18px; height: 58px; font-size: 16px; }
}

/* =====================================================================
   CLOSING BAND
   ===================================================================== */
.closer {
  position: relative;
  margin-top: 44px;
  padding: 76px var(--gutter-desktop) 84px;
  overflow: hidden;
  background: linear-gradient(112deg, #1A0E13 0%, #120A0E 46%, #0B0C0E 100%);
}
.closer__wash {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, 42% 0, 26% 100%, 0 100%);
  background: linear-gradient(140deg, rgba(255, 61, 87, .22), rgba(255, 61, 87, .04) 70%, rgba(255, 61, 87, 0));
}
.closer__row {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 36px 60px;
}
.closer__copy { flex: 1 1 420px; min-width: 320px; }
.closer__eyebrow {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: .3em;
  color: var(--money-lit);
  margin-bottom: var(--sp-8);
}
.closer__headline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(48px, 5.4vw, 80px);
  line-height: .92;
  letter-spacing: -.005em;
  color: var(--text-hi);
}
.closer__sub { margin-top: var(--sp-10); font-size: 17px; color: var(--text-mute); }
.closer__meta {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em; color: var(--text-faint);
}
.closer__actions { flex: none; display: flex; align-items: center; gap: var(--sp-8); }
@media (max-width: 899px) {
  .closer { padding: 44px var(--gutter-mobile) 52px; }
  .closer__headline { font-size: 42px; }
  .closer__actions { width: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .closer__actions .btn { width: 100%; }
}

/* =====================================================================
   BET CHECK SCREEN
   ===================================================================== */
.bc-hero {
  position: relative;
  overflow: hidden;
  padding: 40px var(--gutter-desktop) 44px;
  background: linear-gradient(112deg, #10252C 0%, #0E1A24 54%, #0B0F16 100%);
}
.bc-hero__seam {
  position: absolute; left: 44%; top: -10%; bottom: -10%; width: 3px;
  transform: skewX(-9deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(168, 244, 255, .7) 40%, rgba(0, 224, 255, 0));
  box-shadow: 0 0 40px rgba(0, 224, 255, .45);
  pointer-events: none;
}
.bc-hero__eyebrow {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.bc-hero__label {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: .28em;
  color: var(--live);
  white-space: nowrap;
}
.bc-hero__headline {
  position: relative;
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: .94;
  letter-spacing: -.008em;
  color: var(--text-hi);
}
.bc-hero__sub {
  position: relative;
  margin-top: var(--sp-6);
  font-size: 17px;
  color: var(--text-mute);
  max-width: 60ch;
}

/* The composed seam input panel: the API takes a structured bet
   (date/away/home/side/price -- "team-name resolution is the client's
   job", docs/API_CONTRACTS.md), so the canvas's single field is composed
   here from the real fields rather than faked behind a parser that does
   not exist. */
.bc-form {
  position: relative;
  margin-top: var(--sp-11);
  display: flex; align-items: stretch; gap: var(--sp-9);
  flex-wrap: wrap;
}
.bc-form__field {
  flex: 1 1 520px; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-7);
  min-height: 74px; padding: 12px 26px;
  --r: var(--r-panel);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
  transition: box-shadow var(--dur-ring-bloom) ease;
  flex-wrap: wrap;
}
.bc-form__field:hover, .bc-form__field:focus-within {
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .75), 0 0 40px -8px rgba(0, 224, 255, .35);
}
.bc-form__bullet { flex: none; width: 15px; height: 15px; border: 2px solid var(--live); border-radius: 50%; }
.bc-form__part { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-form__part label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bc-form__part input, .bc-form__part select {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-hi);
  min-width: 0;
}
.bc-form__part select option { background: var(--rail); }
.bc-form__part--team input { width: 4.5ch; text-transform: uppercase; }
.bc-form__part--price input { width: 6ch; font-family: var(--font-mono); font-size: 20px; }
.bc-form__part--date input { width: 15ch; font-family: var(--font-mono); font-size: 16px; }
.bc-form__part--side select { width: 8ch; }
.bc-form__submit { flex: none; align-self: stretch; }
.bc-form__submit .btn { height: 100%; padding: 22px 34px; font-size: 18px; letter-spacing: .16em; --r: var(--r-btn); }
.bc-hero__hint {
  position: relative;
  margin-top: var(--sp-7);
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .12em;
  color: var(--text-faint);
}
@media (max-width: 899px) {
  .bc-hero { padding: 26px var(--gutter-mobile) 30px; }
  .bc-hero__headline { font-size: 40px; }
  .bc-form { flex-direction: column; gap: var(--sp-6); }
  .bc-form__field { flex: none; }
  .bc-form__submit .btn { width: 100%; height: 56px; padding: 0; }
}

.bc-skeleton { padding: 40px var(--gutter-desktop) var(--sp-16); display: flex;
  flex-direction: column; gap: var(--sp-7); }
@media (max-width: 899px) { .bc-skeleton { padding: 26px var(--gutter-mobile) var(--sp-13); } }

.bc-block {
  position: relative;
  padding: 22px 26px;
  --r: var(--r-panel);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px var(--edge-1);
}
.bc-block__head {
  display: flex; align-items: baseline; gap: var(--sp-5);
  margin-bottom: var(--sp-7);
  white-space: nowrap;
}
.bc-block__no {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .1em;
  color: var(--text-ghost);
}
.bc-block__title {
  flex: none;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .24em;
  color: var(--text-mute);
}
.bc-block__title--live { color: var(--live); }
.bc-block__title--risk { color: var(--money-lit); }
.bc-block__hair { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .09), transparent); }
.bc-block__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .12em; color: var(--text-ghost);
}
/* A meta line that follows a panel rather than sitting in the head row
   needs its own air; without it the last line crowds the block edge. */
.bc-block > .bc-block__meta { display: block; margin-top: var(--sp-6); }
.bc-block > .bc-block__meta + .bc-block__meta { margin-top: var(--sp-3); }
.bc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }
@media (max-width: 899px) { .bc-pair { grid-template-columns: minmax(0, 1fr); } }

.bc-block--case { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .22); }
.bc-block--case::after,
.bc-block--counter::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.bc-block--case::after { background: var(--live); }
.bc-block--counter { box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .22); }
.bc-block--counter::after { background: var(--money); }

.bc-lines { display: flex; flex-direction: column; }
.bc-line {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: 10px 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-2);
}
.bc-line:last-child { box-shadow: none; }
.bc-line__mark {
  flex: none; margin-top: 3px;
  width: 16px; height: 16px;
  --r: var(--r-marker);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
}
.bc-line__mark--yes { background: rgba(0, 224, 255, .18); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .6); color: var(--live-lit); }
.bc-line__mark--no { background: rgba(255, 61, 87, .16); box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .55); color: var(--money-soft); }
.bc-line__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .1em;
  color: var(--text-faint);
  align-self: center;
}

/* 01 YOUR BET */
.bc-yourbet__figure {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(44px, 5vw, 68px);
  line-height: .86;
  letter-spacing: -.012em;
  color: var(--text-hi);
}
.bc-yourbet__row {
  display: flex; align-items: center; gap: var(--sp-7);
  margin-top: var(--sp-7); flex-wrap: wrap;
}
.bc-yourbet__price {
  font-family: var(--font-mono);
  font-size: 34px; font-weight: 400; letter-spacing: -.03em;
  color: var(--text);
}
.bc-yourbet__meta {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .14em; color: var(--text-faint);
}

/* 04 PRICE CHECK -- the money moment, one per screen */
.bc-price {
  position: relative;
  overflow: hidden;
  padding: 24px 30px;
  --r: var(--r-lg);
  background: linear-gradient(112deg, rgba(255, 61, 87, .3) 0%, rgba(255, 61, 87, .07) 46%, rgba(255, 255, 255, .02) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .4);
}
.bc-price::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--money), var(--money-2));
}
.bc-price__row {
  position: relative;
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-9) var(--sp-12);
}
.bc-price__figure {
  flex: none;
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(86px, 10.4vw, 150px);
  line-height: .76;
  letter-spacing: -.025em;
  color: #FFFFFF;
  text-shadow: 0 10px 54px rgba(255, 61, 87, .5);
}
.bc-price__cell { flex: none; padding-bottom: 14px; }
.bc-price__cell-label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .2em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: var(--sp-3);
  white-space: nowrap;
}
.bc-price__cell-value {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 300; letter-spacing: -.03em;
  color: var(--text-2);
}
.bc-price__cell-value--struck { text-decoration: line-through; color: rgba(255, 255, 255, .38); }
.bc-price__spacer { flex: 1; min-width: 12px; }
.bc-price__aside { flex: none; padding-bottom: 14px; text-align: right; }
.bc-price__aside-meta {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .45);
}
/* The API's own explanation of what the price figures mean is prose, so
   it sits BELOW the money panel in body type -- never inside it as low-
   contrast mono, where the thing that keeps the number honest becomes
   the least readable text on the screen. */
.price-note {
  margin-top: var(--sp-6);
  padding: var(--sp-7) var(--sp-8);
  --r: var(--r-badge);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px var(--edge-1);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 900px;
}
.price-note__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em;
  color: var(--text-faint);
}

/* 05/06 strongest + weakest */
.bc-quote {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.02;
  color: var(--text-hi);
}
.bc-quote + p { margin-top: var(--sp-5); font-size: 16px; color: var(--text-mute); }

/* 08 historical support meter */
.meter { display: flex; gap: var(--sp-3); }
.meter__seg {
  --r: var(--r-badge);
  height: 8px; flex: 1;
  background: rgba(255, 255, 255, .1);
}
.meter__seg--on { background: linear-gradient(120deg, var(--live), var(--live-2)); }
.meter__value {
  margin-top: var(--sp-6);
  display: flex; align-items: baseline; gap: var(--sp-7); flex-wrap: wrap;
}
.meter__label {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800; font-size: 30px;
  color: var(--text-hi);
}
.meter__scale {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em; color: var(--text-faint);
}

/* 09 evidence ladder */
.ladder { display: flex; flex-direction: column; gap: var(--sp-4); }
.ladder__rung { display: flex; align-items: center; gap: var(--sp-5); }
.ladder__bar { flex: none; width: 26px; height: 5px; background: rgba(255, 255, 255, .14); --r: 2px; }
.ladder__name {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .2em;
  color: var(--text-faint);
}
.ladder__rung--on .ladder__bar { background: linear-gradient(120deg, var(--live), var(--live-2)); }
.ladder__rung--on .ladder__name { color: var(--text); }
.ladder__current {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em; color: var(--live);
}

/* 10 bottom line */
.bc-bottom__text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-hi);
}
.bc-bottom__actions { display: flex; align-items: center; gap: var(--sp-7);
  margin-top: var(--sp-10); flex-wrap: wrap; }
.bc-bottom__note {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em; color: var(--text-faint);
}
/* The recommendation line is the LAST thing in the skeleton and it is
   permanently null on purpose (Ranker Engine 2 is gated). It gets its
   own air rather than being crushed against the block edge -- a field
   that says "we do not do that" still has to be readable. */
.bc-block > .bc-bottom__note { display: block; margin-top: var(--sp-7); }
@media (max-width: 899px) {
  .bc-bottom__actions .btn { width: 100%; }
}

/* =====================================================================
   GAME VIEW -- Quick, with Advanced APPENDED beneath (never replacing)
   ===================================================================== */
.gv-head {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px var(--gutter-desktop);
}
.gv-head__half { position: absolute; inset: 0; }
.gv-head__half--a { clip-path: polygon(0 0, 56% 0, 40% 100%, 0 100%); background: var(--team-a); }
.gv-head__half--b { clip-path: polygon(56% 0, 100% 0, 100% 100%, 40% 100%); background: var(--team-b); }
.gv-head__row { position: relative; display: flex; align-items: center; gap: var(--sp-9); }
.gv-head__side { flex: 1; min-width: 0; }
.gv-head__side--home { text-align: right; }
.gv-head__wordmark {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: .86;
  letter-spacing: -.012em;
  color: #FFFFFF;
}
.gv-head__rule {
  width: 92px; height: 6px; margin-top: 10px; transform: skewX(-18deg);
  background: linear-gradient(90deg, var(--rule-a, var(--text-mute)), transparent);
}
.gv-head__side--home .gv-head__rule {
  margin: 10px 0 0 auto;
  background: linear-gradient(270deg, var(--rule-b, var(--text-mute)), transparent);
}
.gv-head__line {
  display: flex; align-items: baseline; gap: var(--sp-6);
  margin-top: 12px; white-space: nowrap;
}
.gv-head__side--home .gv-head__line { justify-content: flex-end; }
.gv-head__record { font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: .06em; color: #EAF1FF; }
.gv-head__probable { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  color: rgba(234, 241, 255, .55); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .gv-head { min-height: 150px; padding: 16px var(--gutter-mobile); }
  .gv-head .hero__eyebrow { padding: 0 0 10px; }
  .gv-head .hero__kicker { font-size: 12.5px; letter-spacing: .16em;
    overflow: hidden; text-overflow: ellipsis; }
  .gv-head__half--a { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 74%); }
  .gv-head__half--b { clip-path: polygon(0 74%, 100% 62%, 100% 100%, 0 100%); }
  .gv-head__row { gap: var(--sp-5); }
  .gv-head__wordmark { font-size: 34px; letter-spacing: -.012em; }
  .gv-head__rule { display: none; }
  .gv-head__record { font-size: 14.5px; }
  .gv-head__probable { font-size: 12.5px; }
}

.gv-back { margin-bottom: var(--sp-3); }
.gv-body { padding: 26px var(--gutter-desktop) var(--sp-16); display: flex;
  flex-direction: column; gap: var(--sp-7); }
@media (max-width: 899px) { .gv-body { padding: 20px var(--gutter-mobile) var(--sp-13); } }

.gv-panel {
  position: relative;
  padding: 22px 26px;
  --r: var(--r-panel);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px var(--edge-1);
}
.gv-panel__title {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .24em;
  color: var(--live);
  margin-bottom: var(--sp-7);
}
.gv-panel__title--risk { color: var(--money-lit); }
.gv-panel__title--mute { color: var(--text-mute); }
.gv-panel--risk { box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .24); }
.gv-panel--risk::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--money), transparent);
}
.gv-panel--case { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .22); }
.gv-panel__body { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.gv-panel__meta {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .14em; color: var(--text-faint);
}
.gv-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 899px) { .gv-trio { grid-template-columns: minmax(0, 1fr); } }

.gv-toggle {
  width: 100%;
  padding: 20px;
  --r: var(--r-panel);
  background: linear-gradient(112deg, rgba(0, 224, 255, .14), rgba(0, 224, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3);
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: .18em;
  color: var(--live-lit);
  transition: filter var(--dur-hover-lift) ease, transform var(--dur-hover-lift) ease;
}
.gv-toggle:hover { filter: brightness(1.12); transform: translateY(-2px); }
.gv-toggle__note {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .16em; color: var(--text-ghost);
}

.gv-adv { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-6); }
.gv-adv__block {
  --r: var(--r-panel);
  background: linear-gradient(150deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px var(--edge-1);
  padding: 20px 24px;
}
.gv-adv__head {
  display: flex; align-items: baseline; gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.gv-adv__no { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-ghost); }
.gv-adv__title {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: .24em; color: var(--text-3);
}
.gv-adv__hair { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .09), transparent); }
.gv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.gv-stat {
  padding: 12px 14px;
  --r: var(--r-badge);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.gv-stat__label {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}
.gv-stat__value { font-family: var(--font-mono); font-size: 20px; color: var(--text); }
.gv-stat__n {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .08em; color: var(--text-ghost);
}
.gv-subhead {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--text-mute);
  margin-bottom: var(--sp-5);
}
.gv-adv__note { margin-top: var(--sp-6); font-size: 14.5px; color: var(--text-dim); }
.gv-appendix > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
}
.gv-appendix__body { margin-top: var(--sp-6); }

/* ---- games slate list (Track-1 GAMES destination; no artboard exists
   for the list itself, so it reuses the Gameday tile as a grid) -------*/
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(298px, 1fr));
  gap: 18px;
  padding: 0 var(--gutter-desktop) var(--sp-16);
}
.games-grid .tile { width: auto; }
@media (max-width: 899px) {
  .games-grid { grid-template-columns: minmax(0, 1fr); gap: 12px;
    padding: 0 var(--gutter-mobile) var(--sp-13); }
  .games-grid .tile { width: auto; height: 172px; }
}
.games-toolbar { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  /* top padding is not decoration: with the panel chrome gone the "SLATE
     DATE" label is the first ink on the screen and was clipped by the
     shell's own top edge. */
  padding: var(--sp-7) var(--gutter-desktop) var(--sp-9); }
/* The slate picker was a bare browser date input in a boxed panel -- an OS
   control sitting on a broadcast-styled board. Same treatment the Odds
   date bar already uses: no panel chrome, label above, the control itself
   carrying the product's surface and mono face. */
.games-toolbar .field-form { padding: 0; background: none; box-shadow: none;
  /* the element still carries .chamfer, whose clip-path cut the corner off
     the "SLATE DATE" label once the panel padding that used to hold it
     clear was gone -- no chrome left to chamfer, so drop the clip */
  clip-path: none;
  align-items: flex-end; gap: var(--sp-5); }
.games-toolbar .field-row { min-width: 0; gap: var(--sp-3); }
.games-toolbar .field-row label { font-family: var(--font-display); font-size: 12.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v-t5); }
.games-toolbar .field-row input[type="date"] {
  background: var(--v-s1); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-t1);
  padding: 10px 13px; font-family: var(--font-mono); font-size: 14.5px; --r: var(--r-chip);
}
.games-toolbar .field-row input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .55; cursor: pointer;
}
.games-toolbar .field-row input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

@media (max-width: 899px) { .games-toolbar { padding: 0 var(--gutter-mobile) var(--sp-7); } }

.odds-game__back, .gv-back {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute);
}

/* =====================================================================
   ODDS V2 -- MARKET BOARD
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html'
   section 06 ("ODDS BOARD -- THE CENTREPIECE", V2-02 desktop 1280x1460
   and V2-23 mobile 390x844). Scoped entirely to the `ov2-` prefix and
   web/js/odds.js's markup -- nothing here touches another screen's
   classes, and every color reads from the --v-* tokens added to
   tokens.css rather than V1's unprefixed ones, so this section can be
   graded against its own artboard in isolation.

   THREE BOARD VARIANTS, one modifier class each on .ov2-game:
     .ov2-game--full      consensus present -- cyan-tinted consensus panel
     .ov2-game--thin      consensus null, reason given -- amber accent rail
     .ov2-game--no-board  board_available:false -- neutral, no accent
   ===================================================================== */

.ov2-datebar {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: 0 var(--gutter-desktop) var(--sp-9);
}
.ov2-datebar__label {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--v-t5);
}
.ov2-datebar input[type="date"] {
  background: var(--v-s1);
  box-shadow: inset 0 0 0 1px var(--v-edge);
  color: var(--v-t1);
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  --r: var(--r-chip);
}
@media (max-width: 899px) { .ov2-datebar { padding: 0 var(--gutter-mobile) var(--sp-7); } }

/* ---- slate summary ---------------------------------------------------*/
.ov2-summary { margin-bottom: var(--sp-11); padding: var(--sp-10) var(--sp-11); }
.ov2-summary__headline {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -.006em;
  color: var(--v-t0);
}
.ov2-summary__body {
  margin-top: var(--sp-6);
  font-size: 16px; line-height: 1.55; color: var(--v-t4);
  max-width: 640px;
}
.ov2-summary__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  margin-top: var(--sp-10);
}
.ov2-stat {
  flex: 1 1 190px; min-width: 170px;
  position: relative;
  padding: 13px 15px;
  --r: var(--r-badge);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ov2-stat--accent {
  background: linear-gradient(150deg, rgba(0, 224, 255, .11), rgba(255, 255, 255, .014));
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3);
}
.ov2-stat__label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  color: var(--v-live-label);
  margin-bottom: var(--sp-3);
}
.ov2-stat--accent .ov2-stat__label { color: var(--v-live-label); }
.ov2-stat:not(.ov2-stat--accent) .ov2-stat__label { color: var(--v-t6); }
.ov2-stat__row { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.ov2-stat__figure {
  font-family: var(--font-mono);
  font-size: 26px; color: var(--v-live-lit);
  line-height: 1;
}
.ov2-stat:not(.ov2-stat--accent) .ov2-stat__figure { color: var(--v-t1); }
.ov2-stat__figure--text {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 21px; letter-spacing: -.006em;
}
.ov2-stat__sample { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--v-t7); }

.ov2-legend {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-9);
}
.ov2-legend__item { display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--v-t4); }
.ov2-legend__swatch { width: 11px; height: 11px; --r: 3px; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ov2-legend__swatch--money { background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); }
.ov2-legend__swatch--warn { background: rgba(255, 176, 32, .4); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .6); }

.ov2-freshness {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-8);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .09em; color: var(--v-live-label);
}
.ov2-freshness__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--v-live);
  animation: gbreathe var(--dur-gbreathe) ease-in-out infinite;
}

/* ---- game list / cards ------------------------------------------------*/
.ov2-list { display: flex; flex-direction: column; gap: var(--sp-9); padding-bottom: var(--sp-13); }

.ov2-game { padding: 0; }
.ov2-game--thin {
  background: linear-gradient(180deg, rgba(255, 176, 32, .05), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .22);
}
.ov2-game--thin::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2));
}
.ov2-game--no-board {
  background: linear-gradient(150deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
}

.ov2-game__head {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-8) var(--sp-10) var(--sp-7);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.ov2-badge {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
}
.ov2-matchup {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 800;
  color: var(--v-t0); white-space: nowrap;
}
.ov2-matchup__at { color: rgba(255, 255, 255, .32); font-size: 18px; }
.ov2-clock { font-family: var(--font-mono); font-size: 13px; letter-spacing: .09em; color: var(--v-live); white-space: nowrap; }
.ov2-spacer { flex: 1; min-width: 8px; }
.ov2-bookcount {
  flex: none;
  padding: 5px 11px;
  --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .13em;
  color: var(--v-t2); white-space: nowrap;
}
.ov2-captured {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--v-live);
  white-space: nowrap;
}
.ov2-captured__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--v-live);
  animation: gbreathe var(--dur-gbreathe) ease-in-out infinite;
}

.ov2-body { position: relative; padding: var(--sp-9) var(--sp-10) var(--sp-8); }

/* ---- alert (thin board) and no-board statement ------------------------*/
.ov2-alert {
  padding: var(--sp-8) var(--sp-9);
  --r: var(--r-tile);
  background: rgba(255, 176, 32, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .26);
  margin-bottom: var(--sp-8);
}
.ov2-alert__head { display: flex; align-items: flex-start; gap: var(--sp-5); }
.ov2-alert__mark {
  flex: none; margin-top: 2px; width: 19px; height: 19px;
  --r: var(--r-marker);
  background: rgba(255, 176, 32, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; color: var(--v-warn); line-height: 1;
}
.ov2-alert__copy { flex: 1; min-width: 220px; }
.ov2-alert__title { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--v-warn-label); margin-bottom: var(--sp-3); }
/* The artboard's own verbatim line ("Three books is not a market. We
   won't average it.") -- the primary headline of this block, sized like
   its V2-02 source (23px/700/1.24). Our own longer explanation (below)
   is the secondary line underneath it. */
.ov2-alert__headline {
  font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.24;
  color: var(--v-t1); margin-bottom: var(--sp-3);
}
.ov2-alert__body { font-size: 14.5px; line-height: 1.5; color: var(--v-t3); margin-bottom: var(--sp-3); max-width: 520px; }
.ov2-alert__reason { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; color: var(--v-warn-lit); }

.ov2-noboard__title {
  font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.24;
  color: var(--v-t1); margin-bottom: var(--sp-3);
}
.ov2-noboard__body { font-size: 15px; line-height: 1.55; color: var(--v-t4); max-width: 620px; margin-bottom: var(--sp-8); }
.ov2-noboard__fields {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-6);
  max-width: 420px;
}
.ov2-noboard__key { font-family: var(--font-mono); font-size: 13px; color: var(--v-t6); }
.ov2-noboard__val { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t3); word-break: break-word; }
.ov2-noboard__note {
  margin-top: var(--sp-8);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; line-height: 1.7; color: var(--v-t7);
}

/* ---- best-price / consensus panels ------------------------------------*/
.ov2-panels { display: flex; gap: var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.ov2-panel {
  flex: 1 1 240px; min-width: 220px;
  position: relative;
  padding: var(--sp-8) var(--sp-9);
  --r: var(--r-tile);
}
.ov2-panel--best {
  background: linear-gradient(150deg, rgba(255, 61, 87, .13), rgba(255, 255, 255, .014));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .3);
}
.ov2-panel--best::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--v-money), var(--v-money-2));
}
.ov2-panel--consensus {
  background: linear-gradient(150deg, rgba(0, 224, 255, .09), rgba(255, 255, 255, .014));
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .26);
  flex-basis: 100%;
}
.ov2-panel--consensus::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--v-live), transparent);
}
.ov2-panel__label {
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .16em;
  margin-bottom: var(--sp-6); white-space: nowrap;
}
.ov2-panel--best .ov2-panel__label { color: var(--v-money-label); }
.ov2-panel--consensus .ov2-panel__label { color: var(--v-live-label); }
.ov2-panel__price {
  font-family: var(--font-display); font-style: italic; font-size: clamp(34px, 4vw, 48px); font-weight: 800;
  line-height: .8; letter-spacing: -.022em; color: #FFF; margin-bottom: var(--sp-6);
}
.ov2-panel__books { display: flex; flex-direction: column; gap: var(--sp-2); }
.ov2-panel__book { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .02em; color: var(--v-money-label); }
.ov2-panel__empty { font-size: 14.5px; color: var(--v-t4); }
.ov2-panel__sample { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--v-live-label); }

.ov2-consensus-cols { display: flex; gap: var(--sp-9); flex-wrap: wrap; }
.ov2-consensus-col { flex: 1 1 180px; min-width: 160px; }
.ov2-consensus-col__side {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--v-t3); margin-bottom: var(--sp-3);
}
.ov2-consensus-col__price {
  font-family: var(--font-display); font-style: italic; font-size: 34px; font-weight: 800; line-height: .84;
  letter-spacing: -.018em; color: #FFF; margin-bottom: var(--sp-3);
}
.ov2-consensus-col__meta { font-family: var(--font-mono); font-size: 13px; color: var(--v-t2); margin-top: 2px; }

.ov2-spreadline {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--v-t3);
  margin-bottom: var(--sp-8);
}

/* ---- raw board table ---------------------------------------------------*/
.ov2-table-wrap { overflow-x: auto; }
/* Desktop always shows every row (no truncation, no toggle) -- the
   tap-to-expand line only exists at <=899px; see the mobile block below. */
.ov2-more { display: none; border: 0; cursor: pointer; }
.ov2-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.ov2-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ov2-table thead th {
  padding: 9px 12px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .11);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--v-t6); text-align: left;
}
.ov2-table thead th:not(:first-child) { text-align: center; }
.ov2-table thead th:last-child { text-align: right; color: var(--v-t7); }
.ov2-table tbody tr { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045); }
/* Row height matches the artboard's own board row exactly: padding:10px
   (V2-02's `data-row`) around a 34px price cell = 54px, not the ~60px a
   plain `<td>` + this project's global 44px button min-height produced
   (base.css: "button, a.btn, .nav-item { min-height: 44px }" -- .ov2-cell
   overrides that below since a dense data-table price cell isn't that
   44px-minimum primary tap target). */
.ov2-table tbody td { padding: 10px 12px; vertical-align: middle; }
.ov2-bookcell { display: flex; align-items: center; gap: var(--sp-4); }
.ov2-bookname { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .02em; color: var(--v-t3); }
.ov2-bookname--stale { color: var(--v-warn-label); }
.ov2-rowflag {
  padding: 3px 8px;
  --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 176, 32, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .4);
  /* 8.5px was below the smallest size anything else on this product uses.
     It is one word now, so it can afford to be readable. */
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--v-warn-label); white-space: nowrap; cursor: help;
}
.ov2-pricecell { text-align: center; }
.ov2-cell {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; height: 34px; min-height: 34px; padding: 0 10px;
  --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: transparent;
  font-family: var(--font-mono); font-size: 16px; font-weight: 400; color: var(--v-t1);
  transition: box-shadow .18s ease, background .18s ease, color .18s ease;
}
.ov2-cell:hover, .ov2-cell:focus-visible {
  background: rgba(0, 224, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .45); color: #FFF;
}
.ov2-pricecell--best .ov2-cell {
  background: linear-gradient(120deg, var(--v-money), var(--v-money-2));
  box-shadow: 0 12px 26px -12px rgba(255, 61, 87, .7);
  font-weight: 700; color: var(--v-money-ink);
}
.ov2-pricecell--best .ov2-cell:hover, .ov2-pricecell--best .ov2-cell:focus-visible {
  background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); color: var(--v-money-ink);
  box-shadow: 0 12px 26px -12px rgba(255, 61, 87, .7), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
/* Stale row, non-best price -- dimmed to the same muted token the
   artboard's own stale row uses (V2-02's mybookieag row: color #5A5E67,
   i.e. --v-t6) rather than the full-weight --v-t1 every other cell reads
   at. A stale row that also happens to tie for best keeps the money
   treatment above -- staleness is a caveat on the number, not a reason
   to hide a price that is still genuinely the best on the board. */
.ov2-pricecell--stale:not(.ov2-pricecell--best) .ov2-cell { color: var(--v-t6); }
.ov2-capturedcell { text-align: right; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--v-t6); white-space: nowrap; }
.ov2-capturedcell--stale { color: var(--v-warn-label); }

/* ---- footer actions ----------------------------------------------------*/
.ov2-actions {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-8) var(--sp-10);
  background: rgba(255, 255, 255, .022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ov2-disclaimer {
  padding: 0 var(--sp-10) var(--sp-8);
  font-size: 13.5px; line-height: 1.5; color: var(--v-t6);
}
.ov2-footnote {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; line-height: 1.7; color: var(--v-t7);
  max-width: 900px;
}

/* ---- 899px and below: the V2-23 mobile spec ---------------------------*/
@media (max-width: 899px) {
  .ov2-summary { padding: var(--sp-8); margin-bottom: var(--sp-9); }
  .ov2-summary__stats { gap: var(--sp-5); }
  .ov2-stat { flex: 1 1 140px; }
  .ov2-game__head { padding: var(--sp-7) var(--sp-8) var(--sp-6); gap: var(--sp-4); }
  .ov2-badge { width: 24px; height: 24px; font-size: 12px; }
  .ov2-matchup { font-size: 18px; gap: var(--sp-3); }
  .ov2-matchup__at { font-size: 15px; }
  .ov2-body { padding: var(--sp-7) var(--sp-8) var(--sp-6); }
  .ov2-panels { gap: var(--sp-5); }
  .ov2-panel { padding: var(--sp-6) var(--sp-7); flex: 1 1 100%; }
  .ov2-panel__price { font-size: 32px; }
  .ov2-consensus-cols { gap: var(--sp-6); }
  /* V2-23 mobile spec: "book key left, two prices right at 56px each" --
     the captured-at column is dropped here (the header's own CAPTURED
     chip and the per-row stale flag still carry that information) rather
     than left to a horizontal scroll a static screenshot can't show. */
  .ov2-table { min-width: 0; width: 100%; table-layout: fixed; }
  .ov2-table th:nth-child(4), .ov2-table td:nth-child(4) { display: none; }
  .ov2-table th:nth-child(2), .ov2-table th:nth-child(3),
  .ov2-table td:nth-child(2), .ov2-table td:nth-child(3) { width: 56px; }
  .ov2-table thead th, .ov2-table tbody td { padding: 7px 6px; }
  .ov2-bookcell { flex-wrap: wrap; row-gap: 4px; }
  .ov2-bookname { font-size: 13px; }
  .ov2-cell { min-width: 56px; width: 100%; height: 32px; min-height: 32px; font-size: 15px; padding: 0 4px; }
  .ov2-actions { padding: var(--sp-6) var(--sp-8); }
  .ov2-actions .btn { flex: 1 1 auto; }
  .ov2-disclaimer { padding: 0 var(--sp-8) var(--sp-6); }

  /* V2-23: the raw board truncates to its first 5 rows with a
     tap-to-expand line below it -- desktop (outside this media query)
     always shows every row, per .ov2-table-wrap's base (unset) state. */
  .ov2-table tbody tr.ov2-row--extra { display: none; }
  .ov2-table-wrap.ov2-table-wrap--expanded tbody tr.ov2-row--extra { display: table-row; }
  .ov2-more {
    display: block; width: 100%; margin-top: var(--sp-4);
    padding: var(--sp-5) 6px; background: none; text-align: left;
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--v-t5);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045);
  }
  .ov2-table-wrap--expanded .ov2-more { display: none; }
}

/* =====================================================================
   SHARED STATES
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html'
   lines 6084-6437 (V2-27 LOADING, V2-28 EMPTY, V2-29 UNAVAILABLE,
   V2-30 ERROR). Backs web/js/states.js -- every V2 screen mounts one of
   these into its own host rather than inventing its own skeleton/empty/
   unavailable/error markup. Scoped to the `vst-` prefix; every color
   reads from --v-* tokens, never a V1 unprefixed one. Amber (--v-warn-*)
   throughout for the caution/unavailable states, per the V2 token
   bridge's rule that red stays reserved for a genuinely better price or
   the one primary action per region.
   ===================================================================== */

.vst-panel {
  padding: 30px 34px 28px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.vst-eyebrow { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-8); white-space: nowrap; }
.vst-eyebrow__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.vst-dot--live { background: var(--v-live); animation: gbreathe var(--dur-gbreathe) ease-in-out infinite; }
.vst-dot--warn { background: var(--v-warn); }
.vst-eyebrow__text {
  flex: none; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--v-live-label);
}
.vst-panel--unavailable .vst-eyebrow__text, .vst-panel--error .vst-eyebrow__text { color: var(--v-warn-label); }
.vst-eyebrow__rule { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), transparent); }

.vst-headline {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(26px, 3.2vw, 42px); line-height: .95; letter-spacing: -.006em;
  color: var(--v-t0); max-width: 640px;
}
.vst-headline--warn { color: var(--v-t0); }
.vst-body { margin-top: var(--sp-6); font-size: 16px; line-height: 1.55; color: var(--v-t4); max-width: 620px; }
.vst-body--warn { color: var(--v-warn-lit); }

/* ---- loading skeleton rows ------------------------------------------*/
.vst-skel-rows { margin-top: var(--sp-9); max-width: 820px; }
.vst-skel-row {
  display: flex; align-items: center; gap: var(--sp-6); padding: 11px 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045);
  animation: vst-skelpulse 1.5s ease-in-out infinite;
}
.vst-skel-bar { display: block; background: rgba(255, 255, 255, .09); --r: 2px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.vst-skel-bar--label { width: 120px; height: 11px; flex: none; }
.vst-skel-bar--figure { width: 64px; height: 26px; flex: none; }
.vst-spacer { flex: 1; }
@keyframes vst-skelpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.vst-spinner-row { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-9); flex-wrap: wrap; }
.vst-spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0, 224, 255, .2);
  border-top: 2px solid var(--v-live);
  animation: vst-spin .9s linear infinite;
}
@keyframes vst-spin { to { transform: rotate(360deg); } }
.vst-footnote { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--v-t7); }

/* ---- empty-state tiles -----------------------------------------------*/
.vst-tiles { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-9); max-width: 620px; }
.vst-tile {
  flex: 1 1 170px; padding: 14px 16px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.vst-tile__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--v-t5); margin-bottom: var(--sp-3); }
.vst-tile__value { font-family: var(--font-mono); font-size: 24px; color: var(--v-t1); line-height: 1; }

/* ---- unavailable's "last good capture" box ----------------------------*/
.vst-reasonbox {
  margin-top: var(--sp-9); padding: 16px 19px; max-width: 620px;
  background: rgba(255, 176, 32, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .26), inset 3px 0 0 var(--v-warn);
  --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.vst-reasonbox__label { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .18em; color: var(--v-warn-label); margin-bottom: var(--sp-4); }
.vst-reasonbox__body { font-size: 15px; line-height: 1.5; color: var(--v-warn-lit); }

/* ---- write-error's support reference box ------------------------------*/
.vst-refbox {
  margin-top: var(--sp-9); padding: 13px 16px; max-width: 620px;
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.vst-refbox__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--v-t5); }
.vst-refbox__value { font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; color: var(--v-t3); }

/* ---- shared action row -------------------------------------------------*/
.vst-actions { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-10); flex-wrap: wrap; }
.vst-actions__note { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--v-t7); }

@media (max-width: 899px) {
  .vst-panel { padding: 24px var(--gutter-mobile) 22px; }
  .vst-headline { font-size: 30px; }
  .vst-actions { flex-direction: column; align-items: stretch; }
  .vst-actions .btn { width: 100%; }
}

/* =====================================================================
   BET CHECK V2
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html' --
   V2-04 (desktop ten-block skeleton, lines 3017-3391), V2-24 (mobile, all
   ten blocks as peers, lines 5738-5843), V2-25 (blocks 05/06/08/09's
   usual NOT YET AVAILABLE render, lines 5846-5941) and V2-26 (free checks
   used up / 402, lines 5941-6032). Backs web/js/betcheck.js -- scoped to
   the `bc2-` prefix (V1's Bet Check screen keeps its own `bc-` prefix,
   above, untouched -- see the V1->V2 replacement rule in design/
   linehound-v2/IMPLEMENTATION_PLAN.md: it is left in place, unreferenced,
   until a later pass removes it in the same commit that drops its last
   V1 caller). --v-* tokens only. Block 01's Featured Bet hero (V2-32)
   is `.fb-*`, defined in the FEATURED BET -- primitive section above;
   nothing here duplicates it.
   ===================================================================== */

.bc2-screen { padding: var(--sp-13) var(--gutter-desktop) var(--sp-16); }

.bc2-layout { display: flex; align-items: flex-start; gap: var(--sp-11); }

/* ---- ticket: sticky left column on desktop ----------------------------*/
.bc2-ticket {
  flex: none; width: 360px;
  position: sticky; top: var(--sp-11);
  padding: var(--sp-10) var(--sp-10) var(--sp-9);
}
.bc2-ticket__eyebrow {
  position: relative;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .19em;
  color: var(--v-live-label); margin-bottom: var(--sp-7);
}
.bc2-ticket__summary {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  margin-bottom: var(--sp-7);
  background: rgba(10, 10, 11, .5);
  box-shadow: inset 0 0 0 1px var(--v-edge);
  --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.bc2-ticket__summary-text {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 14.5px; color: var(--v-t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc2-ticket__edit {
  flex: none;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--v-live); background: none; border: 0; cursor: pointer; min-height: 0; padding: var(--sp-2);
}
.bc2-ticket__field {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  padding: var(--sp-7);
  margin-bottom: var(--sp-7);
  background: rgba(10, 10, 11, .55);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .32);
  --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.bc2-ticket__part { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bc2-ticket__part label {
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .13em;
  color: var(--v-t6);
}
/* Real form-control geometry: a visible field with its own height and
   padding (not just bare text on the panel background), plus a genuine
   focus ring -- `outline: none` alone with nothing replacing it is an
   accessibility and a "does this thing actually take input" regression. */
.bc2-ticket__part input, .bc2-ticket__part select {
  background: rgba(255, 255, 255, .05); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  padding: 9px 10px; height: 38px; --r: 6px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  font-family: var(--font-mono); font-size: 16px; color: var(--v-t1);
  transition: box-shadow var(--dur-hover-lift, 150ms) ease;
}
.bc2-ticket__part input::placeholder { color: var(--v-t6); }
.bc2-ticket__part input:hover, .bc2-ticket__part select:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.bc2-ticket__part input:focus, .bc2-ticket__part select:focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--v-live), 0 0 0 3px rgba(0, 224, 255, .22);
  background: rgba(0, 224, 255, .06);
}
.bc2-ticket__part select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--v-t4) 50%), linear-gradient(135deg, var(--v-t4) 50%, transparent 50%);
  background-position: right 9px top 16px, right 4px top 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bc2-ticket__part--team input { width: 6ch; text-transform: uppercase; }
.bc2-ticket__part--price input { width: 7.5ch; }
.bc2-ticket__part--date input { width: 15ch; }
.bc2-ticket__part--side select { width: 9ch; padding-right: 20px; }
.bc2-ticket__submit { width: 100%; height: 54px; font-size: 16px; font-weight: 800; letter-spacing: .15em; margin-bottom: var(--sp-8);
  box-shadow: 0 10px 30px -12px rgba(255, 61, 87, .55); }
.bc2-ticket__foot {
  position: relative;
  margin-top: var(--sp-8); padding-top: var(--sp-7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.7; color: var(--v-t7);
}

/* ---- free-check meter, inside the ticket ------------------------------*/
.bc2-freemeter { position: relative; margin-bottom: var(--sp-8); }
.bc2-freemeter__row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.bc2-freemeter__label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .15em; color: var(--v-live-label); white-space: nowrap; }
.bc2-freemeter__spacer { flex: 1; }
.bc2-freemeter__note { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t7); white-space: nowrap; }
.bc2-freemeter__static { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t6); }
.bc2-freebar { display: flex; gap: 7px; }
.bc2-freebar__seg { flex: 1; height: 8px; --r: 2px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .08); }
.bc2-freebar__seg--on { background: linear-gradient(90deg, var(--v-live), var(--v-live-2)); }

/* ---- results column ---------------------------------------------------*/
.bc2-results { flex: 1; min-width: 0; }
.bc2-empty {
  padding: var(--sp-12) var(--sp-11);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.bc2-empty__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--v-t1); margin-bottom: var(--sp-5); }
.bc2-empty__body { font-size: 15px; line-height: 1.55; color: var(--v-t4); max-width: 480px; }

/* The knowledge-grade legend under the Games grid (src/analysis/grade.py). */
.games-grade-legend { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-7); }
.games-grade-legend__line { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--text-mute); max-width: 70ch; }

.bc2-blocks { display: flex; flex-direction: column; gap: var(--sp-8); }
.bc2-note {
  padding: var(--sp-7) var(--sp-8);
  background: rgba(0, 224, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .22);
  font-size: 14.5px; line-height: 1.5; color: var(--v-live-lit);
}

/* ---- block chrome: numbered, titled, hairlined ------------------------*/
.bc2-block {
  position: relative;
  padding: var(--sp-9) var(--sp-10);
  background: linear-gradient(150deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.bc2-block--case { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .22); }
.bc2-block--case::before,
.bc2-block--counter::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.bc2-block--case::before { background: var(--v-live); }
.bc2-block--counter {
  background: linear-gradient(150deg, rgba(255, 61, 87, .1), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .26);
}
.bc2-block--counter::before { background: linear-gradient(180deg, var(--v-money), var(--v-money-2)); }
.bc2-block--na {
  background: linear-gradient(150deg, rgba(255, 176, 32, .07), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .24);
}
.bc2-block--na::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2));
}

.bc2-block__head { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.bc2-block__no { font-family: var(--font-mono); font-size: 13px; letter-spacing: .09em; color: var(--v-t7); }
.bc2-block__title { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--v-t2); white-space: nowrap; }
.bc2-block--counter .bc2-block__title { color: var(--v-money-label); }
.bc2-block__hair { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent); }
.bc2-block--na .bc2-block__hair { background: linear-gradient(90deg, rgba(255, 176, 32, .2), transparent); }
.bc2-block__meta-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t6); white-space: nowrap; }

.bc2-chip {
  flex: none; padding: 4px 10px;
  --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .13em; white-space: nowrap;
}
.bc2-chip--live { background: rgba(0, 224, 255, .12); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .35); color: var(--v-live-label); }
.bc2-chip--warn { background: rgba(255, 176, 32, .14); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .42); color: var(--v-warn-label); }
.bc2-chip--money { background: rgba(255, 61, 87, .18); box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .45); color: var(--v-money-label); }

.bc2-block__note { position: relative; margin-top: var(--sp-6); font-size: 14.5px; line-height: 1.5; color: var(--v-t3); }
.bc2-block__note--muted { color: var(--v-t5); }
.bc2-block__foot { position: relative; margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.7; color: var(--v-t7); }
.bc2-na__body { position: relative; font-size: 15px; line-height: 1.5; color: var(--v-t4); max-width: 700px; }

/* ---- connector labels between narrative blocks -------------------------*/
.bc2-connector { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-3) 0 var(--sp-3) 17px; }
.bc2-connector__bar { flex: none; width: 1px; height: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)); }
.bc2-connector__text { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .17em; color: var(--v-t6); white-space: nowrap; }

/* ---- support / counterargument lines -----------------------------------*/
.bc2-lines { display: flex; flex-direction: column; }
.bc2-line {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-6);
  padding: var(--sp-6) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .055);
}
.bc2-line:last-child { box-shadow: none; }
.bc2-line__mark {
  flex: none; margin-top: 3px; width: 15px; height: 15px; --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
}
.bc2-line--for .bc2-line__mark { background: rgba(0, 224, 255, .18); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .6); }
.bc2-line--against .bc2-line__mark { background: rgba(255, 61, 87, .18); box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .5); }
.bc2-line__body { flex: 1; min-width: 200px; font-size: 16px; line-height: 1.45; color: var(--v-t2); }
.bc2-line--against .bc2-line__body { color: #F0E4E6; }
.bc2-line__sample {
  flex: none; margin-top: 2px; padding: 4px 10px;
  --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(0, 224, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--v-live-label); white-space: nowrap;
}

/* ---- 01 THE BET: mount point for the Featured Bet hero ------------------*/
.bc2-fbmount { position: relative; margin: 0 calc(-1 * var(--sp-10)) calc(-1 * var(--sp-9)); }

/* ---- 02 THE MARKET ------------------------------------------------------*/
.bc2-market { display: flex; gap: var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.bc2-market__cell {
  flex: 1 1 190px; min-width: 170px;
  padding: var(--sp-8) var(--sp-9);
  --r: var(--r-tile);
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.bc2-market__cell--accent { background: rgba(0, 224, 255, .075); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .26); }
.bc2-market__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--v-t6); margin-bottom: var(--sp-6); }
.bc2-market__cell--accent .bc2-market__label { color: var(--v-live-label); }
.bc2-market__figure { font-family: var(--font-display); font-style: italic; font-size: 36px; font-weight: 800; line-height: .84; color: var(--v-t1); }
/* Block 01's bet, stated in one line -- replaces the Featured Bet tile
 * (2026-09-12). Big enough to read at arm's length; the owner's note on
 * squinting at this product still stands. */
.bc2-bet__line { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 5vw, 34px); font-weight: 800; line-height: 1.05; color: var(--v-t1); }
.bc2-market__cell--accent .bc2-market__figure { color: #FFF; }
.bc2-market__row { display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap; }
.bc2-market__sample { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-live-label); white-space: nowrap; }
.bc2-market__cell--pill { flex-basis: 220px; }
.bc2-market__pill {
  display: inline-flex; align-items: center; gap: var(--sp-5);
  padding: 8px 14px;
  --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--v-t1); white-space: nowrap;
}
.bc2-market__pill-book { font-size: 13px; font-weight: 400; color: var(--v-t5); }
.bc2-market__advantage {
  margin-top: var(--sp-6);
  display: inline-flex; padding: 6px 11px;
  --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: linear-gradient(120deg, var(--v-money), var(--v-money-2));
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--v-money-ink);
  white-space: nowrap;
}

/* ---- 03 THE CASE, empty variant ------------------------------------------*/
.bc2-case__empty { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-8) 0; flex-wrap: wrap; }
.bc2-case__rule { flex: none; width: 30px; height: 2px; background: rgba(255, 255, 255, .22); }
.bc2-case__headline { flex: 1; min-width: 240px; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.28; color: var(--v-t3); }

/* ---- 05 WHAT CHANGED, present variant ------------------------------------*/
.bc2-changed { display: flex; flex-direction: column; }
.bc2-changed__row { padding: var(--sp-6) 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.bc2-changed__row:last-child { box-shadow: none; }
.bc2-changed__meta { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .07em; color: var(--v-t6); }
.bc2-changed__headline { font-size: 15px; line-height: 1.45; color: var(--v-t2); }
.bc2-changed__reaction { margin-top: var(--sp-3); font-size: 13.5px; color: var(--v-t5); }

/* ---- 06 HISTORICAL SUPPORT, present variant ------------------------------*/
.bc2-meterbar { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); max-width: 260px; }
.bc2-meterbar__seg { flex: 1; height: 8px; --r: 2px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .08); }
.bc2-meterbar__seg--on { background: linear-gradient(90deg, var(--v-live), var(--v-live-2)); }

/* ---- 07 EVIDENCE STATUS pill (also used for standalone value pills) -----*/
.bc2-pill {
  display: inline-flex; padding: 6px 13px;
  --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .11em; color: var(--v-t2);
}

/* ---- 10 BOTTOM LINE -------------------------------------------------------*/
.bc2-bottom__text { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--v-t1); }
.bc2-bottom__actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-8); }

/* ---- 402 / 429 walls -------------------------------------------------------*/
.bc2-wall {
  position: relative;
  display: flex; gap: var(--sp-10); flex-wrap: wrap;
  padding: var(--sp-11) var(--sp-11);
  background: linear-gradient(150deg, rgba(255, 176, 32, .07), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .24);
  overflow: hidden;
}
.bc2-wall::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2));
}
.bc2-wall__main { flex: 1 1 440px; min-width: 280px; }
.bc2-wall__eyebrow { display: inline; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--v-warn-label); margin-right: var(--sp-6); }
.bc2-wall__eyebrow-note { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--v-t6); }
.bc2-wall__title { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: .95; color: var(--v-t0); margin-top: var(--sp-7); }
.bc2-wall__body { margin-top: var(--sp-7); font-size: 16px; line-height: 1.55; color: var(--v-warn-lit); max-width: 560px; }
.bc2-wall__actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-9); }
.bc2-wall__fine { margin-top: var(--sp-6); font-size: 13.5px; line-height: 1.5; color: var(--v-t6); max-width: 560px; }
.bc2-wall__still {
  flex: 1 1 260px; min-width: 240px; max-width: 300px;
  position: relative;
  padding: var(--sp-8) var(--sp-9);
  background: rgba(255, 176, 32, .06); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .24);
}
.bc2-wall__still::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2));
}
.bc2-wall__still-label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--v-warn-label); margin-bottom: var(--sp-6); }
.bc2-wall__still-item { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); font-size: 14.5px; color: var(--v-t2); }
.bc2-wall__still-item:last-of-type { box-shadow: none; }
.bc2-wall__still-mark { flex: none; width: 11px; height: 11px; --r: 3px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(0, 224, 255, .16); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .45); }
.bc2-wall__still-foot { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; line-height: 1.6; color: var(--v-t7); }

/* ---- 899px and below: the V2-24 mobile spec ----------------------------*/
@media (max-width: 899px) {
  .bc2-screen { padding: var(--sp-9) var(--gutter-mobile) var(--sp-13); }
  .bc2-layout { flex-direction: column; gap: var(--sp-8); }
  .bc2-ticket { width: 100%; position: static; padding: var(--sp-8) var(--sp-8) var(--sp-7); }

  /* The ticket collapses to a one-line summary bar once a check is in
     flight (V2-24's own mobile note: "ticket panel collapses to a
     summary bar post-submit") -- desktop keeps the full form regardless
     of this modifier, since the rule only exists inside this query. */
  .bc2-ticket--collapsed .bc2-ticket__form,
  .bc2-ticket--collapsed .bc2-ticket__foot,
  .bc2-ticket--collapsed .bc2-freemeter { display: none; }
  .bc2-ticket--collapsed .bc2-ticket__eyebrow { margin-bottom: var(--sp-5); }

  .bc2-ticket__field { gap: var(--sp-5); padding: var(--sp-6); }
  .bc2-market { gap: var(--sp-5); }
  .bc2-market__cell { flex: 1 1 100%; padding: var(--sp-6) var(--sp-7); }
  .bc2-block { padding: var(--sp-7) var(--sp-7); }
  .bc2-connector { padding-left: 12px; }
  .bc2-wall { padding: var(--sp-8); gap: var(--sp-7); }
  .bc2-wall__still { max-width: 100%; flex-basis: 100%; }
}
/* ^ This closing brace was missing (found 2026-09-07 on linehound-staging):
   without it every section below -- GAME QUICK V2, GAME ADVANCED V2,
   GAMEDAY V2, ODDS V2 -- was parsed INSIDE the 899px media query above and
   only applied at phone widths. Desktop rendered Gameday and Game View as
   unstyled text while the rail, top strip and buttons (earlier files)
   looked normal. The sessions that shipped this only ever saw a narrow
   viewport. */
/* =====================================================================
   GAME QUICK V2
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html'
   V2-13 (GAME QUICK · DESKTOP, 1280x1000, lines 4398-4592), V2-14 (GAME
   QUICK · MOBILE, 390x844, lines 4593-4695) and V2-15 (GAME QUICK ·
   UNANNOUNCED STARTER / NO BOARD, 1280x420, lines 4696-4824). Backs
   web/js/games.js's `gqv*` render functions and the V2-34 spotlight
   placement (`.gqv-spotlight` wraps web/js/featuredbet.js's
   `renderFeaturedBet` output -- that component's own `.fb-*` rules
   above are untouched). Scoped entirely to the `gqv-` prefix and
   --v-* tokens, so this section never reaches into the V1 "GAME VIEW"
   section above (still read by web/js/betcheck.js and web/js/today.js's
   shared gv-*/bc-* classes) or into ODDS V2 / FEATURED BET above it.
   ===================================================================== */

.gqv-body { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter-desktop) var(--sp-15); }
.gqv-back {
  display: inline-block; margin: var(--sp-9) 0 var(--sp-7);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--v-t4); text-decoration: none;
}
.gqv-back:hover { color: var(--v-t1); }

/* ---- top strip: eyebrow + captured-time chip -------------------------*/
.gqv-topstrip { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-9); }
.gqv-topstrip__eyebrow {
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .22em;
  color: var(--v-t3); white-space: nowrap;
}
.gqv-topstrip__rule { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, var(--v-edge), transparent); }
.gqv-topstrip__chip {
  flex: none; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--v-t5);
  white-space: nowrap;
}

/* ---- identity: team badges, records, probables, VS -------------------*/
.gqv-identity { padding: var(--sp-10) var(--sp-11); margin-bottom: var(--sp-8); }
.gqv-identity__row { display: flex; align-items: center; gap: var(--sp-9); }
.gqv-team { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.gqv-team--home { align-items: flex-end; text-align: right; }
.gqv-badge {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.gqv-team__name {
  font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 800;
  color: var(--v-t0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.gqv-team__record { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.gqv-team--home .gqv-team__record { justify-content: flex-end; }
.gqv-team__record-figure { font-family: var(--font-mono); font-size: 16px; color: var(--v-t1); }
.gqv-team__n { font-family: var(--font-mono); font-size: 12px; color: var(--v-t7); }
.gqv-team__probable { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--v-t4); }
.gqv-team__probable--absent { color: var(--v-warn-label); }
.gqv-vs {
  flex: none; font-family: var(--font-display); font-style: italic; font-size: 16px; font-weight: 800;
  letter-spacing: .1em; color: var(--v-t6);
}
.gqv-identity__meta {
  margin-top: var(--sp-8); padding-top: var(--sp-7); text-align: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .09em; color: var(--v-live-label);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---- verdict: big word + headline + FINDINGS/EVIDENCE mini tiles -----*/
/* TONIGHT'S PICK -- the first panel on a game screen and the biggest type on
   it. The bet sentence is the message; everything else here is deliberately
   quiet so it cannot compete. Replaces the NOTHING STANDS OUT HERE panel,
   which used to lead (see web/js/games.js). */
.gqv-pick {
  padding: var(--sp-10) var(--sp-11);
  margin-bottom: var(--sp-8);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%);
  border: 1px solid var(--v-line, rgba(255,255,255,.10));
}
.gqv-pick__head {
  display: flex; align-items: center; gap: var(--sp-6);
  margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.gqv-pick__eyebrow {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .2em;
  color: var(--v-t5);
}
.gqv-pick__label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  padding: 3px 9px; border: 1px solid currentColor; color: var(--v-t2);
}
/* The sentence itself. Bigger than the old verdict word, because it is the
   one line on the screen a reader came for. */
.gqv-pick__bet {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -.015em;
  color: var(--v-t0);
}
.gqv-pick__why {
  margin: var(--sp-7) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--sp-3); max-width: 640px;
}
.gqv-pick__why li {
  font-size: 15px; line-height: 1.5; color: var(--v-t3);
  padding-left: var(--sp-5); position: relative;
}
.gqv-pick__why li::before {
  content: "·"; position: absolute; left: 0; color: var(--v-t5);
}
/* The not-on-the-card case gets a fraction of the room, on purpose: it is
   the common outcome and must not read as the headline. */
.gqv-pick--none { padding: var(--sp-8) var(--sp-11); background: none; }
.gqv-pick--none .gqv-pick__eyebrow { margin-bottom: var(--sp-3); }
.gqv-pick__none-body {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--v-t4); max-width: 640px;
}

.gqv-verdict { padding: var(--sp-10) var(--sp-11); margin-bottom: var(--sp-8); }
.gqv-verdict__word {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1; letter-spacing: -.01em; color: var(--v-t0);
  margin-bottom: var(--sp-6);
}
.gqv-verdict__body { font-size: 16px; line-height: 1.5; color: var(--v-t2); max-width: 640px; }
.gqv-verdict__note { margin-top: var(--sp-4); font-size: 13.5px; line-height: 1.5; color: var(--v-t5); max-width: 640px; }
.gqv-mini-row { display: flex; gap: var(--sp-8); margin-top: var(--sp-9); flex-wrap: wrap; }
.gqv-mini { flex: none; }
.gqv-mini__label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--v-t6); margin-bottom: var(--sp-2); }
.gqv-mini__value { font-family: var(--font-mono); font-size: 18px; color: var(--v-live-lit); }

/* ---- price: BOTH sides, best/consensus/improvement --------------------*/
.gqv-price { padding: var(--sp-10) var(--sp-11); margin-bottom: var(--sp-8); }
.gqv-price__eyebrow { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .2em; color: var(--v-t5); margin-bottom: var(--sp-8); }
.gqv-price__cols { display: flex; gap: var(--sp-9); flex-wrap: wrap; }
.gqv-price__col { flex: 1 1 240px; min-width: 220px; }
.gqv-price__label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--v-t5); margin-bottom: var(--sp-3); }
.gqv-price__figure { font-family: var(--font-display); font-style: italic; font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 800; letter-spacing: -.01em; color: #FFF; line-height: .95; }
.gqv-price__book { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t6); }
.gqv-price__consensus { margin-top: var(--sp-6); display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.gqv-price__consensus-label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--v-t6); }
.gqv-price__consensus-figure { font-family: var(--font-mono); font-size: 15px; color: var(--v-t2); }
.gqv-price__pill {
  display: inline-flex; margin-top: var(--sp-5); padding: 5px 12px; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: linear-gradient(120deg, var(--v-money), var(--v-money-2));
  font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--v-money-ink);
}
.gqv-price__none { margin-top: var(--sp-5); font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; color: var(--v-t6); }
.gqv-price__meta { margin-top: var(--sp-8); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .07em; color: var(--v-t6); }
.gqv-price__labeltext { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--v-t6); }
.gqv-price__note { margin-top: var(--sp-6); font-size: 14.5px; line-height: 1.55; color: var(--v-t4); max-width: 640px; }
.gqv-price__disclaimer { margin-top: var(--sp-7); font-size: 13px; line-height: 1.5; color: var(--v-t7); }
.gqv-price__footnote { margin-top: var(--sp-6); font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }

/* ---- V2-34 spotlight placement -----------------------------------------
   The Featured Bet primitive is mounted verbatim (featuredbet.js's own
   `.fb-*` rules style it); this file only styles the wrapper it sits in. */
.gqv-spotlight { margin-bottom: var(--sp-8); }
.gqv-spotlight__eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--v-t3); margin-bottom: var(--sp-4); }
.gqv-spotlight__lede { font-size: 15px; line-height: 1.5; color: var(--v-t5); max-width: 640px; margin-bottom: var(--sp-7); }

/* ---- teams panel -------------------------------------------------------*/
.gqv-teams { padding: var(--sp-10) var(--sp-11); margin-bottom: var(--sp-8); }
.gqv-teams__title { font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .18em; color: var(--v-t4); margin-bottom: var(--sp-8); }
.gqv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-6); }
.gqv-stat { padding: 12px 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); --r: var(--r-badge); }
.gqv-stat__label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .13em; color: var(--v-t6); margin-bottom: var(--sp-3); }
.gqv-stat__value { font-family: var(--font-mono); font-size: 17px; color: var(--v-t1); }
.gqv-stat__n { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 12px; color: var(--v-t7); }

/* ---- actions + advanced toggle -----------------------------------------*/
.gqv-actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-9); }
.gqv-toggle {
  display: flex; width: 100%; justify-content: center; padding: 14px; --r: var(--r-btn);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .14em; color: var(--v-t2);
  cursor: pointer;
}
.gqv-toggle:hover { background: rgba(255, 255, 255, .07); }
.gqv-toggle__note { margin: var(--sp-4) 0 var(--sp-9); text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t7); }

@media (max-width: 899px) {
  .gqv-body { padding: 0 var(--gutter-mobile) var(--sp-13); }
  .gqv-identity, .gqv-verdict, .gqv-price, .gqv-teams, .gqv-pick { padding: var(--sp-8); }
  .gqv-identity__row { gap: var(--sp-5); }
  .gqv-badge { width: 32px; height: 32px; font-size: 13.5px; }
  .gqv-team__name { font-size: 16px; }
  .gqv-verdict__word { font-size: 26px; }
  .gqv-price__cols { flex-direction: column; gap: var(--sp-7); }
  .gqv-price__figure { font-size: 26px; }
  .gqv-stats { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   GAME ADVANCED V2
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html'
   V2-03 (GAME · COVERAGE LEDGER, 1280x1180, lines 2625-3016) and V2-31
   (GAME ADVANCED · MOBILE, 390x844, lines 6450-6560). Backs
   web/js/games.js's `gav*` render functions -- the block APPENDED
   beneath GAME QUICK V2 above when "SHOW ADVANCED ANALYSIS" is pressed,
   never a replacement for it. Scoped to the `gav-` prefix and --v-*
   tokens; the `.gav-gap` rows use the native `<details>` element for
   "tap for its reason string" rather than a custom disclosure widget.
   ===================================================================== */

.gav { padding: var(--sp-9) 0 0; }
.gav > * + * { margin-top: var(--sp-10); }

/* ---- mobile-only "Quick View · still here" recap ----------------------*/
.gav-recap {
  display: none; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-7); --r: var(--r-badge);
  background: rgba(0, 224, 255, .05); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .18);
}
.gav-recap__label { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--v-live-label); }
.gav-recap__matchup { font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 800; color: var(--v-t0); }
.gav-recap__verdict { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--v-t4); }

/* ---- intro: headline + three stat tiles --------------------------------*/
.gav-intro__eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--v-t3); margin-bottom: var(--sp-5); }
.gav-intro__headline {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.05; color: var(--v-t0); margin-bottom: var(--sp-6);
}
.gav-intro__body { font-size: 15px; line-height: 1.55; color: var(--v-t4); max-width: 680px; }
.gav-tiles { display: flex; gap: var(--sp-7); flex-wrap: wrap; margin-top: var(--sp-9); }
.gav-tile {
  flex: 1 1 180px; min-width: 160px; padding: 13px 15px; --r: var(--r-badge);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.gav-tile--live { background: linear-gradient(150deg, rgba(0, 224, 255, .1), rgba(255, 255, 255, .012)); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .28); }
.gav-tile--warn { background: linear-gradient(150deg, rgba(255, 176, 32, .09), rgba(255, 255, 255, .012)); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .28); }
.gav-tile__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--v-t6); margin-bottom: var(--sp-3); }
.gav-tile__value { font-family: var(--font-mono); font-size: 26px; color: var(--v-t1); line-height: 1; }
.gav-tile--live .gav-tile__value { color: var(--v-live-lit); }
.gav-tile--warn .gav-tile__value { color: var(--v-warn-lit); }
.gav-tile__sample { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--v-t7); }

/* ---- shared subhead -----------------------------------------------------*/
.gav-subhead { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--v-t3); margin-bottom: var(--sp-5); }
.gav-subhead--warn { color: var(--v-warn-label); }

/* ---- WHAT WE ACTUALLY HAVE ----------------------------------------------*/
.gav-have__list { display: flex; flex-direction: column; }
.gav-have__row {
  display: flex; align-items: baseline; gap: var(--sp-6); padding: 10px 0; flex-wrap: wrap;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.gav-have__mark {
  flex: none; align-self: center; width: 9px; height: 9px; --r: 2px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: var(--v-live);
}
.gav-have__key {
  flex: none; width: 150px; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--v-t2);
}
.gav-have__desc { flex: 1 1 260px; min-width: 200px; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }
.gav-have__fact { flex: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-live-label); }

/* ---- THE GAPS -- named, reasons printed as given -------------------------*/
.gav-gaps__lede { font-size: 14.5px; line-height: 1.5; color: var(--v-t5); max-width: 680px; margin-bottom: var(--sp-6); }
.gav-gaps__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.gav-gap {
  padding: 10px 13px; --r: var(--r-badge);
  background: rgba(255, 176, 32, .04); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .16);
}
.gav-gap__summary {
  display: flex; align-items: center; gap: var(--sp-5); cursor: pointer; list-style: none;
}
.gav-gap__summary::-webkit-details-marker { display: none; }
.gav-gap__mark {
  flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  --r: 4px; clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 176, 32, .16); color: var(--v-warn-lit); font-size: 12.5px; font-weight: 800;
}
.gav-gap__key { font-family: var(--font-mono); font-size: 13px; color: var(--v-t2); }
.gav-gap__chip { margin-left: auto; font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--v-warn-label); }
.gav-gap__reason { margin: var(--sp-4) 0 var(--sp-2) 26px; font-size: 13.5px; line-height: 1.5; color: var(--v-t4); }

/* ---- outer collapse wrapping the whole gap list at 4+ gaps -------------*/
.gav-gaps__collapse { margin-top: var(--sp-6); }
.gav-gaps__collapse-summary {
  cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .14em; color: var(--v-warn-label); padding: var(--sp-4) 0;
}
.gav-gaps__collapse-summary::-webkit-details-marker { display: none; }
.gav-gaps__collapse[open] > .gav-gaps__collapse-summary { color: var(--v-t2); }

/* ---- BOOK VERSUS BOOK -----------------------------------------------------*/
.gav-board__lede { font-size: 14.5px; line-height: 1.5; color: var(--v-t5); margin-bottom: var(--sp-6); }
.gav-board__scroll { overflow-x: auto; }
.gav-board__table { width: 100%; border-collapse: collapse; min-width: 360px; }
.gav-board__table th {
  text-align: left; padding: 8px 12px; font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--v-t6); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.gav-board__table td {
  padding: 9px 12px; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.gav-board__price { font-variant-numeric: tabular-nums; }
.gav-board__note { margin-top: var(--sp-6); font-size: 13px; line-height: 1.5; color: var(--v-t6); }

/* ---- MARKET REFUSAL --------------------------------------------------------*/
.gav-refusal__body { font-size: 13.5px; line-height: 1.55; color: var(--v-t5); max-width: 680px; }

@media (max-width: 899px) {
  .gav-recap { display: flex; }
  .gav-have__key { width: 120px; font-size: 12.5px; }
  .gav-have__row { flex-direction: column; gap: var(--sp-2); }
  .gav-have__fact { margin-left: 0; }
  .gav-tiles { gap: var(--sp-5); }
}
/* ^ Second missing closing brace (same 2026-09-07 finding as the one after
   the Bet Check V2 mobile block): without it the whole GAMEDAY V2 section
   below lived inside this 899px query and the desktop Gameday screen
   rendered as bare text. */
/* =====================================================================
   GAMEDAY V2
   Traced from design/linehound-v2/'LINEHOUND V2 Full Product.dc.html':
   V2-01 (1126-1673, the carousel default), V2-01a NO_PLAY (1674-1880),
   V2-01b FLAGGED (1881-1981), V2-01c MARKET_UNAVAILABLE (1982-2135),
   V2-22 mobile (5435-5568, same markup below at <=899px -- no separate
   render path) and V2-33 the Featured Bet carousel head (7182-7347).
   Backs web/js/today.js. Scoped to the `gv2-` prefix and --v-* tokens
   only; the pre-existing unprefixed `.hero`/`.slate`/`.changed`/
   `.checkband` V1 Gameday sections above are left untouched -- What
   Changed and the Bet Check invite band are not part of this artboard
   family and today.js keeps reusing their classes verbatim (see that
   file's module docstring). NO_PLAY is the primary, most common verdict
   (~93% per the forward ledger) so it gets the calmest, most confident
   treatment; FLAGGED (~2.3%) is the only state that blooms; amber marks
   MARKET_UNAVAILABLE (~4.7%) throughout, never red -- an absent board is
   not a risk to a bet.
   ===================================================================== */

.gv2-badge {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
}

/* ---- verdict chip (eyebrow pill) --------------------------------------*/
.gv2-chip {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: 8px 15px; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .17em;
  white-space: nowrap;
}
.gv2-chip__mark { width: 19px; height: 2px; background: currentColor; }
.gv2-chip--noplay { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); color: var(--v-t1); }
.gv2-chip--flagged { background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); color: var(--v-money-ink); box-shadow: 0 18px 44px -16px rgba(255, 61, 87, .85); }
.gv2-chip--flagged .gv2-chip__mark { width: 7px; height: 7px; border-radius: 50%; background: var(--v-money-ink); }
.gv2-chip--unavailable { background: rgba(255, 176, 32, .15); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .44); color: var(--v-warn-label); }
.gv2-chip--unavailable .gv2-chip__mark { display: none; }

/* ---- hero shell --------------------------------------------------------*/
.gv2-hero {
  position: relative; overflow: hidden;
  padding: 30px var(--gutter-desktop) 34px;
  margin: 0 var(--gutter-desktop) var(--sp-11);
  --r: var(--r-lg);
}
.gv2-hero__tex {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(112deg, var(--v-carbon) 0 2px, transparent 2px 5px);
}
.gv2-hero--noplay { background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)); }
.gv2-hero--flagged {
  background: linear-gradient(150deg, rgba(255, 61, 87, .1), rgba(255, 255, 255, .014));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .3);
}
.gv2-hero--bloom::after {
  content: ""; position: absolute; left: -10%; top: -30%; width: 70%; height: 140%;
  background: radial-gradient(circle, rgba(255, 61, 87, .16), transparent 68%);
  pointer-events: none; animation: gv2Bloom .42s cubic-bezier(.16, .84, .3, 1) both;
}
@keyframes gv2Bloom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.gv2-hero--unavailable { background: rgba(255, 176, 32, .045); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .22); }

.gv2-hero__top { position: relative; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-9); }
.gv2-hero__fraction { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; color: var(--v-t6); white-space: nowrap; }
.gv2-hero--flagged .gv2-hero__fraction { color: var(--v-money-label); }

.gv2-hero__headline {
  position: relative;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(30px, 4vw, 62px); line-height: .92; letter-spacing: -.01em;
  color: var(--v-t0); max-width: 900px;
}
.gv2-hero__body { position: relative; margin-top: var(--sp-8); font-size: 17px; line-height: 1.55; color: var(--v-t3); max-width: 680px; }
.gv2-hero__body--warn { color: var(--v-warn-lit); }
.gv2-hero__meta { position: relative; margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--v-t6); }

.gv2-hero__actions { position: relative; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-9); }

/* THE ENGINE'S SLIP -- lived on Today, above the hero, until 2026-09-12
   (docs/DECISION_TODAY_ONE_ANSWER.md option A1). Moved to #/performance,
   under "THE ENGINE'S OWN SLIP — RESEARCH"; the renderer that owns this
   markup is `renderTonightsPicks`, now in web/js/slip.js and called from
   web/js/performance.js, not today.js. Comment corrected 2026-09-12 --
   the selectors below needed no changes for the move, but this one did,
   and a stale "leads Today" comment on CSS that no longer runs there is
   exactly the kind of pointer-at-nothing this whole decision was about. */
.gv2-picks { margin: var(--sp-9) auto var(--sp-10); max-width: 1180px; }
.gv2-picks__eyebrow { display: block; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .14em; color: var(--v-t5); margin-bottom: var(--sp-3); }
.gv2-picks--notable .gv2-picks__eyebrow { color: var(--v-win-label); }
.gv2-picks--light .gv2-picks__eyebrow { color: var(--v-warn-label); }
.gv2-picks__headline { font-family: var(--font-display); font-style: italic;
  font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05;
  letter-spacing: -.01em; color: var(--v-t0); margin: 0 0 var(--sp-4); max-width: 820px; }
.gv2-picks__sub { font-size: 15px; line-height: 1.5; color: var(--v-t4);
  max-width: 680px; margin: 0 0 var(--sp-8); }

.gv2-picks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-7); }
.gv2-picks__card { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.gv2-picks__card-head { display: flex; align-items: center; justify-content: space-between; }
.gv2-picks__rank { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--v-t5); }

.gv2-picks__tier { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; padding: 3px var(--sp-4); border-radius: 999px; }
.gv2-picks__tier--green { color: var(--v-win-label); background: rgba(46, 212, 122, .12);
  box-shadow: inset 0 0 0 1px rgba(46, 212, 122, .35); }
.gv2-picks__tier--yellow { color: var(--v-warn-lit); background: rgba(255, 176, 32, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .35); }
.gv2-picks__tier--orange { color: var(--v-warn-label); background: rgba(224, 138, 0, .14);
  box-shadow: inset 0 0 0 1px rgba(224, 138, 0, .4); }
.gv2-picks__tier--red { color: var(--v-money-label); background: rgba(255, 61, 87, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .32); }

.gv2-picks__wager { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--v-t1); margin: 0; }
.gv2-picks__thesis { font-size: 14.5px; line-height: 1.5; color: var(--v-t3); margin: 0; }
.gv2-picks__thesis-details > summary.gv2-picks__thesis { cursor: pointer; list-style: none; }
.gv2-picks__thesis-details > summary.gv2-picks__thesis::-webkit-details-marker { display: none; }
.gv2-picks__thesis-details > summary.gv2-picks__thesis::after {
  content: " Read the full reasoning \2193"; color: var(--v-t6); font-size: 13px; }
.gv2-picks__thesis-details[open] > summary.gv2-picks__thesis::after {
  content: " Show less \2191"; }
.gv2-picks__thesis--rest { margin-top: var(--sp-4); }
.gv2-picks__meta { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--v-t6); margin: 0; }
.gv2-picks__tier-label { font-size: 13px; line-height: 1.45; color: var(--v-t5); margin: 0;
  padding-top: var(--sp-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

.gv2-picks__more { margin-top: var(--sp-8); }
.gv2-picks__more > summary { cursor: pointer; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; color: var(--v-t5); margin-bottom: var(--sp-6); }
.gv2-picks__more[open] > summary { color: var(--v-t3); }

/* ---- row 1: hero copy + WHAT WE CHECKED TONIGHT, side by side >=1280px
   (V2-01a); stacked below that and always on mobile. ---------------------*/
.gv2-hero__row { position: relative; display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-9); align-items: flex-start; }
.gv2-hero__main { flex: 1 1 auto; min-width: 0; width: 100%; }
.gv2-hero__row > .gv2-checked { width: 100%; }
@media (min-width: 1280px) {
  .gv2-hero__row { flex-direction: row; flex-wrap: nowrap; }
  .gv2-hero__main { flex: 2 1 0; }
  .gv2-hero__row > .gv2-checked { flex: 1 1 0; width: auto; min-width: 300px; }
}

/* ---- row 2: price context beside matchup context, side by side
   >=1280px; stacked below that and on mobile. -----------------------------*/
.gv2-hero__row2 { position: relative; display: flex; flex-direction: column; gap: var(--sp-8); }
.gv2-hero__row2 > * { width: 100%; margin-top: 0; }
@media (min-width: 1280px) {
  .gv2-hero__row2 { flex-direction: row; flex-wrap: nowrap; }
  .gv2-hero__row2 > * { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---- hero stat chips (V2-22 mobile only -- replaces the WHAT WE CHECKED
   TONIGHT panel below 899px; see screens.css's mobile block) ------------*/
.gv2-hero__chips { display: none; gap: var(--sp-6); margin-top: var(--sp-8); flex-wrap: wrap; }
.gv2-hero__chip { display: flex; align-items: baseline; gap: var(--sp-3); padding: 8px 13px; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.gv2-hero__chip-value { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--v-t1); }
.gv2-hero__chip-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .13em; color: var(--v-t6); }

/* ---- date strip (V2-22 mobile only) -----------------------------------*/
.gv2-datestrip { display: none; gap: var(--sp-4); padding: 0 var(--gutter-mobile) var(--sp-7); overflow-x: auto; }
.gv2-datestrip__tile {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 52px; padding: 8px 0; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  text-decoration: none;
}
.gv2-datestrip__tile--today { background: rgba(255, 255, 255, .075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gv2-datestrip__weekday { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .13em; color: var(--v-t6); }
.gv2-datestrip__tile--today .gv2-datestrip__weekday { color: var(--v-t2); }
.gv2-datestrip__day { font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 800; color: var(--v-t5); }
.gv2-datestrip__tile--today .gv2-datestrip__day { color: #FFF; }

/* ---- matchup poster (V2-22 mobile only) -------------------------------*/
.gv2-poster { display: none; align-items: center; gap: var(--sp-6); padding: var(--sp-9) var(--gutter-mobile); }
.gv2-poster__side { flex: 1 1 0; min-width: 0; }
.gv2-poster__side--home { text-align: right; }
.gv2-poster__name {
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px; line-height: 1.05;
  color: var(--v-t0); overflow-wrap: break-word;
}
.gv2-poster__band { margin-top: var(--sp-4); height: 4px; width: 56px; }
.gv2-poster__side--home .gv2-poster__band { margin-left: auto; }
.gv2-poster__pill {
  flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 7px 12px; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(13, 13, 15, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.gv2-poster__time { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-live); white-space: nowrap; }
.gv2-poster__sep { width: 1px; height: 11px; background: rgba(255, 255, 255, .2); }
.gv2-poster__vs { font-family: var(--font-display); font-style: italic; font-size: 14.5px; font-weight: 800; color: var(--v-t0); }

.gv2-hero__still {
  position: relative; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  margin: var(--sp-11) 0 var(--sp-8);
}
.gv2-hero__still-tag { flex: none; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--v-live); }
.gv2-hero__still-body { flex: 1; min-width: 200px; font-size: 16px; line-height: 1.45; color: var(--v-t4); }
.gv2-hero__still-time { flex: none; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--v-t6); white-space: nowrap; }

/* ---- WHAT WE CHECKED TONIGHT tile panel --------------------------------*/
.gv2-checked { position: relative; padding: var(--sp-8) var(--sp-9); --r: var(--r-lg); }
.gv2-checked__title { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .19em; color: var(--v-t5); margin-bottom: var(--sp-6); }
/* A 2-column grid rather than five stacked rows -- five tall rows left a
   noticeably taller panel than the hero copy beside it on desktop
   (visible dead air below the action buttons); a compact 2-up grid keeps
   every figure legible while matching the copy column's height instead
   of towering over it. */
.gv2-checked__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
.gv2-checked__tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.gv2-checked__tile:nth-last-child(-n+2) { box-shadow: none; }
/* This panel is the product's proof of work -- how many games were looked
   at, how many boards came back, how deep the best and worst were. It was
   set at 9px on the quietest rung and read as grey filler beside the
   headline. The numbers are the point; let them be numbers. */
.gv2-checked__label { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--v-t5); }
.gv2-checked__row { display: flex; align-items: baseline; gap: var(--sp-4); }
.gv2-checked__value { font-family: var(--font-mono); font-size: 24px; color: var(--v-t0); line-height: 1; }
.gv2-checked__note { display: none; }
.gv2-checked__footnote { margin-top: var(--sp-6); font-size: 13px; line-height: 1.55; color: var(--v-t5); }
.gv2-checked__research, .gv2-checked__programme { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.gv2-checked__research-tag, .gv2-checked__programme-tag {
  flex: none; padding: 4px 10px; --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--v-t3); white-space: nowrap;
}
.gv2-checked__research-body, .gv2-checked__programme-body { flex: 1; min-width: 160px; font-size: 13.5px; line-height: 1.5; color: var(--v-t6); }

/* ---- price context panel -----------------------------------------------*/
.gv2-price { position: relative; padding: var(--sp-9) var(--sp-10); --r: var(--r-lg); margin-top: var(--sp-9); }
.gv2-price__title { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--v-t5); margin-bottom: var(--sp-6); }
.gv2-price__empty { font-size: 15px; color: var(--v-t4); }
.gv2-price__head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.gv2-price__label { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--v-t1); }
.gv2-price__figures { display: flex; align-items: baseline; gap: var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.gv2-price__figure {
  font-family: var(--font-display); font-style: italic; font-size: clamp(40px, 5vw, 68px); font-weight: 800;
  line-height: .8; letter-spacing: -.02em; color: #FFF;
}
.gv2-hero--flagged .gv2-price__figure { text-shadow: 0 10px 44px rgba(255, 61, 87, .45); }
.gv2-price__aside { display: flex; flex-direction: column; gap: 4px; }
.gv2-price__books { font-family: var(--font-mono); font-size: 13px; color: var(--v-money-label); white-space: nowrap; }
.gv2-price__consensus { font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); white-space: nowrap; }
.gv2-price__pill {
  display: inline-flex; padding: 7px 13px; --r: var(--r-chip); margin-bottom: var(--sp-6);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: var(--v-t1);
}
.gv2-price__note { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--v-t6); }

/* ---- matchup context panel ----------------------------------------------*/
.gv2-matchup { position: relative; padding: var(--sp-9) var(--sp-10); --r: var(--r-lg); }
.gv2-matchup__title { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .19em; color: var(--v-live-label); margin-bottom: var(--sp-7); }
.gv2-matchup__head { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.gv2-matchup__names { font-family: var(--font-display); font-style: italic; font-size: 21px; font-weight: 800; color: var(--v-t0); }
.gv2-matchup__consensus { display: flex; gap: var(--sp-9); flex-wrap: wrap; }
.gv2-matchup__col { flex: 1 1 140px; }
.gv2-matchup__col-label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .13em; color: var(--v-t5); margin-bottom: 4px; }
.gv2-matchup__col-value { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--v-t1); }
/* This is a sentence, not a tag: "market-implied consensus, de-vigged -- a
   measurement of the board, not a forecast" is the one line that stops a
   reader taking the two percentages for a prediction. It was 9.5px mono on
   the quietest rung, which is how you hide something you meant to say. */
.gv2-matchup__caption { margin-top: var(--sp-7); font-size: 13.5px; line-height: 1.55; color: var(--v-t5); }
/* Venue is a fact a reader looks for, and the gap note is the sentence that
   tells them where the missing data actually lives. Both were on the
   quietest rung inside an already-quiet panel. */
.gv2-matchup__venue { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 13px; letter-spacing: .11em; color: var(--v-t5); }
.gv2-matchup__gap-note { margin-top: var(--sp-6); font-size: 13.5px; line-height: 1.55; color: var(--v-t5); }

/* ---- V2-01c payload box --------------------------------------------------*/
.gv2-payload { position: relative; padding: var(--sp-8) var(--sp-9); --r: var(--r-badge); margin-top: var(--sp-9); max-width: 460px;
  background: rgba(255, 176, 32, .06); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .24), inset 3px 0 0 var(--v-warn); }
.gv2-payload__title { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--v-warn-label); margin-bottom: var(--sp-6); }
.gv2-payload__row { display: flex; align-items: baseline; gap: var(--sp-5); padding: 8px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.gv2-payload__key { flex: 1; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t6); word-break: break-word; }
.gv2-payload__val { flex: none; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-warn-lit); text-align: right; max-width: 260px; word-break: break-word; }
.gv2-payload__note { margin-top: var(--sp-6); font-size: 14.5px; line-height: 1.5; color: var(--v-warn-lit); }

/* ---- V2-33 Featured Bet carousel head -----------------------------------*/
.gv2-featured { padding: 0 var(--gutter-desktop) var(--sp-11); }
.gv2-featured__head { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.gv2-featured__tag { flex: none; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--v-money-label); }
.gv2-featured__sub { flex: 1; min-width: 200px; font-size: 16px; line-height: 1.45; color: var(--v-t4); }
.gv2-featured__count { flex: none; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--v-t6); white-space: nowrap; }
.gv2-featured__slot { position: relative; }
.gv2-featured__loading { padding: 30px 0; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .08em; color: var(--v-t6); }

/* ---- 899px and below: the V2-22 mobile spec (same markup, reflowed) ----*/
@media (max-width: 899px) {
  /* V2-22 is a DISTINCT composition, not a reflow: the date strip and
     matchup poster appear (both hidden on desktop), the hero's stat
     chips replace the WHAT WE CHECKED TONIGHT panel, and everything
     else below keeps its existing order. */
  .gv2-datestrip, .gv2-poster { display: flex; }
  .gv2-hero__chips { display: flex; }
  .gv2-hero__row > .gv2-checked { display: none; }

  .gv2-hero { margin: 0 var(--gutter-mobile) var(--sp-9); padding: 22px var(--gutter-mobile) 26px; }
  .gv2-hero__headline { font-size: 34px; }
  .gv2-hero__body { font-size: 16px; }
  .gv2-hero__actions { flex-direction: column; align-items: stretch; }
  .gv2-hero__actions .btn { width: 100%; }
  .gv2-hero__still { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .gv2-checked, .gv2-matchup, .gv2-price { padding: var(--sp-7) var(--sp-8); }
  .gv2-checked__label { width: 108px; font-size: 12px; }
  .gv2-checked__value { font-size: 18px; }
  .gv2-price__figure { font-size: 40px; }
  .gv2-payload { max-width: none; }
  .gv2-featured { padding: 0 var(--gutter-mobile) var(--sp-9); }
  .gv2-featured__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* =====================================================================
   TOP OPPORTUNITIES / PAPER-RESEARCH PERFORMANCE / PRICE VERDICT / VALUE
   METER -- Task B2 (web/js/opportunities.js, wired into web/js/today.js)
   and Task B3 (web/js/performance.js, #/performance), plus the shared
   PRICE VERDICT chip (dom.js's renderWordChip) and VALUE METER primitive
   (web/js/valuemeter.js) reused by opportunities.js, betcheck.js's new
   price-verdict block, and games.js's MODEL vs MARKET panel.

   Additive only -- everything below uses the existing V2 token bridge
   (--v-* families from tokens.css) and the existing .panel/.chamfer/
   .sechead/.ov2-table primitives rather than inventing new ones. Class
   prefixes used here: .opp- (opportunities.js + today.js's slate-date
   banner), .perf- (performance.js), .pv- (the shared word chip + Bet
   Check's price-verdict block), .vmeter- (the shared value-meter bars),
   .gmv- (games.js's MODEL vs MARKET panel).
   ===================================================================== */

/* ---- shared word chip (dom.js's renderWordChip) -------------------------
   money = STRONG VALUE/VALUE (a genuine price advantage); live = LEAN/FAIR
   PRICE (analytical, not a downside); outline = PASS (the ordinary,
   expected outcome); warn = OVERPRICED/FADE ALERT/INSUFFICIENT DATA
   (caution/absence, amber, never red). */
.pv-chip {
  display: inline-flex; align-items: center; padding: 7px 14px 7px 12px;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .13em; white-space: nowrap; --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .35);
}
.pv-chip--money { background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); color: var(--v-money-ink);
  box-shadow: inset 3px 0 0 rgba(34, 6, 10, .3), 0 4px 14px -4px rgba(255, 61, 87, .55); }
.pv-chip--live { background: linear-gradient(120deg, var(--v-live), var(--v-live-2)); color: var(--v-live-ink);
  box-shadow: inset 3px 0 0 rgba(3, 34, 43, .3), 0 4px 14px -4px rgba(0, 224, 255, .4); }
.pv-chip--outline { background: rgba(255, 255, 255, .07); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .2); color: var(--v-t2); }
.pv-chip--warn { background: rgba(255, 176, 32, .16); box-shadow: inset 3px 0 0 var(--v-warn), inset 0 0 0 1px rgba(255, 176, 32, .4); color: var(--v-warn-label); }

/* ---- VALUE METER (web/js/valuemeter.js) ---------------------------------*/
.vmeter { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0; }
.vmeter-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: var(--sp-5); }
/* "MARKET-IMPLIED PROBABILITY (de-vigged consensus)" is the label that stops
   the meter being read as a win probability. It earns a legible size. */
.vmeter-row__label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--v-t4); }
.vmeter-row__track { position: relative; height: 8px; background: rgba(255, 255, 255, .08); --r: 3px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.vmeter-row__fill { display: block; height: 100%; border-radius: inherit; }
.vmeter-row__fill--market { background: linear-gradient(90deg, var(--v-live-2), var(--v-live)); }
.vmeter-row__fill--price { background: linear-gradient(90deg, var(--v-money-2), var(--v-money)); }
.vmeter-row__empty { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--v-t6); }
.vmeter-row__figure { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t1); text-align: right; min-width: 48px; }
.vmeter-row__na { color: var(--v-t6); }
.vmeter-gap { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .04em; }
.vmeter-gap--better { color: var(--v-money-lit); }
.vmeter-gap--worse { color: var(--v-warn-lit); }
.vmeter-gap--flat, .vmeter-gap--na { color: var(--v-t5); font-weight: 500; }
.vmeter-caption { margin: var(--sp-3) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }
.vmeter-word-note { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t5); }

/* ---- TOP OPPORTUNITIES (web/js/opportunities.js) ------------------------*/
.opp-slateband { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-4) var(--gutter-desktop); }
.opp-slateband__date { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .06em; color: var(--v-t0); }
.opp-slateband__tag { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; padding: 3px 10px;
  background: rgba(255, 255, 255, .08); color: var(--v-t3); --r: var(--r-chip);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.opp-slateband__tag--next { background: rgba(255, 176, 32, .16); color: var(--v-warn-label); }
.opp-slateband__lastnight { margin-left: auto; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; color: var(--v-live-label); text-decoration: none; }
.opp-slateband__lastnight:hover { color: var(--v-live); }
/* The "prices are bought from three hours before first pitch" line. Takes
   the whole row under the date so it reads as a sentence, not a chip, and
   stays quiet -- it explains an old board, it does not warn about one. */
.opp-slateband__windownote { flex-basis: 100%; font-size: 13.5px; line-height: 1.5;
  color: var(--v-t5); }

.opp-section { padding: 0 var(--gutter-desktop) var(--sp-11); }
.opp-label { margin: 0 0 var(--sp-6); font-size: 14.5px; color: var(--v-t4); }

/* Empty state -- "we checked and nothing qualified" is the confident,
   expected majority-nights answer (same honesty rule as the gv2-hero's
   NO_PLAY treatment above), never an error box. A slim amber rule marks
   the caution/absence tone without the whole panel reading as a warning:
   a large italic display headline plus a real basis sentence, matching
   this screen's other confident statements rather than a form-validation
   alert. */
.opp-empty { position: relative; overflow: hidden; padding: var(--sp-11) var(--sp-11);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.opp-empty::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2)); }
.opp-empty__eyebrow { display: block; margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: 13px;
  font-weight: 800; letter-spacing: .2em; color: var(--v-warn-label); }
.opp-empty__headline { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.01em; color: var(--v-t0); max-width: 720px; }
.opp-empty__basis { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v-t3); max-width: 640px; }

.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-8); margin-bottom: var(--sp-11); }

/* The first card in a qualifying grid gets hero LAYOUT -- spans the full row
   and reads bigger (web/js/opportunities.js marks it `opp-card--hero`).

   LAYOUT ONLY. It carries no eyebrow and no label. The words TOP PLAY sat
   here until 2026-09-10, invented in the client and appearing nowhere in the
   backend, which calls these rows `qualifying` and ranks them by
   `value_points` -- execution quality, not a prediction. A reader took the
   biggest price gap on the board as a system recommendation and told Brey
   the site had called a great bet. Two words outweighed every disclaimer
   beneath them. tests/test_today_one_answer.py pins the absence; do not
   restore a label here. */
.opp-card--hero { grid-column: 1 / -1; }

.opp-card {
  position: relative; padding: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-5);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
}
.opp-card__main { display: flex; flex-direction: column; gap: var(--sp-5); }
.opp-card__side .vmeter { margin: 0; }
.opp-card__eyebrow { display: inline-flex; align-self: flex-start; margin-bottom: calc(-1 * var(--sp-2)); padding: 5px 12px;
  --r: var(--r-marker); clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); color: var(--v-money-ink);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .18em; }
.opp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.opp-card__matchup { font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 800; color: var(--v-t0); text-decoration: none; }
.opp-card__matchup:hover { color: var(--v-live); }
.opp-card__pitch { font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); white-space: nowrap; }
.opp-card__wager { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.opp-card__wager-text { font-size: 15px; color: var(--v-t2); }
.opp-card__price { font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 800; color: #FFF; }
.opp-card__book { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t5); }
.opp-card__chips { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.opp-card__vp { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; color: var(--v-money-lit); }
.opp-card__tier { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t5); }
.opp-card__figline { margin: 0; font-size: 13.5px; color: var(--v-t4); }
.opp-card__model { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.opp-card__lists { display: flex; flex-direction: column; gap: var(--sp-2); }
.opp-card__reasons, .opp-card__risks { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.opp-card__reasons { color: var(--v-t3); }
.opp-card__risks { color: var(--v-warn-lit); }
.opp-card__engine { padding: var(--sp-4); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); --r: 8px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.opp-card__engine-line { margin: 0; font-size: 13.5px; color: var(--v-t3); }
.opp-card__thesis { margin-top: var(--sp-2); font-size: 13.5px; color: var(--v-t4); }
.opp-card__thesis-body { margin: var(--sp-2) 0 0; line-height: 1.5; }
.opp-card__captured { margin: 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--v-t6); }
.opp-card__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }

/* ---- hero-card scale-up: matchup/price/wager read like a headline ------*/
.opp-card--hero { padding: var(--sp-11); }
.opp-card--hero .opp-card__matchup { font-size: clamp(24px, 2.6vw, 34px); }
.opp-card--hero .opp-card__price { font-size: clamp(34px, 4vw, 52px); line-height: .9; }
.opp-card--hero .opp-card__wager-text { font-size: 17px; }
.opp-card--hero .opp-card__vp { font-size: 16px; }
.opp-card--hero .pv-chip { font-size: 13.5px; padding: 9px 16px 9px 14px; }
@media (min-width: 900px) {
  .opp-card--hero { display: flex; flex-direction: row; align-items: stretch; gap: var(--sp-11); }
  .opp-card--hero .opp-card__main { flex: 1.3 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
  .opp-card--hero .opp-card__side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center;
    padding-left: var(--sp-11); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
}

.opp-ranked { margin-bottom: var(--sp-9); }
.opp-ranked__title { margin: 0 0 var(--sp-5); font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--v-t4); }
/* Every priced side, as a real data table: numeric columns right-aligned
   and tabular so figures actually line up in a column, zebra striping so
   a 30-row table stays scannable at a glance rather than blurring into
   one grey field. Scoped to this ranked table only -- .ov2-table's shared
   rules (also used elsewhere) are left untouched. */
.opp-ranked .ov2-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.opp-ranked .ov2-table tbody tr:hover { background: rgba(0, 224, 255, .05); }
.opp-ranked .ov2-table td:nth-child(4),
.opp-ranked .ov2-table td:nth-child(5),
.opp-ranked .ov2-table td:nth-child(6) {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--v-t2);
}
.opp-ranked .ov2-table td:nth-child(2) { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.opp-ranked .ov2-table td:nth-child(3) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.opp-ranked .ov2-table td:nth-child(7) { text-align: center; }
.opp-ranked .ov2-table td:nth-child(8) { text-align: right; }
.opp-unpriced__title { margin: 0 0 var(--sp-5); font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--v-t4); }
.opp-unpriced__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.opp-unpriced__row { display: flex; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); flex-wrap: wrap; }
.opp-unpriced__matchup { font-size: 14.5px; color: var(--v-t2); }
.opp-unpriced__reason { font-size: 13.5px; color: var(--v-t5); }

/* EVERY OTHER MARKET ON THE BOARD (web/js/opportunities.js's
   derivativeTable) -- every priced non-moneyline contract, one flat table
   ranked by value points across markets, same zebra/hover/right-align
   treatment as EVERY PRICED SIDE above. The MARKET column is what keeps
   first-five lines, totals, alternates and props distinguishable at a
   glance since ranking mixes them together on purpose. */
.opp-deriv { margin-bottom: var(--sp-9); }
.opp-deriv__market { display: inline-block; padding: 3px 9px; font-family: var(--font-mono); font-size: 12.5px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v-t3);
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  border-radius: 4px; white-space: nowrap; }
.opp-deriv .ov2-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.opp-deriv .ov2-table tbody tr:hover { background: rgba(0, 224, 255, .05); }
.opp-deriv .ov2-table td:nth-child(4),
.opp-deriv .ov2-table td:nth-child(5),
.opp-deriv .ov2-table td:nth-child(6),
.opp-deriv .ov2-table td:nth-child(7) {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--v-t2);
}
.opp-deriv .ov2-table td:nth-child(5) { text-align: center; font-size: 13px; color: var(--v-t5); }
.opp-deriv .ov2-table td:nth-child(8) { text-align: center; }
.opp-deriv .ov2-table td:nth-child(9) { text-align: right; }
.opp-deriv__wager { color: var(--v-t2); }

/* THIN BOARD (web/js/opportunities.js's derivativeThinSummary) -- the
   1,000+ contracts a strict floor kept from getting a verdict, stated as
   counts per market plus the API's own reason sentence ONCE, never a word
   or a value repeated per row. Amber matches tokens.css's reserved
   caution/pending meaning -- this is exactly that: checked, not called. */
.opp-thin { margin-bottom: var(--sp-9); padding: var(--sp-8) var(--sp-9); }
.opp-thin__head { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.opp-thin__eyebrow { font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--v-warn-label); }
.opp-thin__count { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--v-t5); }
.opp-thin__reason { margin: 0 0 var(--sp-5); font-size: 14.5px; line-height: 1.5; color: var(--v-t3); max-width: 640px; }
.opp-thin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.opp-thin__row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04); flex-wrap: wrap; }
.opp-thin__ratio { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--v-t2); min-width: 60px; }
.opp-thin__market { font-size: 13.5px; color: var(--v-t4); }

/* ---- PAPER / RESEARCH PERFORMANCE (web/js/performance.js) ---------------*/
.perf-screen { padding: var(--sp-9) var(--gutter-desktop) var(--sp-15); display: flex; flex-direction: column; gap: var(--sp-11); }

/* WHOSE NUMBERS THESE ARE. Above the figures, not under them -- small type
   beneath a big number is exactly how this page's totals got mistaken for
   the card's three separate times (web/js/performance.js). */
.perf-whose {
  padding: var(--sp-8) var(--sp-9);
  border-left: 3px solid var(--warn, #e8a33d);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.perf-whose__eyebrow {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .18em;
  color: var(--warn, #e8a33d);
}
.perf-whose__body {
  margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.55;
  color: var(--text-2);
}
.perf-whose__link {
  font-size: 14px; font-weight: 700; color: var(--accent, #35c3f3);
  text-decoration: none; align-self: flex-start;
}
.perf-whose__link:hover, .perf-whose__link:focus-visible { text-decoration: underline; }

/* THE ENGINE'S OWN SLIP section (#/performance) -- NOT .perf-whose. That
   class is an amber warn-callout built for one short paragraph (sp-8/sp-9
   padding, amber left border); reusing it here doubled up with the picks
   grid's own `gutter` padding and rendered as an oversized amber warning
   box around what is really a picks grid with a caption, not a warning
   (checker finding, 2026-09-12). This is its own, neutral panel padding --
   no border accent, because nothing here is a warning. */
.perf-engine-slip {
  padding: var(--sp-9);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.perf-engine-slip__eyebrow {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .18em;
  color: var(--v-t5);
}
.perf-engine-slip__body {
  margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.55;
  color: var(--text-2);
}
.perf-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.perf-eyebrow { display: flex; }
.perf-disclaimer { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v-t3); max-width: 72ch; }
.perf-freshness { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }

.perf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-8); }
.perf-tile { padding: var(--sp-9); background: linear-gradient(150deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.perf-tile__label { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--v-t1); margin-bottom: var(--sp-6); }
.perf-tile__grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.perf-tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .045); padding: 7px 0; }
.perf-tile__key { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--v-t5); }
.perf-tile__value { font-family: var(--font-mono); font-size: 15px; color: var(--v-t0); }
/* UNITS NET / RETURN ON UNITS -- this tile's own headline figures, large
   and win/loss coloured, matching the confident-summary treatment the
   rest of this screen (RECORD STRIP, cut tables) already uses. */
.perf-tile__value--big { font-family: var(--font-display); font-style: italic; font-size: 24px; font-weight: 800; }
.perf-tile__value--pos { color: var(--v-win-lit); }
.perf-tile__value--neg { color: var(--v-money-lit); }
.perf-figure__na { color: var(--v-t6); }

.perf-classes { display: flex; flex-direction: column; gap: var(--sp-11); }
.perf-class__explain { margin: var(--sp-2) 0 var(--sp-5); font-size: 14.5px; line-height: 1.5; color: var(--v-t4); max-width: 68ch; }
.perf-class__rollup { margin: 0 0 var(--sp-6); font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t3); }

/* system_id / system_class strings (e.g.
   "market_derived_consensus_h2h_1st_5_innings_away", "MARKET_REFERENCE")
   carry no spaces for the browser's default word-break to hook into --
   without an explicit break rule an unbroken string overflows .ov2-table's
   auto-sized column straight into the next cell's content instead of
   wrapping. Scoped to this screen's own tables only -- .ov2-table's shared
   base rules (also used by odds.js's board) are left untouched. */
.perf-classes .ov2-table td, .perf-picks .ov2-table td {
  overflow-wrap: anywhere; word-break: break-word; max-width: 200px;
}

/* Readable data tables everywhere on this screen: zebra rows plus
   tabular, right-aligned figures so a column of numbers actually lines
   up instead of ragging left. */
.perf-classes .ov2-table tbody tr:nth-child(even),
.perf-cuts .ov2-table tbody tr:nth-child(even),
.perf-picks .ov2-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.perf-classes .ov2-table td:nth-child(n+2),
.perf-cuts .ov2-table td:nth-child(n+2),
.perf-picks .ov2-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.perf-classes .ov2-table td:nth-child(2), .perf-classes .ov2-table td:nth-child(4),
.perf-classes .ov2-table td:nth-child(5), .perf-classes .ov2-table td:nth-child(6), .perf-classes .ov2-table td:nth-child(7),
.perf-cuts .ov2-table td:nth-child(2), .perf-cuts .ov2-table td:nth-child(4),
.perf-cuts .ov2-table td:nth-child(5), .perf-cuts .ov2-table td:nth-child(6), .perf-cuts .ov2-table td:nth-child(7) {
  text-align: right;
}

.perf-picks { display: flex; flex-direction: column; gap: var(--sp-5); }
.perf-reasoning { padding: var(--sp-9); }
.perf-reasoning__title { margin: 0 0 var(--sp-7); font-family: var(--font-display); font-size: 16px; font-weight: 800;
  letter-spacing: .06em; color: var(--v-t0); }
.perf-matrix { display: grid; grid-template-columns: 120px 1fr 1fr; gap: var(--sp-4); align-items: stretch; }
.perf-matrix__row { display: contents; }
.perf-matrix__colhead { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t5);
  align-self: end; padding-bottom: var(--sp-2); text-align: center; }
.perf-matrix__rowhead { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--v-t5);
  align-self: center; }
.perf-matrix__cell { padding: var(--sp-6); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  text-align: center; --r: 8px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.perf-matrix__value { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--v-t0); }
.perf-matrix__label { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--v-t5); }
.perf-reasoning__untested { margin: var(--sp-6) 0 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t4); }
.perf-reasoning__note { margin: var(--sp-3) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }

.perf-spark { padding: var(--sp-9); }
.perf-spark__title { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: 16px; font-weight: 800;
  letter-spacing: .06em; color: var(--v-t0); }
.perf-spark__svg { width: 100%; height: auto; display: block; }
.perf-spark__zero { stroke: rgba(255, 255, 255, .18); stroke-width: 1; stroke-dasharray: 3 3; }
.perf-spark__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.perf-spark__line--all { stroke: var(--v-t3); }
.perf-spark__line--forward { stroke: var(--v-live); }
.perf-spark__legend { display: flex; gap: var(--sp-7); margin-top: var(--sp-5); flex-wrap: wrap; }
.perf-spark__legend-item { font-family: var(--font-mono); font-size: 13px; padding-left: 18px; position: relative; }
.perf-spark__legend-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 2px; }
.perf-spark__legend-item--all { color: var(--v-t3); }
.perf-spark__legend-item--all::before { background: var(--v-t3); }
.perf-spark__legend-item--forward { color: var(--v-live-label); }
.perf-spark__legend-item--forward::before { background: var(--v-live); }
.perf-note { margin: 0; font-size: 13.5px; color: var(--v-t5); }

/* ---- ANALYTICAL CUTS (web/js/performance.js's renderCuts, Task C3) ------
   BY MARKET / BY ODDS RANGE / BY DECISION GRADE / BY CLASS tables plus a
   ROLLING (last 7 / last 30) row -- reuses .ov2-table/.ov2-table-wrap for
   every table and .sechead for the section head (both already declared
   above/elsewhere); the only new primitives are this block's own
   .perf-cuts__* layout rules and the two signed-figure colour classes,
   which reuse the SAME --v-win-lit/--v-money-lit settlement-colour tokens
   this file's own SETTLEMENT COLOR convention (see this file's later
   comment above .rec-strip) already defines -- never a new colour. A THIN
   bucket (n_settled < 20, performance.js's own guard) never gets either
   colour class, only the shared .pv-chip--warn "THIN SAMPLE" chip
   (caution amber, the same tone every other "not enough to trust yet"
   state in this client already uses). */
.perf-cuts { display: flex; flex-direction: column; gap: var(--sp-9); }
.perf-cuts__block { display: flex; flex-direction: column; gap: var(--sp-4); }
.perf-cuts__title { margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 800;
  letter-spacing: .1em; color: var(--v-t2); }
.perf-cuts__label { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.perf-cuts__thin { flex: none; }
.perf-cuts__figure--pos { color: var(--v-win-lit); }
.perf-cuts__figure--neg { color: var(--v-money-lit); }
.perf-cuts__rolling-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); }
.perf-cuts__rolling-cell { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.perf-cuts__rolling-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.perf-cuts__rolling-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t5); }
.perf-cuts__rolling-figs { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-family: var(--font-mono); font-size: 14.5px; color: var(--v-t1); }
.perf-cuts__note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }
@media (max-width: 899px) {
  .perf-cuts__rolling-row { grid-template-columns: 1fr; }
  /* EVERY PRICED SIDE is eight columns. Squeezed into a phone the verdict
     word ran into the evidence tier and the value points ran into the
     market-implied percent. Scroll it in its own rail instead of dropping
     columns -- the tier is what caps how strong the word is allowed to be,
     so it is not something to hide on small screens. */
  .opp-ranked { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .opp-ranked .ov2-table { min-width: 620px; }
  .opp-ranked .ov2-table th,
  .opp-ranked .ov2-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .opp-ranked .ov2-table td:nth-child(7),
  .opp-ranked .ov2-table td:nth-child(8) { white-space: nowrap; }

  /* EVERY OTHER MARKET ON THE BOARD is nine columns -- same rail-scroll
     treatment as EVERY PRICED SIDE just above, not column-dropping. */
  .opp-deriv .ov2-table { min-width: 680px; }
  .opp-deriv .ov2-table th,
  .opp-deriv .ov2-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .opp-deriv .ov2-table td:nth-child(7),
  .opp-deriv .ov2-table td:nth-child(8),
  .opp-deriv .ov2-table td:nth-child(9) { white-space: nowrap; }

  .opp-thin { padding: var(--sp-6) var(--sp-6); }
}

/* ---- PRICE VERDICT block (web/js/betcheck.js's renderPriceVerdict) -----*/
/* PRICE VERDICT -- the visually dominant block on Bet Check (spec: this
   is the one thing a reader should not be able to miss). Bigger padding
   than a peer bc2-block, a left rule and soft background wash keyed to
   the same tone the word chip already uses (dom.js's priceVerdictTone --
   money/live/outline/warn), and the two price figures scaled up to
   headline size. */
.pv-block { position: relative; overflow: hidden; padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-6);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.pv-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.pv-block--money { box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .32); background: linear-gradient(150deg, rgba(255, 61, 87, .1), rgba(255, 255, 255, .012)); }
.pv-block--money::before { background: linear-gradient(180deg, var(--v-money), var(--v-money-2)); }
.pv-block--live { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3); background: linear-gradient(150deg, rgba(0, 224, 255, .08), rgba(255, 255, 255, .012)); }
.pv-block--live::before { background: linear-gradient(180deg, var(--v-live), var(--v-live-2)); }
.pv-block--warn { box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .3); background: linear-gradient(150deg, rgba(255, 176, 32, .08), rgba(255, 255, 255, .012)); }
.pv-block--warn::before { background: linear-gradient(180deg, var(--v-warn), var(--v-warn-2)); }
.pv-block--outline::before { background: rgba(255, 255, 255, .25); }
.pv-block__head { display: flex; align-items: center; }
.pv-block__eyebrow { font-family: var(--font-display); font-size: 13.5px; font-weight: 800; letter-spacing: .2em; color: var(--v-t3); }
.pv-block__reason { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v-t3); }
.pv-block__risk { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v-warn-lit); }
.pv-block__figs { display: flex; gap: var(--sp-11); flex-wrap: wrap; }
.pv-block__fig-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--v-t5); margin-bottom: var(--sp-3); }
.pv-block__fig-value { font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; color: #FFF; line-height: .95; }
.pv-block__meta { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.pv-block__list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.pv-block__list--reasons { color: var(--v-t3); }
.pv-block__list--risks { color: var(--v-warn-lit); }
.pv-block__basis { margin: var(--sp-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--v-t6); }

/* ---- MODEL vs MARKET panel (web/js/games.js) ----------------------------*/
.gmv { padding: var(--sp-9); margin: var(--sp-9) 0; }
.gmv__eyebrow { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--v-t1); margin-bottom: var(--sp-7); }
.gmv__unranked-note { margin: 0 0 var(--sp-7); font-size: 13px; line-height: 1.4; color: var(--v-t5); }
/* Two ranked-price cards side by side on desktop (BEST SUPPORTED PRICE
   first) -- each .gmv__col is its own bordered, chamfered card rather
   than a bare column of text, and the winning side gets a brighter edge
   so "which side is better supported" reads at a glance before any text
   is even parsed. */
.gmv__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.gmv__col { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-7);
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); --r: var(--r-panel);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.gmv__col:has(.gmv__rank--best) {
  background: linear-gradient(150deg, rgba(255, 61, 87, .08), rgba(255, 255, 255, .012));
  box-shadow: inset 0 0 0 1px rgba(255, 61, 87, .3);
}
.gmv__rank-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
.gmv__rank { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.gmv__rank--best { color: var(--v-money-lit); }
.gmv__rank--other { color: var(--v-t5); }
.gmv__rank-caption { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--v-t5); }
.gmv__col-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--v-t2); }
.gmv__price-line { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 800; color: #FFF; }
.gmv__tier { margin: 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t5); }
/* WHY / AGAINST as their own small cards, not a bare bulleted list --
   cyan for support, amber-warm neutral for risk (never red -- red here
   is reserved for the price-advantage rank badge above, not for a risk
   line). */
.gmv__evidence { margin-top: var(--sp-2); padding: var(--sp-5); --r: var(--r-badge);
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gmv__evidence--why { box-shadow: inset 2px 0 0 var(--v-live), inset 0 0 0 1px rgba(0, 224, 255, .16); }
.gmv__evidence--against { box-shadow: inset 2px 0 0 var(--v-warn), inset 0 0 0 1px rgba(255, 176, 32, .16); }
.gmv__evidence-label { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--v-t5); text-transform: uppercase; }
.gmv__evidence-list { margin: 0; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--v-t3); }
.gmv__evidence-list li { margin-bottom: var(--sp-1); }
.gmv__evidence-list li:last-child { margin-bottom: 0; }
.gmv__model-line { margin: var(--sp-7) 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.gmv-engine { margin-top: var(--sp-6); padding-top: var(--sp-6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.gmv-engine__title { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
  letter-spacing: .1em; color: var(--v-t3); }
.gmv-engine__summary { margin: 0 0 var(--sp-4); font-family: var(--font-mono); font-size: 13px; color: var(--v-t4); }
.gmv-engine__none { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }

/* WHY there is no pick. Sits directly under the "no forward-test system
   played" line, which on its own is a dead end: it says nobody acted but not
   whether the systems examined the game and passed, or never reached it. */
.gmv-engine__standdown { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03); }
.gmv-engine__standdown--absent { font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }
.gmv-engine__standdown-headline { margin: 0 0 var(--sp-3); font-size: 14.5px;
  line-height: 1.5; color: var(--v-t2); }
.gmv-engine__standdown-list { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-2); }
.gmv-engine__standdown-item { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2); font-size: 13.5px; line-height: 1.5; }
.gmv-engine__standdown-count { font-family: var(--font-mono); font-size: 13px;
  color: var(--v-t3); white-space: nowrap; }
.gmv-engine__standdown-why { color: var(--v-t5); }
/* Amber, never red: a system standing down is correct behaviour, not a fault.
   Only a reason that is purely a matter of timing earns this chip. */
.gmv-engine__standdown-chip { font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .06em; padding: 1px var(--sp-2); border-radius: 2px;
  color: var(--v-warn-label); border: 1px solid var(--v-warn-2); white-space: nowrap; }
.gmv-engine__plays { display: flex; flex-direction: column; gap: var(--sp-3); }
.gmv-engine__play { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13.5px; }
.gmv-engine__play-system { font-family: var(--font-mono); color: var(--v-t2); }
.gmv-engine__play-side { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t5); }
.gmv-engine__thesis { font-size: 13.5px; color: var(--v-t4); }
.gmv-engine__fatals { margin-top: var(--sp-5); padding: var(--sp-5); background: rgba(255, 176, 32, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .3); --r: 8px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.gmv-engine__fatals-title { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em;
  color: var(--v-warn-label); }
.gmv-engine__fatals-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--v-warn-lit); }
.gmv-engine__note { margin: var(--sp-5) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }

/* ---- 899px and below ----------------------------------------------------*/
@media (max-width: 899px) {
  .opp-section { padding: 0 var(--gutter-mobile) var(--sp-9); }
  .opp-slateband { padding: var(--sp-4) var(--gutter-mobile); }
  .opp-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .vmeter-row { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .vmeter-row__figure { text-align: left; }

  .perf-screen { padding: var(--sp-7) var(--gutter-mobile) var(--sp-13); gap: var(--sp-9); }
  .perf-summary { grid-template-columns: 1fr; }
  .perf-matrix { grid-template-columns: 90px 1fr 1fr; }
  .perf-matrix__value { font-size: 20px; }

  .gmv__cols { grid-template-columns: 1fr; }
}

/* =========================================================================
 * RECORD STRIP / MATCHUP GRID / DAILY RECAP -- Task F2 (2026-09-07)
 *
 * .rec-  (web/js/recordstrip.js, GET /record)      TODAY / LAST 7 / LAST 30
 * .mx-   (web/js/matchups.js, GET /today +
 *         GET /daily/{date} + GET /opportunities/{date})  THE MATCHUP GRID
 * .day-  (web/js/dayrecap.js, GET /daily + GET /daily/{date})
 *         the daily-recap gallery and the #/day/{date} audit-trail detail
 *
 * SETTLEMENT COLOR (read before touching any --v-win/--v-money rule
 * below): a settled WIN renders --v-win (tokens.css, new) -- none of the
 * existing money/live/warn trio fits a settlement outcome. A settled
 * LOSS renders --v-money -- the one deliberate use of red beyond a price
 * advantage anywhere in this system, because a settled loss is a real,
 * booked negative outcome, not a caution or an absence (tokens.css's own
 * comment on --v-win repeats this same rule at its source). A push
 * renders neutral grey. PENDING/UNSETTLED stay the ordinary amber
 * --v-warn family, matching every other "not settled yet" state already
 * in this client.
 * ========================================================================= */

/* ---- RECORD STRIP ------------------------------------------------------
   The lead summary wherever it mounts (#/today above the hero, #/performance
   above the recap gallery): W-L-P stays a neutral count, units net and
   return % carry the win/loss colour and read as the big confident figure
   -- this is the number a reader's eye should land on first. */
.rec-strip { padding: 0 var(--gutter-desktop) var(--sp-9); }
.rec-strip__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.rec-cell { padding: var(--sp-8) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4);
  background: linear-gradient(150deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.rec-cell__label { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .16em;
  color: var(--v-t5); }
.rec-cell__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); }
.rec-cell__record { font-family: var(--font-mono); font-size: 17px; color: var(--v-t2); }
.rec-cell__sep { color: var(--v-t7); font-size: 15px; }
.rec-cell__units { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800; color: var(--v-t1); line-height: 1; }
.rec-cell__pct { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--v-t3); }
.rec-cell__units--pos, .rec-cell__pct--pos { color: var(--v-win-lit); }
.rec-cell__units--neg, .rec-cell__pct--neg { color: var(--v-money-lit); }
.rec-cell__pending { margin: 0; font-size: 13.5px; color: var(--v-warn-label); }
.rec-cell__empty { margin: 0; font-size: 13.5px; color: var(--v-t5); }
.rec-strip__note { margin: var(--sp-5) 0 0; font-size: 13.5px; color: var(--v-t5); }

/* ---- MATCHUP GRID ------------------------------------------------------ */
.mx-section { padding: 0 var(--gutter-desktop) var(--sp-11); }
.mx-body { display: flex; flex-direction: column; gap: var(--sp-9); }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-6); }
/* Denser card: tighter padding/gap than a first pass, and every internal
   section (.mx-ml/.mx-read/.mx-frozen) trims its own top padding to match
   -- the goal is more games per screen without losing the two prices as
   the card's visual anchor. */
.mx-card { padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.mx-card--qualifies { box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .4), 0 0 0 1px rgba(0, 224, 255, .12); }
.mx-card__header { display: flex; align-items: center; gap: var(--sp-4); }
.mx-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; --r: 6px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.mx-card__matchup { flex: 1; font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 800; color: var(--v-t0);
  text-align: center; }
/* First pitch and venue: one of the most-read facts on a matchup card, and
   it was set smaller than the fine print. Data, not a label. */
.mx-card__meta { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t4); text-align: center; }
.mx-card__probables { display: flex; justify-content: space-between; gap: var(--sp-5); font-size: 13.5px; color: var(--v-t4); }
.mx-card__probable { display: flex; align-items: baseline; gap: var(--sp-2); }
.mx-card__probable-abbr { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t6); }
.mx-card__probable-none { color: var(--v-t6); font-style: italic; }

.mx-ml, .mx-read, .mx-frozen { padding-top: var(--sp-4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.mx-ml__title, .mx-read__title, .mx-frozen__title {
  margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; color: var(--v-t5); }
/* Two prices as the visual anchor: bigger and brighter than everything
   else on the card, market-implied % printed beside each rather than
   stacked below it. */
.mx-ml__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.mx-ml__col { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3) 0; }
.mx-ml__abbr { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t6); }
/* Row-wrap with explicit order: price and its market-implied % sit on the
   same baseline (the pair the spec calls the card's visual anchor), the
   book and capture age drop to their own line beneath. */
.mx-ml__side { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-4); row-gap: 3px; }
.mx-ml__price { order: 1; font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 800; color: #FFF; line-height: 1; }
/* Carries a percentage and a book count -- a figure a reader is meant to
   compare against the price beside it, so it is sized like one. */
.mx-ml__consensus { order: 2; margin-left: auto; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-live-label); white-space: nowrap; }
.mx-ml__book { order: 3; flex-basis: 100%; font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t5); }
.mx-ml__age { order: 4; flex-basis: 100%; font-family: var(--font-mono); font-size: 12px; color: var(--v-t6); }
.mx-ml__none { margin: 0; font-size: 13.5px; color: var(--v-t6); }

.mx-read__side { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mx-read__side:last-child { margin-bottom: 0; }
.mx-read__abbr { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--v-t6); }
.mx-read__vp { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-money-lit); }
.mx-read__reason { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--v-t5); }

.mx-frozen__none-forward { margin: 0 0 var(--sp-3); font-size: 13.5px; color: var(--v-t5); }
.mx-frozen__empty { margin: 0; font-size: 13.5px; color: var(--v-t5); }
.mx-frozen__list { display: flex; flex-direction: column; gap: var(--sp-5); }
/* The frozen-positions summary is a CONTROL (opens a disclosure of staked
   paper positions), not a plain inline link -- a bordered, chamfered bar
   with its own hover state so it reads as something to press. */
.mx-frozen__details summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  cursor: pointer; list-style: none; padding: 9px 13px; --r: var(--r-badge);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--v-live-label); margin-bottom: var(--sp-4); }
.mx-frozen__details summary::-webkit-details-marker { display: none; }
.mx-frozen__details summary::after { content: "SHOW ▾"; flex: none; font-size: 12px; letter-spacing: .1em; color: var(--v-t6); }
.mx-frozen__details[open] summary::after { content: "HIDE ▴"; }
.mx-frozen__details summary:hover { background: rgba(255, 255, 255, .075); color: var(--v-live); }

.mx-pos {
  padding: var(--sp-5); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  --r: 8px; clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  display: flex; flex-direction: column; gap: var(--sp-2); }
.mx-pos__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mx-pos__meaning { margin: 0; font-size: 13px; line-height: 1.45; color: var(--v-t5); }
.mx-pos__market { margin: 0; font-size: 13.5px; color: var(--v-t2); }
.mx-pos__figs { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.mx-pos__price { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--v-t0); }
.mx-pos__books { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t5); }
.mx-pos__vp { font-family: var(--font-mono); font-size: 13px; color: var(--v-money-lit); }
.mx-pos__vp-reason { margin: 0; font-size: 13px; line-height: 1.45; color: var(--v-warn-lit); }
.mx-pos__profit { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; }
.mx-pos__profit--pos { color: var(--v-win-lit); }
.mx-pos__profit--neg { color: var(--v-money-lit); }

/* Class-specific chip tints, distinct from the money/live/warn reserved
   trio -- a paper position's SYSTEM CLASS is identity/classification, not
   a price advantage or a caution, so it gets its own small palette. */
.mx-pos__class--control { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: var(--v-t3); }
.mx-pos__class--market_reference { background: rgba(0, 224, 255, .14); box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .38);
  color: var(--v-live-label); }
.mx-pos__class--forward_test { background: rgba(255, 176, 32, .16); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .4);
  color: var(--v-warn-label); }

/* Settlement chips -- see this section's own head comment for the color
   rule (win green / loss red / push grey / pending amber). Shared by
   web/js/matchups.js's per-game cards and web/js/dayrecap.js's audit
   trail via the one frozenPositionRow renderer both import. */
.day-settle {
  display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; --r: 6px;
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r)); }
.day-settle--win { background: linear-gradient(120deg, var(--v-win), var(--v-win-2)); color: var(--v-win-ink); }
.day-settle--loss { background: linear-gradient(120deg, var(--v-money), var(--v-money-2)); color: var(--v-money-ink); }
.day-settle--push { background: rgba(255, 255, 255, .14); color: var(--v-t2); }
.day-settle--pending { background: rgba(255, 176, 32, .16); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .4);
  color: var(--v-warn-label); }

.mx-outcome {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.mx-outcome__score, .mx-outcome__score-reason { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t2); }
.mx-outcome__record { font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.mx-outcome__net { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; }
.mx-outcome__net--pos { color: var(--v-win-lit); }
.mx-outcome__net--neg { color: var(--v-money-lit); }

.mx-card__link { align-self: flex-start; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; color: var(--v-live-label); }
.mx-card__link:hover { color: var(--v-live); }

/* ---- DAILY RECAP GALLERY + DETAIL --------------------------------------- */
.day-gallery-section { padding: 0 var(--gutter-desktop) var(--sp-11); }
.day-gallery-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.day-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-7);
  /* start, not stretch: a pending day carries three fewer rows than a settled
     one, and stretching left a column of dead black under the short cards.
     Each card is now exactly as tall as the record it actually holds. */
  align-items: start; }
.day-card { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4);
  background: linear-gradient(150deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)); }
.day-card__head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.day-card__date { font-family: var(--font-display); font-style: italic; font-size: 17px; font-weight: 800; color: var(--v-t0);
  text-decoration: none; }
.day-card__date:hover { color: var(--v-live); }
.day-card__record, .day-card__pending { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 22px;
  font-weight: 800; color: var(--v-t1); }
.day-card__pending { font-size: 14.5px; font-family: var(--font-mono); font-style: normal; color: var(--v-warn-label); }
.day-card__figure--pos { color: var(--v-win-lit); }
.day-card__figure--neg { color: var(--v-money-lit); }
.day-card__meta { margin: 0; font-size: 13px; color: var(--v-t5); }
.day-card__bet { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13px; margin-top: var(--sp-2); }
.day-card__bet-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--v-t5); }
.day-card__bet-line { color: var(--v-t3); }
.day-card__bet-profit--pos { color: var(--v-win-lit); font-family: var(--font-mono); }
.day-card__bet-profit--neg { color: var(--v-money-lit); font-family: var(--font-mono); }
.day-card__bet-vp { font-family: var(--font-mono); color: var(--v-money-lit); }
.day-card__bet-basis { margin: 0; color: var(--v-t6); font-size: 12.5px; }
.day-card__link { margin-top: var(--sp-3); align-self: flex-start; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .08em; color: var(--v-live-label); }
.day-card__link:hover { color: var(--v-live); }

.day-detail-screen { padding: var(--sp-9) var(--gutter-desktop) var(--sp-15); display: flex; flex-direction: column;
  gap: var(--sp-9); }
.day-detail__back { font-family: var(--font-mono); font-size: 13.5px; color: var(--v-live-label); }
.day-detail__back:hover { color: var(--v-live); }
.day-detail__head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.day-detail__date { margin: 0; font-size: 26px; }
.day-detail__basis { margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.55; color: var(--v-t3); }
.day-detail__stake-policy, .day-detail__settled-through { margin: 0; font-family: var(--font-mono); font-size: 13px;
  color: var(--v-t5); }
.day-detail__rollup { padding: var(--sp-8); }
.day-detail__rollup-title { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
  letter-spacing: .1em; color: var(--v-t3); }
/* The day's own result, in the same display treatment the Results gallery
   cards use -- it was set in the same mono as the two hundred rows below
   it, so the headline read no louder than a line item. */
.day-detail__rollup-headline { margin: 0 0 var(--sp-4); display: flex; align-items: baseline;
  gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-display); font-style: italic;
  font-weight: 800; line-height: 1; }
.day-detail__rollup-record { font-size: clamp(26px, 3vw, 34px); color: var(--v-t0); }
.day-detail__rollup-fig { font-size: clamp(20px, 2.3vw, 26px); color: var(--v-t2); }
.day-detail__rollup-fig--pos { color: var(--v-win-lit); }
.day-detail__rollup-fig--neg { color: var(--v-money-lit); }
.day-detail__rollup-sep { font-size: 18px; color: var(--v-t6); font-style: normal; }
.day-detail__rollup-line { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-t4); }
.day-detail__games { display: flex; flex-direction: column; gap: var(--sp-7); }
.day-detail__game { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.day-detail__game-head { display: flex; align-items: center; gap: var(--sp-4); }
.day-detail__game-matchup { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--v-t0); }
.day-detail__game-score, .day-detail__game-score-reason { margin: 0; font-family: var(--font-mono); font-size: 14.5px;
  color: var(--v-t2); }
.day-detail__game-record { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--v-t5); }
.day-detail__game-net--pos { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-win-lit); }
.day-detail__game-net--neg { margin: 0; font-family: var(--font-mono); font-size: 13.5px; color: var(--v-money-lit); }
.day-detail__note { margin: 0; font-size: 13.5px; color: var(--v-t5); }

/* ---- HOW-TO-READ LEGEND -- states the class/thin-board explanations
   ONCE per page instead of once per row (see dayrecap.js's own comment on
   dayDetailLegend / dayPositionRow for why). Sentences, so body face. --- */
.day-detail__legend { padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(150deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)); }
.day-detail__legend-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--v-t5); }
.day-detail__legend-line { margin: 0; display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.5; color: var(--v-t3); }
.day-detail__legend-chip { flex: none; font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; padding: 3px 8px; }
.day-detail__legend-line--thin { color: var(--v-warn-lit); }

/* ---- POSITIONS LIST -- one dense row per recommendation, not a box in a
   box. Up to ~213 of these can render on one slate, so every per-row
   sentence a prior pass printed here now lives once in the legend above;
   what's left on the row is a scan line: chips, the bet in plain English,
   the price, the figures. Body face for the bet phrase (it's a sentence
   fragment, not a figure); mono stays reserved for the price/points/units
   figures, per this product's own house style (see signup.css). -------- */
.day-detail__positions { display: flex; flex-direction: column; }
.day-pos { padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: 3px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .055); }
.day-pos:last-child { box-shadow: none; }
.day-pos__top { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.day-pos__class { flex: none; font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .07em;
  padding: 3px 7px; align-self: center; }
.day-pos__label { flex: 1 1 auto; min-width: 120px; font-size: 14.5px; font-weight: 600; color: var(--v-t1); }
.day-pos__price { flex: none; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--v-t0); }
.day-pos__profit { flex: none; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; }
.day-pos__profit--pos { color: var(--v-win-lit); }
.day-pos__profit--neg { color: var(--v-money-lit); }
.day-pos__bottom { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-left: 2px; }
.day-pos__books { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-t6); }
.day-pos__vp { font-family: var(--font-mono); font-size: 12.5px; color: var(--v-money-lit); }
.day-pos__thin { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; --r: var(--r-marker);
  clip-path: polygon(var(--r) 0, 100% 0, 100% calc(100% - var(--r)), calc(100% - var(--r)) 100%, 0 100%, 0 var(--r));
  background: rgba(255, 176, 32, .14); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .38); color: var(--v-warn-label); }
/* Scoped to this row only -- the shared .day-settle/.badge rules stay
   untouched so matchups.js's Today grid never sees this row's layout. */
.day-pos__top .day-settle, .day-pos__top .badge { flex: none; align-self: center; }

/* ---- 899px and below (RECORD STRIP / MATCHUP GRID / DAILY RECAP) ------- */
@media (max-width: 899px) {
  .rec-strip { padding: 0 var(--gutter-mobile) var(--sp-7); }
  /* Three stacked full-size cards ate the entire first phone screen, so the
     slate itself was below the fold. Keep all three visible: one compact row,
     figure over label, no card chrome competing with the games underneath. */
  .rec-strip__cells { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .rec-cell { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); }
  .rec-cell__label { font-size: 12px; letter-spacing: .1em; }
  .rec-cell__record { font-size: 14.5px; }
  .rec-cell__figure { gap: var(--sp-2); }
  .rec-cell__units { font-size: 19px; }
  .rec-cell__pct { font-size: 13.5px; }
  .rec-cell__sep { display: none; }
  .rec-cell__pending, .rec-cell__empty { font-size: 12.5px; line-height: 1.35; }

  .mx-section { padding: 0 var(--gutter-mobile) var(--sp-9); }
  .mx-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .mx-ml__cols { grid-template-columns: 1fr; }

  .day-gallery-section { padding: 0 var(--gutter-mobile) var(--sp-9); }
  .day-gallery { grid-template-columns: 1fr; }
  .day-detail-screen { padding: var(--sp-7) var(--gutter-mobile) var(--sp-13); gap: var(--sp-7); }
}