/* =============================================================================
 * pricebooks.css — B5 / MAT2 cockpit price-book panel styling. TOKENS ONLY.
 *
 * Re-probed 19 Jul: kingsleigh-ops/web/tokens.css IS present in the live-mirror
 * (13,811 B, 215 lines, mtime 09:39). Per the DESIGN rule ("if present use it
 * verbatim") this file now references the LANDED constitution tokens directly —
 * NO provisional :root fallback block, NO raw hex, nothing overriding a real
 * constitution var. Every colour / size / font / radius / duration below is a
 * var(--kh-*) that exists in tokens.css (verified by grep; see PROOFS §11).
 *
 * VOICE: this is an OPERATOR cockpit surface (the money-gated estimator/price
 * desk), so it is born in the REACTOR (void + one gold light) voice, not the
 * cream Ledger document voice. It paints its OWN void card (--kh-void-2/-3) and
 * cream ink (--kh-ink), so it is self-contained: it reads correctly whether or
 * not its ancestor already carries data-surface="void". Status is conveyed the
 * Reactor way — colour on TEXT/borders over a neutral void chip, not loud
 * colour fills — keeping "one gold light on void". LAW upheld: gold FILLS carry
 * --kh-gold-ink; gold TEXT uses the gold ramp; rust (--kh-rust) is danger/loss
 * ONLY (a stale price is --kh-warn amber, ratified is --kh-ok sage); 10px floor;
 * tabular-nums on every money/data figure.
 *
 * The estate's void constitution has no bg-TINT variants (--kh-*-bg) — the
 * Reactor voice deliberately avoids tinted fills — so the earlier tint tokens
 * were dropped, not renamed. See openIssues #1 / NOTES §Design.
 * ============================================================================= */

/* ---- panel shell (void card, hairline gold) ---- */
.kh-pb { background: var(--kh-void-2); border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-3); padding: 14px 15px; margin-bottom: 16px; }
.kh-pb__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kh-pb__eyebrow { font: 700 12px/1 var(--kh-font-ui); color: var(--kh-ink-dim);
  text-transform: uppercase; letter-spacing: .05em; }
.kh-pb__toggle { margin-left: auto; border: 1px solid var(--kh-gold); background: var(--kh-void-3);
  color: var(--kh-gold); font: 700 11px/1 var(--kh-font-ui); padding: 7px 12px;
  border-radius: var(--kh-r-1); cursor: pointer; white-space: nowrap;
  transition: background var(--kh-t-2) var(--kh-swift); }
.kh-pb__body { margin-top: 12px; }
.kh-pb__note { font: 500 11px/1.55 var(--kh-font-ui); color: var(--kh-ink-dim); margin-bottom: 10px; }

/* ---- status chips (10px floor; mono; gold carries ink) ---- */
.kh-pb__chip { font: 600 10px/1 var(--kh-font-mono); padding: 3px 8px; border-radius: var(--kh-r-pill);
  border: 1px solid transparent; }
.kh-pb__chip--ok { color: var(--kh-ok); background: var(--kh-void-3); border-color: var(--kh-ok); }
.kh-pb__chip--warn { color: var(--kh-warn); background: var(--kh-void-3); border-color: var(--kh-warn); }
.kh-pb__chip--gold { color: var(--kh-gold-ink); background: var(--kh-gold); }

/* ---- money-gate / empty / error states ---- */
.kh-pb__gate { padding: 16px; text-align: center; font: 500 12px/1.5 var(--kh-font-ui);
  color: var(--kh-warn); background: var(--kh-void-3); border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-2); }
.kh-pb__error { padding: 14px; font: 500 12px/1.4 var(--kh-font-ui); color: var(--kh-rust);
  background: var(--kh-void-3); border: 1px solid var(--kh-rust);
  border-radius: var(--kh-r-2); }
.kh-pb__empty { padding: 16px; text-align: center; font: 500 12px/1.4 var(--kh-font-ui); color: var(--kh-ink-dim); }

