/* static/tutorial/tours/core/tour.css: the core tour's own figures and replicas (spec 2026-10-08 sections 4 and 7).
   Loaded after the chassis's static/tutorial/chassis/deck.css, which owns everything else on the page.

   Rules this file keeps:
   1. No font-size under 16px (tests/test_type_scale_floor.py).
   2. No green, except where the live app shows green for a graded call, and the logo (Bill, 2026-10-10)
      (tests/test_core_tour_truth.py lists the selectors allowed it).
   3. Every .rep-core-* class mirrors the app selector replicas.json names (tests/test_tour_drift.py), at the app's
      computed values (scripts/browser_checks/tour_replica_styles.py core): the board card is main.css's (.ob-*),
      the Best Bets block slate.css's (.bb-*), drawn at the width the slide gives it (the app's phone layout, the
      no-edge panel split in two). */

:root {
  --call: #10b981;                   /* main.css --accent: the app's green, only for a graded call and the logo */
  --call-bg: rgba(34,197,94,0.12);   /* main.css --accent-green-bg */
  --amber: #f59e0b;                  /* main.css --accent-amber */
  --rep-border: rgba(255,255,255,0.1);        /* main.css --border */
  --rep-border-card: rgba(255,255,255,0.22);  /* main.css --border-card */
  --rep-bb-border: rgba(255,255,255,0.08);    /* slate.css --slate-border */
  --rep-bb-border-soft: rgba(255,255,255,0.04);
  --rep-raised: #27272a;                      /* main.css --bg-raised */
}

/* ─── The window frame (the Exchanges tour's, static/tutorial/tours/exchanges/tour.css) ─── */
.rep-window { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.rep-chrome { display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); overflow-wrap: anywhere; }
.rep-chrome::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); opacity: 0.7; }
/* The window's body is the app's page: main.css's body sets 18px (--text-base) and line-height 1.55, which every
   replica inherits there (Bill, 2026-10-08: the tour matches the app). */
.rep-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; font-size: 18px; line-height: 1.55; }
.rep-body.c-flush { padding: 0; }
.tour-fig { display: flex; flex-direction: column; gap: 10px; }
.tour-asof { margin-top: -4px; }

