/* ============================================================================
   SPORTS TODAY — DESIGN SYSTEM
   Same layout, hierarchy, and density as the original homepage. This pass is
   craftsmanship only: one token system (color, type, space, radius, shadow,
   motion), layered surfaces in place of heavy borders, softer elevation, and
   subtle motion. iOS 17 -> iOS 18, not a redesign. Loaded via styles.load_css().
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Canvas + layered surfaces */
  --bg: #090d11;
  --surface-1: #181e25;      /* resting card */
  --surface-1-top: #1e242c;  /* card gradient top */
  --surface-2: #1f2630;      /* hover / secondary control */
  --surface-3: #283039;      /* elevated tile / badge track */

  /* Text ramp (grayscale) — brightened for ≥4.5:1 on the card surface. */
  --text-1: #f7f7f5;
  --text-2: #d3d8de;
  --text-3: #bcc3cd;   /* secondary: league labels, pitcher line, chips */
  --text-4: #a3acb8;   /* muted ("at", small labels) — nudged brighter */
  --text-meta: #aab3bd;   /* dimmed metadata (arena, TV, league, team) */
  --on-brand: #2a1103;

  /* Brand (orange) + semantics (green support, coral risk) */
  --brand: #ff7a1a;
  --brand-2: #ff9a52;
  --brand-grad: linear-gradient(180deg, #ff9b56 0%, #f47a24 100%);
  --brand-soft: rgba(244, 122, 36, .14);
  --brand-ring: rgba(247, 133, 43, .32);
  --green: #6bc68f;
  --red: #ef8e86;

  /* Hairlines + edge lighting (keep dark mode crisp) */
  --hairline: rgba(255, 255, 255, .07);
  --hairline-2: rgba(255, 255, 255, .12);
  --divider: #303844;     /* solid, higher-contrast rule for card borders/separators */
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Radius scale */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 13px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadow system */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 5px 16px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .38);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, .44), 0 3px 10px rgba(0, 0, 0, .30);
  --shadow-brand: 0 4px 14px rgba(242, 122, 32, .28);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .14s;
  --dur: .2s;
}

.block-container {
  max-width: 1160px;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ---------------------------------------------------------- TYPOGRAPHY --- */
.page-title {
  margin: 0 0 .42rem;
  color: var(--text-1);
  font-size: 2.08rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.page-title .title-accent { color: var(--brand); }

.section-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 .55rem;
}
.section-row h2 {
  margin: 0;
  color: var(--text-1);
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -.024em;
  line-height: 1.15;
}
.section-count {
  color: var(--text-3);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* League micro-label (MLB / WNBA) — caps are fine here; enlarged for legibility. */
.league-name {
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* --------------------------------------------------- BUTTONS / PILLS ----- */
/* --------------------------------------------- SEGMENTED CONTROL --------- */
/* Today / Tomorrow: the benchmark. Joined capsule, angled seam, brand gradient
   on the active side, smooth transitions. */
.date-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.date-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 268px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--edge-hi), inset 0 0 0 1px var(--hairline), var(--shadow-md);
}
.date-toggle::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -9px;
  left: 50%;
  width: 1.5px;
  height: 58px;
  background: var(--hairline-2);
  transform: rotate(22deg);
  transform-origin: center;
  pointer-events: none;
}
.date-toggle a {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1) !important;
  text-decoration: none !important;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.date-toggle a:first-child {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  padding-right: 14px;
  margin-right: -10px;
}
.date-toggle a:last-child {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 14px;
  margin-left: -10px;
}
.date-toggle a.active {
  color: var(--on-brand) !important;
  background: var(--brand);            /* vivid, solid orange — matches the logo */
  background-image: linear-gradient(180deg, #ff9036, #f4720f);
  box-shadow: var(--shadow-brand), var(--edge-hi);
}
.date-toggle a:not(.active):hover { background: var(--surface-3); color: var(--text-1) !important; }
.date-toggle a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 5; }


/* ------------------------------------------------------- MATCH CARDS ----- */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.45rem;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 184px;
  padding: .78rem .95rem .7rem;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  border: 1px solid var(--hairline);        /* softer edge — layered surface + shadow carry the card */
  box-shadow: var(--edge-hi), var(--shadow-md);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Card body isn't clickable — only a subtle surface lift on hover. */
.game-card:hover {
  border-color: var(--hairline-2);
  box-shadow: var(--edge-hi), var(--shadow-lg);
}

/* State treatments. Live/upcoming share one layout and size; finals compact
   (2026-08-24, superseding "same layout/size, color only" — a finished game's card
   was pregame-sized while most of that size carried pregame content). */
/* Live: thin orange accent bar on the left edge (pseudo-element = no size shift). */
.game-card--live::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--brand);
}
/* Final: recede with a slightly darker surface, and shrink — the score is the payload,
   so it keeps full size while everything around it steps down. The "at" separator goes
   (away-top/home-bottom already says who hosted) and the editorial signal chip goes
   (a pregame read is stale by definition once the game ends). CSS-only on purpose:
   the live-score script flips cards to final during the day, and they must shrink
   without any markup change. */
