/* ============================================================================
   picks.css — app-surface stylesheet for the pick / table tools.
   Added v=400 for the inline-to-CSS cleanup (see docs/CSS_CLEANUP_PLAN.md).

   OWNS the styling for the four core pick/table surfaces as they get migrated
   off inline style={{}} props, component by component:
     - PickCard.jsx        (Blast Scores / HR Picks cards)
     - PickemPicks.jsx     (Pick'em / Total Bases cards)   <- pilot, v=401
     - ScoutingTable.jsx
     - StackFinder.jsx

   Loaded after styles.css (the base/token layer) and before the surface-scoped
   homepage.css / paywall.css. Relies on the :root design tokens in styles.css.

   CONVENTIONS (full rules in docs/CSS_CLEANUP_PLAN.md):
     - Static styles live here as kebab-case classes (existing prefixes:
       .pick-*, .ppicks-* etc.). Component-scoped names; no new global resets.
     - Dynamic / data-driven values (score-tier colors, %-width bars, conditional
       layout) stay in the JSX as CSS custom properties (style={{'--x': val}})
       consumed here, or as data-attributes; they are NOT hard-coded into static
       rules.
     - Hover/focus/active and media queries belong here, not as JS handlers.

   First content landed v=402: the two PickemPicks modals (TbOddsModal +
   PickemLegendModal). The PickemPickCard itself migrates in a later ship.
   Some classes here (.ppicks-chip*, .ppicks-tb-diamond*, .ppicks-modal-close)
   are deliberately designed to be reused by the card when it migrates, so the
   modal + card share one definition.
   ============================================================================ */


/* ── Shared: modal close button (both Pickem modals) ─────────────────────── */
.ppicks-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

