/* ════════════════════════════════════════════════════════════
   STARTER PICKER — redesigned. Two-section layout (Starting +
   Bench, plus an Absent section if any), auto-suggested fairest
   lineup, tap-to-swap rows, Shuffle for alternatives, fairness
   indicator. Mode toggles (Randomise / Weighted / Strict) are
   gone — the picker always uses fewest-starts-first with
   longest-since-last-start as the tiebreaker.
   ════════════════════════════════════════════════════════════ */

.sp-root {
  margin-top: 12px;
}

/* Header */
.sp-root .sp-header {
  position: relative;
  /* 12px max — matches the gap between any two adjacent sections
     on the pre-game screen so the picker doesn't open with a
     visible "black gap" beneath its subtitle. */
  margin-bottom: 12px;
}
.sp-root .sp-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 24px;
  color: var(--white);
  letter-spacing: -0.3px;
  margin: 0 0 2px;
}
.sp-root .sp-subtitle {
  font-size: 12px;
  color: var(--muted);
}
/* Tiny "reset season counts" affordance — tucked top-right so it
   doesn't compete with the title. */
.sp-root .sp-reset-btn {
  position: absolute;
  right: 0; top: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.sp-root .sp-reset-btn:hover { border-color: var(--orange); color: var(--orange); }

/* Two-column outer grid — STARTING on the left, BENCH TODAY on
   the right. Same template + gap as .availability-grid resolves
   to at typical phone widths, so the section column widths match
   the avail tile widths above. */
.sp-root .sp-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

/* Sections */
.sp-root .sp-section { margin-bottom: 0; }
.sp-root .sp-section-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sp-root .sp-label-starting { color: var(--green); }
.sp-root .sp-label-bench    { color: var(--muted); }
.sp-root .sp-label-absent   { color: rgba(239,68,68,0.5); }

/* Pills inside one section — single-column flex stack. width:100%
   on each pill (default flex stretch on the cross axis) lets the
   pill fill its parent section column. */
.sp-root .sp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Player rows. Stagger-fade-in via the .sp-row-anim class added in
   buildStarterGrid; --idx is set inline so the delay scales with row
   position. */
.sp-root .sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  /* Spec sizing — coach taps under pressure, often with sweaty
     fingers. 56px min height with 14×16 padding gives a confident
     tap target. */
  min-height: 56px;
  padding: 14px 16px;
  margin-bottom: 2px;
  transition: background 0.18s, border-color 0.18s, transform 0.18s, opacity 0.18s, box-shadow 0.18s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,92,26,0.12);
  min-width: 0;
  /* Whole row tappable — make sure no inner span eats the tap. */
  position: relative;
}
.sp-root .sp-row > * { pointer-events: none; }
.sp-root .sp-row.sp-row-anim {
  animation: sp-fade-up 0.32s ease both;
  animation-delay: calc(var(--idx, 0) * 0.05s);
}
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Starting + Bench rows — these are .avail-tile by another name.
   Every box-model value below is copied verbatim from .avail-tile
   in css/gameday.css so DevTools shows identical computed values
   for both pill types. Only colour and the right-side glyph differ.
   No justify-content:space-between, no inner wrapper — the avail
   tile achieves the same layout via flex:1 on the middle name span
   (see _spRow in js/gameday-tab.js). */
.sp-root .sp-row-starting,
.sp-root .sp-row-bench {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: 8px;
  /* Reset the base .sp-row min-height (56px) — .avail-tile has no
     min-height and we want pixel-identical box model. */
  min-height: 0;
  cursor: pointer; transition: all 0.15s;
  font-size: 14px; font-weight: 600;
  user-select: none;
}

/* Starting variant — green tint + border + dot, per spec. */
.sp-root .sp-row-starting {
  background: rgba(61,191,108,0.08);
  border: 1.5px solid rgba(61,191,108,0.3);
  color: var(--text);
}

