/* ==========================================================================
   playbook.cash — app.css
   Component styles for the Games page: navbar, sub-header, game cards,
   picks strip + table, expanded detail, lineup tables, pitcher card.
   ========================================================================== */

/* ============ NAVBAR ============ */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: color-mix(in oklab, var(--bg-base) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-row {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.brand-glyph {
  max-width: 27px;
  position: relative;
}

.brand-glyph::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--bg-base);
  border-radius: 1.5px;
}

.brand-domain { color: var(--text-faint); font-weight: 500; }

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.nav-link-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}

.nav-link-item:hover { color: var(--text-primary); background: var(--row-hover); }
.nav-link-item.active { color: var(--text-primary); background: var(--row-hover); }

/* In-menu theme toggle: lives inside the primary nav but only shows in the
   open mobile dropdown (the responsive block reveals it). */
.nav-theme-toggle { display: none; }

.nav-search {
  position: relative;
  flex: 1;
  max-width: 340px;
  margin-left: auto;
}

.nav-search input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 7px 12px 7px 32px;
  border-radius: 7px;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nav-search input::placeholder { color: var(--text-faint); }

.nav-search input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Direct-child selector — the dropdown inside .nav-search has its own icons
   that shouldn't be absolutely positioned at the left of the input */
.nav-search > i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 13px;
}

.kbd-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  padding: 1px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-base);
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}

.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

.icon-btn:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Hamburger is mobile-only; the responsive block below reveals it. */
.nav-toggle { display: none; }

/* ============ SUB-HEADER ============ */
.subheader {
  position: sticky;
  top: 56px;
  z-index: 1020;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}

.subheader-row {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.date-arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.date-arrow:hover { color: var(--text-primary); background: var(--row-hover); }

.date-label {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  height: 30px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.date-label input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.today-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .15s ease;
}

.today-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

.filter-chips {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 3px;
}

.chip {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.chip:hover { color: var(--text-primary); }

.chip.active {
  color: var(--text-primary);
  background: var(--chip-active-bg);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* Visual separator inside a chip group (e.g. AVG vs HR algorithms). Not a .chip,
   so the generic single-active toggle ignores it. */
.chip-divider { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--border-subtle); }

/* Leading FontAwesome glyph inside a chip (e.g. search-page category chips). */
.chip .chip-icon { font-size: 10px; }

.live-count {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.live-count .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Slate summary — shared /games + /players right-side rollup. .ss-live and
   .ss-record are inline-flex so their inner "·" separators keep the same 6px
   rhythm as "N games · N picks"; the live dot pulses (the base .live-count .dot
   above is static, signalling slate size; this one signals games in progress). */
.slate-summary .ss-live,
.slate-summary .ss-record {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slate-summary .ss-live { color: var(--accent); }
.slate-summary .ss-live .dot { animation: pulse 1.5s ease-in-out infinite; }
.slate-summary .ss-pct { color: var(--text-muted); }

/* Hidden segments must win over the inline-flex above (equal specificity), so
   .ss-live / .ss-record collapse when toggled off. */
.slate-summary [hidden] { display: none !important; }

/* ============ GAME CARDS ============ */
.games-wrap { padding: 24px 0 60px; }

.game-card {
  --bar-tint: transparent;  /* default: neutral bar (scheduled, push, no picks) */
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Per-state bar tint — drives .gc-bar background gradient */
.game-card[data-state="live"]                      { --bar-tint: var(--accent); }
.game-card[data-state="pregame"]                   { --bar-tint: var(--pregame); }
.game-card[data-state="final"][data-result="win"]  { --bar-tint: var(--hit-color); }
.game-card[data-state="final"][data-result="loss"] { --bar-tint: var(--miss-color); }
/* final+push and final with no picks fall through to default (transparent) */

/* State rail — 3px on the left edge encodes game state at a glance */
.game-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border-subtle);
  transition: background .2s ease, opacity .2s ease;
  z-index: 1;
}
.game-card[data-state="live"]::before {
  background: linear-gradient(180deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 55%, transparent) 100%);
}
.game-card[data-state="pregame"]::before {
  background: linear-gradient(180deg,
    var(--pregame) 0%,
    color-mix(in oklab, var(--pregame) 55%, transparent) 100%);
}
.game-card[data-state="final"]::before {
  background: var(--border-strong);
}
.game-card[data-state="sched"]::before {
  background: var(--accent-line);
  opacity: 0.5;
}

.game-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--accent) 35%, transparent);
}
.game-card:hover::before { opacity: 1; }

.game-card.expanded {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.game-card.expanded::before {
  background: var(--accent);
  width: 3px;
}

.game-card:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.status-badge.live {
  color: var(--live-dot);
  background: color-mix(in oklab, var(--live-dot) 10%, transparent);
  border-color: color-mix(in oklab, var(--live-dot) 25%, transparent);
}

.status-badge.final { color: var(--text-primary); }

/* Pre-game (warmup / lineups set, no pitch yet): amber, distinct from the
   emerald scheduled rail and the red pulsing live badge. Static dot — the
   stillness vs. the live pulse reinforces "about to start" vs "playing". */
.status-badge.pregame {
  color: var(--pregame);
  background: color-mix(in oklab, var(--pregame) 10%, transparent);
  border-color: color-mix(in oklab, var(--pregame) 25%, transparent);
}

.status-badge .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live-dot);
  animation: pulse 1.6s ease-in-out infinite;
}

.status-badge .pre-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pregame);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(0.85); }
}

.team-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  position: relative;
}

.team-row + .team-row { border-top: 1px dashed var(--border-subtle); }

.team-row.dim .team-name,
.team-row.dim .team-record,
.team-row.dim .team-score {
  opacity: 0.55;
}

.team-row.winning::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.team-logo {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Team-color chip: --team-* set per data-team below; falls back to the
     neutral dark badge when a team has no mapping. */
  color: var(--team-fg, var(--text-primary));
  background: var(--team-bg, var(--bg-sunken));
  border: 1px solid var(--team-edge, var(--border-subtle));
  flex-shrink: 0;
}

/* Team-color chips (filled): consume the shared --team-bg/--team-fg palette
   defined once in theme.css (TEAM COLORS), keyed on data-team. --team-edge is a
   presentation default (subtle light edge on the dark chip). Dimmed slightly
   when a team has lost/is trailing so the colored chips don't fight the score. */
.team-logo[data-team],
.tc-logo[data-team],
.rm-team[data-team] { --team-edge: rgba(255, 255, 255, 0.16); }
.team-row.dim .team-logo[data-team] { opacity: 0.55; }

