/* ============================================================================
   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). */
/* Quiet "at" separator between the stacked away/home rows. The game total briefly
   lived here and had nothing to anchor to — the spread moves with the team name, the
   score has its own column, and a bare number at a fixed indent related to neither. It
   sits on the card's top line now, with the league and the week it belongs beside. */
.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 */
/* Caveats share one block and one heading, so the list carries the separation the
   repeated heading used to. */
.op-ev-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .32rem; }
.op-ev-list li { position: relative; padding-left: .7rem; color: #dee3e9; font-size: .8rem; line-height: 1.42; }
.op-ev-list li::before { content: "·"; position: absolute; left: 0; color: var(--text-4); font-weight: 700; }

/* 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)
   ========================================================================== */
/* The day's scorecard. Three metrics carry it — record, hit rate, average score — and
   the count of what was graded sits under them in a quiet strip. Six equal tiles asked
   the reader to weigh a void count against a hit rate. */
.daily-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0 0; }
.ds-tile { padding: .7rem .9rem .8rem; border-radius: var(--r-md);
  background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.ds-label { display: flex; align-items: center; color: var(--text-4); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ds-value { color: var(--text-1); font-size: clamp(1.45rem, 5.4vw, 2rem); font-weight: 820; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: .15rem; line-height: 1.1; }
.ds-sub { color: var(--text-4); font-size: .7rem; font-weight: 600; margin-left: .3rem; }
.ds-secondary { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: .55rem 0 0; }
.ds-mini { display: inline-flex; align-items: baseline; gap: .35rem; }
.ds-mini-label { color: var(--text-4); font-size: .63rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.ds-mini b { color: var(--text-2); font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.ds-mini-total { margin-left: auto; }
/* The score is a ranking signal; "93" must never be read as "93% likely". The note is
   one sentence, and it is attached wherever a score is shown rather than only in the
   small print at the foot of the page. */
.ds-info { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: .4em;
  border-radius: 50%; background: var(--surface-3); color: var(--text-4);
  font-size: .82em; font-weight: 800; font-style: normal; text-transform: none; cursor: help; }
.ds-info:hover, .ds-info:focus-visible { color: var(--text-1); }

/* Today against normal, on both scales: the hit rate a reader asks for, and the lift
   over base the project judges on. Colour is spent only on a gap worth acting on. */
.hit-rate-context { margin: .6rem 0 0; color: var(--text-3); font-size: .9rem; line-height: 1.55; }
.hit-rate-context b { color: var(--text-1); font-weight: 800; font-variant-numeric: tabular-nums; }
.hrc-dot { margin: 0 .45rem; color: var(--text-4); opacity: .55; }
.hrc-up { color: var(--green); font-weight: 750; }
.hrc-down { color: var(--red); font-weight: 750; }
.hrc-base { color: var(--text-4); }

/* The read: what the day meant, above the tables that prove it. */
.daily-read { margin-top: 1.7rem; }
.dr-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dr-list li { position: relative; padding: .7rem .95rem .7rem 1.7rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--divider); box-shadow: var(--edge-hi);
  color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.dr-list li::before { content: ""; position: absolute; left: .85rem; top: 1.2rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.dr-list strong { color: var(--text-1); font-weight: 800; }
.rz-section-head { color: var(--text-2); font-size: 1rem; font-weight: 800; margin: 1.1rem 0 .5rem; }

/* By-market: record and hit rate answer "what happened", lift answers "was it skill".
   `sp_hits` unders convert ~78% of the time with nobody picking at all. */
.mkt-table { display: flex; flex-direction: column; gap: 2px; margin-bottom: .3rem; }
.mkt-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.45fr) .8fr .85fr .75fr;
  gap: .8rem; align-items: baseline;
  padding: .55rem .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.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 .15rem; }
.mkt-h { display: flex; align-items: center; color: var(--text-4) !important; text-decoration: none !important; font-size: .64rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .06em; }
.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); }
.mkt-num small { color: var(--text-4); font-size: .76em; }
.mkt-lift { font-weight: 700; white-space: nowrap; }
.mkt-lift.up { color: var(--green); }
.mkt-lift.down { color: var(--red); }
.mkt-lift.flat { color: var(--text-3); }

/* The day's highest-scored misses — calibration, not damage. Never the biggest gaps. */
.confident-misses { margin: 0 0 .8rem; padding: .7rem .95rem .8rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--divider); border-left: 3px solid var(--red);
  box-shadow: var(--edge-hi); }