/* Bench variant — dark2 + muted border + grey dot, name in --sub. */
.sp-root .sp-row-bench {
  background: var(--dark2);
  border: 1px solid var(--border);
  color: var(--sub);
}
.sp-root .sp-row-bench:active { transform: scale(0.98); }

/* Absent row — tappable to bring a late arrival back into the pool.
   Slightly less faded than fully-disabled so the affordance reads. */
.sp-root .sp-row-absent {
  background: var(--dark2);
  border: 1px dashed var(--border);
  opacity: 0.5;
  cursor: pointer;
}
.sp-root .sp-row-absent:active { transform: scale(0.98); opacity: 0.7; }
.sp-root .sp-row-absent .sp-row-name { text-decoration: line-through; }

/* Tap pulse: brief scale + flash on swap */
.sp-root .sp-row.sp-row-pulse {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgba(255,92,26,0.4);
}

/* Swap pick — first tap of a two-tap swap. Orange ring on the
   armed row, ⇄ glyph on the right side of it. While armed, all
   other rows dim to opacity 0.7 so the coach's eye is drawn to
   the available swap targets. Second tap clears the state. */
.sp-root .sp-row.sp-row-pick {
  border: 2px solid var(--orange) !important;
  background: rgba(255,92,26,0.1) !important;
  opacity: 1 !important;
}
.sp-root .sp-row.sp-row-pick::after {
  content: '⇄';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 16px;
  font-weight: 900;
  pointer-events: none;
}
/* When any row is armed, dim the rest to focus attention on swap
   candidates. The .sp-armed flag is added to .sp-root by buildStarterGrid. */
.sp-root.sp-armed .sp-row:not(.sp-row-pick) { opacity: 0.7; }

/* Row internals — dot mirrors .avail-tile-dot box model exactly. */
.sp-root .sp-row-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-root .sp-row-starting .sp-row-dot {
  background: var(--green);
  box-shadow: 0 0 5px rgba(61,191,108,0.5);
}
.sp-root .sp-row-bench    .sp-row-dot { background: #444; }
.sp-root .sp-row-absent   .sp-row-dot { background: rgba(239,68,68,0.5); }

/* Player name — exact mirror of the unstyled <span style="flex:1">
   inside .avail-tile (font inherited, weight inherited from row,
   flex:1 so the action gets pushed to the right edge). Truncates
   cleanly on long names. */
.sp-root .sp-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Right-side action — matches .avail-tile-action (font-size 13,
   weight 700, no background, no border, sits flush against the
   right-side padding via flex-shrink:0 + min-width). The "Nx"
   text is the start-count equivalent of the ✓ glyph. */
.sp-root .sp-row-action {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 14px;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
}
/* "Hasn't started yet" — amber, only meaningful on a starting row
   but harmless if it ever appeared on a bench row (just calls out
   the next-most-due player). */
.sp-root .sp-row-action.sp-action-noStarts {
  color: var(--amber);
}
/* Absent rows show "Absent" rather than a count. Slightly redder
   so the row reads as out-of-pool. */
.sp-root .sp-row-absent .sp-row-action {
  color: rgba(239,68,68,0.7);
}
.sp-root .sp-row-absent .sp-row-badge {
  color: rgba(239,68,68,0.7);
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.18);
}

/* Shuffle button — sits between the starting and bench sections. */
.sp-root .sp-shuffle-btn {
  display: block;
  margin: 4px 0 14px auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--muted);
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
.sp-root .sp-shuffle-btn:hover { border-color: var(--orange); color: var(--orange); }
.sp-root .sp-shuffle-btn:active { transform: scale(0.97); }

/* Counter + fairness line above the start buttons */
.sp-root .sp-counter {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}
.sp-root .sp-counter span {
  color: var(--white);
  font-weight: 800;
}
.sp-root .sp-fairness {
  text-align: center;
  font-size: 11px;
  margin: 4px 0 12px;
  min-height: 14px;
  letter-spacing: 0.2px;
}
.sp-root .sp-fairness.fair     { color: var(--green); }
.sp-root .sp-fairness.modified { color: var(--amber); }