.team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-record {
  font-size: 11px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
}

.team-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 24px;
  text-align: right;
}

.team-score.muted { color: var(--text-faint); font-weight: 400; }

.team-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.2;
}

/* Single-row card footer — 3-column grid:
   venue (left, ellipsis) · pitcher matchup (centered) · weather (right). */
.gc-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 10px;
  background: var(--bg-inset);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  min-width: 0;
}

.gc-foot-venue {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-faint);
  min-width: 0;
  max-width: 100%;
}

.gc-foot-venue > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.gc-foot-pitchers {
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.gc-foot-weather {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.gc-foot-venue i,
.gc-foot-weather i {
  font-size: 9.5px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.gc-foot-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.gc-foot-vs {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

@media (max-width: 480px) {
  .gc-foot { gap: 6px; padding: 8px 12px 9px; }
  .gc-foot-venue, .gc-foot-weather { font-size: 10px; }
}

/* ============ PICKS BAR (card top — picks-led header) ============ */
/* Background tint is driven by --bar-tint, set per game-card state:
   sched/push = transparent (neutral), live = accent, win = hit, loss = miss.
   When --bar-tint is transparent, all color-mix calls collapse to transparent,
   producing a clean neutral bar. */
.gc-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 17px;  /* extra 3 left for the state rail */
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--bar-tint) 14%, transparent) 0%,
      color-mix(in oklab, var(--bar-tint) 5%, transparent) 35%,
      transparent 80%),
    var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 36px;
  transition: background .2s ease;
}

.game-card:hover .gc-bar {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--bar-tint) 22%, transparent) 0%,
      color-mix(in oklab, var(--bar-tint) 8%, transparent) 50%,
      transparent 85%),
    var(--bg-elevated);
}

.game-card.expanded .gc-bar {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--bar-tint) 30%, transparent) 0%,
      color-mix(in oklab, var(--bar-tint) 10%, transparent) 50%,
      transparent 85%),
    var(--bg-elevated);
}

.gc-bar.empty {
  background: var(--bg-inset);
}

.gb-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tier-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

/* Quality tiers (scheduled-game preview) */
.tier-dot.td-elite {
  background: var(--accent);
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 30%, transparent);
}
.tier-dot.td-high {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.tier-dot.td-medium {
  background: var(--text-faint);
  opacity: 0.55;
}

/* Live / Final states */
.tier-dot.td-hit {
  background: var(--hit-color);
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--hit-color) 28%, transparent);
}
.tier-dot.td-miss {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1.5px var(--miss-color);
  opacity: 0.75;
}
.tier-dot.td-in-play {
  background: var(--accent);
  animation: tier-dot-pulse 1.6s ease-in-out infinite;
}
.tier-dot.td-pending {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.tier-dot.td-push {
  background: var(--text-faint);
  opacity: 0.35;
}

@keyframes tier-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 0%, transparent);
    opacity: 0.55;
  }
}

.tier-overflow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-faint);
  margin-left: 2px;
  letter-spacing: -0.02em;
}

.gc-bar-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}

.gc-bar-sep {
  color: var(--text-faint);
  flex-shrink: 0;
  font-size: 11px;
}

.gc-bar-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.gc-bar .status-badge {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .gc-bar { gap: 7px; padding-left: 14px; }
  .gc-bar-count { font-size: 11px; }
  .gc-bar-detail { font-size: 10.5px; }
}

/* ============ TIER PILLS ============ */
.tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  letter-spacing: 0;
  white-space: nowrap;
}

.tier-pill.elite {
  background: var(--accent);
  color: var(--bg-base);
  border: 1px solid var(--accent);
}

.tier-pill.high {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-line);
}

.tier-pill.medium {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ============ PICKS TAB BADGE ============ */
.ed-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--tab-badge-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.ed-tab.active .tab-badge {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* ============ PICKS TABLE (tab) ============ */
.picks-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}

.picks-summary {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.picks-summary > span { white-space: nowrap; }
.picks-summary .sep { color: var(--text-faint); }

.picks-summary .live-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}

.picks-summary .live-flag .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.picks-summary .hit-pct {
  color: var(--text-primary);
  font-weight: 500;
}

.picks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.picks-table thead th {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
}

.picks-table thead th.num { text-align: right; }

.picks-table tbody td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.picks-table tbody tr:last-child td { border-bottom: none; }
.picks-table tbody tr { transition: background .12s ease; }
.picks-table tbody tr:hover { background: var(--row-hover); }
.picks-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.picks-table .tier-cell { width: 64px; }

.picks-table .target-cell .target-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 13px;
}
/* Team-color chip ahead of the player name — same .team-tag vocabulary as the
   players page / batting headers, nudged to sit on the text baseline. */
.picks-table .target-cell .target-name .team-tag {
  margin-right: 6px;
  vertical-align: 1px;
}

.picks-table .target-cell .pick-type {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

.picks-table .projection-cell {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  max-width: 240px;
}

.picks-table .line-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  white-space: nowrap;
}

.picks-table .status-cell {
  text-align: right;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

.picks-table .status-cell .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin-right: 4px;
}

.picks-table .status-cell .ico i { font-size: 12px; line-height: 1; }

.picks-table .status-cell .ctx {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.status-hit     { color: var(--hit-color); }
.status-miss    { color: var(--miss-color); }
.status-inplay  { color: var(--accent); }
.status-pending { color: var(--text-muted); }
.status-push    { color: var(--text-faint); }

/* Loading / empty / error note shown in the games grid */
.games-note {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 20px;
}

.status-inplay .ico .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.picks-mobile { display: none; }

@media (max-width: 767.98px) {
  .picks-table { display: none; }
  .picks-mobile { display: flex; flex-direction: column; gap: 8px; }
  .pmob-card {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-elevated);
  }
  .pmob-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .pmob-name { font-weight: 500; font-size: 13px; }
  .pmob-type { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
  .pmob-proj { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); margin-bottom: 8px; }
  .pmob-foot { display: flex; align-items: center; justify-content: space-between; }
  .pmob-foot .line { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); }
}

/* ============ EXPANDED DETAIL ============ */
.expanded-detail {
  background: var(--bg-elevated);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  overflow: hidden;
}

.ed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-subtle);
}

.ed-banner-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ed-banner-title .pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-primary);
  padding: 2px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.ed-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ed-close:hover { color: var(--text-primary); background: var(--row-hover); }

.ed-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}

