/* ============================================================
   managr · Editorial Terminal v3 - full UI overhaul.
   Concept: Financial Times meets Bloomberg terminal meets Stathead.
   Ivory paper, deep ink, one saturated red accent, brutalist rules,
   oversized serif display + tabular-numeric data.
   CSS-only overlay; loaded AFTER styles.css.
   ============================================================ */

@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');

/* ─────────────── Tokens (additions only) ───────────────
   Slimmed 2026-05-27 round 2: styles.css :root is now editorial-canonical
   and already defines bg / surface / ink / text / accent / brand / fonts /
   radii / gutter / hairlines / shadows. Polish.css used to redefine all
   of those identically - pure duplication. The block below keeps ONLY
   the unique semantic tokens (--pos, --neg, --warn) that styles.css
   doesn't ship. Anything previously duplicated has been deleted; the
   live values come from styles.css. */
:root, :root[data-force-light] {
  /* Editorial semantic tokens (not in styles.css base). Used by route
     CSS to express success / failure / warning in text and chip context
     against the warm ivory background. */
  --pos:           #1f6b3a;
  --pos-soft:      rgba(31,107,58,.10);
  --neg:           #a8201a;
  --neg-soft:      rgba(168,32,26,.10);
  --warn:          #734a0c;
  --warn-soft:     rgba(138,90,16,.12);

  /* --accent-glow override: polish previously cleared the focus-glow to
     transparent (intentional - editorial design uses outline focus ring,
     not glow). Kept here as the canonical override; styles.css ships a
     non-zero glow for the cool-slate era which is no longer wanted. */
  --accent-glow:   0 0 0 transparent;
}

/* ─────────────── Page shell ─────────────── */
/* !important removed 2026-05-27 round 3: styles.css's html/body bg now
   resolves to the same --bg token. polish.css loads after, wins via
   cascade order without needing to fight. */
html, body {
  background: var(--bg);
  color: var(--text);
}
html { scroll-behavior: smooth; color-scheme: light; }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  background:
    /* faint horizontal newsprint rules every 28px */
    repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(15,14,12,.025) 27px, rgba(15,14,12,.025) 28px),
    radial-gradient(900px 500px at 100% -10%, rgba(210,46,31,.06), transparent 60%),
    var(--bg);
  min-height: 100dvh;
}

/* ─────────────── Typography ─────────────── */
h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.025em;
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 0;
}
h2, .h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; }
h3, .h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.15; font-weight: 700; }
p { color: var(--text); }

/* Eyebrows - mono uppercase everywhere */
.eyebrow, .card-header__meta, .draft-head__sub, .draft-head__eyebrow,
.hero__signal-lbl, .nav-status,
.hero__preview-status, .hero__preview-url {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

/* ─────────────── Top nav - newspaper masthead ─────────────── */
/* !important kept on `background` and `border-bottom` because styles.css
   .site-nav still ships a translucent-white bg (rgba(255,255,255,.78))
   and a literal hairline border - both intentional cool-slate defaults.
   `box-shadow: none` !important removed: styles.css doesn't declare a
   shadow on .site-nav, so the !important was fighting nothing. */
.site-nav {
  background: var(--bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0 !important;
  box-shadow: none;
}
.site-nav__inner { gap: 16px; align-items: center; }
/* Logo: tighter right margin. !important removed - same specificity as
   styles.css .site-nav__logo (margin-right: 40px), polish.css loads
   later, wins via cascade order. */
.site-nav__logo { margin-right: 8px; }
/* Search sits between logo and tabs. Fixed-ish width so the tabs to its
   right have a stable starting point. Vertical centering inherited from
   the flex parent. */
.site-nav__inner > .player-search {
  flex: 0 0 auto;
  width: 240px;
}
.site-nav__inner > .player-search:focus-within {
  /* Override styles.css L10150 which expands width on focus inside the
     old right-side group. With the search anchored next to the logo we
     want it to stay put so the tabs don't jump. */
  width: 280px !important;
}
/* Tabs sit immediately after the search bar. */
.site-nav__inner > .layer1-rail__items--horizontal {
  margin-left: 4px;
}
/* Account/auth group pinned to the far right regardless of how short the
   tab row is. margin-left: auto eats all remaining horizontal space. */
.site-nav__inner > .site-nav__right {
  margin-left: auto;
}

@media (max-width: 900px) {
  /* On narrow widths the existing rule (polish.css L987) already wraps the
     inner nav and bumps the tabs to a second full-width row. Shrink the
     search to fit the first row with the logo. */
  .site-nav__inner > .player-search { width: 100%; max-width: 100%; flex: 1 1 auto; order: 2; }
  .site-nav__inner > .site-nav__right { order: 4; }
  .site-nav__inner > .layer1-rail__items--horizontal { order: 3; }
}

.site-nav__logo-name {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.045em;
  font-size: 24px;
  font-variation-settings: "opsz" 144;
}
.site-nav__logo-name span { color: var(--accent); font-style: normal; }
.site-nav__logo-mark {
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 0!important;
  box-shadow: none;
  width: 34px; height: 34px;
}
.site-nav__logo-mark svg { color: var(--ink) !important; }

.layer1-rail__item {
  border-radius: 0;
  padding: 8px 14px;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color .12s ease, background .12s ease;
  border: 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.layer1-rail__item:hover { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
.layer1-rail__item.is-active,
.layer1-rail__item[aria-current="page"] {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  font-weight: 700;
}

/* Search - flush, no rounded corners */
.player-search {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0!important;
  padding: 7px 12px;
  transition: box-shadow .12s ease;
}
.player-search:focus-within {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.player-search__input {
  background: transparent !important;
  color: var(--ink) !important;
  /* Body-text font (was mono) so the placeholder matches the tagline. */
  font-family: var(--font);
  font-size: 12.5px;
}
.player-search__input::placeholder { color: var(--text-3); font-family: var(--font); }
.player-search__icon { color: var(--text-3); }
/* ⌘K discoverability hint — the command palette (app.js commandPalette) is
   best-in-class but had no on-screen affordance (Platform audit). */
.player-search { position: relative; }
.player-search__input { padding-right: 34px; }
.player-search__kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-3); background: var(--bg-soft, rgba(0,0,0,.05));
  border: 1px solid var(--rule); border-radius: 4px; padding: 2px 5px;
  pointer-events: none; white-space: nowrap;
}
@media (max-width: 560px) {
  .player-search__kbd { display: none; }
  .player-search__input { padding-right: 12px; }
}

/* Workspace subnav */
.workspace-subnav, .workspace-subnav--top {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.workspace-subnav__link {
  color: var(--text-2) !important;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color .12s ease;
  border-bottom: 2px solid transparent;
}
.workspace-subnav__link:hover { color: var(--ink) !important; }
.workspace-subnav__link.is-active,
.workspace-subnav__link[aria-current="page"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Layer 1 flyout */
.layer1-flyout {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0!important;
  box-shadow: var(--shadow-3);
}
.layer1-flyout__head { border-bottom-color: var(--rule) !important; }
.layer1-flyout__title { color: var(--ink) !important; }
.layer1-flyout__enter { color: var(--accent) !important; }
.layer1-flyout__enter:hover { color: var(--ink) !important; }
.layer1-flyout__group-label {
  color: var(--text-2, #6b7280) !important;
}
/* "+ N more" in-flyout link - softer than primary nav items so the
   eye lands on the curated featured items first. */
.layer1-flyout__link--more {
  color: var(--text-3, #8a857c) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-style: italic;
  padding-top: 4px !important;
}
.layer1-flyout__link--more:hover {
  color: var(--accent) !important;
}
/* Workspace-level "View all →" link at the bottom of the flyout body.
   Acts as the escape hatch to the workspace landing when the user
   wants the full surface. Visually distinct from item links so it
   reads as navigation, not as a peer item. */
.layer1-flyout__viewall {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline, rgba(15,14,12,0.08));
}
.layer1-flyout__viewall-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none;
}
.layer1-flyout__viewall-link:hover {
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAV VISUAL HIERARCHY (refined 2026-05-26)
   Order is fixed: Home · Rankings · Dashboard · Draft Wizard ·
   Research · Tools · Methodology.

   Per-tab character (NOT per-tab importance):
     • Home          - baseline
     • Rankings      - baseline (don't out-weight operational tabs)
     • Dashboard     - LIVE (red dot + bold + soft accent ring)
     • Draft Wizard  - LIVE (red dot + bold)
     • Research      - DEEP (slight weight bump, tighter tracking,
                       no dot - communicates intelligence/density)
     • Tools         - baseline (utility tab; stays quiet)
     • Methodology   - QUIET (lighter color, lighter weight, extra
                       left padding so it visually drifts right and
                       reads as a footnote rather than peer nav)
   ═══════════════════════════════════════════════════════════════ */

/* ── LIVE tabs: Dashboard + Draft Wizard ───────────────────────── */
/* Each rail item carries its own --tab-color from the workspace hue
   family - Dashboard dot = red, Draft Wizard dot = orange - no longer
   a single global red. Rules below paint the dot, active underline,
   and hover state from --tab-color (with sensible fallback). */
.layer1-rail__item[data-route="rankings"]      { --tab-color: #3A6FF7; }
.layer1-rail__item[data-route="dashboard"]     { --tab-color: #C62828; }
.layer1-rail__item[data-route="draft-wizard"]  { --tab-color: #FF7A1A; }
.layer1-rail__item[data-route="research"]      { --tab-color: #00A8B5; }
.layer1-rail__item[data-route="tools"]         { --tab-color: #7C4DFF; }
.layer1-rail__item[data-route="methodology"]   { --tab-color: #6E6E73; }

.layer1-rail__item[data-route="dashboard"] .layer1-rail__label,
.layer1-rail__item[data-route="draft-wizard"] .layer1-rail__label {
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
}
.layer1-rail__item[data-route="dashboard"] .layer1-rail__label::before,
.layer1-rail__item[data-route="draft-wizard"] .layer1-rail__label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tab-color, var(--accent));
  /* Faint accent ring matched to the workspace tone, not the global red */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tab-color, var(--accent)) 22%, transparent);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.layer1-rail__item[data-route="dashboard"].active .layer1-rail__label,
.layer1-rail__item[data-route="draft-wizard"].active .layer1-rail__label {
  position: relative;
}
.layer1-rail__item[data-route="dashboard"].active .layer1-rail__label::after,
.layer1-rail__item[data-route="draft-wizard"].active .layer1-rail__label::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--tab-color, var(--accent));
}
.layer1-rail__item[data-route="dashboard"]:hover .layer1-rail__label,
.layer1-rail__item[data-route="draft-wizard"]:hover .layer1-rail__label {
  color: var(--tab-color, var(--accent)) !important;
}

/* ── DEEP tab: Research (intelligence/depth, no dot) ───────────── */
.layer1-rail__item[data-route="research"] .layer1-rail__label {
  font-weight: 600 !important;          /* heavier than baseline 500 */
  color: var(--ink) !important;
  letter-spacing: 0.005em !important;   /* slightly looser - feels considered */
}
.layer1-rail__item[data-route="research"]:hover .layer1-rail__label {
  color: var(--tab-color, var(--accent)) !important;
}

/* ── QUIET tab: Methodology (footnote / trust layer, drifts right) */
.layer1-rail__item[data-route="methodology"] .layer1-rail__label {
  font-weight: 400 !important;
  color: var(--text-3, #8a857c) !important;
  letter-spacing: 0 !important;
}
.layer1-rail__item[data-route="methodology"] {
  /* Push Methodology rightward - extra left padding creates the
     "footnote / aside" feeling the user described. */
  margin-left: 14px !important;
}
.layer1-rail__item[data-route="methodology"]:hover .layer1-rail__label {
  color: var(--ink) !important;
}
.layer1-rail__item[data-route="methodology"].active .layer1-rail__label {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* ── Rankings + Tools + Home: stay baseline ──────────────────────
   Explicit no-op here so nothing else accidentally adds emphasis
   to them later. They inherit the .layer1-rail__item base styles
   (weight 500, color text-2). */
.layer1-rail__item[data-route="rankings"] .layer1-rail__label,
.layer1-rail__item[data-route="tools"] .layer1-rail__label,
.layer1-rail__item[data-route="home"] .layer1-rail__label {
  font-weight: 500;
  letter-spacing: 0;
}
/* The Research flyout now carries ~70 items across 5 subcategories
   (per the baseball-intelligence-terminal IA). Cap the flyout body's
   height so it scrolls cleanly on shorter viewports rather than
   running off-screen. Other flyouts (Rankings/Tools/Methodology)
   remain well under this cap so the scrollbar only appears when
   actually needed. */
.layer1-flyout__body {
  max-height: calc(100vh - var(--nav-h, 56px) - 80px) !important;
  overflow-y: auto !important;
  /* Subtle scrollbar styling so the dense Research list still feels
     calm. WebKit + Firefox variants. */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 14, 12, 0.18) transparent;
}
.layer1-flyout__body::-webkit-scrollbar {
  width: 6px;
}
.layer1-flyout__body::-webkit-scrollbar-track {
  background: transparent;
}
.layer1-flyout__body::-webkit-scrollbar-thumb {
  background-color: rgba(15, 14, 12, 0.18);
  border-radius: var(--r-3);
}
.layer1-flyout__link {
  color: var(--ink) !important;
  font-weight: 500;
}
.layer1-flyout__link:hover {
  color: var(--accent) !important;
  background: rgba(210, 46, 31, 0.06) !important;
  border-left-color: var(--accent) !important;
}
.layer1-flyout__link.is-active {
  color: var(--accent) !important;
  background: rgba(210, 46, 31, 0.08) !important;
  border-left-color: var(--accent) !important;
}
.layer1-flyout__empty { color: var(--text-2, #6b7280) !important; }

/* Nav status pill */
.nav-status {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  border-radius: 0!important;
  padding: 5px 10px;
}
.nav-status__dot { background: var(--accent) !important; box-shadow: 0 0 0 2px rgba(210,46,31,.25); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ─────────────── Cards / panels - flat, sharp ─────────────── */
.card, .panel, .surface, .module, .tile,
.action-card, .config-panel, .compare-page__shell,
.draft-shell, .edge-shell, .explainer-shell {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0!important;
  box-shadow: none;
  color: var(--text);
  position: relative;
}
.card::before, .panel::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 24px; height: 4px;
  background: var(--accent); pointer-events: none;
}
.card:hover, .tile:hover, .action-card:hover {
  border-color: var(--ink) !important;
  box-shadow: var(--elev-pop);
  transform: translate(-2px,-2px);
  transition: transform .12s ease, box-shadow .12s ease;
}

.card-header, .draft-head, .edge-topbar, .explainer-topbar, .compare-page__topbar {
  border-bottom: 1px solid var(--rule) !important;
  background: var(--bg) !important;
  padding: 14px 18px;
}
.card-header__title, .draft-head__title {
  font-family: var(--font-display);
  color: var(--ink) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

/* ─────────────── Tables - Bloomberg/Stathead hybrid ─────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  /* overflow-x:auto (not hidden) so wide stat tables scroll WITHIN their card on
     narrow screens instead of being clipped + pushing the page wider than the
     viewport. overflow-y stays visible so the page scrolls the rows naturally. */
  overflow-x: auto;
  overflow-y: visible;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
  color: var(--text);
}
thead th {
  position: sticky;
  top: 0;
  background: var(--ink) !important;
  color: var(--bg) !important;
  font-family: var(--font);
  /* Typography audit: data-table column headers were 10px with extreme 0.18em
     tracking — below the 11px legibility floor and hard to scan on dense boards.
     Bump to 11.5px and tighten tracking to 0.10em (the tighter tracking offsets
     the size growth, so multi-column boards don't overflow). */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent) !important;
  padding: 11px 14px;
  text-align: left;
  z-index: 2;
}
tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-size: 13px;
  background: transparent;
}
tbody tr { transition: background .1s ease, box-shadow .1s ease; background: var(--surface) !important; }
tbody tr:nth-child(even) { background: var(--surface-soft) !important; }
tbody tr:hover {
  background: var(--bg-tinted) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
tbody tr:last-child td { border-bottom: 0; }

/* Numeric cells */
td.num, th.num, td[data-num], th[data-num],
.col-proj, .col-sigma, .col-delta, .col-rank,
td.col-proj, td.col-sigma, td.col-delta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font);
}

.col-rank, td.col-rank {
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  color: var(--text-3);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  width: 48px;
}
tbody tr:hover .col-rank { color: var(--accent); }

.col-player { color: var(--ink); }
.col-player a, .col-player .player, .col-player strong {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 15px;
  text-decoration: none;
}
.col-player a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

.col-proj { color: var(--ink); font-weight: 700; font-size: 13.5px; }
.col-sigma { color: var(--text-3); }
.col-delta { font-weight: 700; }
.col-delta.is-up, .col-delta[data-dir="up"], .col-delta.pos { color: var(--pos); }
.col-delta.is-down, .col-delta[data-dir="down"], .col-delta.neg { color: var(--neg); }

/* ─────────────── Tabs ─────────────── */
/* .lab-filters (studies filter chips) + .research-subnav are matched here by
   CLASS, not role, so they keep this exact treatment after their incorrect
   role="tablist" was removed for a11y (aria-required-children). The rule that
   was previously applied via [role="tablist"] now applies via the class →
   computed styles are byte-identical (verified before/after). */
[role="tablist"], .lab-filters, .research-subnav, .tabs, .tab-bar, .awards-subtabs {
  display: inline-flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
[role="tablist"]::-webkit-scrollbar, .lab-filters::-webkit-scrollbar, .research-subnav::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

[role="tab"], .tab, .tab-bar a, .tab-bar button, .awards-subtabs button {
  padding: 12px 18px;
  margin-bottom: -1px;
  border-radius: 0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .12s ease, border-color .12s ease;
}
[role="tab"]:hover, .tab:hover, .tab-bar a:hover, .tab-bar button:hover { color: var(--ink); }
[role="tab"][aria-selected="true"],
.tab.is-active, .tab--active,
.tab-bar .is-active,
.tab-bar [aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent) !important;
  background: transparent;
  font-weight: 700;
}

/* ─────────────── Badges / chips ─────────────── */
/* Scope away from <td>/<th>/<tr> - cells in this app reuse class names like
   .tag and .trend which would otherwise inherit pill backgrounds. */
.badge:not(td):not(th), .pill:not(td):not(th), .chip:not(td):not(th),
.tag:not(td):not(th):not(tr),
.hero__chip, .hero__preview-pill, .config-pill,
.fypd-board-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 0;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}
.hero__chip { background: var(--ink); color: var(--bg); border: 0; padding: 6px 12px; }
.hero__chip-dot { background: var(--accent); box-shadow: 0 0 0 2px rgba(210,46,31,.35); animation: pulse 2s ease-in-out infinite; }
.hero__chip-text { font-family: var(--font); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); }

.tag.elite, .badge.elite, [data-tag="elite"], .tag--elite {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.tag.upside, .tag.upswing, [data-tag="upside"], [data-tag*="upside" i], .tag--upside {
  background: var(--pos); color: #fff; border-color: var(--pos);
}
.tag.value, [data-tag="value"], .tag--value {
  background: var(--bg-tinted); color: var(--ink); border-color: var(--rule);
}
.tag.flyer, .tag.warning, [data-tag="flyer"], .tag--flyer {
  background: var(--warn); color: #fff; border-color: var(--warn);
}
.tag.specialist, .tag.category, [data-tag*="category" i], .tag--category {
  background: var(--neg); color: #fff; border-color: var(--neg);
}

/* ─────────────── Buttons ─────────────── */
button, .btn {
  font-family: var(--font);
  transition: transform .1s ease, background .12s ease, box-shadow .12s ease;
}
button:active, .btn:active { transform: translate(2px,2px); box-shadow: none !important; }

.btn {
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:hover { background: var(--bg-tinted); transform: translate(-1px,-1px); box-shadow: var(--elev-pop); }

.btn--primary, button[data-variant="primary"],
.hero__cta--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  padding: 12px 22px !important;
  border-radius: 0!important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  box-shadow: var(--elev-pop) !important;
}
.btn--primary:hover, .hero__cta--primary:hover {
  background: var(--accent-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: var(--elev-pop-lg) !important;
}
.btn--danger { background: var(--neg) !important; border-color: var(--ink) !important; color: #fff !important; }

.hero__cta--ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0!important;
  padding: 12px 22px !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  box-shadow: var(--elev-pop) !important;
}
.hero__cta--ghost:hover { background: var(--bg-tinted) !important; transform: translate(-1px,-1px); box-shadow: var(--elev-pop-lg) !important; }

.site-nav__chrome-btn {
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-2) !important;
  border-radius: 0!important;
}
.site-nav__chrome-btn:hover { color: var(--ink) !important; border-color: var(--ink) !important; }

.config-pill {
  padding: 7px 12px;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--font);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.config-pill:hover { color: var(--accent); border-color: var(--ink); background: var(--surface); }
.config-pill__icon, .config-pill__chevron { color: var(--text-3); }

/* ─────────────── HERO - full editorial redesign ─────────────── */
.hero {
  color: var(--text);
  /* Top padding clears the sticky nav with breath. Trimmed in 2026-05-27
     home polish - was 48-96 / 40-80, now 36-64 / 28-48 to compact the
     5243px page. Still reads premium, just less luxurious. */
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 48px) !important;
  text-align: left !important;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.hero::before {
  content: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  bottom: 0;
  height: 1px;
  background: var(--rule);
}

.hero__chip {
  display: inline-flex !important;
  margin: 0 0 28px !important;
}

.hero__title {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
  font-size: clamp(64px, 13vw, 180px) !important;
  line-height: 0.88 !important;
  margin: 0 0 24px !important;
  display: block !important;
  font-variation-settings: "opsz" 144 !important;
}
.hero__title .gradient,
.hero__title em, .hero__title i {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--accent) !important;
  font-weight: 900;
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* Tame the inline headset SVG inside the hero title */
.brand-headset--hero {
  width: 0.7em !important;
  height: 0.7em !important;
  vertical-align: -0.06em;
  margin-right: 0.12em;
  stroke: var(--ink);
  display: inline-block;
}

.hero__lede {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: -0.015em !important;
  max-width: 720px;
  margin: 0 0 20px !important;
}
.hero__lede br { display: none; }

.hero__tagline {
  color: var(--text-2) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 640px;
  margin: 0 0 36px !important;
  font-weight: 400;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

.hero__ctas {
  display: flex !important;
  gap: 18px !important;
  justify-content: flex-start !important;
  margin: 0 0 56px !important;
  flex-wrap: wrap;
}

/* Quickmap as a brutalist 4-up grid */
.hero__quickmap {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero__quickmap li {
  margin: 0 !important;
  border-right: 1px solid var(--hairline);
}
.hero__quickmap li:last-child { border-right: 0; }
.hero__quickmap a {
  display: block !important;
  padding: 22px 18px !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: background .12s ease;
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0!important;
}
.hero__quickmap a:hover { background: var(--surface) !important; color: var(--accent) !important; }
.hero__quickmap b {
  display: block !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 4px;
}
.hero__quickmap a:hover b { color: var(--accent); }
.hero__quickmap span {
  display: block;
  /* Body-text font (was mono uppercase). Matches the hero tagline. */
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

/* Hero stat bar - oversized newsprint figures */
.hero__signals {
  display: grid !important;
  /* 5 columns (dropped the duplicate-165 research-studies tile). */
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  /* Same width + centering as .hero__quickmap so the two rows align. */
  max-width: 1080px !important;
  margin: 32px auto 48px !important;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0 !important;
}
@media (max-width: 900px) {
  .hero__signals { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .hero__signals { grid-template-columns: repeat(2, 1fr) !important; }
}
.hero__signal {
  padding: 24px 18px 22px !important;
  border-right: 1px solid var(--hairline);
  background: transparent !important;
  text-align: left !important;
}
.hero__signal:last-child { border-right: 0; }
.hero__signal-num {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 8px !important;
  font-variation-settings: "opsz" 144;
}
/* 5-tile hero stat row - reverted from rainbow (May 27 v2) back to the
   brand alternating pattern. Tiles 1, 3, 5 get the brand red accent
   (the visual heartbeat). Tiles 2 and 4 stay ink. Simpler, less busy. */
.hero__signal:nth-child(1) .hero__signal-num,
.hero__signal:nth-child(3) .hero__signal-num,
.hero__signal:nth-child(5) .hero__signal-num,
#heroSignalSims,
#heroSignalProspects,
#heroSignalLayers { color: var(--accent) !important; font-style: normal; }
.hero__signal-lbl {
  /* Body-text font (was mono). Matches the hero tagline + quickmap. */
  font-family: var(--font) !important;
  color: var(--text-2) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Hero preview chrome */
.hero__preview {
  margin-top: 24px;
}
.hero__preview-frame {
  background: var(--surface) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0!important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}
.hero__preview-chrome {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
  padding: 10px 14px !important;
}
.hero__preview-url { font-family: var(--font); color: var(--bg); font-size: 11px; letter-spacing: 0.06em; }
.hero__preview-status { font-family: var(--font); color: var(--accent-2); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.hero__preview-status-dot { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.hero__preview-tab.is-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

/* Hero preview table - fixed grid so tag chips and trend lines cannot collide */
.hero__preview-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.hero__preview-table .col-rank { width: 48px !important; }
.hero__preview-table .col-proj { width: 76px !important; }
.hero__preview-table .col-sigma { width: 58px !important; }
.hero__preview-table .col-delta { width: 88px !important; }
.hero__preview-table .col-tag { width: 172px !important; }
.hero__preview-table .col-trend { width: 132px !important; }
/* Hero preview: scroll the fixed-width columns instead of overflowing on small screens */
.hero__preview-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .hero__preview-table { min-width: 520px !important; } }
.hero__preview-table thead th {
  padding: 9px 12px !important;
  font-size: 9.5px !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-bottom: 2px solid var(--accent) !important;
}
.hero__preview-table tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  font-size: 12.5px;
  border-bottom: 1px solid var(--hairline) !important;
  height: 58px !important;
  overflow: hidden !important;
}
.hero__preview-table tbody tr { background: var(--surface) !important; }
.hero__preview-table tbody tr:nth-child(even) { background: var(--surface-soft) !important; }
.hero__preview-table tbody tr:hover { background: var(--bg-tinted) !important; box-shadow: inset 3px 0 0 var(--accent); }

/* Rank cell in hero preview uses .rank (not .col-rank) */
.hero__preview-table td.rank {
  width: 36px;
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  color: var(--text-3);
  font-size: 11.5px;
}
/* Player cell - name + position inline */
.hero__preview-table td.player {
  display: table-cell !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.hero__preview-name {
  display: inline-block !important;
  max-width: calc(100% - 72px);
  min-width: 0 !important;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
  letter-spacing: -0.01em;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.hero__preview-pos {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-tinted);
  color: var(--text-2);
  border: 1px solid var(--hairline);
  vertical-align: middle;
  max-width: 64px;
  overflow: hidden;
  white-space: nowrap;
}
/* Empty cell classes (.tag, .trend on TDs) should have NO background pill */
.hero__preview-table td.tag,
.hero__preview-table td.trend {
  background: transparent !important;
  color: var(--text-2) !important;
  border: 0;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 10px 12px !important;
  min-width: 0;
  font-family: var(--font);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.hero__preview-table td.tag {
  white-space: normal !important;
  overflow: hidden !important;
}
.hero__preview-table td.tag > *,
.hero__preview-tag {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 0!important;
  font-family: var(--font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-tint) !important;
}
.hero__preview-table td.num { font-family: var(--font); font-size: 12.5px; }
.hero__preview-table td.num.strong { color: var(--ink); font-weight: 700; }
.hero__preview-table td.num.muted { color: var(--text-3); }
.hero__preview-table td.num.up,
.hero__preview-table td.num.down {
  display: table-cell !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: var(--accent) !important;
}
.hero__preview-table .delta-icon {
  width: 7px !important;
  height: 7px !important;
  margin-right: 4px !important;
  vertical-align: 1px !important;
}

/* Trend sparklines: clip to cell height */
.hero__preview-table td.trend {
  padding-left: 8px !important;
  padding-right: 14px !important;
  overflow: hidden !important;
}
.hero__preview-table td.trend svg,
.hero__preview-table td.trend canvas {
  display: block !important;
  vertical-align: middle;
  width: 100% !important;
  max-width: 108px !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Footer */
.hero__preview-footnote {
  border-top: 1px solid var(--rule);
  background: var(--bg) !important;
  padding: 8px 14px !important;
  font-family: var(--font);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.hero__preview-footnote kbd {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--ink);
}


/* ─────────────── Section headings throughout ─────────────── */
.section-header, .compare-page__sectionhead, .draft-section__head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* ─────────────── Scrollbars ─────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 0;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: var(--bg); }

/* ─────────────── Focus rings ─────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: 0;
}

/* ─────────────── Misc ─────────────── */
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
hr { border: 0; border-top: 1px solid var(--rule); }
code, kbd, pre {
  font-family: var(--font-mono);
  color: var(--accent-deep);
  background: var(--bg-tinted);
  border: 1px solid var(--hairline);
  padding: 1px 5px;
  border-radius: 0;
  font-size: 12px;
}
::selection { background: var(--accent); color: #fff; }

/* Drop-cap flourish for editorial paragraphs (opt-in via class) */
.editorial-lede::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--accent);
  font-style: normal;
}

/* ─────────────── Responsive ─────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  thead th, tbody td { padding: 10px 12px; font-size: 12.5px; }
  .hero__quickmap { grid-template-columns: repeat(2, 1fr) !important; }
  .hero__quickmap li:nth-child(2) { border-right: 0; }
  .hero__quickmap li:nth-child(1), .hero__quickmap li:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .hero__signals { grid-template-columns: repeat(2, 1fr) !important; }
  .hero__signal:nth-child(2) { border-right: 0; }
  .hero__signal:nth-child(1), .hero__signal:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --nav-h: 56px; }
  .site-nav__inner { flex-wrap: wrap; gap: 8px; }
  /* Mobile nav links scroll horizontally (6 links don't fit 375px). Add a
     right-edge fade mask so the scroll affordance is VISIBLE — without it the
     row reads as truncated. Thin momentum scroll; links don't shrink. */
  .layer1-rail__items--horizontal {
    order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .layer1-rail__items--horizontal::-webkit-scrollbar { display: none; }
  .layer1-rail__items--horizontal > * { flex: 0 0 auto; }
  .player-search { flex: 1; min-width: 0; }
  h1, .h1 { line-height: 1.0; }
  .hero { padding: 32px 18px !important; }
  .hero::before { display: none; }
  .hero__title { font-size: clamp(54px, 18vw, 96px) !important; }
  .hero__lede { font-size: 20px !important; }
  table { font-size: 12.5px; }
  thead th { font-size: 10.5px; padding: 9px 10px; }
  tbody td { padding: 10px; }
  [role="tab"], .tab { padding: 10px 12px; font-size: 10.5px; }
}

@media (prefers-color-scheme: dark) {
  html, body { background: var(--bg) !important; color: var(--text); }
}

/* ============================================================
   BRUTALIST SCOREBOARD HERO
   ============================================================ */
.hero { position: relative; }
.hero .hero-scene { opacity: 0.04 !important; }
.hero__quickmap, .hero__signals, .hero__preview { position: relative; z-index: 2; }

.hero-scoreboard {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 24px auto 56px;
  padding: 0 16px;
}
.hero-scoreboard__frame {
  background: var(--surface);
  border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  padding: 28px 28px 24px;
  position: relative;
}
.hero-scoreboard__frame::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--hairline-strong);
  pointer-events: none;
}

/* Header row */
.hero-scoreboard__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 24px;
}
.hero-scoreboard__meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.hero-scoreboard__ver {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.hero__title--scoreboard {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(56px, 10vw, 128px) !important;
  line-height: 0.85 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase;
  margin: 0 !important;
  display: flex; align-items: center; gap: 14px;
  color: var(--ink);
}
.hero__title--scoreboard .gradient {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.hero__title--scoreboard .brand-headset--hero {
  width: clamp(40px, 7vw, 84px);
  height: clamp(40px, 7vw, 84px);
  flex-shrink: 0;
  color: var(--ink);
}
.hero-scoreboard__headR { text-align: right; }
.hero-scoreboard__kicker {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.hero__tagline--scoreboard {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
  max-width: 340px;
  margin: 0 0 0 auto !important;
  text-align: right;
}

/* Jumbotron */
.hero-jumbotron {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--ink);
  border: 4px solid var(--ink);
  margin-bottom: 24px;
}
.hero-jumbotron__cell {
  background: var(--surface);
  padding: 22px 22px 20px;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero-jumbotron__cell--center {
  background: var(--ink);
  color: var(--surface);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero-jumbotron__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.hero-jumbotron__eyebrow--inv { color: rgba(255,255,255,0.55); }
.hero-jumbotron__eyebrow--accent { color: var(--accent); margin-top: 8px; margin-bottom: 0; }
.hero-jumbotron__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero-jumbotron__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hero-jumbotron__lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.hero-jumbotron__val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-jumbotron__big {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}
.hero-jumbotron__meter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-family: 'Figtree', sans-serif;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
}
.hero-jumbotron__meter .bar {
  flex: 0 0 110px;
  height: 8px;
  background: rgba(15,14,12,0.08);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
  display: block;
}
.hero-jumbotron__meter .bar i {
  display: block; height: 100%;
  background: var(--ink);
}

/* Action bar */
.hero-scoreboard__actions {
  display: flex; gap: 14px; align-items: stretch;
}
.hero__cta--scoreboard {
  flex: 1;
  justify-content: center;
  padding: 18px 28px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0!important;
}
.hero__cta--primary.hero__cta--scoreboard {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: 4px solid var(--ink) !important;
  border-bottom-color: var(--accent) !important;
  border-right-color: var(--accent) !important;
  box-shadow: none !important;
  transition: transform 0.15s ease;
}
.hero__cta--primary.hero__cta--scoreboard:hover { transform: translate(-2px, -2px); }
.hero__cta--ghost.hero__cta--scoreboard {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 4px solid var(--ink) !important;
  transition: all 0.15s ease;
}
.hero__cta--ghost.hero__cta--scoreboard:hover {
  background: var(--ink) !important;
  color: var(--surface) !important;
}
.hero-scoreboard__sync {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end;
  padding: 0 16px;
  border-left: 4px solid var(--ink);
}
.hero-scoreboard__sync-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-3);
}
.hero-scoreboard__sync-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
}

@media (max-width: 860px) {
  .hero-scoreboard__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-scoreboard__headR { text-align: left; }
  .hero__tagline--scoreboard { text-align: left; margin-left: 0 !important; }
  .hero-jumbotron { grid-template-columns: 1fr; }
  .hero-scoreboard__actions { flex-direction: column; }
  .hero-scoreboard__sync {
    border-left: none;
    border-top: 4px solid var(--ink);
    padding: 12px 0 0;
    align-items: flex-start;
  }
  .hero-scoreboard__frame { padding: 18px; }
}

/* ── Scoreboard refinement: less brutal, more refined ── */
.hero-scoreboard__frame {
  border-width: 1px !important;
  border-color: var(--hairline-strong) !important;
  border-radius: var(--r-14)!important;
  box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -30px rgba(15,14,12,0.18) !important;
  padding: 32px !important;
}
.hero-scoreboard__frame::before { display: none !important; }

.hero-scoreboard__head {
  border-bottom: 1px solid var(--hairline) !important;
  padding-bottom: 28px !important;
  margin-bottom: 28px !important;
}

.hero__title--scoreboard {
  font-weight: 800 !important;
  font-size: clamp(48px, 8vw, 104px) !important;
  letter-spacing: -0.055em !important;
  text-transform: none !important;
}

.hero-jumbotron {
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  background: var(--hairline) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-10)!important;
  overflow: hidden !important;
}
.hero-jumbotron__cell { min-height: 0 !important; padding: 24px !important; }

.hero__cta--scoreboard {
  border-width: 1.5px !important;
  border-radius: var(--r-8)!important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.05em !important;
  padding: 16px 24px !important;
}
.hero__cta--primary.hero__cta--scoreboard {
  border-bottom-color: var(--ink) !important;
  border-right-color: var(--ink) !important;
}
.hero__cta--primary.hero__cta--scoreboard:hover { transform: none !important; opacity: 0.92; }

.hero-scoreboard__sync {
  border-left: 1px solid var(--hairline) !important;
}

@media (max-width: 720px) {
  .hero-jumbotron { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CLEAN MODE - Baseball Savant inspired
   Strip the frame entirely. Just airy whitespace,
   hairline dividers, sans-serif, content forward.
   ============================================================ */
.hero-scoreboard {
  max-width: 1200px !important;
  margin: 8px auto 40px !important;
  padding: 0 24px !important;
}
.hero-scoreboard__frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0!important;
  box-shadow: none !important;
  padding: 8px 0 0 !important;
}

/* Header: simple, no big borders */
.hero-scoreboard__head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding-bottom: 28px !important;
  margin-bottom: 36px !important;
  text-align: left !important;
}
.hero-scoreboard__meta { margin-bottom: 4px !important; }
.hero-scoreboard__ver {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
}

.hero__title--scoreboard {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(44px, 7vw, 88px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.hero__title--scoreboard .brand-headset--hero {
  width: clamp(36px, 5vw, 56px) !important;
  height: clamp(36px, 5vw, 56px) !important;
}
.hero__title--scoreboard .gradient {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

.hero-scoreboard__headR { text-align: left !important; }
.hero-scoreboard__kicker {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--text-3) !important;
  margin: 0 0 10px !important;
}
.hero__tagline--scoreboard {
  font-family: 'Figtree', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  max-width: 640px !important;
  margin: 0 !important;
  text-align: left !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Jumbotron → clean two-column data strip, no frame */
.hero-jumbotron {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0!important;
  overflow: visible !important;
  margin-bottom: 36px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.hero-jumbotron__cell {
  background: transparent !important;
  padding: 4px 28px 4px 0 !important;
  border: 0 !important;
}
.hero-jumbotron__cell + .hero-jumbotron__cell {
  border-left: 1px solid var(--hairline) !important;
  padding-left: 28px !important;
  padding-right: 0 !important;
}
.hero-jumbotron__eyebrow {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 12px !important;
}
.hero-jumbotron__name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
  color: var(--ink) !important;
}
.hero-jumbotron__stats { gap: 28px !important; }
.hero-jumbotron__lbl {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--text-3) !important;
  font-weight: 600 !important;
}
.hero-jumbotron__val {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.hero-jumbotron__meter {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}
.hero-jumbotron__meter .bar {
  flex: 0 0 140px !important;
  height: 6px !important;
  border: 0 !important;
  background: var(--hairline) !important;
  border-radius: var(--r-3)!important;
}
.hero-jumbotron__meter .bar i { border-radius: var(--r-3)!important; }

/* Action bar - clean buttons, no border frames */
.hero-scoreboard__actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
.hero__cta--scoreboard {
  flex: 0 0 auto !important;
  padding: 14px 26px !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: var(--r-6)!important;
}
.hero__cta--primary.hero__cta--scoreboard {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
}
.hero__cta--primary.hero__cta--scoreboard:hover {
  background: var(--accent-deep) !important;
  opacity: 1 !important;
}
.hero__cta--ghost.hero__cta--scoreboard {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline-strong) !important;
}
.hero__cta--ghost.hero__cta--scoreboard:hover {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
}
.hero-scoreboard__sync {
  margin-left: auto !important;
  border-left: 0 !important;
  padding: 0 !important;
  align-items: flex-end !important;
}
.hero-scoreboard__sync-lbl { color: var(--text-3) !important; }
.hero-scoreboard__sync-val { color: var(--text-2) !important; }

@media (max-width: 720px) {
  .hero-jumbotron { grid-template-columns: 1fr !important; padding-bottom: 20px !important; }
  .hero-jumbotron__cell + .hero-jumbotron__cell {
    border-left: 0 !important;
    border-top: 1px solid var(--hairline) !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
  }
}

/* ============================================================
   CLEAN HERO v2 - Baseball Savant style
   Light, airy, no frames, no all-caps shouting
   ============================================================ */
.hero-clean {
  max-width: 1200px;
  margin: 0 auto 56px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}

/* Reduce the background scene noise further */
.hero .hero-scene { opacity: 0.025 !important; }

.hero__chip--clean {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 999px!important;
  padding: 5px 12px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-2) !important;
  margin-bottom: 28px !important;
}
.hero__chip--clean .hero__chip-dot {
  width: 6px !important; height: 6px !important;
  background: var(--accent) !important;
  border-radius: 50%!important;
  box-shadow: none !important;
}
.hero__chip--clean .hero__chip-text {
  color: var(--text-2) !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero__title--clean {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(56px, 9vw, 112px) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
  margin: 0 0 24px !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-transform: none !important;
}
.hero__title--clean .brand-headset--hero {
  width: clamp(40px, 6vw, 64px) !important;
  height: clamp(40px, 6vw, 64px) !important;
  stroke-width: 1.4 !important;
}
.hero__title--clean .gradient {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}

.hero__tagline--clean {
  font-family: 'Figtree', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  max-width: 540px !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: 0 !important;
}

.hero__ctas--clean { display: flex; gap: 12px; align-items: center; }
.hero__cta--clean {
  padding: 12px 22px !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--r-8)!important;
  transition: all 0.15s ease !important;
}
.hero__cta--primary.hero__cta--clean {
  background: var(--accent) !important;
  color: #fff !important;
  /* Match the View Prospects (ghost) button's outline so the two CTAs
     read as a paired set. View Prospects uses var(--hairline-strong)
     (rgba(15,14,12,.22)) which reads clearly on its white bg; on the
     red bg here we need a stronger dark to achieve the same perceived
     darkness, so use var(--ink) (full dark) instead. */
  border: 1px solid var(--ink) !important;
  /* Brutalist solid drop shadow to match the visual weight of View
     Prospects. Same offset + dark tone so the two CTAs sit as a paired
     elevated set rather than the primary looking flat next to the ghost. */
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.hero__cta--primary.hero__cta--clean:hover {
  background: var(--accent-deep) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--elev-pop-lg) !important;
}
.hero__cta--ghost.hero__cta--clean {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  /* Matched brutalist drop shadow paired with the primary CTA. */
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.hero__cta--ghost.hero__cta--clean:hover {
  background: var(--bg-soft) !important;
  border-color: var(--ink) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--elev-pop-lg) !important;
}

/* Right card - trending players */
.hero-clean__card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-12);
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15,14,12,0.03);
}
.hero-clean__card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.hero-clean__card-head h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-clean__card-link {
  font-family: 'Figtree', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.hero-clean__card-link:hover { color: var(--accent-deep); }

.hero-clean__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-clean__list li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: 'Figtree', sans-serif;
}
.hero-clean__list li:last-child { border-bottom: 0; }
.hero-clean__rk {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hero-clean__nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 1px;
}
.hero-clean__nm small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.hero-clean__delta {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-clean__delta--up { color: var(--pos); }
.hero-clean__delta--down { color: var(--neg); }

@media (max-width: 860px) {
  .hero-clean { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   SAVANT MODE - global modernization overlay (final cascade)
   Mandate: kill the newsprint/brutalist chrome on app surfaces
   (Rankings, Research, Operations, Draft, Methodology).
   Hero/home pages keep their editorial treatment.
   Strategy: white surfaces, soft hairlines, sentence case,
   muted slate ink, blue accent. No all-caps mono eyebrows.
   ============================================================ */

:root, :root[data-force-light] {
  --sv-bg:           #ffffff;
  --sv-bg-soft:      #f7f8fa;
  --sv-surface:      #ffffff;
  --sv-surface-alt:  #f7f8fa;
  --sv-hairline:     rgba(15, 23, 42, 0.08);
  --sv-hairline-2:   rgba(15, 23, 42, 0.14);
  --sv-ink:          #0f172a;
  --sv-ink-2:        #334155;
  --sv-ink-3:        #64748b;
  --sv-ink-4:        #94a3b8;
  --sv-blue:         #0b6cb8;
  --sv-blue-hover:   #095a9a;
  --sv-blue-soft:    rgba(11, 108, 184, 0.08);
  --sv-pos:          #0a7d4a;
  --sv-neg:          #c8202b;
  --sv-radius:       6px;
  --sv-radius-lg:    10px;
  --sv-font:         -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --sv-mono:         ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

/* Strip newsprint background on app routes (keep hero pages alone) */
body[data-route="rankings"],
body[data-route="research"],
body[data-route="operations"],
body[data-route="draft"],
body[data-route="methodology"],
body[data-route="injuries"],
body[data-route="trade"],
body[data-route="risers"],
body[data-route="audit"],
body[data-route="health"],
body[data-route="explain"] {
  background: var(--sv-bg) !important;
  color: var(--sv-ink);
  font-family: var(--sv-font);
  letter-spacing: 0 !important;
}

body[data-route="rankings"] *,
body[data-route="research"] *,
body[data-route="operations"] *,
body[data-route="draft"] *,
body[data-route="methodology"] *,
body[data-route="injuries"] *,
body[data-route="trade"] *,
body[data-route="risers"] * {
  font-variation-settings: normal;
}

body[data-route="rankings"] .page,
body[data-route="research"] .page,
body[data-route="operations"] .page,
body[data-route="methodology"] .page,
body[data-route="injuries"] .page,
body[data-route="trade"] .page,
body[data-route="risers"] .page {
  background: var(--sv-bg) !important;
}

/* ─── Top nav: cleaner, with visible chrome buttons ─── */
.site-nav {
  background: var(--sv-bg) !important;
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: none !important;
  font-family: var(--sv-font);
}
.site-nav__inner { padding: 14px 28px !important; gap: 28px; }
.site-nav__logo-name,
.site-nav__logo-name * {
  font-family: var(--sv-font) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
  color: var(--sv-ink) !important;
  text-transform: none !important;
}
/* Wordmark accent "r": bright sky on the navy nav. Was var(--accent) (#1d5fa7) =
   2.25:1 contrast = fails AA → the logo read "manag". #5ea3e6 ≈ 5.4:1, passes.
   .site-nav prefix bumps specificity so this wins the cascade decisively. */
.site-nav .site-nav__logo-name span { color: #5ea3e6 !important; }
.layer1-rail__item {
  font-family: var(--sv-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sv-ink-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 12px !important;
  border-radius: var(--sv-radius) !important;
}
.layer1-rail__item:hover { color: var(--sv-ink) !important; background: var(--sv-bg-soft) !important; }
.layer1-rail__item.is-active,
.layer1-rail__item[aria-current="page"] {
  color: var(--sv-blue) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--sv-blue) !important;
  border-radius: 0!important;
}

.player-search {
  background: var(--sv-bg-soft) !important;
  border: 1px solid var(--sv-hairline) !important;
  border-radius: 999px!important;
  padding: 6px 14px 6px 32px !important;
  min-width: 260px;
  box-shadow: none !important;
}
.player-search:focus-within {
  border-color: var(--sv-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px var(--sv-blue-soft) !important;
}
.player-search__input {
  /* Body-text font so placeholder + typed text match the hero tagline. */
  font-family: var(--font) !important;
  font-size: 13px !important;
  background: transparent !important;
  color: var(--sv-ink) !important;
}
.player-search__icon { color: var(--sv-ink-3) !important; }

.site-nav__chrome { gap: 6px; }
.site-nav__chrome-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px!important;
  background: transparent !important;
  border: 1px solid var(--sv-hairline) !important;
  color: var(--sv-ink-2) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 120ms ease;
}
.site-nav__chrome-btn:hover {
  background: var(--sv-bg-soft) !important;
  color: var(--sv-ink) !important;
  border-color: var(--sv-hairline-2) !important;
}
.site-nav__chrome-btn svg { display: block; stroke: currentColor; }

/* ─── Kill all-caps mono eyebrows across app surfaces ─── */
body[data-route="rankings"] .eyebrow,
body[data-route="rankings"] .card-header__meta,
body[data-route="rankings"] .sort-meta,
body[data-route="research"] .eyebrow,
body[data-route="research"] .card-header__meta,
body[data-route="operations"] .eyebrow,
body[data-route="operations"] .card-header__meta,
body[data-route="draft"] .eyebrow,
body[data-route="draft"] .draft-head__eyebrow,
body[data-route="draft"] .draft-head__sub,
body[data-route="methodology"] .eyebrow,
body[data-route="injuries"] .eyebrow,
body[data-route="trade"] .eyebrow,
body[data-route="risers"] .eyebrow,
body[data-route="rankings"] .scoring-presets__label,
body[data-route="rankings"] .field__label,
body[data-route="rankings"] .roster-summary-item__label,
body[data-route="rankings"] .control-center__row-title,
body[data-route="rankings"] .toolbar__field label {
  font-family: var(--sv-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  color: var(--sv-ink-3) !important;
}

/* ─── Configure pill: subtle inline chip ─── */
/* Single settings line — Configure League (the scoring/league control) then
   Sort by, on one condensed row. Owner: combine the two scoring controls +
   tighten the whitespace above the board. */
body[data-route="rankings"] .config-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 28px 10px !important;
  margin: 0 !important;
}
/* Sort-by dropdown removed site-wide on rankings (owner): tap a column header to
   sort instead. The #sortMode element stays in the DOM (just hidden) so the
   board's default sort + the dynasty "Dynasty Value" relabel logic still resolve
   via $('sortMode').value — only the redundant control is gone. */
body[data-route="rankings"] .config-bar__sort.toolbar__field {
  display: none !important;
}
body[data-route="rankings"] .config-bar__sort label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  margin: 0;
}
body[data-route="rankings"] .config-bar__sort select {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 999px;
  background-color: var(--surface, #fff);
  color: var(--ink);
  cursor: pointer;
}
/* The board card sits directly under the single settings line — drop its legacy
   top margin so the .page gap (14px) is the only separation. Mobile keeps its
   own value in the media block below. */
body[data-route="rankings"] section.card { margin-top: 0 !important; }
body[data-route="rankings"] .config-pill {
  background: var(--sv-bg-soft) !important;
  border: 1px solid var(--sv-hairline) !important;
  border-radius: 999px!important;
  padding: 7px 14px !important;
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sv-ink-2) !important;
  box-shadow: none !important;
  gap: 8px !important;
  /* Spread the Configure-League pill across the full width of the page (owner) —
     it's the only control on the settings line now that Sort-by is gone. */
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
}
/* Push the chevron to the far right of the full-width pill. */
body[data-route="rankings"] .config-pill__chevron { margin-left: auto !important; }
body[data-route="rankings"] .config-pill:hover {
  background: #fff !important;
  border-color: var(--sv-hairline-2) !important;
  transform: none !important;
}
body[data-route="rankings"] .config-pill__icon,
body[data-route="rankings"] .config-pill__chevron {
  color: var(--sv-ink-3) !important;
  font-size: 11px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
body[data-route="rankings"] .config-pill__summary {
  /* wave R: --sv-ink-3 (#64748b) measured 4.47:1 — use the AA muted token */
  color: var(--text-3) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* ─── Risers & Fallers (route "risers") reuses the SHARED Configure League bar
   + #configPanel so it matches the redraft/dynasty boards (owner). The bar is a
   subpage and was display:none — un-hide it here and mirror the rankings-route
   pill styling (the rules above are scoped to data-route="rankings"). The full
   #configPanel itself is global-styled, so it works unchanged. */
/* The config-bar lives in <section data-view="rankings"> which the global
   [data-view]{display:none} hides off the rankings route. Un-hide JUST that
   section on risers (the section[...] selector won't match the redraft board's
   <div id="rankingsPanel" data-view="rankings">, so the board stays hidden), and
   push it to the BOTTOM of the flex .page (owner: "below the risers & fallers
   section") with a high flex order. */
body[data-route="risers"] section[data-view="rankings"] { display: block !important; order: -1; } /* config bar at TOP (by the sort note/filters), not stranded below 50 rows */
/* Buy Low / Sell High: the hero is lifted out of #subPageLanding into this
   slot so it sits ABOVE the Configure League bar (order:-2 < config -1 < board 0).
   Mirrors #subPageLanding's container box so the hero stays width-aligned. */
#rfTopHero { order: -2; width: 100%; max-width: 1320px; margin: 16px auto 0; padding: 0 24px; box-sizing: border-box; }
#rfTopHero:empty { display: none; }
/* Condense the Buy Low / Sell High hero vertically (keep all content). */
#rfTopHero .sub-hero { padding: 13px 22px; }
#rfTopHero .sub-hero__eyebrow { margin-bottom: 2px; }
#rfTopHero .sub-hero__title { font-size: 25px; margin-bottom: 4px; }
#rfTopHero .sub-hero__tag { line-height: 1.4; }
#rfTopHero .sub-hero { margin-bottom: 0; }
/* .page has a 56px workspace gap between flex children — too loose for the
   hero/config/board stack. Tighten it on this route + zero the board top margin. */
body[data-route="risers"] .page { gap: 6px; }
/* close the gap between the Configure League bar and the "Sorted by" line */
body[data-route="risers"] #subPageLanding { margin-top: 0 !important; }
body[data-subpage="true"][data-route="risers"] .config-bar {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 10px 28px !important; margin: 0 0 4px !important;
}
body[data-route="risers"] .config-bar__sort.toolbar__field { display: none !important; }
body[data-route="risers"] .config-pill {
  display: flex !important; width: 100% !important; box-sizing: border-box !important;
  align-items: center !important; gap: 8px !important;
  background: var(--sv-bg-soft) !important; border: 1px solid var(--sv-hairline) !important;
  border-radius: 999px !important; padding: 7px 14px !important; font-family: var(--sv-font) !important;
  font-size: 13px !important; font-weight: 500 !important; text-transform: none !important;
  letter-spacing: 0 !important; color: var(--sv-ink-2) !important; box-shadow: none !important; cursor: pointer;
}
body[data-route="risers"] .config-pill:hover { background: #fff !important; border-color: var(--sv-hairline-2) !important; }
body[data-route="risers"] .config-pill__chevron { margin-left: auto !important; color: var(--sv-ink-3) !important; font-size: 11px !important; }
body[data-route="risers"] .config-pill__summary { color: var(--text-3) !important; font-weight: 400 !important; }

/* ─── Toolbar: integrate with card, no heavy frame ─── */
body[data-route="rankings"] .toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
  box-shadow: none !important;
  padding: 7px 28px 8px !important;   /* condensed — owner: tighten whitespace above the board */
  margin: 4px 0 0 !important;
}
body[data-route="rankings"] .toolbar__inner {
  gap: 18px;
  align-items: center;
}
body[data-route="rankings"] .toolbar__search {
  background: var(--sv-bg-soft) !important;
  border: 1px solid var(--sv-hairline) !important;
  border-radius: 999px!important;
  padding: 0 14px 0 36px !important;
  flex: 0 1 360px;
  box-shadow: none !important;
  position: relative;
}
body[data-route="rankings"] .toolbar__search::before {
  color: var(--sv-ink-3) !important;
  font-size: 13px !important;
  left: 14px !important;
}
body[data-route="rankings"] .toolbar__search input {
  background: transparent !important;
  border: 0 !important;
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  color: var(--sv-ink) !important;
  padding: 8px 0 !important;
}
body[data-route="rankings"] .toolbar__search input:focus { outline: none; }
body[data-route="rankings"] .toolbar__divider {
  width: 1px;
  height: 22px;
  background: var(--sv-hairline) !important;
  border: 0 !important;
}
body[data-route="rankings"] .toolbar__field {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
body[data-route="rankings"] .toolbar__field label {
  color: var(--sv-ink-3) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--sv-font) !important;
}
body[data-route="rankings"] .toolbar__field select {
  background: var(--sv-bg) !important;
  border: 1px solid var(--sv-hairline) !important;
  border-radius: var(--sv-radius) !important;
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sv-ink) !important;
  padding: 7px 28px 7px 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-route="rankings"] .toolbar__field select:hover {
  border-color: var(--sv-hairline-2) !important;
  background: var(--sv-bg-soft) !important;
}

/* ─── Rankings card: kill heavy frame and red strip ─── */
body[data-route="rankings"] .card,
body[data-route="injuries"] .card,
body[data-route="trade"] .card,
body[data-route="risers"] .card,
body[data-route="research"] .card,
body[data-route="operations"] .card,
body[data-route="methodology"] .card {
  background: var(--sv-surface) !important;
  border: 1px solid var(--sv-hairline) !important;
  border-radius: var(--sv-radius-lg) !important;
  box-shadow: none !important;
  margin-top: 18px !important;
  overflow: hidden;
}

/* ─── Rankings: let the card expand to its widest child (the table) ───
   The pos-tabs row was rendering shorter than the table beneath because
   the card was sized to its parent (display:block) while the table inside
   set its own intrinsic width via per-column rules and overflowed.

   Scoped with :has(.pos-tabs) so only the card that actually wraps the
   rankings list gets the auto-width treatment - other cards on the
   rankings route (sidebars, popovers, the Configure League pill, etc.)
   stay block-width.

   width:max-content lets the card grow to its widest child (the table);
   min-width:100% keeps it at least page-wide on narrow viewports. Now
   the pos-tabs row (display:flex) spans the same width as the table and
   the leftmost tab aligns with the table's first column. */
body[data-route="rankings"] .card:has(.pos-tabs) {
  width: max-content !important;
  min-width: 100% !important;
  /* was `none`. 100% clamps the card to the page width so a table wider than the
     viewport (phones AND tablets, ≤ ~960px) scrolls inside .table-wrap
     (overflow-x:auto) instead of being CLIPPED by .page{overflow-x:hidden} and
     made unreachable. On wide screens max-content ≤ 100%, so the card still
     grows to the full table width and pos-tabs aligns with column 1 (the desktop
     intent this rule was written for is preserved). */
  max-width: 100% !important;
}
body[data-route="rankings"] .card::before,
body[data-route="rankings"] .card::after,
body[data-route="rankings"] .card-header::before,
body[data-route="rankings"] .card-header::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

body[data-route="rankings"] .card-header {
  background: var(--sv-surface) !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
  padding: 20px 28px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}
body[data-route="rankings"] .card-header__title {
  /* 2026-05-31: use the canonical editorial display face so the Rankings
     card titles read in the same type voice as every sub-page .sub-hero__title
     (Tiempos/Outfit display), while keeping the data-dense skin's tighter
     size/weight. This is the one cross-surface header-font inconsistency the
     UI audit found; the rest of the site already shares the display stack. */
  font-family: var(--font-display, var(--font-hero, var(--sv-font))) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--sv-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
body[data-route="rankings"] .card-header__meta,
body[data-route="rankings"] .sort-meta {
  color: var(--sv-ink-3) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

/* ─── Hide the hard-coded Rankings workspace-subnav on routes that don't
   own it. The element at index.html ~L1421 has data-parent="rankings" and
   defaults to visible everywhere; without this gate it leaks onto Tools,
   Dashboard, Draft Wizard, etc. (visible Aug-2026 stabilization audit). */
body:not([data-route="rankings"]):not([data-route="injuries"]):not([data-route="trade"]):not([data-route="risers"]):not([data-route="probables"]):not([data-route="twostart"]):not([data-route="injuryreport"]):not([data-route="injurydb"])
  .workspace-subnav--top[data-parent="rankings"] {
  display: none !important;
}

/* Hide the legacy <section class="card"> "Redraft Player Rankings" wrapper
   when the route isn't rankings. Same root cause - legacy markup doesn't
   self-gate. Sub-pages set body[data-subpage] so they're explicitly
   exempted (the subpage renderer hides .card itself elsewhere).
   ALSO exempt the Research terminal (data-research-module="methodology"):
   that same legacy section.card wraps #methodologyPanel, which holds the
   Research Lab studies + awards/staff/wbc. Without this exclusion the rule's
   high specificity (0,11,2) beat the styles.css "show" rule (0,3,2) and the
   studies/awards/staff/wbc terminal rendered into a display:none card. The
   router resets data-research-module to '' off these routes, so the Research
   HUB (#/research) is unaffected and the legacy card stays hidden there. */
body:not([data-route="rankings"]):not([data-route="injuries"]):not([data-route="trade"]):not([data-route="risers"]):not([data-route="probables"]):not([data-route="twostart"]):not([data-route="injuryreport"]):not([data-route="injurydb"]):not([data-subpage="true"]):not([data-research-module="methodology"])
  > .page > section.card {
  display: none !important;
}

/* ─── Workspace subnav (Redraft/Dynasty/Risers…): clean pill nav ─── */
body[data-route="rankings"] .workspace-subnav,
body[data-route="injuries"] .workspace-subnav,
body[data-route="trade"] .workspace-subnav,
body[data-route="risers"] .workspace-subnav,
body[data-route="probables"] .workspace-subnav,
body[data-route="twostart"] .workspace-subnav,
body[data-route="injuryreport"] .workspace-subnav,
body[data-route="injurydb"] .workspace-subnav {
  background: var(--sv-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
  padding: 6px 20px !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
/* Hide only the "Rankings" category label - keep the group dividers (styled
   red below) across every sub-nav-family route. */
body[data-route="rankings"] .workspace-subnav__category,
body[data-route="injuries"] .workspace-subnav__category,
body[data-route="trade"] .workspace-subnav__category,
body[data-route="risers"] .workspace-subnav__category,
body[data-route="probables"] .workspace-subnav__category,
body[data-route="twostart"] .workspace-subnav__category,
body[data-route="injuryreport"] .workspace-subnav__category,
body[data-route="injurydb"] .workspace-subnav__category {
  display: none !important;
}
/* Red vertical dividers separating the 4 sub-nav groups
   (Rankings | Trends/Streaming | Injuries | Trade | Prospects). */
body[data-route="rankings"] .workspace-subnav__divider,
body[data-route="injuries"] .workspace-subnav__divider,
body[data-route="trade"] .workspace-subnav__divider,
body[data-route="risers"] .workspace-subnav__divider,
body[data-route="probables"] .workspace-subnav__divider,
body[data-route="twostart"] .workspace-subnav__divider,
body[data-route="injuryreport"] .workspace-subnav__divider,
body[data-route="injurydb"] .workspace-subnav__divider {
  display: inline-block !important;
  width: 2px !important;
  height: 20px !important;
  margin: 0 10px !important;
  background: #b23415 !important;
  border-radius: 1px!important;
}
body[data-route="rankings"] .workspace-subnav__link,
body[data-route="injuries"] .workspace-subnav__link,
body[data-route="trade"] .workspace-subnav__link,
body[data-route="risers"] .workspace-subnav__link {
  font-family: var(--sv-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sv-ink-3) !important;
  padding: 8px 14px !important;
  border-radius: var(--sv-radius) !important;
  border: 0 !important;
  background: transparent !important;
}
body[data-route="rankings"] .workspace-subnav__link:hover,
body[data-route="injuries"] .workspace-subnav__link:hover,
body[data-route="trade"] .workspace-subnav__link:hover,
body[data-route="risers"] .workspace-subnav__link:hover {
  color: var(--sv-ink) !important;
  background: var(--sv-bg-soft) !important;
}
body[data-route="rankings"] .workspace-subnav__link.is-active,
body[data-route="rankings"] .workspace-subnav__link.active,
body[data-route="rankings"] .workspace-subnav__link[aria-current="page"],
body[data-route="injuries"] .workspace-subnav__link.is-active,
body[data-route="trade"] .workspace-subnav__link.is-active,
body[data-route="risers"] .workspace-subnav__link.is-active {
  color: var(--sv-blue) !important;
  background: var(--sv-blue-soft) !important;
}

/* ─── Rankings sub-tabs as a flush secondary bar directly beneath the fixed
   top nav (2026-05-29). The element was moved to be the first child of .page
   so it sits at the top of the content; the base .workspace-subnav--top rule
   gave it sticky/top:60px + card chrome (radius/shadow), which floated it ~60px
   below the bar and under the page title. Sticky also doesn't pin here (an
   overflow ancestor breaks it). Override to a flush, full-width static bar. */
body[data-route="rankings"]   .workspace-subnav--top[data-parent="rankings"],
body[data-route="injuries"]   .workspace-subnav--top[data-parent="rankings"],
body[data-route="trade"]      .workspace-subnav--top[data-parent="rankings"],
body[data-route="risers"]     .workspace-subnav--top[data-parent="rankings"],
body[data-route="probables"]  .workspace-subnav--top[data-parent="rankings"],
body[data-route="twostart"]   .workspace-subnav--top[data-parent="rankings"],
body[data-route="injuryreport"] .workspace-subnav--top[data-parent="rankings"],
body[data-route="injurydb"]   .workspace-subnav--top[data-parent="rankings"] {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0!important;
  box-shadow: none !important;
}

/* ─── Position filter tabs (All/C/1B/…/RP) ─── */
body[data-route="rankings"] .pos-tabs,
body[data-route="rankings"] [class*="pos-filter"],
body[data-route="rankings"] [class*="pill-row"] {
  /* display: flex (not inline-flex) so the row spans the full width of its
     parent card. With inline-flex the row was sizing to its content and
     looked cramped/left-floated above the wider table beneath it.
     Horizontal padding bumped 20px → 22px to match the table-wrap's left
     margin so the leftmost tab visually aligns with the table's first
     column. */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 12px 22px !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
}
body[data-route="rankings"] .pos-tab,
body[data-route="rankings"] .pos-tabs button,
body[data-route="rankings"] [class*="pos-filter"] button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px!important;
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sv-ink-2) !important;
  padding: 6px 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-route="rankings"] .pos-tab:hover,
body[data-route="rankings"] .pos-tabs button:hover {
  background: var(--sv-bg-soft) !important;
}
body[data-route="rankings"] .pos-tab.is-active,
body[data-route="rankings"] .pos-tab[aria-selected="true"],
body[data-route="rankings"] .pos-tabs button.is-active,
body[data-route="rankings"] .pos-tabs button[aria-selected="true"] {
  background: var(--sv-ink) !important;
  color: #fff !important;
  border-color: var(--sv-ink) !important;
}

/* ─── Rankings table: clean Savant-style grid ─── */
body[data-route="rankings"] .rankings-table,
body[data-route="rankings"] table {
  background: var(--sv-surface) !important;
  border: 0 !important;
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  color: var(--sv-ink) !important;
  width: 100%;
  border-collapse: collapse !important;
}
body[data-route="rankings"] .rankings-table thead,
body[data-route="rankings"] .rankings-table thead tr,
body[data-route="rankings"] .rankings-table thead th {
  background: var(--sv-bg-soft) !important;
  color: var(--sv-ink-2) !important;
  font-family: var(--sv-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--sv-hairline-2) !important;
  border-top: 0 !important;
  text-align: left;
}
body[data-route="rankings"] .rankings-table thead th::before,
body[data-route="rankings"] .rankings-table thead th::after,
body[data-route="rankings"] .rankings-table thead::before,
body[data-route="rankings"] .rankings-table thead::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}
body[data-route="rankings"] .rankings-table tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
  font-variant-numeric: tabular-nums;
  color: var(--sv-ink) !important;
  background: var(--sv-surface) !important;
}
body[data-route="rankings"] .rankings-table tbody tr:hover td {
  background: var(--sv-blue-soft) !important;
}
body[data-route="rankings"] .rankings-table tbody tr:nth-child(even) td {
  background: var(--sv-bg-soft) !important;
}
body[data-route="rankings"] .rankings-table tbody tr:nth-child(even):hover td {
  background: var(--sv-blue-soft) !important;
}

/* Condense the rankings board rows toward FantasyPros' vertical rhythm. Scoped
   to the live board table (#tableBody — shared by redraft / dynasty / prospects)
   so no other table is touched. Trims the row padding (was 7px) and tightens the
   two-line name cell's ADP sub-line, taking rows ~53px → ~42px without dropping
   any data. */
#tableBody td { line-height: 1.3; }   /* row padding lives in theme-v2.css (4px) */
#tableBody td .row-adp-line { display: block; white-space: nowrap; line-height: 1.1; margin-top: 1px; }
#tableBody td .row-adp { display: inline; font-size: 10px; line-height: 1.1; margin-top: 0; }

/* Prospect Player Rankings (#/rankings/prospects) renders into its own
   #fantasyProspectsBody table (not #tableBody), so it doesn't inherit the tight
   board density — match it here so the rows read like the Redraft/Dynasty board. */
#fantasyProspectsBody .table-wrap table td,
#fantasyProspectsBody .table-wrap table th { padding-top: 3px !important; padding-bottom: 3px !important; line-height: 1.3; }

/* Position badges in the table */
body[data-route="rankings"] .rankings-table .pos-badge,
body[data-route="rankings"] .rankings-table [class*="pos-"] {
  font-family: var(--sv-font);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ─── Sort meta + advanced toggle ─── */
body[data-route="rankings"] #sortMetaLabel {
  color: var(--sv-ink) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
body[data-route="rankings"] .card-header__meta input[type="checkbox"] {
  accent-color: var(--sv-blue) !important;
}

/* ─── Buttons across app routes ─── */
body[data-route="rankings"] .btn,
body[data-route="research"] .btn,
body[data-route="operations"] .btn,
body[data-route="draft"] .btn,
body[data-route="methodology"] .btn {
  font-family: var(--sv-font) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--sv-radius) !important;
  box-shadow: none !important;
}
body[data-route="rankings"] .btn--primary,
body[data-route="research"] .btn--primary {
  /* wave R2 (UI audit P1): primary actions wear the BRAND accent, not the
     makeover blue — the blue Apply was the loudest off-palette element. */
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}
body[data-route="rankings"] .btn--primary:hover {
  background: var(--accent-deep, #8f0c22) !important;
  border-color: var(--accent-deep, #8f0c22) !important;
}

/* ─── Field inputs/selects in config panel ─── */
body[data-route="rankings"] .field__inner,
body[data-route="rankings"] .field__inner select,
body[data-route="rankings"] .field__inner input,
body[data-route="rankings"] .scoring-field__input,
body[data-route="rankings"] .rc-limit-row__input {
  font-family: var(--sv-font) !important;
  border-radius: var(--sv-radius) !important;
}

/* ─── Workspace subnav: kill the red underline on parents ─── */
body[data-route="rankings"] .layer1-rail__item.is-active::after,
body[data-route="rankings"] .layer1-rail__item[aria-current="page"]::after {
  display: none !important;
}

/* Bump cache */

/* Tighten hero wordmark only - keep the nav wordmark uncompressed */
.hero__title .gradient,
.hero__title--clean .gradient,
.hero__title--scoreboard .gradient {
  margin-left: -0.08em !important;
  letter-spacing: -0.06em !important;
}

/* Nav logo: stable spacing so the red r never overlaps the base wordmark */
.site-nav__logo {
  gap: 12px !important;
  min-width: max-content !important;
  overflow: visible !important;
}
.site-nav__logo-name,
.site-nav__logo-name span {
  display: inline !important;
  margin-left: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}
.site-nav .site-nav__logo .site-nav__logo-name > span {
  margin-left: 0 !important;
  letter-spacing: 0 !important;
  color: #5ea3e6 !important;   /* was var(--accent) #1d5fa7 = 2.25:1 fail on navy; #5ea3e6 ≈ 5.4:1 (this is the cascade winner @ specificity 0,3,1) */
}

/* Remove the horizontal nav rule and all active/hover underlines */
.site-nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.layer1-rail__item.is-active,
.layer1-rail__item[aria-current="page"] {
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  color: var(--accent) !important;
}
.layer1-rail__item:hover {
  border-bottom-color: transparent !important;
}
.layer1-rail__item.active::after,
.layer1-rail__item.is-active::after,
.layer1-rail__item[aria-current="page"]::after {
  display: none !important;
}

/* 01/02/03 step numerals on "Three layers, every projection". Was a
   pale standalone #d93640 that read washed-out against the card bg.
   Switched to var(--accent) so they pick up the canonical brand red
   (#b23415). Also bumped font-weight from 400 → 700 because thin
   strokes at 42px visually wash out the color even when the hex is
   correct - the bold weight makes the red read with full saturation.
   Letter-spacing tightened a touch to support the heavier weight. */
.home-how__num {
  color: var(--accent) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}


/* ──────────────────────────────────────────────────────────────
   Tighten vertical whitespace between home sections
   ────────────────────────────────────────────────────────────── */
body[data-route="home"] .home-surfaces { padding: 28px 24px 32px !important; }
body[data-route="home"] .home-how      { padding: 28px 24px 32px !important; }
body[data-route="home"] .home-pulse    { padding: 14px 24px !important; }
body[data-route="home"] .home-quote    { padding: 28px 24px 32px !important; }
body[data-route="home"] .home-trustbar { padding: 24px 24px 4px !important; }
body[data-route="home"] .home-footer   { padding: 32px 24px 18px !important; }
/* Footer was 1037px (CTA 154 + 80mb + cols 684 + bottom 46). Compress the
   gaps + the cols' internal padding without dropping any nav columns. */
body[data-route="home"] .home-footer__cta  { margin-bottom: 28px !important; }
body[data-route="home"] .home-footer__cols { padding-bottom: 28px !important; }
body[data-route="home"] .home-footer__bottom { padding-top: 16px !important; }

/* ════════════════════════════════════════════════════════════════════════
   HOME PAGE - restrained color (2026-05-27 v3)
   --------------------------------------------------------------------
   Per user feedback: NOT rainbow. Keep brand red as the primary accent.
   Add a few subtle workspace-colored elements where they earn their
   keep - colored underlines on footer columns (helps the eye scan the
   6-column grid), and a row of MLB player action photos for life.
   Everything else stays ink/red.
   ════════════════════════════════════════════════════════════════════════ */

/* Footer columns - subtle tonal underline ONLY (titles stay ink so the
   page doesn't read rainbow). The colored bars act as a quiet visual
   key tying each column to its workspace. */
body[data-route="home"] .home-footer__col:nth-child(2) { --fc-color: #3A6FF7; }
body[data-route="home"] .home-footer__col:nth-child(3) { --fc-color: #C62828; }
body[data-route="home"] .home-footer__col:nth-child(4) { --fc-color: #FF7A1A; }
body[data-route="home"] .home-footer__col:nth-child(5) { --fc-color: #00A8B5; }
body[data-route="home"] .home-footer__col:nth-child(6) { --fc-color: #7C4DFF; }
body[data-route="home"] .home-footer__col:nth-child(7) { --fc-color: #6E6E73; }
body[data-route="home"] .home-footer__col-title {
  position: relative;
  padding-bottom: 6px;
}
body[data-route="home"] .home-footer__col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--fc-color, var(--accent));
  border-radius: 1px;
  opacity: 0.80;
}

/* Home-pulse - keep functional color (up = positive, down = negative)
   but quieter than the global red/green */
body[data-route="home"] .home-pulse__col--up   .home-pulse__delta--up   { color: #1f7a55 !important; }
body[data-route="home"] .home-pulse__col--down .home-pulse__delta--down { color: #9b2c2c !important; }

/* ── MLB player montage strip ──────────────────────────────────────────
   A 7-photo horizontal row showing real MLB players the engine projects.
   Adds life + visual variety without painting the chrome. Sits just
   above the trust bar / stats block. Sourced from data/player_photos/
   (Wikipedia Commons). Static, no motion. */
/* High-specificity selector: the [data-view="home"] system applies
   `display: revert !important` which would force <aside> back to block.
   Match its specificity (3 selectors) and then some so flex sticks. */
body[data-route="home"] aside.home-roster-strip[data-view="home"],
body[data-route="home"] .home-roster-strip {
  display: flex !important;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 24px 14px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.home-roster-strip__head {
  flex: 1 0 100%;
  text-align: left;
  margin: 0 0 4px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3, #8a857c);
}
.home-roster-strip__head strong {
  color: var(--ink, #0f0e0c);
  font-weight: 700;
}
.home-roster-strip__player {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1);
}
.home-roster-strip__player:hover {
  transform: translateY(-2px);
}
.home-roster-strip__photo-wrap {
  position: relative;
  width: 88px;
  height: 110px;
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--bg-soft, #f1efe9);
  box-shadow:
    0 1px 0 rgba(15,14,12,0.04),
    0 6px 14px -8px rgba(15,14,12,0.20);
}
.home-roster-strip__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Subtle filter for editorial feel - slight desaturation pulls them
     into the institutional palette rather than competing with it */
  filter: contrast(1.04) saturate(0.92);
}
/* Tiny team color bar at the photo bottom - single hairline, the only
   chromatic moment per portrait */
.home-roster-strip__photo-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--team-color, var(--accent));
}
.home-roster-strip__name {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #0f0e0c);
  text-align: center;
  letter-spacing: -0.01em;
}
.home-roster-strip__team {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-3, #8a857c);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .home-roster-strip__player { width: 76px; }
  .home-roster-strip__photo-wrap { width: 72px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-roster-strip__player { transition: none; }
}
/* Left-align the "Six research surfaces, one terminal" eyebrow + the
   "Where you spend the season" heading with the Today's-Biggest-Movers
   table above. The table runs full-width with 24px section padding; the
   head block was centered (margin: 0 auto) so it sat indented relative
   to the table. Switching the horizontal margin to 0 puts both on the
   same left vertical axis. The max-width:1080px from styles.css stays
   in effect - heading text just no longer auto-centers. */
body[data-route="home"] .home-surfaces__head { margin: 0 0 24px !important; }
body[data-route="home"] .home-how__head      { margin: 0 0 24px !important; }

/* ═══════════ AUTH UI ═══════════ */
.site-nav__chrome > .site-nav__chrome-btn {
  display: none !important;
}
.site-nav__chrome .auth-btn {
  min-width: 74px;
  height: 38px;
  border-radius: 999px;
  padding: 0 16px;
  white-space: nowrap;
}
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border-radius: var(--r-8);
  background: var(--accent, #e85d3a); color: #fff;
  font: 600 12.5px/1 inherit; letter-spacing: .02em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.auth-btn:hover { background: var(--accent-hover, #d04e2e); }
.auth-btn[hidden], .auth-modal[hidden], .auth-field[hidden], .auth-user-menu[hidden] {
  display: none !important;
}
.auth-btn--ghost {
  background: transparent; color: var(--text-1, inherit);
  border-color: var(--hairline, rgba(255,255,255,.15));
}
.auth-btn--ghost:hover { background: var(--surface-2, rgba(255,255,255,.06)); }

@media (max-width: 900px) {
  .site-nav {
    height: auto !important;
    min-height: var(--nav-h, 56px) !important;
  }
  .site-nav__inner {
    height: auto !important;
    min-height: var(--nav-h, 56px) !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 10px 24px 0 !important;
  }
  .site-nav__logo { order: 1; }
  .site-nav__right {
    order: 2;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .layer1-rail__items--horizontal {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 0 0 8px !important;
  }
  .player-search {
    min-width: 210px !important;
    width: 210px !important;
  }
  .player-search:focus-within { width: 240px !important; }
}
.auth-btn--primary { width: 100%; padding: 11px 14px; font-size: 13.5px; margin-top: 4px; }
.auth-user-menu { display: inline-flex; align-items: center; gap: 10px; }
.auth-user-menu__email { font: 500 12px/1 inherit; color: var(--text-2, rgba(255,255,255,.7)); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth-modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; }
.auth-modal__backdrop { position: absolute; inset: 0; background: rgba(8,10,14,.72); backdrop-filter: blur(6px); }
.auth-modal__panel {
  position: relative; width: min(420px, 92vw);
  background: var(--surface-1, #15171c); color: var(--text-1, #e9ecf1);
  border: 1px solid var(--hairline, rgba(255,255,255,.08));
  border-radius: var(--r-14); padding: 28px 28px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.auth-modal__close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .6; }
.auth-modal__close:hover { opacity: 1; }
.auth-modal__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.auth-modal__subtitle { margin: 0 0 18px; font-size: 13px; color: var(--text-2, rgba(255,255,255,.6)); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, rgba(255,255,255,.6)); }
.auth-field input {
  padding: 10px 12px; border-radius: var(--r-8);
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--hairline, rgba(255,255,255,.12));
  color: inherit; font: 14px/1.2 inherit; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.auth-field input:focus { border-color: var(--accent, #e85d3a); background: var(--surface-3, rgba(255,255,255,.06)); }
.auth-form__error { font-size: 12.5px; color: #ef5b5b; padding: 2px 2px 0; }
.auth-modal__toggle { margin: 14px 0 0; font-size: 12.5px; color: var(--text-2, rgba(255,255,255,.6)); text-align: center; }
.auth-link { background: none; border: 0; color: var(--accent, #e85d3a); font-weight: 600; cursor: pointer; padding: 0 0 0 4px; font-size: inherit; }
.auth-link:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════
   WORKSPACE LANDING PAGES (Dashboard / Research / Draft Wizard)
   Built 2026-05-26 per IA-to-experience pass. Each landing is hidden by
   default; shown only when body[data-route] matches its workspace. The
   page is composed of: hero (title + tagline + freshness chip) + N
   sections (eyebrow + title + card grid). Cards are anchor tags with
   icon + title + desc + status/timestamp + CTA.
   ════════════════════════════════════════════════════════════════════════ */

/* Visibility - hidden by default; shown only when route matches. */
.ws-landing { display: none; }
.ws-landing[hidden] { display: none !important; }
/* `!important` required to override styles.css:200's
   `[data-view] { display: none !important; }` global hide. The landings
   carry data-view attributes (dashboard-landing / research-landing /
   draft-wizard-landing) which the base rule matches; without `!important`
   here the workspace landings stay invisible regardless of route.
   Mirrors the same `revert !important` pattern used by the home view
   at styles.css:201. (Bug fix discovered during Phase 4 verification.) */
body[data-route="dashboard"]    #wsLandingDashboard,
body[data-route="research"]     #wsLandingResearch,
body[data-route="draft-wizard"] #wsLandingDraftWizard {
  display: block !important;
}
/* When a workspace landing is showing, hide the legacy section.card
   (rankings list) + other home-only surfaces that would compete. */
body[data-route="dashboard"]    section.card,
body[data-route="draft-wizard"] section.card { display: none !important; }
body[data-route="dashboard"]    [data-view="home"],
body[data-route="research"]     [data-view="home"],
body[data-route="draft-wizard"] [data-view="home"] { display: none !important; }

.ws-landing {
  max-width: 1320px;
  margin: 24px auto 64px;
  padding: 0 24px;
  color: var(--ink);
  font-family: var(--font, 'Figtree', system-ui, sans-serif);
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.ws-hero {
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.08));
  margin-bottom: 32px;
}
.ws-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ws-hero__eyebrow {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3, #8a857c);
  margin: 0;
}
.ws-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2, #5a5650);
  padding: 5px 10px;
  background: var(--bg-soft, #f6f5f1);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: 999px;
}
.ws-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(178, 52, 21, 0.18);
  animation: wsPulse 2.2s ease-in-out infinite;
}
@keyframes wsPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(178, 52, 21, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(178, 52, 21, 0.06); }
}
.ws-hero__title {
  font-family: var(--font-hero, var(--font));
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ws-hero__tag {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2, #5a5650);
  margin: 0;
  max-width: 720px;
}

/* ─── Section ───────────────────────────────────────────────────────── */
.ws-section {
  margin: 0 0 48px;
}
.ws-section__head {
  margin: 0 0 18px;
}
.ws-section__eyebrow {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3, #8a857c);
  margin: 0 0 4px;
}
.ws-section__title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

/* ─── Card grid + card ──────────────────────────────────────────────── */
.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ws-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-10);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.ws-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(15, 14, 12, 0.18);
}
.ws-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ws-card__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--bg-soft, #f6f5f1);
  border-radius: var(--r-6);
}
.ws-card__icon svg {
  width: 16px;
  height: 16px;
}
.ws-card__badge {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-4);
  white-space: nowrap;
}
.ws-card__badge--neutral { background: var(--bg-soft, #f6f5f1); color: var(--text-2); }
.ws-card__badge--live    { background: var(--accent); color: #fff; }
.ws-card__badge--accent  { background: rgba(178, 52, 21, 0.12); color: var(--accent); }
.ws-card__badge--warn    { background: rgba(138, 90, 16, 0.12); color: var(--warn, #734a0c); }
.ws-card__title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 2px;
}
.ws-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2, #5a5650);
  flex-grow: 1;
}
.ws-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline, rgba(15,14,12,0.06));
  font-family: var(--mono, monospace);
  font-size: 10.5px;
}
.ws-card__status {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ws-card__status--neutral { color: var(--text-3, #8a857c); }
.ws-card__status--pending { color: var(--text-3, #8a857c); font-style: italic; text-transform: none; letter-spacing: 0; }
.ws-card__status--pos     { color: var(--pos, #1f6b3a); }
.ws-card__status--warn    { color: var(--warn, #734a0c); }
.ws-card__ts {
  color: var(--text-3, #8a857c);
  font-weight: 500;
}
.ws-card__cta {
  margin-left: auto;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.15s ease;
}
.ws-card:hover .ws-card__cta { color: var(--accent); }

/* Narrow viewport: 1-col card stack, smaller hero */
@media (max-width: 720px) {
  .ws-card-grid { grid-template-columns: 1fr; }
  .ws-hero__title { font-size: 32px; }
  .ws-hero__top { flex-direction: column; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════════════════════════
   WORKSPACE LANDING - DENSITY PASS (2026-05-26 Phase 2)
   New card variants: metric tile, compact row.
   Section-level action link (top-right of section header).
   Workspace personality through spacing + accent rhythm.
   ════════════════════════════════════════════════════════════════════════ */

/* Section header now supports a right-side action link */
.ws-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.ws-section__head-text { display: flex; flex-direction: column; }
.ws-section__action {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, #5a5650);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.ws-section__action:hover { color: var(--accent); }

/* ─── Metric tile ─────────────────────────────────────────────────────
   Big number + label + small note. Real numbers from live state.
   Lays out in a flexible grid; 4 across at wide widths, wraps tight
   on narrow. */
.ws-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ws-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-10);
  position: relative;
}
.ws-metric__label {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3, #8a857c);
}
.ws-metric__value {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ws-metric__note {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3, #8a857c);
  margin-top: 2px;
}
/* Tone variants - colored left rule, no clutter */
.ws-metric--pos    { border-left: 3px solid var(--pos,  #1f6b3a); }
.ws-metric--warn   { border-left: 3px solid var(--warn, #734a0c); }
.ws-metric--accent { border-left: 3px solid var(--accent); }

/* ─── Compact row list ─────────────────────────────────────────────────
   Dense list rows for live feeds - top movers, recent IL, engine fh.
   No icons, no card chrome - pure information. */
.ws-row-list {
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-10);
  overflow: hidden;
}
.ws-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.06));
  transition: background 0.12s ease;
}
.ws-row:last-child { border-bottom: 0; }
.ws-row:hover { background: var(--bg-soft, #f6f5f1); }
.ws-row--empty {
  color: var(--text-3, #8a857c);
  font-style: italic;
  text-align: center;
  padding: 24px 16px;
  cursor: default;
}
.ws-row--empty:hover { background: transparent; }
.ws-row__main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-grow: 1;
}
.ws-row__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 32%;
}
.ws-row__note {
  font-size: 13px;
  color: var(--text-2, #5a5650);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--mono, monospace);
}
.ws-row__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-4);
}
.ws-row__badge--neutral { background: var(--bg-soft, #f6f5f1); color: var(--text-2); }
.ws-row__badge--warn    { background: rgba(138, 90, 16, 0.12); color: var(--warn, #734a0c); }
.ws-row__badge--accent  { background: rgba(178, 52, 21, 0.10); color: var(--accent); }
.ws-row__badge--live    { background: var(--accent); color: #fff; }
.ws-row__ts {
  font-size: 11px;
  color: var(--text-3, #8a857c);
}

/* ─── Workspace hue families (2026-05-27 color-system refactor) ─────
   One hue family per workspace, applied at the route level so EVERY
   page in the workspace inherits - not just the hubs. Sub-pages
   (Hitter Stats, Live Pitchers, etc.) and custom landings (Tools,
   Methodology) all pick this up via --ws-color / --ws-accent.

   Tonal progression within subsections lives in the JS _HUB_FEATURES
   map (lighter → darker left-to-right). These are workspace defaults
   used as fallbacks. */
body[data-route="rankings"]      { --ws-color: #3A6FF7; --ws-accent: #DCE8FF; }
body[data-route="dashboard"]     { --ws-color: #C62828; --ws-accent: #FFD6D6; }
body[data-route="draft-wizard"]  { --ws-color: #FF7A1A; --ws-accent: #FFE0BF; }
body[data-route="research"]      { --ws-color: #00A8B5; --ws-accent: #B9F3F7; }
body[data-route="tools"]         { --ws-color: #7C4DFF; --ws-accent: #D9CCFF; }
body[data-route="methodology"]   { --ws-color: #6E6E73; --ws-accent: #D9D9DD; }

/* ─── Workspace personality ────────────────────────────────────────────
   Each workspace gets a subtle distinct rhythm. Dashboard reads as
   operational (tighter gaps, urgency on IL count); Research reads as
   terminal-like (mono-heavier accents, denser sections); Draft Wizard
   reads as preparation-focused (calmer pacing). Done through spacing
   + accent usage, NOT through new chrome. */

/* Dashboard - tighter sections, urgency-toned IL metric.
   Aggressive vertical compression: landing MUST fit a 1400x800 real-browser
   viewport (i.e. 1400x900 screen w/ Chrome chrome) without scrolling. */
body[data-route="dashboard"] .ws-landing { margin: 16px auto 24px; }
body[data-route="dashboard"] .ws-section { margin-bottom: 20px; }
body[data-route="dashboard"] .ws-section__head { margin: 0 0 10px; }
body[data-route="dashboard"] .ws-hero    { padding: 16px 0 12px; margin-bottom: 16px; }
body[data-route="dashboard"] .ws-hero__top { margin-bottom: 8px; }
body[data-route="dashboard"] .ws-hero__title { font-size: 32px; margin: 0 0 6px; }
body[data-route="dashboard"] .ws-hero__tag { font-size: 14px; line-height: 1.45; }

/* Research - terminal vibe. Sections sit closer together. Section eyebrow
   slightly more prominent (terminal sections feel labeled). */
body[data-route="research"] .ws-section { margin-bottom: 32px; }
body[data-route="research"] .ws-section__eyebrow {
  color: var(--accent);
  font-weight: 700;
}
body[data-route="research"] .ws-hero { padding: 28px 0 24px; margin-bottom: 24px; }
body[data-route="research"] .ws-hero__title { font-size: 38px; letter-spacing: -0.02em; }

/* Draft Wizard - generous spacing, prep mode */
body[data-route="draft-wizard"] .ws-section { margin-bottom: 56px; }
body[data-route="draft-wizard"] .ws-hero    { padding: 40px 0 32px; margin-bottom: 40px; }

@media (max-width: 720px) {
  .ws-metric-grid { grid-template-columns: 1fr 1fr; }
  .ws-row__main   { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ws-row__title  { max-width: 100%; }
  .ws-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════════════
   WORKSPACE LANDING - STREAM ARCHITECTURE (2026-05-26 Phase 3)
   Temporal row variants for change signals from snapshot diffs.
   Subtle 3px left rule per state - no badge spam, no AI-insight fluff.
   Only fires when state actually changed vs. yesterday's localStorage
   snapshot.
   ════════════════════════════════════════════════════════════════════════ */

/* Temporal row indicators - colored left rule communicates change type
   without adding visual noise. Reuses the existing .ws-row primitive. */
.ws-row--new       { border-left: 3px solid var(--warn,   #734a0c); padding-left: 13px; }
.ws-row--returned  { border-left: 3px solid var(--pos,    #1f6b3a); padding-left: 13px; }
.ws-row--rising    { border-left: 3px solid var(--accent); padding-left: 13px; }
.ws-row--cooling   { border-left: 3px solid var(--text-3, #8a857c); padding-left: 13px; }

/* The badges INSIDE heartbeat rows already carry the change-type label
   (NEW IL / RETURNED / ▲ RISER / ▼ FALLER). The left-rule reinforces
   it without competing. */

/* Refreshing chip - subtle scan animation while the 60s tick is running */
.ws-hero__chip--refreshing .ws-hero__dot {
  animation: wsPulseFast 0.8s ease-in-out infinite;
}
@keyframes wsPulseFast {
  0%, 100% { box-shadow: 0 0 0 3px rgba(178, 52, 21, 0.20); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(178, 52, 21, 0.05); transform: scale(0.85); }
}


/* ════════════════════════════════════════════════════════════════════════
   SUB-PAGE LANDING SURFACES - real, data-backed pages
   Park Factors / Hitter Stats / Pitcher Stats / Season Projections /
   Injury Report / Closer Depth Charts. Visibility gated by
   body[data-subpage] attribute set by the subPageRenderers IIFE.
   When active: workspace landings + legacy section.card are hidden;
   sub-page takes over.
   ════════════════════════════════════════════════════════════════════════ */

/* Visibility gating */
/* When a sub-page renders, hide all other landings. The `.ws-landing`
   shorthand isn't specific enough to beat the workspace-landing
   `display: block !important` rules (specificity 0,2,1), so we list
   each workspace-landing #id explicitly here to match specificity. */
body[data-subpage="true"] #wsLandingDashboard,
body[data-subpage="true"] #wsLandingResearch,
body[data-subpage="true"] #wsLandingDraftWizard { display: none !important; }
body[data-subpage="true"] .ws-landing { display: none !important; }
body[data-subpage="true"] section.card { display: none !important; }
body[data-subpage="true"] [data-view="home"] { display: none !important; }
/* Hub/landing pages don't need the Configure-League bar (owner request
   2026-06-21): keep it on the actual boards (#/rankings/redraft, no
   data-subpage) but hide it on the Rankings hub + any other subpage. */
body[data-subpage="true"] .config-bar { display: none !important; }
/* Stabilization Aug-2026: legacy workspace containers (research-workspace,
   prospects-workspace, ops-workspace, fypd-workspace, fantasy-prospects-
   workspace, studies-workspace, methodology-workspace) used to render
   their full content (~6,500 px tbody) alongside sub-pages, bloating
   page height to 8,000+ px. Hide all of them when a sub-page is active. */
body[data-subpage="true"] .research-workspace,
body[data-subpage="true"] .prospects-workspace,
body[data-subpage="true"] .ops-workspace,
body[data-subpage="true"] .fypd-workspace,
body[data-subpage="true"] .fantasy-prospects-workspace,
body[data-subpage="true"] .studies-workspace,
body[data-subpage="true"] .methodology-workspace,
body[data-subpage="true"] .workspace-subnav,
body[data-subpage="true"] .toolbar { display: none !important; }
body[data-subpage="true"] #subPageLanding {
  display: block !important;
  max-width: 1320px;
  margin: 24px auto 64px;
  padding: 0 24px;
  color: var(--ink);
  font-family: var(--font, 'Figtree', system-ui, sans-serif);
}

/* ─── Sub-hero ────────────────────────────────────────────────────────
   Premium upgrade: subtle gradient background, dot grid texture, live
   indicator dot on the freshness chip. Same visual language as the
   hub hero but quieter (this is an instrument page, not a hub). */
.sub-hero {
  position: relative;
  padding: 26px 24px 24px;
  margin: 0 0 28px;
  border-radius: var(--r-12);
  background:
    radial-gradient(ellipse at 90% 50%, rgba(178, 52, 21, 0.025) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-soft, #f6f5f1) 0%, var(--bg, #faf9f5) 100%);
  border: 1px solid var(--hairline, rgba(15,14,12,0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 0 rgba(15,14,12,0.02);
  overflow: hidden;
  isolation: isolate;
}
/* Dot grid texture - scouting board feel */
.sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,14,12,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
}
.sub-hero > * { position: relative; z-index: 1; }

/* Back links removed site-wide (owner: the left workspace rail is the way back).
   The renders were deleted from _subHero / the reports hero / the draft sim, but
   this hides any dynamic/missed render path too. */
.sub-hero__back, .sim-back { display: none !important; }
.sub-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #8a857c);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 180ms cubic-bezier(.2,.7,.3,1), transform 180ms cubic-bezier(.2,.7,.3,1);
}
.sub-hero__back:hover {
  color: var(--ink);
  transform: translateX(-2px);
}
.sub-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sub-hero__eyebrow {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3, #8a857c);
  margin: 0 0 6px;
}
.sub-hero__title {
  font-family: var(--font-hero, var(--font));
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
}
.sub-hero__tag {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2, #5a5650);
  margin: 0;
  max-width: 780px;
}
/* Freshness chip - adds a tiny pulsing live dot to signal real-time data */
.sub-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #5a5650);
  padding: 6px 12px 6px 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.10));
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 rgba(15,14,12,0.02);
}
.sub-hero__chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5DD27A;
  box-shadow: 0 0 0 3px rgba(93, 210, 122, 0.18);
  animation: subHeroPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes subHeroPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(93, 210, 122, 0.18); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(93, 210, 122, 0.04); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-hero__chip::before { animation: none; }
}

/* ─── Section wrapper inside sub-pages ─────────────────────────────── */
.sub-section { margin: 0 0 36px; }
.sub-section__title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
/* Tiny tick mark before section titles - scouting report rhythm */
.sub-section__title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 1px;
  flex-shrink: 0;
  align-self: center;
}
.sub-section__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3, #8a857c);
  text-decoration: none;
  margin-left: 8px;
}
.sub-section__link:hover { color: var(--accent); text-decoration: underline; }

/* Callout cards — used by the Prospect Hit Rates report (tier hits/misses). */
.sub-callout {
  border: 1px solid var(--line, #e6e2d9);
  border-radius: 10px;
  background: var(--surface-1, #fff);
  padding: 12px 14px;
  margin: 0 0 10px;
}
.sub-callout__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 8px;
}
.sub-kv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink, #20242c);
}
.sub-kv + .sub-kv { margin-top: 3px; }

/* Related-report cross-links (dynasty family footer). */
.sub-related { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-related__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border: 1px solid var(--line, #e6e2d9); border-radius: 999px;
  background: var(--surface-1, #fff); color: var(--ink, #20242c);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.sub-related__link:hover { border-color: var(--accent, #2f6f4f); color: var(--accent, #2f6f4f); background: var(--surface-2, #f4f1ea); }

/* Tool Grades — player-card 20-80 scouting bars (data-derived from Statcast). */
.ptg { display: flex; flex-direction: column; gap: 8px; }
.ptg-row { display: grid; grid-template-columns: 80px 1fr 28px; align-items: center; gap: 12px; }
.ptg-row__label { font-size: 12.5px; font-weight: 600; color: var(--ink, #20242c); }
.ptg-row__track { position: relative; height: 8px; border-radius: 5px; background: var(--surface-2, #ece6da); overflow: hidden; }
.ptg-row__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; z-index: 1; }
.ptg-row__fill--hot { background: var(--heat-hot, #d4574e); }
.ptg-row__fill--mid { background: var(--heat-mid, #c9a24b); }
.ptg-row__fill--cold { background: var(--heat-cold, #5f7a9c); }
.ptg-row__mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.65); z-index: 2; }
.ptg-row__val { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ptg-row__val--hot { color: var(--heat-hot, #c14a42); }
.ptg-row__val--mid { color: var(--heat-mid, #a8801f); }
.ptg-row__val--cold { color: var(--heat-cold, #54708f); }
.ptg-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3, #8a857c); margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line, #e6e2d9); }
/* Triple-A Statcast panel — wider value column (mph/decimals need more room than a 2-digit grade) + source/context line. */
.ptg--aaa .ptg-row { grid-template-columns: 88px 1fr 66px; }
.ptg--aaa .ptg-row__val { font-size: 12px; }
.aaast-ctx { font-size: 11px; color: var(--text-3, #8a857c); line-height: 1.4; margin: -1px 0 3px; }

/* Prospect board — click-to-sort column headers (like the Redraft/Dynasty tables). */
.fpr-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
.fpr-th-sort:hover { color: var(--accent, #b5651d); }
.fpr-th-sort.is-sorted { color: var(--ink, #20242c); }
.fpr-sort-arrow { font-size: 8.5px; margin-left: 3px; opacity: 0.75; vertical-align: 1px; }

/* ─── Smaller secondary text inside table cells (long descriptions, etc.) */
.sub-cell--small {
  font-size: 11px;
  color: var(--text-2, #5a5650);
  white-space: nowrap;
}

/* ─── System summary strip - Bloomberg-terminal one-liner ────────
   Sits between the hub hero and the section pills. Real data only.
   Mono, tight, institutional. Ambient green dot signals live state. */
.hub-sys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-8);
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--text-2, #5a5650);
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 rgba(15,14,12,0.02);
}
.hub-sys__seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
/* Vertical separator between segments */
.hub-sys__seg + .hub-sys__seg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--hairline, rgba(15,14,12,0.12));
}
.hub-sys__seg em {
  font-style: normal;
  color: var(--text-3, #8a857c);
  font-weight: 500;
  text-transform: lowercase;
}
.hub-sys__seg--status {
  color: var(--text-3, #8a857c);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  padding-left: 0;
}
.hub-sys__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5DD27A;
  box-shadow: 0 0 0 2px rgba(93, 210, 122, 0.18);
  animation: hubSysPulse 2.4s ease-in-out infinite;
  margin-right: 3px;
}
@keyframes hubSysPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(93, 210, 122, 0.18); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px rgba(93, 210, 122, 0.04); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-sys__dot { animation: none; }
}
@media (max-width: 720px) {
  .hub-sys { font-size: 10px; padding: 7px 10px; }
  .hub-sys__seg { padding: 0 10px; }
}

/* ─── Ambient body texture - extremely subtle dot grid ────────────
   Adds "operations room" depth without distraction. Only renders
   on data-rich routes (hubs + sub-pages); home/marketing stays clean. */
body[data-subpage="true"],
body[data-route="rankings"] {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,14,12,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}

/* ─── Hub-level enter animation + globals ──────────────────────────
   The entire sub-page container fades in on hash change. Combined
   with per-card stagger, the page feels like it "assembles" rather
   than dumping. */
@keyframes hubPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body[data-subpage="true"] #subPageLanding {
  animation: hubPageIn 320ms cubic-bezier(.2,.7,.3,1) both;
}
/* Retrigger animation on every navigation, not just the first show.
   Dispatcher toggles `.is-entering` after each innerHTML swap. */
#subPageLanding.is-entering {
  animation: hubPageIn 280ms cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  body[data-subpage="true"] #subPageLanding { animation: none; }
  #subPageLanding.is-entering { animation: none; }
  .hub-card { animation: none; }
}

/* Smooth scrolling for anchor jumps. Combined with scroll-margin on
   section pills so they don't land under the sticky strip + nav. */
html { scroll-behavior: smooth; }
.sub-section, .hub-section-strip {
  scroll-margin-top: 140px; /* site-nav (64) + sticky strip (~76) */
}

/* ─── Hub feature-hero v3 - institutional-grade atmosphere ────────
   Layered: team gradient + film grain + horizontal scanlines + radial
   vignette + edge glow + inset border highlight. Player photo on the
   right with mask-fade. Every layer is restrained (5-15% opacity) so
   the composition reads as "premium broadcast lower-third," never as
   gamer chrome. */
.hub-hero {
  position: relative;
  margin: 0 0 28px;
  border-radius: var(--r-14);
  overflow: hidden;
  background:
    /* Soft radial highlight - like a stadium spotlight */
    radial-gradient(ellipse at 78% 50%, rgba(255,255,255,0.13) 0%, transparent 55%),
    /* Vignette - pulls eye into center */
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.22) 100%),
    /* Team color gradient */
    linear-gradient(135deg,
      var(--hub-hero-color, var(--accent)) 0%,
      color-mix(in srgb, var(--hub-hero-color, var(--accent)) 78%, #000 22%) 100%);
  color: #ffffff;
  min-height: 340px;
  isolation: isolate;
  /* Inset border catches light - premium edge */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 2px 1px rgba(0,0,0,0.05),
    0 18px 40px -16px rgba(0,0,0,0.20);
}

/* Layer 1 - fine horizontal scanlines (broadcast feel, very faint).
   Also carries an ambient diagonal scan-sweep that crosses the hero
   every 12s - exceedingly subtle (6% opacity), reads as atmosphere
   rather than animation. The whole layer rotates very slowly. */
.hub-hero::before {
  content: '';
  position: absolute;
  inset: -20% 0;
  background:
    /* Diagonal scan band - the actual sweep */
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.07) 48%,
      rgba(255,255,255,0.12) 50%,
      rgba(255,255,255,0.07) 52%,
      transparent 70%
    ),
    /* Static scanlines underneath */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(255,255,255,0.025) 2px,
      rgba(255,255,255,0.025) 3px
    );
  background-size: 280% 100%, auto;
  background-position: -120% 0, 0 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  animation: hubHeroSweep 14s linear infinite;
}
@keyframes hubHeroSweep {
  /* Hold start (no sweep visible) for ~3s, then sweep across, then hold off */
  0%, 20%   { background-position: -120% 0, 0 0; }
  60%, 100% { background-position: 220% 0,   0 0; }
}
/* Honor user preference */
@media (prefers-reduced-motion: reduce) {
  .hub-hero::before { animation: none; }
}
/* Layer 2 - subtle dot grid (scouting-board feel) */
.hub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.hub-hero__back {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  text-decoration: none;
  z-index: 3;
  transition: color .12s ease;
}
.hub-hero__back:hover { color: #ffffff; }

/* Floating live ticker - top-right of hero. Real state, never fake. */
.hub-hero__ticker {
  position: absolute;
  top: 16px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
}
.hub-hero__ticker-seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.74);
  text-transform: uppercase;
}
.hub-hero__ticker-seg strong {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hub-hero__ticker-seg--muted {
  color: rgba(255,255,255,0.64);
  position: relative;
  padding-left: 10px;
}
.hub-hero__ticker-seg--muted::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.20);
}
.hub-hero__ticker-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5DD27A;
  box-shadow: 0 0 0 3px rgba(93, 210, 122, 0.22);
  animation: hubTickerPulse 2.4s ease-in-out infinite;
}
@keyframes hubTickerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(93, 210, 122, 0.22); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(93, 210, 122, 0.05); opacity: 0.65; }
}

.hub-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 64px 40px 44px;
  min-height: 340px;
}
.hub-hero__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 58%;
}
.hub-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
}
.hub-hero__eyebrow-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

.hub-hero__title {
  font-family: var(--font);
  font-size: 64px;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 4px 0 6px;
  text-transform: uppercase;
}
.hub-hero__tag {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
  margin: 0;
  max-width: 500px;
}

/* CTA: text + circular arrow icon (no button background). */
.hub-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.hub-hero__cta:hover { transform: translateX(2px); }
.hub-hero__cta-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.hub-hero__cta:hover .hub-hero__cta-circle {
  background: #ffffff;
  color: var(--hub-hero-color, var(--accent));
  border-color: #ffffff;
}

.hub-hero__feature {
  margin: 14px 0 0;
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.62);
}
.hub-hero__feature strong {
  color: rgba(255,255,255,0.90);
  font-weight: 700;
}
.hub-hero__team {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-3);
  color: #ffffff;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.hub-hero__credit {
  margin-left: 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
  text-transform: none;
}

.hub-hero__art {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: -44px;
  overflow: hidden;
  border-bottom-right-radius: 14px; /* clip to hero corner */
}
/* Real photo from Wikimedia Commons (downloaded by fetch_player_action_photos.rb) */
.hub-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 460px;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.40));
  /* Soft gradient mask blends the photo's edge into the hero color */
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 65%, rgba(0,0,0,0.4) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 65%, rgba(0,0,0,0.4) 100%);
}
/* SVG silhouette fallback (used only when no photo is mapped) */
.hub-hero__svg {
  display: block;
  width: 380px;
  height: 460px;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.40));
}

/* Subtle dot pattern on the art column for depth even if the photo
   has solid edges. */
.hub-hero__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 920px) {
  .hub-hero__title { font-size: 48px; }
  .hub-hero__art { width: 280px; }
  .hub-hero__svg { width: 280px; height: 360px; }
}
@media (max-width: 720px) {
  .hub-hero__inner {
    flex-direction: column;
    padding: 52px 22px 22px;
    gap: 18px;
    align-items: flex-start;
  }
  .hub-hero__copy { max-width: 100%; }
  .hub-hero__title { font-size: 36px; }
  .hub-hero__art {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
  }
  .hub-hero__svg { width: 220px; height: 280px; }
}

/* ─── Hub landing - workspace + subsection homepage card grids ─────
   FantasyPros-style cards: red category eyebrow, bold title, optional
   description, arrow in bottom-right. Section-pill nav strip under the
   hero for fast jumping between subsection hubs. */

/* Section-pill strip - quick nav under the hub hero.
   Sticky: becomes a floating command bar when scrolled past the hero.
   On stuck state, picks up a subtle backdrop + bottom rule to feel
   like a Bloomberg-terminal toolbar. */
.hub-section-strip {
  position: sticky;
  top: 64px; /* below site-nav */
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 10px 0;
  background: linear-gradient(to bottom,
    var(--bg, #faf9f5) 70%,
    rgba(250, 249, 245, 0));
  transition: padding .18s ease, background .18s ease;
}
/* Pseudo-element for the stuck-state bottom rule - only visible when
   stuck (uses position: sticky behavior + CSS to detect via :where). */
.hub-section-strip::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline, rgba(15,14,12,0.08));
  opacity: 0;
  transition: opacity .18s ease;
}
/* Detect "stuck" state via scroll-snap or scroll-shadow trick - simpler:
   just show the rule always at low opacity, intensifies via JS hook. */
.hub-section-strip.is-stuck::after { opacity: 1; }
.hub-section-strip.is-stuck       { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(250, 249, 245, 0.88); }

.hub-section-pill {
  /* Per-pill tonal vars (--pill-color / --pill-accent) come from inline
     style set by the renderer; each pill carries its own subsection's
     tone from _HUB_FEATURES. Falls back to workspace tone, then global
     site accent. Tonal progression left→right is encoded in the data,
     not the CSS - see _HUB_FEATURES definition. */
  --pill-color:  var(--ws-color,  var(--accent));
  --pill-accent: var(--ws-accent, var(--bg-soft, #f6f5f1));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 14px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pill-color) 86%, #000);
  /* Resting state: soft accent fill at 35% opacity over surface - reads
     as tonal hint, never loud. */
  background: color-mix(in srgb, var(--pill-accent) 35%, var(--surface, #ffffff));
  border: 1px solid color-mix(in srgb, var(--pill-color) 18%, var(--hairline, rgba(15,14,12,0.06)));
  border-radius: 999px;
  text-decoration: none;
  transition:
    color 180ms cubic-bezier(.2,.7,.3,1),
    border-color 180ms cubic-bezier(.2,.7,.3,1),
    background 180ms cubic-bezier(.2,.7,.3,1),
    transform 180ms cubic-bezier(.2,.7,.3,1);
}
.hub-section-pill:hover {
  /* Active hover: invert - pill becomes solid family color with white text */
  color: #ffffff;
  border-color: var(--pill-color);
  background: var(--pill-color);
  transform: translateY(-1px);
}
.hub-section-pill:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}
.hub-section-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  border-radius: var(--r-8);
  background: color-mix(in srgb, var(--pill-color) 18%, transparent);
  color: color-mix(in srgb, var(--pill-color) 86%, #000);
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transition: background 180ms ease, color 180ms ease;
}
.hub-section-pill:hover .hub-section-pill__count {
  background: rgba(255,255,255,0.22);
  color: #ffffff;
}

/* ─── Staggered entry animation for hub cards ──────────────────────
   Each card carries inline --i index. animation-delay cascades.
   Fast (220ms) per card, brief 30ms inter-stagger - total ~700ms
   for a 20-card grid. No bouncy easing, just opacity + lift. */
/* Entrance is transform-only (no opacity). The hub re-renders a few times
   while projections settle on load (ticker/summary counts change), which
   re-creates the cards and restarts this animation; when the keyframe faded
   opacity 0→1 with `both`, every restart held later-staggered cards INVISIBLE
   during their delay window — worst on the roster-aware My Fantasy hub whose
   counts settle latest (cards blank for ~15s). Animating only transform keeps
   every card fully visible from first paint regardless of re-render timing. */
@keyframes hubCardIn {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.hub-card {
  animation: hubCardIn 360ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* Featured card type bumps - tighter, more weight */
.hub-card--featured .hub-card__title {
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.18;
}

/* Featured + live cards get a corner "signal" ornament - 5 vertical
   bars stepping up in height. Pure decoration (not a time series);
   reads like a terminal corner indicator. Only shows on cards that
   are BOTH featured (anchor) AND live (real data backing) - honest
   signal that this is a flagship surface. Rendered as a DOM <span>
   to avoid collision with the existing ::before tint. */
.hub-card__signal {
  position: absolute;
  top: 16px;
  right: 52px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  pointer-events: none;
  opacity: 0.42;
  transition: opacity 220ms cubic-bezier(.2,.7,.3,1);
}
.hub-card__signal span {
  display: inline-block;
  width: 2px;
  /* Inherit workspace hue; fall back to site accent outside a hub */
  background: var(--ws-color, var(--accent));
  border-radius: 1px;
}
.hub-card__signal span:nth-child(1) { height: 30%; }
.hub-card__signal span:nth-child(2) { height: 50%; }
.hub-card__signal span:nth-child(3) { height: 70%; }
.hub-card__signal span:nth-child(4) { height: 90%; }
.hub-card__signal span:nth-child(5) { height: 100%; }
.hub-card:hover .hub-card__signal {
  opacity: 0.78;
}

/* Card grid - 3-col on wide, with explicit 12-col tracks so a featured
   card can span 2 columns and break the equal-card rhythm. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.hub-card                 { grid-column: span 4; }   /* default 3-per-row */
.hub-card--featured       { grid-column: span 8; min-height: 132px; padding: 24px 56px 24px 24px; }
@media (max-width: 1080px) {
  .hub-card               { grid-column: span 6; }   /* 2-per-row */
  .hub-card--featured     { grid-column: span 12; }
}
@media (max-width: 640px) {
  .hub-card,
  .hub-card--featured     { grid-column: span 12; }
}

/* ── Hub subcategory grouping (owner 2026-06-21) ──────────────────────────
   Each subcategory renders as its own labeled, colour-coded section instead of
   one flat eyebrow grid + the removed BOARDS/MARKET/EVALUATE count chips. A
   coloured header (dot + uppercase title + count) and a thin card top-accent
   give clear visual separation between groups. Hues rotate over 6 cohesive,
   AA-on-white colours, assigned by group index. */
.hub-cats { display: block; }
.hub-cat { margin: 0 0 30px; }
.hub-cat:last-child { margin-bottom: 0; }
.hub-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--cat, #155a96);
}
.hub-cat__dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--cat, #155a96);
}
.hub-cat__title {
  margin: 0;
  font: 800 14px/1.1 Geist, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cat, #155a96);
}
.hub-cat__count {
  margin-left: auto;
  font: 700 11px/1 Geist, system-ui, sans-serif;
  color: #fff;
  background: var(--cat, #155a96);
  border-radius: 999px;
  padding: 3px 9px;
}
.hub-cat .hub-grid { margin: 0; }
/* Thin coloured top-accent ties each card to its section hue. */
.hub-cat .hub-card { border-top: 3px solid var(--cat, transparent); }
.hub-cat--c0 { --cat: #155a96; }  /* blue   */
.hub-cat--c1 { --cat: #0f7a5f; }  /* teal   */
.hub-cat--c2 { --cat: #946018; }  /* amber  */
.hub-cat--c3 { --cat: #6a47b0; }  /* purple */
.hub-cat--c4 { --cat: #a83e57; }  /* rose   */
.hub-cat--c5 { --cat: #356877; }  /* slate  */

/* Individual card - refined motion + edge-tracing accent on hover.
   Pseudo-element draws an animated underline in team accent. */
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 48px 18px 20px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-10);
  text-decoration: none;
  color: inherit;
  min-height: 102px;
  overflow: hidden;
  transition:
    border-color 180ms cubic-bezier(.2,.7,.3,1),
    box-shadow   180ms cubic-bezier(.2,.7,.3,1),
    transform    180ms cubic-bezier(.2,.7,.3,1);
}
/* Animated underline accent - slides in from left on hover.
   Hue inherits workspace family (--ws-color) so Rankings cards underline
   blue, Dashboard cards underline red, etc. No rainbow mixing. */
.hub-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ws-color, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
}
.hub-card:hover {
  border-color: rgba(15,14,12,0.18);
  box-shadow:
    0 1px 0 rgba(15,14,12,0.04),
    0 12px 28px -8px rgba(15,14,12,0.10);
  transform: translateY(-2px);
}
/* Tactile press feedback - kicks in for ~120ms while the click is held.
   The card sinks 1px back to baseline + drops the shadow. */
.hub-card:active {
  transform: translateY(-1px) scale(0.997);
  transition-duration: 80ms;
  box-shadow: 0 1px 0 rgba(15,14,12,0.04), 0 4px 10px -4px rgba(15,14,12,0.06);
}
.hub-card:hover::after {
  transform: scaleX(1);
}
.hub-card:hover .hub-card__arrow {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-soft, #f6f5f1);
}
.hub-card:hover .hub-card__arrow-glyph {
  transform: translateX(3px);
}

/* Live-data indicator - a tiny green dot inline with the card title.
   Real signal: only present on cards whose href resolves to a shipped
   SUBPAGES renderer. Communicates "this is real data" at a glance. */
.hub-card__live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: #5DD27A;
  box-shadow: 0 0 0 2px rgba(93, 210, 122, 0.18);
  vertical-align: middle;
  flex-shrink: 0;
  transition: box-shadow 220ms ease;
}
.hub-card:hover .hub-card__live {
  box-shadow: 0 0 0 4px rgba(93, 210, 122, 0.10);
}

/* Focus-visible - keyboard navigation gets a refined 3px accent ring.
   Mouse interactions don't trigger this (focus-visible spec). */
.hub-card:focus-visible,
.hub-section-pill:focus-visible,
.hub-hero__cta:focus-visible,
.hub-hero__back:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-10);
}
.hub-section-pill:focus-visible { border-radius: 999px; }
.hub-hero__back:focus-visible { border-radius: var(--r-4); outline-offset: 4px; }

/* Featured card - pulls more weight visually */
.hub-card--featured .hub-card__title {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.hub-card--featured .hub-card__eyebrow {
  font-size: 11px;
}
.hub-card--featured::before {
  /* Soft tint corner - broadcast lower-third vibe */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(178,52,21,0.025) 0%, transparent 40%);
  pointer-events: none;
}

.hub-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}
.hub-card__eyebrow {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  /* Inherit workspace tone (Rankings→blue, Dashboard→red, etc.) so the
     eyebrow label color matches the workspace's hue family. Site accent
     is only used outside a hub-workspace wrapper. */
  color: var(--ws-color, var(--accent));
  letter-spacing: 0.02em;
}
.hub-card__title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.hub-card__desc {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2, #5a5650);
  line-height: 1.45;
  margin-top: 2px;
}

/* Arrow icon - circular border with arrow glyph, bottom-right corner. */
.hub-card__arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.25px solid var(--hairline, rgba(15,14,12,0.18));
  border-radius: 50%;
  color: var(--text-2, #5a5650);
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.hub-card__arrow-glyph {
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
}
.hub-card:hover .hub-card__arrow {
  border-color: var(--ink);
  color: var(--ink);
}
.hub-card:hover .hub-card__arrow-glyph {
  transform: translateX(2px);
}

/* Responsive - tighten gaps + min size on narrower viewports. */
@media (max-width: 720px) {
  .hub-grid { grid-template-columns: 1fr; gap: 10px; }
  .hub-card { padding: 16px 40px 16px 16px; }
  .hub-card__arrow { right: 16px; bottom: 16px; }
}

/* ─── Collapsible sub-section (<details>) - opens to reveal a sub-table.
   Used when a page has secondary tables that shouldn't dominate initial
   render. Styled to match sub-section spacing + h2 weight. */
.sub-collapsible {
  margin: 0 0 32px;
}
.sub-collapsible__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 12px 14px;
  background: var(--bg-soft, #f6f5f1);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-6);
  transition: background .12s ease, border-color .12s ease;
  position: relative;
  padding-right: 36px;
}
.sub-collapsible__summary::-webkit-details-marker { display: none; }
.sub-collapsible__summary::marker { display: none; }
.sub-collapsible__summary::after {
  content: '▸';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-3, #8a857c);
  transition: transform .15s ease;
}
.sub-collapsible[open] > .sub-collapsible__summary::after {
  transform: translateY(-50%) rotate(90deg);
}
.sub-collapsible:hover > .sub-collapsible__summary {
  border-color: var(--text-3, #8a857c);
}
.sub-collapsible[open] > .sub-collapsible__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.sub-collapsible[open] > .sub-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ─── Long-table pagination toggle (default 25 rows + "show all") ──── */
.sub-table__toggle {
  padding: 10px 12px;
  border-top: 1px solid var(--hairline, rgba(15,14,12,0.05));
  background: var(--surface, #ffffff);
  text-align: center;
}
.sub-table__toggle-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline, rgba(15,14,12,0.10));
  border-radius: var(--r-4);
  padding: 6px 14px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2, #5a5650);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.sub-table__toggle-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── Data table ──────────────────────────────────────────────────────
   Bloomberg-Stathead hybrid: tight rows, tabular numerics, sticky
   header, alt-row shading, hover highlight. Same density discipline
   as the rest of the platform. */
.sub-table-wrap {
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-8);
  /* 2026-05-27 bug fix: was `overflow: clip` which establishes a new
     containing block for sticky positioning AND has no scroll context,
     which silently turns the sticky thead into static (it scrolled away
     with the content instead of pinning). `visible` lets the sticky
     thead pin to the page scroll (top: 64px clears the fixed nav).
     Tables that genuinely need horizontal scroll can opt in with
     .sub-table-wrap--scroll. */
  overflow: visible;
}
.sub-table-wrap--scroll {
  overflow-x: auto;
  /* When horizontal scroll is needed, sticky thead pins relative to
     this wrap rather than the page - set top: 0 so it pins to the
     wrap's top edge during horizontal scroll. */
}
.sub-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sub-table thead th {
  position: sticky; top: 0;
  background: var(--bg-soft, #f6f5f1);
  color: var(--text-2, #5a5650);
  font-family: var(--mono, monospace);
  font-size: 11.5px; /* typography audit: 10.5px → 11.5px (report-table header legibility) */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.10));
  white-space: nowrap;
}
.sub-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.05));
  vertical-align: middle;
  transition: background 180ms ease;
}
.sub-table tbody tr:last-child td { border-bottom: 0; }
.sub-table tbody tr:nth-child(even) td { background: var(--bg-soft, #f6f5f1); }

/* Refined row hover - soft accent bg + a 2px left accent rule on the
   first cell. Broadcast-table feel (think Bloomberg row selector). */
.sub-table tbody tr {
  position: relative;
}
.sub-table tbody tr:hover td {
  background: rgba(178, 52, 21, 0.05);
}
.sub-table tbody tr td:first-child {
  position: relative;
}
.sub-table tbody tr td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.sub-table tbody tr:hover td:first-child::before {
  opacity: 1;
}

/* Numeric cells - always monospace tabular */
.sub-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Sticky header - column labels persist when scrolling long tables.
   Sticks to the bottom of the site-nav (64px). */
.sub-table thead th {
  position: sticky;
  top: 64px;
  z-index: 5;
  background: var(--surface, #ffffff);
  /* Shadow appears once the header is stuck - replicates scroll-shadow */
  box-shadow:
    inset 0 -1px 0 var(--hairline, rgba(15,14,12,0.08)),
    0 6px 8px -6px rgba(15,14,12,0.10);
}

/* ─── Inline pills used inside data tables ─────────────────────────── */
.sub-pill {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-4);
}
.sub-pill--warn { background: rgba(138, 90, 16, 0.12); color: var(--warn, #734a0c); }
.sub-pill--pos  { background: rgba(31, 107, 58, 0.12); color: var(--pos, #1f6b3a); }

/* ─── Status badges used in operational/health tables ──────────────── */
.sub-status {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-4);
}
.sub-status--ok   { background: rgba(31, 107, 58, 0.12); color: var(--pos,    #1f6b3a); }
.sub-status--warn { background: rgba(138, 90, 16, 0.12); color: var(--warn,   #734a0c); }
.sub-status--err  { background: rgba(178, 52, 21, 0.12); color: var(--accent, #b23415); }

/* ─── Small inline tag in table cells (e.g. ELITE on FYPD) ─────────── */
.sub-table__tag {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: var(--r-3);
  background: rgba(178, 52, 21, 0.10);
  color: var(--accent, #b23415);
  vertical-align: middle;
}

/* ─── Plain text list inside a sub-section (e.g. data-health warnings) */
.sub-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  color: var(--text-2, #5a5650);
  font-size: 14px;
  line-height: 1.6;
}
.sub-list li + li { margin-top: 4px; }

/* ─── Empty-state row ────────────────────────────────────────────────── */
.sub-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-3, #8a857c);
  font-style: italic;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-8);
}

@media (max-width: 720px) {
  .sub-hero__title { font-size: 24px; }
  .sub-hero__row { flex-direction: column; align-items: flex-start; }
  .sub-table { font-size: 12px; }
  .sub-table thead th, .sub-table tbody td { padding: 8px 10px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 - DESIGN TOKEN SYSTEM (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §0.5 / §5 / §9.
   Foundation only. No existing CSS rule has been migrated to reference
   these tokens. Future phases (Cmd-K, Today strip, Shell B, table system)
   will adopt them as each component is touched. Existing color tokens
   declared earlier in this file remain - these are additive (typography
   scale, motion, density, layout shell sizes).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Semantic color (consolidated naming; aliases the existing values) ── */
  --color-ink:             #0f0e0c;
  --color-text-2:          #5a5650;
  --color-text-3:          var(--text-3);   /* was #8a857c (~3.5:1 on light, failed AA); alias to the theme-aware AA --text-3 (#6a655b light / #989389 dark) */
  --color-surface:         #ffffff;
  --color-bg:              #faf9f6;
  --color-bg-soft:         #f6f5f1;
  --color-hairline:        rgba(15, 14, 12, 0.08);
  --color-hairline-strong: rgba(15, 14, 12, 0.22);
  --color-accent:          #b23415;
  --color-accent-soft:     rgba(178, 52, 21, 0.08);
  --color-pos:             #1f6b3a;
  --color-warn:            #734a0c;
  --color-neg:             #a8201a;

  /* ── Typography scale (sizes + line-heights, no arbitrary values) ── */
  --type-hero-size:        40px;
  --type-hero-lh:          1.05;
  --type-h2-size:          24px;
  --type-h2-lh:            1.15;
  --type-h3-size:          18px;
  --type-h3-lh:            1.25;
  --type-body-size:        14px;
  --type-body-lh:          1.5;
  --type-table-size:       13px;
  --type-table-lh:         1.4;
  --type-label-size:       11px;
  --type-label-lh:         1.4;
  --type-mono-sm-size:     10.5px;

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Motion (the entire palette - anything else needs justification) ── */
  --motion-fast:    150ms ease;                              /* color, border */
  --motion-layout:  200ms cubic-bezier(0.16, 1, 0.3, 1);     /* expo.out */

  /* ── Density (defaults = comfortable; .density-compact overrides) ── */
  --row-padding-y:       12px;
  --row-padding-x:       14px;
  --base-font-size:      14px;
  --section-gap:         40px;
  --card-padding:        18px;
  --table-line-height:   1.5;

  /* ── Layout shell sizes (used by Shell B in later phases) ── */
  --shell-left-rail-w:           250px;
  --shell-left-rail-collapsed-w: 64px;
  --shell-right-rail-w:          320px;
  --shell-today-strip-h:         40px;
  --shell-max-content-w:         1320px;
}

/* ── Density modes ──────────────────────────────────────────────────────
   Applied to `:root` (html element) by the window.__ui IIFE based on
   route + user override. Operational routes (dashboard/research/
   draft-wizard) default to compact; analytical routes (rankings/
   methodology/tools) default to comfortable. User override (set via
   window.__ui.density.set) persists across sessions in localStorage.
   ──────────────────────────────────────────────────────────────────── */
:root.density-compact {
  --row-padding-y:     8px;
  --row-padding-x:     10px;
  --base-font-size:    12.5px;
  --section-gap:       24px;
  --card-padding:      12px;
  --table-line-height: 1.35;
}
:root.density-comfortable {
  /* Same as :root defaults - declared explicitly for symmetry and so the
     class is always present on the html element regardless of mode. */
  --row-padding-y:     12px;
  --row-padding-x:     14px;
  --base-font-size:    14px;
  --section-gap:       40px;
  --card-padding:      18px;
  --table-line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 - COMMAND PALETTE (Cmd-K) (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §0.5 / §9.

   First component to be built ENTIRELY on Phase 1 tokens. No legacy
   color/size fallbacks - every value resolves through var(--color-*),
   var(--type-*), var(--motion-*). If a token is missing, the component
   is broken (intentional - proves the foundation at the unit level).

   Visual contract:
     • 600px centered card, mid-height (~14vh top inset)
     • Semi-transparent backdrop with light blur
     • No icons; mono uppercase category labels (PLAYERS/PAGES/STREAMS)
     • Selection = soft accent wash + left accent rail
     • Animation: 150ms fade backdrop / 200ms expo rise card
     • Respects prefers-reduced-motion
   ════════════════════════════════════════════════════════════════════════ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  font-family: var(--font-body);
  color: var(--color-ink);
}
.cmd-palette[hidden] { display: none; }

.cmd-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 14, 12, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: cmdkFade var(--motion-fast) both;
}

.cmd-palette__card {
  position: relative;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--r-10);
  box-shadow: 0 24px 64px -16px rgba(15, 14, 12, 0.28),
              0 2px 6px rgba(15, 14, 12, 0.08);
  overflow: hidden;
  animation: cmdkRise var(--motion-layout) both;
}

.cmd-palette__input-row {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-surface);
}

.cmd-palette__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  caret-color: var(--color-accent);
  padding: 0;
  margin: 0;
}
.cmd-palette__input::placeholder { color: var(--color-text-3); }

.cmd-palette__results {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.cmd-palette__category + .cmd-palette__category { margin-top: 4px; }

.cmd-palette__cat-label {
  padding: 8px 18px 4px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.cmd-palette__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cmd-palette__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 18px 7px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.cmd-palette__item:hover { background: var(--color-bg-soft); }
.cmd-palette__item.is-selected {
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
}

.cmd-palette__label {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.cmd-palette__meta {
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  color: var(--color-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 55%;
}
.cmd-palette__meta--mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
}

.cmd-palette__pill {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 2px;
  border-radius: var(--r-3);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(138, 90, 16, 0.10);
  color: var(--color-warn);
}
.cmd-palette__pill--warn {
  background: rgba(138, 90, 16, 0.10);
  color: var(--color-warn);
}

.cmd-palette__empty {
  padding: 28px 18px;
  text-align: center;
  font-size: var(--type-body-size);
  color: var(--color-text-3);
}

.cmd-palette__footer {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 8px 18px;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-bg);
  font-size: var(--type-label-size);
  color: var(--color-text-3);
}
.cmd-palette__footer kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 4px;
  border: 1px solid var(--color-hairline-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-3);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  text-align: center;
  color: var(--color-text-2);
  background: var(--color-surface);
  line-height: 1.2;
}

body.cmd-palette-open { overflow: hidden; }

@keyframes cmdkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cmdkRise {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-palette__backdrop,
  .cmd-palette__card { animation: none; }
  .cmd-palette__item { transition: none; }
}

@media (max-width: 640px) {
  .cmd-palette { padding-top: 24px; }
  .cmd-palette__card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 48px);
  }
  .cmd-palette__input { font-size: 15px; }
  .cmd-palette__meta { max-width: 40%; }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 3 - TODAY STRIP (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §0.5 / §10.

   40px persistent operational status strip. Visible on operational routes
   only. Built entirely on Phase 1 tokens.

   Visual contract (READ THIS BEFORE EDITING):
     • Calm. No alerts. No badges. No pulses. No animations on update.
     • Mono, small, evenly-spaced segments.
     • Light surface background; hairline top border.
     • Links (INJ/PROJ) underline on hover ONLY - no color change, no glow.
     • Static segments (DATE/EVENTS) are not interactive - never look it.
   ════════════════════════════════════════════════════════════════════════ */

/* Strip itself - fixed at bottom of viewport */
.today-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;                /* below cmd-palette (9999), above content */
  height: var(--shell-today-strip-h);
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.04em;
  user-select: none;
}
.today-strip[hidden] { display: none; }

/* Body offset only when the strip is actually visible. This prevents the
   strip from covering fixed footers or sticky content on its host pages. */
body[data-today-strip="visible"] {
  padding-bottom: var(--shell-today-strip-h);
}

.today-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--shell-max-content-w);
  margin: 0 auto;
  padding: 0 18px;
  gap: 20px;
}

.today-strip__left,
.today-strip__right {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.today-strip__seg {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  color: var(--color-text-2);
  text-decoration: none;
  padding: 4px 0;
}

.today-strip__seg--link {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast);
}
.today-strip__seg--link:hover {
  border-bottom-color: var(--color-hairline-strong);
  color: var(--color-ink);
}

.today-strip__key {
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.today-strip__val {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.today-strip__delta {
  color: var(--color-text-3);
  font-size: calc(var(--type-mono-sm-size) - 0.5px);
}

.today-strip__label {
  color: var(--color-text-2);
}

/* Date segment slightly less prominent - anchor, not metric */
.today-strip__seg--date .today-strip__label {
  color: var(--color-text-3);
}

@media (max-width: 720px) {
  .today-strip__inner { padding: 0 12px; gap: 12px; }
  .today-strip__right { gap: 12px; }
  /* Hide date label on narrow viewports; right-side metrics carry the load */
  .today-strip__seg--date { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .today-strip__seg--link { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 4 - SHELL B (Dashboard) (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §0.5 / §11.

   Workspace-local left rail. Phase 4 scope: Dashboard only. Research
   (Phase 5) and Draft Wizard (Phase 6) extend the same primitives.

   Layout primitives only - no widgets, no metrics, no decoration.
   Calm rail. Mono group labels. Active state via accent rail + soft
   wash (same vocabulary as Cmd-K selection).
   ════════════════════════════════════════════════════════════════════════ */

/* :root fallback so the rail positions correctly even before _measureNav()
   has run. JS overrides this on boot + resize via inline style. */
:root {
  --shell-nav-bottom: 64px;
}

.shell-b__rail {
  position: fixed;
  top: var(--shell-nav-bottom);
  left: 0;
  bottom: 0;                          /* base - overridden when today strip visible */
  width: var(--shell-left-rail-w);
  background: var(--color-bg);
  border-right: 1px solid var(--color-hairline);
  color: var(--color-text-2);
  font-family: var(--font-body);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 24px;                  /* top spacing is owned by the sticky head so it pins flush */
  z-index: 700;                       /* below today (800), below cmd-k (9999) */
  -webkit-overflow-scrolling: touch;
}
.shell-b__rail[hidden] { display: none; }

/* Today strip visible → leave room for it */
body[data-today-strip="visible"] .shell-b__rail {
  bottom: var(--shell-today-strip-h);
}

.shell-b__rail-head {
  padding: 0 18px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-hairline);
}
.shell-b__rail-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.shell-b__rail-home {
  display: block;
  margin-top: 2px;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color var(--motion-fast);
}
.shell-b__rail-home:hover {
  color: var(--color-accent);
}

.shell-b__rail-group {
  margin: 0 0 14px;
}
.shell-b__rail-label {
  padding: 6px 18px 4px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.shell-b__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shell-b__rail-link {
  display: block;
  padding: 5px 18px 5px 16px;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-text-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--motion-fast),
              background var(--motion-fast),
              border-color var(--motion-fast);
}
.shell-b__rail-link:hover {
  background: var(--color-bg-soft);
  color: var(--color-ink);
}
.shell-b__rail-link.is-active {
  color: var(--color-ink);
  font-weight: 600;
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
}

/* ── Content offset (Dashboard scope only - Phase 4) ─────────────────────
   Shift the dashboard workspace section right to clear the rail. Other
   sections / sub-pages remain unaffected. Research and Draft Wizard
   inherit equivalent selectors in Phase 5 / Phase 6.
   ──────────────────────────────────────────────────────────────────── */
/* Phase 4/5: when shell B is active for any in-scope workspace, the
   `.page` wrapper (which has max-width: 1320px; margin: 0 60px;
   padding: 0 32px 100px) needs its left constraint removed so the rail
   can sit at viewport left:0 without overlapping content. The rail
   itself provides the visual divider; specific workspace landings +
   the shared subPageLanding provide content padding-left.

   SCOPED to >768px viewports only. At mobile the rail is hidden and
   .page must keep its default responsive constraints so content
   doesn't overflow the viewport.

   This selector list expands as SCOPE_WORKSPACES grows in later phases
   (Phase 6 adds draft-wizard). Keep this list in sync with
   `SCOPE_WORKSPACES` in app.js shellB IIFE. */
@media (min-width: 769px) {
  body[data-shell="dashboard"]    .page,
  body[data-shell="research"]     .page,
  body[data-shell="draft-wizard"] .page {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    /* padding-bottom: 100px preserved from base shorthand */
  }
}

/* Anchor landing content next to the rail. max-width: none + margin: 0
   override the .ws-landing centering (max-width: 1320px; margin: 24px
   auto 64px) so content sits flush with the rail's right edge rather
   than floating in the viewport center.

   For Research, the offset list also includes `.research-workspace`
   so the legacy MiLB prospects view (which has its own
   `.prospects-sidebar` inside) doesn't get covered by the Shell B rail.
   The result is a multi-pane terminal layout: Shell B rail provides
   workspace-level nav, prospects-sidebar provides MiLB-specific year
   nav within the content area. */
body[data-shell="dashboard"]    #wsLandingDashboard,
body[data-shell="dashboard"]    #subPageLanding,
body[data-shell="research"]     #wsLandingResearch,
body[data-shell="research"]     #subPageLanding,
body[data-shell="research"]     .research-workspace,
/* 2026-05-27: Other legacy workspaces also need to clear the fixed rail
   (fantasy-prospects, fypd, prospects, studies, methodology, ops). Without
   this, the rail covers the first ~140px of the workspace content
   (visible: "pect Rankings" instead of "Prospect Rankings"). */
body[data-shell="research"]     .fantasy-prospects-workspace,
body[data-shell="research"]     .prospects-workspace,
body[data-shell="research"]     .studies-workspace,
body[data-shell="research"]     .ops-workspace,
body[data-shell="draft-wizard"] .fypd-workspace,
body[data-shell="draft-wizard"] #wsLandingDraftWizard,
body[data-shell="draft-wizard"] #subPageLanding {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(var(--shell-left-rail-w) + 24px);
  padding-right: 24px;
  transition: padding-left var(--motion-layout);
}

/* When a legacy workspace renders inside Research, hide the Research
   workspace landing so we don't show two stacked surfaces. Same fix for
   Draft Wizard. The user navigated to a specific sub-page; the parent
   workspace landing is noise here. */
body[data-shell="research"] .fantasy-prospects-workspace:not([hidden]) ~ #wsLandingResearch,
body[data-shell="research"] #wsLandingResearch:has(~ .fantasy-prospects-workspace:not([hidden])),
body[data-shell="research"] #wsLandingResearch:has(~ .prospects-workspace:not([hidden])),
body[data-shell="research"] #wsLandingResearch:has(~ .studies-workspace:not([hidden])),
body[data-shell="research"] #wsLandingResearch:has(~ .ops-workspace:not([hidden])),
body[data-shell="draft-wizard"] #wsLandingDraftWizard:has(~ .fypd-workspace:not([hidden])) {
  display: none !important;
}
/* Pre-:has() fallback for older browsers - use a body-class hook the
   legacy renderers already set when active. */
body[data-legacy-workspace] #wsLandingResearch,
body[data-legacy-workspace] #wsLandingDraftWizard,
body[data-legacy-workspace] #wsLandingDashboard {
  display: none !important;
}

/* Cap the *inner* content width on very wide viewports so dense rows don't
   stretch to absurd line lengths. The cap is generous (1320px) so existing
   .ws-* grids and .research-workspace internals continue to render at
   their intended widths. */
body[data-shell="dashboard"]    #wsLandingDashboard > *,
body[data-shell="dashboard"]    #subPageLanding > *,
body[data-shell="research"]     #wsLandingResearch > *,
body[data-shell="research"]     #subPageLanding > *,
body[data-shell="draft-wizard"] #wsLandingDraftWizard > *,
body[data-shell="draft-wizard"] #subPageLanding > * {
  max-width: var(--shell-max-content-w);
}

@media (max-width: 1100px) {
  body[data-shell="dashboard"]    #wsLandingDashboard,
  body[data-shell="dashboard"]    #subPageLanding,
  body[data-shell="research"]     #wsLandingResearch,
  body[data-shell="research"]     #subPageLanding,
  body[data-shell="research"]     .research-workspace,
  body[data-shell="research"]     .fantasy-prospects-workspace,
  body[data-shell="research"]     .prospects-workspace,
  body[data-shell="research"]     .studies-workspace,
  body[data-shell="research"]     .ops-workspace,
  body[data-shell="draft-wizard"] .fypd-workspace,
  body[data-shell="draft-wizard"] #wsLandingDraftWizard,
  body[data-shell="draft-wizard"] #subPageLanding {
    padding-left: calc(var(--shell-left-rail-w) + 16px);
    padding-right: 16px;
  }
}

/* Mobile: rail hidden, content full-width. Top nav still provides the
   workspace switch; Cmd-K still works (⌘K, on-screen keyboard tap-target
   via long-press of the page is intentionally NOT added - overlay
   approach is desktop-first for v1). */
@media (max-width: 768px) {
  .shell-b__rail { display: none !important; }
  body[data-shell="dashboard"]    #wsLandingDashboard,
  body[data-shell="dashboard"]    #subPageLanding,
  body[data-shell="research"]     #wsLandingResearch,
  body[data-shell="research"]     #subPageLanding,
  body[data-shell="research"]     .research-workspace,
  body[data-shell="research"]     .fantasy-prospects-workspace,
  body[data-shell="research"]     .prospects-workspace,
  body[data-shell="research"]     .studies-workspace,
  body[data-shell="research"]     .ops-workspace,
  body[data-shell="draft-wizard"] .fypd-workspace,
  body[data-shell="draft-wizard"] #wsLandingDraftWizard,
  body[data-shell="draft-wizard"] #subPageLanding {
    max-width: 1320px;       /* restore default ws-landing constraint */
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-b__rail-link,
  .shell-b__rail-home { transition: none; }
  body[data-shell="dashboard"]    #wsLandingDashboard,
  body[data-shell="dashboard"]    #subPageLanding,
  body[data-shell="research"]     #wsLandingResearch,
  body[data-shell="research"]     #subPageLanding,
  body[data-shell="research"]     .research-workspace,
  body[data-shell="draft-wizard"] #wsLandingDraftWizard,
  body[data-shell="draft-wizard"] #subPageLanding { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 7 - RIGHT RAIL (stream-detail panel) (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §0.5 refinement 4 / §13.

   Visible only at ≥1280px on Shell B routes. Auto-hides below 1280px to
   keep main content from being squeezed between two rails.

   Visual contract:
     • Read-only - institutional, NOT social
     • Mono timestamps, no severity colors, no engagement chrome
     • Hairline left border, same surface as Shell B left rail
   ════════════════════════════════════════════════════════════════════════ */
.right-rail {
  position: fixed;
  top: var(--shell-nav-bottom);
  right: 0;
  bottom: 0;
  width: var(--shell-right-rail-w);
  background: var(--color-bg);
  border-left: 1px solid var(--color-hairline);
  color: var(--color-text-2);
  font-family: var(--font-body);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 0 24px;
  z-index: var(--z-rail);        /* below today (800), below cmd-k (9999) */
}
.right-rail[hidden] { display: none; }

body[data-today-strip="visible"] .right-rail {
  bottom: var(--shell-today-strip-h);
}

.right-rail__head {
  padding: 0 16px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-hairline);
}
.right-rail__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.right-rail__sub {
  margin-top: 2px;
  font-size: var(--type-label-size);
  color: var(--color-text-3);
}

.right-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.right-rail__row {
  display: grid;
  grid-template-columns: 32px 36px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 6px 16px;
  font-size: var(--type-label-size);
  line-height: 1.4;
  border-left: 2px solid transparent;
}
.right-rail__row:hover {
  background: var(--color-bg-soft);
}
.right-rail__time {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  color: var(--color-text-3);
}
.right-rail__domain {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}
.right-rail__entity {
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-rail__empty {
  padding: 18px 16px;
  font-size: var(--type-label-size);
  color: var(--color-text-3);
  text-align: center;
}

.right-rail__foot {
  margin-top: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--color-hairline);
}
.right-rail__more {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.06em;
  color: var(--color-text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.right-rail__more:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-hairline-strong);
}

/* Push main content left when right rail is visible (only on Shell B
   routes ≥1280px - same conditions JS uses to show the rail). */
@media (min-width: 1280px) {
  body[data-right-rail="visible"][data-shell="dashboard"]    #wsLandingDashboard,
  body[data-right-rail="visible"][data-shell="dashboard"]    #subPageLanding,
  body[data-right-rail="visible"][data-shell="research"]     #wsLandingResearch,
  body[data-right-rail="visible"][data-shell="research"]     #subPageLanding,
  body[data-right-rail="visible"][data-shell="research"]     .research-workspace,
  body[data-right-rail="visible"][data-shell="draft-wizard"] #wsLandingDraftWizard,
  body[data-right-rail="visible"][data-shell="draft-wizard"] #subPageLanding {
    padding-right: calc(var(--shell-right-rail-w) + 24px);
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 8 - STREAM-AS-PAGE (#/streams/today) (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §12.

   Read-only journal viewer. Grouped by time bucket (Last hour / Last 6
   hours / Earlier today). Mono timestamps + domain tags, calm rows.
   ════════════════════════════════════════════════════════════════════════ */
.stream-bucket-label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin: 12px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-hairline);
}

.stream-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.stream-row {
  display: grid;
  grid-template-columns: 56px 60px 1fr 90px 60px;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  border-bottom: 1px solid var(--color-hairline);
}
.stream-row__time,
.stream-row__domain,
.stream-row__age {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  letter-spacing: 0.04em;
  color: var(--color-text-3);
}
.stream-row__domain {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-2);
}
.stream-row__entity {
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-row__type {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  color: var(--color-text-3);
  text-align: right;
}

@media (max-width: 720px) {
  .stream-row {
    grid-template-columns: 48px 1fr 50px;
    grid-template-areas:
      'time entity age'
      'dom  type   .  ';
  }
  .stream-row__time   { grid-area: time; }
  .stream-row__entity { grid-area: entity; }
  .stream-row__age    { grid-area: age; text-align: right; }
  .stream-row__domain { grid-area: dom; }
  .stream-row__type   { grid-area: type; text-align: left; }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 9 - TABLE SYSTEM (sticky header + sort) (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §14.

   Sticky thead, click-to-sort with calm mono arrow indicators. No icons.
   Original row order preserved as a state (asc → desc → none cycle).
   ════════════════════════════════════════════════════════════════════════ */
.sub-table thead th {
  position: sticky;
  /* 2026-05-27: top: 64px clears the fixed 64px site-nav. Earlier value
     of 0 caused the sticky thead to slide under the nav when scrolled,
     making column labels invisible. */
  top: 64px;
  background: var(--color-surface);
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--color-hairline);
}
body[data-today-strip="visible"] .sub-table thead th {
  /* Today strip is fixed at the bottom, not top - sticky thead still
     clears just the nav (top: 64px). */
  top: 64px;
}

.sub-table__th--sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--motion-fast);
}
.sub-table__th--sortable:hover {
  background: var(--color-bg-soft);
}
.sub-table__th--sortable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.sub-table__sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  color: var(--color-accent);
  min-width: 10px;
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 10 - MOBILE / RESPONSIVE POLISH (2026-05-26)
   Per docs/UI_RESET_PROPOSAL.md §15.

   Fixes the pre-existing .ws-landing overflow flagged during Phase 4
   verification (the element rendered wider than parent in flex layout
   due to intrinsic min-content from un-shrinkable hero text). Adds
   responsive hero scaling and tightens section gaps at mobile.
   ════════════════════════════════════════════════════════════════════════ */
.ws-landing {
  /* CRITICAL: in flex parents, default min-width: auto allows children to
     overflow when their content can't shrink. Force min-width: 0 so the
     flex container constrains us. max-width: 100% provides a hard cap. */
  min-width: 0;
  max-width: 100%;
}

/* Mobile-scoped hero typography. The hero title at the default 40px
   token doesn't wrap predictably on narrow viewports (the long word
   "intelligence" / "operating" doesn't break). Tighten and force wrap. */
@media (max-width: 640px) {
  .ws-hero__title,
  .sub-hero__title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ws-hero {
    padding: 20px 0 16px !important;
    margin-bottom: 20px !important;
  }
  .ws-section {
    margin-bottom: 24px !important;
  }
  /* Stream-as-page hero too */
  .sub-hero {
    padding: 16px 0 !important;
  }
}

/* The .ws-landing's children can also overflow (e.g. .ws-hero) - apply
   the same defensive constraint. */
.ws-hero,
.ws-section,
.sub-hero,
.sub-section,
.ws-card-grid,
.ws-card {
  min-width: 0;
  max-width: 100%;
}

/* The .ws-card-grid uses `repeat(auto-fill, minmax(280px, 1fr))` which
   doesn't fit on viewports <320px effective width (375 viewport - 48 padding
   - any rail margin = ~320). Force single column below 480px so cards
   stack cleanly without horizontal overflow. */
@media (max-width: 480px) {
  .ws-card-grid {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 10 - Today strip EVENTS clickable (§10 amendment)
   Now that #/streams/today exists (Phase 8), the EVENTS segment becomes
   a navigable link. Previously kept inert per §10 v1 prohibition against
   dead links (honest-surface §7).
   ════════════════════════════════════════════════════════════════════════ */
.today-strip__seg--events {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast);
}
.today-strip__seg--events:hover {
  border-bottom-color: var(--color-hairline-strong);
  color: var(--color-ink);
}


/* ════════════════════════════════════════════════════════════════════════
   POST-PHASE-10 CLEANUP PASS (2026-05-26)
   User feedback: Dashboard at ~1400px feels messy - rails scroll their
   content internally, hiding the workspace heading and "RECENT ACTIVITY"
   labels; landing rows are noisy with NEW badges.

   Pure quietness fixes. No primitive changes.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Sticky workspace heading in left rail - stays visible even when the
   rail's content scrolls past it internally. Same vocabulary as the table
   sticky thead. */
.shell-b__rail-head {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 3;                 /* above the rail links so nothing bleeds over the pinned head */
  padding-top: 18px;          /* head owns the rail's top spacing (rail padding-top is now 0) */
  margin-top: 0;              /* flush to the rail top — no gap for items to peek through */
}

/* 2. Sticky activity heading in right rail */
.right-rail__head {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
  padding-top: 18px;
  margin-top: -18px;
}

/* 3. Quieter NEW / FEATURED / status badges on workspace landings.
   Previously these were attention-grabbing accent pills. Tone them down to
   institutional hairline outlines - readable but not shouty. */
.ws-card__badge,
.ws-row__badge,
.ws-row__status {
  font-size: 9.5px !important;
  letter-spacing: 0.10em !important;
  padding: 2px 6px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid var(--color-hairline-strong, rgba(15,14,12,0.16)) !important;
  color: var(--color-text-3, #8a857c) !important;
  border-radius: var(--r-3)!important;
  text-transform: uppercase;
}
/* Preserve accent only for genuine live / warn states (institutional, not promotional) */
.ws-card__badge--live,
.ws-row__badge--live {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  background: transparent !important;
}
.ws-card__badge--warn,
.ws-row__badge--warn,
.ws-row__status--warn {
  border-color: var(--color-warn, #734a0c) !important;
  color: var(--color-warn, #734a0c) !important;
  background: transparent !important;
}

/* 4. Tone down the "updated just now" / "updated Xh ago" timestamps on
   workspace landing rows. They were full-color body text competing with
   player names. Mono small + text-3 makes them recede. */
.ws-row__ts,
.ws-row__time,
.ws-card__ts {
  font-family: var(--font-mono) !important;
  font-size: var(--type-mono-sm-size) !important;
  color: var(--color-text-3) !important;
  letter-spacing: 0.02em !important;
}

/* 5. Tighter vertical density on .ws-row so 7+ rows don't dominate the
   screen vertically. Keep readable but reduce padding by ~30%. */
.ws-row {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.ws-row__name {
  font-size: var(--type-body-size) !important;
  line-height: 1.35 !important;
}
.ws-row__sub {
  font-size: var(--type-label-size) !important;
  color: var(--color-text-3) !important;
  margin-top: 1px !important;
}

/* 6. Raise the right-rail visibility threshold so we stop cramping content
   at mid-widths (1280-1440px). At ≤1440 the three-column layout was
   feeling pinched; at ≥1440 it breathes. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .right-rail { display: none !important; }
  body[data-right-rail="visible"][data-shell="dashboard"]    #wsLandingDashboard,
  body[data-right-rail="visible"][data-shell="dashboard"]    #subPageLanding,
  body[data-right-rail="visible"][data-shell="research"]     #wsLandingResearch,
  body[data-right-rail="visible"][data-shell="research"]     #subPageLanding,
  body[data-right-rail="visible"][data-shell="research"]     .research-workspace,
  body[data-right-rail="visible"][data-shell="draft-wizard"] #wsLandingDraftWizard,
  body[data-right-rail="visible"][data-shell="draft-wizard"] #subPageLanding {
    padding-right: 24px !important;     /* restore default right padding */
  }
}


/* ════════════════════════════════════════════════════════════════════════
   FLYOUT REFACTOR - two-column progressive disclosure (2026-05-26)
   Per user direction: replace dense mega-menu with a calmer institutional
   navigator. Left col = workspace context + group buttons. Right col =
   items in active group. Hover previews; click pins.

   The body is restructured by _renderFlyout into `.layer1-flyout__cols`;
   the legacy `.layer1-flyout__group` / `.layer1-flyout__list` /
   `.layer1-flyout__link--more` / `.layer1-flyout__viewall*` rules are
   dead code now (kept in source for posterity but never match).
   ════════════════════════════════════════════════════════════════════════ */

/* Container - slightly narrower than before, no padding (handled by cols),
   light surface with hairline border. Calm shadow.
   Width: 560px total = 220 (groups) + 340 (items). */
.layer1-flyout {
  width: 560px !important;
  max-width: calc(100vw - 16px) !important;
  padding: 0 !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--color-hairline-strong, rgba(15,14,12,0.16)) !important;
  border-radius: var(--r-8)!important;
  box-shadow: 0 1px 1px rgba(15, 14, 12, 0.04),
              0 8px 24px -8px rgba(15, 14, 12, 0.12),
              0 24px 48px -16px rgba(15, 14, 12, 0.16) !important;
  color: var(--color-ink, #1a1814) !important;
  font-family: var(--font-body, inherit);
  animation: layer1FlyoutIn 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Hide the legacy header - workspace title now lives inside the body's
   left column with proper context (eyebrow + tagline). */
.layer1-flyout__head {
  display: none !important;
}

/* Body becomes the cols container. Reset margins/padding/borders. */
.layer1-flyout__body {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  max-height: 480px !important;
  overflow: hidden !important;
  border: 0 !important;
}

.layer1-flyout__cols {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 280px;
  max-height: 480px;
}

/* ── LEFT COLUMN - workspace context + group buttons ───────────────── */
.layer1-flyout__col-groups {
  background: var(--color-bg, #fafaf7);
  border-right: 1px solid var(--color-hairline, rgba(15,14,12,0.08));
  padding: 18px 0 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.layer1-flyout__ws {
  padding: 0 16px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-hairline, rgba(15,14,12,0.08));
}
.layer1-flyout__ws-eyebrow {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3, #8a857c);
}
.layer1-flyout__ws-title {
  display: block;
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-ink, #1a1814);
  text-decoration: none;
  letter-spacing: -0.01em;
  cursor: default;          /* static label, not a link */
  user-select: text;
  pointer-events: none;     /* belt-and-suspenders: no click target */
}
.layer1-flyout__ws-tagline {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-text-3, #8a857c);
}

.layer1-flyout__groups {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.layer1-flyout__group-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px 8px 14px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--motion-fast, 150ms ease),
              border-color var(--motion-fast, 150ms ease);
}
.layer1-flyout__group-btn:hover,
.layer1-flyout__group-btn:focus-visible {
  background: var(--color-bg-soft, rgba(15,14,12,0.03));
  outline: none;
}
/* Per-workspace hue family for the flyout - repaints the active group
   indicator and active item color so Rankings flyout indicators are
   blue, Dashboard red, Draft Wizard orange, etc. Variable is set on
   the flyout root via JS (data-workspace="rankings" etc). */
.layer1-flyout[data-workspace="rankings"]      { --fl-color: #3A6FF7; --fl-accent: #DCE8FF; }
.layer1-flyout[data-workspace="dashboard"]     { --fl-color: #C62828; --fl-accent: #FFD6D6; }
.layer1-flyout[data-workspace="draft-wizard"]  { --fl-color: #FF7A1A; --fl-accent: #FFE0BF; }
.layer1-flyout[data-workspace="research"]      { --fl-color: #00A8B5; --fl-accent: #B9F3F7; }
.layer1-flyout[data-workspace="tools"]         { --fl-color: #7C4DFF; --fl-accent: #D9CCFF; }
.layer1-flyout[data-workspace="methodology"]   { --fl-color: #6E6E73; --fl-accent: #D9D9DD; }

.layer1-flyout__group-btn.is-active {
  background: var(--color-surface, #ffffff);
  border-left-color: var(--fl-color, var(--color-accent, #b23415));
}
.layer1-flyout__group-btn.is-pinned {
  /* Subtle pinned indicator - slightly heavier accent rail */
  border-left-width: 3px;
  padding-left: 13px;
}

.layer1-flyout__group-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink, #1a1814);
  letter-spacing: -0.005em;
}
.layer1-flyout__group-desc {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--color-text-3, #8a857c);
  letter-spacing: 0;
}
.layer1-flyout__group-btn.is-active .layer1-flyout__group-name {
  color: var(--fl-color, var(--color-accent, #b23415));
}

/* ── RIGHT COLUMN - items for active group ─────────────────────────── */
.layer1-flyout__col-items {
  padding: 18px 18px 16px;
  overflow-y: auto;
  background: var(--color-surface, #ffffff);
}

.layer1-flyout__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.layer1-flyout__items[hidden] { display: none !important; }

.layer1-flyout__item {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-2, #5a554d);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: color var(--motion-fast, 150ms ease),
              background var(--motion-fast, 150ms ease),
              border-color var(--motion-fast, 150ms ease);
}
.layer1-flyout__item:hover {
  color: var(--color-ink, #1a1814);
  background: var(--color-bg-soft, rgba(15,14,12,0.03));
  border-left-color: var(--color-hairline-strong, rgba(15,14,12,0.16));
}
.layer1-flyout__item.is-active {
  color: var(--fl-color, var(--color-accent, #b23415)) !important;
  background: color-mix(in srgb, var(--fl-color, var(--color-accent, #b23415)) 8%, transparent) !important;
  border-left-color: var(--fl-color, var(--color-accent, #b23415)) !important;
  font-weight: 600;
}
.layer1-flyout__item:focus-visible {
  outline: 2px solid var(--fl-color, var(--color-accent, #b23415));
  outline-offset: -2px;
}

/* Owner spec (2026-06-21, final): LEAF items in the flyout + left rail are
   clickable links; only the GROUP headers stay inert (flyout group buttons
   reveal-on-hover/tap but never navigate; rail group labels are plain <div>s).
   Just keep the pointer cursor off the inert group headers. */
.layer1-flyout__group-btn { cursor: default; }
.shell-b__rail-label { cursor: default; }

/* ── Operations subsection chrome (2026-06-21): owner flagged the #/operations/*
   pages as "badly formatted." They reuse the legacy .prospects-* shell, so these
   overrides — SCOPED to .ops-main so the real Prospects pages are untouched —
   de-weight the jargon banner into a quiet note and stop the header meta from
   floating mid-row, bringing ops in line with the clean research/rankings sub-pages. */
.ops-main .prospects-research-banner {
  background: transparent; border: 0; border-left: 0; padding: 0;
  margin-bottom: 12px; color: var(--text-3, #8a8680);
}
.ops-main .prospects-main__head {
  align-items: flex-end; gap: 20px; margin-bottom: 22px; padding-bottom: 14px;
}
.ops-main .prospects-main__head > div:first-child { min-width: 0; }
.ops-main .ops-head-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; flex-shrink: 0;
}
.ops-main .ops-head-meta .ops-freshness { margin-top: 0; align-self: auto; }

/* Scrollbar in both columns - quiet hairline thumbs */
.layer1-flyout__col-groups::-webkit-scrollbar,
.layer1-flyout__col-items::-webkit-scrollbar { width: 6px; }
.layer1-flyout__col-groups::-webkit-scrollbar-thumb,
.layer1-flyout__col-items::-webkit-scrollbar-thumb {
  background: var(--color-hairline-strong, rgba(15,14,12,0.16));
  border-radius: var(--r-3);
}
.layer1-flyout__col-groups::-webkit-scrollbar-track,
.layer1-flyout__col-items::-webkit-scrollbar-track {
  background: transparent;
}

/* Narrow viewport: collapse to a single column (groups on top, items
   below). The flyout already hides ≤899px per the legacy mobile rule
   in styles.css. */
@media (max-width: 700px) {
  .layer1-flyout { width: calc(100vw - 16px) !important; }
  .layer1-flyout__cols {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .layer1-flyout__col-groups {
    border-right: 0;
    border-bottom: 1px solid var(--color-hairline, rgba(15,14,12,0.08));
  }
}

@media (prefers-reduced-motion: reduce) {
  .layer1-flyout { animation: none !important; }
  .layer1-flyout__group-btn,
  .layer1-flyout__item,
  .layer1-flyout__ws-title { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   FLYOUT POLISH (2026-05-26) - fix label/desc stacking + quieter bg
   User feedback: group label and description were rendering side-by-side
   instead of stacked. Left col cream tint felt busy. These overrides win
   via higher specificity (.layer1-flyout descendant + !important).
   ════════════════════════════════════════════════════════════════════════ */

/* Force vertical stacking of label + description inside each group button.
   Some upstream style was making the inner spans flow inline. */
.layer1-flyout .layer1-flyout__group-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 9px 14px 9px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0!important;
  cursor: pointer;
  line-height: 1.3;
}
.layer1-flyout .layer1-flyout__group-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--color-ink, #1a1814) !important;
  text-transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer1-flyout .layer1-flyout__group-desc {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--color-text-3, #8a857c) !important;
  text-transform: none !important;
}

/* Quieter left col - same surface as right col, separated by hairline only.
   No more dual-tone panel; the active row is the only visual emphasis. */
.layer1-flyout .layer1-flyout__col-groups {
  background: var(--color-surface, #ffffff) !important;
  border-right: 1px solid var(--color-hairline, rgba(15,14,12,0.08)) !important;
  padding: 18px 0 12px !important;
}

/* Hover (non-active): very subtle, no left rail */
.layer1-flyout .layer1-flyout__group-btn:hover {
  background: var(--color-bg-soft, rgba(15,14,12,0.025)) !important;
  border-left-color: transparent !important;
}

/* Active group: soft accent-tinted background + 2px accent rail.
   Name color stays ink (not accent) so the active row reads as
   "selected" rather than as a hot link. */
.layer1-flyout .layer1-flyout__group-btn.is-active {
  background: color-mix(in srgb, var(--fl-color, var(--color-accent, #b23415)) 6%, transparent) !important;
  border-left-color: var(--fl-color, var(--color-accent, #b23415)) !important;
}
.layer1-flyout .layer1-flyout__group-btn.is-active .layer1-flyout__group-name {
  color: var(--color-ink, #1a1814) !important;   /* not accent - keep ink */
}

/* Pinned: same as active visually + 3px rail for tactile feel */
.layer1-flyout .layer1-flyout__group-btn.is-pinned {
  border-left-width: 3px !important;
  padding-left: 13px !important;
}

/* Workspace header - slightly less prominent so the active group draws
   the eye first */
.layer1-flyout .layer1-flyout__ws {
  padding: 0 14px 12px !important;
}
.layer1-flyout .layer1-flyout__ws-title {
  font-size: 15px !important;
}
.layer1-flyout .layer1-flyout__ws-tagline {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Right col: tighter top padding so the active items align visually with
   the active group button on the left */
.layer1-flyout .layer1-flyout__col-items {
  padding: 18px 18px 16px !important;
}
.layer1-flyout .layer1-flyout__item {
  padding: 5px 8px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD/RESEARCH/DRAFT WIZARD landing density compression (2026-05-26)
   User feedback: landing is taller than viewport at ~1400×900. Compress
   hero + sections + rows so the entire workspace landing fits in a single
   screen. Applies to all three Shell B workspace landings.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero - significantly tighter padding + smaller title */
body[data-shell="dashboard"] .ws-hero,
body[data-shell="research"]  .ws-hero,
body[data-shell="draft-wizard"] .ws-hero,
body[data-shell="dashboard"] #wsLandingDashboard .ws-hero,
body[data-shell="research"]  #wsLandingResearch .ws-hero,
body[data-shell="draft-wizard"] #wsLandingDraftWizard .ws-hero {
  padding: 14px 0 12px !important;
  margin-bottom: 16px !important;
}

body[data-shell="dashboard"] .ws-hero__title,
body[data-shell="research"]  .ws-hero__title,
body[data-shell="draft-wizard"] .ws-hero__title {
  font-size: 30px !important;
  line-height: 1.1 !important;
  margin: 4px 0 0 !important;
  letter-spacing: -0.02em !important;
}

body[data-shell="dashboard"] .ws-hero__sub,
body[data-shell="research"]  .ws-hero__sub,
body[data-shell="draft-wizard"] .ws-hero__sub,
body[data-shell="dashboard"] .ws-hero__tag,
body[data-shell="research"]  .ws-hero__tag,
body[data-shell="draft-wizard"] .ws-hero__tag {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin: 6px 0 0 !important;
}

body[data-shell="dashboard"] .ws-hero__eyebrow,
body[data-shell="research"]  .ws-hero__eyebrow,
body[data-shell="draft-wizard"] .ws-hero__eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}

/* Sections - much tighter margin between sections */
body[data-shell="dashboard"] .ws-section,
body[data-shell="research"]  .ws-section,
body[data-shell="draft-wizard"] .ws-section {
  margin-bottom: 18px !important;
}

body[data-shell="dashboard"] .ws-section__head,
body[data-shell="research"]  .ws-section__head,
body[data-shell="draft-wizard"] .ws-section__head {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

body[data-shell="dashboard"] .ws-section__title,
body[data-shell="research"]  .ws-section__title,
body[data-shell="draft-wizard"] .ws-section__title {
  font-size: 17px !important;
  line-height: 1.2 !important;
  margin: 2px 0 0 !important;
}

body[data-shell="dashboard"] .ws-section__eyebrow,
body[data-shell="research"]  .ws-section__eyebrow,
body[data-shell="draft-wizard"] .ws-section__eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}

/* Heartbeat rows - very compact */
body[data-shell="dashboard"] .ws-row,
body[data-shell="research"]  .ws-row,
body[data-shell="draft-wizard"] .ws-row {
  padding: 5px 8px !important;
  min-height: 0 !important;
}
body[data-shell="dashboard"] .ws-row__name,
body[data-shell="research"]  .ws-row__name,
body[data-shell="draft-wizard"] .ws-row__name {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
body[data-shell="dashboard"] .ws-row__sub,
body[data-shell="research"]  .ws-row__sub,
body[data-shell="draft-wizard"] .ws-row__sub {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

/* Cap "What changed since yesterday" at 5 rows on operational landings so
   the section doesn't dominate the page. Use nth-child for graceful cap -
   the full list is still reachable via the data sub-pages (e.g. injury
   report, season projections). */
body[data-shell="dashboard"] #wsLandingDashboard .ws-row-list > .ws-row:nth-child(n+6),
body[data-shell="research"]  #wsLandingResearch  .ws-row-list > .ws-row:nth-child(n+6),
body[data-shell="draft-wizard"] #wsLandingDraftWizard .ws-row-list > .ws-row:nth-child(n+6) {
  display: none !important;
}

/* Metric cards - tighter padding so the "System state at a glance" row
   doesn't take 200+ vertical. */
body[data-shell="dashboard"] .ws-metric,
body[data-shell="research"]  .ws-metric,
body[data-shell="draft-wizard"] .ws-metric {
  padding: 12px 14px !important;
  min-height: 0 !important;
}
body[data-shell="dashboard"] .ws-metric__value,
body[data-shell="research"]  .ws-metric__value,
body[data-shell="draft-wizard"] .ws-metric__value {
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 4px 0 !important;
}
body[data-shell="dashboard"] .ws-metric__label,
body[data-shell="research"]  .ws-metric__label,
body[data-shell="draft-wizard"] .ws-metric__label {
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
}
body[data-shell="dashboard"] .ws-metric__sub,
body[data-shell="research"]  .ws-metric__sub,
body[data-shell="draft-wizard"] .ws-metric__sub {
  font-size: 10.5px !important;
  margin-top: 2px !important;
}

/* Ws-card-grid - tighter gap so three sections of cards fit */
body[data-shell="dashboard"] .ws-card-grid,
body[data-shell="research"]  .ws-card-grid,
body[data-shell="draft-wizard"] .ws-card-grid {
  gap: 10px !important;
}

body[data-shell="dashboard"] .ws-card,
body[data-shell="research"]  .ws-card,
body[data-shell="draft-wizard"] .ws-card {
  padding: 12px 14px 12px !important;
  gap: 4px !important;
}
body[data-shell="dashboard"] .ws-card__title,
body[data-shell="research"]  .ws-card__title,
body[data-shell="draft-wizard"] .ws-card__title {
  font-size: 13.5px !important;
  line-height: 1.3 !important;
}
body[data-shell="dashboard"] .ws-card__desc,
body[data-shell="research"]  .ws-card__desc,
body[data-shell="draft-wizard"] .ws-card__desc {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* Compress the workspace landing's top + bottom padding from .page */
body[data-shell="dashboard"] #wsLandingDashboard,
body[data-shell="research"]  #wsLandingResearch,
body[data-shell="draft-wizard"] #wsLandingDraftWizard {
  padding-top: 0 !important;
  padding-bottom: 24px !important;
}

/* Tighten the row-list spacing */
body[data-shell="dashboard"] .ws-row-list,
body[data-shell="research"]  .ws-row-list,
body[data-shell="draft-wizard"] .ws-row-list {
  margin: 0 !important;
  padding: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   AGGRESSIVE FIT - make the entire workspace landing fit in a single
   viewport at 1400×900. Cap row counts harder, shrink everything.
   ════════════════════════════════════════════════════════════════════════ */

/* Cap heartbeat at 4 rows (was 5) */
body[data-shell="dashboard"] #wsLandingDashboard .ws-row-list > .ws-row:nth-child(n+5),
body[data-shell="research"]  #wsLandingResearch  .ws-row-list > .ws-row:nth-child(n+5),
body[data-shell="draft-wizard"] #wsLandingDraftWizard .ws-row-list > .ws-row:nth-child(n+5) {
  display: none !important;
}

/* Even tighter row padding */
body[data-shell="dashboard"] .ws-row,
body[data-shell="research"]  .ws-row,
body[data-shell="draft-wizard"] .ws-row {
  padding: 4px 8px !important;
}

/* Smaller hero */
body[data-shell="dashboard"] .ws-hero,
body[data-shell="research"]  .ws-hero,
body[data-shell="draft-wizard"] .ws-hero {
  padding: 10px 0 8px !important;
  margin-bottom: 12px !important;
}
body[data-shell="dashboard"] .ws-hero__title,
body[data-shell="research"]  .ws-hero__title,
body[data-shell="draft-wizard"] .ws-hero__title {
  font-size: 24px !important;
  line-height: 1.1 !important;
}
body[data-shell="dashboard"] .ws-hero__sub,
body[data-shell="research"]  .ws-hero__sub,
body[data-shell="draft-wizard"] .ws-hero__sub,
body[data-shell="dashboard"] .ws-hero__tag,
body[data-shell="research"]  .ws-hero__tag,
body[data-shell="draft-wizard"] .ws-hero__tag {
  display: none !important;             /* drop sub-tagline on operational landings */
}

/* Tighter sections */
body[data-shell="dashboard"] .ws-section,
body[data-shell="research"]  .ws-section,
body[data-shell="draft-wizard"] .ws-section {
  margin-bottom: 12px !important;
}

/* Smaller metric cards */
body[data-shell="dashboard"] .ws-metric,
body[data-shell="research"]  .ws-metric,
body[data-shell="draft-wizard"] .ws-metric {
  padding: 10px 12px !important;
}
body[data-shell="dashboard"] .ws-metric__value,
body[data-shell="research"]  .ws-metric__value,
body[data-shell="draft-wizard"] .ws-metric__value {
  font-size: 24px !important;
}

/* Cap card-grid items at 3 cards visible per row, hide overflow rows */
body[data-shell="dashboard"] .ws-card-grid > .ws-card:nth-child(n+4),
body[data-shell="research"]  .ws-card-grid > .ws-card:nth-child(n+4),
body[data-shell="draft-wizard"] .ws-card-grid > .ws-card:nth-child(n+4) {
  display: none !important;
}

body[data-shell="dashboard"] .ws-card,
body[data-shell="research"]  .ws-card,
body[data-shell="draft-wizard"] .ws-card {
  padding: 10px 12px !important;
}
body[data-shell="dashboard"] .ws-card__title,
body[data-shell="research"]  .ws-card__title,
body[data-shell="draft-wizard"] .ws-card__title {
  font-size: 12.5px !important;
}
body[data-shell="dashboard"] .ws-card__desc,
body[data-shell="research"]  .ws-card__desc,
body[data-shell="draft-wizard"] .ws-card__desc {
  font-size: 11px !important;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cut at 3 sections so the landing fits in a single 900px viewport.
   Section 4+ ("What needs your attention" / "Quick actions") accessible
   via Cmd-K + the workspace rail. The landing is a context surface,
   not an action menu. Measured: hero 98 + s1 181 + s2 156 + s3 88
   + margins = ~620px, fits comfortably with today strip + nav. */
body[data-shell="dashboard"] #wsLandingDashboard .ws-section:nth-of-type(n+4),
body[data-shell="research"]  #wsLandingResearch  .ws-section:nth-of-type(n+4),
body[data-shell="draft-wizard"] #wsLandingDraftWizard .ws-section:nth-of-type(n+4) {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ACCOUNT BUTTON + POPOVER (2026-05-26)
   Collapses the signed-in email + sign-out duo into a single "Account"
   trigger to save horizontal nav space. Popover contains email + sign out.
   ════════════════════════════════════════════════════════════════════════ */

/* The account-btn shares .auth-btn base. Add the popover wrapper as a
   relatively positioned container so the popover anchors below it. */
.auth-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.auth-account-btn {
  /* Inherit .auth-btn base; just ensure compact width */
  padding: 6px 12px !important;
}
.auth-account-btn[aria-expanded="true"] {
  background: var(--color-bg-soft, rgba(15,14,12,0.04)) !important;
}

.auth-account-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-hairline-strong, rgba(15,14,12,0.16));
  border-radius: var(--r-6);
  box-shadow: 0 1px 1px rgba(15, 14, 12, 0.04),
              0 8px 24px -8px rgba(15, 14, 12, 0.12),
              0 24px 48px -16px rgba(15, 14, 12, 0.16);
  padding: 12px;
  z-index: 1700;          /* above flyout (1680), below cmd-k */
  animation: authPopIn 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-account-pop[hidden] { display: none; }

.auth-account-pop__email {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--color-text-2, #5a554d);
  word-break: break-all;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--color-hairline, rgba(15,14,12,0.08));
  margin-bottom: 10px;
  line-height: 1.4;
}

.auth-account-pop__action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px !important;
  font-size: 13px !important;
}

@keyframes authPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-account-pop { animation: none; }
}

/* Final touch - body padding-bottom that today-strip adds is fine, but
   the .page padding-bottom adds extra. Trim it. */
body[data-shell="dashboard"]    .page,
body[data-shell="research"]     .page,
body[data-shell="draft-wizard"] .page {
  padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD WORKSPACE HUB LANDING - FITS 1400x900 (no scroll)
   --------------------------------------------------------------------
   The Dashboard workspace landing is the operator's at-a-glance home -
   it must fit the available 836px (900 viewport − 64px nav) without any
   scrolling. Group hubs (#/dashboard/team-management etc) and other
   workspaces keep the lavish hero - these rules are scoped to
   data-hub-view="workspace" on the dashboard route only.

   Budget breakdown for 836px available:
     · #subPageLanding margin-top                24
     · .hub-hero (compact)                      ~240
     · .hub-hero margin-bottom                   16
     · .hub-sys (system summary strip)           32
     · .hub-sys margin-bottom                    10
     · .hub-section-strip (sticky pills)         44
     · .hub-section-strip margin-bottom          14
     · .sub-section / .hub-grid (2 rows max)    ~360
                                              = ~740, leaves ~96 slack.
   ════════════════════════════════════════════════════════════════════════ */

/* Compact hero - drop padding, shrink art, smaller title.
   2026-05-28 - Re-tightened to add headroom. Real Chrome at "1400x900"
   has ~80px of browser chrome (URL bar, tabs) eating the effective
   viewport; the prior layout fit at exactly 900px but overflowed at
   ~820px. Cut hero by ~40px and inter-section margins by ~30px to
   guarantee fit even with browser chrome. */
body[data-route="dashboard"][data-hub-view="workspace"] #subPageLanding {
  margin: 8px auto 14px !important;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero {
  min-height: 0;
  margin: 0 0 10px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__inner {
  padding: 18px 28px 16px;
  min-height: 0;
  gap: 16px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__copy {
  gap: 6px;
  max-width: 60%;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__title {
  font-size: 38px;
  margin: 2px 0 2px;
  line-height: 0.94;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__tag {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  max-width: 460px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__cta {
  margin-top: 4px;
  font-size: 13px;
  gap: 10px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__cta-circle {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__feature {
  margin: 6px 0 0;
  font-size: 10px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__back {
  top: 10px;
  left: 16px;
  font-size: 10px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__ticker {
  top: 10px;
  right: 14px;
  padding: 3px 9px;
}

/* Compact player photo - caps the hero height (it's the tallest child).
   2026-05-28 - Trimmed max-height 230→190 to cut the hero's overall
   height from ~256 to ~210. */
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__art {
  width: 220px;
  margin-bottom: -18px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__photo {
  min-height: 160px;
  max-height: 190px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-hero__svg {
  width: 210px;
  height: 200px;
}

/* Compact system summary strip */
body[data-route="dashboard"][data-hub-view="workspace"] .hub-sys {
  margin-bottom: 6px;
  padding: 4px 12px;
  font-size: 10px;
}

/* Compact section pills */
body[data-route="dashboard"][data-hub-view="workspace"] .hub-section-strip {
  margin-bottom: 8px;
  padding: 4px 0;
}

/* Card grid - switch to a 5-column uniform grid on the dashboard
   workspace landing so all 19 hub cards render naturally inside the
   viewport, without the prior clip-and-hide trick (which silently cut
   ~12 cards from view and produced the "doesn't fit" complaint).
   Math: 19 cards ÷ 5 cols = 4 rows.
     4 × 76px card + 3 × 10px gap = ~334px → fits the ~360px budget
     remaining after the compact hero (256px) + system summary +
     section-strip pills + page chrome.
   Featured cards keep their accent treatment (workspace hue + signal
   ornament) but no longer span 2 cols - a 5-col uniform grid suits a
   dashboard's control-panel feel and preserves visibility of every
   card. */
body[data-route="dashboard"][data-hub-view="workspace"] .sub-section {
  margin-bottom: 0;
  position: relative;
  /* No clip - content must fit naturally. If a future card pushes the
     grid past the budget, fix it by removing a card, not by hiding it. */
  max-height: none;
  overflow: visible;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card,
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card--featured {
  grid-column: span 1;
  min-height: 76px;
  padding: 10px 32px 10px 12px;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card__title {
  font-size: 13px;
  line-height: 1.2;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card__desc {
  display: none;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card__eyebrow {
  font-size: 10px;
  margin-bottom: 3px;
  letter-spacing: 0.06em;
}
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card__arrow {
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
}
/* Featured signal ornament is decoration - at 76px cards it crowds the
   layout. Hide on the dashboard landing only. */
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card__signal {
  display: none;
}
/* Featured card body padding-right matches uniform cards (no extra
   space for the larger signal ornament since it's hidden). */
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card--featured .hub-card__eyebrow,
body[data-route="dashboard"][data-hub-view="workspace"] .hub-card--featured .hub-card__title {
  /* Use the same compact sizing as non-featured cards on the dashboard
     landing - the featured rhythm of the wide grid doesn't apply to a
     5-col uniform layout. */
}
@media (max-width: 1080px) {
  body[data-route="dashboard"][data-hub-view="workspace"] .hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  body[data-route="dashboard"][data-hub-view="workspace"] .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD LEFT RAIL - fit 19 items in 796px (1400x900 viewport)
   --------------------------------------------------------------------
   The shell-b left rail on the dashboard route renders 6 group heads + 19
   destination links. With default chrome (5/5 link padding, 14px group
   gap, 6/4 label padding, 18/24 rail padding) the column comes out to
   ~900px, overflowing the 796px available between top nav (64) and
   today-strip (40). That overflow either internally scrolls the rail
   (bad) or visually clips items past viewport bottom (worse).

   Budget: 796px available.
     · rail padding (12+16)                    28
     · rail-head (compact)                     56
     · 5 group labels (4/2 padding + label h)  5 × 24 = 120
     · 19 rail-links @ 27px                    513
     · 5 group margin-bottom                   5 × 10 = 50
                                              = 767, leaves ~29 slack.
   Scoped to dashboard route so other workspaces (Research, Draft Wizard)
   keep the default rail rhythm. ════════════════════════════════════════ */
body[data-route="dashboard"] .shell-b__rail {
  padding: 0 0 16px;        /* top owned by the sticky head so it pins flush (no peek-through gap) */
}
body[data-route="dashboard"] .shell-b__rail-head {
  padding: 0 18px 10px;
  margin-bottom: 8px;
}
body[data-route="dashboard"] .shell-b__rail-group {
  margin: 0 0 10px;
}
body[data-route="dashboard"] .shell-b__rail-label {
  padding: 4px 18px 2px;
}
body[data-route="dashboard"] .shell-b__rail-link {
  padding: 3px 18px 3px 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SKELETON - loading flash for slow renderers (>80ms)
   --------------------------------------------------------------------
   Only the data-fetching pages (Live Pitchers, Adds-Drops, etc.) ever
   trigger this. Synchronous hub renderers resolve before the timer
   fires and never show it. Uses a single shimmer keyframe across all
   3 placeholder zones to read as a coordinated loading state, not a
   collection of blinking blocks. */
.page-skeleton {
  padding: 0;
  margin: 0;
  animation: skeletonFadeIn .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes skeletonFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-skeleton__hero {
  height: 220px;
  border-radius: var(--r-14);
  margin: 0 0 20px;
  background:
    linear-gradient(90deg,
      var(--bg-soft, #f1efe9) 0%,
      var(--bg, #faf9f5) 50%,
      var(--bg-soft, #f1efe9) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s linear infinite;
}
.page-skeleton__pills {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}
.page-skeleton__pills span {
  display: inline-block;
  height: 30px;
  width: 110px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      var(--bg-soft, #f1efe9) 0%,
      var(--bg, #faf9f5) 50%,
      var(--bg-soft, #f1efe9) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s linear infinite;
}
.page-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.page-skeleton__grid div {
  height: 96px;
  border-radius: var(--r-10);
  background:
    linear-gradient(90deg,
      var(--bg-soft, #f1efe9) 0%,
      var(--bg, #faf9f5) 50%,
      var(--bg-soft, #f1efe9) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s linear infinite;
}
/* Stagger the shimmer phase per child so the page doesn't pulse as one
   block - reads as scanning across cards. */
.page-skeleton__grid div:nth-child(2) { animation-delay: 0.1s; }
.page-skeleton__grid div:nth-child(3) { animation-delay: 0.2s; }
.page-skeleton__grid div:nth-child(4) { animation-delay: 0.3s; }
.page-skeleton__grid div:nth-child(5) { animation-delay: 0.4s; }
.page-skeleton__grid div:nth-child(6) { animation-delay: 0.5s; }
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-skeleton__hero,
  .page-skeleton__pills span,
  .page-skeleton__grid div {
    animation: none;
    background: var(--bg-soft, #f1efe9);
  }
}

/* Fade gradient removed alongside the clip. The 5-col uniform grid
   shows every card naturally - no clipped overflow to soften. */

/* ════════════════════════════════════════════════════════════════════════
   CAREER PROJECTION CURVE - signature surface on every player profile
   --------------------------------------------------------------------
   Past actual fantasy points + present cascade projection + recursive
   future projection from the existing aging engine. Premium institutional
   look: faint grid, layered band, distinct past/future stroke treatment,
   "TODAY" vertical divider, dot-anchored hover tooltip.

   Color system: uses --ws-color from the player workspace (defaults to
   site red) for the present accent and band tint. Past line is neutral
   ink; future line is the workspace accent with a dashed treatment.

   Layout: sits between the player hero and the 2-col dashboard, full
   content width (~960px on desktop, fluid on mobile). Min-height is
   computed (chart 320 + header 56 + footer 64 = ~440px).
   ════════════════════════════════════════════════════════════════════════ */
.career-curve {
  position: relative;
  margin: 20px auto 28px;
  max-width: 1180px;
  padding: 22px 26px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%),
    var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.10));
  border-radius: var(--r-14);
  box-shadow:
    0 1px 0 rgba(15,14,12,0.02),
    0 18px 40px -24px rgba(15,14,12,0.12);
  /* Hue family inherits from workspace; default to site red */
  color: var(--ws-color, var(--accent, #b23415));
}
.career-curve--empty {
  padding: 24px;
}
.career-curve__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.08));
}
.career-curve__head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.career-curve__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3, #6f6c66);
  font-weight: 600;
  font-feature-settings: "ss01";
}
.career-curve__subtitle {
  font-size: 13px;
  color: var(--text-2, #4a4742);
  line-height: 1.3;
}
.career-curve__empty-msg {
  font-size: 13px;
  color: var(--text-3, #6f6c66);
  margin: 8px 0 0;
}
.career-curve__head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cc-scoring {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-scoring-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #6f6c66);
  font-weight: 600;
}
.cc-preset-pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  background: transparent;
  color: var(--text-2, #4a4742);
  cursor: pointer;
  transition: all 140ms cubic-bezier(.2,.7,.3,1);
}
.cc-preset-pill:hover {
  border-color: var(--ws-color, var(--accent));
  color: var(--ws-color, var(--accent));
}
.cc-preset-pill.is-active {
  background: var(--ws-color, var(--accent, #b23415));
  color: #ffffff;
  border-color: var(--ws-color, var(--accent, #b23415));
}

/* ── CHART ────────────────────────────────────────────────────────── */
.career-curve__chart-wrap {
  position: relative;
  width: 100%;
}
.career-curve__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ws-color, var(--accent, #b23415));
}

/* Grid lines - extremely faint, just enough to read values */
.cc-grid-line {
  stroke: var(--ink, #1a1816);
  stroke-opacity: 0.06;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

/* Axis labels - small, neutral, tabular nums for alignment */
.cc-axis-label {
  font-size: 10.5px;
  font-family: inherit;
  font-feature-settings: "tnum";
  fill: var(--text-3, #6f6c66);
  font-weight: 500;
}
.cc-axis-sub {
  font-size: 9.5px;
  fill: var(--text-3, #6f6c66);
  opacity: 0.7;
  font-style: italic;
}

/* "TODAY" vertical divider - solid hairline + label above */
.cc-today-line {
  stroke: var(--text-2, #4a4742);
  stroke-opacity: 0.30;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  shape-rendering: crispEdges;
}
.cc-today-label {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  font-weight: 700;
  fill: var(--text-2, #4a4742);
  opacity: 0.8;
}

/* Past line - solid, ink tone (these are actuals - neutral) */
.cc-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cc-line--past {
  stroke: var(--ink, #1a1816);
  stroke-opacity: 0.78;
  stroke-width: 2;
}
/* Past PROJECTED line - what our walk-forward model said for the same
   year. Same accent color as future line so it reads as "projection",
   dashed for the same reason, but with lower opacity so the actual line
   stays primary. Hover on .cc-dot--past-proj shows proj vs actual. */
.cc-line--past-proj {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.55;
}
.cc-dot--past-proj {
  fill: currentColor;
  fill-opacity: 0.65;
  stroke: var(--bg, #fff);
  stroke-width: 1;
}
/* Future line - workspace accent, dashed to mark "this is projection" */
.cc-line--future {
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  opacity: 0.85;
}

/* p10-p90 band - gradient from full opacity near present to lighter
   in outer years. Gradient defined inline in SVG; class sets fallback. */
.cc-band {
  fill: currentColor;
  fill-opacity: 0.14;
  stroke: none;
  pointer-events: none;
}

/* Dots - distinct per kind */
.cc-dot {
  cursor: pointer;
  transition: r 140ms cubic-bezier(.2,.7,.3,1), opacity 140ms;
}
.cc-dot--past {
  fill: var(--ink, #1a1816);
  fill-opacity: 0.92;
  stroke: var(--surface, #ffffff);
  stroke-width: 1.5;
}
.cc-dot--present {
  fill: currentColor;
  stroke: var(--surface, #ffffff);
  stroke-width: 2;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
}
.cc-dot--future {
  fill: var(--surface, #ffffff);
  stroke: currentColor;
  stroke-width: 1.6;
  fill-opacity: 0.95;
}
.cc-dot:hover {
  r: 5.5;
  opacity: 1;
}

/* Endpoint value labels */
.cc-endpoint-label {
  font-size: 12px;
  font-family: inherit;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.cc-endpoint-label--now {
  fill: currentColor;
}
.cc-endpoint-label--future {
  fill: currentColor;
  opacity: 0.7;
  font-weight: 600;
}

/* ── TOOLTIP ──────────────────────────────────────────────────────── */
.cc-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(26, 24, 22, 0.96);
  color: #ffffff;
  border-radius: var(--r-8);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.45;
  min-width: 140px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.30);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms cubic-bezier(.2,.7,.3,1), visibility 120ms;
  z-index: 10;
  font-feature-settings: "tnum";
}
.cc-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}
.cc-tooltip__head {
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  margin-bottom: 4px;
}
.cc-tooltip__pts {
  font-size: 14px;
}
.cc-tooltip__pts b {
  font-weight: 700;
  font-size: 16px;
}
.cc-tooltip__kind {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-4);
  margin-right: 6px;
  font-weight: 700;
}
.cc-tooltip__kind--past   { background: rgba(255,255,255,0.18); color: #ffffff; }
.cc-tooltip__kind--present{ background: var(--ws-color, var(--accent, #b23415)); color: #ffffff; }
.cc-tooltip__kind--future { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); border: 1px dashed rgba(255,255,255,0.30); padding: 1px 5px; }
.cc-tooltip__pa,
.cc-tooltip__range,
.cc-tooltip__conf {
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  margin-top: 3px;
}

/* ── FOOTER ───────────────────────────────────────────────────────── */
.career-curve__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline, rgba(15,14,12,0.06));
}
.cc-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cc-summary-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft, #f6f5f1);
  color: var(--text-2, #4a4742);
  border: 1px solid var(--hairline, rgba(15,14,12,0.06));
}
.cc-summary-pill--asc   { color: #1e7340; border-color: rgba(30,115,64,0.18); background: rgba(30,115,64,0.05); }
.cc-summary-pill--peak  { color: var(--ws-color, var(--accent, #b23415)); border-color: currentColor; background: transparent; opacity: 0.9; }
.cc-summary-pill--dec   { color: #9a4226; border-color: rgba(154,66,38,0.18); background: rgba(154,66,38,0.05); }
.cc-summary-pill--years { color: var(--text-3, #6f6c66); }
.cc-summary-pill--conf  { color: var(--text-3, #6f6c66); }
.cc-summary-pill--peak-past { color: var(--text-2); background: var(--bg, #faf9f5); }

.cc-honesty {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-3, #6f6c66);
  margin: 0;
  font-style: italic;
}
.cc-honesty code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  background: var(--bg-soft, #f1efe9);
  border-radius: var(--r-3);
  color: var(--text-2, #4a4742);
  font-style: normal;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .career-curve {
    padding: 16px 14px 14px;
    margin: 14px auto 20px;
  }
  .career-curve__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .career-curve__head-right { justify-content: flex-end; }
  .cc-preset-pill { padding: 5px 9px; font-size: 10px; }
  .cc-summary-pill { font-size: 9.5px; }
}

/* Dark mode - uses prefers-color-scheme. Keeps the institutional look
   when the user's OS is dark. */
@media (prefers-color-scheme: dark) {
  .career-curve {
    background:
      linear-gradient(180deg, rgba(28,26,24,0.92) 0%, rgba(22,20,18,0.85) 100%),
      var(--surface, #1c1a18);
    border-color: rgba(255,255,255,0.10);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.40),
      0 20px 40px -20px rgba(0,0,0,0.50);
  }
  .cc-grid-line { stroke: #ffffff; stroke-opacity: 0.08; }
  .cc-axis-label, .cc-axis-sub { fill: rgba(255,255,255,0.55); }
  .cc-line--past { stroke: rgba(255,255,255,0.85); }
  .cc-today-line { stroke: rgba(255,255,255,0.35); }
  .cc-today-label { fill: rgba(255,255,255,0.55); }
  .cc-dot--past { fill: #ffffff; stroke: #1c1a18; }
  .cc-dot--future { fill: #1c1a18; stroke: currentColor; }
  .cc-summary-pill { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.08); }
  .cc-honesty { color: rgba(255,255,255,0.50); }
  .cc-honesty code { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); }
}

/* ════════════════════════════════════════════════════════════════════════
   CAREER CURVE - MODE PILLS + MARKERS + COMPARISON + CUSTOM PANEL
   --------------------------------------------------------------------
   Layered on top of the base career-curve styles above. Adds:
   - Dynasty toggle pill + "vs Compare" pill (mode controls)
   - Historical season markers (debut ◆, career-best ★, injury ✕)
   - Comparison-player overlay (second line + band + dot in contrast color)
   - Custom weight editor panel (per-stat numeric inputs)
   - Comparison search dropdown
   - Dynasty cliff shading + extra summary pills
   ════════════════════════════════════════════════════════════════════════ */

/* ── Mode pill group (Dynasty + Compare) ─────────────────────────── */
.cc-mode-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  margin-right: 8px;
  border-right: 1px solid var(--hairline, rgba(15,14,12,0.10));
}
.cc-mode-pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  background: transparent;
  color: var(--text-2, #4a4742);
  cursor: pointer;
  transition: all 140ms cubic-bezier(.2,.7,.3,1);
  white-space: nowrap;
}
.cc-mode-pill:hover {
  border-color: var(--ws-color, var(--accent));
  color: var(--ws-color, var(--accent));
}
.cc-mode-pill.is-active {
  background: var(--ink, #1a1816);
  color: #ffffff;
  border-color: var(--ink, #1a1816);
}
.cc-compare-trigger.is-active {
  background: #e07a3e;     /* compare orange - distinct from primary red */
  border-color: #e07a3e;
  color: #ffffff;
}

/* ── Past-season markers (debut, best, injury, elite) ─────────────── */
.cc-marker {
  font-size: 11px;
  pointer-events: none;
  font-family: inherit;
  font-weight: 700;
}
.cc-marker--debut  { fill: #5b8def; }   /* sky blue - promotion */
.cc-marker--best   { fill: #f4a83a; }   /* gold - career-best */
.cc-marker--injury { fill: #d24a3a; font-size: 12px; }  /* red - workload drop */
.cc-marker--elite  { fill: #ad7ed1; }   /* purple - elite season */

/* ── Dynasty cliff shading + extra summary pills ─────────────────── */
.cc-cliff-shade {
  fill: #d24a3a;
  fill-opacity: 0.06;
  pointer-events: none;
}
.cc-summary-pill--cliff {
  color: #9a4226;
  background: rgba(210, 74, 58, 0.07);
  border-color: rgba(210, 74, 58, 0.18);
}
.cc-summary-pill--peakwin {
  color: #1e7340;
  background: rgba(30, 115, 64, 0.06);
  border-color: rgba(30, 115, 64, 0.18);
}
.cc-summary-pill--elite {
  color: var(--ws-color, var(--accent, #b23415));
  background: transparent;
  border-color: currentColor;
  opacity: 0.85;
}
.career-curve--dynasty .career-curve__label::after {
  content: 'DYNASTY';
  margin-left: 10px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  background: var(--ink, #1a1816);
  color: #ffffff;
  border-radius: var(--r-4);
  vertical-align: 2px;
}

/* ── Comparison overlay (lines, band, dots, legend) ──────────────── */
:root { --cc-compare: #e07a3e; }
.cc-line--compare-past {
  fill: none;
  stroke: var(--cc-compare);
  stroke-width: 1.8;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cc-line--compare-future {
  fill: none;
  stroke: var(--cc-compare);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cc-band--compare {
  fill: var(--cc-compare);
  fill-opacity: 0.08;
  stroke: none;
  pointer-events: none;
}
.cc-dot--compare {
  fill: var(--cc-compare);
  stroke: var(--surface, #ffffff);
  stroke-width: 1.5;
}

.cc-compare-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--hairline, rgba(15,14,12,0.08));
}
.cc-compare-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #4a4742);
}
.cc-compare-legend__swatch {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
.cc-compare-legend__chip--primary .cc-compare-legend__swatch {
  background: var(--ws-color, var(--accent, #b23415));
}
.cc-compare-legend__chip--compare .cc-compare-legend__swatch {
  background: var(--cc-compare);
}
.cc-compare-legend__clear {
  margin-left: auto;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  background: transparent;
  color: var(--text-3, #6f6c66);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms cubic-bezier(.2,.7,.3,1);
}
.cc-compare-legend__clear:hover {
  border-color: var(--cc-compare);
  color: var(--cc-compare);
}

/* ── Comparison search dropdown panel ────────────────────────────── */
.cc-compare-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-height: 360px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  border-radius: var(--r-10);
  box-shadow: 0 14px 32px -10px rgba(15,14,12,0.20);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cc-compare-panel__head {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--hairline, rgba(15,14,12,0.08));
  background: var(--bg-soft, #f6f5f1);
}
.cc-compare-search {
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  border-radius: var(--r-6);
  background: var(--surface, #ffffff);
  color: var(--text-1, #1a1816);
  min-width: 0;
}
.cc-compare-search:focus {
  outline: none;
  border-color: var(--cc-compare);
  box-shadow: 0 0 0 3px rgba(224, 122, 62, 0.12);
}
.cc-compare-panel__close {
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  background: transparent;
  color: var(--text-3, #6f6c66);
  padding: 4px 8px;
  border-radius: var(--r-6);
  cursor: pointer;
  font-size: 11px;
}
.cc-compare-panel__close:hover { color: var(--ink); }
.cc-compare-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.cc-compare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  color: var(--text-1, #1a1816);
  transition: background 100ms cubic-bezier(.2,.7,.3,1);
}
.cc-compare-item:hover {
  background: var(--bg-soft, #f6f5f1);
}
.cc-compare-item__meta {
  font-size: 10.5px;
  color: var(--text-3, #6f6c66);
  font-feature-settings: "tnum";
}

/* ── Custom weight editor panel ──────────────────────────────────── */
.cc-custom-panel {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-soft, #f6f5f1);
  border: 1px solid var(--hairline, rgba(15,14,12,0.08));
  border-radius: var(--r-10);
}
.cc-custom-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.cc-custom-panel__label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-2, #4a4742);
}
.cc-custom-panel__hint {
  font-size: 10.5px;
  color: var(--text-3, #6f6c66);
  font-style: italic;
}
.cc-custom-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cc-custom-panel__col-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3, #6f6c66);
  margin-bottom: 6px;
}
.cc-custom-panel__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
}
.cc-custom-input {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cc-custom-input__label {
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-3, #6f6c66);
  text-transform: uppercase;
}
.cc-custom-input__field {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 7px;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  border-radius: 5px;
  background: var(--surface, #ffffff);
  color: var(--text-1, #1a1816);
  width: 100%;
  font-feature-settings: "tnum";
}
.cc-custom-input__field:focus {
  outline: none;
  border-color: var(--ws-color, var(--accent));
  box-shadow: 0 0 0 2px rgba(178, 52, 21, 0.12);
}

/* ── Tooltip extras for markers + compare ────────────────────────── */
.cc-tooltip__markers {
  font-size: 10.5px;
  color: #f4a83a;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  letter-spacing: 0.03em;
}
.cc-tooltip__kind--compare {
  background: var(--cc-compare);
  color: #ffffff;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .cc-mode-group {
    padding-right: 8px;
    margin-right: 4px;
    border-right: none;
    border-bottom: 1px dashed var(--hairline);
    padding-bottom: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .cc-compare-panel {
    width: 100%;
    right: 0;
    left: 0;
  }
  .cc-custom-panel__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── Dark mode parity ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .cc-mode-pill {
    color: rgba(255,255,255,0.70);
    border-color: rgba(255,255,255,0.16);
  }
  .cc-mode-pill.is-active {
    background: #ffffff;
    color: #1a1816;
    border-color: #ffffff;
  }
  .cc-compare-panel {
    background: #1c1a18;
    border-color: rgba(255,255,255,0.14);
  }
  .cc-compare-panel__head { background: rgba(255,255,255,0.04); }
  .cc-compare-search {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
  }
  .cc-compare-item { color: rgba(255,255,255,0.92); }
  .cc-compare-item:hover { background: rgba(255,255,255,0.06); }
  .cc-compare-item__meta { color: rgba(255,255,255,0.55); }
  .cc-custom-panel {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
  }
  .cc-custom-input__field {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
  }
  .cc-marker--debut  { fill: #7da6f7; }
  .cc-marker--best   { fill: #ffc66e; }
  .cc-marker--injury { fill: #ff6e58; }
  .cc-marker--elite  { fill: #c79bdc; }
  .cc-cliff-shade { fill-opacity: 0.10; }
}

/* ════════════════════════════════════════════════════════════════════════
   CAREER CURVE v2 - workload line, rolling avg, 3-player compare,
   longevity tier, replacement-yrs pill
   ════════════════════════════════════════════════════════════════════════ */

/* Second mode-group for layer toggles (workload, 3yr avg) */
.cc-mode-group--layers {
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}

/* Workload secondary line - neutral gray, dotted, sits behind everything */
.cc-workload-line {
  fill: none;
  stroke: var(--text-3, #6f6c66);
  stroke-width: 1.2;
  stroke-opacity: 0.45;
  stroke-dasharray: 2 3;
}

/* Rolling 3-year average - thin smoother on top of past line */
.cc-line--rolling {
  fill: none;
  stroke: var(--ink, #1a1816);
  stroke-width: 1.4;
  stroke-opacity: 0.35;
  stroke-dasharray: none;
}

/* Multi-compare palette - orange (idx 0), teal (idx 1), purple (idx 2) */
:root {
  --cc-compare-0: #e07a3e;
  --cc-compare-1: #2a8c8e;
  --cc-compare-2: #8a4ec4;
}
.cc-compare-i0 { color: var(--cc-compare-0); }
.cc-compare-i1 { color: var(--cc-compare-1); }
.cc-compare-i2 { color: var(--cc-compare-2); }
.cc-line--compare-past.cc-compare-i0  { stroke: var(--cc-compare-0); }
.cc-line--compare-future.cc-compare-i0{ stroke: var(--cc-compare-0); }
.cc-band--compare.cc-compare-i0       { fill:   var(--cc-compare-0); }
.cc-dot--compare.cc-compare-i0        { fill:   var(--cc-compare-0); }
.cc-line--compare-past.cc-compare-i1  { stroke: var(--cc-compare-1); }
.cc-line--compare-future.cc-compare-i1{ stroke: var(--cc-compare-1); }
.cc-band--compare.cc-compare-i1       { fill:   var(--cc-compare-1); }
.cc-dot--compare.cc-compare-i1        { fill:   var(--cc-compare-1); }
.cc-line--compare-past.cc-compare-i2  { stroke: var(--cc-compare-2); }
.cc-line--compare-future.cc-compare-i2{ stroke: var(--cc-compare-2); }
.cc-band--compare.cc-compare-i2       { fill:   var(--cc-compare-2); }
.cc-dot--compare.cc-compare-i2        { fill:   var(--cc-compare-2); }
.cc-compare-legend__chip.cc-compare-i0 .cc-compare-legend__swatch { background: var(--cc-compare-0); }
.cc-compare-legend__chip.cc-compare-i1 .cc-compare-legend__swatch { background: var(--cc-compare-1); }
.cc-compare-legend__chip.cc-compare-i2 .cc-compare-legend__swatch { background: var(--cc-compare-2); }

/* Per-chip remove button (×) inline in legend chip */
.cc-compare-legend__rm {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: var(--text-3, #6f6c66);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: var(--r-3);
}
.cc-compare-legend__rm:hover {
  color: var(--text-1, #1a1816);
  background: rgba(15,14,12,0.06);
}

/* Longevity tier pill - color codes by talentTier (1=Elite green, 2=Star
   blue, 3=Regular neutral, 4=Fringe gray) */
.cc-summary-pill--longevity-t1 { color: #1e7340; border-color: rgba(30,115,64,0.22); background: rgba(30,115,64,0.06); }
.cc-summary-pill--longevity-t2 { color: #1a6fb8; border-color: rgba(26,111,184,0.22); background: rgba(26,111,184,0.06); }
.cc-summary-pill--longevity-t3 { color: var(--text-2); }
.cc-summary-pill--longevity-t4 { color: var(--text-3); }

/* "Yrs above replacement" pill - gentle accent */
.cc-summary-pill--abovrepl {
  color: var(--ws-color, var(--accent));
  border-color: currentColor;
  background: transparent;
  opacity: 0.85;
}

/* Inline points display + delta vs primary inside compare-legend chips */
.cc-compare-legend__pts {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--r-3);
  font-size: 11px;
  font-weight: 700;
  background: rgba(15,14,12,0.06);
  color: var(--text-1, #1a1816);
  font-feature-settings: "tnum";
}
.cc-compare-legend__delta {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
}
.cc-compare-legend__delta--up   { color: #1e7340; }
.cc-compare-legend__delta--down { color: #9a4226; }
.cc-compare-legend__delta--flat { color: var(--text-3, #6f6c66); }

/* Reset button inside custom weight panel */
.cc-custom-reset {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(15,14,12,0.14));
  background: var(--surface, #ffffff);
  color: var(--text-2, #4a4742);
  cursor: pointer;
  transition: all 140ms cubic-bezier(.2,.7,.3,1);
}
.cc-custom-reset:hover {
  border-color: var(--accent, #b23415);
  color: var(--ink, #1a1714);
  background: var(--bg-soft, #f4f2ee);
}

/* ════════════════════════════════════════════════════════════════════════
   PERFECT DRAFT CHALLENGE — canonical styles (2026-05-30 build-out).
   Flat rules; cascade-last so they win over any earlier partial pdc block.
   ════════════════════════════════════════════════════════════════════════ */
.pdc-setup__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pdc-setup__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--color-text-muted, #6b6760); }
.pdc-setup__field select { padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--color-hairline, #d8d4ca); border-radius: var(--r-6); background: var(--color-surface, #fff); color: var(--color-text, #222); cursor: pointer; }
.pdc-setup__go { align-self: flex-end; }
.pdc-setup__best { margin: 12px 0 0; font-size: 12.5px; color: var(--color-text-muted, #6b6760); }
.pdc-surface { margin-top: 18px; }
.pdc-clock { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 16px; border-radius: var(--r-10); background: linear-gradient(95deg, rgba(178,52,21,.10), rgba(178,52,21,.02)); border: 1px solid rgba(178,52,21,.22); }
.pdc-clock__big { font-size: 16px; font-weight: 800; color: var(--color-accent, #b23415); }
.pdc-clock__sub { font-size: 13px; color: var(--color-text-muted, #6b6760); }
.pdc-cols { display: grid; grid-template-columns: minmax(200px, 1fr) 2.4fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .pdc-cols { grid-template-columns: 1fr; } }
.pdc-col__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #6b6760); }
.pdc-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pdc-roster li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-6); background: var(--color-bg-soft, #f6f5f1); font-size: 13px; }
.pdc-roster__pos { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--color-text-muted, #6b6760); }
.pdc-roster__nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdc-roster__pr { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--color-accent, #b23415); }
.pdc-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 540px; overflow-y: auto; padding-right: 4px; }
.pdc-pick { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "pos nm pr" "pos ecr pr"; align-items: center; gap: 2px 8px; text-align: left; padding: 8px 10px; border: 1px solid var(--color-hairline, #d8d4ca); border-radius: var(--r-8); background: var(--color-surface, #fff); cursor: pointer; font: inherit; transition: border-color .12s, background .12s, transform .06s; }
.pdc-pick:hover { border-color: var(--color-accent, #b23415); background: rgba(178,52,21,.04); }
.pdc-pick:active { transform: translateY(1px); }
.pdc-pick__pos { grid-area: pos; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--color-text-muted, #6b6760); }
.pdc-pick__nm { grid-area: nm; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdc-pick__tm { color: #999; font-size: 10px; font-weight: 500; }
.pdc-pick__pr { grid-area: pr; font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 800; color: var(--color-accent, #b23415); }
.pdc-pick__ecr { grid-area: ecr; font-size: 10px; color: var(--color-text-muted, #8a857c); }
.pdc-scorecard { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--r-14); background: linear-gradient(120deg, rgba(178,52,21,.08), rgba(178,52,21,.01)); border: 1px solid rgba(178,52,21,.20); }
.pdc-score__grade { font-size: 64px; font-weight: 900; line-height: 1; color: var(--color-accent, #b23415); min-width: 90px; text-align: center; }
.pdc-score__stats { display: flex; flex-wrap: wrap; gap: 26px; }
.pdc-score__stat { display: flex; flex-direction: column; gap: 2px; }
.pdc-score__num { font-size: 26px; font-weight: 800; color: var(--color-text, #222); font-variant-numeric: tabular-nums; }
.pdc-score__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #6b6760); }

/* ════════════════════════════════════════════════════════════════════════
   ACCOUNT / PROFILE UI  (managr, 2026-05-31)
   Styled with the site's REAL design tokens (--bg/--surface/--paper/--text/
   --ink/--accent/--hairline), which already flip under html[data-theme="dark"]
   (styles.css ~L21620). So the account chip + slide-over profile panel get
   dark mode for free — no second palette. Mounted by managr-auth.js.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Account chip in the top nav (right of search; never overlaps it) ──── */
.managr-acct { display: flex; align-items: center; flex: 0 0 auto; margin-left: 14px; }
.managr-acct__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 7px;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.managr-acct__btn:hover { background: var(--bg-soft); border-color: var(--text-3); }
.managr-acct__btn--signin { background: var(--accent); color: #fff; border-color: transparent; padding: 0 18px; height: 36px; }
.managr-acct__btn--signin:hover { background: var(--accent-deep); }
/* Always-visible light/dark toggle, left of the account chip. Reachable while
   signed out (the full light/dark/system segmented control is signed-in-only). */
.managr-acct__theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: 8px; padding: 0;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.managr-acct__theme:hover { background: var(--bg-soft); border-color: var(--text-3); }

/* Data-staleness segment in the Today strip (audit: freshness is the #1 trust risk;
   the top-nav chip was removed by owner request, so freshness lives in the footer). */
.today-strip__seg--stale, .today-strip__seg--stale .today-strip__key { color: #b45309 !important; font-weight: 700; }
html[data-theme="dark"] .today-strip__seg--stale, html[data-theme="dark"] .today-strip__seg--stale .today-strip__key { color: #fbbf24 !important; }

/* ── Mobile flagship rankings board (audit P2) ──────────────────────────────
   The rankings table is ~1100px wide, so on a phone only Player/Pos were visible
   and the headline PROJ PTS sat off-screen behind a horizontal scroll. Below 560px
   keep only the essential columns (#, Player, Pos, Proj Pts) so the projection is
   visible at a glance; the rest stay one swipe away. Allowlist (not blocklist) so
   Advanced-view stat columns collapse automatically too. data-col is stamped on
   every th/td by buildTable. */
@media (max-width: 560px) {
  #tableHead th[data-col]:not([data-col="rank"]):not([data-col="player"]):not([data-col="pos"]):not([data-col="projpts"]),
  #tableBody td[data-col]:not([data-col="rank"]):not([data-col="player"]):not([data-col="pos"]):not([data-col="projpts"]) {
    display: none !important;
  }
  /* Force the table to exactly the viewport width so the projection can't spill off
     the right edge. table-layout:fixed makes the explicit column widths authoritative
     (content wraps/ellipsizes instead of pushing columns wider). */
  .table-wrap > table, .table-wrap table { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
  #tableHead th, #tableBody td { padding-left: 7px !important; padding-right: 7px !important; }
  #tableHead th[data-col="player"] { width: 52%; }
  #tableHead th[data-col="pos"]    { width: 22%; }
  #tableHead th[data-col="projpts"]{ width: 26%; }
  #tableBody td[data-col="player"] { white-space: normal; overflow: hidden; text-overflow: ellipsis; }
  #tableHead th[data-col="projpts"], #tableBody td[data-col="projpts"] { text-align: right; white-space: nowrap; }
  /* Drop the watchlist star column on phones — it eats width the projection needs. */
  #tableHead th.col-watch, #tableBody td.col-watch { display: none !important; }
}

/* ── Mobile flagship-board density: surface the data sooner (2026-06-18) ──
   On phones the rankings control stack (config pill → search → sort/limit →
   card-header carrying 9 tool buttons → sub-nav → position chips) pushed the
   first player row to/below the fold — a mobile user saw almost no data on
   first paint. Tighten the vertical rhythm + control padding on the flagship
   board so real rows appear sooner. Pure layout; zero behavior change. */
@media (max-width: 560px) {
  body[data-route="rankings"] .toolbar { margin-top: 8px !important; }
  body[data-route="rankings"] section.card { margin-top: 8px !important; }
  body[data-route="rankings"] .card-header {
    padding: 14px 16px 12px !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
  }
  body[data-route="rankings"] .card-header__title { font-size: 18px !important; }
  /* let the tool-button block breathe a touch less — pulls the table up
     without shrinking the touch targets themselves. */
  body[data-route="rankings"] .card-header__meta,
  body[data-route="rankings"] .sort-meta { gap: 6px 6px !important; row-gap: 6px !important; }
  body[data-route="rankings"] .workspace-subnav--top { margin-top: 4px !important; }
  /* Pack the 9 utility buttons denser on phones so they collapse from ~4 rows
     to ~2 — the single biggest remaining height sink before the first player
     row (06-19 audit: first row still below the 844 fold). Touch targets stay
     ≥30px tall; only horizontal padding + label size shrink. */
  body[data-route="rankings"] .card-header__meta button,
  body[data-route="rankings"] .card-header__meta a.btn,
  body[data-route="rankings"] .card-header__meta .btn,
  body[data-route="rankings"] .sort-meta button,
  body[data-route="rankings"] .sort-meta a.btn,
  body[data-route="rankings"] .sort-meta .btn {
    padding-top: 6px !important; padding-bottom: 6px !important;
    padding-left: 8px !important; padding-right: 8px !important;
    font-size: 11.5px !important;
  }
}
.managr-acct__avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: 0 0 auto;
}
.managr-acct__name { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.managr-acct__caret { opacity: .5; font-size: 10px; margin-left: -2px; }

/* ── Slide-over profile / settings panel ───────────────────────────────── */
.managr-ov {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.45); display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity .2s ease;
}
.managr-ov.is-open { opacity: 1; }
.managr-panel {
  width: 432px; max-width: 92vw; height: 100%;
  background: var(--bg); color: var(--text);
  box-shadow: -12px 0 48px rgba(0,0,0,.34);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  font-family: var(--font); font-size: 14px;
}
.managr-ov.is-open .managr-panel { transform: translateX(0); }
.managr-panel__head {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--hairline);
}
.managr-panel__title { margin: 0; font-family: var(--font-display, var(--font)); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.managr-panel__x { border: none; background: none; font-size: 24px; line-height: 1; color: var(--text-3); cursor: pointer; padding: 4px 6px; border-radius: var(--r-8); }
.managr-panel__x:hover { background: var(--bg-soft); color: var(--ink); }
.managr-sec { padding: 22px 24px; border-bottom: 1px solid var(--hairline); }
.managr-sec:last-child { border-bottom: none; }
.managr-sec__h { margin: 0 0 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.managr-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.managr-id__avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 21px; font-weight: 700; flex: 0 0 auto; }
.managr-id__who { min-width: 0; }
.managr-id__name { font-size: 16px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managr-id__email { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managr-field { margin-bottom: 14px; }
.managr-field > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.managr-field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--hairline-strong); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.managr-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--elev-focus); }
.managr-field input[readonly] { background: var(--bg-soft); color: var(--text-3); cursor: default; }
.managr-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.managr-btn { padding: 10px 16px; border: none; border-radius: 9px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.managr-btn:hover { background: var(--accent-deep); }
.managr-btn:disabled { opacity: .55; cursor: default; }
.managr-btn--ghost { background: transparent; border: 1px solid var(--hairline-strong); color: var(--text); }
.managr-btn--ghost:hover { background: var(--bg-soft); }
.managr-btn--danger { background: transparent; border: 1px solid var(--hairline-strong); color: var(--red); }
.managr-btn--danger:hover { background: var(--red-soft); }
.managr-msg { font-size: 12.5px; margin-top: 10px; min-height: 15px; }
.managr-msg.ok { color: var(--green); }
.managr-msg.err { color: var(--red); }
/* segmented theme control */
.managr-seg { display: flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 11px; padding: 4px; }
.managr-seg button { flex: 1; border: none; background: none; padding: 10px 8px; border-radius: var(--r-8); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s, color .12s; }
.managr-seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.managr-seg button:hover:not(.is-active) { color: var(--text); }
.managr-hint { font-size: 12px; color: var(--text-3); margin: 10px 0 0; line-height: 1.5; }
.managr-sync { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.managr-sync__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }

/* ── Sign-in / sign-up modal (token-driven → works in dark) ─────────────── */
.managr-auth-ov { position: fixed; inset: 0; z-index: 4001; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 18px; }
.managr-auth-card { position: relative; width: 100%; max-width: 384px; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--r-16); box-shadow: 0 20px 64px rgba(0,0,0,.4); padding: 28px; font-family: var(--font); }
.managr-auth-card h2 { margin: 0 0 4px; font-family: var(--font-display, var(--font)); font-size: 20px; font-weight: 700; color: var(--ink); }
.managr-auth-sub { margin: 0 0 18px; font-size: 13px; color: var(--text-3); }
.managr-auth-tabs { display: flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 11px; padding: 4px; margin-bottom: 16px; }
.managr-auth-tabs button { flex: 1; border: none; background: none; padding: 9px; border-radius: var(--r-8); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; }
.managr-auth-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.managr-auth-x { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 22px; line-height: 1; color: var(--text-3); cursor: pointer; }
.managr-auth-x:hover { color: var(--ink); }

/* On narrow screens the nav is tight; shrink the chip to avatar-only. */
@media (max-width: 600px) {
  .managr-acct__name, .managr-acct__caret { display: none; }
  .managr-acct__btn { padding: 0 5px; }
  .managr-acct { margin-left: 8px; }
}
/* end managr profile + account UI */

/* ════════════════════════════════════════════════════════════════════════
   TRADE ANALYZER (managr, 2026-05-31) — interactive two-side trade scorer.
   Real design tokens only (--bg/--surface/--text/--ink/--accent/--hairline/
   --green/--red), so it flips under html[data-theme="dark"] automatically.
   ════════════════════════════════════════════════════════════════════════ */
.ta-wrap { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px; padding: 0 22px 40px; align-items: start; }
.ta-main { min-width: 0; }
.ta-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .ta-wrap { grid-template-columns: 1fr; } .ta-sides { grid-template-columns: 1fr; } .ta-rail { order: -1; } }

.ta-side { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 16px; }
.ta-side__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 12px; }
.ta-search { position: relative; }
.ta-search__input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.ta-search__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--elev-focus); }
.ta-search__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface-elev, var(--surface)); border: 1px solid var(--hairline-strong); border-radius: var(--r-10); box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 280px; overflow-y: auto; }
.ta-search__opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; cursor: pointer; font: inherit; color: var(--text); }
.ta-search__opt:hover { background: var(--bg-soft); }
.ta-search__optname { font-weight: 600; font-size: 13.5px; }
.ta-search__optmeta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ta-search__none { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); }

.ta-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
.ta-chip { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 9px; padding: 7px 10px; }
.ta-chip--empty { justify-content: center; color: var(--text-4); font-size: 12.5px; border-style: dashed; background: transparent; }
.ta-chip__rank { font-size: 10.5px; font-weight: 700; color: var(--text-4); font-variant-numeric: tabular-nums; min-width: 28px; }
.ta-chip__name { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-chip__pos { font-size: 10px; flex: 0 0 auto; }
.ta-chip__val { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 38px; text-align: right; }
.ta-chip__x { border: none; background: none; color: var(--text-4); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 5px; }
.ta-chip__x:hover { color: var(--red); background: var(--red-soft); }
.ta-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.ta-total span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ta-total b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* verdict bar */
.ta-verdict { margin-top: 22px; }
.ta-verdict__hint { font-size: 13px; color: var(--text-3); text-align: center; padding: 14px; }
.ta-bar { margin-bottom: 12px; }
.ta-bar__track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--red) 0%, var(--gold, #c9a24a) 50%, var(--green) 100%); opacity: .82; }
.ta-bar__mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text-3); transform: translateX(-50%); opacity: .5; }
.ta-bar__marker { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-elev, #fff); border: 3px solid var(--ink); transform: translate(-50%, -50%); transition: left .28s cubic-bezier(.4,0,.2,1); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ta-bar__ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ta-verdict__badge { text-align: center; font-size: 15px; font-weight: 800; padding: 10px; border-radius: var(--r-10); }
.ta-verdict__badge--win { color: var(--green); background: var(--green-soft); }
.ta-verdict__badge--lose { color: var(--red); background: var(--red-soft); }
.ta-verdict__badge--even { color: var(--text-2); background: var(--bg-soft); }

/* insights */
.ta-insights { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-10); overflow: hidden; }
.ta-insights:empty { display: none; }
.ta-insight { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; background: var(--surface); }
.ta-insight__k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); flex: 0 0 auto; }
.ta-insight__v { font-size: 13px; color: var(--text); text-align: right; }

/* risers/fallers rail */
.ta-rail { display: flex; flex-direction: column; gap: 16px; }
.ta-rail__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 14px 16px; }
.ta-rail__title { font-size: 13px; font-weight: 800; color: var(--ink); }
.ta-rail__card--risers .ta-rail__title { color: var(--green); }
.ta-rail__card--fallers .ta-rail__title { color: var(--red); }
.ta-rail__sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-4); margin: 2px 0 10px; }
.ta-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ta-rail__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.ta-rail__name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-rail__delta { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ta-rail__item--risers .ta-rail__delta { color: var(--green); }
.ta-rail__item--fallers .ta-rail__delta { color: var(--red); }
/* end trade analyzer */

/* ── My Leagues (profile panel) — real tokens, dark-mode safe ──────────── */
.managr-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.managr-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--elev-focus); }
.managr-leagues { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.managr-leagues__empty { font-size: 12.5px; color: var(--text-4); padding: 8px 0; }
.managr-league { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 9px; padding: 9px 11px; }
.managr-league__plat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--accent); border-radius: 5px; padding: 3px 7px; flex: 0 0 auto; }
.managr-league__lbl { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managr-league__x { border: none; background: none; color: var(--text-4); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 5px; flex: 0 0 auto; }
.managr-league__x:hover { color: var(--red); background: var(--red-soft); }
/* end my leagues */

/* ════════════════════════════════════════════════════════════════════════
   TRADE ANALYZER v2 — flagship dashboard (managr, 2026-05-31)
   Real design tokens only → inherits dark mode. From trade-analyzer.js.
   ════════════════════════════════════════════════════════════════════════ */
.mta { padding: 0 22px 48px; max-width: 1280px; margin: 0 auto; }
.mta-hero .sub-hero__chip { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }

/* settings bar */
.mta-settings { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 4px 0 22px; }
@media (max-width: 980px) { .mta-settings { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mta-settings { grid-template-columns: repeat(2, 1fr); } }
.mta-set { display: flex; flex-direction: column; gap: 5px; }
.mta-set > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.mta-select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-8); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mta-select:focus { outline: none; border-color: var(--accent); }

/* main grid: receive | center | give */
.mta-grid { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 920px) { .mta-grid { grid-template-columns: 1fr; } .mta-center { order: 3; } }

.mta-side { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 16px; }
.mta-side__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.mta-side__lbl { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.mta-side__lbl--recv { color: var(--green); }
.mta-side__lbl--give { color: var(--accent); }
.mta-side__tot { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mta-search { position: relative; margin-bottom: 12px; }
.mta-search__in { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.mta-search__in:focus { outline: none; border-color: var(--accent); box-shadow: var(--elev-focus); }
.mta-search__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-raised); background: var(--surface-elev, var(--surface)); border: 1px solid var(--hairline-strong); border-radius: var(--r-10); box-shadow: 0 12px 32px rgba(0,0,0,.2); max-height: 300px; overflow-y: auto; }
.mta-opt { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; cursor: pointer; font: inherit; color: var(--text); }
.mta-opt:hover { background: var(--bg-soft); }
.mta-opt__meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.mta-opt__none { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); }

/* player cards */
.mta-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.mta-empty { border: 1px dashed var(--hairline-strong); border-radius: var(--r-10); padding: 18px; text-align: center; color: var(--text-4); font-size: 13px; }
.mta-card { display: flex; gap: 11px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 11px; padding: 10px; }
.mta-card__head { flex: 0 0 auto; }
.mta-card__img, .mta-card__ini { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface); border: 1px solid var(--hairline); }
.mta-card__ini { display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--accent); }
.mta-card__body { flex: 1; min-width: 0; }
.mta-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mta-card__name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mta-card__x { border: none; background: none; color: var(--text-4); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 5px; flex: 0 0 auto; }
.mta-card__x:hover { color: var(--red); background: var(--red-soft); }
.mta-card__meta { font-size: 11.5px; color: var(--text-3); margin: 1px 0 5px; }
.mta-card__vals { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mta-card__v { font-size: 11px; color: var(--text-2); }
.mta-card__v b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mta-card__tier { font-size: 10.5px; font-weight: 700; margin-left: auto; }
.mta-card__trend { font-size: 11px; font-weight: 600; margin-top: 4px; }
.mta-card__trend--up { color: var(--green); }
.mta-card__trend--down { color: var(--red); }

/* side stats */
.mta-sidestats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.mta-ss { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); }
.mta-ss b { color: var(--ink); }
.mta-dist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mta-pill { font-size: 10px; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 8px; color: var(--text-2); }

/* center column */
.mta-center { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 18px 14px; text-align: center; position: sticky; top: 76px; }
.mta-grade-wrap { margin-bottom: 14px; }
.mta-grade { font-size: 54px; font-weight: 900; line-height: 1; color: var(--text-3); }
.mta-grade--win { color: var(--green); }
.mta-grade--lose { color: var(--accent); }
.mta-grade--even { color: var(--gold, #b8860b); }
.mta-grade__cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-4); margin-top: 4px; }
.mta-bar { position: relative; height: 12px; border-radius: 999px; overflow: hidden; display: flex; background: var(--bg-soft); margin: 14px 0; }
.mta-bar__fillA { background: var(--green); transition: width .3s cubic-bezier(.4,0,.2,1); }
.mta-bar__fillB { background: var(--accent); transition: width .3s cubic-bezier(.4,0,.2,1); }
.mta-bar__mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .35; transform: translateX(-50%); }
.mta-metrics { display: flex; flex-direction: column; gap: 8px; }
.mta-metric { display: flex; justify-content: space-between; font-size: 12.5px; }
.mta-metric__k { color: var(--text-3); }
.mta-metric__v { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mta-hint { font-size: 12px; color: var(--text-4); }

/* analysis grid */
.mta-analysis { margin-top: 20px; }
.mta-analysis__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .mta-analysis__grid { grid-template-columns: 1fr; } }
.mta-acard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 16px 18px; }
.mta-acard--wide { grid-column: 1 / -1; }
.mta-acard h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--ink); }
.mta-acard__sub { font-size: 11px; font-weight: 500; color: var(--text-4); }
.mta-ins { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.mta-ins:last-child { border-bottom: none; }
.mta-ins b.pos { color: var(--green); } .mta-ins b.neg { color: var(--accent); }
.mta-radar { width: 100%; max-width: 240px; display: block; margin: 0 auto; }
.mta-radar__ring { fill: none; stroke: var(--hairline); }
.mta-radar__spoke { stroke: var(--hairline); }
.mta-radar__lab { font-size: 8.5px; fill: var(--text-3); font-weight: 600; }
.mta-radar__recv { fill: rgba(63,178,122,.22); stroke: var(--green); stroke-width: 1.6; }
.mta-radar__give { fill: rgba(196,74,58,.16); stroke: var(--accent); stroke-width: 1.6; }
.mta-legend { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 11px; }
.mta-legend__a { color: var(--green); font-weight: 700; }
.mta-legend__b { color: var(--accent); font-weight: 700; }
.mta-tl { width: 100%; max-width: 260px; display: block; margin: 0 auto; }
.mta-tl__recv { stroke: var(--green); stroke-width: 2; }
.mta-tl__give { stroke: var(--accent); stroke-width: 2; }
.mta-tl__lab { font-size: 10px; fill: var(--text-4); }
.mta-pos { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mta-pos__k { font-size: 11px; font-weight: 700; color: var(--text-2); width: 34px; }
.mta-pos__bar { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.mta-pos__fill { height: 100%; }
.mta-pos__fill--up { background: var(--green); } .mta-pos__fill--down { background: var(--accent); }
.mta-pos__n { font-size: 12px; font-weight: 700; width: 28px; text-align: right; }
.mta-pos__n.pos { color: var(--green); } .mta-pos__n.neg { color: var(--accent); }
.mta-why__lead { font-size: 13.5px; color: var(--text); margin: 0 0 10px; }
.mta-why { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.mta-why li { font-size: 13px; color: var(--text-2); }
.mta-why__foot { font-size: 11px; color: var(--text-4); margin: 12px 0 0; line-height: 1.5; font-style: italic; }
/* end trade analyzer v2 */

/* Trade Analyzer cold-boot loader (auto-resolves; no dead-end) */
.mta-loading { max-width: 1280px; margin: 0 auto; padding: 60px 22px; text-align: center; }
.mta-spinner { width: 38px; height: 38px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid var(--hairline); border-top-color: var(--accent); animation: mtaSpin .8s linear infinite; }
@keyframes mtaSpin { to { transform: rotate(360deg); } }
.mta-loading__txt { font-size: 15px; font-weight: 700; color: var(--ink); }
.mta-loading__sub { font-size: 13px; color: var(--text-3); margin-top: 6px; }
.mta-loading__sub a { color: var(--accent); }
/* end trade loader */

/* ════════════════════════════════════════════════════════════════════════
   PLAYER EVOLUTION card (profile, informational) — from player-evolution.js.
   Real design tokens → dark-mode safe. Display-only; no valuation impact.
   ════════════════════════════════════════════════════════════════════════ */
.pevo-card { margin: 18px 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 18px 20px; font-family: var(--font); max-width: 1100px; }
.pevo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pevo-card__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.pevo-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-4); margin-left: 8px; }
.pevo-badge { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.pevo-badge--up { color: var(--green); background: var(--green-soft); }
.pevo-badge--down { color: var(--red); background: var(--red-soft); }
.pevo-badge--flat { color: var(--text-2); background: var(--bg-soft); }
.pevo-score { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pevo-score__num { font-size: 46px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.pevo-score__cat { font-size: 15px; font-weight: 800; }
.pevo-score__sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pevo-drivers__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 8px; }
.pevo-drivers { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.pevo-driver { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.pevo-driver__k { color: var(--text-2); }
.pevo-driver__v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pevo-arsenal { margin: 6px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pevo-arsenal__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-right: 4px; }
.pevo-chip { font-size: 11px; font-weight: 600; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 9px; color: var(--text); }
.pevo-foot { font-size: 11px; color: var(--text-4); margin: 12px 0 0; line-height: 1.5; }
.pevo-foot strong { color: var(--text-3); }
/* end player evolution card */

/* Player Evolution — source-health panel (real coverage; nothing hidden) */
.pevo-health { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.pevo-health > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-2); list-style: revert; }
.pevo-health > summary:hover { color: var(--ink); }
.pevo-sh__wrap { margin-top: 10px; }
.pevo-sh__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.pevo-sh__tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hairline); }
.pevo-sh__tbl td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.pevo-sh__cov { font-weight: 800; font-variant-numeric: tabular-nums; }
.pevo-sh__cov--ok { color: var(--green); }
.pevo-sh__cov--warn { color: var(--gold, #b8860b); }
.pevo-sh__cov--none { color: var(--red); }
.pevo-sh__src { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-3); }
.pevo-sh__elig { color: var(--text-3); }
.pevo-gran { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: var(--r-4); padding: 1px 5px; color: var(--text-3); }
.pevo-sh__unh { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 14px 0 6px; }
.pevo-sh__unlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pevo-sh__un { font-size: 12.5px; color: var(--text); }
.pevo-sh__unbadge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); background: var(--red-soft); border-radius: var(--r-4); padding: 1px 6px; margin-right: 4px; }
.pevo-sh__why { font-size: 11.5px; color: var(--text-3); margin: 2px 0 0 4px; line-height: 1.5; }
.pevo-sh__foot { font-size: 11px; color: var(--text-4); margin: 12px 0 0; line-height: 1.5; }
/* end pevo source health */

/* ── Player Intelligence card (unified layer, first consumer) ───────────── */
.pintel-card { margin: 18px 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); }
.pintel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pintel-title { font-size: 16px; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.pintel-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-left: 8px; }
.pintel-note { font-size: 11px; color: var(--text-4); font-style: italic; }
.pintel-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pintel-tbl thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--hairline); }
.pintel-row td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.pintel-row:last-child td { border-bottom: none; }
.pintel-k { font-weight: 700; color: var(--text-2); white-space: nowrap; width: 1%; }
.pintel-v { color: var(--text); line-height: 1.45; }
.pintel-v strong { color: var(--ink); }
.pintel-s { width: 1%; white-space: nowrap; }
.pintel-src { font-size: 10.5px; color: var(--text-4); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.pintel-sub { font-size: 11px; color: var(--text-4); }
.pintel-na { color: var(--text-4); font-size: 12px; }
.pintel-chip { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: var(--r-4); padding: 1px 6px; white-space: nowrap; }
.pintel-chip--real { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.pintel-chip--derived { color: var(--accent); background: rgba(80,120,220,.12); }
.pintel-chip--proxy { color: var(--warn); background: rgba(184,134,11,.14); }
.pintel-chip--pending_backtest { color: var(--text-3); background: var(--hairline); }
.pintel-chip--unavailable { color: var(--text-4); background: var(--hairline); }
.pintel-row--pending_backtest .pintel-v, .pintel-row--unavailable .pintel-v { opacity: .7; }
.pintel-foot { font-size: 11px; color: var(--text-4); margin: 14px 0 0; line-height: 1.55; }
/* end player intelligence */

/* ── Who Should I Start? analyzer ───────────────────────────────────────── */
.ss { max-width: 920px; margin: 0 auto; }
.ss-controls { margin: 8px 0 18px; }
.ss-search-wrap { position: relative; max-width: 420px; }
.ss-search { width: 100%; padding: 10px 14px; font-size: 14px; border: 1px solid var(--hairline); border-radius: var(--r-10); background: var(--surface); color: var(--text); }
.ss-search:focus { outline: none; border-color: var(--accent); }
.ss-drop { position: absolute; z-index: var(--z-raised); left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-10); box-shadow: 0 8px 28px rgba(0,0,0,.16); overflow: hidden; }
.ss-opt { display: block; width: 100%; text-align: left; padding: 9px 14px; font-size: 13px; background: none; border: none; color: var(--text); cursor: pointer; }
.ss-opt:hover { background: var(--bg); }
.ss-opt--none { color: var(--text-4); cursor: default; }
.ss-sub { font-size: 11px; color: var(--text-4); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ss-chip-x { border: none; background: none; color: var(--text-4); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ss-chip-x:hover { color: var(--red); }
.ss-empty-chip { font-size: 13px; color: var(--text-4); font-style: italic; }
.ss-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ss-modes-lbl { font-size: 12px; color: var(--text-3); font-weight: 600; }
.ss-mode { padding: 6px 13px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ss-mode.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ss-hint, .ss-warn, .ss-loading { padding: 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ss-loading { display: flex; align-items: center; gap: 14px; }
.ss-spin { width: 22px; height: 22px; border: 3px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: ss-spin 0.8s linear infinite; flex: none; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-rec { padding: 18px 20px; border-radius: var(--r-14); background: var(--surface); border: 1px solid var(--hairline); margin-bottom: 16px; }
.ss-rec--coin { border-style: dashed; }
.ss-rec-verdict { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.ss-pick { color: var(--green); }
.ss-coin { color: var(--warn); }
.ss-rec-sub { font-size: 13.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.ss-conf { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; }
.ss-conf--strong { color: var(--green); background: var(--green-soft, rgba(46,160,110,.14)); }
.ss-conf--moderate { color: var(--accent); background: rgba(80,120,220,.14); }
.ss-conf--lean { color: var(--warn); background: rgba(184,134,11,.14); }
.ss-fc { margin: 16px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); }
.ss-fc-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-bottom: 12px; }
.ss-fc-row { display: grid; grid-template-columns: 130px 1fr 86px; align-items: center; gap: 10px; margin: 9px 0; }
.ss-fc-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-fc-track { position: relative; height: 14px; background: var(--bg); border-radius: 7px; }
.ss-fc-band { position: absolute; top: 0; height: 14px; background: linear-gradient(90deg, rgba(80,120,220,.35), rgba(46,160,110,.45)); border-radius: 7px; }
.ss-fc-median { position: absolute; top: -2px; width: 2px; height: 18px; background: var(--ink); }
.ss-fc-nums { font-size: 11.5px; color: var(--text-3); text-align: right; white-space: nowrap; }
.ss-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; }
.ss-tbl th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--hairline); }
.ss-tbl td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hairline); }
.ss-pl { font-weight: 700; color: var(--ink); }
.ss-score { font-weight: 700; color: var(--accent); }
.ss-grade { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-4); }
.ss-grade--low { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.ss-grade--medium { color: var(--warn); background: rgba(184,134,11,.14); }
.ss-grade--high { color: var(--red); background: var(--red-soft, rgba(200,60,60,.12)); }
.ss-grade--unknown, .ss-grade--up-unknown { color: var(--text-4); background: var(--hairline); }
.ss-grade--up-limited { color: var(--text-3); background: var(--hairline); }
.ss-grade--up-solid { color: var(--accent); background: rgba(80,120,220,.12); }
.ss-grade--up-high { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.ss-missing { color: var(--text-4); font-style: italic; }
.ss-explain { margin: 16px 0; }
.ss-explain-h, .ss-fc-head { }
.ss-explain-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-bottom: 10px; }
.ss-why { padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-10); margin-bottom: 10px; background: var(--surface); }
.ss-why--pick { border-color: var(--green); border-left-width: 3px; }
.ss-why-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ss-why-list { margin: 0; padding-left: 18px; }
.ss-why-list li { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.ss-injury { color: var(--red); }
.ss-health { margin-top: 16px; font-size: 12px; }
.ss-health > summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.ss-sh-list { list-style: none; margin: 10px 0; padding: 0; }
.ss-sh { font-size: 12px; padding: 3px 0; color: var(--text-2); }
.ss-sh--ok b { color: var(--green); }
.ss-sh--partial b { color: var(--warn); }
.ss-sh--none b { color: var(--red); }
.ss-sh--none-ok b { color: var(--text-4); }
.ss-sh-foot { font-size: 11px; color: var(--text-4); line-height: 1.55; margin: 8px 0 0; }
/* end who should i start */

/* ── Intelligence Tools: shared + per-tool ──────────────────────────────── */
.tsim, .iw, .cp { max-width: 900px; margin: 0 auto; }
.tsim-loading, .iw-loading, .cp-loading, .tsim-warn, .iw-empty, .cp-unavail, .iw-unclass, .tsim-hint, .iw-meta {
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.tsim-warn { border-color: var(--red); color: var(--red); }
/* Translation simulator */
.tsim-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); margin-bottom: 16px; }
.tsim-seg { display: flex; align-items: center; gap: 6px; }
.tsim-seg-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-4); margin-right: 2px; }
.tsim-kind, .tsim-lv { padding: 6px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--bg); color: var(--text-2); cursor: pointer; }
.tsim-kind.is-active, .tsim-lv.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tsim-inputs { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.tsim-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.tsim-field input { width: 92px; padding: 6px 8px; font-size: 13px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--bg); color: var(--text); }
.tsim-go { padding: 9px 18px; font-size: 13px; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: var(--r-8); cursor: pointer; }
.tsim-result { padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); }
.tsim-result-h { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.tsim-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tsim-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--hairline); }
.tsim-tbl td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); }
.tsim-stat { font-weight: 700; color: var(--text-2); }
.tsim-eq b { color: var(--accent); }
.tsim-fac { font-size: 11px; color: var(--text-4); }
.tsim-conf { margin: 12px 0; font-size: 13px; padding: 8px 12px; border-radius: var(--r-8); background: var(--bg); }
.tsim-conf--high { color: var(--green); } .tsim-conf--moderate { color: var(--warn); } .tsim-conf--low { color: var(--red); }
.tsim-flags-h, .iw-sub-h { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-4); margin: 12px 0 6px; }
.tsim-flags { margin: 0; padding-left: 18px; } .tsim-flags li { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.tsim-comp-note, .tsim-sub, .cp-sub { font-size: 11.5px; color: var(--text-4); }
.tsim-comp-note { margin-top: 12px; font-style: italic; line-height: 1.55; }
.tsim-comps { margin-top: 14px; }
.tsim-comp-list { list-style: none; margin: 6px 0; padding: 0; }
.tsim-comp-list li { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--hairline); color: var(--text); }
.tsim-comp-list li:last-child { border-bottom: none; }
.tsim-comp-out { font-size: 12.5px; color: var(--text-2); margin: 8px 0; }
.tsim-comp-out b { color: var(--ink); }
.cp-actions { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.cp-copy-all { padding: 7px 14px; font-size: 12.5px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--r-8); cursor: pointer; }
.cp-copy-msg { font-size: 12px; color: var(--text-3); }
.adp-paste { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12.5px; padding: 10px; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--bg); color: var(--text); margin: 8px 0; resize: vertical; }
.bt-actions { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.adp-clear { padding: 7px 12px; font-size: 12.5px; background: none; border: 1px solid var(--hairline); color: var(--text-2); border-radius: var(--r-8); cursor: pointer; }
.adp-gap { margin-top: 12px; }
/* Injury writeups */
.iw-search-wrap { margin-bottom: 12px; }
.iw-search { width: 100%; max-width: 360px; padding: 9px 13px; font-size: 14px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface); color: var(--text); }
.iw-meta { margin-bottom: 14px; font-size: 12px; color: var(--text-3); }
.iw-article { padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); margin-bottom: 14px; }
.iw-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.iw-n { font-size: 11px; font-weight: 600; color: var(--text-4); }
.iw-lead { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0 0 6px; }
.iw-buckets { display: flex; flex-wrap: wrap; gap: 8px; }
.iw-bucket { font-size: 11.5px; padding: 3px 8px; background: var(--bg); border-radius: var(--r-6); color: var(--text-2); }
.iw-hz { font-size: 12.5px; color: var(--text-2); }
.iw-ex { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.iw-ex th { text-align: left; font-size: 9.5px; text-transform: uppercase; color: var(--text-4); padding: 0 8px 5px 0; border-bottom: 1px solid var(--hairline); }
.iw-ex td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.iw-neg { color: var(--red); } .iw-pos { color: var(--green); }
.iw-small { margin-top: 16px; font-size: 12.5px; }
.iw-small > summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.iw-small-list { margin: 10px 0; } .iw-small-list li { font-size: 12px; color: var(--text-3); padding: 2px 0; }
.iw-unclass { margin-top: 14px; font-size: 12px; color: var(--text-3); font-style: italic; }
/* injury splits + takeaway + source health (position-specific deepening) */
.iw-sub-h__note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-4); font-size: 11px; }
.iw-takeaway { margin: 8px 0 12px; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--r-8) var(--r-8) 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.iw-takeaway__h { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; color: var(--accent); margin-right: 6px; }
.iw-split { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 8px; }
.iw-split th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hairline); }
.iw-split td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); color: var(--text); }
.iw-split tr:last-child td { border-bottom: none; }
.iw-num { text-align: right; font-variant-numeric: tabular-nums; }
.iw-conf { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-4); white-space: nowrap; }
.iw-c-none { color: var(--text-4); background: var(--hairline); }
.iw-c-low { color: var(--warn); background: rgba(184,134,11,.14); }
.iw-c-med { color: var(--accent); background: rgba(80,120,220,.12); }
.iw-c-hi { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.iw-shealth { margin: 8px 0 20px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); }
.iw-shealth__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 0 0 10px; }
.iw-sh { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iw-sh td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hairline); }
.iw-sh td:first-child { color: var(--text-3); width: 45%; }
.iw-sh tr:last-child td { border-bottom: none; }
.iw-ok { color: var(--green); font-weight: 600; } .iw-pend { color: var(--warn); }
.iw-unavail { margin-top: 12px; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--hairline); border-radius: var(--r-8); font-size: 12px; color: var(--text-2); }
.iw-unavail ul { margin: 6px 0; padding-left: 18px; } .iw-unavail li { line-height: 1.5; margin: 2px 0; }
/* Content planner */
.cp-schedule { padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); margin-bottom: 16px; }
.cp-sch-h { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; }
.cp-sch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.cp-sch-cell { font-size: 11.5px; padding: 7px 9px; background: var(--bg); border-radius: 7px; color: var(--text-2); text-align: center; }
.cp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cp-tab { padding: 7px 14px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--surface); color: var(--text-2); cursor: pointer; }
.cp-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cp-card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); display: flex; flex-direction: column; }
.cp-kind { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; background: var(--bg); color: var(--accent); }
.cp-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 8px 0 6px; }
.cp-copy { font-size: 13px; color: var(--text); line-height: 1.55; flex: 1; }
.cp-src { font-size: 10.5px; color: var(--text-4); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); }
/* end intelligence tools */

/* ── League tools: power rankings + winner infrastructure ───────────────── */
.lt { max-width: 880px; margin: 0 auto; }
.lt-warn, .lt-hint, .lt-loading { padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.lt-warn { border-color: var(--red); color: var(--red); }
.lt-loading { display: flex; align-items: center; gap: 14px; }
.lt-spin { width: 22px; height: 22px; border: 3px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: ss-spin 0.8s linear infinite; flex: none; }
.lt-pending { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); background: rgba(184,134,11,.14); padding: 1px 7px; border-radius: 5px; margin-left: 6px; }
/* roster manager */
.lt-rmgr { margin-bottom: 18px; border: 1px solid var(--hairline); border-radius: var(--r-12); background: var(--surface); padding: 12px 14px; }
.lt-rmgr > summary { cursor: pointer; font-weight: 700; color: var(--text-2); font-size: 13px; }
.lt-rmgr-body { margin-top: 12px; }
.lt-rmgr-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.lt-rmgr-row select, .lt-rmgr-row input { padding: 7px 10px; font-size: 13px; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--bg); color: var(--text); }
.lt-rmgr-row button, #ltAddLeague, #ltAddTeam { padding: 7px 13px; font-size: 12.5px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--r-8); cursor: pointer; }
.lt-rteam { border: 1px solid var(--hairline); border-radius: var(--r-10); padding: 10px 12px; margin-bottom: 8px; }
.lt-rteam-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.lt-rteam-x { margin-left: auto; font-size: 11px; background: none; border: 1px solid var(--hairline); color: var(--text-3); border-radius: var(--r-6); padding: 3px 8px; cursor: pointer; }
.lt-pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lt-pchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 6px 3px 9px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink); }
.lt-pchip-x { border: none; background: none; color: var(--text-4); font-size: 14px; cursor: pointer; padding: 0 2px; }
.lt-addp { position: relative; }
.lt-psearch { width: 100%; max-width: 280px; padding: 6px 10px; font-size: 12.5px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--bg); color: var(--text); }
.lt-pdrop { position: absolute; z-index: var(--z-raised); left: 0; right: 0; max-width: 280px; margin-top: 3px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-8); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.lt-popt { display: block; width: 100%; text-align: left; padding: 7px 11px; font-size: 12.5px; background: none; border: none; color: var(--text); cursor: pointer; }
.lt-popt:hover { background: var(--bg); } .lt-popt--none { color: var(--text-4); }
.lt-sub { font-size: 11px; color: var(--text-4); }
/* power ranking cards */
.lt-rank-h, .lt-status-h, .lt-sub-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 6px 0 12px; }
.lt-team { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); margin-bottom: 10px; }
.lt-team-rank { font-size: 24px; font-weight: 800; color: var(--text-4); min-width: 42px; }
.lt-team-body { flex: 1; }
.lt-team-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.lt-contend { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: 6px; }
.lt-contend--C { color: var(--green); background: var(--green-soft, rgba(46,160,110,.14)); }
.lt-contend--I { color: var(--accent); background: rgba(80,120,220,.14); }
.lt-contend--R { color: var(--text-3); background: var(--hairline); }
.lt-team-bar { height: 8px; background: var(--bg); border-radius: var(--r-4); margin: 6px 0; overflow: hidden; }
.lt-team-fill { height: 8px; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: var(--r-4); }
.lt-team-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.lt-team-stats b { color: var(--ink); }
.lt-inj { color: var(--red); } .lt-pros { color: var(--accent); }
.lt-team-detail { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.lt-strong { color: var(--green); } .lt-needs { color: var(--text-2); } .lt-missing { color: var(--text-4); font-style: italic; }
.lt-foot { font-size: 11px; color: var(--text-4); line-height: 1.6; margin-top: 14px; }
/* winner infra */
.lt-status { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.lt-status td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hairline); }
.lt-status td:first-child { font-weight: 600; color: var(--text-2); width: 40%; }
.lt-ok { color: var(--green); } .lt-pend { color: var(--warn); }
.lt-checks { list-style: none; margin: 8px 0 12px; padding: 0; }
.lt-checks li { font-size: 12.5px; padding: 3px 0; }
.lt-vdetail { font-size: 11px; color: var(--text-4); font-family: ui-monospace, monospace; margin: 8px 0; word-break: break-all; }
.lt-verdict { font-size: 13px; font-weight: 700; color: var(--ink); margin: 8px 0; }
.lt-noodds { padding: 14px 16px; background: var(--bg); border: 1px dashed var(--hairline); border-radius: var(--r-12); margin: 16px 0; }
.lt-noodds-h { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.lt-noodds p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.lt-plan { font-size: 12.5px; } .lt-plan > summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.lt-plan-list { margin: 10px 0; } .lt-plan-list li { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin: 3px 0; }
/* end league tools */

/* ── Model backtests board ──────────────────────────────────────────────── */
.bt { max-width: 820px; margin: 0 auto; }
.bt-loading { padding: 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); color: var(--text-2); }
.bt-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); margin-bottom: 16px; }
.bt-card--pass { border-left: 3px solid var(--green); }
.bt-card--fail { border-left: 3px solid var(--warn); }
.bt-card--none { border-left: 3px solid var(--hairline); }
.bt-h { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; }
.bt-badge--pass { color: var(--green); background: var(--green-soft, rgba(46,160,110,.14)); }
.bt-badge--fail { color: var(--warn); background: rgba(184,134,11,.16); }
.bt-status--none { font-size: 12px; color: var(--text-4); }
.bt-verdict { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.5; }
.bt-metrics { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.bt-metrics b { color: var(--ink); }
.bt-sub-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 12px 0 6px; }
.bt-defs { margin: 0; padding-left: 18px; } .bt-defs li { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.bt-rates { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); }
.bt-rel { display: flex; flex-direction: column; gap: 4px; }
.bt-rel-row { display: grid; grid-template-columns: 80px 1fr 120px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); }
.bt-rel-bar { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.bt-rel-fill { height: 10px; background: var(--accent); border-radius: 5px; }
.bt-note { font-size: 11.5px; color: var(--text-4); font-style: italic; line-height: 1.55; margin: 12px 0 0; }
.bt-dark { margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px dashed var(--warn); border-radius: var(--r-10); font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.bt-sub { font-size: 12px; color: var(--text-4); }
.bt-byrank { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 8px; }
.bt-byrank th { text-align: left; font-size: 9.5px; text-transform: uppercase; color: var(--text-4); padding: 0 8px 5px 0; border-bottom: 1px solid var(--hairline); }
.bt-byrank td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.bt-byrank td b { color: var(--ink); }
.bt-unavail { font-size: 11px; color: var(--text-4); background: var(--hairline); padding: 2px 7px; border-radius: 5px; font-style: italic; }
.bt-row-live td { background: var(--green-soft, rgba(46,160,110,.10)); font-weight: 600; }
.bt-metrics { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-2); margin: 8px 0; }
.bt-metrics b { color: var(--ink); }
/* end backtests */

/* ── Product Analytics ──────────────────────────────────────────────────── */
.an { max-width: 900px; margin: 0 auto; }
.an-empty { padding: 18px; background: var(--surface); border: 1px dashed var(--hairline); border-radius: var(--r-12); color: var(--text-3); font-size: 13px; line-height: 1.6; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.an-kpi { padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); }
.an-kpi__v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.an-kpi__l { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.an-kpi__s { font-size: 10.5px; color: var(--text-4); margin-top: 2px; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.an-sec { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 14px 16px; margin-bottom: 16px; }
.an-sec h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 0 0 10px; }
.an-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); color: var(--text); }
.an-tbl tr:last-child td { border-bottom: none; }
.an-n { text-align: right; font-weight: 700; color: var(--ink); width: 1%; white-space: nowrap; }
.an-foot { font-size: 11px; color: var(--text-4); line-height: 1.6; margin-top: 12px; }
@media (max-width: 640px) { .an-grid { grid-template-columns: 1fr; } }
/* end analytics */

/* ── Trade Analyzer: Player Intelligence signal layer (informational) ────── */
.mta-pi { border-left: 3px solid var(--accent); }
.mta-pi h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mta-pi-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
.mta-pi-side { font-size: 12px; color: var(--text-2); margin: 4px 0 6px; }
.mta-pi-flag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px; margin: 2px 4px 2px 0; background: var(--hairline); color: var(--text-2); }
.mta-pi-flag--inj { color: var(--red); background: rgba(200,60,60,.12); }
.mta-pi-flag--up { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.mta-pi-flag--down { color: var(--warn); background: rgba(184,134,11,.14); }
/* end trade PI signals */

/* ════════════════════════════════════════════════════════════════════════
 * Trade Analyzer v3 — premium dashboard redesign (2026-06-01). Presentation
 * only; valuation engine unchanged. Dense, card-based, low vertical waste.
 * ════════════════════════════════════════════════════════════════════════ */
.mta2 { max-width: 1240px; margin: 0 auto; padding: 0 16px 48px; }

/* — compact top bar (settings < 10% height, one row) — */
.mta2-top { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 12px 0 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }
.mta2-top__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mta2-top__title { display: flex; align-items: center; gap: 10px; }
.mta2-back { font-size: 18px; color: var(--text-3); text-decoration: none; padding: 2px 6px; border-radius: var(--r-6); }
.mta2-back:hover { background: var(--surface); color: var(--ink); }
.mta2-top__title h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.mta2-chip { font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--hairline); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mta2-xlink { font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; margin-left: 2px; }
.mta2-xlink:hover { text-decoration: underline; }
/* Risers & Fallers injury flag (display only) */
.rf-inj { color: #c0392b; font-weight: 700; cursor: help; }

/* ── Accessibility pass (platform audit: WCAG AA contrast + focus + targets) ── */
/* Placeholder contrast was ~1.45:1 (#9ca3af on cream) — lift to AA. */
input::placeholder, textarea::placeholder { color: #5a5650 !important; opacity: 1; }
/* Visible keyboard focus on every interactive control (many lacked it). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.pos-tab:focus-visible, .rf-pill:focus-visible, .hub-card:focus-visible,
.mta2-card:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent, #1a6fb8) !important; outline-offset: 2px; border-radius: var(--r-3);
}
/* Mobile: 44×44 minimum touch targets on nav/pills + 16px inputs (stop iOS zoom). */
@media (max-width: 900px) {
  .layer1-rail__item, .site-nav__burger, .pos-tab, .rf-pill, .rf-pill--view { min-height: 44px; }
  .player-search__input, .mta2-search__in, .ops-form__input, .ops-form__area,
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; }
}
.mta2-settings { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.mta2-set { display: flex; flex-direction: column; gap: 2px; }
.mta2-set__l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-4); padding-left: 2px; }
.mta2-select { font-size: 12px; font-weight: 600; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--surface); color: var(--text); cursor: pointer; }
.mta2-select:hover { border-color: var(--accent); }
.mta2-adv-toggle { font-size: 11px; font-weight: 600; color: var(--text-3); background: none; border: 1px solid var(--hairline); border-radius: var(--r-8); padding: 6px 10px; cursor: pointer; align-self: flex-end; }
.mta2-adv-toggle:hover { color: var(--ink); border-color: var(--accent); }
.mta2-adv { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.mta2-adv__l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-right: 4px; align-self: center; }

/* — main workspace: recv | hero | give — */
.mta2-work { display: grid; grid-template-columns: 1fr 240px 1fr; gap: 14px; align-items: start; margin-bottom: 18px; }
.mta2-side { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 12px; min-height: 220px; }
.mta2-side__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mta2-side__lbl { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.mta2-side__lbl--recv { color: var(--green); }
.mta2-side__lbl--give { color: var(--red); }
.mta2-side__tot { font-size: 18px; font-weight: 800; color: var(--ink); }
.mta2-search { position: relative; margin-bottom: 10px; }
.mta2-search__in { width: 100%; font-size: 13px; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--bg); color: var(--text); }
.mta2-search__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80,120,220,.12); }
.mta2-drop { position: absolute; z-index: var(--z-raised); left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-10); box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.mta2-optn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; background: none; border: none; cursor: pointer; color: var(--text); }
.mta2-optn:hover { background: var(--bg); }
.mta2-optn__img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--hairline); }
.mta2-optn__nm { font-size: 13px; font-weight: 600; flex: 1; }
.mta2-optn__meta { font-size: 11px; color: var(--text-4); }
.mta2-optn__adp { font-size: 10px; font-weight: 700; color: var(--text-4); white-space: nowrap; }
.mta2-optn__val { font-size: 12px; font-weight: 800; color: var(--accent); min-width: 28px; text-align: right; }
.mta2-optn__none { padding: 10px; font-size: 12px; color: var(--text-4); }
.mta2-cards { display: flex; flex-direction: column; gap: 8px; min-height: 90px; border-radius: var(--r-10); transition: background .15s; }
.mta2-cards--over { background: rgba(80,120,220,.08); outline: 2px dashed var(--accent); outline-offset: 2px; }
.mta2-side-empty { font-size: 12px; color: var(--text-4); text-align: center; padding: 28px 10px; border: 1px dashed var(--hairline); border-radius: var(--r-10); }

/* — player card — */
.mta2-card { display: flex; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 11px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .1s, border-color .15s; }
.mta2-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: var(--hairline-strong, var(--text-4)); transform: translateY(-1px); }
.mta2-card--drag { opacity: .5; }
.mta2-card__img, .mta2-card__ini { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--hairline); }
.mta2-card__ini { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--text-3); }
.mta2-card__main { flex: 1; min-width: 0; }
.mta2-card__r1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mta2-card__name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mta2-card__x { font-size: 16px; line-height: 1; color: var(--text-4); background: none; border: none; cursor: pointer; padding: 0 2px; flex: none; }
.mta2-card__x:hover { color: var(--red); }
.mta2-card__r2 { display: flex; align-items: center; gap: 6px; margin: 3px 0 6px; font-size: 11px; color: var(--text-3); }
.mta2-card__pos { font-weight: 700; color: var(--text-2); }
.mta2-card__tier { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-4); margin-left: auto; }
.mta2-card__r3 { display: flex; align-items: center; gap: 12px; }
.mta2-stat { display: flex; flex-direction: column; line-height: 1.1; }
.mta2-stat b { font-size: 14px; font-weight: 800; color: var(--ink); }
.mta2-stat i { font-size: 8.5px; font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
.mta2-stat--hi b { color: var(--red); } .mta2-stat--md b { color: var(--warn); } .mta2-stat--lo b { color: var(--green); }
.mta2-trend { font-size: 10px; font-weight: 700; margin-left: auto; }
.mta2-trend--up { color: var(--green); } .mta2-trend--down { color: var(--red); }

/* — center hero (grade + 5 impacts, no scroll) — */
.mta2-hero { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; position: sticky; top: 96px; }
.mta2-grade-ring { width: 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--hairline); margin-bottom: 12px; }
.mta2-grade-ring--win { border-color: var(--green); background: var(--green-soft, rgba(46,160,110,.10)); }
.mta2-grade-ring--even { border-color: var(--warn); background: rgba(184,134,11,.10); }
.mta2-grade-ring--lose { border-color: var(--red); background: rgba(200,70,70,.10); }
.mta2-grade { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.mta2-grade--win { color: var(--green); } .mta2-grade--even { color: var(--warn); } .mta2-grade--lose { color: var(--red); }
.mta2-grade__cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-4); margin-top: 2px; }
.mta2-bal { width: 100%; height: 8px; background: var(--red); border-radius: var(--r-4); overflow: hidden; display: flex; position: relative; margin-bottom: 4px; }
.mta2-bal__a { background: var(--green); height: 100%; }
.mta2-bal__b { background: var(--red); height: 100%; }
.mta2-bal__mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ink); opacity: .4; }
.mta2-bal__cap { display: flex; justify-content: space-between; width: 100%; font-size: 10px; color: var(--text-4); margin-bottom: 12px; }
.mta2-impacts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mta2-impacts__hint { font-size: 11px; color: var(--text-4); text-align: center; line-height: 1.5; padding: 8px 4px; }
.mta2-impact { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--bg); border-radius: var(--r-8); }
.mta2-impact__k { font-size: 11px; color: var(--text-3); }
.mta2-impact__v { font-size: 13px; font-weight: 800; color: var(--ink); }
.mta2-impact__v.pos { color: var(--green); } .mta2-impact__v.neg { color: var(--red); }

/* — dashboard grid (8 cards + 4 viz + why) — */
.mta2-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── Saved trades: an in-flow section at the bottom of the analyzer (below the
      dashboard / quick-add). Always shown — an empty state when there are none, a
      grid of saved-deal cards otherwise. Each can be re-Loaded. ── */
.mta2-saved { margin: 24px 0 6px; }
.mta2-saved__title {
  display: flex; align-items: center; gap: 8px;
  font: 800 15px/1.2 Geist, system-ui, sans-serif; color: var(--text-1, #1b1f24);
  margin: 0 0 11px; letter-spacing: -.01em;
}
.mta2-saved__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--accent, #1c4e80); color: #fff;
  font: 700 11px/1 Geist, system-ui, sans-serif;
}
.mta2-saved__empty {
  font: 500 13px/1.5 Geist, system-ui, sans-serif; color: var(--text-3, #6b7280);
  padding: 16px 18px; border: 1px dashed var(--border, #d8d2c6); border-radius: 12px;
  background: var(--bg-soft, #f7f6f3);
}
.mta2-saved__empty b { color: var(--text-1, #1b1f24); font-weight: 700; }
.mta2-saved__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 9px;
}
.mta2-saved__row {
  border: 1px solid var(--border, #e3ddd1); border-radius: 11px;
  padding: 9px 11px; background: var(--surface, #fff);
}
.mta2-saved__hd { display: flex; align-items: center; gap: 7px; font: 600 12px/1.2 Geist, system-ui, sans-serif; color: var(--text-1, #1b1f24); }
.mta2-saved__hd b { font-weight: 800; }
.mta2-saved__when { color: var(--text-3, #6b7280); font-weight: 500; }
.mta2-saved__load {
  margin-left: auto; padding: 4px 12px; border: 1px solid var(--accent, #1c4e80);
  border-radius: 999px; background: var(--accent, #1c4e80); color: #fff;
  font: 700 11px/1 Geist, system-ui, sans-serif; cursor: pointer;
}
.mta2-saved__load:hover { filter: brightness(1.12); }
.mta2-saved__x {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #e3ddd1); border-radius: 6px; background: var(--surface, #fff);
  color: var(--text-3, #6b7280); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.mta2-saved__x:hover { color: #b3261e; border-color: #b3261e; }
.mta2-saved__bd { margin-top: 6px; font: 500 11.5px/1.45 Geist, system-ui, sans-serif; color: var(--text-2, #5a5650); }
.mta2-saved__k { font-weight: 700; color: #1a7a44; font-size: 9.5px; letter-spacing: .04em; margin-right: 3px; text-transform: uppercase; }
.mta2-saved__k--give { color: #b3261e; margin-left: 7px; }
@media (max-width: 720px) {
  .mta2-saved__list { grid-template-columns: 1fr; }
}

.mta2-dc { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 12px 14px; }
.mta2-dc--viz { grid-column: span 2; }
.mta2-dc--why { grid-column: span 4; }
.mta2-dc__h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; display: flex; align-items: baseline; gap: 6px; }
.mta2-dc__sub { font-size: 9.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-4); }
.mta2-dc__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--hairline); }
.mta2-dc__row:last-child { border-bottom: none; }
.mta2-dc__row b { color: var(--ink); font-weight: 800; }
.mta2-dc__row b.pos { color: var(--green); } .mta2-dc__row b.neg { color: var(--red); }
.mta2-hint { font-size: 11.5px; color: var(--text-4); }

/* — visuals — */
/* charts: cap WIDTH (not height) so the SVG scales DOWN proportionally via its
   viewBox — height:auto then follows, preserving aspect ratio (capping height
   on a 100%-width SVG would letterbox/distort it). Centered. Keeps charts
   compact + premium instead of sprawling to 500px+ on wide cards. No
   SVG-generation / value change. */
.mta2-rad, .mta2-tl, .mta2-ac { height: auto; display: block; margin: 0 auto; }
.mta2-rad { max-width: 300px; width: 100%; }
.mta2-tl, .mta2-ac { max-width: 380px; width: 100%; }
.mta2-rad__ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.mta2-rad__spoke { stroke: var(--hairline); stroke-width: 1; }
.mta2-rad__lab { font-size: 10px; fill: var(--text-4); }
.mta2-rad__a { fill: rgba(46,160,110,.22); stroke: var(--green); stroke-width: 1.5; }
.mta2-rad__b { fill: rgba(200,70,70,.16); stroke: var(--red); stroke-width: 1.5; }
.mta2-tl__a, .mta2-ac__curve { stroke: var(--green); stroke-width: 2; }
.mta2-tl__b { stroke: var(--red); stroke-width: 2; }
.mta2-ac__curve { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mta2-tl__ad { fill: var(--green); } .mta2-tl__bd { fill: var(--red); }
.mta2-tl__lab { font-size: 10px; fill: var(--text-4); }
.mta2-vlegend { display: flex; gap: 14px; justify-content: center; font-size: 10px; margin-top: 4px; }
.mta2-vlegend__a, .mta2-vlegend__b { display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.mta2-vlegend__a::before { content: ''; width: 10px; height: 3px; background: var(--green); border-radius: 2px; }
.mta2-vlegend__b::before { content: ''; width: 10px; height: 3px; background: var(--red); border-radius: 2px; }
.mta2-pd { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.mta2-pd__k { font-size: 11px; font-weight: 700; color: var(--text-3); width: 32px; }
.mta2-pd__bars { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mta2-pd__a, .mta2-pd__b { height: 13px; border-radius: var(--r-3); font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; padding-left: 4px; min-width: 14px; }
.mta2-pd__a { background: var(--green); } .mta2-pd__b { background: var(--red); }

/* — why card — */
.mta2-why__lead { font-size: 13px; color: var(--text); line-height: 1.5; margin: 0 0 8px; }
.mta2-why { margin: 0; padding-left: 18px; }
.mta2-why li { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 3px 0; }
.mta2-why__foot { font-size: 10.5px; color: var(--text-4); line-height: 1.5; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--hairline); }

/* — empty state — */
.mta2-empty { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-14); padding: 28px 24px; }
.mta2-empty__lead h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.02em; }
.mta2-empty__lead p { font-size: 13.5px; color: var(--text-3); line-height: 1.6; margin: 0 0 22px; max-width: 620px; }
.mta2-empty h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 0 0 10px; }
.mta2-empty h3 span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.mta2-empty__ex { margin-bottom: 6px; }
.mta2-empty__quick { margin-top: 4px; }
.mta2-card__team { color: var(--text-3); }
.mta2-card__age { color: var(--text-4); }
/* market ADP context chip (display only; not part of the trade value) */
.mta2-card__adp { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--text-3);
  background: var(--bg-2, rgba(127,127,127,.12)); border: 1px solid var(--hairline);
  border-radius: var(--r-6); padding: 1px 6px; white-space: nowrap; cursor: help; }
.mta2-ex-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.mta2-ex { text-align: left; background: var(--bg); border: 1px solid var(--hairline); border-radius: 11px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, box-shadow .15s; }
.mta2-ex:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mta2-ex__t { font-size: 13px; font-weight: 800; color: var(--ink); }
.mta2-ex__s { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.mta2-ex__go { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.mta2-quick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mta2-quick { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-10); padding: 8px 6px; cursor: pointer; width: 72px; transition: border-color .15s; }
.mta2-quick:hover { border-color: var(--accent); }
.mta2-quick img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--hairline); }
.mta2-quick span { font-size: 10px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

/* — loader — */
.mta2-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; }
.mta2-spinner { width: 30px; height: 30px; border: 3px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: ss-spin .8s linear infinite; }
.mta2-loading__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.mta2-loading__s { font-size: 12px; color: var(--text-4); }

/* — responsive — */
@media (max-width: 1080px) { .mta2-dash-grid { grid-template-columns: repeat(2, 1fr); } .mta2-dc--viz, .mta2-dc--why { grid-column: span 2; } }
@media (max-width: 860px) {
  .mta2-work { grid-template-columns: 1fr; }
  .mta2-hero { position: static; order: -1; }
  .mta2-settings { width: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  .mta2-dash-grid { grid-template-columns: 1fr; } .mta2-dc--viz, .mta2-dc--why { grid-column: span 1; }
  .mta2-ex-row { grid-template-columns: 1fr; }
}
/* end trade analyzer v3 */

/* ════════════════════════════════════════════════════════════════════════
 * Small-mobile fixes (≤480px) — browser-verified 2026-06-01.
 * The home hero title rendered 658px wide at 375px (18vw → 67.5px "managr"
 * with tight tracking overflowed the viewport, clipping content + pushing the
 * body to 710px). Floor the display title to a size that fits a phone, and tame
 * the hero padding/lede. UI only — no layout-structure or content change.
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(34px, 13.5vw, 60px) !important; letter-spacing: -0.04em !important; }
  .hero { padding: 24px 16px !important; overflow-x: hidden; }
  .hero__lede { font-size: 18px !important; }
  .hero__tagline, .hero__lede { max-width: 100%; }
  /* keep any wide hero child from forcing horizontal scroll on phones */
  .hero, .hero__title, .hero__lede, .hero__tagline, .hero__ctas, .hero__quickmap, .hero__signals, .hero__preview { max-width: 100%; box-sizing: border-box; }

  /* Page-level containment: wide stat cards/sub-navs must not push the whole
     page past the viewport. Constrain the page + cards to 100% and clip; the
     data tables inside keep their own overflow-x:auto so they scroll in-place. */
  .page, .workspace, main { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .card { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
  /* The desktop rule `body[data-route="rankings"] .card:has(.pos-tabs)` sets
     width:max-content + max-width:none so the pos-tabs row aligns with the FULL
     table width. On a phone that makes the rankings list card ~960px wide and
     .page (overflow-x:hidden) CLIPS the off-screen columns — they become
     UNREACHABLE (no scroll). On mobile, fit the card to the viewport and let the
     inner .table-wrap own the horizontal scroll instead. (pos-tabs itself stays
     scrollable via the chip-rail rule below.) Must match the desktop rule's
     specificity + !important to win. */
  body[data-route="rankings"] .card:has(.pos-tabs) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  body[data-route="rankings"] .card:has(.pos-tabs) > div { min-width: 0; max-width: 100%; }
  /* horizontally-scrollable chip rails stay scrollable, not clipped */
  .workspace-subnav, .pos-tabs, .layer1-rail__items--horizontal { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Mobile fold fix: the desktop rule (`body[data-route="rankings"] .pos-tabs`)
     forces flex-wrap:wrap, so the 12-chip All/C/1B/…/RP filter stacks to THREE
     rows on a phone and shoves the first player row below the 844 fold. Collapse
     it to a single horizontal-scroll rail here — must match the desktop rule's
     specificity + !important to win. Saves ~2 rows (~96px), surfacing the table. */
  body[data-route="rankings"] .pos-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body[data-route="rankings"] .pos-tabs::-webkit-scrollbar { display: none; }
  body[data-route="rankings"] .pos-tab { flex: 0 0 auto !important; }

  /* Audit fix: the board toolbar stacked each control full-width (≈6 rows) on a
     phone, pushing the first table row below the fold before any data showed.
     Flow the controls into a compact wrapping row — search keeps its own full
     row, the select/button controls wrap 2-3 per row — so the table appears
     sooner. Higher specificity than the base `.toolbar__inner{flex-direction:
     column}` so it wins on the rankings route. */
  body[data-route="rankings"] .toolbar__inner { flex-flow: row wrap; align-items: center; gap: 8px; }
  body[data-route="rankings"] .toolbar__inner .toolbar__search { flex: 1 1 100%; }
  body[data-route="rankings"] .toolbar__inner .toolbar__field { flex: 0 1 auto; }
}
/* end small-mobile fixes */

/* ════════════════════════════════════════════════════════════════════════
 * DESIGN-SYSTEM CONSOLIDATION — unified card primitive (2026-06-01)
 * ------------------------------------------------------------------------
 * The intelligence-era card families (.mta2-dc/.mta2-card, .pintel-card,
 * .pevo-card, .bt-card, .an-kpi/.an-sec, .lt-team) each hard-coded the SAME
 * signature — `background:var(--surface); border:1px solid var(--hairline);
 * border-radius:11-14px` — 67× across this file. This collapses that into ONE * token set + ONE shared selector group: the single source of truth for the * "managr card." Families keep their existing class names (no JS changes, so the * browser-verified UI is preserved); they now inherit the shared look from here.
 *
 * Tokens (override per-theme for free — they reference the existing --surface/
 * --hairline which already flip under data-theme=dark):
 * ════════════════════════════════════════════════════════════════════════ */
:root {
  --card-bg:        var(--surface);
  --card-bd:        1px solid var(--hairline);
  --card-radius:    13px;
  --card-pad:       14px 16px;
  --card-shadow:    0 1px 2px rgba(0, 0, 0, .04);
  --card-shadow-hi: 0 6px 18px rgba(0, 0, 0, .12);
  --metric-num:     26px;   /* big number in a metric/KPI card */
}

/* The unified card surface. Every intelligence-era card family points here so
   one edit restyles them all. Kept token-driven; values match what each family
   already rendered (no visual change), just deduplicated. */
.card-surface,
.mta2-dc, .pintel-card, .pevo-card, .bt-card, .an-kpi, .an-sec, .lt-team {
  background: var(--card-bg);
  border: var(--card-bd);
  border-radius: var(--card-radius);
}

/* Reusable building blocks the user asked for (.card-header/.card-body/
   .card-footer/.metric-card/.insight-card). These are NEW, additive primitives
   any future surface can use directly — they don't override the legacy app.js
   .card-header (which is scoped under .card and keeps its own padding). */
.card-body   { padding: var(--card-pad); }
.card-footer { padding: 10px 16px; border-top: var(--card-bd); font-size: 11px; color: var(--text-4); }
.metric-card { background: var(--card-bg); border: var(--card-bd); border-radius: var(--card-radius); padding: var(--card-pad); }
.metric-card__num { font-size: var(--metric-num); font-weight: 800; color: var(--ink); line-height: 1.1; }
.metric-card__lbl { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.insight-card { background: var(--card-bg); border: var(--card-bd); border-radius: var(--card-radius); padding: var(--card-pad); }
.insight-card__h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
/* end design-system consolidation */

/* ════════════════════════════════════════════════════════════════════════
 * RANKINGS CHROME DEDUPE (2026-06-01, browser-verified)
 * ------------------------------------------------------------------------
 * On rankings-family routes the first data row sat at y≈618px behind FOUR
 * stacked nav strips. Two were redundant/leaking (confirmed in-browser):
 *   1. The global #wsSubtab (HIERARCHY-driven top bar) rendered the SAME
 *      "Redraft / Dynasty / Risers…" group that the intentionally-styled
 *      in-page .workspace-subnav--top[data-parent=rankings] already shows —
 *      identical text, both visible, ~340px apart. Hide the global twin here
 *      (it's still the primary sub-nav on every OTHER section).
 *   2. The methodology nav (Overview/Audit/Health/Explain) LEAKED onto
 *      rankings because the broad `body[data-route=rankings] .workspace-subnav`
 *      show-rule re-enabled it. Re-hide it on rankings-family routes.
 * Markup + data-subroute wiring untouched (reversible); recovers ~100px and
 * removes the on-screen duplicate. No JS / no functionality change.
 * ════════════════════════════════════════════════════════════════════════ */
body[data-route="rankings"]  #wsSubtab,
body[data-route="injuries"]  #wsSubtab,
body[data-route="trade"]     #wsSubtab,
body[data-route="risers"]    #wsSubtab,
body[data-route="probables"] #wsSubtab,
body[data-route="twostart"]  #wsSubtab,
body[data-route="injuryreport"] #wsSubtab,
body[data-route="injurydb"]  #wsSubtab { display: none !important; }

body[data-route="rankings"]  .workspace-subnav[data-parent="methodology"],
body[data-route="injuries"]  .workspace-subnav[data-parent="methodology"],
body[data-route="trade"]     .workspace-subnav[data-parent="methodology"],
body[data-route="risers"]    .workspace-subnav[data-parent="methodology"],
body[data-route="probables"] .workspace-subnav[data-parent="methodology"],
body[data-route="twostart"]  .workspace-subnav[data-parent="methodology"],
body[data-route="injuryreport"] .workspace-subnav[data-parent="methodology"],
body[data-route="injurydb"]  .workspace-subnav[data-parent="methodology"] { display: none !important; }
/* end rankings chrome dedupe */

/* ════════════════════════════════════════════════════════════════════════
 * PLAYER PAGE — integrate the Intelligence + Evolution cards (2026-06-01)
 * ------------------------------------------------------------------------
 * Browser-measured: the native explainer column (.explainer-flow) is centered
 * at max-width 1280px (leftX 29 → rightX 1291). The two appended cards did NOT
 * align with it — .pintel-card rendered FULL-BLEED (0 → 1320) and .pevo-card sat
 * in its own 1100px box at a different left margin (22px). That misalignment is
 * what made them read as "bolted on" below the native research sections.
 *
 * Fix: align both cards to the SAME column geometry as the native sections
 * (max-width 1280, centered, matching gutters) so they read as part of the page.
 * CSS-only — the JS mount points (insertAdjacentHTML on #explainerPage) are
 * untouched; this just constrains + centers what they emit. Reversible.
 * Only applies on the player explainer page. No content/data change.
 * ════════════════════════════════════════════════════════════════════════ */
#explainerPage > .pintel-card,
#explainerPage > .pevo-card,
#explainerPage > .cau-card {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  /* match the native column's 20px side gutters so left edges line up */
  width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
}
@media (max-width: 760px) {
  #explainerPage > .pintel-card,
  #explainerPage > .pevo-card,
  #explainerPage > .cau-card { width: calc(100% - 24px) !important; }
}
/* end player page integration */

/* ── Projection Adjustment Audit (comp-layer transparency) ──────────────── */
.cau-card { background: var(--card-bg, var(--surface)); border: var(--card-bd, 1px solid var(--hairline)); border-radius: var(--card-radius, 13px); padding: 18px 20px; }
.cau-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cau-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cau-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: var(--r-4); }
.cau-tag--validated { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.cau-tag--uncapped { color: var(--warn); background: rgba(184,134,11,.14); }
.cau-tag--pending { color: var(--text-3); background: var(--hairline); }
.cau-tag--layer { color: var(--accent); background: rgba(80,120,220,.12); }
.cau-sub-h__note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-4); }
.cau-bigdelta { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.cau-bigdelta--up { color: var(--green); } .cau-bigdelta--down { color: var(--red); }
.cau-flow { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 14px; }
.cau-step { text-align: center; }
.cau-step__v { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1; }
.cau-step__l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-top: 4px; }
.cau-arrow { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.cau-arrow--up { color: var(--green); background: var(--green-soft, rgba(46,160,110,.12)); }
.cau-arrow--down { color: var(--red); background: rgba(200,70,70,.12); }
.cau-warnrow { margin: 4px 0 12px; text-align: center; }
.cau-warn { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-6); }
.cau-warn--med { color: var(--warn); background: rgba(184,134,11,.14); }
.cau-warn--hi { color: var(--red); background: rgba(200,70,70,.14); }
.cau-warn--tiny { color: var(--text-2); background: var(--hairline); }
.cau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.cau-kv { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--bg); border-radius: var(--r-8); font-size: 12.5px; }
.cau-kv__k { color: var(--text-3); } .cau-kv__v { color: var(--ink); font-weight: 700; }
.cau-sub-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 12px 0 6px; }
.cau-comps { display: flex; flex-direction: column; gap: 4px; }
.cau-comp { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.cau-comp:last-child { border-bottom: none; }
.cau-comp__nm { font-weight: 600; color: var(--ink); }
.cau-comp__yr { font-size: 11px; color: var(--text-4); }
.cau-comp__out { margin-left: auto; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cau-sh { display: flex; flex-direction: column; gap: 3px; }
.cau-sh__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); padding: 3px 0; }
.cau-ok { color: var(--green); } .cau-pend { color: var(--warn); }
.cau-cap { margin-top: 12px; padding: 8px 12px; background: var(--bg); border: 1px dashed var(--hairline); border-radius: var(--r-8); font-size: 12px; color: var(--text-2); }
.cau-none { padding: 14px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.6; }
.cau-none__why { font-size: 11.5px; color: var(--text-4); }
.cau-foot { font-size: 11px; color: var(--text-4); line-height: 1.6; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline); }
.cau-link { color: var(--accent); font-weight: 600; }
/* end comp audit */

/* ── League Winner Calibration page ─────────────────────────────────────── */
.wc { max-width: 880px; margin: 0 auto; }
.wc-gate { padding: 16px 18px; border-radius: var(--r-12); margin-bottom: 18px; border: 1px solid var(--hairline); }
.wc-gate--open { background: var(--green-soft, rgba(46,160,110,.10)); border-color: var(--green); }
.wc-gate--closed { background: rgba(184,134,11,.10); border-color: var(--warn); }
.wc-gate__h { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.wc-gate__v { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.wc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.wc-kpi { padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); }
.wc-kpi__v { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.wc-kpi__l { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.wc-sec { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 14px 16px; margin-bottom: 16px; }
.wc-sec h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 0 0 10px; }
.wc-sub-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin: 12px 0 6px; }
.wc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wc-tbl td, .wc-tbl th { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--hairline); text-align: left; color: var(--text); }
.wc-tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); }
.wc-tbl tr:last-child td { border-bottom: none; }
.wc-n { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-ok { color: var(--green); } .wc-pend { color: var(--warn); }
.wc-empty { font-size: 12.5px; color: var(--text-3); line-height: 1.6; padding: 6px 0; }
.wc-rel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wc-rel-row { display: grid; grid-template-columns: 70px 1fr 120px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); }
.wc-rel-bar { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.wc-rel-fill { height: 10px; background: var(--accent); border-radius: 5px; }
.wc-form { display: flex; flex-direction: column; gap: 8px; }
.wc-in { padding: 8px 11px; font-size: 13px; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--bg); color: var(--text); }
.wc-in--sm { max-width: 160px; }
.wc-ta { min-height: 90px; padding: 9px 11px; font-size: 13px; border: 1px solid var(--hairline); border-radius: var(--r-8); background: var(--bg); color: var(--text); font-family: inherit; resize: vertical; }
.wc-form__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-btn { padding: 8px 14px; font-size: 12.5px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--r-8); cursor: pointer; }
.wc-btn--ghost { background: transparent; border: 1px solid var(--hairline-strong, var(--text-4)); color: var(--text-2); }
.wc-msg { font-size: 12px; } .wc-msg.ok { color: var(--green); } .wc-msg.err { color: var(--red); }
.wc-note { font-size: 11px; color: var(--text-4); line-height: 1.55; margin: 8px 0 0; }
@media (max-width: 560px){ .wc-rel-row { grid-template-columns: 56px 1fr 90px; } }
/* end winner calibration */

/* ════════════════════════════════════════════════════════════════════════
 * MOBILE TOP-NAV — hamburger drawer (2026-06-03)
 * ------------------------------------------------------------------------
 * Below 900px the horizontal nav (logo + 6-item rail + search/controls +
 * account pill) previously wrapped into ~4 rows (~166px tall, ~20% of a
 * 390px-tall phone screen). This replaces that wrap with a compact one-row bar
 * (logo … account · hamburger) and a toggled drawer holding the rail links +
 * search/controls stacked vertically. The Layer-1 flyouts are hover/focus-only
 * (a desktop enhancement that no-ops on touch), so the drawer uses the rail's
 * plain <a href> links and the floating flyout panel is suppressed on mobile.
 * Toggle JS: nav-mobile.js (adds/removes .site-nav--open). Presentation only.
 * Declared at end-of-file so it overrides the earlier ≤900 / ≤760 nav rules.
 * ════════════════════════════════════════════════════════════════════════ */
/* !important: beats the high-specificity generic `button:not(...)` baseline
   (styles.css:2184, 0,0,4,1) which would otherwise force the burger visible. */
.site-nav__burger { display: none !important; }   /* desktop / >900px: hidden */

@media (max-width: 900px) {
  /* ── compact one-row bar ─────────────────────────────────────────────── */
  .site-nav__inner { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; align-items: center; }
  /* margin-right:auto on the logo pushes account + burger to the right edge,
     independent of whether the auth pill is present. */
  .site-nav__inner > .site-nav__logo { order: 0; margin-right: auto; flex: 0 0 auto; }
  .site-nav__inner > .managr-acct    { order: 1; flex: 0 0 auto; }
  .site-nav__burger {
    order: 2; flex: 0 0 auto;
    display: inline-flex !important; align-items: center; justify-content: center;  /* !important: later than + beats the global none!important at ≤900 */
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--hairline, rgba(0,0,0,.14));
    border-radius: var(--r-10); color: var(--ink, currentColor); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .site-nav__burger:hover  { background: var(--surface, rgba(0,0,0,.05)); }
  .site-nav__burger:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
  .site-nav__burger svg line { transition: transform .18s ease, opacity .15s ease; transform-origin: 11px 11px; }

  /* ── drawer items: full-width rows, hidden until opened ───────────────── */
  /* !important needed to beat the earlier ≤900 block (polish.css ~2845) which
     forces `.site-nav__right { display:flex !important; flex:0 0 auto !important }`. */
  .site-nav__inner > .layer1-rail__items--horizontal,
  .site-nav__inner > .site-nav__right {
    order: 5 !important; flex: 0 0 100% !important; width: 100%; margin: 0 !important; display: none !important;
  }
  .site-nav--open > .site-nav__inner > .layer1-rail__items--horizontal,
  .site-nav--open > .site-nav__inner > .site-nav__right {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 4px;
    overflow: visible;   /* override the ≤760 overflow-x:auto scroll-row */
  }
  .site-nav--open > .site-nav__inner { row-gap: 6px; padding-bottom: 12px; }
  .site-nav--open .layer1-rail__items--horizontal > .layer1-rail__item {
    width: 100%; box-sizing: border-box; padding: 12px 12px; border-radius: var(--r-8); flex: 0 0 auto;
  }
  /* Light/default: keep the rail's existing slate label color (readable on the
     light nav). In DARK mode that slate (#334155) is low-contrast on the dark bg,
     so flip just the drawer labels to --ink (cream in dark). Scoped to dark so
     light is untouched. */
  html[data-theme="dark"] .site-nav--open .layer1-rail__items--horizontal > .layer1-rail__item,
  html[data-theme="dark"] .site-nav--open .layer1-rail__items--horizontal > .layer1-rail__item .layer1-rail__label {
    color: var(--ink) !important;
  }
  .site-nav--open .layer1-rail__items--horizontal > .layer1-rail__item:hover,
  .site-nav--open .layer1-rail__items--horizontal > .layer1-rail__item[aria-current="page"] {
    background: var(--surface, rgba(0,0,0,.05));
  }
  .site-nav--open .site-nav__right { gap: 10px; padding-top: 6px; margin-left: 0; }
  .site-nav--open .site-nav__right .player-search { width: 100%; max-width: 100%; }

  /* the hover flyout cannot open on touch and would float oddly on focus */
  .layer1-flyout { display: none !important; }

  /* hamburger → X when the drawer is open */
  .site-nav--open .site-nav__burger .snb-mid { opacity: 0; }
  .site-nav--open .site-nav__burger .snb-top { transform: translateY(4.5px) rotate(45deg); }
  .site-nav--open .site-nav__burger .snb-bot { transform: translateY(-4.5px) rotate(-45deg); }
}
/* end mobile top-nav */

/* ════════════════════════════════════════════════════════════════════════
   MOBILE CONTAINMENT FIX (2026-06-04, harsh-grade follow-up)
   Confirmed bug: #subPageLanding / #opsBody rendered at desktop width (~1014px)
   on a 390px phone and were CLIPPED by .page (overflow-x:hidden) — cards + text
   ran off-screen, unreachable. The shell reflow rules are gated on
   body[data-shell=…] and didn't force the content to fit. Force full-width
   reflow + single-column metric/card grids; data tables keep their OWN internal
   horizontal scroll so columns stay reachable. Mobile-only; desktop untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #subPageLanding, #opsBody {
    max-width: 100% !important;
    width: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  #subPageLanding > *, #opsBody > * { max-width: 100% !important; box-sizing: border-box; }
  /* Metric tiles + hub card grids → single column so they fit the viewport. */
  #subPageLanding .ws-metric-grid, .hub-grid, .hub-workspace .ws-metric-grid { grid-template-columns: 1fr !important; }
  /* Wide data tables: contain to viewport, scroll horizontally IN PLACE. */
  #subPageLanding .sub-table-wrap, #subPageLanding .table-wrap,
  #opsBody .ops-waiver-wrap, #opsBody .ops-lineup-wrap, #opsBody .ops-tx-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  /* Compact list rows (injury alerts, cross-links): let long note text wrap
     instead of running off the row edge (the cut-off "Judge (ribs)…" text). */
  #subPageLanding .ws-row__main, #opsBody .ws-row__main { min-width: 0 !important; }
  #subPageLanding .ws-row__note, #opsBody .ws-row__note {
    white-space: normal !important; overflow-wrap: anywhere;
  }
}
/* end mobile containment fix */

/* ════════════════════════════════════════════════════════════════════════
   IN-SEASON IA (2026-06-05) — home surfaces order
   It's mid-season: lead the home grid with in-season tools (Operations =
   league/trade/roster, Risers & Fallers) and push draft-season cards (Draft
   Room, FYPD) to the end. CSS order only — the .home-surfaces__grid is a CSS
   grid, so this reorders placement with zero HTML risk. (Top-nav order is
   handled in index.html: Dashboard promoted, Draft Wizard last.)
   ════════════════════════════════════════════════════════════════════════ */
.home-surface { order: 5; }
.home-surface[href="#/operations"] { order: 1; }
.home-surface[href="#/risers"]     { order: 2; }
.home-surface[href="#/rankings"]   { order: 3; }
.home-surface[href="#/research"]   { order: 4; }
.home-surface[href="#/draft"]      { order: 90; }
.home-surface[href="#/fypd"], .home-surface--fypd { order: 95; }
/* end in-season IA */

/* Column-header tooltips: signal that a header carries a hover definition.
   Subtle dotted underline + help cursor; never overrides sort-active styling. */
#tableHead th.th-has-tip { cursor: help; }
/* Visible ⓘ affordance on definition-bearing headers (S1 metric legend). The
   small superscript glyph signals "hover/tap for the definition" more explicitly
   than the old dotted underline it replaces. */
#tableHead th .th-info {
  font-size: 9px;
  opacity: 0.45;
  margin-left: 3px;
  vertical-align: super;
  font-weight: 400;
  cursor: help;
}
#tableHead th.th-has-tip:hover .th-info,
#tableHead th.th-has-tip:focus-within .th-info { opacity: 0.95; }

/* Same hover-definition affordance on stat-board (_table) headers. */
.sub-table th.th-has-tip {
  cursor: help;
  text-decoration: underline dotted rgba(90,86,80,0.45);
  text-underline-offset: 3px;
}

/* Watchlist star column on the rankings table (rightmost).
   Writes to the shared waiver watchlist so any analysis row becomes a
   one-click roster-decision entry point. */
#tableHead th.col-watch,
#tableBody td.col-watch { width: 34px; text-align: center; padding-left: 4px; padding-right: 8px; }
#tableHead th.col-watch { color: #c9c2b4; font-size: 13px; }
.rank-watch {
  background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: #c9c2b4;
  padding: 4px; border-radius: var(--r-6);
  transition: color 120ms var(--ease, ease), transform 120ms var(--ease, ease);
}
.rank-watch:hover { color: #a86a14; transform: scale(1.18); }
.rank-watch.is-on { color: #a86a14; }   /* was #d98324 (2.66:1); ~4:1 graphics contrast */
.rank-watch:focus-visible { outline: 2px solid var(--accent, #1a6fb8); outline-offset: 2px; }

/* Feature-preview block on Operations empty states (what you get after import). */
.ops-empty__preview {
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--r-8);
  background: rgba(15,14,12,.04);
  font: 500 12.5px/1.5 Geist, system-ui; color: var(--text-2, #4a4640);
}
.ops-empty__preview-lbl { font-weight: 700; color: var(--text, #1a1a1a); }

/* Rankings search match-count chip ("X of Y" while filtering). */
.toolbar__count {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 2px 8px;
  border-radius: 999px;
  background: rgba(26,111,184,.10); color: #1a4f78;
  font: 600 11px/1.4 Geist, system-ui; white-space: nowrap;
}
.toolbar__count[hidden] { display: none; }

/* Dashboard action-summary chips: one-click shortcuts to the in-season
   decision surfaces on the "Your team" strip (Workflow Integration). */
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 2px; }
.dash-chip {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 999px;
  background: var(--surface, #fff); border: 1px solid var(--rule-soft, rgba(15,14,12,.16));
  color: var(--ink, #1a1a1a); font: 600 12.5px/1 Geist, system-ui;
  text-decoration: none; transition: transform 120ms var(--ease, ease), border-color 120ms var(--ease, ease);
}
.dash-chip:hover { transform: translateY(-1px); border-color: var(--accent, #1a6fb8); }
.dash-chip:focus-visible { outline: 2px solid var(--accent, #1a6fb8); outline-offset: 2px; }
@media (max-width: 900px) { .dash-chip { min-height: 40px; } }

/* Hero accuracy signal as a clickable evidence CTA (Trust). Surfaces the
   backtest behind the headline number; inherits .hero__signal layout. */
.hero__signal--link { text-decoration: none; color: inherit; cursor: pointer; transition: transform 120ms var(--ease, ease); }
.hero__signal--link:hover { transform: translateY(-2px); }
.hero__signal--link:hover .hero__signal-lbl { text-decoration: underline; }
.hero__signal--link:focus-visible { outline: 2px solid var(--accent, #1a6fb8); outline-offset: 3px; border-radius: var(--r-6); }

/* Unified engine-warming banner (Product Cohesion): consistent honest
   "warming…" state on every engine-dependent surface, replacing silent
   "open Rankings first" deadlocks. Self-heals when the engine warms. */
.engine-warming {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px;
  border-radius: 9px;
  background: rgba(26,111,184,.08);
  border-left: 3px solid #1a6fb8;
  color: #1a4f78;
  font: 500 13px/1.5 Geist, system-ui;
}
.engine-warming a { color: inherit; text-decoration: underline; font-weight: 600; }
.engine-warming__spin {
  flex: none; width: 14px; height: 14px; margin-top: 1px;
  border: 2px solid rgba(26,111,184,.3); border-top-color: #1a6fb8;
  border-radius: 50%;
  animation: engineWarmSpin .8s linear infinite;
}
@keyframes engineWarmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .engine-warming__spin { animation: none; } }

/* A11y (WCAG 1.4.1): in-text prose links must be distinguishable without color.
   Underline bare (unclassed) links inside subpage list/paragraph content — the
   :not([class]) guard excludes styled nav/card/chip/button links. */
#subPageLanding li > a:not([class]),
#subPageLanding p > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Watchlist star on Risers/Fallers cards — pushed to the right of the header. */
.rf-card__watch { margin-left: auto; flex: none; }

/* Readiness badges on hub nav cards (Discoverability/Trust): mark experimental
   / not-yet-wired routes so users tell framework from shipped before clicking. */
.hub-card__rdy {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  padding: 1px 7px; border-radius: 999px;
  font: 700 9.5px/1.6 Geist, system-ui; letter-spacing: .04em; text-transform: uppercase;
}
.hub-card__rdy--exp { background: rgba(138,90,16,.14); color: #734a0c; }
.hub-card__rdy--soon { background: rgba(90,86,80,.12); color: #5a5650; }

/* Mobile / touch hardening (Wave 6, pure CSS, progressive):
   - text-size-adjust stops iOS from inflating fonts in landscape
   - touch-action: manipulation removes the 300ms double-tap-zoom delay on taps
   - overscroll-behavior keeps horizontal table scroll from chaining to the page */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, .pos-tab, .rf-pill, .dash-chip, .rank-watch, .hub-card,
input, select, textarea, [role="tab"], [role="button"] { touch-action: manipulation; }
.table-wrap, #tableWrap, .sub-table-wrap, .ops-table-wrap { overscroll-behavior-x: contain; }

/* Screen-reader-only utility: visually hidden, still announced by AT. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Breakout outcome mix (player Explainer) ──────────────────────────────
   4-segment stacked bar for player.outcomeMix (bust/meets/breakout/superstar).
   Segment colors are semantic and identical across themes (like position
   chips); all text uses theme-aware --text tokens. Segments always sum to
   100%, so the track is fully covered. */
#expl-outcome-mix .expl-mix-bar{
  display:flex; width:100%; height:14px; border-radius:7px;
  overflow:hidden; margin:6px 0 10px; background:rgba(128,128,128,0.14);
}
#expl-outcome-mix .expl-mix-seg{ height:100%; }
.expl-mix-seg--bust{ background:#c0392b; }
.expl-mix-seg--meets{ background:#7a828c; }
.expl-mix-seg--breakout{ background:#1a8754; }
.expl-mix-seg--superstar{ background:#b8860b; }
#expl-outcome-mix .expl-mix-legend{
  display:flex; flex-wrap:wrap; gap:8px 16px;
  font-size:12px; color:var(--text-2,#5b5f66);
}
.expl-mix-key{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.expl-mix-key b{ color:var(--text-1,#1a1a1f); font-variant-numeric:tabular-nums; margin-left:2px; }
.expl-mix-sw{ width:10px; height:10px; border-radius:2px; display:inline-block; flex:0 0 auto; }
.expl-mix-sw--bust{ background:#c0392b; }
.expl-mix-sw--meets{ background:#7a828c; }
.expl-mix-sw--breakout{ background:#1a8754; }
.expl-mix-sw--superstar{ background:#b8860b; }
#expl-outcome-mix .expl-mix-note{
  font-size:11px; color:var(--text-3,#8a8f98); line-height:1.5; margin:8px 0 0;
}

/* ── Prospect graduation odds line on FYPD cards ──────────────────────────
   Tier-based cohort priors shown for top-100-ranked prospects. Theme-aware. */
.fypd-card__grad{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px;
  margin-top:6px; font-size:11px; color:var(--text-3,#8a8f98);
}
.fypd-card__grad-lbl{
  font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  font-size:10px; color:var(--text-3,#8a8f98);
}
.fypd-card__grad-v{ color:var(--text-2,#5b5f66); white-space:nowrap; }
.fypd-card__grad-v b{ color:var(--text-1,#1a1a1f); font-variant-numeric:tabular-nums; margin-left:2px; }

/* ── Pitcher consensus FV badge on FYPD cards ─────────────────────────────
   Rank-anchored consensus grade + MLE cross-check. Blue tint mirrors the
   existing FYPD elite-badge treatment for cross-theme consistency. */
.fypd-card__fv{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:5px; font-size:11px; }
.fypd-card__fv-grade{
  font-weight:700; font-size:11px; letter-spacing:.02em;
  color:#1a5f96; background:rgba(30,111,184,0.12);   /* was #1e6fb8 (4.24:1 on the tinted badge - just under AA); #1a5f96 = 5.7:1 */
  border-radius:var(--r-4); padding:1px 7px; font-variant-numeric:tabular-nums;
}
/* Dark theme: lift the badge text to a brighter blue so it clears WCAG AA
   on the dark surface (the light-mode #1e6fb8 is ~2.5:1 on dark). */
html[data-theme="dark"] .fypd-card__fv-grade{
  color:#7db4e8; background:rgba(125,180,232,0.16);
}
.fypd-card__fv-src{ color:var(--text-3,#8a8f98); }

/* ── "Since your last visit" intelligence feed (dashboard) ────────────────
   Bloomberg-terminal-style 4-column signal grid. Theme-aware tokens only
   (Richer Warm), premium/editorial — no neon. Reuses the .ws-row list rows. */
.intel-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(238px, 1fr)); gap:14px;
}
.intel-col{
  background:var(--surface, #fbfaf6);
  border:1px solid var(--hairline, rgba(15,14,12,.10));
  border-radius:var(--r-10); padding:10px 12px 8px;
}
.intel-col__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 0 4px; padding-bottom:7px;
  border-bottom:1px solid var(--hairline, rgba(15,14,12,.08));
  font-size:12px; font-weight:700; letter-spacing:.01em;
  color:var(--text-1, #1a1a1f);
}
.intel-col__head a{
  font-size:11px; font-weight:600; white-space:nowrap;
  color:var(--brand, #b23415); text-decoration:none; opacity:.85;
}
.intel-col__head a:hover{ opacity:1; text-decoration:underline; }
.intel-col .ws-row-list{ display:flex; flex-direction:column; }
.intel-star{ color:var(--gold, #734a0c); font-size:11px; margin-left:1px; }

/* ── "Where to go next" discovery rail (player page footer) ──────────────
   The "one more click" loop. Premium card grid, subtle rust-border lift on
   hover (tactile, no neon). Theme-aware tokens. */
.next-rail{ margin:22px 0 8px; }
.next-rail__head{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-3, #6a655b); margin:0 0 10px;
}
.next-rail__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:10px;
}
.next-rail__card{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 13px; border-radius:var(--r-10); text-decoration:none;
  background:var(--surface, #fbfaf6);
  border:1px solid var(--hairline, rgba(15,14,12,.10));
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.next-rail__card:hover{
  border-color:var(--brand, #b23415); transform:translateY(-1px);
  box-shadow:0 6px 18px -12px rgba(15,14,12,.30);
}
.next-rail__icon{ font-size:16px; color:var(--brand, #b23415); line-height:1; }
.next-rail__title{ font-size:13.5px; font-weight:700; color:var(--text-1, #1a1a1f); }
.next-rail__sub{ font-size:11.5px; color:var(--text-3, #6a655b); line-height:1.4; }
/* Dispatcher-appended "Keep exploring" footer: separated from page content. */
.next-rail--footer{ margin-top:32px; padding-top:20px; border-top:1px solid var(--hairline, rgba(15,14,12,.10)); }

/* ── Value-lens cross-reference ("when to use which" value board) ─────────── */
.vlens{
  margin:24px 0 4px; padding:13px 15px; border-radius:var(--r-10, 10px);
  background:var(--surface-2, var(--surface, #fbfaf6));
  border:1px solid var(--hairline, rgba(15,14,12,.10));
}
.vlens__row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vlens__lbl{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3, #6a655b); margin-right:2px;
}
.vlens__a{
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--brand, #b23415); border-bottom:1px solid transparent;
}
.vlens__a:hover{ border-bottom-color:currentColor; }
.vlens__cur{
  font-size:13px; font-weight:800; color:var(--text-1, #1a1a1f);
  padding:1px 8px; border-radius:999px;
  background:var(--chip-bg, rgba(178,52,21,.10));
}
.vlens__sep{ color:var(--text-4, #b8b2a6); font-size:12px; }
.vlens__hint{ margin-top:7px; font-size:12px; line-height:1.45; color:var(--text-3, #6a655b); }
.vlens__hint b{ color:var(--text-1, #1a1a1f); font-weight:700; }

/* ── Experimental in-page banner (honest "not a validated model" notice) ──── */
.exp-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; padding:9px 14px; border-radius:var(--r-8, 8px);
  background:var(--warn-bg, rgba(176,116,20,.10));
  border:1px solid var(--warn-border, rgba(176,116,20,.30));
}
.exp-banner__tag{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--warn-fg, #734a0c); white-space:nowrap;
}
.exp-banner__txt{ font-size:12.5px; line-height:1.4; color:var(--text-2, #3a362f); }
.exp-banner__txt b{ color:var(--text-1, #1a1a1f); font-weight:700; }

/* ── Stale-feed "last good snapshot" banner (Stage-3 last-good fallback) ──── */
.stale-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; padding:9px 14px; border-radius:var(--r-8, 8px);
  background:var(--err-bg, rgba(178,52,21,.08));
  border:1px solid var(--err-border, rgba(178,52,21,.28));
}
.stale-banner__tag{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brand, #b23415); white-space:nowrap;
}
.stale-banner__txt{ font-size:12.5px; line-height:1.4; color:var(--text-2, #3a362f); }
.stale-banner__txt b{ color:var(--text-1, #1a1a1f); font-weight:700; }

/* ── Simulator format selector (Stage-4 sim consolidation) — reuses .pos-tab ── */
.sim-mode-tabs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:14px 0 6px; }
.sim-mode-tabs__lbl{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3, #6a655b); margin-right:4px;
}

/* ── Watchlist "Track" bar (player page, under the hero) ─────────────────── */
.track-bar{ display:flex; align-items:center; gap:10px; margin:14px 0 2px; }
.track-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-8); cursor:pointer; flex:0 0 auto;
  font-size:17px; line-height:1; padding:0;
  background:var(--surface, #fbfaf6); border:1px solid var(--hairline, rgba(15,14,12,.18));
  color:var(--text-3, #6a655b); transition:all .15s ease;
}
.track-btn:hover{ border-color:var(--gold, #734a0c); color:var(--gold, #734a0c); }
.track-btn.is-on{
  background:var(--gold-soft, rgba(138,90,16,.12));
  border-color:var(--gold, #734a0c); color:var(--gold, #734a0c);
}
.track-bar__hint{ font-size:12.5px; color:var(--text-3, #6a655b); line-height:1.4; }

/* ── Market line (ADP context, display-only) ─────────────────────────────── */
.mkt-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin:6px 0 2px; font-size:12.5px; color:var(--text-2, #5a5650);
}
.mkt-line__label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3, #6a655b);
}
.mkt-line__adp b{ color:var(--text-1, #1a1a1f); font-variant-numeric:tabular-nums; }
.mkt-line__src, .mkt-line__own{ color:var(--text-3, #6a655b); font-variant-numeric:tabular-nums; }
.mkt-line__sep{ color:var(--hairline-strong, rgba(15,14,12,.22)); }
/* Rankings name-cell ADP sub-label (display-only market context) */
/* ADP moves to its own sub-line: the name cell's ellipsis was truncating
   the VALUE ('ADP 31.1 …') — data must never elide before decoration. */
.row-adp{ display:block; font-size:11px; color:var(--text-3, #6a655b); font-variant-numeric:tabular-nums; margin-left:0; margin-top:1px; white-space:nowrap; }

/* Daily/Weekly matchup period header (text audit 2026-06-21): .dw-period__main +
   __sub were UNSTYLED inline spans that collided into "Sun Jun 2115 games · today".
   Stack them with real hierarchy. */
.dw-period__lbl { display: inline-flex; flex-direction: column; line-height: 1.18; text-align: center; }
.dw-period__main { font-size: 14px; font-weight: 700; color: var(--text-1, #0c1f38); letter-spacing: -.01em; }
.dw-period__sub { font-size: 11.5px; font-weight: 500; color: var(--text-3, #6a655b); }

/* Roster personalization markers (display-only): "On your team" / "Rostered" */
.row-own{ font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:1px 5px; border-radius:var(--r-3); margin-left:5px; white-space:nowrap; }
.row-own--mine{ background:var(--green-soft, rgba(31,107,58,.12)); color:var(--green, #1f6b3a); }
.row-own--other{ background:var(--gold-soft, rgba(138,90,16,.10)); color:var(--gold, #734a0c); }
.track-roster{ font-size:12px; font-weight:700; letter-spacing:.01em; padding:3px 10px; border-radius:7px; }
.track-roster--mine{ background:var(--green-soft, rgba(31,107,58,.12)); color:var(--green, #1f6b3a); }
.track-roster--other{ background:var(--gold-soft, rgba(138,90,16,.10)); color:var(--gold, #734a0c); }

/* ── Player Game Log & recent form (display-only, 2026 actuals) ───────────── */
.glog-wins{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.glog-win{ flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:9px; background:var(--surface, #fbfaf6); border:1px solid var(--hairline, rgba(15,14,12,.10)); }
.glog-win__lbl{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3, #6a655b); }
.glog-win__val{ font-size:18px; font-weight:700; color:var(--text-1, #1a1a1f); font-variant-numeric:tabular-nums; }
.glog-win__sub{ font-size:11px; color:var(--text-2, #5a5650); font-variant-numeric:tabular-nums; }
.glog-tbl-wrap{ overflow-x:auto; margin:0 0 10px; }
.glog-subhd{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3, #6a655b); margin:10px 0 6px; }
.glog-tbl{ width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.glog-tbl th{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3, #6a655b); text-align:left; padding:5px 8px; border-bottom:1px solid var(--hairline, rgba(15,14,12,.12)); white-space:nowrap; }
.glog-tbl th.num, .glog-tbl td.num{ text-align:right; }
.glog-tbl td{ padding:5px 8px; border-bottom:1px solid var(--hairline, rgba(15,14,12,.06)); color:var(--text-1, #1a1a1f); white-space:nowrap; }

/* ── League Settings Editor (#/dashboard/league/settings) ───────────────── */
.lse-saved{display:flex;align-items:center;gap:7px;margin:0 0 14px;padding:9px 14px;
  border:1px solid var(--rule-soft,rgba(15,14,12,.12));border-radius:var(--r-10);
  background:var(--surface,#fff);color:var(--text-2,#5a5650);
  font:600 12.5px/1.4 Geist,system-ui;}
.lse-saved strong{color:var(--brand,#b23415);font-weight:700;}
.lse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:4px;}
.lse-grid--roster{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.lse-field{display:flex;flex-direction:column;gap:7px;padding:12px 13px;
  border:1px solid var(--rule-soft,rgba(15,14,12,.1));border-radius:11px;
  background:var(--bg-2,#faf7f1);}
.lse-field__lab{display:flex;flex-direction:column;gap:1px;
  font:700 13px/1.2 Geist,system-ui;color:var(--ink,#1a1a1a);}
.lse-field__sub{font:500 11px/1.2 Geist,system-ui;color:var(--text-3,#8a847b);
  text-transform:uppercase;letter-spacing:.03em;}
/* stepper */
.lse-step{display:inline-flex;align-items:stretch;border:1px solid var(--rule-soft,rgba(15,14,12,.16));
  border-radius:9px;overflow:hidden;background:var(--surface,#fff);width:fit-content;}
.lse-step--wide{width:100%;}
.lse-step__btn{appearance:none;border:0;background:transparent;cursor:pointer;
  width:34px;font:700 17px/1 Geist,system-ui;color:var(--brand,#b23415);
  display:flex;align-items:center;justify-content:center;transition:background .12s;}
.lse-step__btn:hover{background:var(--bg-2,#f3efe6);}
.lse-step__btn:active{transform:translateY(.5px);}
.lse-step__inp{appearance:none;border:0;border-left:1px solid var(--rule-soft,rgba(15,14,12,.12));
  border-right:1px solid var(--rule-soft,rgba(15,14,12,.12));
  width:54px;text-align:center;background:var(--surface,#fff);color:var(--ink,#1a1a1a);
  font:700 15px/1 Geist,system-ui;padding:9px 4px;}
.lse-step--wide .lse-step__inp{width:100%;border-left:0;border-right:0;text-align:left;padding-left:13px;}
.lse-step__inp:focus{outline:2px solid var(--brand,#b23415);outline-offset:-2px;}
.lse-step__inp::-webkit-outer-spin-button,.lse-step__inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* segmented */
.lse-seg{display:inline-flex;border:1px solid var(--rule-soft,rgba(15,14,12,.16));
  border-radius:9px;overflow:hidden;background:var(--surface,#fff);}
.lse-seg__btn{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:9px 14px;font:700 12.5px/1 Geist,system-ui;color:var(--text-2,#5a5650);
  border-right:1px solid var(--rule-soft,rgba(15,14,12,.1));transition:background .12s,color .12s;}
.lse-seg__btn:last-child{border-right:0;}
.lse-seg__btn:hover{background:var(--bg-2,#f3efe6);}
.lse-seg__btn.is-on{background:var(--brand,#b23415);color:#fff;}
.lse-note{margin-top:11px;padding:9px 12px;border-radius:9px;
  background:var(--bg-2,#faf7f1);border:1px dashed var(--rule-soft,rgba(15,14,12,.16));
  font:500 12px/1.5 Geist,system-ui;color:var(--text-2,#5a5650);}
.lse-subhd{margin:16px 0 8px;font:700 11px/1 Geist,system-ui;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3,#8a847b);}
.lse-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.lse-btn{appearance:none;cursor:pointer;border:0;border-radius:9px;
  padding:10px 16px;font:700 13px/1 Geist,system-ui;
  background:var(--ink,#1a1a1a);color:#fff;transition:opacity .12s,transform .06s;}
.lse-btn:hover{opacity:.9;}
.lse-btn:active{transform:translateY(.5px);}
.lse-btn--ghost{background:transparent;color:var(--text-2,#5a5650);
  border:1px solid var(--rule-soft,rgba(15,14,12,.2));}
.lse-btn--ghost:hover{background:var(--bg-2,#f3efe6);}
/* WCAG link-in-text-block: links inside prose blocks need a non-color cue */
.sub-empty a,.lse-note a{text-decoration:underline;text-underline-offset:2px;}

/* ── Study "Players to explore" rail (Research Hub discovery cross-links) ── */
.study-affected{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule-soft,rgba(15,14,12,.1));}
.study-affected__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.study-affected__head h3{margin:0;font:700 15px/1.2 Geist,system-ui;color:var(--text-1,#1a1a1f);letter-spacing:-.01em;}
.study-affected__more{font:700 12.5px/1 Geist,system-ui;color:var(--brand,#b23415);text-decoration:none;white-space:nowrap;}
.study-affected__more:hover{text-decoration:underline;text-underline-offset:2px;}
.study-affected__sub{margin:5px 0 13px;font:500 12.5px/1.5 Geist,system-ui;color:var(--text-2,#6b6b75);max-width:72ch;}
.study-affected__grid{display:flex;flex-wrap:wrap;gap:8px;}
.study-affected__chip{display:inline-flex;flex-direction:column;gap:1px;
  padding:8px 12px;border-radius:var(--r-10);text-decoration:none;
  border:1px solid var(--rule-soft,rgba(15,14,12,.12));background:var(--surface,#fff);
  transition:border-color .12s,transform .06s,box-shadow .12s;}
.study-affected__chip:hover{border-color:var(--brand,#b23415);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(178,52,21,.1);}
.study-affected__nm{font:700 13px/1.2 Geist,system-ui;color:var(--text-1,#1a1a1f);}
.study-affected__meta{font:600 10.5px/1.2 Geist,system-ui;color:var(--text-3,#8a847b);
  text-transform:uppercase;letter-spacing:.03em;}

/* ── My Team Dashboard briefing (#/dashboard, daily-return) ─────────────── */
.mtd{margin:0 0 22px;padding:18px 20px;border-radius:var(--r-16);
  border:1px solid var(--rule-soft,rgba(15,14,12,.12));
  background:linear-gradient(180deg,var(--surface,#fff),var(--bg-2,#faf7f1));}
.mtd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.mtd-eyebrow{font:700 10.5px/1 Geist,system-ui;letter-spacing:.07em;text-transform:uppercase;color:var(--brand,#b23415);margin-bottom:5px;}
.mtd-title{margin:0;font:800 21px/1.1 Geist,system-ui;letter-spacing:-.02em;color:var(--text-1,#1a1a1f);}
.mtd-summary{font:600 13px/1.4 Geist,system-ui;color:var(--text-2,#5a5650);text-align:right;}
.mtd-summary strong{color:var(--brand,#b23415);font-weight:800;}
.mtd-snapnote{font-weight:500;color:var(--text-3,#8a847b);font-size:11.5px;}
.mtd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;}
.mtd-card{display:flex;flex-direction:column;padding:13px 14px;border-radius:var(--r-12);
  border:1px solid var(--rule-soft,rgba(15,14,12,.1));background:var(--surface,#fff);}
.mtd-card__hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px;}
.mtd-card__hd h4{margin:0;font:700 13.5px/1.2 Geist,system-ui;color:var(--text-1,#1a1a1f);}
.mtd-card__hd a{font:700 11.5px/1 Geist,system-ui;color:var(--brand,#b23415);text-decoration:none;white-space:nowrap;}
.mtd-card__hd a:hover{text-decoration:underline;text-underline-offset:2px;}
.mtd-card__sub{margin:0 0 9px;font:500 11.5px/1.4 Geist,system-ui;color:var(--text-3,#8a847b);}
.mtd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.mtd-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mtd-p{display:flex;flex-direction:column;gap:0;text-decoration:none;min-width:0;}
.mtd-p__nm{font:700 12.5px/1.2 Geist,system-ui;color:var(--text-1,#1a1a1f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.mtd-p:hover .mtd-p__nm{color:var(--brand,#b23415);}
.mtd-p__meta{font:600 10px/1.2 Geist,system-ui;text-transform:uppercase;letter-spacing:.03em;color:var(--text-3,#8a847b);}
.mtd-delta{font:700 11.5px/1 Geist,system-ui;white-space:nowrap;}
.mtd-delta--up{color:#0b5e29;}
.mtd-delta--down{color:#b3160f;}
.mtd-tag{font:700 10px/1.3 Geist,system-ui;padding:3px 7px;border-radius:var(--r-6);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.02em;}
.mtd-tag--warn{background:rgba(185,28,28,.12);color:#a30f0f;}
.mtd-tag--good{background:rgba(21,128,61,.13);color:#0b5e29;}
.mtd-empty{margin:0;font:500 12px/1.5 Geist,system-ui;color:var(--text-3,#8a847b);}
html[data-theme="dark"] .mtd-tag--warn{background:rgba(248,113,113,.16);color:#fca5a5;}
html[data-theme="dark"] .mtd-tag--good{background:rgba(74,222,128,.16);color:#86efac;}
html[data-theme="dark"] .mtd-delta--up{color:#86efac;}
html[data-theme="dark"] .mtd-delta--down{color:#fca5a5;}

/* ── Player alerts strip (player page, daily-return signals) ─────────────── */
.pa-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.pa-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--rule-soft,rgba(15,14,12,.12));background:var(--surface,#fff);
  font:600 12px/1.2 Geist,system-ui;}
.pa-chip__ic{font-size:12.5px;line-height:1;}
.pa-chip__lab{font-weight:700;color:var(--text-1,#1a1a1f);}
.pa-chip__det{color:var(--text-2,#5a5650);font-weight:500;}
.pa-chip--good{border-color:rgba(21,128,61,.35);background:rgba(21,128,61,.07);}
.pa-chip--good .pa-chip__lab{color:#0b5e29;}
.pa-chip--warn{border-color:rgba(185,28,28,.32);background:rgba(185,28,28,.06);}
.pa-chip--warn .pa-chip__lab{color:#a30f0f;}
.pa-chip--info{border-color:rgba(178,52,21,.3);background:rgba(178,52,21,.06);}
.pa-chip--info .pa-chip__lab{color:var(--brand,#b23415);}
html[data-theme="dark"] .pa-chip--good{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.3);}
html[data-theme="dark"] .pa-chip--good .pa-chip__lab{color:#86efac;}
html[data-theme="dark"] .pa-chip--warn{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);}
html[data-theme="dark"] .pa-chip--warn .pa-chip__lab{color:#fca5a5;}

/* ── Rankings momentum sub-label (value movement over time) ──────────────── */
.row-mom{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px;
  border-radius:5px;font:700 10.5px/1.5 Geist,system-ui;vertical-align:middle;white-space:nowrap;}
.row-mom__d{font-weight:500;opacity:.72;font-size:9.5px;}
.row-mom--up{background:rgba(21,128,61,.1);color:#0b5e29;}
.row-mom--down{background:rgba(185,28,28,.1);color:#a30f0f;}
.row-mom--form{background:transparent;border:1px dashed currentColor;padding:0 5px;}
html[data-theme="dark"] .row-mom--up{background:rgba(74,222,128,.14);color:#86efac;}
html[data-theme="dark"] .row-mom--down{background:rgba(248,113,113,.14);color:#fca5a5;}

/* ── My Team league-aware bits (context chip, roster needs, fill tags) ───── */
.mtd-league{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--rule-soft,rgba(15,14,12,.16));background:var(--surface,#fff);
  font:700 11px/1.3 Geist,system-ui;color:var(--text-2,#5a5650);}
.mtd-needs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  padding:9px 13px;border-radius:var(--r-10);background:var(--bg-2,#faf7f1);
  border:1px solid var(--rule-soft,rgba(15,14,12,.1));}
.mtd-needs__lab{font:700 10.5px/1 Geist,system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--brand,#b23415);}
.mtd-need-chip{font:700 11.5px/1.3 Geist,system-ui;color:var(--text-1,#1a1a1f);
  padding:2px 8px;border-radius:var(--r-6);background:rgba(178,52,21,.08);}
.mtd-need-chip em{font-style:normal;font-weight:500;color:var(--text-2,#5a5650);}
.mtd-needs__ok{font:600 12px/1.3 Geist,system-ui;color:#0b5e29;}
.mtd-needs__edit{margin-left:auto;font:700 11px/1 Geist,system-ui;color:var(--brand,#b23415);text-decoration:none;white-space:nowrap;}
.mtd-needs__edit:hover{text-decoration:underline;text-underline-offset:2px;}
.mtd-tag-grp{display:inline-flex;align-items:center;gap:5px;}
.mtd-tag--fill{background:rgba(178,52,21,.1);color:var(--brand,#b23415);}
html[data-theme="dark"] .mtd-needs__ok{color:#86efac;}

/* ── Trade Analyzer: actionable alert-verdict chip on each player card ───── */
.mta2-card__sig{margin-left:5px;padding:1px 6px;border-radius:var(--r-4);
  font:700 9px/1.6 Geist,system-ui;letter-spacing:.02em;white-space:nowrap;}
.mta2-card__sig--good{background:rgba(21,128,61,.13);color:#0b5e29;}
.mta2-card__sig--warn{background:rgba(185,28,28,.12);color:#a30f0f;}
.mta2-card__sig--info{background:rgba(178,52,21,.1);color:var(--brand,#b23415);}
html[data-theme="dark"] .mta2-card__sig--good{background:rgba(74,222,128,.16);color:#86efac;}
html[data-theme="dark"] .mta2-card__sig--warn{background:rgba(248,113,113,.16);color:#fca5a5;}

/* ── PE4 a11y: Trade Analyzer muted labels fail AA on the cream page bg ──────
   Every failing label (.mta2-set__l/.mta2-stat i/.mta2-dc__sub/.mta2-grade__cap/
   .mta2-card__age/.mta2-bal__cap/.mta2-adv__l/.mta2-why__foot) uses var(--text-4),
   whose light :root value (#8e887b) is only ~3.07:1 on --bg #f3efe6. Darken
   --text-4 SCOPED to the analyzer root (.mta2), light theme only, so it clears
   AA on both the cream page and white cards without any global/dark-mode change. */
html:not([data-theme="dark"]) .mta2 { --text-4: #635e52; }
/* Tier chip text sat-color on a 13% tint of itself also fails; keep the tint as
   identity but render the label in the readable ink tone. */
.mta2 .mta2-card__tier { color: var(--text-1, #1a1a1f) !important; }

/* ── PE3 Mobile: pin-to-compare tap target meets WCAG 2.5.8 (24px) on touch ──
   .row-pin-btn ships 18x18 (hover-revealed, dense) on desktop — fine for mouse,
   but it renders on 100 ranking rows at <24px on phones. Enlarge the tap target
   to 24x24 at mobile widths ONLY, so desktop table density is unchanged. */
@media (max-width: 768px) {
  .row-pin-btn { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHELL B — ALL-WORKSPACE RAIL (2026-05-30, explicit user request)
   The left workspace rail now also renders for rankings / methodology /
   miscellaneous (shellB SCOPE_WORKSPACES amendment in app.js). The original
   three shells (dashboard/research/draft-wizard) keep their per-container
   offset rules above. For the NEW shells we pad the whole .page wrapper —
   every surface these workspaces render (legacy panels, sub-nav bar,
   #subPageLanding, fypd/prospects/studies workspaces) lives inside .page,
   so one rule clears the fixed rail with no double-padding.
   ≥769px only: below that the rail is hidden by the existing mobile rule
   and .page must keep its responsive defaults.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body[data-shell="rankings"] .page,
  body[data-shell="methodology"] .page,
  body[data-shell="miscellaneous"] .page {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(var(--shell-left-rail-w) + 24px);
    padding-right: 24px;
    transition: padding-left var(--motion-layout);
  }
}

/* ── Category picker chips (Configure League, categories mode) 2026-06-10 ── */
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2, #5a5650);
  background: var(--surface-2, #fff);
  border: 1px solid var(--border-1, var(--hairline, #e5e5ea));
  border-radius: 999px; cursor: pointer; user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cat-chip:hover { border-color: var(--color-accent, #ba0c2f); }
.cat-chip input { margin: 0; cursor: pointer; accent-color: var(--color-accent, #ba0c2f); }
.cat-chip:has(input:checked) {
  background: var(--color-accent-soft, rgba(186,12,47,.08));
  border-color: var(--color-accent, #ba0c2f);
  color: var(--color-accent, #ba0c2f);
}

/* ── Category picker: disabled (unavailable) chips 2026-06-10 ── */
.cat-chip--disabled { opacity: .55; cursor: not-allowed; }
.cat-chip--disabled input { cursor: not-allowed; }
.cat-chip__na {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-3, #8a8680);
  background: var(--surface-soft, #efeee9); border-radius: var(--r-4);
  padding: 0 4px; margin-left: 2px;
}


/* ═══ DASHBOARD MISSION CONTROL (.dhub) — 2026-06-10 ═════════════════════
   Purpose-built at-a-glance dashboard for #/dashboard (+ /getting-started).
   Replaces the broken auto-hub strip. Red (dashboard-family) accent. */
.dhub { max-width: 1180px; margin: 0 auto; padding: 6px 8px 40px; }
.dhub-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 4px 0 18px; }
.dhub-hero__copy { min-width: 0; flex: 1 1 auto; }
.dhub-hero__art {
  flex: 0 0 auto; width: 240px; height: 240px; object-fit: cover;
  border-radius: 16px; box-shadow: 0 10px 30px -10px rgba(13,35,64,.35);
}
@media (max-width: 820px) { .dhub-hero__art { width: 150px; height: 150px; } }
@media (max-width: 560px) { .dhub-hero__art { display: none; } }
.dhub-hero__eyebrow {
  font-family: var(--mono, var(--font)); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3, #8a857c);
}
.dhub-hero__title {
  margin: 4px 0 6px; font-family: var(--font-display, var(--font));
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
}
.dhub-hero__lede { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.55; color: var(--text-2, #5d584d); }

.dhub-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,1.6fr); gap: 10px; margin: 0 0 14px; }
.dhub-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none;
  background: var(--surface, #fff); border: 1px solid var(--hairline, rgba(15,14,12,.10));
  border-radius: var(--r-12); transition: transform .15s ease, box-shadow .15s ease;
}
.dhub-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,14,12,.08); }
.dhub-stat__n {
  font-family: var(--font-display, var(--font)); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent, #BB0000);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dhub-stat__l {
  font-family: var(--mono, var(--font)); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3, #8a857c);
}
.dhub-cta {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 13px 16px;
  text-decoration: none; color: var(--ink); border-radius: var(--r-12);
  background: linear-gradient(90deg, rgba(187,0,0,.07), rgba(187,0,0,.02));
  border: 1px solid rgba(187,0,0,.22);
}
.dhub-cta__icon { font-size: 20px; color: var(--accent, #BB0000); }
.dhub-cta__body { flex: 1; font-size: 13.5px; line-height: 1.5; }
.dhub-cta__go { font-weight: 700; color: var(--accent, #BB0000); white-space: nowrap; }

.dhub-sectionhead { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 10px; }
.dhub-sectionhead h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dhub-sectionhead a { font-size: 12.5px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.dhub-sectionhead a:hover { color: var(--accent, #BB0000); }

.dhub-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 22px; }
.dhub-card {
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: 15px 15px 13px;
  text-decoration: none; background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(15,14,12,.10)); border-radius: var(--r-12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dhub-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,14,12,.10); border-color: rgba(187,0,0,.35); }
.dhub-card__icon { width: 22px; height: 22px; color: var(--accent, #BB0000); }
.dhub-card__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.dhub-card__desc { font-size: 12px; line-height: 1.45; color: var(--text-2, #5d584d); }
.dhub-card__arrow {
  position: absolute; top: 13px; right: 14px; font-size: 14px; color: var(--text-3, #8a857c);
  transition: transform .15s ease, color .15s ease;
}
.dhub-card:hover .dhub-card__arrow { transform: translateX(3px); color: var(--accent, #BB0000); }

.dhub-panels { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.dhub-panel {
  background: var(--surface, #fff); border: 1px solid var(--hairline, rgba(15,14,12,.10));
  border-radius: var(--r-12); padding: 13px 14px 9px; min-width: 0;
}
.dhub-panel header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.dhub-panel h3 {
  margin: 0; font-family: var(--mono, var(--font)); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3, #8a857c);
}
.dhub-panel header a { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-decoration: none; white-space: nowrap; }
.dhub-panel header a:hover { color: var(--accent, #BB0000); }
.dhub-panel ol { list-style: none; margin: 0; padding: 0; }
.dhub-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hairline, rgba(15,14,12,.07)); min-width: 0; }
.dhub-row__rk { width: 16px; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; color: var(--text-3); }
.dhub-row__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhub-row .posChip { flex: 0 0 auto; }
.dhub-row__val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dhub-row__val--buy { color: #0a7d43; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.dhub-row__val--il { color: var(--accent, #BB0000); font-size: 11px; }
.dhub-panel__empty { padding: 14px 0 12px; font-size: 12.5px; color: var(--text-3); }

html[data-theme="dark"] .dhub-stat, html[data-theme="dark"] .dhub-card, html[data-theme="dark"] .dhub-panel { background: #1b1e25; }

@media (max-width: 1100px) { .dhub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .dhub-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .dhub-panels { grid-template-columns: 1fr; } }


/* Rail-head sticky compensation fix (2026-06-10): the sticky head uses
   the rail's top padding is now 0 and the head owns its own top spacing with
   no negative margin, so the dashboard just tightens the head's padding-top a
   touch for density — no margin compensation needed. */
body[data-route="dashboard"] .shell-b__rail-head {
  padding-top: 14px;
  margin-top: 0;
}
body[data-route="dashboard"] .shell-b__rail-head + .shell-b__rail-group,
.shell-b__rail-head + .shell-b__rail-group { margin-top: 8px; }

/* ── Wave B: tier separators + available-only roster dim ─────────────── */
#tableBody td.tier-row {
  padding: 16px 12px 5px;
  font: 700 10.5px/1 'Geist', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3, #8a887f);
  border-bottom: 2px solid var(--hairline, #d8d6cf);
  background: transparent;
}
#tableBody tr:has(> td.tier-row) { cursor: default; }
#tableBody tr:has(> td.tier-row):hover { background: transparent; }
#tableBody tr:has(> td.tier-row) .col-watch { border-bottom: 2px solid var(--hairline, #d8d6cf); }
/* Players rostered elsewhere in the imported league read as taken — signalled
   by the ROSTERED badge + a faint row tint. NOT opacity: the old opacity:.62
   washed every cell (text, chips, numbers) to ~62% over white, so when most/all
   rows were taken (e.g. the RP board in a deep league) the WHOLE table looked
   semi-transparent and "not fully colored". Tint keeps the data at full color. */
#tableBody tr:has(.row-own--other) > td { background: rgba(20, 48, 79, .05); }
#tableBody tr:has(.row-own--other):hover > td { background: rgba(20, 48, 79, .09); }

/* ── Wave C: injuries replacement suggester ──────────────────────────── */
.inj-repl { font-weight: 600; text-decoration: none; color: inherit; border-bottom: 1px dashed var(--hairline, #d8d6cf); white-space: nowrap; }
.inj-repl:hover { color: var(--accent, #c8102e); border-bottom-color: var(--accent, #c8102e); }
.inj-repl__pts { font: 600 10.5px/1 var(--font-mono, monospace); color: var(--text-3, #8a887f); margin-left: 4px; letter-spacing: .03em; }

/* ── Wave E: trade-partner scan cards ────────────────────────────────── */
.ops-tf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.ops-tf-card { border: 1px solid var(--hairline, #d8d6cf); border-radius: var(--r-10); padding: 12px 14px; background: var(--surface, #fff); }
.ops-tf-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ops-tf-card__body { font-size: 13px; line-height: 1.55; }
.ops-tf-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ops-tf__v { font: 600 10.5px/1 var(--font-mono, monospace); color: var(--text-3, #8a887f); letter-spacing: .03em; }
.ops-tf__tag { font: 600 10px/1.3 var(--font-mono, monospace); color: var(--text-3, #8a887f); text-transform: uppercase; letter-spacing: .06em; text-align: right; }

/* ── Wave E: player comparison ───────────────────────────────────────── */
#cmpTable .cmp-metric { font-weight: 600; white-space: nowrap; }
#cmpTable .cmp-best { background: rgba(42, 157, 74, .10); font-weight: 700; }

/* ── Wave F: cloud-sync pending indicator on the account chip ────────── */
.managr-acct--sync-pending .managr-acct__btn { position: relative; }
.managr-acct--sync-pending .managr-acct__btn::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #d98324; box-shadow: 0 0 0 2px var(--surface, #fff);
}


/* ═══ Wave R round 2 — measured contrast + dark chrome (UI_MICRO_AUDIT §5) ═══ */
/* posChip colored variant: white text sat on PASTEL position tints (254
   failing nodes on milb alone) — pastel chips take ink, not white. */
/* Dark ink ONLY for class-less (pastel/JS-colored) chips. Variant chips
   (.posChip--sp etc.) ship saturated backgrounds with #fff ink by design —
   the old global override turned them near-black-on-rust (199 axe serious
   on redraft alone, round-5 settle-state finding). */
.posChip[data-pos-colored="1"]:not([class*="posChip--"]) { color: #fff !important; } /* base chip bg is the dark --pos-util slate (theme-v2:358) → white ink for AA contrast */

/* Standings inline accents measured under AA on zebra rows. */
.sub-table td span[style*="9a9aa0"] { color: var(--text-3) !important; }
.sub-table td span[style*="b8860b"] { color: #8a6508 !important; }
.sub-table td span[style*="2a9d4a"],
.sub-table td span[style*="42, 157, 74"],
.sub-table td span[style*="42,157,74"] { color: var(--green, #1f6b3a) !important; }

/* Dark chrome (filmed shot 42) — polish.css loads last, so pin here. */
html[data-theme="dark"] .site-nav__logo-name { color: var(--text) !important; }
html[data-theme="dark"] .site-nav a:not(.site-nav__logo),
html[data-theme="dark"] .site-nav__links a { color: var(--text-2) !important; }
html[data-theme="dark"] .shell-b__rail-eyebrow,
html[data-theme="dark"] [class*="rail-group"],
html[data-theme="dark"] [class*="rail__group"],
html[data-theme="dark"] [class*="prospects-sidebar__label"] { color: var(--text-3) !important; }


/* ═══ Wave R2 — form-control brand accent (UI audit P1) ═══ */
/* Native checkboxes/radios rendered platform-blue; accent-color repaints
   every one of them in brand scarlet with zero markup changes. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent, #b23415); }


/* ═══ Wave S — UI P2/P3: utilities, preset card, mobile sticky column ═══ */
/* Utility classes extracted from the top repeated inline styles (96 call
   sites converted; includes the var(--text3) typo family that silently
   no-opped and the off-system #98989f gray — both now the real token). */
.u-panel { padding: 14px 16px; background: var(--surface-1, #fafbfc); border: 1px solid rgba(11,17,32,.06); border-radius: var(--r-10); }
.u-t2 { color: var(--text-2); }
.u-t3 { color: var(--text-3); }
.u-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.u-mb14 { margin-bottom: 14px; }
.u-col14 { display: flex; flex-direction: column; gap: 14px; }
.u-note-i { font-size: 11.5px; color: var(--text-3); margin: 0 0 8px 0; font-style: italic; }

/* Roster preset slab → card (component graded 70: undifferentiated slab). */
body[data-route="rankings"] #rosterPresetBar {
  background: var(--surface, #fff) !important;
  border: 1px solid rgba(11,17,32,.10) !important;
  border-radius: var(--r-10) !important;
  padding: 12px 14px !important;
}

/* Mobile boards: sticky player column so horizontal scroll keeps context. */
@media (max-width: 640px) {
  .sub-table td:first-child, .sub-table th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface, #fff);
  }
}


/* ── Round-4 audit fixes (2026-06-12; breakpoint extended 2026-06-22) ───── */
/* The rankings toolbar stacks to a COLUMN at <=880px (styles.css ~2885). In a
   column the search pill's flex-basis (360px) becomes its HEIGHT — a giant grey
   egg eating the first screen. The original fix only pinned the cross-axis at
   <=640px, so the egg still showed in the 641-880px window (e.g. a ~650px
   browser window). Pin it across the WHOLE column range; .toolbar__inner in the
   selector matches the small-mobile row-wrap rule's specificity so it wins
   there too. */
@media (max-width: 880px) {
  body[data-route="rankings"] .toolbar__inner .toolbar__search {
    flex: 0 0 auto;
    height: 40px;
    width: 100%;
    max-width: none;
  }
}
/* Player Comparison removed site-wide (owner 2026-06-22): hide the row
   "pin to compare" (+) buttons everywhere. The compare tray is no-op'd and the
   compare routes redirect to the Trade Analyzer, so these would be dead. */
.row-pin-btn { display: none !important; }

/* 43 axe contrast nodes on the Call-Up Radar status chips: the warn variant's
   #734a0c-on-tint missed 4.5:1 at 11px. Darken both ink fallbacks. */
.sub-status--warn { color: #6e4407; }
.sub-status--ok   { color: #175430; }
/* link-in-text-block (operations sub-copy): make inline links distinguishable
   without relying on color alone. */
.ops-section__sub a { text-decoration: underline; text-underline-offset: 2px; }
/* Radar/closers severity chips: 10px ink-on-tint missed 4.5:1 (43 axe nodes
   on Call-Up Radar). Darken each family's ink; tints unchanged. */
.sub-status--sev-notable { color: #075985 !important; }
.sub-status--sev-urgent  { color: #8f2810 !important; }
.sub-status--sev-soft    { color: #4b5563 !important; }

/* Companion-view bar on consolidated tab-pair pages */
.sub-sibling-bar { margin: 0 0 10px; font-size: 12.5px; color: var(--text-3, #777); }
.sub-sibling-bar a { color: var(--accent, #b04a3a); text-decoration: underline; text-underline-offset: 2px; }

/* Mobile drawer drill-down accordion (audit IA: "mobile drawer has no drill-down").
   nav-mobile.js injects a .l1-mobile-sub after each workspace that has sub-pages;
   tapping the workspace toggles .is-open. Mobile-drawer-only — hidden elsewhere. */
.l1-mobile-sub { display: none; }
@media (max-width: 900px) {
  .site-nav--open .layer1-rail__item.has-mobile-sub { position: relative; }
  .site-nav--open .layer1-rail__item.has-mobile-sub::after {
    content: ""; position: absolute; right: 18px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity: .55; transition: transform .18s ease;
  }
  .site-nav--open .layer1-rail__item.has-mobile-sub.is-expanded::after { transform: rotate(225deg); }
  .site-nav--open .l1-mobile-sub.is-open {
    display: block; padding: 2px 0 10px 12px; margin: 0 8px 4px;
    border-left: 2px solid rgba(255,255,255,.14);
  }
  .site-nav--open .l1-mobile-grp {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255,255,255,.45); padding: 9px 12px 3px;
  }
  .site-nav--open .l1-mobile-leaf {
    display: block; padding: 8px 12px; font-size: 14px; line-height: 1.25;
    text-decoration: none; color: rgba(255,255,255,.86); border-radius: 8px;
  }
  .site-nav--open .l1-mobile-leaf:hover, .site-nav--open .l1-mobile-leaf:active { color: #fff; background: rgba(255,255,255,.07); }
  .site-nav--open .l1-mobile-leaf--overview { font-weight: 600; color: #fff; }
}

/* "PROSPECT / AAA" chip on board name cells — honest cue that a thin-MLB-sample
   young player is ranking on upside (06-19 audit P0: Bazzana/Murakami top-13 as
   if MLB stars). Amber = "heads-up, unproven". Display-only, no rank change. */
/* Typography audit: the flagship board's column headers (#tableHead th) render
   at 10.5px — below the legibility floor for the primary scannable headers on a
   data product. Bump to 11.5px with tighter tracking (offsets the width growth
   so the dense multi-column board doesn't overflow). Desktop only — the ≤560px
   mobile board has its own header rules. */
@media (min-width: 561px) {
  #tableHead th { font-size: 11.5px; letter-spacing: 0.06em; }
}

.milb-level-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .02em;
  line-height: 15px; vertical-align: middle; white-space: nowrap;
  background: color-mix(in srgb, var(--gold, #d98324) 16%, transparent);
  color: #8a5614;
}

/* ── Player News (injury-news page) filter + sort toolbar ─────────────────── */
.inews-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 6px; }
.inews-filter { display:inline-flex; gap:7px; flex-wrap:wrap; }
.inews-fchip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--hairline,#d8d6cf); border-radius:999px; background:var(--surface,#fff); color:var(--text,#15283e); font:600 12.5px/1 inherit; cursor:pointer; transition:background .14s,border-color .14s,color .14s; }
.inews-fchip:hover { border-color:var(--text-3,#374b62); }
.inews-fchip.is-on { background:#0f2a47; border-color:#0f2a47; color:#fff; }
.inews-fchip__n { font:700 10.5px/1 var(--font-mono,monospace); padding:2px 5px; border-radius:999px; background:rgba(15,42,71,.08); color:var(--text-2,#2f4a64); letter-spacing:.02em; }
.inews-fchip.is-on .inews-fchip__n { background:rgba(255,255,255,.22); color:#fff; }
.inews-sort { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border:1px solid var(--hairline,#d8d6cf); border-radius:999px; background:var(--surface,#fff); color:var(--text-2,#2f4a64); font:600 12.5px/1 inherit; cursor:pointer; transition:border-color .14s,color .14s; }
.inews-sort:hover { border-color:var(--text-3,#374b62); color:var(--text,#15283e); }
.inews-empty { padding:34px 16px; text-align:center; color:var(--text-3,#374b62); font-size:13.5px; }

/* ── Managr vs Market — fill the grid-equalized card (no empty space below) ──
   The card is a flex column and is stretched to match the taller Player News card
   next to it. Let the .hv2-edge two-column body grow to fill, and distribute each
   column's rows so they span the full height; the footnote stays pinned below. */
.hv2-card__body:has(> .hv2-edge) { flex: 1 1 auto; display: flex; flex-direction: column; }
.hv2-card__body:has(> .hv2-edge) > .hv2-edge { flex: 1 1 auto; }
.hv2-edge__col { display: flex; flex-direction: column; justify-content: space-between; }

/* ── About Managr — story-driven dark closer at the bottom of the home ─────── */
/* Tight editorial column: photo floats left, copy wraps around it (hugging the
   circle via shape-outside), box sized to fit the content (no empty blue). */
.hv2-about { margin: 0; height: 100%; border-radius: 18px; overflow: hidden;
  background: radial-gradient(135% 150% at 0% 0%, #173a5e 0%, #0c1f38 55%, #091829 100%);
  box-shadow: var(--shadow-2, 0 10px 30px rgba(9,24,41,.18)); }
.hv2-about__inner { padding: clamp(26px, 3.5vw, 38px) clamp(22px, 3.2vw, 34px); }
.hv2-about__inner::after { content: ''; display: block; clear: both; }
.hv2-about__portrait { float: left; width: 150px; height: 150px; margin: 4px 24px 12px 0;
  border-radius: 50%; shape-outside: circle(50%); shape-margin: 14px;
  background: transparent; border: 0; box-shadow: none; overflow: hidden; }
.hv2-about__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.hv2-about__eyebrow { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; margin-bottom: 14px;
  font: 700 11px/1 'Geist', system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; color: #9db4c9; }
.hv2-about__quote { margin: 0 0 18px; border: 0; padding: 0;
  font: 600 clamp(19px, 2.7vw, 24px)/1.32 'Geist', system-ui, sans-serif; letter-spacing: -.01em; color: #f2f7fc; }
.hv2-about__body p { margin: 0 0 13px; font-size: 15px; line-height: 1.66; color: #c2d3e4; }
.hv2-about__body b { color: #fff; font-weight: 600; }
.hv2-about__sub { clear: left; margin: 20px 0 11px;
  font: 700 12px/1 'Geist', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7fa7cf; }
.hv2-about__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.hv2-about__chip { padding: 7px 13px; border-radius: 999px;
  font: 600 12.5px/1 'Geist', system-ui, sans-serif; color: #d3e2f1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); }
.hv2-about__sign { clear: left; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px; line-height: 1.6; color: #9db4c9; }
@media (max-width: 560px) {
  .hv2-about__portrait { width: 96px; height: 96px; margin: 3px 16px 8px 0; shape-margin: 10px; }
}

/* ── About + Feedback two-up row (left story, right form), full-width fit ──── */
.hv2-aboutrow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px; margin: 28px 0 6px; align-items: stretch; }
.hv2-fb { border-radius: 18px; overflow: hidden; display: flex;
  background: radial-gradient(135% 150% at 100% 0%, #3b4049 0%, #262930 55%, #1b1d22 100%);
  box-shadow: var(--shadow-2, 0 10px 30px rgba(9,24,41,.18)); }
.hv2-fb__inner { display: flex; flex-direction: column; width: 100%;
  padding: clamp(26px, 3.5vw, 38px) clamp(22px, 3.2vw, 34px); }
.hv2-fb__title { margin: 0 0 8px; letter-spacing: -.01em; color: #f2f7fc;
  font: 600 clamp(19px, 2.7vw, 24px)/1.2 'Geist', system-ui, sans-serif; }
.hv2-fb__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #c2d3e4; }
.hv2-fb__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
/* !important throughout: a broad global rule
   (button:not(.inner-tab)…:hover { background: var(--bg-tinted) }, specificity
   0,5,1) otherwise wins and turns the chip light grey on hover/click, hiding
   the selected state. */
.hv2-fb__cat { padding: 7px 13px; border-radius: 999px; cursor: pointer; color: #cfe0f0 !important;
  font: 600 12.5px/1 'Geist', system-ui, sans-serif;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18) !important;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.hv2-fb__cat:hover { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.3) !important; }
.hv2-fb__cat.is-on,
.hv2-fb__cat.is-on:hover { background: #2f6fed !important; border-color: #2f6fed !important; color: #fff !important;
  box-shadow: 0 0 0 3px rgba(47,111,237,.30) !important; }
.hv2-fb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
/* !important on bg/border/color: a global `input[type="text"] {…}` rule (higher
   specificity than this class) was tinting the Subject field light while Email
   (type=email) + the textarea stayed dark — inconsistent. Force them identical. */
.hv2-fb__in, .hv2-fb__ta { width: 100%; box-sizing: border-box; color: #eaf2fa !important;
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 10px;
  padding: 10px 12px; font: 500 14px/1.45 'Geist', system-ui, sans-serif; }
/* !important to beat the global `input::placeholder{color:#5a5650!important}`
   (~polish.css 8643) — a warm taupe meant for light inputs that was tinting
   these dark-panel placeholders brown. */
.hv2-fb__in::placeholder, .hv2-fb__ta::placeholder { color: #8aa1b6 !important; opacity: 1; }
.hv2-fb__subject { margin: 0 0 10px; }
/* Keep Chrome autofill on-theme (it otherwise paints name/email fields a pale
   colour over the dark panel). */
.hv2-fb__in:-webkit-autofill, .hv2-fb__in:-webkit-autofill:hover,
.hv2-fb__in:-webkit-autofill:focus, .hv2-fb__ta:-webkit-autofill {
  -webkit-text-fill-color: #eaf2fa !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(18,38,64,.96) inset !important;
  caret-color: #eaf2fa;
  transition: background-color 9999s ease 0s;
}
.hv2-fb__in:focus, .hv2-fb__ta:focus { outline: none; border-color: var(--brand) !important; background: rgba(255,255,255,.08) !important; }
.hv2-fb__ta { flex: 1 1 auto; min-height: 132px; resize: vertical; margin: 0 0 12px; display: block; }
.hv2-fb__in.is-err, .hv2-fb__ta.is-err { border-color: #e06a6a; }
.hv2-fb__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.hv2-fb__note { font-size: 12px; color: #8aa1b6; }
.hv2-fb__note.is-err { color: #f0a3a3; }
.hv2-fb__send { padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; color: #fff;
  font: 700 13.5px/1 'Geist', system-ui, sans-serif; background: var(--brand);
  transition: filter .15s, transform .05s; }
.hv2-fb__send:hover { filter: brightness(1.08); }
.hv2-fb__send:active { transform: translateY(1px); }
.hv2-fb__send:disabled { opacity: .6; cursor: default; }
.hv2-fb__done { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.hv2-fb__check { width: 42px; height: 42px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; margin: 14px 0; }
@media (max-width: 820px) { .hv2-aboutrow { grid-template-columns: 1fr; } }

/* ── Profile panel: email-preference toggles + newsletter ─────────────────── */
.managr-field--inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.managr-field--inline label { margin: 0; }
.managr-field--inline .managr-input { width: auto; min-width: 150px; }
.managr-prefgrid { display: flex; flex-direction: column; }
.managr-prefgrid.is-disabled { opacity: .45; pointer-events: none; }
.managr-tog { display: flex; align-items: center; gap: 12px; padding: 11px 0; cursor: pointer;
  border-top: 1px solid var(--rule, rgba(12,31,56,.08)); }
.managr-tog--master { border-top: 0; padding-top: 2px; }
.managr-tog__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.managr-tog__lbl { font-weight: 600; font-size: 13.5px; color: var(--ink, #0c1f38); }
.managr-tog__sub { font-size: 12px; line-height: 1.35; color: var(--text-3, #64748b); }
.managr-tog input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.managr-tog__sw { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: rgba(12,31,56,.20); position: relative; transition: background .16s; }
.managr-tog__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .16s; }
.managr-tog input:checked ~ .managr-tog__sw { background: var(--brand, #1d5fa7); }
.managr-tog input:checked ~ .managr-tog__sw::after { transform: translateX(16px); }
.managr-tog input:focus-visible ~ .managr-tog__sw { outline: 2px solid var(--brand, #1d5fa7); outline-offset: 2px; }
.managr-news { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.managr-news__on, .managr-news__off { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2, #20384f); }
.managr-news__check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand, #1d5fa7); color: #fff; font-size: 12px; font-weight: 700; }
.managr-btn--ghost { background: transparent; border: 1px solid var(--rule, rgba(12,31,56,.18)); color: var(--text-2, #20384f); }
.managr-btn--ghost:hover { background: rgba(12,31,56,.04); }

/* ── Profile panel: email plan tiers + sub-heading ───────────────────────── */
.managr-subh { margin: 16px 0 6px; font: 700 11px/1 'Geist', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #64748b); }
.managr-plan { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.managr-plan__tier { border: 1px solid var(--rule, rgba(12,31,56,.10)); border-radius: 12px;
  padding: 11px 13px; background: var(--surface, #fff); opacity: .62; transition: opacity .15s, border-color .15s; }
.managr-plan__tier.is-on { opacity: 1; border-color: rgba(29,95,167,.35); background: rgba(29,95,167,.05); }
.managr-plan__hd { display: flex; align-items: center; gap: 8px;
  font: 700 13px/1.2 'Geist', system-ui, sans-serif; color: var(--ink, #0c1f38); }
.managr-plan__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(12,31,56,.25); flex: 0 0 auto; }
.managr-plan__tier.is-on .managr-plan__dot { background: var(--brand, #1d5fa7); }
.managr-plan__tag { margin-left: auto; font: 700 10px/1 'Geist', system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  color: var(--text-3, #64748b); background: rgba(12,31,56,.06); }
.managr-plan__tag.is-on { color: #fff; background: var(--brand, #1d5fa7); }
.managr-plan__list { margin: 8px 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.managr-plan__list li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--text-2, #20384f); }
.managr-plan__list li::before { content: '›'; position: absolute; left: 2px; top: -1px; color: var(--brand, #1d5fa7); font-weight: 700; }
.managr-plan__cta:not(:empty) { margin-top: 8px; font-size: 12px; color: var(--brand, #1d5fa7); font-weight: 600; }

/* Feedback inputs are now a consistent full-width stack (no 2-col row). */
.hv2-fb__in { margin: 0 0 10px; }

/* Sign-in modal: forgot-password link (audit P1 — recovery from the sign-in tab) */
.managr-auth-forgot { margin: -4px 0 10px; text-align: right; }
.managr-auth-link { background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 12.5px/1 'Geist', system-ui, sans-serif; color: var(--brand, #1d5fa7); }
.managr-auth-link:hover { text-decoration: underline; }

/* Ranking boards: the name column carries a uniform team-color chip beside the
   name, so give it a touch more room than the shared 210px cap — and make it the
   SAME width on every board so the columns line up. Scoped to the ranking
   surfaces (redraft/dynasty live in #rankingsPanel, prospects in
   #fantasyProspectsBody); other .table-wrap tables keep 210px. */
#rankingsPanel .table-wrap table thead th:nth-child(2),
#rankingsPanel .table-wrap table tbody td:nth-child(2),
#fantasyProspectsBody .table-wrap table thead th:nth-child(2),
#fantasyProspectsBody .table-wrap table tbody td:nth-child(2) {
  min-width: 236px;
  max-width: 236px;
}
/* Team code beside a player name: just the abbreviation in the team's color —
   no chip, no background, no border. Color is set inline per team. */
.team-code {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  vertical-align: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Position as color-coded text on the ranking boards (the team-code treatment,
   for positions). Slightly larger than the team code since POS is its own
   primary column rather than a sub-label beside the name. */
.pos-code {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* FYPD board POS → color-coded text (inline color set per row), not a gray
   pill — matches the other ranking boards' position-as-text treatment. */
.fypd-card__pos, .fypd-row__pos {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-weight: 700 !important;
}
/* Projection boards carry many columns (PosRank + Redraft + the p10–p90
   percentile spread + Bust/Elite/Inj), so the table is wider than its card.
   Let it scroll horizontally INSIDE the card instead of overflowing the page
   with no scrollbar (the right-most columns were unreachable). #subPageLanding
   is a content-sized flex item, so it must be allowed to shrink below the
   table's intrinsic width for the inner overflow-x to engage. #subPageLanding
   sits in a flex-COLUMN .page and has `margin:0 auto`, so it's content-sized
   (auto cross-margins beat align stretch) and grows past the viewport with no
   scrollbar. Pin it to the page width (capped by its existing max-width:1320)
   so the table scrolls inside instead. Scoped to subpages with a projection
   table (#proj-<key>-table). */
#subPageLanding:has(div[id^="proj-"][id$="-table"]) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#subPageLanding:has(div[id^="proj-"][id$="-table"]) .card,
div[id^="proj-"][id$="-table"] { min-width: 0; }
div[id^="proj-"][id$="-table"] .sub-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The wrap is now a scroll context, so a position:sticky thead pins to it and
   paints as a detached/doubled header bar. Sticky-to-page can't coexist with
   horizontal scroll anyway — make the header static for a clean single row. */
div[id^="proj-"][id$="-table"] .sub-table thead th { position: static; }

/* Prospect filter chips → match the redraft/dynasty position tabs: clean
   transparent pills with a dark active fill. (Now that the prospect board is in
   a .card, the card-button styling otherwise gives the chips a light slate box
   and swallows the active state — the redraft .pos-tab escapes the same rule
   with !important, so we do too.) Scoped to the prospect board. */
#fantasyProspectsBody .fpr-chip {
  background: transparent !important;
  border-color: transparent !important;
  padding: 7px 14px;
}
#fantasyProspectsBody .fpr-chip:hover {
  background: var(--bg-soft, rgba(15, 23, 42, .06)) !important;
  color: var(--text-1, #14110b);
}
#fantasyProspectsBody .fpr-chip.is-active {
  background: var(--sv-ink, #0f172a) !important;
  border-color: var(--sv-ink, #0f172a) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   MODEL HEALTH — flight deck (premium /build pass, 2026-06-29)
   Elevates the ops dashboard within the managr token system. Theme-aware
   (light/dark/sepia via var() tokens). Display-only; GPU-safe motion only.
   ════════════════════════════════════════════════════════════════════ */
.mh { max-width: 1180px; }
.mh__hero { display: flex; flex-direction: column; gap: 11px; margin: 2px 0 24px; }
.mh__eyebrow { align-self: flex-start; font-family: var(--font); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 999px; padding: 5px 12px; }
.mh__title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 43px); font-weight: 680;
  letter-spacing: -.025em; line-height: 1.02; color: var(--text-1); margin: 0; }
.mh__status { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.mh__status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
.mh__lede { font-size: 13px; color: var(--text-3); max-width: 64ch; line-height: 1.5; margin: 0; }

.mh-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 13px; margin: 0 0 22px; }
.mh-tile { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 14px;
  border-radius: 15px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--ink) 22%, transparent);
  overflow: hidden; transition: transform .45s cubic-bezier(.32,.72,0,1), box-shadow .45s cubic-bezier(.32,.72,0,1);
  animation: mh-rise .55s cubic-bezier(.32,.72,0,1) both; }
.mh-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--mh-acc, var(--text-3)); }
.mh-tile:hover { transform: translateY(-3px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--ink) 30%, transparent); }
.mh-tile__k { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mh-tile__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mh-acc, var(--text-3)); flex: 0 0 auto; }
.mh-tile__v { font-family: var(--font-display); font-size: 20px; font-weight: 640; letter-spacing: -.02em; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.05; }
.mh-tile__s { font-size: 11px; color: var(--text-3); line-height: 1.35; font-variant-numeric: tabular-nums; }
.mh-tile--ok { --mh-acc: var(--green); } .mh-tile--warn { --mh-acc: var(--gold); }
.mh-tile--bad { --mh-acc: var(--red); } .mh-tile--na { --mh-acc: var(--text-3); }

.mh-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px; padding: 18px 20px; margin: 0 0 13px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--ink) 24%, transparent);
  animation: mh-rise .55s cubic-bezier(.32,.72,0,1) both; }
.mh-card__h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 13px; font-weight: 620; color: var(--text-1); margin: 0 0 11px; }
.mh-card__h::before { content: ""; width: 5px; height: 14px; border-radius: 3px; background: var(--accent); }
.mh-card p, .mh-card li { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0; }
.mh-card ul { margin: 6px 0 0; padding-left: 18px; }
.mh-card code { font-size: 11.5px; background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 1px 5px; border-radius: 4px; }
.mh-card a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); transition: border-color .2s; }
.mh-card a:hover { border-bottom-color: var(--accent); }
.mh-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.mh-warn { color: var(--gold); } .mh-good { color: var(--green); }

.mh-spark { display: flex; gap: 2px; align-items: flex-end; height: 48px; margin-top: 6px; }
.mh-spark i { flex: 1; background: color-mix(in srgb, var(--accent) 76%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; transition: background .2s; }
.mh-spark i:hover { background: var(--accent); }
.mh-meta { font-size: 11px; color: var(--text-3); margin-top: 4px; }
/* Elevate the existing .sub-section blocks (accuracy/data-health pages) to the
   premium card language when wrapped in .mh — no per-section markup changes. */
.mh .sub-section { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px; padding: 18px 20px; margin: 0 0 13px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--ink) 24%, transparent);
  animation: mh-rise .55s cubic-bezier(.32,.72,0,1) both; }
.mh .sub-section__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: 13px; font-weight: 620; color: var(--text-1); margin: 0 0 11px; }
.mh .sub-section__title::before { content: ""; width: 5px; height: 14px; border-radius: 3px; background: var(--accent); }
.mh .sub-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.mh .sub-section table { font-size: 12.5px; }

.mh-ts { font-size: 11px; color: var(--text-3); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.mh-movers { display: flex; flex-wrap: wrap; gap: 22px; }
.mh-movers__col { flex: 1 1 230px; min-width: 200px; }
.mh-movers__t { font-size: 11px; font-weight: 620; color: var(--text-2); margin-bottom: 6px; }
.mh-mtab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.mh-mtab td { padding: 3px 8px 3px 0; vertical-align: middle; }
.mh-mtab td:first-child { max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.mh-mtab .mh-mval { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-up { color: var(--green); } .mh-down { color: var(--red); }
.mh-chip { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.mh-chip--injury { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mh-chip--role { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mh-chip--refresh { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.mh-legend { font-size: 10.5px; color: var(--text-3); margin-top: 11px; line-height: 1.55; }

.mh-strip .mh-tile:nth-child(2){animation-delay:.05s} .mh-strip .mh-tile:nth-child(3){animation-delay:.09s}
.mh-strip .mh-tile:nth-child(4){animation-delay:.13s} .mh-strip .mh-tile:nth-child(5){animation-delay:.17s}
.mh-strip .mh-tile:nth-child(6){animation-delay:.21s} .mh-strip .mh-tile:nth-child(7){animation-delay:.25s}
@keyframes mh-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mh-tile, .mh-card { animation: none; } .mh-tile { transition: none; } }
.mh-back { align-self: flex-start; font-size: 11px; font-weight: 500; color: var(--text-3); text-decoration: none; transition: color .2s; }
.mh-back:hover { color: var(--accent); }
.mh__status--ok { color: var(--green); } .mh__status--warn { color: var(--gold); } .mh__status--bad { color: var(--red); }
@media (max-width: 760px) { .mh { max-width: 100%; } .mh__title { font-size: 27px; } .mh-movers { gap: 16px; } }

/* ════════════════════════════════════════════════════════════════════
   SIMULATION LAB — premium (/build pass, 2026-06-29). Reuses the Model
   Health design language (.mh__hero / .mh-card) + a scoped .sim-* layer
   for the interactive surface (segmented tabs, probability bars, odds,
   stat blocks). Theme-token based; display-only.
   ════════════════════════════════════════════════════════════════════ */
.sim { max-width: 1160px; }
.sim select { font-family: var(--font); font-size: 12px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--surface); color: var(--text-1); }
.sim__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; }
.sim-sel { font-size: 12px; color: var(--text-2); }
.sim-legend { font-size: 11px; color: var(--text-3); display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sim-legend .chip { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.sim-legend .chip--ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.sim-legend .chip--exp { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.sim-demo { font-size: 11px; color: var(--text-3); margin: 8px 0 0; }
.sim-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 15px 0 16px; padding: 4px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent); width: max-content; max-width: 100%; }
.sim-tab { font-family: var(--font); font-size: 12px; font-weight: 540; padding: 7px 13px; border-radius: 9px; border: none;
  background: transparent; color: var(--text-2); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.sim-tab:hover { color: var(--text-1); }
.sim-tab[aria-selected="true"] { background: var(--surface); color: var(--accent); font-weight: 620;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--ink) 22%, transparent); }
.sim-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sim-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--text-2); }
.sim-odds { font-family: var(--font-display); font-size: 26px; font-weight: 680; letter-spacing: -.02em; color: var(--text-1); font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.sim-odds small { font-size: 13px; font-weight: 500; color: var(--text-2); }
.sim-delta-pos { color: var(--green); font-weight: 650; } .sim-delta-neg { color: var(--red); font-weight: 650; }
.sim-vs { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sim-vs strong { min-width: 110px; font-size: 13px; }
.sim-vs strong.r { text-align: right; }
.sim-vs__track { flex: 1; height: 15px; border-radius: 8px; background: color-mix(in srgb, var(--red) 72%, transparent); position: relative; overflow: hidden; }
.sim-vs__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 8px 0 0 8px; }
.sim-mini { display: inline-block; width: 46px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.sim-mini > i { display: block; height: 100%; border-radius: 4px; }
.sim-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px; }
.sim-stat__l { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.sim-stat__v { font-family: var(--font-display); font-size: 21px; font-weight: 640; color: var(--text-1); font-variant-numeric: tabular-nums; }
.sim-elbl { margin-top: 13px; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.sim-names { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.sim-note { font-size: 11px; color: var(--text-3); margin: 8px 0 0; line-height: 1.5; }
.sim-mine { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sim-you { font-size: 10px; color: var(--accent); font-weight: 600; }
.sim-mut { color: var(--text-3); }
@media (max-width: 760px) { .sim { max-width: 100%; } .sim-tabs { width: 100%; } }
/* Clear the fixed Shell-B rail on the Sim Lab route (desktop only), mirroring the
   rankings-family reflow. Scoped to .page:has(.sim) so ONLY this page is affected;
   mobile keeps full width (the rail auto-hides ≤768px). Display/layout only. */
@media (min-width: 769px) {
  .page:has(.sim) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: calc(var(--shell-left-rail-w, 250px) + 24px) !important; padding-right: 24px !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .page:has(.sim) { padding-left: calc(var(--shell-left-rail-w, 250px) + 16px) !important; padding-right: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   RANKINGS BOARD CHROME — premium polish (/build pass, 2026-06-29).
   Scoped to the rankings containers; CHROME ONLY (header, controls,
   toolbar, table container, chips) — NEVER touches table rows/cells/
   ordering/logic. Display-only.
   ════════════════════════════════════════════════════════════════════ */
.card-header[data-view="rankings"] .card-header__title { font-family: var(--font-display); font-weight: 680; letter-spacing: -.022em; }
.card-header[data-view="rankings"] #rankExportBtn { transition: background .18s, border-color .18s, color .18s; }
.card-header[data-view="rankings"] #rankExportBtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* decision toolbar (modes + risk filters) — clean band atop the table card */
.rk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 11px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.rk-toolbar__lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.rk-toolbar__sep { width: 1px; height: 16px; background: color-mix(in srgb, var(--ink) 12%, transparent); margin: 0 3px; }
.rk-pill { font-family: var(--font); font-size: 12px; font-weight: 540; padding: 4px 11px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: var(--surface); color: var(--text-2);
  cursor: pointer; transition: background .18s cubic-bezier(.32,.72,0,1), color .18s, border-color .18s, box-shadow .18s; white-space: nowrap; }
.rk-pill:hover { color: var(--text-1); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.rk-pill[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 620; border-color: var(--accent);
  box-shadow: 0 2px 9px -3px color-mix(in srgb, var(--accent) 65%, transparent); }
.rk-pill--filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); box-shadow: 0 2px 9px -3px color-mix(in srgb, var(--gold) 60%, transparent); }
.rk-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* table card depth */
#tableWrap.table-wrap { border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 16px 36px -24px color-mix(in srgb, var(--ink) 32%, transparent); }
/* position tabs — refined hover (leave existing active state) */
body[data-route="rankings"] #rankingsPanel .pos-tab { transition: color .18s, background .18s; }
body[data-route="rankings"] #rankingsPanel .pos-tab:not(.active):hover { color: var(--text-1); background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* risk chips → premium tinted pills (currentColor = the chip's own status color) */
#tableBody .rt-tag { font-weight: 600; padding: 1.5px 7px; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); }
@media (max-width: 760px) { .rk-toolbar { padding: 9px 12px; gap: 5px; } }

/* ════════════════════════════════════════════════════════════════════
   MY FANTASY (dashboard workspace) CHROME — premium polish (/build pass).
   Scoped to body[data-route="dashboard"] + a small .mf-* layer. Display-only;
   no team / lineup / scoring logic touched.
   ════════════════════════════════════════════════════════════════════ */
body[data-route="dashboard"] .ws-section__title { font-family: var(--font-display); font-weight: 640; letter-spacing: -.015em; }
body[data-route="dashboard"] .ws-metric { transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); }
body[data-route="dashboard"] a.ws-metric:hover, body[data-route="dashboard"] .ws-metric:hover { transform: translateY(-2px); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 26px -15px color-mix(in srgb, var(--ink) 30%, transparent); }
body[data-route="dashboard"] .ws-metric__value { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
body[data-route="dashboard"] a.ws-row { transition: background .2s, border-color .2s, transform .2s; }
body[data-route="dashboard"] a.ws-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-route="dashboard"] .ws-section__action { color: var(--accent); font-weight: 600; }
body[data-route="dashboard"] .ws-row__badge--accent { background: var(--accent); color: #fff; font-weight: 650; letter-spacing: .04em; }
/* My Team cold-start card */
.mf-coldstart { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
  background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 12px 28px -20px color-mix(in srgb, var(--ink) 26%, transparent); }
.mf-coldstart__t { font-family: var(--font-display); font-weight: 620; font-size: 15px; color: var(--text-1); }
.mf-coldstart__d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.45; max-width: 54ch; }
@media (max-width: 760px) { .mf-coldstart { padding: 14px; } }

/* ════════════════════════════════════════════════════════════════════
   RESEARCH TOOLS CHROME — premium polish (/build pass, 2026-06-29).
   Scoped to body[data-route="research"]; polishes the SHARED chrome classes
   (tool headers, explainer/sub-section cards, empty states, controls) with NO
   per-tool markup changes and WITHOUT touching dense data tables. Display-only.
   ════════════════════════════════════════════════════════════════════ */
body[data-route="research"] .sub-hero__title { font-family: var(--font-display); font-weight: 680; letter-spacing: -.022em; }
body[data-route="research"] .sub-hero__eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .14em; }
/* explainer + sub-section cards → premium depth + accent-tick header */
body[data-route="research"] .expl-card,
body[data-route="research"] .sub-section { border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--ink) 24%, transparent); }
body[data-route="research"] .expl-card__label,
body[data-route="research"] .sub-section__title { font-family: var(--font-display); font-weight: 620; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
body[data-route="research"] .expl-card__label::before,
body[data-route="research"] .sub-section__title::before { content: ""; width: 5px; height: 14px; border-radius: 3px; background: var(--accent); flex: 0 0 auto; }
body[data-route="research"] .sub-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
/* empty state → composed, centered dashed panel */
body[data-route="research"] .sub-empty { border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 14px;
  padding: 26px 22px; text-align: center; color: var(--text-3); background: color-mix(in srgb, var(--ink) 2%, transparent); font-size: 13px; }
/* controls: selects / inputs / filter chips */
body[data-route="research"] select,
body[data-route="research"] input[type="text"], body[data-route="research"] input[type="search"], body[data-route="research"] input[type="number"] {
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); transition: border-color .18s, box-shadow .18s; }
body[data-route="research"] select:focus, body[data-route="research"] input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
body[data-route="research"] .hv2-posfilter button:hover { color: var(--accent); }
@media (max-width: 760px) { body[data-route="research"] .expl-card, body[data-route="research"] .sub-section { border-radius: 12px; } }

/* ════════════════════════════════════════════════════════════════════
   OPERATIONS + DRAFT WIZARD CHROME — premium polish (/build pass, 2026-06-29).
   Scoped to the two routes; polishes the shared shell header (.prospects-main),
   .ops-section cards, empty states, buttons, controls. Display-only — no team /
   draft / projection logic touched; dense tables untouched.
   ════════════════════════════════════════════════════════════════════ */
body[data-route="operations"] .prospects-main__title, body[data-route="draft-wizard"] .prospects-main__title,
body[data-route="operations"] .sub-hero__title, body[data-route="draft-wizard"] .sub-hero__title { font-family: var(--font-display); font-weight: 680; letter-spacing: -.022em; }
body[data-route="operations"] .prospects-main__eyebrow, body[data-route="draft-wizard"] .prospects-main__eyebrow,
body[data-route="operations"] .sub-hero__eyebrow, body[data-route="draft-wizard"] .sub-hero__eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .14em; }
body[data-route="operations"] .ops-section, body[data-route="draft-wizard"] .ops-section { box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--ink) 22%, transparent); }
body[data-route="operations"] .ops-section__head h2, body[data-route="operations"] .ops-section__head h3,
body[data-route="draft-wizard"] .ops-section__head h2, body[data-route="draft-wizard"] .ops-section__head h3 { font-family: var(--font-display); letter-spacing: -.01em; }
body[data-route="operations"] .ops-empty__title { font-family: var(--font-display); font-weight: 640; }
body[data-route="operations"] .ops-btn, body[data-route="draft-wizard"] .ops-btn { transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .2s, background .2s, border-color .2s; }
body[data-route="operations"] .ops-btn:hover, body[data-route="draft-wizard"] .ops-btn:hover { transform: translateY(-1px); }
body[data-route="operations"] select, body[data-route="draft-wizard"] select,
body[data-route="operations"] input[type="text"], body[data-route="draft-wizard"] input[type="text"],
body[data-route="operations"] input[type="number"], body[data-route="draft-wizard"] input[type="number"] {
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); transition: border-color .18s, box-shadow .18s; }
body[data-route="operations"] select:focus, body[data-route="draft-wizard"] select:focus,
body[data-route="operations"] input:focus, body[data-route="draft-wizard"] input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
@media (max-width: 760px) { body[data-route="operations"] .ops-section, body[data-route="draft-wizard"] .ops-section { border-radius: 12px; } }

/* ════════════════════════════════════════════════════════════════════
   BUY LOW / SELL HIGH (risers) CHROME — premium polish (/build pass, 2026-06-29).
   Scoped to body[data-route="risers"]; display-only. Table now sorts by the
   visible Score (app.js) — this just refines the chrome. Dense rows untouched.
   ════════════════════════════════════════════════════════════════════ */
body[data-route="risers"] .sub-hero__title { font-family: var(--font-display); font-weight: 680; letter-spacing: -.022em; }
body[data-route="risers"] .sub-hero__eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .14em; }
body[data-route="risers"] .rf-bucket { font-family: var(--font-display); letter-spacing: -.01em; }
body[data-route="risers"] .table-wrap { border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 16px 36px -24px color-mix(in srgb, var(--ink) 32%, transparent); }
body[data-route="risers"] .rf-grade-chip { font-variant-numeric: tabular-nums; font-weight: 700; }
body[data-route="risers"] .rf-pill { transition: background .18s, color .18s, border-color .18s; }
body[data-route="risers"] .rf-pill:hover:not(.is-active) { color: var(--text-1); }
body[data-route="risers"] .rf-scorebar__note { color: var(--text-3); }