/* Gaffer IQ — components.css
   Reusable component styles: matchup card, score pill, breakdown bars,
   confidence indicator, counter-matchup pairings, fixture picker.
   BEM-lite per CONVENTIONS.md §5.1. All values via var(--…) from base.css.
   Band modifier classes (--great, --good, --neutral, --tough, --brutal) map
   directly from CompositeScore.band — see CONVENTIONS.md §5.2. */

/* ═══════════════════════════════════════════════════════════════════════════
   FIXTURE PICKER
   ═══════════════════════════════════════════════════════════════════════════ */

.matchup-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.fixture-picker__label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

.fixture-picker {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  min-width: 220px;
  transition: border-color 0.15s;
}

.fixture-picker:hover {
  border-color: var(--color-muted);
}

.fixture-picker:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MATCHUP GRID — two-column layout for home/away cards
   ═══════════════════════════════════════════════════════════════════════════ */

.matchup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 800px) {
  .matchup-grid {
    grid-template-columns: 1fr;
  }
}

.matchup-status {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-8) 0;
  font-size: var(--font-size-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MATCHUP CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.matchup-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Band-specific left accent applied by modifier below */
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--color-border);
}

.matchup-card--great   { border-left-color: var(--band-great); }
.matchup-card--good    { border-left-color: var(--band-good); }
.matchup-card--neutral { border-left-color: var(--band-neutral); }
.matchup-card--tough   { border-left-color: var(--band-tough); }
.matchup-card--brutal  { border-left-color: var(--band-brutal); }

/* Low-confidence cards get a hatched overlay so the provisional nature is
   immediately visible without hiding the data — see ARCHITECTURE.md §11. */
.matchup-card--provisional {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(255, 255, 255, 0.02) 6px,
    rgba(255, 255, 255, 0.02) 12px
  );
}

.matchup-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.matchup-card__team {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.matchup-card__venue {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

/* ─── Score row: pill + FDR + confidence ─────────────────────────────────── */

.matchup-card__score-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE PILL — main composite score display
   Band modifiers key off CompositeScore.band (CONVENTIONS.md §5.2).
   ═══════════════════════════════════════════════════════════════════════════ */

.score-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  min-width: 76px;
  flex-shrink: 0;
}

.score-pill--great   { background: var(--band-great-bg);   border-color: var(--band-great);   color: var(--band-great); }
.score-pill--good    { background: var(--band-good-bg);    border-color: var(--band-good);    color: var(--band-good); }
.score-pill--neutral { background: var(--band-neutral-bg); border-color: var(--band-neutral); color: var(--band-neutral); }
.score-pill--tough   { background: var(--band-tough-bg);   border-color: var(--band-tough);   color: var(--band-tough); }
.score-pill--brutal  { background: var(--band-brutal-bg);  border-color: var(--band-brutal);  color: var(--band-brutal); }

/* Provisional: muted + hatched — score still shown, never hidden */
.score-pill--provisional {
  opacity: 0.6;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.05) 4px,
    rgba(255, 255, 255, 0.05) 8px
  );
}

/* Estimated: low-confidence score — dashed border + ~ prefix, never hidden.
   Combined with a band modifier: score-pill--good score-pill--estimated.
   See ARCHITECTURE.md §11, FEATURE_ENGINE.md §8.3. */
.score-pill--estimated {
  border-style: var(--estimated-border-style);
  opacity: 0.82;
}
.score-pill--estimated .score-pill__value::before {
  content: '~';
  font-size: 0.6em;
  vertical-align: super;
  opacity: 0.7;
  margin-right: 1px;
}