.ed-divider { background: var(--border-subtle); }

.ed-side {
  padding: 18px 20px;
  min-width: 0;
}

.ed-team-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}

.ed-team-head .team-logo { width: 36px; height: 36px; font-size: 12px; }
.ed-team-head .team-name { font-size: 15px; font-weight: 600; }
.ed-team-head .team-record { font-size: 12px; }

.ed-team-head .ed-side-score {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ed-tabs {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 3px;
  margin-bottom: 12px;
}

.ed-tabs-main { margin-bottom: 0; }

.ed-toolbar {
  padding: 14px 20px 0;
  background: var(--bg-elevated);
}

.ed-pane-main { background: var(--bg-elevated); }
.ed-pane-padded { padding: 14px 20px 20px; }

.ed-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.ed-tab.active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 0 0 1px var(--border-subtle);
}

.ed-tab:hover:not(.active) { color: var(--text-primary); }

@media (max-width: 767.98px) {
  .ed-toolbar { padding: 12px 14px 0; }
  .ed-pane-padded { padding: 12px 14px 16px; }
}

/* ============ BATTING LINEUP TABLE ============ */
.lineup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.lineup-table thead th {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
}

.lineup-table thead th:nth-child(1),
.lineup-table thead th:nth-child(2),
.lineup-table thead th:nth-child(3) { text-align: left; }

.lineup-table tbody td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.lineup-table tbody tr:last-child td { border-bottom: none; }

.lineup-table tbody tr {
  position: relative;
  transition: background .12s ease;
}

.lineup-table tbody tr:hover { background: var(--row-hover); }
.lineup-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.lineup-table td.num,
.lineup-table th.num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.lineup-table .order-no {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-faint);
  width: 24px;
}

.lineup-table .player-cell { min-width: 130px; }

.lineup-table .player-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.lineup-table .pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  width: 32px;
}

.stat-hi { color: var(--accent); font-weight: 500; }

.l10-cell {
  width: 78px;
  text-align: right;
}

.l10-cell .l10-svg {
  display: inline-block;
  vertical-align: middle;
}

/* ============ PITCHER CARD ============ */
.pitcher-card {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 14px;
}

.pitcher-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pitcher-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.pitcher-hand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 6px;
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 3px;
}

.pitcher-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.pitcher-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}

.pitcher-stat {
  background: var(--bg-elevated);
  padding: 10px 12px;
}

.pitcher-stat .label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.pitcher-stat .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.pitcher-stat .value.hi { color: var(--accent); }

.pitcher-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.pitcher-trend .label {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============ MOBILE LINEUP CARDS ============ */
.lineup-mobile { display: none; }

/* Wide stat tables (Players pick sheet, Teams roster) scroll sideways on
   narrow screens instead of vanishing — see .lineup-scroll below. The
   table->stacked-card swap is specific to the Games detail panel, which is the
   only place that renders a .lineup-mobile companion. */
.lineup-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  .ed-pane-main .lineup-table { display: none; }
  .lineup-mobile { display: flex; flex-direction: column; gap: 8px; }
  .lineup-scroll .lineup-table { min-width: 600px; }

  .mob-player {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--bg-elevated);
  }

  .mob-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .mob-player-name { font-weight: 500; font-size: 13px; }
  .mob-player-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); }

  .mob-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }

  .mob-stats div span:first-child {
    color: var(--text-faint);
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .ed-grid { grid-template-columns: 1fr; }
  .ed-divider { display: none; }
  .ed-side + .ed-side { border-top: 1px solid var(--border-subtle); }
}

/* ============ SKELETON ============ */
.skeleton-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--row-hover), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============ EMPTY STATE ============ */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 36px;
  color: var(--text-faint);
  margin-bottom: 12px;
  display: block;
}

/* ============ TEAMS SEARCH (subheader) ============ */
.teams-search {
  position: relative;
  flex: 0 1 280px;
}
.teams-search input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 7px 12px 7px 32px;
  border-radius: 7px;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.teams-search input::placeholder { color: var(--text-faint); }
.teams-search input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.teams-search i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 12px;
}

/* ============ TEAMS GRID ============ */
.teams-wrap { padding: 24px 0 60px; }

.team-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}
.team-card:hover { border-color: var(--border-strong); }
.team-card.expanded {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.team-card:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}
/* The expanded roster panel reuses .expanded-detail / .ed-banner / .ed-pane-padded
   / .lineup-table — no panel-specific styles needed. */

.tc-header {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.tc-logo {
  width: 44px; height: 44px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Filled team-color chip; falls back to the neutral badge when unmapped. */
  color: var(--team-fg, var(--text-primary));
  background: var(--team-bg, var(--bg-sunken));
  border: 1px solid var(--team-edge, var(--border-subtle));
  flex-shrink: 0;
}
.tc-name {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-city {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.tc-nickname {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-league-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.tc-stat {
  background: var(--bg-elevated);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tc-stat .label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tc-stat .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.tc-stat .value.hi { color: var(--accent); }
.tc-stat .value.lo { color: var(--miss-color); }
.tc-stat .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.tc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-inset);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: auto;
}
.tc-bottom .label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tc-bottom .l10 {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  font-weight: 500;
}
.tc-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
}
.tc-streak.win {
  color: var(--hit-color);
  background: color-mix(in oklab, var(--hit-color) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--hit-color) 25%, transparent);
}
.tc-streak.loss {
  color: var(--miss-color);
  background: color-mix(in oklab, var(--miss-color) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--miss-color) 25%, transparent);
}

@media (max-width: 767.98px) {
  .tc-header { gap: 10px; padding: 12px; }
  .tc-logo { width: 38px; height: 38px; font-size: 11px; }
  .tc-stat { padding: 10px 12px; }
}

/* ============ PLAYERS PAGE — pick sheet ============ */
.live-count .sep { color: var(--text-faint); }
.live-count .lc-num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.date-label .fa-caret-down { color: var(--text-faint); font-size: 11px; margin-left: 6px; }