.cm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  color: var(--text-4); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.cm-sub { color: var(--text-4); font-size: .74rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cm-list { display: grid; gap: .3rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.cm-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: .75rem; align-items: baseline; font-size: .85rem; color: var(--text-3); }
.cm-score { color: var(--text-1); font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-player { color: var(--text-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-actual { color: var(--text-2); font-weight: 650; white-space: nowrap; }

/* Filter / sort / group. Hidden until the script runs — the static export has no server
   to re-filter against, and an inert control is worse than no control. */
.results-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.3rem;
  padding: .55rem .8rem; margin: 0 0 .7rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.rc-group { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.rc-label { color: var(--text-4); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.rc-pills { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.rc-pill { padding: .22rem .55rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-2); font: inherit; font-size: .77rem; font-weight: 650; }
.rc-pill:hover { color: var(--text-1); }
.rc-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rc-pill.active { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-ring); color: var(--text-1); }
/* Misses are the diagnostic view, so the one pill that opens it is tinted like the rows
   it selects — enough to find, not enough to make the page read as a bad day. */
.rc-pill[data-result-filter="miss"].active { background: rgba(239, 142, 134, .14); box-shadow: inset 0 0 0 1px rgba(239, 142, 134, .34); }
.rc-count { margin-left: .32rem; color: var(--text-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-pill.active .rc-count { color: var(--text-2); }
.rc-select { min-height: 2.05rem; padding: 0 .5rem; border: 1px solid var(--divider); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-1); font: inherit; font-size: .78rem; }
.rc-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* The audit table. One prediction per row, five aligned columns, dense on purpose:
   these are two hundred rows a reader scans, not two hundred cards. */
.prop-head, .prop-summary { display: grid;
  grid-template-columns: 74px minmax(0, 1.6fr) minmax(0, 1.5fr) 3.4rem minmax(0, 1fr); gap: .85rem; }
.prop-head { padding: 0 .85rem .3rem; color: var(--text-4); font-size: .63rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .06em; }
.prop-head span:nth-child(4) { display: flex; align-items: center; justify-content: flex-end; }
.prop-list { display: flex; flex-direction: column; gap: 2px; }
.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); }
/* A miss carries a touch more weight than a hit: it is the row worth reading twice. */
.prop-item.r-miss { border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(239, 142, 134, .07), rgba(239, 142, 134, 0) 38%), var(--surface-1); }
.prop-item.r-void { border-left: 3px solid var(--hairline-2); opacity: .78; }
.prop-item.r-pending { border-left: 3px solid #e0a63a; }
.prop-summary { align-items: center; padding: .42rem .85rem; cursor: pointer; list-style: none; font-size: .85rem; }
.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: .69rem; 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 { min-width: 0; }
.prop-id b { display: block; color: var(--text-1); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-vs { display: block; color: var(--text-4); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The market used to be orange on every row, which made the loudest thing in the list
   the column a reader already knows they are looking at. The posted line carries it. */
.prop-mkt { display: flex; align-items: baseline; gap: .4rem; min-width: 0; color: var(--text-4); font-size: .78rem; }
/* The market name gives way, the posted line never does: on a phone "SP Hits Allowed
   Under 5.5" wrapped and made every pitcher row a line taller than a batter row. */
.pm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.prop-rec { flex: 0 0 auto; color: var(--text-1); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prop-score { color: var(--text-1); font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.prop-actual { color: var(--text-2); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .9rem 0 .35rem;
  color: var(--text-2); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.prop-group:first-child { margin-top: 0; }
.prop-group span { color: var(--text-4); font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.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) {
  .ds-value { letter-spacing: -.03em; }
  .ds-mini-total { margin-left: 0; }
  .mkt-row { grid-template-columns: minmax(0, 1.15fr) .95fr .7fr .8fr; gap: .5rem; font-size: .82rem; }
  .mkt-row > :last-child, .mkt-head > :last-child { display: none; }   /* avg score */
  /* The record cell keeps its sample and drops the void note — the day's void count is
     already a metric in the scorecard, and wrapping it here cost a whole row. */
  .mkt-flag { display: none; }
  .cm-list li { grid-template-columns: 2.1rem minmax(0, 1fr) auto; row-gap: .1rem; column-gap: .5rem; }
  .cm-rec { grid-column: 2 / -1; color: var(--text-4); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .cm-actual { grid-row: 1; grid-column: 3; }
  .results-controls { gap: .5rem .9rem; }
  .prop-head { display: none; }
  /* The column headings are gone, so each number says what it is. */
  .prop-score::before { content: "Score "; color: var(--text-4); font-size: .68rem; font-weight: 650; }
  .prop-actual::before { content: "Actual "; color: var(--text-4); font-size: .68rem; font-weight: 650; }
  .prop-summary { grid-template-columns: auto 1fr auto; grid-template-areas:
    "grade id score" "grade mkt actual"; row-gap: .15rem; gap: .6rem; }
  .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); }
/* Edge finder: segment, lift, rate, n, record, trend. Lift sits second because it is the
   column the reader should act on, and second is the position that survives the phone. */
.et-table-6 .et-row { grid-template-columns: 1.5fr 1.5fr .75fr .6fr .75fr 1.25fr; }
.et-n { color: var(--text-3); }
.et-row-small { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.et-row-small .et-seg, .et-row-small .cal-rate { color: var(--text-3); }
.et-trend.up { color: var(--green); }
.et-trend.down { color: var(--red); }
.et-trend.flat { color: var(--text-3); }
.cal-diff.flat { color: var(--text-3); }
.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; }
/* The two groups are titled, not merely divided: "Reliable edges" / "Small-sample
   signals" say what the split means, where "Below minimum sample" left the reader to
   infer that a 64% row on 22 props had been discovered. */
.et-divider { display: flex; align-items: baseline; gap: .5rem; color: var(--text-4);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin: .9rem 0 .3rem .2rem; }
.et-divider:first-child { margin-top: .2rem; }
.et-divider small { font-size: .66rem; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--text-4); opacity: .85; }
.et-divider-strong { color: var(--text-2); }

.ou-wrap { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.ou-line { display: grid; grid-template-columns: 90px auto auto minmax(0, 1fr) auto; 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; }
.ou-mhead small { display: block; font-size: .58rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-4); opacity: .8; }
.ou-lift { font-weight: 750; }
.ou-liftwrap { text-align: right; }

@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; }
.cons-delta { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--hairline);
  font-size: .74rem; font-variant-numeric: tabular-nums; }
.cons-delta .cal-diff { font-weight: 750; }
@media (max-width: 760px) { .cons-row { grid-template-columns: repeat(2, 1fr); } }

.ver-row { display: grid; grid-template-columns: 1.15fr 1.25fr .7fr .95fr 1.1fr 1.6fr; 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); }
/* "Did the new model actually improve?" is the last column because it is the answer, and
   an answer is read after the figures it rests on. It is also the only column allowed to
   be negative in bold — a model page that renders every update as a win is not one. */
.ver-current { box-shadow: var(--edge-hi), inset 0 0 0 1px var(--hairline-2); }
.ver-current .cal-diff { font-weight: 800; }
@media (max-width: 900px) {
  .ver-row { grid-template-columns: 1.2fr 1fr 1.2fr 1.5fr; }
  .ver-row > span:nth-child(2), .ver-row > span:nth-child(3) { display: none; }
}

/* 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;
}

/* ============================================================================
   PERFORMANCE — MODEL VALIDATION SURFACE
   The page reaches its conclusions before it shows its evidence, and the styling
   carries that: three levels, separated by space and a labelled rule, with the
   headline weight spent at the top and the tables below kept dense.

   Colour discipline is the design system's, unchanged. Orange stays selection and
   opportunity identity; green is supporting evidence and coral is risk, so a lift is
   allowed a tint only once it is large enough to be evidence — inside ±2 points every
   figure on this page stays grey. A red/green cell for every number would turn a
   diagnostic into a scoreboard.
   ========================================================================== */

/* --- Active filter state ------------------------------------------------- */
/* The pills show which option is selected; this says what you are looking at, because
   every figure below responds to it and a reader who has scrolled has no other cue. */
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin: -.4rem 0 1.1rem; }
.af-lead { color: var(--text-4); font-size: .7rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .05em; margin-right: .15rem; }
.af-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .6rem;
  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: .78rem; font-weight: 700; text-decoration: none;
  transition: background var(--dur-fast) var(--ease); }
.af-chip:hover { background: rgba(244, 122, 36, .22); }
.af-key { color: var(--brand-2); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; }
.af-x { color: var(--text-4); font-size: .9rem; line-height: 1; }
.af-chip:hover .af-x { color: var(--text-1); }

/* --- Level rhythm -------------------------------------------------------- */
/* Space goes between the conceptual groups, not inside them. */
.perf-level-1 > .analytics-section { margin-top: 1.5rem; }
.perf-level-2 > .analytics-section:first-child,
.perf-level-3 > .analytics-section:first-child { margin-top: 1.2rem; }
.level-1-head { font-size: 1.32rem !important; letter-spacing: -.02em; color: var(--text-1); }
.perf-level-3 > .analytics-section > h2 { font-size: 1.05rem; color: var(--text-2); }

.perf-rule { display: flex; align-items: center; gap: .8rem; margin: 2.6rem 0 .4rem; }
.perf-rule::before, .perf-rule::after { content: ""; height: 1px; flex: 1 1 auto;
  background: var(--divider); }
.perf-rule::before { flex-grow: 0; width: 0; }
.perf-rule span { color: var(--text-4); font-size: .68rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .09em; }

/* --- Signal check: the executive summary --------------------------------- */
/* Two or three labelled observations, not one long sentence. The left brand rule gives
   it the headline weight the plain surface cards below deliberately don't have. */
.signal-check { background: linear-gradient(165deg, var(--surface-1-top), var(--surface-1));
  border: 1px solid var(--divider); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); padding: 1rem 1.15rem .9rem; margin: 0 0 1.2rem;
  box-shadow: var(--edge-hi), var(--shadow-sm); }
.sc-head { color: var(--text-4); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: .7rem; }
.sc-item { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .9rem;
  align-items: baseline; padding: .38rem 0; }
.sc-item + .sc-item { border-top: 1px solid var(--hairline); }
.sc-label { color: var(--brand-2); font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; }
.sc-text { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.sc-text strong { color: var(--text-1); font-weight: 750; }

/* --- Performance summary -------------------------------------------------- */
/* Hit rate and lift over baseline are the same size on purpose. The raw rate is the
   figure most likely to be read as skill and least likely to be it. */
.perf-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin: .2rem 0 .1rem; }
.ps-tile { padding: .85rem 1rem; border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.ps-label { color: var(--text-4); font-size: .66rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .05em; }
.ps-value { color: var(--text-1); font-size: 2rem; font-weight: 850; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: .18rem 0 .1rem; }
.ps-value.pos { color: var(--green); }
.ps-value.neg { color: var(--red); }
.ps-sub { color: var(--text-4); font-size: .76rem; font-variant-numeric: tabular-nums; }
.ps-meta { color: var(--text-4); font-size: .78rem; margin: .55rem 0 0;
  font-variant-numeric: tabular-nums; }
.ps-meta .cal-diff { font-weight: 750; }
.perf-means { margin: .9rem 0 .2rem; padding-left: .85rem;
  border-left: 2px solid var(--hairline-2); color: var(--text-2);
  font-size: .98rem; line-height: 1.55; }
.perf-summary-section .cohort-comparison { margin: 1rem 0 0; }
@media (max-width: 640px) { .perf-summary { grid-template-columns: 1fr; } }

/* --- What's working: edge first ------------------------------------------- */
.mc-edge-cell { display: flex; flex-direction: column; gap: .05rem; }
.mc-edge { font-size: 1.02rem; font-weight: 820; letter-spacing: -.01em; }
.mc-edge.pos { color: var(--green); }
.mc-edge.neg { color: var(--red); }
.mc-edge.flat { color: var(--text-3); }
.mc-n, .mc-share { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mc-head span { display: flex; flex-direction: column; gap: .1rem; }
.mc-head small { font-size: .6rem; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--text-4); opacity: .8; }

/* --- Trust board ---------------------------------------------------------- */
/* The verdict, stated before the evidence. Tier colour is a 3px left edge only: a filled
   card per tier would read as four alert states rather than one ranked judgement. */
.trust-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem; margin-top: .3rem; }
.tb-tier { padding: .8rem .9rem; border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); border-left: 3px solid var(--hairline-2);
  box-shadow: var(--edge-hi); }
.tb-strong { border-left-color: var(--green); }
.tb-promising { border-left-color: var(--brand); }
.tb-watch { border-left-color: var(--text-4); }
.tb-weak { border-left-color: var(--red); }
.tb-early { border-left-color: var(--hairline-2); }
.tb-tier-head { color: var(--text-1); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; }
.tb-blurb { color: var(--text-4); font-size: .7rem; line-height: 1.4; margin: .2rem 0 .55rem; }
.tb-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .4rem; }
.tb-chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem;
  align-items: baseline; padding-top: .4rem; border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums; }
