/* styles-append-cappers-command-v0.16.54.3.css
   Full-replacement append for cappers.html (single-append page — replaces the
   v0.16.43.7 link, not stacked on it). CAPPERS #A + #C.

   v0.16.48 — 2026-07-10:
   · CAPPERS #C — comma-list scoping fix. v0.16.43.7 claimed "every bare
     selector scoped under .cappers-command-page" but the .score/.net/.roi
     pos/neg rules were comma LISTS where only the FIRST selector inherited the
     page scope — .net.pos / .roi.pos / .net.neg / .roi.neg shipped bare, the
     exact generic-combo collision surface NBA #107 exists to prevent. Every
     selector in both lists is now individually scoped. (This is the sibling of
     NBA #107: a scoping pass that missed the tail of a comma list rather than a
     whole file.) New GOTCHAS_NBA #112.
   · CAPPERS #A — the score-method note (#note) is un-hidden and styled as a
     compact method line; it was the only score-methodology copy on the page and
     shipped display:none. Added a neutral .roi.blank style for the em-dash ROI
     that NR rows now render (was a fabricated +0.00). Top Net em values now
     take pos/neg color.
   · The .quickchips/.quickchip block was never styled here; those chips are
     removed from cappers.html in this ship, so nothing to add.

   ---- prior history (unchanged below) ----
   v0.16.43.7 — NBA #C (scoped variant): every bare selector scoped under
   .cappers-command-page per gotcha NBA #107 (cascade-tie collision safety
   both directions vs styles.css). ZERO class renames — cappers.js's
   injected-markup contract untouched; the cosmetic bare-class rename
   remains queued if wanted. Was:
   v0.16.43.6 — Tier 3 shrink: h1 + eyebrow typography removed; owned by
   tt- layer in styles.css. KPI kcells stay page-owned (JS-injected markup
   — migration deferred pending cappers.js). Was:
   Cappers Command Ledger — expectation-match hotfix.
   v0.16.43.4 — hero title unified to shared canon: clamp(42,4.2vw,64)/900/-0.055em,
   text-transform removed (Title Case source), eyebrow weight 700 (split from
   shared 800 rule; ledger-label/side-head keep 800). Cross-page uniformity pass. */

.cappers-command-page {
  background-image:
    radial-gradient(ellipse at top right, rgba(0,217,122,.038), transparent 54%),
    radial-gradient(ellipse at bottom left, rgba(255,255,255,.014), transparent 52%);
}
.cappers-command-page .top-bar { border-bottom-color: rgba(255,255,245,.09); }
.cappers-command-page .top-bar-inner { max-width: 1400px; }
.cappers-main { max-width: 1400px; padding-top: 28px; }

.cappers-command-page .panelish {
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.010));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.024);
}

/* Hero: two broad cards, matching the expected render. */
.capper-hero {
  display: grid;
  grid-template-columns: minmax(0,1.22fr) minmax(420px,.96fr);
  gap: 18px;
  padding: 0;
  margin-bottom: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.capper-hero:before { display:none; }
.capper-hero-copy {
  min-height: 238px;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.010));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.024);
}
.cappers-command-page .ledger-label,
.cappers-command-page .side-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-pos);
}
.cappers-command-page .capper-hero h1 {
  margin: 17px 0 14px;
}
.capper-dot { color: var(--accent-pos); }
.capper-sub {
  max-width: 690px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.capper-chip-row { display:none; }

.capper-kgrid {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  min-height:238px;
  background:rgba(14,14,16,.74);
}
.capper-kcell {
  padding: 27px 26px 20px;
  background: rgba(14,14,16,.72);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.capper-kcell:nth-child(2n) { border-right:0; }
.capper-kcell:nth-child(n+3) { border-bottom:0; }
.capper-kcell .k {
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}
.capper-kcell .v {
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:31px;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--text-primary);
}
.capper-kcell .v.pos,
.cappers-command-page .pos { color:var(--accent-pos); }
.capper-kcell .v.neg,
.cappers-command-page .neg { color:var(--accent-neg); }
.capper-kcell .meta { margin-top:8px; font-size:11px; color:var(--text-tertiary); }

/* Read strip */
.capper-read {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  margin-bottom:14px;
  padding:14px 18px;
  border-color:rgba(0,217,122,.24);
  background:rgba(0,217,122,.035);
}
.capper-read-icon {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:var(--accent-pos); background:var(--accent-pos-dim); border:1px solid var(--accent-pos-border);
  font-family:var(--font-mono); font-size:13px;
}
.capper-read-copy { font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--text-secondary); }
.capper-read-copy span { color:var(--accent-pos); font-weight:800; letter-spacing:.14em; margin-right:10px; }
.capper-read-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); text-align:right; }