.players-wrap {
  padding: 20px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* roster card */
.roster {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.roster:hover { border-color: var(--border-strong); }

.roster-head {
  height: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-subtle);
}

.roster-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
}
.roster-matchup {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Each side is a filled chip in its team color (shared --team-bg/--team-fg),
   matching the .team-logo chips on /games. Falls back to a neutral badge. */
.roster-matchup .rm-team[data-team] {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--team-fg, var(--text-primary));
  background: var(--team-bg, var(--bg-sunken));
  border: 1px solid var(--team-edge, var(--border-subtle));
}
.roster-venue {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dot-sep { color: var(--text-faint); margin: 0 2px; }

.roster-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.roster-score {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.roster-score .away,
.roster-score .home { min-width: 18px; text-align: center; }
.roster-score .losing { color: var(--text-faint); font-weight: 500; }
.roster-score .em-dash { color: var(--text-faint); font-weight: 400; }

/* ============ PLAYERS — pick-first player row cards ============
   One full-width card per picked player, stacked inside the per-game .roster
   section, beneath a single shared column header (.pp-colhead) so the stat labels
   aren't repeated on every row. Reads left→right: Identity | AVG OPS HR RBI |
   L10 strips | The Call (the bet, anchored right). Reuses the .team-tag /
   .tier-pill / .pick-stack atoms; scoped to .players-wrap. */
.players-wrap .pp-list { display: flex; flex-direction: column; }

/* Two-group row: identity (Tm + Player) hugs the left; the whole stats + picks
   cluster is a FIXED-width block hugging the right, with the flexible space
   between them. The right cluster's tracks are all fixed, so the header and every
   card resolve to identical widths and line up exactly — no fr math involved. */
.players-wrap .pp-colhead,
.players-wrap .pp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: 19px;    /* clears the 3px tier rail */
  padding-right: 16px;
}

/* Left group — Tm (fixed) + Player, so chips and names sit under their headers.
   Hugs its content and may shrink (the name ellipsizes). */
.players-wrap .pp-left {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 0 1 auto;
}

/* Right group — the fixed stats cluster: AVG OPS HR RBI | L10 Hits | L10 HRs.
   Each pick rides inside its L10 cell, so the L10 tracks are wide enough for the
   strip + the pick badge. Identical widths in the header and every card. */
.players-wrap .pp-right {
  display: grid;
  grid-template-columns: 54px 58px 38px 44px 185px 185px;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Column header — labelled once per game section. */
.players-wrap .pp-colhead {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.players-wrap .pp-ch-k {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.players-wrap .pp-colhead .num { justify-self: end; }

.players-wrap .pp-card {
  position: relative;
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .12s ease;
}
.players-wrap .pp-card:last-child { border-bottom: none; }
.players-wrap .pp-card:hover { background: var(--row-hover); }

/* Left tier rail — same vocabulary as .pick-card::before. */
.players-wrap .pp-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-strong);
}
.players-wrap .pp-card.elite::before  { background: var(--accent); }
.players-wrap .pp-card.high::before   { background: var(--accent-line); }
.players-wrap .pp-card.medium::before { background: var(--border-strong); }

/* Resolved rail — once the player's picks settle, the tier rail flips to the
   result: green won / red lost / grey DNP. Split rail when the two picks
   disagree: top half = Hit pick, bottom half = HR pick (the same order as the
   L10 rows); single-pick players resolve both vars to one color (solid bar).
   Classes set by pickPlayerCard (app.js); pending cards keep the tier rail. */
.players-wrap .pp-card.rt-hit  { --rail-top: var(--hit-color); }
.players-wrap .pp-card.rt-miss { --rail-top: var(--miss-color); }
.players-wrap .pp-card.rt-push { --rail-top: var(--text-faint); }
.players-wrap .pp-card.rb-hit  { --rail-bot: var(--hit-color); }
.players-wrap .pp-card.rb-miss { --rail-bot: var(--miss-color); }
.players-wrap .pp-card.rb-push { --rail-bot: var(--text-faint); }
.players-wrap .pp-card.res-settled::before {
  background: linear-gradient(to bottom, var(--rail-top) 0 50%, var(--rail-bot) 50% 100%);
}

/* Identity — Team tag (col 1) + Player block (col 2) inside the left group, so
   the team chips and names line up under their "Tm" / "Player" headers. */
.players-wrap .pp-left .team-tag { justify-self: start; }
.players-wrap .pp-player { min-width: 0; }
.players-wrap .pp-name-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.players-wrap .pp-order { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-faint); flex-shrink: 0; }
.players-wrap .pp-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.players-wrap .pp-id-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.players-wrap .pp-pos { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.02em; }
.players-wrap .pp-side { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.players-wrap .pp-side-away { color: var(--text-faint); }
.players-wrap .pp-side-home { color: var(--accent); }

/* Stat values — right-aligned number columns under their header labels. data-k
   carries each label for the stacked mobile layout (header hidden there). */
.players-wrap .pp-stat-v {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.players-wrap .pp-stat-v.is-hi { color: var(--accent); }

/* L10 cell — the sparkline strip on the left with its pick (if any) inline to the
   right: the recent-form evidence sitting beside the bet. flex-wrap lets the pick
   drop under the strip when the cell is narrow (mobile). */
.players-wrap .pp-form {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.players-wrap .pp-form .l10-svg { display: block; flex-shrink: 0; }
.players-wrap .pp-spark-empty { color: var(--text-faint); font-size: 11px; }

/* team tag (which side the picked player is on) */
.team-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.team-tag.side-home { color: var(--text-primary); border-color: var(--border-strong); }
/* Team-color accent: a left edge bar in the club's brand color (shared
   --team-bg from theme.css). Accent, not a filled chip — keeps the dense Tm
   column legible on both themes. Falls back to the plain border when blank. */
.team-tag[data-team] { border-left: 3px solid var(--team-bg, var(--border-subtle)); padding-left: 4px; }

.pick-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pick-tag + .pick-tag { margin-top: 3px; }
.pick-tag.st-hit  { color: var(--hit-color); }
.pick-tag.st-miss { color: var(--miss-color); }
.pick-tag.st-push { color: var(--text-faint); }

/* A pick column: the bet badge stacked over its own outcome line. */
.pick-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pick-outcome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.pick-outcome i { font-size: 9px; }
.pick-outcome.hit  { color: var(--hit-color); }
.pick-outcome.miss { color: var(--miss-color); }
.pick-outcome.push { color: var(--text-faint); }

.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.result-chip i { font-size: 10px; }
.result-chip.hit  { color: var(--hit-color); }
.result-chip.miss { color: var(--miss-color); }
.result-chip.push { color: var(--text-faint); }
.result-muted { color: var(--text-faint); }

/* global site footer — rendered on every page by layout/footer.php.
   Reuses the .brand atom (same logo image as the navbar) + .mono. */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: 28px;
  padding: 22px 0 30px;
}
.site-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}
.sf-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer .brand { font-size: 12.5px; }
.site-footer .brand-glyph { max-width: 18px; }
.sf-tagline {
  font-size: 11.5px;
  color: var(--text-faint);
}
.sf-meta {
  font-size: 11px;
  color: var(--text-faint);
}

/* responsive */
@media (max-width: 991.98px) {
  .roster-head { padding: 0 12px; gap: 10px; }
  /* Below the desktop grid's comfortable width, drop the shared header and stack
     each card into three tight rows built for thumb-scroll scanning:
       1. identity — Tm + name + pos/side, one line
       2. season stats — one line of label·value pairs
       3+4. one full-width row per L10 strip — fixed label | strip | its pick
            anchored right, so the strips align straight down the page
     Per-cell labels come back via the data-k ::before. */
  .players-wrap .pp-colhead { display: none; }
  .players-wrap .pp-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Identity collapses to one baseline: name row + meta share the line. */
  .players-wrap .pp-player { display: flex; align-items: baseline; gap: 8px; }
  .players-wrap .pp-id-meta { margin-top: 0; flex-shrink: 0; }

  /* Season stats — just numbers: a single line, labels inline and faint. */
  .players-wrap .pp-right {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    align-items: center;
    gap: 9px 10px;
  }
  .players-wrap .pp-stat-v { justify-self: start; font-size: 12.5px; }
  .players-wrap .pp-stat-v::before,
  .players-wrap .pp-form::before {
    content: attr(data-k);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
  }
  .players-wrap .pp-stat-v::before { margin-right: 5px; }

  /* Each L10 cell becomes a full-width aligned row: fixed-width label, the
     strip, then the pick (chip + outcome) hugging the right edge. */
  .players-wrap .pp-right .pp-form {
    grid-column: 1 / -1;
    justify-self: stretch;   /* fill the row so the pick can anchor right */
    flex-wrap: nowrap;
    gap: 8px;
  }
  .players-wrap .pp-form::before { width: 52px; flex-shrink: 0; }
  .players-wrap .pp-form .l10-svg { width: 84px; height: 16px; }
  .players-wrap .pp-form .pick-stack {
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .players-wrap .pp-form .pick-tag + .pick-outcome,
  .players-wrap .pp-form .pick-tag + .lineup-badge { margin-top: 0; }

  /* The tier pill folds into the bet chip itself: chip color = pick strength
     (the .t-* class set by pickCell, borrowing the tier-pill recipes). The
     card's left rail already echoes the strongest tier, the outcome line keeps
     the win/loss color — nothing is lost, one element less in the row. */
  .players-wrap .pp-card .pick-tag .tier-pill { display: none; }
  .players-wrap .pp-card .pick-tag {
    padding: 3px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
  }
  .players-wrap .pp-card .pick-tag.t-elite  { color: var(--bg-base); background: var(--accent); border-color: var(--accent); }
  .players-wrap .pp-card .pick-tag.t-high   { color: var(--accent); border-color: var(--accent-line); }
  .players-wrap .pp-card .pick-tag.t-medium { color: var(--text-muted); }
  .players-wrap .pp-card .pick-tag.t-elite .cart-add {
    color: var(--bg-base);
    border-color: color-mix(in srgb, var(--bg-base) 45%, transparent);
  }

  /* Comfier thumb target for the add-to-book toggle. */
  .players-wrap .pp-card .cart-add { width: 24px; height: 24px; font-size: 10px; }
}
@media (max-width: 767.98px) {
  .roster-head {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "badge   right"
      "meta    meta";
    gap: 6px;
    padding: 10px 12px;
  }
  .roster-head > .status-badge { grid-area: badge; }
  .roster-right { grid-area: right; }
  .roster-meta {
    grid-area: meta;
    flex-wrap: wrap;
    gap: 6px;
  }
  .roster-venue { white-space: normal; }
}

/* ============ RESPONSIVE NAV ============ */
@media (max-width: 767.98px) {
  /* Single 56px row preserved (the subheader sticks at top:56px). The primary
     nav collapses behind the hamburger so the search bar owns the row. */
  .nav-row { gap: 10px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Logo only on mobile — drop the wordmark to free space for the search bar. */
  .brand-text { display: none; }
  /* Theme toggle moves out of the top bar into the dropdown menu to save space. */
  .icon-btn.theme-toggle { display: none; }

  .nav-search {
    max-width: none;
    flex: 1;
    min-width: 0;
    margin-left: 0;   /* drop the desktop auto-margin so flex:1 can expand it */
  }
  /* 16px input stops iOS Safari from auto-zooming on focus; roomier tap height. */
  .nav-search input { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
  /* ⌘K is meaningless on touch. */
  .kbd-hint { display: none; }

  /* Menu open: nav links drop as a full-width panel beneath the header. */
  .nav-shell.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.3);
  }
  .nav-shell.nav-open .nav-link-item { padding: 11px 12px; font-size: 15px; border-radius: 8px; }
  /* The in-menu theme toggle, set off from the nav links by a divider. */
  .nav-shell.nav-open .nav-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 11px 12px;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .nav-shell.nav-open .nav-theme-toggle:hover { color: var(--text-primary); }
  .nav-shell.nav-open .nav-theme-toggle .theme-icon { width: 18px; text-align: center; }

  .subheader-row { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px; }
  .live-count { width: 100%; margin-left: 0; }
}

/* ============ GLOBAL SEARCH — autocomplete dropdown ============ */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.05),
    0 8px 24px -6px rgba(0,0,0,0.12),
    0 24px 48px -12px rgba(0,0,0,0.10);
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
  font-size: 13px;
}

[data-bs-theme="dark"] .search-dropdown {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.4),
    0 8px 24px -6px rgba(0,0,0,0.5),
    0 24px 48px -12px rgba(0,0,0,0.4);
}