.game-card--final { background: linear-gradient(165deg, #141820, #0f1319); }
.game-card--final:hover { background: linear-gradient(165deg, #181d25, #12161c); }
.game-card--final { min-height: 0; padding-bottom: .6rem; }
.game-card--final .team-sep { display: none; }
.game-card--final .ed-card-signal { display: none; }
.game-card--final .team-logo-wrap { width: 26px; height: 26px; }
.game-card--final .team-logo { max-width: 26px; max-height: 26px; }
.game-card--final .team-row { grid-template-columns: 26px 1fr auto; }
.game-card--final .team-name { font-size: 1.08rem; }
.game-card--final .game-meta { margin-top: .5rem; }
/* Compact: schedule-only cards (no analysis footer) sit shorter — just enough for
   the matchup + time. The reader only needs awareness that the game is on. */
.game-card--compact { min-height: 122px; padding-bottom: .72rem; }

.game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: .3rem;
  min-height: 26px;
}
/* Wraps: the context is allowed a second line when the first cannot hold it (a
   doubleheader inside a series needs 178px and the row offers 68 on a phone, 80 in
   the desktop column). Flex breaks a line on the item's *hypothetical* size, so a
   short context ("Week 1") still rides beside the league and costs no height — only
   a context that genuinely does not fit drops down. */
.game-top-left { display: inline-flex; flex-wrap: wrap; align-items: center;
                 gap: .2rem .55rem; min-width: 0; }
.league-name { color: var(--text-2); flex: 0 0 auto; }

/* "Best game" — the most watchable game in its league. Orange is the app's only
   accent and this is the one card-level recommendation, so it earns it. Marked per
   league; a league we cannot judge says so beneath the grid instead. */
.bg-chip {
  flex: 0 0 auto;
  padding: .1rem .4rem;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #1a1206;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Competition context (e.g. "Week 2", "Preseason · Wk 2", "Series · NYY leads 1-0") —
   rides on the league line, dropping to its own line only when that line is too short
   for it. Deliberately quiet: it is orienting detail, not the headline, and it only
   renders when notable. Still truncates rather than wrapping to a *third* line. */
.game-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-4);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}
/* The separator hangs off the league name rather than leading the context, so a
   context that drops to its own line does not open with a stray bullet. Unwrapped it
   renders identically to a leading dot; wrapped, the trailing dot reads as the
   continuation it is. Only drawn when there is a context to separate. */
.game-top-left:has(.game-context) .league-name::after {
  content: "·"; margin-left: .4rem; color: var(--text-4); opacity: .6;
}

/* Game time — sits beside the league (game identity), close to the matchup. */
.game-time {
  padding: .16rem .5rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: var(--edge-hi);
  color: var(--text-1);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* Stacked matchup: away over home, each name with the full card width (no more
   early truncation), logo in a fixed-size container, score at the row's end. */
.teams {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: auto 0;
}
.team-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: .6rem;
}
/* Quiet "at" separator between the stacked away/home rows, indented to line up
   with the team names (past the logo column). */
.team-sep {
  padding-left: calc(34px + .6rem);
  color: var(--text-4);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
}
.team-logo-wrap { width: 34px; height: 34px; display: grid; place-items: center; }
.team-logo {
  max-width: 34px; max-height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.team-name {
  color: var(--text-1);
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.018em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-score {
  color: var(--text-3);
  font-size: 1.24rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.team-score.win { color: var(--text-1); font-weight: 850; }
.team-score.loss { color: var(--text-4); }

/* Live/final status badge (replaces the time pill) + score (Final-score V1). */
.game-state {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 750; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; box-shadow: var(--edge-hi);
}
.game-state.final { color: var(--text-3); background: var(--surface-2); }
.game-state.live { color: #ff6b5e; background: rgba(255, 107, 94, .12); }
.live-dot {
  width: .42rem; height: .42rem; border-radius: 50%; background: #ff6b5e;
  box-shadow: 0 0 0 3px rgba(255, 107, 94, .18);
}
/* Subtle winner emphasis on final cards. */
.team-row.loss .team-name { color: var(--text-3); }
.team-row.win .team-name { color: var(--text-1); }

.game-meta {
  margin-top: .42rem;
  padding-top: .4rem;
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  color: var(--text-meta);
  font-size: .9rem;
  line-height: 1.45;
}
/* Fire filter link (left) — a strong-pick shortcut that filters the props below.
   Plain orange text so it reads as an action, distinct from the Matchup pill. */
.fire-link {
  color: var(--brand-2) !important; text-decoration: none !important;
  font-size: .86rem; font-weight: 750; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.fire-link:hover { color: var(--brand) !important; }
.fire-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
/* Matchup link (right) — a bordered pill, so navigation reads differently from the
   in-page filter action. */
.matchup-link {
  flex: 0 0 auto;
  padding: .2rem .56rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--edge-hi), inset 0 0 0 1px var(--hairline-2);
  color: var(--text-2) !important;
  text-decoration: none !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.matchup-link:hover { background: var(--surface-3); color: var(--text-1) !important; }
.matchup-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Footer collapses to one link when only the Matchup pill is present. */
.game-meta:has(.fire-link) { justify-content: space-between; }
.game-meta:not(:has(.fire-link)) { justify-content: flex-end; }

/* Focus filter chip — shown when a game card has narrowed the feed to one matchup. */
.focus-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .1rem 0 .6rem; padding: .5rem .9rem;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  box-shadow: var(--edge-hi), inset 0 0 0 1px var(--brand-ring);
  color: var(--text-1); font-size: .9rem;
}
.focus-chip b { font-weight: 800; }
.focus-clear {
  color: var(--brand-2) !important; text-decoration: none !important;
  font-weight: 700; font-size: .82rem; white-space: nowrap;
}
.focus-clear:hover { color: var(--brand) !important; }
.focus-clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Global "strong pick" threshold near the Top Opportunities header. */
.thr-control { display: inline-flex; align-items: center; gap: .3rem; }
.thr-label { color: var(--text-4); font-size: .72rem; font-weight: 650; margin-right: .1rem; }
.thr-pill {
  color: var(--text-2) !important; text-decoration: none !important;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .12rem .44rem; border-radius: var(--r-pill);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.thr-pill:hover { color: var(--text-1) !important; background: var(--surface-3); }
.thr-pill.active {
  color: var(--on-brand) !important;
  background: var(--brand-grad);
  box-shadow: var(--shadow-brand);
}
.thr-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Result count + section-level data-quality note by the opportunity feed. */
.opp-count { color: var(--text-3); font-size: .82rem; font-weight: 650; margin: .1rem 0 .5rem; }
.opp-disclaimer { color: var(--text-4); font-size: .74rem; line-height: 1.4; margin: .6rem 0 0; }

/* ---------------------------------------------------- OPPORTUNITY FEED --- */
/* Two-up card grid: each opportunity is its own surface, 2 per row on wide
   screens and 1 on narrow. Doubles props-per-screen without hiding evidence. */
.op-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.op-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "score identity identity"
    ".     good     risk"
    ".     line     line";
  column-gap: .8rem;
  row-gap: .72rem;
  align-items: start;
  padding: .85rem .95rem;
  background: var(--surface-1);
  border-radius: var(--r-md);
  box-shadow: var(--edge-hi), var(--shadow-sm);
  transition: background var(--dur) var(--ease);
}
.op-row:hover { background: var(--surface-2); }
.op-score { grid-area: score; align-self: center; }
.op-identity { grid-area: identity; align-self: center; }
.op-good { grid-area: good; }
.op-risk, .op-flat { grid-area: risk; }   /* neutral "no notable risk" occupies the risk slot too */

/* The raw recent line — the fact under the evidence, so a reader can disagree with us.
   Deliberately quiet: tabular figures, low contrast, and a single accent for games that
   cleared the bar. It adds one short row, not a block. */
.op-line {
  grid-area: line;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding-top: .1rem;
  border-top: 1px solid var(--hairline, rgba(255,255,255,.06));
  margin-top: .1rem;
}
.op-line-label {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: 0 0 auto;
}
.op-line-vals {
  display: flex;
  gap: .28rem;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.op-line-vals::-webkit-scrollbar { display: none; }
.op-lv {
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  line-height: 1;
  padding: .2rem .34rem;
  border-radius: 4px;
  color: var(--text-3);
  background: var(--surface-2);
  flex: 0 0 auto;
}
.op-lv.hit { color: var(--positive); background: var(--positive-bg, rgba(122,193,120,.12)); }
.op-line-tally {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------------------------------------------------- PICKS SHORTLIST -----
   Device-local selection (a shortlist, not a bet slip). Orange is the accent
   reserved for "the score + selection" — this is that selection. The button
   ships in the markup but stays hidden until the script confirms storage
   works, so a no-JS or private-mode page never shows a dead control. */
.op-row { position: relative; }
.op-pick {
  display: none;
  position: absolute;
  top: .45rem; right: .45rem;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
body.picks-ready .op-pick { display: inline-flex; }
body.picks-ready .op-identity { padding-right: 2.2rem; }   /* keep names clear of the button */
.op-pick .mlb-ic { width: 19px; height: 19px; }
.op-pick:hover { color: var(--text-2); background: var(--surface-2); }
.op-pick[aria-pressed="true"] { color: var(--brand); }
.op-pick[aria-pressed="true"] .mlb-ic { fill: var(--brand); }
.op-row.is-picked { box-shadow: inset 0 0 0 1px var(--brand-ring), var(--edge-hi), var(--shadow-sm); }

/* The floating tray: a count chip that opens a small panel. Fixed bottom-right,
   above the iOS home-bar safe area. Hidden entirely when nothing is picked. */
.pick-tray {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.pick-chip {
  order: 2;
  border: 0; border-radius: var(--r-pill);
  padding: .58rem 1.05rem;
  background: var(--brand-grad);
  color: var(--on-brand);
  font: 700 .85rem/1 var(--font);
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--shadow-brand), var(--shadow-sm);
}
.pick-panel {
  order: 1;
  min-width: 240px; max-width: min(320px, calc(100vw - 2rem));
  padding: .55rem;
  background: var(--surface-2);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--hairline-2), var(--shadow-lg);
}
/* Group headers inside the panel — slim on purpose: one small-caps league line,
   one quiet game line, so grouping costs almost no height. */
.pick-league {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4);
  padding: .5rem .45rem .1rem;
}
.pick-league:first-child { padding-top: .15rem; }
.pick-game {
  font-size: .72rem; font-weight: 640;
  color: var(--text-2);
  padding: .22rem .45rem 0;
}
.pick-line {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .42rem .45rem;
  border-radius: var(--r-xs);
}
.pick-line:hover { background: var(--surface-3); }
.pick-who { color: var(--text-1); font-size: .84rem; font-weight: 640; min-width: 0; }
.pick-mkt { color: var(--text-3); font-size: .74rem; font-weight: 500; }
.pick-remove {
  border: 0; background: none; color: var(--text-4);
  font-size: 1rem; line-height: 1; padding: .3rem .45rem;
  border-radius: var(--r-xs); cursor: pointer; flex: 0 0 auto;
}
.pick-remove:hover { color: var(--red); background: var(--surface-3); }
.pick-actions {
  display: flex; gap: .45rem; justify-content: flex-end;
  margin-top: .4rem; padding-top: .5rem;
  border-top: 1px solid var(--hairline);
}
.pick-share, .pick-clear {
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 640 .78rem/1 var(--font); padding: .48rem .85rem;
}
.pick-share { background: var(--brand-grad); color: var(--on-brand); }
.pick-clear { background: var(--surface-3); color: var(--text-3); }
.pick-clear:hover { color: var(--text-1); }

/* Results join: the personal record line plus an orange edge on picked rows. */
.pick-verdict {
  display: inline-block;
  margin: .35rem 0 .6rem;
  padding: .42rem .8rem;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-ring);
  color: var(--text-1);
  font-size: .84rem; font-weight: 680;
  font-variant-numeric: tabular-nums;
}
/* A ring rather than a left edge — the result colour already owns border-left. */
.prop-item.is-pick { box-shadow: inset 0 0 0 1px var(--brand-ring), var(--edge-hi); }
.prop-item.is-pick[open] { box-shadow: inset 0 0 0 1px var(--brand-ring), var(--edge-hi), var(--shadow-sm); }

/* Score — compact rounded rect, thin orange border, dark interior, orange number */
.op-score {
  min-width: 44px; height: 44px; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: #14181f;
  border: 1px solid var(--brand);
  box-shadow: var(--edge-hi);
  color: var(--brand-2);
  font-size: 1.15rem; font-weight: 850; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Identity — merged avatar (headshot + team badge) + text */
.op-identity { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.op-avatar { position: relative; width: 50px; height: 50px; flex: 0 0 50px; }
/* Circular clip wrapper: lets the photo scale to fill without growing the
   circle or clipping the (absolutely-positioned, unclipped) badge. */
.op-photo-wrap {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--edge-hi), 0 1px 3px rgba(0, 0, 0, .35);
}
.op-photo {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 16%;
  transform-origin: center 20%;
}
/* Zoom the player to fill the frame; sources sit at different scales. */
.op-photo.op-zoom-mlb { transform: scale(1.16); }
.op-photo.op-zoom-wnba { transform: scale(1.24); }
.op-photo.op-zoom-gen { transform: scale(1.16); }
.op-photo.logo {
  object-fit: contain; object-position: center; transform: none;
  background: rgba(255, 255, 255, .05); padding: 5px;
}
.op-photo.op-ph-fallback {
  transform: none;
  background: #222a34 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c8792'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 20c0-4.2 3.6-6.5 8-6.5s8 2.3 8 6.5z'/%3E%3C/svg%3E") center 60% / 62% no-repeat;
}
.op-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 23px; height: 23px; border-radius: 50%;
  object-fit: contain; padding: 1px;
  background: var(--surface-1);
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.op-info { min-width: 0; }
.op-player {
  color: var(--text-1); font-size: 1.02rem; font-weight: 800;
  line-height: 1.12; letter-spacing: -.017em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Market: identity, but neutral — orange is reserved for the score + selection, so
   it isn't repeated on every row. Slightly lighter weight for hierarchy. */
.op-market { color: var(--text-2); font-size: .9rem; font-weight: 650; margin-top: .1rem; }
.op-team {
  color: var(--text-3); font-size: .72rem; margin-top: .12rem;   /* brightened metadata */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Evidence — colored heading with an icon, neutral body. Heading weight reduced so
   the player/score stay the loudest things on the row. */
.op-evidence { min-width: 0; }
.op-ev-head { display: inline-flex; align-items: center; gap: .34rem; font-size: .82rem; font-weight: 640; letter-spacing: -.005em; margin-bottom: .22rem; }
.op-ev-head .mlb-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.op-good .op-ev-head { color: var(--green); }
.op-risk .op-ev-head { color: var(--red); }
.op-flat .op-ev-head { color: var(--text-3); }        /* no notable risk — calm, neutral */
.op-ev-body { color: #dee3e9; font-size: .8rem; line-height: 1.42; }   /* brighter body for low-light legibility */

/* Card chip for a team-level read, in the slot the prop count would occupy. Quieter
   than the 🎯 link beside it: this is context, not a call to action. */
.ed-card-signal {
  color: var(--text-3);
  font-size: .76rem;
  font-weight: 620;
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The scored population, shown under the served headline. Deliberately quieter: it
   is context for the number above, not a competing figure. */
.perf-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
  margin: -.35rem 0 .9rem;
  color: var(--text-3);
  font-size: .82rem;
}
.perf-subline strong { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.perf-subline .ph-meta { color: var(--text-4); font-size: .76rem; }

/* ------------------------------------------------- EDITORIAL (THE READ) --- */
/* Team-level curation for leagues without player props. Reuses the shared evidence
   primitives (.op-evidence / .op-ev-head / .op-ev-body) so it reads as the same
   product; only layout lives here. */
.ed-lead {
  color: var(--text-1);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 560;
  margin-bottom: .7rem;
}
.ed-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .95rem; }
.ed-chip {
  padding: .2rem .56rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--edge-hi);
  color: var(--text-2);
  font-size: .74rem;
  font-weight: 640;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* Evidence and caveats share one grid and one block size — a caveat is never
   visually demoted relative to the supporting evidence beside it. */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem 1.4rem;
}

/* ---------------------------------------------------- GAME DEEP DIVE ----- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--text-3) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: .84rem;
  margin-bottom: .8rem;
  transition: color var(--dur) var(--ease);
}
.back-link:hover { color: var(--brand-2) !important; }

.detail-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  box-shadow: var(--edge-hi), var(--shadow-md);
  margin-bottom: .8rem;
}
.detail-team { display: flex; align-items: center; gap: .75rem; }
.detail-team.home { justify-content: flex-end; text-align: right; }
.detail-logo {
  width: 54px; height: 54px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}
.detail-name { color: var(--text-1); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.detail-sub { color: var(--text-3); font-size: .76rem; margin-top: .16rem; }
.detail-at { color: var(--text-4); font-size: .95rem; font-weight: 600; text-align: center; }

/* -------------------------------------------------------- RESPONSIVE ----- */
@media (max-width: 900px) {
  /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so the track
     never shrinks below the widest card's *min-content* width — and a card is full of
     `white-space: nowrap` text (the time pill, the "Best game" chip, the competition
     context), whose min-content is its whole line. One long context string ("Game 1 ·
     Series · NYY leads 1-0") pushed the single mobile column to 465px inside a 361px
     grid, so every card ran off the side of the phone and the page scrolled sideways.
     The desktop track above was already floored at 0; these two were not. */
  .schedule-grid { grid-template-columns: minmax(0, 1fr); }
  .op-list { grid-template-columns: minmax(0, 1fr); }   /* one card per row */
}

@media (max-width: 650px) {
  .block-container { padding-left: .7rem; padding-right: .7rem; }
  .page-title { font-size: 1.65rem; }
  .date-toggle-wrap { justify-content: flex-start; margin-top: .55rem; }
  .op-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .op-badge { width: 20px; height: 20px; }
  /* Narrow phones: stack the two evidence blocks under the identity. The "line"
     area must be re-declared here — an area named in `grid-area` but absent from
     the template gets an *implicit* column bolted onto the right of the grid,
     which squeezed every card's content into half its width on phones. */
  .op-row {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "score identity"
      ".     good"
      ".     risk"
      "line  line";
  }
  /* A name that wraps to two lines beats one that ellipsizes into nothing when
     something (a zoom setting, font inflation) narrows the column unexpectedly. */
  .op-player { white-space: normal; }
  .team-name { font-size: 1.2rem; }
  /* Footer links get tight side by side on phones — stack them. */
  .game-meta { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .detail-header { grid-template-columns: 1fr; text-align: left; }
  .detail-team.home { justify-content: flex-start; text-align: left; }
  .detail-at { display: none; }
}

/* ============================================================================
   MLB GAME PAGE (V1.1) — editorial scorebook character on the same design
   system. The hero is a game summary; sections read as a briefing, not a grid.
   ========================================================================== */
:root {
  --mlb-navy: #101b2e;
  --mlb-navy-2: #16233a;
  --mlb-navy-line: rgba(150, 180, 220, .12);
}

/* Hero — compact game summary (names, form, probable starters) */
.mlb-hero {
  padding: 1.05rem 1.25rem; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--mlb-navy-2), var(--mlb-navy));
  box-shadow: var(--edge-hi), var(--shadow-md); margin-bottom: 1.2rem;
}
.mlb-hero-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; gap: 1rem; }
.mlb-hero-team { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.mlb-hero-team.home { flex-direction: row-reverse; text-align: right; }
.mlb-hero-logo { width: 50px; height: 50px; object-fit: contain; flex: 0 0 50px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.mlb-hero-side { display: flex; flex-direction: column; gap: .26rem; min-width: 0; }
.mlb-hero-team.home .mlb-hero-side { align-items: flex-end; }
.mlb-hero-name { font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-1); line-height: 1.1; }
.mlb-hero-sp { color: var(--text-2); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mlb-hero-sp.tbd { color: var(--text-4); font-style: italic; font-weight: 500; }
.mlb-hero-vs { color: var(--text-4); font-weight: 700; font-size: 1rem; padding-top: .7rem; }
.mlb-hero-meta { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--mlb-navy-line); color: var(--text-3); font-size: .76rem; font-weight: 500; letter-spacing: .01em; }
.mlb-hero-note { margin-top: .4rem; color: var(--text-4); font-size: .74rem; font-style: italic; }

/* Recent-form pill (shared by hero + identity) */
.mlb-form-pill { display: inline-flex; align-items: center; gap: .22rem; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.mlb-form-pill.up { color: var(--green); }
.mlb-form-pill.down { color: var(--red); }
.mlb-form-pill.steady { color: var(--text-3); }

/* Sections — tighter vertical rhythm (V1.1) */
.mlb-section { margin-top: 1.4rem; }
.mlb-section-head { margin-bottom: .7rem; }
.mlb-section-head h2 { margin: 0; font-size: 1.18rem; font-weight: 850; letter-spacing: -.022em; color: var(--text-1); }

/* What This Game Is About — scannable insight cards */
.mlb-insights { display: flex; flex-direction: column; gap: .5rem; }
.mlb-insight { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.mlb-insight p { margin: 0; color: var(--text-1); font-size: .92rem; line-height: 1.45; font-weight: 550; }

/* Team identity */
.mlb-identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mlb-identity-card { padding: 1rem 1.1rem; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--surface-1-top), var(--surface-1)); box-shadow: var(--edge-hi), var(--shadow-sm); }
.mlb-identity-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.mlb-identity-logo { width: 38px; height: 38px; object-fit: contain; }
.mlb-identity-team { font-size: 1.06rem; font-weight: 800; letter-spacing: -.015em; color: var(--text-1); }
.mlb-identity-sample { color: var(--text-4); font-size: .68rem; margin-top: .08rem; }
.mlb-identity-summary { color: var(--text-2); font-size: .88rem; line-height: 1.45; margin-bottom: .8rem; }
.mlb-metrics { display: flex; flex-direction: column; gap: .5rem; }
.mlb-metric-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: .6rem; }
.mlb-metric-name { color: var(--text-3); font-size: .74rem; font-weight: 650; }
.mlb-bar { height: 7px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); overflow: hidden; }
.mlb-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand-grad); }
.mlb-bar-fill.hi { background: linear-gradient(90deg, #5fb37a, var(--green)); }
.mlb-bar-fill.lo { background: linear-gradient(90deg, #7a5a56, var(--red)); }
.mlb-bar-fill.mid { background: var(--brand-grad); }
.mlb-metric-right { display: inline-flex; align-items: baseline; gap: .35rem; justify-content: flex-end; }
.mlb-tier { font-size: .72rem; font-weight: 750; }
.mlb-tier.hi { color: var(--green); }
.mlb-tier.mid { color: var(--text-2); }
.mlb-tier.lo { color: var(--red); }
.mlb-pct-sm { color: var(--text-4); font-size: .66rem; font-variant-numeric: tabular-nums; }
.mlb-metric-na { color: var(--text-4); font-size: .66rem; font-style: italic; text-align: right; }
.mlb-form-evidence { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: .74rem; line-height: 1.35; }

/* Key matchups — editorial headline questions */
.mlb-matchups { display: flex; flex-direction: column; gap: .6rem; }
.mlb-matchup { padding: .9rem 1.05rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.mlb-matchup-q { color: var(--text-1); font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .3rem; }
.mlb-matchup-body { color: var(--text-2); font-size: .86rem; line-height: 1.45; }
.mlb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.mlb-edge { padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-2); font-size: .7rem; font-weight: 750; }
.mlb-chip { padding: .2rem .5rem; border-radius: var(--r-pill); background: var(--surface-3); box-shadow: var(--edge-hi); color: var(--text-2); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mlb-conf { color: var(--text-4); font-size: .68rem; font-weight: 600; margin-left: auto; }
.mlb-matchup-note { margin-top: .45rem; color: var(--text-4); font-size: .7rem; font-style: italic; }

/* Heating up / cooling off */
.mlb-trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mlb-trend-card { padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.mlb-trend-card.up { border-top: 2px solid var(--green); }
.mlb-trend-card.down { border-top: 2px solid var(--red); }
.mlb-trend-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.mlb-headshot { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--surface-3); box-shadow: var(--edge-hi); }
.mlb-headshot.img-fallback { background: radial-gradient(circle at 50% 35%, #3a4553, #222a34); }
.mlb-trend-name { font-size: .92rem; font-weight: 800; color: var(--text-1); letter-spacing: -.01em; }
.mlb-trend-team { color: var(--text-4); font-size: .68rem; }
.mlb-trend-tag { margin-left: auto; font-size: .6rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: .16rem .42rem; border-radius: var(--r-pill); }
.mlb-trend-tag.up { color: var(--green); background: var(--green-soft); }
.mlb-trend-tag.down { color: var(--red); background: var(--red-soft); }
.mlb-trend-expl { color: var(--text-2); font-size: .8rem; line-height: 1.4; }
.mlb-trend-windows { display: flex; flex-direction: column; gap: .15rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: .68rem; font-variant-numeric: tabular-nums; }

/* Expected game shape — editorial (label + read + inline facets) */
.mlb-shape { padding: 1rem 1.15rem; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--mlb-navy-2), var(--mlb-navy)); box-shadow: var(--edge-hi), var(--shadow-sm); }
.mlb-shape-headline { display: flex; align-items: baseline; gap: .7rem; }
.mlb-shape-label { font-size: 1.5rem; font-weight: 850; letter-spacing: -.03em; color: var(--brand-2); }
.mlb-shape-conf { color: var(--text-4); font-size: .72rem; font-weight: 600; }
.mlb-shape-lead { margin: .5rem 0 .7rem; color: var(--text-1); font-size: .95rem; line-height: 1.45; font-weight: 550; }
.mlb-shape-facets { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.mlb-shape-facet .k { color: var(--text-4); font-size: .63rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.mlb-shape-facet .v { color: var(--text-1); font-size: .84rem; font-weight: 700; margin-left: .28rem; }
.mlb-shape-facts { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--text-3); font-size: .74rem; line-height: 1.5; }

/* Storylines — article headlines with a subtle rank index */
.mlb-storylines { display: flex; flex-direction: column; }
.mlb-storyline { display: flex; gap: .85rem; padding: .95rem 0; }
.mlb-storyline + .mlb-storyline { border-top: 1px solid var(--hairline); }
.mlb-storyline-body { min-width: 0; }
.mlb-storyline-q { color: var(--text-1); font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mlb-storyline-a { color: var(--text-2); font-size: .88rem; line-height: 1.45; margin-top: .25rem; }
.mlb-storyline-facts { color: var(--text-4); font-size: .72rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }

/* Context + empty states */
.mlb-context { margin-top: 1.4rem; color: var(--text-4); font-size: .72rem; line-height: 1.4; }
.mlb-empty { padding: .9rem 1.05rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi); color: var(--text-3); font-size: .84rem; }

@media (max-width: 860px) {
  .mlb-identity-grid { grid-template-columns: 1fr; }
  .mlb-trend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .mlb-hero-name { font-size: 1rem; }
  .mlb-hero-logo { width: 40px; height: 40px; flex-basis: 40px; }
  .mlb-metric-row { grid-template-columns: 82px 1fr auto; }
  .mlb-shape-label { font-size: 1.25rem; }
}

/* --- MLB V1.2: restrained icons + player identity + insight roles --------- */
.mlb-ic { width: 13px; height: 13px; flex: 0 0 auto; display: inline-block; vertical-align: -1px; }

/* Opportunity feed: player headshot alongside the team logo (MLB) */

/* Recent-form pill: icon + label */
.mlb-form-pill { display: inline-flex; align-items: center; gap: .3rem; }

/* Insight cards get a role header (icon + label) */
.mlb-insight { flex-direction: column; align-items: stretch; gap: .35rem; }
.mlb-insight-role { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-2); font-size: .64rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.mlb-insight-role .mlb-ic { color: var(--brand-2); }

/* Identity dimension icon before the name */
.mlb-metric-name { display: inline-flex; align-items: center; gap: .38rem; }
.mlb-metric-name .mlb-ic { color: var(--text-4); }

/* Matchup headline icon */
.mlb-matchup-q { display: flex; align-items: center; gap: .45rem; }
.mlb-matchup-q .mlb-ic { color: var(--brand-2); }

/* Storyline baseball icon (replaces the numeric index) */
.mlb-storyline-ic { flex: 0 0 auto; color: var(--brand-2); padding-top: .18rem; }
.mlb-storyline-ic .mlb-ic { width: 15px; height: 15px; }

/* Section-header icons (MLB) */
.mlb-section-head h2 { display: inline-flex; align-items: center; gap: .45rem; }
.mlb-h2-ic { display: inline-flex; color: var(--brand-2); }
.mlb-h2-ic .mlb-ic { width: 16px; height: 16px; }
/* ============================================================================
   WNBA MATCHUP PAGE — basketball preview on the shared design system.
   Reuses mlb-* section/identity/matchup/trend primitives; adds records hero,
   snapshot cards, W/L form dots, labels, player cards, and sparklines.
   ========================================================================== */
.wnba-hero {
  padding: 1.05rem 1.25rem; border-radius: var(--r-lg);
  background: linear-gradient(150deg, #17202e, #10151d);
  box-shadow: var(--edge-hi), var(--shadow-md); margin-bottom: 1.2rem;
}
.wnba-hero-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.wnba-hero-team { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.wnba-hero-team.home { flex-direction: row-reverse; text-align: right; }
.wnba-hero-logo { width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.wnba-hero-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-1); line-height: 1.1; }
.wnba-hero-rec { color: var(--text-3); font-size: .8rem; font-weight: 650; margin-top: .12rem; }
.wnba-hero-mid { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.wnba-hero-time { color: var(--text-2); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.wnba-hero-score { display: inline-flex; align-items: baseline; gap: .4rem; font-size: 1.5rem; font-weight: 850; color: var(--text-1); font-variant-numeric: tabular-nums; }
.wnba-hero-feats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(150,180,220,.12); }
.wnba-hero-feat { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.wnba-hero-feat:last-child { flex-direction: row-reverse; text-align: right; }
.wnba-hero-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-3); box-shadow: var(--edge-hi); }
.wnba-hero-feat-name { font-size: .88rem; font-weight: 750; color: var(--text-1); }
.wnba-hero-feat-line { color: var(--text-3); font-size: .7rem; font-variant-numeric: tabular-nums; }
.wnba-hero-meta { margin-top: .7rem; color: var(--text-3); font-size: .76rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.wnba-hero-series { color: var(--brand-2); font-weight: 650; }

/* W/L form dots */
.wnba-identity-meta { color: var(--text-3); font-size: .72rem; margin-top: .12rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.wnba-dots { display: inline-flex; gap: .18rem; }
.wnba-dot { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font-size: .58rem; font-weight: 800; }
.wnba-dot.w { color: #0c2a17; background: var(--green); }
.wnba-dot.l { color: #2a1010; background: var(--red); }
.wnba-streak { color: var(--text-2); font-weight: 700; }

/* Identity labels */
.wnba-labels { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .7rem; }
.wnba-label { padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-2); font-size: .7rem; font-weight: 700; }

/* Game snapshot */
.wnba-snap-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wnba-snap-name { color: var(--text-1); font-size: .92rem; font-weight: 800; margin-bottom: .5rem; }
.wnba-snap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.wnba-snap-card { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.wnba-snap-k { color: var(--text-4); font-size: .6rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.wnba-snap-v { color: var(--text-1); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wnba-snap-sub { color: var(--text-4); font-size: .62rem; }

/* Players who shape tonight */
.wnba-shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.wnba-shape-card { padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.wnba-shape-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.wnba-shape-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-3); box-shadow: var(--edge-hi); }
.wnba-shape-name { font-size: .96rem; font-weight: 800; color: var(--text-1); letter-spacing: -.01em; }
.wnba-shape-team { color: var(--text-4); font-size: .68rem; }
.wnba-role { margin-left: auto; padding: .18rem .5rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-2); font-size: .6rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wnba-shape-line { color: var(--text-2); font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-bottom: .35rem; }
.wnba-shape-why { color: var(--text-3); font-size: .78rem; line-height: 1.4; }
.wnba-shape-tag { color: var(--brand-2); font-weight: 700; white-space: nowrap; }

/* Team trends + sparklines */
.wnba-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wnba-trend-block { padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm); }
.wnba-trend-team { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 800; color: var(--text-1); margin-bottom: .5rem; }
.wnba-trend-logo { width: 24px; height: 24px; object-fit: contain; }
.wnba-spark-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: .5rem; padding: .22rem 0; color: var(--brand-2); }
.wnba-spark-row + .wnba-spark-row { border-top: 1px solid var(--hairline); }
.wnba-spark-k { color: var(--text-3); font-size: .72rem; font-weight: 600; }
.wnba-spark { width: 100%; height: 24px; display: block; }
.wnba-spark-flat { display: block; height: 1px; background: var(--hairline); }
.wnba-spark-v { color: var(--text-1); font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .wnba-snap-wrap { grid-template-columns: 1fr; }
  .wnba-shape-grid { grid-template-columns: 1fr; }
  .wnba-trend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .wnba-hero-name { font-size: 1.05rem; }
  .wnba-hero-logo { width: 42px; height: 42px; flex-basis: 42px; }
  .wnba-hero-feats { grid-template-columns: 1fr; }
  .wnba-snap-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================================
   MLS MATCHUP PAGE (.mls-*)
   Soccer-designed. Reuses tokens, section shell, and the storyline rows; adds a
   form-dot system (W/D/L), a three-way tactical lean bar, a CSS/SVG pitch, an
   attacking profile, and the "What to watch" timeline. Every section carries a
   data-state badge so honest, unavailable sections read as deliberate.
   ========================================================================== */

/* Section head with a right-aligned data-state badge. */
.mls-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mls-badge { flex: 0 0 auto; padding: .16rem .5rem; border-radius: var(--r-pill); font-size: .62rem;
  font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mls-badge.ok { color: var(--green); background: rgba(107, 198, 143, .13); }
.mls-badge.warn { color: var(--brand-2); background: var(--brand-soft); }
.mls-badge.muted { color: var(--text-4); background: var(--surface-2); }
.mls-note { color: var(--text-4); font-size: .72rem; line-height: 1.45; margin-top: .6rem; }

/* ------------------------------------------------------------------ HERO --- */
.mls-hero { padding: 1.15rem 1.25rem; border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  box-shadow: var(--edge-hi), var(--shadow-md); }
.mls-hero-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1rem; }
.mls-hero-team { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.mls-hero-team.home { flex-direction: row-reverse; text-align: right; }
.mls-hero-logo { width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.mls-hero-side { min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.mls-hero-team.home .mls-hero-side { align-items: flex-end; }
.mls-hero-name { font-size: 1.22rem; font-weight: 850; letter-spacing: -.02em; color: var(--text-1); line-height: 1.08; }
.mls-hero-rec { color: var(--text-3); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.mls-hero-pts { color: var(--text-2); font-weight: 750; }
.mls-hero-accent { display: block; width: 42px; height: 3px; border-radius: var(--r-pill); margin-top: .1rem; }
.mls-hero-team.home .mls-hero-accent { align-self: flex-end; }
.mls-hero-mid { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-top: .35rem; }
.mls-hero-kick { color: var(--text-1); font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.mls-hero-vs { color: var(--text-4); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.mls-hero-score { display: inline-flex; align-items: baseline; gap: .4rem; font-size: 1.7rem; font-weight: 850;
  color: var(--text-1); font-variant-numeric: tabular-nums; }
.mls-hero-detail { color: var(--text-4); font-size: .68rem; }
.mls-hero-meta { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--hairline);
  color: var(--text-3); font-size: .76rem; text-align: center; }

/* Form dots (W / D / L). */
.mls-dots { display: inline-flex; gap: .2rem; }
.mls-hero-team.home .mls-dots { justify-content: flex-end; }
.mls-dot { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center;
  font-size: .58rem; font-weight: 850; }
.mls-dot.w { color: #0c2a17; background: var(--green); }
.mls-dot.d { color: var(--text-1); background: var(--surface-3); box-shadow: var(--edge-hi); }
.mls-dot.l { color: #2a1010; background: var(--red); }
.mls-form-na { color: var(--text-4); font-size: .72rem; font-style: italic; }

/* -------------------------------------------------------- COMPARISON ROWS -- */
.mls-cmp { margin-top: .2rem; }
.mls-cmp-head, .mls-cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; }
.mls-cmp-head { padding: 0 0 .5rem; color: var(--text-4); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.mls-cmp-head span:first-child { text-align: left; }
.mls-cmp-head span:last-child { text-align: right; }
.mls-cmp-row { padding: .5rem 0; border-top: 1px solid var(--hairline); }
.mls-cmp-tight .mls-cmp-row { padding: .42rem 0; }
.mls-cmp-k { color: var(--text-4); font-size: .72rem; font-weight: 600; text-align: center; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem; }
.mls-cmp-v { color: var(--text-1); font-size: .95rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.mls-cmp-row .mls-cmp-v:first-child { text-align: left; }
.mls-cmp-row .mls-cmp-v:last-child { text-align: right; }
.mls-cmp-v.best { color: var(--brand-2); }
.mls-cmp-v.na { color: var(--text-4); }
.mls-cmp-soon { padding: .06rem .32rem; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--text-4); font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------- TACTICAL MATCHUP - */
.mls-tac { display: flex; flex-direction: column; gap: .55rem; }
.mls-tac-row { padding: .8rem .95rem; border-radius: var(--r-md); background: var(--surface-1);
  box-shadow: var(--edge-hi), var(--shadow-sm); }
.mls-tac-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.mls-tac-dim { color: var(--text-1); font-size: .96rem; font-weight: 800; letter-spacing: -.01em; }
.mls-tac-edge { color: var(--brand-2); font-size: .72rem; font-weight: 750; }
.mls-tac-await { color: var(--text-4); font-size: .68rem; font-weight: 600; font-style: italic; }
.mls-tac-expl { color: var(--text-3); font-size: .78rem; line-height: 1.4; margin-top: .5rem; }
.mls-lean { position: relative; height: 14px; display: flex; align-items: center; }
.mls-lean-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-soft), rgba(255,255,255,.05) 50%, var(--brand-soft)); }
.mls-lean.idle .mls-lean-track { background: rgba(255,255,255,.06); }
.mls-lean-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translateX(-50%);
  background: var(--brand); box-shadow: 0 0 0 3px rgba(11,14,18,.9), var(--shadow-sm); }
.mls-lean.idle .mls-lean-dot { background: var(--text-4); }

/* ---------------------------------------------------------- PROJECTED PITCH - */
.mls-pitch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mls-pitch-wrap { min-width: 0; }
.mls-pitch-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.mls-pitch-team { color: var(--text-1); font-size: .92rem; font-weight: 800; }
.mls-pitch-form { color: var(--text-4); font-size: .68rem; font-weight: 650; }
.mls-pitch { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(180deg, #16241b, #12201a);
  box-shadow: var(--edge-hi), var(--shadow-sm); }
.mls-pitch-lines { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 4px; }
.mls-pitch-lines::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(255,255,255,.10); }
.mls-pitch-lines::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.10); border-radius: 50%; }
.mls-slot { position: absolute; transform: translate(-50%, 50%); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: color-mix(in srgb, var(--slot-accent) 82%, #0b0e12); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mls-slot span { font-size: .5rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.mls-slot.empty { background: rgba(255,255,255,.10); color: var(--text-3);
  border: 1px dashed rgba(255,255,255,.22); box-shadow: none; }
.mls-pitch-note { color: var(--text-4); font-size: .68rem; line-height: 1.4; margin-top: .5rem; }

/* --------------------------------------------------------- PLAYERS TO WATCH - */
.mls-arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.mls-arch-card { padding: .85rem .95rem; border-radius: var(--r-md); background: var(--surface-1);
  box-shadow: var(--edge-hi), var(--shadow-sm); }
.mls-arch-role { color: var(--brand-2); font-size: .64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .3rem; }
.mls-arch-who { color: var(--text-1); font-size: .95rem; font-weight: 800; margin-bottom: .3rem; }
.mls-arch-who.empty { color: var(--text-4); font-size: .8rem; font-weight: 600; font-style: italic; }
.mls-arch-desc { color: var(--text-3); font-size: .76rem; line-height: 1.4; }

/* ------------------------------------------------------- WHAT TO WATCH TL --- */
.mls-tl { display: flex; flex-direction: column; }
.mls-tl-item { display: grid; grid-template-columns: 92px 1fr; gap: .9rem; padding: .1rem 0; position: relative; }
.mls-tl-marker { color: var(--brand-2); font-size: .72rem; font-weight: 800; text-align: right; padding-top: .05rem;
  font-variant-numeric: tabular-nums; }
.mls-tl-body { border-left: 2px solid var(--hairline-2); padding: 0 0 1rem 1rem; position: relative; }
.mls-tl-item:last-child .mls-tl-body { padding-bottom: .1rem; }
.mls-tl-body::before { content: ""; position: absolute; left: -6px; top: .28rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--bg); }
.mls-tl-title { color: var(--text-1); font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.mls-tl-guide { color: var(--text-3); font-size: .82rem; line-height: 1.5; margin-top: .2rem; }

/* --------------------------------------------------------------- HONEST GAPS */
.mls-gaps { display: flex; flex-direction: column; }
.mls-gap { display: flex; gap: .7rem; padding: .7rem 0; }
.mls-gap + .mls-gap { border-top: 1px solid var(--hairline); }
.mls-gap-ic { flex: 0 0 auto; color: var(--brand-2); padding-top: .1rem; }
.mls-gap-ic .mlb-ic { width: 15px; height: 15px; }
.mls-gap-label { color: var(--text-1); font-size: .88rem; font-weight: 750; }
.mls-gap-detail { color: var(--text-3); font-size: .78rem; line-height: 1.4; margin-top: .15rem; }
.mls-tone-up { color: var(--green) !important; }
.mls-tone-down { color: var(--red) !important; }

/* -------------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 860px) {
  .mls-arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .mls-hero-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .mls-hero-name { font-size: 1.06rem; }
  .mls-pitch-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .mls-arch-grid { grid-template-columns: 1fr; }
  .mls-cmp-head, .mls-cmp-row { gap: .5rem; }
  .mls-tl-item { grid-template-columns: 68px 1fr; gap: .6rem; }
}

/* MLS Phase 3B — real-data additions (hero standing, tactical values/confidence). */
.mls-hero-standing { color: var(--brand-2); font-size: .72rem; font-weight: 700; margin-top: .1rem; }
.mls-hero-team.home .mls-hero-standing { text-align: right; }
.mls-tac-edge.lean { color: var(--brand-2); }
.mls-tac-edge.even { color: var(--text-3); }
.mls-tac-conf { margin-left: .45rem; color: var(--text-4); font-size: .62rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; }
.mls-tac-bar-row { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: .5rem; margin: .1rem 0 .1rem; }
.mls-tac-val { color: var(--text-2); font-size: .74rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.mls-tac-bar-row .mls-tac-val:last-child { text-align: right; }

/* MLS Phase 3B refinement — compact similar-profile interpretation. */
.mls-similar { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem;
  border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm);
  color: var(--text-2); font-size: .86rem; line-height: 1.4; }
.mls-similar .mlb-ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--brand-2); }

/* MLS Option C — data-driven "What to Watch" cues (from collected match events). */
.mls-tl-item.data .mls-tl-body::before { background: var(--brand); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--brand-ring); }
.mls-tl-guide.data { color: var(--text-2); }
.mls-tl-tag { margin-left: .5rem; padding: .08rem .4rem; border-radius: var(--r-pill); background: var(--brand-soft);
  color: var(--brand-2); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* ---------------------------------------------- SCHEDULE COLLAPSE TOGGLE --- */
/* Optional, sticky collapse of the Today schedule grid (?games=off), so the
   opportunity feed is one glance away on a busy slate. Default is expanded. */
.games-toggle-row { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
/* A proper button: real hit area, surface + border, brighter label. */
.games-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-2) !important;
  text-decoration: none !important;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: -.005em;
  padding: .42rem .8rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--edge-hi), inset 0 0 0 1px var(--hairline);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.games-toggle:hover {
  color: var(--text-1) !important;
  background: var(--surface-3);
}
.games-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ============================================================================
   RESULTS VIEW — graded prop outcomes (hit / miss / void)
   ========================================================================== */
/* Secondary navigation: neutral until hover — orange stays reserved for selection
   and opportunity identity, so the nav doesn't compete with the cards/score. */
.results-link { color: var(--text-3) !important; text-decoration: none !important;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  transition: color var(--dur) var(--ease); }
.results-link:hover { color: var(--brand) !important; }
.section-links { display: inline-flex; align-items: center; gap: 1.1rem; }

.rz-stepper { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; }
.rz-step { color: var(--text-2) !important; text-decoration: none !important; font-size: .82rem;
  font-weight: 650; padding: .25rem .5rem; border-radius: var(--r-sm); background: var(--surface-2);
  box-shadow: var(--edge-hi); white-space: nowrap; }
.rz-step:hover { color: var(--text-1) !important; background: var(--surface-3); }
.rz-step.disabled { color: var(--text-4) !important; background: transparent; box-shadow: none; }
.rz-date { color: var(--text-1); font-size: .86rem; font-weight: 750; white-space: nowrap; }

/* Summary chips (overall + per league). */
.result-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .55rem .8rem; margin-bottom: .5rem; border-radius: var(--r-md);
  background: var(--surface-1); box-shadow: var(--edge-hi), var(--shadow-sm);
  font-size: .82rem; font-variant-numeric: tabular-nums; }
.result-summary .rs-label { color: var(--text-1); font-weight: 800; }
.result-summary .rs-rate { color: var(--brand-2); font-weight: 800; }
.result-summary .rs-rate.muted { color: var(--text-4); font-weight: 600; }
.result-summary .rs-hit { color: var(--green); font-weight: 700; }
.result-summary .rs-miss { color: var(--red); font-weight: 700; }
.result-summary .rs-void { color: var(--text-4); }
.result-summary .rs-dot { color: var(--text-4); margin: 0 -.1rem; }

/* Score-threshold control label (sits above the band pills). */
.rz-control-label { color: var(--text-4); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin: .4rem 0 .3rem; }

/* Per-market breakdown — which markets convert. Grouped + de-emphasized so the
   headline summary stays primary. */
.rz-breakdown { margin: .7rem 0 .2rem; padding-left: .1rem; }
.rz-breakdown-head { color: var(--text-4); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.rz-breakdown .result-summary { background: var(--surface-2); font-size: .78rem;
  padding: .42rem .7rem; }

/* One graded prop row. */
.result-feed { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.result-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .7rem .9rem; border-radius: var(--r-md); background: var(--surface-1);
  box-shadow: var(--edge-hi), var(--shadow-sm); }
.result-row.hit { border-left: 3px solid var(--green); }
.result-row.miss { border-left: 3px solid var(--red); }
.result-row.void { border-left: 3px solid var(--hairline-2); opacity: .72; }
.result-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; }
.result-mark.hit { color: #0c2a17; background: var(--green); }
.result-mark.miss { color: #2a1010; background: var(--red); }
.result-mark.void { color: var(--text-3); background: var(--surface-3); }
.result-player { color: var(--text-1); font-size: .95rem; font-weight: 750; letter-spacing: -.01em; }
.result-team { color: var(--text-4); font-size: .72rem; font-weight: 600; margin-left: .3rem; }
.result-market { color: var(--text-3); font-size: .76rem; margin-top: .05rem; }
.result-meta { text-align: right; }
.result-actual { color: var(--text-1); font-size: .86rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.result-score { color: var(--text-4); font-size: .68rem; font-variant-numeric: tabular-nums; }

/* ============================================================================
   MLB TREND SPOTLIGHTS — pitcher per-start trends + enriched batter trends
   ========================================================================== */
.mlb-ptrend-grid, .mlb-btrend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mlb-ptrend-card, .mlb-btrend-card { padding: .9rem 1rem; border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface-1-top), var(--surface-1));
  box-shadow: var(--edge-hi), var(--shadow-sm); }

.mlb-trend-tag.sp { color: var(--brand-2); background: var(--brand-soft); }

/* Pitcher: two sparkline rows (K's, hits allowed). */
.mlb-ptrend-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center;
  gap: .55rem; padding: .3rem 0; }
.mlb-ptrend-row + .mlb-ptrend-row { border-top: 1px solid var(--hairline); }
.mlb-ptrend-row.k { color: var(--brand-2); }
.mlb-ptrend-row.h { color: var(--text-3); }
.mlb-ptrend-k { color: var(--text-3); font-size: .72rem; font-weight: 600; }
.mlb-spark { width: 100%; height: 22px; display: block; }
.mlb-spark-flat { display: block; height: 1px; background: var(--hairline); }
.mlb-ptrend-v { color: var(--text-1); font-size: .76rem; font-weight: 750; font-variant-numeric: tabular-nums;
  white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.mlb-ptrend-dir .mlb-ic { width: 13px; height: 13px; }
.mlb-ptrend-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .55rem; flex-wrap: wrap; }
.mlb-ptrend-kpct { color: var(--text-4); font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mlb-ptrend-caveat { color: var(--text-4); font-size: .68rem; line-height: 1.4; margin-top: .5rem; }

/* Batter: per-game 1+ hit dot row + L5/L10/L25 windows + streak + evidence. */
.mlb-btrend-card.up { border-left: 3px solid var(--green); }
.mlb-btrend-card.down { border-left: 3px solid var(--red); }
.mlb-btrend-card.neutral { border-left: 3px solid var(--brand); }
.mlb-cat { margin-left: auto; padding: .18rem .5rem; border-radius: var(--r-pill);
  font-size: .6rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mlb-cat.up { color: var(--green); background: rgba(107,198,143,.13); }
.mlb-cat.down { color: var(--red); background: rgba(239,142,134,.13); }
.mlb-cat.neutral { color: var(--brand-2); background: var(--brand-soft); }
.mlb-btrend-dots { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .5rem; }
.mlb-dot-row { display: inline-flex; gap: 3px; }
.mlb-dot { width: 11px; height: 11px; border-radius: 50%; }
.mlb-dot.hit { background: var(--green); box-shadow: var(--edge-hi); }
.mlb-dot.miss { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.mlb-btrend-legend { color: var(--text-4); font-size: .62rem; }
.mlb-btrend-wins { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mlb-win { display: inline-flex; align-items: baseline; gap: .3rem; padding: .18rem .5rem;
  border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--edge-hi); }
.mlb-win .k { color: var(--text-4); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.mlb-win .v { color: var(--text-1); font-size: .8rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.mlb-streak { color: var(--brand-2); font-size: .72rem; font-weight: 700; }
.mlb-btrend-sup, .mlb-btrend-risk { display: flex; align-items: center; gap: .35rem; font-size: .76rem;
  line-height: 1.4; margin-top: .5rem; }
.mlb-btrend-sup { color: var(--text-2); }
.mlb-btrend-sup .mlb-ic { color: var(--green); width: 14px; height: 14px; }
.mlb-btrend-risk { color: var(--text-3); }
.mlb-btrend-risk .mlb-ic { color: var(--red); width: 14px; height: 14px; }

@media (max-width: 860px) {
  .mlb-ptrend-grid, .mlb-btrend-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- AUTH GATE ---------- */
.auth-title {
  font-size: 2rem; font-weight: 850; letter-spacing: -.02em;
  color: var(--text-1); margin: 3rem 0 1rem;
}
.auth-title span { color: var(--brand); }

/* ------------------------------------------- WNBA TREND DEPTH (per-game) --- */
.wnba-depth { margin: .5rem 0 .1rem; padding-top: .5rem; border-top: 1px solid var(--hairline); }
.wnba-depth.up { color: var(--green); }
.wnba-depth.down { color: var(--red); }
.wnba-depth-spark { display: flex; align-items: center; gap: .5rem; }
.wnba-depth-spark .wnba-spark { width: 108px; flex: 0 0 108px; }
.wnba-depth-cap { color: var(--text-4); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; }
.wnba-dot-row { display: inline-flex; gap: 3px; margin: .4rem 0; }
.wnba-dot { width: 11px; height: 11px; border-radius: 50%; }
.wnba-dot.hit { background: currentColor; box-shadow: var(--edge-hi); }
.wnba-dot.miss { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.wnba-depth-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wnba-win { display: inline-flex; align-items: baseline; gap: .3rem; padding: .16rem .5rem;
  border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--edge-hi); }
.wnba-win b { color: var(--text-1); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wnba-win { color: var(--text-4); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.wnba-streak { color: var(--brand-2); font-size: .7rem; font-weight: 750; }

/* ============================================================================
   R2 — DAILY RESULTS v2 (summary, by-market table, expandable prop list)
   ========================================================================== */
.daily-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin: .4rem 0 .4rem; }
.ds-tile { padding: .55rem .7rem; border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.ds-label { color: var(--text-4); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ds-value { color: var(--text-1); font-size: 1.35rem; font-weight: 820; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: .1rem; }
.ds-sub { color: var(--text-4); font-size: .7rem; font-weight: 600; margin-left: .3rem; }
.ds-status { color: var(--text-3); font-size: .8rem; margin: .1rem 0 1rem; font-variant-numeric: tabular-nums; }
.rz-section-head { color: var(--text-2); font-size: 1rem; font-weight: 800; margin: 1.1rem 0 .5rem; }

/* By-market table (div grid; whole row links to filter the props). */
.mkt-table { display: flex; flex-direction: column; gap: 2px; margin-bottom: .3rem; }
.mkt-row { display: grid; grid-template-columns: 1.5fr 1.3fr .9fr .55fr .7fr; gap: .8rem; align-items: center;
  padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  color: var(--text-2) !important; text-decoration: none !important; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mkt-row:hover { background: var(--surface-2); }
.mkt-row.selected { background: var(--brand-soft); box-shadow: var(--edge-hi), inset 0 0 0 1px var(--brand-ring); }
.mkt-head { background: transparent; box-shadow: none; padding: 0 .8rem .1rem; }
.mkt-h { color: var(--text-4) !important; text-decoration: none !important; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.mkt-h.sortable:hover { color: var(--brand-2) !important; }
.mkt-name { color: var(--text-1); font-weight: 750; }
.mkt-rate { color: var(--text-1); font-weight: 700; }
.mkt-num { color: var(--text-3); }

/* Expandable prop rows (native <details>). */
.prop-list { display: flex; flex-direction: column; gap: 3px; }
.prop-item { border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); }
.prop-item[open] { box-shadow: var(--edge-hi), var(--shadow-sm); }
.prop-item.r-hit { border-left: 3px solid var(--green); }
.prop-item.r-miss { border-left: 3px solid var(--red); }
.prop-item.r-void { border-left: 3px solid var(--hairline-2); opacity: .82; }
.prop-item.r-pending { border-left: 3px solid #e0a63a; }
.prop-summary { display: grid; grid-template-columns: 88px 1.7fr 1.3fr auto auto; gap: .85rem;
  align-items: center; padding: .55rem .85rem; cursor: pointer; list-style: none; font-size: .86rem; }
.prop-summary::-webkit-details-marker { display: none; }
.prop-summary:hover { background: var(--surface-2); border-radius: var(--r-sm); }
.prop-grade { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .7rem; letter-spacing: .03em; }
.pg-icon { font-size: .9rem; }
.prop-grade.r-hit { color: var(--green); }
.prop-grade.r-miss { color: var(--red); }
.prop-grade.r-void { color: var(--text-4); }
.prop-grade.r-pending { color: #e0a63a; }
.prop-id b { color: var(--text-1); font-weight: 800; }
.prop-vs { display: block; color: var(--text-4); font-size: .72rem; }
.prop-mkt { color: var(--text-2); }
.prop-rec { display: block; color: var(--brand-2); font-size: .76rem; font-weight: 700; }
.prop-score { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prop-actual { color: var(--text-1); font-weight: 650; white-space: nowrap; }
.prop-why { padding: .1rem .85rem .7rem 96px; }
.why-head { color: var(--text-4); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.why-list { margin: 0 0 .35rem; padding-left: 1.1rem; color: var(--text-2); font-size: .82rem; line-height: 1.5; }
.why-risk { color: var(--red); font-size: .82rem; }

@media (max-width: 760px) {
  .daily-summary { grid-template-columns: repeat(3, 1fr); }
  .mkt-row { grid-template-columns: 1.4fr 1fr .8fr; }
  .mkt-row .mkt-num:last-child, .mkt-head .mkt-h:nth-child(4), .mkt-head .mkt-h:nth-child(5),
  .mkt-row .mkt-num:nth-of-type(1) { display: none; }
  .prop-summary { grid-template-columns: auto 1fr auto; grid-template-areas:
    "grade id score" "grade mkt actual"; row-gap: .2rem; }
  .prop-grade { grid-area: grade; align-self: start; }
  .prop-id { grid-area: id; } .prop-mkt { grid-area: mkt; }
  .prop-score { grid-area: score; text-align: right; } .prop-actual { grid-area: actual; text-align: right; }
  .prop-why { padding-left: .85rem; }
}

/* ---------------------------------------------------- SHARED FILTER BAR --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  padding: .55rem .8rem; margin: .4rem 0 .5rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.fb-group { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.fb-label { color: var(--text-4); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; }
.fb-pills { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.fb-pill { color: var(--text-2) !important; text-decoration: none !important; white-space: nowrap;
  font-size: .76rem; font-weight: 650; padding: .12rem .5rem; border-radius: var(--r-pill);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fb-pill:hover { color: var(--text-1) !important; background: var(--surface-3); }
.fb-pill.active { color: var(--on-brand) !important; background: var(--brand-grad); box-shadow: var(--shadow-brand); }
.fb-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.fb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; }
.fb-active-count { color: var(--text-4); font-size: .74rem; font-weight: 700; }
.fb-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem;
  color: var(--text-2); padding: .16rem .5rem; border-radius: var(--r-pill);
  background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.fb-chip b { color: var(--text-1); font-weight: 750; }
.fb-x { color: var(--brand-2) !important; text-decoration: none !important; font-weight: 700; }
.fb-x:hover { color: var(--brand) !important; }
.fb-clear { color: var(--brand-2) !important; text-decoration: none !important; font-size: .76rem; font-weight: 700; }
.fb-clear:hover { color: var(--brand) !important; }

@media (max-width: 760px) {
  .filter-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .fb-group { justify-content: space-between; }
}

/* ---------------------------------------- R4 — PERFORMANCE / CALIBRATION --- */
.perf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: .3rem 0 .6rem; }
.perf-ctl-gap { width: .5rem; }
.perf-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  padding: .6rem .9rem; border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); margin-bottom: .4rem;
  font-variant-numeric: tabular-nums; }
.ph-label { color: var(--text-3); font-size: .8rem; font-weight: 700; }
.ph-rec { color: var(--text-1); font-size: 1.4rem; font-weight: 850; letter-spacing: -.02em; }
.ph-rate { color: var(--brand-2); font-size: 1.4rem; font-weight: 850; }
.ph-meta { color: var(--text-4); font-size: .8rem; margin-left: auto; }
.cal-interp { color: var(--text-2); font-size: .92rem; line-height: 1.5; margin: .1rem 0 .7rem; }

.cal-table { display: flex; flex-direction: column; gap: 2px; margin-top: .5rem; }
.cal-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr .7fr .5fr .9fr; gap: .8rem;
  align-items: center; padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-1);
  box-shadow: var(--edge-hi); font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.cal-head { background: transparent; box-shadow: none; color: var(--text-4); font-size: .68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0 .8rem .1rem; }
.cal-band { color: var(--text-1); font-weight: 750; display: inline-flex; align-items: center; gap: .5rem; }
.cal-rate { color: var(--text-1); font-weight: 750; }
.cal-diff.pos { color: var(--green); }
.cal-diff.neg { color: var(--red); }
.cal-small { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-4); padding: .08rem .35rem; border-radius: var(--r-pill);
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--hairline); }

.perf-compare { color: var(--text-2); font-size: .9rem; margin: 0 0 .8rem; font-variant-numeric: tabular-nums; }
.perf-compare .pc-up { color: var(--green); font-weight: 700; }
.perf-compare .pc-down { color: var(--red); font-weight: 700; }

/* ---------------------------------------- R6 — EDGE FINDER / OVER-UNDER --- */
.et-table { display: flex; flex-direction: column; gap: 2px; margin-top: .4rem; }
.et-row { display: grid; grid-template-columns: 1.7fr .7fr 1fr .7fr 1.4fr; gap: .8rem; align-items: center;
  padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.et-head { background: transparent; box-shadow: none; color: var(--text-4); font-size: .68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0 .8rem .1rem; }
.et-seg { color: var(--text-1); font-weight: 700; display: inline-flex; align-items: center; gap: .45rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-trend { color: var(--text-1); font-weight: 650; }
.et-prev { color: var(--text-4); font-size: .74rem; font-weight: 500; }
.et-divider { color: var(--text-4); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin: .5rem 0 .2rem .2rem; }

.ou-wrap { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.ou-line { display: grid; grid-template-columns: 90px auto auto 1fr; gap: .8rem; align-items: baseline;
  padding: .55rem .9rem; border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); font-variant-numeric: tabular-nums; }
.ou-dir { color: var(--text-3); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.ou-rec { color: var(--text-1); font-size: 1.2rem; font-weight: 820; }
.ou-rate { color: var(--brand-2); font-size: 1.2rem; font-weight: 820; }
.ou-diff { color: var(--text-2); font-size: .86rem; margin: .1rem 0 .3rem .2rem; }
.ou-diff b { color: var(--text-1); }
.ou-mtable { display: flex; flex-direction: column; gap: 2px; margin-top: .3rem; }
.ou-mrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .8rem; padding: .4rem .8rem;
  border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ou-mhead { background: transparent; box-shadow: none; color: var(--text-4); font-size: .66rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0 .8rem; }
.ou-mname { color: var(--text-1); font-weight: 700; }

@media (max-width: 760px) {
  .et-row { grid-template-columns: 1.4fr .8fr 1fr; }
  .et-row > span:nth-child(4), .et-row > span:nth-child(5),
  .et-head > span:nth-child(4), .et-head > span:nth-child(5) { display: none; }
}

/* --------------------------------------------- R7 — CONSISTENCY / MONTHLY --- */
.cons-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: .4rem 0 .4rem; }
.cons-card { padding: .6rem .75rem; border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.cons-label { color: var(--text-4); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cons-rate { color: var(--text-1); font-size: 1.3rem; font-weight: 820; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin: .1rem 0; }
.cons-rec { color: var(--text-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .cons-row { grid-template-columns: repeat(2, 1fr); } }

.ver-row { display: grid; grid-template-columns: 1.3fr 1.4fr .8fr 1fr .8fr; gap: .8rem; align-items: center;
  padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* Model versions are grouped by market family: the live version reads normally, earlier
   versions of the same market collapse into one quieter line beneath it. The label is
   what makes fourteen version rows scannable as five questions. */
.ver-group-label {
  margin: .7rem 0 .2rem;
  color: var(--text-3);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ver-group-label:first-child { margin-top: .2rem; }
.ver-current .et-seg { color: var(--text-1); font-weight: 650; }
/* Superseded: present for comparison, not competing for attention. */
.ver-earlier { background: transparent; box-shadow: none; color: var(--text-4); }
.ver-earlier .et-seg { font-style: italic; }
.ver-retired-head {
  margin: 1.1rem 0 .1rem;
  color: var(--text-3);
  font-size: .74rem;
  font-weight: 750;
}

/* ---- Refinements (opportunity screen hierarchy) ------------------------- */
/* Curation subtext beside "Today's N strongest picks" — muted, so the honest total
   is context, not the headline. */
.opp-count-sub { color: var(--text-4); font-weight: 500; }

/* ============================================================================
   NFL MATCHUP PAGE + SEASON ARCHIVE
   ========================================================================== */
.nfl-section-head { font-size: .82rem; font-weight: 650; color: var(--text-3); letter-spacing: .02em;
  text-transform: uppercase; margin: 1.4rem 0 .6rem; }
.nfl-section-head span { text-transform: none; letter-spacing: 0; color: var(--text-4); font-weight: 500; }

/* Hero */
.nfl-hero { padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  border: 1px solid var(--hairline); box-shadow: var(--edge-hi), var(--shadow-md); }
.nfl-hero-round { color: var(--text-4); font-size: .78rem; font-weight: 600; text-align: center;
  letter-spacing: .02em; margin-bottom: .7rem; }
.nfl-hero-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.nfl-hero-team { text-align: center; }
.nfl-hero-name { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-2); }
.nfl-hero-team.win .nfl-hero-name { color: var(--text-1); }
.nfl-hero-rec { color: var(--text-4); font-size: .82rem; font-weight: 600; margin-top: .12rem;
  font-variant-numeric: tabular-nums; }
.nfl-score { display: block; font-size: 2rem; font-weight: 850; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-top: .2rem; letter-spacing: -.02em; }
.nfl-score.win { color: var(--brand); }
.nfl-hero-at { color: var(--text-4); font-size: .84rem; font-weight: 600; text-align: center; }
.nfl-hero-final { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-4); margin-top: .2rem; }
.nfl-note { color: var(--red); font-size: .78rem; font-weight: 500; margin: .6rem 0 0; text-align: center; }

/* Team identity comparison */
.nfl-id { display: flex; flex-direction: column; gap: .18rem; }
.nfl-id-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
  padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); }
.nfl-id-head { background: transparent; box-shadow: none; padding-bottom: .1rem; }
.nfl-id-head span { color: var(--text-3); font-weight: 700; font-size: .82rem; }
.nfl-id-head .nfl-id-label { color: var(--text-4); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.nfl-id-val { font-size: .92rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: .35rem; }
.nfl-id-row .nfl-id-val:first-child { justify-content: flex-start; }
.nfl-id-row .nfl-id-val:last-child { justify-content: flex-end; }
.nfl-id-val.better { color: var(--brand-2); font-weight: 750; }
.nfl-id-label { text-align: center; color: var(--text-4); font-size: .74rem; font-weight: 500; }
.nfl-pct { font-size: .62rem; font-weight: 700; padding: .06rem .3rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-4); font-variant-numeric: tabular-nums; }
.nfl-pct sup { font-size: .5rem; }
.nfl-pct.hi { color: var(--green); background: rgba(107, 198, 143, .12); }
.nfl-pct.lo { color: var(--red); background: rgba(239, 142, 134, .12); }

/* Battlefields */
.nfl-bfs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nfl-bf { padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); }
.nfl-bf-label { font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: .2rem; }
.nfl-bf-nums { font-size: .78rem; color: var(--text-4); font-variant-numeric: tabular-nums; }
.nfl-bf-nums b { color: var(--text-2); font-weight: 700; }
.nfl-bf-edge { display: inline-block; margin-left: .4rem; font-size: .7rem; font-weight: 700; padding: .05rem .4rem;
  border-radius: var(--r-pill); }
.nfl-bf-edge.edge { color: var(--on-brand); background: var(--brand-grad); }
.nfl-bf-edge.even { color: var(--text-4); background: var(--surface-3); }

/* Recent form */
.nfl-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nfl-form-col { padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); text-align: center; }
.nfl-form-dots { display: inline-flex; gap: .3rem; }
.nfl-fdot { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%;
  font-size: .72rem; font-weight: 750; }
.nfl-fdot.w { color: var(--green); background: rgba(107, 198, 143, .14); }
.nfl-fdot.l { color: var(--red); background: rgba(239, 142, 134, .14); }
.nfl-form-sub { color: var(--text-4); font-size: .72rem; margin-top: .35rem; font-variant-numeric: tabular-nums; }

/* Archive browser */
.nfl-weeks { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 1rem; }
.nfl-arc-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nfl-arc-game { display: grid; grid-template-columns: 1fr auto 1fr auto auto; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  text-decoration: none !important; transition: background var(--dur) var(--ease); }
.nfl-arc-game:hover { background: var(--surface-2); }
.nfl-arc-team { color: var(--text-2) !important; font-size: .84rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.nfl-arc-team.home { text-align: right; }
.nfl-arc-team.win { color: var(--text-1) !important; font-weight: 750; }
.nfl-arc-at { color: var(--text-4); font-size: .72rem; }
.nfl-arc-score { color: var(--text-3); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfl-arc-go { color: var(--text-4); font-weight: 700; }
@media (max-width: 720px) {
  .nfl-bfs, .nfl-form, .nfl-arc-list { grid-template-columns: 1fr; }
}

/* NFL player spotlights */
.nfl-spots { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nfl-spot-col { display: flex; flex-direction: column; gap: .4rem; }
.nfl-spot-team { font-size: .74rem; font-weight: 700; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .04em; padding-left: .2rem; }
.nfl-spot { padding: .55rem .75rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); }
.nfl-spot-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.nfl-spot-player { font-size: .88rem; font-weight: 700; color: var(--text-1); }
.nfl-spot-pos { font-size: .64rem; font-weight: 600; color: var(--text-4); margin-left: .3rem;
  padding: .05rem .3rem; border-radius: var(--r-pill); background: var(--surface-3); }
.nfl-spot-mkt { font-size: .82rem; font-weight: 650; color: var(--text-2); margin-top: .2rem; }
.nfl-spot-sub { font-size: .72rem; color: var(--text-4); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.nfl-spot-badge { font-size: .72rem; font-weight: 750; padding: .1rem .4rem; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.nfl-spot-badge.hit { color: var(--green); background: rgba(107, 198, 143, .14); }
.nfl-spot-badge.miss { color: var(--red); background: rgba(239, 142, 134, .14); }

/* Matchup effect on a spotlight. Only "Tough matchup" is a prediction — it is the one
   direction the measurement supports — so it is the only chip that carries colour. The
   flat states are stated non-findings and stay grayscale, so the page never looks like
   it made a call it did not make. */
.nfl-spot-mx { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
.nfl-mx { font-size: .68rem; font-weight: 750; letter-spacing: .01em; padding: .1rem .4rem;
  border-radius: var(--r-pill); text-transform: uppercase; }
.nfl-mx.down { color: var(--red); background: rgba(239, 142, 134, .14); }
.nfl-mx.flat { color: var(--text-4); background: rgba(163, 172, 184, .12); }
.nfl-mx-swing { font-size: .74rem; font-weight: 700; color: var(--red);
  font-variant-numeric: tabular-nums; }
.nfl-spot-mx .nfl-spot-sub { flex-basis: 100%; margin-top: 0; line-height: 1.35; }
.nfl-mx-note { color: var(--text-4); font-size: .74rem; line-height: 1.45; margin-top: .6rem;
  padding-top: .55rem; border-top: 1px solid var(--divider); }
.nfl-mx-note b { color: var(--text-2); font-weight: 700; }
@media (max-width: 720px) { .nfl-spots { grid-template-columns: 1fr; } }

/* NFL thesis + rest/schedule */
.nfl-thesis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.nfl-thesis li { position: relative; padding: .55rem .8rem .55rem 1.9rem; border-radius: var(--r-sm);
  background: var(--surface-1); box-shadow: var(--edge-hi); color: var(--text-2); font-size: .86rem; line-height: 1.4; }
.nfl-thesis li::before { content: ""; position: absolute; left: .8rem; top: .95rem; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--brand); }
.nfl-rest { display: flex; gap: 1.4rem; padding: .55rem .8rem; border-radius: var(--r-sm);
  background: var(--surface-1); box-shadow: var(--edge-hi); color: var(--text-3); font-size: .84rem;
  font-variant-numeric: tabular-nums; }
.nfl-rest b { color: var(--text-1); font-weight: 750; }
.nfl-rest-note { color: var(--brand-2); font-size: .78rem; font-weight: 600; margin-top: .35rem; padding-left: .2rem; }
.nfl-season-lbl { color: var(--text-4); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; align-self: center; margin-right: .2rem; }