/* styles.css - full file with additions for new sections */

:root {
  --bg: #f6f7f4;
  --panel: #ffffff;
  --ink: #0a2351;
  --muted: #68717c;
  --line: #d9ded8;
  --accent: #2f6f73;
  --accent-dark: #1f4f54;
  --gold: #b98b2f;
  --danger: #a84343;
  --shadow: 0 18px 45px rgba(24, 32, 42, 0.09);
  --brewers-navy: #0a2351;
  --brewers-gold: #ffc52f;
  /* Baseball Savant convention (opposite of the "red=bad" default most
     visitors expect elsewhere): blue = below average, red = above average.
     Base hues are Savant's own percentile-ranking colors, not invented. */
  --status-good: #d82129;
  --status-good-strong: #9c181d;
  --status-bad: #3661ad;
  --status-bad-strong: var(--brewers-navy);
  /* Genuine statistical outlier past "good" - a deeper, more saturated red
     rather than a new hue, matching how Savant itself has no separate color
     for extreme-good (just a richer red). Purple is reserved for the mirror
     case at the extreme-bad end (see OUTCOME_COLOR_EXTREME_BAD in app.js). */
  --status-elite: #6b1015;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.quarto-title-block,
#quarto-header,
#title-block-header {
  display: none;
}

#quarto-document-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-layout-full .page-columns {
  display: block;
}

.app-shell {
  min-height: 100vh;
  padding: 28px;
}

.site-header {
  position: relative;
  width: 100%;
  background: var(--panel);
  border-bottom: 4px solid var(--brewers-gold);
}