.sd-section + .sd-section { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 4px; }

.sd-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sd-section-head i { font-size: 10px; }

.sd-section-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-faint);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0 5px;
  letter-spacing: 0;
  text-transform: none;
}

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

.sd-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .1s ease;
  min-width: 0;
}

.sd-item.highlighted {
  background: var(--accent-soft);
}

.sd-item-label {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.sd-item.highlighted .sd-item-label { color: var(--accent); }

.sd-item-sub {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.sd-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}

.sd-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.sd-footer:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.sd-footer i { font-size: 10px; transition: transform .15s ease; }
.sd-footer:hover i { transform: translateX(2px); }

/* Subtle loading indicator — animate the search icon to accent color */
.nav-search.searching > i {
  color: var(--accent);
  animation: search-pulse 1s ease-in-out infinite;
}

@keyframes search-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ============ SEARCH RESULTS PAGE (command-palette surface) ============ */

/* subheader extras (chips reuse the shared .chip / .chip-count / .chip-icon) */
.query-meta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.query-meta .qm-term { color: var(--text-primary); font-weight: 500; }
.query-meta .qm-sep { color: var(--text-faint); }
.kbd-legend {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-faint); white-space: nowrap;
}
.kbd-legend .kc { display: inline-flex; align-items: center; gap: 4px; }
.kbd-legend .key {
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: 3px;
  background: var(--bg-elevated); color: var(--text-muted); font-size: 10px; line-height: 1;
}

