/* ============================================================
   BaseballIQ - Editorial Terminal system (canonical).
   Concept: Financial Times meets Bloomberg terminal meets Stathead.
   Warm ivory paper, deep ink, one saturated red accent, flat
   newspaper rules, oversized display + tabular-numeric data.

   DESIGN-SYSTEM DECISION (2026-05-27, per polish audit):
   The editorial system in polish.css is canonical. styles.css used
   to ship a cool-slate "Apple/Linear" palette that polish.css
   overrode at runtime with !important. To stop the cascade warfare:
     1. This file's :root tokens now align with the editorial system
        (warm ivory bg, Figtree/Outfit fonts, flat radii).
     2. The legacy v2 ("Geist") and v3 ("Barlow Condensed") :root
        blocks further down are aliased to the editorial tokens
        rather than deleted - too many selectors reference them.
     3. New canonical tokens live in this :root: --space-*, --t-*,
        --card-*, --chip-*, --spark-stroke, --text-1 aliases.
   Do NOT reintroduce the cool-slate palette. ============================================================ */

/* Editorial type stack (canonical):
  , Outfit: display headings (h1/h2/h3, hero, eyebrows under display)
  , Figtree: body / UI / all secondary text
  , JetBrains Mono: tabular numerics + data labels (uppercase, tracking 1.5)
   Polish.css also imports these, so the @import below is harmless
   (browser dedupes) but kept here so styles.css works standalone. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Surfaces (editorial: warm ivory paper) ──────────────────────── */
  --bg:             #f3efe6;
  --bg-soft:        #e9e3d6;
  --bg-tinted:      #e0d9c8;            /* very subtle accent wash */
  --surface:        #fbfaf6;
  --surface-soft:   #f7f5ee;
  --surface-elev:   #ffffff;
  --paper:          #fbfaf6;
  --hairline:       rgba(15, 14, 12, .10);
  --hairline-strong:rgba(15, 14, 12, .22);
  --rule:           #1a1815;
  --rule-soft:      rgba(15, 14, 12, .14);
  --rule-strong:    #1a1815;

  /* ── Ink (editorial: deep ink on ivory) ──────────────────────────────
     Contrast verified against --bg (#f4f1ea) for WCAG AA (4.5:1 body).
       --ink     #0f0e0c  → 16.2:1  AAA
       --ink-2   #1a1815  → 13.8:1  AAA
       --text    #2a2722  → 10.4:1  AAA
       --text-2  #5a5650  →  5.4:1  AA
       --text-3  #7a7468  →  4.6:1  AA   (was #8a857c, 3.7:1 - failed AA)
       --text-4  #8e887b  →  3.5:1  large-text only; never body
     Anything below --text-3 should NOT be used for primary body copy.
     --text-4 is reserved for placeholder/disabled where 3:1 is acceptable. */
  --ink:            #0f0e0c;             /* near-black headlines */
  --ink-2:          #1a1815;             /* secondary headings */
  --text:           #2a2722;             /* body */
  --text-2:         #5a5650;             /* secondary body */
  --text-3:         #6a655b;             /* muted - darkened from #7a7468 (~4.3:1) to clear WCAG AA, now ~5.2:1 on --surface */
  --muted:          var(--text-3);       /* alias: --muted was referenced 128x as var(--muted, #9a9690/#8a857c) but never DEFINED, so every use fell back to a sub-AA literal. Aliasing to --text-3 makes them all theme-aware + AA. */
  --text-4:         #8e887b;             /* placeholder - was #b8b3a8 (failed AA) */
  /* Age-tier color coding (peak->decline). Theme-aware so the age labels clear
     WCAG AA on light AND dark surfaces (the old shared literals failed light). */
  --age-peak:       #087453;
  --age-young:      #217351;
  --age-prime:      #5b6675;
  --age-mild:       #835f08;
  --age-veteran:    #91581f;
  --age-decline:    #ae4234;
  /* Silent-fallback aliases - selectors written as var(--text-1) / --text1
     / --text2 used to resolve to inherited/default because these tokens
     were never defined. Aliasing them here makes ~90 broken refs paint
     correctly without a risky find-replace across 580KB of CSS. */
  --text-1:         var(--ink);          /* "primary ink" alias */
  --text1:          var(--ink);
  --text2:          var(--text-2);

  /* ── Brand: single saturated red, no indigo. ─────────────────────── */
  --brand:          #b23415;
  --brand-2:        #c8431e;
  --brand-deep:     #8a2810;
  --brand-soft:     rgba(178,52,21,.08);
  --brand-tint:     rgba(178,52,21,.20);
  --brand-grad:     linear-gradient(135deg, #b23415 0%, #c8431e 100%);
  --brand-grad-soft:linear-gradient(135deg, rgba(178,52,21,.08), rgba(200,67,30,.05));

  /* ── Status (editorial: matched to ivory background) ─────────────── */
  --green:          #1f6b3a;
  --green-soft:     rgba(31,107,58,.10);
  --green-bg:       rgba(31,107,58,.14);
  --red:            #a8201a;
  --red-soft:       rgba(168,32,26,.10);
  --red-bg:         rgba(168,32,26,.14);
  --gold:           #8a5a10;
  --gold-soft:      rgba(138,90,16,.10);
  --gold-bg:        rgba(138,90,16,.14);
  /* Legacy semantic "blue" token retained as a neutral ink alias -
     strict R/W/B palette means no actual blue renders. */
  --blue:           #2a2722;
  --blue-soft:      rgba(42,39,34,.08);

  /* ── Position colors (now match the actual .posChip--* hexes at
     L1809-1819 so the tokens are LIVE and chip styling can migrate
     to var(--pos-*) without color drift). ────────────────────── */
  --pos-c:          #7b5da3;
  --pos-1b:         #9d6739;
  --pos-2b:         #887128;
  --pos-3b:         #2d8072;
  --pos-ss:         #4a73b0;
  --pos-of:         #458052;
  --pos-dh:         #ab5e83;
  --pos-sp:         #b25347;
  --pos-rp:         #9b6933;
  --pos-util:       #6b7385;
  --pos-p:          #6b7385;

  /* ── Layout ────────────────────────────────────────────── */
  --nav-h:          64px;
  --max-w:          1320px;
  --gutter:         32px;                /* editorial: wider gutter */

  /* ── Spacing scale (canonical, 4-grid) ────────────────────
     Replaces the ~25 ad-hoc gap values that drifted across routes.
     Use these tokens for new layout work; legacy hard-coded px
     values can stay until migrated. */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-7:        32px;
  --space-8:        48px;

  /* ── Shadows (editorial: paper-thin elevation) ───────────────────── */
  --shadow-1:       0 1px 0 var(--hairline);
  --shadow-2:       0 1px 0 var(--hairline), 0 8px 24px -16px rgba(15,14,12,.20);
  --shadow-3:       0 2px 0 var(--hairline-strong), 0 24px 48px -28px rgba(15,14,12,.28);
  --shadow-4:       0 40px 80px -40px rgba(15,14,12,.40);
  --shadow-brand:   0 2px 0 var(--brand-deep);
  --shadow-focus:   0 0 0 3px rgba(178,52,21,.35);

  /* ── Typography (editorial stack) ──────────────────────────────── */
  --font:           'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Outfit', 'Figtree', sans-serif;
  --font-hero:      'Outfit', 'Figtree', sans-serif;
  --mono:           'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-mono:      var(--mono);         /* polish.css uses --font-mono */
  /* Expo.out easing (cinema animation curve, used widely on this site) */
  --ease-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  /* Single restrained accent - brand red. Used sparingly for live
     indicators, hover glows, sparkline strokes, footer brand. */
  --accent:         #b23415;
  --accent-2:       #c8431e;
  --accent-deep:    #8a2810;
  --accent-soft:    rgba(178, 52, 21, 0.08);
  --accent-tint:    rgba(178, 52, 21, 0.20);
  --accent-glow:    rgba(178, 52, 21, 0.22);

  /* ── Type scale (canonical) ────────────────────────────────
     Replaces the 31 font-size values that fragmented styles.css.
     Body baseline = --t-body (14px). Numerics in tables use --t-sm
     with tabular-nums. Headings use --t-lg → --t-3xl.
     NOTE: `--t-base` is taken by the motion-timing token below; the
     body size lives at `--t-body` to keep both worlds intact. */
  --t-xs:           11px;
  --t-sm:           13px;
  --t-body:         14px;
  --t-md:           15px;
  --t-lg:           17px;
  --t-xl:           20px;
  --t-2xl:          24px;
  --t-3xl:          32px;
  --t-display:      44px;

  /* ── Radii (editorial: flat by default; pill kept for chips that
     need it, hairline kept for the few rounded surfaces). ────── */
  --r-xs:  0px;
  --r-sm:  0px;
  --r-md:  0px;
  --r-lg:  0px;
  --r-xl:  0px;
  --r-2xl: 0px;
  --r-pill: 999px;
  /* Wave R2 — SOFT radius ladder (UI audit P1). The --r-sm/md/lg trio above
     is the brutalist chrome scale (intentionally 0). Sub-page surfaces use
     this soft ladder; values mirror the measured top literals so migration
     is a visual no-op. */
  --r-3: 3px; --r-4: 4px; --r-6: 6px; --r-8: 8px;
  --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px;
  /* Elevation ladder: the recurring literal shadows, named. */
  --elev-pop:    4px 4px 0 var(--ink);
  --elev-pop-lg: 5px 5px 0 var(--ink);
  --elev-focus:  0 0 0 3px var(--accent-soft);
  /* Z ladder — semantic names for the live bands (values unchanged, so
     stacking order is untouched; oddballs keep literals + a comment). */
  --z-raised: 30; --z-sticky: 100; --z-rail: 600; --z-chrome: 1000;
  --z-flyout: 1500; --z-overlay: 9999; --z-modal: 20000; --z-toast: 30000;

  /* ── Card / surface tokens (canonical) ──────────────────── */
  --card-pad:       20px;
  --card-radius:    0px;
  --card-shadow:    var(--shadow-1);
  --card-border:    1px solid var(--hairline);

  /* ── Chip tokens (canonical) ────────────────────────────── */
  --chip-pad:       3px 9px;
  --chip-radius:    0px;
  --chip-fs:        11px;
  --chip-fw:        700;
  --chip-gap:       6px;

  /* ── Sparkline tokens (replaces eight ad-hoc stroke widths) ─ */
  --spark-stroke:   1.4;
  --spark-up:       var(--green);
  --spark-down:     var(--red);

  /* ── Motion ────────────────────────────────────────────── */
  --ease:    cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.215,.61,.355,1);
  --t-fast:  140ms;
  --t-base:  240ms;                      /* motion timing (not a type size) */
  --t-slow:  420ms;
}

/* ════════════════════════════════════════════════════════════
   SHARED SEMANTIC TOKENS (per docs/PRINCIPLES.md §7-§9)
   Single source of truth for severity, metric direction, and
   Edge identity tones. Surface-specific CSS should use these
   rather than hard-coded hex values.
   ════════════════════════════════════════════════════════════ */
:root {
  /* Severity scale, CRITICAL > URGENT > NOTABLE > SOFT */
  --sev-critical:        #a13d2c;
  --sev-critical-bg:     rgba(183, 99, 77, 0.10);
  --sev-critical-bg-soft:rgba(183, 99, 77, 0.05);
  --sev-critical-border: rgba(183, 99, 77, 0.35);

  --sev-urgent:          #8a5a1f;
  --sev-urgent-bg:       rgba(192, 144, 60, 0.12);
  --sev-urgent-bg-soft:  rgba(192, 144, 60, 0.06);
  --sev-urgent-border:   rgba(192, 144, 60, 0.35);

  --sev-notable:         #355da6;
  --sev-notable-bg:      rgba(65, 112, 194, 0.10);
  --sev-notable-bg-soft: rgba(65, 112, 194, 0.04);
  --sev-notable-border:  rgba(65, 112, 194, 0.35);

  --sev-soft:            #6b6b6b;
  --sev-soft-bg:         rgba(0, 0, 0, 0.04);
  --sev-soft-bg-soft:    rgba(0, 0, 0, 0.018);
  --sev-soft-border:     rgba(0, 0, 0, 0.10);

  /* Directional metric coloring */
  --metric-pos:          #2f6b3f;
  --metric-pos-soft:     #4a8b5b;
  --metric-neg:          #a13d2c;
  --metric-neg-soft:     #b7634d;
  --metric-neu:          #1f1f1f;

  /* Edge identity tones, see docs/PRINCIPLES.md §7 (tone ≠ severity) */
  --tone-conviction:     #355da6;
  --tone-fragile:        #8a5a1f;
  --tone-quiet:          #2f6b3f;
  --tone-volatile:       #1c7a8c;
  --tone-overconf:       #a13d2c;
  --tone-mismatch:       #7340a3;
  --tone-instability:    #4a6a87;
}

/* ── Reset & global ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* 100dvh = dynamic viewport; survives iOS Safari's address-bar collapse.
     `100vh` causes catastrophic layout jumping on mobile (taste-skill / ui-ux-pro-max). */
  min-height: 100dvh;
  overflow-x: clip;
  font-feature-settings: 'cv11', 'ss01';
}

/* ── Route-based view separation ─────────────────────────────────────
   Each major section is tagged `data-view="<route>"`. The current
   `body[data-route]` (set by primaryViewRouter on every hashchange)
   determines which sections show. Default: hide all data-view sections,
   then explicitly reveal the ones matching the active route.
   `<body data-route="home">` is set in HTML so initial paint has no flash.
   Overlay routes (#/player, #/edge, #/draft) preserve the underlying
   route via their own IIFEs and don't change body[data-route]. */
[data-view] { display: none !important; }
body[data-route="home"]        [data-view="home"]        { display: revert !important; }
body[data-route="rankings"]    [data-view="rankings"]    { display: revert !important; }
body[data-route="operations"]  [data-view="operations"]  { display: revert !important; }
body[data-route="injuries"]    [data-view="injuries"]    { display: revert !important; }
body[data-route="probables"]   [data-view="probables"]   { display: revert !important; }
body[data-route="twostart"]    [data-view="twostart"]    { display: revert !important; }
body[data-route="injurydb"]    [data-view="injurydb"]    { display: revert !important; }
body[data-route="trade"]       [data-view="trade"]       { display: revert !important; }
body[data-route="risers"]      [data-view="risers"]      { display: revert !important; }
body[data-route="fypd"]        [data-view="fypd"]        { display: revert !important; }
body[data-route="methodology"] [data-view="methodology"] { display: revert !important; }
body[data-route="methodology"] section.card               { display: none !important; }

/* Fantasy Prospect Rankings surface, independent overlay on top of the
   Research route. The IIFE sets body[data-fpr-active] when the URL matches
   #/research/prospects/fantasy; this rule hides the Research workspace and
   reveals the Fantasy Prospects section instead. */
body[data-fpr-active] .research-workspace.prospects-workspace { display: none !important; }
body[data-fpr-active] [data-view="fantasy-prospects"]         { display: revert !important; }

/* Prospect ranking surfaces moved under #/rankings/* (mirror Redraft/Dynasty),
   2026-05-29. Their workspaces still toggle via data-fpr-active / data-milb-active,
   but now run under route=rankings. Hide the redraft/dynasty card (the section.card
   that contains [data-view="rankings"]) and reveal the prospect workspace instead.
   The :has() guard is required because the prospect pages are themselves wrapped in
   section.card and must STAY visible. */
body[data-fpr-active]  section.card:has([data-view="rankings"]) { display: none !important; }
body[data-milb-active] section.card:has([data-view="rankings"]) { display: none !important; }
body[data-milb-active] [data-view="research"]                   { display: revert !important; }
/* The MiLB content is now a section.card; keep it visible inside the Research
   workspace too (the route=research card-hide rule further down would hide it). */
body[data-route="research"] [data-view="research"] section.card { display: revert !important; }
/* …but the legacy MiLB prospects SHELL shares data-view="research" with the whole
   Research workspace, so the route rule would reveal it on EVERY #/research/* route
   — flashing "Official MiLB Prospect Rankings" on cold-load of reports/tools before
   JS settles (the sub-page dispatcher races). Gate it to the MiLB route itself
   (data-milb-active, set by milbProspectsWorkspace for its own + landing routes).
   Timing-independent: hidden from first paint on every non-MiLB research route. */
body[data-route="research"]:not([data-milb-active]) .research-workspace.prospects-workspace { display: none !important; }

/* Studies surface, same overlay pattern. Active when the URL matches
   #/research/studies/<slug>. */
body[data-studies-active] .research-workspace.prospects-workspace { display: none !important; }
body[data-studies-active] [data-view="studies"]                   { display: revert !important; }

/* M-3: Research umbrella, the workspace section is always visible on
   #/research/*; module-specific content (prospects vs methodology) is
   toggled via the data-research-module attribute. */
body[data-route="research"] [data-view="research"]       { display: revert !important; }
/* `:not([hidden])` qualifier: the existing render() pipeline uses the
   HTML `hidden` attribute to control which inner panel is shown. We must
   respect it, otherwise multiple methodology sub-panels would appear
   simultaneously. */
body[data-route="research"][data-research-module="methodology"] [data-view="methodology"]:not([hidden]) { display: revert !important; }
body[data-route="research"][data-research-module="methodology"] [data-view="audit"]:not([hidden])      { display: revert !important; }
body[data-route="research"][data-research-module="methodology"] [data-view="health"]:not([hidden])     { display: revert !important; }
body[data-route="research"][data-research-module="methodology"] [data-view="explain"]:not([hidden])    { display: revert !important; }

/* Defensive: legacy direct routes (now silently canonicalized to Research). */
body[data-route="methodology"] [data-view="methodology"]:not([hidden]) { display: revert !important; }
body[data-route="audit"]       [data-view="audit"]:not([hidden])       { display: revert !important; }
body[data-route="health"]      [data-view="health"]:not([hidden])      { display: revert !important; }
body[data-route="explain"]     [data-view="explain"]:not([hidden])     { display: revert !important; }

/* ════════════════════════════════════════════════════════════
   SHARED PRIMITIVES (2026-05-27 polish pass)
   Three canonical base classes - `.chip`, `.surface`, `.empty-state`.
   Per-route variants (`.rf-chip`, `.fpr-chip`, `.injury-chip`, etc.)
   used to duplicate display/padding/font rules across ~29 chip class
   roots. New code SHOULD prefer these primitives + modifiers; the
   legacy classes co-exist for now and can be migrated incrementally.
   ════════════════════════════════════════════════════════════ */

/* ── .chip - single base for all chip variants ───────────────
   Legacy per-route chip classes (.rf-chip, .fpr-chip, .injury-chip,
   .edge-filter-chip, .fypd-chip) inherit the base via the selector
   list below. Their existing route-specific rules still override any
   property they redeclare (background, border-radius, etc.); this
   just establishes the canonical baseline so all chips share font,
   gap, transition, focus, and tabular-nums behavior. */
.chip,
.rf-chip,
.fpr-chip,
.injury-chip,
.edge-filter-chip,
.edge-chip,
.fypd-chip,
.ops-chip,
.stat-chip,
.hero-chip,
.lab-chip,
.freshness-chip,
.expl-wl-chip,
.expl-comp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  padding: var(--chip-pad);
  font-family: var(--font);
  font-size: var(--chip-fs);
  font-weight: var(--chip-fw);
  line-height: 1.2;
  letter-spacing: 0.04em;
  border-radius: var(--chip-radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* Filter chip - clickable; shows active state with ink fill. */
.chip--filter { cursor: pointer; }
.chip--filter:hover { background: var(--bg-soft); border-color: var(--hairline-strong); }
.chip--filter.is-active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.chip--filter.is-active .chip__count { color: var(--surface); opacity: 0.7; }
/* Stat chip - for inline metrics; numeric body with muted label. */
.chip--stat { background: transparent; border-color: var(--hairline-strong); }
/* Tone modifiers - semantic up/down/warn. */
.chip--pos  { background: var(--green-soft); color: var(--green); border-color: transparent; }
.chip--neg  { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.chip--warn { background: var(--gold-soft);  color: var(--gold);  border-color: transparent; }
/* Count badge that lives inside a chip. */
.chip__count {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 2px;
  letter-spacing: 0;
}

/* ── .surface - single base for all card variants ───────────
   Legacy per-route card classes (.rf-card, .fypd-card, .bento-card,
   .compare-page__card, .expl-card, .prospect-card) inherit the base
   via the selector list. Per-route overrides still win where redeclared
   (specific padding, custom border-left accents, etc.); this just gives
   every card the canonical surface tokens as a baseline. */
.surface,
.rf-card,
.fypd-card,
.bento-card,
.compare-page__card,
.expl-card,
.prospect-card {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  color: var(--text);
}
.surface--soft  { background: var(--surface-soft); }
.surface--elev  { background: var(--surface-elev); box-shadow: var(--shadow-3); }
.surface--bare  { padding: 0; }
.surface--compact { padding: var(--space-3); }

/* ── .surface--hoverable - interactive card lift ─────────────
   Editorial: minimal lift (1-2px), warm shadow growth, ink-tinted
   border on hover. Pair with `cursor: pointer` for clickable cards. */
.surface--hoverable,
.rf-card--clickable,
.prospect-card[href],
.fypd-card[href] {
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.surface--hoverable:hover,
.rf-card--clickable:hover,
.prospect-card[href]:hover,
.fypd-card[href]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--hairline-strong);
}
.surface--hoverable:active,
.rf-card--clickable:active {
  transform: translateY(0);
  box-shadow: var(--card-shadow);
}

/* ── .skeleton - loading placeholder utility ─────────────────
   Subtle ivory shimmer for content not yet loaded. Pair with semantic
   sizing classes (.skeleton--line, --card, --text, --avatar). Respects
   prefers-reduced-motion via the global rule above. */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--bg-soft) 0%,
    var(--surface-soft) 50%,
    var(--bg-soft) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-pill);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.skeleton--line   { height: 12px; width: 100%; }
.skeleton--text   { height: var(--t-body); width: 80%; }
.skeleton--title  { height: var(--t-2xl); width: 60%; border-radius: 2px; }
.skeleton--avatar { width: 36px; height: 36px; border-radius: 50%; }
.skeleton--card   {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: var(--card-radius);
}
.skeleton-stack { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── .empty-state - single base for "no data" panels ─────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
  background: var(--surface-soft);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--card-radius);
  color: var(--text-3);
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.empty-state__sub {
  font-size: var(--t-sm);
  color: var(--text-2);
  max-width: 52ch;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   BASE HEADING SCALE (2026-05-27 round 2)
   Same <h3> used to render 18px on compare vs 32px on study -
   no base rule existed. These defaults give every heading a
   consistent rendering before any route-specific override.
   Route overrides (e.g. `.compare-page__card h2`) still win;
   this just establishes the baseline.
   ════════════════════════════════════════════════════════════ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h4, .h4 {
  font-family: var(--font);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h5, .h5 {
  font-family: var(--font);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-2);
}
h6, .h6 {
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* Eyebrow - canonical pre-heading tag (uppercase, tracked, mono-like).
   Three variants of this used to ship - .eyebrow, .study__breadcrumb,
   .injury-filterbar__label - all at slightly different sizes/tracking.
   This is the single source of truth; route-specific eyebrows can
   extend by overriding color only. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════
   SEMANTIC NUMBER CLASSES (2026-05-27 round 2)
   Single-source-of-truth for colored numeric text - replaces the
   ~850 hard-coded color hexes inline in app.js (#1a8754, #c8801c,
   #c00, #1a6fb8 etc.). Each carries tabular-nums + the canonical
   editorial color token for that semantic direction.
   ════════════════════════════════════════════════════════════ */
.num,
.num-pos, .num-neg, .num-warn, .num-cool,
.num-strong, .num-muted {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
  font-weight: 600;
}
.num-pos    { color: var(--green); }       /* +Δ, up, improving, gain */
.num-neg    { color: var(--red); }         /* -Δ, down, declining, loss */
.num-warn   { color: var(--gold); }        /* caution, neutral-warn */
.num-cool   { color: #4a73b0; }            /* cool/info accent (matches --pos-ss) */
.num-strong { color: var(--ink); font-weight: 700; }
.num-muted  { color: var(--text-3); font-weight: 500; }

/* Soft-fill variants for chip/badge contexts (background tint + color). */
.num-pos--fill { color: var(--green); background: var(--green-soft); padding: 1px 6px; border-radius: var(--r-pill); }
.num-neg--fill { color: var(--red);   background: var(--red-soft);   padding: 1px 6px; border-radius: var(--r-pill); }
.num-warn--fill{ color: var(--gold);  background: var(--gold-soft);  padding: 1px 6px; border-radius: var(--r-pill); }

/* ════════════════════════════════════════════════════════════
   FILTERBAR PRIMITIVE (2026-05-27 round 2)
   Rankings, Risers, Injuries, FYPD, Edge each reinvented this
   row. Shared layout: chips on the left, sort control on the
   right, with a subtle hairline below. Route-specific filterbars
   can adopt by adding .filterbar + their existing class.
   ════════════════════════════════════════════════════════════ */
.filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
}
.filterbar__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filterbar__sep {
  flex: 1 1 auto;
}
.filterbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.filterbar__sort label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 10px;
}
.filterbar__sort select {
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--t-sm);
  padding: 4px 8px;
  border-radius: 0;
  font-family: var(--font);
}

/* ════════════════════════════════════════════════════════════
   GLOBAL INTERACTION POLISH (2026-05-27 round 2)
   Selection color, focus ring, scrollbar - small but high-leverage.
   ════════════════════════════════════════════════════════════ */

/* Selection - editorial brand red on warm ivory background. */
::selection {
  background: rgba(178, 52, 21, 0.20);
  color: var(--ink);
}
::-moz-selection {
  background: rgba(178, 52, 21, 0.20);
  color: var(--ink);
}

/* Focus ring - single source of truth via :focus-visible (no ring on
   mouse-click, only keyboard nav). Uses --shadow-focus token so all
   focus rings stay in sync with the brand. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Inputs and buttons get a soft glow instead of an outline (less jarring). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
.chip--filter:focus-visible,
.layer1-rail__item:focus-visible,
.player-search__input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Scrollbar - thin, warm, editorial. Both WebKit and Firefox. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY MEDIA QUERIES (2026-05-27 round 2)
   prefers-reduced-motion, prefers-contrast, print.
   ════════════════════════════════════════════════════════════ */

/* Reduced-motion: kill transitions and animations the moment the user
   asks for it. Caught here at the top level so route-specific easing
   doesn't override. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast: drop translucency, strengthen hairlines, force solid
   surfaces. Helps low-vision users and matches Forced Colors mode. */
@media (prefers-contrast: more) {
  :root {
    --hairline: rgba(15, 14, 12, 0.30);
    --hairline-strong: rgba(15, 14, 12, 0.55);
    --text-3: #5a5650;          /* lift muted text to body-2 contrast */
    --text-4: #6a6660;
  }
  .site-nav {
    background: var(--bg) !important;
    backdrop-filter: none !important;
  }
}

/* Print: hide chrome (nav, overlays, scrollbars), full-width content,
   deep-ink text on white. Mirrors editorial newspaper printability. */
@media print {
  .site-nav,
  .explainer-page,
  .edge-page,
  .draft-page,
  .player-profile-modal,
  .compare-tray,
  .player-search,
  .layer1-rail,
  .layer1-rail__items--horizontal,
  [data-no-print],
  body::before,
  body::after {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000 !important;
    overflow: visible !important;
  }
  .page, .explainer-shell, main {
    max-width: none !important;
    padding: 0 !important;
  }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="#/"]::after { content: ""; }
  /* Avoid orphan headings */
  h1, h2, h3, h4 { page-break-after: avoid; }
  table, .surface, .rf-card { page-break-inside: avoid; }
}

/* Legacy card visibility per route */
body[data-route="home"]       section.card { display: none !important; }
body[data-route="operations"] section.card { display: none !important; }
body[data-route="research"]   section.card { display: none !important; }
/* On Research/methodology sub-module, the legacy card holds the methodology
   panels and must be visible. Hide the Research workspace's main content
   so the methodology panel takes the page; the sidebar still shows. */
body[data-route="research"][data-research-module="methodology"] section.card { display: revert !important; }
body[data-route="research"][data-research-module="methodology"] .prospects-main { display: none !important; }

/* M-3: Research workspace uses the existing prospects-workspace grid */
body[data-route="research"] .research-workspace {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 0;
}
@media (max-width: 900px) {
  body[data-route="research"] .research-workspace {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Operations workspace uses the same grid as Prospects. */
body[data-route="operations"] .ops-workspace {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 0;
}
@media (max-width: 900px) {
  body[data-route="operations"] .ops-workspace {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* FYPD workspace, single-column rich board (no sidebar). The legacy
   220px sidebar grid produced a 220px-wide header and a cramped body
   because the FYPD workspace has no actual sidebar element. */
body[data-route="fypd"] section.card { display: none !important; }
body[data-route="fypd"] .fypd-workspace {
  display: block !important;
  margin-top: 0;
}

/* ── Rankings workspace density refinement ──────────────────────────
   The Rankings page (the deep research workspace) should land the user
   on the table faster. The default `.page { gap: 56px }` is correct for
   the cinematic home view (hero + signals) but creates 168px of
   cumulative whitespace between Configure → toolbar → card on Rankings.
   Tightening to 22px (× 3 gaps = 66px) saves ~100px of vertical scroll
   while keeping clear visual separation between groups. Card-internal
   spacing is trimmed proportionally. Other routes (methodology, audit,
   etc.) keep the default for their reading-oriented layouts.
   Owner update: settings consolidated to a single Configure-League + Sort-by
   line (the separate sticky toolbar was removed), so there is now ONE gap
   (settings → card) instead of three — tightened to 14px. */
body[data-route="rankings"] .page { gap: 14px; }
body[data-route="rankings"] .card-header[data-view="rankings"] {
  padding-top: 14px;
  padding-bottom: 14px;
}
body[data-route="rankings"] .pos-tabs {
  margin-top: 12px;
  margin-bottom: 10px;
}

/* ── Home page polish ───────────────────────────────────────────────
   The rankings card wrapper has no `data-view` (so it can host inner
   panels for rankings/methodology/injuries/trade/audit/health/explain
   routes). On home, all its inner panels are hidden by the route system,
   but the wrapper itself + the `#loadingState` status text inside it
   would otherwise render as an empty shell with a "Ready (2026)" line.
   Hide the entire card on home so the page ends cleanly after Today's
   Signals. The card returns automatically on any non-home route. */
body[data-route="home"] section.card { display: none !important; }

/* Subtle ambient color bloom, single-color, very faint */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(900px 700px at 50% -100px, rgba(239,68,68,.04), transparent 65%);
}

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-deep); }
::selection { background: var(--brand-tint); color: var(--ink); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.10);
  border-radius: var(--r-8);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.20); border: 2px solid transparent; background-clip: padding-box; }

/* ════════════════════════════════════════════════════════
   TOP NAV
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   LAYER 1, Global workspace navigation (HORIZONTAL, top bar)
   The workspace items live INSIDE the .site-nav top bar. No vertical
   rail; no mobile drawer (the top bar is naturally responsive).
   Visual posture: institutional, calm, horizontal pills, no gradients.
   ════════════════════════════════════════════════════════════════════ */
.layer1-rail__items--horizontal {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  margin-left: 28px;
  flex-direction: row;     /* override any prior vertical stacking */
}
/* Hidden bits no longer needed when rail is horizontal. The mobile-trigger
   button and scrim live in DOM only as no-op fallbacks now (HTML removed
   the actual elements; rules kept as defensive `display: none` in case
   any cached HTML references them). */
.layer1-rail__mobile-trigger,
.layer1-rail__scrim { display: none !important; }
/* Old vertical rail wrapper, brand, and brand-mark, fully retired */
.layer1-rail,
.layer1-rail__brand,
.layer1-rail__brand-mark { display: none !important; }

.layer1-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-6);
  text-decoration: none;
  color: var(--text-2, #6b6b6b);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-left: none;
  background: transparent;
  transition: color 120ms ease, background-color 120ms ease;
  position: relative;
}
.layer1-rail__item:hover {
  color: var(--ink, #0b1120);
  background: rgba(15, 23, 42, 0.04);
}
.layer1-rail__item.active {
  /* Active workspace: red bottom-border accent + bold text + subtle bg */
  color: var(--ink, #0b1120);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
}
.layer1-rail__item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 8px;
  right: 8px;
  height: 2.5px;
  background: #ffffff;
  border-radius: 2px;
}
.layer1-rail__item .layer1-rail__icon { display: none; }
.layer1-rail__item .layer1-rail__label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.layer1-rail__item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Reset the body / overlay padding that the vertical rail required. */
body { padding-left: 0; }
/* 2026-05-29: fixed nav is out of flow - pad body down by nav height
   so in-flow route content doesn't slide under the nav. Overlay
   routes (.explainer-page etc.) use position:fixed and ignore this. */
body { padding-top: var(--nav-h); }
.explainer-page,
.edge-page,
.draft-page { padding-left: 0; }

/* At <720px, the horizontal nav items shrink (no padding loss; just tighter
   gaps + smaller font). They remain inline rather than collapsing to a
   drawer, preserving full route reachability per capability-preservation. */
@media (max-width: 720px) {
  .layer1-rail__items--horizontal {
    gap: 0;
    margin-left: 8px;
  }
  .layer1-rail__item {
    padding: 6px 8px;
    font-size: 12px;
  }
}

.site-nav {
  /* 2026-05-29: position FIXED (not sticky) so the nav is absolutely
     anchored - it cannot scroll or drift on any route, including the
     player profile. sticky scrolled with the page until hitting top:0,
     which read as "moveable." Re-applied after a background makeover
     process reverted it. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Top-nav stacking: must sit ABOVE every full-page overlay route
     (.explainer-page, .edge-page, .draft-page - all z-index: var(--z-flyout)) so
     the search dropdown's z=10000 (scoped to .player-search's stacking
     context inside .site-nav) actually renders over the active route.
     Previously z=100 - caused the search dropdown to silently hide
     behind the explainer when typing while on a player profile.
     2000 leaves room for ephemeral modals/toasts at 1501-1999. */
  z-index: 2000;
  height: var(--nav-h);
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
/* Defensive: when an overlay route sets body.explainer-active (or any
   other overlay-active class) and pins body to overflow:hidden, the
   sticky nav must remain interactive. Explicit pointer-events:auto in
   case any future overlay rule disables them at the body level. */
body.explainer-active .site-nav,
body.explainer-active .site-nav * {
  pointer-events: auto;
}
.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 0;
}

.site-nav__logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; margin-right: 40px;
}
.site-nav__logo-mark {
  /* managr: transparent background, the headset SVG IS the mark */
  width: 30px; height: 30px;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  box-shadow: none;
}
.site-nav__logo-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* managr: the "r" rendered in red (no longer a gradient text clip) */
.site-nav__logo-name span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #d62828;
}

.site-nav__links {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.site-nav__link {
  padding: 8px 14px;
  border-radius: var(--r-8);
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.site-nav__link:hover { color: var(--ink); background: rgba(15,23,42,.04); }
.site-nav__link.active { color: var(--ink); font-weight: 600; }
.site-nav__link.active::after {
  content: ''; display: inline-block; width: 4px; height: 4px;
  background: var(--brand); border-radius: 50%; margin-left: 2px;
}
.site-nav__link--soon { opacity: .55; pointer-events: none; }
.site-nav__badge {
  padding: 2px 7px;
  background: rgba(15,23,42,.06);
  color: var(--text-3);
  font-size: 9.5px; letter-spacing: .04em; font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.site-nav__right { display: flex; align-items: center; gap: 16px; }
.nav-status {
  /* Hidden per brand direction, the "Data updated … · N players (union)"
     metadata is no longer surfaced in the top nav. The element is retained
     in HTML so the existing _setText calls (dataMeta, playerCount) continue
     to write to it silently without breaking JS. */
  display: none !important;
}
.nav-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(5,150,105,.5);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,.4); }
  50%     { box-shadow: 0 0 0 7px rgba(5,150,105,0); }
}
.site-nav__action {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  background: var(--ink);
  color: white !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.site-nav__action:hover {
  transform: translateY(-1px);
  background: var(--ink-2);
  color: white;
}

/* ════════════════════════════════════════════════════════
   PAGE
   ════════════════════════════════════════════════════════ */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 100px;
  display: flex; flex-direction: column;
  gap: 56px;
}

/* ════════════════════════════════════════════════════════
   1. CINEMATIC HERO (Apple-style)
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   managr homepage hero, Cinema-Dark refinement (per ui-ux-pro-max skill)
   Composition layers (z-order, bottom → top):
     1. Base linear gradient, refined dark stack (#020203 → #0a0a0c → #050506)
        NO pure black (OLED smear risk per Modern-Dark style guidance)
     2. Ambient light "blob", soft off-white glow upper-left (stadium light)
     3. Ambient light "blob", subtle red glow bottom-right (brand-tied)
     4. Radial vignette (perimeter darkening for focal contrast)
     5. SVG scouting grid + chalk corner brackets (existing ::before)
     6. SVG film grain (existing ::after)
     7. Hero content
   No motion, static composition per institutional brand direction.
   ════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  /* Extra top padding so the "Live · 2026 season" chip clears the sticky
     nav with a clear breath of space; was 96px (visually flush). */
  padding: 144px 0 32px;
  text-align: center;
  isolation: isolate;
  background:
    /* Warm cream wash upper-left */
    radial-gradient(circle 980px at 12% 22%,
      rgba(255, 235, 215, 0.50),
      transparent 62%),
    /* Faint brand-red wisp upper-right (single chromatic accent) */
    radial-gradient(circle 780px at 88% 18%,
      rgba(239, 68, 68, 0.06),
      transparent 60%),
    /* Pale warm rose blob bottom-right */
    radial-gradient(circle 720px at 84% 84%,
      rgba(245, 230, 230, 0.45),
      transparent 60%),
    /* Diffused central glow */
    radial-gradient(ellipse 60% 50% at 50% 42%,
      rgba(255, 255, 255, 0.6),
      transparent 70%),
    /* Soft outer vignette */
    radial-gradient(ellipse 95% 75% at 50% 45%,
      transparent 0%,
      rgba(11, 17, 32, 0.03) 78%,
      rgba(11, 17, 32, 0.07) 100%),
    /* Base, warm neutral white (no cool tint) */
    linear-gradient(180deg,
      #ffffff 0%,
      #fafaf8 50%,
      #ffffff 100%);
  color: #0b1120;
}
/* Layer 3: scouting grid + chalk corners (SVG pattern overlay)
  , 24px grid in graphite tone at very low opacity (institutional, not designer-y)
  , corner brackets at viewport extremes suggesting foul-line geometry */
/* ::before, INSANE BASEBALL EDIT composition layer.
   All original procedural SVG (no copyrighted assets):
     • Dramatic V-shaped foul lines erupting from home plate at center-bottom
     • 3x3 strike-zone grid floating upper-center
     • Diamond outline (rotated 45° square) anchoring the composition
     • Sweeping seam-arc lines on right side (baseball-stitch macro)
     • Pitch trajectory dotted curve (left → right)
     • Sharp white stadium-light pillars beaming from top
   Layered as a single SVG data URI (1600x900 viewBox). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'>\
<defs>\
<linearGradient id='lp' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%230b1120' stop-opacity='0.16'/>\
<stop offset='1' stop-color='%230b1120' stop-opacity='0'/>\
</linearGradient>\
<linearGradient id='vBeam' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%230b1120' stop-opacity='0.10'/>\
<stop offset='1' stop-color='%230b1120' stop-opacity='0'/>\
</linearGradient>\
</defs>\
<polygon points='0,0 240,0 110,260 0,180' fill='url(%23lp)'/>\
<polygon points='1600,0 1360,0 1490,260 1600,180' fill='url(%23lp)'/>\
<polygon points='760,0 840,0 815,420 785,420' fill='url(%23vBeam)'/>\
<polygon points='400,0 460,0 440,360 420,360' fill='url(%23vBeam)' opacity='0.6'/>\
<polygon points='1140,0 1200,0 1180,360 1160,360' fill='url(%23vBeam)' opacity='0.6'/>\
<path d='M 800 900 L 60 -100 M 800 900 L 1540 -100' stroke='%230b1120' stroke-width='1.5' opacity='0.16' fill='none' stroke-dasharray='8,12'/>\
<path d='M 800 900 L 200 -100 M 800 900 L 1400 -100' stroke='%230b1120' stroke-width='1' opacity='0.10' fill='none'/>\
<g transform='translate(800,420) rotate(45)' opacity='0.22'>\
<rect x='-240' y='-240' width='480' height='480' fill='none' stroke='%230b1120' stroke-width='1.5'/>\
<rect x='-160' y='-160' width='320' height='320' fill='none' stroke='%230b1120' stroke-width='0.75'/>\
</g>\
<g transform='translate(800,340)' opacity='0.18' stroke='%230b1120' fill='none' stroke-width='1'>\
<rect x='-150' y='-130' width='300' height='260'/>\
<line x1='-50' y1='-130' x2='-50' y2='130'/>\
<line x1='50' y1='-130' x2='50' y2='130'/>\
<line x1='-150' y1='-43' x2='150' y2='-43'/>\
<line x1='-150' y1='43' x2='150' y2='43'/>\
</g>\
<g opacity='0.30' stroke='%230b1120' fill='none' stroke-width='2'>\
<path d='M 1200 200 Q 1500 400, 1380 700'/>\
<path d='M 1240 220 Q 1530 410, 1410 700' stroke-dasharray='6,8'/>\
<path d='M 1280 240 Q 1560 420, 1440 700' stroke-width='1'/>\
</g>\
<g opacity='0.18' stroke='%230b1120' fill='none' stroke-width='1.5' stroke-dasharray='4,6'>\
<path d='M 100 700 Q 800 100, 1500 700'/>\
</g>\
<g fill='%230b1120' opacity='0.10'>\
<circle cx='100' cy='100' r='2'/>\
<circle cx='1500' cy='130' r='2'/>\
<circle cx='200' cy='800' r='2'/>\
<circle cx='1400' cy='820' r='2'/>\
<circle cx='800' cy='80' r='2'/>\
</g>\
</svg>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Softened on the new light bg, overlay graphics whisper, not shout */
  opacity: 0.55;
}
/* ::after, very faint film grain (editorial paper texture per soft-skill
   "Editorial Luxury") + slow ambient luminance pulse behind the wordmark. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Soft luminance lift, subtle warm halo behind the title */
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 240, 220, 0.18), transparent 65%),
    /* Editorial paper grain, very subtle on light bg */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 220px 220px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
  animation: heroPulse 16s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; opacity: 0.85; }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 17, 32, 0.10);
  border-radius: var(--r-pill);
  box-shadow: none;
  font-size: 11.5px; font-weight: 600; color: rgba(11, 17, 32, 0.72);
  letter-spacing: 0;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}
.hero__title {
  /* Calistoga display serif, warm editorial premium feel against the
     cinema-dark hero. Single weight (regular). The serif's organic curves
     give the wordmark a broadcast-graphic personality vs. utility-Inter. */
  font-family: var(--font-hero);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: 400;        /* Calistoga has only regular weight */
  letter-spacing: -0.025em; /* serif kerning needs less squeeze than Inter */
  line-height: .92;
  color: #0b1120;
  margin-bottom: 22px;
  /* Prevent orphans on the wordmark wrap (mobile) */
  text-wrap: balance;
  /* Doubled-layer luminance halo: deep shadow base + soft white bloom.
     Reads as broadcast-graphic depth without adding chrome. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  /* Crisper glyph edges on dark backgrounds */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hero__title .gradient {
  /* managr: brand-red "r" on the white hero, single brand accent.
     Subtle red glow halo for editorial-poster impact. */
  color: #ef4444;
  background: none !important;
  -webkit-text-fill-color: #ef4444 !important;
  text-shadow:
    0 0 22px rgba(239, 68, 68, 0.28),
    0 0 60px rgba(239, 68, 68, 0.12);
}
.hero__tagline {
  max-width: 620px;
  margin: 0 auto 44px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;          /* per ui-ux-pro-max §6 typography (1.5-1.75 body) */
  /* Muted institutional gray, readable but quiet (per cinema-dark --foreground-muted) */
  color: #586478;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.hero__ctas {
  display: inline-flex; gap: 10px;
  margin-bottom: 72px;
}
.hero__cta {
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* Expo.out easing per cinema-dark recommendation: cubic-bezier(0.16,1,0.3,1) */
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex; align-items: center; gap: 8px;
  border: none;
}
.hero__cta--primary {
  /* Primary action: dark pill on light hero. Soft diffused multi-layer
     shadow per soft-skill Soft Structuralism elevation. */
  background: #0b1120;
  color: #ffffff;
  /* Tighter inner padding to make room for the nested arrow circle */
  padding-right: 7px;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(11, 17, 32, 0.08),
    0 6px 14px -4px rgba(11, 17, 32, 0.18),
    0 16px 36px -10px rgba(11, 17, 32, 0.14);
}
.hero__cta--primary:hover {
  background: #1a2236;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 4px rgba(11, 17, 32, 0.10),
    0 10px 22px -4px rgba(11, 17, 32, 0.22),
    0 28px 52px -14px rgba(11, 17, 32, 0.20);
}
/* Pressed feedback (redesign-skill: physical click cue) */
.hero__cta--primary:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}
.hero__cta--ghost {
  /* Hairline outline pill on the light hero */
  background: rgba(255, 255, 255, 0.7);
  color: #2c374e;
  border: 1px solid rgba(11, 17, 32, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(11, 17, 32, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__cta--ghost:hover {
  background: #ffffff;
  color: #0b1120;
  transform: translateY(-1px);
  border-color: rgba(11, 17, 32, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 6px rgba(11, 17, 32, 0.06);
}
.hero__cta--ghost:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}

/* Legacy hero stat tiles (kept hidden for compatibility) */
.hero__stats { display: none; }
/* NOTE: The `.hero-stat`/`.hero-stat__value`/`.hero-stat__label` classes were
   previously hidden here as a legacy cleanup, but the new player-profile hero
   reuses those exact class names for its quick-stat strip. Don't blanket-hide
   them or the strip collapses to 0px. The new rules live at line ~9354. */

/* ════════════════════════════════════════════════════════
   EDITORIAL SIGNAL SPOTLIGHT
   ════════════════════════════════════════════════════════ */
.signal-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: 36px 40px 32px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  animation: feature-rise var(--t-slow) var(--ease) both;
}
.signal-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 4px;
  background: var(--brand);
  opacity: .82;
}
.signal-feature__main {
  display: flex; flex-direction: column; gap: 12px;
}
.signal-feature__eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.signal-feature__player {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.038em;
  line-height: 1.02;
  margin: 0;
}
.signal-feature__meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
  letter-spacing: -0.005em;
}
.signal-feature__thesis {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 540px;
}
.signal-feature__cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px !important;
  background: var(--ink) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) !important;
  box-shadow: 0 4px 12px rgba(11,17,32,.10) !important;
}
.signal-feature__cta:hover { background: var(--ink-2) !important; transform: translateY(-1px); color: white !important; }

.signal-feature__metrics {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

/* Reusable metric tile primitive */
.metric-tile {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
  min-height: 78px;
}
.metric-tile__value {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.metric-tile__label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  .signal-feature { grid-template-columns: 1fr; padding: 28px 26px; }
  .signal-feature__metrics { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════
   SECTION HEADER (used above each major block)
   ════════════════════════════════════════════════════════ */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.section-head__sub {
  font-size: 14px; color: var(--text-2);
  margin-top: 8px;
  letter-spacing: -0.01em;
  max-width: 540px;
}
.section-head__action { display: flex; gap: 10px; align-items: center; }

/* ════════════════════════════════════════════════════════
   2. INSIGHTS DASHBOARD (4-up)
   ════════════════════════════════════════════════════════ */
.insights {
  display: grid;
  /* 5 visible cards: featured spans 2, four supporting span 1 each →
     2+1+1+1+1 = 6 cols, all fits cleanly in one row at desktop width.
     No trailing empty slots in row 2. */
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}
.insight {
  animation: card-rise var(--t-slow) var(--ease) both;
}
.insights .insight:nth-child(1) { animation-delay: 0ms; }
.insights .insight:nth-child(2) { animation-delay: 40ms; }
.insights .insight:nth-child(3) { animation-delay: 80ms; }
.insights .insight:nth-child(4) { animation-delay: 120ms; }
.insights .insight:nth-child(5) { animation-delay: 160ms; }
.insight--featured {
  grid-column: span 2;
  grid-row: span 1;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-tinted) 100%);
}
.insight--featured .insight__player {
  font-size: 22px;
  letter-spacing: -0.028em;
}
.insight--featured .insight__metric-value {
  font-size: 44px;
  letter-spacing: -0.045em;
}
.insight--featured .insight__sparkline span { opacity: .35; }

@keyframes feature-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes row-rise {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive, drop column count, keep featured prominence */
@media (max-width: 1200px) {
  /* Featured(2) + 1 + 1 + 1 = 5 cards in 5-col still tight, repack to 3-col
     featured(2)+1 row 1, 3 row 2, symmetrical, no empty slots. */
  .insights { grid-template-columns: repeat(3, 1fr); }
  .insight--featured { grid-column: span 2; }
}
@media (max-width: 900px) {
  /* featured(2) row 1, 2+2 supporting rows */
  .insights { grid-template-columns: repeat(2, 1fr); }
  .insight--featured { grid-column: span 2; }
}
@media (max-width: 600px) {
  .insights { grid-template-columns: 1fr; }
  .insight--featured { grid-column: 1 / -1; }
}
/* HTML hidden attribute must win over the .insight display rule below.
   Without this, compatibility-shim cards (safestPick, marketEdge,
   mostVolatile) render as blank tiles in row 2 of the grid. */
.insight[hidden] { display: none !important; }
.insight {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  gap: 12px;
  cursor: default;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.insight:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.insight__header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}
.insight__badge {
  font-size: 9.5px; font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0;
  text-transform: uppercase;
}
.insight__badge--gold  { background: var(--gold-soft); color: var(--gold); }
.insight__badge--green { background: var(--green-soft); color: var(--green); }
.insight__badge--blue  { background: var(--blue-soft); color: var(--blue); }
.insight__badge--red   { background: var(--red-soft); color: var(--red); }
.insight__player {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.insight__metric {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: -4px;
}
.insight__metric-value {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.insight__metric-unit {
  font-size: 12px; color: var(--text-3); font-weight: 500;
  letter-spacing: -0.005em;
}
.insight__sparkline {
  height: 24px; display: flex; align-items: end; gap: 3px;
}
.insight__sparkline span {
  flex: 1;
  background: var(--brand);
  opacity: .25;
  border-radius: 2px;
  min-height: 4px;
  transition: opacity var(--t-base);
}
.insight:hover .insight__sparkline span { opacity: .5; }
.insight--empty .insight__player { color: var(--text-3); font-weight: 500; }

/* ════════════════════════════════════════════════════════
   CONTROL CENTER (settings + scoring)
   White card with horizontal grouped sub-sections
   ════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   CONFIGURE-LEAGUE PILL (collapsed control center trigger)
   ════════════════════════════════════════════════════════ */
.config-bar {
  display: flex; justify-content: center;
}
.config-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-1) !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.config-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-2) !important; }
.config-pill__icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border-radius: 50%;
  font-size: 12px;
}
.config-pill__summary { color: var(--text-2); font-weight: 500; }
.config-pill__chevron {
  font-size: 10px; color: var(--text-3);
  transition: transform var(--t-base);
}
.config-pill.is-open .config-pill__chevron { transform: rotate(180deg); }

/* Collapse via grid-template-rows: 0fr → 1fr instead of a fixed max-height.
   The old max-height cap had to be hand-tuned above the tallest panel state,
   so adding any section (e.g. the category picker, 2026-06-10) could silently
   re-clip the bottom (the Games Played Limits). 0fr→1fr animates to the
   content's NATURAL height, so the panel can never clip regardless of how much
   content it holds — no magic number to maintain. The single child
   (.control-center) carries overflow:hidden + min-height:0 so the row collapse
   reads correctly; margin-top moves onto the child so it animates with the row
   rather than reserving space while closed. */
/* Collapse via max-height. The open cap is animation-only — once the panel is
   open we ALSO clear the cap (see .is-open after the transition note) so the
   panel can never clip no matter how much content it holds. The closed state
   keeps max-height:0 for the slide-up animation. */
.config-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease);
  margin-top: 0;
}
.config-panel.is-open {
  /* Large enough to cover the animation for any realistic panel height; the
     JS open handler additionally drops the cap to `none` after the transition
     so taller content (added sections) is never clipped. Headroom here (~2×
     current ~3060px content) is the safety net if that JS path is absent. */
  max-height: 6000px;
  margin-top: 16px;
}
/* Belt-and-suspenders: when the panel finishes opening it gets
   data-fully-open="1" (set by the config-pill handler on transitionend), which
   removes the cap entirely so nothing can ever be clipped. CSS-only fallback
   keeps the 6000px cap if that attribute is never set. */
.config-panel.is-open[data-fully-open="1"] {
  max-height: none;
  overflow: visible;
}

.control-center {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.control-center__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  padding: 32px 36px;
  border-bottom: 1px solid var(--hairline);
}
.control-center__row:last-child { border-bottom: none; }
.control-center__row-head { padding-right: 24px; }
.control-center__row-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  margin-bottom: 6px;
}
.control-center__row-sub {
  font-size: 13px; color: var(--text-3);
  letter-spacing: -0.005em;
  line-height: 1.5;
  max-width: 220px;
}
.control-center__row-body { display: flex; flex-direction: column; gap: 16px; }

/* ──────────────────────────────────────────────────────────────────────
   Roster construction editor, full per-position table inside the
   Configure League panel. Allows editing starters + max for every slot
   (Yahoo-style). Lives in the rankings page config drawer.
   ────────────────────────────────────────────────────────────────────── */
.roster-config {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roster-config__head { display: flex; flex-direction: column; gap: 4px; }
.roster-config__title {
  margin: 0;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.roster-config__help {
  margin: 0;
  font-size: 12px; color: var(--text-3);
  line-height: 1.55;
  max-width: 720px;
}

/* Summary band, 4 stat cards with live counts */
.roster-config__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .roster-config__summary { grid-template-columns: repeat(2, 1fr); } }
.roster-summary-item {
  background: var(--bg-2, #f5f4ef);
  border: 1px solid var(--hairline);
  border-radius: var(--r-8);
  padding: 10px 14px;
}
.roster-summary-item__label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.roster-summary-item__value {
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Position table */
.roster-config__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.roster-config__table thead th {
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 17, 32, 0.02);
}
.roster-config__table thead th.rc-num { text-align: right; }
.roster-config__table tbody tr { border-bottom: 1px solid rgba(11, 17, 32, 0.04); }
.roster-config__table tbody tr:last-child { border-bottom: none; }
.roster-config__table tbody tr:hover { background: rgba(11, 17, 32, 0.015); }
.roster-config__table tbody td { padding: 8px 12px; vertical-align: middle; }
.roster-config__table td.rc-num { text-align: right; }
.roster-config__table tbody tr.is-flex { background: rgba(239, 68, 68, 0.02); }

.rc-pos {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.rc-pos-code {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-3);
  margin-left: 6px;
  text-transform: uppercase;
}
.rc-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  font: inherit; font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  color: var(--ink);
}
.rc-input:focus { outline: 1px solid var(--accent, #ef4444); border-color: var(--accent, #ef4444); }
.rc-na { color: var(--text-3); font-size: 12px; font-style: italic; }
.rc-nolimit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px; color: var(--text-3);
  cursor: pointer;
  user-select: none;
  margin-left: 8px;
}
.rc-nolimit-toggle input { width: 12px; height: 12px; cursor: pointer; }

/* Weekly limits */
.roster-config__limits {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--bg-2, #f5f4ef);
  border-radius: var(--r-8);
  border: 1px solid var(--hairline);
}
.roster-config__sub {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.rc-limit-row { display: flex; align-items: center; gap: 12px; }
.rc-limit-row__label {
  min-width: 110px;
  font-size: 13px; color: var(--ink); font-weight: 600;
}
.rc-limit-row__input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  font: inherit; font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rc-limit-row__hint { font-size: 11px; color: var(--text-3); font-style: italic; }

/* Custom field, replaces native select/input look */
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field__label {
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.field__inner {
  position: relative;
}
.field__inner select,
.field__inner input,
input[type="text"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
}
.field__inner select,
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235a6883' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.field__inner input:hover,
.field__inner select:hover,
input:hover, select:hover {
  background: var(--bg-tinted);
}
.field__inner input:focus,
.field__inner select:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

/* Field grid (responsive horizontal layout) */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 14px;
}

/* Pill bar, replaces a select with horizontal segmented control */
.pill-bar {
  display: inline-flex;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  position: relative;
}
.pill-bar__opt {
  appearance: none; border: none; background: transparent;
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  font-family: inherit;
  letter-spacing: -0.01em;
}
.pill-bar__opt:hover { color: var(--ink); }
.pill-bar__opt.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ════════════════════════════════════════════════════════
   SCORING SECTION
   ════════════════════════════════════════════════════════ */
.scoring-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.scoring-card {
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  padding: 22px 24px;
}
.scoring-card__title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  color: var(--text-3);
}
.scoring-card__title::before { content: none; }
.scoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 10px;
}
.scoring-field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--shadow-1);
}
.scoring-field:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.scoring-field__label {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.scoring-field__input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2;
}
.scoring-field__input:focus { box-shadow: none !important; background: transparent !important; }
.scoring-field--negative .scoring-field__input { color: var(--red) !important; }

/* Scoring preset bar */
.scoring-presets {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}
.scoring-presets__label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════
   STICKY FILTER TOOLBAR (above table)
   ════════════════════════════════════════════════════════ */
.toolbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(247,248,250,.84);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  margin: 0 calc(-1 * var(--gutter));
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.toolbar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.toolbar__search {
  position: relative;
  flex: 1; min-width: 220px; max-width: 320px;
}
.toolbar__search::before {
  content: '⌕';
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px; color: var(--text-3);
  font-weight: 600;
}
.toolbar__search input {
  padding-left: 36px;
  background: var(--surface);
  border-radius: var(--r-pill);
  border: none;
  box-shadow: var(--shadow-1);
}
.toolbar__divider {
  width: 1px; height: 24px;
  background: var(--hairline-strong);
}
.toolbar__field {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2); font-weight: 500;
}
.toolbar__field select {
  padding: 7px 32px 7px 14px;
  font-size: 12.5px;
  background: var(--surface);
  border-radius: var(--r-pill);
  border: none;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.toolbar__field select:hover { background: var(--surface); }

/* Position pills inside toolbar */
.pos-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 18px 0 14px;
  padding: 0 4px;
}
.pos-tab {
  appearance: none;
  padding: 7px 14px;
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  color: var(--text-2) !important;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.pos-tab:hover {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.pos-tab.active {
  background: var(--ink) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(11,17,32,.15);
}

/* Inner tabs (deprecated, each former tab now has its own top-level
   route; the strip is hidden via `hidden` attribute but the buttons
   remain in the DOM so the router can `.click()` them to invoke the
   existing render() pipeline). */
.inner-tabs {
  display: flex; gap: 6px; padding: 16px 0 0;
  flex-wrap: wrap;
}
.inner-tabs[hidden] { display: none; }
.inner-tab {
  appearance: none;
  padding: 8px 16px;
  background: transparent !important;
  border: none !important;
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-pill) !important;
  transition: color var(--t-fast), background var(--t-fast);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.inner-tab:hover { color: var(--ink); background: rgba(15,23,42,.04); transform: none !important; box-shadow: none !important; }
.inner-tab.active {
  color: var(--ink);
  background: rgba(15,23,42,.06) !important;
}

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn,
button.btn,
button:not(.inner-tab):not(.pos-tab):not(.pill-bar__opt):not(.hero__cta) {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 16px;
  background: var(--bg-soft);
  color: var(--ink);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover,
button.btn:hover,
button:not(.inner-tab):not(.pos-tab):not(.pill-bar__opt):not(.hero__cta):hover {
  background: var(--bg-tinted);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(11,17,32,.04);
}
.btn:active,
button.btn:active,
button:not(.inner-tab):not(.pos-tab):not(.pill-bar__opt):not(.hero__cta):active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 60ms;
}

/* [dead-rule removed] .btn--primary ink base/hover block — fully overridden by
   the canonical brand-red rule later in this file (~L17640: equal specificity +
   !important, later wins). Verified identical computed style before/after. */

.btn--brand {
  background: var(--brand-grad) !important;
  border: none !important;
  color: white !important;
  box-shadow: var(--shadow-brand) !important;
}
.btn--brand:hover { color: white !important; box-shadow: 0 12px 32px rgba(99,102,241,.40) !important; }

.btn--sm { padding: 7px 14px; font-size: 12px; }
.btn--ghost { background: transparent; border-color: var(--hairline); color: var(--text-2); box-shadow: none; }
.btn--ghost:hover { color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ════════════════════════════════════════════════════════
   MAIN CARD WRAP (rankings + tabs)
   ════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px 20px;
}
.card-header__title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.03em;
}
.card-header__meta {
  font-size: 12.5px; color: var(--text-3);
  font-weight: 500;
}
.card-header__meta .mono { color: var(--ink); font-weight: 600; font-family: var(--mono); }

/* ════════════════════════════════════════════════════════
   RANKINGS TABLE, premium look
   ════════════════════════════════════════════════════════ */
.table-wrap {
  margin: 0 22px 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  /* Allow page-level scrolling instead of an internal scrollbar so the
     full table flows naturally down the page (matches the "100 rows
     without scrolling within the page" requirement). overflow-x still
     auto-scrolls horizontally if needed for narrow screens. */
  overflow-x: auto;
  overflow-y: visible;
  box-shadow: var(--shadow-1);
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--ink);
}
thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  color: var(--text-3);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 16px 16px 14px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
thead th:first-child { text-align: left; padding-left: 24px; }
tbody td {
  padding: 16px 16px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  /* Inter (matches the "Redraft Player Rankings" title) instead of
     JetBrains Mono, the mono face read too "computer/robotic" for an
     editorial fantasy product. `font-variant-numeric: tabular-nums`
     keeps digits column-aligned without the typewriter feel. */
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 500;
  vertical-align: middle;
  letter-spacing: -0.005em;
}
tbody td:first-child {
  text-align: left; padding-left: 24px;
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-3);
  font-size: 12.5px;
  width: 36px;
}
tbody tr {
  transition: background var(--t-fast);
}
/* Row-rise: editorial data-reveal animation, scoped to the MAIN rankings
   table only. Inner-panel tables (audit, health, injuries, trade) are
   inside already-animating panels, per-row fades there feel busy. */
#tableBody tr {
  animation: row-rise var(--t-base) var(--ease) both;
}
/* Suppress row-rise on subsequent renders (sort, filter, refilter) so users
   don't see the same fade-in repeatedly during a long session. JS adds this
   class after the first paint; row-rise only fires on initial data load. */
#tableBody.no-row-anim tr {
  animation: none;
  opacity: 1;
}
/* Stagger first 30 rows; rest fade in instantly */
tbody tr:nth-child(1)  { animation-delay: 0ms;   }
tbody tr:nth-child(2)  { animation-delay: 14ms;  }
tbody tr:nth-child(3)  { animation-delay: 28ms;  }
tbody tr:nth-child(4)  { animation-delay: 42ms;  }
tbody tr:nth-child(5)  { animation-delay: 56ms;  }
tbody tr:nth-child(6)  { animation-delay: 70ms;  }
tbody tr:nth-child(7)  { animation-delay: 84ms;  }
tbody tr:nth-child(8)  { animation-delay: 96ms;  }
tbody tr:nth-child(9)  { animation-delay: 108ms; }
tbody tr:nth-child(10) { animation-delay: 120ms; }
tbody tr:nth-child(n+11) { animation-delay: 130ms; }
tbody tr:hover {
  background: var(--bg-tinted);
  cursor: pointer;
}
tbody tr:last-child td { border-bottom: none; }

td.strong, td[data-strong] {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-family: var(--font-display);
  font-feature-settings: 'tnum';
}
td.green, .num-pos { color: var(--green); font-weight: 600; }
td.red, .num-neg { color: var(--red); font-weight: 600; }
td.gold { color: var(--gold); font-weight: 600; }

/* Position chip / pill - single source of truth.
   Previously defined twice (here + L4165) with conflicting padding and
   font-size; merged into one block. Colors source from --pos-* tokens
   in :root, which now match the hexes shipped below.
   Per design audit: chips read as COLORED (saturated brand colors with
   white text) but pulled toward a mature, ~60% saturation palette so
   they don't scream "AI dashboard." */
.posChip {
  display: inline-flex;
  align-items: center;
  padding: var(--chip-pad);
  font-size: var(--chip-fs);
  font-weight: var(--chip-fw);
  border-radius: var(--chip-radius);
  letter-spacing: .06em;
  /* Dark slate fallback (NOT the light --bg-soft): the chip ALWAYS carries a
     saturated .posChip--<pos> modifier, but during a render race the base shows
     first — white ink on a light fallback is illegible (axe flagged 1.21:1).
     A dark default keeps every transient state AA-legible; modifiers still win. */
  background: #4f5663;
  color: #fff;
  border: 1px solid transparent;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.posChip--c   { background: var(--pos-c);   color: #fff; }
.posChip--1b  { background: var(--pos-1b);  color: #fff; }
.posChip--2b  { background: var(--pos-2b);  color: #fff; }
.posChip--3b  { background: var(--pos-3b);  color: #fff; }
.posChip--ss  { background: var(--pos-ss);  color: #fff; }
.posChip--of  { background: var(--pos-of);  color: #fff; }
.posChip--dh  { background: var(--pos-dh);  color: #fff; }
.posChip--sp  { background: var(--pos-sp);  color: #fff; }
.posChip--rp  { background: var(--pos-rp);  color: #fff; }
.posChip--util,
.posChip--p   { background: var(--pos-util); color: #fff; }

/* JS-injected position color classes */
.injName { font-weight: 600; color: var(--ink); }

/* IL designation pill (rightmost "IL" column).
   Redesigned to look MEDICAL, not like a position chip, same SP chip uses
   the same red rectangle which made the IL chip indistinguishable. Now:
  , Outlined "ticket" shape (red OUTLINE on light red fill), distinct
     from the solid-fill saturated position chips
  , Medical cross glyph (✚) instead of a plain "IL" label background
  , Leading pulse dot, the only chip on the row with an animation,
     reading as "active alert" / "currently watching"
  , Fully rounded pill (rather than the chip's 4px radius), different
     shape language. */
/* Injury (IL) designation tag — flat + quiet. A simple muted-red pill with the
   IL length; no pulse dot, medical cross, gradient, or gloss (those read as
   AI-slop). Matches the editorial weight of the rest of the table. */
.injBadge.injBadge--il {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--red, #bb1f1f);
  background: var(--red-soft, rgba(187, 31, 31, 0.09));
  border: 1px solid color-mix(in srgb, var(--red, #bb1f1f) 24%, transparent);
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.5;
  vertical-align: middle;
}

/* ── Rank pip, top-3 typographic accent ────────────────────────────
   First pass used gold/silver/bronze gradient pills, read as "podium"
   gamification, a known AI tell. Replaced with pure typography: top-3
   get a heavier weight + warm sequential ink color, no chip background.
   The hierarchy is communicated by type alone, no chrome. */
.rk-pip {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 18px;
  padding: 0;
  font-family: var(--font-display, var(--font));
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #6a665e;            /* was #b0aea8 (2.0:1 — failed WCAG AA); ~5.3:1 on table bg */
  background: none;
  border: none;
  letter-spacing: -0.02em;
}
.rk-pip--gold   { color: #b08326; font-weight: 700; font-size: 14px; }
.rk-pip--silver { color: #6b7280; font-weight: 700; font-size: 14px; }
.rk-pip--bronze { color: #94591c; font-weight: 700; font-size: 14px; }
.injName--C  { color: var(--pos-c); }
.injName--1B { color: var(--pos-1b); }
.injName--2B { color: var(--pos-2b); }
.injName--3B { color: var(--pos-3b); }
.injName--SS { color: var(--pos-ss); }
.injName--OF { color: var(--pos-of); }
.injName--DH { color: var(--pos-dh); }
.injName--SP { color: var(--pos-sp); }
.injName--RP { color: var(--pos-rp); }

/* Mini bar */
.mini-bar {
  display: inline-block;
  width: 64px; height: 6px;
  border-radius: var(--r-3);
  background: var(--bg-soft);
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}
.mini-bar > span {
  display: block; height: 100%;
  background: var(--brand-grad);
  border-radius: inherit;
}

/* ════════════════════════════════════════════════════════
   PLAYER DETAIL DRAWER
   ════════════════════════════════════════════════════════ */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 16px; right: 16px; bottom: 16px;
  width: 520px; max-width: 92vw;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  z-index: 201;
  transform: translateX(calc(100% + 16px));
  transition: transform var(--t-slow) var(--ease);
  overflow-y: auto;
  padding: 0;
}
.drawer { transition: transform var(--t-slow) var(--ease); }
.drawer.is-open { transform: translateX(0); }

/* ════════════════════════════════════════════════════════
   MARKET EDGE, featured card spotlight + supporting grid
   ════════════════════════════════════════════════════════ */
.me-section { animation: feature-rise var(--t-slow) var(--ease) both; }
.me-section + .me-section { margin-top: 8px; }
.me-section__head { margin-bottom: 20px; }
.me-section__eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 8px;
}
.me-section__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.me-section__blurb {
  font-size: 14px; color: var(--text-2);
  letter-spacing: -0.005em;
  max-width: 580px;
}
.me-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}
.me-grid__supporting {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.me-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.me-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.me-card--featured {
  padding: 28px 30px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-tinted) 100%);
  flex-direction: column; align-items: stretch; gap: 18px;
  min-height: 220px;
  justify-content: space-between;
}
.me-card--featured .me-card__name {
  font-size: 30px !important;
  letter-spacing: -0.034em !important;
}
.me-card--featured .me-card__metric {
  font-size: 40px !important;
  letter-spacing: -0.04em !important;
}
.me-card--featured .me-card__row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.me-card__name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.me-card__sub { font-size: 12px; color: var(--text-3); margin-top: 6px; letter-spacing: -0.005em; }
.me-card__metric {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em; line-height: 1;
  font-feature-settings: 'tnum';
}
.me-card__mp { font-family: var(--mono); font-size: 11px; font-weight: 600; margin-top: 4px; letter-spacing: .02em; }

@media (max-width: 900px) {
  .me-grid { grid-template-columns: 1fr; }
}
.drawer__header {
  position: sticky; top: 0; z-index: 2;
  padding: 36px 36px 24px;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.drawer__close {
  position: absolute; top: 20px; right: 20px;
  width: 32px; height: 32px;
  background: var(--bg-soft) !important;
  border: none !important;
  border-radius: 50%!important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
}
.drawer__close:hover { background: var(--bg-tinted) !important; color: var(--ink) !important; }
.drawer__title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02;
  color: var(--ink);
}
.drawer__sub {
  font-size: 13px; color: var(--text-2);
  margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.drawer__body { padding: 8px 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.drawer-section {
  padding: 0;
}
.drawer-section + .drawer-section {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.drawer-section__label {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 14px;
}
.drawer-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 13.5px; }
.drawer-row__k { color: var(--text-2); }
.drawer-row__v { color: var(--ink); font-family: var(--mono); font-weight: 600; font-feature-settings: 'tnum'; }
.drawer-bar {
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  height: 5px;
  overflow: hidden;
  margin: 8px 0 4px;
  position: relative;
}
.drawer-bar > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

/* ════════════════════════════════════════════════════════
   TERMINAL TILES (in Data Health tab)
   ════════════════════════════════════════════════════════ */
.terminal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.terminal-tile {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  position: relative;
  box-shadow: var(--shadow-1);
}
.terminal-tile__label {
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.terminal-tile__value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  color: var(--ink);
  margin-top: 6px;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.terminal-tile__sub {
  font-size: 11.5px; color: var(--text-3); margin-top: 4px;
}
.terminal-tile__status {
  position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%;
}
.terminal-tile__status--green  { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.terminal-tile__status--orange { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.terminal-tile__status--red    { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

/* ════════════════════════════════════════════════════════
   METHODOLOGY content
   ════════════════════════════════════════════════════════ */
.methodologyPanel { color: var(--text); }
.methodologyPanel h3 {
  font-family: var(--font-display);
  color: var(--ink); font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.methodologyPanel h4 {
  font-family: var(--font-display);
  color: var(--ink); font-size: 15px; font-weight: 700;
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  letter-spacing: -0.018em;
}
.methodologyP {
  font-size: 14px; line-height: 1.65;
  color: var(--text); margin: 8px 0;
}
.methodologyP.subtle { color: var(--text-2); font-size: 13px; }
.methodologyList {
  margin: 8px 0 14px 22px;
  font-size: 13.5px; line-height: 1.65;
  color: var(--text);
}
.methodologyList li { margin: 5px 0; }
.mono { font-family: var(--mono); }
.subtle { color: var(--text-3); }
code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--brand-deep);
}
pre {
  background: var(--bg-soft) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-md) !important;
  color: var(--text) !important;
  padding: 16px 18px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Trade panel */
.tradeGrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0;
}
.tradeCol {
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px;
}
.tradeCol h4 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.tradeCol textarea {
  width: 100%; min-height: 120px; resize: vertical;
  font-family: var(--mono); font-size: 12.5px;
}
.tradeTotals {
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 14px 18px; margin: 16px 0;
}
.tradeResultsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.metaRow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px dashed var(--hairline);
}
.metaRow:last-child { border-bottom: none; }
.metaRow .k { color: var(--text-3); font-size: 12px; }
.injuriesMeta {
  background: var(--surface-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 14px;
}

/* Loading state, hidden entirely. Skeleton table rows now cover the
   initial-load gap, and tab switches render synchronously, so the
   persistent spinning indicator below the table read as visual clutter
   (still spinning after data was loaded). Element kept in the DOM for
   accessibility / debug-text purposes but visually suppressed. */
.loading-state { display: none !important; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Helpers */
.flex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--text-3); }
.danger { color: var(--red); }
.success { color: var(--green); }
.warning { color: var(--gold); }

/* Hide tool-header (legacy holder; replaced by hero) */
.tool-header { display: none; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .insights { grid-template-columns: repeat(4, 1fr); }
  .scoring-row { grid-template-columns: 1fr; }
  .control-center__row { grid-template-columns: 1fr; gap: 16px; }
  .control-center__row-head { padding-right: 0; }
}
@media (max-width: 880px) {
  .hero { padding: 56px 0 18px; }
  .insights { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { grid-template-columns: 1fr; }
  .site-nav__links { display: none; }
  .toolbar__inner { flex-direction: column; align-items: stretch; }
  .toolbar__search { max-width: none; }
}
@media (max-width: 600px) {
  .insights { grid-template-columns: 1fr; }
  .table-wrap { margin: 0 12px 12px; }
  .control-center__row, .scoring-card { padding: 18px 20px; }
  .card-header { padding: 18px 20px 12px; }
  .scoring-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════
   PRODUCTION POLISH, A11Y, MOTION, FOCUS, SKELETONS
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   DRAFT ROOM, live draft assistant
   ════════════════════════════════════════════════════════ */
.draft-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.draft-head__eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 6px;
}
.draft-head__title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 6px;
}
.draft-head__sub {
  font-size: 13.5px; color: var(--text-2);
  letter-spacing: -0.005em;
  max-width: 480px;
}
.draft-head__controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.draft-head__field {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3); font-weight: 600;
}
.draft-head__field select {
  padding: 7px 32px 7px 12px;
  background: var(--surface);
  border: none;
  border-radius: var(--r-pill);
  font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-1);
  font-size: 13px;
}
.draft-head__pick {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}

.draft-room {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 560px;
}
.draft-pool, .draft-team, .draft-suggest {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.draft-section-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.draft-section-head h4 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.draft-pool__filter {
  display: flex; gap: 4px; overflow-x: auto; max-width: 60%;
}
.draft-pool__filter .pos-tab {
  padding: 4px 10px !important;
  font-size: 11px !important;
  flex-shrink: 0;
}
.draft-pool__list {
  overflow-y: auto;
  flex: 1;
  max-height: 640px;
}

.draft-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.draft-row:hover { background: var(--bg-tinted); }
.draft-row:last-child { border-bottom: none; }
.draft-row__rank {
  font-family: var(--mono);
  font-size: 11px; color: var(--text-3); font-weight: 600;
  min-width: 28px;
}
.draft-row__name {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.draft-row__name-line {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
}
.draft-row__meta {
  font-family: var(--mono);
  font-size: 11px; color: var(--text-3);
  font-feature-settings: 'tnum';
}
.draft-row__actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.draft-row__btn {
  appearance: none; border: none;
  padding: 6px 10px !important;
  background: var(--bg-soft) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-pill) !important;
  font-size: 11px !important; font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  box-shadow: none !important;
}
.draft-row__btn:hover { background: var(--bg-tinted) !important; color: var(--ink) !important; }
.draft-row__btn--mine {
  background: var(--brand) !important;
  color: white !important;
}
.draft-row__btn--mine:hover { background: var(--brand-deep) !important; color: white !important; }

/* MY TEAM slots */
.draft-team__summary {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--text-3);
  font-weight: 500;
}
.draft-team__slots {
  padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  flex: 1;
}
.draft-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  min-height: 48px;
  position: relative;
}
.draft-slot--filled {
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.draft-slot--needed {
  background: var(--bg-soft);
  border: 1px dashed var(--hairline-strong);
}
.draft-slot__pos {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
  min-width: 32px;
}
.draft-slot__player {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.draft-slot__name {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
}
.draft-slot__sub {
  font-size: 11px; color: var(--text-3); font-family: var(--mono);
}
.draft-slot__placeholder {
  font-size: 12px; color: var(--text-3); font-style: italic;
  letter-spacing: -0.005em;
}
.draft-slot__remove {
  appearance: none; border: none; background: transparent !important;
  color: var(--text-3) !important;
  font-size: 16px !important; padding: 0 6px !important;
  cursor: pointer;
  box-shadow: none !important;
}
.draft-slot__remove:hover { color: var(--red) !important; }

/* RIGHT: pick recommendation */
.draft-suggest__body { padding: 18px 22px; }

/* ── Decision-state banner: ONE line summarizing the room state ──── */
.draft-state-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.draft-state-banner__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 10.5px;
}
.draft-state-banner__msg {
  color: var(--text);
  font-weight: 500;
}
.draft-state-banner--stable { background: var(--bg-soft);    color: var(--text-3); }
.draft-state-banner--value  { background: var(--green-soft); color: var(--green);  }
.draft-state-banner--panic  { background: var(--blue-soft);  color: var(--blue);   }
.draft-state-banner--cliff  { background: var(--red-soft);   color: var(--red);    }
.draft-state-banner--cliff .draft-state-banner__label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
  vertical-align: middle;
}
.draft-state-banner__msg {
  color: var(--ink) !important;
  font-weight: 500;
}

/* ── The dominant verdict, TAKE NOW / LIKELY WAIT / PICK ────────── */
.draft-verdict {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  text-align: center;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.draft-verdict::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--text-3);
}
.draft-verdict--take::before    { background: var(--red); }
.draft-verdict--wait::before    { background: var(--green); }
.draft-verdict--neutral::before { background: var(--brand); opacity: .5; }
.draft-verdict__action {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.draft-verdict--take .draft-verdict__action  { color: var(--red); }
.draft-verdict--wait .draft-verdict__action  { color: var(--green); }
.draft-verdict__sub {
  margin-top: 6px;
  font-size: 12px; color: var(--text-2);
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* ── Risk frame on the featured card ─────────────────────────────── */
.draft-risk-frame {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 700;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}
.draft-risk-frame--green   { background: var(--green-soft); color: var(--green); }
.draft-risk-frame--red     { background: var(--red-soft);   color: var(--red); }
.draft-risk-frame--gold    { background: var(--gold-soft);  color: var(--gold); }
.draft-risk-frame--neutral { background: var(--bg-soft);    color: var(--text-3); }

/* ── Alternatives toggle: quiet text link, not a pill ───────────── */
.draft-alts-toggle {
  margin-top: 16px;
  padding: 4px 0 !important;
  background: transparent !important;
  color: var(--text-3) !important;
  border: none !important;
  border-radius: 0!important;
  font-size: 11.5px !important; font-weight: 500 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: color var(--t-fast);
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: -0.005em;
}
.draft-alts-toggle:hover { color: var(--ink) !important; background: transparent !important; transform: none !important; }
.draft-alts-toggle__chevron {
  font-size: 10px;
  transition: transform var(--t-base);
  margin-left: 2px;
}
.draft-alts-toggle.is-open .draft-alts-toggle__chevron { transform: rotate(180deg); }

/* "Why not the top pick?" subtext on each alternative */
.draft-suggest__alt-whynot {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: -0.005em;
  margin-top: 2px;
  font-weight: 500;
}

/* Pick-timing line */
.draft-timing {
  font-size: 12px; color: var(--text-2);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}
.draft-timing strong {
  font-family: var(--mono);
  font-weight: 700; color: var(--ink);
  font-feature-settings: 'tnum';
}

/* Survival % chip on alternatives */
.survival-pct {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(15,23,42,.04);
  margin-right: 4px;
}
.draft-suggest__featured {
  background: var(--bg-tinted);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
}
.draft-suggest__featured::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--brand);
  border-radius: var(--r-3) 0 0 var(--r-3);
}
.draft-suggest__featured-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin-bottom: 4px;
}
.draft-suggest__featured-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  margin-bottom: 10px; flex-wrap: wrap;
}
.draft-suggest__featured-thesis {
  font-size: 13px; color: var(--text);
  line-height: 1.55; letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.draft-suggest__featured-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--ink) !important;
  color: white !important;
  border: none; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
}
.draft-suggest__alt-list {
  display: flex; flex-direction: column; gap: 6px;
}
.draft-suggest__alt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.draft-suggest__alt:hover { background: var(--bg-tinted); }
.draft-suggest__alt-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.draft-suggest__alt-mp {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-2);
}
.draft-suggest__alts-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 14px 0 8px;
}

/* Responsive: stack on tablet */
@media (max-width: 1100px) {
  .draft-room { grid-template-columns: 1fr; }
  .draft-pool__list { max-height: 420px; }
}

/* Skeleton loader */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface) 50%, var(--bg-soft) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton-row td > .skeleton-bar {
  display: inline-block;
  height: 12px; width: 100%;
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface) 50%, var(--bg-soft) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-4);
}

/* Reduced motion, kill all animations & transitions for users who ask */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus-visible, single cohesive 2px brand outline. Outline (not box-shadow)
   so it doesn't fight with existing element shadows on focused buttons/cards. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Sort indicator on table headers. The clickable affordance (pointer + hover)
   is scoped to headers that are BOTH data-sortable AND actually wired to sort
   (app.js sets aria-sort only on the genuinely-sortable columns) — so the other
   headers no longer show a misleading pointer. data-sortable alone still drives
   touch padding (alignment) below. */
thead th[data-sortable][aria-sort] { cursor: pointer; user-select: none; transition: color var(--t-fast); }
thead th[data-sortable][aria-sort]:hover { color: var(--text-2); }
thead th[data-sort-active] {
  color: var(--ink);
  font-weight: 600;
}
thead th[data-sort-active]::after {
  content: '▾';
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--brand);
  transform-origin: center;
  transition: transform var(--t-base);
}
thead th[data-sort-active="asc"]::after { transform: rotate(180deg); }

/* Player column — NOT frozen (owner 2026-06-22). A sticky-left freeze made the
   stat columns overlap the player name on horizontal scroll (real-browser
   position:sticky repaint bleed that an opaque bg + shadow couldn't reliably
   stop), so the WHOLE table now scrolls horizontally as one unit. The sticky
   thead (top:0, vertical) is unaffected and still pins on vertical scroll.
   Fixed width + ellipsis keeps the POS column aligned across rows; left-align
   so the "PLAYER" header sits over the START of every name. NOTE: do not
   re-add `position: sticky; left: 0` here — it reintroduces the overlap. */
.table-wrap table thead th:nth-child(2),
.table-wrap table tbody td:nth-child(2) {
  min-width: 210px;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding-left: 16px;
}

/* Tabular numerals across all numeric cells (already partial; enforce here) */
.table-wrap td.num,
.table-wrap td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Editorial empty state primitive */
.empty-state {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
}
.empty-state__body {
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  max-width: 380px;
  line-height: 1.55;
}

/* Tooltip timing, use `title` attribute deferred display via CSS */
[title]:not(button):not(a) { cursor: help; }

/* Performance: content-visibility on table rows past the fold */
tbody tr {
  contain: layout style paint;
}
.table-wrap tbody tr:nth-child(n+50) {
  content-visibility: auto;
  contain-intrinsic-size: 0 50px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE, premium mobile / tablet behavior
   ════════════════════════════════════════════════════════ */

/* Tablet, narrower nav links, horizontally scrolling insights */
@media (max-width: 1100px) {
  :root { --gutter: 22px; }
  .signal-feature { grid-template-columns: 1fr; }
  .signal-feature__metrics { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}

/* Smaller laptops / tablets */
@media (max-width: 920px) {
  .hero { padding: 56px 0 24px; }
  .hero__title { font-size: clamp(48px, 11vw, 72px); }
  .hero__tagline { font-size: 16px; }
  .hero__ctas { gap: 8px; }
  .hero__cta { padding: 11px 22px; font-size: 13.5px; }
  .signal-feature { padding: 26px 24px 24px; gap: 18px; }
  .signal-feature__player { font-size: clamp(28px, 6vw, 38px); }
  .insights {
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .insight { scroll-snap-align: start; min-width: 240px; }
  .insight--featured {
    grid-column: span 1;
    min-width: 280px;
  }
  .me-grid { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .page { gap: 36px; padding-bottom: 64px; }
  .site-nav__inner { padding: 0 16px; }
  .site-nav__logo { margin-right: 0; }
  .site-nav__links { display: none; }
  .site-nav__right .nav-status { display: none; }

  .hero { padding: 40px 0 20px; }
  .hero__eyebrow { margin-bottom: 18px; font-size: 11px; padding: 5px 12px; }
  .hero__title { font-size: 52px; letter-spacing: -0.045em; margin-bottom: 16px; }
  .hero__tagline { font-size: 15px; margin-bottom: 28px; max-width: none; padding: 0 8px; }
  .hero__ctas { margin-bottom: 28px; flex-wrap: wrap; justify-content: center; }
  .hero__cta { width: 100%; max-width: 280px; }

  .signal-feature {
    padding: 22px 20px 20px;
    gap: 14px;
    border-radius: var(--r-xl);
  }
  .signal-feature__player { font-size: 28px; }
  .signal-feature__thesis { font-size: 13px; }
  .signal-feature__metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .metric-tile { padding: 12px 14px; min-height: 64px; }
  .metric-tile__value { font-size: 20px; }

  /* Drawer becomes nearly fullscreen on mobile */
  .drawer {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
  }
  .drawer.is-open { transform: translateY(0); }
  .drawer__header { padding: 24px 22px 18px; }
  .drawer__title { font-size: 26px; }
  .drawer__body { padding: 4px 22px 28px; gap: 18px; }

  /* Mobile table, show only essential columns */
  .table-wrap { margin: 0 12px 12px; max-height: 65vh; }
  thead th, tbody td { padding: 12px 10px; font-size: 12px; }
  thead th:first-child, tbody td:first-child { padding-left: 14px; }
  /* Hide rank column + later columns */
  thead th:first-child, tbody td:first-child { display: none; }

  .toolbar { padding: 10px var(--gutter); }
  .toolbar__inner { gap: 8px; }
  .toolbar__divider { display: none; }
  .toolbar__search { min-width: 0; max-width: none; flex: 1 1 100%; }
  .toolbar__field label { display: none; }
  .toolbar__field select { padding: 6px 24px 6px 10px; font-size: 12px; }

  .pos-tabs { padding: 0 var(--gutter); overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .pos-tab { flex-shrink: 0; }

  .inner-tabs { padding: 0 var(--gutter); overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .inner-tab { flex-shrink: 0; }

  .config-pill { padding: 10px 16px !important; font-size: 12px !important; }
  .config-pill__summary { display: none; }
  .control-center__row { padding: 22px 20px; grid-template-columns: 1fr; }
  .control-center__row-head { padding-right: 0; }

  .card-header { padding: 20px 20px 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-header__meta { width: 100%; flex-wrap: wrap; gap: 10px; }

  .me-card { padding: 14px 16px; }
  .me-card--featured { padding: 22px 20px; min-height: 0; }
  .me-card--featured .me-card__name { font-size: 22px !important; }
  .me-card--featured .me-card__metric { font-size: 28px !important; }
  .me-section__title { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════
   PANEL PRIMITIVES, finishing-pass polish
   Replaces ~30 instances of repeated inline-styled headers
   across audit, health, explain, methodology, injuries,
   trade panels. Editorial typography, intentional spacing.
   ════════════════════════════════════════════════════════ */
.panel {
  padding: 32px 36px 40px;
  max-width: 1180px;
  /* Extra top breathing room so the panel title clears the sticky workspace
     sub-nav (~130px combined). Without this, deep-linking to /trade or
     /injuries clips the panel title under the sub-nav strip. */
  margin-top: 24px;
}
.panel--narrow { max-width: 880px; }

.panel__header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.panel__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.panel__sub {
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  line-height: 1.55;
  max-width: 720px;
  margin: 0;
}
.panel__section {
  margin-top: 30px;
}
.panel__section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-3);
  margin: 0 0 12px;
}
.panel__section-sub {
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  line-height: 1.5;
  margin: -6px 0 14px;
  max-width: 680px;
}

/* Output blocks, replaces <pre> dev-console look with typeset prose */
.output-block {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 480px;
  overflow: auto;
  font-feature-settings: 'tnum';
}
.output-block:empty::before,
.output-block.is-empty::before {
  content: '-';
  color: var(--text-3);
}

/* Inline meta paragraph, calmer than .methodologyP for short status lines */
.panel__status-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 10px;
  letter-spacing: -0.005em;
}

/* Small column-label for table groupings */
.col-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-3);
  margin: 0 0 10px;
}

/* Calmer table rhythm for inner-panel tables (audit/health/trade/injury) */
.panel .table-wrap td {
  padding: 14px 16px;
}
.panel .table-wrap thead th {
  padding: 14px 16px 12px;
  font-size: 10px;
}

/* Rankings table, premium polish layer (May 2026).
   The Proj Pts column (the headline number every user is scanning for) gets
   bolder typography and the brand ink color so it pops vs. the secondary
   columns. Best/Worst already use green/red. The result reads as a clear
   "central forecast + range" trio rather than three indistinct numbers. */
.table-wrap tbody td:nth-child(6) {   /* Proj Pts column (#6 in redraft view) */
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink, #0b1120);
  letter-spacing: -0.012em;
}
.table-wrap thead th:nth-child(6) {
  color: var(--ink, #0b1120);
  font-weight: 700;
}
/* Subtle horizontal-gradient hover, replaces the flat background hover with
   a warmer "row is active" cue that fades out to the right. */
.table-wrap tbody tr:hover td {
  background: linear-gradient(90deg,
    rgba(65, 112, 194, 0.045) 0%,
    rgba(65, 112, 194, 0.025) 40%,
    rgba(65, 112, 194, 0.015) 80%,
    rgba(65, 112, 194, 0) 100%);
}
/* Premium row hover, accent stripe via the first cell's inset shadow.
   Reliable across browsers (avoids position:absolute on <tr>, which is flaky). */
.table-wrap tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--brand);
}

/* ════════════════════════════════════════════════════════
   PRODUCTIZATION POLISH, premium feel primitives
   ════════════════════════════════════════════════════════ */

/* Premium "settle" easing, for content reveals, modals, drawer.
   Gentler than --ease (no overshoot), longer settle than --ease-out.
   Shadow tokens re-warmed to ink (was cool-slate 11,17,32) so they
   align with the editorial elevation in the main :root. */
:root {
  --ease-settle: cubic-bezier(.22,.61,.36,1);
  --lift-1: 0 2px 6px rgba(15,14,12,.05);
  --lift-2: 0 6px 18px rgba(15,14,12,.08);
}

/* Editorial empty state for output blocks, replaces dev-feeling "-" */
.output-block.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 24px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.005em;
  white-space: normal;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.output-block.is-empty::before { content: none; }

/* Number-typography refinement, slightly tighter tracking on the rank column
   and stronger contrast on the running tab order so scanning feels faster. */
.table-wrap tbody td:first-child {
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum', 'lnum';
  color: var(--text-3);
}
.table-wrap tbody tr:hover td:first-child {
  color: var(--ink);
}

/* Premium hover-lift utility, same micro-elevation across cards.
   Add `.lift-on-hover` to any card to opt in. */
.lift-on-hover {
  transition: transform var(--t-base) var(--ease-settle),
              box-shadow var(--t-base) var(--ease-settle);
}
.lift-on-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

/* Reveal-on-mount: small editorial fade-up for new content blocks.
   Used by panels/cards added after initial render. */
.reveal {
  animation: feature-rise var(--t-slow) var(--ease-settle) both;
}

/* Output blocks, subtle inset shadow at the top while scrolling */
.output-block {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.output-block::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.output-block::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--r-pill);
}
.output-block::-webkit-scrollbar-track {
  background: transparent;
}

/* Drawer + table-wrap refined scrollbar consistency */
.drawer, .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.drawer::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.drawer::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.drawer::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
}

/* Selection, restrained, brand-tinted */
::selection {
  background: var(--brand-tint);
  color: var(--ink);
}

/* ════════════════════════════════════════════════════════
   EXPERIENCE HARDENING, real-world usage stability
   ════════════════════════════════════════════════════════ */

/* Layout stability for output blocks: baseline min-height prevents the
   panel from jumping when output appears. The inline min-height on
   #explainOutput (140px) overrides this where larger is needed. */
.output-block {
  min-height: 64px;
  contain: layout style;
}

/* Editorial empty-state for any table whose tbody is genuinely empty.
   Replaces the previous "blank rectangle" feel with a calm one-line
   placeholder. Inline with the table, no layout shift on populate. */
.table-wrap tbody:empty::after {
  content: 'No data yet.';
  display: block;
  padding: 28px 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* Specific empty-state copy for the named tables, feels intentional
   instead of generic. Uses CSS attribute matching so JS doesn't need
   to render anything for the empty state. */
#auditTableBody:empty::after        { content: 'Run rankings to populate the audit.'; }
#healthTableBody:empty::after       { content: 'Run rankings to populate health metrics.'; }
#injuriesBody:empty::after          { content: 'No active injuries loaded.'; }
#tradeTableBodyA:empty::after,
#tradeTableBodyB:empty::after       { content: 'Add players above to compare.'; }
#versionHistoryBody:empty::after    { content: 'No model snapshots saved yet.'; }

/* GPU-hint discipline: only opt elements into transform compositing while
   they're actively interactive (hover/active/open). Permanent will-change
   wastes memory and can hurt scroll performance in long sessions. */
.btn:hover,
button.btn:hover,
button:not(.inner-tab):not(.pos-tab):not(.pill-bar__opt):not(.hero__cta):hover,
.lift-on-hover:hover,
.insight:hover,
.drawer.is-open {
  will-change: transform;
}

/* Tooltip baseline for [title] attributes. Browsers render native tooltips
   at OS speed (often ~1s), uncomfortably slow for a premium product.
   Cursor cue stays; the actual tooltip remains browser-native (no JS deps),
   but elements with rich hover targets get a subtle underline cue too. */
[title]:not(button):not(a):not(input) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}

/* Hover-state collision prevention: when a row's drawer-open state happens
   simultaneously with a hover-stripe, the stripe should defer. */
.table-wrap tbody tr.is-active td:first-child {
  box-shadow: inset 2px 0 0 var(--brand);
  background: var(--bg-tinted);
}

/* Sticky-position safety: ensure z-index stacking doesn't collide between
   sticky table headers, sticky toolbar, and the drawer. */
.drawer { z-index: var(--z-chrome); }       /* highest of the floating surfaces */
.drawer-backdrop { z-index: 999; }
.toolbar { z-index: var(--z-sticky); }       /* sticky toolbar */
thead th { z-index: 5; }         /* table sticky header, lowest sticky */

/* Prevent accidental horizontal scroll on the page from any rogue overflow */
html, body {
  overflow-x: hidden;
}

/* Touch targets: any button/control should be at least 36px tall for
   reliable mobile tapping. Small buttons get a min-height bump. */
@media (pointer: coarse) {
  .btn--sm { min-height: 36px; padding-top: 9px; padding-bottom: 9px; }
  thead th[data-sortable] { padding-top: 18px; padding-bottom: 16px; }
  tbody td:first-child { padding-top: 18px; padding-bottom: 18px; }
}

/* Draft Room narrow-width hardening: at < 900px, stack suggest below the
   pool+team grid so each gets full readable width on tablets/laptops. */
@media (max-width: 920px) {
  .draft-room {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .draft-suggest { order: 0; }   /* suggest stays first, most important */
  .draft-pool { order: 1; }
  .draft-team { order: 2; }
  .draft-pool__list { max-height: 360px; }
  .draft-suggest__featured { padding: 22px 22px; }
  .draft-suggest__featured-name { font-size: 22px !important; }
  .draft-suggest__verdict-line { flex-wrap: wrap; gap: 10px; }
}

/* Long-session contrast comfort: at very small viewports, slightly soften
   the background to reduce screen brightness fatigue. */
@media (max-width: 600px) {
  body { background: #f4f5f8; }   /* one shade calmer than --bg */
  .panel { padding: 22px 18px 28px; }
  .panel__title { font-size: 21px; }
}

/* Reveal-on-scroll suppression for users who scroll back up, animations
   should not re-fire as cards return into view. (Fade-in primitives use
   `both` fill, so this is mostly defensive against future patterns.) */
.no-replay { animation: none !important; }

/* ════════════════════════════════════════════════════════
   RESEARCH TERMINAL, Methodology tab redesign
   Six-section quant-research dashboard with sticky subnav,
   status grid, engine-flow diagram, action cards, and
   data-ops surfaces. All existing button IDs preserved.
   ════════════════════════════════════════════════════════ */

.research-terminal {
  max-width: 1240px;
  padding: 32px 36px 56px;
}

/* ── Hero (panel__header override for the terminal) ────────── */
.research-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;       /* subnav has its own spacing */
}
.research-hero__title-block { flex: 1; min-width: 280px; }
.research-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin-bottom: 10px;
}
.research-hero__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--green-bg);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  color: var(--green);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.research-hero__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(20,163,107,0.55);
  animation: pulse 2.6s ease-in-out infinite;
}

/* ── Sticky subnav ─────────────────────────────────────── */
.research-subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 11;
  display: flex;
  gap: 4px;
  padding: 14px 36px;
  margin: 0 -36px 28px;
  background: rgba(247, 248, 250, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.research-subnav::-webkit-scrollbar { display: none; }
.research-subnav__btn {
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  box-shadow: none !important;
}
.research-subnav__btn:hover {
  color: var(--ink) !important;
  background: var(--bg-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}
.research-subnav__btn.is-active {
  color: var(--surface) !important;
  background: var(--ink) !important;
}
.research-subnav__btn.is-active:hover {
  background: var(--ink) !important;
}

/* ── Section container ──────────────────────────────────── */
.research-section {
  animation: feature-rise var(--t-base) var(--ease-settle) both;
}
.research-section[hidden] { display: none; }
.research-section__header {
  margin-bottom: 22px;
}
.research-section__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.research-section__sub {
  font-size: 13.5px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  line-height: 1.55;
  max-width: 760px;
  margin: 0;
}

/* ── Status grid (Model Overview) ───────────────────────── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.status-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 18px 20px;
  transition: transform var(--t-base) var(--ease-settle),
              box-shadow var(--t-base) var(--ease-settle),
              border-color var(--t-base) var(--ease-settle);
}
.status-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
  border-color: var(--hairline-strong);
}
.status-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(242,86,86,0.03));
  border-color: var(--brand-tint);
}
.status-card__label {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.status-card__value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.05;
  font-feature-settings: 'tnum';
}
.status-card__value--small {
  font-size: 17px;
  letter-spacing: -0.014em;
  font-weight: 600;
}
.status-card__sub {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  margin-top: 8px;
}
.status-card--featured .status-card__value { color: var(--brand-deep); }

/* ── Action card (button group with header) ─────────────── */
.action-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  transition: border-color var(--t-base) var(--ease-settle);
}
.action-card:hover {
  border-color: var(--hairline-strong);
}
.action-card--primary {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(241,244,251,0.55) 100%);
  border-color: var(--brand-tint);
}
.action-card__head {
  margin-bottom: 14px;
}
.action-card__title {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0 0 5px;
}
.action-card__sub {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 720px;
}
.action-card__sub code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: var(--r-4);
  color: var(--ink);
}
.action-card .panel__status-line { margin-top: 12px; margin-bottom: 0; }
.action-card .output-block { margin-top: 14px; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

/* ── Engine flow diagram ────────────────────────────────── */
.engine-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
  list-style: none;
  padding: 18px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, var(--bg-soft), rgba(241,244,251,0.5));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.engine-flow::-webkit-scrollbar { display: none; }
.engine-flow__stage {
  flex: 1; min-width: 108px;
  text-align: center;
  padding: 12px 8px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.engine-flow__stage:hover {
  transform: translateY(-1px);
  box-shadow: var(--lift-1);
}
.engine-flow__sep {
  display: flex; align-items: center;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 300;
  user-select: none;
}
.engine-flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-size: 11px; font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-display);
  letter-spacing: 0;
}
.engine-flow__name {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: 3px;
}
.engine-flow__hint {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0;
}

/* ── Engine detail (collapsible explainer) ─────────────── */
.engine-detail {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.engine-detail summary {
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  list-style: none;
  user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--t-fast);
}
.engine-detail summary::-webkit-details-marker { display: none; }
.engine-detail summary:hover { background: var(--bg-soft); }
.engine-detail summary::after {
  content: '+';
  font-size: 18px;
  color: var(--text-3);
  font-weight: 300;
  transition: transform var(--t-base);
}
.engine-detail[open] summary { border-bottom: 1px solid var(--hairline); }
.engine-detail[open] summary::after { content: '−'; }
.engine-detail__body {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  letter-spacing: -0.003em;
}
.engine-detail__body p { margin: 0 0 10px; }
.engine-detail__body p:last-child { margin-bottom: 0; }
.engine-detail__body strong {
  color: var(--ink);
  font-weight: 600;
}
.engine-detail__body em {
  font-style: normal;
  color: var(--brand);
  font-weight: 600;
}

/* ── Refresh command card ───────────────────────────────── */
.refresh-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ink);
  border-radius: var(--r-md);
  margin: 12px 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.005em;
}
.refresh-cmd code {
  flex: 1;
  background: transparent;
  color: rgba(255,255,255,0.92);
  padding: 0;
  font-family: var(--mono);
  font-feature-settings: 'tnum';
}
.refresh-cmd code::before {
  content: '$ ';
  color: rgba(255,255,255,0.4);
}
.refresh-cmd .btn {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}
.refresh-cmd .btn:hover {
  background: rgba(255,255,255,0.18) !important;
  color: white !important;
}

/* ── Source status grid (Data Ops) ─────────────────────── */
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.source-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  letter-spacing: -0.003em;
  transition: background var(--t-fast);
}
.source-row:hover { background: var(--bg-tinted); }
.source-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.source-row__status {
  font-family: var(--mono);
  color: var(--text-2);
  font-size: 12px;
  font-feature-settings: 'tnum';
}
.source-row--ok   .source-row__status { color: var(--green); }
.source-row--warn .source-row__status { color: var(--gold);  }
.source-row--fail .source-row__status { color: var(--red);   }
.source-row--live .source-row__status { color: var(--brand); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .status-card--featured { grid-column: span 2; }
}
@media (max-width: 920px) {
  .research-terminal { padding: 24px 22px 40px; }
  .research-subnav { padding: 12px 22px; margin: 0 -22px 22px; }
  .action-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .engine-flow__sep { display: none; }
  .engine-flow { flex-wrap: wrap; }
  .engine-flow__stage { flex: 1 1 calc(33.333% - 6px); }
}
@media (max-width: 600px) {
  .research-terminal { padding: 20px 16px 32px; }
  .research-subnav { padding: 10px 16px; margin: 0 -16px 18px; gap: 2px; }
  .research-subnav__btn { padding: 7px 12px !important; font-size: 12px !important; }
  .status-grid { grid-template-columns: 1fr; gap: 10px; }
  .status-card--featured { grid-column: span 1; }
  .action-card { padding: 18px 18px; }
  .engine-flow__stage { flex: 1 1 calc(50% - 6px); }
  .refresh-cmd { font-size: 12px; padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════
   RESEARCH TERMINAL, PREMIUM POLISH PASS
   Pure refinement: motion, typography, hierarchy. No new
   structure, no new functionality.
   ════════════════════════════════════════════════════════ */

/* ── Section entrance: replays each time subnav switches ── */
.research-section.is-entering {
  animation: feature-rise 320ms var(--ease-settle) both;
}

/* ── Status card stagger on initial render ─────────────── */
/* Editorial reveal, each card lands a beat after the previous. */
.status-grid .status-card {
  animation: feature-rise 360ms var(--ease-settle) both;
}
.status-grid .status-card:nth-child(1) { animation-delay:   0ms; }
.status-grid .status-card:nth-child(2) { animation-delay:  35ms; }
.status-grid .status-card:nth-child(3) { animation-delay:  70ms; }
.status-grid .status-card:nth-child(4) { animation-delay: 105ms; }
.status-grid .status-card:nth-child(5) { animation-delay: 140ms; }
.status-grid .status-card:nth-child(6) { animation-delay: 175ms; }
.status-grid .status-card:nth-child(7) { animation-delay: 210ms; }
.status-grid .status-card:nth-child(8) { animation-delay: 245ms; }

/* ── Engine flow stage stagger (skip separators in nth-child) ── */
.engine-flow__stage { animation: feature-rise 300ms var(--ease-settle) both; }
.engine-flow__stage:nth-child(1)  { animation-delay:  40ms; }
.engine-flow__stage:nth-child(3)  { animation-delay:  75ms; }
.engine-flow__stage:nth-child(5)  { animation-delay: 110ms; }
.engine-flow__stage:nth-child(7)  { animation-delay: 145ms; }
.engine-flow__stage:nth-child(9)  { animation-delay: 180ms; }
.engine-flow__stage:nth-child(11) { animation-delay: 215ms; }
.engine-flow__stage:nth-child(13) { animation-delay: 250ms; }

/* ── Stronger featured-card hierarchy ──────────────────── */
.status-card--featured {
  background:
    linear-gradient(135deg, rgba(239,68,68,0.085), rgba(242,86,86,0.035)),
    linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  border-color: rgba(239,68,68,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.status-card--featured .status-card__label { color: var(--brand); }
.status-card--featured .status-card__value {
  font-size: 32px;
  letter-spacing: -0.032em;
  color: var(--brand-deep);
}

/* ── Status card hover: ease-settle for premium response ── */
.status-card {
  transition:
    transform 280ms var(--ease-settle),
    box-shadow 280ms var(--ease-settle),
    border-color 280ms var(--ease-settle);
}

/* ── Numeric polish: tabular + lining figures everywhere ── */
.status-card__value {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Action card head, slightly more breathing room ──── */
.action-card__head { margin-bottom: 16px; }
.action-card__title {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── Subnav active state: subtle inset shadow for tactility ── */
.research-subnav__btn.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(11,17,32,0.16) !important;
}

/* ── Output panel: research-report typography ─────────── */
.output-block {
  font-size: 12.75px;
  line-height: 1.7;
  padding: 18px 22px;
  letter-spacing: -0.003em;
  font-feature-settings: 'tnum' 1, 'liga' 0;
}
/* First line of an output is almost always the section title, give it
   visual weight without requiring writers to wrap it in HTML. */
.output-block:not(.is-empty)::first-line {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ── Refresh command: premium dark surface with subtle glow ── */
.refresh-cmd {
  padding: 16px 18px;
  background:
    radial-gradient(70% 200% at 50% 0%, rgba(239,68,68,0.14), transparent 60%),
    var(--ink);
  border: 1px solid rgba(255,255,255,0.06);
}
.refresh-cmd code {
  font-size: 13.5px;
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum' 1;
}
.refresh-cmd code::before {
  color: rgba(255,255,255,0.38);
  margin-right: 4px;
}

/* ── Source row: refined hover with subtle slide ───────── */
.source-row {
  transition:
    background 220ms var(--ease-settle),
    border-color 220ms var(--ease-settle),
    transform 220ms var(--ease-settle);
  border: 1px solid transparent;
}
.source-row:hover {
  background: var(--surface);
  border-color: var(--hairline);
  transform: translateX(2px);
}

/* ── Engine numbered circle: subtle radial depth ─────── */
.engine-flow__num {
  background: radial-gradient(circle at 30% 30%, #6573c4, var(--brand));
  box-shadow: 0 1px 3px rgba(239,68,68,0.30);
}

/* ── Hero status pill: micro-spring on label change ──── */
.research-hero__status {
  transition:
    background 280ms var(--ease-settle),
    color 280ms var(--ease-settle);
}

/* ── Reduced-motion respect: kill all entrance animations ── */
@media (prefers-reduced-motion: reduce) {
  .status-grid .status-card,
  .engine-flow__stage,
  .research-section,
  .research-section.is-entering {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   RESEARCH TERMINAL, DISCIPLINE PASS
   Visual entropy reduction. Borders quieted, output blocks
   given a memo-style header rule, mobile subnav refined.
   ════════════════════════════════════════════════════════ */

/* ── Quiet status-card borders ─────────────────────────── */
/* Cards now rely on the surface and a hairline-strong on hover only. */
.status-card {
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline);
}
.status-card:hover {
  box-shadow: 0 0 0 1px var(--hairline-strong), var(--lift-2);
}

/* Featured card keeps its brand-tinted edge for hierarchy. */
.status-card--featured {
  box-shadow: 0 0 0 1px rgba(239,68,68,0.22), inset 0 1px 0 rgba(255,255,255,0.65);
}
.status-card--featured:hover {
  box-shadow: 0 0 0 1px rgba(239,68,68,0.35), inset 0 1px 0 rgba(255,255,255,0.65), var(--lift-2);
}

/* ── Quiet action-card borders ─────────────────────────── */
.action-card {
  border-color: var(--hairline);
}
.action-card:hover {
  border-color: var(--hairline-strong);
}
.action-card--primary {
  border-color: rgba(239,68,68,0.18);
}
.action-card--primary:hover {
  border-color: rgba(239,68,68,0.30);
}

/* ── Output block: institutional research-memo treatment ── */
.output-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 22px 26px 24px;
  font-size: 12.75px;
  line-height: 1.72;
  letter-spacing: -0.003em;
  color: var(--text);
  font-feature-settings: 'tnum' 1, 'liga' 0;
  border-radius: var(--r-md);
}
/* First line, the report title, gets institutional emphasis. */
.output-block:not(.is-empty)::first-line {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.008em;
  font-size: 13.5px;
}

/* Empty state: editorial tone, not a blank dash. */
.output-block.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px dashed var(--hairline-strong);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.005em;
  text-align: center;
  line-height: 1.55;
}
.output-block.is-empty::before { content: none; }

/* ── Subnav: refined mobile behavior ───────────────────── */
@media (max-width: 600px) {
  .research-subnav {
    /* Edge-fade hint that there's more on either side */
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%);
  }
  .research-subnav__btn {
    padding: 7px 13px !important;
    font-size: 12px !important;
  }
}

/* ── Mobile density: tighter card padding, calmer section spacing ── */
@media (max-width: 600px) {
  .research-section__header { margin-bottom: 16px; }
  .action-card { padding: 18px 18px; margin-bottom: 12px; }
  .action-card__head { margin-bottom: 12px; }
  .status-card { padding: 16px 18px; }
  .status-card__value { font-size: 26px; }
  .status-card--featured .status-card__value { font-size: 28px; }
  .output-block { padding: 18px 20px; font-size: 12.5px; line-height: 1.65; }
  .output-block.is-empty { min-height: 72px; padding: 22px 24px; font-size: 12.5px; }
}

/* ── Reduce border weight on engine flow inner stages ── */
.engine-flow__stage {
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1);
}

/* ── Source row: quieter resting state, clearer hover ── */
.source-row {
  background: transparent;
}
.source-row:not(:hover) {
  background: var(--bg-soft);
}

/* ── Section-header bottom rule: removed in favor of intentional spacing ── */
.research-section__header { padding-bottom: 0; border-bottom: none; }

/* ════════════════════════════════════════════════════════
   UNIFIED TAG-PILL SYSTEM
   Replaces inline-styled chip construction. Single visual
   language across decision tags, mispricing tiers, and any
   future label. Quieter than fully-saturated tones, pills
   support content, they don't dominate it.
   ════════════════════════════════════════════════════════ */
.tag-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.005em;
  text-transform: capitalize;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.5;
  transition: background var(--t-fast) var(--ease-settle);
}
/* Tone variants, all use --soft backgrounds + slightly muted text */
.tag-pill--green { background: var(--green-soft); color: var(--green); }
.tag-pill--gold  { background: var(--gold-soft);  color: var(--gold, #8a5a10);        /* slightly desaturated gold */ }
.tag-pill--blue  { background: var(--blue-soft);  color: #4170c2;        /* slightly muted blue */ }
.tag-pill--red   { background: var(--red-soft);   color: var(--metric-neg);        /* desaturated red */ }
.tag-pill--brand { background: var(--brand-soft); color: var(--brand); }
/* Sizes */
.tag-pill--sm    { padding: 2px 7px; font-size: 11px; }
.tag-pill--lg    { padding: 4px 11px; font-size: 11.5px; }

/* ════════════════════════════════════════════════════════
   RANKINGS TABLE, INSTITUTIONAL POLISH
   Calmer separators, refined sticky header, premium hover.
   Rows now read as research entries, not spreadsheet rows.
   ════════════════════════════════════════════════════════ */

/* Sticky thead, soft glass treatment so it floats over rows.
   Editorial-tier label treatment: mixed case via Capitalize transform,
   serif-adjacent weight 500, slate-3 color, fine letter-spacing. Reads as
   a column key in a Bloomberg/Stripe-grade table rather than an
   uppercase "DASHBOARD" header. */
thead th {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  font-size: 11px;
  letter-spacing: 0.005em;
  font-weight: 500;
  color: #9aa0aa;
  text-transform: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding-top: 14px;
  padding-bottom: 12px;
}
/* Capitalize the first letter of each label for sentence-case readability. */
thead th::first-letter { text-transform: uppercase; }

/* Calmer row separators, single hairline, no alternating stripes.
   Row stripes are a spreadsheet tell; the redesign skill calls them out.
   Replaced with one clean baseline-hairline per row. */
tbody td {
  border-bottom: 1px solid transparent;
}
tbody tr:not(:last-child) td {
  border-bottom: 1px solid rgba(11, 17, 32, 0.045);
}

/* Premium hover: brand-tint background, brand-color rank brightening,
   inset stripe on first cell (already shipped, refined here). */
tbody tr {
  transition: background var(--t-fast) var(--ease-settle);
}
tbody tr:hover {
  background: var(--bg-tinted);
}
tbody tr:hover td:first-child {
  color: var(--ink);
  font-weight: 700;
}

/* Numeric cells: tighter tabular feel */
tbody td.num,
tbody td:not(:first-child):not(:nth-child(2)) {
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Player-name cell, the row's anchor. Slightly heavier weight + ink
   color so the name reads as the row's identity, with the position chip
   and other cells supporting it. */
tbody td:nth-child(2) {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0b1120);
  letter-spacing: -0.012em;
  padding-left: 4px;
}
tbody td:nth-child(2) a,
tbody td:nth-child(2) > span:first-child {
  color: inherit;
}

/* Row hover: subtle left-edge brand stripe slides in. Replaces the previous
   first-cell box-shadow with a true 3px hairline so the whole row reads
   as the active selection target. */
tbody tr {
  position: relative;
}
tbody tr td:first-child {
  position: relative;
}
tbody tr:hover td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--brand, #4170c2), color-mix(in srgb, var(--brand, #4170c2) 60%, transparent));
  border-radius: 0 2px 2px 0;
}

/* "Strong" cells (ProjPts column), even more institutional */
td.strong, td[data-strong] {
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* Row mount animation: slightly snappier, less linear */
@keyframes row-rise {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
#tableBody tr {
  animation: row-rise 280ms var(--ease-settle) both;
}

/* Sort indicator: cleaner dots-style instead of arrow */
thead th[data-sort-active]::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin-left: 6px;
  vertical-align: middle;
}
thead th[data-sort-active="asc"]::after {
  box-shadow: 0 -3px 0 var(--brand);
}

/* posChip: see canonical definition at L~1790. The duplicate block that
   used to live here was removed (2026-05-27 polish pass) - it had
   conflicting padding (3px 8px) and font-size (9.5px) that were silently
   overriding the L1790 intent. All sizing now flows from --chip-* tokens. */

/* ── Editorial Tag column (rt-tag) ──────────────────────────────────
   Replaces the previous pill-on-pill stack with typographic labels +
   a small colored leading dot. Reads as a research tag rather than a
   dashboard status badge. Tones pull from the same green/gold/blue/red
   palette as the rest of the site but stay text-only. */
.rt-tag-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.2;
}
.rt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2, #475569);
  white-space: nowrap;
}
.rt-tag__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  flex-shrink: 0;
}
.rt-tag--green   { color: #2d8b66; }
.rt-tag--gold    { color: var(--gold, #8a5a10); }
.rt-tag--blue    { color: #4170c2; }
.rt-tag--red     { color: #c2410c; }
.rt-tag--neutral { color: #6b7383; }

/* Secondary sub-label (lucky / value / buy / sell), italic, quiet,
   sits beneath the primary tag. */
.rt-tag-sub {
  /* Round-5 harsh audit: 9.5px italic read as a whisper on the flagship
     board. 10.5px upright meets the site's 10px floor and stays quiet via
     weight/opacity instead of size. */
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  opacity: 0.82;
}
.rt-tag-sub--green { color: #19794a; }
.rt-tag-sub--gold  { color: var(--gold, #8a5a10); }
.rt-tag-sub--blue  { color: #4170c2; }
.rt-tag-sub--red   { color: #c2410c; }

/* ════════════════════════════════════════════════════════
   PLAYER DRAWER, RESEARCH-NOTE TYPOGRAPHY
   Stronger metric grouping, calmer spacing, thesis section
   reads as a quant research note.
   ════════════════════════════════════════════════════════ */

/* Drawer header: more institutional titling */
.drawer__header {
  padding: 36px 36px 22px;
  border-bottom: 1px solid var(--hairline);
}
.drawer__title {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 700;
}
.drawer__sub {
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin-top: 6px;
}

/* Section label: tighter, more editorial */
.drawer-section__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

/* Drawer rows: better rhythm + alignment */
.drawer-row {
  font-size: 13px;
  padding: 7px 0;
  letter-spacing: -0.003em;
}
.drawer-row__k {
  color: var(--text-2);
  font-weight: 500;
}
.drawer-row__v {
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: 13px;
}

/* Drawer-row dividers: only between distinct value groups, not between every row */
.drawer-section .drawer-row + .drawer-row {
  border-top: none;            /* spacing carries it */
}

/* Drawer section spacing: more air between groups */
.drawer-section + .drawer-section {
  padding-top: 22px;
  margin-top: 4px;
  border-top: 1px solid var(--hairline);
}

/* Mini progress bar: refined */
.drawer-bar {
  background: var(--bg-soft);
  height: 4px;
  margin: 6px 0 2px;
}
.drawer-bar > span {
  background: linear-gradient(90deg, var(--brand), #6573c4);
}

/* ── Drawer header meta rows ────────────────────────────────────
   Two rows: identity meta (position, tier, archetype, decision tag)
   above; calibration pills (riskShape, sampleNote) below. The
   calibration row is suppressed entirely when there's nothing to qualify. */
.drawer-meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
}
.drawer-meta-row + .drawer-meta-row {
  margin-top: 8px;
}
.drawer-meta-row--calibration {
  gap: 6px;
}

/* ── Drawer lead section: model thesis at top, slightly elevated ──
   The first thing a user reads when they open the drawer. */
.drawer-section--lead {
  background: linear-gradient(180deg, rgba(241,244,251,0.4), transparent);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 0 -20px 4px;            /* slight visual lift via negative margin */
}

/* ── Thesis prose: research-note typography ──────────────────── */
.drawer-thesis {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* ── Benchmark context line: quietly informative ─────────────── */
.drawer-bench-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.005em;
}
.drawer-bench-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* Drawer body: slightly more comfortable padding so the lead section
   has room to breathe via its negative-margin lift. */
.drawer__body { padding: 12px 36px 40px; }

/* ── Row mini pill (statcast/market-edge inline indicators) ────────
   Light-theme friendly replacement for the dark-theme rgba(255,255,255,.07)
   leftovers. Sits inside table rows next to the player name. */
.row-mini-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: 0;
  margin-left: 4px;
  vertical-align: middle;
  font-feature-settings: 'tnum' 1;
}
.row-mini-pill--green { background: var(--green-soft); color: var(--green); }
.row-mini-pill--gold  { background: var(--gold-soft);  color: var(--gold, #8a5a10); }
.row-mini-pill--red   { background: var(--red-soft);   color: var(--metric-neg); }
.row-mini-pill--blue  { background: var(--blue-soft);  color: #4170c2; }

/* ════════════════════════════════════════════════════════
   COMPARE TRAY, pin players for side-by-side comparison.
   Quiet pin button on every row + floating tray bottom-right.
   Built for decision speed, not dashboard exploration.
   ════════════════════════════════════════════════════════ */

/* ── Pin button: invisible until row hover, persists when pinned ── */
.row-pin-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
  border-radius: 50%;
  padding: 0;
  vertical-align: middle;
  font-family: var(--font);
}
tbody tr:hover .row-pin-btn { opacity: 0.6; }
.row-pin-btn:hover { opacity: 1 !important; color: var(--brand); background: var(--brand-soft); }
.row-pin-btn.is-pinned {
  opacity: 1;
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 700;
}
/* Edge rows: same hover-to-reveal pattern as rankings (R4 from operational audit) */
.edge-row:hover .row-pin-btn { opacity: 0.6; }
.edge-row .row-pin-btn { margin-right: 8px; margin-left: 0; }
/* Explainer header: pin is a persistent affordance (not hover-gated). The
   header is a stable surface where the user is researching one specific
   player, so the compare control should not be hidden. */
.expl-header .row-pin-btn {
  opacity: 0.7;
  margin: 0 4px 0 0;
  width: 22px; height: 22px;
  font-size: 14px;
}
.expl-header .row-pin-btn:hover { opacity: 1; }

/* ── Compare tray: floating bottom-right, slides up when populated ── */
.compare-tray {
  position: fixed;
  bottom: 16px; right: 16px;
  /* Above .explainer-page / .edge-page (both z-index 1500) so the tray
     is reachable from Edge + Explainer per operational-workflow audit (R4). */
  z-index: 1600;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 14px 16px;
  max-width: calc(100vw - 32px);
  animation: feature-rise 280ms var(--ease-settle) both;
}
.compare-tray[hidden] { display: none; }
/* The Draft surface is high-pressure; the tray would compete with the
   active-pick UI. Hide it during live drafts (Draft uses new-tab navigation
   for player research per PRINCIPLES.md §6, so pinning is unlikely there). */
body.draft-active .compare-tray { display: none; }

.compare-tray__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.compare-tray__title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--text-3);
}
.compare-tray__count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-feature-settings: 'tnum' 1;
}
.compare-tray__clear {
  margin-left: auto;
  font-size: 11px !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--text-3) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  transform: none !important;
}
.compare-tray__clear:hover {
  color: var(--ink) !important;
  border-color: var(--text-3) !important;
  background: transparent !important;
  transform: none !important;
}

.compare-tray__cards {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* ── Compare card: compact, signal-first, decision-oriented ── */
.compare-tray__card {
  position: relative;
  min-width: 200px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-settle),
              background var(--t-fast) var(--ease-settle);
}
.compare-tray__card:hover { border-color: var(--hairline-strong); }

/* Best-of-compared highlight, subtle brand-tinted top edge.
   Decision lens: the eye should land on the leader first, then read
   the deltas on the other cards to understand the spread. */
.compare-tray__card--best {
  background: linear-gradient(180deg, rgba(239,68,68,0.08), var(--bg-soft) 60%);
  box-shadow: inset 0 2px 0 var(--brand);
}

/* Delta value, small "+X" / "−X" next to non-best cards' projection */
.compare-tray__delta {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 5px;
  letter-spacing: -0.005em;
  vertical-align: middle;
  font-feature-settings: 'tnum' 1;
}

/* ════════════════════════════════════════════════════════
   SCARCITY STRIP, Draft Room board-state at a glance.
   8 positions, tone-coded by elite-remaining count. Quiet
   operational signal, no chart, no animation, just rhythm.
   ════════════════════════════════════════════════════════ */
.scarcity-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.scarcity-strip:empty { display: none; }

.scarcity-strip__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--text-3);
  white-space: nowrap;
}

.scarcity-strip__cells {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

.scarcity-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 11.5px;
  font-feature-settings: 'tnum' 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-settle),
              border-color var(--t-fast) var(--ease-settle),
              transform var(--t-fast) var(--ease-settle);
}
.scarcity-cell:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.scarcity-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.scarcity-cell:active { transform: translateY(0); }

.scarcity-cell__pos {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.scarcity-cell__count {
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Tone variants, quiet, not loud. The count carries the urgency. */
.scarcity-cell--green .scarcity-cell__count { color: var(--green); }
.scarcity-cell--gold {
  background: var(--gold-soft);
}
.scarcity-cell--gold .scarcity-cell__count { color: var(--gold, #8a5a10); }
.scarcity-cell--gold .scarcity-cell__pos   { color: var(--gold, #8a5a10); }
.scarcity-cell--red {
  background: var(--red-soft);
}
.scarcity-cell--red .scarcity-cell__count { color: var(--red); font-weight: 800; }
.scarcity-cell--red .scarcity-cell__pos   { color: var(--red); }
.scarcity-cell--muted .scarcity-cell__count { color: var(--text-3); }
.scarcity-cell--muted .scarcity-cell__pos   { color: var(--text-3); }

/* Roster-need ring: subtle outline on positions the user still needs */
.scarcity-cell--need {
  box-shadow: inset 0 0 0 1.5px var(--brand-tint);
}
.scarcity-cell--need.scarcity-cell--red {
  box-shadow: inset 0 0 0 1.5px rgba(210,69,47,0.30);
}

/* Filter-active state: cell that matches the current pool filter.
   Brand-tinted background + brand-color count/pos to read as "selected." */
.scarcity-cell--filtered {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.scarcity-cell--filtered .scarcity-cell__count,
.scarcity-cell--filtered .scarcity-cell__pos {
  color: var(--brand);
}

/* Run indicator, small ▲ marker shown when this position is in an active
   market run (≥4 of last 12 picks at this position). Velocity signal,
   complementing the count-based scarcity tone. */
.scarcity-cell__run {
  font-size: 8.5px;
  color: var(--brand);
  margin-left: 2px;
  line-height: 1;
  vertical-align: middle;
  animation: scarcity-run-pulse 2.4s ease-in-out infinite;
}
@keyframes scarcity-run-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}
/* On red cells, the run indicator inherits the red tone so it doesn't
   compete chromatically with the urgency signal. */
.scarcity-cell--red .scarcity-cell__run { color: var(--red); }
.scarcity-cell--gold .scarcity-cell__run { color: var(--gold, #8a5a10); }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .scarcity-cell__run { animation: none; opacity: 0.85; }
}

/* Mobile / narrow: scroll horizontally rather than wrap */
@media (max-width: 920px) {
  .scarcity-strip { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .scarcity-strip__cells {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .scarcity-strip__cells::-webkit-scrollbar { display: none; }
  .scarcity-strip__signal { order: 99; flex-basis: 100%; text-align: center; }
}

/* ── Market signal pill, single high-confidence interpretation.
   Lives at the right edge of the strip when present, silent when not.
   Tone-color matches the urgency (red for collapse, gold for thinning). */
.scarcity-strip__signal {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  background: var(--bg-soft);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  margin-left: auto;
  animation: feature-rise 280ms var(--ease-settle) both;
}
.scarcity-strip__signal--red {
  background: var(--red-soft);
  color: var(--red);
}
.scarcity-strip__signal--gold {
  background: var(--gold-soft);
  color: var(--gold, #8a5a10);
}
.scarcity-strip__signal::before {
  content: '·';
  margin-right: 6px;
  color: currentColor;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════
   ROSTER STRIP, portfolio intelligence in the My Team panel.
   Mirrors the scarcity-strip restraint: small, threshold-gated,
   silent when there's nothing structural to surface.
   ════════════════════════════════════════════════════════ */
.roster-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.roster-strip[hidden] { display: none; }

.roster-strip__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--text-3);
  margin-right: 2px;
  white-space: nowrap;
}

.roster-strip__build {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.roster-strip__build--muted {
  color: var(--text-3);
  background: var(--bg-soft);
}

.roster-strip__risk {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  background: var(--bg-soft);
  color: var(--text-2);
}
.roster-strip__risk--gold { background: var(--gold-soft); color: var(--gold, #8a5a10); }
.roster-strip__risk--red  { background: var(--red-soft);  color: var(--metric-neg); }

/* ── Pick-fit annotation (recommendation card) ─────────────────
   Quiet single-line annotation explaining how THIS pick changes
   THIS roster. Silent when no structural interaction. Sits below
   the thesis as a complementary "roster-context" line. */
.draft-suggest__featured-fit {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draft-suggest__featured-fit::before {
  content: '↳';
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
}
.draft-suggest__featured-fit--green { color: var(--green); }
.draft-suggest__featured-fit--gold  { color: var(--gold, #8a5a10); }
.draft-suggest__featured-fit--red   { color: var(--red); }

/* ── Alternative strategic-path label ────────────────────────
   Replaces the generic whyNot line when an alt offers a distinct
   strategic angle. Reads as "this alt represents [path]" rather than
   "this alt is worse because Y." Quiet, comparative, semantic. */
.draft-suggest__alt-path {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.draft-suggest__alt-path::before {
  content: '◇';
  font-size: 10px;
  opacity: 0.7;
}
.draft-suggest__alt-path--green { color: var(--green); }
.draft-suggest__alt-path--gold  { color: var(--gold, #8a5a10); }
.draft-suggest__alt-path--red   { color: var(--red); }

.compare-tray__close {
  position: absolute;
  top: 4px; right: 6px;
  width: 18px; height: 18px;
  background: transparent;
  border: none;
  font-size: 16px; line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.compare-tray__close:hover { opacity: 1; color: var(--red); }

.compare-tray__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: 6px;
  padding-right: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-tray__meta {
  display: flex; gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.compare-tray__metrics {
  display: flex; gap: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.compare-tray__metric { display: flex; flex-direction: column; gap: 2px; }
.compare-tray__metric-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-3);
}
.compare-tray__metric-v {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.compare-tray__calib {
  margin-top: 10px;
  display: flex; gap: 4px; flex-wrap: wrap;
}

/* ── Mobile: pin to bottom edge full-width ──────────── */
@media (max-width: 600px) {
  .compare-tray {
    bottom: 0; right: 0; left: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-width: 100%;
    border-bottom: none;
  }
  .compare-tray__cards { gap: 8px; }
  .compare-tray__card { min-width: calc(50% - 4px); padding: 10px 12px; }
  .compare-tray__metric-v { font-size: 15px; }
}

/* Pin button always visible on touch, no hover state to rely on */
@media (pointer: coarse) {
  .row-pin-btn { opacity: 0.45; }
}

/* ════════════════════════════════════════════════════════════════════
   PROJECTION EXPLAINER, Phase 1 (refined for trust + scannability)
   Self-contained namespace .expl-* / .explainer-*
   No edits to existing styles. Loaded only on route #/player/{id}.
   ════════════════════════════════════════════════════════════════════ */

body.explainer-active { overflow: hidden; }

/* 2026-05-29: kill EVERY trace of the homepage layer when the player
   profile is open. User reported seeing the original homepage
   "underneath" the profile. Root cause: the body kept painting its
   ambient backdrop (body::before/::after gradient washes + the warm
   radial wash + newsprint horizontal rules) which peeked through the
   transparent edges of the explainer. Force a flat single-color body
   and suppress all pseudo-element backdrops while explainer-active.
   Combined with display:none on every [data-view]/.hero/.home-pulse
   below, there is now nothing between the explainer and the viewport.
   Re-applied after a background makeover process reverted it. */
body.explainer-active {
  background: var(--bg) !important;
  background-image: none !important;
}
body.explainer-active::before,
body.explainer-active::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.explainer-page {
  position: fixed;
  /* `top: var(--nav-h)` (not `inset: 0`) keeps the main site-nav tabs
     visible and clickable above the player-profile (Explainer) route.
     The Explainer's internal `.explainer-topbar` is sticky inside this
     scrolling container, so it pins right below the main tabs. */
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-flyout);
  /* Solid editorial backdrop - was cinematic gradient washes that matched
     the homepage backdrop, making the explainer feel like the same layer
     as home. 2026-05-29: flat --bg so the profile reads as its own
     surface with no visual continuity to the homepage underneath. */
  background: var(--bg, #f4f1ea);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--text, #1f1f1f);
}
.explainer-page[hidden] { display: none; }

.explainer-shell {
  /* Widened to support the Savant-style 3-column dashboard. The center
     column has a comfortable reading measure; the outer columns provide
     identity + advanced context so the page reads in one viewport rather
     than as an endless scroll. */
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px 96px;
}

/* ── Dashboard grid (Baseball Savant-style 3-column layout) ──────────
   Hero stays full-width at the top; below it, three parallel columns
   carry identity (left), the projection core (center), and trajectory /
   advanced context (right). Eliminates the previous vertical sprawl.
   Collapses to two columns at ≤1180px and to a single column at ≤860px. */
.explainer-grid {
  display: grid;
  grid-template-columns:
    minmax(280px, 340px)
    minmax(0, 1fr)
    minmax(300px, 380px);
  gap: 18px;
  align-items: start;
  margin-top: 8px;
}
.explainer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.explainer-col > .expl-card { margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM EDITORIAL FLOW (May 2026 redesign)
   Replaces the 3-column dashboard with a single vertical story.
   Structure: Hero → Context strip → 8 themed sections, each with an
   ALL-CAPS eyebrow + short subtitle + body. Last section ("Advanced
   Model") is collapsible via <details>.
   ════════════════════════════════════════════════════════════════════ */
.explainer-flow {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 760px) {
  .explainer-flow { padding: 0 12px; }
}

/* Identity-context strip directly under the hero. Career stats, portfolio,
   injury , small unbranded cards in a 3-up grid that collapses on narrow. */
.profile-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 36px;
}
@media (max-width: 760px) {
  .profile-context { grid-template-columns: 1fr; }
}
.profile-context > * { margin: 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   ABOVE-THE-FOLD DASHBOARD (Savant-style)
   3-column grid that sits directly below the hero and packs Career Stats
   · Projection Snapshot · Percentile Rankings into a single viewport.
   ════════════════════════════════════════════════════════════════════ */
.profile-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 20px;
  align-items: stretch;            /* user directive: both columns same height */
  margin: 16px auto 48px;
  max-width: 1280px;
  padding: 0 20px;
}
.profile-dashboard--two { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
.profile-dashboard__col {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(11, 17, 32, 0.03);
  min-width: 0;
}
.profile-dashboard__col-head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}

/* Career stats card inside the dashboard , drop the redundant outer chrome
   coming from _renderSavantTopCard so the column itself IS the card. */
.profile-dashboard__col--career > .savant-top-card,
.profile-dashboard__col--career .savant-top-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.profile-dashboard__col--career .savant-top-card__left {
  padding: 0;
}
.profile-dashboard__col--career .savant-card-title {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}

/* Projection-snapshot column , _renderHeadline + _renderDistribution drop
   their inner chrome since the dashboard column already frames them.
   Inner card-within-card chrome from the original Headline/Distribution
   renderers (the "Regular | PLATE APPS | TB/PA" pill row, the boxed Tier/
   Confidence/Bust/Elite mini-cards, the inner Outcome Range card) all get
   neutralized so the column reads as one cohesive stat card. */
.profile-dashboard__col--snapshot > section,
.profile-dashboard__col--snapshot > .expl-card,
.profile-dashboard__col--snapshot .expl-headline,
.profile-dashboard__col--snapshot .expl-distribution,
.profile-dashboard__col--snapshot .expl-card__inner,
.profile-dashboard__col--snapshot [class*='-card'] {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.profile-dashboard__col--snapshot > * + * { margin-top: 16px; }
.profile-dashboard__col--snapshot .expl-card__label {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 10px;
}
/* Inner pill / mini-card boxes that the headline renderer emits , make
   them look like a single inline stat strip rather than nested cards. */
.profile-dashboard__col--snapshot [class*='pill'],
.profile-dashboard__col--snapshot [class*='chip'] {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
}

/* PROJECTION column inner-layout overrides ────────────────────────────────
   The dashboard column is narrow (~500px content width). The headline
   renderer's default 4-up horizontal rail truncates the labels there
   ("TALENT / CONFID / BUST RI / ELITE S"). Re-stack the figure so the big
   number sits on top and the 4 metric cards lay out as a clean 2×2 grid
   underneath , labels get the full width they need. */
.profile-dashboard__col--snapshot .expl-card--headline {
  gap: 8px;
}
.profile-dashboard__col--snapshot .expl-headline-lede {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2, #475569);
  margin-bottom: 2px;
}
.profile-dashboard__col--snapshot .expl-headline-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.profile-dashboard__col--snapshot .expl-headline-figure__num-block {
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0.035), rgba(11, 17, 32, 0.015));
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
}
.profile-dashboard__col--snapshot .expl-headline-num {
  font-size: 42px;
  line-height: 0.9;
}
.profile-dashboard__col--snapshot .expl-headline-band {
  font-size: 10px;
  padding: 2px 7px;
}
.profile-dashboard__col--snapshot .expl-headline-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.profile-dashboard__col--snapshot .expl-stat {
  background: rgba(11, 17, 32, 0.025);
  border: 1px solid rgba(11, 17, 32, 0.05);
  border-radius: var(--r-8);
  padding: 8px 10px;
  gap: 3px;
}
.profile-dashboard__col--snapshot .expl-stat-l {
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.profile-dashboard__col--snapshot .expl-stat-v {
  font-size: 14px;
}

/* OUTCOME RANGE card inside the snapshot column , tighten spacing so it
   doesn't read as a separate section with extra padding above the row. */
.profile-dashboard__col--snapshot #expl-distribution {
  padding: 10px 0 0;
  border-top: 1px dashed rgba(11, 17, 32, 0.08);
}
.profile-dashboard__col--snapshot .expl-dist-summary {
  font-size: 11.5px;
  margin-top: 6px;
}
.profile-dashboard__col--snapshot .expl-dist-l {
  font-size: 10px;
}

/* Percentile column , kill the standalone-card chrome since the dashboard
   column already provides it. Compact the rows so all 7 sections fit. */
.profile-dashboard__col--pctile .pctile-card-standalone {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.profile-dashboard__col--pctile .pctile-card-standalone__head { display: none; }
/* Explicit 2-column grid. The renderer hand-balances sections into two
   .savant-pctile-col wrappers so the browser never has to split a section.
   The bubbles (position: absolute, translate -50%) used to clip when the
   column-balance algorithm broke POWER mid-row; this layout side-steps it. */
.profile-dashboard__col--pctile .pctile-card-standalone__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 0;
  margin-top: 0;
}
.profile-dashboard__col--pctile .savant-pctile-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.profile-dashboard__col--pctile .savant-pctile-section {
  margin: 0;
  padding: 0;
}
.profile-dashboard__col--pctile .savant-pctile-section__label {
  font-size: 10px;
  margin: 0 0 4px;
  padding-bottom: 3px;
}
.profile-dashboard__col--pctile .savant-pctile-row {
  margin-bottom: 3px;
  grid-template-columns: 88px minmax(0, 1fr) 38px;
  gap: 8px;
  font-size: 10.5px;
}
.profile-dashboard__col--pctile .savant-pctile-row__label {
  font-size: 11px;
}
.profile-dashboard__col--pctile .savant-pctile-row__val {
  font-size: 11px;
}
.profile-dashboard__col--pctile .savant-pctile-row__track {
  height: 6px;
}
.profile-dashboard__col--pctile .savant-pctile-row__bubble {
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 10px;
  border-width: 1.5px;
}

/* Below-1024 viewport: stack the dashboard. */
@media (max-width: 1024px) {
  .profile-dashboard,
  .profile-dashboard--two {
    grid-template-columns: 1fr;
  }
  .profile-dashboard__col--pctile .pctile-card-standalone__body {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .profile-dashboard,
  .profile-dashboard--two {
    grid-template-columns: 1fr;
    padding: 0 12px;
    gap: 14px;
  }
  .profile-dashboard__col--pctile .pctile-card-standalone__body {
    grid-template-columns: 1fr 1fr;
  }
}

.profile-section {
  margin: 0 0 28px;
  scroll-margin-top: 90px;  /* in-page anchors land below the sticky topbar */
}
.profile-section:last-child { margin-bottom: 0; }

.profile-section__head {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.08);
}

/* The first two sections (PROJECTION SNAPSHOT, SKILL PROFILE) sit above
   the fold per user directive , pack them with the tightest spacing so
   both fit in a 900px viewport without scroll. */
.profile-section--snapshot,
.profile-section--skill {
  margin-bottom: 18px;
}
.profile-section--snapshot .profile-section__head,
.profile-section--skill .profile-section__head {
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.profile-section__head--summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.profile-section__head--summary::-webkit-details-marker { display: none; }

.profile-section__eyebrow {
  font: 700 11px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 6px;
}
.profile-section__sub {
  font: 500 16px/1.35 "Geist", system-ui, sans-serif;
  letter-spacing: -0.012em;
  color: var(--text-1, #0b1120);
}
.profile-section__head--summary .profile-section__eyebrow,
.profile-section__head--summary .profile-section__sub {
  margin-top: 0; margin-bottom: 0;
}
.profile-section__chevron {
  margin-left: auto;
  color: var(--text-3, #98989f);
  font-size: 14px;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.profile-section__details[open] .profile-section__chevron {
  transform: rotate(-180deg);
}

.profile-section__body { display: flex; flex-direction: column; gap: 18px; }
.profile-section__body > * { margin: 0 !important; }

/* The standalone percentile card already has its own white-card chrome;
   inside Skill Profile we drop the doubled card so the section header is
   the only outer chrome. */
.profile-section .pctile-card-standalone {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.profile-section .pctile-card-standalone__head { display: none; }

.profile-section--advanced .profile-section__body {
  padding-top: 18px;
}

/* Hide the legacy 3-column grid when the flow is rendered (defensive ,
   the new layout doesn't emit .explainer-grid at all, but keeps responsive
   reset clean in case any cached CSS lingers). */
.explainer-grid { display: none; }
@media (max-width: 1180px) {
  .explainer-grid {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }
  .explainer-col--right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 860px) {
  .explainer-grid {
    grid-template-columns: 1fr;
  }
  .explainer-col--right {
    grid-template-columns: 1fr;
  }
}

/* ── Top bar (sticky, restrained) ────────────────────────────────── */
.explainer-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #faf9f5);
  padding: 18px 0 14px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.explainer-topbar::after {
  content: '';
  position: absolute;
  left: -28px; right: -28px; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border, #e8e4d8) 12%, var(--border, #e8e4d8) 88%, transparent);
}

.explainer-back {
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) ease;
}
.explainer-back:hover { color: var(--text, #1f1f1f); }

.explainer-nav {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.explainer-nav a {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: var(--r-6);
  letter-spacing: 0.005em;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.explainer-nav a:hover {
  color: var(--text, #1f1f1f);
  background: rgba(0, 0, 0, 0.04);
}

.explainer-main { padding-top: 4px; }

/* ── Limited profile (no cascade row) - 2026-05-27 ─────────────────────
   Used when _renderExplainer hits the player._limited branch: hero +
   honesty banner + career stats table. The page must read as deliberate
   ("we chose not to project this player") rather than broken. */
.profile-limited-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 18px 0 22px;
  padding: 14px 18px;
  background: rgba(94, 106, 210, 0.06);
  border: 1px solid rgba(94, 106, 210, 0.18);
  border-radius: var(--r-10);
  color: var(--text, #1f1f1f);
}
.profile-limited-banner__icon {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(94, 106, 210, 0.18);
  color: #3e4aa6;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.profile-limited-banner__title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #3e4aa6;
  margin-bottom: 3px;
}
.profile-limited-banner__copy {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text, #1f1f1f);
}

.profile-limited-stats {
  margin: 8px 0 40px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border, #e8e4d8);
}
.profile-limited-stats__head { margin-bottom: 12px; }
.profile-limited-stats__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  margin-bottom: 2px;
}
.profile-limited-stats__sub {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
}
.profile-limited-stats__scroll { overflow-x: auto; }
.profile-limited-stats__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.profile-limited-stats__table th,
.profile-limited-stats__table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--hairline, #f0ece1);
  white-space: nowrap;
}
.profile-limited-stats__table th:first-child,
.profile-limited-stats__table td:first-child { text-align: left; }
.profile-limited-stats__table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  background: rgba(0, 0, 0, 0.015);
  position: sticky;
  top: 0;
}
.profile-limited-stats__table tbody tr:hover { background: rgba(94, 106, 210, 0.04); }

.profile-limited-empty {
  margin: 40px 0;
  padding: 32px;
  text-align: center;
  color: var(--muted, #6b6b6b);
  background: var(--surface, #faf8f1);
  border: 1px dashed var(--border, #e8e4d8);
  border-radius: var(--r-10);
  font-size: 14px;
}

.explainer-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted, #6b6b6b);
  font-size: 14px;
  letter-spacing: -0.005em;
}
.explainer-loading a { color: var(--brand, #4170c2); }

/* ── Header (player identity) ────────────────────────────────────── */
.expl-header {
  margin: 0 0 32px;
}
.expl-name {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--text, #1f1f1f);
  line-height: 1.05;
}
.expl-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.expl-badge {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--muted, #6b6b6b);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.expl-badge--muted { border-color: transparent; color: var(--muted, #6b6b6b); }
.expl-badge--injury { border-color: #e8c5c5; color: var(--sev-critical); background: rgba(232, 197, 197, 0.18); }

/* ── Card frame (premium bento, matches home page aesthetic) ────────
   Each expl-card is now a floating card with soft shadow + squircle radius
   instead of hairline-separated sections. Reads like a bento tile grid
   stacked vertically, premium, editorial, room to breathe. */
.expl-card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfb 100%);
  border: 1px solid rgba(11, 17, 32, 0.05);
  border-radius: var(--r-16);
  padding: 20px 24px;
  margin: 0 0 12px;
  scroll-margin-top: 80px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.02),
    0 4px 12px -6px rgba(11, 17, 32, 0.05);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.expl-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(11, 17, 32, 0.025),
    0 12px 28px -8px rgba(11, 17, 32, 0.08);
}
/* Hairline accent ribbon, same treatment as home surface cards */
.expl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 17, 32, 0.06), transparent);
  pointer-events: none;
}
.expl-card:first-of-type { padding-top: 26px; }

.expl-card--quiet {
  background: rgba(11, 17, 32, 0.015);
  border-color: rgba(11, 17, 32, 0.04);
  box-shadow: none;
}
.expl-card--footnote {
  border: 0;
  background: transparent;
  padding: 18px 0 12px;
  margin-top: 4px;
  box-shadow: none;
}
.expl-card--footnote::before { display: none; }

.expl-card__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  margin: 0 0 18px;
  font-weight: 700;
}

/* ── Injury note card (Phase 5: calm, non-medical, uncertainty-aware) ─── */
.expl-card--injury {
  border-top: 0;
  padding: 14px 0 18px;
  margin-top: -4px;
}
.expl-injury-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2, #6b6b6b);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
.expl-injury-source {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  letter-spacing: -0.005em;
  font-weight: 400;
}

/* ── Headline card (trust-first hierarchy) ──────────────────────── */
.expl-card--headline {
  border-top: 0;
  padding: 0 0 4px;
}
/* Headline card, compact horizontal layout. Lede on top, then a single
   row with: 411 number + range chip on the left, 4 metric chips on the
   right. Fits the page horizontally without the previous vertical sprawl. */
.expl-card--headline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.expl-headline-lede {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2, #475569);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.003em;
}
.expl-headline-lede strong {
  font-weight: 700;
  color: var(--brand, #4170c2);
}

/* Workload card, formerly a comma-jumbled sentence ("Workload tier ace_sp
   (~135 IP, 236 K projected)"). Now a structured chip strip with a role
   badge and a clear key/value chip for each metric. Human-readable role
   labels are produced by _workloadTierLabel() in app.js. */
.expl-wl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-12);
  background: linear-gradient(180deg,
    rgba(11, 17, 32, 0.035),
    rgba(11, 17, 32, 0.015));
  border: 1px solid rgba(11, 17, 32, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.expl-wl-role {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.012em;
  border-radius: 999px;
  color: #fff;
  background: var(--brand, #4170c2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 1px 2px rgba(11, 17, 32, 0.12);
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.expl-wl-role--sp  { background: linear-gradient(135deg, #3a6bbf, #2e549a); }
.expl-wl-role--rp  { background: linear-gradient(135deg, #b35a2a, #8e421d); }
.expl-wl-role--bat { background: linear-gradient(135deg, #2d8b66, #1f6a4c); }
.expl-wl-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.expl-wl-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(11, 17, 32, 0.06);
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.expl-wl-chip__l {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, #9a9690);
}
.expl-wl-chip__v {
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* Figure: number-block (left) + 4-up metric strip (right) on one row. */
.expl-headline-figure {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
  margin: 0;
}
.expl-headline-figure__num-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.expl-headline-num {
  font-size: 48px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.expl-headline-band {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2, #475569);
  background: rgba(11, 17, 32, 0.04);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* SINGLE ROW of 4 metric chips, much more horizontal density. */
.expl-headline-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.expl-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(11, 17, 32, 0.025);
  border-radius: var(--r-8);
  border: 1px solid rgba(11, 17, 32, 0.04);
  min-width: 0;
}
.expl-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, #9a9690);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expl-stat-v {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
@media (max-width: 860px) {
  .expl-headline-figure {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .expl-headline-rail { grid-template-columns: repeat(2, 1fr); }
  .expl-headline-num { font-size: 40px; }
}

/* Build #12-B (F7): quiet "?" reference link next to each headline-rail
   stat label. Opens cascade methodology page at the specific anchor in a
   new tab. Visual posture: secondary, infrastructural, never competing
   with the stat value. Inherits .expl-stat-l's uppercase context so the
   "?" reads as a typographic footnote, not a button. */
/* Quiet "?", no border, just a small muted glyph that brightens on hover.
   Previous bordered box read as a clunky button next to every label. */
.expl-stat-ref {
  display: inline-block;
  margin-left: 3px;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted, #9a9690);
  text-decoration: none;
  vertical-align: middle;
  opacity: 0.5;
  transition: opacity 120ms ease, color 120ms ease;
}
.expl-stat-ref:hover,
.expl-stat-ref:focus {
  opacity: 1;
  color: var(--text, #1f1f1f);
  outline: none;
}
.expl-stat-ref:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* Build #13: composite-narrative footnote. Quiet citation-style line at
   the bottom of prose-synthesis Explainer sections (Why / Tension /
   Sensitivity / History / Similar). Visual posture: secondary, scholarly,
   never competing with the section content. Italicized to read as
   meta-commentary, not as additional data.

   Build #24-D1b consolidation: shares rules with .edge-composite-note
   (Build #24-A) via grouped selectors below. Both class names retained
   for surface-scoped semantic naming (provenance value); only the rule
   duplication is removed. Per PRINCIPLES §16, surface-specific class
   naming is preserved even when visual posture is intentionally identical. */
.expl-composite-note,
.edge-composite-note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(154, 150, 144, 0.3);
  font-size: 11px;
  font-style: italic;
  color: var(--muted, #9a9690);
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.expl-composite-note a,
.edge-composite-note a {
  color: var(--muted, #9a9690);
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.expl-composite-note a:hover,
.expl-composite-note a:focus,
.edge-composite-note a:hover,
.edge-composite-note a:focus {
  color: var(--text, #1f1f1f);
  text-decoration-color: var(--hairline-strong, rgba(31, 31, 31, 0.5));
  outline: none;
}
.expl-composite-note a:focus-visible,
.edge-composite-note a:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* ── Distribution ────────────────────────────────────────────────── */
.expl-dist-bar {
  position: relative;
  height: 14px;
  margin: 6px 0 16px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-3);
}
.expl-dist-band {
  position: absolute;
  top: 4px; bottom: 4px;
  background: rgba(65, 112, 194, 0.15);
  border-radius: 2px;
}
.expl-dist-iqr {
  position: absolute;
  top: 2px; bottom: 2px;
  background: rgba(65, 112, 194, 0.42);
  border-radius: 2px;
}
.expl-dist-marker--med {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--text, #1f1f1f);
  transform: translateX(-1px);
  border-radius: 1px;
}
.expl-dist-summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.expl-dist-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #9a9690);
  margin-right: 4px;
  font-weight: 600;
}
.expl-dist-sep {
  color: var(--muted, #c8c4bc);
}

/* ── Why-this-projection ─────────────────────────────────────────── */
.expl-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.expl-why-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
}
.expl-why-item + .expl-why-item {
  border-top: 1px solid rgba(232, 228, 216, 0.55);
}
.expl-why-rule {
  width: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.expl-why-item--pos .expl-why-rule { background: var(--metric-pos-soft); }
.expl-why-item--neg .expl-why-rule { background: var(--metric-neg-soft); }
.expl-why-body { flex: 1; min-width: 0; }
.expl-why-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 4px;
}
.expl-why-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
}
.expl-why-value {
  font-size: 13px;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.expl-why-reason {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  line-height: 1.5;
  letter-spacing: -0.002em;
}

.expl-why-more {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 228, 216, 0.55);
}
.expl-why-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  font-weight: 500;
  padding: 4px 0;
  letter-spacing: 0.005em;
  user-select: none;
}
.expl-why-more > summary::-webkit-details-marker { display: none; }
.expl-why-more > summary::before {
  content: '+';
  display: inline-block;
  margin-right: 6px;
  font-weight: 600;
}
.expl-why-more[open] > summary::before { content: '-'; }
.expl-why-list--quiet .expl-why-label { font-weight: 500; font-size: 13px; }
.expl-why-list--quiet .expl-why-value { font-size: 12px; }
.expl-why-list--quiet .expl-why-reason { font-size: 12px; }

/* ── Tension panel (calm, not alarming) ──────────────────────────── */
.expl-tension-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.expl-tension-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: flex-start;
}
.expl-tension-item + .expl-tension-item {
  border-top: 1px solid rgba(232, 228, 216, 0.55);
}
.expl-tension-sev {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: var(--r-3);
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
  align-self: flex-start;
  margin-top: 1px;
}
.expl-tension-item--high .expl-tension-sev { background: rgba(183, 99, 77, 0.14); color: var(--sev-critical); }
.expl-tension-item--med  .expl-tension-sev { background: rgba(192, 144, 60, 0.15); color: var(--sev-urgent); }
.expl-tension-item--low  .expl-tension-sev { background: rgba(0, 0, 0, 0.05); color: var(--muted, #6b6b6b); }
.expl-tension-item--caveat .expl-tension-sev { background: rgba(65, 112, 194, 0.12); color: var(--sev-notable); }
.expl-tension-text {
  font-size: 13px;
  color: var(--text, #1f1f1f);
  line-height: 1.5;
  letter-spacing: -0.002em;
}
.expl-tension-empty {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.002em;
}

/* ── Sensitivity (lever bars) ────────────────────────────────────── */
.expl-lever-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.expl-lever-item {
  padding: 14px 0 12px;
}
.expl-lever-item + .expl-lever-item {
  border-top: 1px solid rgba(232, 228, 216, 0.55);
}
.expl-lever-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.expl-lever-text {
  font-size: 13.5px;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
}
.expl-lever-delta {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -0.005em;
}
.expl-lever-delta--pos { color: var(--metric-pos); }
.expl-lever-delta--neg { color: var(--sev-critical); }
.expl-lever-unit {
  font-weight: 500;
  font-size: 11px;
  color: var(--muted, #8a8680);
  margin-left: 1px;
}
.expl-lever-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  overflow: hidden;
}
.expl-lever-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--t-base) ease-out;
}
.expl-lever-bar-fill--pos { background: var(--metric-pos-soft); }
.expl-lever-bar-fill--neg { background: var(--metric-neg-soft); }

/* ── History panel ───────────────────────────────────────────────── */
.expl-history-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.expl-history-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.expl-history-badge--up { background: rgba(74, 139, 91, 0.16); color: var(--metric-pos); }
.expl-history-badge--down { background: rgba(183, 99, 77, 0.16); color: var(--sev-critical); }
.expl-history-badge--flat { background: rgba(0, 0, 0, 0.05); color: var(--muted, #8a8680); }
.expl-history-copy {
  font-size: 13px;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
}

/* ── Similar comps ───────────────────────────────────────────────── */
.expl-similar-note {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  margin: 0 0 14px;
  line-height: 1.55;
  letter-spacing: -0.002em;
}
.expl-comp-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.expl-comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-6);
  padding: 7px 11px;
  font-size: 12.5px;
  color: var(--text, #1f1f1f);
  text-decoration: none;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
  letter-spacing: -0.005em;
}
.expl-comp-chip:hover {
  border-color: var(--brand, #4170c2);
  background: rgba(65, 112, 194, 0.04);
}
.expl-comp-name { font-weight: 600; }
.expl-comp-tier {
  font-size: 10px;
  color: var(--muted, #8a8680);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── DontKnow (footnote feel) ────────────────────────────────────── */
.expl-dk-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  margin-bottom: 10px;
  font-weight: 600;
}
.expl-dk-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.expl-dk-list li {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
  letter-spacing: -0.002em;
  font-style: italic;
}
.expl-dk-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--muted, #c8c4bc);
  font-style: normal;
  font-weight: 700;
}

/* ── Cascade drill-down (quiet, advanced) ────────────────────────── */
.expl-cascade-toggle > summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  padding: 8px 0;
  list-style: none;
  user-select: none;
  letter-spacing: 0.005em;
  font-weight: 500;
}
.expl-cascade-toggle > summary::-webkit-details-marker { display: none; }
.expl-cascade-toggle > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform var(--t-fast) ease;
  font-size: 10px;
  vertical-align: 1px;
}
.expl-cascade-toggle[open] > summary::before { transform: rotate(90deg); }
.expl-cascade-body { padding-top: 12px; }

.expl-c-group {
  border-top: 1px solid rgba(232, 228, 216, 0.55);
  padding: 8px 0;
}
.expl-c-group:first-child { border-top: none; }
.expl-c-group > summary {
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text, #1f1f1f);
  padding: 6px 0;
  list-style: none;
}
.expl-c-group > summary::-webkit-details-marker { display: none; }
.expl-c-group > summary::before {
  content: '+';
  display: inline-block;
  margin-right: 8px;
  color: var(--muted, #9a9690);
  font-weight: 600;
}
.expl-c-group[open] > summary::before { content: '-'; }
.expl-c-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  margin-top: 4px;
}
.expl-c-table tr { border-top: 1px solid rgba(232, 228, 216, 0.4); }
.expl-c-table tr:first-child { border-top: 0; }
.expl-c-k { padding: 5px 12px 5px 0; color: var(--muted, #8a8680); white-space: nowrap; vertical-align: top; width: 1%; }
.expl-c-v { padding: 5px 0; color: var(--text, #1f1f1f); word-break: break-word; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .explainer-shell { padding: 0 18px 60px; }
  .explainer-nav { display: none; }
  .expl-name { font-size: 26px; }
  .expl-headline-num { font-size: 56px; }
  .expl-headline-rail { gap: 18px; }
  .expl-headline-figure { gap: 12px; }
  .expl-card { padding-top: 22px; }
  .expl-card__label { margin-bottom: 14px; }
}

/* ── Statcast trajectory card ──────────────────────────────────────
   Year-over-year skill trajectory: for each predictive Statcast metric,
   shows the latest value, a tiny sparkline of the last few seasons, and
   a colored arrow indicating direction-of-change with magnitude. Green
   means the change moves the player's profile in the desired direction
   (e.g. K% up for pitchers, xwOBA up for batters); red means the
   opposite. Polarity is set by _statcastTrajectory() in app.js. */
.expl-statcast-traj { }
.expl-st-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.expl-st-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.012em;
  border-radius: 999px;
  color: #fff;
}
.expl-st-pill--pos  { background: linear-gradient(135deg, #2d8b66, #1f6a4c); }
.expl-st-pill--neg  { background: linear-gradient(135deg, #c2410c, #9a3208); }
.expl-st-pill--flat { background: linear-gradient(135deg, #64748b, #475569); }
.expl-st-window {
  font-size: 10.5px;
  color: var(--muted, #94a3b8);
  letter-spacing: 0.005em;
}
.expl-st-mult {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2, #475569);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  background: rgba(11, 17, 32, 0.03);
  border-radius: var(--r-6);
  border: 1px solid rgba(11, 17, 32, 0.05);
}
.expl-st-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.expl-st-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto 60px auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(11, 17, 32, 0.02);
  border-radius: var(--r-8);
  border: 1px solid rgba(11, 17, 32, 0.04);
  font-size: 12px;
}
.expl-st-row--pos { background: rgba(45, 139, 102, 0.05); border-color: rgba(45, 139, 102, 0.15); }
.expl-st-row--neg { background: rgba(194, 65, 12, 0.05); border-color: rgba(194, 65, 12, 0.15); }
.expl-st-label {
  font-weight: 600;
  color: var(--text, #0b1120);
  letter-spacing: -0.005em;
}
.expl-st-current {
  font-weight: 700;
  color: var(--text, #0b1120);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.expl-st-spark {
  width: 60px;
  height: 14px;
  display: block;
}
.expl-st-arrow {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.expl-st-arrow--pos  { color: #16a34a; }
.expl-st-arrow--neg  { color: #dc2626; }
.expl-st-arrow--flat { color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════════
   MARKET EDGE, Phase 1 styles
   Namespace: .edge-*. Reuses the explainer's calm visual language.
   Loaded only when route is #/edge. No edits to existing styles.
   ════════════════════════════════════════════════════════════════════ */

body.edge-active { overflow: hidden; }

.edge-page {
  position: fixed;
  inset: 0;
  z-index: var(--z-flyout);
  background: var(--bg, #faf9f5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--text, #1f1f1f);
}
.edge-page[hidden] { display: none; }

.edge-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px 96px;
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.edge-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #faf9f5);
  padding: 18px 0 14px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.edge-topbar::after {
  content: '';
  position: absolute;
  left: -32px; right: -32px; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border, #e8e4d8) 12%, var(--border, #e8e4d8) 88%, transparent);
}
.edge-back {
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) ease;
}
.edge-back:hover { color: var(--text, #1f1f1f); }
.edge-nav {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.edge-nav a {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: var(--r-6);
  letter-spacing: 0.005em;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.edge-nav a:hover {
  color: var(--text, #1f1f1f);
  background: rgba(0, 0, 0, 0.04);
}

.edge-main { padding-top: 4px; }
.edge-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted, #6b6b6b);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* ── Intro + footer ──────────────────────────────────────────────── */
.edge-intro {
  margin: 0 0 28px;
}
.edge-intro-line {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text, #1f1f1f);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  max-width: 620px;
}
.edge-intro-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #9a9690);
  margin: 10px 0 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Build #17 (G3 partial fix): Edge intro methodology link. Sits beside
   the freshness chip; same muted/scholarly posture as other Build #14+
   methodology references. */
.edge-intro-ref {
  color: var(--muted, #9a9690);
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
  font-weight: 600;
}
.edge-intro-ref:hover,
.edge-intro-ref:focus {
  color: var(--text, #1f1f1f);
  text-decoration-color: var(--hairline-strong, rgba(31, 31, 31, 0.5));
  outline: none;
}
.edge-intro-ref:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* ── Freshness chip (operational-integrity audit Tier 1) ─────────────
   Single calm style. Text carries the information, not the color.
   No dots, no percentages, no warning hues, no telemetry aesthetics.
   Voice is the same as uncertainty language: measured, quiet, specific. */
.freshness-chip {
  font-family: var(--font, inherit);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3, #8a8680);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-transform: none;
}
/* Explainer header places the chip alongside badges; nudge spacing down a hair. */
.expl-meta .freshness-chip {
  font-size: 11px;
  margin-left: auto;     /* push to the right, away from badges */
  padding-left: 12px;
  color: var(--text-3, #8a8680);
}
/* Draft topbar: chip lives between meta and Settings button. */
.draft-freshness {
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
  white-space: nowrap;
  padding: 0 4px;
}
.draft-freshness .freshness-chip { color: inherit; }

/* Build #18 (G3 partial fix): Draft topbar methodology citation.
   Same posture as .edge-intro-ref, citation-style, muted, never
   button-like. Sits between the freshness chip and Settings button. */
.draft-methodology-ref {
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
  white-space: nowrap;
  padding: 0 4px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.draft-methodology-ref:hover,
.draft-methodology-ref:focus {
  color: var(--text, #1f1f1f);
  text-decoration-color: var(--hairline-strong, rgba(31, 31, 31, 0.5));
  outline: none;
}
.draft-methodology-ref:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* Inline source-absence note in Edge section descriptions. Calm -
   same muted hue as the desc text itself, just slightly de-emphasized
   so it reads as a footnote on the same line. */
.edge-section-note {
  color: var(--text-3, #8a8680);
  font-size: 0.92em;
}
.edge-footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #e8e4d8);
}
.edge-footer p {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  max-width: 680px;
}

/* ── Filter strip ────────────────────────────────────────────────── */
.edge-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 36px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.018);
  border-radius: var(--r-10);
}
.edge-filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.edge-filter-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  font-weight: 600;
  min-width: 76px;
}
.edge-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.edge-filter-chip {
  background: transparent;
  border: 1px solid var(--border, #e8e4d8);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  letter-spacing: 0.005em;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.edge-filter-chip:hover {
  color: var(--text, #1f1f1f);
  border-color: var(--text, #1f1f1f);
}
.edge-filter-chip.is-active {
  background: var(--text, #1f1f1f);
  border-color: var(--text, #1f1f1f);
  color: var(--bg, #faf9f5);
}
.edge-filter-clear {
  background: transparent;
  border: 0;
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  padding: 5px 8px;
  letter-spacing: 0.005em;
}
.edge-filter-clear:hover { color: var(--text, #1f1f1f); }

/* ── Sections ────────────────────────────────────────────────────── */
.edge-sections {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.edge-section {
  scroll-margin-top: 84px;
}
.edge-section-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.edge-section-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #9a9690);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  width: 22px;
  flex-shrink: 0;
  padding-top: 2px;
}
.edge-section-titles { flex: 1; min-width: 0; }
.edge-section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--text, #1f1f1f);
  line-height: 1.25;
}
.edge-section-desc {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.002em;
  max-width: 560px;
}
.edge-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #9a9690);
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-4);
  padding: 4px 9px;
  align-self: flex-start;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.edge-section-empty {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  font-style: italic;
  padding: 16px 0;
  letter-spacing: -0.002em;
}

/* Build #24-A composite-ranking footnote rules consolidated in
   Build #24-D1b, see the .expl-composite-note / .edge-composite-note
   grouped-selector block alongside .expl-stat-ref. The .edge-composite-note
   class name is preserved (used by app.js) and remains Edge-scoped for
   semantic naming; only the rule duplication was removed. */

/* ── Table ───────────────────────────────────────────────────────── */
.edge-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.edge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.edge-table thead tr {
  border-bottom: 1px solid var(--border, #e8e4d8);
}
.edge-table th {
  text-align: right;
  padding: 8px 12px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #9a9690);
  white-space: nowrap;
}
.edge-table th.edge-c--player { text-align: left; padding-left: 0; }
.edge-table td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(232, 228, 216, 0.45);
  font-variant-numeric: tabular-nums;
}
.edge-table tr:last-child td { border-bottom: 0; }
.edge-table tr:hover td {
  background: rgba(0, 0, 0, 0.018);
}

/* Column kinds */
.edge-c--num { text-align: right; white-space: nowrap; min-width: 78px; }
.edge-c--dist { text-align: left; padding-left: 12px !important; padding-right: 0 !important; width: 90px; }
.edge-c--player { padding-left: 0 !important; min-width: 240px; }
.edge-c--conf { min-width: 168px; }

.edge-c-sub {
  display: block;
  font-size: 9.5px;
  color: var(--muted, #aaa5a0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  font-weight: 500;
  font-variant-numeric: normal;
}

.edge-val { font-weight: 700; font-size: 14px; }
.edge-val--pos  { color: var(--metric-pos); }
.edge-val--neg  { color: var(--sev-critical); }
.edge-val--neu  { color: var(--text, #1f1f1f); }
.edge-val--good { color: var(--metric-pos); }
.edge-val--warn { color: var(--sev-urgent); }
.edge-val--low  { color: var(--sev-critical); }

/* Player cell */
.edge-player-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f1f1f);
  text-decoration: none;
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 4px;
}
.edge-player-link:hover {
  color: var(--brand, #4170c2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.edge-player-meta {
  display: inline-flex;
  gap: 4px;
}
.edge-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8a8680);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-4);
  padding: 2px 7px;
  font-variant-numeric: normal;
}
.edge-chip--tier {
  color: var(--sev-notable);
  background: rgba(65, 112, 194, 0.10);
}

/* Mini distribution chip */
.edge-dist {
  display: inline-block;
  width: 70px;
  vertical-align: middle;
}
.edge-dist-bar {
  position: relative;
  display: block;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}
.edge-dist-band {
  position: absolute;
  top: 1px; bottom: 1px;
  background: rgba(65, 112, 194, 0.32);
  border-radius: 2px;
}
.edge-dist-marker {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--text, #1f1f1f);
  transform: translateX(-1px);
  border-radius: 1px;
}

/* Confidence layers (Section 6) */
.edge-c--conf { padding: 12px 12px; }
.edge-conflayer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.edge-conflayer:last-child { margin-right: 0; }
.edge-conflayer-l {
  font-size: 10px;
  color: var(--muted, #8a8680);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 10px;
  font-variant-numeric: normal;
}
.edge-conflayer-bar {
  display: inline-block;
  width: 26px;
  height: 5px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.edge-conflayer-fill {
  display: block;
  height: 100%;
  background: var(--text, #1f1f1f);
  border-radius: 2px;
}

/* Show more */
.edge-showmore {
  background: transparent;
  border: 1px solid var(--border, #e8e4d8);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  margin-top: 14px;
  letter-spacing: 0.005em;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.edge-showmore:hover {
  border-color: var(--text, #1f1f1f);
  color: var(--text, #1f1f1f);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .edge-shell { padding: 0 16px 60px; }
  .edge-topbar::after { left: -16px; right: -16px; }
  .edge-nav { display: none; }
  .edge-intro-line { font-size: 15px; }
  .edge-sections { gap: 40px; }
  .edge-section-title { font-size: 16px; }
  .edge-filter-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .edge-filter-label { min-width: 0; }
  .edge-table { font-size: 12px; }
  .edge-table th, .edge-table td { padding: 10px 8px; }
  .edge-c--player { min-width: 180px; }
}

/* ════════════════════════════════════════════════════════════════════
   MARKET EDGE, Phase 1 refinement (section identity + signal weight)
   Additive only. Existing .edge-* rules above remain in effect.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section tag in header (psychological framing) ──────────────────── */
.edge-section-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  margin-left: 10px;
  vertical-align: middle;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-4);
  font-variant-numeric: normal;
  line-height: 1.4;
  position: relative;
  top: -2px;
}

/* ── Per-section tone accents ────────────────────────────────────────
   Each tone tints the section number, the tag, and an optional
   left rule on the table. Restrained, never loud. */

.edge-section--conviction  .edge-section-num,
.edge-section--conviction  .edge-section-tag { color: var(--sev-notable); }
.edge-section--conviction  .edge-section-tag { background: rgba(65, 112, 194, 0.10); }

.edge-section--fragile     .edge-section-num,
.edge-section--fragile     .edge-section-tag { color: var(--sev-urgent); }
.edge-section--fragile     .edge-section-tag { background: rgba(192, 144, 60, 0.13); }

.edge-section--quiet       .edge-section-num,
.edge-section--quiet       .edge-section-tag { color: var(--metric-pos); }
.edge-section--quiet       .edge-section-tag { background: rgba(74, 139, 91, 0.13); }

.edge-section--volatile    .edge-section-num,
.edge-section--volatile    .edge-section-tag { color: var(--tone-volatile); }
.edge-section--volatile    .edge-section-tag { background: rgba(28, 122, 140, 0.10); }

.edge-section--overconf    .edge-section-num,
.edge-section--overconf    .edge-section-tag { color: var(--sev-critical); }
.edge-section--overconf    .edge-section-tag { background: rgba(183, 99, 77, 0.12); }

.edge-section--mismatch    .edge-section-num,
.edge-section--mismatch    .edge-section-tag { color: var(--tone-mismatch); }
.edge-section--mismatch    .edge-section-tag { background: rgba(115, 64, 163, 0.10); }

.edge-section--instability .edge-section-num,
.edge-section--instability .edge-section-tag { color: var(--tone-instability); }
.edge-section--instability .edge-section-tag { background: rgba(74, 106, 135, 0.10); }

/* ── Empty state (calm, informative, not broken) ──────────────────── */
.edge-section--empty .edge-section-empty {
  background: rgba(0, 0, 0, 0.018);
  border-radius: var(--r-8);
  padding: 22px 24px;
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  line-height: 1.6;
  font-style: normal;
  letter-spacing: -0.002em;
  max-width: 640px;
  border-left: 2px solid rgba(0, 0, 0, 0.06);
}
.edge-section--volatile.edge-section--empty .edge-section-empty {
  border-left-color: rgba(28, 122, 140, 0.35);
}
.edge-section--conviction.edge-section--empty .edge-section-empty {
  border-left-color: rgba(65, 112, 194, 0.35);
}
.edge-section--fragile.edge-section--empty .edge-section-empty {
  border-left-color: rgba(192, 144, 60, 0.35);
}
.edge-section--quiet.edge-section--empty .edge-section-empty {
  border-left-color: rgba(74, 139, 91, 0.35);
}
.edge-section--overconf.edge-section--empty .edge-section-empty {
  border-left-color: rgba(183, 99, 77, 0.35);
}
.edge-section--mismatch.edge-section--empty .edge-section-empty {
  border-left-color: rgba(115, 64, 163, 0.35);
}
.edge-section--instability.edge-section--empty .edge-section-empty {
  border-left-color: rgba(74, 106, 135, 0.35);
}

/* ── Primary column emphasis (the section's defining signal) ──────── */
.edge-c--head-primary {
  color: var(--text, #1f1f1f);
  font-weight: 700;
}
.edge-c--primary {
  background: rgba(0, 0, 0, 0.012);
}
.edge-c--primary .edge-val {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.edge-c--primary {
  /* When the primary cell isn't a colored .edge-val (e.g. talent grade) */
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.edge-c--primary .edge-c-sub {
  font-size: 9.5px;
  color: var(--muted, #9a9690);
}

/* Tone-tinted primary columns reinforce section identity */
.edge-section--conviction  .edge-c--primary { background: rgba(65, 112, 194, 0.04); }
.edge-section--fragile     .edge-c--primary { background: rgba(192, 144, 60, 0.06); }
.edge-section--quiet       .edge-c--primary { background: rgba(74, 139, 91, 0.05); }
.edge-section--volatile    .edge-c--primary { background: rgba(28, 122, 140, 0.05); }
.edge-section--overconf    .edge-c--primary { background: rgba(183, 99, 77, 0.05); }
.edge-section--mismatch    .edge-c--primary { background: rgba(115, 64, 163, 0.05); }
.edge-section--instability .edge-c--primary { background: rgba(74, 106, 135, 0.05); }

/* Section 5 (Overconfidence) → primary column shows LOW confidence.
   Override default neu→good ramp so primary cell flags weakness. */
.edge-section--overconf .edge-c--primary .edge-val--neu,
.edge-section--overconf .edge-c--primary .edge-val--good {
  color: var(--sev-critical);
}

/* ── Reduce visual weight of non-primary metrics ────────────────────── */
.edge-c--num:not(.edge-c--primary) .edge-val {
  font-size: 13.5px;
  font-weight: 600;
}
.edge-c--num:not(.edge-c--primary) {
  color: var(--muted, #6b6b6b);
}
.edge-c--num:not(.edge-c--primary) .edge-c-sub {
  opacity: 0.85;
}

/* ── Confidence layers (refined for gap visibility) ──────────────── */
.edge-conflayer-grid {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.edge-conflayer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 0;
}
.edge-conflayer-bar {
  width: 30px;
  height: 5px;
}
.edge-conflayer-fill {
  background: rgba(0, 0, 0, 0.35);
}
.edge-conflayer-fill--max {
  background: var(--metric-pos);
}
.edge-conflayer-fill--min {
  background: var(--sev-critical);
}
.edge-conflayer-gap {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tone-mismatch);
  background: rgba(115, 64, 163, 0.10);
  padding: 2px 6px;
  border-radius: var(--r-4);
  font-variant-numeric: tabular-nums;
}

/* ── Row hover refinement (calmer) ───────────────────────────────── */
.edge-table tr.edge-row:hover td {
  background: rgba(0, 0, 0, 0.025);
}
.edge-table tr.edge-row:hover .edge-c--primary {
  background: rgba(0, 0, 0, 0.040);
}

/* Mobile primary remains visible */
@media (max-width: 768px) {
  .edge-c--primary .edge-val { font-size: 15px; }
  .edge-section-tag { font-size: 10px; margin-left: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIVE DRAFT ASSISTANT, Phase 1 styles
   Namespace: .draft-*. Reuses explainer/edge calm visual language.
   Loaded only when route is #/draft.
   ════════════════════════════════════════════════════════════════════ */

body.draft-active { overflow: hidden; }

.draft-page {
  position: fixed; inset: 0; z-index: var(--z-flyout);
  background: var(--bg, #faf9f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text, #1f1f1f);
}
.draft-page[hidden] { display: none; }

.draft-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Top bar ────────────────────────────────────────────────────── */
.draft-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border, #e8e4d8);
  background: var(--bg, #faf9f5);
}
.draft-back, .draft-settings {
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  letter-spacing: -0.005em;
  padding: 6px 0;
  transition: color var(--t-fast) ease;
}
.draft-back:hover, .draft-settings:hover { color: var(--text, #1f1f1f); }
.draft-meta {
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--text, #1f1f1f);
}
.draft-meta-sep { color: var(--muted, #c8c4bc); }
.draft-meta-round { font-weight: 600; }
.draft-meta-pick { color: var(--muted, #6b6b6b); }
.draft-meta-next { font-weight: 600; }
.draft-meta-next.is-now {
  color: var(--sev-critical);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

/* ── Main area (canvas + rail grid) ─────────────────────────────── */
.draft-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.draft-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted, #6b6b6b);
  font-size: 14px;
}
.draft-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px 28px 16px;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

/* ── Canvas ──────────────────────────────────────────────────────── */
.draft-canvas {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.draft-canvas-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.draft-canvas-h-strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text, #1f1f1f);
}
.draft-canvas-h-sub {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}
.draft-canvas-pick, .draft-canvas-between {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-12);
  padding: 22px 24px;
}

/* ── Recommendation list ─────────────────────────────────────────── */
.draft-rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.draft-rec-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(232, 228, 216, 0.55);
}
.draft-rec-item:first-child { border-top: 0; }
.draft-rec-idx {
  width: 22px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #9a9690);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.draft-rec-body { flex: 1; min-width: 0; }
.draft-rec-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.draft-rec-meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.002em;
}
.draft-rec-pos {
  font-weight: 600;
  color: var(--text, #1f1f1f);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.draft-rec-sep { color: var(--muted, #c8c4bc); }
.draft-rec-pts { color: var(--text, #1f1f1f); font-weight: 500; }
.draft-rec-why { color: var(--muted, #6b6b6b); font-style: italic; }
.draft-rec-pick {
  background: var(--text, #1f1f1f);
  color: var(--bg, #faf9f5);
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  transition: opacity var(--t-fast) ease;
}
.draft-rec-pick:hover { opacity: 0.85; }

/* ── Search ─────────────────────────────────────────────────────── */
.draft-search-row {
  margin-top: 18px;
  position: relative;
}
.draft-search-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  margin-bottom: 8px;
  font-weight: 600;
}
.draft-search-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-8);
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--text, #1f1f1f);
  font-family: inherit;
  letter-spacing: -0.005em;
  box-sizing: border-box;
}
.draft-search-input:focus {
  outline: 0;
  border-color: var(--text, #1f1f1f);
}
.draft-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
  z-index: 5;
}
.draft-search-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(232, 228, 216, 0.4);
}
.draft-search-item:last-child { border-bottom: 0; }
.draft-search-item:hover {
  background: rgba(0, 0, 0, 0.025);
}
.draft-search-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
}
.draft-search-pos {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  font-weight: 600;
}
.draft-search-pts {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}

/* ── Prep note ──────────────────────────────────────────────────── */
.draft-prep {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e8e4d8);
}
.draft-prep-quiet {
  font-size: 12.5px;
  color: var(--muted, #6b6b6b);
  line-height: 1.55;
  margin: 0;
  letter-spacing: -0.002em;
}
.draft-prep-name {
  color: var(--text, #1f1f1f);
  font-weight: 600;
}

/* ── Event banner ───────────────────────────────────────────────── */
.draft-event {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-10);
  overflow: hidden;
}
.draft-event-bar {
  width: 4px;
  flex-shrink: 0;
  background: var(--muted, #c8c4bc);
}
.draft-event--critical .draft-event-bar { background: var(--sev-critical); }
.draft-event--urgent   .draft-event-bar { background: #c0903c; }
.draft-event--notable  .draft-event-bar { background: #4170c2; }
.draft-event--soft     .draft-event-bar { background: #8a8680; }
.draft-event-body {
  flex: 1;
  padding: 12px 16px;
}
.draft-event-sentence {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f1f1f);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.draft-event--critical .draft-event-sentence { color: var(--sev-critical); }
.draft-event--urgent   .draft-event-sentence { color: var(--sev-urgent); }
.draft-event-detail {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  line-height: 1.4;
}
.draft-event-dismiss {
  background: transparent;
  border: 0;
  color: var(--muted, #9a9690);
  font-size: 14px;
  padding: 0 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t-fast) ease;
}
.draft-event-dismiss:hover { color: var(--text, #1f1f1f); }

/* ── Rail ───────────────────────────────────────────────────────── */
.draft-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.draft-rail-section {
  background: transparent;
}
.draft-rail-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Roster shape */
.draft-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.draft-roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.draft-roster-label {
  width: 38px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.draft-roster-cells {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.draft-roster-cell {
  flex: 1;
  min-width: 0;
  height: 22px;
  border-radius: var(--r-4);
  background: rgba(0, 0, 0, 0.05);
  padding: 0 6px;
  display: flex;
  align-items: center;
  font-size: 10.5px;
  color: var(--muted, #c8c4bc);
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-roster-cell--filled {
  background: rgba(65, 112, 194, 0.12);
  color: var(--sev-notable);
  font-weight: 600;
}
.draft-roster-foot {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.002em;
}

/* Scarcity gauges */
.draft-gauges {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.draft-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
}
.draft-gauge-label {
  width: 28px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
}
.draft-gauge-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-3);
  overflow: hidden;
}
.draft-gauge-fill {
  height: 100%;
  border-radius: var(--r-3);
  transition: width var(--t-base) ease-out;
}
.draft-gauge-fill--high { background: var(--metric-pos-soft); }
.draft-gauge-fill--med  { background: #c0903c; }
.draft-gauge-fill--low  { background: var(--metric-neg-soft); }
.draft-gauge-val {
  font-size: 11px;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 44px;
  text-align: right;
}
.draft-gauge-init {
  color: var(--muted, #9a9690);
  font-weight: 500;
  margin-left: 1px;
}

/* ── Pulse strip ─────────────────────────────────────────────────── */
.draft-pulse-strip {
  border-top: 1px solid var(--border, #e8e4d8);
  background: rgba(0, 0, 0, 0.018);
  padding: 10px 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.draft-pulse-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  font-weight: 600;
  flex-shrink: 0;
}
.draft-pulse-tile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -0.002em;
}
.draft-pulse-num {
  color: var(--muted, #9a9690);
  font-weight: 600;
}
.draft-pulse-name { font-weight: 500; }
.draft-pulse-pos {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.045);
  padding: 1px 5px;
  border-radius: var(--r-3);
}
.draft-pulse-empty {
  font-size: 12px;
  color: var(--muted, #9a9690);
  font-style: italic;
}

/* ── Setup modal ─────────────────────────────────────────────────── */
.draft-setup-veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  background: rgba(20, 20, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.draft-setup-veil[hidden] { display: none; }
.draft-setup {
  background: var(--card, #fff);
  border-radius: var(--r-14);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.draft-setup-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text, #1f1f1f);
}
.draft-setup-desc {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  margin: 0 0 24px;
  line-height: 1.5;
}
.draft-setup-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.draft-setup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.draft-setup-field > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #9a9690);
  font-weight: 600;
}
.draft-setup-field > select {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-8);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text, #1f1f1f);
  font-family: inherit;
  letter-spacing: -0.005em;
}
.draft-setup-field > select:focus {
  outline: 0;
  border-color: var(--text, #1f1f1f);
}
.draft-setup-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.draft-setup-cancel, .draft-setup-start {
  border: 0;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.005em;
  font-family: inherit;
}
.draft-setup-cancel {
  background: transparent;
  color: var(--muted, #6b6b6b);
}
.draft-setup-cancel:hover { color: var(--text, #1f1f1f); }
.draft-setup-start {
  background: var(--text, #1f1f1f);
  color: var(--bg, #faf9f5);
}
.draft-setup-start:hover { opacity: 0.85; }

/* ── Mobile (limited, desktop primary in v1) ───────────────────── */
@media (max-width: 1023px) {
  .draft-grid { grid-template-columns: 1fr; padding: 16px 18px 12px; gap: 16px; }
  .draft-rail { padding-right: 0; }
  .draft-topbar { padding: 12px 18px; }
  .draft-pulse-strip { padding: 10px 18px; }
  .draft-meta { font-size: 12px; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   DRAFT, player-name link styling (Phase 4 cross-surface coherence)
   Per docs/PRINCIPLES.md §6: every player name is a link.
   These selectors override the original .draft-rec-name / draft-pulse-name
   text-only rules to give them link affordance while preserving look.
   ════════════════════════════════════════════════════════════════════ */
a.draft-rec-name,
a.draft-pulse-name,
a.draft-roster-cell,
a.draft-prep-name {
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease;
}
a.draft-rec-name:hover,
a.draft-pulse-name:hover,
a.draft-prep-name:hover {
  color: var(--brand, #4170c2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(65, 112, 194, 0.55);
}
a.draft-roster-cell:hover {
  background: rgba(65, 112, 194, 0.18);
  color: #2855a8;
}

/* ════════════════════════════════════════════════════════════════════
   CROSS-SURFACE SYSTEMS-CALM LAYER
   Per docs/PRINCIPLES.md §11 ("Motion serves orientation, not entertainment")
   Phases A (tokens) · B (reduced-motion) · C (focus-visible) · E (cross-fade)
   ════════════════════════════════════════════════════════════════════ */

/* ── Phase E: page-route cross-fade (subtle, ~140ms; barely conscious) ── */
.explainer-page,
.edge-page,
.draft-page {
  transition: opacity var(--t-fast) ease;
}
.explainer-page[hidden],
.edge-page[hidden],
.draft-page[hidden] {
  /* Browser still respects [hidden]; transition handles the visible→hidden
     fade. Once display: none kicks in, the next show will fade back in. */
  opacity: 0;
}
/* Visible state explicit (so transition has a clear target) */
.explainer-page:not([hidden]),
.edge-page:not([hidden]),
.draft-page:not([hidden]) {
  opacity: 1;
}

/* ── Phase C: focus-visible rings (calm, precise, restrained) ──────── */
/* Reuse --sev-notable (brand-blue) for the ring color. Restrained 2px outline
   with 2px offset and 4px border-radius. No glow, no shadow, no neon. */
.explainer-page a:focus-visible,
.explainer-page button:focus-visible,
.explainer-page summary:focus-visible,
.edge-page a:focus-visible,
.edge-page button:focus-visible,
.edge-page summary:focus-visible,
.draft-page a:focus-visible,
.draft-page button:focus-visible,
.draft-page summary:focus-visible,
.draft-page input:focus-visible,
.draft-page select:focus-visible {
  outline: 2px solid var(--sev-notable);
  outline-offset: 2px;
  border-radius: var(--r-4);
}

/* Inputs already have border-color focus state; the outline ring
   stacks gracefully (no visual conflict). */

/* ── Phase B: reduced-motion contract (required systems behavior) ──── */
@media (prefers-reduced-motion: reduce) {
  /* Disable ALL transitions and animations on new surfaces.
     Reduced-motion users get instant state changes. */
  .explainer-page,
  .explainer-page *,
  .edge-page,
  .edge-page *,
  .draft-page,
  .draft-page * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
  }
  /* Preserve focus-visible outline (zero motion needed) and color, but
     remove any chevron rotation, bar fill animation, etc. */
  .expl-cascade-toggle > summary::before,
  .expl-why-more > summary::before,
  .expl-c-group > summary::before {
    transition: none !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HISTORY / BELIEF EVOLUTION, Phase 2 Explainer enrichment
   Quiet, minimal, secondary. Sparkline supports the sentence, not replaces it.
   ════════════════════════════════════════════════════════════════════ */

.expl-history-sparkline {
  display: inline-block;
  vertical-align: middle;
  color: var(--muted, #8a8680);
  margin-left: 8px;
  opacity: 0.7;
  flex-shrink: 0;
}

.expl-history-conf {
  margin-top: 6px;
  margin-left: 38px;  /* align under the copy, past the badge */
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  letter-spacing: -0.002em;
}

.expl-history-class {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: var(--r-3);
  background: var(--sev-soft-bg);
  color: var(--sev-soft);
  margin-left: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}
.expl-history-class--signal       { background: var(--sev-notable-bg); color: var(--sev-notable); }
.expl-history-class--cascade      { background: rgba(74, 139, 91, 0.13); color: var(--metric-pos); }
.expl-history-class--unattributed { background: var(--sev-soft-bg); color: var(--sev-soft); }

.expl-history-copy {
  flex: 1;
  min-width: 0;
}

/* Ensure the history row flexes properly for sparkline + badge inline */
.expl-history-row {
  flex-wrap: wrap;
}

/* Reduced-motion already disables transitions via existing block */

/* ════════════════════════════════════════════════════════════════════
   MARKET MOVEMENT (2026-05-27) - six cross-referenced sub-cards
   Summary strip at the top + 3×2 grid of cards. Each card has an --up,
   --down, --flat, --alert, or --quiet variant to color its accent border.
   Colors are kept restrained; the surface is informational, not alarming.
   ════════════════════════════════════════════════════════════════════ */

.mm-section { display: flex; flex-direction: column; gap: 16px; }

/* Trade Signal verdict card - synthesis pinned above the strip + grid. */
.mm-verdict {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 22px;
  border-radius: var(--r-12);
  border: 1px solid var(--border, #e8e4d8);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.0));
}
.mm-verdict--strong-buy  { border-color: rgba(26, 135, 84, 0.45); background: linear-gradient(180deg, rgba(26, 135, 84, 0.12), rgba(26, 135, 84, 0.02)); }
.mm-verdict--buy         { border-color: rgba(26, 135, 84, 0.30); background: linear-gradient(180deg, rgba(26, 135, 84, 0.07), rgba(26, 135, 84, 0.01)); }
.mm-verdict--hold        { border-color: rgba(11, 17, 32, 0.10); background: var(--surface, #faf8f1); }
.mm-verdict--sell        { border-color: rgba(192, 57, 43, 0.30); background: linear-gradient(180deg, rgba(192, 57, 43, 0.07), rgba(192, 57, 43, 0.01)); }
.mm-verdict--strong-sell { border-color: rgba(192, 57, 43, 0.45); background: linear-gradient(180deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.02)); }
.mm-verdict__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mm-verdict__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted, #6b6b6b); margin-bottom: 4px;
}
.mm-verdict__label { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.mm-verdict--strong-buy  .mm-verdict__label { color: #0f6b3c; }
.mm-verdict--buy         .mm-verdict__label { color: #1a8754; }
.mm-verdict--hold        .mm-verdict__label { color: var(--ink, #0b1120); }
.mm-verdict--sell        .mm-verdict__label { color: #c0392b; }
.mm-verdict--strong-sell .mm-verdict__label { color: #9a1f10; }
.mm-verdict__score { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-left: 16px; }
.mm-verdict__score-num {
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; color: var(--ink, #0b1120);
}
.mm-verdict__score-unit {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}
.mm-verdict__tagline { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text, #1f1f1f); }
.mm-verdict-reasons {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mm-verdict-reason {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 12.5px;
  background: rgba(11, 17, 32, 0.04);
}
.mm-verdict-reason__bullet {
  font-weight: 700; font-size: 11px;
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #ffffff;
}
.mm-verdict-reason--pos { background: rgba(26, 135, 84, 0.10); color: #1a8754; }
.mm-verdict-reason--pos .mm-verdict-reason__bullet { background: #1a8754; }
.mm-verdict-reason--neg { background: rgba(192, 57, 43, 0.10); color: #c0392b; }
.mm-verdict-reason--neg .mm-verdict-reason__bullet { background: #c0392b; }
.mm-verdict__no-signals { margin: 0; font-size: 13px; color: var(--muted, #6b6b6b); font-style: italic; }
.mm-verdict__footnote { margin: 6px 0 0; font-size: 11px; color: var(--muted, #6b6b6b); letter-spacing: 0.01em; }

/* Summary strip */
.mm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface, #faf8f1);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-10);
}
.mm-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  background: rgba(11, 17, 32, 0.04);
  color: var(--text, #1f1f1f);
  border: 1px solid transparent;
  transition: background var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
}
.mm-summary__chip:hover { background: rgba(11, 17, 32, 0.08); }
.mm-summary__chip-icon { font-size: 11px; line-height: 1; }
.mm-summary__chip--up      { background: rgba(26, 135, 84, 0.10);  color: #1a8754; border-color: rgba(26, 135, 84, 0.20); }
.mm-summary__chip--down    { background: rgba(192, 57, 43, 0.10);  color: #c0392b; border-color: rgba(192, 57, 43, 0.20); }
.mm-summary__chip--flat    { background: rgba(11, 17, 32, 0.04);   color: var(--muted, #6b6b6b); }
.mm-summary__chip--alert   { background: rgba(217, 119, 6, 0.10);  color: #b45309; border-color: rgba(217, 119, 6, 0.22); }
.mm-summary__chip--neutral { background: rgba(11, 17, 32, 0.03);   color: var(--muted, #6b6b6b); }

/* 3×2 sub-card grid */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
}
.mm-card {
  background: #ffffff;
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--r-12);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(11, 17, 32, 0.03);
}
.mm-card--up    { border-top: 3px solid #1a8754; }
.mm-card--down  { border-top: 3px solid #c0392b; }
.mm-card--flat  { border-top: 3px solid rgba(11, 17, 32, 0.08); }
.mm-card--alert { border-top: 3px solid #b45309; }
.mm-card--quiet { background: var(--surface, #faf8f1); }

.mm-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.mm-card__head h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink, #0b1120);
}
.mm-card__sub {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
}
.mm-card__big {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 0 4px;
}
.mm-bignum {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mm-bignum--up   { color: #1a8754; }
.mm-bignum--down { color: #c0392b; }
.mm-bignum--flat { color: var(--muted, #6b6b6b); }
.mm-bignum-unit {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
}
.mm-card__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  color: var(--text, #1f1f1f);
  border-top: 1px solid var(--hairline, #f0ece1);
  padding-top: 6px;
}
.mm-card__row > span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.mm-card__row--big { font-size: 15px; }
.mm-card__row--small {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--muted, #6b6b6b);
  border-top: none; padding-top: 4px;
}
.mm-card__note {
  margin: 0; font-size: 13px; line-height: 1.45; color: var(--text, #1f1f1f);
}
.mm-card__note--alert { color: #b45309; font-weight: 500; }
.mm-card__empty {
  font-size: 13px; color: var(--muted, #6b6b6b);
  padding: 6px 0;
}

/* Sparkline + consensus movement row */
.mm-sparkline { display: block; margin: 2px 0; }
.mm-consensus-move { font-weight: 500; }
.mm-consensus-move--up   { color: #1a8754; }
.mm-consensus-move--down { color: #c0392b; }
.mm-consensus-move--flat { color: var(--muted, #6b6b6b); }

/* Performance grid */
.mm-perf-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.mm-perf-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--surface, #faf8f1);
  border-radius: var(--r-8);
  border-left: 3px solid rgba(11, 17, 32, 0.10);
}
.mm-perf-cell--up    { border-left-color: #1a8754; }
.mm-perf-cell--down  { border-left-color: #c0392b; }
.mm-perf-cell--flat  { border-left-color: rgba(11, 17, 32, 0.10); }
.mm-perf-cell--quiet { background: rgba(11, 17, 32, 0.02); }
.mm-perf-cell__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}
.mm-perf-cell__pct {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mm-perf-cell--up   .mm-perf-cell__pct { color: #1a8754; }
.mm-perf-cell--down .mm-perf-cell__pct { color: #c0392b; }
.mm-perf-cell__sub {
  font-size: 11.5px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

/* Role spark */
.mm-role-spark {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 6px 0;
}
.mm-role-dot {
  width: 22px; height: 22px;
  border-radius: var(--r-6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: #ffffff;
}
.mm-role-dot--top    { background: #1a8754; }
.mm-role-dot--mid    { background: #6b6b75; }
.mm-role-dot--bot    { background: rgba(192, 57, 43, 0.7); }
.mm-role-dot--bench  { background: rgba(11, 17, 32, 0.10); color: rgba(11, 17, 32, 0.45); }
.mm-role-key {
  display: inline-flex; align-items: center; gap: 4px;
}
.mm-role-key i.mm-role-dot {
  width: 12px; height: 12px;
  font-size: 0;
}
/* Pitcher role rows */
.mm-role-pit { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.mm-role-pit-row {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--hairline, #f0ece1);
}
.mm-role-pit-row:first-child { border-top: none; }
.mm-role-pit-row__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}
.mm-role-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(11, 17, 32, 0.06);
  color: var(--ink, #0b1120);
}
.mm-role-pit-row__sub {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

/* Skill table */
.mm-skill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mm-skill-table th, .mm-skill-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--hairline, #f0ece1);
}
.mm-skill-table th:first-child, .mm-skill-table td:first-child { text-align: left; }
.mm-skill-table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
}
.mm-skill-row__delta { font-weight: 600; }
.mm-skill-row--up   .mm-skill-row__delta { color: #1a8754; }
.mm-skill-row--down .mm-skill-row__delta { color: #c0392b; }
.mm-skill-row--flat .mm-skill-row__delta { color: var(--muted, #6b6b6b); }

/* News list */
.mm-news-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mm-news-item {
  display: flex; gap: 10px;
  padding: 8px 10px;
  background: var(--surface, #faf8f1);
  border-radius: var(--r-8);
  border-left: 3px solid rgba(11, 17, 32, 0.10);
}
.mm-news-item--current { border-left-color: #b45309; background: rgba(217, 119, 6, 0.05); }
.mm-news-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted, #6b6b6b);
  background: rgba(11, 17, 32, 0.06);
  padding: 2px 7px;
  border-radius: 999px;
  height: fit-content;
}
.mm-news-tag--current {
  color: #b45309; background: rgba(217, 119, 6, 0.12);
}
.mm-news-item__title {
  font-size: 13.5px;
  font-weight: 500;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.mm-news-item__date {
  font-size: 11.5px; color: var(--muted, #6b6b6b); font-weight: 400;
}
.mm-news-item__sub {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  line-height: 1.4;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   PROJECTION TRAJECTORY CHART, Riser/Faller graph (legacy widget used
   internally by Comparables; kept intact)
   ════════════════════════════════════════════════════════════════════ */

.expl-trajectory {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expl-trajectory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.expl-trajectory-headline {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.expl-trajectory-delta {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.expl-trajectory-delta--riser  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory-delta--faller { color: var(--metric-neg, #c44a3a); }
.expl-trajectory-delta--flat   { color: var(--muted, #8a8680); }

.expl-trajectory-window {
  font-size: 12px;
  color: var(--muted, #8a8680);
  letter-spacing: -0.002em;
}

.expl-trajectory-empty {
  font-size: 13px;
  color: var(--muted, #8a8680);
  margin: 0;
  padding: 4px 0 2px;
}

.expl-trajectory-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  color: var(--text2, #444);
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
}

.expl-trajectory-axis {
  font-size: 10.5px;
  fill: var(--muted, #8a8680);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.expl-trajectory-endlabel {
  font-size: 12px;
  font-weight: 700;
  fill: currentColor;
  font-variant-numeric: tabular-nums;
}

.expl-trajectory-area {
  fill: currentColor;
  opacity: 0.10;
}
.expl-trajectory--riser  .expl-trajectory-area  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory--faller .expl-trajectory-area  { color: var(--metric-neg, #c44a3a); }
.expl-trajectory--flat   .expl-trajectory-area  { color: var(--muted, #8a8680); opacity: 0.06; }

.expl-trajectory-band {
  fill: currentColor;
  opacity: 0.05;
}
.expl-trajectory--riser  .expl-trajectory-band  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory--faller .expl-trajectory-band  { color: var(--metric-neg, #c44a3a); }
.expl-trajectory--flat   .expl-trajectory-band  { color: var(--muted, #8a8680); }

.expl-trajectory-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expl-trajectory--riser  .expl-trajectory-line  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory--faller .expl-trajectory-line  { color: var(--metric-neg, #c44a3a); }
.expl-trajectory--flat   .expl-trajectory-line  { color: var(--muted, #8a8680); }

.expl-trajectory-dot {
  fill: currentColor;
  opacity: 0.55;
}
.expl-trajectory-dot--last {
  opacity: 1;
  stroke: var(--bg, #fff);
  stroke-width: 1.5;
}
.expl-trajectory--riser  .expl-trajectory-dot  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory--faller .expl-trajectory-dot  { color: var(--metric-neg, #c44a3a); }
.expl-trajectory--flat   .expl-trajectory-dot  { color: var(--muted, #8a8680); }

.expl-trajectory-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft, rgba(0,0,0,0.07));
}

.expl-trajectory-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.expl-trajectory-stat__label {
  font-size: 10.5px;
  color: var(--muted, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.expl-trajectory-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.expl-trajectory-stat__sub {
  font-size: 11px;
  color: var(--muted, #8a8680);
  font-variant-numeric: tabular-nums;
}
.expl-trajectory-stat__sub--riser  { color: var(--metric-pos, #2c9b6e); }
.expl-trajectory-stat__sub--faller { color: var(--metric-neg, #c44a3a); }
.expl-trajectory-stat__sub--flat   { color: var(--muted, #8a8680); }

@media (max-width: 640px) {
  .expl-trajectory-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .expl-trajectory-delta {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PROSPECTS WORKSPACE (P0 shell)
   ══════════════════════════════════════════════════════════════════
   Two-column layout: sticky left sidebar (categories) + main content.
   Sidebar uses the same calm/institutional palette as the rest of
   the app, no gamification, no neon, no engagement cues.
   Sections inside main content (cards, tables) come in P1/P2. */
/* M-3: legacy class kept for back-compat (the Research workspace shares
   the prospects-workspace class for grid layout). Active visibility is
   now driven by body[data-route="research"] (see the unified grid rule
   higher in this file). */

/* ── Sidebar ───────────────────────────────────────────── */
.prospects-sidebar {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  letter-spacing: -0.005em;
  align-self: start;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
}
.prospects-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
}
.prospects-sidebar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 12px 6px;
  margin-top: 4px;
}
.prospects-sidebar__link {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-6);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 450;
  line-height: 1.35;
  transition: background var(--t-base), color var(--t-base);
  border-left: 2px solid transparent;
  margin-left: 0;
}
.prospects-sidebar__link:hover {
  background: var(--bg-tinted);
  color: var(--text);
}
.prospects-sidebar__link.active {
  background: var(--bg-tinted);
  color: var(--text);
  font-weight: 550;
  border-left-color: var(--accent, #ef4444);
}

/* ── Main content ──────────────────────────────────────── */
.prospects-main {
  min-width: 0;
  padding: 24px 4px 64px;
}
.prospects-main__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.prospects-main__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.prospects-main__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
}
.prospects-main__sub {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 10px;
  max-width: 620px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Build #20 (G4 grammar completion): Operations freshness chip.
   Operations is a focused analytical workspace; per PRINCIPLES §16,
   it carries freshness as a chip in the header chrome (Grammar A).
   Posture: quiet, secondary, header-level, never visually stronger
   than the structural portfolio outputs below. Self-aligns to the top
   so it doesn't try to vertically center against the much taller
   eyebrow + title + sub block. */
.ops-freshness {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
  white-space: nowrap;
}
.ops-freshness .freshness-chip { color: inherit; }
.ops-freshness:empty { display: none; }
.prospects-main__meta {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.prospects-main__body {
  min-height: 240px;
}

/* Empty/placeholder state (P0 only, replaced by content in P1) */
.prospects-empty {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg, 10px);
  background: var(--surface);
}
.prospects-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.prospects-empty__sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 8px;
}

/* Responsive: collapse sidebar to horizontal scroll strip on narrow screens */
@media (max-width: 900px) {
  /* (Research workspace responsive rule is in the upper route-rule block.) */
  .prospects-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }
  .prospects-sidebar__group {
    flex-direction: row;
    gap: 4px;
    padding-right: 0;
    flex-shrink: 0;
  }
  .prospects-sidebar__label {
    display: none;
  }
  .prospects-sidebar__link {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .prospects-sidebar__link.active {
    border-left: 0;
    border-bottom-color: var(--accent, #ef4444);
  }
  .prospects-main { padding: 16px 0 48px; }
  .prospects-main__title { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   SECONDARY NAV, inside Rankings & Methodology workspaces
   ══════════════════════════════════════════════════════════════════
   The previous top-nav had 10 items. We trimmed it to 6 and demoted
   Injuries/Trade into the Rankings workspace and Audit/Health into
   the Methodology workspace. Inside those parent routes, a thin
   horizontal secondary nav strip lets users move between sub-views.
   The strip routes via #/rankings/injuries (etc.), the router parses
   the second segment and clicks the legacy mainTab button, preserving
   all existing render() pipelines unchanged. */
.workspace-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px 14px;
  margin: 0 auto 8px;
  max-width: var(--max-w, 1320px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* "Top" variant: subnav anchored above the workspace card on rankings-family
   routes. Sticky positioning keeps it visible while scrolling. Matches the
   user's request: this tab strip is the primary section switcher and should
   always be the first thing they see. */
.workspace-subnav--top {
  margin-bottom: 16px;
  padding: 14px 24px 14px;
  background: var(--surface, #fff);
  border-radius: var(--r-12);
  border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02), 0 4px 12px -6px rgba(15, 23, 42, 0.04);
  position: sticky;
  top: 60px;
  z-index: var(--z-raised);
}
/* Category label, bold, unhyperlinked, on the far left */
.workspace-subnav__category {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px 7px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text, #0b1120);
  white-space: nowrap;
}
.workspace-subnav__divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 8px 0 0;
  background: var(--border, rgba(15, 23, 42, 0.10));
}
/* Update Rankings subnav so it includes /risers too (already in DOM; ensure
   visibility rule below is permissive enough) */
.workspace-subnav__link {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--r-6);
  transition: background var(--t-base), color var(--t-base);
}
.workspace-subnav__link:hover {
  background: var(--bg-tinted);
  color: var(--text);
}
.workspace-subnav__link.active {
  background: var(--bg-tinted);
  color: var(--text);
  font-weight: 600;
}
/* External-link variant */
.workspace-subnav__link--ext { color: var(--text-3); }
.workspace-subnav__link--ext:hover { color: var(--text-2); }

/* Universal product sub-nav now also visible on /research and /fypd.
   Hidden only on home, draft, and methodology routes (which have their own
   workspace navigation). */
body[data-route="home"] .workspace-subnav[data-parent="rankings"],
body[data-route="draft"] .workspace-subnav[data-parent="rankings"],
body[data-route="methodology"] .workspace-subnav[data-parent="rankings"],
body[data-route="audit"] .workspace-subnav[data-parent="rankings"],
body[data-route="health"] .workspace-subnav[data-parent="rankings"],
body[data-route="explain"] .workspace-subnav[data-parent="rankings"] { display: none; }

body:not([data-route="methodology"]):not([data-route="audit"]):not([data-route="health"]):not([data-route="explain"])
  .workspace-subnav[data-parent="methodology"] { display: none; }

/* Scroll-margin compensation so deep-linked content (panel headers, page
   titles) doesn't get covered by the sticky sub-nav. The sticky strip sits
   at top: 60px and is ~52px tall; we reserve 130px of scroll padding. */
.panel__header,
.compare-page__topbar,
.risers-page__header,
.explainer-topbar {
  scroll-margin-top: 130px;
}
html { scroll-padding-top: 130px; }

/* ══════════════════════════════════════════════════════════════════
   PROSPECT CARDS (P1)
   ══════════════════════════════════════════════════════════════════
   Restrained, scouting-report aesthetic. Each card is a tappable
   summary that links to the existing player explainer overlay. No
   gamification colors, no neon, no engagement cues. */
.prospects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.prospect-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 10px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.prospect-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: var(--border-strong, var(--border));
}
.prospect-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prospect-card__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prospect-card__tier {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-4);
  background: var(--bg-tinted);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.prospect-card__tier--top10 {
  background: rgba(212, 175, 55, 0.10);
  color: #8a6a14;
  border-color: rgba(212, 175, 55, 0.35);
}
.prospect-card__tier--top50 {
  background: rgba(239, 68, 68, 0.08);
  color: #3b4796;
  border-color: rgba(239, 68, 68, 0.25);
}
.prospect-card__tier--top100 {
  background: var(--bg-tinted);
  color: var(--text-2);
}
.prospect-card__tier--fringe {
  background: transparent;
  color: var(--text-3);
}
.prospect-card__meta {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.prospect-card__proj {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prospect-card__projPts {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.prospect-card__ceil {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.prospect-card__why {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prospect-card__why li {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.4;
  letter-spacing: -0.003em;
}
.prospect-card__why li::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-3);
}

/* ── Chips: confidence / sample-quality / severity flags ─────────── */
.prospect-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}
.prospect-card__chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: var(--r-4);
  border: 1px solid var(--border);
  background: var(--bg-tinted);
  color: var(--text-2);
  white-space: nowrap;
}
.prospect-card__chip--high {
  background: rgba(46, 125, 50, 0.08);
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.22);
}
.prospect-card__chip--medium {
  background: rgba(120, 120, 130, 0.08);
  color: var(--text-2);
}
.prospect-card__chip--low {
  background: rgba(196, 135, 35, 0.10);
  color: #8a5a0a;
  border-color: rgba(196, 135, 35, 0.25);
}
.prospect-card__chip--severe {
  background: rgba(180, 50, 50, 0.08);
  color: #b03030;
  border-color: rgba(180, 50, 50, 0.22);
}
.prospect-card__chip--neutral {
  background: var(--bg-tinted);
  color: var(--text-2);
}
/* All chips with tooltip targets show a subtle help cursor */
.prospect-card__chip[title] {
  cursor: help;
}

/* ── UX-1: Card v2, shadow primary metric + floor/median/ceiling band
   ────────────────────────────────────────────────────────────────────
   Replaces the single big "pts" number. The shadow primary is the
   section-appropriate headline; the band gives the full P25-P50-P75
   distribution; the decomposed row exposes dynasty / redraft / p_reach. */

.prospect-card__primary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 6px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.prospect-card__primary-val {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.prospect-card__primary-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.prospect-card__primary-sub {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  margin-left: auto;
}

/* Floor / median / ceiling triple, shadow path-weighted band */
.prospect-card__band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: help;
}
.prospect-card__band-tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.prospect-card__band-tick--mid {
  position: relative;
}
.prospect-card__band-tick--mid::before,
.prospect-card__band-tick--mid::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border);
}
.prospect-card__band-tick--mid::before { right: 100%; margin-right: -8px; }
.prospect-card__band-tick--mid::after  { left:  100%; margin-left:  -8px; }
.prospect-card__band-num {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.01em;
}
.prospect-card__band-tick--mid .prospect-card__band-num {
  font-size: 15px;
  font-weight: 700;
}
.prospect-card__band-lbl {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Decomposed outputs row, small inline labels */
.prospect-card__decomp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 2px;
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.prospect-card__decomp span {
  cursor: help;
}

/* Single-line "why ranked here" sentence */
.prospect-card__why-sentence {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  line-height: 1.45;
  padding-top: 2px;
}

/* ── UX-3: Research-mode framing banner ─────────────────────────────
   Persistent banner at top of Prospects workspace. Calm, single line,
   no chrome. Restrained institutional framing, not a help overlay. */
.prospects-research-banner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: var(--r-6);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}
.prospects-research-banner__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  flex-shrink: 0;
}
.prospects-research-banner__sep {
  color: var(--text-3);
  flex-shrink: 0;
}
.prospects-research-banner__text {
  color: var(--text-2);
}

/* Build #16 (G5 fix): banner methodology link. Quiet citation-style
   inline link inside the Operations workspace banner. Matches the
   visual posture of .expl-composite-note's link, underlined, muted,
   reads as a reference rather than a button. */
.prospects-research-banner__ref {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.prospects-research-banner__ref:hover,
.prospects-research-banner__ref:focus {
  color: var(--text, #1f1f1f);
  text-decoration-color: var(--hairline-strong, rgba(31, 31, 31, 0.5));
  outline: none;
}
.prospects-research-banner__ref:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* ══════════════════════════════════════════════════════════════════
   PROSPECTS DASHBOARD (P2.5 institutional landing)
   ══════════════════════════════════════════════════════════════════
   Compact 2-col grid of small sections, each answering ONE scouting
   question. Front-office aesthetic, no neon, no hype, no banner ads. */
#prospectsBody {
  display: block;
}
body[data-route="research"][data-research-module="prospects"] .prospects-main__body:has(.dashboard-section) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
  align-items: start;
}
.dashboard-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 10px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-section__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.dashboard-section__link {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.dashboard-section__link:hover {
  color: var(--text);
}
.dashboard-section__sub {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
  margin-bottom: 6px;
  letter-spacing: -0.003em;
}
.dashboard-section__empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 12px 0;
  font-style: italic;
}

.prospect-mini-list {
  display: flex;
  flex-direction: column;
}
.prospect-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--t-base);
}
.prospect-mini:last-child {
  border-bottom: 0;
}
.prospect-mini:hover {
  background: var(--bg-tinted);
}
.prospect-mini__name {
  font-weight: 550;
  letter-spacing: -0.008em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.prospect-mini__meta {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  white-space: nowrap;
}
.prospect-mini__metric {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prospect-mini__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 90px;
}

/* Pending sections, listed honestly, NOT rendered as cards */
.dashboard-pending {
  grid-column: 1 / -1;
  padding: 18px 22px;
  background: var(--bg-tinted);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg, 10px);
}
.dashboard-pending__head {
  margin-bottom: 12px;
}
.dashboard-pending__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.dashboard-pending__sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
  letter-spacing: -0.003em;
  line-height: 1.45;
}
.dashboard-pending__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 24px;
}
.dashboard-pending__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 11.5px;
}
.dashboard-pending__name {
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.003em;
}
.dashboard-pending__dep {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: -0.002em;
  font-style: italic;
  text-align: right;
}



/* ══════════════════════════════════════════════════════════════════
   OPERATIONS WORKSPACE (L1-1 + L1-2 + L1-3)
   Reuses Prospects sidebar / main grid. Sections render compactly
   without grade colors. Same calm institutional aesthetic. */

.ops-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg, 10px);
  background: var(--surface);
}
.ops-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ops-empty__sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 8px;
}
.ops-empty a { color: var(--text); text-decoration: underline; }

.ops-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 10px);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.ops-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 12px;
}
.ops-section__head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
}
.ops-section__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text);
}
.ops-section__sub {
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: -0.003em;
  font-weight: 400;
  line-height: 1.5;
}
.ops-note {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  letter-spacing: -0.003em;
}

.ops-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.ops-chip {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: -0.003em;
  padding: 4px 9px;
  border-radius: var(--r-4);
  background: var(--bg-tinted);
  color: var(--text-2);
  border: 1px solid var(--border);
  cursor: help;
}
.ops-chip--neutral { color: var(--text-3); cursor: default; }

.ops-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.ops-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--bg-tinted);
  border-radius: var(--r-6);
}
.ops-cell__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ops-cell__val {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 2px 0;
}
.ops-cell__z {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
}

.ops-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ops-band__tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ops-band__num {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.015em;
}
.ops-band__tick--mid .ops-band__num { font-size: 19px; font-weight: 700; }
.ops-band__lbl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ops-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ops-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-tinted);
  border-radius: var(--r-6);
}
.ops-metric__lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ops-metric__val {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.018em;
}
.ops-metric__sub {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.003em;
}

.ops-sens-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ops-sens-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  align-items: center;
}
.ops-sens-list li:last-child { border-bottom: 0; }
.ops-sens__name {
  font-weight: 550;
  color: var(--text);
  letter-spacing: -0.008em;
}
.ops-sens__pos {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ops-sens__band {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Form (sync + trade fit) */
.ops-form { display: flex; flex-direction: column; gap: 8px; }
.ops-form__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}
.ops-form__input, .ops-form__area {
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-6);
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.005em;
}
.ops-form__area {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  resize: vertical;
  min-height: 100px;
}
.ops-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.ops-form__status {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: -0.003em;
}
.ops-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: var(--r-6);
  cursor: pointer;
  transition: opacity var(--t-base);
}
.ops-btn:hover { opacity: 0.85; }
.ops-btn--small {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  background: transparent;
  color: var(--text-3);
  border-color: var(--border);
}
.ops-btn--small:hover {
  color: var(--text);
  border-color: var(--text-2);
}

.ops-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ops-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}
.ops-list li:last-child { border-bottom: 0; }
.ops-list li strong { color: var(--text); font-weight: 600; min-width: 140px; }
.ops-list li button { margin-left: auto; }

/* Trade fit layout */
.ops-trade-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ops-trade-side { display: flex; flex-direction: column; gap: 4px; }

.ops-trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.ops-trade-result .ops-trade-summary {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ops-trade-sentence {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: -0.003em;
  padding: 4px 0;
}
.ops-trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.ops-trade-table th, .ops-trade-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.ops-trade-table th {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ops-trade-table td:nth-child(2),
.ops-trade-table td:nth-child(3),
.ops-trade-table td:nth-child(4) {
  text-align: right;
}
.ops-trade-table__delta {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 900px) {
  .ops-grid { grid-template-columns: repeat(2, 1fr); }
  .ops-metric-row { grid-template-columns: 1fr; }
  .ops-trade-form, .ops-trade-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   M-2: Prospects sidebar collapsible Pending group
   ══════════════════════════════════════════════════════════════════ */
.prospects-sidebar__group--collapsible {
  margin-top: 4px;
}
.prospects-sidebar__collapse-toggle {
  background: transparent;
  border: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0 12px 6px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.prospects-sidebar__collapse-toggle:hover {
  color: var(--text-2);
}
.prospects-sidebar__chevron {
  display: inline-block;
  transition: transform var(--t-base);
}
.prospects-sidebar__group--collapsible[data-collapsed="false"] .prospects-sidebar__chevron {
  transform: rotate(90deg);
}
.prospects-sidebar__group--collapsible[data-collapsed="true"] .prospects-sidebar__collapsible-body {
  display: none;
}
.prospects-sidebar__collapsible-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   M-2: Diagnostic panel layout (MLE diagnostics, Identity diagnostics)
   ══════════════════════════════════════════════════════════════════
   Sparse research-log aesthetic, same restraint as Operations panels.
   Sections stack vertically; key-value lists for header metadata;
   compact tables for record-level breakdowns. No color coding. */
.diag-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.diag-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 10px);
  padding: 16px 20px;
}
.diag-section__head {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.diag-section__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text);
}
.diag-section__sub {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: -0.003em;
  font-weight: 400;
}
.diag-kv {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 4px 18px;
  margin: 0;
  font-size: 12px;
}
.diag-kv dt {
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.003em;
}
.diag-kv dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.diag-kv dd.num {
  font-variant-numeric: tabular-nums;
}
.diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.diag-table th, .diag-table td {
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
}
.diag-table th {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diag-table th.num, .diag-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════
   M-3: Research workspace, module-header dividers in unified sidebar
   ══════════════════════════════════════════════════════════════════ */
.research-sidebar__module-header {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 12px 6px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.research-sidebar__module-header:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 4px;
}
/* Active module header, bold + accent underline cue */
.research-sidebar__module-header.active {
  color: var(--text);
  font-weight: 700;
  position: relative;
}
.research-sidebar__module-header.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--accent, #ef4444);
  opacity: 0.6;
}
.research-sidebar__ext {
  color: var(--text-3);
  font-size: 11px;
  margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   PROSPECT-SHADOW DISCLOSURE SECTION (Explainer)
   Per the 2026-05-17 explainer disclosure-plumbing build.

   Design intent (matches institutional research aesthetic):
  , Dense, structured, quiet, slightly Bloomberg-esque
  , Tabular figures for numbers
  , No saturated colors; no traffic-light scoring; no good/bad semantics
  , "No data" treatments visible but not loud
  , All styles namespaced under .expl-shadow__* to avoid coupling
     with existing .expl-card__* styles
   ───────────────────────────────────────────────────────────────────── */

.expl-shadow {
  font-variant-numeric: tabular-nums;
}

.expl-shadow__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}
.expl-shadow__chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border: 1px solid var(--border, #d4d3cc);
  background: var(--surface-1, #f6f5f0);
  color: var(--text-2, #4a4e57);
  border-radius: 2px;
}
/* Confidence chip variants: muted, distinct, never traffic-light */
.expl-shadow__chip--conf-high   { color: var(--text, #1a1d22); border-color: var(--border-strong, #c7c5bc); }
.expl-shadow__chip--conf-medium { color: var(--text-2, #4a4e57); }
.expl-shadow__chip--conf-low    { color: var(--text-2, #4a4e57); background: transparent; border-style: dashed; }

.expl-shadow__section {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e3e2dc);
}
.expl-shadow__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.expl-shadow__h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6c6e76);
  margin: 0 0 10px;
}
.expl-shadow__sub {
  font-size: 11.5px;
  color: var(--text-2, #4a4e57);
  margin: 8px 0 4px;
  font-style: italic;
}

.expl-shadow__drivers,
.expl-shadow__list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.expl-shadow__driver {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 8px 14px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border, #e3e2dc);
  font-size: 13px;
}
.expl-shadow__driver:last-child { border-bottom: 0; }
.expl-shadow__driver-name {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--text, #1a1d22);
}
.expl-shadow__driver-contrib {
  font-weight: 600;
  color: var(--text, #1a1d22);
  font-variant-numeric: tabular-nums;
}
.expl-shadow__driver-why {
  color: var(--text-2, #4a4e57);
  font-size: 12.5px;
}

.expl-shadow__uncert,
.expl-shadow__integrity,
.expl-shadow__missing {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 8px 14px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border, #e3e2dc);
  font-size: 13px;
}
.expl-shadow__uncert:last-child,
.expl-shadow__integrity:last-child,
.expl-shadow__missing:last-child { border-bottom: 0; }
.expl-shadow__uncert-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
}
.expl-shadow__uncert-src,
.expl-shadow__integrity-name,
.expl-shadow__missing-name {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: var(--text, #1a1d22);
}
.expl-shadow__uncert-why,
.expl-shadow__integrity-why {
  color: var(--text-2, #4a4e57);
  font-size: 12.5px;
}
.expl-shadow__integrity-sev,
.expl-shadow__missing-pen,
.expl-shadow__missing-phase {
  color: var(--text-2, #4a4e57);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.expl-shadow__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
}
.expl-shadow__kv dt {
  color: var(--text-2, #4a4e57);
  font-weight: 400;
}
.expl-shadow__kv dd {
  margin: 0;
  color: var(--text, #1a1d22);
  font-variant-numeric: tabular-nums;
}
.expl-shadow__sigma {
  color: var(--text-3, #8a8a8a);
  font-size: 12px;
}

.expl-shadow__plain {
  margin: 0;
  font-size: 13.5px;
  color: var(--text, #1a1d22);
}
.expl-shadow__plain-sub {
  color: var(--text-2, #4a4e57);
  font-size: 12px;
}

/* "No data" treatment: visible (not hidden) but deliberately muted.
   The visual gap between this and a populated section is the cue. */
.expl-shadow__empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #6c6e76);
  font-style: italic;
}

.expl-shadow__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted, #6c6e76);
}

.expl-shadow__footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e3e2dc);
  font-size: 11px;
  color: var(--muted, #6c6e76);
}

/* Mobile: same surface, narrower viewport. No layout reflow into
   consumer-card patterns; only padding adjustments. */
@media (max-width: 720px) {
  .expl-shadow__driver,
  .expl-shadow__uncert,
  .expl-shadow__integrity,
  .expl-shadow__missing {
    grid-template-columns: max-content 1fr;
  }
  .expl-shadow__driver-why,
  .expl-shadow__uncert-why,
  .expl-shadow__integrity-why,
  .expl-shadow__missing-phase {
    grid-column: 1 / -1;
    padding-left: 0;
  }
  .expl-shadow__footer {
    flex-direction: column;
    gap: 4px;
  }
}

/* Research-snapshot export button (Build #3).
   Institutional aesthetic: a small subtle link-button, NOT a CTA.
   Reads as "download a research artifact," not as a marketing button. */
.expl-shadow__export-btn {
  font-size: 11px;
  letter-spacing: 0.02em;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border, #d4d3cc);
  color: var(--text-2, #4a4e57);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: none; /* no engagement micro-interactions */
}
.expl-shadow__export-btn:hover,
.expl-shadow__export-btn:focus {
  border-color: var(--border-strong, #c7c5bc);
  color: var(--text, #1a1d22);
  outline: none;
}
.expl-shadow__export-btn:active {
  background: var(--surface-1, #f6f5f0);
}

/* Cascade methodology link inside the "Full cascade (advanced)" section.
   Small, muted; reads as reference, not CTA. */
.expl-cascade-methodology {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e3e2dc);
  font-size: 11px;
  color: var(--muted, #6c6e76);
}
.expl-cascade-methodology a {
  color: var(--text-2, #4a4e57);
}
/* Cascade-export button (Build #5). Same institutional subtle aesthetic
   as the shadow export button, research-tool affordance, not a CTA. */
.expl-cascade-export-btn {
  font-size: 11px;
  letter-spacing: 0.02em;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border, #d4d3cc);
  color: var(--text-2, #4a4e57);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: none;
}
.expl-cascade-export-btn:hover,
.expl-cascade-export-btn:focus {
  border-color: var(--border-strong, #c7c5bc);
  color: var(--text, #1a1d22);
  outline: none;
}
.expl-cascade-export-btn:active {
  background: var(--surface-1, #f6f5f0);
}

/* Portfolio-exposure line (Build #6, Operations × Research cross-link).
   Small, subtle, factual. Renders only when the player appears in at
   least one user portfolio. Uses neutral wording, does NOT assume
   prospect status. */
.expl-exposure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: var(--surface-1, #f6f5f0);
  border-left: 2px solid var(--border-strong, #c7c5bc);
  font-size: 12px;
  color: var(--text-2, #4a4e57);
}
.expl-exposure__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6c6e76);
  font-weight: 500;
}
.expl-exposure__body {
  color: var(--text, #1a1d22);
}

/* Build #7: Operations sensitivity-list player names are clickable links
   to the Player Explainer when pid is available. Subtle affordance -
   reads as a name first, link second. No browser-default blue. */
.ops-sens__name--link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.ops-sens__name--link:hover,
.ops-sens__name--link:focus {
  border-bottom-color: var(--border-strong, #c7c5bc);
  outline: none;
}

/* Build #9, discoverability tightening: nav reference groups.
   Quiet styling. Reads as "reference access," not as feature promotion.
   No badges, no pulse, no "new" label, no banner. */

/* Separator dot between section-jump links and reference links */
.explainer-nav__sep,
.research-subnav__sep {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--text-3, #8a8a8a);
  font-size: 11px;
  user-select: none;
}

/* Explainer reference links (Methodology, Export), same baseline styling
   as section-anchor links but with subtle visual distinction so the user
   recognizes "this is reference, not page-section." */
.explainer-nav__ref {
  font-style: italic;
}
.explainer-nav__ref:hover {
  font-style: normal;
}

/* Research subnav external link (FYPD), visually styled like a subnav button
   so it fits, but uses italic to signal "external reference, not in-page tab." */
.research-subnav__ext {
  font-size: 12.5px;
  color: var(--text-3, #8a8a8a);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-6);
  letter-spacing: 0.005em;
  font-style: italic;
  align-self: center;
}
.research-subnav__ext:hover,
.research-subnav__ext:focus {
  color: var(--text, #1f1f1f);
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

/* Build #12-A, Operations "All portfolio players" enumerable list.
   Mirrors the existing sensitivity-list aesthetic (ops-sens-list) so the
   two sections feel like siblings. Each row is name | position | proj-pts.
   Default-collapsed details element keeps the section quiet until expanded. */
.ops-roster-toggle {
  margin-top: 8px;
}
.ops-roster-toggle > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-2, #4a4e57);
  padding: 6px 10px;
  background: var(--surface-1, #f6f5f0);
  border: 1px solid var(--border, #d4d3cc);
  border-radius: var(--r-4);
  user-select: none;
  list-style: none;
  outline: none;
}
.ops-roster-toggle > summary::-webkit-details-marker { display: none; }
.ops-roster-toggle > summary:hover,
.ops-roster-toggle > summary:focus {
  border-color: var(--border-strong, #c7c5bc);
  color: var(--text, #1a1d22);
}
.ops-roster-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.ops-roster-list > li {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 12px;
  align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px dotted var(--border, #e3e2dc);
  font-size: 13px;
}
.ops-roster-list > li:last-child { border-bottom: 0; }
.ops-roster__name {
  font-weight: 550;
  color: var(--text);
  letter-spacing: -0.008em;
}
.ops-roster__name--link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.ops-roster__name--link:hover,
.ops-roster__name--link:focus {
  border-bottom-color: var(--border-strong, #c7c5bc);
  outline: none;
}
.ops-roster__pos {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 3em;
  text-align: right;
}
.ops-roster__pts {
  font-size: 12.5px;
  color: var(--text-2);
  min-width: 3em;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════
   Sidebar Phase 3, Research workspace module switcher
   Mutually-exclusive module display. All routes preserved; switching
   modules is one click. Module-switcher tab strip at sidebar top;
   non-active modules' header + groups hidden via CSS using
   [data-active-module] attribute on the sidebar.
   ════════════════════════════════════════════════════════════════════ */
.research-sidebar__module-switcher {
  display: flex;
  gap: 2px;
  padding: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
}
.research-sidebar__module-switch-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: var(--r-3);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 4px;
  color: var(--text-3, #8a8680);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.research-sidebar__module-switch-btn:hover {
  color: var(--text, #1f1f1f);
  background: rgba(15, 23, 42, 0.025);
}
.research-sidebar__module-switch-btn.is-active {
  color: var(--text, #1f1f1f);
  background: rgba(15, 23, 42, 0.05);
}
.research-sidebar__module-switch-btn:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* Hide non-active modules' headers and groups. The HTML structure has
   module-headers ([data-research-module-header="X"]) followed by groups
   whose links carry data-module="X". JS toggles a data-module-visibility
   attribute on each group to enable this CSS-driven hide/show. */
.research-sidebar[data-active-module="prospects"]   [data-research-module-header]:not([data-research-module-header="prospects"]),
.research-sidebar[data-active-module="edge"]        [data-research-module-header]:not([data-research-module-header="edge"]),
.research-sidebar[data-active-module="methodology"] [data-research-module-header]:not([data-research-module-header="methodology"]) {
  display: none;
}
.research-sidebar[data-active-module="prospects"]   .prospects-sidebar__group[data-module-visibility]:not([data-module-visibility="prospects"]),
.research-sidebar[data-active-module="edge"]        .prospects-sidebar__group[data-module-visibility]:not([data-module-visibility="edge"]),
.research-sidebar[data-active-module="methodology"] .prospects-sidebar__group[data-module-visibility]:not([data-module-visibility="methodology"]) {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   F6, Compare-pin tray visibility badge
   Quiet in-header signal that a comparison set exists. Click scrolls
   the existing compare tray into view (no new mechanics). Renders
   only when state.comparePins.length >= 1.
   ════════════════════════════════════════════════════════════════════ */
.expl-compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(154, 150, 144, 0.45);
  border-radius: var(--r-3);
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #9a9690);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.expl-compare-badge:hover,
.expl-compare-badge:focus {
  color: var(--text, #1f1f1f);
  border-color: var(--hairline-strong, rgba(31, 31, 31, 0.35));
  outline: none;
}
.expl-compare-badge:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}
.expl-compare-badge__n {
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.compare-tray--highlight {
  box-shadow: 0 0 0 2px rgba(90, 143, 207, 0.6), var(--shadow-3);
  transition: box-shadow 280ms ease;
}

/* ════════════════════════════════════════════════════════════════════
   Family 3, Shared citation-link visual language (HPR-style consolidation
   of common rules only; per-surface color/weight/spacing variations
   are intentional per PRINCIPLES §16 and remain in their per-class blocks
   above). This grouped-selector block deduplicates only the rules that
   were byte-identical across .edge-intro-ref / .draft-methodology-ref /
   .prospects-research-banner__ref. CSS cascade ensures these rules apply
   AFTER per-class overrides (no behavioral change). */
.edge-intro-ref,
.draft-methodology-ref,
.prospects-research-banner__ref {
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.edge-intro-ref:hover,
.edge-intro-ref:focus,
.draft-methodology-ref:hover,
.draft-methodology-ref:focus,
.prospects-research-banner__ref:hover,
.prospects-research-banner__ref:focus {
  color: var(--text, #1f1f1f);
  text-decoration-color: var(--hairline-strong, rgba(31, 31, 31, 0.5));
  outline: none;
}
.edge-intro-ref:focus-visible,
.draft-methodology-ref:focus-visible,
.prospects-research-banner__ref:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   G6, Cross-surface export button (Operations / Edge / Draft)
   Quiet, secondary, citation-style. Sits alongside freshness chips and
   methodology citations. No flashy download iconography.
   ════════════════════════════════════════════════════════════════════ */
.surface-export-btn {
  background: transparent;
  border: 1px solid rgba(154, 150, 144, 0.45);
  border-radius: var(--r-3);
  padding: 3px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3, #8a8680);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.surface-export-btn:hover,
.surface-export-btn:focus {
  color: var(--text, #1f1f1f);
  border-color: var(--hairline-strong, rgba(31, 31, 31, 0.35));
  outline: none;
}
.surface-export-btn:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}
/* Variant for use inline in a paragraph context (Edge intro) */
.surface-export-btn--inline {
  margin-left: 10px;
}
/* Variant for Draft topbar (slightly darker baseline to match draft chrome) */
.surface-export-btn--dark {
  color: var(--text-2, #6b6b6b);
}

/* ════════════════════════════════════════════════════════════════════
   PAIRWISE COMPARISON page, focused 2-player head-to-head
   Distinct from .compare-tray (at-a-glance tray with up to 4 pins).
   Hidden by default; revealed on #/compare/<pid1>/<pid2>.
   ════════════════════════════════════════════════════════════════════ */
.compare-page {
  position: fixed; inset: 0;
  z-index: var(--z-flyout);
  background: var(--bg, #faf9f5);
  overflow-y: auto;
  color: var(--text, #1f1f1f);
}
.compare-page[hidden] { display: none; }
.compare-page__shell { max-width: 880px; margin: 0 auto; padding: 28px 24px; }
.compare-page__topbar {
  display: flex; align-items: center; gap: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline, rgba(15, 23, 42, 0.10));
  margin-bottom: 24px;
}
.compare-page__back {
  background: transparent; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-2);
  padding: 4px 8px; border-radius: var(--r-3);
}
.compare-page__back:hover { color: var(--text); background: rgba(15,23,42,0.04); }
.compare-page__title { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.compare-page__methodology {
  font-size: 11.5px; color: var(--text-3, #8a8680);
  text-decoration: underline;
  text-decoration-color: rgba(154, 150, 144, 0.4);
  text-underline-offset: 2px;
}
.compare-page__methodology:hover { color: var(--text); }
.compare-page__cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
.compare-page__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 16px; }
.compare-page__card h2 { margin: 0; font-size: 18px; font-weight: 600; }
.compare-page__card h2 a { color: inherit; text-decoration: none; }
.compare-page__card h2 a:hover { color: var(--accent, #5a8fcf); }
.compare-page__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-page__table td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare-cell { width: 30%; }
.compare-cell--label {
  width: 40%; color: var(--text-2); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.compare-page__footnote {
  margin: 18px 0 0; padding-top: 12px;
  border-top: 1px dashed rgba(154, 150, 144, 0.3);
  font-size: 11px; font-style: italic; color: var(--muted, #9a9690);
}
.compare-page__empty { padding: 28px; color: var(--muted); font-style: italic; }
@media (min-width: 900px) {
  .compare-page { padding-left: 60px; }   /* Layer 1 rail offset */
}

/* ════════════════════════════════════════════════════════════════════
   Item 1, League power rankings + League meta surfaces
   Institutional table styling matching the Operations workspace family.
   No card chrome, no animations, no winner-declared color hits.
   ════════════════════════════════════════════════════════════════════ */
.ops-power-table-wrap { overflow-x: auto; margin-top: 8px; }
.ops-power-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-power-table th, .ops-power-table td { padding: 8px 12px; border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08)); text-align: left; }
.ops-power-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 600; }
.ops-power-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-power-rank { font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ops-power-name { font-weight: 600; }
.ops-power-note { margin-top: 14px; font-size: 12px; color: var(--text-3); font-style: italic; line-height: 1.5; }

/* ────────────────────────────────────────────────────────────────────
   Portfolio picker - sits above renderPortfolioSummary on the
   #/operations/portfolio surface. Quiet horizontal strip; never
   competes with the section headers below it.
   ──────────────────────────────────────────────────────────────────── */
.ops-portfolio-picker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-lg, 10px);
  font-size: 13px;
}
.ops-portfolio-picker__lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 600;
}
.ops-portfolio-picker__select {
  font-size: 13px; padding: 4px 8px;
  background: var(--bg, #faf9f5); border: 1px solid var(--hairline); border-radius: var(--r-4);
  color: var(--text); font-variant-numeric: tabular-nums;
  min-width: 160px;
}
.ops-portfolio-picker__solo {
  font-weight: 600; color: var(--text); font-size: 14px;
}
.ops-portfolio-picker__link {
  margin-left: auto; font-size: 12px; color: var(--text-2);
  text-decoration: none; padding: 4px 10px; border-radius: var(--r-4);
  border: 1px solid transparent;
}
.ops-portfolio-picker__link + .ops-portfolio-picker__link { margin-left: 0; }
.ops-portfolio-picker__link:hover { border-color: var(--hairline); color: var(--text); }

/* ────────────────────────────────────────────────────────────────────
   All portfolios comparison grid - same family as ops-power-table,
   wider columns for the metric-heavy layout.
   ──────────────────────────────────────────────────────────────────── */
.ops-teams-table-wrap { overflow-x: auto; margin-top: 8px; }
.ops-teams-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-teams-table th, .ops-teams-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08));
  text-align: left; white-space: nowrap;
}
.ops-teams-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 600;
}
.ops-teams-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-teams-table th.num { text-align: right; }
.ops-teams-table tbody tr:hover { background: rgba(15,23,42,0.025); }
.ops-teams-name a { font-weight: 600; color: var(--text); text-decoration: none; }
.ops-teams-name a:hover { text-decoration: underline; }
.ops-teams-archs { color: var(--text-2); font-size: 12px; white-space: normal; max-width: 220px; }

/* ────────────────────────────────────────────────────────────────────
   Rich empty state for the portfolio surface. Promises what the user
   gets and leads to a primary CTA. Composes on top of .ops-empty.
   ──────────────────────────────────────────────────────────────────── */
.ops-empty--rich { padding: 28px 24px; max-width: 760px; }
.ops-empty--rich .ops-empty__title { font-size: 17px; }
.ops-empty__features {
  margin: 16px 0 22px; padding: 0; list-style: none;
  display: grid; gap: 8px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.ops-empty__features li {
  padding-left: 18px; position: relative;
}
.ops-empty__features li::before {
  content: '·'; position: absolute; left: 6px; top: -2px;
  font-weight: 700; color: var(--text-3); font-size: 16px;
}
.ops-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Higher specificity than `.ops-empty a` (which paints empty-state body
   links with default link color + underline) so the action buttons keep
   their button look on dark+light variants. */
.ops-empty__actions a.ops-btn--primary {
  background: var(--text, #111); color: var(--bg, #faf9f5);
  border: 1px solid var(--text, #111);
  padding: 8px 16px; border-radius: var(--r-6); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.ops-empty__actions a.ops-btn--primary:hover { opacity: 0.88; }
.ops-empty__actions a.ops-btn--ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--hairline);
  padding: 8px 16px; border-radius: var(--r-6); text-decoration: none;
  font-size: 13px; font-weight: 500;
}
.ops-empty__actions a.ops-btn--ghost:hover { color: var(--text); border-color: var(--text-3); }

.ops-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 12px; }
.ops-meta-block { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 14px 16px; }
.ops-meta-block h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 600; }
.ops-meta-dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.ops-meta-dl dt { color: var(--text-2); }
.ops-meta-dl dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ops-meta-table { width: 100%; font-size: 13px; }
.ops-meta-table td { padding: 3px 0; }
.ops-meta-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ops-meta-num { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
.ops-meta-sub { margin: 0; font-size: 11px; color: var(--text-3); font-style: italic; line-height: 1.45; }

/* Item 2, Risers & Fallers page */
/* Inline section (not a fixed overlay), lives in document flow under
   the Rankings card so the workspace-subnav stays visible above it.
   Visibility is gated by data-view="risers" CSS rules (see top of file). */
.risers-page { background: var(--bg, #faf9f5); color: var(--text); padding: 0 24px 80px; }
.risers-page__shell { max-width: 1180px; margin: 0 auto; padding: 22px 0 0; }
.risers-page__header { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
.risers-page__title { margin: 0; font-size: 16px; font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────
   Risers & Fallers, full build-out (rf-* namespace)
   Quiet, institutional. Two-column grid, rich movement cards with
   sparklines, classification badges, and driver sentences.
   ────────────────────────────────────────────────────────────────────── */

/* Summary band */
.rf-summary {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-2, #f5f4ef);
  border: 1px solid var(--hairline);
  border-radius: var(--r-8);
  margin-bottom: 16px;
}
.rf-summary__primary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.rf-summary__stat { color: var(--text-2); font-variant-numeric: tabular-nums; }
.rf-summary__stat b { color: var(--text); font-size: 16px; font-weight: 700; margin-right: 4px; }
.rf-summary__stat--up b   { color: #0e5f2c; }
.rf-summary__stat--down b { color: #a01a1a; }
.rf-summary__meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-3); align-items: center; }
.rf-summary__sep { opacity: 0.5; }
.rf-summary__win { font-weight: 600; color: var(--text-2); }

/* Filter bar */
.rf-filterbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--hairline);
}
.rf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font: inherit; font-size: 12px; color: var(--text-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.rf-chip:hover { background: var(--bg-2, #f5f4ef); }
.rf-chip.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.rf-chip__count {
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  border-left: 1px solid var(--hairline);
}
.rf-chip.is-active .rf-chip__count { color: rgba(255,255,255,0.7); border-left-color: rgba(255,255,255,0.2); }

.rf-sort { display: flex; align-items: center; gap: 8px; }
.rf-sort__lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.rf-sort__sel {
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-6);
  font: inherit; font-size: 12px; color: var(--text);
  cursor: pointer;
}

/* Two-column grid */
.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .rf-grid { grid-template-columns: 1fr; } }
.rf-col__hd {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.rf-col--risers  .rf-col__arrow { color: #0e5f2c; }
.rf-col--fallers .rf-col__arrow { color: #a01a1a; }
.rf-col__list { display: flex; flex-direction: column; gap: 8px; }

/* Movement card */
.rf-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-8);
  transition: border-color 120ms ease, transform 120ms ease;
}
.rf-card:hover { border-color: var(--text-3); }
.rf-card--up   { border-left: 3px solid var(--green, #066b4a); }
.rf-card--down { border-left: 3px solid var(--red, #9b2c2c); }

.rf-card__hd { display: flex; align-items: center; gap: 8px; }
.rf-card__name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-card__name:hover { color: var(--accent, #ef4444); }
.rf-pos.posChip {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-4);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--bg-2, #f5f4ef); color: var(--text-2); border: 1px solid var(--hairline);
}
.rf-rank {
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.rf-card__body {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rf-card__nums {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
/* Tabular-nums repeated on each child for robustness - the container has
   it but ensuring the child wins through ::before / pseudo content too. */
.rf-card__base  { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rf-card__arrow { font-size: var(--t-xs); color: var(--text-3); opacity: 0.6; }
.rf-card__curr  { font-size: var(--t-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rf-card__delta { font-size: var(--t-xs); font-weight: 600; margin-left: var(--space-2); font-variant-numeric: tabular-nums; }
.rf-card__delta--up   { color: var(--green); }
.rf-card__delta--down { color: var(--red); }
.rf-card__pct { font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }

.rf-spark { flex-shrink: 0; }

/* ── Sparkline stroke tokenization ─────────────────────────
   Eight ad-hoc stroke-widths used to ship across sparkline render
   sites (1.2 / 1.4 / 1.5 / 1.6 / 1.8 / 2). CSS stroke-width on the
   <polyline> overrides the SVG presentation attribute, so a single
   rule here normalizes all of them to var(--spark-stroke) without
   touching the JS render sites. */
.rf-spark polyline,
.expl-st-spark polyline,
.trend > svg polyline {
  stroke-width: var(--spark-stroke);
}

.rf-card__ft {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-2);
  padding-top: 4px;
  border-top: 1px dashed var(--hairline);
}
.rf-card__drv { flex: 1; line-height: 1.4; }

.rf-class {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rf-class--signal       { background: rgba(9, 130, 93, 0.12); color: #0e5f2c; }
.rf-class--cascade      { background: rgba(199, 154, 27, 0.15); color: var(--gold, #8a6b1a); }
.rf-class--unattributed { background: var(--bg-2, #f5f4ef); color: var(--text-3); }

/* Empty states */
.rf-empty {
  font-size: 12px; color: var(--text-3); font-style: italic;
  padding: 18px 14px; text-align: center;
  background: var(--bg-2, #f5f4ef);
  border-radius: var(--r-6);
}
.rf-empty-state {
  padding: 40px 20px; text-align: center;
  background: var(--bg-2, #f5f4ef);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-10);
  margin: 18px 0;
}
.rf-empty-state__title { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.rf-empty-state__sub   { font-size: 12px; color: var(--text-3); max-width: 540px; margin: 0 auto; line-height: 1.6; }

/* Footer note */
.rf-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
  font-size: 11px; color: var(--text-3); line-height: 1.5; font-style: italic;
  max-width: 800px;
}

/* ════════════════════════════════════════════════════════════════════
   Risers & Fallers TABLE board (#/risers, _renderRisersFallers).
   The rebuilt table view shipped WITHOUT its own CSS, so h2.rf-bucket
   rendered as a giant default heading and the player cell's name + meta
   ran inline and overflowed the column ("· 34y · A…"). This styles it:
   compact section headings, a stacked player cell (name over a muted
   meta line), colored verdict pills, and tight rows. (The .rf-card /
   .rf-grid block above is the legacy card view, still used elsewhere.)
   ════════════════════════════════════════════════════════════════════ */
/* Legacy card-based risers board (#risersPage, the "snapshot history /
   Projection down N pts since baseline" cards) is fully superseded by the
   #subPageLanding table board above — hide it so it stops rendering below. */
#risersPage { display: none !important; }

.rf-section { margin: 0 0 12px; }
.rf-section:last-child { margin-bottom: 0; }
.rf-bucket {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 5px; padding: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-1, #1a1a1f);
}
.rf-bucket .rf-arrow { font-size: 13px; line-height: 1; }
.rf-bucket-sub { font-size: 12px; font-weight: 600; color: var(--text-3, #8a8680); letter-spacing: 0; }
.rf-arrow--up   { color: #0e5f2c; }
.rf-arrow--down { color: #a01a1a; }

/* Tight rows + organized cells (more specific than .table-wrap table td) */
.table-wrap .rf-table tbody td { padding: 4px 11px; vertical-align: top; }
.rf-row { cursor: pointer; }
.rf-rank { color: var(--text-3, #8a8680); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Player cell — name on top, muted meta line below (stops inline overflow) */
.rf-player { min-width: 196px; white-space: normal; }
.rf-name { display: block; font-weight: 600; color: var(--text-1, #1a1a1f); line-height: 1.25; }
.rf-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px;
  font-size: 11px; color: var(--text-3, #8a8680); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.rf-meta .posChip { font-size: 9.5px; padding: 1px 5px; }
.rf-inj { color: var(--red, #9b2c2c); font-weight: 600; }

.rf-pts { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-1, #1a1a1f); }
.rf-stock { white-space: nowrap; }
.rf-stock .rf-arrow { font-size: 11px; }
.rf-tier { font-size: 11px; font-weight: 600; color: var(--text-2, #5a5650); letter-spacing: 0.02em; }
.rf-why { font-size: 12px; color: var(--text-2, #5a5650); line-height: 1.3; text-align: left; }

/* Verdict pills */
.rf-verdict { white-space: nowrap; }
.rf-v {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.rf-v--buy2 { background: rgba(6, 107, 74, 0.15); color: #0e5f2c; }
.rf-v--buy  { background: rgba(6, 107, 74, 0.09); color: #0e5f2c; }
.rf-v--sell { background: rgba(155, 44, 44, 0.13); color: #a01a1a; }
.rf-v--hold { background: var(--bg-2, #f5f4ef); color: var(--text-2, #5a5650); }

/* Scoring preset control at the top of the board */
.rf-scorebar { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; flex-wrap: wrap; }
.rf-scorebar__lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
}
.rf-scorebar__sel {
  padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-6, 6px);
  background: var(--bg); font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.rf-scorebar__note { font-size: 11.5px; color: var(--text-3, #8a8680); }
.rf-scorebar__note a { color: #1e6fb8; text-decoration: none; }
.rf-scorebar__note a:hover { text-decoration: underline; }

/* Configure-League pill + pull-out scoring panel — mirrors the rounded pill the
   redraft/dynasty boards use (the base .config-pill is the old square/uppercase
   look; the modern one lives under body[data-route="rankings"], which doesn't
   match the risers route, so re-create it here with higher specificity). */
.rf-scorebar .config-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--sv-bg-soft, #f5f4ef); border: 1px solid var(--hairline);
  font: inherit; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text, #16140f); cursor: pointer; transition: background 120ms ease, border-color 120ms ease;
}
.rf-scorebar .config-pill:hover { background: #fff; border-color: var(--text-3, #8a8680); }
.rf-scorebar .config-pill__summary { color: var(--text-3, #8a8680); font-weight: 400; }
.rf-scorebar .config-pill__chevron { color: var(--text-3, #8a8680); font-size: 11px; transition: transform 160ms ease; }
.rf-cfg-pill[aria-expanded="true"] .config-pill__chevron { transform: rotate(180deg); }

.rf-cfg-panel {
  margin: 10px 0 16px; padding: 14px 16px; max-width: 460px;
  background: var(--surface, #fff); border: 1px solid var(--hairline); border-radius: var(--r-8, 10px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
.rf-cfg-panel__head {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3, #8a8680); margin-bottom: 9px;
}
.rf-cfg-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.rf-cfg-opt {
  padding: 6px 13px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--bg); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2, #5a5650);
  cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rf-cfg-opt:hover { background: var(--bg-2, #f5f4ef); border-color: var(--text-3, #8a8680); }
/* Higher specificity + the app's accent (matches .ss-mode.is-active etc.) so a
   generic active-chip rule can't win and leave the selected preset ambiguous. */
.rf-cfg-panel .rf-cfg-opt.is-active {
  background: var(--accent, #16324f) !important; color: #fff !important; border-color: var(--accent, #16324f) !important;
}
.rf-cfg-more { display: inline-block; margin-top: 12px; font-size: 12px; color: #1e6fb8; text-decoration: none; }
.rf-cfg-more:hover { text-decoration: underline; }

/* Buy/sell GRADE chip — letter grade; green for buys, red for sells,
   darker = stronger grade. Replaces the old Proj column. */
.rf-grade { white-space: nowrap; }
.rf-grade-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 3px 9px; border-radius: var(--r-6, 6px);
  font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.rf-grade--a-buy  { background: rgba(6, 107, 74, 0.18);  color: #0e5f2c; }
.rf-grade--b-buy  { background: rgba(6, 107, 74, 0.10);  color: #0e5f2c; }
.rf-grade--c-buy  { background: var(--bg-2, #f5f4ef);     color: var(--text-2, #5a5650); }
.rf-grade--a-sell { background: rgba(155, 44, 44, 0.17);  color: #a01a1a; }
.rf-grade--b-sell { background: rgba(155, 44, 44, 0.09);  color: #a01a1a; }
.rf-grade--c-sell { background: var(--bg-2, #f5f4ef);     color: var(--text-2, #5a5650); }

/* Item 3, Trade value graphic */
.trade-value-graphic { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(154, 150, 144, 0.3); }
.trade-value-svg { width: 100%; max-width: 400px; height: auto; }
.trade-value-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.trade-value-cohort, .trade-value-player { font-variant-numeric: tabular-nums; }

/* Item 6, RoS toggle in trade analyzer */
.ops-trade-controls { margin: 8px 0 12px; padding: 10px 12px; background: rgba(15, 23, 42, 0.025); border-radius: var(--r-4); display: flex; flex-direction: column; gap: 4px; }
.ops-trade-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ops-trade-toggle-note { font-size: 11px; color: var(--text-3); font-style: italic; }
.ops-trade-ros-banner { padding: 10px 14px; background: rgba(90, 143, 207, 0.08); border-left: 3px solid var(--accent, #5a8fcf); font-size: 12px; color: var(--text-2); margin-bottom: 16px; border-radius: 0 var(--r-3) var(--r-3) 0; }

/* ════════════════════════════════════════════════════════════════════
   managr brand, headset SVG logo
   Used in: Layer 1 rail brand mark, horizontal site-nav logo mark,
   hero title. Black, transparent background. Stroke + filled ear cups.
   ════════════════════════════════════════════════════════════════════ */
.brand-headset {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  /* SVG colors are hardcoded #000 in markup so the headset is always
     black regardless of context. This is intentional, per the brand
     spec, the headset is black on transparent. */
}
/* Inside the site-nav__logo-mark: transparent background (no pill); just
   the headset. Slightly smaller to feel proportional to the wordmark. */
.site-nav__logo-mark .brand-headset {
  width: 24px;
  height: 24px;
}
/* Inside the Layer 1 rail brand container */
.layer1-rail__brand .brand-headset {
  width: 28px;
  height: 28px;
}
/* Hero-sized variant, sized relative to the hero title font.
   On the dark hero background, the headset inverts to off-white for
   visibility. Brand identity remains "black headset on transparent" in
   light contexts (site-nav, Layer 1 rail); dark-context inversion preserves
   the silhouette as a brand mark. */
.brand-headset--hero {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.18em;
  vertical-align: -0.12em;
}
/* New line-art headset is stroke-only (no fills). On the dark hero,
   override stroke to off-white for visibility. Fill stays "none" inherited
   from the SVG attribute. */
.brand-headset--hero path,
.brand-headset--hero rect,
.brand-headset--hero line {
  /* Light theme: dark ink stroke to match the dark wordmark on white hero */
  stroke: #0b1120 !important;
}
/* The Layer 1 rail's prior brand-mark font-glyph span is suppressed */
.layer1-rail__brand-mark { display: none; }

/* ════════════════════════════════════════════════════════════════════
   Phase 1, Top nav reduced to minimal chrome
   Horizontal workspace links removed. Top nav now holds only:
    , logo (brand mark + wordmark)
    , chrome buttons (search, settings, profile placeholders)
   The Layer 1 vertical rail is the primary navigation system.
   ════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────────
   PLAYER SEARCH (header), always-visible search box with dropdown.
   Click a result → opens the player-profile-modal with their 3 ranks.
   ────────────────────────────────────────────────────────────────────── */
.player-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(11, 17, 32, 0.04);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: 999px;
  width: 240px;
  transition: background 120ms ease, border-color 120ms ease, width 160ms ease;
}
.player-search:focus-within {
  background: #ffffff;
  border-color: rgba(11, 17, 32, 0.18);
  width: 320px;
}
.player-search__icon { color: #6b7280; flex-shrink: 0; }
.player-search__input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 13px;
  color: #0b1120;
}
.player-search__input::placeholder { color: #9ca3af; }
.player-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.10);
  border-radius: var(--r-10);
  box-shadow: 0 6px 24px rgba(11, 17, 32, 0.12);
  max-height: 380px;
  overflow-y: auto;
  z-index: 10000;
}
.player-search__dropdown[hidden] { display: none; }
.player-search__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(11, 17, 32, 0.04);
  font-size: 13px;
  color: #0b1120;
}
.player-search__result:last-child { border-bottom: none; }
.player-search__result:hover,
.player-search__result.is-active {
  background: rgba(11, 17, 32, 0.04);
}
.player-search__result-name { flex: 1; font-weight: 600; }
.player-search__result-meta { font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; }
.player-search__tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}
.player-search__tag--mlb { background: rgba(11, 17, 32, 0.05); color: #6b7280; }
.player-search__tag--milb { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.player-search__empty {
  padding: 18px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: #9ca3af;
}

/* Player profile modal.
   `top: var(--nav-h)` (not `inset: 0`) keeps the main site-nav tabs visible
   and clickable above the modal/backdrop when a player profile is open. */
.player-profile-modal {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-profile-modal[hidden] { display: none; }
.player-profile-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 17, 32, 0.45);
  backdrop-filter: blur(2px);
}
.player-profile-modal__panel {
  position: relative;
  background: #ffffff;
  border-radius: var(--r-14);
  box-shadow: 0 24px 60px rgba(11, 17, 32, 0.25);
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
}
.player-profile-modal__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #6b7280;
  cursor: pointer;
  border-radius: var(--r-6);
  line-height: 1;
}
.player-profile-modal__close:hover { background: rgba(11, 17, 32, 0.05); color: #0b1120; }

.player-profile__header { margin-bottom: 18px; }
.player-profile__name {
  font-size: 22px; font-weight: 700; color: #0b1120;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.player-profile__meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: #6b7280;
}
.player-profile__pos-chip {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-4);
  background: rgba(11, 17, 32, 0.05);
  color: #6b7280;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.player-profile__fyp-tag {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-3);
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}

.player-profile__ranks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.player-profile__rank-card {
  background: rgba(11, 17, 32, 0.025);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 14px;
  text-align: center;
}
.player-profile__rank-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}
.player-profile__rank-value {
  font-size: 26px;
  font-weight: 700;
  color: #0b1120;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.player-profile__rank-value--none {
  font-size: 16px;
  color: #9ca3af;
  font-style: italic;
  font-weight: 500;
}
.player-profile__rank-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.player-profile__notes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(11, 17, 32, 0.08);
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .player-search { width: 180px; }
  .player-search:focus-within { width: 240px; }
}

/* ──────────────────────────────────────────────────────────────────────
   PROFILE HERO BAND, premium player-page header
   Big headshot with team-color ring, display-weight name, position chips,
   team + age + injury chips, and a quick-stat strip for 2026 projection
   and the 3 format ranks (+ FYP when applicable).
   ────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────
   PLAYER PROFILE, Cinematic editorial treatment
   Matches the home page's Soft Structuralism aesthetic: squircle radii,
   diffused multi-layer shadows, ambient gradient washes, editorial type
   scale. Replaces the previous flat "stats sheet" look.
   ────────────────────────────────────────────────────────────────────── */
.profile-hero {
  position: relative;
  /* Compacted for the Savant-style dashboard: target ≤ ~200px tall so the
     3-column grid below fits in roughly one viewport. The original
     hero was 48/52/40 with a 156px photo + 48px name, beautiful but it
     pushed the data below the fold. */
  margin-bottom: 14px;
  padding: 22px 24px 20px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
  border: 1px solid rgba(11, 17, 32, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.025),
    0 8px 24px -8px rgba(11, 17, 32, 0.08),
    0 24px 56px -24px rgba(11, 17, 32, 0.06);
  overflow: hidden;
  /* Two-track row: identity (photo + name + chips) sits inline with the
     stat strip so the entire hero reads as a single banner line. */
  display: grid;
  grid-template-columns: minmax(280px, auto) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
/* Cinematic ambient backdrop, large soft gradient washes echoing the
   home hero's atmospheric feel. The PRIMARY wash uses --team-color (set
   inline on .profile-hero) so each player's profile picks up their team's
   identity color. Fallback ink-default when no team is known. */
.profile-hero__backdrop {
  position: absolute;
  inset: 0;
  background:
    /* Primary team-color wash , anchored top-right, much stronger than the
       previous 14% tint so the player's team identity actually reads. */
    radial-gradient(circle 1000px at 105% -5%,  color-mix(in srgb, var(--team-color, #0b1120) 32%, transparent), transparent 60%),
    /* Secondary team-color glow bottom-left for depth */
    radial-gradient(circle 700px at -5% 110%,   color-mix(in srgb, var(--team-color, #0b1120) 12%, transparent), transparent 60%),
    radial-gradient(circle 600px at 50% 50%,    rgba(11, 17, 32, 0.015), transparent 70%);
  pointer-events: none;
}

/* Solid team-color left accent stripe , strongest single visual cue that
   this is a {team}'s player, runs the full height of the hero. */
.profile-hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--team-color, #0b1120);
  border-radius: 18px 0 0 18px;
  pointer-events: none;
  z-index: 1;
}

/* Team-logo watermark , large, prominent, anchored to the right edge of
   the hero. Uses the team's PRIMARY mark (with city/team name baked in)
   so the watermark reads as the team's identity, not a generic cap.
   Higher opacity (0.32) + larger size so it's clearly visible as the
   page's editorial background, similar to how MLB City Connect art reads. */
.profile-hero__watermark {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
}
@media (max-width: 1100px) {
  .profile-hero__watermark { width: 300px; height: 300px; right: -25px; opacity: 0.28; }
}
@media (max-width: 720px) {
  .profile-hero__watermark { width: 220px; height: 220px; right: -30px; opacity: 0.22; }
}

/* Inline team logo next to the player name (small, full-color, prominent) */
.profile-hero__name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
/* City / primary logo (ESPN CDN) next to the player name. ESPN's primary
   marks are usually square-ish , the symbol IS the team identity (e.g.
   Yankees interlocking NY, Dodgers script "Dodgers", Guardians diamond-C
   with curved Cleveland nameplate). Auto-fit the height; let width grow
   for the rare horizontal-wordmark teams. */
.profile-hero__team-logo {
  width: auto;
  max-width: 90px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(11, 17, 32, 0.10));
}
@media (max-width: 720px) {
  .profile-hero__team-logo { max-width: 70px; height: 34px; }
}
/* Hairline accent ribbon across the top of the hero, Soft Structuralism */
.profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 17, 32, 0.08), transparent);
  pointer-events: none;
}
.profile-hero__main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}
/* Compact headshot with TEAM-COLOR concentric ring + glow halo. Smaller
   diameter so the hero fits the dashboard banner; ring math scales down
   proportionally. */
.profile-hero__photo {
  flex-shrink: 0;
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: #f3f4f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><circle cx='40' cy='30' r='14' fill='%23d1d5db'/><path d='M14 78 c0-16 12-26 26-26 s26 10 26 26' fill='%23d1d5db'/></svg>") center/60% no-repeat;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(11, 17, 32, 0.06),
    0 0 0 4px rgba(255, 255, 255, 0.8),
    0 0 0 6px color-mix(in srgb, var(--team-color, #0b1120) 55%, transparent),
    0 0 0 7px color-mix(in srgb, var(--team-color, #0b1120) 18%, transparent),
    0 8px 20px -4px color-mix(in srgb, var(--team-color, #0b1120) 25%, rgba(11, 17, 32, 0.10)),
    0 16px 40px -10px rgba(11, 17, 32, 0.10);
}
.profile-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-hero__identity { flex: 1; min-width: 0; }
.profile-hero__name {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #0b1120;
  line-height: 1.05;
}
.profile-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-transform: uppercase;
  background: rgba(11, 17, 32, 0.04);
  color: #475569;
  border: 1px solid rgba(11, 17, 32, 0.05);
}
.hero-chip--pos       { background: rgba(11, 17, 32, 0.07); color: #0b1120; }
.hero-chip--team      {
  background: #ffffff;
  color: #0b1120;
  padding: 4px 10px 4px 4px;
  gap: 6px;
  border-color: color-mix(in srgb, var(--team-color, #0b1120) 20%, rgba(11, 17, 32, 0.06));
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, var(--team-color, #0b1120) 35%, transparent),
    0 1px 2px rgba(11, 17, 32, 0.04);
}
.hero-chip__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}
.hero-chip__team-abbr {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--team-color, #0b1120);
}
.hero-chip__team-name {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #475569;
  margin-left: 2px;
  font-size: 11px;
}
.hero-chip--age       { background: transparent; color: #94a3b8; border-color: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; }
.hero-chip--injury    { background: rgba(239, 68, 68, 0.10); color: #c2410c; border-color: rgba(239, 68, 68, 0.20); }

.profile-hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}
.hero-stat {
  padding: 10px 14px 11px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfb 100%);
  border: 1px solid rgba(11, 17, 32, 0.05);
  border-radius: var(--r-10);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.02),
    0 4px 12px -6px rgba(11, 17, 32, 0.04);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-stat:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(11, 17, 32, 0.03),
    0 8px 16px -8px rgba(11, 17, 32, 0.08);
}
/* Top-edge accent gradient, adds the premium "ribbon" feel */
.hero-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 106, 210, 0.20), transparent);
  pointer-events: none;
}
.hero-stat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: #0b1120;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stat__sub {
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: #94a3b8;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .profile-hero {
    padding: 18px 18px 16px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .profile-hero__main { gap: 14px; }
  .profile-hero__photo { width: 80px; height: 80px; }
  .profile-hero__name { font-size: 24px; }
  .hero-stat { padding: 10px 12px 10px; }
  .hero-stat__value { font-size: 20px; }
}

/* ──────────────────────────────────────────────────────────────────────
   SAVANT-STYLE TOP CARD, Career stats (left) + Percentile rankings (right)
   ────────────────────────────────────────────────────────────────────── */
/* Savant top card, Percentile Rankings is now the HERO panel, stacked
   above the career stats table (Baseball Savant's own player-page layout).
   Percentile rankings get the full card width + bigger typography + more
   prominent bars. Career stats sit below in a quieter treatment. */
.savant-top-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
/* Each child becomes its own framed card. Compacted for the dashboard
   left column: tighter inner padding so the percentile bars + career
   table fit a 320px-ish column without horizontal overflow. */
.savant-top-card__left, .savant-top-card__right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfb 100%);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-14);
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.02),
    0 4px 12px -6px rgba(11, 17, 32, 0.05);
  min-width: 0;
}
/* Layout order: Percentile Rankings card FIRST (visual emphasis), Career
   Stats card SECOND (supporting context). */
.savant-top-card__right { order: 1; padding: 16px 18px 14px; }   /* percentile card */
.savant-top-card__left  { order: 2; overflow-x: auto; }            /* career stats card scrolls if needed */
@media (max-width: 720px) {
  .savant-top-card__right { padding: 14px 14px; }
  .savant-top-card__left  { padding: 12px; }
}
.savant-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #0b1120;
  margin-bottom: 8px;
  text-transform: none;
}

.savant-career-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.savant-career-table thead th {
  text-align: right;
  padding: 6px 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}
.savant-career-table thead th:first-child { text-align: left; padding-left: 0; }
.savant-career-table tbody td {
  padding: 6px 5px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.04);
  color: #0b1120;
  white-space: nowrap;
}
.savant-career-table tbody td:first-child { padding-left: 0; }
.savant-career-table tbody tr:hover td { background: rgba(11, 17, 32, 0.015); }
.savant-career-table tbody tr:last-child td { border-bottom: none; }
.savant-career-table tbody td:first-child {
  font-weight: 600;
  color: #475569;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.savant-career-table td.num { text-align: right; }
.savant-career-table__total td {
  font-weight: 700;
  color: #0b1120 !important;
  background: rgba(11, 17, 32, 0.025);
  border-top: 1px solid rgba(11, 17, 32, 0.10);
  font-size: 13px !important;
  white-space: nowrap;
}

/* PERCENTILE RANKINGS, hero centerpiece of the profile.
   Everything bigger: 18px label → 22px tracks → 36px bubbles → 16px values.
   The bars now use a richer gradient (cool blue → neutral → hot red) and
   the bubbles have a stronger glow so they read as the focal point. */
.savant-pctile-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.savant-pctile-card--empty {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
  padding: 40px 20px;
}
.savant-pctile-card__head {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-transform: none;
  color: #0b1120;
  margin: 0 0 14px;
  text-align: left;
}

/* ──────────────────────────────────────────────────────────────────────
   STANDALONE PERCENTILE CARD , promoted to the top of the player
   profile's CENTER column. This is the page-lead surface, so the styling
   is heavier than the in-Savant-card percentile section: larger heading,
   subtle elevation, generous padding, two-column row grid so the longer
   list (18 metrics across 7 sections) fits within one screen.
   ────────────────────────────────────────────────────────────────────── */
.pctile-card-standalone {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-14);
  padding: 22px 26px 20px;
  margin: 0 0 22px;
  box-shadow:
    0 1px 2px rgba(11, 17, 32, 0.04),
    0 8px 24px -16px rgba(11, 17, 32, 0.16);
}
.pctile-card-standalone__head {
  font: 700 18px/1.2 "Geist", system-ui, sans-serif;
  letter-spacing: -0.018em;
  color: var(--text-1, #0b1120);
  margin: 0 0 4px;
}
.pctile-card-standalone__head::after {
  content: 'How this player ranks against the league';
  display: block;
  font: 500 12px/1.4 "Geist", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--text-3, #98989f);
  margin-top: 4px;
}
.pctile-card-standalone__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
  margin-top: 16px;
}
/* Each .savant-pctile-section already has internal sizing , let the grid
   place them into two columns, with section-label underline retained for
   visual grouping. */
.pctile-card-standalone__body .savant-pctile-section {
  margin-bottom: 12px;
}
.pctile-card-standalone__body .savant-pctile-section:nth-last-child(-n+2) {
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .pctile-card-standalone__body { grid-template-columns: 1fr; gap: 4px 0; }
}
@media (max-width: 600px) {
  .pctile-card-standalone { padding: 16px 18px; }
  .pctile-card-standalone__head { font-size: 16px; }
}
/* Legend element retained as a no-op anchor in case future builds re-add a
   POOR/AVERAGE/GREAT strip; renders nothing today. */
.savant-pctile-card__legend { display: none; }

.savant-pctile-section { margin-bottom: 14px; }
.savant-pctile-section:last-child { margin-bottom: 0; }
.savant-pctile-section__label {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 8px;
  padding: 0 0 5px 0;
  text-align: left;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}

.savant-pctile-row {
  display: grid;
  /* label left-aligned · track flex · numeric value right-aligned */
  grid-template-columns: 110px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  font-size: 11px;
}
.savant-pctile-row:last-child { margin-bottom: 0; }

.savant-pctile-row__label {
  text-align: left;             /* was right , switched per user */
  color: var(--text-1, #0b1120);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.savant-pctile-row__track {
  position: relative;
  height: 8px;
  /* Red→amber→green gradient so the track itself communicates the same
     direction as the bubble color (green = great). */
  background: linear-gradient(to right,
    rgba(193, 52, 46, 0.12) 0%,
    rgba(229, 176, 33, 0.12) 50%,
    rgba(34, 160, 69, 0.12) 100%);
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(11, 17, 32, 0.04);
  min-width: 0;
}
.savant-pctile-row__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 5px;
  transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(11, 17, 32, 0.06);
}
.savant-pctile-row__bubble {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 20px; height: 20px;
  border-radius: var(--r-10);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(11, 17, 32, 0.08),
              0 2px 4px rgba(11, 17, 32, 0.14);
  transition: left 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.savant-pctile-row__val {
  text-align: right;
  color: var(--text-2, #4b4b54);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  white-space: nowrap;
}

/* Empty-state row: when a metric is expected on every pitcher profile but
   we don't have data for this player yet (e.g. Perceived Velocity for a
   pitcher Savant hasn't qualified yet). Renders the label and a dashed
   inactive track so the section stays consistent. */
.savant-pctile-row--empty { opacity: 0.55; }
.savant-pctile-row__track--empty {
  background: repeating-linear-gradient(
    90deg,
    rgba(11, 17, 32, 0.06) 0px,
    rgba(11, 17, 32, 0.06) 4px,
    transparent 4px,
    transparent 8px
  );
  box-shadow: none;
}
.savant-pctile-row__val--empty { color: var(--text-3, #98989f); }

/* Tooltip help indicator on metric labels (e.g. Perceived Velocity).
   Renders a small "?" badge after the label; the native tooltip carries
   the help copy via the title attribute on the parent label container. */
.savant-pctile-row__label[title] { cursor: help; }
.savant-pctile-row__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border-radius: 50%;
  background: rgba(11, 17, 32, 0.08);
  color: var(--text-3, #6b6b75);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
.savant-pctile-row__label[title]:hover .savant-pctile-row__help {
  background: rgba(11, 17, 32, 0.16);
  color: var(--text-1, #1a1a1f);
}

/* Mobile: collapse the 2-column percentile layout to a single column so
   the bars don't get pinched to unreadable widths on narrow screens.
   Tightens vertical rhythm + label/value font sizes for compact layout. */
@media (max-width: 760px) {
  .pctile-card-standalone__body { display: block !important; }
  .pctile-card-standalone__body .savant-pctile-col {
    width: 100%;
    margin-bottom: 4px;
  }
  .savant-pctile-row { font-size: 11.5px; }
  .savant-pctile-row__label { min-width: 0; flex-shrink: 1; }
  .savant-pctile-row__val   { font-size: 11px; }
  .savant-pctile-section { margin-bottom: 12px; }
  .savant-pctile-section__label { font-size: 10px; }
}

/* ──────────────────────────────────────────────────────────────────────
   EXPLAINER 3-FORMAT RANKINGS STRIP, sits below the header in the
   player profile page. Shows Redraft / Keeper / Dynasty rank cards,
   with optional FYPD card when player is in the FYPD prospect pool.
   ────────────────────────────────────────────────────────────────────── */
.expl-format-rankings {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: rgba(11, 17, 32, 0.025);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-12);
}
.expl-format-rankings__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}
.expl-format-rankings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.expl-format-rankings__grid.has-fyp { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .expl-format-rankings__grid,
  .expl-format-rankings__grid.has-fyp { grid-template-columns: repeat(2, 1fr); }
}
.expl-rank-card {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.05);
  border-radius: var(--r-8);
  padding: 12px 14px;
  text-align: center;
}
.expl-rank-card--fyp { border-color: rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.03); }
.expl-rank-card__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}
.expl-rank-card__value {
  font-size: 22px; font-weight: 700;
  color: #0b1120;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.expl-rank-card__value--none {
  color: #9ca3af; font-size: 16px; font-style: italic; font-weight: 500;
}
.expl-rank-card__sub {
  margin-top: 3px;
  font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums;
}

.site-nav__chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.site-nav__chrome-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: var(--r-6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3, #8a8680);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.site-nav__chrome-btn:hover {
  color: var(--text, #1f1f1f);
  background: rgba(15, 23, 42, 0.04);
}
.site-nav__chrome-btn:focus-visible {
  outline: 2px solid var(--accent, #5a8fcf);
  outline-offset: 1px;
}

/* The old "Sign up" action button + Layer 2 from Phase 2, restored later if needed */

/* ════════════════════════════════════════════════════════════════════
   Phase 2, Layer 1 flyout panel
   Anchored to the right of the 60px Layer 1 rail. Dark institutional
   surface. Reveals the hovered workspace's full Layer 2 hierarchy.
   Single column; no mega menus; no multi-column layouts.
   ════════════════════════════════════════════════════════════════════ */
.layer1-flyout {
  /* Drops down from the horizontal top nav, anchored to the hovered
     workspace item. Initial left is set by JS via _positionFlyout()
     based on the item's getBoundingClientRect(). The fallback left: 8px
     prevents off-screen flash if JS hasn't positioned yet. */
  position: fixed;
  top: var(--nav-h, 56px);
  left: 8px;
  max-height: calc(100dvh - var(--nav-h, 56px) - 24px);
  width: 320px;
  max-width: calc(100vw - 16px);
  background: #14171c;
  border: 1px solid rgba(232, 228, 216, 0.10);
  border-radius: var(--r-6);
  z-index: 1680;
  overflow-y: auto;
  padding: 16px 14px 20px;
  color: rgba(232, 228, 216, 0.86);
  font-family: var(--font, sans-serif);
  /* Diffusion shadow tinted to the panel hue (#14171c) per redesign-skill:
     "Tint shadows to match background hue instead of pure black at low opacity." */
  box-shadow: 0 1px 1px rgba(7, 9, 14, 0.18),
              0 10px 24px -8px rgba(7, 9, 14, 0.24),
              0 24px 56px -20px rgba(7, 9, 14, 0.30);
  animation: layer1FlyoutIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.layer1-flyout[hidden] { display: none; }
@keyframes layer1FlyoutIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.layer1-flyout__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(232, 228, 216, 0.08);
}
.layer1-flyout__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #e8e4d8;
}
.layer1-flyout__enter {
  font-size: 11px;
  color: rgba(232, 228, 216, 0.55);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  transition: color 120ms ease;
}
.layer1-flyout__enter:hover { color: #e8e4d8; }
.layer1-flyout__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.layer1-flyout__group { display: flex; flex-direction: column; gap: 2px; }
.layer1-flyout__group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(232, 228, 216, 0.40);
  padding: 0 8px 4px;
}
.layer1-flyout__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.layer1-flyout__link {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  color: rgba(232, 228, 216, 0.78);
  text-decoration: none;
  border-radius: var(--r-4);
  border-left: 2px solid transparent;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.layer1-flyout__link:hover {
  color: #e8e4d8;
  background: rgba(232, 228, 216, 0.04);
  border-left-color: rgba(232, 228, 216, 0.20);
}
.layer1-flyout__link.is-external::after {
  content: '';
}
.layer1-flyout__link.is-active {
  color: #e8e4d8;
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #ffffff;
  font-weight: 600;
}
.layer1-flyout__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}
.layer1-flyout__empty {
  font-size: 12px;
  color: rgba(232, 228, 216, 0.45);
  font-style: italic;
  padding: 8px;
  margin: 0;
}

/* Push main content right by the rail+flyout width when flyout is visible? No -
   the flyout is an overlay, not a layout participant. It floats above page
   content. This preserves the page layout when flyout opens/closes. */

/* Mobile: hide flyout entirely (the mobile drawer pattern handles nav) */
@media (max-width: 899px) {
  .layer1-flyout { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE, Cinema-Dark refinement per ui-ux-pro-max skill
   Real-Time/Operations landing pattern. Visible, premium, dark.
   ════════════════════════════════════════════════════════════════════ */

/* Hero status chip, true glassmorphism (inner border + inner shadow) */
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(11, 17, 32, 0.08);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #586478;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(11, 17, 32, 0.03);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.hero__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
}
.hero__chip-text { color: #2c374e; }

/* Hero lede, between title and tagline */
.hero__lede {
  max-width: 760px;
  margin: 18px auto 16px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  font-weight: 500;
  color: #1a2236;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Body copy: prevent ugly orphans without forcing balance (which can
   destabilize multi-line body paragraphs). text-wrap: pretty is the
   redesign-skill recommendation for body text. */
.hero__tagline { text-wrap: pretty; }

/* "Button-in-button" trailing arrow per soft-skill haptic micro-aesthetics:
   the arrow lives in its own nested circular wrapper, flush with the
   primary button's right padding. Creates depth + tactile pop. */
.hero__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 1;
  transition: transform 320ms var(--ease-expo),
              background-color 320ms var(--ease-expo);
}
/* Ghost variant: arrow circle sits on dark-ink tint instead of white */
.hero__cta--ghost .hero__cta-arrow {
  background: rgba(11, 17, 32, 0.06);
}
/* Magnetic kinetic on hover: arrow circle translates + brightens */
.hero__cta:hover .hero__cta-arrow {
  transform: translateX(3px) translateY(-1px);
  background: rgba(255, 255, 255, 0.20);
}
.hero__cta--ghost:hover .hero__cta-arrow {
  background: rgba(11, 17, 32, 0.10);
}

/* Hero signals row, institutional metrics under the CTAs */
.hero__signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 800px;
  margin: 16px auto 64px;
  padding: 28px 0 8px;
  border-top: 1px solid rgba(11, 17, 32, 0.08);
}
.hero__signal {
  text-align: center;
  padding: 0 20px;
  border-left: 1px solid rgba(11, 17, 32, 0.08);
}
.hero__signal:first-child { border-left: none; }
.hero__signal-num {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  color: #0b1120;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.hero__signal-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #8a93a4;
  font-weight: 500;
}
@media (max-width: 720px) {
  .hero__signals { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .hero__signal:nth-child(3) { border-left: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Hero product preview, floating glassmorphic window mock
   Shows the actual rankings table so the hero pivots from "marketing
   copy" to "see what you get". Double-bezel architecture per soft-skill.
   ════════════════════════════════════════════════════════════════════ */
.hero__preview {
  max-width: 1080px;
  margin: 28px auto -80px;  /* negative bottom margin so it bleeds into next section */
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.hero__preview-frame {
  /* Outer "machined" shell, Doppelrand outer bezel */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: 22px;
  padding: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.04),
    0 24px 60px -20px rgba(11, 17, 32, 0.18),
    0 60px 120px -40px rgba(11, 17, 32, 0.20);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.hero__preview-chrome {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 12px;
  border-radius: var(--r-16) var(--r-16) 0 0;
}
.hero__preview-dots { display: inline-flex; gap: 7px; }
.hero__preview-dots span {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(11, 17, 32, 0.10);
}
.hero__preview-dots span:nth-child(1) { background: rgba(11, 17, 32, 0.14); }
.hero__preview-url {
  flex: 1; text-align: center;
  font-family: var(--mono);
  font-size: 11.5px; color: rgba(11, 17, 32, 0.55);
  letter-spacing: 0.01em;
}
.hero__preview-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  color: rgba(11, 17, 32, 0.55);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.hero__preview-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}
.hero__preview-body {
  background: #ffffff;
  border-radius: 15px;
  /* Tighter horizontal padding so the table breathes edge-to-edge */
  padding: 16px 8px 8px;
  /* Inner concentric shadow per double-bezel */
  box-shadow:
    inset 0 0 0 1px rgba(11, 17, 32, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.hero__preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 10px 12px;
}
.hero__preview-tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.hero__preview-tab {
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-6);
  color: #586478;
  letter-spacing: -0.005em;
}
.hero__preview-tab.is-active {
  background: rgba(11, 17, 32, 0.06);
  color: #0b1120;
}
.hero__preview-meta { display: inline-flex; gap: 6px; flex-shrink: 0; }
.hero__preview-pill {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(11, 17, 32, 0.04);
  color: #586478;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero__preview-pill--accent {
  /* Softened, faint red tint + ink text + thin red border. Reads as a
     labeled chip rather than a loud solid badge. */
  background: rgba(239, 68, 68, 0.05);
  color: #0b1120;
  border: 1px solid rgba(239, 68, 68, 0.22);
}
/* ── Rankings table (sharper, denser, broadcast-grade) ───────────── */
.hero__preview-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font);
  font-size: 13.5px;
  text-align: left;
  table-layout: fixed;
}
/* Explicit column widths, POS chip now lives inside the player cell,
   so there's no orphan POS column eating dead space. Tighter rhythm. */
.hero__preview-table .col-rank   { width: 36px; }
.hero__preview-table .col-proj   { width: 70px; }
.hero__preview-table .col-sigma  { width: 50px; }
.hero__preview-table .col-delta  { width: 70px; }
.hero__preview-table .col-tag    { width: 150px; }
.hero__preview-table .col-trend  { width: 92px; }
/* col-player takes the remaining flex */

/* Headers: less faint, less letter-spaced, labels, not whisper */
.hero__preview-table th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 6px 12px 10px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.10);
  text-align: left;
}
.hero__preview-table th.num,
.hero__preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hero__preview-table th.trend { text-align: left; }

/* Body cells: tighter rows, stronger hairline, subtle hover scannability */
.hero__preview-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.05);
  color: #2c374e;
  vertical-align: middle;
  line-height: 1.3;
}
.hero__preview-table tbody tr:last-child td { border-bottom: none; }
/* Subtle zebra for scannability, even rows get a faint cool wash */
.hero__preview-table tbody tr:nth-child(even) td {
  background: rgba(11, 17, 32, 0.013);
}
/* Hover row affordance (works for the preview's hover discoverability) */
.hero__preview-table tbody tr {
  transition: background-color 160ms var(--ease-expo);
}
.hero__preview-table tbody tr:hover td {
  background: var(--accent-soft);
}

/* Rank column, small monospace, muted, with a touch of right padding */
.hero__preview-table .rank {
  font-family: var(--mono);
  font-weight: 500;
  color: #8a93a4;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* Player column, LEFT-aligned. Name + POS chip live in the same cell
   on the same baseline (no orphan POS column eating dead space). */
.hero__preview-table .player {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}
.hero__preview-name {
  font-weight: 600;
  color: #0b1120;
  letter-spacing: -0.012em;
  font-size: 13.5px;
  white-space: nowrap;
  /* Fixed minimum width so the POS chip lines up at the same X across rows.
     Slightly tightened since we added a Tag column. */
  display: inline-block;
  min-width: 142px;
}

/* POS chip, sits flush next to the player name, neutral mono on tint */
.hero__preview-pos {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--r-4);
  background: rgba(11, 17, 32, 0.05);
  color: #6b7280;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Position color codes (kept very muted, single accent discipline) */
/* Position pills: strict R/W/B, single neutral mono chip,
   no per-position color coding (the data label is enough). */

/* Tag column, visibleTag chip (Category Specialist / Fragile Star / etc.) */
.hero__preview-table .tag { padding: 9px 8px; }
.hero__preview-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}
/* Category Specialist, brand-red tinted (positive standout) */
.hero__preview-tag.tag-category-specialist {
  background: rgba(239, 68, 68, 0.07);
  color: #c5302f;
  border: 1px solid rgba(239, 68, 68, 0.20);
}
/* Fragile Star, neutral ink chip with hairline (caution/note) */
.hero__preview-tag.tag-fragile-star {
  background: rgba(11, 17, 32, 0.05);
  color: #2c374e;
  border: 1px solid rgba(11, 17, 32, 0.18);
}
/* Elite Buy / Top Buy, solid ink (rare strong signal) */
.hero__preview-tag.tag-elite-buy,
.hero__preview-tag.tag-top-buy {
  background: #0b1120;
  color: #ffffff;
  border: 1px solid #0b1120;
}
/* Other valid tag classes (defensive coverage) */
.hero__preview-tag.tag-value,
.hero__preview-tag.tag-lucky,
.hero__preview-tag.tag-elite-upside {
  background: rgba(11, 17, 32, 0.04);
  color: #586478;
  border: 1px solid rgba(11, 17, 32, 0.12);
}

/* Projection number, primary data, bold + ink */
.hero__preview-table .num.strong {
  color: #0b1120;
  font-weight: 700;
  font-size: 14px;
}
/* Sigma uncertainty, secondary, muted */
.hero__preview-table .num.muted {
  color: #8a93a4;
  font-size: 11.5px;
  font-weight: 500;
}
/* Delta column with proper SVG arrows (not pixelated unicode triangles) */
.hero__preview-table .num.up,
.hero__preview-table .num.down {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.hero__preview-table .num.up   { color: #ef4444; }
.hero__preview-table .num.down { color: #586478; }
.delta-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Trend sparkline, direction-colored. Green = rising over the captured
   history window; red = declining; gray = flat / insufficient data.
   Direction class set by heroPreviewLiveSync IIFE (_trendFor). */
.hero__preview-table .trend {
  padding-right: 6px;
  padding-left: 4px;
}
.hero__preview-table .trend svg {
  width: 100%;
  max-width: 84px;
  height: 22px;
  color: #8a93a4;          /* default: flat / unknown */
  display: block;
  opacity: 0.75;
  transition: color 240ms ease;
}
.hero__preview-table .trend--up svg   { color: #2c9b6e; opacity: 0.85; }   /* rising */
.hero__preview-table .trend--down svg { color: #c44a3a; opacity: 0.85; }   /* falling */
.hero__preview-table .trend--flat svg { color: #8a93a4; opacity: 0.55; }   /* flat */

/* Footer hint row inside the preview (optional: shows "showing 6 of 627") */
.hero__preview-footnote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 10px 12px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #8a93a4;
  letter-spacing: 0.02em;
}
.hero__preview-footnote .key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__preview-footnote kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--r-3);
  background: rgba(11, 17, 32, 0.05);
  border: 1px solid rgba(11, 17, 32, 0.08);
  color: #586478;
  line-height: 1;
}

@media (max-width: 720px) {
  .hero__preview { margin: 24px auto -40px; padding: 0 14px; }
  .hero__preview-tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; }
  .hero__preview-table .col-trend,
  .hero__preview-table .trend { display: none; }
  .hero__preview-table .col-sigma,
  .hero__preview-table .num.muted { display: none; }
}

/* ═══ Home surfaces grid ═══
   Tinted base so the section reads as its own zone (was pure white →
   bled into the hero invisibly). Subtle ambient color blobs for warmth. */
.home-surfaces {
  background:
    /* Faint brand-red wisp + warm cream, strict R/W/B */
    radial-gradient(circle 1000px at 12% 18%, rgba(239, 68, 68, 0.04), transparent 60%),
    radial-gradient(circle 800px at 88% 82%, rgba(255, 235, 215, 0.32), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);
  /* Tightened padding, was 128/144, felt empty. 80/96 is composed. */
  padding: 80px 24px 96px;
  border-top: 1px solid rgba(11, 17, 32, 0.05);
  border-bottom: 1px solid rgba(11, 17, 32, 0.05);
  color: #0b1120;
  position: relative;
  isolation: isolate;
}

/* ──────────────────────────────────────────────────────────────────────
   Homepage live pulse, Today's biggest movers (links to /risers)
   Sits between the hero and the surfaces grid. Quiet horizontal band.
   ────────────────────────────────────────────────────────────────────── */
body[data-route="home"] .home-pulse,
.home-pulse {
  background: #ffffff;
  border-top: 1px solid rgba(11, 17, 32, 0.06);
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
  padding: 28px 24px;
  color: #0b1120;
}
.home-pulse__shell {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.home-pulse__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(11, 17, 32, 0.10);
}
.home-pulse__title { display: flex; flex-direction: column; gap: 2px; }
.home-pulse__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: #6b7280;
}
.home-pulse__sub { font-size: 13px; color: #0b1120; font-weight: 600; }
.home-pulse__cta {
  font-size: 12px; font-weight: 600;
  color: #0b1120; text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(11, 17, 32, 0.15);
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.home-pulse__cta:hover { background: #0b1120; color: #ffffff; border-color: #0b1120; }

.home-pulse__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .home-pulse__cols { grid-template-columns: 1fr; gap: 22px; } }

.home-pulse__col-hd {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.home-pulse__col--up   .home-pulse__arrow { color: #066b4a; }
.home-pulse__col--down .home-pulse__arrow { color: #9b2c2c; }

.home-pulse__list { list-style: none; padding: 0; margin: 0; }
.home-pulse__item {
  /* The grid layout now lives on .home-pulse__link (the child <a> that
     wraps the row). Previously this li was the grid; after we made the
     whole row a single clickable link, the <a> sat in column 1 (24px wide)
     and squashed the name out of view. Reset to plain list-item so the
     anchor controls layout. */
  list-style: none;
  padding: 0;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
  font-size: 13px;
}
.home-pulse__item:last-child { border-bottom: none; }
.home-pulse__rank {
  font-variant-numeric: tabular-nums;
  font-size: 11px; color: #9ca3af; font-weight: 500;
}
.home-pulse__name {
  color: #0b1120; text-decoration: none; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-pulse__name:hover { color: #ef4444; }
.home-pulse__pos {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-2, #5a5650);   /* was #6b7280 (4.35:1, under AA); --text-2 is theme-aware AA */
  background: rgba(11, 17, 32, 0.05);
  padding: 1px 6px;
  border-radius: var(--r-4);
}
.home-pulse__delta {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.home-pulse__delta--up   { color: #066b4a; }
.home-pulse__delta--down { color: #9b2c2c; }

.home-pulse__placeholder {
  list-style: none; padding: 12px 0;
  font-size: 12px; font-style: italic; color: #9ca3af;
}

/* Grain overlay removed for light theme (was tuned for dark cinema bg) */
.home-surfaces__head { max-width: 1080px; margin: 0 auto 48px; text-align: left; }
.home-surfaces__eyebrow,
.home-how__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #0b1120;
  font-weight: 500;
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Hairline indicator dash removed per design direction */
.home-surfaces__title,
.home-how__title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0b1120;
  margin: 0;
  line-height: 1.1;
  /* Prevents orphan words on last line, redesign-skill "Orphaned words" */
  text-wrap: balance;
  max-width: 22ch;
}
/* Asymmetric "bento" grid, breaks the generic 3-equal AI pattern.
   Composition for 6 cards in a 4-col × 3-row layout:
  , Card 1 (Rankings): featured tile, spans 2 cols × 2 rows
  , Cards 2-5 (Research, Operations, Draft, Risers): 2×2 supporting grid
  , Card 6 (FYPD): wide tile spanning all 4 cols at the bottom
   Three different tile shapes, proper editorial bento, no orphans. */
.home-surfaces__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(190px, auto);
  /* Slightly more breathing room between tiles */
  gap: 22px;
}
/* Featured tile (Rankings), 2×2 hero of the section */
.home-surfaces__grid > .home-surface:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.home-surfaces__grid > .home-surface:nth-child(1) .home-surface__name {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.home-surfaces__grid > .home-surface:nth-child(1) .home-surface__desc {
  font-size: 15px;
  max-width: 38ch;
}
.home-surfaces__grid > .home-surface:nth-child(1) .home-surface__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-10);
  margin-bottom: 22px;
}
/* Wide bottom tile (last card, FYPD), spans all 4 cols, horizontal layout.
   Layout: icon + title on top, full-width 2-column draft board fills below. */
.home-surfaces__grid > .home-surface:nth-child(6) {
  grid-column: span 4;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 6px;
  padding: 26px 28px;
}
.home-surfaces__grid > .home-surface:nth-child(6) .home-surface__icon {
  margin-bottom: 0;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.home-surfaces__grid > .home-surface:nth-child(6) .home-surface__name {
  margin-bottom: 0;
  align-self: center;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.home-surfaces__grid > .home-surface:nth-child(6) .home-surface__desc {
  display: none;
}
.home-surfaces__grid > .home-surface:nth-child(6) .fypd-board-meta {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  margin-top: 0;
  margin-bottom: 8px;
}
.home-surfaces__grid > .home-surface:nth-child(6) .home-surface__viz--fypd {
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
}
@media (max-width: 900px) {
  .home-surfaces__grid { grid-template-columns: repeat(2, 1fr); }
  .home-surfaces__grid > .home-surface:nth-child(1) {
    grid-column: span 2; grid-row: span 1;
  }
  .home-surfaces__grid > .home-surface:nth-child(6) {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .home-surfaces__grid { grid-template-columns: 1fr; }
  .home-surfaces__grid > .home-surface:nth-child(1),
  .home-surfaces__grid > .home-surface:nth-child(6) {
    grid-column: span 1;
  }
  .home-surfaces__grid > .home-surface:nth-child(6) {
    grid-template-columns: 1fr;
  }
  .home-surfaces__grid > .home-surface:nth-child(6) .home-surface__icon {
    grid-row: auto;
  }
}

.home-surface {
  display: block;
  padding: 34px 28px;
  background: #ffffff;
  /* Double-bezel: hairline border + concentric inner highlight */
  border: 1px solid rgba(11, 17, 32, 0.06);
  /* Larger squircle radius per Soft Structuralism, feels expensive */
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 420ms var(--ease-expo),
              background-color 420ms var(--ease-expo),
              transform 420ms var(--ease-expo),
              box-shadow 420ms var(--ease-expo);
  position: relative;
  overflow: hidden;
  /* Diffused multi-layer ambient shadow, Soft Structuralism elevation.
     Tinted ink rather than pure black for cohesion. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.025),
    0 6px 16px -6px rgba(11, 17, 32, 0.06),
    0 20px 40px -16px rgba(11, 17, 32, 0.04);
}
/* Hairline top-glow bar, accent ribbon brightens on hover */
.home-surface::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 17, 32, 0.06), transparent);
  transition: background 420ms var(--ease-expo);
  pointer-events: none;
}
/* Cinematic radial highlight that tracks the cursor, fades in on hover.
   Driven by --mx / --my CSS vars set by JS (cardCursorTracker). */
.home-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(11, 17, 32, 0.05),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-expo);
  border-radius: inherit;
}
.home-surface:hover {
  border-color: rgba(11, 17, 32, 0.14);
  background: #ffffff;
  /* Magnetic lift, heavier than typical (-3 → -5) for tactile weight */
  transform: translateY(-5px);
  /* Diffused agency-grade shadow: tall, soft, multi-layer ink tint */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.04),
    0 12px 28px -8px rgba(11, 17, 32, 0.10),
    0 32px 64px -20px rgba(11, 17, 32, 0.10);
}
/* Pressed state: subtle physical click feedback (redesign-skill: scale 0.98) */
.home-surface:active {
  transform: translateY(-1px) scale(0.992);
  transition-duration: 80ms;
}
.home-surface:hover::before {
  background: linear-gradient(90deg, transparent, rgba(11, 17, 32, 0.42), transparent);
}
.home-surface:hover::after { opacity: 1; }
.home-surface:hover .home-surface__icon {
  background: rgba(11, 17, 32, 0.08);
  border-color: rgba(11, 17, 32, 0.18);
  box-shadow: 0 4px 12px rgba(11, 17, 32, 0.08);
}
.home-surface__icon {
  color: #0b1120;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* Tighter inner radius vs outer card (16px), per redesign-skill
     "vary the radius: tighter on inner elements, softer on containers" */
  border-radius: 9px;
  background: rgba(11, 17, 32, 0.05);
  border: 1px solid rgba(11, 17, 32, 0.10);
  transition: background 320ms var(--ease-expo),
              border-color 320ms var(--ease-expo),
              box-shadow 320ms var(--ease-expo),
              transform 320ms var(--ease-expo);
}
.home-surface__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Featured tile inner icon SVG (scales with the 48px container) */
.home-surfaces__grid > .home-surface:nth-child(1) .home-surface__icon svg {
  width: 26px;
  height: 26px;
}
.home-surface:hover .home-surface__icon { transform: scale(1.06); }
.home-surface__name {
  font-size: 18px;
  font-weight: 700;
  color: #0b1120;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  transition: color 220ms var(--ease-expo), letter-spacing 320ms var(--ease-expo);
}
.home-surface:hover .home-surface__name {
  /* Off-black ink token, never pure #000 (taste-skill anti-AI-slop). */
  color: var(--ink, #0b1120);
  letter-spacing: -0.02em;
}
.home-surface__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #586478;
}

/* ── Bento card inline visualizations ─────────────────────────────── */
.home-surface__viz {
  margin-top: 20px;
  color: var(--accent);
}
/* Featured tile: 3-row table preview */
.home-surface__viz--rankings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 17, 32, 0.06);
}
.mini-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto auto;
  gap: 14px;
  align-items: baseline;
  font-size: 13.5px;
  padding: 6px 0;
}
.mini-rank {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #8a93a4;
}
.mini-name {
  font-weight: 600; color: #0b1120;
  letter-spacing: -0.005em;
}
.mini-pos {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #8a93a4;
  letter-spacing: 0.04em;
}
.mini-age {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #8a93a4;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
  font-weight: 600;
}
/* Age tier color-coding, mirrors dynasty age-curve bands.
   Greens for young (premium), grays for prime (neutral), warm tones for
   aging (penalty). Kept saturation modest so the column doesn't fight the
   surrounding muted card chrome for attention. */
.mini-age--peak    { color: var(--age-peak,    #087453); }   /* ≤22, peak youth, ×1.15 premium */
.mini-age--young   { color: var(--age-young,   #217351); }   /* 23-24, young prime, ×1.10     */
.mini-age--prime   { color: var(--age-prime,   #5b6675); }   /* 25-27, prime, ×1.00 neutral   */
.mini-age--mild    { color: var(--age-mild,    #835f08); }   /* 28-29, mild fade, ×0.92       */
.mini-age--veteran { color: var(--age-veteran, #91581f); }   /* 30-31, veteran, ×0.80         */
.mini-age--decline { color: var(--age-decline, #ae4234); }   /* 32+  , declining, ×0.65↓     */
.mini-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0b1120;
}
/* Research card: data-point constellation */
.viz-svg {
  display: block;
  width: 100%;
  height: 40px;
  color: var(--accent);
}
/* Operations card: mini bar chart */
.viz-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  align-items: end;
  height: 40px;
}
.viz-bars span {
  display: block;
  height: var(--h, 50%);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-tint) 100%);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
/* Draft card: pick-order pills */
.viz-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.viz-pills span {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: var(--r-6);
  background: rgba(11, 17, 32, 0.04);
  color: #586478;
  letter-spacing: 0.01em;
}
.viz-pills .is-now {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
/* Risers card: split up/down sparklines */
.viz-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.viz-split svg {
  width: 100%; height: 32px;
  display: block;
}
.viz-up { color: #ef4444; }
.viz-down { color: #586478; }
/* FYPD card: pick-ladder list (legacy, preserved for backwards-compat) */
.viz-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.viz-ladder span {
  font-size: 12px;
  color: #586478;
  letter-spacing: -0.005em;
}
.viz-ladder b {
  font-family: var(--mono);
  font-weight: 500;
  color: #0b1120;
  margin-right: 8px;
  font-size: 11px;
}

/* FYPD card: rich draft-pick board. 2-column COLUMN-FIRST layout -
   picks 1.01-1.08 fill the LEFT column top-to-bottom, then 1.09-1.16
   fill the RIGHT column top-to-bottom. Achieved via grid-auto-flow:
   column + an explicit 8-row template so the rendered order matches
   reading order for a 16-pick first round.
   Tier-colored left rail; mono pick numbers; tier-colored age column. */
.home-surface__viz--fypd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 24px;
  row-gap: 2px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 17, 32, 0.06);
}
.fypd-mini-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  gap: 14px;
  align-items: baseline;
  font-size: 13px;
  padding: 7px 10px 7px 10px;
  border-left: 2px solid transparent;
  border-radius: var(--r-3);
  transition: background-color 180ms var(--ease-expo);
}
.fypd-mini-row:hover {
  background: rgba(11, 17, 32, 0.03);
}
.fypd-mini-row--t1 { border-left-color: #c44a3a; }
.fypd-mini-row--t2 { border-left-color: #b8860b; }
.fypd-mini-row--t3 { border-left-color: #2c9b6e; }
.fypd-mini-row--t4 { border-left-color: #1e6fb8; }
.fypd-mini-row--t5 { border-left-color: rgba(11, 17, 32, 0.10); }

/* Meta chip strip (count of ranked + elite count), shown right under title */
.fypd-board-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.fypd-board-meta__chip {
  font-size: 11px;
  font-weight: 600;
  color: #586478;
  background: rgba(11, 17, 32, 0.04);
  padding: 3px 9px;
  border-radius: 11px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.fypd-board-meta__chip > span {
  color: #0b1120;
  font-weight: 700;
}
.fypd-board-meta__chip--muted {
  background: transparent;
  color: #8a93a4;
  font-weight: 500;
  padding-left: 4px;
}

@media (max-width: 900px) {
  .home-surface__viz--fypd {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

.fypd-mini-pick {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #0b1120;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.fypd-mini-name {
  font-weight: 600;
  color: #0b1120;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fypd-mini-star {
  color: #c44a3a;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}
.fypd-mini-pos {
  font-family: var(--mono);
  font-size: 10px;
  color: #6b7280;
  letter-spacing: 0.04em;
  background: rgba(11, 17, 32, 0.04);
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-weight: 600;
}
.fypd-mini-age {
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 22px;
  text-align: right;
  /* Tier color applied via .mini-age--peak/young/prime/mild/veteran/decline
     (same classes used by the Rankings card, single source of truth). */
}
.fypd-mini-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0b1120;
  font-size: 13px;
  min-width: 32px;
  text-align: right;
  letter-spacing: -0.01em;
}

/* Footer strip (count of ranked players + elite count + open-board CTA) */
.fypd-mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 17, 32, 0.05);
  font-size: 11px;
  color: #8a93a4;
}
.fypd-mini-foot__stats {
  font-variant-numeric: tabular-nums;
}
.fypd-mini-foot #fypdMiniCount,
.fypd-mini-foot #fypdMiniElite {
  color: #0b1120;
  font-weight: 700;
}
.fypd-mini-foot__sep { margin: 0 4px; color: rgba(11, 17, 32, 0.20); }
.fypd-mini-foot__more {
  color: #1e6fb8;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 240ms var(--ease-expo);
}
.home-surface:hover .fypd-mini-foot__more {
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════
   Scroll-triggered fade-in (cinematic entrance for homepage sections)
   Toggled by IntersectionObserver in app.js (cinematicReveal IIFE).
   Subtle: 16px upward translation + opacity. Disabled when reduced motion.
   ════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 720ms var(--ease-expo),
              transform 720ms var(--ease-expo);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger nested children (cards in a grid) by index via inline --i */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease-expo) calc(var(--i, 0) * 70ms),
              transform 640ms var(--ease-expo) calc(var(--i, 0) * 70ms);
}
.reveal--stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══ How it works ═══
   Three step cards with proper visual weight. Subtle cream tint background
   to break the all-white monotony between sections. */
.home-how {
  background:
    /* Warm cream + faint red wisp, strict R/W/B */
    radial-gradient(circle 900px at 20% 30%, rgba(255, 235, 215, 0.35), transparent 60%),
    radial-gradient(circle 700px at 85% 70%, rgba(239, 68, 68, 0.04), transparent 60%),
    #ffffff;
  /* Tightened padding, was 128/144 (felt empty). 80/96 reads as composed. */
  padding: 80px 24px 96px;
  color: #0b1120;
  position: relative;
  isolation: isolate;
}
.home-how__head { max-width: 1180px; margin: 0 auto 40px; text-align: left; }
.home-how__steps {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .home-how__steps { grid-template-columns: 1fr; } }
/* Step cards, match the home-surfaces card visual language (squircle
   radius, hairline border, diffused soft shadow). Removes the empty
   "column with thin divider" feel for proper visual structure. */
.home-how__step {
  padding: 32px 28px;
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.025),
    0 6px 16px -6px rgba(11, 17, 32, 0.06),
    0 20px 40px -16px rgba(11, 17, 32, 0.04);
  transition: transform 420ms var(--ease-expo),
              box-shadow 420ms var(--ease-expo),
              border-color 420ms var(--ease-expo);
}
.home-how__step:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 17, 32, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 17, 32, 0.04),
    0 12px 28px -8px rgba(11, 17, 32, 0.10),
    0 32px 64px -20px rgba(11, 17, 32, 0.10);
}
@media (max-width: 900px) {
  .home-how__step { padding: 28px 24px; }
}
.home-how__num {
  /* Large display numeral, establishes editorial hierarchy */
  font-family: var(--font-hero);
  font-size: 42px;
  font-weight: 400;
  color: #0b1120;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.18;
}
.home-how__name {
  font-size: 19px;
  font-weight: 700;
  /* WAS #EDEDEF (white), invisible on the new light bg. Fixed to ink dark. */
  color: #0b1120;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.home-how__desc {
  font-size: 14px;
  line-height: 1.6;
  /* WAS #8A8F98, too faint on white. Use proper muted body text color. */
  color: #2c374e;
}

/* ════════════════════════════════════════════════════════════════════
   Trust bar, source-governed inputs (quiet brand cred without logos)
   ════════════════════════════════════════════════════════════════════ */
.home-trustbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 8px;
  text-align: center;
}
.home-trustbar__head { margin-bottom: 22px; }
.home-trustbar__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8a93a4;
}
.home-trustbar__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
}
.home-trustbar__src {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: #586478;
  letter-spacing: -0.01em;
  opacity: 0.7;
  transition: opacity 220ms var(--ease-expo), color 220ms var(--ease-expo);
}
.home-trustbar__src:hover { opacity: 1; color: #0b1120; }
@media (max-width: 600px) {
  .home-trustbar__row { gap: 6px 16px; }
  .home-trustbar__src { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   Pull quote, editorial testimonial (one strong voice, no carousel)
   ════════════════════════════════════════════════════════════════════ */
.home-quote {
  max-width: 980px;
  margin: 0 auto;
  padding: 88px 24px 96px;
  text-align: left;
}
.home-quote__fig { margin: 0; position: relative; }
.home-quote__mark {
  position: absolute;
  top: -28px; left: -8px;
  font-family: var(--font-hero);
  font-size: 140px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}
.home-quote__text {
  margin: 0;
  font-family: var(--font-hero);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #0b1120;
  text-wrap: balance;
  position: relative;
}
.home-quote__text em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.home-quote__cap {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(11, 17, 32, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-quote__author {
  font-weight: 700;
  color: #0b1120;
  letter-spacing: -0.005em;
  font-size: 15px;
}
.home-quote__role {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2, #5a5650);   /* was #8a93a4 (2.7-3.1:1, under AA); --text-2 is theme-aware AA */
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════════
   Closing CTA + footer
   ════════════════════════════════════════════════════════════════════ */
.home-footer {
  background:
    radial-gradient(circle 700px at 15% 30%, rgba(239, 68, 68, 0.10), transparent 60%),
    radial-gradient(circle 600px at 85% 80%, rgba(255, 235, 215, 0.05), transparent 60%),
    #0b1120;
  color: #EDEDEF;
  padding: 96px 24px 32px;
  border-top: 1px solid rgba(11, 17, 32, 0.08);
}
.home-footer__cta {
  max-width: 1180px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.home-footer__cta-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}
.home-footer__cta-title {
  font-family: var(--font-hero);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
  max-width: 16ch;
}
.home-footer__cta-actions {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
}
/* Dark-bg variants for the existing CTAs inside the footer */
.home-footer .hero__cta--primary {
  background: #ffffff;
  color: #0b1120;
}
.home-footer .hero__cta--primary:hover {
  background: #f7f8fa;
  color: #0b1120;
}
.home-footer .hero__cta--primary .hero__cta-arrow {
  background: rgba(11, 17, 32, 0.10);
}
.home-footer .hero__cta--primary:hover .hero__cta-arrow {
  background: rgba(11, 17, 32, 0.18);
}
.home-footer .hero__cta--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(237, 237, 239, 0.86);
}
.home-footer .hero__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.home-footer__cols {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  /* Brand + 6 link columns (Rankings/Dashboard/Draft Wizard/Research/Tools/
     Methodology) per the 2026-05-26 IA restructure. Width bumped to 1400px
     so the 6 columns get reasonable horizontal space. The brand column gets
     1.2fr (slightly narrower than its prior 1.4fr) to make room. */
  grid-template-columns: 1.2fr repeat(6, 1fr);
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.home-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.home-footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-hero);
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
}
.home-footer__logo .brand-headset {
  width: 26px; height: 26px;
}
/* Brand "r", red accent on the dark footer, matches hero wordmark */
.home-footer__logo .gradient {
  color: #ef4444;
  text-shadow: 0 0 18px rgba(239, 68, 68, 0.30);
}
.home-footer__logo .brand-headset path,
.home-footer__logo .brand-headset rect,
.home-footer__logo .brand-headset line {
  stroke: #EDEDEF !important;
}
.home-footer__tagline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(237, 237, 239, 0.55);
  margin: 0;
  max-width: 26ch;
}
.home-footer__col { display: flex; flex-direction: column; gap: 12px; }
.home-footer__col-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(237, 237, 239, 0.45);
  margin: 0 0 6px;
}
/* Subcategory labels inside each footer column. Lighter weight than
   the col-title above so the hierarchy reads top-level→subgroup→link
   without ever competing with the column heading. Non-clickable: pure
   semantic separation for scanability. Used by index.html footer cols
   (Rankings/Tools/Research/Methodology).
   Aesthetic matches .layer1-flyout__group-label (top-nav flyout) so
   the visual language for "subgroup label" is consistent between the
   two navigation surfaces. */
.home-footer__col-subhead {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(237, 237, 239, 0.32);
  /* 14px top margin separates from prior group; 2px bottom margin
     keeps subhead visually attached to its first link below. Zero
     top-margin override for the FIRST subhead in a column so it
     doesn't push away from the col-title. */
  margin: 14px 0 2px;
}
.home-footer__col-subhead:first-of-type {
  margin-top: 4px;
}
.home-footer__col a {
  font-size: 14px;
  color: rgba(237, 237, 239, 0.78);
  text-decoration: none;
  transition: color 180ms var(--ease-expo);
  letter-spacing: -0.005em;
}
.home-footer__col a:hover { color: #ffffff; }
/* Workspace-level "View all →" link at the bottom of each footer column.
   Sits below the trimmed items as the escape hatch to the full workspace
   landing. Visually distinct from item links (mono, uppercase, accent
   color on hover) so it reads as navigation, not a peer item. */
.home-footer__col a.home-footer__viewall {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(237, 237, 239, 0.10);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 237, 239, 0.55);
}
.home-footer__col a.home-footer__viewall:hover {
  color: var(--accent);
}
.home-footer__bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(237, 237, 239, 0.45);
}
.home-footer__legal { display: inline-flex; gap: 20px; }
/* Anchor rules below are kept as a safety net in case any future
   legal entries (Privacy / Terms / Status) are ever re-introduced
   as real routed links. The current implementation renders them as
   non-interactive .home-footer__legal-item spans (defined in the
   impeccable pass below) so no dead href="#" ships. */
.home-footer__legal a {
  color: rgba(237, 237, 239, 0.45);
  text-decoration: none;
  transition: color 180ms var(--ease-expo);
}
.home-footer__legal a:hover { color: #ffffff; }
@media (max-width: 900px) {
  .home-footer__cta { grid-template-columns: 1fr; gap: 24px; }
  /* Narrow viewport: collapse the 6+1 grid into a 2-col stack so the
     footer doesn't squeeze each column into illegible widths. */
  .home-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .home-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
  .home-footer__cols { grid-template-columns: 1fr; }
  .home-footer__cta-actions { flex-direction: column; }
  .home-footer .hero__cta { width: 100%; justify-content: center; }
}

/* Homepage: bright/light theme. Background is white site-wide on
   body[data-route="home"]. The global .site-nav already uses a light
   glassmorphic style and the headset SVG is already black by default,
   so no nav overrides are needed here. */
body[data-route="home"] { background: #ffffff; }
body[data-route="home"] .page { background: transparent; }

/* The legacy editorial signal-feature block + quick-insights legacy section
   are replaced by the new home-surfaces + home-how sections above. Hide
   them on the home route. JS that writes to those legacy elements still
   succeeds silently. */
.signal-feature { display: none !important; }
body[data-route="home"] section[data-view="home"] .insights { display: none !important; }
body[data-route="home"] section[data-view="home"] .section-head { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   STOP-MOTION BASEBALL SCENE
   Scroll-driven 8-frame animation. Pitcher (left) winds up + releases;
   ball travels; batter swings + home run. Each frame is a discrete
   SVG <g>; only the active frame is visible. No transitions = true
   stop-motion choppy feel. Animation completes when .home-how enters view.
   ════════════════════════════════════════════════════════════════════ */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;        /* behind hero text content, above ::before composition */
  pointer-events: none;
  overflow: hidden;
}
.hero-scene__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.scene-frame {
  opacity: 0;
  transition: none;   /* stop-motion: instant frame snap */
}
.hero-scene[data-frame="0"] .scene-frame--0,
.hero-scene[data-frame="1"] .scene-frame--1,
.hero-scene[data-frame="2"] .scene-frame--2,
.hero-scene[data-frame="3"] .scene-frame--3,
.hero-scene[data-frame="4"] .scene-frame--4,
.hero-scene[data-frame="5"] .scene-frame--5,
.hero-scene[data-frame="6"] .scene-frame--6,
.hero-scene[data-frame="7"] .scene-frame--7 {
  opacity: 1;
}
/* prefers-reduced-motion: lock to the celebration frame (still informative
   without scroll-driven animation) */
@media (prefers-reduced-motion: reduce) {
  .hero-scene[data-frame] .scene-frame { opacity: 0; }
  .hero-scene[data-frame] .scene-frame--7 { opacity: 1; }
}

/* ════════════════════════════════════════════════════════
   MILB PROSPECTS TABLE, Research workspace (year-by-year)
   Single page rendered by milbProspectsWorkspace IIFE.
   ════════════════════════════════════════════════════════ */
.milb-prospects__table-wrap {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.milb-prospects__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--ink);
}
.milb-prospects__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--hairline-strong);
}
.milb-prospects__table thead th.milb-prospect__num,
.milb-prospects__table thead th.milb-prospect__pos {
  text-align: right;
}
.milb-prospects__table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font);
}
.milb-prospects__table tbody tr:last-child td { border-bottom: none; }
.milb-prospects__table tbody tr:nth-child(even) td { background: rgba(11, 17, 32, 0.012); }
.milb-prospects__table tbody tr:hover td { background: var(--bg-tinted); }

.milb-prospect__rank {
  width: 56px;
  color: var(--text-3);
  font-weight: 600;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.milb-prospects__table tbody td.milb-prospect__rank {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.milb-prospect__player {
  text-align: left;
  vertical-align: middle;
}
/* Inner flex wrapper, keeps the td a normal table-cell (which lets the
   browser size columns correctly) while letting photo + name/meta sit
   inline with a tight, predictable gap on the left edge. */
.milb-prospect__player-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.milb-prospect__photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.milb-prospect__photo--placeholder {
  display: inline-block;
}
.milb-prospect__id {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  text-align: left;
}
.milb-prospect__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
}
.milb-prospect__meta {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  text-align: left;
}
.milb-prospect__pos {
  text-align: right;
  width: 80px;
  white-space: nowrap;
}
.milb-prospect__num {
  text-align: right;
  width: 72px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Year sidebar, active state */
.prospects-sidebar__link.is-active {
  background: var(--bg-tinted);
  color: var(--ink);
  font-weight: 600;
  border-left: 2px solid var(--brand);
  padding-left: 10px;
}

/* ════════════════════════════════════════════════════════
   METHODOLOGY, Prospect-Ranking Correlations
   Long-form research page under #/research/methodology/*.
   Editorial typography with annotated tables.
   ════════════════════════════════════════════════════════ */
.methodology-body {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 36px 40px 32px;
  font-family: var(--font);
  color: var(--ink);
  max-width: 980px;
}
.methodology-block { margin-bottom: 36px; }
.methodology-block:last-child { margin-bottom: 0; }
.methodology-block__title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.methodology-block p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
}
.methodology-note {
  font-size: 13px !important;
  color: var(--text-2) !important;
  background: rgba(11, 17, 32, 0.025);
  border-left: 3px solid var(--brand);
  padding: 12px 16px;
  border-radius: 0 var(--r-6) var(--r-6) 0;
  margin: 10px 0 !important;
}
.methodology-code {
  font-size: 12px !important;
  color: var(--text-3) !important;
  margin-top: 6px !important;
}
.methodology-code-block {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-6);
  padding: 14px 18px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
}
.methodology-list { margin: 10px 0 12px 22px; font-size: 13.5px; line-height: 1.65; }
.methodology-list li { margin: 4px 0; }
.methodology-subtitle { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.005em; }
.methodology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 10px 0;
}
@media (max-width: 760px) {
  .methodology-grid { grid-template-columns: 1fr; gap: 20px; }
}

.methodology-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  margin: 12px 0 16px;
}
.methodology-table thead th {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hairline-strong);
}
.methodology-table thead th.num { text-align: right; }
.methodology-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  vertical-align: middle;
}
.methodology-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.methodology-table tbody td.strong { font-weight: 700; color: var(--ink); }
.methodology-table tbody tr:last-child td { border-bottom: none; }
.methodology-row--up    { background: rgba(34, 197, 94, 0.04); }
.methodology-row--down  { background: rgba(245, 158, 11, 0.04); }
.methodology-row--catcher { background: rgba(239, 68, 68, 0.06); }
.methodology-table code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 2px 6px;
  background: var(--bg-soft);
  border-radius: var(--r-4);
  color: var(--brand-deep);
}
.methodology-body code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  padding: 1px 5px;
  background: var(--bg-soft);
  border-radius: var(--r-4);
  color: var(--brand-deep);
}

/* ════════════════════════════════════════════════════════════════════
   FYPD DYNASTY BOARD, Rich rankings surface
   Stats strip · Age histogram · Filter chips · Tier shelves · Cards
   Each player card shows: rank, name, position, archetype, age (color-
   tiered), age multiplier, notes, and a base→dynasty value bar.
   ════════════════════════════════════════════════════════════════════ */

.fypd-board {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Summary stats strip ──────────────────────────────────────────── */
.fypd-stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline, rgba(15,23,42,0.08));
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  overflow: hidden;
}
.fypd-stat {
  padding: 9px 18px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fypd-stat__val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text1, #1a1a1a);
  font-variant-numeric: tabular-nums;
}
.fypd-stat__val--meta { font-size: 14px; font-weight: 600; }
.fypd-stat__sep { color: var(--text-3, #8a8680); font-weight: 400; margin: 0 4px; }
.fypd-stat__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
}
@media (max-width: 900px) {
  .fypd-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Age distribution mini-chart ──────────────────────────────────── */
.fypd-agehist {
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  padding: 11px 14px;
  background: var(--card-bg, #fff);
}
.fypd-agehist__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.fypd-agehist__legend {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.fypd-agehist__chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--r-10);
  background: rgba(15,23,42,0.05);
}
.fypd-agehist__chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  align-items: end;
  height: 76px;
}
.fypd-agehist__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.fypd-agehist__bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--r-3) var(--r-3) 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  background: currentColor;
  /* opacity removed: it dimmed the bar AND the count text inside, dropping the
     white-on-bar count to ~4.0:1. The age tokens are already AA-calibrated at
     full strength, so the count now clears AA in both themes. */
}
.fypd-agehist__count {
  font-size: 10px;
  color: var(--bg, #fff);
  font-weight: 700;
  line-height: 1;
}
.fypd-agehist__lbl {
  font-size: 10px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Age-tier colors, shared by histogram bars, chips, card age badges */
.fypd-age--peak     { color: var(--age-peak,    #087453); }
.fypd-age--young    { color: var(--age-young,   #217351); }
.fypd-age--prime    { color: var(--age-prime,   #5b6675); }
.fypd-age--mild     { color: var(--age-mild,    #835f08); }
.fypd-age--veteran  { color: var(--age-veteran, #91581f); }
.fypd-age--decline  { color: var(--age-decline, #ae4234); }

/* ── Filter bar ───────────────────────────────────────────────────── */
.fypd-filterbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
}
.fypd-filterbar__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.fypd-filterbar__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fypd-filterbar__group--push { margin-left: auto; }
.fypd-filterbar__group--grow { flex: 1; min-width: 240px; }
.fypd-filterbar__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  margin-right: 2px;
}
.fypd-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fypd-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--r-16);
  border: 1px solid var(--hairline, rgba(15,23,42,0.10));
  background: var(--bg, #fff);
  color: var(--text2, #444);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-variant-numeric: tabular-nums;
}
.fypd-chip:hover {
  background: var(--bg-soft, rgba(15,23,42,0.04));
  color: var(--text1, #1a1a1a);
}
.fypd-chip.is-active {
  background: var(--text1, #1a1a1a);
  color: var(--bg, #fff);
  border-color: var(--text1, #1a1a1a);
}
.fypd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2, #444);
  cursor: pointer;
  user-select: none;
}
.fypd-toggle input { accent-color: var(--text1, #1a1a1a); }
.fypd-search {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-6);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  background: var(--bg, #fff);
  color: var(--text1, #1a1a1a);
  font-size: 13px;
  font-family: inherit;
}
.fypd-search:focus {
  outline: 2px solid rgba(30, 111, 184, 0.25);
  outline-offset: -1px;
  border-color: #1e6fb8;
}
.fypd-select {
  padding: 7px 28px 7px 12px;
  border-radius: var(--r-6);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  background: var(--bg, #fff);
  color: var(--text2, #444);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.fypd-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--r-6);
  overflow: hidden;
}
.fypd-viewtoggle__btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg, #fff);
  color: var(--text-3, #6b6b6b);
  border: none;
  border-right: 1px solid var(--hairline, rgba(15,23,42,0.12));
  cursor: pointer;
  font-weight: 500;
}
.fypd-viewtoggle__btn:last-child { border-right: none; }
.fypd-viewtoggle__btn.is-active {
  background: var(--text1, #1a1a1a);
  color: var(--bg, #fff);
}
.fypd-export-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg, #fff);
  color: var(--text2, #444);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--r-6);
  cursor: pointer;
}
.fypd-export-btn:hover {
  background: var(--bg-soft, rgba(15,23,42,0.04));
  color: var(--text1, #1a1a1a);
}

.fypd-result-meta {
  font-size: 12px;
  color: var(--text-3, #8a8680);
  padding: 0 4px;
}
.fypd-result-meta b { color: var(--text1, #1a1a1a); font-weight: 700; }

/* ── Tier shelves ─────────────────────────────────────────────────── */
.fypd-shelves {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fypd-shelf {
  border-radius: var(--r-10);
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-left: 3px solid var(--tier-color, #6b7280);
  overflow: hidden;
}
.fypd-shelf__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--tier-bg, transparent);
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
}
.fypd-shelf__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-4);
  background: color-mix(in srgb, var(--tier-color, #6b7280) 76%, #000);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fypd-shelf__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1, #1a1a1a);
  letter-spacing: -0.005em;
}
.fypd-shelf__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
}
.fypd-shelf__cards {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

/* ── Player card (tier-shelf row) ─────────────────────────────────── */
.fypd-card {
  display: grid;
  grid-template-columns: 36px 1fr 230px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.04));
  cursor: default;
  transition: background 0.12s;
}
.fypd-shelf__cards .fypd-card:last-child { border-bottom: none; }
.fypd-card:hover { background: rgba(30, 111, 184, 0.03); }

.fypd-card__rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-3, #8a8680);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fypd-card__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fypd-card__namerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fypd-card__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text1, #1a1a1a);
  letter-spacing: -0.005em;
}
.fypd-card__elite {
  color: #c44a3a;
  font-size: 13px;
  font-weight: 700;
}
.fypd-card__youth {
  font-size: 10px;
  font-weight: 700;
  color: var(--green, #1f6b3a);   /* was #066b4a (~4.0:1 on the green tint); --green is theme-aware AA */
  background: rgba(9, 130, 93, 0.10);
  padding: 1px 5px;
  border-radius: var(--r-3);
  letter-spacing: 0.02em;
}
.fypd-card__team {
  font-size: 11px;
  color: var(--text-3, #8a8680);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.fypd-card__metarow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-3, #6b6b6b);
}
.fypd-card__pos {
  background: rgba(15,23,42,0.06);
  color: var(--text2, #444);
  padding: 2px 7px;
  border-radius: var(--r-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.fypd-card__arch {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-10);
  background: color-mix(in srgb, var(--fam-color, #6b7280) 12%, transparent);
  color: var(--text-1, #1a1a1f);   /* was var(--fam-color) - colored text failed WCAG AA in both themes; family color now shows via the swatch dot + tint + border (non-text, 3:1 ok), text is AA-readable */
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in srgb, var(--fam-color, #6b7280) 34%, transparent);
}
.fypd-card__arch::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fam-color, #6b7280);
  margin-right: 5px;
  flex: 0 0 auto;
}
.fypd-card__age {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fypd-card__agemult {
  font-size: 10.5px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
}
.fypd-card__notes {
  font-size: 11.5px;
  color: var(--text-3, #6b6b6b);
  line-height: 1.5;
  margin-top: 2px;
}

/* Value column */
.fypd-card__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 0;
}
.fypd-card__value-num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text1, #1a1a1a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fypd-card__value-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
}
.fypd-card__value-bar {
  position: relative;
  width: 200px;
  height: 6px;
  background: rgba(15,23,42,0.05);
  border-radius: var(--r-3);
  overflow: hidden;
  margin-top: 4px;
}
.fypd-card__value-bar-base {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(15,23,42,0.18);
}
.fypd-card__value-bar-dyn {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #2c9b6e;
  opacity: 0.85;
}
.fypd-card__value-bar-dyn--up   { background: #2c9b6e; }
.fypd-card__value-bar-dyn--down { background: #c44a3a; }
.fypd-card__value-bar-dyn--flat { background: #6b7280; }
.fypd-card__value-lift {
  font-size: 10.5px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.fypd-card__value-lift--up   { color: var(--green, #1f6b3a); }  /* was literal #066b4a (~4:1); --green is theme-aware AA */
.fypd-card__value-lift--down { color: var(--red, #a8201a); }    /* was literal #c44a3a; --red is theme-aware AA */
.fypd-card__value-lift-arrow { margin: 0 2px; opacity: 0.6; }

@media (max-width: 720px) {
  .fypd-card { grid-template-columns: 32px 1fr; }
  .fypd-card__value {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .fypd-card__value-bar { width: 100%; }
}

/* ── Table view ───────────────────────────────────────────────────── */
.fypd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  background: var(--card-bg, #fff);
}
.fypd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fypd-table th, .fypd-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
  text-align: left;
  vertical-align: middle;
}
.fypd-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  background: rgba(15,23,42,0.02);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fypd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fypd-table tr:last-child td { border-bottom: none; }
.fypd-row:hover { background: rgba(30, 111, 184, 0.04); }
.fypd-row__rank { color: var(--text-3, #8a8680); font-variant-numeric: tabular-nums; font-weight: 500; }
.fypd-row__name { font-weight: 600; color: var(--text1, #1a1a1a); }
.fypd-row__age  { font-weight: 600; font-variant-numeric: tabular-nums; }
.fypd-row__pos  {
  background: rgba(15,23,42,0.05);
  color: var(--text2, #444);
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fypd-row__arch {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 9px;
  color: var(--text-1, #1a1a1f);   /* was var(--fam-color) - failed AA as text; family color now via the swatch dot + tint + border */
  background: color-mix(in srgb, var(--fam-color, #6b7280) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam-color, #6b7280) 32%, transparent);
}
.fypd-row__arch::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fam-color, #6b7280);
  margin-right: 4px;
  flex: 0 0 auto;
}
.fypd-row__notes {
  max-width: 320px;
  font-size: 11px;
  color: var(--text-3, #6b6b6b);
}

/* Tier-tinted left border on table rows */
.fypd-row--t1 td:first-child { box-shadow: inset 3px 0 0 #c44a3a; }
.fypd-row--t2 td:first-child { box-shadow: inset 3px 0 0 #b8860b; }
.fypd-row--t3 td:first-child { box-shadow: inset 3px 0 0 #2c9b6e; }
.fypd-row--t4 td:first-child { box-shadow: inset 3px 0 0 #1e6fb8; }
.fypd-row--t5 td:first-child { box-shadow: inset 3px 0 0 #6b7280; }

/* ── Empty state + methodology ────────────────────────────────────── */
.fypd-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3, #8a8680);
  background: var(--card-bg, #fff);
  border: 1px dashed var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--r-8);
}
.fypd-link {
  background: none;
  border: none;
  color: #1e6fb8;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
}
/* ── Two-up wrapper (age histogram + source mix side-by-side) ─────── */
.fypd-twoup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .fypd-twoup { grid-template-columns: 1fr; }
}

/* ── Source-mix horizontal stacked bar ────────────────────────────── */
.fypd-srcmix {
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  padding: 14px 16px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.fypd-srcmix__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fypd-srcmix__sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3, #8a8680);
  text-transform: none;
  letter-spacing: 0;
}
.fypd-srcmix__bar {
  display: flex;
  height: 22px;
  border-radius: var(--r-6);
  overflow: hidden;
  background: var(--bg-soft, rgba(15,23,42,0.04));
}
.fypd-srcmix__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: filter 0.12s;
}
.fypd-srcmix__seg:hover { filter: brightness(1.1); }
.fypd-srcmix__seg-lbl { line-height: 1; padding: 0 4px; text-shadow: 0 1px 1px rgba(0,0,0,0.18); }
.fypd-srcmix__legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  font-size: 11px;
}
.fypd-srcmix__legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2, #444);
}
.fypd-srcmix__legend-row--dim { opacity: 0.45; }
.fypd-srcmix__legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.fypd-srcmix__legend-lbl { font-weight: 600; color: var(--text1, #1a1a1a); }
.fypd-srcmix__legend-val {
  margin-left: auto;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
}

/* ── Pick-equity curve ────────────────────────────────────────────── */
.fypd-equity {
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  padding: 11px 14px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fypd-equity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fypd-equity__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
}
.fypd-equity__sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3, #8a8680);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}
.fypd-equity__ctrls { display: flex; align-items: center; gap: 8px; }
.fypd-equity__lsize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.fypd-equity__lsize-sel {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  border-radius: 5px;
  background: var(--bg, #fff);
  color: var(--text1, #1a1a1a);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
}
.fypd-equity__svg {
  width: 100%;
  height: 110px;
  display: block;
}
.fypd-equity__area { fill: rgba(30, 111, 184, 0.06); }
.fypd-equity__line {
  fill: none;
  stroke: #1e6fb8;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.fypd-equity__pt {
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
}
.fypd-equity__pt--elite { stroke-width: 1.4; }
.fypd-equity__ytick, .fypd-equity__xtick {
  font-size: 10px;
  fill: var(--text-3, #8a8680);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.fypd-equity__tierlbl {
  font-size: 8.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
}

/* ── Team pipeline view ───────────────────────────────────────────── */
.fypd-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.fypd-team {
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-10);
  background: var(--card-bg, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fypd-team__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.05));
  background: var(--bg-soft, rgba(15,23,42,0.02));
}
.fypd-team__id { display: flex; align-items: center; gap: 8px; }
.fypd-team__code {
  font-size: 14px;
  font-weight: 800;
  color: var(--text1, #1a1a1a);
  letter-spacing: 0.04em;
}
.fypd-team__count {
  font-size: 10.5px;
  color: var(--text-3, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fypd-team__elite {
  font-size: 10.5px;
  font-weight: 700;
  color: #c44a3a;
  background: rgba(196,74,58,0.10);
  padding: 1px 6px;
  border-radius: var(--r-3);
}
.fypd-team__total { text-align: right; }
.fypd-team__total-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1;
}
.fypd-team__total-lbl {
  font-size: 9.5px;
  color: var(--text-3, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fypd-team__bar {
  height: 3px;
  background: var(--bg-soft, rgba(15,23,42,0.04));
}
.fypd-team__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e6fb8, #2c9b6e);
  transition: width 0.2s;
}
.fypd-team__rows { display: flex; flex-direction: column; padding: 4px 0; }
.fypd-team__row {
  display: grid;
  grid-template-columns: 1fr 40px 38px 50px 26px;
  gap: 8px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.03));
  font-size: 12px;
}
.fypd-team__row:last-child { border-bottom: none; }
.fypd-team__row:hover { background: rgba(30,111,184,0.025); }
.fypd-team__row-name {
  font-weight: 500;
  color: var(--text1, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fypd-team__row-star {
  color: #c44a3a;
  font-size: 10px;
  margin-left: 3px;
}
.fypd-team__row-pos, .fypd-team__row-age {
  font-size: 11px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.fypd-team__row-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fypd-team__row-pin {
  width: 22px;
  height: 22px;
  border-radius: var(--r-4);
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  background: var(--bg, #fff);
  color: var(--text-3, #8a8680);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fypd-team__row-pin:hover {
  border-color: #1e6fb8;
  color: #1e6fb8;
}
.fypd-team__row-pin.is-pinned {
  background: #2c9b6e;
  border-color: #2c9b6e;
  color: #fff;
}

/* ── Player card pin button (tier-shelf rows) ─────────────────────── */
.fypd-card__pin {
  width: 22px;
  height: 22px;
  border-radius: var(--r-4);
  border: 1px solid var(--hairline, rgba(15,23,42,0.14));
  background: var(--bg, #fff);
  color: var(--text-3, #8a8680);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fypd-card__pin:hover {
  border-color: #1e6fb8;
  color: #1e6fb8;
}
.fypd-card__pin.is-pinned {
  background: #2c9b6e;
  border-color: #2c9b6e;
  color: #fff;
}
.fypd-card.is-pinned { background: rgba(44, 155, 110, 0.04); }

/* ── Compare / Shortlist drawer (sticky bottom) ───────────────────── */
.fypd-board--has-cmp { padding-bottom: 8px; }
.fypd-cmp {
  position: sticky;
  bottom: 0;
  z-index: var(--z-raised);
  margin-top: 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.10));
  border-radius: var(--r-10);
  box-shadow: 0 -6px 18px rgba(15,23,42,0.06);
  overflow: hidden;
}
.fypd-cmp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-soft, rgba(15,23,42,0.03));
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
}
.fypd-cmp__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
  letter-spacing: 0.02em;
}
.fypd-cmp__count {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fypd-cmp__actions { display: flex; gap: 12px; }
.fypd-cmp__grid {
  display: grid;
  gap: 1px;
  background: var(--hairline, rgba(15,23,42,0.06));
}
.fypd-cmp__col {
  background: var(--card-bg, #fff);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.fypd-cmp__col--leader { background: rgba(44, 155, 110, 0.04); }
.fypd-cmp__unpin {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  background: var(--bg, #fff);
  color: var(--text-3, #8a8680);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fypd-cmp__unpin:hover { background: #c44a3a; color: #fff; border-color: #c44a3a; }
.fypd-cmp__rank {
  font-size: 10.5px;
  color: var(--text-3, #8a8680);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fypd-cmp__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
  letter-spacing: -0.005em;
  padding-right: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fypd-cmp__star { color: #c44a3a; font-size: 11px; }
.fypd-cmp__meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  flex-wrap: wrap;
}
.fypd-cmp__pos { color: var(--text1, #1a1a1a); font-weight: 600; }
.fypd-cmp__team { font-weight: 600; }
.fypd-cmp__arch {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-1, #1a1a1f);   /* was var(--fam-color) - failed AA as text; family color now via the swatch dot */
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-4);
  background: color-mix(in srgb, var(--fam-color, #6b7280) 12%, transparent);
  align-self: flex-start;
}
.fypd-cmp__arch::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fam-color, #6b7280);
  margin-right: 5px;
  flex: 0 0 auto;
}
.fypd-cmp__dv {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline, rgba(15,23,42,0.05));
}
.fypd-cmp__dv-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fypd-cmp__dv-lbl {
  font-size: 9.5px;
  color: var(--text-3, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  margin-bottom: 6px;
  font-weight: 600;
}
.fypd-cmp__dv-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-soft, rgba(15,23,42,0.04));
  overflow: hidden;
}
.fypd-cmp__dv-fill {
  height: 100%;
  transition: width 0.25s;
}
.fypd-cmp__breakdown {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  flex-wrap: wrap;
  margin-top: 4px;
}
.fypd-cmp__breakdown b { color: var(--text1, #1a1a1a); font-weight: 700; }
.fypd-cmp__youth { color: #2c9b6e; }
.fypd-cmp__notes {
  font-size: 11px;
  color: var(--text2, #444);
  line-height: 1.4;
  margin-top: 4px;
  font-style: italic;
}

.fypd-method {
  margin-top: 8px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  background: var(--bg-soft, rgba(15,23,42,0.02));
}
.fypd-method > summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, #444);
  list-style: none;
}
.fypd-method > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--text-3, #8a8680);
  transition: transform 0.15s;
}
.fypd-method[open] > summary::before { transform: rotate(90deg); }
.fypd-method__body {
  padding: 0 16px 14px;
  font-size: 12px;
  color: var(--text-3, #6b6b6b);
  line-height: 1.6;
}
.fypd-method__body p { margin: 6px 0; }
.fypd-method__body code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  background: rgba(15,23,42,0.05);
  padding: 1px 5px;
  border-radius: var(--r-3);
  color: var(--text1, #1a1a1a);
}

/* ════════════════════════════════════════════════════════════════════
   FANTASY PROSPECT RANKINGS, surface styles
   Reuses the visual language of the FYPD board (stats strip, filter
   chips) but uses a more table-like row layout for the prospect rows
   since each one carries more numeric content (pedigree, age, ETA,
   athletic profile, projection, fantasy score).
   ════════════════════════════════════════════════════════════════════ */

.fantasy-prospects-workspace {
  display: block;
  /* Top/bottom padding only - left/right is handled by the Shell B
     layout rules (polish.css) which clear the fixed left rail. */
  padding-top: 28px;
  padding-bottom: 80px;
}

.fpr-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3, #8a8680);
  background: var(--card-bg, #fff);
  border: 1px dashed var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--r-8);
}
.fpr-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2, #444);
  margin-bottom: 4px;
}
.fpr-empty__sub {
  font-size: 12px;
  color: var(--text-3, #8a8680);
}
.fpr-empty code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(15,23,42,0.05);
  border-radius: var(--r-3);
}

/* Reuse the FYPD stats-strip styles (we already have .fypd-stats-strip;
   keep this CSS independent so they can diverge later). */
.fpr-stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline, rgba(15,23,42,0.08));
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  overflow: hidden;
  margin-bottom: 14px;
}
.fpr-stat {
  padding: 14px 18px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fpr-stat__val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text1, #1a1a1a);
  font-variant-numeric: tabular-nums;
}
.fpr-stat__sep { color: var(--text-3, #8a8680); margin: 0 4px; font-weight: 400; }
.fpr-stat__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
}
@media (max-width: 900px) {
  .fpr-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Filter bar */
/* Reformatted to read like the Redraft/Dynasty board controls: a clean position
   tab row over a compact ETA + sort line, with just a bottom hairline (no boxed
   panel). The position chips mirror the .pos-tabs pills (transparent → dark when
   active). Search was removed. */
.fpr-filterbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 2px 10px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08));
  margin-bottom: 12px;
}
.fpr-filterbar__row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.fpr-filterbar__row--meta { gap: 8px; margin-top: 2px; }
.fpr-filterbar__row--meta .fpr-select { margin-left: auto; }
.fpr-filterbar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  margin-right: 2px;
}
.fpr-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fpr-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2, #444);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-variant-numeric: tabular-nums;
}
.fpr-chip--sm { font-size: 12px; padding: 4px 11px; }
.fpr-chip:hover {
  background: var(--bg-soft, rgba(15,23,42,0.04));
  color: var(--text1, #1a1a1a);
}
.fpr-chip.is-active {
  background: var(--text1, #1a1a1a);
  color: var(--bg, #fff);
  border-color: var(--text1, #1a1a1a);
}
.fpr-search {
  flex: 1;
  min-width: 240px;
  padding: 8px 12px;
  border-radius: var(--r-6);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  background: var(--bg, #fff);
  color: var(--text1, #1a1a1a);
  font-size: 13px;
  font-family: inherit;
}
.fpr-search:focus {
  outline: 2px solid rgba(30, 111, 184, 0.25);
  outline-offset: -1px;
  border-color: #1e6fb8;
}
.fpr-select {
  width: auto;            /* override the global select{width:100%} so it stays a compact, inline control (not a full-width box) */
  padding: 7px 28px 7px 12px;
  border-radius: var(--r-6);
  border: 1px solid var(--hairline, rgba(15,23,42,0.12));
  background: var(--bg, #fff);
  color: var(--text2, #444);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.fpr-result-meta {
  font-size: 12px;
  color: var(--text-3, #8a8680);
  padding: 0 4px;
  margin-bottom: 8px;
}
.fpr-result-meta b { color: var(--text1, #1a1a1a); font-weight: 700; }

/* Prospect table, CSS grid for clean column alignment */
.fpr-table {
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  overflow: hidden;
}
.fpr-row {
  display: grid;
  grid-template-columns:
    36px           /* rank */
    72px           /* pedigree */
    52px           /* photo */
    1fr            /* name + meta */
    52px           /* pos */
    44px           /* age */
    60px           /* eta */
    220px          /* athletic */
    74px           /* proj */
    180px;         /* fantasy score */
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.fpr-row:last-child { border-bottom: none; }
.fpr-row:not(.fpr-row--head):hover { background: rgba(30, 111, 184, 0.03); }
.fpr-row--head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  background: rgba(15,23,42,0.02);
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
}

.fpr-row__rank {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-3, #8a8680);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.fpr-row__pedigree {
  font-size: 12px;
  font-weight: 700;
  color: var(--ped-color, #6b7280);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
.fpr-row__pedigree-tier {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3, #8a8680);
}
.fpr-row--head .fpr-row__pedigree {
  color: var(--text-3, #8a8680);
  font-weight: 600;
  font-size: 10.5px;
}

.fpr-row__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpr-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft, #f5f5f4);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
}
.fpr-photo--placeholder { display: inline-block; }

.fpr-row__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fpr-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text1, #1a1a1a);
  letter-spacing: -0.005em;
}
.fpr-row__meta {
  font-size: 11px;
  color: var(--text-3, #8a8680);
}
.fpr-row__country, .fpr-row__handed { font-variant-numeric: tabular-nums; }

.fpr-row__pos { text-align: center; }
.fpr-row--head .fpr-row__pos { text-align: left; }

.fpr-row__age {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.fpr-age--peak  { color: #066b4a; }
.fpr-age--young { color: #2c9b6e; }
.fpr-age--prime { color: #5b6675; }
.fpr-age--vet   { color: #c97a2b; }
.fpr-row--head .fpr-row__age { color: var(--text-3, #8a8680); font-weight: 600; font-size: 10.5px; }

.fpr-row__eta-wrap { text-align: center; }
.fpr-row__eta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(11, 17, 32, 0.04);
  color: var(--text-2, #444);
  padding: 2px 8px;
  border-radius: var(--r-3);
  letter-spacing: 0.02em;
}

/* Athletic profile mini-bars (5 columns) + average chip */
.fpr-athletic {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fpr-athletic__avg {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
  letter-spacing: -0.02em;
}
.fpr-athletic__avg-sub {
  font-size: 10px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.7;
}
.fpr-athletic__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  align-items: end;
  flex: 1;
  height: 34px;
}
.fpr-athletic-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.fpr-athletic-bar__fill {
  width: 100%;
  min-height: 2px;
  background: currentColor;
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.fpr-athletic-bar__lbl {
  font-size: 8.5px;
  color: var(--text-3, #8a8680);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1;
  white-space: nowrap;
}
.fpr-athletic--elite   { color: #066b4a; }
.fpr-athletic--strong  { color: #2c9b6e; }
.fpr-athletic--avg     { color: #6b6675; }
.fpr-athletic--below   { color: #b8860b; }
.fpr-athletic--weak    { color: #c44a3a; }

.fpr-athletic-na {
  font-size: 11px;
  color: var(--text-3, #8a8680);
  font-style: italic;
  background: rgba(15,23,42,0.03);
  padding: 4px 10px;
  border-radius: var(--r-4);
  border: 1px dashed var(--hairline, rgba(15,23,42,0.12));
}

.fpr-row__proj {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fpr-row__projpts {
  font-size: 15px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
}
.fpr-row__projpts-sub {
  font-size: 9.5px;
  color: var(--text-3, #8a8680);
  margin-left: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.fpr-row__projpts-na {
  color: var(--text-3, #8a8680);
  font-style: italic;
  font-size: 12px;
}
.fpr-row--head .fpr-row__proj { color: var(--text-3, #8a8680); font-weight: 600; font-size: 10.5px; text-align: right; }

.fpr-row__score {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.fpr-row__score-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text1, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fpr-row__score-bar {
  width: 100%;
  max-width: 170px;
  height: 5px;
  background: rgba(15,23,42,0.06);
  border-radius: var(--r-3);
  overflow: hidden;
}
.fpr-row__score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e6fb8, #2c9b6e);
  opacity: 0.85;
}
.fpr-row__score-multi {
  font-size: 9.5px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.fpr-row--head .fpr-row__score {
  color: var(--text-3, #8a8680);
  font-weight: 600;
  font-size: 10.5px;
  align-items: flex-end;
}

/* Methodology accordion */
.fpr-method {
  margin-top: 14px;
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  background: var(--bg-soft, rgba(15,23,42,0.02));
}
.fpr-method > summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, #444);
  list-style: none;
}
.fpr-method > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--text-3, #8a8680);
  transition: transform 0.15s;
}
.fpr-method[open] > summary::before { transform: rotate(90deg); }
.fpr-method__body {
  padding: 0 16px 14px;
  font-size: 12px;
  color: var(--text-3, #6b6b6b);
  line-height: 1.6;
}
.fpr-method__body p { margin: 6px 0; }
.fpr-method__body code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  background: rgba(15,23,42,0.05);
  padding: 1px 5px;
  border-radius: var(--r-3);
  color: var(--text1, #1a1a1a);
}

@media (max-width: 1100px) {
  .fpr-row {
    grid-template-columns: 32px 60px 44px 1fr 44px 36px 50px 1fr 64px 130px;
    gap: 8px;
  }
}
@media (max-width: 800px) {
  .fpr-row {
    grid-template-columns: 28px 1fr 64px;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
  }
  .fpr-row__pedigree, .fpr-row__photo-wrap, .fpr-row__pos, .fpr-row__age,
  .fpr-row__eta-wrap, .fpr-row__athletic, .fpr-row__proj {
    grid-column: 2;
  }
  .fpr-row__score { grid-column: 3; grid-row: 1 / span 2; }
}

/* Source badges + MLE stat line (Fantasy Prospect Rankings) */
.fpr-row__source {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-3);
  margin-left: 6px;
  vertical-align: middle;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
.fpr-row__source--mlb {
  background: rgba(9, 130, 93, 0.12);
  color: #066b4a;
  border: 1px solid rgba(9, 130, 93, 0.20);
}
.fpr-row__source--milb {
  background: rgba(30, 111, 184, 0.10);
  color: #14598f;
  border: 1px solid rgba(30, 111, 184, 0.20);
}
.fpr-row__source--ped {
  background: rgba(107, 114, 128, 0.10);
  color: #525866;
  border: 1px solid rgba(107, 114, 128, 0.20);
}

.fpr-milb-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3, #8a8680);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  letter-spacing: 0.005em;
}
.fpr-milb-line__stat {
  color: #1e6fb8;
  font-weight: 700;
}
.fpr-milb-line__level {
  background: rgba(30, 111, 184, 0.08);
  color: #1e6fb8;
  padding: 1px 5px;
  border-radius: var(--r-3);
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fpr-milb-line__pa {
  color: var(--text-3, #8a8680);
  font-size: 10px;
}

/* Trajectory badge, empirical multi-year rank-delta indicator */
.fpr-row__traj {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-3);
  margin-left: 6px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
.fpr-row__traj--rising {
  background: rgba(9, 130, 93, 0.12);
  color: #076a4c;
  border: 1px solid rgba(9, 130, 93, 0.22);
}
.fpr-row__traj--falling {
  background: rgba(196, 74, 58, 0.10);
  color: #a23425;
  border: 1px solid rgba(196, 74, 58, 0.20);
}
.fpr-row__traj--stable {
  background: rgba(107, 114, 128, 0.08);
  color: #525866;
  border: 1px solid rgba(107, 114, 128, 0.16);
}
.fpr-row__traj--first {
  background: rgba(184, 134, 11, 0.10);
  color: #7d5c07;
  border: 1px solid rgba(184, 134, 11, 0.20);
}

/* Methodology table inside the FPR methodology panel */
.fpr-method__table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.fpr-method__table th, .fpr-method__table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
  text-align: left;
}
.fpr-method__table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 700;
  background: rgba(15,23,42,0.03);
}
.fpr-method__table tbody tr:last-child td { border-bottom: none; }
.fpr-method__table tbody tr:hover td { background: rgba(30, 111, 184, 0.04); }

/* ════════════════════════════════════════════════════════════════════
   STUDIES, long-form empirical research write-ups
   Editorial/academic layout: hero header + section blocks + data tables
   + stat-grid callouts + takeaway paragraphs. Anchored to live data
   sources via inline cross-references.
   ════════════════════════════════════════════════════════════════════ */

.studies-workspace { display: block; }

.study-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3, #8a8680);
  background: var(--card-bg, #fff);
  border: 1px dashed var(--hairline, rgba(15,23,42,0.12));
  border-radius: var(--r-8);
}
.study-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2, #444);
  margin-bottom: 6px;
}
.study-empty__sub {
  font-size: 12px;
  color: var(--text-3, #8a8680);
}
.study-empty code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  padding: 1px 5px;
  background: rgba(15,23,42,0.05);
  border-radius: var(--r-3);
}

.study {
  font-family: var(--font, ui-sans-serif, system-ui);
  color: var(--text1, #1a1a1a);
  line-height: 1.65;
  font-size: 14.5px;
  max-width: 920px;
  margin: 0 auto;
}

.study__head {
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.08));
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.study__breadcrumb {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
  margin-bottom: 10px;
}
.study__breadcrumb a {
  color: var(--text-3, #8a8680);
  text-decoration: none;
}
.study__breadcrumb a:hover { color: #1e6fb8; text-decoration: underline; }
.study__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  line-height: 1.15;
}
.study__sub {
  font-size: 16px;
  color: var(--text-2, #444);
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 720px;
}
.study__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
}
.study__meta-item b {
  color: var(--text-2, #444);
  font-weight: 600;
  margin-right: 3px;
}

.study__section {
  margin: 32px 0;
}
.study__section h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
}
.study__section p {
  margin: 10px 0;
}
.study__section ol, .study__section ul {
  margin: 12px 0;
  padding-left: 22px;
}
.study__section li { margin: 4px 0; }
.study__section em { font-style: italic; color: var(--text-2, #444); }
.study__section code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12.5px;
  padding: 1px 6px;
  background: rgba(15,23,42,0.05);
  border-radius: var(--r-3);
  color: var(--text1, #1a1a1a);
}
.study__section a {
  color: #1e6fb8;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 111, 184, 0.25);
}
.study__section a:hover {
  border-bottom-color: #1e6fb8;
}

/* Data tables inside studies */
.study__table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-6);
  overflow: hidden;
}
.study__table th, .study__table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
  text-align: left;
}
.study__table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 700;
  background: rgba(15,23,42,0.03);
}
.study__table td.num, .study__table th.num { text-align: right; }
.study__table tbody tr:last-child td { border-bottom: none; }
.study__table tbody tr:hover td { background: rgba(30, 111, 184, 0.03); }
.study__row--up   td { background: rgba(9, 130, 93, 0.04); }
.study__row--down td { background: rgba(196, 74, 58, 0.04); }
.study__table a { color: #1e6fb8; text-decoration: none; }
.study__table a:hover { text-decoration: underline; }

/* Stat-grid callouts (4-column "big number" panels) */
.study__statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.study__stat {
  background: var(--card-bg, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-8);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.study__stat-val {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text1, #1a1a1a);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.study__stat-lbl {
  font-size: 12px;
  color: var(--text-3, #6b6b6b);
  line-height: 1.4;
}

/* Takeaway block, emphasized paragraph at end of each finding */
.study__takeaway {
  background: rgba(30, 111, 184, 0.04);
  border-left: 3px solid #1e6fb8;
  padding: 12px 16px;
  border-radius: 0 var(--r-6) var(--r-6) 0;
  margin: 16px 0;
  font-size: 13.5px;
}
.study__takeaway b {
  color: #1e6fb8;
}

.study-note {
  background: rgba(15,23,42,0.03);
  padding: 10px 14px;
  border-radius: var(--r-6);
  margin: 12px 0;
  font-size: 12.5px;
  color: var(--text-2, #444);
}
.study-note--caveat {
  background: rgba(184, 134, 11, 0.06);
  border-left: 3px solid #b8860b;
}
.study-note code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(15,23,42,0.06);
  border-radius: var(--r-3);
}

.study__footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline, rgba(15,23,42,0.08));
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
  line-height: 1.6;
}
.study__footer b { color: var(--text-2, #444); font-weight: 600; }
.study__footer code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(15,23,42,0.04);
  border-radius: var(--r-3);
}

/* ════════════════════════════════════════════════════════════════════
   INJURIES PANEL, Explanation cell
   Synthesized injury summary: body area / phrase + estimated time out.
   Replaces the old single-line "Source" column.
   ════════════════════════════════════════════════════════════════════ */
.inj-explanation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.inj-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2, #444);
}
.inj-body {
  font-weight: 600;
  color: var(--text1, #1a1a1a);
  letter-spacing: -0.005em;
}
.inj-sep {
  color: var(--text-3, #8a8680);
  opacity: 0.5;
  font-weight: 400;
}
.inj-time {
  color: var(--text-2, #444);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.inj-conf {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--r-3);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
.inj-conf--low {
  background: rgba(184, 134, 11, 0.10);
  color: #b8860b;
  border: 1px solid rgba(184, 134, 11, 0.20);
}
.inj-comment {
  font-size: 11.5px;
  color: var(--text-3, #8a8680);
  font-style: italic;
  margin-top: 1px;
  max-width: 560px;
}

/* Injuries table, give the explanation column comfortable breathing room
   and ensure rows can wrap their content (long body-area phrases).
   Force LEFT alignment on every cell + header, the global table rules
   default to right-align which read messy here (badges floating right,
   comment text right-justified). Editorial left-rail layout reads cleaner.
   Column layout (5 cols): Player · Team · Pos · Status · Explanation */
#injuriesPanel .table-wrap td,
#injuriesPanel .table-wrap th {
  text-align: left !important;
}
#injuriesPanel .table-wrap td {
  vertical-align: top;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* 1: Player */
#injuriesPanel .table-wrap td:nth-child(1),
#injuriesPanel .table-wrap th:nth-child(1) {
  width: 180px;
}
/* 2: Team */
#injuriesPanel .table-wrap td:nth-child(2),
#injuriesPanel .table-wrap th:nth-child(2) {
  width: 60px;
  white-space: nowrap;
}
/* 3: Pos */
#injuriesPanel .table-wrap td:nth-child(3),
#injuriesPanel .table-wrap th:nth-child(3) {
  width: 90px;
  white-space: nowrap;
}
/* 4: Status badge */
#injuriesPanel .table-wrap td:nth-child(4),
#injuriesPanel .table-wrap th:nth-child(4) {
  width: 70px;
  white-space: nowrap;
}
/* 5: Explanation, gets the remainder */
#injuriesPanel .table-wrap td:nth-child(5),
#injuriesPanel .table-wrap th:nth-child(5) {
  width: auto;
}
/* Explanation children honor their parent's left alignment + flex layout */
.inj-explanation,
.inj-line,
.inj-comment {
  text-align: left;
}
/* Team cell, mono-tnum so 2/3-letter team abbreviations align cleanly */
.inj-team {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2, #444);
}
.inj-team--unknown, .inj-pos--unknown {
  color: var(--text-3, #8a8680);
  font-style: italic;
  font-size: 12px;
}
tr.inj-row-clickable { cursor: pointer; }
tr.inj-row-clickable:hover td { background: rgba(30, 111, 184, 0.04); }

/* ── Position filter chip strip (above injuries table) ───────────── */
.injury-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 0;
  flex-wrap: wrap;
}
.injury-filterbar__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3, #8a8680);
  font-weight: 600;
}
.injury-filterbar__chips {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.injury-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px 5px 11px;
  border-radius: var(--r-16);
  border: 1px solid var(--hairline, rgba(15,23,42,0.10));
  background: var(--bg, #fff);
  color: var(--text-2, #444);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.injury-chip:hover {
  background: var(--bg-soft, rgba(15,23,42,0.04));
  color: var(--text1, #1a1a1a);
}
.injury-chip.is-active {
  background: var(--text1, #1a1a1a);
  color: var(--bg, #fff);
  border-color: var(--text1, #1a1a1a);
}
.injury-chip__count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3, #8a8680);
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 6px;
  border-radius: var(--r-8);
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.injury-chip.is-active .injury-chip__count {
  background: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.95);
}

/* Injuries, loading placeholder row */
.inj-loading {
  text-align: center !important;
  font-style: italic;
  color: var(--text-3, #8a8680);
  padding: 32px 16px !important;
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════
   METHODOLOGY WORKSPACE, top-level Methodology tab + product subtabs
   ════════════════════════════════════════════════════════════════════ */
.methodology-workspace { display: block; }
.methodology-ws__header { margin-bottom: 18px; }
.methodology-ws__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.methodology-ws__sub {
  margin: 0;
  font-size: 14px;
  color: var(--text-3, #6b6b6b);
  max-width: 720px;
}

/* Subtab strip, pill-style tabs across the top of the methodology page */
.methodology-ws__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-10);
  position: sticky;
  top: 60px;
  z-index: 20;
}
.meth-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2, #444);
  text-decoration: none;
  border-radius: var(--r-16);
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.meth-tab:hover {
  background: var(--bg-soft, rgba(15,23,42,0.04));
  color: var(--text1, #1a1a1a);
}
.meth-tab.is-active {
  background: var(--text1, #1a1a1a);
  color: var(--bg, #fff);
}

/* Article body */
.methodology-ws__body { min-height: 400px; }
.meth-article {
  max-width: 900px;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text1, #1a1a1a);
}
.meth-article h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.10));
}
.meth-article h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
  letter-spacing: -0.005em;
}
.meth-article .meth-lede {
  font-size: 16px;
  color: var(--text-2, #444);
  margin: 10px 0 16px;
}
.meth-article p { margin: 10px 0; }
.meth-article ul, .meth-article ol { margin: 8px 0 8px 24px; padding: 0; }
.meth-article li { margin: 4px 0; }
.meth-article code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12.5px;
  padding: 1px 6px;
  background: rgba(15,23,42,0.05);
  border-radius: var(--r-3);
}
.meth-article pre {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 13px;
  padding: 12px 14px;
  background: rgba(15,23,42,0.04);
  border: 1px solid var(--hairline, rgba(15,23,42,0.06));
  border-radius: var(--r-6);
  overflow-x: auto;
  margin: 10px 0;
}
.meth-article a {
  color: #1e6fb8;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 111, 184, 0.25);
}
.meth-article a:hover { border-bottom-color: #1e6fb8; }
.meth-article .meth-source {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(15,23,42,0.06));
  font-size: 12px;
  color: var(--text-3, #8a8680);
  line-height: 1.55;
}
.meth-article .meth-source b { color: var(--text-2, #444); }

.meth-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,23,42,0.08));
  border-radius: var(--r-6);
  overflow: hidden;
}
.meth-table th, .meth-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline, rgba(15,23,42,0.06));
  text-align: left;
}
.meth-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #8a8680);
  font-weight: 700;
  background: rgba(15,23,42,0.03);
}
.meth-table tbody tr:last-child td { border-bottom: none; }
.meth-table tbody tr:hover td { background: rgba(30, 111, 184, 0.03); }

/* Source pills inside meth articles (MLB / MiLB / Pedigree etc.) */
.meth-pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-3);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  margin-right: 4px;
}
.meth-pill--mlb  { background: rgba(9,130,93,0.12);   color: #066b4a; border: 1px solid rgba(9,130,93,0.20); }
.meth-pill--milb { background: rgba(30,111,184,0.10); color: #1e6fb8; border: 1px solid rgba(30,111,184,0.20); }
.meth-pill--ped  { background: rgba(107,114,128,0.10); color: #6b7280; border: 1px solid rgba(107,114,128,0.20); }

/* Home hero preview rows, clickable to player profile (data-pid on tr;
   global click handler in explainerNavigationIIFE picks it up). */
.hero__preview-table tr.hero__preview-row[data-pid] {
  cursor: pointer;
  transition: background 0.12s;
}
.hero__preview-table tr.hero__preview-row[data-pid]:hover {
  background: rgba(30, 111, 184, 0.04);
}
.hero__preview-table tr.hero__preview-row[data-pid]:hover .hero__preview-name {
  color: #1e6fb8;
}

/* Today's Biggest Movers, whole-row link. Owns the grid layout for the
   row contents (rank · name · pos · delta) since the parent .home-pulse__item
   was reset to a plain list-item to avoid a nested-grid collapse.
   `minmax(72px, 1fr)` on the name column prevents it from being squeezed to
   zero width when the position chip carries a wide label like "1B/2B/3B"
   on narrow viewports. */
.home-pulse__link {
  display: grid;
  grid-template-columns: 24px minmax(72px, 1fr) auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 6px;
  border-radius: var(--r-4);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, color 0.12s;
}
/* Allow the name's text to actually fit/truncate within its column */
.home-pulse__link .home-pulse__name {
  min-width: 0;
}
.home-pulse__link:hover {
  background: rgba(30, 111, 184, 0.05);
}
.home-pulse__link:hover .home-pulse__name {
  color: #1e6fb8;
}

/* ──────────────────────────────────────────────────────────────────
   Anti-AI-slop refinement utilities (Awards + Staff panels).
   Principles applied from the taste-skill spec:
    , tabular-nums for numeric columns (clean alignment, no jitter)
    , skeletal loaders instead of "Loading…" text
    , tactile :active feedback on controls
    , off-black instead of pure #000
    , reduce 3-column card overuse with row dividers
   ────────────────────────────────────────────────────────────── */

/* Tabular numerals, critical for any column of numbers. */
.tabular-nums,
.awards-table td:nth-child(n+5),
.awards-table th:nth-child(n+5),
[data-research-section="awards"] table td:nth-child(n+4),
[data-research-section="staff"] table td:nth-child(1) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Skeletal loader, replace "Loading…" muted text where we can. */
.skel {
  display: block;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-4);
}
.skel + .skel { margin-top: 8px; }
.skel--lg  { height: 18px; width: 220px; }
.skel--md  { height: 14px; width: 70%; }
.skel--sm  { height: 11px; width: 40%; }
.skel--row { height: 34px; width: 100%; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

/* Tactile feedback on award/staff dropdowns + subnav buttons. */
[data-research-section] select:focus,
[data-research-section] select:focus-visible {
  outline: 2px solid rgba(30, 111, 184, 0.35);
  outline-offset: 1px;
  border-color: #1e6fb8;
}
[data-research-section] select:active {
  transform: translateY(0.5px);
}

/* Awards Future stub-card cleanup: kill the 3-equal-columns AI cliché.
   Replace with row dividers (border-t) and inline-flex meta. */
.staff-team-card,
.awards-stubs {
  /* placeholder for upcoming refactor */
}

/* Staff Analysis team card refinement, flatter, less heavy. */
[data-research-section="staff"] .staff-team-card {
  background: #ffffff;
  border: 1px solid #ececf0;
  border-radius: var(--r-8);
  overflow: hidden;
}
[data-research-section="staff"] .staff-team-card__head {
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid #f1f1f4;
}
[data-research-section="staff"] .staff-team-card__abbr {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #1a1a1f;
}
[data-research-section="staff"] .staff-team-card__name {
  font-size: 13px;
  color: #6b6b75;
}
[data-research-section="staff"] .staff-team-card__lg {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--r-3);
  border: 1px solid currentColor;
  text-transform: uppercase;
}
[data-research-section="staff"] .staff-impact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 18px;
  background: #fbfbfd;
  border-bottom: 1px solid #f1f1f4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}
[data-research-section="staff"] .staff-impact {
  font-size: 11px;
  color: #6b6b75;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-research-section="staff"] .staff-impact strong {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1f;
}
[data-research-section="staff"] .staff-impact--good strong { color: #1a8754; }
[data-research-section="staff"] .staff-impact--bad  strong { color: #c0392b; }
[data-research-section="staff"] table.coach-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
[data-research-section="staff"] table.coach-table th {
  text-align: left;
  padding: 10px 18px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #98989f;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f1f4;
}
[data-research-section="staff"] table.coach-table tbody tr {
  border-bottom: 1px solid #f5f5f7;
}
[data-research-section="staff"] table.coach-table tbody tr:last-child {
  border-bottom: none;
}
[data-research-section="staff"] table.coach-table td {
  padding: 9px 18px;
  vertical-align: top;
}
[data-research-section="staff"] .coach-role {
  font-weight: 600;
  font-size: 12.5px;
  color: #1a1a1f;
}
[data-research-section="staff"] .coach-role__desc {
  font-size: 10.5px;
  color: #98989f;
  margin-top: 2px;
  line-height: 1.45;
}
[data-research-section="staff"] .coach-name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1f;
}
[data-research-section="staff"] .coach-rep {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 2px;
}
[data-research-section="staff"] .coach-rep--elite {
  color: #b8860b;
  background: rgba(184, 134, 11, 0.08);
}
[data-research-section="staff"] .coach-rep--strong {
  color: #c8801c;
  background: rgba(200, 128, 28, 0.08);
}
[data-research-section="staff"] .coach-rep-note {
  font-size: 10.5px;
  color: #6b6b75;
  margin-top: 3px;
  line-height: 1.45;
  font-style: italic;
}
[data-research-section="staff"] .coach-lever {
  font-size: 11.5px;
  color: #6b6b75;
  line-height: 1.5;
}

/* Awards "Other Awards" data-gap notice, replace 3-col cards with
   inline list. */
.awards-data-gaps {
  margin-top: 16px;
  padding: 12px 14px;
  border-top: 1px solid #ececf0;
  font-size: 11.5px;
  color: #6b6b75;
}
.awards-data-gaps__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #98989f;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.awards-data-gaps ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}
.awards-data-gaps li {
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.awards-data-gaps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: #d4d4dd;
  border-radius: 50%;
}
.awards-data-gaps li b {
  color: #1a1a1f;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   V2 POLISH LAYER - aliased to the editorial system (2026-05-27 pass).
   The Geist+v2 tokens used to ship a parallel slate-gray palette; per
   the design-system decision (see top-of-file banner), the editorial
   tokens at the main :root are canonical. The tokens below now ALIAS
   to those rather than define competing values, so the ~60 selectors
   referencing --font-v2 / --brand-v2 / --hairline-v2 / --shadow-v2
   keep working but render in the editorial palette.
   Easing tokens (--ease-v2, --ease-spring) keep their distinct curves
   since those are orthogonal to color/typography.
   ═══════════════════════════════════════════════════════════════════ */

/* Geist @import removed 2026-05-27 round 3: editorial stack (Figtree +
   Outfit + JetBrains Mono) is the only font system now. --font-v2 / -mono
   alias to that stack below; legacy selectors that referenced 'Geist'
   resolve through the alias and use Figtree without re-downloading. */

:root {
  /* Aliased to editorial stack - Figtree handles UI, Outfit display. */
  --font-v2:       var(--font);
  --font-v2-mono:  var(--mono);
  /* Aliased to the canonical brand red (#b23415) - no more rose-red drift. */
  --brand-v2:      var(--brand);
  --brand-v2-deep: var(--brand-deep);
  /* Aliased to the editorial hairline. */
  --hairline-v2:   var(--hairline);
  /* Easing - kept distinct (these are motion curves, not palette). */
  --ease-v2:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Aliased to editorial elevation. */
  --shadow-v2:     var(--shadow-2);
  --shadow-v2-hov: var(--shadow-3);
}

/* ── Body baseline: upgrade to Geist + tighter tracking ─────────── */
body {
  font-family: var(--font-v2);
  font-feature-settings: "ss01", "cv01", "cv02", "cv11";  /* Geist Sans humanist alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* Headlines: tighter tracking, hierarchy by weight not just scale (taste rule). */
h1, h2, h3, h4, h5, h6,
.hero__title, .panel__title, .research-section__title {
  font-family: var(--font-v2);
  letter-spacing: -0.02em;
}
.hero__title { letter-spacing: -0.03em; }

/* ── Tabular numerals EVERYWHERE numbers live ───────────────────── */
/* Every table cell, every data column, every stat, every card-number.
   Widened (2026-05-27 round 2) to catch FYPD / Injuries / Edge cards
   that use common naming patterns like *num, *pts, *delta, *pct,
   *rate, *score, *val. This is the single most-impactful polish for
   a stats-dashboard product. */
table td, table th,
[class*="stat"], [class*="rank"], [class*="metric"],
[class*="num"], [class*="pts"], [class*="delta"], [class*="pct"],
[class*="rate"], [class*="score"], [class*="val"], [class*="-age"],
.tabular, .money, .fpts,
.rankings-table td, .rankings-table th,
.staff-impact strong,
.fypd-card__rank, .fypd-card__age, .fypd-card__value-num,
.injury-card td, .inj-time,
.awards-table td, .awards-table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

/* ── Premium focus ring (a11y CRITICAL per ui-ux-pro-max) ─────────
   Updated 2026-05-27: now uses the canonical --shadow-focus token
   (brand-red #b23415) instead of the legacy rose-red rgba. Aligned
   with the top-of-file global focus rule. */
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1.5px var(--bg), var(--shadow-focus) !important;
  border-radius: inherit;
  transition: box-shadow 0.12s var(--ease-v2);
}
button:focus-visible, a:focus-visible {
  outline: none !important;
}
/* Buttons + interactive cards inherit the brand-colored ring. */
.btn:focus-visible, button.btn:focus-visible {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 4px rgba(220, 72, 72, 0.30) !important;
}

/* ── Tactile feedback on every clickable thing ──────────────────── */
.btn, button.btn, .research-subnav__btn, .staff-subtab, .awards-subtab,
button[type="button"]:not(:disabled), [role="button"], select {
  transition: transform 0.12s var(--ease-v2),
              background 0.16s var(--ease-v2),
              color 0.16s var(--ease-v2),
              box-shadow 0.16s var(--ease-v2);
}
.btn:active:not(:disabled),
button.btn:active:not(:disabled),
.research-subnav__btn:active,
.staff-subtab:active, .awards-subtab:active,
button[type="button"]:active:not(:disabled),
[role="button"]:active {
  transform: translateY(0.5px) scale(0.985);
  transition-duration: 0.06s;
}

/* ── Anti-AI-slop sweep: pure-black audit ───────────────────────── */
/* Replace any leaked pure #000 with the ink token. Direct selectors -
   the property-based override is too risky on a 14k line stylesheet. */
[style*="color:#000"], [style*="color: #000"], [style*="color:black"] {
  color: var(--ink) !important;
}

/* ── Card / container minimalism (Bento 2.0) ────────────────────── */
/* Soften every "panel"-class card: hairline border + diffusion shadow
   instead of heavy default browser shadows. */
.action-card, .panel__section, .research-section,
.staff-team-card, .player-card {
  border-color: var(--hairline-v2) !important;
}

/* ── Smooth panel-to-panel reveal animation ─────────────────────── */
/* Replace the existing snap reveals with a refined fade + 6px lift. */
@keyframes v2-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.research-section:not([hidden]),
.awards-panel:not([hidden]),
.staff-panel:not([hidden]) {
  animation: v2-rise 320ms var(--ease-v2) both;
}

/* ── Staggered list reveal (taste-skill principle 4) ────────────── */
/* Apply via JS by setting --index on each child. CSS handles the math. */
@keyframes v2-stagger {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-in > * {
  animation: v2-stagger 320ms var(--ease-v2) both;
  animation-delay: calc(var(--index, 0) * 30ms);
}

/* ── Better skeletal loaders (smoother shimmer) ─────────────────── */
.skel {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.04) 0%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-6);
  animation: skel-shimmer 1.6s var(--ease-v2) infinite;
}

/* ── Table polish: line-height + numeric weight ──────────────────── */
table {
  line-height: 1.45;
}
table thead th {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--text-3);
}
table tbody tr {
  transition: background 0.12s var(--ease-v2);
}
table tbody tr:hover {
  background: rgba(15, 23, 42, 0.018);
}

/* ── Select element polish (the default looks crusty) ───────────── */
select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) center,
    calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px !important;
  border: 1px solid var(--hairline-v2);
  border-radius: var(--r-8);
  font-family: var(--font-v2);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
select:hover {
  border-color: rgba(15, 23, 42, 0.14);
}
select:focus-visible {
  border-color: var(--brand-v2);
}

/* ── Premium button refinement ──────────────────────────────────── */
.btn, button.btn {
  font-family: var(--font-v2);
  letter-spacing: -0.005em;
  border-radius: var(--r-8)!important;
}
.btn--primary, button.btn--primary {
  background: linear-gradient(180deg, var(--brand-v2) 0%, var(--brand-v2-deep) 100%) !important;
  border: 1px solid var(--brand-v2-deep) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(183, 56, 56, 0.18) !important;
}
.btn--primary:hover, button.btn--primary:hover {
  background: linear-gradient(180deg, #e25555 0%, #c43e3e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 12px rgba(183, 56, 56, 0.22) !important;
}

/* ── Subnav pill refinement (research terminal) ─────────────────── */
.research-subnav__btn {
  font-family: var(--font-v2) !important;
  letter-spacing: -0.005em !important;
  border-radius: 999px!important;
  font-weight: 500 !important;
  transition: all 0.16s var(--ease-v2);
}
.research-subnav__btn.is-active {
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(11, 17, 32, 0.18) !important;
}

/* ── Reduced motion respect (a11y) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .skel {
    animation: none !important;
    background: rgba(15, 23, 42, 0.06) !important;
  }
}

/* ── Code element refinement (mono font in inline code) ─────────── */
code, .mono, pre {
  font-family: var(--font-v2-mono);
  font-feature-settings: "tnum" on, "ss01" on;
  font-size: 0.92em;
}

/* ── ManagrScore + key-metric color discipline ──────────────────── */
/* Numbers in big stat positions get extra tracking-tightness for premium feel. */
.staff-impact strong,
[class*="metric-value"], [class*="big-num"], [class*="stat-value"] {
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   ANTI-AI-SLOP SWEEP (redesign-skill final pass)
   Final-mile fixes for the patterns the redesign-skill specifically flags.
   ═══════════════════════════════════════════════════════════════════ */

/* Soft scroll behavior, the redesign-skill flags scroll-jumping as a tell. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Replace all pure-black tinted shadows with hue-tinted ones via global override.
   Targets any box-shadow declared with rgba(0,0,0,*) by intercepting via :where()
   so we don't compete with specificity. Apply to common container classes. */
.panel, .panel__section, .action-card, .research-section,
.staff-team-card, .player-card, .compare-tray__panel,
.cardified, .surface-elevated {
  /* Soft tinted shadow replacement, works regardless of original shadow. */
  box-shadow: var(--shadow-v2);
}

/* Text-wrap balance on headlines (single orphan-word fix). */
h1, h2, h3, h4,
.hero__title, .panel__title, .research-section__title,
.section-title, .module-title {
  text-wrap: balance;
}

/* Pretty wrap on body paragraphs (no orphaned words on the last line). */
p, .panel__sub, .research-section__sub {
  text-wrap: pretty;
}

/* Standard body-line-width cap for prose blocks (~65ch per redesign-skill). */
.research-section__sub, .panel__sub, .study__intro p, .meth-article p {
  max-width: 65ch;
}

/* Hover row highlight is more subtle, 1.8% alpha barely visible but felt. */
.rankings-table tbody tr:hover,
.compare-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.018);
}

/* Soft elevation on focused/hovered cards instead of border-lift jump. */
.action-card, .player-card, .staff-team-card {
  transition: box-shadow 0.18s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.18s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1));
}
.action-card:hover, .staff-team-card:hover {
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: var(--shadow-v2-hov);
}

/* Numeric badges/pills get tabular nums + tighter tracking. */
.pill, .badge, [class*="pill"], [class*="badge"], [class*="chip"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Tighter, more refined hairlines on common dividers. */
.research-subnav,
.awards-subtabs,
.staff-subtabs,
.panel__header,
[role="separator"], hr {
  border-color: var(--hairline-v2) !important;
}
hr { color: var(--hairline-v2); }

/* Section headings using the new Geist stack get a tighter line-height. */
.panel__title { line-height: 1.1; }
.hero__title { line-height: 1.05; }
.research-section__title { line-height: 1.15; }

/* Soften the brand-grad button background to the new less-saturated red. */
.btn--primary, button.btn--primary,
.btn--brand, button.btn--brand {
  background: linear-gradient(180deg, var(--brand-v2, #dc4848) 0%, var(--brand-v2-deep, #b73838) 100%) !important;
}

/* Compose-section optical alignment: pin CTAs to a consistent baseline. */
.action-card { display: flex; flex-direction: column; }
.action-card .actions { margin-top: auto; }

/* Smaller, calmer toast/notification colors (the bright reds are too loud). */
.toast--success, .alert--success { background: rgba(20, 163, 107, 0.08); color: var(--green); }
.toast--error,   .alert--error   { background: rgba(210, 69, 47, 0.08);  color: var(--red); }
.toast--warn,    .alert--warn    { background: rgba(196, 136, 23, 0.08); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   ALIGNMENT + RHYTHM PASS (taste-skill + redesign-skill)
  , Fixed-layout award tables so AL and NL panels match column-for-column
  , Left-aligned name columns; right-aligned numeric columns
  , Unified section-heading typography across every research panel
  , Consistent vertical rhythm
   ═══════════════════════════════════════════════════════════════════ */

/* Award tier wrapper, consistent margin between tiers */
.award-tier {
  margin-bottom: 18px;
}
.award-tier__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-1, #1a1a1f);
  margin: 4px 0 8px 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.award-tier__title--empty {
  color: var(--text-3, #98989f);
  font-weight: 600;
}

/* Award table, fixed layout guarantees AL/NL panels align */
.award-tier__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Headers, consistent muted uppercase label treatment */
.award-tier__table thead tr {
  border-bottom: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06));
}
.award-tier__table th {
  padding: 6px 8px 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-3, #98989f);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.award-tier__th-text { text-align: left; }
.award-tier__th-num  { text-align: right; }

/* Body cells, consistent padding, no wrapping where unwanted */
.award-tier__table tbody tr {
  border-bottom: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.04));
}
.award-tier__table tbody tr:last-child {
  border-bottom: none;
}
.award-tier__table td {
  padding: 7px 8px;
  vertical-align: middle;
}

/* Specific cell types */
.award-tier__td-rank {
  color: var(--text-3, #98989f);
  font-weight: 500;
  text-align: left;
  /* Extra right-padding so the rank digit doesn't visually collide with
     the player name in the next column. */
  padding-right: 14px !important;
}
.award-tier__table th.award-tier__th-num:first-of-type,
.award-tier__th-num:first-child {
  padding-right: 14px;
}
.award-tier__td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.award-tier__td-name {
  text-align: left;
  color: var(--text-1, #1a1a1f);
  /* Let names wrap naturally, the FAVORITE chip is more important than
     a single-line constraint. */
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.award-tier__td-team {
  text-align: left;
  color: var(--text-3, #98989f);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.award-tier__td-stat {
  text-align: left;
  color: var(--text-2, #6b6b75);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  /* Allow stat-line wrapping but keep / separators on the same word */
  word-spacing: -0.5px;
}

/* Section headings inside the Awards Future / Previous renderers
   should all share the same scale + spacing for visual rhythm.
   Pre-existing inline `<h5 style="margin:24px 0 8px 0;font-size:15px...">`
   declarations get this consistent treatment via attribute selector. */
#awardsFutureContent h5,
#awardsPrevTable h5,
#staffContent h5,
#fpaaContent h5,
#wbcContent h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-1, #1a1a1f) !important;
  margin: 24px 0 10px 0 !important;
  line-height: 1.25 !important;
}
/* First heading in each container has less top margin (no double-spacing). */
#awardsFutureContent > h5:first-child,
#awardsPrevTable > h5:first-child,
#staffContent > h5:first-child,
#fpaaContent > h5:first-child,
#wbcContent > h5:first-child {
  margin-top: 0 !important;
}

/* Sub-headings (h6) inside the same panels: 12.5px gold-ish muted */
#awardsFutureContent h6,
#awardsPrevTable h6,
#staffContent h6,
#fpaaContent h6,
#wbcContent h6 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--text-1, #1a1a1f) !important;
  margin: 6px 0 8px 0 !important;
  line-height: 1.3 !important;
}

/* Italic explainer text (the paragraph right under a heading) */
#awardsFutureContent > p,
#awardsPrevTable > p,
#staffContent > p,
#fpaaContent > p,
#wbcContent > p {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  margin: 0 0 10px 0;
  line-height: 1.5;
  max-width: 65ch;
}

/* All tables in research panels: tabular nums by default */
.research-section table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Two-column grid wrapper inside award panels, consistent gap */
#awardsFutureContent > div[style*="grid-template-columns:1fr 1fr"],
#awardsFutureContent > div[style*="grid-template-columns:1fr 1fr 1fr"] {
  gap: 18px !important;
  align-items: start;
}

/* Subnav pills, guarantee equal height + padding regardless of label length */
.research-subnav__btn {
  min-height: 30px;
  padding: 7px 14px !important;
  display: inline-flex !important;
  align-items: center;
  line-height: 1.2 !important;
}
.research-subnav__group {
  align-items: flex-start;
}
.research-subnav__group-label {
  /* Lock the label position so groups align at the top regardless of how
     many buttons each one contains. */
  height: 16px;
  display: flex;
  align-items: center;
}

/* Awards page: the "Awards" header + descriptive paragraph at the top
   should sit on a consistent baseline + width. */
.research-section__header h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px 0 !important;
}
.research-section__sub {
  font-size: 12.5px !important;
  color: var(--text-3, #98989f) !important;
  margin: 0 !important;
  max-width: 72ch !important;
  line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   V3 DESIGN LAYER - aliased to the editorial system (2026-05-27 pass).
   Used to ship its own palette (Analytics Dashboard + Sports Team
   hybrid) with sports-red brand, amber accent, finance-green positive.
   Per the design-system decision, the editorial tokens win - brand,
   positive, negative all alias here. Barlow Condensed + Fira Code
   are retained for the big-num display class and code samples that
   genuinely benefit from the condensed/code glyphs.
   ═══════════════════════════════════════════════════════════════════ */

/* Barlow Condensed + Fira Code @imports removed 2026-05-27 round 3.
   --font-display-condensed now resolves to Outfit at the heavy weight
   (Outfit-900 is naturally condensed-feeling). --font-num-mono falls
   back to JetBrains Mono. Saves ~80KB on first paint. */

:root {
  /* Display + numeric stacks - Outfit handles big-num display; JetBrains
     Mono handles code/diff. No additional font downloads required. */
  --font-display-condensed: 'Outfit', 'Figtree', system-ui, sans-serif;
  --font-num-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Aliased to the canonical brand red. */
  --brand-v3:           var(--brand);
  --brand-v3-deep:      var(--brand-deep);
  --brand-v3-soft:      var(--brand-soft);
  /* Amber accent - aliased to the editorial gold so the highlight tone
     stays warm-paper rather than dashboard-orange. */
  --accent-amber:       var(--gold);
  --accent-amber-soft:  var(--gold-soft);
  /* Positive / negative - aliased to editorial semantic tokens. */
  --positive-green:     var(--green);
  --positive-green-soft: var(--green-soft);
  --negative-red:       var(--red);
  --negative-red-soft:  var(--red-soft);
  /* Bento card recipe - flat editorial, no rounded corners or white surface. */
  --bento-radius: var(--card-radius);
  --bento-bg:     var(--surface);
  --bento-border: var(--card-border);
  --bento-shadow: var(--shadow-2);
  --bento-shadow-hover: var(--shadow-3);
}

/* ── BENTO GRID UTILITY ─────────────────────────────────────────────
   Bento grid was the skill's #1 style recommendation for dashboards.
   Use these classes anywhere you want a clean modular card surface. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.bento-card {
  background: var(--bento-bg);
  border: var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--bento-shadow);
  padding: 20px;
  transition: box-shadow 0.18s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.18s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1));
}
.bento-card:hover {
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: var(--bento-shadow-hover);
}
.bento-card__label {
  font-size: 10.5px;
  font-weight: 600;
  color: #98989f;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.bento-card__value {
  font-family: var(--font-display-condensed);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink, #0b1120);
  font-variant-numeric: tabular-nums;
}
.bento-card__sub {
  font-size: 12px;
  color: var(--text-2, #6b6b75);
  margin-top: 6px;
  line-height: 1.4;
}

/* ── STAT-CHIP SYSTEM ──────────────────────────────────────────────
   Color + symbol = compliant with `color-not-only` (CRITICAL a11y rule).
   Use `<span class="stat-chip stat-chip--pos">+12.3</span>` etc.
   Arrow chars are paired with color so colorblind users still parse +/-. */
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-num-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 2px 8px;
  border-radius: var(--r-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-chip--pos {
  color: var(--positive-green);
  background: var(--positive-green-soft);
}
.stat-chip--pos::before { content: "▲"; font-size: 10px; }
.stat-chip--neg {
  color: var(--negative-red);
  background: var(--negative-red-soft);
}
.stat-chip--neg::before { content: "▼"; font-size: 10px; }
.stat-chip--neutral {
  color: var(--text-3, #98989f);
  background: rgba(15, 23, 42, 0.04);
}
.stat-chip--neutral::before { content: "·"; font-size: 14px; line-height: 0.5; }
.stat-chip--hot {
  color: var(--accent-amber);
  background: var(--accent-amber-soft);
}
.stat-chip--hot::before { content: "★"; font-size: 10px; }

/* ── BIG-NUMBER DISPLAY (sports headline treatment) ────────────────
   Use for any oversized stat where impact matters: ManagrScore in big
   spotlight, season totals on player profiles, Pearson r on study cards. */
.big-num {
  font-family: var(--font-display-condensed);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.big-num--xl { font-size: 64px; }
.big-num--lg { font-size: 48px; }
.big-num--md { font-size: 32px; }
.big-num--sm { font-size: 24px; }

/* ── ELEVATION-CONSISTENT (skill UX rule) ──────────────────────────
   Three explicit elevation levels, all other shadows in the codebase
   should map to one of these. */
.elev-0 { box-shadow: none; }
.elev-1 { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 1px rgba(15, 23, 42, 0.02); }
.elev-2 { box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(15, 23, 42, 0.04); }
.elev-3 { box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06); }

/* ── PRIMARY-ACTION (skill UX rule: one primary CTA per screen) ─────
   Subtle visual subordination for non-primary actions. Apply by adding
   class="btn--secondary-quiet" alongside .btn. */
.btn--secondary-quiet {
  background: transparent !important;
  color: var(--text-2, #6b6b75) !important;
  border: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06)) !important;
  box-shadow: none !important;
}
.btn--secondary-quiet:hover {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

/* ── STATE CLARITY (skill UX rule: distinct hover/pressed/disabled) ─ */
[disabled], .is-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── HEAT-MAP CELL COLOR SCALE (skill chart pattern) ────────────────
   Use for data cells where intensity matters. Maps a 0-100 percentile
   to the cool→hot gradient. Pair with `data-heat="65"` attribute and
   inline `style="--heat:65"` to drive the color. */
.heat-cell {
  background: linear-gradient(
    90deg,
    rgba(30, 64, 175, calc(var(--heat, 50) / 100 * 0.16)) 0%,
    rgba(217, 119, 6, calc(var(--heat, 50) / 100 * 0.16)) 100%
  );
  padding: 4px 8px;
  border-radius: var(--r-4);
  font-variant-numeric: tabular-nums;
}

/* ── BARLOW UPGRADE for award titles (sports-energy headlines) ─────
   Apply Barlow Condensed to the giant "MVP (Top 5)" / "Cy Young (Top 5)"
   section heads on the Awards page so they read with stat-headline impact.
   Existing 14px size kept; Barlow is condensed so it reads slightly
   smaller, freeing horizontal space. */
#awardsFutureContent > h5,
#awardsPrevTable > h5 {
  font-family: var(--font-display-condensed) !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}

/* Subnav active state pill: brand-v3 underline accent instead of the
   slightly garish pure red, matching the skill's recommended Sports Team
   palette primary while staying off-saturated. */
.research-subnav__btn.is-active {
  background: var(--ink, #0b1120) !important;
}

/* Focus ring color refresh to the v3 brand (skill: focus rings 2-4px). */
*:focus-visible {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 4px rgba(220, 38, 38, 0.32) !important;
}
.btn:focus-visible, button.btn:focus-visible {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 4px rgba(220, 38, 38, 0.28) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TASTE V4 LAYER (taste-skill applied; actual taste, not just compliance)
   Anti-AI-slop refinements + premium-feel touches:
    , Liquid-glass edge refraction on cards (1px inner highlight + inset shadow)
    , Hue-shifted shadows (not pure black at low opacity)
    , Subtle grain texture on the body background (tactility without weight)
    , Spotlight border cards (cursor proximity)
    , Staggered table-row reveals (CSS-only, no JS framework)
    , Gradient-hairline dividers (more refined than solid 1px)
    , Premium primary button (inner highlight stack)
    , Eyebrow label treatment for section heads
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Editorial-warm shadow stack. Background is warm ivory (#f4f1ea),
     so shadows lean ink-warm (15,14,12) instead of cool-slate. Was
     keyed to the prior cool-slate background; re-tuned 2026-05-27. */
  --shadow-taste-1: 0 1px 1px rgba(15, 14, 12, 0.030),
                    0 1px 2px rgba(15, 14, 12, 0.020);
  --shadow-taste-2: 0 1px 1px rgba(15, 14, 12, 0.040),
                    0 6px 16px -4px rgba(15, 14, 12, 0.055);
  --shadow-taste-3: 0 1px 2px rgba(15, 14, 12, 0.050),
                    0 12px 24px -6px rgba(15, 14, 12, 0.070),
                    0 28px 64px -16px rgba(15, 14, 12, 0.090);
  /* Inner-edge refraction recipe (apply to glass-y cards). The white
     highlight stays - it reads as paper sheen on ivory. */
  --refract-inner: inset 0 1px 0 rgba(255, 255, 255, 0.65),
                   inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ── BODY: subtle grain + ambient warm radial wash ──────────────────
   Two fixed pseudo-elements at low alpha. Pointer-events none so they
   never intercept clicks. Mobile-cheap (no images, no GPU load on scroll). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Warm ambient wash at top, cool at bottom. Very subtle (4% alpha). */
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      rgba(239, 68, 68, 0.025) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%,
      rgba(30, 64, 175, 0.020) 0%, transparent 60%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  /* SVG noise generated inline; ~3KB encoded. The fractalNoise filter
     produces an analog film-grain texture that breaks flat sterility. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
/* All real content sits above the background fx layers. */
body > * { position: relative; z-index: 1; }

/* ── LIQUID-GLASS REFRACTION on key card surfaces ───────────────────
   Inner-edge white highlight + 1px inset border. Cards stop reading as
   flat rectangles and start reading as physical glass. */
.action-card,
.staff-team-card,
.research-section .award-tier,
.bento-card {
  box-shadow: var(--refract-inner), var(--shadow-taste-1) !important;
  transition: box-shadow 0.22s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.22s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.22s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1));
}
.action-card:hover,
.staff-team-card:hover,
.bento-card:hover {
  box-shadow: var(--refract-inner), var(--shadow-taste-2) !important;
}

/* ── SPOTLIGHT BORDER CARDS ─────────────────────────────────────────
   Conic gradient mask follows cursor via --mx / --my CSS vars set by
   tiny JS at the bottom of app.js. Falls back gracefully (no JS = no
   spotlight, just the static refraction above). */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
    rgba(220, 38, 38, 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.32s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
  z-index: 0;
}
.spotlight-card:hover::before {
  opacity: 1;
}
.spotlight-card > * { position: relative; z-index: 1; }

/* ── STAGGERED TABLE-ROW REVEALS (CSS-only) ─────────────────────────
   When a research-section table mounts, fade rows in with a 30ms cascade.
   Only fires once per table (CSS animation, no replay). */
@keyframes taste-row-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.research-section table tbody tr {
  animation: taste-row-rise 380ms var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
/* Stagger up to 10 rows; beyond that, instant (perf). */
.research-section table tbody tr:nth-child(1)  { animation-delay: 20ms; }
.research-section table tbody tr:nth-child(2)  { animation-delay: 55ms; }
.research-section table tbody tr:nth-child(3)  { animation-delay: 90ms; }
.research-section table tbody tr:nth-child(4)  { animation-delay: 125ms; }
.research-section table tbody tr:nth-child(5)  { animation-delay: 160ms; }
.research-section table tbody tr:nth-child(6)  { animation-delay: 195ms; }
.research-section table tbody tr:nth-child(7)  { animation-delay: 230ms; }
.research-section table tbody tr:nth-child(8)  { animation-delay: 265ms; }
.research-section table tbody tr:nth-child(9)  { animation-delay: 300ms; }
.research-section table tbody tr:nth-child(10) { animation-delay: 335ms; }

/* ── GRADIENT-HAIRLINE DIVIDERS ─────────────────────────────────────
   Solid 1px borders feel cheap. A fade-in / fade-out gradient hairline
   feels considered. Apply via `.divider-fade` or as a default override. */
.divider-fade,
hr.fade,
.research-section h5 + p,
.bento-card + .bento-card {
  border-image: linear-gradient(90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.08) 20%,
    rgba(15, 23, 42, 0.08) 80%,
    transparent 100%) 1;
}

/* ── EYEBROW LABEL (small caps over section titles) ─────────────────
   Magazine-style label above section titles. Adds editorial weight. */
.eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-v3, #DC2626);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--brand-v3, #DC2626);
  transform: translateY(-50%);
}

/* ── PREMIUM PRIMARY BUTTON ─────────────────────────────────────────
   Stacks: outer ambient ring + inner top-highlight + tighter type +
   spring-physics press feedback. Reads expensive. */
.btn--primary, button.btn--primary {
  background: linear-gradient(180deg, #E04A4A 0%, #B91C1C 100%) !important;
  color: #FFF !important;
  border: 1px solid #A01818 !important;
  border-radius: var(--r-8)!important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(185, 28, 28, 0.30),
    0 8px 20px -6px rgba(185, 28, 28, 0.32) !important;
  transition: transform 0.10s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow 0.16s var(--ease-v2, cubic-bezier(0.22, 1, 0.36, 1)),
              filter 0.16s ease !important;
}
.btn--primary:hover, button.btn--primary:hover {
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(185, 28, 28, 0.32),
    0 12px 28px -6px rgba(185, 28, 28, 0.38) !important;
}
.btn--primary:active, button.btn--primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(185, 28, 28, 0.28) !important;
}

/* ── REFINED SCROLLBARS ─────────────────────────────────────────────
   Default browser scrollbars scream "generic web app." Custom thin
   muted track + brand-tinted hover. Webkit + Firefox. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: var(--r-4);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 38, 38, 0.40);
  background-clip: padding-box;
}

/* ── REDUCED-MOTION RESPECT (a11y) ──────────────────────────────────
   Disable all the new motion when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .research-section table tbody tr { animation: none !important; }
  body::before, body::after { display: none !important; }
  .spotlight-card::before { display: none !important; }
}

/* ── SELECTION COLOR ────────────────────────────────────────────────
   Default browser text-selection blue is awful and breaks brand. */
::selection {
  background: rgba(220, 38, 38, 0.20);
  color: var(--ink, #0b1120);
}

/* ════════════════════════════════════════════════════════════════════
   IMPECCABLE PASS , accessibility + final slop cleanup
   ──────────────────────────────────────────────────────────────────
   1. Skip-to-content link (a11y, keyboard navigation)
   2. Disabled footer-legal items (no dead href="#" anywhere)
   3. Focus-visible ring tokens reaffirmed
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   RESEARCH LAB , two-column sidebar + content layout
   Mirrors the documentation-site pattern (Stripe / Linear / GitHub
   docs) so 23 studies stay navigable without crowding the top subnav.
   LEFT (220px): sticky category-grouped study links, scrolls inside.
   RIGHT (flex): the index summary or the selected study's detail.
   On <900px screens it collapses to single-column with the sidebar
   sitting above the content.
   ════════════════════════════════════════════════════════════════════ */
.studies-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
  min-height: 500px;
}
@media (max-width: 900px) {
  .studies-layout { grid-template-columns: 1fr; gap: 18px; }
  .studies-sidebar { position: static !important; max-height: none !important; }
}

.studies-sidebar {
  position: sticky;
  top: 110px;
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  padding-right: 6px;
  border-right: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06));
  padding: 4px 12px 24px 0;
}
.studies-sidebar::-webkit-scrollbar { width: 4px; }
.studies-sidebar::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.10); border-radius: var(--r-4); }
.studies-sidebar::-webkit-scrollbar-track { background: transparent; }

.studies-side-group {
  margin-top: 18px;
}
.studies-side-group:first-of-type { margin-top: 12px; }
.studies-side-group__label {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  padding: 0 10px 6px 10px;
}

.studies-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 1px;
  font: 500 13px/1.3 "Geist", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--text-2, #6b6b75);
  text-decoration: none;
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: background 120ms cubic-bezier(0.2, 0.7, 0.2, 1), color 120ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.studies-side-link:hover {
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-1, #1a1a1f);
}
.studies-side-link.is-active {
  background: rgba(11, 17, 32, 0.04);
  color: var(--text-1, #1a1a1f);
  font-weight: 600;
  border-left-color: var(--ink, #0b1120);
}
.studies-side-link__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.studies-side-link__icon { font-size: 12px; color: var(--text-3, #98989f); margin-right: 4px; }

.studies-side-link--home {
  font-weight: 600;
  color: var(--text-1, #1a1a1f);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06));
  margin-bottom: 4px;
  border-radius: 0;
}
.studies-side-link--home:hover { background: transparent; }
.studies-side-link--home.is-active { border-bottom-color: var(--ink, #0b1120); background: transparent; }

.studies-main { min-width: 0; /* allow grid child to shrink so tables don't overflow */ }

/* ────────────────────────────────────────────────────────────────────
   Research Lab second-tier strip , sits below the main research subnav.
   Holds 23 compact study pills with inline mini category labels so the
   whole strip reads as a single horizontal rhythm, not 8 stacked blocks.
   ──────────────────────────────────────────────────────────────────── */
.research-lab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  padding: 12px 0 0 0;
  margin: -6px 0 14px 0;
  border-top: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06));
}
.research-lab-strip__home {
  margin-right: 4px;
}
.research-lab-strip__cat {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  padding: 0 2px 0 10px;
  margin-left: 4px;
  border-left: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.10));
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.research-lab-strip__cat:first-of-type { border-left: 0; padding-left: 0; margin-left: 0; }

.research-subnav__btn--compact {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border-radius: 7px!important;
}
.research-subnav__btn--compact.is-active {
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  .research-lab-strip { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .research-lab-strip::-webkit-scrollbar { height: 4px; }
  .research-lab-strip::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.10); border-radius: var(--r-4); }
}

/* ════════════════════════════════════════════════════════════════════
   STUDY ARTICLE TYPOGRAPHY
   Every Research Lab study body is wrapped in <article class="study-article">
   so it reads like a magazine feature rather than a dashboard widget.
   Editorial measure (max ~70 char), generous leading, clear hierarchy.
   ════════════════════════════════════════════════════════════════════ */
.study-article {
  max-width: 760px;
  font: 400 14.5px/1.65 "Geist", system-ui, -apple-system, sans-serif;
  color: var(--text-2, #4b4b54);
  letter-spacing: -0.003em;
}
.study-article > * + * { margin-top: 18px; }

.study-article .study-lede {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-1, #1a1a1f);
  font-weight: 400;
  margin-top: 8px;
  letter-spacing: -0.012em;
}
.study-article .study-lede b {
  font-weight: 600;
}

.study-article p {
  margin: 0;
  max-width: 70ch;
}
.study-article p + p { margin-top: 14px; }

.study-article h3 {
  font: 700 17px/1.3 "Geist", system-ui, sans-serif;
  letter-spacing: -0.014em;
  color: var(--text-1, #1a1a1f);
  margin: 32px 0 10px 0;
  padding: 0;
}
.study-article h3:first-child { margin-top: 0; }

.study-article ul, .study-article ol {
  margin: 0;
  padding-left: 20px;
}
.study-article ul li, .study-article ol li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.study-article b, .study-article strong {
  color: var(--text-1, #1a1a1f);
  font-weight: 600;
}

.study-article .study-stat-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 22px 0;
  padding: 0;
}
.study-article .study-stat-strip .study-stat {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-left: 3px solid var(--ink, #0b1120);
  background: var(--surface-1, #fafbfc);
  border-radius: 0 var(--r-6) var(--r-6) 0;
  min-width: 130px;
}
.study-article .study-stat__label {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 6px;
}
.study-article .study-stat__value {
  font: 700 22px/1.1 "Geist", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text-1, #1a1a1f);
  font-variant-numeric: tabular-nums;
}

.study-article table {
  width: 100%;
  margin: 14px 0 6px 0;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.study-article table th {
  padding: 8px 10px;
  text-align: left;
  font: 700 10.5px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  border-bottom: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.10));
}
.study-article table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.04));
}

.study-article .study-callout {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent-1, #0070f3);
  background: rgba(0, 112, 243, 0.04);
  border-radius: 0 var(--r-6) var(--r-6) 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.study-article .study-callout b { color: var(--text-1, #1a1a1f); }

.study-article .study-footnote {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.06));
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3, #98989f);
}

/* Index-grid cards (the per-category study tiles shown on the Lab landing) */
.studies-card {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--hairline-v2, rgba(15, 23, 42, 0.07));
  border-radius: var(--r-8);
  text-decoration: none;
  transition: border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.studies-card:hover {
  border-color: rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.18);
}

/* Skip link: invisible until focused via keyboard. */
.skip-to-content {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-110%);
  z-index: var(--z-overlay);
  padding: 10px 16px;
  background: var(--ink, #0b1120);
  color: #fff;
  font: 600 13px / 1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.01em;
  border-radius: 0 0 var(--r-10) 0;
  text-decoration: none;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Footer legal items that previously had dead href="#" anchors ,
   now rendered as muted, non-interactive spans so we never ship a
   link that goes nowhere. Color tuned for the dark footer
   background (#0b1120), matching adjacent anchor muted state. */
.home-footer__legal-item {
  color: rgba(237, 237, 239, 0.45);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  cursor: default;
  user-select: none;
}
/* The parent .home-footer__legal already provides flex gap: 20px, so
   no per-item margin is needed. */

/* When users tab to the main-content anchor, do not show the
   default :focus ring on the hero header itself. */
#main-content:focus {
  outline: none;
}
#main-content:focus-visible {
  outline: 2px solid var(--focus, #2563eb);
  outline-offset: 4px;
  border-radius: var(--r-12);
}

/* ════════════════════════════════════════════════════════════════════
   READABILITY POLISH (UI/UX Pro Max audit)
   The audit flagged two issues against the May 2026 site:
     1. Body contrast , HIGH severity (don't pair pale gray text on a
        pale gray surface; minimum readable color is #4b4b54 on #faf9f5)
     2. Line height , MEDIUM (body needs 1.5,1.75; section headers 1.2,1.3)
   This layer enforces both, plus reins in the visual-noise budget
   (extra borders, doubled shadows, marginal animation transforms).
   ════════════════════════════════════════════════════════════════════ */

/* Contrast lift: pull every "muted body text" surface from text-3 / text-4
   up toward text-2 (#4b4b54), which holds 7.5:1 contrast on #faf9f5. The
   eyebrow micro-labels keep their --text-3 because they read as metadata,
   not body. */
.expl-card p,
.expl-card li,
.expl-card .expl-card__desc,
.profile-section__body p,
.profile-section__body li,
.profile-section__body .expl-card__desc,
.profile-section__body .expl-tension-text {
  color: var(--text-2, #4b4b54);
  line-height: 1.6;
}

.profile-section__body p,
.profile-section__body li {
  font-size: 14px;
  letter-spacing: -0.004em;
  max-width: 70ch;
}
.profile-section__body p + p { margin-top: 12px; }

/* Section header rhythm , bigger subtitle so each section reads as a
   real "chapter" rather than a card label. */
.profile-section__sub {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text-1, #0b1120);
}
.profile-section__eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
.profile-section {
  margin-bottom: 56px;
}
.profile-section__head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.07);
}

/* Calm down inner-card visual chrome , too many doubled borders + nested
   backgrounds inside each section make the page feel busy. Inside a
   .profile-section the card chrome relaxes (transparent backgrounds,
   no border, the section header IS the framing). */
.profile-section__body .expl-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.profile-section__body .expl-card__label {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.profile-section__body .expl-card + .expl-card {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 17, 32, 0.05);
}

/* Context strip cards (Career stats / Portfolio / Injury) , uniform
   white-card chrome so the three-up grid reads as a single row. */
.profile-context > .savant-top-card,
.profile-context > .expl-card {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(11, 17, 32, 0.03);
}

/* Tables across cards , consistent rhythm + readable cell text */
.profile-section__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #4b4b54);
}
.profile-section__body table th {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(11, 17, 32, 0.10);
}
.profile-section__body table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.04);
}
.profile-section__body table tr:last-child td { border-bottom: 0; }

/* Skill Profile , bigger percentile rows so the section reads as the
   page focus, not buried supporting data. */
.profile-section .savant-pctile-row {
  margin-bottom: 7px;
  grid-template-columns: 124px minmax(0, 1fr) 50px;
  gap: 12px;
}
.profile-section .savant-pctile-row__label { font-size: 12.5px; }
.profile-section .savant-pctile-row__val   { font-size: 12.5px; }
.profile-section .savant-pctile-row__track { height: 9px; }
.profile-section .savant-pctile-section__label {
  font-size: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL FLOW , full-width, multi-column section bodies (May 2026)
   The flow container expanded from 920px → 1280px (matches dashboard
   width). The internal section bodies now lay out as horizontal grids
   so the page reads "across" instead of as a tall single column.
   Per user directive: NO TEXT IS HIDDEN. Advanced Model is now
   always-open; composite footnotes stay visible but quieter.
   ════════════════════════════════════════════════════════════════════ */

/* "What's driving this" (Fantasy Translation) , factor cards in 2 cols. */
.profile-section__body .expl-why-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-section__body .expl-why-list--quiet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.profile-section__body .expl-why-item {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 12px 14px;
}
.profile-section__body .expl-why-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(11, 17, 32, 0.08);
}
.profile-section__body .expl-why-more summary {
  font: 600 12px/1 "Geist", system-ui, sans-serif;
  color: var(--text-3, #98989f);
  cursor: pointer;
  margin-bottom: 10px;
}

/* "Where it could break" (Risk) , warnings in 3 cols on wide; 2 on med;
   1 on narrow. Each item is its own pill-style card. */
.profile-section__body .expl-tension-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-section__body .expl-tension-item {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.profile-section__body .expl-tension-item--med { border-left: 3px solid #d9a017; }
.profile-section__body .expl-tension-item--high { border-left: 3px solid #c44336; }
.profile-section__body .expl-tension-item--low { border-left: 3px solid #2d8b66; }
.profile-section__body .expl-tension-item--caveat { border-left: 3px solid #6b7280; }
.profile-section__body .expl-tension-sev {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11, 17, 32, 0.07);
  color: var(--text-2, #475569);
}
.profile-section__body .expl-tension-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #1f1f1f);
}

/* "What would change this" (Scenarios) , lever cards in 2 cols. */
.profile-section__body .expl-lever-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-section__body .expl-lever-item {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 12px 14px;
}

/* Trajectory + Comps , they each contain SVG/chart + list. Give them the
   full row width (single col) so the chart isn't squeezed. */
.profile-section__body #expl-trajectory,
.profile-section__body #expl-statcast-traj,
.profile-section__body #expl-history,
.profile-section__body #expl-similar {
  width: 100%;
}

/* Context strip , career stats / portfolio / injury already render as a
   3-up grid (via _profileContext). When they appear INSIDE a profile
   section body, lay them out side-by-side too. */
.profile-section__body > .savant-top-card { width: 100%; }
.profile-section__body > .savant-top-card + .expl-card { margin-top: 18px; }

/* ── Composite footnote , repeats once per card, quiet it everywhere
   except the very last instance in the flow. Hidden via opacity (not
   display:none) so screen readers still get the methodology link. */
.explainer-flow .expl-composite-note {
  font-size: 11px;
  color: var(--text-3, #98989f);
  margin-top: 14px;
  opacity: 0.55;
}
.explainer-flow .profile-section:not(:last-child) .expl-composite-note {
  display: none;
}

/* ── Advanced Model , the prospect-shadow + cascade nerd layer. Lots of
   nested key/value lists and driver tables; give them air and lay
   horizontal grids so the page reads "across" the full width. */
.profile-section--advanced .profile-section__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.profile-section--advanced .expl-shadow {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.profile-section--advanced .expl-shadow__section {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-12);
  padding: 14px 18px;
}
.profile-section--advanced .expl-shadow__h {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 12px;
}

/* Driver lists (model adjustments + value-layer adjustments) , 2-col grid
   with each driver as its own card. Currently uses .expl-shadow__drivers
   on a <ul> with <li class="expl-shadow__driver"> children. */
.profile-section--advanced .expl-shadow__drivers,
.profile-section--advanced .expl-shadow__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-section--advanced .expl-shadow__driver,
.profile-section--advanced .expl-shadow__uncert,
.profile-section--advanced .expl-shadow__integrity,
.profile-section--advanced .expl-shadow__missing {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-section--advanced .expl-shadow__driver-name,
.profile-section--advanced .expl-shadow__uncert-src,
.profile-section--advanced .expl-shadow__integrity-name,
.profile-section--advanced .expl-shadow__missing-name {
  font: 600 12px/1.2 "Geist", system-ui, sans-serif;
  color: var(--text-2, #475569);
}
.profile-section--advanced .expl-shadow__driver-contrib,
.profile-section--advanced .expl-shadow__uncert-pct,
.profile-section--advanced .expl-shadow__integrity-sev,
.profile-section--advanced .expl-shadow__missing-pen {
  font: 700 14px/1 "Geist", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.profile-section--advanced .expl-shadow__driver-why,
.profile-section--advanced .expl-shadow__uncert-why,
.profile-section--advanced .expl-shadow__integrity-why,
.profile-section--advanced .expl-shadow__missing-phase {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-3, #98989f);
}

/* Key/value table (Decomposed outputs, Career sample). Already grid via
   <dl>; just tighten the typography and zebra the rows. */
.profile-section--advanced .expl-shadow__kv {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 6px 18px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.profile-section--advanced .expl-shadow__kv dt {
  color: var(--text-3, #98989f);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.profile-section--advanced .expl-shadow__kv dd {
  margin: 0;
  color: var(--text, #1f1f1f);
}

/* "What this model doesn't know about X" , short caveat list. */
.profile-section--advanced .expl-dk-list,
.profile-section--advanced .expl-dontknow-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-section--advanced .expl-dk-list li,
.profile-section--advanced .expl-dontknow-list li {
  font-size: 13px;
  color: var(--text-2, #475569);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.profile-section--advanced .expl-dk-list li::before,
.profile-section--advanced .expl-dontknow-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--text-3, #98989f);
  font-weight: 600;
}

/* Cascade body , already wrapped in a <details> for further drill-down.
   Give the toggle some breathing room. */
.profile-section--advanced .expl-cascade-toggle {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font: 600 12px/1 "Geist", system-ui, sans-serif;
  color: var(--text-3, #98989f);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.profile-section--advanced .expl-cascade-body {
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   11-SECTION EDITORIAL FLOW (May 2026 v3 , full-width sections)
   The 2-col Projection/Pctile dashboard was retired in favor of
   sequential full-width sections: HERO → THESIS → SNAPSHOT → SKILL
   PROFILE → DRIVERS → RISK → SCENARIOS → MARKET → COMPS → CONTEXT →
   ADVANCED (collapsible). Each section uses the existing .profile-section
   chrome; below are overrides for the four new section variants.
   ════════════════════════════════════════════════════════════════════ */

/* FANTASY THESIS , large readable callout, no inner card chrome. The
   one-liner is the entire body, displayed with generous line-height and
   a slightly larger type size to read as the "headline takeaway". */
.profile-section--thesis .profile-section__body { padding: 0; }
.profile-section--thesis .expl-thesis {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
.profile-section--thesis .expl-thesis-text {
  margin: 0;
  font: 500 18px/1.5 "Geist", system-ui, sans-serif;
  letter-spacing: -0.012em;
  color: var(--text, #1f1f1f);
  max-width: 880px;
}
.profile-section--thesis .expl-thesis-text strong {
  font-weight: 700;
  color: var(--brand, #4170c2);
}

/* ════════════════════════════════════════════════════════════════════
   MULTIVARIABLE ANALYSIS , decomposes the projection into every
   contributing variable + interaction effect with the explicit formula.
   ════════════════════════════════════════════════════════════════════ */
.profile-section--multivar .profile-section__body { padding: 0; }

/* Formula block */
.multivar-formula {
  background: linear-gradient(180deg, rgba(65, 112, 194, 0.07), rgba(65, 112, 194, 0.02));
  border: 1px solid rgba(65, 112, 194, 0.20);
  border-radius: var(--r-14);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.multivar-formula__head {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand, #4170c2);
  margin-bottom: 10px;
}
.multivar-formula__expr {
  font-family: "JetBrains Mono", "SF Mono", "Menlo", monospace;
  font-size: 13px;
  color: var(--text-1, #0b1120);
  background: rgba(255, 255, 255, 0.7);
  padding: 10px 14px;
  border-radius: var(--r-8);
  margin-bottom: 12px;
  overflow-x: auto;
}
.multivar-formula__expr code { background: none; padding: 0; }
.multivar-formula__example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.multivar-formula__num {
  font-weight: 700;
  font-size: 22px;
  color: var(--text-1, #0b1120);
}
.multivar-formula__num--final {
  color: var(--brand, #4170c2);
  font-size: 26px;
}
.multivar-formula__op {
  color: var(--text-3, #98989f);
  font-weight: 600;
}
.multivar-formula__factor {
  color: var(--text-2, #475569);
  font-size: 13px;
  padding: 2px 8px;
  background: rgba(11, 17, 32, 0.04);
  border-radius: var(--r-6);
}

/* Headline strip (4-up: base, multiplier impact, interaction, final) */
.multivar-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .multivar-strip { grid-template-columns: repeat(2, 1fr); }
}
.multivar-strip__cell {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-10);
  padding: 12px 14px;
}
.multivar-strip__cell--final {
  background: linear-gradient(180deg, rgba(65, 112, 194, 0.10), rgba(65, 112, 194, 0.03));
  border-color: rgba(65, 112, 194, 0.25);
}
.multivar-strip__l {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 6px;
}
.multivar-strip__v {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--text-1, #0b1120);
}
.multivar-strip__v--final { color: var(--brand, #4170c2); font-size: 26px; }
.multivar-strip__sub {
  font-size: 11px;
  color: var(--text-3, #98989f);
  margin-top: 2px;
}

/* Per-category breakdown */
.multivar-breakdown {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.multivar-breakdown__head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}
.multivar-cat {
  margin-bottom: 16px;
}
.multivar-cat:last-child { margin-bottom: 0; }
.multivar-cat__head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.multivar-cat__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each variable row in the breakdown table , now 4 columns (label,
   multiplier value, % change, study link); fpts-delta column dropped
   to remove implied additive precision. */
.multivar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 80px 24px;
  gap: 12px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.04);
  border-radius: var(--r-8);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.multivar-row__label {
  color: var(--text-1, #0b1120);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multivar-row__value {
  color: var(--text-3, #98989f);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 11.5px;
  text-align: right;
}
.multivar-row__pct {
  text-align: right;
  font-weight: 600;
  font-size: 12px;
}
.multivar-row__delta {
  text-align: right;
  font-weight: 700;
  font-size: 12.5px;
}
.multivar-row__study a {
  color: var(--brand, #4170c2);
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.multivar-row__study a:hover { color: #2a4d8a; }

@media (max-width: 720px) {
  .multivar-row {
    grid-template-columns: 1fr 60px 60px 24px;
    gap: 8px;
  }
  .multivar-row__value { display: none; }
}

.multivar-footnote {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 17, 32, 0.06);
  line-height: 1.5;
}
.multivar-footnote b {
  color: var(--brand, #4170c2);
  font-weight: 600;
}

/* ── PROJECTION ATTRIBUTION (v10 , backtest-calibrated approximator) ──
   Ridge regression model fits per-archetype against the cascade engine's
   actual projections. Surfaces actual vs approximation vs R² vs per-feature
   drivers vs residual explanation. Honest about non-linear gap. */
.attr-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.attr-card {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 16px 18px;
}
.attr-card--actual {
  background: linear-gradient(180deg, rgba(65, 112, 194, 0.12), rgba(65, 112, 194, 0.03));
  border-color: rgba(65, 112, 194, 0.30);
  border-left: 4px solid var(--brand, #4170c2);
}
.attr-card--approx {
  background: linear-gradient(180deg, rgba(26, 135, 84, 0.07), rgba(26, 135, 84, 0.02));
  border-color: rgba(26, 135, 84, 0.20);
  border-left: 4px solid #1a8754;
}
.attr-card--dynasty {
  background: linear-gradient(180deg, rgba(154, 99, 0, 0.07), rgba(154, 99, 0, 0.02));
  border-color: rgba(154, 99, 0, 0.20);
  border-left: 4px solid #9a6300;
}
/* Tier tag: distinguishes Truth (cascade) from Interpretation (approx) */
.attr-card__tier {
  display: inline-block;
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.attr-card--actual .attr-card__tier {
  background: var(--brand, #4170c2);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(65, 112, 194, 0.30);
}
.attr-card--approx .attr-card__tier {
  background: rgba(26, 135, 84, 0.15);
  color: #1a8754;
  border: 1px solid rgba(26, 135, 84, 0.30);
}
.attr-card--dynasty .attr-card__tier {
  background: rgba(154, 99, 0, 0.15);
  color: #9a6300;
  border: 1px solid rgba(154, 99, 0, 0.30);
}
.attr-card__label {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2, #475569);
  margin-bottom: 8px;
}
.attr-card__value {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-1, #0b1120);
  margin-bottom: 6px;
}
.attr-card__unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3, #98989f);
  margin-left: 4px;
}
.attr-card__sub {
  font-size: 12.5px;
  color: var(--text-2, #475569);
}
.attr-card__metric {
  display: inline-block;
  margin-right: 6px;
}
.attr-card__metric b { color: var(--text-1, #0b1120); }
.attr-card__note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  font-style: italic;
}

/* Top drivers / constraints pair */
.attr-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) { .attr-pair { grid-template-columns: 1fr; } }
.attr-pane {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 14px 16px;
}
.attr-pane--pos { border-left: 3px solid #1a8754; }
.attr-pane--neg { border-left: 3px solid #c00; }
.attr-pane__label {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1, #0b1120);
  margin-bottom: 4px;
}
.attr-pane__sub {
  font-size: 11px;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.attr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.attr-li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 70px 80px;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.04);
  border-radius: 7px;
  font-size: 12.5px;
}
.attr-li__arrow {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}
.attr-li--pos .attr-li__arrow { color: #1a8754; }
.attr-li--neg .attr-li__arrow { color: #c00; }
.attr-li__name {
  color: var(--text-1, #0b1120);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attr-li__value {
  text-align: right;
  color: var(--text-3, #98989f);
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 11px;
}
.attr-li__contrib {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.attr-li__empty {
  font-size: 12px;
  color: var(--text-3, #98989f);
  font-style: italic;
  padding: 8px 10px;
  background: none;
  border: 0;
}

/* Residual Classification , categorizes the gap per player */
.attr-residual-class {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.08);
  border-left: 4px solid #1a6fb8;
  border-radius: var(--r-12);
  padding: 14px 16px;
}
.attr-residual-class__head {
  margin-bottom: 10px;
}
.attr-residual-class__eyebrow {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 4px;
}
.attr-residual-class__label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.attr-residual-class__label {
  font: 700 17px/1.2 "Geist", system-ui, sans-serif;
  letter-spacing: -0.012em;
}
.attr-residual-class__confidence {
  display: inline-block;
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Probabilistic composition bars */
.attr-comp {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
}
.attr-comp__head {
  font: 700 9.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.attr-comp__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attr-comp__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.attr-comp__label {
  color: var(--text-1, #0b1120);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attr-comp__track {
  position: relative;
  height: 8px;
  background: rgba(11, 17, 32, 0.06);
  border-radius: var(--r-4);
  overflow: hidden;
}
.attr-comp__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: var(--r-4);
  transition: width 320ms ease;
}
.attr-comp__pct {
  text-align: right;
  color: var(--text-2, #475569);
  font-weight: 700;
}
@media (max-width: 720px) {
  .attr-comp__row { grid-template-columns: 130px 1fr 40px; }
}
.attr-residual-class__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2, #475569);
  margin: 0 0 10px;
}
.attr-residual-class__desc b { color: var(--text-1, #0b1120); }
.attr-residual-class__sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attr-residual-class__sources li {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2, #475569);
  padding: 4px 10px 4px 22px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.04);
  border-radius: var(--r-6);
  position: relative;
}
.attr-residual-class__sources li::before {
  content: '›';
  position: absolute;
  left: 10px;
  color: var(--text-3, #98989f);
  font-weight: 600;
}

/* Residual explanation */
.attr-residual {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-12);
  padding: 14px 16px;
}
.attr-residual__head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.attr-residual__body {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2, #475569);
  margin: 0;
}
.attr-residual__body b { color: var(--text-1, #0b1120); }

/* Supplement header (divider between Attribution + legacy Signal Map) */
.attr-supplement-head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 8px 0 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(11, 17, 32, 0.10);
}

/* ── PROJECTION SIGNAL MAP (v2 , kills precision theater) ───────────
   Honest 2-layer structure: real audit-grounded multipliers + qualitative
   signal-influence panels (positives / constraints / interactions). No
   fake additive math; the cascade engine\'s actual projPoints is shown
   at the top so users always see the true number first. */

/* Core projection header (the truthful number, shown first) */
.signal-core {
  background: linear-gradient(180deg, rgba(65, 112, 194, 0.08), rgba(65, 112, 194, 0.02));
  border: 1px solid rgba(65, 112, 194, 0.18);
  border-radius: var(--r-12);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.signal-core__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.signal-core__label {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand, #4170c2);
}
.signal-core__value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand, #4170c2);
  letter-spacing: -0.02em;
}
.signal-core__unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3, #98989f);
  margin-left: 4px;
}
.signal-core__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2, #475569);
}
.signal-core__note b {
  color: var(--text-1, #0b1120);
  font-weight: 600;
}

/* Signal pair: Positive + Constraints side-by-side */
.signal-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .signal-pair { grid-template-columns: 1fr; }
}
.signal-pane {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 14px 16px;
}
.signal-pane--pos { border-left: 3px solid #22a045; }
.signal-pane--neg { border-left: 3px solid #c1342e; }
.signal-pane__head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1, #0b1120);
  margin-bottom: 4px;
}
.signal-pane__sub {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  margin-bottom: 12px;
}
.signal-pane__empty {
  font-size: 12.5px;
  color: var(--text-3, #98989f);
  font-style: italic;
}

/* Signal list , used for positives, constraints, interactions */
.signal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signal-list--full { /* full-width interactions list */ }
.signal-li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.04);
  border-radius: 7px;
  font-size: 12.5px;
}
.signal-li__arrow {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 1;
}
.signal-li__label {
  color: var(--text-1, #0b1120);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signal-li__chip {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.signal-li__raw {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", "SF Mono", monospace;
}
.signal-li__study {
  color: var(--brand, #4170c2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Interaction-effects block (full-width below the pair) */
.signal-interactions {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-12);
  padding: 14px 16px;
  margin-bottom: 14px;
  border-left: 3px solid var(--brand, #4170c2);
}
.signal-interactions__head {
  font: 700 10.5px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1, #0b1120);
  margin-bottom: 4px;
}
.signal-interactions__sub {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  margin-bottom: 12px;
}

/* PROJECTION SNAPSHOT , the big-number figure goes on the LEFT (taking
   ~40%) with the 4 stat cards in a 2×2 on the RIGHT; the distribution
   bar spans full width underneath. Reads like a stat-line dashboard. */
.profile-section--snapshot .profile-section__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.profile-section--snapshot .expl-card--headline {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.profile-section--snapshot .expl-headline-figure {
  display: contents;             /* dissolve the wrapper so children land in the outer grid */
}
.profile-section--snapshot .expl-headline-figure__num-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0.04), rgba(11, 17, 32, 0.018));
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-14);
}
.profile-section--snapshot .expl-headline-num {
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.profile-section--snapshot .expl-headline-band {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2, #475569);
  background: rgba(11, 17, 32, 0.05);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profile-section--snapshot .expl-headline-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.profile-section--snapshot .expl-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-10);
}
.profile-section--snapshot .expl-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, #9a9690);
  font-weight: 700;
  white-space: nowrap;
}
.profile-section--snapshot .expl-stat-v {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #1f1f1f);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
/* Outcome-range distribution bar , full width below the figure */
.profile-section--snapshot #expl-distribution {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-12);
  padding: 10px 16px;
  margin: 0;
  box-shadow: none;
}
.profile-section--snapshot .expl-dist-summary {
  font-size: 12.5px;
  margin-top: 6px;
}
.profile-section--snapshot .profile-section__body {
  gap: 14px;
}
@media (max-width: 760px) {
  .profile-section--snapshot .expl-card--headline {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profile-section--snapshot .expl-headline-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-section--snapshot .expl-headline-num { font-size: 52px; }
}

/* SKILL PROFILE , percentile rankings. Now full-width, so we can fit 3
   columns of sections. Renderer still emits the hand-balanced 2-col
   wrappers (.savant-pctile-col), but here we treat sections as the unit
   and let them auto-flow. */
.profile-section--skill .profile-section__body {
  padding: 0;
}
.profile-section--skill .pctile-card-standalone {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.profile-section--skill .pctile-card-standalone__head { display: none; }
/* Override: in this full-width context the hand-split 2-col wrapper is
   fine but we want a denser 3-col grid layout overall. Display the
   .savant-pctile-col contents inline so individual sections can flow. */
.profile-section--skill .pctile-card-standalone__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 28px;
  margin-top: 0;
  align-items: start;
}
.profile-section--skill .savant-pctile-col {
  display: contents;              /* let sections land directly in the grid */
}
.profile-section--skill .savant-pctile-section {
  margin: 0;
  padding: 0;
}
.profile-section--skill .savant-pctile-section__label {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}
.profile-section--skill .savant-pctile-row {
  margin-bottom: 3px;
  grid-template-columns: 100px minmax(0, 1fr) 42px;
  gap: 10px;
  font-size: 11.5px;
}
.profile-section--skill .savant-pctile-row__label { font-size: 11.5px; }
.profile-section--skill .savant-pctile-row__val   { font-size: 11.5px; }
.profile-section--skill .savant-pctile-row__track { height: 7px; }
.profile-section--skill .savant-pctile-row__bubble {
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 9.5px;
}
.profile-section--skill .savant-pctile-section { margin: 0 0 4px; }
.profile-section--skill .savant-pctile-section__label {
  font-size: 9.5px;
  margin: 0 0 5px;
  padding-bottom: 4px;
}
/* Tighten the 3-col grid: skill profile is the section-density bottleneck.
   Smaller row-gap and column-gap fit the column heights into less vertical
   space, letting both sections stay above the fold at 1440x900. */
.profile-section--skill .pctile-card-standalone__body {
  gap: 6px 22px;
}
@media (max-width: 1024px) {
  .profile-section--skill .pctile-card-standalone__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .profile-section--skill .pctile-card-standalone__body {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PER-INJURY ARTICLES (Research Lab → Injury Fantasy Impact)
   Each of the 55 injury types gets a self-contained article card with
   narrative, horizon chips, hitter/pitcher split, days-out + month
   histograms, full case table, and redraft/dynasty takeaways. The TOC
   at the top of the section lets readers jump straight to an injury.
   ════════════════════════════════════════════════════════════════════ */
.injury-toc {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-12);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.injury-toc__head {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.injury-toc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.injury-toc__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-6);
  color: var(--text, #1f1f1f);
  text-decoration: none;
  font-size: 12.5px;
  border-left: 2px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.injury-toc__link:hover {
  background: rgba(11, 17, 32, 0.04);
  border-left-color: var(--brand, #4170c2);
}
.injury-toc__link[data-curve="time-out only"]         { border-left-color: #1a8754; }
.injury-toc__link[data-curve="one-year drag"]         { border-left-color: #9a6300; }
.injury-toc__link[data-curve="two-year drag"]         { border-left-color: #a8520f; }
.injury-toc__link[data-curve="three-year drag"]       { border-left-color: #a82a1c; }
.injury-toc__link[data-curve="career-altering"]       { border-left-color: #7e1c14; }
.injury-toc__link[data-curve="persistent depression"] { border-left-color: #7e2b22; }
.injury-toc__n {
  font-size: 10.5px;
  color: var(--text-3, #98989f);
  font-variant-numeric: tabular-nums;
}

.injury-articles {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.injury-art {
  background: #ffffff;
  border: 1px solid rgba(11, 17, 32, 0.07);
  border-radius: var(--r-14);
  padding: 22px 24px;
  scroll-margin-top: 90px;
}
.injury-art__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.07);
  margin-bottom: 16px;
}
.injury-art__title {
  font: 700 20px/1.2 "Geist", system-ui, sans-serif;
  letter-spacing: -0.012em;
  color: var(--text-1, #0b1120);
}
.injury-art__meta {
  font-size: 11.5px;
  color: var(--text-3, #98989f);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* HORIZON CHIPS , the 4-up rail of short/Y+1/Y+2/Y+3 deltas */
.injury-art__horizons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.injury-art__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
}
.injury-art__chip--empty { opacity: 0.45; }
.injury-art__chip-l {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted, #9a9690);
  font-weight: 700;
  display: flex;
  gap: 5px;
  align-items: baseline;
}
.injury-art__chip-n {
  font-size: 10px;
  color: var(--text-3, #98989f);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.injury-art__chip-v {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* NARRATIVE PARAGRAPHS */
.injury-art__lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2, #475569);
  margin: 0 0 10px;
}
.injury-art__lede b {
  color: var(--text-1, #0b1120);
  font-weight: 700;
}
.injury-art__lede:last-of-type { margin-bottom: 18px; }

/* HITTER vs PITCHER SPLIT */
.injury-art__kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .injury-art__kinds { grid-template-columns: 1fr; }
}
.injury-art__kind {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 12px 14px;
}
.injury-art__kind-h {
  font: 700 11px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, #475569);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
}
.injury-art__kind-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.injury-art__kind-row span { color: var(--text-3, #98989f); }

/* HISTOGRAMS (days-out + month) */
.injury-art__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .injury-art__charts { grid-template-columns: 1fr; }
}
.injury-art__hist {
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 12px 14px;
}
.injury-art__hist-head {
  font: 700 10px/1 "Geist", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #98989f);
  margin-bottom: 10px;
}
.injury-art__hist-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.injury-art__hist-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.injury-art__hist-label { color: var(--text-3, #98989f); }
.injury-art__hist-bar {
  position: relative;
  height: 8px;
  background: rgba(11, 17, 32, 0.05);
  border-radius: var(--r-4);
  overflow: hidden;
}
.injury-art__hist-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #c87b3e, #a82a1c);
  border-radius: var(--r-4);
}
.injury-art__hist-n {
  text-align: right;
  color: var(--text-2, #475569);
  font-weight: 600;
}

/* CASE TABLE , uses the standard study table styles */
.injury-art__cases {
  margin-bottom: 16px;
  border: 1px solid rgba(11, 17, 32, 0.06);
  border-radius: var(--r-10);
  padding: 0;
  overflow: hidden;
}
.injury-art__cases-head {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font: 600 12px/1 "Geist", system-ui, sans-serif;
  color: var(--text-2, #475569);
  letter-spacing: 0.02em;
  background: var(--surface-1, #fafbfc);
  border-bottom: 1px solid rgba(11, 17, 32, 0.06);
  position: relative;
}
.injury-art__cases-head::-webkit-details-marker { display: none; }
.injury-art__cases-head::after {
  content: '▾';
  position: absolute;
  right: 14px;
  color: var(--text-3, #98989f);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.injury-art__cases[open] .injury-art__cases-head::after { transform: rotate(-180deg); }
.injury-art__cases table { margin: 0; }
.injury-art__cases > table,
.injury-art__cases > div {
  padding: 8px 14px 14px;
}

/* TAKEAWAY BOX , redraft + dynasty implications */
.injury-art__takeaway {
  background: linear-gradient(180deg, rgba(65, 112, 194, 0.05), rgba(65, 112, 194, 0.02));
  border: 1px solid rgba(65, 112, 194, 0.18);
  border-radius: var(--r-10);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.injury-art__takeaway-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.injury-art__takeaway-l {
  font: 700 10.5px/1.4 "Geist", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand, #4170c2);
  padding-top: 1px;
}
.injury-art__takeaway-v { color: var(--text, #1f1f1f); }

/* Responsive: collapse multi-col grids on narrower viewports. */
@media (max-width: 1024px) {
  .profile-section__body .expl-tension-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .profile-section__body .expl-why-list,
  .profile-section__body .expl-why-list--quiet,
  .profile-section__body .expl-tension-list,
  .profile-section__body .expl-lever-list,
  .profile-section--advanced .expl-shadow__drivers,
  .profile-section--advanced .expl-shadow__list,
  .profile-section--advanced .expl-dk-list,
  .profile-section--advanced .expl-dontknow-list {
    grid-template-columns: 1fr;
  }
}

/* Strip the residual hover-fidget transforms that survive elsewhere in
   the codebase , they're nervy at the editorial scale we're now at. */
.profile-section .expl-card:hover,
.profile-section .profile-context .expl-card:hover,
.profile-section__body section:hover {
  transform: none !important;
  box-shadow: inherit;
}

/* Collapsed Advanced Model summary gets a subtle button look so the user
   knows it's interactive. */
.profile-section--advanced .profile-section__head--summary {
  padding: 14px 18px;
  border: 1px solid rgba(11, 17, 32, 0.08);
  border-radius: var(--r-10);
  background: #ffffff;
  transition: background 140ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.profile-section--advanced .profile-section__head--summary:hover {
  border-color: rgba(11, 17, 32, 0.16);
  background: #fafbfc;
}
.profile-section--advanced .profile-section__details[open] .profile-section__head--summary {
  background: #fafbfc;
}
.profile-section--advanced .profile-section__body {
  margin-top: 18px;
  padding-top: 4px;
}

/* Mobile breakpoint */
@media (max-width: 760px) {
  .explainer-flow { max-width: 100%; padding: 0 4px; }
  .profile-section { margin-bottom: 40px; }
  .profile-section__sub { font-size: 16px; }
  .profile-section__body table { font-size: 12.5px; }
}

/* ============================================================ */
/* QA pass: trust tier badges, freshness stamp, filter chips,   */
/* search input, supplementary detail wrappers                  */
/* ============================================================ */

/* Trust tier badge , used on study cards + study headers */
.study-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
.study-tier-badge--small {
  font-size: 10px;
  padding: 1.5px 5px;
  letter-spacing: 0.04em;
}

/* Freshness stamp , top-right of pages w/ data dependencies */
.lab-freshness {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--r-16);
  font-size: 11.5px;
  color: var(--text-2, #6b6b75);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.lab-freshness b {
  color: var(--text-1, #1a1a1f);
  font-weight: 600;
}
.lab-freshness__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}

/* Filter/search controls bar */
.lab-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.lab-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--r-14);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2, #6b6b75);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  font-family: inherit;
  line-height: 1.4;
}
.lab-chip:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-1, #1a1a1f);
}
.lab-chip.is-active {
  background: var(--text-1, #1a1a1f);
  border-color: var(--text-1, #1a1a1f);
  color: #fff;
}
.lab-chip.is-active:hover {
  background: var(--text-1, #1a1a1f);
  color: #fff;
}
.lab-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-8);
  background: rgba(15, 23, 42, 0.08);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #6b6b75);
  line-height: 1;
}
.lab-chip.is-active .lab-chip__count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Search input */
.lab-search {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  padding: 6px 11px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--r-14);
  font-size: 12px;
  font-family: inherit;
  color: var(--text-1, #1a1a1f);
  outline: none;
  transition: background 120ms ease, border-color 120ms ease;
  line-height: 1.4;
}
.lab-search:hover {
  background: rgba(15, 23, 42, 0.055);
}
.lab-search:focus {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.18);
}
.lab-search::placeholder {
  color: var(--text-3, #98989f);
}

/* Supplementary detail wrapper (collapsed-by-default) , for Signal Map etc */
.attr-supplement-wrap {
  margin-top: 14px;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
  padding-top: 12px;
}
.attr-supplement-head {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2, #6b6b75);
  letter-spacing: 0.02em;
  user-select: none;
  list-style: none;
  padding: 6px 0;
  transition: color 120ms ease;
}
.attr-supplement-head:hover {
  color: var(--text-1, #1a1a1f);
}
.attr-supplement-head::-webkit-details-marker {
  display: none;
}
.attr-supplement-wrap[open] > .attr-supplement-head {
  color: var(--text-1, #1a1a1f);
  margin-bottom: 8px;
}

/* Mobile breakpoint for QA elements */
@media (max-width: 760px) {
  .lab-controls { gap: 8px; }
  .lab-search { width: 100%; max-width: 100%; }
  .lab-chip { font-size: 11.5px; padding: 4px 9px; }
  .lab-freshness { font-size: 11px; padding: 5px 9px; }
}

/* Glossary table styling , readable two-column layout */
.glossary-table { font-size: 13px; }
.glossary-table th, .glossary-table td {
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.glossary-term {
  font-weight: 700;
  color: var(--text-1, #1a1a1f);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 12.5px;
  white-space: nowrap;
}
.glossary-def {
  color: var(--text-2, #6b6b75);
  line-height: 1.55;
}
.glossary-table tr:hover {
  background: rgba(15, 23, 42, 0.02);
}
@media (max-width: 760px) {
  .glossary-table { font-size: 12.5px; }
  .glossary-table th, .glossary-table td { padding: 8px 8px; }
  .glossary-term { font-size: 11.5px; white-space: normal; }
}

/* Hero quickmap , 4-tile 10-second comprehension strip under CTAs */
.hero__quickmap {
  list-style: none;
  padding: 0;
  /* Expand across the page and align the left edge with the home-surfaces
     section eyebrow / title (also max-width: 1080px, margin: 0 auto). */
  margin: 28px auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hero__quickmap li { margin: 0; }
.hero__quickmap a {
  display: flex;
  flex-direction: column;
  /* More generous padding now that the tiles span the full row. */
  gap: 4px;
  padding: 18px 20px;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--r-12);
  text-decoration: none;
  color: var(--text-1, #1a1a1f);
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.hero__quickmap a:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.hero__quickmap a b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.hero__quickmap a span {
  font-size: 12.5px;
  color: var(--text-2, #6b6b75);
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .hero__quickmap {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    padding: 0 12px;
  }
  .hero__quickmap a { padding: 9px 10px; }
}

/* ============================================================ */
/* Mobile safety net , dense tables should never overflow viewport. */
/* Wraps tables in overflow:auto containers so they scroll-x       */
/* horizontally instead of pushing the layout sideways.            */
/* ============================================================ */
@media (max-width: 760px) {
  .meth-article,
  .study-article,
  .lab-card,
  .profile-section__body,
  .glossary-table,
  .meth-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Studies grid: single column on phones */
  .lab-cat-group > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Methodology workspace: tighter padding so content uses the width */
  .methodology-workspace {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .methodology-ws__title { font-size: 22px !important; }
  /* Long horizontal nav strips on mobile , wrap rather than overflow */
  .methodology-ws__tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Research Lab category cards stack vertically with full width */
  .studies-card {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PROJECTIONS - FILTER / EXPORT BAR
   Used by Season / ROS / Daily / Weekly projection sub-routes.
   ───────────────────────────────────────────────────────────────────── */
.proj-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface-1, #fafbfc);
  border: 1px solid rgba(11, 17, 32, 0.08);
  border-radius: var(--r-10);
  font-size: 13px;
  color: var(--text-1, #0b1120);
}
.proj-bar__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.proj-bar__group--search {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
}
.proj-bar__group--right {
  margin-left: auto;
  gap: 10px;
}
.proj-bar__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3, #6b7280);
  pointer-events: none;
}
.proj-bar__search {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid rgba(11, 17, 32, 0.14);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.proj-bar__search:focus {
  border-color: rgba(58, 111, 247, 0.55);
  box-shadow: 0 0 0 3px rgba(58, 111, 247, 0.12);
}
.proj-bar__lbl {
  color: var(--text-3, #6b7280);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.proj-bar__sel {
  padding: 6px 26px 6px 10px;
  border: 1px solid rgba(11, 17, 32, 0.14);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
                    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.proj-bar__sel:focus {
  border-color: rgba(58, 111, 247, 0.55);
  box-shadow: 0 0 0 3px rgba(58, 111, 247, 0.12);
}
.proj-bar__count {
  color: var(--text-3, #6b7280);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}
.proj-bar__btn {
  padding: 7px 12px;
  border: 1px solid rgba(11, 17, 32, 0.14);
  border-radius: 7px;
  background: #fff;
  color: var(--text-1, #0b1120);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.proj-bar__btn:hover {
  background: var(--surface-2, #f1f3f7);
  border-color: rgba(11, 17, 32, 0.22);
}
.proj-bar__btn:active { transform: translateY(1px); }
.proj-bar__btn--primary {
  background: var(--text-1, #0b1120);
  color: #fff;
  border-color: var(--text-1, #0b1120);
}
.proj-bar__btn--primary:hover {
  background: #1a2233;
  border-color: #1a2233;
}

@media (max-width: 720px) {
  .proj-bar { gap: 8px; padding: 10px; }
  .proj-bar__group--right { margin-left: 0; width: 100%; justify-content: flex-end; }
  .proj-bar__group--search { flex-basis: 100%; }
}
/* ════════════════════════════════════════════════════════════════════
   CONNECTED FANTASY TEAMS
   Append to the end of styles.css. Contains: nav button + popover,
   connect modal (Sleeper steps), draft/ops synced banner, Lineup Coach.
   ════════════════════════════════════════════════════════════════════ */

/* ── Nav button + popover ─────────────────────────────────────────── */
.my-teams-wrap { position: relative; display: flex; align-items: center; }
.my-teams-btn { position: relative; }
.my-teams-btn[aria-expanded="true"] {
  color: var(--text, #1f1f1f);
  background: rgba(15, 23, 42, 0.06);
}
.my-teams-btn__badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px;
  background: #1e6fb8; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 14px;
  text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
}

.my-teams-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--r-10);
  box-shadow: 0 16px 40px rgba(11, 17, 32, 0.18);
  z-index: 15000;
  overflow: hidden;
}
.my-teams-menu[hidden] { display: none; }
.my-teams-menu__header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
}
.my-teams-menu__title {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--text, #0b1120);
  letter-spacing: -0.005em;
}
.my-teams-menu__sub {
  display: block;
  margin-top: 2px;
  font-size: 11px; color: var(--text-3, #6b7280);
}
.my-teams-menu__list { max-height: 50vh; overflow-y: auto; }
.my-teams-menu__list:empty { display: none; }

.my-team-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-column-gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline, #f1f1f1);
  cursor: pointer;
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  width: 100%;
  text-align: left;
}
.my-team-item:last-child { border-bottom: none; }
.my-team-item:hover { background: rgba(15, 23, 42, 0.03); }
.my-team-item.is-active { background: rgba(30, 111, 184, 0.07); }
.my-team-item__radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3, #cbd5e1);
  position: relative;
}
.my-team-item.is-active .my-team-item__radio { border-color: #1e6fb8; }
.my-team-item.is-active .my-team-item__radio::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: #1e6fb8;
}
.my-team-item__body { min-width: 0; }
.my-team-item__name {
  font-size: 13px; font-weight: 600;
  color: var(--text, #0b1120);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.my-team-item__meta {
  display: flex; gap: 6px; align-items: center;
  margin-top: 2px;
  font-size: 11px; color: var(--text-3, #6b7280);
}
.my-team-item__platform {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--r-3);
  background: #f3f0ea; color: #6b6048;
}
.my-team-item__platform--sleeper { background: #efe9ff; color: #5a3fc4; }
.my-team-item__platform--espn { background: #fde7e7; color: #b32128; }
.my-team-item__platform--yahoo { background: #ede0ff; color: #5f239f; }
.my-team-item__actions { display: flex; gap: 2px; }
.my-team-item__action {
  width: 26px; height: 26px;
  border: none; background: transparent;
  border-radius: 5px;
  color: var(--text-3, #8a8680);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.my-team-item__action:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text, #1f1f1f);
}
.my-team-item__action.is-spinning svg { animation: my-teams-spin 0.9s linear infinite; }
@keyframes my-teams-spin { to { transform: rotate(360deg); } }

.my-teams-menu__footer {
  padding: 8px 10px;
  border-top: 1px solid var(--hairline, #e5e7eb);
  background: #fafafa;
}
.my-teams-menu__connect-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed var(--hairline, #d4d4d4);
  border-radius: var(--r-6);
  color: var(--text-2, #4b5563);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.my-teams-menu__connect-btn:hover {
  border-color: #1e6fb8;
  color: #1e6fb8;
  background: rgba(30, 111, 184, 0.04);
}
.my-teams-menu__empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3, #6b7280);
}

/* ── Connect Team modal ───────────────────────────────────────────── */
.connect-modal {
  position: fixed;
  top: var(--nav-h, 0); right: 0; bottom: 0; left: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.connect-modal[hidden] { display: none; }
.connect-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 17, 32, 0.5);
  backdrop-filter: blur(2px);
}
.connect-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-14);
  box-shadow: 0 24px 60px rgba(11, 17, 32, 0.28);
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
}
.connect-modal__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #6b7280;
  cursor: pointer;
  border-radius: var(--r-6);
  line-height: 1;
}
.connect-modal__close:hover { background: rgba(11, 17, 32, 0.05); color: #0b1120; }

.connect-modal__header { margin-bottom: 18px; }
.connect-modal__title {
  margin: 0 0 4px;
  font-size: 19px; font-weight: 700;
  color: #0b1120;
  letter-spacing: -0.015em;
}
.connect-modal__sub {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-3, #6b7280);
  max-width: 460px;
}

.connect-modal__platforms {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.connect-platform {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 8px 12px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.connect-platform:hover { background: rgba(15, 23, 42, 0.03); }
.connect-platform.is-active {
  border-bottom-color: #1e6fb8;
  color: #1e6fb8;
}
.connect-platform__name { font-size: 13px; font-weight: 600; color: inherit; }
.connect-platform.is-active .connect-platform__name { color: #1e6fb8; }
.connect-platform__status {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3, #9ca3af);
}
.connect-platform__status--ok { color: #2f8f4a; }

.connect-pane { display: none; }
.connect-pane.is-active { display: block; }

.connect-steps {
  display: flex; gap: 24px;
  list-style: none; padding: 0; margin: 0 0 18px;
}
.connect-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3, #9ca3af);
  position: relative;
}
.connect-step:not(:last-child)::after {
  content: ""; position: absolute;
  width: 20px; height: 1px;
  background: var(--hairline, #e5e7eb);
  right: -22px; top: 50%;
}
.connect-step__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f1f1f1;
  color: var(--text-3, #9ca3af);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.connect-step.is-active .connect-step__dot { background: #1e6fb8; color: #fff; }
.connect-step.is-active { color: #0b1120; font-weight: 600; }
.connect-step.is-done .connect-step__dot { background: #2f8f4a; color: #fff; }
.connect-step.is-done { color: var(--text-2, #4b5563); }

.connect-step-pane { display: none; }
.connect-step-pane.is-active { display: block; }

.connect-field { display: block; margin-bottom: 14px; }
.connect-field--inline {
  display: inline-flex; flex-direction: column;
  margin-right: 10px;
  max-width: 140px;
}
.connect-field__label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--text-2, #4b5563);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.connect-field__input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--hairline, #d4d4d4);
  border-radius: 7px;
  background: #fff;
  color: var(--text, #0b1120);
  font-family: inherit;
}
.connect-field__input:focus {
  outline: none;
  border-color: #1e6fb8;
  box-shadow: 0 0 0 3px rgba(30, 111, 184, 0.15);
}
.connect-field__input--narrow { max-width: 140px; }
.connect-field__hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-3, #6b7280);
  line-height: 1.45;
}

.connect-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px;
}
.connect-btn {
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.connect-btn--primary { background: #1e6fb8; color: #fff; border-color: #1e6fb8; }
.connect-btn--primary:hover:not(:disabled) { background: #185a96; border-color: #185a96; }
.connect-btn--primary:disabled {
  background: #cbd5e1; border-color: #cbd5e1;
  cursor: not-allowed;
}
.connect-btn--ghost {
  background: transparent; color: var(--text-2, #4b5563);
  border-color: var(--hairline, #e5e7eb);
}
.connect-btn--ghost:hover { background: rgba(15, 23, 42, 0.04); }

.connect-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-6);
  color: #b91c1c;
  font-size: 12px;
}

.connect-userchip, .connect-leaguechip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 7px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.connect-userchip__avatar, .connect-leaguechip__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1e6fb8; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.connect-userchip__name, .connect-leaguechip__name {
  font-weight: 600; color: var(--text, #0b1120);
}
.connect-userchip__sub, .connect-leaguechip__sub {
  display: block;
  font-size: 11px;
  color: var(--text-3, #6b7280);
}

.connect-section-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
}

.connect-league-list, .connect-team-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.connect-league-card, .connect-team-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--r-8);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.connect-league-card:hover, .connect-team-card:hover {
  border-color: #1e6fb8;
  background: rgba(30, 111, 184, 0.03);
}
.connect-team-card.is-selected {
  border-color: #1e6fb8;
  background: rgba(30, 111, 184, 0.06);
  box-shadow: 0 0 0 1px #1e6fb8;
}
.connect-league-card__name, .connect-team-card__name {
  font-size: 13.5px; font-weight: 600;
  color: var(--text, #0b1120);
}
.connect-league-card__meta, .connect-team-card__meta {
  display: flex; gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3, #6b7280);
}
.connect-league-card__cta {
  font-size: 11px;
  color: #1e6fb8;
  font-weight: 600;
}
.connect-team-card__check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--hairline, #cbd5e1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 12px; font-weight: 700;
}
.connect-team-card.is-selected .connect-team-card__check {
  background: #1e6fb8;
  border-color: #1e6fb8;
  color: #fff;
}

.connect-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-3, #6b7280);
}
.connect-loading::before {
  content: "";
  width: 12px; height: 12px;
  border: 2px solid rgba(30, 111, 184, 0.2);
  border-top-color: #1e6fb8;
  border-radius: 50%;
  animation: my-teams-spin 0.7s linear infinite;
}

.connect-soon { padding: 18px 4px; }
.connect-soon__title {
  font-size: 14px; font-weight: 600;
  color: var(--text, #0b1120);
  margin-bottom: 8px;
}
.connect-soon__body {
  font-size: 12.5px;
  color: var(--text-2, #4b5563);
  line-height: 1.55;
  margin: 0 0 8px;
}
.connect-soon__body code {
  background: #f1f1f1; padding: 1px 5px;
  border-radius: var(--r-3);
  font-size: 11.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* ── Synced banner ─────────────────────────────────────────────────── */
.synced-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(30, 111, 184, 0.06);
  border: 1px solid rgba(30, 111, 184, 0.2);
  border-radius: 7px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-2, #4b5563);
}
.synced-banner__label {
  font-weight: 700;
  color: #1e6fb8;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 10px;
}
.synced-banner__team { font-weight: 600; color: var(--text, #0b1120); }
.synced-banner__time { color: var(--text-3, #6b7280); }
.synced-banner__resync {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(30, 111, 184, 0.3);
  color: #1e6fb8;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.synced-banner__resync:hover { background: rgba(30, 111, 184, 0.1); }

/* ── Lineup Coach (Operations) ─────────────────────────────────────── */
.lineup-coach { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) {
  .lineup-coach { grid-template-columns: 1.4fr 1fr; }
}
.lineup-coach__card {
  background: #fff;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--r-10);
  padding: 16px 18px;
}
.lineup-coach__card-title {
  font-size: 13px; font-weight: 700;
  color: var(--text, #0b1120);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.lineup-coach__card-sub {
  font-size: 11px;
  color: var(--text-3, #6b7280);
  font-weight: 500;
}
.lineup-coach__slot {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  grid-column-gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--hairline, #f1f1f1);
  font-size: 12.5px;
}
.lineup-coach__slot:last-child { border-bottom: none; }
.lineup-coach__slot-pos {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3, #6b7280);
}
.lineup-coach__slot-name { color: var(--text, #0b1120); font-weight: 500; }
.lineup-coach__slot-name--empty { color: var(--text-3, #9ca3af); font-style: italic; }
.lineup-coach__slot-pts {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2, #4b5563);
}
.lineup-coach__waiver {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-column-gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline, #f1f1f1);
  font-size: 12px;
}
.lineup-coach__waiver:last-child { border-bottom: none; }
.lineup-coach__waiver-name { font-weight: 500; }
.lineup-coach__waiver-pos {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3, #6b7280);
}
.lineup-coach__waiver-pts {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #2f8f4a;
}
.lineup-coach__empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--text-3, #6b7280);
  font-size: 12.5px;
}

/* ── My Teams nav button text label ───────────────────────────────── */
.my-teams-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  width: auto;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
}
.my-teams-btn__label {
  font-size: 12px; font-weight: 600;
  color: var(--text-2, #4b5563);
}
.my-teams-btn:hover .my-teams-btn__label { color: var(--text, #1f1f1f); }

/* ── League Power Rankings table ───────────────────────────────────── */
.power-rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--r-10);
  overflow: hidden;
  font-size: 12.5px;
}
.power-rank-table th {
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3, #6b7280);
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, #e5e7eb);
  background: #fafafa;
  white-space: nowrap;
}
.power-rank-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, #f1f1f1);
  vertical-align: middle;
}
.power-rank-table tr:last-child td { border-bottom: none; }
.power-rank-table tr.is-mine td { background: rgba(30, 111, 184, 0.06); }
.power-rank-table tr.is-mine td:first-child { border-left: 3px solid #1e6fb8; }
.power-rank-table__pos {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--text, #0b1120);
  font-size: 13px;
  width: 36px;
}
.power-rank-table__team {
  font-weight: 600;
  color: var(--text, #0b1120);
}
.power-rank-table__manager {
  display: block;
  font-size: 10.5px; font-weight: 500;
  color: var(--text-3, #6b7280);
  margin-top: 1px;
}
.power-rank-table__pts {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2, #4b5563);
  text-align: right;
}
.power-rank-table__gap {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-3, #6b7280);
  text-align: right;
}
.power-rank-table__bar-cell { padding: 10px 0 10px 0; width: 120px; }
.power-rank-table__bar-track {
  background: #f1f1f1;
  height: 6px;
  border-radius: var(--r-3);
  margin: 0 12px 0 0;
  overflow: hidden;
}
.power-rank-table__bar-fill {
  height: 100%;
  background: #1e6fb8;
  border-radius: var(--r-3);
}
tr.is-mine .power-rank-table__bar-fill { background: #2f8f4a; }

/* ── Matchup widget ────────────────────────────────────────────────── */
.matchup-card {
  background: #fff;
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: var(--r-10);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.matchup-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #0b1120);
}
.matchup-card__week {
  font-size: 11px; font-weight: 500;
  color: var(--text-3, #6b7280);
}
.matchup-card__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-column-gap: 18px;
  align-items: center;
}
.matchup-side { text-align: center; }
.matchup-side--mine { text-align: left; }
.matchup-side--opp  { text-align: right; }
.matchup-side__team {
  font-size: 13.5px; font-weight: 600;
  color: var(--text, #0b1120);
}
.matchup-side__manager {
  font-size: 11px;
  color: var(--text-3, #6b7280);
  margin-top: 2px;
}
.matchup-side__pts {
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0b1120);
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.matchup-side__sub {
  font-size: 10.5px;
  color: var(--text-3, #6b7280);
  font-weight: 500;
  margin-top: 1px;
}
.matchup-card__vs {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.matchup-card__vs-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3, #9ca3af);
}
.matchup-card__delta {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: var(--r-4);
}
.matchup-card__delta--up   { background: rgba(47, 143, 74, 0.12); color: #2f8f4a; }
.matchup-card__delta--down { background: rgba(196, 74, 58, 0.12); color: #c44a3a; }
.matchup-card__delta--even { background: #f1f1f1; color: var(--text-3, #6b7280); }
.matchup-card__empty {
  padding: 14px;
  font-size: 12px;
  color: var(--text-3, #6b7280);
  text-align: center;
}

/* ── Lineup Coach 3-column variant + drop candidates ───────────────── */
.lineup-coach--triple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1100px) {
  .lineup-coach--triple { grid-template-columns: 1.4fr 1fr 1fr; }
}
.lineup-coach__drop {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-column-gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline, #f1f1f1);
  font-size: 12px;
}
.lineup-coach__drop:last-child { border-bottom: none; }
.lineup-coach__drop-name { font-weight: 500; }
.lineup-coach__drop-pos {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3, #6b7280);
}
.lineup-coach__drop-pts {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #c44a3a;
}

/* ════════════════════════════════════════════════════════════════════
   TRADE CENTER - sub-nav, finder cards, rosters grid, targets, log.
   Scoped under .trade-subnav and .tc-* selectors so nothing else moves.
   ════════════════════════════════════════════════════════════════════ */

.trade-subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0;
}
.trade-subnav__link {
  background: none; border: none;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: -.01em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.trade-subnav__link:hover { color: var(--text); }
.trade-subnav__link.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tc-panel { animation: tcFade .15s ease-out; }
@keyframes tcFade { from { opacity: 0; } to { opacity: 1; } }

.tc-muted { color: var(--text-3); font-size: 12.5px; }
.tc-section-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: -.018em;
  margin: 16px 0 10px;
}
.tc-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-3);
  text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}
.tc-tag--mine { background: var(--accent-soft); color: var(--accent-deep); }

.tc-checkbox {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
  padding: 4px 6px;
}
.tc-checkbox input { margin: 0; }

.tc-input-sm {
  font-family: inherit; font-size: 12.5px;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-elev);
  color: var(--text);
  border-radius: 0;
  min-width: 0;
}
.tc-input-sm:focus { outline: 2px solid var(--accent-tint); outline-offset: -1px; }

.tc-status {
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  font-size: 12.5px; color: var(--text-2);
  margin: 12px 0;
}

.tc-tag-row { display: flex; gap: 4px; flex-wrap: wrap; }
.tc-chip {
  background: var(--surface-soft); border: 1px solid var(--hairline);
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--text-2); cursor: pointer;
  font-family: inherit;
}
.tc-chip:hover { color: var(--ink); }
.tc-chip.is-active {
  background: var(--ink); color: var(--surface-elev);
  border-color: var(--ink);
}

.tc-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.tc-field > label { color: var(--text-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.tc-field > select, .tc-field > input[type=text] {
  font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  background: var(--surface-elev);
  color: var(--text);
}

/* ─── Analyzer additions: fit overlay + balance suggestion ─── */
.tc-row-fit .k::before { content: '· '; color: var(--text-3); }
.tc-balance-out {
  margin: 10px 0 6px;
  padding: 10px 14px;
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--text);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tc-balance-out__ok { color: var(--text-2); }
.tc-balance-out__warn { color: var(--text-2); font-style: italic; }
.tc-balance-out__action { flex: 1; }

/* ─── Finder cards ─── */
.tc-finder__controls {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: flex-end;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.tc-finder__results {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.tc-finder-card {
  border: 1px solid var(--hairline);
  background: var(--surface-elev);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.tc-finder-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-3);
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 8px;
}
.tc-finder-card__opp { font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.tc-finder-card__verdict {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px;
}
.tc-finder-card__verdict--win-win  { background: rgba(20, 130, 80, .12);  color: #146e3c; }
.tc-finder-card__verdict--i-gain   { background: rgba(20, 90, 140, .10);  color: #1a5a8c; }
.tc-finder-card__verdict--opp-gain { background: rgba(140, 90, 20, .10);  color: #8c5a1a; }
.tc-finder-card__body {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px;
  align-items: center;
}
.tc-finder-card__arrow {
  font-size: 22px; color: var(--text-3); font-weight: 300;
  text-align: center;
}
.tc-finder-card__side-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: 6px; font-weight: 700;
}
.tc-finder-card__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tc-finder-card__sidemeta { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.tc-finder-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding-top: 8px;
  border-top: 1px dashed var(--hairline);
  font-size: 11.5px;
}
.tc-finder-card__actions { display: flex; gap: 6px; }

/* ─── Player chip (used in finder / targets / log) ─── */
.tc-player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  padding: 3px 8px;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.tc-player-chip__name { white-space: nowrap; }
.tc-player-chip__pos {
  font-size: 9.5px; font-weight: 700;
  padding: 1px 5px;
  background: var(--surface-elev);
  border: 1px solid var(--hairline);
  color: var(--text-3);
  border-radius: 0;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ─── Targets ─── */
.tc-targets__controls {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
  position: relative;
}
.tc-targets__list { display: grid; gap: 6px; }
.tc-target-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-elev);
  border: 1px solid var(--hairline);
}
.tc-target-row__main {
  display: flex; gap: 10px; align-items: center;
}
.tc-target-row__pts { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tc-target-row__controls { display: flex; gap: 6px; align-items: center; }
.tc-target-note { width: 220px; }
.tc-suggest {
  position: absolute;
  top: 100%; left: 14px; right: 14px;
  background: var(--surface-elev);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-2);
  z-index: 50;
  max-height: 320px; overflow: auto;
  margin-top: 4px;
}
.tc-suggest__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: none; border: none; border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.tc-suggest__item:hover { background: var(--surface-soft); }
.tc-suggest__item:last-child { border-bottom: none; }

/* ─── Log ─── */
.tc-log__controls {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  justify-content: space-between;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.tc-log__list { display: grid; gap: 8px; }
.tc-log-row {
  background: var(--surface-elev);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-log-row__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-3);
}
.tc-log-row__label { font-weight: 700; color: var(--ink); font-family: var(--font-display); font-size: 12.5px; }
.tc-log-row__body {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center;
}
.tc-log-row__arrow { font-size: 18px; color: var(--text-3); text-align: center; }
.tc-log-row__side-label {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 700; margin-bottom: 4px;
}
.tc-log-row__foot {
  display: flex; gap: 6px; align-items: center;
  padding-top: 8px; border-top: 1px dashed var(--hairline);
}
.tc-log-note { flex: 1; min-width: 0; }

/* ─── Rosters ─── */
.tc-rosters__intro { padding: 0 2px 12px; }
.tc-rosters__intro p { font-size: 13px; color: var(--text-2); }
.tc-rosters__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 18px;
}
.tc-roster-col {
  background: var(--surface-soft); border: 1px solid var(--hairline);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-roster-col--mine { border-left: 3px solid var(--accent); }
.tc-roster-col__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 2px;
}
.tc-roster-col__head h4 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: -.018em;
  margin: 0;
}
.tc-roster-col textarea {
  width: 100%; min-height: 220px; resize: vertical;
  font-family: var(--mono); font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  background: var(--surface-elev);
  color: var(--text);
}
.tc-roster-col__foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}

.tc-needs { margin-top: 8px; }
.tc-need-grid {
  display: grid;
  font-size: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface-elev);
}
.tc-need-head, .tc-need-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr 100px;
  gap: 8px;
  padding: 6px 10px;
}
.tc-need-head {
  background: var(--surface-soft);
  font-weight: 700; font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--hairline);
}
.tc-need-row { border-bottom: 1px dashed var(--hairline); }
.tc-need-row:last-child { border-bottom: none; }
.tc-need-pos { font-weight: 700; }
.tc-need-have, .tc-need-pts { font-variant-numeric: tabular-nums; color: var(--text-2); }
.tc-need-tag {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: center;
}
.tc-need-tag--short   { background: rgba(178, 52, 21, .10);  color: var(--accent-deep); }
.tc-need-tag--surplus { background: rgba(140, 90, 20, .10);  color: #8c5a1a; }
.tc-need-tag--ok      { background: rgba(20, 130, 80, .10);  color: #146e3c; }

.tc-leagueview { margin-top: 18px; }
.tc-league-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.tc-league-table th, .tc-league-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.tc-league-table th {
  background: var(--surface-soft);
  font-size: 10.5px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.tc-league-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tc-league-table tr.is-mine { background: var(--accent-soft); }
.tc-league-table tr.is-mine td:first-child { font-weight: 700; }
.tc-cell--short   { color: var(--accent-deep); font-weight: 700; }
.tc-cell--surplus { color: #8c5a1a; }

/* Compact layout under 720px */
@media (max-width: 720px) {
  .tc-rosters__grid,
  .tc-finder-card__body,
  .tc-log-row__body { grid-template-columns: 1fr; }
  .tc-finder-card__arrow, .tc-log-row__arrow { display: none; }
  .tc-target-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   L1-4 - League operations build-out
   Styles for Lineup / Matchup / Standings / Waivers / Transactions.
   ══════════════════════════════════════════════════════════════════ */

/* Portfolio picker (shared bar above active-portfolio views) */
.ops-portfolio-picker {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface-soft, #fafafa);
  border: 1px solid var(--hairline);
  border-radius: var(--r-8);
  flex-wrap: wrap;
}
.ops-portfolio-picker__lbl {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); font-weight: 600;
}
.ops-portfolio-picker__select {
  font: inherit; font-size: 13.5px; padding: 5px 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-6);
  background: var(--surface, #fff);
}
.ops-portfolio-picker__solo {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.ops-portfolio-picker__link {
  font-size: 12.5px; color: #1e6fb8; text-decoration: none;
  margin-left: auto;
}
.ops-portfolio-picker__link + .ops-portfolio-picker__link { margin-left: 8px; }
.ops-portfolio-picker__link:hover { text-decoration: underline; }

/* Rich empty state */
.ops-empty--rich { padding: 32px; text-align: left; }
.ops-empty--inline { margin-top: 8px; padding: 16px; }
.ops-empty__features { margin: 12px 0; padding-left: 20px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.ops-empty__actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.ops-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-6);
  background: var(--accent-deep, #1e6fb8); color: #fff;
  border: 1px solid var(--accent-deep, #1e6fb8);
  cursor: pointer; text-decoration: none;
  display: inline-block;
}
.ops-btn:hover { filter: brightness(1.08); }
.ops-btn--primary { background: var(--accent-deep, #1e6fb8); color: #fff; }
.ops-btn--ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.ops-btn--small { padding: 3px 8px; font-size: 11.5px; }

/* Generic loading spinner text */
.ops-loading { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.ops-note { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }

/* ── Lineup Optimizer ── */
.ops-lineup-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 14px;
}
.ops-lineup-stat {
  background: var(--surface-soft, #fafafa);
  border: 1px solid var(--hairline);
  border-radius: var(--r-6); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.ops-lineup-stat__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.ops-lineup-stat__val { font-size: 22px; font-weight: 700; color: var(--text); }
.ops-lineup-stat__sub { font-size: 11.5px; color: var(--text-3); }
.ops-lineup-wrap { overflow-x: auto; }
.ops-lineup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-lineup-table tr { border-bottom: 1px solid var(--hairline); }
.ops-lineup-table th, .ops-lineup-table td { padding: 8px 10px; vertical-align: top; text-align: left; }
.ops-lineup__slot {
  background: var(--surface-soft, #fafafa);
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3);
  width: 64px;
}
.ops-lineup__cell { line-height: 1.4; }
.ops-lineup__name { display: block; font-weight: 600; color: var(--text); text-decoration: none; }
.ops-lineup__name:hover { text-decoration: underline; }
.ops-lineup__pos { font-size: 11px; color: var(--text-3); margin-right: 6px; }
.ops-lineup__pts { font-size: 11.5px; color: var(--text-2); }
.ops-lineup__pts small { color: var(--text-3); }
.ops-lineup__empty { color: var(--text-3); font-style: italic; }
.ops-lineup__inj {
  display: inline-block; padding: 1px 5px; border-radius: var(--r-3);
  font-size: 9.5px; font-weight: 700;
  background: #c0392b; color: #fff; margin-left: 4px;
}
.ops-lineup__inj--dtd { background: #d4a017; }
.ops-lineup-table--bench .ops-lineup__slot { background: #f4ede0; }

/* Swap list */
.ops-swap-list { list-style: none; padding: 0; margin: 4px 0 0; }
.ops-swap-row {
  display: grid;
  grid-template-columns: 22px 1fr 56px 1fr 80px 80px;
  gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.ops-swap-row:last-child { border-bottom: none; }
.ops-swap__arrow { color: #2e7d32; font-weight: 700; text-align: center; }
.ops-swap__bench { font-weight: 600; color: var(--text); }
.ops-swap__for { font-size: 11.5px; color: var(--text-3); text-align: center; }
.ops-swap__starter { color: var(--text-2); text-decoration: line-through; }
.ops-swap__slot { font-size: 11.5px; color: var(--text-3); }
.ops-swap__delta { color: #2e7d32; font-weight: 700; text-align: right; }

/* ── Matchup ── */
.ops-matchup-form {
  display: grid; grid-template-columns: 1fr 60px 1fr; gap: 12px;
  align-items: end;
}
.ops-matchup-side { display: flex; flex-direction: column; gap: 4px; }
.ops-matchup-vs {
  font-size: 14px; color: var(--text-3); text-align: center;
  font-weight: 700; padding-bottom: 6px;
}
.ops-matchup-headline { margin-top: 6px; }
.ops-matchup-band {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: center; padding: 16px 0;
}
.ops-matchup-band__side { display: flex; flex-direction: column; gap: 4px; }
.ops-matchup-band__side--right { text-align: right; align-items: flex-end; }
.ops-matchup-band__name { font-size: 12.5px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ops-matchup-band__pts { font-size: 28px; font-weight: 700; color: var(--text); }
.ops-matchup-band__vs {
  display: flex; flex-direction: column; align-items: center;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  padding: 0 18px;
}
.ops-matchup-band__wp { font-size: 22px; font-weight: 700; color: var(--accent-deep, #1e6fb8); }
.ops-matchup-band__wp-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.ops-matchup-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 10px;
}
.ops-matchup-top { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-matchup-top th, .ops-matchup-top td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); text-align: left; }
.ops-matchup-top th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.ops-matchup-top .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Standings ── */
.ops-standings-wrap { overflow-x: auto; }
.ops-standings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-standings-table th, .ops-standings-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--hairline); text-align: left;
}
.ops-standings-table th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); background: var(--surface-soft, #fafafa);
}
.ops-standings-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-standings__input {
  width: 56px; padding: 4px 6px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--hairline); border-radius: var(--r-4); text-align: right;
}
.ops-standings__chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-10);
  font-size: 11.5px; font-weight: 700;
}
.ops-standings__chip--lock   { background: #d6efd9; color: #1b5e20; }
.ops-standings__chip--bubble { background: #fff2c2; color: #6b4f00; }
.ops-standings__chip--out    { background: #f1e0e0; color: #94342a; }
.ops-standings-controls {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding-top: 8px;
}
.ops-standings-controls label { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ops-form__input--narrow { width: 80px; }

/* ── Waiver wire ── */
.ops-waiver-wrap { overflow-x: auto; }
.ops-waiver-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-waiver-table th, .ops-waiver-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--hairline); text-align: left;
}
.ops-waiver-table th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); background: var(--surface-soft, #fafafa);
}
.ops-waiver-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-waiver__up--pos { color: #2e7d32; font-weight: 700; }
.ops-waiver__up--neg { color: #94342a; }
.ops-waiver__empty { padding: 18px; text-align: center; color: var(--text-3); font-style: italic; }

/* ── Transactions log ── */
.ops-tx-form { display: flex; flex-direction: column; gap: 10px; }
.ops-tx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ops-tx-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.ops-tx-list { list-style: none; padding: 0; margin: 0; }
.ops-tx-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.ops-tx__head {
  grid-column: 1 / -1;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}
.ops-tx__team { font-weight: 700; color: var(--text); font-size: 13px; }
.ops-tx__type {
  background: #e8efe6; color: #2e5a2a; padding: 1px 7px; border-radius: var(--r-10);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.ops-tx__when { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.ops-tx__body { font-size: 13px; line-height: 1.6; color: var(--text-2); }
.ops-tx__body > div { padding: 1px 0; }
.ops-tx__lbl { font-weight: 700; color: var(--text); margin-right: 6px; }
.ops-tx__note { font-style: italic; color: var(--text-3); }
.ops-tx__grade { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ops-tx__delta { font-size: 18px; font-weight: 700; }
.ops-tx__delta--pos { color: #2e7d32; }
.ops-tx__delta--neg { color: #94342a; }
.ops-tx__sub { font-size: 11.5px; color: var(--text-3); }

/* Responsive */
@media (max-width: 900px) {
  .ops-lineup-summary { grid-template-columns: 1fr; }
  .ops-matchup-form { grid-template-columns: 1fr; }
  .ops-matchup-vs { padding: 4px 0; }
  .ops-matchup-band { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .ops-matchup-band__side--right { align-items: center; text-align: center; }
  .ops-matchup-band__vs { border: none; padding: 0; }
  .ops-matchup-grid { grid-template-columns: 1fr; }
  .ops-tx-form__row { grid-template-columns: 1fr; }
  .ops-tx-row { grid-template-columns: 1fr; }
  .ops-tx__grade { text-align: left; align-items: flex-start; }
  .ops-swap-row { grid-template-columns: 22px 1fr 60px; }
  .ops-swap__for, .ops-swap__starter, .ops-swap__slot, .ops-swap__delta { grid-column: 2 / span 2; }
  .ops-swap__delta { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   UI DELIGHT PACK (2026-05-29) - appended, additive only.
   Animated percentile bars · color-graded scale (JS) · count-up (JS) ·
   sticky profile mini-header · command palette · keyboard-nav rows ·
   explainer fade-in · editorial "night terminal" dark mode.
   All motion respects the global prefers-reduced-motion rule above.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Animated percentile bars (Savant-style sweep on profile open) ── */
.explainer-page .savant-pctile-row__fill {
  transform-origin: left center;
  animation: pctileGrow 0.55s var(--ease, cubic-bezier(.32,.72,0,1)) both;
}
@keyframes pctileGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.explainer-page .savant-pctile-row__bubble {
  animation: pctileBubbleIn 0.4s ease both 0.22s;
}
@keyframes pctileBubbleIn { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
/* Per-section cascade - bars in later sections start slightly later. */
.explainer-page .savant-pctile-section:nth-of-type(1) .savant-pctile-row__fill { animation-delay: 0.04s; }
.explainer-page .savant-pctile-section:nth-of-type(2) .savant-pctile-row__fill { animation-delay: 0.09s; }
.explainer-page .savant-pctile-section:nth-of-type(3) .savant-pctile-row__fill { animation-delay: 0.14s; }
.explainer-page .savant-pctile-section:nth-of-type(4) .savant-pctile-row__fill { animation-delay: 0.19s; }
.explainer-page .savant-pctile-section:nth-of-type(5) .savant-pctile-row__fill { animation-delay: 0.24s; }

/* ── 2. Explainer page fade/slide-in (lightweight view-transition feel) ── */
.explainer-page:not([hidden]) > .explainer-shell {
  animation: explFadeIn 0.32s var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes explFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 3. Sticky profile mini-header ──────────────────────────────────── */
.profile-ministicky {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 1900;            /* above explainer (1500), below nav (2000) */
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 8px clamp(16px, 4vw, 40px);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-strong);
  box-shadow: 0 6px 16px -10px rgba(15,14,12,.30);
  animation: miniSlideDown 0.22s var(--ease, cubic-bezier(.16,1,.3,1)) both;
  font-family: var(--font);
}
.profile-ministicky[hidden] { display: none; }
@keyframes miniSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.profile-ministicky__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md, 15px); color: var(--ink); letter-spacing: -0.01em; }
.profile-ministicky__proj { font-size: var(--t-sm, 13px); color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-ministicky__proj::before { content: "·"; color: var(--text-3); margin-right: var(--space-3, 12px); }

/* ── 4. Keyboard-navigated table row ────────────────────────────────── */
tr[data-pid].is-kbd-active > td {
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── 5. Theme toggle button (in nav right) ──────────────────────────── */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: var(--r-pill, 999px);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast,140ms) var(--ease), border-color var(--t-fast,140ms) var(--ease);
  margin-right: 8px;
}
.theme-toggle:hover { background: var(--bg-soft); border-color: var(--text-3); }

/* ── 6. Command palette (Cmd+K) ─────────────────────────────────────── */
.cmdk { position: fixed; inset: 0; z-index: var(--z-toast); }
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(15,14,12,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: cmdkFade .15s ease both; }
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
.cmdk__panel {
  position: relative;
  max-width: 560px;
  margin: 12vh auto 0;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 32px 64px -24px rgba(15,14,12,.45);
  animation: cmdkPop .18s var(--ease, cubic-bezier(.16,1,.3,1)) both;
  overflow: hidden;
}
@keyframes cmdkPop { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-lg, 17px);
  padding: 18px 20px;
  outline: none;
}
.cmdk__input::placeholder { color: var(--text-3); }
.cmdk__list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: var(--t-sm, 13px);
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
}
.cmdk__item.is-sel, .cmdk__item:hover { background: var(--accent-soft); color: var(--ink); }
.cmdk__kbd { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.cmdk__hint { padding: 8px 16px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--text-3); font-family: var(--font); letter-spacing: .02em; }

/* ════════════════════════════════════════════════════════════════════
   7. NIGHT TERMINAL - editorial dark theme (v1)
   Token flip + key surface overrides. Some deeply hard-coded panels may
   still need per-panel touch-ups; this covers nav, profile, rankings,
   cards, search, palette - the high-traffic surfaces.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:            #181410;
  --bg-soft:       #201b14;
  --bg-tinted:     #2a2218;
  --surface:       #221d16;
  --surface-soft:  #29221a;
  --surface-elev:  #2f281e;
  --paper:         #221d16;
  --hairline:      rgba(240,237,230,.10);
  --hairline-strong: rgba(240,237,230,.20);
  --rule:          #e8e4da;
  --rule-soft:     rgba(240,237,230,.14);
  --rule-strong:   #e8e4da;
  --ink:           #f4f1ea;
  --ink-2:         #e5e1d8;
  --text:          #d6d2c9;
  --text-2:        #a6a198;
  --text-3:        #989389;             /* muted - lightened from #827d74 (~4.0:1) to clear WCAG AA, now ~5.0:1 on --surface */
  --text-4:        #5d594f;
  --age-peak:      #3f9e81;
  --age-young:     #37a075;
  --age-prime:     #878f9a;
  --age-mild:      #b8860b;
  --age-veteran:   #ca7b2d;
  --age-decline:   #d27467;
  --text-1:        var(--ink);
  --text1:         var(--ink);
  --text2:         var(--text-2);
  --brand:         #d84d22;
  --brand-2:       #ec5f38;
  --brand-deep:    #a83613;
  --brand-soft:    rgba(216,77,34,.14);
  --brand-tint:    rgba(216,77,34,.24);
  --accent:        #d84d22;
  --accent-2:      #ec5f38;
  --accent-deep:   #a83613;
  --accent-soft:   rgba(216,77,34,.14);
  --accent-tint:   rgba(216,77,34,.24);
  --accent-glow:   rgba(216,77,34,.30);
  --green:         #3fb27a;
  --green-soft:    rgba(63,178,122,.14);
  --green-bg:      rgba(63,178,122,.18);
  --red:           #e8546a;
  --red-soft:      rgba(232,84,106,.14);
  --red-bg:        rgba(232,84,106,.18);
  --gold:          #d4a14a;
  --gold-soft:     rgba(212,161,74,.14);
  --gold-bg:       rgba(212,161,74,.18);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after { opacity: .4; }
html[data-theme="dark"] .site-nav { background: var(--bg) !important; border-bottom-color: var(--hairline) !important; }
/* Flip the common white card surfaces to the dark surface token. */
html[data-theme="dark"] .profile-dashboard__col,
html[data-theme="dark"] .savant-top-card,
html[data-theme="dark"] .pctile-card-standalone,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .profile-hero,
html[data-theme="dark"] .expl-card,
html[data-theme="dark"] .rf-card,
html[data-theme="dark"] .fypd-card,
html[data-theme="dark"] .bento-card,
html[data-theme="dark"] .compare-page__card,
html[data-theme="dark"] .home-pulse,
html[data-theme="dark"] .home-surface,
html[data-theme="dark"] .card,
html[data-theme="dark"] .player-search,
html[data-theme="dark"] .player-search__dropdown,
html[data-theme="dark"] .player-profile-modal__panel {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--text);
}
html[data-theme="dark"] .explainer-page,
html[data-theme="dark"] .edge-page,
html[data-theme="dark"] .draft-page,
html[data-theme="dark"] .compare-page { background: var(--bg) !important; }
html[data-theme="dark"] .explainer-topbar { background: var(--bg) !important; }
/* Tables: dark rows + hover. */
html[data-theme="dark"] table td,
html[data-theme="dark"] table th { border-color: var(--hairline) !important; }
html[data-theme="dark"] tr[data-pid]:hover > td { background: var(--bg-soft) !important; }
/* Catch the most common inline white backgrounds. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#FFFFFF"] { background: var(--surface) !important; }

/* ════════════════════════════════════════════════════════════════════
   UI DELIGHT PACK 2 (2026-05-29) - appended, additive only.
   Career-curve draw-on · sticky-header nav-offset fix · top route bar ·
   skeleton-ified page loaders · scroll-spy nav · dark-mode finishing ·
   mobile pass for the new components.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Career projection curve - draw-on + pulse + hover-enlarge ───── */
.career-curve .cc-line--past,
.career-curve .cc-line--past-proj,
.career-curve .cc-line--future,
.career-curve .cc-line--rolling {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: ccDraw 1.15s var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
}
.career-curve .cc-line--past-proj { animation-delay: .15s; }
.career-curve .cc-line--future    { animation-delay: .55s; }
@keyframes ccDraw { to { stroke-dashoffset: 0; } }
.career-curve .cc-band,
.career-curve .cc-hof-band { animation: ccBandIn .8s ease both .5s; }
@keyframes ccBandIn { from { opacity: 0; } to { opacity: 1; } }
.career-curve .cc-dot { animation: ccDotIn .35s ease both .85s; transition: transform .12s ease; transform-box: fill-box; transform-origin: center; }
@keyframes ccDotIn { from { opacity: 0; } to { opacity: 1; } }
.career-curve .cc-dot:hover { transform: scale(1.7); cursor: pointer; }
.career-curve .cc-dot--present { animation: ccDotIn .35s ease both .85s, ccPulse 2.6s ease-in-out 1.3s infinite; }
@keyframes ccPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── 2. Sticky table header offset (fixed-nav regression fix) ───────── */
/* .table-wrap uses page-level scrolling, so its sticky thead pins to the
   viewport. The nav is now position:fixed (64px), so headers must stick
   BELOW it, not at top:0 (where they'd hide behind the nav). */
.table-wrap thead th { top: var(--nav-h) !important; }

/* ── 3. Top route-change progress bar ──────────────────────────────── */
#routeProgress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--brand);
  box-shadow: 0 0 8px var(--accent-glow, rgba(178,52,21,.4));
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: width .35s ease, opacity .35s ease;
}
#routeProgress.is-active { opacity: 1; }
#routeProgress.is-done   { opacity: 0; }

/* ── 4. Skeleton-ify the page-level loading states ─────────────────── */
.explainer-loading,
.edge-loading,
.draft-loading {
  color: transparent !important;
  min-height: 220px;
  margin: 24px;
  border-radius: var(--card-radius, 0);
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface-soft) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

/* ── 5. Scroll-spy: active section in the profile nav ───────────────── */
.explainer-nav a.is-current {
  color: var(--accent) !important;
  font-weight: 600;
}
.explainer-nav a { transition: color var(--t-fast,140ms) var(--ease); }

/* ── 6. Dark-mode finishing - more surfaces ────────────────────────── */
html[data-theme="dark"] .career-curve,
html[data-theme="dark"] .cc-tooltip,
html[data-theme="dark"] .profile-ministicky,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .filterbar,
html[data-theme="dark"] .rf-summary,
html[data-theme="dark"] .study-card,
html[data-theme="dark"] .prospect-card,
html[data-theme="dark"] .home-surface,
html[data-theme="dark"] .ws-landing,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--text);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .filterbar__sort select,
html[data-theme="dark"] .rf-sort__sel {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--hairline-strong) !important;
}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .explainer-back,
html[data-theme="dark"] .edge-back {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline-strong);
}
/* The injected theme toggle reads inverted in dark (sun icon on dark). */
html[data-theme="dark"] .theme-toggle { background: var(--surface); color: var(--gold); border-color: var(--hairline-strong); }
/* Catch common dark-text hard-codes so they don't vanish on dark bg. */
html[data-theme="dark"] [style*="color:#0b1120"],
html[data-theme="dark"] [style*="color: #0b1120"],
html[data-theme="dark"] [style*="color:#1a1a1f"],
html[data-theme="dark"] [style*="color: #1a1a1f"],
html[data-theme="dark"] [style*="color:#1a1a1a"] { color: var(--text) !important; }

/* ── 7. Mobile pass - the NEW components at ≤720px ──────────────────── */
@media (max-width: 720px) {
  /* Command palette goes near-full-width */
  .cmdk__panel { margin: 8vh 12px 0; max-width: none; }
  .cmdk__input { font-size: 16px; }  /* 16px avoids iOS zoom-on-focus */
  /* Sticky mini-header tightens */
  .profile-ministicky { padding: 7px 14px; gap: 8px; }
  .profile-ministicky__name { font-size: var(--t-sm, 13px); }
  /* Theme toggle slightly smaller */
  .theme-toggle { width: 30px; height: 30px; margin-right: 6px; }
  /* Profile dashboard stacks single-column on phones */
  .profile-dashboard,
  .profile-dashboard--two { grid-template-columns: 1fr !important; gap: 14px; padding: 0 14px; }
  /* Percentile card internal 2-col → 1-col so bars stay wide enough */
  .pctile-card-standalone__body { grid-template-columns: 1fr !important; }
  /* Sticky table header offset matches the (shorter) mobile nav if any */
  .table-wrap thead th { top: var(--nav-h) !important; }
}
@media (max-width: 480px) {
  .cmdk__panel { margin: 4vh 8px 0; }
  .profile-ministicky__proj::before { margin-right: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   PERFORMANCE PACK (2026-05-29) - appended, additive only.
   The ruby server already gzips app.js/styles.css/polish.css, and the 5
   classic scripts are now `defer` (parallel download). This block adds
   content-visibility so the browser skips layout/paint of off-screen
   blocks until they're scrolled near - a real win on long profile and
   research pages. contain-intrinsic-size reserves space so scroll height
   stays stable (no jump). Safe in modern Chromium; degrades to no-op in
   browsers without support.
   ════════════════════════════════════════════════════════════════════ */

/* Profile detail sections (many, below the fold on open). */
.profile-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
/* Research / prospect / study card grids. */
.study-card,
.prospect-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
/* Homepage product-surface tiles + movers band. */
.home-surface {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}
/* Injury log entries (long lists). */
.injury-toc__link,
.inj-row-clickable {
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
}
/* News / report cards if present. */
.news-card,
.report-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

/* injury-news-feed - FantasyPros-style article cards (2026-05-30) */
.inews-feed { max-width: 880px; margin: 0 auto; padding: 4px 0 40px; }
.inews-day { margin: 0 0 10px; }
.inews-day__head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3, #8a8680); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.inews-day__count { font-size: 11px; font-weight: 600; color: var(--text-3, #8a8680);
  background: var(--surface-soft, #f1efe9); border-radius: var(--r-10); padding: 1px 8px; }
.inews-card { display: flex; gap: 16px; padding: 14px 16px; margin: 0 0 10px;
  background: var(--surface-1, #fff); border: 1px solid var(--hairline, rgba(11,17,32,.08));
  border-radius: var(--r-12); }
.inews-card__rail { flex: 0 0 92px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.inews-card__time { font-size: 11.5px; color: var(--text-3, #8a8680); }
.inews-card__evt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: var(--r-6); white-space: nowrap;
  background: var(--surface-soft, #f1efe9); color: var(--text-2, #555); }
.inews-card__evt--warn { background: #fbeacd; color: #8a5a12; }
.inews-card__evt--good { background: #d8efdc; color: #1d6b34; }
.inews-card__evt--bad  { background: #f6d6d2; color: #9a2616; }
.inews-card__evt--cool { background: #d6e6f6; color: #1f5687; }
.inews-card__main { flex: 1 1 auto; min-width: 0; }
.inews-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 3px; }
.inews-card__player { font-weight: 700; font-size: 14px; color: var(--text-1, #161616); text-decoration: none; }
a.inews-card__player:hover { text-decoration: underline; }
.inews-card__pills { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.inews-pill { font-size: 10.5px; font-weight: 600; color: var(--text-2, #555);
  background: var(--surface-soft, #f1efe9); border-radius: var(--r-6); padding: 1px 7px; }
.inews-card__headline { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4;
  color: var(--text-1, #161616); text-decoration: none; margin: 2px 0; }
a.inews-card__headline:hover { color: var(--accent, #b91c1c); }
.inews-card__diag { display: inline-block; font-size: 12px; font-weight: 600; color: #8a5a12; margin: 1px 0 2px; }
.inews-card__body { font-size: 13px; line-height: 1.55; color: var(--text-2, #45433f); margin: 4px 0 0; }
.inews-card__foot { margin-top: 7px; }
.inews-card__src { font-size: 11px; color: var(--text-3, #8a8680); font-style: italic; }
@media (max-width: 720px) {
  .inews-card { flex-direction: column; gap: 8px; }
  .inews-card__rail { flex-direction: row; align-items: center; }
}

/* Scoring-type toggle (wave O fix): these blocks are shown/hidden via the
   `hidden` attribute, but their layout classes set display:flex/block which
   outranks the UA [hidden] rule — found by the real-browser Playwright pass
   (roster presets stayed visible in Categories mode). */
#rosterPresetBar[hidden],
#scoringSystemRow[hidden],
#categoryPicker[hidden] { display: none !important; }

/* ═══ Wave R — measured UI-audit fixes (docs/UI_MICRO_AUDIT.md) ═══ */

/* P0 · Methodology shell stacking: when a SUBPAGES route is active the
   dispatcher sets body[data-subpage] — hide the shell's default article so
   sub-pages (accuracy, performance, studies…) render alone, not beneath it. */
/* Subpage routes NEVER show the legacy Research Terminal panel — second
   selector matches the reveal at ~line 345 in specificity so this later
   rule wins on /research/wbc|awards|staff subpages too. */
body[data-subpage="true"] [data-view="methodology"],
body[data-subpage="true"][data-research-module] [data-view="methodology"]:not([hidden]) { display: none !important; }

/* P1 · Dark-mode chrome contrast (filmed: shot 42): wordmark, top-nav links
   and rail micro-labels were near-invisible on black. */
html[data-theme="dark"] .site-nav__logo-name { color: var(--text, #f2efe7); }
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .site-nav__links a { color: var(--text-2, #c9c4b8); }
html[data-theme="dark"] .shell-b__rail-eyebrow,
html[data-theme="dark"] [class*="rail-group"],
html[data-theme="dark"] [class*="rail__group"] { color: var(--text-3, #989389); }

/* P1 · #configSummary measured at 4.47:1 (#64748b slate — off-system). */
.config-pill__summary { color: var(--text-3) !important; }

/* P1 · Standings inline green (#2a9d4a / rgba(42,157,74)) measured 4.2:1 on
   zebra rows — darken to the AA token wherever it was inlined as text. */
.sub-table span[style*="2a9d4a"],
.sub-table span[style*="42,157,74"],
td span[style*="color:#2a9d4a"] { color: var(--green, #1f6b3a) !important; }

/* P2 · Tap targets: board watch stars + similar glyph buttons measured
   under 24px — give them a real hit area without shifting layout. */
.rank-watch, .rf-card__watch {
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}