.tb-chip:first-child { padding-top: 0; border-top: 0; }
.tb-market { color: var(--text-1); font-size: .86rem; font-weight: 700; }
.tb-lift { color: var(--text-2); font-size: .8rem; font-weight: 700; text-align: right; }
.tb-note { grid-column: 1 / -1; color: var(--text-4); font-size: .68rem; line-height: 1.35; }

/* --- Score calibration: bars with the base rate marked on them ------------ */
/* The bar is the observed hit rate; the tick is what that band's props convert on their
   own, so the visible gap IS the lift. A plain hit-rate bar chart would give the longest
   bar to the band with the easiest events, which is the inference this page prevents. */
.cal-bars { display: flex; flex-direction: column; gap: 2px; margin: .2rem 0 .9rem; }
.cb-row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 3.4rem 4rem;
  gap: .7rem; align-items: center; padding: .32rem .8rem; border-radius: var(--r-sm);
  background: var(--surface-1); box-shadow: var(--edge-hi);
  font-size: .82rem; font-variant-numeric: tabular-nums; }
.cb-small { opacity: .62; }
.cb-band { color: var(--text-1); font-weight: 750; }
.cb-track { position: relative; height: 1.15rem; border-radius: var(--r-xs);
  background: var(--surface-3); overflow: hidden; }
