/* ===========================================================
   Wonka Resolve — restyled 2026-06-03 to the physics_detector
   design system (deep purple shell + gold accent + system sans
   + lowercase UI labels + soft-glow CTAs). All class selectors
   preserved 1:1; JS bindings unchanged.

   Original Billy-Wonka light/serif tokens kept as LEGACY ALIASES
   below so the bespoke section styles (rec rows, slot needs,
   weight bars, snake tiles, etc. — ~3000 lines of CSS) cascade
   through the new palette without a wholesale rewrite.

   Design system source: D:/physics_detector/web/marketing/
                         assets/tokens.css (+ base.css + shell.css)
   =========================================================== */

:root {
  /* — physics_detector tokens (canonical) — */
  --bg-page:        #1A1124;
  --bg-raised:      #1E1430;
  --bg-sidebar:     #211734;
  --bg-card:        #251A38;
  --bg-inset:       #2F2247;
  --bg-elevated:    #2A1E40;
  --bg-code:        #15101F;
  --border:         #3B2C55;
  --border-dashed:  #4A3968;

  --text-primary:   #EAE4D8;
  --text-secondary: #9A8DB4;
  --text-tertiary:  #8A7DA4;
  --text-faint:     #7A6E96;

  --gold:           #D4C282;
  --gold-hover:     #E0D199;
  --gold-text-soft: #C9BE9A;
  --on-gold:        #1A1124;

  --cta-bg:         #6E45B0;
  --cta-rest-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  --cta-glow:       0 3px 12px rgba(195, 139, 227, 0.55);

  --verdict-real:   #93AB78;
  --verdict-ai:     #CC7D62;
  --verdict-abstain: #D4C282;

  --font-sans:   "Faculty Glyphic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-button: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-button: 8px;
  --radius-card:   12px;
  --radius-pill:   20px;

  /* — legacy aliases: map old Billy-Wonka tokens onto the new palette
       so all the bespoke per-section CSS that calls var(--accent),
       var(--paper), var(--ink-soft), etc. still resolves cleanly. — */
  --white:        var(--text-primary);
  --black:        var(--bg-page);
  --accent:       var(--gold);
  --light-accent: var(--bg-inset);
  --dark-accent:  var(--bg-sidebar);
  --olive:        #93AB78;            /* positive — bid */
  --coral:        #CC7D62;            /* caution — pass */
  --magenta:      #C38BE3;            /* high-conviction — snipe/follow */
  --orange:       #E89B3D;            /* keep for old high-attention pops */

  --ink-soft:     var(--text-secondary);
  --rule:         var(--border);

  /* heading/body fonts now identical (sans). Old var names kept so existing
     selectors don't all need rewriting. */
  --serif-head: var(--font-sans);
  --serif-body: var(--font-sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 0.4em;
  line-height: 1.15;
  color: var(--text-primary);
}
h2 { font-size: 1.55rem; font-weight: 700; color: var(--gold); }
h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold);
  margin-top: 1.4rem;
}

/* All button-styled elements use Chivo Mono (per font system 2026-06-04).
   Catches <button>, .rr-back-btn, .plan-regen-btn, .opp-unpin-btn,
   .yahoo-import-btn, plus any future *-btn class. */
button, .rr-back-btn, [class*="-btn"] {
  font-family: var(--font-button);
}

button {
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-dashed);
  background: transparent;
  color: var(--text-primary);
  padding: 7px 16px;
  border-radius: var(--radius-button);
  letter-spacing: .2px;
  transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .2s ease;
}
button:hover {
  border-color: var(--gold);
  color: var(--gold);
}
button.primary {
  background: var(--cta-bg);
  color: var(--gold);
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: var(--cta-rest-shadow);
  padding: 8px 18px;
}
button.primary:hover {
  background: var(--cta-bg);
  border: 0;
  color: var(--gold);
  box-shadow: var(--cta-glow);
}
button.ghost {
  border: 1px solid var(--border-dashed);
  background: transparent;
  color: var(--gold);
}
button.ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

input, select {
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-primary);
  padding: 7px 10px;
  border-radius: var(--radius-button);
}
/* Live-draft team-build dropdown gets the lighter-purple surface
   (per 2026-06-05 UI pass — easier to read against the dark page). */
#archetype-select {
  background: #3D2D5C;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 194, 130, 0.18);
}

/* ── Top bar ────────────────────────────────────────────── */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 26px;
  background: rgba(26, 17, 36, 0.92);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border-bottom: 0.5px solid var(--bg-inset);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.brand-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  font-style: normal;
  color: var(--gold);
  letter-spacing: .5px;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rr-link {
  margin-left: 16px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .4px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color .15s ease;
}
.rr-link:hover { color: var(--gold); }

/* Brand: clickable wordmark that returns to the app home (/) */
.brand-link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: .6px;
  line-height: 1;
  text-decoration: none;
  transition: color .15s ease;
}
.brand-link:hover { color: var(--gold-hover); }

/* Back-to-parent-site button — sits at the left edge of the topbar.
   Ghost-style with a left arrow, links to resolveresearcher.com. */
/* Resolve Research logo back-button — circular icon, no text. */
.rr-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.rr-back-btn::before { content: none; }
.rr-back-btn img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  display: block;
}
.rr-back-btn:hover { transform: scale(1.05); filter: brightness(1.08); }
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-style: normal;
  color: var(--text-secondary);
}
.dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
}

/* ── Top nav (cross-page links) ─────────────────────────── */

.topnav {
  display: flex;
  gap: 4px;
  margin-left: 20px;
  margin-right: auto;
}
.topnav-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: none;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.topnav-link:hover { color: var(--text-primary); background: var(--bg-elevated); }
.topnav-link.active {
  color: var(--gold);
  background: var(--bg-inset);
  border-color: transparent;
  font-weight: 600;
}

/* Phase 2 (brief 0.2): unified Draft page mode toggle bar. Sits under
   the topbar on both /draft (Auction) and /draft/snake (Snake) — the
   user can flip between them without losing session state. */
.draft-mode-bar {
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-subtle, var(--accent));
}
.draft-mode-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.55rem 1.5rem;
  background: transparent;
  border: 1px solid var(--text-secondary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.draft-mode-btn:first-child { border-radius: var(--radius-button) 0 0 var(--radius-button); border-right-width: 0; }
.draft-mode-btn:last-child  { border-radius: 0 var(--radius-button) var(--radius-button) 0; }
.draft-mode-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.draft-mode-btn.active {
  background: var(--gold);
  color: var(--bg-inset);
  border-color: var(--gold);
  cursor: default;
}

/* ── Layout ─────────────────────────────────────────────── */

.layout {
  display: grid;
  /* 2026-05-19: matched to the team-builder wrap pattern. Was
     `345px max-content 1fr` — the `max-content` center grew to fit the
     master-parity search-results table (~152em wide) and squeezed the
     1fr opponents panel to ~0px, making it visually disappear. Switched
     to `400px minmax(0, 1fr) minmax(0, 400px)` so the center stops
     growing at its track share and the .search-results-wrap inside
     scrolls horizontally instead. Same fix that wrapped the team-
     builder Targets + Roster panels. */
  grid-template-columns: 400px minmax(0, 1fr) minmax(0, 400px);
  gap: 1.2rem;
  padding: 1.2rem 1.8rem;
  min-height: calc(100vh - 64px - 100px);
}

.layout-predraft {
  /* 2026-05-19: minmax(0, …) on both flexible tracks so CSS Grid stops
     growing them to fit intrinsic content. Without these, the wide
     master-parity grids inside .sim-roster-wrap + .targets-wrap force
     the center + right tracks to ~1900px each, blowing the layout.
     With minmax(0, …) the grids scroll horizontally INSIDE their
     allocated tracks instead. Side columns lifted 280→400 / 360→400
     to give build picker + targets panel breathing room; center takes
     the full 1fr share between them (no half-screen cap). */
  grid-template-columns: 400px minmax(0, 1fr) minmax(0, 400px);
  min-height: calc(100vh - 64px);
}

/* ── Yahoo auth chip ───────────────────────────────────── */

.yahoo-auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-soft);
  transition: background 0.15s, border-color 0.15s;
}
.yahoo-auth-chip.hidden { display: none; }
.yahoo-auth-chip.yahoo-chip-off:hover {
  background: var(--light-accent);
  border-color: var(--accent);
  color: var(--gold);
}
.yahoo-auth-chip.yahoo-chip-on {
  background: var(--light-accent);
  border-color: var(--olive);
  color: var(--ink-soft);
  font-weight: 500;
}
.yahoo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  display: inline-block;
}
.yahoo-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: yahoo-toast-in 0.25s ease-out;
}
.yahoo-toast.ok {
  background: var(--olive);
  color: var(--white);
}
.yahoo-toast.deny {
  background: var(--coral);
  color: var(--white);
}
@keyframes yahoo-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Team Builder: position-slot needs ───────────────────── */