.search-wrap { padding: 14px 0 80px; }
.results-surface {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  max-width: 860px; margin: 0 auto;
}
/* round outer corners without an overflow-clip ancestor (which would scope the
   sticky group headers to the surface instead of the viewport) */
.results-surface > .group-block:first-child .group-head { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.results-surface > .group-block:last-child .group-rows,
.results-surface > .group-block:last-child .group-empty { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.group-block[hidden] { display: none; }

/* group header (slim, sticky under nav + subheader) */
.group-head {
  position: sticky; top: 108px; z-index: 6;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: color-mix(in oklab, var(--bg-elevated) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.group-block + .group-block .group-head { border-top: 1px solid var(--border-subtle); }
.group-head .gh-ico { width: 16px; text-align: center; color: var(--text-faint); font-size: 12px; }
.group-head .gh-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.group-head .gh-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500; color: var(--text-faint);
  padding: 1px 6px; border: 1px solid var(--border-subtle);
  border-radius: 999px; background: var(--bg-inset); line-height: 1.4;
}

/* result row */
.group-rows { padding: 3px; }
.result-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center; column-gap: 11px;
  padding: 6px 9px; border-radius: 6px;
  text-decoration: none; color: var(--text-primary);
  cursor: pointer; position: relative; scroll-margin-top: 156px;
}
.result-row:hover { background: var(--row-hover); }
.result-row.is-active { background: var(--active-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.result-row.is-active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: var(--accent);
}
.rr-ico {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--bg-inset);
  border: 1px solid var(--border-subtle); color: var(--text-muted);
  font-size: 11px; flex-shrink: 0;
}
.result-row.is-active .rr-ico { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.rr-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rr-label {
  font-size: 13.5px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}
.rr-label mark { background: transparent; color: var(--accent); font-weight: 700; padding: 0; }
.rr-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.01em;
  white-space: nowrap; flex-shrink: 0;
}
.rr-sub mark { background: transparent; color: var(--text-muted); font-weight: 600; padding: 0; }
.rr-right { display: inline-flex; align-items: center; gap: 9px; justify-self: end; flex-shrink: 0; }
.rr-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); padding: 2px 6px;
  border: 1px solid var(--border-subtle); border-radius: 4px; line-height: 1;
}
.rr-enter {
  display: none; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--accent); align-items: center; gap: 5px; white-space: nowrap;
}
.rr-enter .ekey {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line); border-radius: 3px; font-size: 10px; background: var(--accent-soft);
}
.result-row.is-active .rr-type { display: none; }
.result-row.is-active .rr-enter { display: inline-flex; }

/* inline partial-empty */
.group-empty { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 12.5px; color: var(--text-faint); }
.group-empty .ge-ico { font-size: 11px; opacity: .7; }
.group-empty .ge-term { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* full empty states (landing / no-results) */
.state-card { max-width: 860px; margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; }
.state-inner { padding: 52px 28px 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.state-glyph {
  width: 44px; height: 44px; margin-bottom: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--bg-inset); color: var(--text-faint); font-size: 17px;
}
.state-title { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; }
.state-title .st-term { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 600; }
.state-sub { font-size: 13px; color: var(--text-muted); max-width: 440px; line-height: 1.55; margin-bottom: 22px; text-wrap: pretty; }
.inline-key {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 1px 5px; border: 1px solid var(--border-subtle);
  border-radius: 4px; color: var(--text-muted); background: var(--bg-inset);
}
.suggest-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 12px; }
.suggest-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; }
.suggest {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px; border: 1px solid var(--border-subtle);
  border-radius: 7px; background: var(--bg-base); color: var(--text-primary);
  text-decoration: none; cursor: pointer; font-size: 12.5px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.suggest:hover { border-color: var(--accent-line); background: var(--row-hover); transform: translateY(-1px); }
.suggest .sg-ico {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--bg-inset);
  border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 10px;
}
.suggest .sg-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); }

@media (max-width: 767.98px) {
  .group-head { top: 0; }
  .rr-sub, .rr-type { display: none; }
  .result-row.is-active .rr-enter { display: none; }
  .kbd-legend { display: none; }
  .query-meta { margin-left: 0; }
}

/* ============ ERROR PAGES (404 / 500) ============ */
.error-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 0 80px;
}

.error-state {
  text-align: center;
  max-width: 420px;
}

.error-code {
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.85;
}

.error-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 14px 0 6px;
}

.error-msg {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.error-msg a {
  color: var(--accent);
  text-decoration: none;
}

.error-msg a:hover { text-decoration: underline; }

/* ==========================================================================
   LANDING / HOME PAGE
   Hero, "receipts" grading strip, pick-card teaser, value props, footer.
   Reuses .page-container, .tier-pill and .mono/.num; nav chrome comes from
   header.php. Only the genuinely-new landing components live here.
   ========================================================================== */

/* ============ BUTTONS (general-purpose CTA) ============ */
.btn-pb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn-pb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-pb.primary {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}
.btn-pb.primary:hover {
  background: color-mix(in oklab, var(--accent) 90%, white);
  border-color: color-mix(in oklab, var(--accent) 90%, white);
}
.btn-pb.secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn-pb.secondary:hover { border-color: var(--border-strong); background: var(--row-hover); }
.btn-pb.lg { font-size: 14px; padding: 11px 18px; }
.btn-pb .arrow { font-size: 12px; opacity: .9; }

/* ============ LANDING HERO ============ */
.lp-hero {
  padding: 67px 0 64px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .lp-hero { padding: 56px 0 40px; }
}
.lp-hero-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 50% 0;
  opacity: .35;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 0%, transparent 75%);
}
.lp-hero-inner { position: relative; max-width: 880px; }