.cb-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-xs);
  background: var(--hairline-2); }
.cb-fill.pos { background: linear-gradient(90deg, rgba(107,198,143,.30), rgba(107,198,143,.55)); }
.cb-fill.neg { background: linear-gradient(90deg, rgba(239,142,134,.28), rgba(239,142,134,.50)); }
.cb-fill.flat { background: rgba(255,255,255,.13); }
.cb-base { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px;
  background: var(--text-1); opacity: .75; border-radius: 1px; }
.cb-rate { color: var(--text-1); font-weight: 750; text-align: right; }
.cb-n { color: var(--text-4); font-size: .72rem; text-align: right; }
.mtp-legend .cb-key-fill::before { background: rgba(107,198,143,.55); }
.mtp-legend .cb-key-base::before { width: 2px; background: var(--text-1); opacity: .75; }
@media (max-width: 560px) {
  .cb-row { grid-template-columns: 3.6rem minmax(0, 1fr) 3rem; }
  .cb-n { display: none; }
}

/* --- Market pulse: change is the answer, the grid is the texture ---------- */
/* Older slates fade. Eight equally saturated columns made ordinary variance look like a
   row of findings, when the question is the shape of the recent run. */
.mtp-cell { opacity: calc(1 - var(--age, 0) * .085); }
.mtp-cell.small { opacity: calc((1 - var(--age, 0) * .085) * .55); }
.mtp-trend { background: rgba(255,255,255,.03); }
.mtp-trend b { font-size: .84rem; font-weight: 800; color: var(--text-2); }
.mtp-trend small { color: var(--text-4); font-size: .55rem; }
.mtp-trend.up b { color: var(--green); }
.mtp-trend.down b { color: var(--red); }
.mtp-trend.flat b { color: var(--text-3); }

