/* ============================================================================
   CS-OS CONSOLE, per-client override slots (loaded AFTER theme.css).
   KOSSO NUTRITION brand layer (kossonutrition.nl, 2026-07-24). The storefront's
   own assets, vendored byte-identical from their CDN: Anton as the display face
   (their heading font), Roboto Condensed as the body face, the KN sky blue as
   the one accent, the real logo lockup on the storefront's near-black. Fonts
   are OFL/Apache licensed. Structural tokens (ink weights, lines, status,
   spacing) stay the shared system: this file sets the exposed --client-* slots,
   re-points the accent-derived washes (same precedent as the previous accent),
   and carries the brand affordances at the bottom of this file.
   ============================================================================ */

/* the brand faces, vendored from the kossonutrition.nl CDN (assets/fonts/) */
@font-face { font-family:"Anton"; src:url("fonts/Anton-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("fonts/RobotoCondensed-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("fonts/RobotoCondensed-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("fonts/RobotoCondensed-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap; }

:root {
  /* KN sky #65beec is the brand hue (logo chip, underlines); the deepened
     #2178c2 (one step below their own #2787cc) is the text-safe accent so the
     smallest mono labels reach ~4.5:1 on the light canvas. Sky carries the
     washes, glows and gradients. */
  --client-accent:      #2178c2;
  --client-accent-ink:  #1e6da8;
  --client-accent-glow: rgba(101,190,236,.30);
  --client-gradient:    linear-gradient(110deg, #2178c2, #65beec);
  --client-font-display: "Anton", "Arial Narrow", sans-serif;
  --client-font-sans:    "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  /* theme.css leaves these on the default coral; re-point them to the KN sky
     so accent-tinted surfaces and the bright step stay coherent. */
  --teal-wash:   rgba(101,190,236,.10);
  --teal-wash-2: rgba(101,190,236,.16);
  --teal-bright: #65beec;
  --grad-b:      #65beec;
  /* DOCUMENTED DEVIATION (adversarially reviewed, 2026-07-24): the theme's
     gold --st-warn is the most-repeated colored element on 7 pages (every
     draft-to-approve pill, dot and bar) and reads off-palette on a black/
     white/sky brand. Draft/pending is this cockpit's normal working state,
     not a danger signal, so it carries the brand blue here. Safety-critical
     states stay on the untouched red --st-error. */
  --st-warn:      #1e6da8;
  --st-warn-tint: rgba(101,190,236,.15);
  --st-warn-glow: rgba(101,190,236,.30);
}
[data-theme="light"] {
  --client-accent:      #2178c2;
  --client-accent-ink:  #1e6da8;
  --client-accent-glow: rgba(101,190,236,.30);
}
[data-theme="dark"] {
  --client-accent:      #65beec;
  --client-accent-ink:  #8fd0f2;
  --client-accent-glow: rgba(101,190,236,.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-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; }

/* ============================================================================
   KOSSO brand affordances (client layer; the kossonutrition.nl look mapped
   onto the shared structure, nothing structural forked).
   ============================================================================ */

/* Display headings: Anton, the storefront heading face. Anton ships one weight
   (400), so the corporate 600 would synthesize a fake bold; force 400 and the
   uppercase condensed treatment their site headings use. */
.page-header h1, [data-theme="corporate"] .page-header h1,
.op-hero .oh-title, [data-theme="corporate"] .op-hero .oh-title {
  font-family: var(--f-display);
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .02em !important;
  line-height: 1.06;
}
/* the accent phrase inside a headline: flat KN blue, the way the storefront
   colors a phrase ("...passen bij jou?"), never a gradient */
[data-theme="corporate"] .page-header h1 .grad,
[data-theme="corporate"] .op-hero .oh-title .grad {
  -webkit-text-fill-color: var(--client-accent); color: var(--client-accent);
}
/* emphasis follows the brand face (condensed italic), not the 187N serif */
[data-theme="corporate"] em, [data-theme="corporate"] .i { font-family: inherit; }

/* Sidebar brand: the real KOSSO NUTRITION lockup on the storefront's own
   near-black (#0a0b0f), the site-header look. The lockup IS the name. */
.brand {
  display: block;
  background: #0a0b0f;
  border: 1px solid #0a0b0f;
  border-radius: var(--r-md);
  padding: 15px 14px 13px;
  margin-bottom: 14px;
}
.brand .brand-mark {
  display: block; width: 100%; height: 42px;
  background: url("kosso-logo.svg") left center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none;
}
.brand .brand-mark svg { display: none; }
.brand .brand-stack { padding-top: 0; }
.brand .brand-name { display: none; }
.brand .brand-sub { color: rgba(244,243,241,.66); margin-top: 10px; }

/* Buttons: the storefront is rounded pills, not the 187N chamfer */
[data-theme="corporate"] .btn-primary,
[data-theme="corporate"] .btn-secondary {
  clip-path: none; border-radius: var(--r-pill);
}

/* selection matches the brand, not the 187N coral */
[data-theme="corporate"] ::selection { background: rgba(101,190,236,.30); color: var(--ink); }

/* the corner canvas glow: KN sky, not the 187N coral + gold */
[data-theme="corporate"] .bg-field::after {
  background:
    radial-gradient(680px 460px at 80% -6%, rgba(101,190,236,.12), transparent 60%),
    radial-gradient(560px 420px at 4% 104%, rgba(101,190,236,.06), transparent 62%);
}

/* The hero band: the storefront is black-forward (near-black hero, sky on
   top); the page header carries that as a dark panel with white Anton and
   the light-sky accent phrase, like the "passen bij jou?" band. */
[data-theme="corporate"] .page-header {
  background: #0a0b0f;
  border-radius: var(--r-lg);
  padding: 26px 30px 24px;
  margin-bottom: 26px;
}
[data-theme="corporate"] .page-header h1 { color: #f4f3f1; }
[data-theme="corporate"] .page-header .subtitle { color: rgba(244,243,241,.72); }
[data-theme="corporate"] .page-header .eyebrow { color: #65beec; }
[data-theme="corporate"] .page-header .eyebrow.line::before { background: #65beec; }
[data-theme="corporate"] .page-header .date { color: #f4f3f1; }
[data-theme="corporate"] .page-header .updated { color: rgba(244,243,241,.55); }
[data-theme="corporate"] .page-header h1 .grad,
[data-theme="corporate"] .page-header h1 em, [data-theme="corporate"] .page-header h1 .i {
  -webkit-text-fill-color: #65beec; color: #65beec;
}

/* model chips on the agents page: HAIKU sat on the theme's lavender pending
   tint, the one off-Kosso hue; neutral it so SONNET (sky) + HAIKU (ink) both
   sit in the palette. --st-pending itself stays untouched. */
[data-theme="corporate"] .mbadge.haiku {
  color: var(--ink-muted); background: var(--surface-3);
  border-color: var(--line-strong);
}

/* login card: the KN chip instead of the generic wave mark */
#csos-login-form span[style*="width:26px"] {
  background: url("icon-192.png") center / contain no-repeat;
}
#csos-login-form span[style*="width:26px"] svg { display: none; }

/* Vendored 2026-09-09 from the component console/assets/client.css, section 3 (structural rules for the
   queue: keyboard hint row, band heads, QA pills, risk and topic chips, advance bar). The branded fork
   had kept only the brand layer since the reskin, so these rows rendered unstyled (KOSSO-D-007). Tokens
   only; no colour or font of the Kosso brand changes. */
/* ============================================================================
   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); }