.site-nav {
  position: absolute;
  top: 100%;
  right: 28px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.site-nav-link {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  background: #fbfaf4;
  color: var(--brewers-navy);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 28px;
}

.site-header-text {
  min-width: 0;
}

.site-header .search-box {
  position: relative;
  flex-shrink: 0;
  width: min(100%, 280px);
}

/* Player page has no search box - just the bare loading/error status line
   as a sibling of the title/lede instead of nested in .search-box. */
.header-status-line {
  margin-top: 6px;
}

.home-typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-typeahead.hidden {
  display: none;
}

.home-typeahead-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.home-typeahead-item:last-child {
  border-bottom: 0;
}

.home-typeahead-item:hover,
.home-typeahead-item:focus-visible {
  background: #edf4f3;
  outline: none;
}

.home-typeahead-see-all {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.88rem;
  background: #fbfaf4;
}

.home-typeahead-name {
  display: block;
  font-weight: 800;
}

.home-typeahead-detail {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.home-typeahead-empty {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(1.8rem, 2.6vw, 2.75rem);
  line-height: 1.1;
  font-weight: 850;
}

.site-header h1 {
  margin-bottom: 2px;
  color: var(--brewers-navy);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
}

.site-title-link {
  color: inherit;
  text-decoration: none;
}

.site-title-link:hover,
.site-title-link:focus {
  color: inherit;
  text-decoration: none;
}

h2 {
  margin-bottom: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.lede {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.site-header .lede {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

.lede-note {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border: 1px solid rgba(185, 139, 47, 0.35);
  border-radius: 999px;
  background: #fbfaf4;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.lede-note strong {
  color: inherit;
}

.search-box label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

#player-search {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

#player-search:focus {
  border-color: var(--brewers-gold);
  box-shadow: 0 0 0 3px rgba(255, 197, 47, 0.35);
  outline: none;
}

#player-search:disabled {
  color: var(--muted);
  cursor: wait;
}

.site-header #player-search {
  height: 42px;
  font-size: 1rem;
}

.site-header .status-line {
  min-height: 0;
  margin-top: 4px;
  font-size: 0.82rem;
}

.status-line {
  min-height: 22px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.status-line.error {
  color: var(--danger);
}

/* ------------------------------------------------------------------------------
   Prospect Spotlight (homepage discovery cards) — see renderProspectSpotlight() in app.js
   ------------------------------------------------------------------------------ */
.prospect-spotlight {
  max-width: 1280px;
  margin: 22px auto 0;
  padding: 0 28px;
}

.prospect-spotlight-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.prospect-spotlight-head h2 {
  margin-bottom: 2px;
  color: var(--brewers-navy);
  font-size: 1.2rem;
}

/* Fixed 3x3 grid on desktop; narrower viewports fall back to an auto-fill
   flow (see the max-width: 860px override below). */
.prospect-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.prospect-spotlight-loading {
  grid-column: 1 / -1;
  padding: 40px 0;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

.prospect-spotlight-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}

.prospect-spotlight-card:hover,
.prospect-spotlight-card:focus {
  border-color: var(--brewers-gold);
  outline: none;
}

.prospect-spotlight-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.prospect-spotlight-name {
  font-weight: 800;
  font-size: 1rem;
}

.prospect-spotlight-detail {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.prospect-spotlight-stat-line {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.prospect-spotlight-radar {
  align-self: center;
  width: 100%;
  max-width: 260px;
  margin: 4px 0;
}

.prospect-spotlight-radar svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 22px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Player page's .content-grid holds only the detail panel now (no results
   list beside it) - single column, full width for the charts/tables. */
main[data-page="player"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Search page's .content-grid holds only the results list now (no detail
   panel beside it) - single column, matched to .filter-quickbar's width so
   the filter pane and matches list read as one aligned column. */
main[data-page="search"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
}

.results-panel,
.detail-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.detail-panel {
  min-height: 560px;
}

.results-panel {
  min-height: 560px;
  overflow: hidden;
}

/* Once a player is selected, the match list collapses down to just its
   header so it doesn't leave a tall block of blank space next to the much
   taller detail view. Pinning (or actively searching) keeps it expanded. */
.results-panel.list-collapsed {
  min-height: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.sort-outline-label {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 0 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.sort-outline select {
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 4px;
  cursor: pointer;
  max-width: 170px;
}

.sort-outline select:focus {
  outline: none;
  color: var(--accent-dark);
}

.sort-dir-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sort-dir-toggle:hover:not(:disabled) {
  border-color: var(--brewers-gold);
  background: #fbf5e3;
}

.sort-dir-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.results-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.results-pin:hover {
  border-color: var(--brewers-gold);
  background: #fbf5e3;
}

.results-pin.active {
  border-color: var(--brewers-gold);
  background: #fbf5e3;
  color: #8a6a12;
}

#result-count {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf4f3;
  color: var(--accent-dark);
  text-align: center;
  font-weight: 800;
}

.player-results {
  max-height: 650px;
  overflow: auto;
}

/* Search page's Matches list is the whole page's main content now (no detail
   panel beside it), so let it use most of the viewport height instead of the
   old sidebar-sized cap. */
main[data-page="search"] .player-results {
  max-height: calc(100vh - 260px);
  min-height: 400px;
}

.result-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.result-button:hover,
.result-button:focus,
.result-button.active {
  background: #edf4f3;
  outline: none;
}

.result-name {
  display: block;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-detail {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.result-comp {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 400;
}

.result-median-wraa {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Comp Strength Value / Reach MLB Probability / Comp wRC+ / Comp FIP -
   these live in .result-median-wraa (not bold by default, unlike stat
   chips), so bold is applied explicitly to match every other colored
   number in the results list. */
.result-stat-value {
  font-weight: 700;
}

.result-stats {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
}

.stat-chip {
  font-weight: 600;
}

.level-badge {
  align-self: start;
  min-width: 48px;
  padding: 4px 8px;
  border: 1px solid rgba(185, 139, 47, 0.35);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.detail-panel {
  padding: 22px;
}

.empty-state {
  display: grid;
  min-height: 510px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.empty-state p {
  max-width: 460px;
  color: var(--muted);
}

.comparison-view.hidden,
.hidden {
  display: none;
}

.selected-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  text-align: center;
}

.selected-player h2 {
  font-size: 1.8rem;
  border-bottom: none;
  padding-bottom: 0;
}

/* Name/links and the stat-card row live in one column so the cards sit
   directly under the name instead of waiting to wrap onto their own full-
   width row below the (taller) charts card - closes what used to be a large
   blank gap under the name. */
.selected-player-left {
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.selected-meta {
  display: grid;
  /* auto-fit (not auto-fill) so a row with fewer items than the container
     could fit collapses its unused tracks to 0 width instead of reserving
     them - otherwise the pills pack to the left of that phantom empty
     column and justify-content:center ends up centering the wrong box. */
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  justify-content: center;
  gap: 10px;
  margin: 0;
  width: 100%;
  min-width: 0;
}

/* Card around the single rasterized <img> - see charts-card-image below.
   position:relative contains the offscreen render target (position:absolute)
   so it can't affect ancestor layout. */
.charts-card {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fbfcfa;
}

.charts-card-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Real, live-rendered SVGs still exist here (renderOutcomeDistribution/
   renderSelectedRadar target these exactly as before) so their CSS resolves
   normally and updateChartsCardImage() has something to rasterize - just
   never shown directly, since the <img> above is what visitors see/right-
   click. width/height:0 (not display:none) keeps them out of page layout
   while staying "rendered" for getComputedStyle purposes. */
.charts-card-offscreen {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Groups the violin chart and radar as one flex item so they read as one
   paired unit within the card, not two independently-spaced columns. */
.selected-charts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.selected-radar-wrap {
  flex: 0 0 auto;
  width: 190px;
}

.selected-radar {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* fill/stroke explicitly none (not display:none) - the profile page's
   visible radar is a rasterized <img> built by cloning this SVG and inlining
   each element's computed fill/stroke (see inlineComputedStyles); display
   isn't one of the inlined properties, so display:none here would leave the
   clone's fill at its SVG default (black) and bake in solid black circles. */
.radar-grid-ring {
  fill: none;
  stroke: none;
}

/* This stroke is what makes the now cardinal-aligned wedge seams (see
   renderSelectedRadar/miniRadarSvg) read as a "little space in between" -
   panel-colored so it looks like a real gap rather than a drawn line. */
.radar-wedge {
  stroke: var(--panel, #fff);
  stroke-width: 2;
  fill-opacity: 0.85;
}

.radar-wedge.z-good        { fill: var(--status-good); }
.radar-wedge.z-good-strong { fill: var(--status-good-strong); }
.radar-wedge.z-elite       { fill: var(--status-elite); }
.radar-wedge.z-bad         { fill: var(--status-bad); }
.radar-wedge.z-bad-strong  { fill: var(--status-bad-strong); }
.radar-wedge.z-neutral     { fill: var(--muted); }

.radar-axis-label {
  font-size: 13px;
  font-weight: 800;
  fill: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The prominent value line (scout grade, or raw z-score for ungraded pitcher
   features) - colored per the same wedge-fill tiers so the number matches
   its own wedge at a glance, same idea as the old stat-card figures. */
.radar-axis-grade {
  font-size: 19px;
  font-weight: 850;
  fill: var(--ink);
}
.radar-axis-grade.z-good        { fill: var(--status-good); }
.radar-axis-grade.z-good-strong { fill: var(--status-good-strong); }
.radar-axis-grade.z-elite       { fill: var(--status-elite); }
.radar-axis-grade.z-bad         { fill: var(--status-bad); }
.radar-axis-grade.z-bad-strong  { fill: var(--status-bad-strong); }
.radar-axis-grade.z-neutral     { fill: var(--muted); }

/* The small secondary line (raw z-score pill under a grade, or a plain-
   language label like "Starter" under Role's z-score) - always muted,
   never colored, matching .feature-plain-label's old treatment. */
.radar-axis-raw {
  font-size: 12px;
  font-weight: 600;
  fill: var(--muted);
}

.radar-comp-tick {
  stroke: var(--brewers-navy);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.radar-comp-dot {
  fill: var(--brewers-gold);
  stroke: var(--brewers-navy);
  stroke-width: 1.25;
}

.selected-meta div {
  min-width: 78px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
}

.selected-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.selected-meta dd {
  margin: 2px 0 0;
  font-weight: 850;
  font-size: 1.05rem;
}

.selected-meta dd .feature-plain-label {
  display: block;
  margin: 3px 0 0;
  width: fit-content;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--ink);
}

th.sortable.sort-asc::after {
  content: " \25B2";
  font-size: 0.7em;
}

th.sortable.sort-desc::after {
  content: " \25BC";
  font-size: 0.7em;
}

td:nth-child(1),
td:nth-child(3),
td:nth-child(4),
td:nth-child(6),
td:nth-child(7),
td:nth-child(8),
td:nth-child(9),
td:nth-child(10) {
  font-variant-numeric: tabular-nums;
}

.score {
  color: var(--accent-dark);
  font-weight: 900;
}

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

.table-legend {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

.reached-mlb {
  font-weight: 900;
}

.feature-plain-label {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  vertical-align: middle;
  white-space: nowrap;
}

.match-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(185, 139, 47, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  vertical-align: middle;
}

.franchise-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.comp-name-link {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.comp-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.selected-player-links {
  margin-top: 8px;
  display: flex;
  gap: 12px;
}

.selected-player-links a {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.selected-player-links a:hover {
  color: var(--brewers-navy);
  text-decoration: underline;
}

/* Comp Strength Value / Comp wRC+/FIP for the selected player - deliberately
   not another .selected-meta box (those are the bio-fact panes; these two
   are scores, not facts, so they read as a plain labeled line instead). */
.selected-strength-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.selected-strength-line:empty {
  display: none;
}

.selected-strength-item {
  font-size: 0.92rem;
  color: var(--muted);
}

.mlb-wraa {
  white-space: nowrap;
}

.outcome-dist-wrap {
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
}

.outcome-dist-title {
  font-size: 0.72rem;
  font-weight: 850;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.outcome-dist-subtitle {
  margin-top: 1px;
  font-size: 0.68rem;
  color: var(--muted);
}

.outcome-dist-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 4px;
  overflow: visible;
}

.dist-spectrum-fill {
  /* fill is set inline per-render (a gradient url()) - see
     renderOutcomeDistribution() in app.js - so it's deliberately absent
     here; an inline style always wins over this stylesheet rule regardless
     of specificity, but keeping fill out of the class entirely avoids the
     two ever getting out of sync. */
  opacity: 0.28;
}

.dist-spectrum-line {
  /* stroke is set inline per-render (a gradient url()), same reasoning as
     .dist-spectrum-fill above. */
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dist-comp-dot {
  /* fill is set inline per-render (each dot's own spectrum position) - same
     reasoning as .dist-spectrum-fill above. */
  stroke: var(--panel, #fff);
  stroke-width: 0.75;
}

.dist-zero-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.dist-tick {
  stroke: var(--muted);
  stroke-width: 1;
}

.dist-tick.strong {
  stroke: var(--accent-dark);
  stroke-width: 1.5;
}

.dist-empty-note {
  font-size: 10px;
  font-weight: 700;
  fill: var(--muted);
}

.dist-empty-note-html {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.dist-legend-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.dist-legend-cell {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dist-legend-heading {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dist-legend-value {
  font-size: 0.76rem;
  font-weight: 850;
  color: var(--ink);
}

.dist-legend-cell.strong .dist-legend-value {
  font-size: 0.88rem;
  font-weight: 950;
}

.dist-legend-cell.danger .dist-legend-value {
  color: #000000;
}

.comparison-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.comparison-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-header .breakdown-title {
  margin-bottom: 0.25rem;
}

.section-header .breakdown-lede {
  margin-bottom: 0;
}

.section-toggle {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.section-toggle:hover {
  border-color: var(--accent);
  background: #edf4f3;
}

.section-toggle:active {
  transform: scale(0.98);
}

.section-content {
  margin-top: 14px;
}

.section-content.hidden {
  display: none;
}

@media (max-width: 860px) {
  .app-shell {
    padding: 14px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .site-header-inner {
    padding: 18px 16px;
  }

  .site-header .search-box {
    width: 100%;
  }

  .prospect-spotlight {
    padding: 0 16px;
  }

  .prospect-spotlight-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .prospect-spotlight-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .prospect-spotlight-detail {
    white-space: normal;
  }

  .panel-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .sort-outline select {
    max-width: 120px;
  }

  .results-panel,
  .detail-panel {
    min-height: auto;
  }

  .selected-player {
    display: block;
  }

  .charts-card {
    margin: 12px auto 0;
    width: fit-content;
  }

  .selected-charts {
    flex-direction: column;
  }

  .selected-radar-wrap {
    width: 130px;
    margin: 0 auto;
  }

  .outcome-dist-wrap {
    width: 240px;
  }

  .selected-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
  }
}

/* ==============================================================================
   Z-score colour classes
   These apply to both the comp table deltas and the breakdown tables.
   ------------------------------------------------------------------------------ */
.z-good        { color: var(--status-good); }
.z-good-strong { color: var(--status-good-strong); font-weight: bolder; }
.z-bad         { color: var(--status-bad); }
.z-bad-strong  { color: var(--status-bad-strong); font-weight: bolder; }
.z-neutral     { color: inherit; }

/* ------------------------------------------------------------------------------
   Comp table: delta column
   Shows the difference between selected player and comp (selected → comp)
   ------------------------------------------------------------------------------ */
.delta-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.delta-chip.z-good        { background: rgba(216, 33, 41, 0.12);  color: var(--status-good); }
.delta-chip.z-good-strong { background: rgba(156, 24, 29, 0.16);  color: var(--status-good-strong); }
.delta-chip.z-bad         { background: rgba(54, 97, 173, 0.12);  color: var(--status-bad); }
.delta-chip.z-bad-strong  { background: rgba(10, 35, 81, 0.16);   color: var(--status-bad-strong); }
.delta-chip.z-neutral     { background: var(--bs-secondary-bg, #f1f2f3); color: var(--muted); }

/* ------------------------------------------------------------------------------
   Selected player breakdown section
   ------------------------------------------------------------------------------ */
.breakdown-section {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  padding-top: 1.5rem;
}

.breakdown-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.breakdown-lede {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

.breakdown-panels {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.breakdown-panel {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 6px;
  overflow: hidden;
}

/* ==============================================================================
   Filters Panel
   ------------------------------------------------------------------------------ */
/* ==============================================================================
   FILTER QUICKBAR + DRAWER (realtor.com-style)
   ============================================================================== */

.filter-quickbar {
  max-width: 1000px;
  margin: 0 auto 22px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.filters-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.filters-open-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.filters-open-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filters-open-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.filters-open-btn.active {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.filter-quickbar-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quickbar-shortcut {
  flex-shrink: 0;
}

.filter-quickbar-shortcuts .single-checkbox-label {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
}

.filter-quickbar-shortcuts select#filter-level-quick {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.filter-quickbar-shortcuts #filter-franchise-dropdown-quick {
  width: 130px;
}

/* Fixed width (same pattern/size as Franchise above) so the pill doesn't
   visibly shrink/regrow as its label switches between "All Players",
   "Hitters", "Pitchers", and "2 selected" - comfortably fits the longest of
   those instead of auto-sizing to whichever is currently shown. */
.filter-quickbar-shortcuts #filter-dataset-dropdown-quick {
  width: 130px;
}

.filter-quickbar-shortcuts #filter-franchise-toggle-quick {
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}

.filter-quickbar-shortcuts #filter-pa-min-quick {
  width: 100px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
}

/* Active-state styling for quickbar shortcut controls (rookie-eligible,
   level, franchise, PA-min, role, dataset) — replaces the redundant
   applied-filter chip these used to also produce (see
   QUICKBAR_MIRRORED_CHIP_IDS, app.js): the control itself turns the same
   teal used by an applied chip once its filter has a value, so there's
   exactly one visual indicator per filter. */
.filter-quickbar-shortcuts .single-checkbox-label.qb-active {
  border-color: var(--accent);
  background: #edf4f3;
  color: var(--accent-dark);
}

.quickbar-clearable {
  position: relative;
}

.quickbar-clearable.qb-active select,
.quickbar-clearable.qb-active input[type="number"],
.quickbar-clearable.qb-active .dropdown-multiselect-toggle {
  border-color: var(--accent);
  background: #edf4f3;
  color: var(--accent-dark);
  font-weight: 700;
}

/* Small circular "X" overlapping the top-right corner of the pill, the same
   pattern used by .filters-count's badge on the Filters button — only shown
   once that quickbar control's filter is actually active. */
.qb-clear {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--accent-dark);
  border-radius: 50%;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.quickbar-clearable.qb-active .qb-clear {
  display: inline-flex;
}

.applied-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.applied-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 6px 7px 13px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #edf4f3;
  color: var(--accent-dark);
  font-size: 0.83rem;
  font-weight: 700;
  white-space: nowrap;
}

.applied-chip-remove {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.applied-chip-remove:hover {
  background: rgba(47, 111, 115, 0.18);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 35, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  background: var(--panel);
  box-shadow: -14px 0 34px rgba(24, 32, 42, 0.22);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  z-index: 41;
  display: flex;
  flex-direction: column;
}

.filters-drawer.open {
  transform: translateX(0);
}

.filters-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.filters-drawer-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.filters-drawer-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.filters-drawer-close:hover {
  background: var(--panel-sunk, #fbfcfa);
  color: var(--ink);
}

.filters-drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

.filter-accordion {
  border-bottom: 1px solid var(--line);
}

.filter-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.filter-acc-head h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.filter-acc-chev {
  color: var(--muted);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.filter-accordion.open .filter-acc-chev {
  transform: rotate(180deg);
}

.filter-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.filter-accordion.open .filter-acc-body {
  max-height: 900px;
  /* Once open, let an absolutely-positioned dropdown-multiselect-panel (e.g.
     Position, Bats) float above whatever accordion section follows instead
     of being clipped by this container's own overflow:hidden (needed only
     for the collapse/expand height transition itself). */
  overflow: visible;
}

.filter-acc-grid {
  padding: 0 22px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

#applied-filter-chips-drawer {
  padding: 0 22px 20px;
}
#applied-filter-chips-drawer:empty::after {
  content: "No filters applied yet.";
  color: var(--muted);
  font-size: 0.85rem;
}

.filters-drawer-foot {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.filters-drawer-foot button {
  flex: 1;
  padding: 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filters-drawer-foot .filters-clear {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.filters-drawer-foot .filters-clear:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filters-drawer-foot .filters-clear.active {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filters-drawer-show {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.filters-drawer-show:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

@media (max-width: 640px) {
  .filters-drawer {
    width: 100vw;
  }

  .filter-acc-grid {
    grid-template-columns: 1fr;
  }
}

.page-title-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfa;
}

.page-title-header h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.page-title-header .lede {
  margin: 0;
  font-size: 0.95rem;
}

.page-content {
  padding: 28px 32px 36px;
}

.page-content h2 {
  margin: 1.6em 0 0.6em;
}

.page-content h2:first-child {
  margin-top: 0;
}

.page-content p {
  margin: 0 0 1em;
  line-height: 1.6;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Bats + Throws (Chunk 15, user request 2026-07-19): a pair of independent
   filters that should always sit on one line together, rather than left to
   the outer .filter-acc-grid's own auto-fit column count - one grid cell
   containing a flex row of two mini filter-groups instead of two separate
   grid cells that could end up on different rows at some widths. */
.filter-group-pair {
  flex-direction: row;
  gap: 12px;
}

.filter-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 120px;
  min-width: 0;
}

.filter-group label {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.filter-group select,
.filter-group input[type="number"] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.filter-group select:focus,
.filter-group input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 115, 0.12);
  outline: none;
  background: white;
}

.filter-group select:disabled,
.filter-group input[type="number"]:disabled {
  background: #f0f0f0;
  color: var(--muted);
  cursor: not-allowed;
}

/* Hide the native up/down spinner on every numeric filter input across the
   site (drawer, quickbar, and quick-filter-bar duplicates) except Age, which
   keeps its arrows since stepping age by 1 is a common, deliberate action —
   the other numeric filters (PA, comp-outcome ranges, feature ranges, Reach
   MLB probability) are typically typed directly, and the spinner mostly just
   adds visual clutter for them. */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#filter-age-min,
#filter-age-max {
  -moz-appearance: auto;
}

#filter-age-min::-webkit-outer-spin-button,
#filter-age-min::-webkit-inner-spin-button,
#filter-age-max::-webkit-outer-spin-button,
#filter-age-max::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  margin: 0;
}

.range-group {
  gap: 10px;
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-inputs input[type="number"] {
  flex: 1;
  min-width: 0;
}

.range-sep {
  color: var(--muted);
  font-weight: 600;
  padding: 0 2px;
}

.filter-group select[multiple] {
  height: auto;
}

.single-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.single-checkbox-label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* Custom dropdown multiselect: a select-styled toggle button that opens a
   scrollable checkbox list, so choosing multiple values doesn't require
   holding ctrl/cmd the way a native <select multiple> does. */
.dropdown-multiselect {
  position: relative;
}

.dropdown-multiselect-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dropdown-multiselect-toggle:hover {
  border-color: var(--accent);
}

.dropdown-multiselect-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 115, 0.12);
  background: white;
}

.dropdown-multiselect-toggle:disabled {
  background: #f0f0f0;
  color: var(--muted);
  cursor: not-allowed;
}

.dropdown-multiselect-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-multiselect-arrow {
  color: var(--muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.dropdown-multiselect-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  box-shadow: var(--shadow);
  padding: 6px;
}

.dropdown-multiselect-panel.hidden {
  display: none;
}

/* Search box stays fixed at the top of the panel; only the option list below
   it scrolls (see .dropdown-multiselect-options) — so filtering a long list
   (e.g. franchises) doesn't also scroll the search box out of view. */
.dropdown-multiselect-search {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfcfa;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.dropdown-multiselect-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 115, 0.12);
  outline: none;
  background: white;
}

.dropdown-multiselect-options {
  max-height: 380px;
  overflow-y: auto;
}

.dropdown-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.dropdown-multiselect-option:hover {
  background: #f0f4f2;
}

.dropdown-multiselect-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Franchise has 30+ short (2-3 letter) codes — a single narrow column only
   shows a handful at a time even at the taller max-height above. Widen the
   panel past the toggle button's own width and lay codes out in columns so
   most/all of them are visible without scrolling. Shared by both the drawer
   franchise dropdown and its quick-filter-bar duplicate. */
.wide-multiselect-panel {
  right: auto;
  min-width: 300px;
}

/* Role's toggle button otherwise shrinks to fit whatever short label
   happens to be showing ("All Roles", a single code) - "Swingman" is the
   longest of the three option labels and doesn't fit that narrow a box, so
   it was clipping under the toggle-label's own text-overflow:ellipsis.
   Widening the toggle (drawer + quickbar) both fixes the closed-state label
   and widens the open panel to match, since the panel's own width already
   tracks the toggle's (no wide-multiselect-panel needed for just 3 short
   rows). */
#filter-role-dropdown .dropdown-multiselect-toggle,
#filter-role-dropdown-quick .dropdown-multiselect-toggle {
  min-width: 150px;
}

.franchise-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 2px 10px;
  max-height: 460px;
}

/* Responsive adjustments for filters */
@media (max-width: 1024px) {
  .filter-acc-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
}

.site-footer {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 20px 0 4px;
  text-align: center;
}

.kofi-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.kofi-button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.kofi-icon {
  font-size: 1rem;
}

@media (max-width: 860px) {
  .filter-quickbar {
    margin: 0 14px 22px;
  }

  .filter-acc-grid {
    padding: 0 18px 18px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .range-inputs {
    gap: 6px;
  }
}

.breakdown-panel-header {
  padding: 0.6rem 0.9rem;
  background: var(--bs-secondary-bg, #f8f9fa);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.breakdown-panel-label {
  font-weight: 600;
  font-size: 0.875rem;
}

.breakdown-panel-desc {
  font-size: 0.78rem;
  color: var(--muted);
}

.breakdown-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.breakdown-table {
  width: 100%;
  font-size: 0.82rem;
  border-collapse: collapse;
  white-space: nowrap;
}

.breakdown-table th {
  padding: 0.35rem 0.6rem;
  text-align: right;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-secondary-bg, #f8f9fa);
}

.breakdown-table th:first-child,
.breakdown-table th:nth-child(2) {
  text-align: left;
}

.breakdown-table td {
  padding: 0.3rem 0.6rem;
  text-align: right;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  font-variant-numeric: tabular-nums;
}

.breakdown-table td:first-child,
.breakdown-table td:nth-child(2) {
  text-align: left;
}

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

.breakdown-table tbody tr:hover {
  background: var(--bs-secondary-bg, #f8f9fa);
}

/* Level badge inside breakdown table */
.lvl-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: #e9ecef;
  color: var(--ink);
}

/* Recency weight column — muted since it's supplementary */
.breakdown-table td:last-child {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Seasons excluded from the career comp profile (post-rookie-eligibility) */
.breakdown-table tr.rookie-excluded td {
  color: var(--muted);
  opacity: 0.6;
}

.rookie-excluded-badge {
  color: var(--muted);
  font-weight: 600;
}

.breakdown-footnote {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}