/* Controls: full-width command strip. */
.capper-controls { padding:14px 16px; margin-bottom:14px; }
.capper-controls .controls { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; margin:0; }
.capper-controls .grp { display:flex; flex-direction:row; align-items:center; gap:10px; }
.capper-controls .searchgrp { flex:1 1 420px; }
.capper-controls .lbl { display:none; }
.capper-controls .search { width:100%; position:relative; }
.capper-controls .search input {
  width:100%; min-width:260px; height:42px; padding:0 38px 0 38px;
  border:1px solid var(--border); border-radius:8px;
  background:rgba(12,12,14,.76); color:var(--text-primary);
  font-family:var(--font-display); font-size:14px; outline:none;
}
.capper-controls .search:before { content:'⌕'; position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); z-index:1; font-family:var(--font-mono); }
.capper-controls .search input:focus { border-color:var(--accent-pos-border); }
.capper-controls .search input::placeholder { color:var(--text-tertiary); }
.capper-controls .clr {
  position:absolute; right:8px; top:50%; transform:translateY(-50%); display:none;
  background:transparent; border:0; color:var(--text-tertiary); cursor:pointer; padding:4px 7px;
}
.capper-controls .search input:not(:placeholder-shown) ~ .clr { display:block; }
.capper-controls .seg { display:inline-flex; height:42px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(12,12,14,.76); }
.capper-controls .seg button {
  border:0; border-right:1px solid var(--border); background:transparent;
  color:var(--text-secondary); padding:0 16px; font-family:var(--font-display); font-size:13px; cursor:pointer;
}
.capper-controls .seg button:last-child { border-right:0; }
.capper-controls .seg button.on { background:var(--accent-pos); color:var(--bg-base); font-weight:800; }
.capper-controls .spacer { flex:0 0 auto; }
.capper-controls .count { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); white-space:nowrap; }

