/* ============================================================================
   CS-OS CONSOLE, per-client override slots (loaded AFTER theme.css).
   HARRISON & JAMES brand layer (harrisonandjames.com, 2026-08-27). The store's
   wordmark is a high-contrast Didone serif on white; the storefront body face is
   Montserrat. Vendored here as two variable woff2 files (Bodoni Moda as the
   display face, Montserrat as the body face; both OFL licensed, assets/fonts/).
   The one accent is a text-safe champagne gold, the natural companion of a
   black-and-white jewelry brand; the theme's gold status colour therefore stays
   ON palette and is NOT re-pointed (no deviation from the shared status system).
   Structural tokens (ink weights, lines, status, spacing) stay the shared system:
   this file sets the exposed --client-* slots, re-points the accent-derived
   washes, and carries the brand lockup at the bottom of this file.
   ============================================================================ */

@font-face { font-family:"Bodoni Moda"; src:url("fonts/BodoniModa-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap; }

:root {
  /* champagne gold: #8a6d1f is the text-safe step (about 5:1 on the light canvas),
     #c4a35a the bright step that carries washes, glows and gradients. */
  --client-accent:      #8a6d1f;
  --client-accent-ink:  #6f5716;
  --client-accent-glow: rgba(196,163,90,.30);
  --client-gradient:    linear-gradient(110deg, #8a6d1f, #c4a35a);
  --client-font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --client-font-sans:    "Montserrat", "Segoe UI", system-ui, sans-serif;
  /* theme.css leaves these on the default coral; re-point them to the brand gold
     so accent-tinted surfaces and the bright step stay coherent. */
  --teal-wash:   rgba(196,163,90,.10);
  --teal-wash-2: rgba(196,163,90,.16);
  --teal-bright: #c4a35a;
  --grad-b:      #c4a35a;
}
[data-theme="light"] {
  --client-accent:      #8a6d1f;
  --client-accent-ink:  #6f5716;
  --client-accent-glow: rgba(196,163,90,.30);
}
[data-theme="dark"] {
  --client-accent:      #c4a35a;
  --client-accent-ink:  #d9bc7a;
  --client-accent-glow: rgba(196,163,90,.38);
}

/* a couple of CS-OS-specific status affordances reused across pages */
.pill { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--line); color:var(--ink-muted); }
.pill.off    { color:var(--st-error);   border-color:color-mix(in srgb,var(--st-error) 40%,transparent);   background:var(--st-error-tint); }
.pill.draft  { color:var(--st-warn);    border-color:color-mix(in srgb,var(--st-warn) 40%,transparent);    background:var(--st-warn-tint); }
.pill.auto   { color:var(--st-live);    border-color:color-mix(in srgb,var(--st-live) 40%,transparent);    background:var(--st-live-tint); }
.pill.floor  { color:var(--st-error);   border-color:color-mix(in srgb,var(--st-error) 40%,transparent);   background:var(--st-error-tint); }
/* the amber escalate variant (used for an editable-L0 route-to-human leaf) */
.pill.escalate { color:var(--st-warn); border-color:color-mix(in srgb,var(--st-warn) 45%,transparent); background:var(--st-warn-tint); }
.mono-tag { font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

/* ============================================================================
   T11 dual-mode + policy-tree components (shared across the new pages).
   Structural only; reuses the shared status/line/ink tokens. No new accent.
   ============================================================================ */

/* the exact-endpoint chip a write control shows (a pointer to the real route) */
.ep-chip { display:inline-flex; align-items:center; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.02em; padding:2px 8px; border-radius:6px; background:var(--surface-3);
  border:1px solid var(--line); color:var(--ink-muted); white-space:nowrap; }
/* the SIMULATED badge every demo write control carries */
.sim-badge { display:inline-flex; align-items:center; font-family:var(--f-mono); font-size:9px;
  font-weight:600; letter-spacing:.14em; padding:2px 7px; border-radius:5px; text-transform:uppercase;
  color:var(--st-pending); background:var(--st-pending-tint);
  border:1px solid color-mix(in srgb,var(--st-pending) 30%,transparent); }
/* a mono reference chip (secret_ref, fingerprint) shown verbatim, never a secret */
.ref-chip { font-family:var(--f-mono); font-size:11px; padding:2px 8px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-muted); word-break:break-all; }

/* the request-preview modal */
.csos-modal-scrim { position:fixed; inset:0; z-index:800; background:var(--tour-scrim);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.csos-modal { width:min(620px,100%); max-height:82vh; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:22px 24px; }
.csos-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.csos-modal-x { width:28px; height:28px; border-radius:7px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-muted); font-size:18px; line-height:1; }
.csos-modal-x:hover { color:var(--ink); border-color:var(--line-strong); }
.csos-modal-line { font-size:13px; color:var(--ink); margin:0; }
.csos-modal-note { font-size:12.5px; color:var(--ink-muted); line-height:1.55; margin:12px 0 0; max-width:66ch; }
.csos-pre { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; overflow-x:auto; font-family:var(--f-mono); font-size:11.5px; color:var(--ink);
  line-height:1.55; margin:0; white-space:pre; }

/* an honesty block: the payload's own label rendered verbatim in a bordered panel */
.honesty { border:1px solid var(--line); border-left:3px solid var(--st-warn); background:var(--st-warn-tint);
  border-radius:var(--r-sm); padding:12px 16px; font-size:12.5px; color:var(--ink-body); line-height:1.55;
  max-width:82ch; }
.honesty.info { border-left-color:var(--teal); background:var(--teal-wash); }

/* ---- the interactive decision tree (pure CSS flowchart, no libs) ---- */
.pt-wrap { display:grid; grid-template-columns:230px 1fr 340px; gap:18px; align-items:start; }
@media (max-width:1240px){ .pt-wrap{ grid-template-columns:1fr; } }
.pt-rail { display:flex; flex-direction:column; max-height:76vh; overflow-y:auto; scrollbar-width:thin; }
.pt-rail-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border-bottom:1px solid var(--line-faint);
  cursor:pointer; border-left:2px solid transparent; }
.pt-rail-item:hover { background:var(--surface-2); }
.pt-rail-item.sel { background:var(--teal-wash); border-left-color:var(--teal); }
.pt-rail-item .rid { font-family:var(--f-mono); font-size:11px; color:var(--ink); flex:1; }
.pt-rail-item.locked .rid { color:var(--ink-muted); }
.pt-dots { display:inline-flex; gap:3px; }
.pt-dot { width:7px; height:7px; border-radius:50%; }
.pt-dot.auto_resolve { background:var(--st-live); }
.pt-dot.draft { background:var(--st-warn); }
.pt-dot.escalate { background:var(--st-warn); }
.pt-dot.hard_stop { background:var(--st-error); }

.pt-node { position:relative; }
.pt-children { margin-left:20px; padding-left:18px; border-left:1px solid var(--line); }
.pt-branch { position:relative; padding:5px 0; }
.pt-branch::before { content:""; position:absolute; left:-18px; top:20px; width:14px; height:1px; background:var(--line); }
.pt-cond { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); margin:4px 0; }
.pt-cond .q { font-size:13px; color:var(--ink); font-weight:500; }
.pt-fact { font-family:var(--f-mono); font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink-muted); }
.pt-blabel { font-family:var(--f-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); padding:2px 0 2px 2px; }
.pt-leaf { display:flex; flex-direction:column; gap:6px; padding:10px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); margin:4px 0; background:var(--surface); border-left:3px solid var(--line-strong); }
.pt-leaf.auto_resolve { border-left-color:var(--st-live); }
.pt-leaf.draft { border-left-color:var(--st-warn); }
.pt-leaf.escalate { border-left-color:var(--st-warn); }
.pt-leaf.hard_stop { border-left-color:var(--st-error); }
.pt-leaf .lhead { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pt-leaf .llabel { font-size:13px; font-weight:600; color:var(--ink); }
.pt-lock { display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.06em; color:var(--ink-faint); }
.pt-cap { font-size:11.5px; color:var(--ink-muted); line-height:1.5; margin:0; max-width:70ch; }
.pt-cap.locked { color:var(--st-error); }
.pt-cap.editable { color:var(--st-warn); }
.pt-drawer { margin-top:4px; }
.pt-drawer summary { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; color:var(--teal); cursor:pointer; }
/* pt-detail is a KEY/VALUE grid: a fixed 150px label column plus the value. It is only correct for
   rows emitted as label+value pairs. A container that holds prose or a message list (a transcript,
   a conversation history) must NOT reuse it, or its whole content renders inside the 150px label
   column; those containers set their own display on the page that owns them. */
.pt-drawer .pt-detail { margin-top:8px; display:grid; grid-template-columns:150px 1fr; gap:5px 12px; font-size:12px; }
.pt-detail .dk { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.pt-provenance { font-size:11px; color:var(--ink-faint); margin:8px 0 0; font-style:italic; }

/* the knob editor + diff bar */
.knob-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-faint); flex-wrap:wrap; }
.knob-row .kk { font-family:var(--f-mono); font-size:11px; color:var(--ink-muted); min-width:220px; }
.knob-row input, .knob-row select { font:inherit; font-size:12.5px; padding:5px 9px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); width:120px; }
.knob-row.dirty input, .knob-row.dirty select { border-color:var(--st-warn); }
.diff-bar { position:sticky; bottom:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border:1px solid var(--st-warn); background:var(--st-warn-tint); border-radius:var(--r-sm); margin-top:14px; }
.diff-bar .dtext { font-size:12.5px; color:var(--ink); font-weight:500; }

