/* Player comparison page.
 *
 * Same rule as base.css: every colour is a custom property emitted from
 * config/styles.py, so this cannot drift from the Reflex app while both are
 * live.
 */

/* The controls live in the section sidebar now, so the page itself is a
   single column. */
.cmp { padding: 24px; }

@media (max-width: 900px) {
  .cmp { padding: 16px; }
}

.cmp.is-loading .cmp-main { opacity: 0.55; }
.cmp-main { transition: opacity 120ms ease-out; }

/* --- Sidebar ---------------------------------------------------------- */

/* Sits inside .lc-sidebar-filters, which supplies the surface and the rule
   above it — this only lays the controls out. */
.cmp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cmp-field { position: relative; display: flex; flex-direction: column; gap: 6px; }

.cmp-field label,
.cmp-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cmp-field input[type="text"],
.cmp-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
}

.cmp-field input:focus-visible,
.cmp-field select:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

/* --- Typeahead --------------------------------------------------------- */

.cmp-results {
  position: absolute;
  top: 100%;
  z-index: 20;
  width: 100%;
  max-height: 280px;
  margin: 4px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
}

.cmp-result { padding: 8px 10px; font-size: 0.875rem; cursor: pointer; }
.cmp-result:hover { background: var(--bg-hover, var(--bg-dark)); }

/* --- Pill tray ---------------------------------------------------------- */

.cmp-tray { display: flex; align-items: center; gap: 8px; }

.cmp-pills { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cmp-pills-empty { font-size: 0.8rem; font-style: italic; color: var(--text-secondary); }

/* A pill carries its slot's chart colour, set inline as --pill-color by the
 * island. Everything else on this page is colour-coded per player — the chart
 * lines, the card borders, the podium, the peak cards, the season table
 * headers — so a grey pill was the one element that did not say which player
 * it belonged to.
 *
 * The colour arrives as an opaque hex, so the tint is built with
 * color-mix rather than an alpha channel: mixing against the page background
 * keeps every slot at the same apparent weight, which raw opacity does not.
 */
.cmp-player-pill {
  --pill-color: var(--border-light);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--pill-color) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pill-color) 16%, var(--bg-dark));
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.cmp-pill-name {
  font-weight: 600;
  /* Lightened toward white so it stays legible on its own tint — the raw
     palette colours are chosen for 2px lines on dark, not for body text. */
  color: color-mix(in srgb, var(--pill-color) 45%, #fff);
}

.cmp-pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 20px so the target is not a 9px glyph; the pill stays compact because the
     button overlaps the padding that was already there. */
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--pill-color) 30%, #fff);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cmp-pill-remove:hover {
  background: color-mix(in srgb, var(--pill-color) 30%, transparent);
  color: #fff;
}

.cmp-pill-remove:focus-visible {
  outline: 2px solid var(--pill-color);
  outline-offset: 1px;
}

/* Fallback for browsers without color-mix: a readable pill, just untinted. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cmp-player-pill {
    border-color: var(--pill-color);
    background: var(--bg-dark);
  }
  .cmp-pill-name,
  .cmp-pill-remove { color: var(--text-primary); }
}

.cmp-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Mode and Type share a row, as they do in the Reflex sidebar. */
.cmp-row { display: flex; gap: 12px; }
.cmp-row .cmp-field { flex: 1; min-width: 0; }

.cmp-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* --- Per-slot season controls -------------------------------------------- */