.score-pill__value {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.score-pill__band {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE CHIP — compact inline score used in counter-matchup pairings
   Same band modifiers, no double-line layout.
   ═══════════════════════════════════════════════════════════════════════════ */

.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  min-width: 32px;
  flex-shrink: 0;
}

.score-chip--great   { background: var(--band-great-bg);   color: var(--band-great); }
.score-chip--good    { background: var(--band-good-bg);    color: var(--band-good); }
.score-chip--neutral { background: var(--band-neutral-bg); color: var(--band-neutral); }
.score-chip--tough   { background: var(--band-tough-bg);   color: var(--band-tough); }
.score-chip--brutal  { background: var(--band-brutal-bg);  color: var(--band-brutal); }

/* Estimated compact chip — dashed border in the band's own colour, ~ prefix. */
.score-chip--estimated {
  border: 1px var(--estimated-border-style) currentColor;
  opacity: 0.82;
}
.score-chip--estimated::before {
  content: '~';
  font-size: 0.7em;
  opacity: 0.7;
  margin-right: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FDR COMPARISON — official FPL 1–5 rating shown alongside Gaffer IQ score
   FDR direction: 1 = very easy, 5 = very hard (opposite to Gaffer IQ).
   ═══════════════════════════════════════════════════════════════════════════ */

.fdr-comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
}

.fdr-comparison__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

.fdr-comparison__value {
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* FDR 1=easy→great colour, 5=hard→brutal colour (inverted vs Gaffer IQ) */
}

.fdr-comparison__value[data-fdr="1"] { color: var(--band-great); }
.fdr-comparison__value[data-fdr="2"] { color: var(--band-good); }
.fdr-comparison__value[data-fdr="3"] { color: var(--band-neutral); }
.fdr-comparison__value[data-fdr="4"] { color: var(--band-tough); }
.fdr-comparison__value[data-fdr="5"] { color: var(--band-brutal); }

.fdr-comparison__scale {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIDENCE INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.confidence-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
  margin-left: auto;
}

.confidence-indicator__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

.confidence-indicator__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Low confidence: provisional indicator in caution colour */
.confidence-indicator--low .confidence-indicator__value {
  color: var(--band-tough);
}

.confidence-indicator--low .confidence-indicator__label::after {
  content: ' ⚠';
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE BREAKDOWN SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.matchup-card__breakdown,
.matchup-card__counter,
.matchup-card__horizon {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Last visible section has no bottom border */
.matchup-card__counter:last-child,
.matchup-card__horizon:last-child {
  border-bottom: none;
}

.matchup-card__section-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

/* ─── Breakdown row: label | bar | value | weight | est? ─────────────────── */

.breakdown-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr 2.4rem 2.4rem auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) 0;
}

.breakdown-row__label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-row__bar-wrap {
  background: var(--color-surface-raised);
  border-radius: var(--radius-sm);
  height: 6px;
  overflow: hidden;
}

.breakdown-row__bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
  /* Colour keyed by band modifier below */
  background: var(--color-muted);
}

.breakdown-row__bar--great   { background: var(--band-great); }
.breakdown-row__bar--good    { background: var(--band-good); }
.breakdown-row__bar--neutral { background: var(--band-neutral); }
.breakdown-row__bar--tough   { background: var(--band-tough); }
.breakdown-row__bar--brutal  { background: var(--band-brutal); }

/* Estimated sub-metric bar: reduced opacity + striped overlay (the "dashed" fill). */
.breakdown-row__bar--estimated {
  opacity: 0.55;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)    0px,
    rgba(255, 255, 255, 0)    4px,
    rgba(255, 255, 255, 0.2)  4px,
    rgba(255, 255, 255, 0.2)  8px
  );
}

.breakdown-row__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: right;
}