/* ─── Slide 1: the line against the probability ─── */
.c1-brand { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.hero-logo { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; }
/* The logo keeps its green (Bill, 2026-10-10): main.css .top-nav-logo .logo-pipe / .logo-sigma. */
.hero-logo .pipe { margin: 0 2px; font-weight: 800; color: var(--call); text-shadow: 0 0 8px rgba(16,185,129,0.4); }
.hero-logo .bold { font-weight: 700; }
.hero-logo .sigma { font-weight: 700; color: var(--call); text-shadow: 0 0 14px rgba(16,185,129,0.5); }
.hero-tagline { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); }
.c1-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px 16px; align-items: stretch; }
.c1-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.s1-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.s1-game { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.s1-at { color: var(--text-dim); font-weight: 400; }
.s1-logo { width: 24px; height: 24px; object-fit: contain; }
.s1-k { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.s1-line, .c1-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s1-line .s1-k, .c1-needs .s1-k { margin-right: 6px; }
.s1-more { font-size: 16px; color: var(--text-dim); }
.c1-need { font-family: var(--font-mono); font-size: 16px; color: var(--text-secondary); padding: 4px 8px; border: 1px dashed rgba(245,158,11,0.55); border-radius: 6px; white-space: nowrap; }
.c1-need b { color: var(--amber); }
.s1-prob { position: relative; container-type: inline-size; }
.s1-prob > .s1-k { position: absolute; left: 0; top: 0; }
/* --lw holds the widest source name on one line: "Square (sportsbooks)", 159px at 600 16px (the app's names, Bill
   2026-10-10). */
.s1-pfig { --lw: 160px; --rw: 92px; --gap: 12px; padding: 0 calc(var(--rw) + var(--gap)) 0 calc(var(--lw) + var(--gap)); }
.s1-marks { position: relative; height: 38px; }
.s1-be-l, .s1-cons-l { position: absolute; bottom: 2px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; left: calc((var(--x) - 188) / 496 * 100%); }
.s1-be-l { transform: translateX(-100%); }
.s1-plot { position: relative; }
/* The labels and ticks above and below are HTML placed in the viewBox's units across the chart's width, so the
   chart's box keeps the viewBox's shape (496 x 170) whatever the engine makes of an SVG's auto height in a flex
   column: a box of another shape would letterbox the drawing (preserveAspectRatio meet) away from its labels.
   tests/test_tour_render_quality_browser.py measures the marks on the drawing in Chromium and WebKit at DPR 3. */
.s1-chart { display: block; width: 100%; height: auto; aspect-ratio: 496 / 170; overflow: visible; }
.s1-lrow { position: absolute; left: calc(-1 * (var(--lw) + var(--gap))); right: calc(-1 * (var(--rw) + var(--gap))); top: calc((var(--y) - 34) / 170 * 100%); transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; }
.s1-lsrc, .s1-lnum { display: flex; flex-direction: column; white-space: nowrap; }
.s1-lsrc { width: var(--lw); margin-right: auto; }
.s1-lnum { width: var(--rw); align-items: flex-end; }
.s1-ticks { position: relative; height: 22px; }
.s1-tick { position: absolute; top: 0; left: calc((var(--x) - 188) / 496 * 100%); transform: translateX(-50%); font: 16px/1.2 var(--font-mono); color: var(--text-dim); }
/* The grid "clearly visible" (Bill, 2026-10-13, on his iPhone: at 5% and 10% white the dots floated on no visible grid). */
.s1-grid { stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.s1-lane { stroke: rgba(255,255,255,0.30); stroke-width: 1; }
.s1-lname { font: 600 16px/1.2 var(--font-sans); color: var(--text-secondary); }
.s1-lsub { font: 16px/1.2 var(--font-sans); color: var(--text-dim); }
.s1-lval { font: 700 17px/1.2 var(--font-mono); color: var(--text-primary); }
.s1-dot-book { fill: #d4d4d8; fill-opacity: 0.78; }
.s1-dot-poly { fill: #60a5fa; }
.s1-dot-model { fill: #a78bfa; }
.s1-cons { stroke: var(--text-primary); stroke-width: 3; stroke-linecap: round; }
.s1-cons-glow { stroke: var(--text-primary); stroke-opacity: 0.18; stroke-width: 12; stroke-linecap: round; }
.s1-cons-v { font: 700 26px/1.3 var(--font-mono); color: var(--text-primary); }
.s1-cons-k { font: 16px/1.2 var(--font-sans); color: var(--text-secondary); }
.s1-be { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 4; }
.s1-be-k { font: 16px/1.2 var(--font-sans); color: var(--amber); }
.s1-be-v { font: 700 17px/1.2 var(--font-mono); color: var(--amber); }
@container (max-width: 699px) {
  .s1-marks { height: 58px; }
  .s1-be-l, .s1-cons-l { flex-direction: column; gap: 0; }
  .s1-be-l { align-items: flex-end; }
}
@container (max-width: 583px) {
  .s1-prob > .s1-k { position: static; display: block; margin-bottom: 4px; }
  .s1-pfig { padding: 0; display: flex; flex-direction: column; }
  .s1-plot { display: contents; }
  .s1-marks { order: 1; } .s1-chart { order: 2; } .s1-ticks { order: 3; }
  .s1-lrow { order: 4; position: static; transform: none; padding: 2px 0; gap: 0 10px; flex-wrap: wrap; }
  .s1-lrow::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; }
  .s1-lrow-book::before { background: #d4d4d8; }
  .s1-lrow-poly::before { background: #60a5fa; }
  .s1-lrow-model::before { background: #a78bfa; }
  .s1-lsrc, .s1-lnum { width: auto; }
  .s1-lsrc { flex-direction: row; gap: 8px; }
  .s1-lnum { margin-left: auto; flex-direction: row; gap: 8px; }
}
.c1-answers { display: flex; flex-direction: column; gap: 12px; }
.s1-ans { flex: 1 1 0; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.s1-team { display: flex; align-items: center; gap: 10px; }
.s1-team-n { font-size: 20px; font-weight: 600; color: var(--text-primary); }
.s1-team-p { margin-left: auto; font-family: var(--font-mono); font-size: 36px; line-height: 1; color: var(--text-primary); }
.s1-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.s1-edge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s1-edge-v { font-size: 18px; color: var(--text-secondary); }
/* The NO EDGE call as the 16-step deck drew it (.tag-noedge, git show 8fc2027c:static/tutorial/tutorial.html): a
   neutral chip, never green. */
.s1-tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 4px; white-space: nowrap; background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border-default); }

/* ─── Replica: the board card (main.css .ob-*, markup app.js renderOddsBoxCardBody) ─── */
/* Slide 2 draws the board as a phone shows it (the Best Bets block beside it is the app's phone layout too):
   main.css's <=768px card rules, at every width. The column legend reads as one line over the table
   (.ob-legend-phone) and the per-column legend row waits, as on the app's phone. The card sits on the app's page:
   main.css's body sets 18px and line-height 1.55, which the card inherits there. */
.rep-core-ob-card { background: var(--bg-elevated); border: 1px solid var(--rep-border-card); border-radius: 12px; margin: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.4); font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.rep-core-ob-head { padding: 10px; border-bottom: 1px solid var(--rep-border); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.rep-core-ob-at { color: var(--text-muted); font-weight: 400; margin: 0 2px; }
.rep-core-ob-verdict { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-top: 1px solid var(--rep-border); font-size: 17px; color: var(--text-secondary); }
/* A play strip and its EV: green, a graded call (main.css .ob-verdict-play / .ob-verdict-ev). */
.rep-core-ob-verdict-play { border-top-color: var(--call); color: var(--text-primary); }
/* Key finding (Bill, 2026-10-15, "Fill = finding"): the app's solid amber fill, dark ink (slate.css KEY FINDING). */
.rep-core-ob-verdict-ev { background: var(--amber); color: #0d1117; font-weight: 700; padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.rep-core-ob-verdict-none { color: var(--text-secondary); }
.rep-core-ob-verdict-go { font-size: 16px; color: #0d1117; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; padding: 3px 10px; background: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 999px; }
.rep-core-ob-box-wrap { overflow-x: auto; }
.rep-core-ob-legend-phone { display: block; font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); text-align: right; padding: 6px 10px 2px; line-height: 1.3; }
.rep-core-ob-box { width: 100%; border-collapse: collapse; font-size: 18px; table-layout: fixed; }
/* main.css's global table cells (th, td: top-aligned; th: the surface background), which the card's own rules refine. */
.rep-core-ob-th, .rep-core-ob-subhead-th, .rep-core-ob-team { background: var(--bg-surface); vertical-align: top; }
.rep-core-ob-th { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 6px 3px; text-align: center; white-space: nowrap; }
.rep-core-ob-th:first-child { width: 36%; }
.rep-core-ob-th-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rep-core-ob-th-short { display: inline; }
.rep-core-ob-subhead { vertical-align: top; display: none; }
.rep-core-ob-subhead-th { font-family: var(--font-mono); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); padding: 0 3px 6px; border-bottom: 1px solid var(--rep-border); text-align: center; white-space: normal; line-height: 1.3; }
.rep-core-ob-k-line, .rep-core-ob-k-price, .rep-core-ob-k-prob { color: var(--text-primary); }
.rep-core-ob-k-prob { font-weight: 700; }
.rep-core-ob-td { vertical-align: top; color: var(--text-secondary); padding: 6px 3px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
.rep-core-ob-team { text-align: left; padding: 6px 4px 6px 10px; font-size: 16px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-subtle); white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
.rep-core-ob-box tbody tr:last-child .rep-core-ob-td, .rep-core-ob-box tbody tr:last-child .rep-core-ob-team { border-bottom: none; }
.rep-core-ob-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; width: 100%; padding: 4px 2px; border: 1px solid transparent; border-radius: 6px; }
/* The pick's cell: green, a graded call (main.css .ob-cell-pick). */
.rep-core-ob-cell-pick { background: var(--call-bg); border-color: var(--call); }
.rep-core-ob-line { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.rep-core-ob-price { font-family: var(--font-mono); font-size: 16px; color: var(--text-primary); line-height: 1.25; }
.rep-core-ob-prob { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.rep-core-ob-strip { padding: 8px 10px; border-top: 1px solid var(--border-subtle); font-size: 18px; color: var(--text-primary); }
.rep-core-ob-strip-k { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-right: 8px; }
.rep-core-ob-pct-prob { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
/* The quiet card shows what a phone board card shows: matchup, verdict, most likely (main.css <=639px folds the odds). */
.c2-quiet .rep-core-ob-verdict { border-top: none; }

/* ─── Replica: the Best Bets block (slate.css .bb-*, markup slate_best_bets_view.js render) at the app's
   phone layout (<= 639px: tabs, one list, the no-edge panel's headline boxed and its lead-in under it). The
   app's other greens (the lead card's rule, the meter, the best-price pill, the selected tab's underline) are
   drawn neutral here: green stays a graded call's. ─── */
.rep-core-best-bets { background: var(--bg-card); border-radius: 12px; padding: 14px 16px 12px; }
/* The head as the app lays it out under 1280px (title left, the risk pill right, wrapping under it when narrow). */
.rep-core-bb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rep-core-bb-head-l { min-width: 0; flex: 1 1 auto; }
.rep-core-bb-eyebrow { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.rep-core-bb-title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin: 2px 0 4px; line-height: 1.2; }
.rep-core-bb-head-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); }
.rep-core-bb-risk, .rep-core-bb-collapse { display: inline-flex; align-items: center; justify-content: center; font: inherit; color: inherit; border: 1px solid var(--rep-bb-border); border-radius: 6px; padding: 5px 10px; min-height: 32px; }
.rep-core-bb-collapse { min-width: 44px; }
.rep-core-bb-body { display: flex; flex-direction: column; }
.rep-core-bb-nocall-top { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--rep-bb-border); border-radius: 6px; }
.rep-core-bb-nocall-h, .rep-core-bb-nocall-p { font-size: 17px; line-height: 1.45; color: var(--text-muted); margin: 0; }
.rep-core-bb-nocall-p { margin-top: 10px; }
.rep-core-bb-nocall-top b, .rep-core-bb-nocall-lead b { color: var(--text-primary); font-weight: 600; }
.rep-core-bb-copy-short { display: none; }
.rep-core-bb-tabs { display: flex; gap: 4px; margin-top: 12px; }
/* The app's tab is a <button>: the browser's own line-height and padding, which the replica's span takes. */
.rep-core-bb-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 1px 6px; line-height: normal; font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); border: 1px solid var(--rep-bb-border); border-radius: 6px; }
.rep-core-bb-tab[data-selected="true"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--text-primary); }
.rep-core-bb-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; margin-top: 16px; }
.rep-core-bb-col { min-width: 0; }
/* Visually hidden on a phone, as the app's (the tab names the list); still a heading for screen readers. */
.rep-core-bb-col-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-family: var(--font-mono); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.rep-core-bb-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rep-core-bb-mark--lg { width: 48px; height: 48px; }
.rep-core-bb-mark--md { width: 36px; height: 36px; }
.rep-core-bb-logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.rep-core-bb-lead { display: block; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px 16px 14px; color: inherit; }
.rep-core-bb-lead::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--text-muted); }
.rep-core-bb-lead-top { display: flex; align-items: center; gap: 10px; }
.rep-core-bb-lead-top::before { content: '1'; flex: none; width: 16px; margin-right: -2px; text-align: center; font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); }
.rep-core-bb-lead-id { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rep-core-bb-lead-name { display: block; min-width: 0; font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--text-primary); }
.rep-core-bb-pick-team { display: inline; white-space: normal; overflow-wrap: break-word; }
.rep-core-bb-opponent { flex-basis: 100%; font-size: 16px; color: var(--text-dim); overflow-wrap: break-word; }
.rep-core-bb-lead-chance { margin-left: auto; text-align: right; flex: none; }
.rep-core-bb-lead-chance .rep-core-bb-chance { display: block; font-family: var(--font-mono); font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); }
.rep-core-bb-chance-label { display: block; max-width: 78px; font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); margin-top: 2px; }
.rep-core-bb-meter { position: relative; display: block; height: 10px; margin: 30px 0 14px; background: var(--rep-raised); border-radius: 999px; }
.rep-core-bb-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: linear-gradient(90deg, #52525b, #a1a1aa); }
.rep-core-bb-meter-tick { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; background: rgba(255,255,255,0.35); }
.rep-core-bb-meter-gap { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.rep-core-bb-meter-gap--edge { background: repeating-linear-gradient(135deg, rgba(212,212,216,0.85) 0 3px, transparent 3px 6px); }
.rep-core-bb-meter-mark { position: absolute; top: -6px; width: 3px; height: 22px; border-radius: 999px; background: var(--text-primary); transform: translateX(-50%); }
.rep-core-bb-meter-label { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); white-space: nowrap; }
.rep-core-bb-meter-mark--late .rep-core-bb-meter-label { left: auto; right: 0; transform: none; }
.rep-core-bb-lead-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rep-core-bb-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 16px; line-height: 1; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--rep-bb-border); color: var(--text-muted); white-space: nowrap; }
.rep-core-bb-pill-note { white-space: pre; }
.rep-core-bb-pill--best { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.32); color: var(--text-primary); }
.rep-core-bb-pill--mine { border-color: var(--border-strong); }
.rep-core-bb-evchip { margin-left: 0; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 16px; line-height: 1; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.rep-core-bb-evchip--ev { background: var(--bg-elevated); border: 1px solid var(--rep-bb-border); color: var(--text-muted); }
.rep-core-bb-rows { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--rep-bb-border); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.rep-core-bb-rows > div + div, .rep-core-bb-rows > li + li { border-top: 1px solid var(--rep-bb-border); }
.rep-core-bb-row { display: grid; grid-template-columns: 16px 36px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 12px 16px 10px; color: inherit; }
.rep-core-bb-rank { grid-column: 1; grid-row: 1 / span 2; align-self: start; line-height: 36px; font-family: var(--font-mono); font-size: 16px; color: var(--text-dim); text-align: center; }
.rep-core-bb-row .rep-core-bb-mark { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.rep-core-bb-pick { display: block; min-width: 0; font-size: 18px; font-weight: 500; color: var(--text-primary); }
.rep-core-bb-row .rep-core-bb-pick { grid-column: 3; grid-row: 1; }
.rep-core-bb-ev { grid-column: 4; grid-row: 2; justify-self: end; }
.rep-core-bb-ev .rep-core-bb-evchip { margin-left: 0; padding: 4px 8px; }
.rep-core-bb-prob { grid-column: 4; grid-row: 1; align-self: start; text-align: right; }
.rep-core-bb-prob .rep-core-bb-chance { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text-primary); }
.rep-core-bb-line2 { grid-column: 3; grid-row: 2; min-width: 0; }
.rep-core-bb-when { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; font-size: 16px; color: var(--text-dim); }
.rep-core-bb-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; flex: 0 1 auto; max-width: 100%; }
.rep-core-bb-row > .rep-core-bb-pills { grid-column: 3 / -1; grid-row: 3; margin-top: 4px; }
.rep-core-bb-pills .rep-core-bb-pill, .rep-core-bb-pills .rep-core-bb-evchip { padding: 4px 8px; }
/* The block's other parts (slate.css), which slide 3 draws whole: the subtitle and its "How this works" (the app's
   link green, drawn neutral), the collapsed summary (hidden, as the app hides it while the block is open), the
   no-edge panel's wrapper (out of the layout on a phone, where its two parts take their own places), the
   books'-number tag and the tab's dot (that day's moneyline list is the books' own number; the tag shows only beside
   a list heading, which a phone hides), a pick's line, both teams' marks on an over/under, the full and short
   matchup (the app measures which fits; the replica prints the full one), the amber gap of a price you pay. */