.cmp-slot-block { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.cmp-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cmp-slot-option-name {
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-red, #b3261e);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.cmp-slider { width: 100%; accent-color: var(--accent-blue); cursor: pointer; }
.cmp-slider:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

/* --- Season chips --------------------------------------------------------- */

.cmp-chips { display: flex; flex-direction: column; gap: 4px; }

.cmp-chips-summary {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Scrolls inside itself — a 25-season career would otherwise push the
   sidebar taller than the viewport. */
.cmp-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 132px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-dark);
}

.cmp-chip {
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
}
.cmp-chip:hover { color: var(--text-primary); }
.cmp-chip.is-on {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  color: var(--text-primary);
}

/* --- Actions -------------------------------------------------------------- */

.cmp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.cmp-btn,
.cmp-btn-ghost {
  padding: 7px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.cmp-btn {
  margin-left: auto;
  border: 1px solid var(--accent-blue);
  background: var(--accent-blue);
  color: var(--text-primary);
  font-weight: 600;
}
.cmp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Unloaded changes are waiting — nudge without shouting. */
.cmp-btn.is-dirty { box-shadow: 0 0 0 3px rgb(59 130 246 / 30%); }

.cmp-btn-ghost {
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
}
.cmp-btn-ghost:hover { color: var(--text-primary); }

/* --- Highlighted search result -------------------------------------------- */

.cmp-result.is-highlighted { background: var(--accent-blue); color: var(--text-primary); }

/* --- Status ------------------------------------------------------------ */

.cmp-status { margin: 0 0 16px; color: var(--text-secondary); }
.cmp-status.is-error { color: var(--accent-red, #e5484d); }

/* --- Cards ------------------------------------------------------------- */

.cmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cmp-card {
  padding: 14px;
  /* The team colour, resolved server-side — Reflex could not call
     get_team_color at render time and neither can a Jinja template. */
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-card);
}

.cmp-card-name { display: flex; flex-direction: column; line-height: 1.15; }
.cmp-card-first { font-size: 0.85rem; color: var(--text-secondary); }
.cmp-card-last { font-size: 1.25rem; font-weight: 600; }

.cmp-card-team {
  margin-top: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* min-height is set inline from award_pill_row_h so every card in the row
   lines up regardless of how many pills it has. */
/* The row carries a server-computed min-height (award_pill_row_h) so cards with
   different numbers of awards still line their stats up. That reserved space
   has to stay reserved, not be absorbed by the chips: flex defaults to
   align-items/align-content: stretch, so on a viewport wide enough to fit every
   chip on one line, a min-height sized for two lines inflated each chip to the
   full 48px. Both axes are pinned to flex-start so a chip is only ever as tall
   as its own text. */
.cmp-card-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 4px;
  margin: 8px 0;
}

/* Award chips.
 *
 * These were gold 1px outlines with no fill, identical for every award. Two
 * problems: a hollow ring around wide text reads as an unfilled control rather
 * than a badge, and a 14× Pro Bowl shouted exactly as loudly as an MVP — the
 * row carried no sense of which honours actually matter.
 *
 * Now tiered. Gold and filled for the career-defining ones, gold and quiet for
 * a great season, neutral for the accumulated ones. A glance at the row tells
 * you the shape of a career before you read a word of it.
 */
.cmp-pill {
  display: inline-flex;
  /* center, not baseline. The label and the count are the same size, so
     baseline aligns nothing — and it makes the flex container reserve room
     below the text for its own baseline strut, which sat the text 2.7px from
     the top of the chip and 7.9px from the bottom. */
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  /* 5px, not 999px: at this width a full radius stretches into a lozenge and
     the label sits oddly inside it. A small radius reads as a badge. */
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 0.7rem;
  line-height: 1.45;
  white-space: nowrap;
}

.cmp-pill-label { font-weight: 600; }

/* The count is the interesting half — "MVP" is a category, "5×" is the fact.
   Tabular figures so a column of chips does not jitter. */
.cmp-pill-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.85;
}

.cmp-pill.is-major {
  border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
  background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
  color: var(--accent-gold);
}

.cmp-pill.is-honor {
  border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
  background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
  color: color-mix(in srgb, var(--accent-gold) 80%, #fff);
}

/* Neutral rather than gold. All-Pro and Pro Bowl selections are real, but a
   long career accumulates them, so they should not compete with an MVP. */
.cmp-pill.is-volume {
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.cmp-card-pills.is-xs .cmp-pill { padding: 1px 5px; gap: 3px; font-size: 0.6rem; }
.cmp-card-pills.is-md .cmp-pill { font-size: 0.65rem; }

/* Without color-mix the tints collapse to nothing, so fall back to the outline
   these used to be — still tiered, just by border colour alone. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cmp-pill.is-major,
  .cmp-pill.is-honor {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
  }
}

/* Two label/value pairs per line.
 *
 * This was `1fr auto`, one pair per line, which stretched the label column to
 * the full width of the card — on a wide screen "Pass Yds" and "68,201" ended
 * up ~900px apart with nothing tying them together. Six stats also meant six
 * rows of mostly empty space.
 *
 * `auto 1fr` twice: the label takes what it needs, the value column absorbs
 * the slack and right-aligns against the middle of the card rather than its
 * edge. The pair stays readable as a pair.
 */
.cmp-card-stats {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 3px 10px;
  margin: 0;
  font-size: 0.8rem;
}

/* One pair per line once two would be cramped. The breakpoint is on the card,
   not the viewport — two cards side by side are each half the width. */
@media (max-width: 900px) {
  .cmp-card-stats { grid-template-columns: auto 1fr; }
}

.cmp-card-stats dt { color: var(--text-secondary); white-space: nowrap; }

.cmp-card-stats dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* The value column is the one that absorbs slack, so cap how far a number
     can drift from its own label before the gap stops reading as a pair. */
  max-width: 14ch;
  justify-self: end;
}

.cmp-card-stats dd.is-leader { color: var(--accent-gold); font-weight: 600; }

/* --- Charts ------------------------------------------------------------ */

.cmp-chart-panel {
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-card);
}

.cmp-chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cmp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.cmp-tab,
.cmp-axis button {
  padding: 5px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.cmp-tab:hover,
.cmp-axis button:hover { color: var(--text-primary); }

.cmp-tab.is-active,
.cmp-axis button.is-active {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  color: var(--text-primary);
}

.cmp-axis { display: flex; gap: 4px; }

.cmp-chart { min-height: 420px; }

/* --- Podium ------------------------------------------------------------ */

.cmp-podium {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cmp-podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--border-light);
  border-radius: 8px;
}

/* The medal was 🥇🥈🥉. One SVG outline now, coloured per place — real medals
 * differ by colour rather than by shape, and an emoji renders as whatever the
 * viewer's OS decides, which is not a thing to hand the visual identity of a
 * ranking to.
 *
 * These three are the only place in the app that needs a metal, so they are
 * local rather than added to the shared palette. Chosen against the dark card
 * rather than for realism: literal silver and bronze go muddy on #1a1a2e.
 */
svg.cmp-podium-medal {
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
}

svg.cmp-podium-medal.is-gold   { color: #ffd166; }
svg.cmp-podium-medal.is-silver { color: #cbd5e1; }
svg.cmp-podium-medal.is-bronze { color: #d08b52; }

/* Fourth place onward: a rank number in the medal's slot. Sized to the same
   26px so the cards stay level in a row, and muted so the three that did medal
   still lead the eye. */
.cmp-podium-medal.is-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.cmp-podium-name { font-size: 0.8rem; font-weight: 600; text-align: center; }
.cmp-podium-value { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-podium-year { font-size: 0.7rem; color: var(--text-secondary); }

/* --- Peak season cards -------------------------------------------------- */

.cmp-peaks { margin-top: 24px; }
.cmp-peaks h2,
.cmp-table-panel h2 {
  margin: 0 0 12px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cmp-peak-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.cmp-peak {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-card);
}

.cmp-peak-name { font-weight: 600; }
.cmp-peak-season {
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* The headline stat is why the card exists — the season's best number — and
 * it used to render at the same size and weight as the two supporting lines
 * beneath it, so nothing said which figure to read first. The number now
 * carries the weight and its unit steps back out of the way. */
.cmp-peak-headline {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}

.cmp-peak-figure {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  /* tabular-nums so a stack of cards lines up digit for digit */
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.cmp-peak-unit {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cmp-peak-line {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* The first supporting line is the counting stats; the second is the rates,
   which are detail. Dimming it keeps three lines from reading as one block. */
.cmp-peak-line + .cmp-peak-line { font-size: 0.78rem; opacity: 0.8; }

/* --- Season table -------------------------------------------------------- */

.cmp-table-panel { margin-top: 24px; }

/* The table scrolls inside its own box; the page never scrolls sideways. */
.cmp-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  font-size: 0.8rem;
}

.cmp-table th,
.cmp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}

.cmp-table th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cmp-table-year {
  width: 3rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cmp-table-cell.is-empty { background: rgb(255 255 255 / 2%); }

.cmp-table-season { display: flex; gap: 6px; align-items: baseline; font-weight: 600; }
.cmp-table-team { font-size: 0.7rem; }
.cmp-table-games { font-size: 0.7rem; color: var(--text-secondary); }
/* Matches the peak cards: the season's headline number leads, its unit and
   the supporting rates step back. In a table this dense the alternative is a
   wall of same-sized digits with no entry point. */
.cmp-table-headline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 1px;
}

.cmp-table-figure {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.cmp-table-unit {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cmp-table-line { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cmp-table-line + .cmp-table-line { opacity: 0.8; }