.breakdown-row__weight {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.breakdown-row__est {
  font-size: var(--font-size-xs);
  color: var(--band-tough);
  font-weight: 700;
  cursor: default;
  width: 12px;
  text-align: center;
}

/* Estimated rows: label muted, slight visual distinction */
.breakdown-row--estimated .breakdown-row__label {
  color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COUNTER-MATCHUP PAIRINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.counter-pairing {
  display: grid;
  grid-template-columns: 8rem auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}

.counter-pairing + .counter-pairing {
  border-top: 1px solid var(--color-border-subtle);
}

.counter-pairing__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* .counter-pairing__score uses .score-chip classes */

.counter-pairing__detail {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  padding-left: var(--space-2);
}

.counter-pairing__est {
  font-size: var(--font-size-xs);
  color: var(--band-tough);
  font-weight: 700;
  cursor: default;
  text-align: right;
}

/* Estimated pairings: slightly muted */
.counter-pairing--estimated .counter-pairing__label {
  color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORIZON OUTLOOK SECTION — scoreOverHorizon perGw strip + aggregate
   Appears in the matchup card when the active horizon is GW3 or GW6.
   ═══════════════════════════════════════════════════════════════════════════ */

.horizon-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.horizon-summary__score {
  font-size: var(--font-size-md);
  min-width: 36px;
}

.horizon-summary__label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  text-transform: capitalize;
}

/* ─── perGw fixture strip ─────────────────────────────────────────────────── */

.pgw-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pgw-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: default;
  border: 1px solid transparent;
}

.pgw-cell--great   { background: var(--band-great-bg);   color: var(--band-great);   border-color: var(--band-great); }
.pgw-cell--good    { background: var(--band-good-bg);    color: var(--band-good);    border-color: var(--band-good); }
.pgw-cell--neutral { background: var(--band-neutral-bg); color: var(--band-neutral); border-color: var(--band-neutral); }
.pgw-cell--tough   { background: var(--band-tough-bg);   color: var(--band-tough);   border-color: var(--band-tough); }
.pgw-cell--brutal  { background: var(--band-brutal-bg);  color: var(--band-brutal);  border-color: var(--band-brutal); }

/* Estimated fixture cell — dashed border, reduced opacity. */
.pgw-cell--estimated {
  border-style: var(--estimated-border-style);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER RANKER — controls, table, badges, fixture strip
   BEM-lite per CONVENTIONS.md §5.1. All colours via var(--…).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Controls bar ──────────────────────────────────────────────────────── */

.ranker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Position filter button group */
.ranker-controls__pos-group {
  display: flex;
  gap: var(--space-1);
}

.ranker-pos-btn {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-transform: uppercase;
}

.ranker-pos-btn.is-active {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ranker-pos-btn:hover:not(.is-active) {
  border-color: var(--color-muted);
  color: var(--color-text);
}

/* Select wrapper: label stacked above the select */
.ranker-controls__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ranker-controls__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ranker-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s;
}

.ranker-select:hover { border-color: var(--color-muted); }
.ranker-select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* Value / £pt toggle */
.ranker-toggle-btn {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  font-family: var(--font-sans);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.ranker-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ranker-toggle-btn:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

/* ─── Loading state ─────────────────────────────────────────────────────── */

.ranker-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.ranker-loading.is-visible {
  display: flex;
}

/* Simple animated ellipsis via CSS so no JS is needed */
.ranker-loading__text::after {
  content: '';
  animation: ranker-dots 1.2s steps(4, end) infinite;
}

@keyframes ranker-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ─── Table wrapper ─────────────────────────────────────────────────────── */

.ranker-table-wrap {
  overflow-x: auto;
  /* Subtle shadow on the right edge hints at horizontal scroll when needed */
  -webkit-overflow-scrolling: touch;
}

/* ─── Table ─────────────────────────────────────────────────────────────── */

.ranker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: auto;
}

/* Header cells */
.ranker-table__th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.ranker-table__th--sortable {
  cursor: pointer;
}

.ranker-table__th--sortable:hover {
  color: var(--color-text);
}

.ranker-table__th.is-sorted {
  color: var(--color-accent);
}

/* Sort direction arrow */
.sort-icon {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  margin-left: 2px;
}

/* Body cells */
.ranker-table__td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

/* Column-specific widths */
.ranker-table__td--name    { min-width: 9rem; font-weight: 500; }
.ranker-table__td--team    { white-space: nowrap; color: var(--color-muted); }
.ranker-table__td--pos     { white-space: nowrap; }
.ranker-table__td--price   { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranker-table__td--value   { white-space: nowrap; }
.ranker-table__td--fixtures{ white-space: nowrap; }
.ranker-table__td--min     { white-space: nowrap; }

/* Player rows — interactive */
.ranker-table__row {
  cursor: pointer;
  transition: background 0.1s;
}

.ranker-table__row:hover {
  background: var(--color-surface-raised);
}

.ranker-table__row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Loading state: spinner-style muted row */
.ranker-table__row.is-loading {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}

/* Empty / status message spanning full width */
.ranker-table__empty {
  padding: var(--space-8) var(--space-3);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-md);
}

/* ─── Position badge ─────────────────────────────────────────────────────── */

.ranker-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  /* Colour set by position modifier below */
}

.ranker-pos-badge--gkp { background: rgba(240, 192, 64,  0.15); color: var(--pos-gkp); }
.ranker-pos-badge--def { background: rgba(88,  166, 255, 0.12); color: var(--pos-def); }
.ranker-pos-badge--mid { background: rgba(163, 113, 247, 0.12); color: var(--pos-mid); }
.ranker-pos-badge--fwd { background: rgba(255, 159, 91,  0.12); color: var(--pos-fwd); }

/* ─── Status badge (injured / doubtful) ──────────────────────────────────── */

.ranker-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--band-brutal);
  background: var(--band-brutal-bg);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-left: var(--space-1);
  cursor: default;
  vertical-align: middle;
  line-height: 1;
}

/* ─── Minutes security badge ─────────────────────────────────────────────── */

.ranker-min-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  white-space: nowrap;
}

/* Band modifiers mirror the score band colour convention (CONVENTIONS.md §5.2) */
.ranker-min-badge--great   { background: var(--band-great-bg);   color: var(--band-great); }
.ranker-min-badge--good    { background: var(--band-good-bg);    color: var(--band-good); }
.ranker-min-badge--neutral { background: var(--band-neutral-bg); color: var(--band-neutral); }
.ranker-min-badge--tough   { background: var(--band-tough-bg);   color: var(--band-tough); }

