/* Sharp Nine — shared section CSS (GENERATED by tools/export_design_css.py — do not edit).
   Source of truth: data/render.py SHARED_CSS + data/simulator.py SIM_CARD_CSS.
   Link order on any page:  /assets/tokens.css  →  this file  →  page-specific CSS.
   Markup contract: docs/NFL_DESIGN_HANDOFF.md */

/* ── SHARED_CSS (data/render.py) ── */
/* Legacy names now resolve to assets/tokens.css (Stage 0, 2026-09-10).
     TOKENS_CSS is inlined above this block by the two <head> builders. */
  :root { --sn-bg:var(--sn-canvas); --sn-card:var(--sn-surface); --sn-card-dim:var(--sn-surface);
          --sn-border:var(--sn-line); --sn-border-dim:var(--sn-line);
          --sn-accent:var(--sn-sky);
          --sn-text:var(--sn-fg); --sn-text-dim:var(--sn-fg); --sn-muted:var(--sn-fg-2);
          --sn-muted-dim:var(--sn-fg-3); --sn-muted-dimmer:var(--sn-fg-4);
          --sn-chip-bg:var(--sn-surface-2); }
  body { font-family: var(--sn-font-ui); font-variant-numeric: tabular-nums;
         background:var(--sn-bg); color:var(--sn-text-dim); margin:0; padding:24px 16px; }
  .sn-wrap { max-width:980px; margin:0 auto; }
  /* Playoff banner (2026-09-02). Lives in SHARED_CSS so it travels with the
     cheat sheet into app.html, which hoists these <style> tags wholesale. */
  .sn-playoff-banner { margin:0 0 18px; padding:14px 16px; border-radius:10px;
    background:linear-gradient(180deg, rgba(255,213,79,0.10), rgba(255,213,79,0.04));
    border:1px solid rgba(255,213,79,0.38); border-left:4px solid #ffd54f; }
  .sn-pb-title { font-size:15px; font-weight:700; color:#ffd54f; letter-spacing:0.2px; }
  .sn-pb-body { margin-top:7px; font-size:13px; line-height:1.6; color:var(--sn-text-dim,#a8b3c7); }
  .sn-pb-body b { color:var(--sn-text,#e6edf3); }
  .sn-pb-links { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:13px; }
  .sn-pb-links a { color:var(--sn-gold,#d4a541); font-weight:600; text-decoration:none; min-height:24px; }
  .sn-pb-more { margin-top:8px; }
  .sn-pb-more summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:28px;
                        font-size:12.5px; font-weight:600; color:var(--sn-text-dim,#a8b3c7); user-select:none; }
  .sn-pb-more summary::-webkit-details-marker { display:none; }
  .sn-pb-more summary::before { content:"▸"; font-size:11px; color:var(--sn-gold,#d4a541); }
  .sn-pb-more[open] summary::before { content:"▾"; }
  .sn-pb-more summary:hover { color:var(--sn-text,#e6edf3); }
  @media (max-width:560px) {
    .sn-playoff-banner { padding:12px 13px; }
    .sn-pb-title { font-size:14px; }
    .sn-pb-body { font-size:12.5px; }
  }
  .sn-page-h { font-size:24px; font-weight:600; color:var(--sn-text); margin:0 0 4px; }
  .sn-page-sub { font-size:13px; color:var(--sn-muted); margin:0 0 24px; }
  .sn-section { background:var(--sn-bg); border-radius:12px; padding:18px 20px;
                margin:0 0 24px; border:1px solid var(--sn-border); }
  .sn-section-head { display:flex; justify-content:space-between; align-items:baseline;
                     padding-bottom:14px; border-bottom:1px solid var(--sn-border);
                     margin-bottom:14px; }
  .sn-section-h { font-family:var(--sn-font-display); font-size:17px; font-weight:700; color:var(--sn-text); margin:0; }
  .sn-section-sub { font-size:12px; color:var(--sn-muted); margin:2px 0 0; }
  .sn-section-meta { font-size:12px; color:var(--sn-muted); }

  .sn-rows { display:flex; flex-direction:column; gap:8px; }

  /* ── Pick row (Stage 3, 2026-09-10) — one shape for every section:
     rank · body (title + meta) · model number · odds chip. Quiet surface,
     hairline border, gold rank, Archivo numbers, mono odds. ── */
  .sn-row { background:var(--sn-surface); border:1px solid var(--sn-line); border-left:1px solid var(--sn-line);
            border-radius:8px; padding:10px 12px; min-height:56px;
            display:flex; align-items:center; gap:12px; font-variant-numeric:tabular-nums; }
  .sn-row.sn-row-dim { background:var(--sn-canvas); }
  .sn-rank { font-family:var(--sn-font-display); font-size:15px; font-weight:700; color:var(--sn-gold);
             min-width:24px; text-align:center; }
  .sn-row.sn-row-dim .sn-rank { color:var(--sn-fg-3); }
  .sn-body { flex:1; min-width:0; }
  .sn-title { font-size:15px; font-weight:600; color:var(--sn-fg); line-height:1.25; }
  .sn-title .muted { color:var(--sn-fg-2); font-weight:400; }
  .sn-meta { font-size:12.5px; color:var(--sn-fg-2); margin-top:2px; line-height:1.35; }

  .sn-right { text-align:right; min-width:60px; }
  .sn-right .v { font-family:var(--sn-font-display); font-size:17px; font-weight:700; color:var(--sn-fg); line-height:1.1; }
  .sn-right .lbl { font-family:var(--sn-font-display); font-size:9.5px; font-weight:700; color:var(--sn-fg-3);
                   letter-spacing:0.08em; text-transform:uppercase; margin-top:3px; }

  .sn-chip { background:var(--sn-surface-2); border:1px solid var(--sn-line-2); padding:6px 10px; border-radius:6px;
             min-width:88px; text-align:center; color:var(--sn-fg); font-family:inherit; }
  .sn-chip .cat { font-size:9px; font-weight:700; color:var(--sn-fg-2);
                  letter-spacing:0.08em; margin-bottom:2px; text-transform:uppercase; }
  .sn-chip .v { font-family:var(--sn-font-mono); font-size:13.5px; font-weight:500; color:var(--sn-fg); line-height:1.2; }
  .sn-chip .v .muted, .sn-chip .v.muted { color:var(--sn-fg-3); }
  .sn-chip .lbl { font-size:10px; color:var(--sn-fg-3); margin-top:2px; line-height:1.2; }
  .sn-chip.good .v { color:var(--sn-good); }
  .sn-chip.good { background:var(--sn-good-bg); border-color:transparent; }
  .sn-chip.bad .v { color:var(--sn-bad); }
  .sn-chip.bad { background:var(--sn-bad-bg); border-color:transparent; }
  /* Shoppable chip: a real button; gold hairline says "there is more here". */
  button.sn-chip.sn-odds { cursor:pointer; border-color:var(--sn-gold); transition:background 0.15s; }
  button.sn-chip.sn-odds:hover { background:var(--sn-surface-3); }
  button.sn-chip.sn-odds .lbl { color:var(--sn-fg-2); }

  .sn-badge { font-family:var(--sn-font-display); font-size:10px; padding:2px 7px; border-radius:999px; font-weight:700;
              letter-spacing:0.06em; display:inline-block; vertical-align:middle; }
  .sn-badge.good { background:var(--sn-good-bg); color:var(--sn-good); }
  .sn-badge.bad { background:var(--sn-bad-bg); color:var(--sn-bad); }
  .sn-badge.muted { background:var(--sn-surface-3); color:var(--sn-fg-2); }
  .sn-badge.ml { background:var(--sn-sky-dim); color:var(--sn-sky); }
  .sn-badge.f5 { background:#2a1f45; color:var(--sn-finale); }

  /* Line-shopping sheet (assets/pick-sheet.js) */
  body.sn-sheet-open { overflow:hidden; }
  .sn-sheet-backdrop { position:fixed; inset:0; z-index:500; background:rgba(11,14,20,0.6);
                       display:flex; align-items:flex-end; justify-content:center; }
  .sn-sheet { width:100%; max-width:480px; background:var(--sn-surface); border:1px solid var(--sn-line-2);
              border-radius:16px 16px 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
              box-shadow:0 -12px 40px rgba(0,0,0,0.5); font-variant-numeric:tabular-nums; }
  .sn-sheet-grab { width:36px; height:4px; border-radius:2px; background:var(--sn-line-2); margin:0 auto 10px; }
  .sn-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
  .sn-sheet-title { font-family:var(--sn-font-display); font-size:15px; font-weight:700; color:var(--sn-fg); }
  .sn-sheet-sub { font-size:12px; color:var(--sn-fg-3); margin-top:2px; }
  .sn-sheet-x { width:44px; height:44px; border:0; background:transparent; color:var(--sn-fg-2); cursor:pointer;
                display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin:-6px -10px 0 0; }
  .sn-sheet-row { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:0 4px;
                  border-bottom:1px solid var(--sn-line); font-size:14px; color:var(--sn-fg-2); }
  .sn-sheet-row .od { font-family:var(--sn-font-mono); font-size:14px; color:var(--sn-fg); }
  .sn-sheet-row.best { color:var(--sn-fg); }
  .sn-sheet-row.best .od { color:var(--sn-gold); }
  .sn-sheet-row .bk em { font-style:normal; font-family:var(--sn-font-display); font-size:9px; font-weight:700;
                          letter-spacing:0.08em; color:var(--sn-gold); margin-left:6px; text-transform:uppercase; }
  .sn-sheet-actions { display:flex; gap:8px; margin-top:12px; }
  .sn-sheet-btn { flex:1; min-height:44px; border-radius:8px; border:1px solid var(--sn-line-2); background:transparent;
                  color:var(--sn-fg); font-family:var(--sn-font-display); font-size:13px; font-weight:700; cursor:pointer; }
  .sn-sheet-btn.primary { background:var(--sn-gold); color:var(--sn-gold-ink); border-color:var(--sn-gold); }
  @media (min-width: 561px) {
    .sn-sheet-backdrop { align-items:center; }
    .sn-sheet { border-radius:14px; padding-bottom:16px; }
    .sn-sheet-grab { display:none; }
  }

  /* Sim card grading row — game info as full-width header, chip grid below.
     Overrides the horizontal flex layout because 8 chips × min-width 74px
     leaves no room for game text. Use for sim results rows only. */
  .sn-row.sn-sim-row { display:block; padding:14px 16px; }
  .sn-row.sn-sim-row .sn-body { margin-bottom:12px; }
  .sn-row.sn-sim-row .sn-title { font-size:16px; }
  .sn-row.sn-sim-row .sn-meta { font-size:12.5px; margin-top:4px; }
  .sn-row.sn-sim-row .sn-sim-chips {
      display:grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap:6px;
  }
  .sn-row.sn-sim-row .sn-chip { min-width:0; }

  /* K rows wrap rank/body/number/chip in .sn-row-main so the alt-K ladder can
     sit underneath; it reflows exactly like .sn-row on phones (Stage 3). */
  .sn-row-inner { width:100%; min-width:0; }
  .sn-row-main { display:flex; align-items:center; gap:12px; }
  .sn-rung-none { flex:1 1 100%; text-align:center; color:var(--sn-fg-3); font-size:11px; }
  /* Alt-K ladder strip below the row body */
  .sn-row-extra { margin-top:8px; padding-top:8px; border-top:1px solid var(--sn-border);
                  display:flex; gap:4px; }
  .sn-rung { flex:1; background:var(--sn-canvas); border:1px solid var(--sn-line); border-radius:6px;
             padding:5px 6px; text-align:center; }
  .sn-rung .pt { font-size:10px; color:var(--sn-fg-3); }
  .sn-rung .od { font-size:12px; color:var(--sn-fg); font-family:var(--sn-font-mono); }

  /* Game group caption (Hit Picks by Game) */
  .sn-group-h { font-family:var(--sn-font-display); font-size:11px; font-weight:700; letter-spacing:0.08em;
                text-transform:uppercase; color:var(--sn-fg-3); padding:0 4px 6px; }
  .sn-group { margin-bottom:14px; }
  .sn-group .sn-row + .sn-row { margin-top:4px; }

  /* Streak icons */
  .sn-hot { color:var(--sn-hot); }
  .sn-cold { color:var(--sn-cold); }
  .sn-warn { color:var(--sn-warn); }

  /* Sim grid — 2 columns on desktop */
  .sn-sim-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
                 gap:16px; }

  /* Footer-ish "more rows follow" note */
  .sn-more { text-align:center; padding:8px; font-size:11px;
             color:var(--sn-muted-dim); letter-spacing:0.5px; }

  /* For sections without explicit rows (parlays, value bets) */
  .sn-subcard { background:var(--sn-card); border-radius:8px; padding:14px 16px;
                margin-bottom:12px; }
  .sn-subcard:last-child { margin-bottom:0; }
  .sn-subcard-h { display:flex; justify-content:space-between; align-items:center;
                  margin-bottom:12px; }
  .sn-leg { display:flex; justify-content:space-between; align-items:center;
            padding:8px 10px; background:var(--sn-card-dim); border-radius:6px;
            margin-bottom:6px; }
  .sn-leg:last-child { margin-bottom:0; }
  .sn-leg .desc { font-size:13px; color:var(--sn-text-dim); }
  .sn-leg .desc .muted { color:var(--sn-muted); }
  .sn-leg .odds { font-size:12px; color:var(--sn-gold); font-family:var(--sn-font-mono); }

  /* Color helpers */
  .sn-muted { color:var(--sn-muted); }
  .sn-text { color:var(--sn-text); }
  .sn-gold { color:var(--sn-gold); }

  /* Per-section download button (image capture) */
  .sn-dl-btn { background:transparent; border:1px solid var(--sn-border);
               color:var(--sn-muted); padding:5px 10px; border-radius:6px;
               font-size:11px; cursor:pointer; display:inline-flex; align-items:center;
               gap:5px; font-family: inherit; transition: background 0.15s, color 0.15s;
               margin-left:10px; vertical-align:middle; }
  .sn-dl-btn:hover { background:var(--sn-card); color:var(--sn-text); }
  .sn-dl-btn:active { transform: scale(0.97); }
  .sn-dl-btn.busy { opacity:0.5; cursor:wait; }
  .sn-section.sn-capturing .sn-dl-btn { display:none; }
  .sn-dl-btn.sn-dl-discord { border-color:#5865F2; color:#8b95ff; }
  .sn-dl-btn.sn-dl-discord:hover { background:#5865F2; color:#fff; }

  /* ── Safe-area insets (iPhone notch / home indicator) ── */
  body { padding-left: max(16px, env(safe-area-inset-left));
         padding-right: max(16px, env(safe-area-inset-right));
         padding-bottom: max(24px, env(safe-area-inset-bottom)); }

  /* ─────────────────────────── 768px — tablet shrink ─────────────────────────── */
  @media (max-width: 768px) {
    body { padding-top: 16px; }
    .sn-wrap { max-width: 100%; }
    .sn-section { padding: 14px 14px; margin-bottom: 18px; }
    .sn-section-head { padding-bottom: 12px; margin-bottom: 12px;
                       flex-wrap: wrap; gap: 4px 12px; }
    .sn-section-h { font-size: 16px; }
    .sn-section-sub { font-size: 11px; }
    .sn-page-h { font-size: 20px; }
    .sn-sim-grid { grid-template-columns: 1fr; gap: 14px; }
    /* Touch target: bump download buttons to ≥44px tap area (Apple HIG) */
    .sn-dl-btn { min-height: 44px; min-width: 44px; padding: 10px 14px;
                 font-size: 12px; }
    /* Alt-K ladder: horizontal scroll instead of crushing chips */
    .sn-row-extra { overflow-x: auto; -webkit-overflow-scrolling: touch;
                    flex-wrap: nowrap; }
    .sn-row-extra::-webkit-scrollbar { display: none; }
    .sn-rung { flex: 0 0 60px; min-width: 60px; }
  }

  /* ─────────────────────────── 560px — phone reorg ─────────────────────────── */
  @media (max-width: 560px) {
    body { padding: 12px 12px;
           padding-left: max(12px, env(safe-area-inset-left));
           padding-right: max(12px, env(safe-area-inset-right));
           padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .sn-section { padding: 12px 12px; border-radius: 10px; }
    .sn-page-h { font-size: 19px; }

    /* sn-row: flex-wrap so chip cluster reflows to row 2. Body takes full row 1
       after rank; .sn-right + chips form a single right-aligned cluster on row 2.
       This is the HDF "grid reorganization, not stacking" pattern — nothing is
       hidden, the data just reshapes into a compact 2-line layout. */
    .sn-row { flex-wrap: wrap; column-gap: 8px; row-gap: 8px;
              padding: 12px 12px; align-items: flex-start; }
    .sn-rank { min-width: 22px; font-size: 17px; align-self: center; }
    .sn-body { flex: 1 1 calc(100% - 32px); min-width: 0; }
    .sn-title { font-size: 14px; line-height: 1.3; }
    .sn-meta { font-size: 11px; line-height: 1.4; }

    /* Right-side elements wrap to second row, forming a flex cluster.
       .sn-right pushes chips to the right via flex:1 0 auto. */
    .sn-row > .sn-right { flex: 1 0 auto; text-align: left;
                          padding-left: 30px; min-width: 0; }
    .sn-row > .sn-right .v { font-size: 14px; }
    .sn-row > .sn-right .lbl { font-size: 9px; margin-top: 1px; }
    .sn-row > .sn-chip { flex: 0 0 auto; min-width: 0;
                         padding: 5px 9px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    /* Same reflow for the K rows' inner wrapper */
    .sn-row-main { flex-wrap: wrap; column-gap: 8px; row-gap: 8px; align-items: flex-start; }
    .sn-row-main > .sn-body { flex: 1 1 calc(100% - 32px); min-width: 0; }
    .sn-row-main > .sn-right { flex: 1 0 auto; text-align: left; padding-left: 30px; min-width: 0; }
    .sn-row-main > .sn-right .v { font-size: 14px; }
    .sn-row-main > .sn-right .lbl { font-size: 9px; margin-top: 1px; }
    .sn-row-main > .sn-chip { flex: 0 0 auto; min-width: 0; padding: 5px 9px; min-height: 44px;
                              display: flex; flex-direction: column; justify-content: center; }
    .sn-row-main > .sn-chip .v { font-size: 13px; }
    .sn-row-main > .sn-chip .lbl { font-size: 9px; margin-top: 1px; }
    .sn-rung.sn-rung-none { flex: 1 1 100%; min-width: 0; }
    .sn-row > .sn-chip .v { font-size: 13px; }
    .sn-row > .sn-chip .lbl { font-size: 9px; margin-top: 1px; }

    /* Sub-cards (parlays, value bets) — tighten + reflow legs */
    .sn-subcard { padding: 12px 12px; border-radius: 8px; }
    .sn-subcard-h { gap: 8px; }
    .sn-leg { flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; }
    .sn-leg .desc { font-size: 12px; flex: 1 1 100%; min-width: 0; }
    .sn-leg .odds { font-size: 12px; }

    /* Section head: title + meta-right can stack if title is long */
    .sn-section-head { gap: 6px 10px; }
    .sn-section-meta { font-size: 11px; }
  }

  /* ─────────────────────────── 480px — very narrow ─────────────────────────── */
  @media (max-width: 480px) {
    body { padding: 10px 10px;
           padding-left: max(10px, env(safe-area-inset-left));
           padding-right: max(10px, env(safe-area-inset-right)); }
    .sn-section { padding: 10px 10px; }
    .sn-section-h { font-size: 15px; }
    .sn-page-h { font-size: 17px; }
    .sn-row { padding: 10px 10px; column-gap: 6px; }
    .sn-row > .sn-chip { padding: 4px 7px; }
    .sn-row > .sn-chip .v { font-size: 12px; }
    .sn-row > .sn-right { padding-left: 26px; }
    .sn-rung { flex: 0 0 54px; min-width: 54px; padding: 3px 4px; }
    .sn-rung .pt { font-size: 9px; }
    .sn-rung .od { font-size: 10px; }
  }

/* ── SIM_CARD_CSS (data/simulator.py) ── */
/* ── Sim card — Stage 4 (2026-09-10): Scoreboard header on the tokens ──
   Every colour is a --sn-* token (assets/tokens.css). Sections stack with
   hairline rules; the header carries the one gold rule; the favored side's
   win % is gold; tiles sit on the 4px grid. Display only — the ⭐/⚠ rules
   that decide badges live in render_sim_card_html and grade_sim_cards. */
.sim-card { background:var(--sn-surface); border:1px solid var(--sn-line); border-radius:var(--sn-r-lg);
            overflow:hidden; font-variant-numeric:tabular-nums; color:var(--sn-fg); }
.sim-card .mono { font-family:var(--sn-font-mono); color:var(--sn-fg); }
.sim-card .dim { color:var(--sn-fg-3); }
.sim-card .sep { color:var(--sn-fg-4); }
.sim-card .nowrap { white-space:nowrap; }

/* header */
.sim-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
            padding:12px 16px 10px; border-bottom:2px solid var(--sn-gold); }
.sim-head-l { min-width:0; }
.sim-head-l .matchup { font-family:var(--sn-font-display); font-size:20px; font-weight:800;
                       letter-spacing:-0.01em; line-height:1.1; color:var(--sn-fg); }
.sim-head-l .matchup .at { color:var(--sn-fg-3); font-weight:600; }
.sim-head-l .sub { font-size:12px; color:var(--sn-fg-2); margin-top:4px; line-height:1.5; }
.sim-head-r { text-align:right; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sim-head-r .sims { font-family:var(--sn-font-display); font-size:10px; font-weight:700;
                    letter-spacing:0.08em; color:var(--sn-fg-3); line-height:1.3; }
.sim-time { color:var(--sn-fg); }
.sim-tbd-tag { display:inline-block; font-family:var(--sn-font-display); font-size:10px; font-weight:700;
               letter-spacing:0.06em; color:var(--sn-warn); background:var(--sn-warn-bg);
               padding:2px 8px; border-radius:var(--sn-r-pill); }
/* Series-position pill (2026-08-22) — opener / middle / finale keep their
   own hues from the tokens; middle is where ML shrinkage + the +2.5 ⚠ fire. */
.sim-series-chip { display:inline-block; font-family:var(--sn-font-display); font-size:10px; font-weight:700;
                   letter-spacing:0.06em; padding:2px 8px; border-radius:var(--sn-r-pill); line-height:1.4;
                   border:1px solid transparent; vertical-align:middle; }
.sim-series-chip.series-opener { color:var(--sn-opener); border-color:var(--sn-opener); }
.sim-series-chip.series-middle { color:var(--sn-middle); border-color:var(--sn-middle); }
.sim-series-chip.series-finale { color:var(--sn-finale); border-color:var(--sn-finale); }
/* PASS tag (2026-08-22): middle games where the strong-fav bucket hit 48%. */
.sim-sub-pass { margin-top:6px; }
.sim-pass-chip { display:inline-block; font-family:var(--sn-font-display); font-size:10px; font-weight:700;
                 letter-spacing:0.06em; color:var(--sn-bad); background:var(--sn-bad-bg);
                 padding:2px 8px; border-radius:var(--sn-r-pill); text-transform:uppercase; }

/* split — away reads left, home reads right; favored side is the gold number */
.sim-split { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
             padding:12px 16px; border-bottom:1px solid var(--sn-line); }
.sim-side { min-width:0; }
.sim-side.away { text-align:left; }
.sim-side.home { text-align:right; }
.sim-side .team { font-family:var(--sn-font-display); font-size:11px; font-weight:700; letter-spacing:0.08em;
                  color:var(--sn-fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sim-side .pitcher { font-size:13px; color:var(--sn-fg-2); margin:2px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sim-side .pct { font-family:var(--sn-font-display); font-size:34px; font-weight:800; letter-spacing:-0.02em;
                 line-height:1; color:var(--sn-fg); }
.sim-side.fav .pct { color:var(--sn-gold); }
.sim-side .runs { font-size:12px; color:var(--sn-fg-3); margin-top:4px; }
.sim-vs { font-family:var(--sn-font-display); font-size:11px; font-weight:700; color:var(--sn-fg-4); }
.sim-star { color:var(--sn-gold); vertical-align:-2px; margin-left:4px; cursor:help; }
.sim-warn-ic { color:var(--sn-bad); vertical-align:-2px; margin-left:4px; cursor:help; }
.sim-tile-sweet, .sim-tile-warn { display:inline-flex; align-items:center; }

/* expected total row */
.sim-total { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 16px 0; }
.sim-total-l { display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:wrap; }
.sim-total .lbl { font-family:var(--sn-font-display); font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--sn-fg-3); }
.sim-total .v { font-family:var(--sn-font-display); font-size:18px; font-weight:800; color:var(--sn-fg); line-height:1; }
.sim-total .vsline { font-size:12px; color:var(--sn-fg-3); }
.sim-delta { font-family:var(--sn-font-mono); font-size:12px; padding:3px 8px; border-radius:var(--sn-r-pill); white-space:nowrap; }
.sim-delta.over { background:var(--sn-good-bg); color:var(--sn-good); }
.sim-delta.under { background:var(--sn-bad-bg); color:var(--sn-bad); }
.sim-delta.even { background:var(--sn-surface-2); color:var(--sn-fg-2); }

/* tiles — 3 across, 4px grid */
.sim-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:12px 16px; }
.sim-tile { background:var(--sn-canvas); border:1px solid var(--sn-line); border-radius:var(--sn-r-sm); padding:8px 12px; min-width:0; }
.sim-tile .lbl { font-family:var(--sn-font-display); font-size:10px; font-weight:700; letter-spacing:0.08em;
                 color:var(--sn-fg-3); display:flex; align-items:center; white-space:nowrap; }
.sim-tile .v { font-family:var(--sn-font-display); font-size:16px; font-weight:700; color:var(--sn-fg); margin-top:2px; line-height:1.2; }
.sim-tile .v .muted { color:var(--sn-fg-3); }
.sim-tile .sub { font-size:11px; color:var(--sn-fg-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⭐ tile: gold hairline (the app's "there is something here" cue). ⚠ tile: bad tint. */
.sim-tile.sweet-spot { border-color:var(--sn-gold); }
.sim-tile.mid-warn { background:var(--sn-bad-bg); border-color:transparent; }

/* distribution strip */
.sim-dist-block { padding:0 16px 14px; }
.sim-dist-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
.sim-dist-head .lbl { font-family:var(--sn-font-display); font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--sn-fg-3); }
.sim-dist-head .range { font-size:11px; color:var(--sn-fg-3); }
.sim-dist { display:flex; align-items:flex-end; gap:3px; height:44px; }
.sim-dist-col { flex:1; min-height:1px; border-radius:2px 2px 0 0; background:var(--sn-surface-3); }
.sim-dist-col.peak { background:var(--sn-gold); }
.sim-dist-col.near { background:var(--sn-line-2); }
.sim-dist-col.tail { background:var(--sn-surface-2); border-top:1px dashed var(--sn-line-2); }
.sim-dist-axis { display:flex; justify-content:space-between; font-family:var(--sn-font-display); font-size:10px;
                 font-weight:700; letter-spacing:0.04em; color:var(--sn-fg-4); margin-top:4px; }

/* ─────────── ≤768px — tablet ─────────── */
@media (max-width: 768px) {
  .sim-head { padding:12px 14px 10px; }
  .sim-split, .sim-tiles { padding-left:14px; padding-right:14px; }
  .sim-total { padding-left:14px; padding-right:14px; }
  .sim-dist-block { padding-left:14px; padding-right:14px; }
  .sim-side .pct { font-size:32px; }
}

/* ─────────── ≤560px — phone (two columns stay: the matchup IS the card) ─────────── */
@media (max-width: 560px) {
  .sim-head-l .matchup { font-size:19px; }
  .sim-head-l .sub { font-size:11.5px; }
  .sim-split { gap:8px; }
  .sim-side .pct { font-size:30px; }
  .sim-side .pitcher { font-size:12px; }
  .sim-tiles { gap:6px; }
  .sim-tile { padding:8px 10px; }
  .sim-tile .v { font-size:15px; }
}

/* ─────────── ≤400px — small phones: tiles go 2-up so labels never clip ─────────── */
@media (max-width: 400px) {
  .sim-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sim-side .pct { font-size:28px; }
  .sim-dist { height:40px; }
}