/* ─────────────────────────────────────────────────────────
   styles-append-cappers-rail-v0.16.65.css
   CAPPERS command page — in-deck seg → props-pill restyle (#F1).

   Pure APPEND on v0.16.64: loads AFTER styles-append-cappers-rail-
   v0.16.64.css in cappers.html; the shipped v0.16.64 file is NOT edited
   (append discipline, mirrors props' v0.18.0 → v0.18.0.1 split).

   This file is the last word on the FILTERS-deck controls. It converts the
   in-deck segmented bars — #seg-league / #seg-min (SCOPE), #seg-win (WINDOW),
   and the .seg-toggles View pair #btn-saved / #btn-compare (BOARD) — from the
   joined `.capper-controls .seg` bar chrome into free-standing bordered pills
   that match props' `.pr-opt` (styles-append-props-rail-v0.18.0.css).

   SCOPE IS DELIBERATELY NARROW: `.cap-deck-cols .pr-opts .seg` only. The
   heat-strip STAKING seg (`.strip-seg`, #seg-stake) and the visually-hidden
   `.cap-mirror` segs (#seg-mode / #seg-bettype) are NOT matched, so the
   existing wireBetType / syncSegs / staged-deck (deckOpen) JS is untouched —
   this is chrome only, no behavior change.

   PALETTE NOTE: active-pill tints follow THIS page's own v0.16.64 column
   headers (mint #5DE0AC SCOPE / cyan #5AC8D8 WINDOW / amber #E0A85D BOARD),
   NOT props' mint/amber/violet — so the pills read consistent with the
   tri-color headers already shipped here. Per-column retint is done with
   :has() on the header class, so no HTML hook is added (stays CSS-only).

   SCOPING RULE (NBA #107 / #112): every selector — including every member of
   every comma list — is individually scoped under .cappers-command-page.
   Tokens where they exist; the mint/cyan/amber literals match the sibling
   rail/heat-rail files.
   ───────────────────────────────────────────────────────── */

/* ═══ Seg container → transparent pill row (kills the joined-bar chrome) ═══ */
.cappers-command-page .cap-deck-cols .pr-opts .seg {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 0; border-radius: 0; overflow: visible;
  background: transparent; height: auto; padding: 0;
}

/* ═══ Each seg button → props .pr-opt pill ══════════════════════════════ */
.cappers-command-page .cap-deck-cols .pr-opts .seg button {
  border: 1px solid var(--border); background: transparent;
  border-radius: 7px; color: var(--text-secondary);
  font: 500 11px var(--font-mono); letter-spacing: normal; line-height: 1.2;
  padding: 6px 10px; margin: 0; height: auto;
  cursor: pointer; white-space: nowrap;
}
.cappers-command-page .cap-deck-cols .pr-opts .seg button:hover {
  border-color: rgba(255, 255, 255, 0.22); color: var(--text-primary);
}

/* ═══ Active pill — default = mint (SCOPE) ══════════════════════════════
   Covers .on (league / min / win) and [aria-pressed] (View toggles). The
   WINDOW and BOARD columns retint below via :has() on the column header. */
.cappers-command-page .cap-deck-cols .pr-opts .seg button.on,
.cappers-command-page .cap-deck-cols .pr-opts .seg-toggles button[aria-pressed="true"] {
  border-color: rgba(93, 224, 172, 0.55);
  background: rgba(93, 224, 172, 0.09);
  color: #5DE0AC; font-weight: 700;
}

/* WINDOW column (pr-h-shape → cyan) */
.cappers-command-page .cap-deck-cols .pr-deck-col:has(.pr-h-shape) .pr-opts .seg button.on {
  border-color: rgba(90, 200, 216, 0.55);
  background: rgba(90, 200, 216, 0.09);
  color: #5AC8D8;
}

/* BOARD column (pr-h-edge → amber) — .on segs + the View toggle pair */
.cappers-command-page .cap-deck-cols .pr-deck-col:has(.pr-h-edge) .pr-opts .seg button.on,
.cappers-command-page .cap-deck-cols .pr-deck-col:has(.pr-h-edge) .pr-opts .seg-toggles button[aria-pressed="true"] {
  border-color: rgba(224, 168, 93, 0.55);
  background: rgba(224, 168, 93, 0.09);
  color: #E0A85D;
}