.slot-needs {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.6rem;
}
.slot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--white);
}
.slot-row[data-full="1"] {
  background: var(--light-accent);
  color: var(--ink-soft);
}
.slot-label {
  font-family: var(--serif-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.slot-row[data-full="1"] .slot-label {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}
.slot-count {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
/* Position-slot click-to-filter (open slots only) */
.slot-row.slot-clickable { cursor: pointer; }
.slot-row.slot-clickable:hover { background: var(--light-accent); }
.slot-row[data-active="1"] {
  background: var(--accent);
  border-color: var(--dark-accent);
  font-weight: 600;
}
.slot-row[data-active="1"] .slot-label,
.slot-row[data-active="1"] .slot-count { color: var(--black); font-style: normal; }
/* Active-filter chip at top of targets list */
.target-filter-chip {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.4rem;
  background: var(--accent);
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--black);
}
.tfc-clear {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.tfc-clear:hover { color: var(--coral); }
.target-filter-empty {
  list-style: none;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 0.4rem;
}

/* ── Pre-draft: weight vector ───────────────────────────── */

.weight-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.weight-list li {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.18rem 0;
}
.weight-cat {
  font-family: var(--serif-head);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.weight-bar {
  height: 6px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.weight-fill {
  height: 100%;
  background: var(--dark-accent);
}
.weight-fill.negative {
  background: var(--coral);
}
.weight-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-style: italic;
  color: var(--ink-soft);
}

/* ── Pre-draft: simulated roster ────────────────────────── */

/* Header row containing "your planned roster" + the "generate new
   roster" button (B14 2026-05-01 — replaces the alt-teams tab). */
.plan-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.plan-header-row h2 { margin: 0; }
.plan-regen-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.plan-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  background: var(--light-accent);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}
.plan-summary > div {
  display: flex;
  flex-direction: column;
}
.plan-summary .big-num {
  font-size: 1.5rem;
}

.sim-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 60px;
}
.sim-roster li.roster-row {
  /* Grid layout (display + grid-template-columns + gap) lives on
     `.sim-roster .roster-row-grid` below — shared with the header +
     team-avg rows so all three line up like a real table. The legacy
     6-col grid-template that used to live here was silently winning
     the specificity battle (0,2,1 vs 0,2,0) and forcing JS-appended
     columns 7-9 (EGP, EPGP, ×) onto auto-placed wrap rows where the
     × button bloated to the full row width. (2026-05-09)              */
  align-items: baseline;
  padding: 0.45rem 0.4rem;
  border-bottom: 1px dotted var(--rule);
  border-radius: 4px;
  transition: background 100ms ease, transform 80ms ease;
}

/* Homie 2026-05-03 — roster as a table with EXPLICIT columns.
   2026-05-18: × moved from row-end to position 2 (right after the drag
   handle, immediately left of the player name) so it's adjacent to the
   grab area for fast removal. New order:
     handle | × | player | exp$ | ev$ | team·pos | fit | egp | epgp
   Shared grid-template-columns across header / team-avg / row so they
   align like a real table. .num-col is right-aligned tabular-numeric.
   Falls back gracefully on narrow screens (still scrolls horizontally
   inside the panel). */
:root {
  /* Scope B 2026-05-18: extended past the original 9-col layout to
     include the full master-parity column set — GP / REL / Pure $ /
     Yahoo $ / Inj / Role / Tank / Vol Wt / Top Build, then 10 per-cat
     letter grades, then 10 per-cat raw numbers. Total: 39 columns.
     Wrap with .sim-roster-wrap (overflow-x: auto) for horizontal
     scroll on narrow viewports. */
  --roster-grid-cols:
    22px 28px minmax(110px, 1.5fr) 60px 60px minmax(80px, 0.9fr) 78px 50px 50px
    36px 36px 56px 56px 32px 32px 32px 68px minmax(120px, 1fr)
    32px 32px 32px 32px 32px 32px 32px 32px 32px 32px
    44px 44px 44px 44px 44px 44px 44px 44px 44px 44px;
  /* Targets grid (Scope B 2026-05-18): name / tm / pos / exp $ / ev $ /
     fit / + master block (9 cols) / 10 letters / 10 numbers. Total: 35. */
  --targets-grid-cols:
    minmax(140px, 1.6fr) 44px 52px 56px 56px 70px
    36px 36px 56px 56px 32px 32px 32px 68px minmax(120px, 1fr)
    32px 32px 32px 32px 32px 32px 32px 32px 32px 32px
    44px 44px 44px 44px 44px 44px 44px 44px 44px 44px;
}
.sim-roster-wrap {
  margin: 0 0 1rem 0;
  /* 2026-05-18: allow horizontal scroll if the grid columns get squeezed
     past their minmax minimum widths. Scope B (later same day): now
     load-bearing because the master-parity column set blows well past
     the panel width. */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
}
.sim-roster-wrap::-webkit-scrollbar { height: 8px; }
.sim-roster-wrap::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.sim-roster-header,
.sim-roster-team-avg,
.sim-roster .roster-row-grid {
  display: grid;
  grid-template-columns: var(--roster-grid-cols);
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.4rem 0.4rem;
}
.sim-roster-header {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0.35rem;
}
.sim-roster-team-avg {
  background: var(--light-accent);
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: 4px;
  /* Phase 4 brief 2.1 (2026-06-09): match the header's padding-bottom so
     the team-avg row sits at the same vertical rhythm as the header above
     and the data rows below — otherwise the row drifts ~5px because the
     header overrides padding-bottom but team-avg defaulted. */
  padding-bottom: 0.35rem;
  /* Force center alignment to lock the visual centerline regardless of
     which cells are populated (ravg-label is italic; mixed empty/text
     cells with align-items: baseline shifted depending on content). */
  align-items: center;
}
.sim-roster-team-avg .ravg-label {
  font-style: italic;
  color: var(--ink-soft);
  /* Force inline-block so the italic slant doesn't leak into the next
     grid column's start position. */
  display: inline-block;
  text-align: left;
}
.sim-roster-team-avg[hidden] { display: none; }
.sim-roster .num-col,
.sim-roster-header .num-col,
.sim-roster-team-avg .num-col {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sim-roster .rost-exp-price,
.sim-roster .rost-exp-value {
  font-family: var(--serif-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark-accent);
}
.sim-roster .rost-exp-value { color: var(--magenta); }
.sim-roster .rost-egp,
.sim-roster .rost-epgp {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.sim-roster li.roster-row:last-child { border-bottom: none; }
.sim-roster li.roster-row:hover { background: var(--light-accent); }
.sim-roster li.roster-row.dragging {
  opacity: 0.45;
  background: var(--light-accent);
}
.sim-roster li.roster-row.drop-target {
  border-top: 2px solid var(--magenta);
  background: var(--light-accent);
}
.sim-roster .drag-handle {
  cursor: grab;
  color: var(--ink-soft);
  opacity: 0.5;
  font-size: 0.95rem;
  user-select: none;
  text-align: center;
}
.sim-roster .drag-handle:active { cursor: grabbing; opacity: 1; }
.sim-roster .rost-price {
  font-family: var(--serif-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dark-accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sim-roster .rost-price.editable-price {
  cursor: text;
  border-radius: 4px;
  padding: 0 0.2rem;
}
.sim-roster .rost-price.editable-price:hover {
  background: var(--accent);
  color: var(--white);
}
.sim-roster .rost-price.editing {
  background: var(--white);
  border: 1px solid var(--accent);
  padding: 0;
}
.sim-roster .rost-price.editing input {
  width: 100%;
  border: none;
  font-family: var(--serif-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark-accent);
  text-align: right;
  background: transparent;
  padding: 0 0.2rem;
}
.sim-roster .rost-name { font-weight: 500; }
.sim-roster .rost-meta {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: right;
}
.sim-roster .rost-id {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--magenta);
  text-align: right;
  min-width: 60px;
}
.sim-roster .rost-remove {
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.sim-roster .rost-remove:hover {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}
.sim-roster .roster-empty {
  display: block;
  padding: 1.4rem 0.4rem;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  border: 1px dashed var(--rule);
  border-radius: 6px;
}

/* Make the whole roster panel a visible drop zone when dragging */
.panel-roster .sim-roster.editable {
  border: 2px dashed transparent;
  border-radius: 8px;
  transition: border-color 120ms, background 120ms;
  min-height: 100px;
}
.panel-roster .sim-roster.editable.drag-over {
  border-color: var(--magenta);
  background: var(--light-accent);
}

/* ── Pre-draft: category-output bars ────────────────────── */

.cat-outputs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.cat-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.86rem;
}
.cat-label {
  font-family: var(--serif-head);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cat-bar {
  position: relative;
  height: 14px;
  background: var(--light-accent);
  border-radius: 7px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.cat-baseline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ink-soft);
  opacity: 0.4;
}
.cat-marker {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 8px;
  margin-left: -4px;
  background: var(--dark-accent);
  border-radius: 2px;
  transition: left 240ms ease, background 120ms;
}
.cat-marker.good { background: var(--olive); }
.cat-marker.bad { background: var(--coral); }
.cat-z {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  text-align: right;
  font-style: italic;
}

/* ── Pre-draft: targets list ────────────────────────────── */

.panel-targets .hint {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: -0.4rem 0 0.7rem;
}
.targets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Scope B 2026-05-18: vertical scroll moved to the .targets-wrap parent
     so the same container handles both axes. Inner list keeps its natural
     height; max-content min-width prevents grid-row compression. */
  min-width: max-content;
}
/* Legacy 2-col target-row layout. Kept for the filter-chip and
   filter-empty rows (which still use the old structure inside the
   targets-list). Real player rows below use .target-row-grid. */
.target-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.target-row:last-child { border-bottom: none; }
.target-row.on-roster {
  background: var(--light-accent);
}
.tgt-left {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tgt-left .star {
  color: var(--magenta);
  font-size: 0.85rem;
}
.tgt-name { font-weight: 500; }
.tgt-meta {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-soft);
}
.tgt-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  font-variant-numeric: tabular-nums;
}
.tgt-yahoo {
  font-family: var(--serif-head);
  font-size: 0.95rem;
  color: var(--dark-accent);
  font-weight: 600;
}
.tgt-id {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
}
.target-row[data-strength="anchor"] .tgt-id { color: var(--magenta); font-style: normal; font-weight: 600; }
.target-row[data-strength="strong"] .tgt-id { color: var(--dark-accent); font-style: normal; }
.target-row[data-strength="anti"] .tgt-id { color: var(--coral); }

.target-row[draggable="true"] {
  cursor: grab;
}
.target-row[draggable="true"]:active { cursor: grabbing; }
.target-row.dragging {
  opacity: 0.45;
  background: var(--accent);
}

/* ── Scope B 2026-05-18: targets list + roster master-parity grid ──
   Targets wrap holds horizontal scroll; the inner targets-grid-table
   holds the sticky header above the list. Roster extends from 9 cols
   to 39 (master + 10 letter + 10 number cats). Shared .pd-cell rules
   cover both renderers so adding columns is a single-source change. */
.targets-wrap {
  overflow-x: auto;
  max-height: calc(100vh - 220px);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
}
.targets-wrap::-webkit-scrollbar { height: 8px; }
.targets-wrap::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.targets-grid-table {
  /* Force the grid to its natural width so the wrap's horizontal scroll
     actually fires when the master cols overflow the panel width. */
  min-width: max-content;
}
.targets-header {
  display: grid;
  grid-template-columns: var(--targets-grid-cols);
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.4rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.targets-header .num-col { text-align: right; }
/* Phase 4 brief 2.3 (2026-06-09): sortable Players-panel header. */
.targets-header span[data-sort].tgt-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
}
.targets-header span[data-sort].tgt-sortable:hover { color: var(--text-primary); }
.targets-header span.tgt-sort-asc::after  { content: " ▴"; color: var(--gold); }
.targets-header span.tgt-sort-desc::after { content: " ▾"; color: var(--gold); }
.targets-controls {
  padding: 0 0 0.55rem;
}
.targets-controls input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  padding: 0.4rem 0.65rem;
}
.targets-list .target-row-grid {
  display: grid;
  grid-template-columns: var(--targets-grid-cols);
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.4rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.84rem;
}
.targets-list .target-row-grid:hover { background: var(--light-accent); }
.targets-list .target-row-grid.on-roster { background: var(--light-accent); }
.targets-list .target-row-grid.dragging {
  opacity: 0.45;
  background: var(--accent);
}
.targets-list .target-row-grid .tgt-name { font-weight: 500; }
.targets-list .target-row-grid .tgt-team {
  font-style: italic; color: var(--ink-soft); font-size: 0.8rem;
}
.targets-list .target-row-grid .tgt-pos {
  font-size: 0.8rem; color: var(--ink-soft);
}
/* Override the legacy 2-col grid for the new grid-row variant */
.target-row.target-row-grid { padding: 0.4rem 0.4rem; }

/* Shared .pd-cell rules — used by BOTH targets and roster rows */
.pd-cell {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-cell.num { text-align: right; }
.pd-cell.pd-cat-letter,
.pd-cell.pd-rel {
  font-family: var(--serif-head);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
}
.pd-cell.pd-cat-letter[data-tier="anchor"],
.pd-cell.pd-rel[data-tier="anchor"] { color: var(--magenta); }
.pd-cell.pd-cat-letter[data-tier="cornerstone"],
.pd-cell.pd-rel[data-tier="cornerstone"] { color: var(--dark-accent); }
.pd-cell.pd-cat-letter[data-tier="strong"],
.pd-cell.pd-rel[data-tier="strong"] { color: var(--olive); }
.pd-cell.pd-cat-letter[data-tier="solid"],
.pd-cell.pd-rel[data-tier="solid"] { color: var(--ink); }
.pd-cell.pd-cat-letter[data-tier="decent"],
.pd-cell.pd-rel[data-tier="decent"] { color: var(--ink-soft); }
.pd-cell.pd-cat-letter[data-tier="wrong"],
.pd-cell.pd-rel[data-tier="wrong"] { color: var(--coral); }
.pd-cell.pd-cat-num { color: var(--ink-soft); font-size: 0.78rem; }
.pd-cell.pd-pure,
.pd-cell.pd-yahoo {
  font-family: var(--serif-head);
  font-weight: 600;
  color: var(--dark-accent);
}
.pd-cell.pd-inj[data-inj-tier="medium"],
.pd-cell.pd-inj[data-inj-tier="high"],
.pd-cell.pd-inj[data-inj-tier="very-high"] { color: var(--coral); font-weight: 600; }
.pd-cell.pd-inj[data-inj-tier="low"] { color: var(--ink-soft); }
.pd-cell.pd-role[data-role="uncertain"] { color: var(--coral); font-weight: 600; }
.pd-cell.pd-tank[data-tank-tier="high"] { color: var(--coral); font-weight: 600; }
.pd-cell.pd-tank[data-tank-tier="med"],
.pd-cell.pd-tank[data-tank-tier="medium"] { color: var(--ink-soft); }
.pd-cell.pd-volwt[data-tier="anchor"] { color: var(--magenta); }
.pd-cell.pd-volwt[data-tier="cornerstone"] { color: var(--dark-accent); }
.pd-cell.pd-volwt[data-tier="wrong"] { color: var(--coral); }
.pd-cell.pd-topbuild {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make the sim-roster grid wide enough that the horizontal scroll
   activates on the panel (the panel itself is bounded by the layout
   grid; without min-width the cells just compress) */
.sim-roster.sim-roster-grid,
.sim-roster-header,
.sim-roster-team-avg {
  min-width: max-content;
}
.sim-roster.sim-roster-grid .roster-row.roster-row-grid {
  min-width: max-content;
}

/* Hint text styling — small italic gray inside h3 headers */
h3 .hint {
  font-family: var(--serif-body);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 0.4rem;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
}
.panel h2 {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.panel-team   { background: linear-gradient(180deg, var(--bg-inset) 0%, var(--bg-card) 60%); }
.panel-block  {
  background: var(--bg-card);
  /* Phase 3 brief 1.2 — center player tool occupies 2/3 of vertical space.
     Below the topbar (~64px) and mode toggle bar (~50px), 67vh keeps the
     panel dominant without crowding the right opponents column. */
  min-height: 67vh;
}
.panel-teams  { background: linear-gradient(180deg, var(--bg-inset) 0%, var(--bg-card) 60%); }

/* ── My team panel ─────────────────────────────────────── */

.budget-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.budget-value {
  font-family: var(--serif-head);
  font-size: 2.2rem;
  font-weight: 600;
}
.budget-bar {
  height: 6px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.budget-bar-fill {
  height: 100%;
  background: var(--dark-accent);
  width: 100%;
  transition: width 250ms ease;
}
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}
.meta-row > div {
  display: flex;
  flex-direction: column;
}
.meta-label {
  font-size: 0.72rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-right: 0.4rem;
}

.archetype-block {
  margin-top: 1.2rem;
}
.archetype-block select {
  width: 100%;
  margin-top: 0.3rem;
}
.archetype-desc {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
  line-height: 1.4;
}

.roster-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.roster-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.32rem 0;
  border-bottom: 1px dotted var(--rule);
  font-size: 0.95rem;
}
.roster-list li:last-child { border-bottom: none; }
.roster-list .price {
  font-style: italic;
  color: var(--ink-soft);
}

/* ── On the block panel ────────────────────────────────── */

.search-row { margin-bottom: 0.4rem; }
.search-row input { width: 100%; font-size: 1.05rem; }

/* Scouting-lens dropdown — sits between the search box and the results. */
.lens-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.lens-row label {
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.lens-row select {
  flex: 1;
  font-size: 0.9rem;
  padding: 0.25rem 0.4rem;
}
.lens-row .ghost {
  padding: 0.1rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
}
.lens-row .ghost.hidden { display: none; }

/* Fit-strength badge shown next to the player name when a lens is active. */
.search-results .fit-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-style: italic;
  background: var(--light-accent);
  border: 1px solid var(--accent);
  color: var(--ink-soft);
  vertical-align: middle;
}
.search-results .fit-badge[data-strength="anchor"] {
  background: var(--dark-accent);  /* matches website-header purple */
  color: var(--white);
  border-color: var(--dark-accent);
  font-style: normal;
  font-weight: 600;
}
.search-results .fit-badge[data-strength="strong"] {
  background: var(--magenta);
  color: var(--white);
  border-color: var(--magenta);
  font-style: normal;
}
.search-results .fit-badge[data-strength="neutral"] {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  font-style: normal;
}
.search-results .fit-badge[data-strength="anti"] {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  font-style: normal;
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
}

/* Homie 2026-05-03: live-draft search results as a condensed
   horizontally-scrollable table mirroring the /players page columns.
   Wrapper handles horizontal scroll; table itself stays compact. */
.search-results-wrap {
  margin: 0 0 1rem;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
}
.search-results-wrap:empty { display: none; }
.search-results-table {
  /* min-width forces the table to its natural column-sum width so the
     wrapper's overflow-x: auto kicks in when columns don't fit. Without
     this, width: 100% squeezed all 17 columns into the panel and
     hid the right side without a scrollbar. (Homie 2026-05-05)
     Bumped from 72em to 110em on 2026-05-09 when the widget grew from
     17 → 26 columns (added GP, REL, Pure $, Yahoo $, Inj, Role, Tank,
     Vol Wt, Top Build between Opt % and the per-cat letters).
     2026-05-12: font-size 0.82 → 0.86 (~5% larger). min-width is em-based
     so the table naturally widens to ~115em alongside; padding scales too.
     2026-05-18: bumped to 152em — 26 → 36 columns (added the raw per-cat
     numbers FGM#…A/T# after the letter grades). */
  min-width: 152em;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}
.search-results-table thead th {
  position: sticky;
  top: 0;
  background: var(--light-accent);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding: 0.4rem 0.55rem;
  border-bottom: 2px solid var(--rule);
  text-align: left;
  z-index: 1;
}
.search-results-table thead th.num,
.search-results-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.search-results-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: background 80ms ease;
}
.search-results-table tbody tr:last-child { border-bottom: none; }
.search-results-table tbody tr:hover { background: var(--light-accent); }
.search-results-table tbody td {
  padding: 0.4rem 0.55rem;
}
.search-results-table tbody td.left { text-align: left; }
.search-results-table tbody td.name { font-weight: 500; }

/* Live-draft widget extras (2026-05-09): risk-flag chip cells stay
   compact + color-coded by tier. Top Build cell wraps to keep the
   archetype name from blowing out the row. */
.search-results-table td.search-flag-cell {
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  min-width: 2em;
  max-width: 2.4em;
}
.search-results-table td.search-flag-cell[data-inj-tier="low"]       { color: var(--olive); }
.search-results-table td.search-flag-cell[data-inj-tier="medium"]    { color: #B5860B; }
.search-results-table td.search-flag-cell[data-inj-tier="high"]      { color: var(--coral); }
.search-results-table td.search-flag-cell[data-inj-tier="very-high"] { color: var(--coral); font-weight: 700; }
.search-results-table td.search-flag-cell[data-tank-tier="low"]      { color: #B5860B; }
.search-results-table td.search-flag-cell[data-tank-tier="med"],
.search-results-table td.search-flag-cell[data-tank-tier="medium"]   { color: var(--coral); }
.search-results-table td.search-flag-cell[data-tank-tier="high"]     { color: var(--coral); font-weight: 700; }
.search-results-table td.search-flag-cell[data-role="uncertain"]     { color: var(--magenta); font-weight: 700; }
.search-results-table td.search-topbuild-cell {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-soft);
}
/* Tight Player + Pos column widths (homie 2026-05-05) so the per-cat
   letter-grade columns can fan out inline. Player gets enough room
   for the longest realistic name; Pos rides on the shorthand transform. */
.search-results-table th[data-sort="name"],
.search-results-table td.name {
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pos column — widened + centered so text sits midway between
   Tm and Exp Price (homie 2026-05-05). */
.search-results-table th[data-sort="position"],
.search-results-table td.left:nth-child(4) {
  max-width: 5.2em;
  width: 5.2em;
  text-align: center;
}
.search-results-table th[data-sort="team"],
.search-results-table td.left:nth-child(3) {
  max-width: 3em;
  width: 3em;
}
.search-results-table thead th,
.search-results-table tbody td {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.search-results-table .search-result-rank {
  display: inline-block;
  min-width: 1.6em;
  margin-right: 0.4rem;
  font-family: var(--serif-head);
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.search-results-table tbody td.search-rank-cell {
  font-family: var(--serif-head);
  color: var(--ink-soft);
  font-weight: 600;
}
.search-results-table thead th.sortable,
.search-results-table thead th.filterable {
  cursor: pointer;
  user-select: none;
}
.search-results-table thead th.sortable:hover,
.search-results-table thead th.filterable:hover {
  color: var(--accent);
}
.search-results-table thead th.sorted,
.search-results-table thead th.filtered {
  color: var(--accent);
}
.search-results-table thead th.filtered {
  background: var(--light-accent);
}

/* Filter dropdown popover anchored under the Tm/Pos header */
.search-filter-menu {
  position: absolute;
  z-index: 10;
  min-width: 12em;
  max-height: 22em;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 0.25rem 0;
  font-size: 0.85rem;
}
.search-filter-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.35rem 0.7rem;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
  cursor: pointer;
}
.search-filter-item:hover {
  background: var(--light-accent);
}
.search-filter-item.active {
  background: var(--light-accent);
  color: var(--accent);
  font-weight: 600;
}
/* Per-cat letter-grade cells — pull color from the same [data-tier]
   vocabulary used by Build Grade + EV Grade so all letter grades on the
   page share semantics (anchor=magenta, cornerstone=olive, etc). */
.search-results-table tbody td.cat-grade-cell {
  font-weight: 700;
  font-family: var(--serif-head);
  font-size: 0.92em;
}
.search-results-table tbody td[data-tier="anchor"] { color: var(--magenta); }
.search-results-table tbody td[data-tier="cornerstone"] { color: var(--olive); }
.search-results-table tbody td[data-tier="strong"] { color: var(--olive); }
.search-results-table tbody td[data-tier="solid"] { color: var(--ink-soft); }
.search-results-table tbody td[data-tier="decent"] { color: var(--ink-soft); }
.search-results-table tbody td[data-tier="wrong"] { color: var(--coral); }
.search-results-table .fit-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  vertical-align: middle;
}
.search-results-table .fit-badge[data-strength="anchor"] {
  background: var(--gold); color: var(--ink);
}
.search-results-table .fit-badge[data-strength="strong"] {
  background: var(--olive); color: var(--white);
}
.search-results-table .fit-badge[data-strength="anti"] {
  background: var(--coral); color: var(--white);
}
.search-results-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.search-results-wrap::-webkit-scrollbar-track { background: var(--white); }
.search-results-wrap::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.search-results::-webkit-scrollbar { width: 8px; }
.search-results::-webkit-scrollbar-track { background: var(--white); }
.search-results::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.search-results:empty {
  display: none;
}
.search-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.search-results li:last-child { border-bottom: none; }
.search-results li:hover {
  background: var(--light-accent);
}
.search-results .name { font-weight: 500; }
.search-results .price {
  font-style: italic;
  color: var(--ink-soft);
}

.candidate-placeholder {
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 1.6rem 1.2rem;
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  background: var(--light-accent);
}
.candidate-placeholder.hidden { display: none; }

.candidate-card {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 1.2rem;
  background: var(--bg-card);
  margin-top: 0.5rem;
}
.candidate-card.hidden { display: none; }

.archetype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.6rem;
}
.archetype-chips .chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: var(--light-accent);
  border: 1px solid var(--accent);
  color: var(--ink-soft);
}
.archetype-chips .chip .chip-score {
  font-style: italic;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.archetype-chips .chip[data-strength="anchor"] {
  background: var(--magenta);
  color: var(--white);
  border-color: var(--magenta);
}
.archetype-chips .chip[data-strength="anchor"] .chip-score { color: var(--white); }
.archetype-chips .chip[data-strength="strong"] {
  background: var(--accent);
  border-color: var(--dark-accent);
}
.archetype-chips .chip[data-strength="anti"] {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  text-decoration: line-through;
}
.archetype-chips .chip[data-strength="anti"] .chip-score { color: var(--white); }

.bluff-flag {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.85rem;
  background: var(--coral);
  color: var(--white);
  border-radius: 6px;
  font-size: 0.92rem;
  font-style: italic;
  border-left: 4px solid var(--magenta);
}
.bluff-flag.hidden { display: none; }
.bluff-flag .flag-label {
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  margin-right: 0.5em;
}

/* DON'T DRAFT panel — fires when current bid would push net EV below
   threshold ( -$3 OR -10% of remaining budget, whichever more negative).
   Sits at the top of the recommendation block so the operator can't
   miss it mid-bid. */
.dont-draft-panel {
  margin: 0.8rem 0;
  padding: 0.7rem 1rem;
  background: var(--coral);
  color: var(--white);
  border-radius: 6px;
  border-left: 5px solid var(--magenta);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  animation: dontDraftPulse 1.4s ease-in-out infinite alternate;
}
.dont-draft-panel.hidden { display: none; }
.dont-draft-headline {
  font-family: var(--serif-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.dont-draft-explainer {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.4;
}
@keyframes dontDraftPulse {
  from { box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
  to   { box-shadow: 0 2px 14px rgba(220,90,90,0.55); }
}

.rec-threats {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--accent);
}
.rec-threats h4 {
  margin: 0 0 0.4rem;
  font-family: var(--serif-head);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.rec-threats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rec-threats li {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-soft);
}
.rec-threats li .threat-name { font-style: normal; color: var(--text-primary); }
.rec-threats li .threat-bid {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--magenta);
}

/* ── Convergence/divergence indicator on threat list ──────────── */
.rec-threats h4 .hint {
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-left: 0.2em;
  text-transform: none;
}
.rec-threats h4 .hint[data-converge="converge"] { color: var(--coral); }
.rec-threats h4 .hint[data-converge="diverge"]  { color: var(--olive); }
.rec-threats h4 .hint[data-converge="mixed"]    { color: var(--ink-soft); }
.rec-threats li[data-converge="converge"] {
  background: rgba(240, 82, 61, 0.10);   /* coral wash — they want your build */
  border-left: 2px solid var(--coral);
  padding-left: 0.4rem;
  border-radius: 0.2rem;
}
.rec-threats li[data-converge="chase"] {
  background: rgba(245, 49, 193, 0.06);  /* magenta wash — different build, still chasing */
  border-left: 2px solid var(--magenta);
  padding-left: 0.4rem;
  border-radius: 0.2rem;
}
.rec-threats li[data-converge="neutral"] {
  padding-left: 0.4rem;   /* keep horizontal alignment */
}
.candidate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.candidate-name {
  font-family: var(--serif-head);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gold);
}
.candidate-meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}
.candidate-price {
  text-align: right;
}
.big-num {
  font-family: var(--serif-head);
  font-size: 1.7rem;
  font-weight: 600;
  display: block;
}

.bid-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.bid-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.bid-controls input {
  width: 70px;
  text-align: center;
  font-size: 1.2rem;
  font-family: var(--serif-head);
}
.bid-step {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

/* Recommendation block — central focus */

.recommendation {
  background: var(--light-accent);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.rec-action {
  font-family: var(--serif-head);
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
}
.rec-action[data-action="bid"]            { background: var(--olive); color: var(--white); border-color: var(--olive); }
.rec-action[data-action="pass"]           { background: var(--coral); color: var(--white); border-color: var(--coral); }

/* Floor + ceiling — the only two dollar numbers the user needs. Floor is
   the steal price (anything below = clear value); ceiling is your max bid. */
.rec-floor-ceiling {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.7rem 0 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rec-floor, .rec-ceiling {
  display: flex;
  flex-direction: column;
}
.rec-floor .big-num   { color: var(--olive); }
.rec-ceiling .big-num { color: var(--magenta); }

.rec-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.rec-stats > div {
  display: flex;
  flex-direction: column;
}
.rec-stats span:last-child {
  font-family: var(--serif-head);
  font-size: 1.1rem;
}
.rec-reasoning {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--accent);
  list-style: none;
}
.rec-reasoning li {
  font-style: italic;
  font-size: 0.92rem;
  padding: 0.18rem 0;
  color: var(--ink-soft);
}

.sold-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  margin: 0.6rem 0 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-inset, var(--white));
  font-size: 0.95rem;
}
.sold-row select { flex: 1; }
.sold-row input { width: 70px; text-align: center; }
/* Phase 3 brief 1.2: muted state when no candidate is picked. Visible
   but de-emphasized — the hint tells the operator why. */
.sold-row.no-candidate {
  opacity: 0.55;
}
.sold-row.no-candidate #sold-btn,
.sold-row.no-candidate #sold-team-select {
  cursor: not-allowed;
}
.sold-row-hint {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-left: auto;
}
.sold-row:not(.no-candidate) .sold-row-hint { display: none; }

/* ── Opponents panel ───────────────────────────────────── */

.opponents-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.opp-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  background: var(--bg-card);
}
.opp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
}
.opp-name { font-weight: 600; color: var(--gold); }
.opp-budget { font-style: italic; color: var(--ink-soft); }