/* ─── Fixture strip inside table cell ────────────────────────────────────── */

/* Reuses .pgw-cell / .pgw-cell--<band> from the matchup card; the container
   here is inline so it sits naturally inside a <td>. */
.ranker-fixtures {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
}

/* Compact sizing for table context — narrower than the matchup card strip */
.ranker-fixtures .pgw-cell {
  width: 28px;
  height: 20px;
  font-size: 0.65rem;
}

.ranker-no-fixtures {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — GW Decision Dashboard (Phase 2C)
   Squad builder (left) + decisions panel (right).
   BEM-lite per CONVENTIONS.md §5.1. Band colours reuse score-chip modifiers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Controls bar ───────────────────────────────────────────────────────── */

.dash-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-4);
}

.dash-search-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dash-search-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.dash-search-combo {
  position: relative;
}

.dash-search-input {
  width: 260px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.dash-search-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.dash-search-input::placeholder {
  color: var(--color-muted);
}

/* ─── Search results dropdown ────────────────────────────────────────────── */

.dash-search-results {
  display: none; /* shown by JS adding .is-open */
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 380px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 200;
  list-style: none;
  padding: var(--space-1) 0;
}

.dash-search-results.is-open {
  display: block;
}

.dash-search-results__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  user-select: none;
  transition: background 0.08s;
}

.dash-search-results__item:hover {
  background: var(--color-surface-raised);
}

.dash-search-results__item--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.dash-search-results__name {
  flex: 1;
  font-weight: 500;
}

.dash-search-results__meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.dash-search-results__empty {
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
  list-style: none;
}

/* ─── Position filter pills ──────────────────────────────────────────────── */

.dash-pos-filter {
  display: flex;
  gap: var(--space-1);
}

.dash-pos-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.dash-pos-btn.is-active {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Squad tally ────────────────────────────────────────────────────────── */

.dash-squad-tally {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
  margin: 0;
  align-self: flex-end;
}

/* ─── Main two-column shell ──────────────────────────────────────────────── */

.dash-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  padding: 0 var(--space-4) var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .dash-shell {
    grid-template-columns: 1fr;
  }
}

/* ─── Squad panel (left column) ──────────────────────────────────────────── */

.dash-squad-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-squad-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-1);
}

.dash-squad-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  min-height: 34px;
}

.dash-squad-slot--empty {
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-style: italic;
  font-size: var(--font-size-xs);
}

.dash-squad-slot--filled {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
}

.dash-squad-slot__name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dash-squad-slot__team {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-squad-slot__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-size-md);
  line-height: 1;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  transition: color 0.1s, background 0.1s;
}

.dash-squad-slot__remove:hover {
  color: var(--band-brutal);
  background: var(--band-brutal-bg);
}

/* ─── Decisions panel (right column) ─────────────────────────────────────── */