/* Main content: wide ledger + right rail. */
.capper-content-grid {
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(330px,.76fr);
  gap:14px;
  align-items:start;
}
.capper-ledger { overflow:hidden; }
.cappers-command-page .ledger-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  padding:18px 18px 15px; border-bottom:1px solid var(--border);
}
.cappers-command-page .ledger-label { color:var(--text-primary); }
.cappers-command-page .ledger-label span { color:var(--text-tertiary); font-size:10px; margin-left:10px; font-weight:500; }
.cappers-command-page .tierleg { margin-top:10px; color:var(--text-tertiary); font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; }
.cappers-command-page .ledger-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); white-space:nowrap; }
.cappers-command-page .tablewrap { overflow:auto; }
.capper-ledger table { width:100%; border-collapse:collapse; }
.capper-ledger th {
  background:rgba(255,255,255,.018); color:var(--text-tertiary);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  text-align:right; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; white-space:nowrap;
}
.capper-ledger th.l { text-align:left; }
.capper-ledger td {
  padding:15px 16px; border-bottom:1px solid var(--divider);
  font-size:13px; color:var(--text-primary); white-space:nowrap; text-align:right;
  font-family:var(--font-mono);
}
.capper-ledger tr:hover { background:rgba(0,217,122,.035); }
.capper-ledger tr.top1 { background:rgba(0,217,122,.035); }
.capper-ledger td.rank { color:var(--text-tertiary); width:44px; text-align:left; }
.capper-ledger td.capper { text-align:left; font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:-.015em; color:var(--text-primary); }
.capper-ledger td.capper:before {
  content:attr(data-initials); display:inline-grid; place-items:center; width:30px; height:30px; margin-right:10px;
  border-radius:999px; background:rgba(255,255,255,.055); border:1px solid var(--border-strong);
  color:var(--accent-pos); font:800 10px var(--font-mono); vertical-align:middle;
}
.capper-ledger td.capper .lg { margin-left:8px; color:var(--text-tertiary); font:10px var(--font-mono); }
.cappers-command-page .tier { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:5px; font:800 10px var(--font-mono); }
.cappers-command-page .tier.A { background:var(--accent-pos); color:var(--bg-base); }
.cappers-command-page .tier.B { background:rgba(255,255,255,.08); color:var(--text-primary); }
.cappers-command-page .tier.C { background:rgba(255,77,77,.85); color:#21090b; }
.cappers-command-page .tier.NR { border:1px solid var(--border); color:var(--text-tertiary); }
.cappers-command-page .wpbar { display:inline-block; width:50px; height:4px; background:rgba(255,255,255,.08); border-radius:999px; margin-left:8px; vertical-align:middle; overflow:hidden; }
.cappers-command-page .wpbar i { display:block; height:100%; background:var(--accent-pos); border-radius:999px; opacity:.72; }
.cappers-command-page .score.pos,
.cappers-command-page .net.pos,
.cappers-command-page .roi.pos { color:var(--accent-pos); font-weight:800; }
.cappers-command-page .score.neg,
.cappers-command-page .net.neg,
.cappers-command-page .roi.neg { color:var(--accent-neg); font-weight:800; }
.cappers-command-page .roi.blank { color:var(--text-tertiary); font-weight:600; }
.cappers-command-page .ar { color:var(--accent-pos); opacity:0; margin-left:4px; }
.cappers-command-page th.sort .ar { opacity:1; }
.cappers-command-page .err { display:none; padding:40px; text-align:center; color:var(--accent-neg); font-family:var(--font-mono); font-size:12px; line-height:1.7; }

.capper-side-rail { display:grid; gap:14px; }
.cappers-command-page .side-card { min-height:210px; padding:18px; }
.cappers-command-page .side-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.cappers-command-page .side-head span { color:var(--text-primary); }
.cappers-command-page .side-head b { color:var(--text-tertiary); font:10px var(--font-mono); font-weight:500; }
.cappers-command-page .side-row { display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--divider); }
.cappers-command-page .side-row:last-child { border-bottom:0; }
.cappers-command-page .side-row span { color:var(--text-tertiary); font:12px var(--font-mono); }
.cappers-command-page .side-row strong { font-size:14px; color:var(--text-primary); }
.cappers-command-page .side-row em { font:12px var(--font-mono); font-style:normal; }
.cappers-command-page .side-row em.pos { color:var(--accent-pos); }
.cappers-command-page .side-row em.neg { color:var(--accent-neg); }
.cappers-command-page .tier-mix-row { display:grid; grid-template-columns:74px 1fr 36px; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--divider); }
.cappers-command-page .tier-mix-row:last-child { border-bottom:0; }
.cappers-command-page .tier-mix-row strong { font-size:16px; }
.cappers-command-page .tier-mix-bar { height:5px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.cappers-command-page .tier-mix-bar i { display:block; height:100%; background:rgba(255,255,255,.20); border-radius:999px; }
.cappers-command-page .tier-mix-row.tier-a .tier-mix-bar i { background:var(--accent-pos); opacity:.72; }
.cappers-command-page .tier-mix-row.tier-b .tier-mix-bar i { background:rgba(255,255,255,.32); }
.cappers-command-page .tier-mix-row.tier-c .tier-mix-bar i { background:var(--accent-neg); opacity:.55; }
.cappers-command-page .tier-mix-row.tier-nr .tier-mix-bar i { background:rgba(255,255,255,.18); }
.cappers-command-page .tier-mix-row span { text-align:right; font:13px var(--font-mono); color:var(--text-primary); }
.cappers-command-page .side-empty { color:var(--text-tertiary); font:12px var(--font-mono); padding:16px 0; }

.capper-footer { margin-top:26px; }
.cappers-command-page .note {
  margin-top:16px; padding:14px 16px;
  border:1px solid var(--border); border-radius:8px;
  background:rgba(255,255,255,.014);
  font-family:var(--font-mono); font-size:10px; line-height:1.7;
  letter-spacing:.02em; color:var(--text-tertiary);
}
.cappers-command-page .note b { color:var(--text-secondary); font-weight:700; }
.cappers-command-page .note span { color:var(--accent-pos); }
.cappers-command-page .fade { opacity:0; transform:translateY(8px); animation:capperRise .45s cubic-bezier(.2,.7,.2,1) forwards; }
.cappers-command-page .d1{animation-delay:.02s}.cappers-command-page .d2{animation-delay:.06s}.cappers-command-page .d3{animation-delay:.10s}.cappers-command-page .d4{animation-delay:.14s}
@keyframes capperRise { to { opacity:1; transform:none; } }

@media (max-width: 1100px) {
  .cappers-command-page .capper-hero, .cappers-command-page .capper-content-grid { grid-template-columns:1fr; }
  .capper-hero-copy { min-height:auto; }
  .capper-kgrid { min-height:0; }
  .capper-controls .controls { flex-wrap:wrap; }
  .capper-controls .searchgrp { flex:1 1 100%; }
}
@media (max-width: 720px) {
  .capper-kgrid { grid-template-columns:1fr 1fr; }
  .capper-controls .grp { width:100%; }
  .capper-controls .seg { width:100%; }
  .capper-controls .seg button { flex:1; padding:0 8px; }
  .capper-ledger table { min-width:860px; }
  .capper-read { grid-template-columns:auto 1fr; }
  .capper-read-meta { grid-column:2; text-align:left; }
}


/* ── v0.16.53 · full-reskin: single command card (props anatomy) ── */
.cappers-command-page .capper-hero {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,245,0.026), rgba(255,255,245,0.006));
    padding: 24px;
    gap: 36px;
    align-items: center;
}
.cappers-command-page .capper-hero-copy {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 8px 8px 8px 10px;
    min-height: 0;
}
.capper-hero-copy .capper-read {
    margin-top: 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}