.rep-core-bb-sub { font-size: 17px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.rep-core-bb-how { color: var(--text-muted); white-space: nowrap; }
.rep-core-bb-summary { display: none; font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); margin-top: 10px; }
.rep-core-bb-summary-pick { display: block; }
.rep-core-bb-summary-sep { display: none; }
.rep-core-bb-nocall { display: contents; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--rep-bb-border); border-radius: 6px; }
.rep-core-bb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; flex: none; }
.rep-core-bb-src { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); border: 1px solid var(--rep-bb-border); border-radius: 6px; padding: 3px 8px; line-height: 1; white-space: nowrap; }
.rep-core-bb-col-h .rep-core-bb-src { display: none; }
.rep-core-bb-src-dot { display: inline; margin-left: 6px; color: #60a5fa; }
.rep-core-bb-pick-line { display: inline; white-space: nowrap; }
.rep-core-bb-pick-line::before { content: '\00a0'; }
.rep-core-bb-mark2 .rep-core-bb-logo { position: absolute; top: 50%; width: 64%; height: 64%; transform: translateY(-50%); }
.rep-core-bb-mark2 .rep-core-bb-logo:first-child { left: -4%; }
.rep-core-bb-mark2 .rep-core-bb-logo:last-child { right: -4%; filter: drop-shadow(-2px 0 1px rgba(0,0,0,0.75)); }
.rep-core-bb-opp-full { display: inline; }
.rep-core-bb-opp-abbr { display: none; }
.rep-core-bb-meter-gap--pay { background: repeating-linear-gradient(135deg, rgba(245,158,11,0.55) 0 3px, transparent 3px 6px); }
/* A graded call in the reader's favour: green, as the app draws it (slate.css .bb-evchip--edge,
   .slate-grade-chip.actionable). Slide 3's graded row only. */
.rep-core-bb-evchip--edge { background: var(--amber); border: 1px solid var(--amber); color: #0d1117; font-weight: 700; } /* key finding, as the app (2026-10-15) */
.rep-core-grade-chip { display: block; font-size: 16px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; white-space: nowrap; }
.rep-core-grade-chip.actionable { color: var(--call); }
.rep-core-bb-pick .rep-core-grade-chip { margin-left: 8px; vertical-align: middle; display: inline-flex; }

/* ─── Slide 2: reading the board ─── */
.c2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.c2-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ─── Slide 3: Best Bets ─── */
/* Wider than a phone the block is the app's three lists side by side (slate.css from 1280px, at its 1280-1439px
   lead-card sizes, which its phone layout shares): the tabs wait, each list shows its heading, the moneyline its
   books'-number tag. A phone draws the app's phone block: the tabs over one list. */
@media (min-width: 641px) {
  .rep-core-best-bets.c3-bb { padding: 18px 20px 16px; }
  .c3-bb .rep-core-bb-head { flex-wrap: nowrap; }
  .c3-bb .rep-core-bb-tabs { display: none; }
  .c3-bb .rep-core-bb-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c3-bb .rep-core-bb-col-h { position: static; width: auto; height: auto; margin: 0 0 10px; overflow: visible; clip: auto; white-space: normal; display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
  .c3-bb .rep-core-bb-col-h .rep-core-bb-src { display: inline-flex; }
  .c3-bb .rep-core-bb-lead-foot .rep-core-bb-evchip { margin-left: auto; }
  /* A lead card a third of the block wide wraps the full matchup, so the app prints its short form there
     (slate.js _bbFitOpponents measures it: "NYG @ LAR"). */
  .c3-bb .rep-core-bb-opp-full { display: none; }
  .c3-bb .rep-core-bb-opp-abbr { display: inline; }
}
/* The graded row under the block: one graded pick, the way a Best Bets row prints it, on one line. */
.c3-graded { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-card); }
.c3-graded-k { font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); white-space: nowrap; }
.c3-graded-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; flex: 1 1 auto; min-width: 0; }
.c3-graded-row .rep-core-bb-when { flex: none; }
.c3-graded-row .rep-core-bb-chance { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text-primary); margin-left: auto; }