/* --- By month: a shape, not a chart -------------------------------------- */
.month-spark { display: flex; align-items: center; gap: .75rem; margin: .1rem 0 .6rem; }
.spark { overflow: visible; }
.spark-line { fill: none; stroke: var(--brand-2); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.spark-zero { stroke: var(--hairline-2); stroke-width: 1; stroke-dasharray: 2 3; }
.spark-dot { fill: var(--brand); }

/* --- Methodology ---------------------------------------------------------- */
/* Last, and quiet: it is the page's terms of reference, read once. */
.methodology .method-list { margin: .3rem 0 0; padding: 1rem 1.15rem;
  border-radius: var(--r-md); background: var(--surface-1);
  border: 1px solid var(--divider); box-shadow: var(--edge-hi); }
.method-list dt { color: var(--text-2); font-size: .82rem; font-weight: 750;
  margin-top: .95rem; }
.method-list dt:first-child { margin-top: 0; }
.method-list dd { margin: .25rem 0 0; color: var(--text-4); font-size: .8rem;
  line-height: 1.55; }
.method-list dd b { color: var(--text-3); font-weight: 700; }

/* ---- 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
   ========================================================================== */
/* 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-logo { display: block; width: 54px; height: 54px; object-fit: contain; margin: 0 auto .4rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.nfl-col-logo { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: .4rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.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; }

/* 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-arc-list { grid-template-columns: 1fr; } }

.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; }

/* Market spread and total on a card. Faded on purpose: it is the book's number, not a
   score and not our read, so it sits in the same column as the score without competing
   with one. Tabular numerals keep the column aligned down a slate of twenty games. */
.team-line, .market-total {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
}
/* Beside the team name, so it inherits the row's weight and needs its own smaller,
   dimmer treatment to stay clearly the book's number rather than part of the name. */
.team-line { margin-left: .45rem; font-size: .78rem; }
/* The total rides the top line with the league and week — game-level facts together —
   so it matches the context chip rather than the team rows. Its own separator dot,
   which works whether or not a competition context sits between it and the league. */
.game-total {
  color: var(--text-4); font-size: .72rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.game-total::before { content: "·"; margin-inline: .4rem; opacity: .6; }
/* A live or final game shows a score in this column; the pre-game line is withheld
   there by market_cells, so the two can never collide. */

/* A game the race page counts as consequential. Quieter than "Best game" on purpose:
   that chip is our editorial pick and this is a structural fact about the standings —
   an outline rather than a fill, so the two never read as the same kind of claim. */
.race-chip {
  padding: .08rem .42rem;
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Prop-lean ledger page (/leans/): a record of every hand-written over/under, graded. */
.ledger-game { margin-top: .9rem; }
.ledger-game-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .4rem; }
.ledger-game-title { font-size: .92rem; font-weight: 700; color: var(--text-1); }
.ledger-game-sub { color: var(--text-4); font-size: .74rem; font-variant-numeric: tabular-nums; }
.ledger-rows { display: flex; flex-direction: column; gap: .3rem; }
.ledger-row { display: grid; grid-template-columns: 2rem 1.4fr 1.6fr auto auto; align-items: center; gap: .6rem;
  padding: .45rem .7rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi);
  font-size: .82rem; }
.ledger-row .rank { color: var(--text-4); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-row .player { color: var(--text-1); font-weight: 700; }
.ledger-row .player small { display: block; color: var(--text-4); font-weight: 500; font-size: .7rem; }
.ledger-row .call { color: var(--text-2); font-weight: 600; }
.ledger-row .actual { color: var(--text-4); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-why { grid-column: 1 / -1; color: var(--text-4); font-size: .72rem; line-height: 1.4; }
.ledger-res { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .02em;
  padding: .1rem .45rem; border-radius: var(--r-pill); white-space: nowrap; }
.ledger-res.hit { color: var(--green); background: rgba(107, 198, 143, .14); }
.ledger-res.miss { color: var(--red); background: rgba(239, 142, 134, .14); }
.ledger-res.void, .ledger-res.pending, .ledger-res.pass { color: var(--text-4); background: var(--surface-3); }
.ledger-tables { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .9rem; }
.ledger-table-head { font-size: .8rem; font-weight: 750; color: var(--text-2); margin-bottom: .35rem; }
.ledger-table-head span { color: var(--text-4); font-weight: 500; font-size: .72rem; margin-left: .4rem; }
.ledger-splits { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .6rem; }
.ledger-splits.four { grid-template-columns: repeat(4, 1fr); }
.ledger-split { padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--edge-hi); }
.ledger-split-head { font-size: .7rem; font-weight: 700; color: var(--text-4); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: .3rem; }
.ledger-split-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--text-2);
  padding: .12rem 0; font-variant-numeric: tabular-nums; }
.ledger-split-row span:last-child { color: var(--text-3); }
@media (max-width: 720px) {
  .ledger-row { grid-template-columns: 2rem 1fr auto; }
  .ledger-row .call { grid-column: 2 / -1; }
  .ledger-splits, .ledger-splits.four, .ledger-tables { grid-template-columns: 1fr; }
}
.nfl-sources { color: var(--text-4); font-size: .72rem; line-height: 1.5; margin-top: .6rem; padding-top: .55rem;
  border-top: 1px solid var(--divider); }
.nfl-sources a { color: var(--text-3) !important; }
.nfl-sources a:hover { color: var(--brand-2) !important; }
@media (max-width: 720px) { .nfl-cols { grid-template-columns: 1fr; } }