.dash-decisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-decisions__hint {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  font-size: var(--font-size-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
}

/* ─── Captain recommendation block ──────────────────────────────────────── */

.dash-captain {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.dash-captain__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dash-captain__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  font-weight: 800;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.dash-captain__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.dash-captain__name {
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.3;
}

.dash-captain__team {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: 400;
  margin-left: var(--space-1);
}

.dash-captain__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dash-captain__breakdown-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}

.dash-captain__breakdown-label {
  width: 52px;
  color: var(--color-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.dash-captain__breakdown-track {
  flex: 1;
  height: 5px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.dash-captain__breakdown-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.dash-captain__breakdown-value {
  width: 24px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ─── Starting XI and Bench lists ────────────────────────────────────────── */

.dash-xi,
.dash-bench {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dash-xi__header,
.dash-bench__header {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  background: var(--color-surface-raised);
}

/* ─── Player row (shared by XI and bench) ────────────────────────────────── */

.dash-player-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.dash-player-row:last-child {
  border-bottom: none;
}

.dash-player-row--captain {
  background: var(--color-accent-muted);
}

.dash-player-row__pos-badge {
  flex-shrink: 0;
}

.dash-player-row__name {
  flex: 1;
  font-weight: 500;
  min-width: 0;
}

.dash-player-row__captain-mark {
  font-weight: 800;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
}

.dash-player-row__team {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  flex-shrink: 0;
}

.dash-player-row__score {
  flex-shrink: 0;
}

/* Risk flags: full row below name/score on wrap */
.dash-player-row__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  width: 100%;
  /* Indent to align with the player name (past the pos badge). */
  padding-left: calc(36px + var(--space-2));
}

/* ─── GW state badge (Phase 3C-5) ───────────────────────────────────────── */

/* Container: sits at the top of the decisions panel at all times. */
.dash-gw-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Base badge: pill shape, tight uppercase label. */
.gw-state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}

/* GW LIVE — green with a gentle pulse to signal active data. */
.gw-state-badge--live {
  background: rgba(63, 185, 80, 0.13);
  color: var(--band-great);
  border: 1px solid var(--band-great);
  animation: gw-badge-pulse 1.8s ease-in-out infinite;
}

/* PRE-DEADLINE / OFF SEASON — quiet muted badge, no animation. */
.gw-state-badge--pre,
.gw-state-badge--done {
  background: var(--color-surface-raised);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* Subtle opacity pulse on the live badge only. */
@keyframes gw-badge-pulse {
  0%,  100% { opacity: 1;    }
  50%        { opacity: 0.55; }
}

/* "· data may be delayed" note shown next to the badge when data is stale. */
.gw-state-badge__stale {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
}

/* ─── Captain score wrap — projected chip + live pts side by side ─────────── */

.dash-captain__score-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin-left: auto;
}

/* ─── Live points display (Phase 3C-5) ───────────────────────────────────── */

/* Base: small accent-coloured text shown alongside the projected score chip. */
.dash-live-pts {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--band-good);
  white-space: nowrap;
  line-height: 1.4;
}

/* Stale: last known data but fetch failed — muted and italic. */
.dash-live-pts--stale {
  color: var(--color-muted);
  font-style: italic;
  opacity: 0.8;
}

/* Captain: accent colour to highlight the doubled-points pick. */
.dash-live-pts--captain {
  color: var(--color-accent);
}

/* Stale captain: override captain colour with muted, keep italic. */
.dash-live-pts--captain.dash-live-pts--stale {
  color: var(--color-muted);
}

/* ─── Risk flag chips ────────────────────────────────────────────────────── */

.dash-flag {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.6;
}

/* Rotation Risk — amber/tough band */
.dash-flag--rotation {
  background: var(--band-tough-bg);
  color: var(--band-tough);
}

/* Tough Fixture — red/brutal band */
.dash-flag--fixture {
  background: var(--band-brutal-bg);
  color: var(--band-brutal);
}

/* Low Confidence — uses --color-estimated so all estimated indicators share one token */
.dash-flag--confidence {
  background: rgba(122, 131, 144, 0.12);
  color: var(--color-estimated);
}

/* Availability Doubt — red/brutal band */
.dash-flag--availability {
  background: var(--band-brutal-bg);
  color: var(--band-brutal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSFER PLANNER — Phase 2D
   Squad builder (left) + transfer recommendations (right).
   BEM-lite per CONVENTIONS.md §5.1. Band colours reuse existing tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Controls bar ───────────────────────────────────────────────────────── */

.planner-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-4);
}

/* ─── Budget input ───────────────────────────────────────────────────────── */

.planner-budget-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.planner-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.planner-budget-input {
  width: 90px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s;
}

.planner-budget-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* ─── Free transfers toggle ──────────────────────────────────────────────── */

.planner-ft-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.planner-ft-btns {
  display: flex;
  gap: var(--space-1);
}

.planner-ft-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.planner-ft-btn.is-active {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.planner-ft-btn:hover:not(.is-active) {
  border-color: var(--color-muted);
  color: var(--color-text);
}

/* ─── Hit toggle ─────────────────────────────────────────────────────────── */

.planner-hit-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.planner-hit-toggle {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.planner-hit-toggle.is-active {
  background: var(--band-tough-bg);
  border-color: var(--band-tough);
  color: var(--band-tough);
}

.planner-hit-toggle:hover:not(.is-active) {
  border-color: var(--color-muted);
  color: var(--color-text);
}

/* ─── Position filter — reuses .dash-pos-btn; the planner variant shares the same
       visual style but scoped to .planner-pos-btn for JS targeting ─────────── */

.planner-pos-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.planner-pos-btn.is-active {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── Main two-column shell ──────────────────────────────────────────────── */

.planner-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  padding: 0 var(--space-4) var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .planner-shell {
    grid-template-columns: 1fr;
  }
}

/* ─── Right column wrapper (chips + recommendations stack) ───────────────── */

.planner-right-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* ─── Chip planner panel (Phase 4-3) ─────────────────────────────────────── */

.planner-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.planner-chips__hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.planner-chips__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.planner-chips__meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-left: auto;
}

.planner-chips__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.planner-chip-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.planner-chip-card--used {
  opacity: 0.45;
  border-left-color: var(--color-border);
}

.planner-chip-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.planner-chip-card__name {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.planner-chip-card__rec {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  margin-left: auto;
}

.planner-chip-card--used .planner-chip-card__rec {
  color: var(--color-muted);
  text-decoration: line-through;
}

.planner-chip-card__why {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.4;
  margin: 0;
}

.planner-chip-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.planner-chip-card__used-toggle {
  font-size: var(--font-size-xs);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  color: var(--color-muted);
  cursor: pointer;
}

.planner-chip-card__used-toggle[aria-pressed="true"] {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border-subtle);
}

.planner-chip-card__hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
}

/* ─── Recommendations panel (right column) ───────────────────────────────── */

.planner-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Empty / loading state */
.planner-hint {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  font-size: var(--font-size-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
}

/* ─── Section headers ────────────────────────────────────────────────────── */

.planner-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.planner-section__hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.planner-section__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.planner-section__meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-left: auto;
}

.planner-section-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* ─── Transfer recommendation card ──────────────────────────────────────── */

.planner-transfer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.planner-transfer-card--double {
  border-left: 3px solid var(--color-accent);
}

.planner-transfer-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.planner-transfer-card__header--double {
  background: var(--color-accent-muted);
}

/* Out→In player row */
.planner-transfer-card__body {
  display: flex;
  align-items: stretch;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Arrow between out and in */
.planner-transfer-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  color: var(--color-muted);
  flex-shrink: 0;
  align-self: center;
}

/* Double-swap container */
.planner-transfer-card__double-swaps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.planner-transfer-card__swap-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-4) 0;
}

.planner-transfer-card__swap-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4) var(--space-2);
}