/* ─── Slide 4: the bar each price sets, a hundred bets at -300, expected value ─── */
.c4-fig { gap: 14px; }
.c4-k { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.c4-bars { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; }
.c4-bar { display: grid; grid-template-columns: 76px 220px minmax(0, 1fr) 84px; align-items: center; gap: 0 16px; min-height: 64px; }
.c4-price { font: 700 26px/1 var(--font-mono); color: var(--text-primary); }
.c4-stake { font-size: 18px; color: var(--text-secondary); }
.c4-be { font: 700 26px/1 var(--font-mono); color: var(--amber); text-align: right; }
.c4-track { position: relative; height: 14px; margin: 24px 0 22px; border-radius: 7px; background: rgba(255,255,255,0.07); }
.c4-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 7px 0 0 7px; background: linear-gradient(90deg, #52525b, #a1a1aa); }
.c4-fill::after { content: ''; position: absolute; right: -1px; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--amber); }
.c4-cut { position: absolute; top: -3px; bottom: -3px; left: var(--l); width: var(--w); background: repeating-linear-gradient(135deg, rgba(245,158,11,0.75) 0 3px, rgba(245,158,11,0.2) 3px 6px); }
.c4-mark { position: absolute; left: var(--l); top: -8px; bottom: -8px; width: 0; border-left: 2px dashed var(--text-muted); }
.c4-mark-k { position: absolute; bottom: 100%; transform: translateX(-50%); font: 16px/1.3 var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.c4-mark-50 .c4-mark-k { transform: translateX(-100%); padding-right: 4px; }
.c4-mark-won { border-left: 3px solid #f87171; }
.c4-mark-won .c4-mark-k { color: #f87171; font-weight: 600; transform: translateX(-100%); padding-right: 6px; }
.c4-cut-k { position: absolute; top: calc(100% + 4px); left: var(--l); font: 16px/1.3 var(--font-sans); color: var(--amber); white-space: nowrap; }
/* The 70% tick waits for the ledger. */
.tour-fig[data-now]:not([data-now~="ledger"]):not([data-now~="ev"]) .c4-mark-won { visibility: hidden; }
.c4-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.c4-ledger, .c4-ev { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; min-width: 0; }
.c4-ledger-body { display: flex; align-items: center; gap: 20px; }
.c4-grid { display: grid; grid-template-columns: repeat(10, 14px); grid-auto-rows: 14px; gap: 4px; flex: none; }
.c4-sq { border-radius: 3px; }
.c4-w, .c4-key-w { background: #d4d4d8; opacity: 0.85; }
.c4-l, .c4-key-l { background: #f87171; }
.c4-lines { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.c4-lr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-default); font-size: 18px; color: var(--text-secondary); }
.c4-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.c4-amt { font: 600 20px/1.2 var(--font-mono); color: var(--text-primary); white-space: nowrap; }
.c4-neg { color: #f87171; }
.c4-net { border-bottom: 0; border-top: 2px solid var(--border-strong); margin-top: 2px; font-weight: 600; color: var(--text-primary); }
.c4-net .c4-amt { font-size: 28px; font-weight: 700; }
.c4-ev-row { display: flex; align-items: center; gap: 14px; }
.c4-ev-src { flex: 1 1 auto; min-width: 0; margin: 0; }
.c4-ev-src .rep-core-ob-verdict { border-top-width: 2px; }
.c4-ev-bb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; }
.c4-ev-bb .rep-core-bb-pill, .c4-ev-bb .rep-core-bb-evchip { padding: 4px 8px; }
.c4-ev-team { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.c4-ev-team b { font-family: var(--font-mono); margin-left: 4px; }
.c4-ev-amt { flex: none; min-width: 96px; text-align: right; font: 700 24px/1 var(--font-mono); color: var(--text-primary); }
.c4-ev-amt.c4-neg { color: #f87171; }

/* ─── Replica: the takeover's market cards (slate.css .slate-mkt-card*, markup slate.js marketCardsHtml), at the
   app's phone padding (<= 639px) at every width; side by side wider than a phone, as on the app's desktop. ─── */
.rep-core-mkt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 0; background: var(--bg-card); }
/* The app's card is a <button>: the browser's own button font (no slate.css size, so 13.33px and line-height
   normal), which no text shows: every part inside sets its own size, all 16px and up. */
.rep-core-mkt-card { background: #09090b; border: 1px solid var(--rep-bb-border); border-radius: 8px; padding: 12px; text-align: left; font: -webkit-small-control; font-family: var(--font-mono); line-height: normal; color: var(--text-primary); min-width: 0; }
/* The model's pick: green, a graded call (slate.css .slate-mkt-card.recommended); the card the takeover opens on. */
.rep-core-mkt-card.selected { background: rgba(255,255,255,0.05); }
.rep-core-mkt-card.recommended { border-color: var(--call); box-shadow: 0 0 0 1px var(--call); }
.rep-core-mkt-card.dim { opacity: 0.55; }
.rep-core-mkt-card-label { font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rep-core-mkt-card-badge { font-size: 16px; text-transform: none; letter-spacing: normal; font-weight: 700; color: var(--text-muted); }
.rep-core-mkt-card-verdict { font-size: 17px; margin-top: 6px; color: var(--text-primary); line-height: 1.3; }
.rep-core-mkt-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 17px; }
.rep-core-mkt-card-ev { color: var(--text-primary); font-weight: 700; }
.rep-core-mkt-card.recommended .rep-core-mkt-card-ev { color: var(--call); }
.rep-core-mkt-card.dim .rep-core-mkt-card-ev { color: var(--text-dim); font-weight: 400; }
.rep-core-mkt-card-stake { color: var(--text-muted); }
.rep-core-mkt-card-reason { margin-top: 6px; font-size: 16px; color: #b0b0ba; font-style: italic; }
.rep-core-mkt-card.selected .rep-core-mkt-card-label, .rep-core-mkt-card.selected .rep-core-mkt-card-badge,
.rep-core-mkt-card.selected .rep-core-mkt-card-verdict, .rep-core-mkt-card.selected .rep-core-mkt-card-stake { color: var(--text-primary); }

/* ─── Replica: the analysis grade line (slate.css .slate-ts-grade, .slate-grade-tag; slate.js _edgeGradeLine) ─── */
.rep-core-ts-grade { margin: 0; padding: 10px 12px; border-left: 3px solid var(--text-muted); border-radius: 6px; background: var(--bg-surface); color: var(--text-secondary); font-size: 17px; line-height: 1.5; }
.rep-core-ts-grade.is-refusal { border-left-color: var(--amber); }
.rep-core-ts-grade-k { font-size: 16px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.rep-core-grade-tag { display: inline-flex; align-items: center; vertical-align: 1px; font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; }
.rep-core-grade-tag--defer { background: rgba(245,158,11,0.12); color: var(--amber); border-color: rgba(245,158,11,0.35); }
/* The recommendation line's badge (slate.js _recommendationLine; main.css .game-strip-badge, amber for LEAN). */
.rep-core-game-strip-badge { display: inline-flex; padding: 1px 6px; border-radius: 999px; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.rep-core-game-strip-badge-lean { background: rgba(245,158,11,0.12); color: var(--amber); }

/* ─── Replica: the Signal stack's source table (main.css/slate.css .slate-ss-*, slate.js _renderSignalStack), at the
   app's phone layout (<= 639px) at every width: the slide gives it a third of the row. ─── */
.rep-core-ss-scroll { overflow-x: auto; max-width: 720px; margin: 0 -14px; }
.rep-core-ss-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16px; }
.rep-core-ss-table th { text-align: right; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); padding: 4px 2px; border-bottom: 1px solid var(--border-subtle); white-space: normal; overflow-wrap: anywhere; hyphens: auto; background: var(--bg-surface); vertical-align: top; }
.rep-core-ss-table th:first-child { text-align: left; width: 30.5%; padding-left: 6px; }
.rep-core-ss-table th:nth-child(2), .rep-core-ss-table th:nth-child(3) { width: 28.25%; font-weight: 500; letter-spacing: -0.01em; }
.rep-core-ss-table th:nth-child(4) { width: 13%; padding-right: 6px; }
.rep-core-ss-table td { padding: 4px 2px; text-align: right; color: var(--text-secondary); font-family: var(--font-mono); border-bottom: 1px solid var(--border-subtle); }
.rep-core-ss-table td:first-child { text-align: left; font-family: inherit; overflow-wrap: anywhere; padding-left: 6px; }
.rep-core-ss-table td:last-child { padding-right: 6px; }
.rep-core-ss-pick { font-weight: 700; color: var(--text-primary); }
.rep-core-ss-wt { color: #c6c6cd; }
.rep-core-ss-consensus td { font-weight: 700; color: var(--text-primary); border-top: 2px solid var(--border-default); }
.rep-core-ss-th-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rep-core-ss-th-short { display: inline; }

/* ─── Slide 5: the calls (the example game's market cards), the NO EDGE side in Best Bets, DEFER, the sources ─── */
.c5-fig { gap: 8px; }
.c5-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; align-items: start; }
.c5-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c5-calls .rep-body { padding: 0 0 12px; }
.c5-calls .rep-core-mkt-cards { background: none; }
/* Wider than a phone the cards share the row equally, so when the swap composition shows two of the three (the NO
   EDGE beat) they take the row between them and their reasons wrap less. Three cards: the app's equal thirds. */
@media (min-width: 641px) {
  .c5-calls .rep-core-mkt-cards { display: flex; }
  .c5-calls .rep-core-mkt-card { flex: 1 1 0; }
}
/* The three pictures side by side need a desktop's width; narrower (a phone on its side) they stack. */
@media (max-width: 900px) {
  .c5-row { grid-template-columns: minmax(0, 1fr); }
}
.c5-bb .rep-body, .c5-defer .rep-body { padding: 10px 12px; }
/* The analysis window holds two of the takeover's lines: LEAN's meaning (lit with BET) and the DEFER line. */
.c5-defer .rep-body { gap: 8px; }
.c5-stack .rep-body { padding: 8px 14px; }
.c5-bb .rep-core-bb-opponent { display: none; }
/* The lead card in a third of the row (the approved mockup's sizes, batch B): the name keeps its words whole. */
.c5-bb .rep-core-bb-lead { padding: 10px 12px; }
.c5-bb .rep-core-bb-lead-name { font-size: 18px; }
.c5-bb .rep-core-bb-lead-chance .rep-core-bb-chance { font-size: 30px; }
/* "Wherever you see Sharp, that is OUR model" (Bill, batch B: the Sharp ring): the Sharp row's name, ringed on that
   beat. The table's second row is Sharp (signal_sections.js components(), pinned by the truth test). */
.tour-fig[data-now~="s5-sources"] .c5-stack tbody tr:nth-child(2) td:first-child { box-shadow: inset 0 0 0 2px var(--text-primary); border-radius: 4px; background: rgba(255,255,255,0.10); }
.tour-fig[data-now~="s5-sources"] .c5-stack tbody tr:nth-child(2) td { background-color: rgba(255,255,255,0.05); }

/* ─── Slide 6: your book, your stake (batch C; the live pick through plugins.js) ─── */
.c6-fig { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.c6-main, .c6-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c6-side { gap: 10px; }
/* A part the plugin switches off (`hidden`) stays off whatever display its class sets. */
.c6-fig [hidden] { display: none; }
.c6-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.c6-game { font-size: 18px; font-weight: 600; color: var(--text-primary); min-width: 0; }
.c6-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.c6-outcome { margin: 0; font-size: 17px; color: var(--text-secondary); }
.c6-place { display: flex; flex-direction: column; }
/* The window's body is the takeover's here: the cells meet its edges as the app's mosaic does. */
.c6-win .rep-body { gap: 10px; }
/* The top bar's pill and My book (main.css .top-nav-pill / .bankroll-pill, slate.css .my-book-select), at the app's
   phone values (the 639px block: the pill's 44px floor). The unit label is the 1440px nav's. */
.rep-core-top-nav-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 8px 12px; background: none; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-secondary); font-family: 'IBM Plex Sans', sans-serif; font-size: 17px; font-weight: 500; white-space: nowrap; }
.rep-core-bankroll-pill { gap: 2px; }
.rep-core-bankroll-sep { color: var(--text-muted); font-family: var(--font-mono); font-weight: 600; }
/* The app's is an <input>: a form control's line-height is `normal`, and 18px on a phone (main.css 639px block). */
.rep-core-bankroll-input { color: var(--text-primary); font-family: var(--font-mono); font-size: 18px; font-weight: 600; line-height: normal; padding: 0; }
.rep-core-bankroll-units { color: var(--text-muted); font-family: var(--font-mono); font-size: 17px; font-weight: 600; border-left: 1px solid var(--rep-border); padding-left: 6px; margin-left: 4px; }
.rep-core-my-book-select { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: inherit; font-size: 16px; color: var(--text-dim); }
/* The app's is a <select>: its own line-height (normal), with the UA's arrow drawn as a glyph. */
.rep-core-my-book-pick { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; max-width: 11rem; padding: 4px 8px; font-family: inherit; font-size: 16px; line-height: normal; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--rep-bb-border); border-radius: 6px; }
.rep-core-my-book-pick::after { content: '\25BE'; color: var(--text-dim); }
/* The takeover's summary mosaic (slate.css .slate-takeover-summary / .slate-ts-*), its phone values (639px block). */
.rep-core-takeover-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0 14px; background: var(--rep-bb-border-soft); border-bottom: 1px solid var(--rep-bb-border); }
.rep-core-ts-cell { background: #09090b;   /* main.css --bg-base */ padding: 14px 8px; text-align: center; min-width: 0; }
.rep-core-ts-cell-l { font-size: 16px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.rep-core-ts-cell-v { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--text-primary); margin-top: 6px; line-height: 1; overflow-wrap: anywhere; }
/* The Edge cell of a graded call: the app's green (slate.css .slate-ts-cell-v.accent). */
.rep-core-ts-cell-v.accent { color: var(--call); }
.rep-core-ts-cell-v--book { font-family: 'IBM Plex Sans', sans-serif; font-size: 17px; }
.rep-core-ts-cell-sub { font-size: 16px; color: #b0b0ba; margin-top: 6px; font-family: var(--font-mono); overflow-wrap: anywhere; }
/* Place on <Book> and the Other books row (static/css/bet_slip.css), a picture: no hover, no focus, no link. */
.rep-core-bet-slip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.28); border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; }
.rep-core-bet-slip--place { display: flex; align-items: center; justify-content: flex-start; gap: 10px; box-sizing: border-box; min-height: 56px; padding: 8px 14px 8px 10px; border: 1px solid #f4f6f5; border-radius: 10px; background: #f4f6f5; color: #0b0f0d; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.2; text-align: left; white-space: normal; }
.rep-core-bet-slip-logo { display: block; flex: none; border-radius: 7px; }
.rep-core-bet-slip--place .rep-core-bet-slip-logo { width: 36px; height: 36px; }
.rep-core-bet-slip--place .rep-core-bet-slip-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rep-core-bet-slip-odds { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rep-core-bet-slip--place .rep-core-bet-slip-odds { flex-direction: column; align-items: flex-end; gap: 2px; }
.rep-core-bet-slip-price { font-family: var(--font-mono); font-size: 20px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.rep-core-bet-slip-arrow { flex: none; }
.rep-core-bet-slip-best { padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 16px; font-weight: 600; line-height: 1.2; }
.rep-core-bet-slip-others { box-sizing: border-box; max-width: 100%; margin-top: 8px; }
.rep-core-bet-slip-others-l { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.rep-core-bet-slip-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rep-core-bet-slip-tiles[data-n="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rep-core-bet-slip-tiles[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rep-core-bet-slip-tiles[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rep-core-bet-slip--tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; box-sizing: border-box; min-width: 0; min-height: 64px; padding: 6px 2px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; }
.rep-core-bet-slip--tile .rep-core-bet-slip-logo { width: 24px; height: 24px; }
.rep-core-bet-slip--tile .rep-core-bet-slip-name { max-width: 100%; overflow-wrap: anywhere; }
.rep-core-bet-slip--tile .rep-core-bet-slip-odds { flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.rep-core-bet-slip--tile .rep-core-bet-slip-price { font-size: 16px; }
/* A tile too narrow for its book's name shows the book's code (bet_slip.css: the tile is a size container, and four
   tiles on a phone always do): DK, FD, MGM, CZR, SCORE, as CEBetSlip prints them. Shorter text, never smaller type. */
.rep-core-bet-slip--tile { container-type: inline-size; }
.rep-core-bet-slip-name-code { display: none; }
@container (max-width: 84px) {
  .rep-core-bet-slip-name-full { display: none; }
  .rep-core-bet-slip-name-code { display: inline; }
}
@media (max-width: 639px) {
  .rep-core-bet-slip-tiles[data-n="4"] .rep-core-bet-slip-name-full { display: none; }
  .rep-core-bet-slip-tiles[data-n="4"] .rep-core-bet-slip-name-code { display: inline; }
}
/* The side cards: worked examples, the tour's own drawing. */
.c6-k { margin: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.c6-cmp, .c6-stake { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 12px; min-width: 0; }
.c6-cmp-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid var(--rep-border); border-radius: 8px; }
.c6-cmp-logo { display: block; width: 32px; height: 32px; border-radius: 7px; }
.c6-cmp-mine { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.04); }
.c6-cmp-who { display: flex; flex-direction: column; font-size: 18px; font-weight: 600; color: var(--text-primary); min-width: 0; line-height: 1.3; }
.c6-cmp-k { font-size: 16px; font-weight: 400; color: var(--text-dim); }
.c6-cmp-p { font: 700 22px/1 var(--font-mono); color: var(--text-primary); }
.c6-cmp-ev { font: 600 17px/1 var(--font-mono); color: var(--text-secondary); min-width: 92px; text-align: right; }
.c6-cmp-line { margin: 0; font-size: 16px; color: var(--text-dim); }
.c6-br { margin: 0; font-size: 18px; color: var(--text-secondary); }
.c6-br b { font-family: var(--font-mono); color: var(--text-primary); }
.c6-same { margin: 0; font-size: 16px; color: var(--text-dim); }
.c6-lad { display: grid; grid-template-columns: 88px minmax(0, 1fr) 96px; align-items: center; gap: 10px; }
.c6-lad-ev { font: 600 17px/1.2 var(--font-mono); color: var(--text-secondary); }
.c6-lad-bar { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #52525b, #a1a1aa) 0 0 / calc(var(--u) * 100%) 100% no-repeat, rgba(255,255,255,0.07); }
.c6-lad-st { font: 700 18px/1.2 var(--font-mono); color: var(--text-primary); text-align: right; white-space: nowrap; }
.c6-run { margin: 0; font-size: 17px; color: var(--text-secondary); }
.c6-run b { font-family: var(--font-mono); color: #f87171; }
/* Narrower than a laptop (a phone on its side) the two columns stack. */
@media (max-width: 900px) {
  .c6-fig { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Slide 7: track it (batch C). The /me windows are the account pages' own words, drawn here: those pages style
   themselves inside their Python files, outside tour.json app_css (sizes from routes/me_log_bet.py and
   routes/me_landing.py, at the slide's density). Their green (the logged flash, CLV, WIN, the stat tiles) is drawn
   white: green is a graded call and the logo (Bill, batch C). ─── */
.c7-fig { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.c7-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* A part the plugin switches off (`hidden`: the record's range or CLV line; the Free line) stays off whatever display
   its class sets. */
.c7-fig [hidden], .c8-fig [hidden] { display: none; }
.c7-fig .rep-body { padding: 8px 12px; }
.c7-flash { padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 5px; background: rgba(255,255,255,0.05); font-size: 17px; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.c7-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.c7-label { margin: 6px 0 2px; font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.c7-input { display: flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 6px 11px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-void); font-size: 17px; color: var(--text-primary); }
.c7-select::after { content: '\25BE'; margin-left: auto; color: var(--text-dim); }
.c7-recent-h { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.c7-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); }
.c7-recent-side { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.c7-recent-meta { font-size: 16px; color: var(--text-dim); }
.c7-recent-clv, .c7-recent-out { font-weight: 600; color: var(--text-primary); }
.c7-snap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; padding: 8px 14px; background: var(--bg-card); border-left: 3px solid var(--text-muted); border-radius: 0 5px 5px 0; }
.c7-stat-l { font-size: 16px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.c7-stat-v { font-size: 19px; font-weight: 700; color: var(--text-primary); }
.c7-k { margin: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.c7-clv, .c7-rec { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 12px; }
.c7-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; }
/* The line runs through the stops' centres: a 2px line at 5px centres on 6px, where each 12px stop centres (the render
   audit, 2026-10-13: at 6px it sat 1px under them, three device pixels on an iPhone). */
.c7-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 5px; height: 2px; background: rgba(255,255,255,0.18); }
.c7-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.c7-stop::before { content: ""; position: absolute; top: -18px; width: 12px; height: 12px; border-radius: 50%; background: #52525b; }
.c7-stop b { font: 700 20px/1.2 var(--font-mono); color: var(--text-secondary); }
.c7-stop span { font-size: 16px; color: var(--text-dim); white-space: nowrap; }
.c7-you::before { background: var(--bg-surface); box-shadow: 0 0 0 3px var(--text-primary); }
.c7-you b { color: var(--text-primary); }
.c7-close::before { background: var(--amber); }
.c7-close b { color: var(--amber); }
.c7-math { display: flex; flex-direction: column; }
.c7-mr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-default); font-size: 17px; color: var(--text-secondary); }
.c7-mr b { font: 600 19px/1.2 var(--font-mono); color: var(--text-primary); }
.c7-mr-net { border-bottom: 0; border-top: 2px solid var(--border-strong); margin-top: 2px; font-weight: 600; color: var(--text-primary); }
.c7-mr-net b { font-size: 26px; font-weight: 700; }
.c7-recbox { display: flex; flex-direction: column; gap: 8px; }
.c7-rec-big { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.c7-rec-fig { margin: 0; font-size: 18px; color: var(--text-secondary); }
.c7-rec-fig b { font: 700 30px/1.15 var(--font-mono); color: var(--text-primary); margin-right: 6px; }
.c7-rec-sub { display: block; font-size: 17px; color: var(--text-secondary); }
.c7-rec-sub[hidden] { display: none; }
.c7-rec-line { margin: 0; font-size: 17px; color: var(--text-secondary); }
.c7-rec-line b { font-family: var(--font-mono); color: var(--text-primary); }
/* What the record's CLV is measured against, in its own disclosure's words (Bill, 2026-10-11): under the label. */
.c7-rec-q { display: block; font-size: 16px; color: var(--text-muted); }
/* Narrower than a laptop (a phone on its side) the two columns stack. */
@media (max-width: 900px) {
  .c7-fig { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Slide 8: keep learning (batch C). Learn, Tours and Ask leave the deck for the real pages; the /learn and /chat
   windows are those pages' own words, drawn here (routes/learn.py and templates/chat.html style their own pages). ─── */
.c8-fig { gap: 10px; }
.c8-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.c8-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Learn and Ask (links: the slide's closing actions) and the Tours heading over its menu share one face. */
.c8-col > .tour-action, .c8-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l go" "s go"; align-items: center; column-gap: 10px; min-height: 64px; box-sizing: border-box; margin: 0; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.28); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); text-decoration: none; }
.c8-act { border-color: var(--border-strong); }
.c8-act-l { grid-area: l; font-size: 22px; font-weight: 700; line-height: 1.2; }
.c8-act-s { grid-area: s; font-size: 16px; color: var(--text-muted); }
.c8-act-go { grid-area: go; font-size: 22px; color: var(--text-secondary); }
.c8-col > .tour-action:hover { border-color: rgba(255,255,255,0.5); }
.c8-fig a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.c8-fig .rep-body { padding: 10px 14px; }
.c8-tag { margin: 0; font: 700 16px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.c8-h { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.c8-level { padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-card); }
.c8-ol { margin: 4px 0 0; padding-left: 1.3rem; font-size: 16px; line-height: 1.45; color: var(--text-primary); }
.c8-ol span { color: var(--text-dim); }
.c8-sub { margin: 8px 0 4px; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.c8-pbs { display: flex; flex-wrap: wrap; gap: 6px; }
.c8-pbs span { font-size: 16px; line-height: 1.3; padding: 2px 10px; border: 1px solid var(--border-default); border-radius: 999px; color: var(--text-secondary); }
.c8-gl { margin-top: 8px; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); font-size: 16px; color: var(--text-secondary); }
.c8-gl-n { font-weight: 700; color: var(--text-primary); }
.c8-gl-a { color: var(--text-dim); }
.c8-gl p { margin: 2px 0 0; }
/* The tours menu's box; its rows are the chassis's (deck.css .tour-menu, Bill 2026-10-20 tight rows). */
.c8-menu { padding: 2px 14px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; }
.c8-chat-h { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.c8-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.c8-ex li { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-elevated); font-size: 16px; color: var(--text-primary); }
.c8-composer { display: flex; gap: 8px; margin-top: 8px; }
.c8-input { flex: 1 1 auto; min-height: 44px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; font-size: 16px; line-height: 1.35; color: var(--text-dim); }
.c8-send { flex: none; align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--text-primary); color: #0d1117; font-size: 16px; font-weight: 700; }
.c8-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; }
.c8-foot .tour-asof { flex-basis: 100%; margin-top: 0; }
.c8-pro, .tour-rg { margin: 0; font-size: 17px; color: var(--text-secondary); }
/* The two links inside a line of text: a 44px target (11px above and below the line's own box, given back by the
   margin, so the line keeps its height) in the line's own type. */
.c8-pro .tour-action, .tour-help { display: inline-block; padding: 11px 0; margin: -11px 0; min-width: 44px; color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Lit parts only (a window too short for the whole figure): the columns that show share the row, so the Learn beat's
   window takes the width and keeps its height down. */
.tour-swap .c8-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Narrower than a laptop the three columns stack. */
@media (max-width: 900px) {
  .c8-grid, .tour-swap .c8-grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
}

/* ─── The swap composition (.tour-swap, chassis: phones always, and any slide too tall for its window) ─── */
/* A box with nothing lit inside goes with its parts. */
.tour-swap .tour-fig[data-now] :is(.rep-core-ob-card, .c2-col, .s1-prob, .s1-marks, .c1-answers, .c1-left, .rep-core-bb-head, .rep-core-bb-body, .c4-bars, .c4-row, .c5-row, .c5-col, .c6-main, .c6-side, .c6-bar, .c6-top, .rep-core-takeover-summary, .c7-col, .c7-recbox, .c8-col):not(.is-now):not(:has(.is-now)) { display: none; }
/* Slide 2's last beat: the headline and the list's face (the lead card); the rows wait, and the lead-in shows its
   bold line only (the app's phone copy), so the beat stays one screen at 1536x730. */
.tour-swap .c2-bb .rep-core-bb-rows { display: none; }
.tour-swap .c2-bb .rep-core-bb-copy-long { display: none; }
/* The list's heading with the app's books'-number tag (the sharp pass, Task 14 fix wave): the lead's 74% is the books'
   vig-free number, not ours, so it says so as the app's wide block does (slide 3); and slide 5's lead (65%, the books'
   number) beside the moneyline card (66%, ours) on a laptop (a phone's slide 5 has no moneyline card: below). */
.c2-bb .rep-core-bb-col-h, .c5-bb .rep-core-bb-col-h { position: static; width: auto; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; white-space: normal; display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
.c2-bb .rep-core-bb-col-h .rep-core-bb-src, .c5-bb .rep-core-bb-col-h .rep-core-bb-src { display: inline-flex; }
/* Lit parts only, the heading takes the room above the list (spacing only, no type changes size). */
.tour-swap .c2-bb .rep-core-bb-cols { margin-top: 4px; }
.tour-swap .c2-bb .rep-core-bb-col-h { margin-bottom: 2px; }
/* Slide 5, lit parts only on a laptop (the UX pass, Task 14 fix wave): each beat's columns stack, left-aligned, so the
   LEAN window sits under the BET card's source line, the NO EDGE beat's Best Bets lead takes one line for its name and
   one for its prices, and the Signal stack is never squeezed to a third of the row (~290px, where "Polymarket" and
   "Consensus" broke mid-word under the app's phone safety net, overflow-wrap: anywhere, kept). From 460px every label
   wraps at a space; "sports-books" keeps the app's soft hyphen. */
@media (min-width: 641px) {
  .tour-swap .c5-row { grid-template-columns: minmax(0, 1fr); }
  .tour-swap .c5-col { max-width: 560px; }
  .tour-swap .c5-col-stack { min-width: 460px; }
}
.tour-swap .tour-fig[data-now].c2-grid:has(> .c2-col:not(:has(.is-now))) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

/* Slide 6: a beat that lights one of the takeover's cells (Best price, Sizing) shows it across the row. */
.tour-swap .tour-fig:is([data-now~="s6-book"], [data-now~="s6-stake"]) .rep-core-takeover-summary { grid-template-columns: minmax(0, 1fr); }

/* ─── Phones (<= 640px) ─── */
@media (max-width: 640px) {
  .c1-grid, .c2-grid { grid-template-columns: minmax(0, 1fr); }
  .tour-swap .rep-chrome { display: none; }                                /* the window's title bar */
  .hero-logo { font-size: 30px; }
  .rep-core-bb-copy-long { display: none; }
  .rep-core-bb-copy-short { display: inline; }
  .s1-game { font-size: 16px; }
  .s1-ans { padding: 10px 12px; gap: 6px; }
  .s1-team-p { font-size: 30px; }
  .s1-edge-v { font-size: 17px; }
  /* Slide 1's last beat: the break-even pills carry the prices, and the chart's own break-even label repeats them
     (the approved mockup's phone composition, batch A). */
  .tour-swap .tour-fig[data-now~="needs"] :is([data-beat="line"], [data-beat="be"]) { display: none; }
  /* ...and the consensus label steps aside with its probability block: the chart is not lit there on a phone, so the
     label stood alone in an empty row, and the edge line gives the figure (Bill, 2026-10-13). Laptops keep it. */
  .tour-swap .tour-fig[data-now~="needs"] .s1-prob { display: none; }
  /* Slide 1's chart beat: the game's team row is not a lit part there (Bill, 2026-10-10, "Trim, like What's New"). */
  .tour-swap .tour-fig[data-now~="srcs"] .s1-head { display: none; }
  /* Slide 2's board source line (data-phone="hide") steps aside on a phone, as the approved mockup drew it (Bill,
     2026-10-10, "Trim, like What's New"); the example card's line stays. Its words leave the screen; its description
     stays for screen readers, out of the layout. scripts/browser_checks/tour_check.py lets that beat show no line. */
  .tour-asof[data-phone="hide"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tour-asof[data-phone="hide"] .tour-asof-line { display: none; }
  /* Slide 2: the lead card is the list's face on a phone. */
  .tour-swap .c2-bb .rep-core-bb-opponent { display: none; }
  .tour-swap .c2-bb .rep-core-bb-head-r { display: none; }   /* the risk pill: slide 3 is where the narration names it */
  /* Slide 2's list beat: the sport tabs row steps aside (Bill, 2026-10-11, "Hide tabs"; the narration never names
     it); the list's lead card stays. */
  .tour-swap .tour-fig[data-now~="lists"] .c2-bb .rep-core-bb-tabs { display: none; }
  .tour-swap .rep-core-bb-nocall-top { margin: 4px 0 2px; }
  .tour-swap .rep-core-best-bets.c2-bb { padding-top: 6px; padding-bottom: 8px; }
  /* The frame's own spacing (the tour's, not the app's) and the gaps between the block's parts close up so each
     beat's lit parts and its picture's source line share one screen; no type changes size. */
  .tour-swap .rep-body { gap: 6px; padding: 8px 10px; }
  .tour-swap .c2-bb .rep-core-bb-nocall-p { margin-top: 2px; }
  .tour-swap .c2-bb .rep-core-bb-tabs { margin-top: 8px; }
  /* Slide 3: the app's phone block shows one list, the tab's; the beat that lights the spread list shows it instead
     (the approved mockup's phone composition, batch A). */
  .c3-bb[data-tab="moneyline"] .rep-core-bb-col:not([data-market="moneyline"]) { display: none; }
  .tour-swap .tour-fig[data-now~="ranked"] .c3-bb .rep-core-bb-col[data-market="spread"] { display: block; }
  .tour-swap .c3-bb .rep-core-bb-opponent { display: none; }
  .tour-swap .c3-graded { padding: 4px 12px; gap: 2px 12px; }
  /* With the head and the tabs stepped aside, the block's own top spacing closes up, as on slide 2. */
  .tour-swap .rep-core-best-bets.c3-bb { padding-top: 6px; padding-bottom: 8px; }
  .tour-swap .c3-bb .rep-core-bb-cols { margin-top: 8px; }
  /* Slide 4 on a phone: each bar on two rows (price, stake and break-even over the track), the ledger's grid over
     its lines, each readout over its amount (the approved mockup's phone composition, batch B). */
  .c4-bars { padding: 10px 12px; }
  .c4-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 10px; min-height: 0; }
  .c4-price { font-size: 22px; }
  .c4-be { font-size: 22px; grid-column: 3; grid-row: 1; }
  .c4-stake { font-size: 17px; grid-column: 2; grid-row: 1; }
  .c4-track { grid-column: 1 / -1; grid-row: 2; margin: 30px 0 28px; }
  .c4-bar-300 .c4-track { margin-bottom: 10px; }   /* no label hangs under the -300 bar */
  .c4-row { grid-template-columns: minmax(0, 1fr); }
  .c4-ledger-body { flex-direction: column; align-items: stretch; gap: 10px; }
  /* The hundred bets stay a ten-by-ten grid of squares, 12px on a phone, so the ledger beat keeps the -300 bar it
     lights beside the ledger on one screen. */
  .c4-grid { grid-template-columns: repeat(10, 12px); grid-auto-rows: 12px; gap: 4px; }
  .c4-lr { font-size: 17px; }
  .c4-ev-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .c4-ev-amt { text-align: left; font-size: 22px; }
  /* The figure's own spacing (the tour's drawing, not the app's) closes up so the ledger beat keeps the -300 bar
     it lights beside the ledger on one screen; no type changes size. */
  .tour-swap .c4-fig { gap: 8px; }
  .tour-swap .c4-ledger { gap: 6px; }
  .tour-swap .c4-ledger-body { gap: 6px; }
  .tour-swap .c4-lr { padding: 4px 0; }
  /* Slide 5 on a phone: one column, the app's phone market cards (one a row), the window titles stepped aside
     except the Best Bets one (it names the list; the approved mockup's phone composition, batch B). */
  .c5-row { grid-template-columns: minmax(0, 1fr); }
  .rep-core-mkt-cards, .c5-calls .rep-core-mkt-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tour-swap .c5-fig .c5-bb .rep-chrome { display: flex; }
  /* The Best Bets lead's price row waits on a phone: its meter carries the chance against the break-even (the
     approved mockup's phone composition, batch B). */
  .tour-swap .c5-bb .rep-core-bb-lead-foot { display: none; }
  /* Bill, 2026-10-11: the NO EDGE beat on a phone is the spread's thin-edge card and the Best Bets lead; the
     switched-off moneyline card (the cards' first, the app's market order) shows on laptops only. */
  .c5-calls .rep-core-mkt-card:first-child { display: none; }
  /* ...so the Best Bets lead's list heading (shown on a laptop beside that card) waits, as the app's phone block keeps
     it for screen readers only (Task 14 fix wave). */
  .c5-bb .rep-core-bb-col-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Slide 6 on a phone: the app's phone takeover (the summary mosaic two by two, the bankroll pill without its unit
     label, which the app shows from 1440px). */
  .rep-core-takeover-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-core-bankroll-units { display: none; }
  .c6-game { font-size: 16px; }
  .c6-cmp-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "logo who p" "logo who ev"; row-gap: 2px; }
  .c6-cmp-logo { grid-area: logo; }
  .c6-cmp-who { grid-area: who; }
  .c6-cmp-p { grid-area: p; text-align: right; }
  .c6-cmp-ev { grid-area: ev; min-width: 0; text-align: right; }
  .c6-lad { grid-template-columns: 84px minmax(0, 1fr) 92px; }
  /* Slide 7's CLV beat on a phone: the /me tiles keep their window's title bar, so they never float without the page
     they are on (the UX pass, Task 14 fix wave; "Recent bets" above them is the log beat's). */
  .tour-swap .tour-fig[data-now~="s7-clv"] .c7-me .rep-chrome { display: flex; }
  /* Slide 8 on a phone (the approved mockup's phone composition, batch C): the Learn and Ask buttons name their
     pages, so each window's own page heading waits. */
  .tour-swap .c8-learn .rep-body > .c8-tag:first-child, .tour-swap .c8-learn .c8-h, .tour-swap .c8-chat-h { display: none; }
  /* The figure's own spacing closes up so the Learn beat keeps the window whole on one screen; no type changes size. */
  .c8-col > .tour-action, .c8-act { min-height: 56px; padding: 6px 14px; }
  .tour-swap .c8-fig { gap: 8px; }
  .tour-swap .c8-level { padding: 6px 12px; }
  .tour-swap .c8-sub { margin: 6px 0 4px; }
  .tour-swap .c8-pbs { gap: 4px; }
  .tour-swap .c8-pbs span { padding: 1px 8px; }
  .tour-swap .c8-gl { margin-top: 6px; padding: 4px 12px; }
}