/* ============================================================================
   NFL MATCHUP PAGE — hierarchy
   Three depths of reading and three layout patterns (editorial / comparison /
   matchup). Sections carry the rhythm: a rule and generous air *between* them,
   tighter rows *inside* them, so the page stops reading as one stream of equal
   cards. Orange is rationed to the insights (an observation's dot, an edge, the
   watch line); green and coral carry direction only; everything else ranks by
   weight, size and contrast.
   ========================================================================== */
.nfl-sec { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--divider); }
.nfl-sec-head { margin-bottom: .8rem; }
.nfl-sec-title { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: .01em;
  color: var(--text-1); text-transform: uppercase; }
.nfl-sec-sub { margin: .2rem 0 0; color: var(--text-4); font-size: .8rem; line-height: 1.45; max-width: 68ch; }
.nfl-sec-sub a { color: var(--text-3) !important; }
/* Supporting sections sit lower in the hierarchy: a smaller title and less air above. */
.nfl-sec--support { margin-top: 1.7rem; }
.nfl-sec--support .nfl-sec-title { font-size: .86rem; color: var(--text-2); }
.nfl-sec--appendix > summary { list-style: none; cursor: pointer; }
.nfl-sec--appendix > summary::-webkit-details-marker { display: none; }
.nfl-sec--appendix > summary .nfl-sec-title::before { content: "▸"; display: inline-block; width: 1.1em;
  color: var(--text-4); transition: transform var(--dur) var(--ease); }
.nfl-sec--appendix[open] > summary .nfl-sec-title::before { transform: rotate(90deg); }
.nfl-sec--appendix[open] > summary { margin-bottom: .8rem; }
.nfl-note { color: var(--red); font-size: .78rem; font-weight: 500; margin: .6rem 0 0; text-align: center; }
.nfl-empty { color: var(--text-4); font-size: .78rem; padding: .3rem 0; }

/* Shared row anatomy: name + chips on the top line, then the market/evidence, then
   the muted why. Thin separators between rows inside one card, not a box per row. */
.nfl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: start; }
.nfl-col { padding: .55rem .85rem; border-radius: var(--r-sm); background: var(--surface-1);
  box-shadow: var(--edge-hi); min-width: 0; }
.nfl-col-team { font-size: .7rem; font-weight: 750; color: var(--text-4); text-transform: uppercase;
  letter-spacing: .06em; padding: .15rem 0 .35rem; }
.nfl-list > * + * { border-top: 1px solid var(--divider); }
.nfl-row-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.nfl-name { font-size: .9rem; font-weight: 750; color: var(--text-1); letter-spacing: -.005em; }
.nfl-rank { color: var(--text-4); font-size: .68rem; font-weight: 700; margin-right: .4rem;
  font-variant-numeric: tabular-nums; }
.nfl-pos { font-size: .62rem; font-weight: 600; color: var(--text-4); margin-left: .35rem;
  padding: .05rem .3rem; border-radius: var(--r-pill); background: var(--surface-3); vertical-align: middle; }
.nfl-row-chips { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.nfl-market-line, .nfl-evidence { font-size: .8rem; color: var(--text-2); font-weight: 600;
  margin-top: .12rem; font-variant-numeric: tabular-nums; }
.nfl-why, .nfl-spot-why { display: block; font-size: .74rem; line-height: 1.45; color: var(--text-4);
  margin-top: .22rem; max-width: 60ch; }

/* Direction is the strongest badge on a row; confidence is the quieter second. */
.nfl-dir { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .14rem .5rem; border-radius: var(--r-pill); white-space: nowrap; }
.nfl-dir.over { color: var(--green); background: rgba(107, 198, 143, .16); }
.nfl-dir.under { color: var(--red); background: rgba(239, 142, 134, .16); }
.nfl-dir.pre, .nfl-dir.avoid, .nfl-dir.pass { color: var(--text-4); background: var(--surface-3); font-weight: 700; }
.nfl-lean.pass .nfl-name, .nfl-sec--leans .nfl-lean:has(> .nfl-row-top .nfl-dir.pass) .nfl-name {
  color: var(--text-3); font-weight: 650; }
.nfl-sec--leans .nfl-lean:has(> .nfl-row-top .nfl-dir.pass) .nfl-why { font-size: .7rem; }
.nfl-conf { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .08rem .4rem; border-radius: var(--r-pill); color: var(--text-4);
  border: 1px solid var(--divider); background: transparent; }
.nfl-conf.high { color: var(--text-2); border-color: var(--text-4); }
.nfl-market { font-size: .68rem; font-weight: 750; color: var(--text-1); background: var(--surface-3);
  padding: .14rem .5rem; border-radius: var(--r-pill); white-space: nowrap; letter-spacing: .01em; }
.nfl-lean { padding: .5rem 0; }
.nfl-sec--leans .nfl-name { font-size: .96rem; }
.nfl-sec--leans .nfl-col { border-top: 2px solid var(--text-4); }
.nfl-sec--volume .nfl-col { background: transparent; box-shadow: inset 0 0 0 1px var(--divider); }
.nfl-sec--volume .nfl-name { font-size: .84rem; font-weight: 650; color: var(--text-2); }
.nfl-sec--volume .nfl-lean { padding: .38rem 0; }
.nfl-sec--volume .nfl-market-line { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.nfl-sec--volume .nfl-why { font-size: .7rem; }
.nfl-sec--overs .nfl-col { border-left: 3px solid var(--green); }
.nfl-sec--overs .nfl-col-team { color: var(--green); }
.nfl-sec--overs .nfl-dir.over { background: rgba(107, 198, 143, .22); }
.nfl-lean.pre .nfl-name { color: var(--text-3); font-weight: 650; }

/* Editorial card: one column of prose at a reading width. */
.nfl-sec--editorial .nfl-ed, .nfl-read { padding: .9rem 1.1rem; 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-ed-headline { margin: 0 0 .9rem; font-size: 1rem; font-weight: 700; line-height: 1.45;
  color: var(--text-2); letter-spacing: -.005em; max-width: 62ch; }
.nfl-ed-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: .9rem 1.6rem; }
.nfl-ed-points li { position: relative; padding-left: 1.2rem; max-width: 46ch; }
.nfl-ed-points li::before { content: ""; position: absolute; left: 0; top: .42rem; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--brand); }
.nfl-ed-lead { color: var(--text-1); font-weight: 800; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.01em; }
.nfl-ed-text { margin: .25rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--text-4); }
.nfl-ed-alt { margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--divider);
  font-size: .8rem; line-height: 1.45; color: var(--text-4); max-width: 68ch; }