.planner-transfer-card__divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-2) 0 0;
}

/* ─── Delta indicator ────────────────────────────────────────────────────── */

.planner-delta {
  font-size: var(--font-size-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.planner-delta--gain { color: var(--band-good); }
.planner-delta--loss { color: var(--band-brutal); }

/* Estimated delta: underlying projections have low confidence. */
.planner-delta--estimated {
  opacity: 0.7;
}
.planner-delta--estimated::before {
  content: '~';
  font-size: 0.75em;
  opacity: 0.7;
  margin-right: 1px;
}

.planner-delta--sm {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* ─── Cost difference ────────────────────────────────────────────────────── */

.planner-cost-diff {
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.planner-cost-diff--sm {
  font-size: var(--font-size-xs);
}

/* ─── Budget remaining ───────────────────────────────────────────────────── */

.planner-budget-remaining {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ─── Hit warning badge ──────────────────────────────────────────────────── */

.planner-hit-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.6;
  background: var(--band-tough-bg);
  color: var(--band-tough);
  border: 1px solid var(--band-tough);
}

/* ─── Player projection block ────────────────────────────────────────────── */

.planner-player {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.planner-player__dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  margin-top: 2px;
}

.planner-player__dir--out {
  background: var(--band-brutal-bg);
  color: var(--band-brutal);
}

.planner-player__dir--in {
  background: var(--band-good-bg);
  color: var(--band-good);
}

.planner-player__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.planner-player__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
}

.planner-player__team-inline {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: 400;
}

.planner-player__price {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ─── Mini projection breakdown bars ────────────────────────────────────── */

.planner-breakdown {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.planner-breakdown__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
}

.planner-breakdown__lbl {
  width: 40px;
  color: var(--color-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.planner-breakdown__track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}

.planner-breakdown__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.planner-breakdown__val {
  width: 20px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALIBRATION VIEW  (#calibration — developer tool)
   ═══════════════════════════════════════════════════════════════════════════ */

.calib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.calib-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.calib-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.calib-accuracy {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.calib-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.calib-btn:hover {
  background: var(--color-border);
}

.calib-btn--clear {
  color: var(--band-brutal);
  border-color: var(--band-brutal);
}

.calib-empty {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-8) 0;
}

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

.calib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.calib-table th,
.calib-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}

.calib-table th {
  color: var(--color-muted);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface);
  position: sticky;
  top: 0;
}

.calib-table tbody tr:hover {
  background: var(--color-surface-raised);
}

.calib-fixture {
  white-space: nowrap;
}

.calib-call--correct {
  color: var(--band-good);
  font-weight: 700;
}

.calib-call--wrong {
  color: var(--band-brutal);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SQUAD IMPORT  (Phase 4-1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrap is `position: relative` so the panel can be positioned absolutely below
   the button without disrupting the flex controls bar layout. */
.squad-import-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

.squad-import-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.squad-import-btn:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.squad-import-btn.is-open {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.squad-import-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Panel drops down from the wrap as an overlay — does not affect controls bar height. */
.squad-import-panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 280px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Row inside the panel: label + input + action buttons side by side */
.squad-import-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.squad-import-label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.squad-import-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-3);
  width: 130px;
  transition: border-color 0.15s;
  /* Hide the number-input spinners — they add no value here */
  -moz-appearance: textfield;
}

.squad-import-input::-webkit-inner-spin-button,
.squad-import-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.squad-import-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.squad-import-go {
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: opacity 0.15s;
}

.squad-import-go:hover  { opacity: 0.85; }
.squad-import-go:active { opacity: 0.7;  }

.squad-import-go:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.squad-import-cancel {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.squad-import-cancel:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.squad-import-cancel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Status line — full-width row below the controls */
.squad-import-status {
  width: 100%;
  font-size: var(--font-size-xs);
  min-height: 1.2em;
}

.squad-import-status--loading { color: var(--color-muted); font-style: italic; }
.squad-import-status--success { color: var(--band-great);  font-weight: 600; }
.squad-import-status--error   { color: var(--band-brutal); font-weight: 600; }
.squad-import-status--idle    { color: var(--color-muted); }

/* Team info line: "Team Name · Manager · Overall rank: N" */
.squad-import-info {
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  min-height: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4-4  PRICE CHANGE INDICATORS
   Ranker column + Transfer Planner warnings.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ranker: price change column cell ──────────────────────────────────────── */

.ranker-table__td--price-change {
  white-space: nowrap;
  text-align: center;
}

.ranker-price-change {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: default;
}

.ranker-price-change--rise {
  color: var(--band-great);
  background: color-mix(in srgb, var(--band-great) 12%, transparent);
}

.ranker-price-change--fall {
  color: var(--band-brutal);
  background: color-mix(in srgb, var(--band-brutal) 12%, transparent);
}

.ranker-price-change--stable {
  color: var(--color-muted);
}

/* ── Transfer Planner: price change footer on transfer cards ───────────────── */

.planner-transfer-card__price-footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.planner-price-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: default;
}

.planner-price-warning--buy-now {
  color: var(--band-great);
  background: color-mix(in srgb, var(--band-great) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--band-great) 35%, transparent);
}

.planner-price-warning--rise {
  color: var(--band-good);
  background: color-mix(in srgb, var(--band-good) 12%, transparent);
}

.planner-price-warning--fall {
  color: var(--band-brutal);
  background: color-mix(in srgb, var(--band-brutal) 12%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE COMPONENTS  ≤ 768px — Phase 4-5
   Purely additive overrides. Desktop rules are completely untouched.
   No new hardcoded values — all tokens from base.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Matchup Analyser ──────────────────────────────────────────────────── */

  /* The matchup grid already collapses to single-column at 800px.
     Below 768px we tighten the breakdown-row grid so the "Counter-Matchup"
     label (9.5rem on desktop) doesn't overflow a 375px screen. */
  .breakdown-row {
    grid-template-columns: 7rem 1fr 2rem 2rem auto;
  }

  .breakdown-row__label {
    font-size: var(--font-size-xs);
  }

  /* Counter-pairing: narrower label column on small screens */
  .counter-pairing {
    grid-template-columns: 6rem auto 1fr auto;
  }

  .counter-pairing__label {
    font-size: var(--font-size-xs);
  }

  /* Tighten card padding */
  .matchup-card__header,
  .matchup-card__score-row,
  .matchup-card__breakdown,
  .matchup-card__counter,
  .matchup-card__horizon {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* Team name: step down one level so it fits beside the venue badge */
  .matchup-card__team {
    font-size: var(--font-size-md);
  }

  /* Score pill value: one step smaller so the pill fits in the card header */
  .score-pill__value {
    font-size: var(--font-size-xl);
  }

  /* Fixture picker: go full width inside the controls bar */
  .matchup-controls {
    flex-wrap: wrap;
  }

  .fixture-picker {
    min-width: 0;
    width: 100%;
  }

  /* ─── Player Ranker — table → card list ──────────────────────────────────
     Each <tr> becomes a flex card. Specific <td> columns are hidden or
     repositioned to show only the key stats: pos · name · price · value ·
     fixture strip. The <thead> is visually hidden but kept for screen readers.
     ─────────────────────────────────────────────────────────────────────── */

  /* Unwrap the table from table layout so rows can be flex cards */
  .ranker-table,
  .ranker-table tbody {
    display: block;
    width: 100%;
  }

  /* Visually hide the column headers — screen readers still read them */
  .ranker-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Each row becomes a card */
  .ranker-table__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    min-height: 44px;
    /* Reset the desktop hover background so it doesn't fight the border */
    transition: border-color 0.1s;
  }

  .ranker-table__row:hover {
    background: var(--color-surface);
    border-color: var(--color-muted);
  }

  /* All <td> reset from table-cell to inline-flex items */
  .ranker-table__td {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-bottom: none;
    vertical-align: unset;
  }

  /* Position badge: first in visual order */
  .ranker-table__td--pos {
    order: -1;
    flex-shrink: 0;
  }

  /* Name: takes all remaining space on the first line */
  .ranker-table__td--name {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    /* Truncate very long names gracefully */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Team abbreviation: hidden — redundant with the fixture strip */
  .ranker-table__td--team {
    display: none;
  }

  /* Price: small muted text, stays on the first line */
  .ranker-table__td--price {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    white-space: nowrap;
  }

  /* Value chip: stays on first line */
  .ranker-table__td--value {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Fixture strip: wraps onto its own full-width second line */
  .ranker-table__td--fixtures {
    flex-basis: 100%;
    order: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Remove the whitespace:nowrap set on desktop */
    white-space: normal;
  }

  /* Minutes security badge: hidden on mobile — too much noise */
  .ranker-table__td--min {
    display: none;
  }

  /* Price-change cell: stays visible after the value chip */
  .ranker-table__td--price-change {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: left;
  }

  /* Empty / loading state: block so colspan has no effect */
  .ranker-table__td.ranker-table__empty,
  .ranker-table__empty {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--space-6) var(--space-3);
  }

  /* Controls bar: tighten gaps, allow toggle buttons to wrap naturally */
  .ranker-controls {
    gap: var(--space-2);
  }

  /* Toggle buttons: remove the desktop auto left margin so they wrap inline */
  .ranker-toggle-btn {
    margin-left: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  /* Select wrappers: let them grow to fill available width */
  .ranker-controls__select-wrap {
    flex: 1;
    min-width: 0;
  }

  .ranker-select {
    width: 100%;
  }

  /* Position filter buttons: 44px tap targets */
  .ranker-pos-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── GW Dashboard ────────────────────────────────────────────────────── */

  /* Controls: stack vertically so each control is full width */
  .dash-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* Search combo and input: full width */
  .dash-search-combo {
    width: 100%;
  }

  .dash-search-input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Search results dropdown: match the now full-width input */
  .dash-search-results {
    max-width: 100%;
  }

  /* Position filter: 44px tap targets */
  .dash-pos-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Import button: full width so it's easy to tap */
  .squad-import-btn {
    min-height: 44px;
    width: 100%;
  }

  /* Import panel: full width below the button */
  .squad-import-wrap {
    width: 100%;
  }

  .squad-import-panel {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }

  /* Squad tally: centred */
  .dash-squad-tally {
    text-align: center;
    align-self: center;
  }

  /* dash-shell is already single-column at 900px; reduce padding */
  .dash-shell {
    padding: 0 0 var(--space-8);
    gap: var(--space-4);
  }

  /* Squad slots: taller to be comfortably tappable */
  .dash-squad-slot {
    min-height: 44px;
  }

  /* Captain card: less horizontal padding on a small screen */
  .dash-captain {
    padding: var(--space-3);
  }

  /* Player rows: 44px minimum tap height */
  .dash-player-row {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  /* Risk flags: remove the desktop indent that assumes a wide name column */
  .dash-player-row__flags {
    padding-left: 0;
  }

  /* ─── Transfer Planner ────────────────────────────────────────────────── */

  /* Controls: stack vertically */
  .planner-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* Budget input: full width */
  .planner-budget-wrap {
    width: 100%;
  }

  .planner-budget-input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Free-transfer buttons: 44px tap targets */
  .planner-ft-btn {
    min-height: 44px;
    flex: 1;
    justify-content: center;
  }

  /* Hit toggle: full width, 44px */
  .planner-hit-toggle {
    min-height: 44px;
    width: 100%;
  }

  /* Position filter: 44px */
  .planner-pos-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* planner-shell is already single-column at 900px; reduce padding */
  .planner-shell {
    padding: 0 0 var(--space-8);
    gap: var(--space-4);
  }

  /* Chip grid: single column */
  .planner-chips__grid {
    grid-template-columns: 1fr;
  }

  /* Transfer card body: OUT stacks above IN instead of left/right.
     The arrow element is rotated 90° so "→" becomes "↓" without HTML changes. */
  .planner-transfer-card__body {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .planner-transfer-card__arrow {
    align-self: center;
    /* Rotate the → arrow clockwise so it points downward */
    transform: rotate(90deg);
  }

  /* Player projection blocks: full width when stacked */
  .planner-player {
    width: 100%;
  }

  /* Price change footer: reduce padding */
  .planner-transfer-card__price-footer {
    padding: var(--space-2) var(--space-3);
  }
}