/* receipts strip — yesterday's grading at a glance */
.receipts {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px 7px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  line-height: 1;
  color: var(--text-muted);
}
.receipts .r-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--text-faint);
}
.receipts .r-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.r-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.r-dot.hit {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.r-dot.miss { background: var(--miss-color); opacity: .55; }
.r-dot.pending {
  background: transparent;
  border: 1px dashed var(--border-strong);
  width: 8px; height: 8px;
}
.receipts .r-sep {
  width: 1px; height: 12px;
  background: var(--border-subtle);
}
.receipts .r-record { color: var(--text-primary); }
.receipts .r-pct { color: var(--accent); }
.receipts .r-delta { color: var(--hit-color); }
@media (max-width: 575.98px) {
  .receipts { gap: 10px; font-size: 11px; padding: 6px 10px 6px 8px; }
  .receipts .r-hide-sm { display: none; }
}

.lp-hero h1 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 22px 0 18px;
  color: var(--text-primary);
  text-wrap: balance;
}
.lp-hero h1 .accent { color: var(--accent); }
@media (max-width: 991.98px) { .lp-hero h1 { font-size: 44px; } }
@media (max-width: 575.98px) { .lp-hero h1 { font-size: 34px; } }

.lp-hero-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.lp-hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-hero-meta {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lp-hero-meta .sep { color: var(--border-strong); }

/* ============ LANDING SECTION HEADERS ============ */
.lp-section { padding: 24px 0 32px; }
.lp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-section-head .left { display: flex; align-items: baseline; gap: 12px; }
.lp-section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}
.lp-section-sub {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.lp-view-all {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}
.lp-view-all:hover { color: var(--text-primary); }
.lp-view-all .arrow { font-size: 11px; transition: transform .15s ease; }
.lp-view-all:hover .arrow { transform: translateX(2px); }

/* ============ PICK CARDS (teaser) ============ */
.pick-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 18px 18px 16px 21px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.pick-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-strong);
  transition: background .18s ease;
}
.pick-card.elite::before  { background: var(--accent); }
.pick-card.high::before   { background: var(--accent-line); }
.pick-card.medium::before { background: var(--border-strong); }
.pick-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--accent) 35%, transparent);
}
.pick-card:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pc-time {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
/* Once first pitch is thrown the time badge flips to a pulsing red LIVE state,
   reusing the same --live-dot + pulse vocabulary as the /games status badge. */
.pc-time.is-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--live-dot);
  background: color-mix(in oklab, var(--live-dot) 10%, transparent);
  border-color: color-mix(in oklab, var(--live-dot) 25%, transparent);
}
.pc-time .pc-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live-dot);
  animation: pulse 1.6s ease-in-out infinite;
}
.pc-meta { display: flex; align-items: center; gap: 8px; }

/* Gametime lineup-confirmation badge (teaser card, /games status cell, /players
   pick cell). 'out' picks are filtered server-side, so only two variants render. */
.lineup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.lineup-badge.confirmed {
  color: var(--hit-color);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.lineup-badge.pending {
  color: var(--pregame);
  background: color-mix(in oklab, var(--pregame) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--pregame) 32%, transparent);
}

/* Win/loss pill for a RESOLVED teaser pick — same shape as .lineup-badge, colored
   off the shared --hit-color/--miss-color tokens. Rendered by pick_result_badge();
   only present once the game is over and the pick is graded. */
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.result-badge.hit {
  color: var(--hit-color);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.30);
}
.result-badge.miss {
  color: var(--miss-color);
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.28);
}
.result-badge.push {
  color: var(--text-faint);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
}
.pc-target {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  line-height: 1.25;
}
.pc-team {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 7px;
  vertical-align: middle;
}
/* Team-color accent: a small dot in the team's color before the abbreviation. */
.pc-team[data-team]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--team-bg, currentColor);
  margin-right: 5px;
  vertical-align: middle;
}
.pc-home, .pc-away {
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.pc-home { color: var(--accent); }
.pc-away { color: var(--text-faint); }
.pc-type {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.pc-why {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-faint);
  padding: 9px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  line-height: 1.45;
}
/* Last-10 hit-form strip — a pc-foot item (label over the shared l10 sparkline,
   hydrated by JS) stacked to match the stat/confidence columns beside it. */
.pc-l10-spark .l10-svg { display: block; }

.pc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}
.pc-l10-label, .pc-line-label, .pc-conf-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  display: block;
  margin-bottom: 2px;
}
.pc-line-val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.pc-conf { text-align: right; }
.pc-conf-val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pc-conf-val.hi { color: var(--hit-color); }
.pc-conf-val.lo { color: var(--text-muted); }

/* ============ VALUE PROPS ============ */
.vp-row { padding-top: 16px; }
.vp-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 4px;
}
.vp-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  font-size: 14px;
}
.vp-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.vp-text strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* ============ LANDING DIVIDER ============
   (The site footer moved to the shared layout/footer.php + .site-footer.) */
.lp-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0;
}

/* ============ TRENDS PAGE ============
   Net-new components for /trends, all scoped under .trends-wrap so they can't
   touch other pages. Reuses existing atoms (.tier-pill, .filter-chips/.chip,
   .live-count, .l10-cell, .stat-hi, .mono) and the theme tokens. There is no
   odds feed, so the track record is reported as hit rate + W–L–P + net
   (hits − misses) — "Net", never units/ROI. */
.trends-wrap { padding: 22px 0 60px; display: flex; flex-direction: column; gap: 28px; }

/* Section header */
.trends-wrap .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.trends-wrap .section-title { font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; margin: 0; display: inline-flex; align-items: center; gap: 9px; }
.trends-wrap .section-title .ico { font-size: 13px; color: var(--accent); width: 18px; display: inline-flex; align-items: center; justify-content: center; }
.trends-wrap .section-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* Card primitive */
.trends-wrap .pb-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.trends-wrap .pb-card.is-interactive:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--accent) 35%, transparent); }
.trends-wrap .card-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; }
.trends-wrap .card-head .ch-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 8px; }
.trends-wrap .card-head .ch-title .ico { color: var(--accent); font-size: 12px; }
.trends-wrap .card-head .ch-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; }