.nfl-ed-alt span { color: var(--text-3); font-weight: 700; }

/* The read: three labelled ideas, label small and muted, conclusion large and bright. */
.nfl-read { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.nfl-read-idea { padding: .7rem .9rem .8rem 1rem; border-radius: var(--r-sm); background: var(--surface-2);
  border-left: 3px solid var(--text-4); }
.nfl-read-idea.watch { grid-column: 1 / -1; border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(255, 122, 26, .08), transparent 60%), var(--surface-2); }
.nfl-read-label { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: .35rem; }
.nfl-read-idea.watch .nfl-read-label { color: var(--brand-2); }
.nfl-read-idea.script { grid-column: 1 / -1; border-left-color: var(--text-3); }
.nfl-read-label span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-4); margin-left: .4rem; }
.nfl-read-idea.script .nfl-read-text { font-size: .98rem; font-weight: 600; color: var(--text-2); max-width: 70ch; }
.nfl-read-text { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.4; color: var(--text-1);
  letter-spacing: -.01em; max-width: 44ch; }
.nfl-read-idea.watch .nfl-read-text { max-width: 70ch; }

/* Matchup at a glance: the identity grid, muted unless a side has a real advantage. */
.nfl-glance { border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--edge-hi);
  border: 1px solid var(--hairline); padding: .3rem .9rem .6rem; }
.nfl-glance-joint { font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-4); padding: .75rem 0 .45rem; border-top: 1px solid var(--divider); margin-top: .3rem; }
.nfl-id { display: flex; flex-direction: column; }
.nfl-glance-say { margin-top: .5rem; font-size: .84rem; line-height: 1.45; color: var(--text-2); max-width: 70ch; }
.nfl-glance-say span { color: var(--text-1); font-weight: 750; }
.nfl-id-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
  padding: .42rem 0; border-top: 1px solid var(--divider); }
.nfl-id-head { border-top: 0; padding: .45rem 0 .3rem; }
.nfl-id-head span { color: var(--text-4); font-weight: 750; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; }
.nfl-id-val { font-size: .92rem; font-weight: 600; color: var(--text-3); 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-row.even .nfl-id-val { color: var(--text-4); }
.nfl-id-val.better { color: var(--text-1); font-weight: 800; }
.nfl-id-label { text-align: center; color: var(--text-4); font-size: .72rem; font-weight: 500; }
.nfl-pct { font-size: .6rem; font-weight: 700; padding: .05rem .3rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-4); font-variant-numeric: tabular-nums; }
.nfl-pct sup { font-size: .48rem; }
.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: two large offense → defense cards. The edge is the section's one orange. */
.nfl-bfs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nfl-bf { padding: .6rem .8rem .2rem; border-radius: var(--r-sm); background: var(--surface-2);
  box-shadow: var(--edge-hi); }
.nfl-bf-title { font-size: .84rem; font-weight: 800; color: var(--text-1); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: .4rem; }
.nfl-bf-row { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center;
  gap: .5rem .7rem; padding: .55rem 0; border-top: 1px solid var(--divider); }
.nfl-bf-kind { font-size: .64rem; font-weight: 750; color: var(--text-4); text-transform: uppercase;
  letter-spacing: .06em; width: 3.6rem; }
.nfl-bf-who { font-size: .72rem; font-weight: 700; color: var(--text-3); }
.nfl-bf-who span { color: var(--text-4); font-weight: 500; }
.nfl-bf-val { font-size: 1.05rem; font-weight: 800; color: var(--text-1); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: .3rem; letter-spacing: -.01em; }
.nfl-bf-val small { font-size: .66rem; font-weight: 600; color: var(--text-4); }
.nfl-bf-arrow { color: var(--text-4); font-size: 1rem; font-weight: 700; }
.nfl-bf-edge { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: var(--r-pill); white-space: nowrap; justify-self: end; }
.nfl-bf-edge.edge { color: var(--on-brand); background: var(--brand-grad); }
.nfl-bf-edge.even { color: var(--text-4); background: var(--surface-3); }