/* Phase 3 brief 1.3 (2026-06-09): opponent roster expand chevron + body.
   Chevron is a small ghost button in the head; clicking flips it from ▾
   to ▴ and reveals the drafted roster list. */
.opp-expand-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 0 0.3rem;
  margin-left: 0.4rem;
  transition: color 0.12s ease;
}
.opp-expand-btn:hover { color: var(--gold); }
.opp-roster-detail {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule);
}
.opp-roster-detail.hidden { display: none; }
.opp-roster-empty {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.opp-roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.85rem;
}
.opp-roster-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.12rem 0;
}
.opp-roster-name { color: var(--ink); }
.opp-roster-price { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.opp-arche-bars {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.78rem;
}
.opp-arche-bars .bar-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.opp-arche-bars .bar-label {
  width: 65px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.opp-arche-bars .bar-track {
  flex: 1;
  height: 5px;
  background: var(--bg-inset);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.opp-arche-bars .bar-fill {
  height: 100%;
  background: var(--dark-accent);
}
.opp-arche-bars .bar-pct {
  width: 35px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
/* Compact opponent build line — replaces the 3-bar posterior
   visualization. Single line: build name + percentage; "not enough
   data" when signal is weak (homie request 2026-05-01). */
.opp-build {
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.opp-build-name {
  color: var(--text-primary);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.opp-build-pct {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.opp-build-empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.8rem;
}

/* Pinned-override styling — distinguishes user-asserted build from
   inferred posterior. Magenta ink + lock icon makes it obvious the
   line came from the user, not the inferer. */
.opp-build-pinned {
  color: var(--magenta);
}
.opp-build-pinned .opp-build-name {
  color: var(--magenta);
}
.opp-build-pinned-tag {
  font-style: italic;
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.opp-build-lock {
  font-size: 0.78rem;
}

/* Pin / unpin control — small inline dropdown (or unpin button). Sits
   below the build line; minimal until interacted with. */
.opp-pin-ctrl {
  margin-top: 0.35rem;
  display: flex;
  justify-content: flex-end;
}
.opp-pin-select {
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
}
.opp-pin-select:hover {
  color: var(--black);
  border-color: var(--accent);
}
.opp-unpin-btn {
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--magenta);
  border-radius: 3px;
  background: var(--white);
  color: var(--magenta);
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.opp-unpin-btn:hover {
  background: var(--magenta);
  color: var(--white);
}

/* ── Rookie row + projection-overrides block (rec card) ── */

.rec-rookie-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.rec-rookie-chip {
  font-family: var(--serif-h);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  background: var(--magenta);
  color: var(--white);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}
.rec-rookie-meta {
  font-style: italic;
}

.rec-overrides-block {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
}
.rec-overrides-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.rec-override-toggle {
  font-family: inherit;
  font-size: 0.74rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg-inset);
  color: var(--gold);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.rec-override-toggle:hover {
  color: var(--gold-hover);
  border-color: var(--accent);
}
.rec-overrides-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
}
.rec-overrides-list-empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.74rem;
}
.rec-override-chip {
  background: var(--bg-inset);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.25rem 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: baseline;
}
.rec-override-chip-note {
  font-weight: 600;
  color: var(--gold);
}
.rec-override-chip-detail {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.rec-override-chip-source {
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: lowercase;
  color: var(--magenta);
  font-style: italic;
}

.rec-override-form {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg-inset);
  border: 1px solid var(--accent);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.rec-override-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.rec-override-row label {
  font-size: 0.72rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.rec-override-row input,
.rec-override-row select {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--white);
}
.rec-override-deltas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.rec-override-delta-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.rec-override-delta-row .rec-override-cat-select {
  flex: 0 0 6em;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.22rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.rec-override-delta-row .rec-override-cat-delta {
  flex: 1;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.rec-override-delta-row .rec-override-cat-rm {
  flex: 0 0 1.6em;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  color: var(--coral);
  font-weight: 600;
}
.rec-override-add-cat {
  align-self: flex-start;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.18rem 0.5rem;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.rec-override-add-cat:hover {
  color: var(--black);
  border-color: var(--accent);
}
.rec-override-rookie-warn {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--magenta);
  background: var(--light);
  padding: 0.25rem 0.45rem;
  border-radius: 3px;
}
.rec-override-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.rec-override-cancel {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.rec-override-apply {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--magenta);
  border-radius: 3px;
  background: var(--magenta);
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.rec-override-apply:hover { background: var(--coral); border-color: var(--coral); }

/* ── Footer ticker ─────────────────────────────────────── */

.ticker {
  background: var(--light-accent);
  border-top: 1px solid var(--accent);
  padding: 0.8rem 1.8rem;
}
.ticker h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}
.event-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.88rem;
}
.event-row .pick {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.event-row .pick .name { font-weight: 600; }
.event-row .pick .team { color: var(--ink-soft); margin-left: 0.4rem; }
.event-row .pick .price {
  margin-left: 0.4rem;
  font-style: italic;
  color: var(--magenta);
}

/* ── Editable team names (click to rename) ─────────────── */

.editable-name {
  cursor: text;
  position: relative;
  transition: color 120ms ease;
}
.editable-name:hover {
  color: var(--magenta);
}
.editable-name:hover::after {
  content: "✎";
  font-size: 0.7em;
  margin-left: 0.4em;
  opacity: 0.5;
}
.editable-name input {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.1em 0.3em;
  background: var(--white);
  color: var(--black);
  width: calc(100% - 0.6em);
  letter-spacing: inherit;
}

/* ── Connection state ──────────────────────────────────── */

#connection-status[data-state="ok"]    { color: var(--white); }
#connection-status[data-state="error"] { color: var(--coral); }
#connection-status[data-state="loading"] { color: var(--white); opacity: 0.75; }

/* ── Team Builder Phase C tabs (trade / win-win / FA) ── */

.tb-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.tb-tab {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 4px 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78em;
  text-transform: lowercase;
  border-bottom: 2px solid transparent;
}
.tb-tab:hover { color: var(--text-primary); }
.tb-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

.tb-tab-panel.hidden { display: none; }

.tb-row {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tb-row label {
  font-size: 0.75em;
  opacity: 0.7;
  text-transform: lowercase;
}
.tb-row input,
.tb-row textarea,
.tb-row select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.85em;
  border-radius: 3px;
}
.tb-row textarea { resize: vertical; }

/* Phase 4 brief 3.1 (2026-06-09): checkbox list for Trade Give panel.
   Also used by Win-Win opponent roster picker (P4.6) once that lands. */
.tb-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}
.tb-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.3rem;
  font-size: 0.86rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s ease;
}
.tb-checkbox-row:hover { background: rgba(255,255,255,0.06); }
.tb-checkbox-row input[type=checkbox] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--gold);
}
.tb-checkbox-name { font-weight: 500; color: var(--text-primary); }
.tb-checkbox-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-left: auto;
}

/* Phase 5 brief 4.7 (2026-06-09): app-wide letter-grade color coding.
   Applied via [data-grade="X"] on any cell or chip that displays a
   letter grade. Palette follows the brief verbatim (11 grades, dark
   green → dark red). Sites that need the coloring set dataset.grade
   on the cell at render time (see players.js renderTbody). */
[data-grade="A+"], [data-grade="A"] {
  background: #1B5E20 !important;
  color: #FFFFFF !important;
}
[data-grade="A-"] {
  background: #388E3C !important;
  color: #FFFFFF !important;
}
[data-grade="B+"] {
  background: #66BB6A !important;
  color: #1A1A1A !important;
}
[data-grade="B"] {
  background: #A5D6A7 !important;
  color: #1A1A1A !important;
}
[data-grade="B-"] {
  background: #C5E1A5 !important;
  color: #1A1A1A !important;
}
[data-grade="C+"] {
  background: #FFF176 !important;
  color: #1A1A1A !important;
}
[data-grade="C"] {
  background: #FFEE58 !important;
  color: #1A1A1A !important;
}
[data-grade="C-"] {
  background: #FFB74D !important;
  color: #1A1A1A !important;
}
[data-grade="D+"] {
  background: #FF8A65 !important;
  color: #FFFFFF !important;
}
[data-grade="D"], [data-grade="D-"] {
  background: #EF5350 !important;
  color: #FFFFFF !important;
}
[data-grade="F"] {
  background: #B71C1C !important;
  color: #FFFFFF !important;
}
/* Letter grade cells stay readable at table density — slight padding
   so the bg color doesn't bleed edge-to-edge. */
td[data-grade], span[data-grade] {
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Phase 4 brief 3.5 (2026-06-09): FA Pickup mode toggle (Long-Term vs
   Maximize Week). Segmented-button style; radio inputs hidden. */
.fa-mode-toggle {
  display: flex;
  gap: 0;
  margin: 0.5rem 0 0.7rem;
}
.fa-mode-btn {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fa-mode-btn:first-child { border-radius: 4px 0 0 4px; border-right-width: 0; }
.fa-mode-btn:last-child  { border-radius: 0 4px 4px 0; }
.fa-mode-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.fa-mode-btn.active {
  background: var(--gold);
  color: var(--bg-inset, var(--ink));
  border-color: var(--gold);
}
.fa-mode-btn input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fa-week-fields.hidden { display: none; }
.fa-week-inputs {
  display: flex;
  gap: 0.5rem;
}
.fa-week-inputs input { flex: 1; }
.hint-dim { opacity: 0.6; font-size: 0.8rem; margin-top: -0.5rem; }

button.primary {
  background: var(--gold, #d4a857);
  color: var(--ink, #1a1a1a);
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-transform: lowercase;
  border-radius: 3px;
  margin-top: 4px;
}
button.primary:hover { opacity: 0.9; }

.tb-result {
  margin-top: 12px;
  font-size: 0.85em;
}
.tb-result .error { color: var(--coral, #e57373); }

.tb-verdict {
  padding: 8px 12px;
  border-radius: 3px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.05);
}
.tb-verdict.good { border-left: 3px solid #5fb87a; }
.tb-verdict.bad  { border-left: 3px solid #e57373; }
.tb-verdict.neutral { border-left: 3px solid #999; }

.tb-cat-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.tb-cat-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 8px;
  padding: 3px 0;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.8em;
}
.tb-cat-improves > span:last-child { color: #5fb87a; }
.tb-cat-worsens  > span:last-child { color: #e57373; }
.tb-cat-neutral  > span:last-child { opacity: 0.6; }

/* 5.4 (2026-06-25): new trade evaluation display — mirrors Expected
   Weekly Result panel style. Headline = Δwins/week, then risk grade,
   identity (quiet), verdict, per-cat win-prob bars before vs after. */
.tb-trade-headline {
  text-align: center;
  padding: 14px 12px;
  margin: 4px 0 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.tb-trade-headline-num {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.tb-trade-headline-num[data-tier="strong"]  { color: #93AB78; }
.tb-trade-headline-num[data-tier="neutral"] { color: var(--gold); }
.tb-trade-headline-num[data-tier="weak"]    { color: #CC7D62; }
.tb-trade-headline-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.tb-trade-headline-sub {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* 5.3 (2026-06-25): uneven-trade waiver-wire fill disclosure */
.tb-trade-waiver {
  padding: 6px 10px;
  margin: 0 0 8px;
  font-size: 0.82em;
  background: rgba(212, 194, 130, 0.07);  /* gold tint, restrained */
  border-left: 2px solid var(--gold);
  border-radius: 2px;
}
.tb-trade-waiver-label {
  color: var(--gold);
  font-weight: 600;
  margin-right: 4px;
}
.tb-trade-waiver-names {
  color: var(--text-primary);
  font-weight: 500;
}
.tb-trade-waiver-hint {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 0.88em;
  font-style: italic;
}

.tb-trade-risk {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.85em;
}
.tb-trade-risk-label { color: var(--text-secondary); }
.tb-trade-risk-grade { font-weight: 600; font-family: var(--font-mono); }
.tb-trade-risk-grade.good { color: #93AB78; }
.tb-trade-risk-grade.bad  { color: #CC7D62; }
.tb-trade-risk-grade.neutral { color: var(--text-primary); }
.tb-trade-risk-arrow { color: var(--text-tertiary); }
.tb-trade-risk-note { color: var(--text-tertiary); margin-left: 6px; font-size: 0.85em; font-style: italic; }

.tb-trade-identity {
  padding: 4px 10px;
  font-size: 0.78em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.tb-trade-identity .good { color: #93AB78; }
.tb-trade-identity .bad  { color: #CC7D62; }

.tb-trade-verdict {
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 0.82em;
  border-left: 3px solid #999;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
}
.tb-trade-verdict.good { border-left-color: #93AB78; }
.tb-trade-verdict.bad  { border-left-color: #CC7D62; }
.tb-trade-verdict.neutral { border-left-color: #999; }

.tb-trade-cats-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 12px 0 6px;
  padding-left: 4px;
}
.tb-trade-cats { display: flex; flex-direction: column; gap: 4px; }
.tb-trade-cat-row {
  display: grid;
  grid-template-columns: 44px 1fr 130px 60px;
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
  font-size: 0.78em;
  font-family: var(--font-mono);
}
.tb-trade-cat-name { font-weight: 600; color: var(--text-primary); }
.tb-trade-cat-bar-track {
  position: relative;
  height: 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.tb-trade-cat-bar-before {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: rgba(154, 141, 180, 0.35); /* text-secondary-faint */
  z-index: 0;
}
.tb-trade-cat-bar-after {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--gold);
  opacity: 0.65;
  z-index: 1;
}
.tb-trade-cat-improves .tb-trade-cat-bar-after { background: #93AB78; opacity: 0.85; }
.tb-trade-cat-worsens  .tb-trade-cat-bar-after { background: #CC7D62; opacity: 0.85; }
.tb-trade-cat-pcts {
  display: flex; align-items: center; gap: 4px;
  color: var(--text-tertiary);
  font-size: 0.95em;
}
.tb-trade-cat-after strong { color: var(--text-primary); }
.tb-trade-cat-arrow { color: var(--text-faint); }
.tb-trade-cat-delta { text-align: right; font-weight: 600; }
.tb-trade-cat-delta.good { color: #93AB78; }
.tb-trade-cat-delta.bad  { color: #CC7D62; }

/* 5.2 (2026-06-25): Yahoo-linked receive picker visibility + free-search toggle */
#trade-receive-yahoo.hidden,
#trade-receive-search.hidden { display: none; }

/* Team builder dark-text fix (2026-06-25): the predraft page runs on a
   dark purple bg, but lots of legacy rules use `color: var(--black)` and
   `color: var(--dark-accent)` (designed for the old light theme) that
   disappear here. Remap those two legacy vars inside `.layout-predraft`
   only — every rule that resolves them now reads as cream text, no
   per-selector overrides needed. Live-draft index.html and the standalone
   /players page keep their own resolutions untouched. */
.layout-predraft {
  --black: var(--text-primary);
  --dark-accent: var(--text-primary);
}

/* Sticky player-name column on horizontally-scrolling tables (2026-06-25):
   when a table is wider than its wrapper and the user scrolls right, the
   first column (player name) pins to the left so the row is identifiable
   without scrolling back. Solid bg-page background under the sticky cell
   so translucent body rows don't bleed through. Hover state keeps the
   sticky cell tinted with the rest of the row. */
.ranking-table thead th:first-child,
.ranking-table tbody td:first-child,
.ranks-table thead th:first-child,
.ranks-table tbody td:first-child,
.tb-table thead th:first-child,
.tb-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-page);
  box-shadow: 1px 0 0 var(--border);
}
.ranking-table thead th:first-child,
.ranks-table thead th:first-child,
.tb-table thead th:first-child {
  z-index: 3; /* header sticky cell stays above body sticky cells */
  background: var(--bg-raised);
}
.ranking-table tbody tr:hover td:first-child,
.ranks-table tbody tr:hover td:first-child,
.tb-table tbody tr:hover td:first-child {
  background: var(--bg-inset);
}

/* Grid-based Players tab on predraft uses CSS grid not <table>. Pin the
   first column of the header + each row's first child. */
.targets-grid-table .targets-header > :first-child,
.targets-grid-table .targets-list > li > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-page);
  box-shadow: 1px 0 0 var(--border);
}
.targets-grid-table .targets-header > :first-child {
  z-index: 3;
  background: var(--bg-raised);
}

/* Phase 4 (5.6 + 5.7, 2026-06-25): mode-aware Win-Win field visibility +
   inferred-archetype badge + winwin table polish */
.winwin-mode-field.hidden { display: none; }
#winwin-manual-block.hidden { display: none; }
.winwin-inferred-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(212, 194, 130, 0.12);
  color: var(--gold);
  border: 1px solid rgba(212, 194, 130, 0.35);
  border-radius: 3px;
  cursor: help;
}
.tb-winwin-table th, .tb-winwin-table td {
  font-size: 0.78em;
}
.hint-dim { color: var(--text-faint); opacity: 0.85; }
.hint-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font-size: 0.78em;
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
}
.hint-link:hover { color: var(--gold-hover); }

.tb-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.8em;
}
.tb-table th, .tb-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tb-table th { opacity: 0.6; font-weight: normal; text-transform: lowercase; }
.tb-table td.good { color: #5fb87a; }
.tb-table td.bad  { color: #e57373; }
.tb-table td.neutral { opacity: 0.6; }

.good { color: #5fb87a; }
.bad  { color: #e57373; }
.neutral { opacity: 0.6; }

/* ── Historical profile chip on opponent cards ── */

.opp-history-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 3px 8px;
  background: rgba(212, 168, 87, 0.08);
  border-left: 2px solid var(--gold, #d4a857);
  font-size: 0.72em;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  border-radius: 2px;
}
.opp-history-chip .hist-mgr {
  font-weight: 600;
  color: var(--gold, #d4a857);
}
.opp-history-chip .hist-modal {
  opacity: 0.85;
}
.opp-history-chip .hist-lockin {
  margin-left: auto;
  opacity: 0.7;
}

/* ── League climate banner (counter-archetype recommendation) ── */

.climate-banner {
  background: rgba(212, 168, 87, 0.06);
  border-bottom: 1px solid rgba(212, 168, 87, 0.2);
  padding: 8px 16px;
  font-size: 0.85em;
  color: var(--white);
}
.climate-banner.hidden { display: none; }
.climate-banner.climate-strong {
  background: rgba(229, 115, 115, 0.08);
  border-bottom-color: rgba(229, 115, 115, 0.3);
}
.climate-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.climate-icon {
  color: var(--gold, #d4a857);
  font-size: 1.1em;
}
.climate-banner.climate-strong .climate-icon { color: #e57373; }
.climate-toggle {
  margin-left: auto;
  font-size: 0.85em;
  text-transform: lowercase;
}
.climate-detail {
  margin-top: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 0.8em;
}
.climate-detail.hidden { display: none; }
.climate-detail h4 {
  margin: 8px 0 4px;
  font-size: 0.85em;
  text-transform: lowercase;
  opacity: 0.8;
}
.climate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.climate-list li {
  padding: 2px 0;
}
.climate-name { color: var(--gold, #d4a857); }
.climate-meta { opacity: 0.7; }
.climate-list-contested .climate-name { color: #e57373; }

/* ── Style B verdict blurb (live recommendation) ── */

.verdict-blurb {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--gold, #d4a857);
  border-radius: 3px;
}
.verdict-blurb.hidden { display: none; }
.verdict-blurb[data-action="bid"]  { border-left-color: #5fb87a; }
.verdict-blurb[data-action="pass"] { border-left-color: #e57373; }

.verdict-headline {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.verdict-explanation {
  font-size: 0.9em;
  line-height: 1.45;
  opacity: 0.92;
}

.rec-detail {
  margin-top: 10px;
  font-size: 0.85em;
}
.rec-detail summary {
  cursor: pointer;
  opacity: 0.7;
  text-transform: lowercase;
  padding: 4px 0;
}
.rec-detail summary:hover { opacity: 1; }

/* ── Yahoo import-history secondary action ── */

.yahoo-import-btn {
  background: transparent;
  border: 1px solid rgba(212, 168, 87, 0.35);
  color: var(--gold, #d4a857);
  padding: 4px 10px;
  margin-left: 8px;
  font-family: inherit;
  font-size: 0.78em;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.yahoo-import-btn:hover {
  background: rgba(212, 168, 87, 0.10);
  border-color: var(--gold, #d4a857);
}

/* ── Build-grade tier coloring (rewrite guide §3) ──────────────
   Applied to any cell with [data-tier="..."] from buildGradeFromFitPct.
   Letter grade A+ → D, paired with color from the existing palette
   (olive = positive, coral = negative). */
[data-tier="anchor"],
[data-tier="cornerstone"],
[data-tier="dominant"] {
  color: var(--olive);
  font-weight: 600;
}
[data-tier="strong"],
[data-tier="above"] {
  color: var(--olive);
}
[data-tier="solid"],
[data-tier="huge"],
[data-tier="light"] {
  color: var(--olive);
  opacity: 0.8;
}
[data-tier="decent"],
[data-tier="average"],
[data-tier="none"] {
  /* neutral — inherits default text color */
  opacity: 0.75;
}
[data-tier="below"] {
  color: var(--coral);
  opacity: 0.85;
}
[data-tier="wrong"],
[data-tier="conceded"] {
  color: var(--coral);
  font-weight: 600;
}

/* Cat-output tier label spans in the team builder right column */
.cat-z[data-tier] {
  font-weight: 600;
  font-size: 0.85em;
}

/* ── Build optimization scores (live draft my-team panel) ───────── */
.build-scores-block {
  margin-top: 1rem;
}
.build-scores-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
}
.build-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.88rem;
  border-bottom: 1px dotted var(--rule);
}
.build-score-row.active {
  background: rgba(212, 168, 87, 0.08);
  font-weight: 600;
}
.build-score-row.active .build-score-name::before {
  content: "▸ ";
  color: var(--gold, #d4a857);
}
.build-score-name {
  color: var(--ink-soft);
}
.build-score-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.build-score-row[data-tier] .build-score-pct {
  /* color comes from the [data-tier] rules above */
}
/* Top-3 + expand: rows beyond rank 3 get .build-score-rest + .hidden;
   .build-scores-toggle is the click-to-reveal "▸ show N more" pill. */
.build-score-row.build-score-rest.hidden { display: none; }
.build-scores-toggle {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  border-top: 1px dotted var(--rule);
  user-select: none;
}
.build-scores-toggle:hover { color: var(--gold); background: var(--light-accent); }

/* ── If you lose him — fallback list (rec card) ───────────────── */
.rec-fallbacks {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.rec-fallbacks.hidden { display: none; }
.rec-fallbacks h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.rec-fallbacks-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fallback-row {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.92rem;
}
.fallback-row + .fallback-row {
  border-top: 1px dotted var(--rule);
}
.fallback-grade {
  font-weight: 700;
  font-family: var(--serif-head);
  font-size: 1.05rem;
  text-align: center;
}
.fallback-name {
  color: var(--ink-soft);
}
.fallback-price {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

/* ── 3-tier alts (Direct/Value/Wire) — "same kind of player" ──── */
/* Homie 2026-05-03: per-row two $ columns (expected price + expected
   value) added after the production-% chip. Wider grid template to
   accommodate both. */
.rec-tiered-alts .fallback-row.tier-row {
  grid-template-columns: 4.4em 1fr 5em 4em 4em;
}
.fallback-exp-price,
.fallback-exp-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  text-align: right;
}
.fallback-exp-price {
  color: var(--ink-soft);
}
.fallback-exp-value {
  color: var(--magenta);
  font-weight: 600;
}
.tier-chip {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 0.25em;
  font-family: var(--serif-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--white);
  background: var(--ink-soft);
  cursor: help;
}
.tier-chip[data-tier="direct"] { background: var(--olive); }
.tier-chip[data-tier="value"]  { background: var(--dark-accent); color: var(--white); }
.tier-chip[data-tier="wire"]   { background: var(--ink-soft); }
.tier-corr {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  text-align: right;
  cursor: help;
}
.tier-row.tier-empty .fallback-name.muted {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.85rem;
}

/* ── Tank-risk chip (rec card + player rows) ─────────────────── */
.cand-pills {
  display: flex;
  gap: 0.4rem;
  margin: 0.3rem 0 0.2rem;
  flex-wrap: wrap;
}
.tank-chip {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 0.25em;
  font-family: var(--serif-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--ink-soft);
  cursor: help;
}
.tank-chip[data-tier="high"] { background: var(--coral); }
.tank-chip[data-tier="med"]  { background: var(--magenta); }
.tank-chip[data-tier="low"]  { background: var(--ink-soft); }

/* ── UI bundle chips: anchor scarcity + injury concern ──────────── */
/* Sit below the rec-stats row, sized like tank-chip but distinct */
.rec-chips {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.2rem;
  flex-wrap: wrap;
}
.rec-chip {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 0.25em;
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--white);
  background: var(--ink-soft);
  cursor: help;
}
/* Anchor scarcity: red for scarce (commit early), neutral for moderate,
   green-ish for deep (can wait). */
.rec-chip[data-scarcity="anchor-thirsty"] { background: var(--coral); }
.rec-chip[data-scarcity="moderate"]       { background: var(--ink-soft); }
.rec-chip[data-scarcity="substitute-rich"] { background: #4a7c5e; }
/* Injury concern: graded by tier severity */
.rec-chip[data-tier="low"]       { background: var(--ink-soft); }
.rec-chip[data-tier="medium"]    { background: var(--magenta); }
.rec-chip[data-tier="high"]      { background: var(--coral); }
.rec-chip[data-tier="very-high"] { background: #8b1a1a; }
/* Reliability grade: A green (most reliable), B subtle, C muted, D coral, F red */
.rec-chip[data-grade="A"] { background: #4a7c5e; }
.rec-chip[data-grade="B"] { background: var(--ink-soft); }
.rec-chip[data-grade="C"] { background: var(--dark-accent); color: var(--text-primary); }
.rec-chip[data-grade="D"] { background: var(--coral); }
.rec-chip[data-grade="F"] { background: #8b1a1a; }
/* Role-collapse — single warning chip styling */
#rec-role-chip { background: var(--magenta); }
/* The other rec-chips look invisible when "hidden" because their
   backgrounds are conditional on [data-tier]/[data-grade]/etc. — no
   attr = no background. rec-role-chip is unconditional magenta, so
   the hidden class needs to actually hide it. Apply broadly to any
   rec-chip carrying .hidden so future unconditional chips stay sane. */
.rec-chip.hidden { display: none; }

/* Match-Boost gradient + verdict (top of rec card).
   LEFT cell: matchup-boost numbers with divergent gradient bg.
   RIGHT cell: action label + plain-English explainer.
   Background is set inline by JS via percentile -> rgba.
   Gradient direction: red (0) <-> transparent (50) <-> green (100). */
.rec-verdict-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.6rem;
  margin: 0.4rem 0 0.6rem;
  align-items: stretch;
}
.rec-mb-numbers {
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  transition: background 0.25s ease;
}
.rmb-value {
  font-family: var(--serif-head);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.rmb-pct {
  font-size: 0.78rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rmb-median {
  font-size: 0.72rem;
  color: var(--gold);
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.rec-verdict-cell {
  padding: 0.45rem 0.6rem;
  background: var(--light-accent);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.rec-verdict-cell .rec-action {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
}
/* 5-band verdict label colors. Driven by data-band on rec-action.
   "Your call" sits in the middle so the user knows the math doesn't
   strongly recommend either direction — they own the call.
   Each rule sets background + border + color together to fully
   override the legacy data-action styling above (which only knew
   "bid" / "pass" and would otherwise leave a stale bg behind). */
.rec-action[data-band="strong-bid"] {
  color: var(--white); background: #1f7a35; border-color: #1f7a35;
}
.rec-action[data-band="bid"] {
  color: var(--white); background: #4a7c5e; border-color: #4a7c5e;
}
.rec-action[data-band="marginal"] {
  color: var(--black); background: #f5d77a; border-color: #c79c2a;
}
.rec-action[data-band="lean-pass"] {
  color: var(--white); background: #b54a3d; border-color: #b54a3d;
}
.rec-action[data-band="pass"] {
  color: var(--white); background: #8b1a1a; border-color: #8b1a1a;
}
.rec-verdict-explainer {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.3;
}

/* POINT OF CONTENTION (2026-05-01): inline dissonance note styling.
   Toggle via SHOW_DISSONANCE_NOTE in app.js. Drop this block if the
   feature is reverted. Amber tone signals "context, not error." */
.rec-dissonance-note {
  margin: 0.4rem 0 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(154, 141, 180, 0.18);
  border-left: 3px solid var(--gold);
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1.35;
}
.rec-dissonance-note.hidden { display: none; }

/* First-pick note replaces Matchup Boost when roster has < 2 picks */
.rec-first-pick-note {
  margin: 0.4rem 0 0.2rem;
  padding: 0.5rem 0.75rem;
  background: rgba(154, 141, 180, 0.18);
  border-left: 3px solid var(--gold);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
}

/* ── Best Value + Best Fit widgets (center panel, above search) ─── */
/* Side-by-side mirror layout: Best Value (price-band, EV-sorted) on
   the left, Best Fit (fit-band, identity-sorted) on the right. */
.best-pair-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
}
.best-pair-row > .best-value-block {
  flex: 1 1 0;
  min-width: 0;  /* allow shrink so name col can ellipsis if needed */
  margin: 0;
}
.best-value-block {
  margin: 0.4rem 0 1rem;
  padding: 0.55rem 0.65rem;
  background: var(--light-accent);
  border-radius: 0.4rem;
}
.best-value-block h4 {
  margin: 0 0 0.4rem 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
}
.best-value-block h4 .hint {
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.25em;
  font-style: italic;
}
.best-value-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Shared grid template — header + rows MUST match exactly.
   Defined as a custom property so changes update both at once. */
.best-value-block { --bv-grid-cols: 1fr 2.4em 3.6em 3.6em 2.8em; }
.best-value-row {
  display: grid;
  grid-template-columns: var(--bv-grid-cols);
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.84rem;
  cursor: pointer;
  border-radius: 0.2rem;
}
.bv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Column headers — same grid + same padding as .best-value-row so
   labels align with column data. Padding mirrors the row padding
   exactly (0.4rem horizontal) since right-aligned labels are
   measured from the right edge of their column box. Team column
   intentionally unlabeled per homie. */
.bv-col-header {
  display: grid;
  grid-template-columns: var(--bv-grid-cols);
  gap: 0.3rem;
  padding: 0.15rem 0.4rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.15rem;
}
.bv-col-label {
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  font-weight: 600;
}
.best-value-row + .best-value-row {
  border-top: 1px dotted var(--rule);
}
.best-value-row:hover {
  background: var(--white);
}
.bv-name { color: var(--ink-soft); }
.bv-team {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.bv-identity, .bv-ev {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Value-grade letter chip in widget rows — color comes from the
   shared [data-tier="..."] palette already used by Build grade. */
.bv-ev[data-tier] {
  font-weight: 600;
  font-size: 0.82rem;
}
.bv-price {
  font-weight: 600;
  color: var(--black);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.best-value-empty {
  list-style: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 0.3rem 0;
}
.best-value-tier-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.2rem 0.15rem 0.2rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--rule);
}
.best-value-tier-header:first-child {
  border-top: none;
  margin-top: 0;
}
.bv-tier-label {
  font-family: var(--serif-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.bv-tier-hint {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
}
.best-value-tier-empty {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  padding-left: 0.5rem;
}
/* B11 2026-05-01: each Best Value tier is its own scrollable container.
   Was: all tiers in one flat list, header rows interleaved. */
.bv-tier-section {
  list-style: none;
  display: block;
  margin-top: 0.2rem;
}
.bv-tier-content {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 9rem;       /* ~3-4 rows visible; scroll for more */
  overflow-y: auto;
  border: 1px solid transparent;
  border-radius: 0.2rem;
}
.bv-tier-content:hover { border-color: var(--rule); }
/* B10 2026-05-01: Best Fit drops tier headers, single flat scroll list */
.bv-flat-scroll {
  list-style: none;
}
.bv-flat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 18rem;      /* ~7-9 rows visible; scroll for the rest */
  overflow-y: auto;
}

/* ── Team-Builder mini-rankings (ranks tab) ─────────────────── */
.ranks-search {
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  font-family: var(--serif-body);
  font-size: 0.92rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  background: var(--white);
  color: var(--black);
}
.ranks-table-wrap {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
  border-top: 1px solid var(--rule);
}
.ranks-table-wrap::-webkit-scrollbar { width: 8px; }
.ranks-table-wrap::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.ranks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.ranks-table thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  text-align: left;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  user-select: none;
}
.ranks-table thead th.num { text-align: right; }
.ranks-table thead th:hover { color: var(--gold); }
.ranks-table thead th.sort-asc,
.ranks-table thead th.sort-desc { color: var(--gold); }
.ranks-table thead th.sort-asc::after  { content: " ▲"; font-size: 0.7em; color: var(--gold); }
.ranks-table thead th.sort-desc::after { content: " ▼"; font-size: 0.7em; color: var(--gold); }
.ranks-table tbody td {
  padding: 0.32rem 0.5rem;
  border-bottom: 1px dotted var(--rule);
  color: var(--ink-soft);
}
.ranks-table tbody td.num { text-align: right; }
.ranks-table tbody tr.rank-row-mini {
  cursor: grab;
}
.ranks-table tbody tr.rank-row-mini:hover {
  background: var(--light-accent);
}
.ranks-table tbody tr.on-roster {
  background: var(--light-accent);
  opacity: 0.85;
}
.ranks-table tbody tr.on-roster .star {
  color: var(--magenta);
  margin-right: 0.15em;
}
.ranks-table tbody tr.dragging { opacity: 0.5; }

/* ── Team-Builder alt rosters tab ─────────────────────────────── */
.alt-controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.4rem 0 0.8rem;
}
.alts-list {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--white);
  padding-right: 0.2rem;
}
.alts-list::-webkit-scrollbar { width: 8px; }
.alts-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.alt-roster {
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  margin-bottom: 0.7rem;
  background: var(--white);
}
.alt-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: var(--light-accent);
  border-bottom: 1px solid var(--rule);
  border-radius: 0.4rem 0.4rem 0 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.alt-rank {
  font-weight: 700;
  color: var(--dark-accent);
  min-width: 1.6em;
}
.alt-spent { color: var(--ink-soft); }
.alt-id    { color: var(--ink-soft); }
.alt-use {
  margin-left: auto;
  padding: 0.2em 0.7em;
  font-size: 0.78rem;
}
.alt-body {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0.4rem;
}
.alt-player-row {
  display: grid;
  grid-template-columns: 1fr 2.4em 3em 3.5em;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.18rem 0.2rem;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.alt-player-row + .alt-player-row { border-top: 1px dotted var(--rule); }
.alt-pname  { color: var(--black); }
.alt-pteam  { color: var(--ink-soft); font-size: 0.74rem; }
.alt-pprice { color: var(--black); text-align: right; font-weight: 600; }
.alt-pid    { color: var(--ink-soft); text-align: right; font-size: 0.78rem; }

/* ── Expected Weekly Result panel (team-builder center) ─────── */
.expected-wins.hidden { display: none; }
.expected-wins .ew-headline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0.4rem 0 0.6rem;
}
.expected-wins .ew-headline > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.expected-wins .big-num[data-tier="strong"]  { color: var(--olive); }
.expected-wins .big-num[data-tier="neutral"] { color: var(--ink-soft); }
.expected-wins .big-num[data-tier="weak"]    { color: var(--coral); }
.ew-bars {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.ew-bar-row {
  display: grid;
  grid-template-columns: 3.2em 1fr 3em;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.ew-bar-cat { color: var(--ink-soft); font-weight: 600; }
.ew-bar-track {
  background: var(--rule);
  border-radius: 0.2rem;
  height: 0.55em;
  overflow: hidden;
}
.ew-bar-fill {
  height: 100%;
  background: var(--ink-soft);
  border-radius: 0.2rem;
  transition: width 180ms ease;
}
.ew-bar-fill[data-tier="strong"]  { background: var(--olive); }
.ew-bar-fill[data-tier="neutral"] { background: var(--dark-accent); }
.ew-bar-fill[data-tier="weak"]    { background: var(--coral); }
.ew-bar-pct { color: var(--ink-soft); text-align: right; }

/* ── Field Status / Pivot panel (live draft) ─────────────────── */
.field-status-panel {
  margin-top: 12px;
  border: 1px solid var(--dark-accent);
  border-radius: 4px;
  background: rgba(195, 139, 227, 0.06);
  font-size: 12px;
}
.field-status-panel.hidden { display: none; }
.field-status-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.field-status-header:hover { background: rgba(195, 139, 227, 0.10); }
.field-status-title {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--dark-accent);
  font-size: 11px;
}
.field-status-summary {
  color: var(--ink-soft);
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-status-chevron {
  color: var(--dark-accent);
  font-size: 10px;
  transition: transform 0.15s ease;
}
.field-status-panel:not(.collapsed) .field-status-chevron { transform: rotate(180deg); }
.field-status-body {
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(195, 139, 227, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-status-panel.collapsed .field-status-body { display: none; }
.field-status-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--dark-accent);
  margin-bottom: 4px;
}
.field-family-bars { display: flex; flex-direction: column; gap: 3px; }
.field-family-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.field-family-row .ff-name { color: var(--ink); }
.field-family-row .ff-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.field-family-row .ff-bar-fill {
  height: 100%;
  background: var(--dark-accent);
  border-radius: 2px;
}
.field-family-row .ff-bar-fill[data-strong="true"] { background: var(--magenta); }
.field-family-row .ff-pct {
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.field-your-viability {
  display: flex; flex-direction: column; gap: 3px; font-size: 11px;
}
.field-your-viability .fyv-name { color: var(--accent); font-weight: 600; }
.field-your-viability .fyv-pct {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.field-your-viability .fyv-delta { font-size: 10px; color: var(--ink-soft); }
.field-your-viability .fyv-delta[data-sign="neg"] { color: var(--coral); }
.field-your-viability .fyv-delta[data-sign="pos"] { color: var(--olive); }
/* Player-picker chip widget (A3 fix 2026-05-01 — trade + win-win
   tabs use this in place of the old "paste comma-separated nba_api_id"
   text inputs that nobody could feed). */
.ppc-wrap { position: relative; }
.ppc-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-family: var(--serif-body);
  font-size: 0.88rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
}
.ppc-suggestions {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 10;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ppc-suggestions:empty { display: none; }
.ppc-suggestion {
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.ppc-suggestion:hover { background: var(--light-accent); }
.ppc-sugg-name { color: var(--black); }
.ppc-sugg-meta { color: var(--ink-soft); font-size: 0.78rem; }
.ppc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.4rem;
  min-height: 1.2rem;
}
.ppc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--accent);
  border-radius: 3px;
  font-size: 0.82rem;
  color: var(--black);
}
.ppc-chip-x {
  cursor: pointer;
  padding: 0 5px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--ink-soft);
}
.ppc-chip-x:hover { color: var(--coral); background: rgba(255,255,255,0.4); }

/* "Best Builds" header above the candidate-card archetype chip row */
.cand-archetypes-label {
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
  display: block;
  font-size: 0.7rem;
}

/* Roster reliability + role-collapse exposure */
.field-your-reliability {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; align-items: center;
}
.field-your-reliability .muted { color: var(--ink-soft); font-style: italic; }
.field-your-reliability .fyr-grade {
  padding: 3px 7px; border-radius: 3px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.field-your-reliability .fyr-grade[data-grade="A"] { background: #4a7c5e; }
.field-your-reliability .fyr-grade[data-grade="B"] { background: var(--ink-soft); }
.field-your-reliability .fyr-grade[data-grade="C"] { background: var(--dark-accent); color: var(--text-primary); }
.field-your-reliability .fyr-grade[data-grade="D"] { background: var(--coral); }
.field-your-reliability .fyr-grade[data-grade="F"] { background: #8b1a1a; }
.field-your-reliability .fyr-role { padding: 3px 7px; background: var(--magenta); border-radius: 3px; }
.field-your-reliability .fyr-climate { padding: 3px 7px; background: rgba(255,255,255,0.05); color: var(--ink-soft); border-radius: 3px; font-style: italic; }
.field-alt-builds { display: flex; flex-direction: column; gap: 4px; }
.field-alt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 3px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
}
.field-alt-row .fa-name { color: var(--ink); }
.field-alt-row .fa-pct { font-variant-numeric: tabular-nums; }
.field-alt-row .fa-delta {
  font-size: 10px;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}
.field-team-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
}
.field-team-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px;
  font-size: 11px;
  padding: 2px 4px;
}
.field-team-row .ftr-team { color: var(--ink-soft); }
.field-team-row .ftr-strat { color: var(--ink); }
.field-team-row .ftr-strat .ftr-anchor { color: var(--accent); font-style: italic; }
.field-team-row .ftr-strat[data-unrevealed="true"] {
  color: var(--ink-soft);
  font-style: italic;
}


/* ── Cross-sport bar (added 2026-06-10 — drafter parity with projections
   sub-pages). Single thin strip above the topbar so users can hop to
   any sibling Resolve sport without back-tracking through sportshome.
   Active sport gets the gold treatment. */
.cross-sport-bar {
  display: flex; gap: 4px; align-items: center;
  padding: 6px 28px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; letter-spacing: .6px; text-transform: lowercase;
}
.cross-sport-bar a {
  color: var(--text-secondary);
  padding: 4px 10px; border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color .12s ease, background .12s ease;
}
.cross-sport-bar a:hover { color: var(--text-primary); background: var(--bg-inset); }
.cross-sport-bar a.active {
  color: var(--gold); background: var(--bg-inset); font-weight: 600;
}
.cross-sport-bar .sep { color: var(--text-faint); padding: 0 4px; }


/* === MOBILE DRAWER (added 2026-06-10 — sports-only port from sportshome).
   Hamburger appears <720px in the topbar; opens a right-side slide-in
   panel with cross-sport links. Active sport bakes in via the
   `data-active-sport` attr on .mobile-drawer (set per page). */
.hamburger {
  display: none; background: transparent; border: 0; color: var(--text-primary);
  width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: 6px; font-size: 22px; line-height: 1;
  transition: color .15s, background .15s;
}
.hamburger:hover, .hamburger:focus-visible { color: var(--gold); background: var(--bg-inset); }
.mobile-drawer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.mobile-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s;
}
.mobile-drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 90vw);
  background: var(--bg-page); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -20px 0 40px rgba(0,0,0,.5);
}
.mobile-drawer[aria-hidden="false"] .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.drawer-title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.drawer-close {
  background: transparent; border: 0; color: var(--text-secondary);
  width: 36px; height: 36px; cursor: pointer; border-radius: 6px;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.drawer-close:hover, .drawer-close:focus-visible { color: var(--gold); background: var(--bg-inset); }
.drawer-nav { flex: 1; padding: 4px 0; }
.drawer-section { padding: 6px 0; border-top: 1px solid var(--border); }
.drawer-section:first-child { border-top: 0; }
.drawer-section-label {
  display: block; padding: 12px 18px 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.drawer-link {
  display: flex; align-items: center;
  padding: 14px 18px; min-height: 48px;
  font-size: 15px; color: var(--text-secondary);
  text-decoration: none; text-transform: lowercase;
  transition: color .12s, background .12s;
}
.drawer-link:hover, .drawer-link:focus-visible { color: var(--gold); background: var(--bg-inset); }
.drawer-link.active { color: var(--gold); background: var(--bg-inset); font-weight: 600; }
.drawer-foot {
  display: flex; gap: 8px;
  padding: 16px 18px; border-top: 1px solid var(--border);
}
.drawer-foot a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 42px; border-radius: 6px;
  color: var(--text-secondary); border: 1px solid var(--border);
  text-decoration: none; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: lowercase;
  transition: color .15s, border-color .15s;
}
.drawer-foot a:hover, .drawer-foot a:focus-visible { color: var(--gold); border-color: var(--gold); }
@media (max-width: 720px) {
  .hamburger { display: flex; }
  .cross-sport-bar { display: none; }
  .sport-tabs { display: none; }
}
/* === end mobile drawer ============================================ */