/* Per-family panels (AVG / HR): headline + tier bands */
.trends-wrap .fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trends-wrap .fam-panel { padding: 15px 18px 10px; }
.trends-wrap .fam-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title rate" "sub rate"; align-items: baseline; column-gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.trends-wrap .fam-title { grid-area: title; font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.trends-wrap .fam-desc { color: var(--text-faint); font-weight: 500; }
.trends-wrap .fam-sub { grid-area: sub; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 0.01em; }
.trends-wrap .fam-rate { grid-area: rate; align-self: center; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.02em; white-space: nowrap; text-align: right; }
.trends-wrap .fam-rate .delta-up { font-size: 11px; color: var(--hit-color); margin-left: 2px; }
.trends-wrap .fam-rate .delta-down { font-size: 11px; color: var(--miss-color); margin-left: 2px; }
.trends-wrap .fam-tier { display: grid; grid-template-columns: 78px 1fr 50px 44px; align-items: center; column-gap: 12px; padding: 9px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.trends-wrap .fam-tier + .fam-tier { border-top: 1px solid var(--border-subtle); }
.trends-wrap .ft-label { color: var(--text-muted); }
.trends-wrap .ft-hit { color: var(--text-primary); font-weight: 500; text-align: right; }
.trends-wrap .ft-picks { color: var(--text-faint); text-align: right; }
.trends-wrap .hit-bar { height: 4px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; position: relative; display: block; }
.trends-wrap .hit-bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; }
@media (max-width: 767.98px) { .trends-wrap .fam-grid { grid-template-columns: 1fr; } }

/* Track-record chart */
.trends-wrap .chart-card { padding: 0; margin-top: 14px; }
.trends-wrap .chart-card .card-head { padding: 16px 18px 8px; }
.trends-wrap .chart-wrap { position: relative; height: 280px; padding: 0 8px 12px; }
.trends-wrap .chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.trends-wrap .chart-axis { display: flex; justify-content: space-between; padding: 0 18px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.trends-wrap .chart-footnote { padding: 10px 18px 14px; border-top: 1px solid var(--border-subtle); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); letter-spacing: 0.01em; background: var(--bg-inset); display: flex; align-items: center; gap: 10px; }
.trends-wrap .chart-footnote .fn-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-soft); flex-shrink: 0; }
/* Chart-card header right side: meta caption + Bar|Line toggle */
.trends-wrap .ch-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.trends-wrap .ch-right .ch-meta { margin-left: 0; }
.trends-wrap .ch-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 7px; }
.trends-wrap .ch-tog { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); padding: 4px 10px; border-radius: 5px; transition: background .12s ease, color .12s ease; }
.trends-wrap .ch-tog:hover { color: var(--text-primary); }
.trends-wrap .ch-tog.active { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 575.98px) { .trends-wrap .ch-right .ch-meta { display: none; } }

/* Dense tables (leaderboards) */
.trends-wrap .dense-table-wrap { overflow-x: auto; }
.trends-wrap .dense-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.trends-wrap .dense-table thead th { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); text-align: left; background: var(--bg-inset); white-space: nowrap; }
.trends-wrap .dense-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; }
.trends-wrap .dense-table tbody tr:last-child td { border-bottom: none; }
.trends-wrap .dense-table tbody tr { transition: background .12s ease; }
.trends-wrap .dense-table tbody tr:hover { background: var(--row-hover); }
.trends-wrap .dense-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.trends-wrap .dense-table td.num, .trends-wrap .dense-table th.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.trends-wrap .dense-table .pl-name { color: var(--text-primary); font-weight: 500; }
.trends-wrap .dense-table .team-abbr { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; text-transform: uppercase; }
/* Team-color accent: a left bar in the team's color (filled swatch, legible on
   both themes) rather than tinting the near-black team text. */
.trends-wrap .dense-table .team-abbr[data-team] { border-left: 2px solid var(--team-bg, transparent); padding-left: 6px; }
.trends-wrap .dense-table .rank-no { font-family: 'JetBrains Mono', monospace; color: var(--text-faint); font-size: 11.5px; width: 28px; text-align: right; }
.trends-wrap .tr-empty { text-align: center; color: var(--text-muted); padding: 18px 12px !important; }

/* Leaderboard cell accents */
.trends-wrap .gap-down { color: var(--miss-color); font-weight: 500; }
.trends-wrap .due-tag { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 2px 6px; border-radius: 4px; text-transform: lowercase; letter-spacing: 0.04em; line-height: 1; }
.trends-wrap .trend-arrow { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
.trends-wrap .trend-arrow.up { color: var(--hit-color); }
.trends-wrap .trend-arrow.down { color: var(--miss-color); }
.trends-wrap .streak-cell { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.trends-wrap .streak-cell .fa-fire, .trends-wrap .streak-cell .fa-arrow-rotate-left { font-size: 10px; }
.trends-wrap .last-hr { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 11.5px; }
.trends-wrap .last-hr.today { color: var(--accent); }
.trends-wrap .k-trend-now { color: var(--accent); font-weight: 500; }
.trends-wrap .k-trend-base { color: var(--text-muted); }
.trends-wrap .dim { color: var(--text-faint); }

@media (max-width: 767.98px) { .trends-wrap { gap: 22px; } }

/* ============ PICK CART ============ */
/* Navbar toggle + count badge (header.php), the .cart-add toggles riding the
   /players pick tags (pickCell in app.js), and the #pickCart Offcanvas drawer
   (footer.php, body rendered by cart.js). */

.cart-toggle { position: relative; }
.cart-count {
  position: absolute;
  top: -5px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--bg-base);
  background: var(--accent);
  border-radius: 4px;
}

/* Add-to-cart toggle inside a pending .pick-tag (inline-flex, shares its gap) */
.cart-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 9px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cart-add:hover { color: var(--accent); border-color: var(--accent-line); }
.cart-add.in-cart {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* Drawer (Bootstrap Offcanvas; body bg/border tokens are already mapped in
   theme.css, so this is palette polish only) */
.pick-cart {
  --bs-offcanvas-width: 360px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
}
.pick-cart .offcanvas-header { border-bottom: 1px solid var(--border-subtle); }
.pick-cart .offcanvas-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.pick-cart .offcanvas-title i { font-size: 12px; color: var(--accent); }
.pick-cart .offcanvas-body { padding: 14px 16px; }

.cart-date-head {
  margin: 10px 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cart-date-head:first-child { margin-top: 0; }

.cart-group { margin-bottom: 14px; }
.cart-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.cart-game-time { font-weight: 400; color: var(--text-muted); }

.cart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-primary);
}
.cart-row-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cart-remove:hover { color: var(--miss-color); }

/* Footer action bar (sticks below the scrolling offcanvas-body) */
.pick-cart-foot {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
}
.cart-foot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 7px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cart-foot-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.cart-foot-btn:disabled { opacity: 0.45; cursor: default; }
#cartCopy:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); }