/* Spotlights: the matchup call, colour only on the one direction that is a prediction. */
.nfl-name--spot { font-size: 1.04rem; font-weight: 800; }
.nfl-spot { padding: .65rem 0; }
.nfl-spot-thesis { margin-top: .15rem; font-size: .88rem; font-weight: 700; color: var(--text-2); }
.nfl-spot .nfl-evidence { font-size: .76rem; font-weight: 500; color: var(--text-3); margin-top: .1rem; }
.nfl-spot-mx { margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.nfl-mx { font-size: .64rem; font-weight: 750; letter-spacing: .03em; 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-why { flex-basis: 100%; margin-top: 0; }
.nfl-spot-badge { font-size: .7rem; 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); }
.nfl-mx-note { color: var(--text-4); font-size: .74rem; line-height: 1.45; margin-top: .7rem; max-width: 72ch; }
.nfl-mx-note b { color: var(--text-2); font-weight: 700; }

/* Availability: name strongest, status scannable, context small and muted; tight rows. */
.nfl-avail { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem;
  padding: .32rem 0; font-size: .82rem; line-height: 1.35; }
.nfl-avail-name { font-weight: 750; color: var(--text-1); }
.nfl-status { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .08rem .4rem; border-radius: var(--r-pill); white-space: nowrap; }
.nfl-status.out { color: var(--red); background: rgba(239, 142, 134, .16); }
.nfl-status.q { color: var(--text-2); background: var(--surface-3); }
.nfl-status.gone { color: var(--text-4); background: transparent; border: 1px solid var(--divider); }
.nfl-avail-detail { flex-basis: 100%; color: var(--text-4); font-size: .7rem; }
.nfl-avail.impact { padding: .42rem 0; }
.nfl-avail-impact { flex-basis: 100%; color: var(--text-3); font-size: .76rem; line-height: 1.45; max-width: 46ch; }
.nfl-avail-other { margin-top: .35rem; padding-top: .3rem; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; gap: .1rem .9rem; align-items: baseline; }
.nfl-avail-other-head { flex-basis: 100%; font-size: .6rem; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-4); }
.nfl-avail.minor { padding: .12rem 0; font-size: .76rem; }
.nfl-avail.minor .nfl-avail-name { font-weight: 600; color: var(--text-3); }
.nfl-avail-gone { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--divider); }
.nfl-avail-gone-head { font-size: .62rem; font-weight: 750; color: var(--text-4); text-transform: uppercase;
  letter-spacing: .05em; padding-bottom: .1rem; }
.nfl-avail-gone-head span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.nfl-avail-gone .nfl-avail-name { color: var(--text-3); font-weight: 650; }
.nfl-avail-gone .nfl-avail { padding: .22rem 0; }

/* Recent form: one compact strip per team. */
.nfl-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.nfl-form-col { display: flex; align-items: center; gap: .9rem; padding: .8rem .95rem; border-radius: var(--r-sm);
  background: var(--surface-1); box-shadow: var(--edge-hi); }
.nfl-form-col .nfl-col-team { padding: 0; }
.nfl-form-dots { display: inline-flex; gap: .35rem; }
.nfl-fdot { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 50%;
  font-size: .74rem; 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-3); font-size: .8rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.nfl-form-sub b { color: var(--text-1); font-weight: 800; }

/* Since last season: the move is the row; the detail is a whisper. */
.nfl-chg { display: flex; gap: .5rem; align-items: baseline; padding: .34rem 0; font-size: .8rem; line-height: 1.4; }
.nfl-chg-dir { flex: 0 0 auto; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  padding: .08rem .35rem; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-4); }
.nfl-chg-dir.in { color: var(--green); background: rgba(107, 198, 143, .12); }
.nfl-chg-text { min-width: 0; }
.nfl-chg-lead { color: var(--text-1); font-weight: 750; }
.nfl-chg-detail { display: block; color: var(--text-4); font-size: .72rem; }

/* Methodology and sources: present, separated, quiet. */
.nfl-method { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--divider); }
.nfl-method-head { font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: .3rem; }
.nfl-method .opp-disclaimer { margin: 0; max-width: 72ch; }
.nfl-sources { color: var(--text-4); font-size: .7rem; line-height: 1.55; margin: .5rem 0 0; max-width: 72ch; }
.nfl-sources a { color: var(--text-3) !important; }
.nfl-sources a:hover { color: var(--brand-2) !important; }

@media (max-width: 720px) {
  .nfl-cols, .nfl-bfs, .nfl-form, .nfl-read, .nfl-ed-points { grid-template-columns: 1fr; }
  .nfl-ed-points li { max-width: none; }
  .nfl-form-col { flex-wrap: wrap; }
  .nfl-form-sub { margin-left: 0; flex-basis: 100%; }
  .nfl-bf-row { grid-template-columns: auto 1fr auto 1fr; row-gap: .3rem; }
  .nfl-bf-edge { grid-column: 1 / -1; justify-self: start; }
  .nfl-sec { margin-top: 1.8rem; }
}