/* ── v0.16.54 · hero → shared bh-hero anatomy ──
   Markup mirrors props/players/trends: .bh-hero > copy (bh-eyebrow /
   bh-num / bh-chips / bh-read) + .bh-side. Base bh rules come from
   styles-append-bh-hero-v0.1.0.css (linked before this file; flow-shell
   v0.1.8.27 still wins ties). This block only bridges the JS-INJECTED
   inner markup (capper-chip / capper-kcell / capper-read-copy — cappers.js
   renderHero() emits these, untouched) onto the bh look. The v0.16.53
   .capper-hero* / .capper-kgrid / .capper-read* / .capper-chip-row rules
   above are dead (markup removed) — prune at a CSS consolidation. Note
   the chip row was display:none pre-v0.16.54; it returns as bh-chips. */
.cappers-command-page .bh-chips .capper-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 99px;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border-strong);
}
.cappers-command-page .bh-chips .capper-chip.good {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
}
.cappers-command-page .bh-chips .capper-chip.bad {
    color: var(--accent-neg);
    background: rgba(255,77,77,0.10);
    border-color: rgba(255,77,77,0.35);
}
.cappers-command-page .bh-side .capper-kcell {
    background: var(--bg-elev-1);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
}
.cappers-command-page .bh-side .capper-kcell .k {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.cappers-command-page .bh-side .capper-kcell .v {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
}
.cappers-command-page .bh-side .capper-kcell .v.pos { color: var(--accent-pos); }
.cappers-command-page .bh-side .capper-kcell .v.neg { color: var(--accent-neg); }
.cappers-command-page .bh-side .capper-kcell .meta {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.cappers-command-page .bh-read .capper-read-copy { font: inherit; color: inherit; }
.cappers-command-page .bh-read .capper-read-copy span {
    color: var(--accent-pos);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-right: 6px;
}
.cappers-command-page .bh-read .capper-read-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-tertiary);
    margin-top: 4px;
}


/* ── v0.16.54.2 · chip typography parity with props ──
   Geometry already matches (main is tt-flow-main → same flow-shell bh
   rules as props). The visible looseness was case: props chips are
   authored uppercase; cappers.js emits mixed-case chip text. Uppercase
   at the CSS layer + explicit margin/letter-spacing so the JS strings
   stay human-readable. */
.cappers-command-page .bh-chips .capper-chip {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.4;
}


/* ── v0.16.54.3 · cell spacing parity with props ──
   The v0.16.53 .capper-kcell .v rule (margin-top:12px,
   letter-spacing:-.035em) leaked under the v0.16.54 bridge — the bridge
   overrode font-size/weight but not margins, so the label→value gap ran
   12px taller than the props bh-side cells (which carry no value margin,
   only the 6px under the label). Explicit reset: */
.cappers-command-page .bh-side .capper-kcell .v {
    margin-top: 0;
    letter-spacing: normal;
}
.cappers-command-page .bh-side .capper-kcell .meta {
    margin-top: 4px;
}