/* ---- advisories (lint-shaped) ---- */
.kh-pb__adv { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
  border-radius: var(--kh-r-1); margin-bottom: 6px; font: 500 11px/1.45 var(--kh-font-ui);
  background: var(--kh-void-3); }
.kh-pb__adv--warn { color: var(--kh-warn); }
.kh-pb__adv--info { color: var(--kh-ink-dim); }
.kh-pb__adv-dot { font: 700 9px/1.3 var(--kh-font-mono); text-transform: uppercase; flex: 0 0 auto; }

/* ---- import + ratify controls ---- */
.kh-pb__ingest { border-top: 1px solid var(--kh-line); margin-top: 12px; padding-top: 12px; }
.kh-pb__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.kh-pb__ta { width: 100%; min-height: 84px; box-sizing: border-box; border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-1); padding: 8px 10px; font: 500 11.5px/1.4 var(--kh-font-mono);
  color: var(--kh-ink); background: var(--kh-void-3); resize: vertical; }
.kh-pb__select { border: 1px solid var(--kh-line); border-radius: var(--kh-r-1); padding: 7px 9px;
  font: 600 11px/1 var(--kh-font-ui); color: var(--kh-ink); background: var(--kh-void-3); cursor: pointer; }
.kh-pb__btn { border: 1px solid var(--kh-gold); background: var(--kh-void-3); color: var(--kh-gold);
  font: 700 11px/1 var(--kh-font-ui); padding: 8px 13px; border-radius: var(--kh-r-1); cursor: pointer; }
.kh-pb__btn--primary { background: var(--kh-gold); color: var(--kh-gold-ink); border-color: var(--kh-gold); }

/* ---- import history rows ---- */
.kh-pb__imp { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--kh-line); }
.kh-pb__imp-desc { font: 500 11.5px/1.4 var(--kh-font-ui); color: var(--kh-ink); }
.kh-pb__imp-meta { font: 500 9.5px/1.4 var(--kh-font-ui); color: var(--kh-ink-dim); margin-top: 2px; }

/* ---- catalogue table (money — tabular-nums on figures) ---- */
.kh-pb__cat { max-height: 360px; overflow: auto; margin: 8px -4px 0; padding: 0 4px; }
.kh-pb__cat-head, .kh-pb__cat-row { display: grid;
  grid-template-columns: 88px 1fr 64px 78px 78px; gap: 8px; align-items: center; }
.kh-pb__cat-head { position: sticky; top: 0; background: var(--kh-void-3); padding: 0 0 5px;
  border-bottom: 1px solid var(--kh-line); font: 700 8.5px/1 var(--kh-font-mono);
  color: var(--kh-ink-dim); text-transform: uppercase; }
.kh-pb__cat-row { padding: 6px 0; border-bottom: 1px solid var(--kh-line); }
.kh-pb__code { font: 600 9px/1.2 var(--kh-font-mono); color: var(--kh-ink-dim); }
.kh-pb__desc { font: 500 11px/1.35 var(--kh-font-ui); color: var(--kh-ink); min-width: 0; }
.kh-pb__num { text-align: right; font: 700 10.5px/1 var(--kh-font-mono); color: var(--kh-ink);
  font-variant-numeric: tabular-nums; }
.kh-pb__num--dim { color: var(--kh-ink-dim); }
.kh-pb__stale { font: 700 7.5px/1 var(--kh-font-mono); background: var(--kh-void-3); color: var(--kh-warn);
  padding: 2px 5px; border-radius: var(--kh-r-1); margin-left: 6px; }
.kh-pb__merch { font: 600 8px/1 var(--kh-font-mono); background: var(--kh-void-3);
  color: var(--kh-ink-dim); padding: 2px 5px; border-radius: var(--kh-r-1); }
@media (prefers-reduced-motion: reduce) { .kh-pb__toggle { transition: none; } }