/* ─────────────────────────────────────────────────────────
   styles-append-cappers-rail-v0.16.64.css
   CAPPERS command page — props-style labeled-column FILTERS deck.

   Loads LAST in cappers.html (after -heat-rail v0.16.62), so these rules win
   the cascade. Ports props.html's .pr-deck three-column chrome onto the
   cappers facet deck: the old flat .cap-deck-grid row is replaced by
   SCOPE / WINDOW / BOARD columns, each with a header + labeled facets, plus
   a staged CLOSE / APPLY foot (APPLY commit wired in cappers-v0.16.64.js).

   The heat-rail file still owns: .cap-deck open/close, .cap-rail, tokens,
   badge, .cap-deck-foot base, and the segs' base chrome (via
   .capper-controls .seg). This file only adds the column layout + APPLY btn.

   SCOPING RULE (NBA #107 / #112): every selector — including every member of
   every comma list — is individually scoped under .cappers-command-page.
   Tokens only (var(--…)); mint #5DE0AC literal matches the sibling files.
   ───────────────────────────────────────────────────────── */

/* ═══ Deck columns (mirrors props .pr-deck) ══════════════════════════ */
.cappers-command-page .cap-deck-cols {
  display: flex; align-items: flex-start; gap: 0;
}
.cappers-command-page .cap-deck-cols .pr-deck-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 22px;
}
.cappers-command-page .cap-deck-cols .pr-deck-col + .pr-deck-col {
  border-left: 1px solid var(--divider);
}
.cappers-command-page .cap-deck-cols .pr-deck-col:first-child { padding-left: 4px; }
.cappers-command-page .cap-deck-cols .pr-deck-col:last-child  { padding-right: 4px; }

/* Column header — small mono caps with an accent hairline, one tint per
   column to echo props' tri-color SCOPE / SHAPE / EDGE headers. */
.cappers-command-page .cap-deck-cols .pr-deck-h {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 7px; margin-bottom: 2px;
  border-bottom: 1px solid var(--divider);
}
.cappers-command-page .cap-deck-cols .pr-h-scope { color: #5DE0AC; }
.cappers-command-page .cap-deck-cols .pr-h-shape { color: #5AC8D8; }
.cappers-command-page .cap-deck-cols .pr-h-edge  { color: #E0A85D; }

/* Facet — a labeled control group inside a column. */
.cappers-command-page .cap-deck-cols .pr-facet {
  display: flex; flex-direction: column; gap: 6px;
}
.cappers-command-page .cap-deck-cols .pr-facet-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.cappers-command-page .cap-deck-cols .pr-opts {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* segs inside .pr-opts keep their .capper-controls .seg base chrome; just
   let them size to content rather than stretch the column. */
.cappers-command-page .cap-deck-cols .pr-opts .seg { flex: 0 0 auto; }
.cappers-command-page .cap-deck-cols .pr-opts .oddsband-locked { margin: 0; }

/* ═══ Deck foot — CLOSE / APPLY (staged) ═════════════════════════════ */
.cappers-command-page .cap-deck-foot-btns {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
/* Primary APPLY — mint fill, mirrors props .pr-btn-primary. */
.cappers-command-page #deck-apply.cap-btn-primary {
  color: var(--bg-base); background: #5DE0AC;
  border-color: #5DE0AC; font-weight: 700;
}
.cappers-command-page #deck-apply.cap-btn-primary:hover {
  background: #6ee9b9; border-color: #6ee9b9; color: var(--bg-base);
}
/* Nothing staged → APPLY reads inert (matches the "no pending change" state). */
.cappers-command-page #deck-apply.cap-btn-primary:disabled {
  color: var(--text-tertiary); background: transparent;
  border-color: var(--border-strong); font-weight: 600;
  cursor: default; opacity: 0.7;
}

/* ═══ Responsive — columns stack, dividers become top rules ══════════ */
@media (max-width: 760px) {
  .cappers-command-page .cap-deck-cols { flex-direction: column; gap: 0; }
  .cappers-command-page .cap-deck-cols .pr-deck-col {
    width: 100%; padding: 14px 0;
  }
  .cappers-command-page .cap-deck-cols .pr-deck-col + .pr-deck-col {
    border-left: 0; border-top: 1px solid var(--divider);
  }
  .cappers-command-page .cap-deck-cols .pr-deck-col:first-child { padding-top: 2px; }
}