/* ── Shared chips (Legend now; PickemPickCard reuses these on migration) ──── */
.ppicks-chip {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.ppicks-chip--tb { color: var(--blue, #3b82f6); background: rgba(59, 130, 246, 0.10); }
.ppicks-chip--floor-strong { color: var(--green); background: rgba(16, 185, 129, 0.10); }
.ppicks-chip--floor-solid { color: var(--blue, #3b82f6); background: rgba(59, 130, 246, 0.10); }
.ppicks-chip--floor-lean { color: var(--text-muted); background: rgba(255, 255, 255, 0.05); }

/* ── Shared TB live-diamond (Legend sample now; card batsRow reuses later) ── */
.ppicks-tb-diamond { display: inline-flex; align-items: center; position: relative; }
.ppicks-tb-diamond-img { height: 26px; width: auto; display: block; }
.ppicks-tb-diamond-count {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    pointer-events: none;
}

/* ── TbOddsModal (v=402) ─────────────────────────────────────────────────── */
.ppicks-odds-modal { max-width: 380px; padding: 24px 28px; font-family: system-ui, -apple-system, sans-serif; }
.ppicks-odds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ppicks-odds-headerleft { display: flex; align-items: center; gap: 12px; }
.ppicks-odds-headshot { width: 52px; height: 52px; }
.ppicks-odds-headshot img { width: 52px; height: 52px; }
.ppicks-odds-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ppicks-odds-sub { font-size: 0.72rem; color: var(--text-muted); }
.ppicks-odds-table { display: flex; flex-direction: column; gap: 0; }
.ppicks-odds-thead { display: flex; justify-content: space-between; padding: 0 0 8px 0; border-bottom: 1px solid var(--border); }
.ppicks-odds-th { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ppicks-odds-prices { display: flex; gap: 24px; }
.ppicks-odds-num { width: 55px; text-align: right; }
.ppicks-odds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    margin-left: -8px;
    margin-right: -8px;
    background: transparent;
    border-radius: 0;
}
.ppicks-odds-row.is-best { background: rgba(16, 185, 129, 0.06); border-radius: 6px; }
.ppicks-odds-bookcell { display: flex; align-items: center; gap: 6px; }
.ppicks-odds-best-tag { font-size: 0.6rem; color: var(--green); font-weight: 700; }
.ppicks-odds-book { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.ppicks-odds-row.is-best .ppicks-odds-book { font-weight: 700; color: var(--green); }
.ppicks-odds-over { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.ppicks-odds-row.is-best .ppicks-odds-over { color: var(--green); }
.ppicks-odds-under { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.ppicks-odds-empty { padding: 16px 0; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
.ppicks-odds-lineinfo { margin-top: 10px; font-size: 0.68rem; color: var(--text-muted); text-align: center; }

/* ── PickemLegendModal (v=402) ───────────────────────────────────────────── */
.ppicks-legend-modal { max-width: 460px; padding: 24px 28px; font-family: system-ui, -apple-system, sans-serif; }
.ppicks-legend-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ppicks-legend-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.ppicks-legend-entries { display: flex; flex-direction: column; gap: 18px; }
/* v=403 — Stacked layout (badge ABOVE copy) for symmetry, per Joe. Was row
   (badge left / copy right). flex-start keeps the badge left-aligned over the
   copy; the smaller column gap reads tighter than the old 14px horizontal gap. */
.ppicks-legend-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ppicks-legend-row > :first-child { flex-shrink: 0; }  /* the chip/badge/diamond sample */
.ppicks-legend-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
/* Lead-in label only (e.g. "Floor confidence.", "Total bases."). NOT a blanket
   .ppicks-legend-desc strong rule, because the inline Strong/Solid/Lean <strong>s
   in the floor description deliberately stay at the inherited text-secondary. */
.ppicks-legend-lead { color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════════════
   PickemPickCard (v=408) — card body migrated off inline styles.
   The card SHARES .pick-card / .pick-header / .pick-score / .pick-batter /
   .pick-analysis / .detail-* / .blast-label with PickCard (Blast Scores).
   Those shared base classes are NOT redefined here. Every Pick'em-only style
   is additive: a .ppicks-* class, a scoped modifier (.detail-value.ppicks-*),
   or nested under the .ppicks-stacked card modifier — so Blast Scores cannot
   regress from this migration.
   ════════════════════════════════════════════════════════════════════════ */

/* Score badge. Pick'em tints the badge background by tier; PickCard uses the
   same .score-high/.score-med/.score-low classes for TEXT color only (no bg,
   see styles.css), so the tinted bg is scoped to .ppicks-score and never
   reaches Blast's badges. Replaces the inline `background: tierBg`. */
.ppicks-score { flex-shrink: 0; }
.ppicks-score.score-high { background: rgba(16, 185, 129, 0.14); }
.ppicks-score.score-med  { background: rgba(59, 130, 246, 0.10); }
.ppicks-score.score-low  { background: rgba(255, 255, 255, 0.05); }
.ppicks-score-tb-label { white-space: nowrap; font-size: 0.5rem; }

/* TB live-diamond inline next to the batter name. The base .ppicks-tb-diamond
   (legend sample) carries no margin; the card needs a small left gap. */
.ppicks-tb-diamond--inline { margin-left: 6px; }

/* Odds + floor chips row. The TB chip is clickable (opens TbOddsModal) and was
   a JS onMouseEnter/Leave bg swap — now a native :hover via .ppicks-chip-btn.
   The floor chip reuses .ppicks-chip--floor-strong/solid/lean (defined for the
   legend in v=402). */
.ppicks-chips-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ppicks-chip-btn { cursor: pointer; transition: background 0.15s; }
.ppicks-chip--tb.ppicks-chip-btn:hover { background: rgba(59, 130, 246, 0.20); }

/* Matchup info lines. Font-size bumps slightly in the stacked (compact/mobile)
   layout — handled by the .ppicks-stacked ancestor instead of the old
   useStackedLayout ? a : b inline ternaries. */
.ppicks-matchup-line { font-size: 0.75rem; color: var(--text-muted); }
.ppicks-matchup-sub  { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.ppicks-stacked .ppicks-matchup-line { font-size: 0.78rem; }
.ppicks-stacked .ppicks-matchup-sub  { font-size: 0.8rem; margin-top: 4px; }
.ppicks-bat-order { color: var(--amber); }
.ppicks-matchup-time { color: var(--text-muted); }

/* Status badges row + the NOT-IN-LINEUP badge (sits alongside the existing
   .badge / .badge-hot / .badge-platoon primitives). */
.ppicks-status-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; min-height: 22px; }
.badge-notinlineup { background: rgba(239, 68, 68, 0.15); color: #ef4444; font-weight: 700; }

/* Analysis text. .pick-analysis is shared with PickCard; the two Pick'em
   layout variants are scoped modifiers. */
.ppicks-analysis-inline  { align-self: stretch; min-width: 0; display: flex; align-items: flex-start; }
.ppicks-analysis-stacked { flex: none; width: 100%; margin-top: 12px; }

/* Batter stat values. Each color helper is a binary good/default tier; the
   green "good" tier becomes a scoped modifier on the shared .detail-value
   (the base class is untouched). The ISO row also bolds + ambers when a
   platoon-relevant hand is known. */
.detail-value.ppicks-stat-good { color: var(--green); }
.ppicks-stat-bold { font-weight: 600; }
.ppicks-iso-label-emph { color: var(--amber); font-weight: 600; }

/* Headshot column + batter-name row (shared across both layout branches). */
.ppicks-headshot-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.ppicks-batter { display: flex; align-items: center; flex-wrap: wrap; }
.ppicks-stacked .ppicks-batter { font-size: 0.95rem; font-weight: 700; }

/* Stacked (compact / mobile) layout rows. */
.ppicks-stacked-header     { display: flex; align-items: center; gap: 12px; }
.ppicks-stacked-namecol    { flex: 1; min-width: 0; }
.ppicks-stacked-odds       { margin-top: 12px; }
.ppicks-stacked-matchup    { margin-top: 10px; }
.ppicks-stacked-batterpanel{ margin-top: 10px; }

/* Desktop (list) layout. */
.ppicks-bio-col { display: flex; align-items: center; gap: 12px; align-self: center; flex-shrink: 0; width: 340px; }
.ppicks-bio-namecol { min-width: 0; }
.ppicks-bio-odds { margin-top: 4px; }
.ppicks-bio-matchup { margin-top: 5px; }
.ppicks-batter-panel-col { flex-shrink: 0; align-self: stretch; width: 200px; display: flex; flex-direction: column; justify-content: center; }

/* Filter / sort bar (parent PickemPicks). .filter-actions is shared with Blast
   Scores and already provides display:flex + align-items:center (styles.css);
   only the 12px gap is Pick'em-specific, so it's scoped here. */
.ppicks-filter-count { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }
.ppicks-filter-actions { gap: 12px; }
.ppicks-legend-link { color: var(--text-muted); cursor: pointer; font-size: 0.68rem; transition: color 0.15s; }
.ppicks-legend-link:hover { color: var(--text-secondary); }


/* ════════════════════════════════════════════════════════════════════════
   PickCard (Blast Scores / HR Picks) — Ship A, v=409.
   OddsModal + OddsTeaser sub-components migrated off inline styles. These are
   self-contained (no shared .pick- .detail- entanglement). The .pc-odds-
   set is the HR twin of the .ppicks-odds-* set (PickCard's OddsModal is the
   original that Pick'em's TbOddsModal was modeled on); kept as a separate
   prefix so the two surfaces stay independent. The main PickCard body (score
   badge, stats, layout) migrates in Ship B (v=410).
   ════════════════════════════════════════════════════════════════════════ */

/* OddsModal — layered on the global .modal / .modal-overlay. */
.pc-odds-modal { max-width: 380px; padding: 24px 28px; font-family: system-ui, -apple-system, sans-serif; }
.pc-odds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pc-odds-headerleft { display: flex; align-items: center; gap: 12px; }
.pc-odds-headshot { width: 52px; height: 52px; }
.pc-odds-headshot img { width: 52px; height: 52px; }
.pc-odds-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.pc-odds-sub { font-size: 0.72rem; color: var(--text-muted); }
.pc-odds-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.pc-odds-table { display: flex; flex-direction: column; gap: 0; }
.pc-odds-thead { display: flex; justify-content: space-between; padding: 0 0 8px 0; border-bottom: 1px solid var(--border); }
.pc-odds-th { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.pc-odds-prices { display: flex; gap: 24px; }
.pc-odds-num { width: 55px; text-align: right; }
.pc-odds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    margin-left: -8px;
    margin-right: -8px;
    background: transparent;
    border-radius: 0;
}
.pc-odds-row.is-best { background: rgba(16, 185, 129, 0.06); border-radius: 6px; }
.pc-odds-bookcell { display: flex; align-items: center; gap: 6px; }
.pc-odds-best-tag { font-size: 0.6rem; color: var(--green); font-weight: 700; }
.pc-odds-book { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.pc-odds-row.is-best .pc-odds-book { font-weight: 700; color: var(--green); }
.pc-odds-over { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.pc-odds-row.is-best .pc-odds-over { color: var(--green); }
.pc-odds-under { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.pc-odds-empty { padding: 16px 0; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
.pc-odds-lineinfo { margin-top: 10px; font-size: 0.68rem; color: var(--text-muted); text-align: center; }

/* OddsTeaser — the inline "HR +250" chip on the card; JS hover -> :hover. */
.pc-odds-teaser {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--green);
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    transition: background 0.15s;
}
.pc-odds-teaser:hover { background: rgba(255, 255, 255, 0.1); }


/* ════════════════════════════════════════════════════════════════════════
   PickCard main body — Ship B, v=410. Takes PickCard.jsx to 0 inline.
   Same discipline as PickemPicks: the shared .pick- .detail- .score-
   .blast-label base classes are NOT redefined (Pick'em leans on them too).
   Every PickCard style is a .pc-* class or a scoped modifier on a shared class.
   ════════════════════════════════════════════════════════════════════════ */

/* Stat-value color tiers — mirror the old inline ternaries exactly. Neutral
   is an explicit .pc-default so nothing relies on inherited color. */
.detail-value.pc-good    { color: var(--green); }
.detail-value.pc-warn    { color: var(--amber); }
.detail-value.pc-bad     { color: var(--red); }
.detail-value.pc-default { color: var(--text-primary); }
.detail-value.pc-temp-1  { color: #38bdf8; }
.detail-value.pc-temp-2  { color: #7dd3fc; }
.detail-value.pc-temp-3  { color: #fb923c; }
.detail-value.pc-temp-4  { color: #ea580c; }
.detail-value.pc-temp-5  { color: var(--red); }
.pc-stat-bold  { font-weight: 600; }
.pc-stat-light { font-weight: 400; }
.detail-label.pc-label-emph { color: var(--amber); font-weight: 600; }
.pc-leagueavg { font-size: 0.7em; color: var(--text-secondary); font-weight: 400; }

/* Score badge tier tint — scoped (PickCard's HR badge), parallel to .ppicks-score.
   PickCard + Pick'em share .score-high/med/low for TEXT color only; the bg lives
   on the per-surface .pc-score / .ppicks-score companion class. */
.pc-score { flex-shrink: 0; }
.pc-score.score-high { background: rgba(16, 185, 129, 0.14); }
.pc-score.score-med  { background: rgba(59, 130, 246, 0.10); }
.pc-score.score-low  { background: rgba(255, 255, 255, 0.05); }

/* Conditions + Key Metrics panels. */
.pc-panel { padding: 10px 12px; }
.pc-panel-h4 { margin-bottom: 6px; }
.pc-conditions-row { display: flex; gap: 12px; align-items: flex-start; }
.pc-panel-conditions { flex-shrink: 0; align-self: center; width: 240px; }
.pc-panel-keymetrics { flex-shrink: 0; align-self: center; width: 200px; }

/* Header row (headshot | name | score) — shared by both render paths. */
.pc-row-header { display: flex; align-items: center; gap: 12px; }
.pc-headshot-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; position: relative; /* v=481 — anchor for the lineup-confirmed badge */ }
.pc-namecol { flex: 1; min-width: 0; }
.pc-batter-row { display: flex; align-items: center; gap: 6px; }
.pc-live-hr { width: 40px; height: auto; }
/* v=480/481 — lineup-confirmed badge (pick.lineupPosted && !notInLineup;
   the same MLB lineup signal that gates the free-picks publish). v=481
   moved it from the name row ONTO the bio photo, DFS-convention style,
   straddling the photo's bottom edge: next to the name the green check
   read as HR confirmation beside the fireball. Base rule is the circle
   itself; the absolute positioning is scoped to .pc-headshot-col so the
   Badge Legend's standalone copy stays in normal flow. The photo is 80px
   on every breakpoint (deliberate, see styles.css), so the fixed top
   anchor is safe everywhere. */
.pc-lineup-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--green); color: #fff;
    font-size: 9px; font-weight: 900; line-height: 1;
    flex-shrink: 0;
}
.pc-headshot-col .pc-lineup-check {
    position: absolute;
    top: 80px; left: 50%;
    transform: translate(-50%, -50%); /* dead-center on the photo's bottom edge */
    z-index: 1;
}
.badge-legend-check { width: 18px; height: 18px; font-size: 11px; }

/* Odds chips row + O/U chip (the HR teaser is .pc-odds-teaser, v=409). */
.pc-chips-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-chips-row--stacked { margin-top: 12px; }
.pc-chips-row--bio { margin-top: 4px; }
.pc-ou-chip {
    font-size: 0.68rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; padding: 2px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
}
.pc-ou-chip--hot { color: var(--green); }

/* Matchup info lines (stacked vs desktop differ in font/margins). */
.pc-matchup { margin-top: 10px; }
.pc-matchup-line   { font-size: 0.78rem; color: var(--text-muted); }
.pc-matchup-sub    { font-size: 0.8rem;  color: var(--text-secondary); margin-top: 4px; }
.pc-matchup-line-d { font-size: 0.75rem; color: var(--text-muted); margin-top: 5px; }
.pc-matchup-sub-d  { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.pc-matchup-opp { font-weight: 400; }
.pc-bat-order { color: var(--amber); }
.pc-bat-tbd { color: var(--text-muted); }
.pc-matchup-time { color: var(--text-muted); }
.pc-delayed { color: var(--accent); display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; }

/* Status badges row (stacked: gap 6 / mt 10; desktop bio: gap 4 / mt 8). */
.pc-status-badges { display: flex; flex-wrap: wrap; min-height: 22px; gap: 6px; margin-top: 10px; }
.pc-status-badges--bio { gap: 4px; margin-top: 8px; }

/* Bio column (desktop list path) + stacked panel-row wrappers. */
.pc-bio-col { display: flex; align-items: center; gap: 12px; align-self: center; flex-shrink: 0; width: 340px; }
.pc-bio-namecol { min-width: 0; }
.pc-panel-row { width: 100%; margin-top: 10px; }

/* Analysis + expand caret. .pick-analysis is shared with Pick'em. */
.pc-analysis-stacked { flex: none; width: 100%; cursor: pointer; margin-top: 10px; }
.pc-analysis-clickable { cursor: pointer; }
.pc-caret { display: inline-block; margin-left: 6px; font-size: 0.5rem; opacity: 0.5; transition: transform 0.2s; vertical-align: middle; transform: rotate(0deg); }
.pc-caret.is-expanded { transform: rotate(180deg); }

/* ============================================================
   StackFinder (v=415) — inline-to-class migration.
   Tier color (elite/strong/standard) flows via CSS vars set on
   the card root; score-badge color via a second var set. Env
   pills + batter rows are semantic modifier classes. The
   .stack-batter-* base rules live here; their 640px responsive
   overrides remain in styles.css.
   ============================================================ */

.sf-root { margin-bottom: 16px; }
.sf-view-end { margin-left: auto; }

/* Card root. Tier class sets the four --sf-tier-* tokens. */
.sf-stack-card {
    background: var(--bg-card);
    border: 1px solid var(--sf-tier-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.sf-tier-elite    { --sf-tier-color: #ef4444; --sf-tier-bg: rgba(239, 68, 68, 0.15); --sf-tier-border: rgba(239, 68, 68, 0.4); --sf-tier-label: rgba(239, 68, 68, 0.6); }
.sf-tier-strong   { --sf-tier-color: #fb923c; --sf-tier-bg: rgba(251, 146, 60, 0.15); --sf-tier-border: rgba(251, 146, 60, 0.4); --sf-tier-label: rgba(251, 146, 60, 0.6); }
.sf-tier-standard { --sf-tier-color: #facc15; --sf-tier-bg: rgba(250, 204, 21, 0.15); --sf-tier-border: rgba(250, 204, 21, 0.4); --sf-tier-label: rgba(250, 204, 21, 0.6); }

/* Header: tier badge + team + game time (left), score badge (right). */
.sf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.sf-header-left { display: flex; align-items: center; gap: 8px; }
.sf-tier-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px; font-size: 0.62rem; font-weight: 700;
    background: var(--sf-tier-bg); border: 1px solid var(--sf-tier-border);
    color: var(--sf-tier-color); text-transform: uppercase; letter-spacing: 0.5px;
}
.sf-team { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
.sf-gametime { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; margin-left: 4px; }

/* Score badge. Score class sets the four --sf-score-* tokens. */
.sf-score-badge {
    min-width: 70px; padding: 8px 12px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; flex-shrink: 0;
    background: var(--sf-score-bg); border: 1px solid var(--sf-score-border);
    cursor: help;
}
.sf-score-high { --sf-score-text: #10b981; --sf-score-bg: rgba(16, 185, 129, 0.14); --sf-score-border: rgba(16, 185, 129, 0.4); --sf-score-label: rgba(16, 185, 129, 0.6); }
.sf-score-med  { --sf-score-text: #3b82f6; --sf-score-bg: rgba(59, 130, 246, 0.10); --sf-score-border: rgba(59, 130, 246, 0.4); --sf-score-label: rgba(59, 130, 246, 0.6); }
.sf-score-low  { --sf-score-text: var(--text-muted); --sf-score-bg: rgba(255, 255, 255, 0.05); --sf-score-border: var(--border); --sf-score-label: rgba(148, 163, 184, 0.6); }
.sf-score-cap { font-size: 0.55rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sf-score-label); }
.sf-score-num { font-size: 1.6rem; font-weight: 900; line-height: 1; color: var(--sf-score-text); }

/* Environment pills. Base is muted; modifiers recolor per data bucket. */
.sf-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sf-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
}
.sf-pill--pos { color: #10b981; }
.sf-pill--neg { color: #ef4444; }
.sf-pill--secondary { color: var(--text-secondary); }
.sf-pill--temp-1 { color: #38bdf8; }
.sf-pill--temp-2 { color: #7dd3fc; }
.sf-pill--temp-3 { color: #fb923c; }
.sf-pill--temp-4 { color: #ea580c; }
.sf-pill--temp-5 { color: var(--red); }
.sf-pill--wind { gap: 4px; }

/* Column headers row. */
.sf-colheaders {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px 4px; font-size: 0.62rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px;
}
.sf-colheaders-stats { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.sf-col-odds { width: 52px; text-align: right; }
.sf-col-blast { width: 32px; text-align: right; }

/* Batter list. .stack-batter-* base here; 640px overrides in styles.css. */
.sf-batters { display: flex; flex-direction: column; gap: 6px; }
.stack-batter-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}
.stack-batter-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-headshot { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; }
.sf-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.stack-batter-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-bat-meta { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.sf-bat-meta--bold { font-weight: 600; }
.sf-bat-meta--mid { font-weight: 500; }
.sf-notinlineup { font-size: 0.65rem; color: #ef4444; flex-shrink: 0; font-weight: 600; }
.sf-core-tag {
    font-size: 0.6rem; color: var(--accent); flex-shrink: 0; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 6px; border-radius: 3px;
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25);
}
.stack-batter-stats { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.sf-bat-odds { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); width: 52px; text-align: right; }
.sf-bat-odds--has { color: var(--green); }
.sf-bat-score { font-weight: 700; font-size: 0.92rem; width: 32px; text-align: right; color: var(--text-secondary); }
.sf-bat-score--core-hi { color: #10b981; }
.sf-bat-score--core-mid { color: #3b82f6; }
.sf-bat-score--core-lo { color: var(--text-secondary); }
.sf-bat-score--supp { color: var(--text-muted); }

/* Card footer summary. */
.sf-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 0.68rem; color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   ScoutingTable (.scout-*) — v=422 inline-to-CSS migration.
   Two near-identical tables (Batters / Pitchers) + a Metric Key modal +
   two expandable detail panels. Data-driven pieces follow the StackFinder
   template: discrete tier classes for the percentile heat map + Blast Score
   colors, a sanctioned `--scout-w` CSS var for per-column width (min-width on
   th, max-width on td — the columns config is the source of truth, mirrors
   .sf-tier-* / --mp-icon precedent), and an `.is-open` class toggle for the
   detail-panel enter animation. NOTE: the older control-row classes
   (.scout-filter-row / .scout-mode-* / .filter-trigger / .fs-*) predate this
   cleanup and stay in styles.css; only the TABLE surface lives here.
   ═══════════════════════════════════════════════════════════════════════ */

/* Roots / shell */
/* v=423 — top margins zeroed so Scouting's controls row sits directly under
   the shared .controls title block, matching Blast Scores / Stack Finder /
   Pick'em (all of which have no extra top margin on their tool root). Was
   margin-top 16px + 4px, which pushed Scouting ~20px lower than the others. */
.scout-root { width: 100%; }
.scout-view { width: 100%; }
.scout-scroll {
    overflow-x: auto; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); -webkit-overflow-scrolling: touch;
}
.scout-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.scout-table--batters { min-width: 980px; }
.scout-table--pitchers { min-width: 900px; }
.scout-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* Header row */
.scout-thead-row { border-bottom: 2px solid var(--border); }
.scout-th {
    padding: 10px 8px; text-align: center; color: var(--text-secondary);
    font-weight: 600; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.3px; cursor: pointer; user-select: none;
    white-space: nowrap; transition: color 0.15s; min-width: var(--scout-w);
}
.scout-th--left { text-align: left; }
.scout-th.is-active { color: var(--accent); }
.scout-th--sticky {
    position: sticky; left: 0; background: var(--bg-card); z-index: 2;
}
.scout-sort-caret { margin-left: 4px; font-size: 0.6rem; }

/* Body rows + cells */
.scout-row { transition: background 0.15s; cursor: pointer; background: transparent; border-bottom: 1px solid var(--border); }
.scout-row:not(.is-expanded):hover { background: rgba(255, 255, 255, 0.03); }
.scout-row.is-expanded { border-bottom: none; background: rgba(16, 185, 129, 0.06); }
.scout-td {
    padding: 8px 8px; text-align: center; color: var(--text-primary);
    white-space: nowrap; transition: background 0.15s; max-width: var(--scout-w);
}
.scout-td--left { text-align: left; }
.scout-td--sticky {
    position: sticky; left: 0; background: var(--bg-card); z-index: 1;
}
/* Percentile heat-map tiers (top 10% / 25% / 50% + binary platoon) */
.scout-heat-3 { background: rgba(16, 185, 129, 0.35); font-weight: 700; }
.scout-heat-2 { background: rgba(16, 185, 129, 0.20); font-weight: 600; }
.scout-heat-1 { background: rgba(16, 185, 129, 0.08); }
.scout-heat-platoon { background: rgba(16, 185, 129, 0.25); font-weight: 600; }

/* Cell content */
.scout-cell-player { display: flex; align-items: center; gap: 8px; }
.scout-headshot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.scout-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-livehr { width: 40px; height: auto; flex-shrink: 0; }
.scout-vs { color: var(--text-muted); font-size: 0.7rem; }
.scout-opp { color: rgba(255, 255, 255, 0.35); }
.scout-opp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.scout-muted { color: var(--text-muted); }
.scout-odds-link {
    color: var(--green); font-weight: 700; cursor: pointer;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
/* Blast Score tier colors (shared: batter column + pitcher-detail cards) */
.scout-blast--green { color: #10b981; font-weight: 700; }
.scout-blast--blue { color: #3b82f6; font-weight: 700; }
.scout-blast--amber { color: var(--accent); font-weight: 700; }
.scout-blast--muted { color: var(--text-muted); font-weight: 600; }

/* Metric Key button + modal */
.scout-metrickey-wrap { margin-top: 12px; text-align: center; }
.scout-metrickey-btn {
    font-size: 0.72rem; font-weight: 600; padding: 6px 16px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
}
.scout-metrickey-btn:hover { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.scout-modal-overlay {
    position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn 0.2s ease;
}
.scout-modal {
    background: var(--bg-card, #1e293b); border: 1px solid var(--border); border-radius: 12px;
    padding: 24px 28px; max-width: 820px; width: 100%; max-height: 80vh; overflow-y: auto;
    font-size: 0.75rem; line-height: 1.8; color: var(--text-secondary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.scout-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.scout-modal-title { font-weight: 700; color: var(--text-primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.scout-modal-close {
    background: none; border: none; color: var(--text-muted); font-size: 1.2rem;
    cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.15s;
}
.scout-modal-close:hover { color: var(--text-primary); }
.scout-legend { display: flex; gap: 12px; margin-bottom: 14px; font-size: 0.7rem; flex-wrap: wrap; }
.scout-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.scout-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.scout-legend-swatch--3 { background: rgba(16, 185, 129, 0.35); }
.scout-legend-swatch--2 { background: rgba(16, 185, 129, 0.20); }
.scout-legend-swatch--1 { background: rgba(16, 185, 129, 0.08); }
.scout-legend-swatch--none { background: transparent; border: 1px solid var(--border); }
.scout-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; }
.scout-metric-term { color: var(--text-primary); font-weight: 700; font-size: 0.76rem; margin-bottom: 2px; }
.scout-modal-footer { margin-top: 12px; font-size: 0.68rem; color: var(--text-muted); }

/* Detail panel (shared animated wrapper; per-view max-height on open) */
.scout-detail-cell { padding: 0; border: none; }
.scout-detail {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    background: rgba(15, 23, 42, 0.5); border-bottom: 2px solid var(--border);
}
.scout-detail.is-open { opacity: 1; }
.scout-detail--batter.is-open { max-height: 300px; }
.scout-detail--pitcher.is-open { max-height: 600px; }
.scout-detail-body { padding: 12px 16px; }
.scout-detail-body--pitcher { padding: 14px 16px; }
.scout-detail-groups {
    display: flex; gap: 12px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.scout-grp { flex: 1 1 0; min-width: 140px; padding: 10px 14px; background: rgba(0, 0, 0, 0.15); border-radius: 8px; }
.scout-grp-h4 {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 8px;
}
.scout-grp-sub { font-size: 0.85em; color: var(--text-muted); font-weight: 400; }
.scout-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 0.76rem; gap: 12px; }
.scout-lbl { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.scout-lbl--active { color: var(--amber); font-weight: 600; }
.scout-val { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.scout-val.is-good { color: var(--green); }
.scout-val--pos { color: var(--green); }
.scout-val--neg { color: var(--red, #ef4444); }
.scout-detail-close {
    display: flex; justify-content: flex-end; align-items: center; margin-top: 6px;
    cursor: pointer; gap: 4px; color: var(--text-muted); font-size: 0.68rem; transition: color 0.15s;
}
.scout-detail-close--pitcher { margin-top: 10px; }
.scout-detail-close:hover { color: var(--text-primary); }
.scout-detail-caret { font-size: 0.6rem; }

/* Pitcher detail — batter list */
.scout-pdetail-title {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 10px;
}
.scout-pdetail-count { color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.scout-pdetail-empty { color: var(--text-muted); font-size: 0.78rem; }
.scout-pbat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.scout-pbat-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18); border-radius: 8px; opacity: 1;
}
.scout-pbat-card.is-out { opacity: 0.5; }
.scout-pbat-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scout-pbat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.scout-pbat-meta { font-size: 0.68rem; color: var(--text-muted); }
.scout-pbat-right { text-align: right; flex-shrink: 0; }
.scout-pbat-blast-lbl { font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.05em; }
.scout-pbat-blast { font-size: 1rem; }

/* ─── v=465 — Admin free-pick selection (Blast tool, admin-only) ──────────
   The corner select control PickCard renders when `selectable` — number =
   slot order (1=top, 2=mid, 3=flyer). And the floating publish bar the
   Dashboard shows while a selection is in progress. */
.pick-card { position: relative; }
.pc-free-select {
    position: absolute;
    top: 10px;
    right: 10px;
    /* v=468 — 30px read comically large on the real card (Joe, on prod
       day one). 20px sits like a quiet annotation, not a feature. */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: border-color 0.15s, background 0.15s;
}
.pc-free-select:hover { border-color: var(--green); }
.pc-free-select.is-selected {
    border-color: var(--green);
    background: linear-gradient(135deg, var(--green), #059669);
}

.free-picks-publish-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--green);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 900;
}
.free-picks-publish-bar .fpb-count { color: var(--text-secondary); font-size: 0.88rem; font-weight: 600; }
.free-picks-publish-bar .fpb-publish {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #ffffff;
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
}
.free-picks-publish-bar .fpb-publish:disabled { opacity: 0.45; cursor: default; }
.free-picks-publish-bar .fpb-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
}
@media (max-width: 768px) {
    /* sit above the floating mobile tab bar */
    .free-picks-publish-bar { bottom: 92px; width: max-content; max-width: calc(100% - 24px); }
}

/* ─── v=470 — Free-pick publish modal (replaces window.confirm/alert) ──── */
.fp-publish-modal { max-width: 420px; padding: 26px 28px; }
.fp-modal-title { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-bottom: 16px; }
.fp-modal-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fp-modal-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.fp-modal-slot { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); white-space: nowrap; }
.fp-modal-name { font-weight: 700; color: var(--text-primary); }
.fp-modal-warn { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 18px; }
.fp-modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.fp-modal-cancel {
    background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 10px 18px; border-radius: 10px; cursor: pointer;
}
.fp-modal-confirm {
    background: linear-gradient(135deg, var(--green), #059669); color: #ffffff; border: none;
    font-family: inherit; font-size: 0.9rem; font-weight: 700;
    padding: 10px 22px; border-radius: 10px; cursor: pointer;
}
.fp-modal-confirm:disabled, .fp-modal-cancel:disabled { opacity: 0.5; cursor: default; }