/* the simulator panel result + budget bar (cost page) */
.pt-sim label { display:block; font-size:12px; color:var(--ink-muted); margin:9px 0 4px; }
.pt-sim select, .pt-sim input { width:100%; font:inherit; font-size:12.5px; padding:6px 9px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.budget-track { position:relative; height:16px; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--surface-2); overflow:hidden; margin:14px 0 6px; }
.budget-fill { position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill); }
.budget-fill.ok { background:var(--st-live); }
.budget-fill.warn { background:var(--st-warn); }
.budget-fill.kill { background:var(--st-error); }
.budget-tick { position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--ink-faint); }
.budget-tick .tl { position:absolute; top:-16px; left:-14px; font-family:var(--f-mono); font-size:9px; color:var(--ink-faint); white-space:nowrap; }

/* ============================================================================
   T12 operator flow (inbox Conversations): keyboard hint, risk badges, QA
   verdict pill, two-band queue headers, auto-advance/undo banner, decision
   reason chips. Structural only; reuses the shared status/line/ink tokens.
   ============================================================================ */

/* the faint mono keyboard-hint row under the queue header */
.kbd-hint { display:flex; flex-wrap:wrap; gap:3px 10px; padding:0 16px 8px; font-family:var(--f-mono);
  font-size:9.5px; letter-spacing:.02em; color:var(--ink-faint); }
.kbd-hint kbd { font-family:var(--f-mono); font-size:9.5px; padding:1px 5px; border:1px solid var(--line);
  border-radius:4px; background:var(--surface-2); color:var(--ink-muted); }

/* a queue row is a real keyboard target: it takes focus and shows a ring */
.apq-item[tabindex] { outline:none; }
.apq-item.kbfocus, .apq-item[tabindex]:focus-visible { box-shadow:inset 0 0 0 2px var(--client-accent); }

/* the two-band queue headers (a RISK band first, then the normal band), one count each */
.band-head { display:flex; align-items:center; gap:8px; padding:9px 16px 5px; font-family:var(--f-mono);
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.band-head.risk { color:var(--st-error); }
.band-head .band-count { margin-left:auto; color:var(--ink-faint); }

/* the compact risk badge on a queue row (dot + word); nothing renders when clean or unscanned */
.risk-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap;
  color:var(--st-error); background:var(--st-error-tint);
  border:1px solid color-mix(in srgb,var(--st-error) 35%,transparent); }
.risk-chip .rdot { width:6px; height:6px; border-radius:50%; background:var(--st-error); flex:none; }

/* the second-topic chip on a queue row (D-078): the message asked about more than the draft answers.
   Amber, not red: it is a REVIEW warning, not a risk flag, and it must not read as the same thing. */
.topic-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap;
  color:var(--st-warn); background:var(--st-warn-tint);
  border:1px solid color-mix(in srgb,var(--st-warn) 35%,transparent); }
.topic-chip .tdot { width:6px; height:6px; border-radius:50%; background:var(--st-warn); flex:none; }

/* the QA verdict pill beside the draft (green/amber/red); hidden when qa_verdict is absent */
.qa-pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-muted); }
.qa-pill .qdot { width:7px; height:7px; border-radius:50%; flex:none; }
.qa-pill.green { color:var(--st-live);  border-color:color-mix(in srgb,var(--st-live) 40%,transparent);  background:var(--st-live-tint); }
.qa-pill.green .qdot { background:var(--st-live); }
.qa-pill.amber { color:var(--st-warn);  border-color:color-mix(in srgb,var(--st-warn) 40%,transparent);  background:var(--st-warn-tint); }
.qa-pill.amber .qdot { background:var(--st-warn); }
.qa-pill.red   { color:var(--st-error); border-color:color-mix(in srgb,var(--st-error) 40%,transparent); background:var(--st-error-tint); }
.qa-pill.red .qdot { background:var(--st-error); }
.qa-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.qa-reason { font-family:var(--f-sans); font-size:11.5px; color:var(--ink-muted); }

/* the auto-advance / undo banner shown after a decision succeeds (hold-then-advance, no outbox) */
.advance-bar { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-top:12px;
  padding:11px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2); }
.advance-bar .adv-msg { font-size:12.5px; color:var(--ink); }
.advance-track { position:relative; flex:1 1 80px; min-width:64px; height:4px; border-radius:999px;
  background:var(--line); overflow:hidden; }
.advance-fill { position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--client-accent);
  transform-origin:left center; }
@keyframes advanceCountdown { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media (prefers-reduced-motion:reduce) { .advance-fill { animation:none !important; } }

/* the decision-reason chip row (reject + approve-with-edit); reuses the page .chip look */
.reason-wrap { margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); }


/* H-021: keep the client name readable without the empty wordmark image. */
.brand { display:block; background:#1c1c1c; padding:18px 16px; border-bottom:0; }
.brand .brand-mark, .brand .brand-mark svg, .brand .brand-mark img { display:none; }
.brand .brand-stack { padding-top:0; display:block; min-width:0; }
.brand .brand-name { display:block; color:#f4eee2; font-family:var(--f-display); font-size:22px; line-height:1.2; letter-spacing:0; overflow-wrap:break-word; }
.brand .workspace-label { color:rgba(244,238,226,.66); }
.brand .brand-sub { display:block; color:rgba(244,238,226,.66); margin-top:8px; font-family:var(--f-sans); line-height:1.5; letter-spacing:.06em; text-transform:uppercase; font-size:10px; }
h1, h2 { font-family:var(--f-display); font-weight:400; letter-spacing:.005em; }
::selection { background:rgba(196,163,90,.35); }