/* cmd/api/web/_shared/kokon.css
 *
 * Shared base styles for KOKON UI surfaces. Doctrine §13-20:
 *   - Dark theme default (audit-dark convention)
 *   - Monospace for data; variable font only for labels
 *   - border-radius: 0 globally — audit-grade sharp edges
 *   - Density > whitespace
 *   - Status colour tokens (PAS/WRN/FLR/BLK/OPN/CLS)
 *
 * Per-page <style> blocks should override only what they need; this
 * file is the canonical default palette + status tokens. Pages can
 * load it via:
 *   <link rel="stylesheet" href="/ui/_shared/kokon.css" />
 *
 * Migration is incremental — existing pages keep their inline styles
 * until refactored.
 */

:root {
  --kokon-bg-0: #020304;
  --kokon-bg-1: #06080b;
  --kokon-bg-2: #0b0e12;
  --kokon-bg-3: #101419;
  --kokon-line: #1c2530;
  --kokon-line-soft: #121820;
  --kokon-text: #e6e8e3;
  --kokon-muted: #9ca3ab;
  --kokon-dim: #59606a;

  /* Doctrine §16 — primary status colour tokens */
  --kokon-pass: #00ff66;
  --kokon-warn: #ffb000;
  --kokon-fail: #ff3344;
  --kokon-open: #888888;
  --kokon-closed: #444444;

  /* Muted alternates for low-contrast contexts (existing palette) */
  --kokon-pass-muted: #8a9464;
  --kokon-warn-muted: #8a7a50;
  --kokon-fail-muted: #8c5656;

  /* Semantic accents */
  --kokon-front: #2dd4bf;
  --kokon-control: #38bdf8;
  --kokon-audit: #86efac;
  --kokon-exec: #60a5fa;
  --kokon-threat: #f97316;
  --kokon-amber: #f59e0b;

  /* Item #12 — customer brand primary / secondary.
   * Phase 118d — default flipped from teal/blue to MC olive/gold so every
   * surface that references the brand tokens (sales-pitch, agents-live
   * aside, doctrine chrome print button, etc.) matches Mission Control.
   * Customer themes still override via body[data-brand="..."] below. */
  --kokon-brand-primary: #6b7a3b;
  --kokon-brand-secondary: #c39b4a;

  --kokon-font-ui: "IBM Plex Sans", "Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --kokon-font-mono: "IBM Plex Mono", "JetBrains Mono", "Consolas", "Liberation Mono", monospace;
}

/* No rounded corners anywhere. audit-grade aesthetic. */
.kokon-root *,
.kokon-root *::before,
.kokon-root *::after {
  border-radius: 0 !important;
}

/* Status badge — 3-letter code + colour dot */
.kokon-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--kokon-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--kokon-line);
  background: var(--kokon-bg-2);
}

.kokon-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--kokon-open);
}

.kokon-status[data-status="pass"]::before,
.kokon-status[data-status="ok"]::before,
.kokon-status[data-status="done"]::before { background: var(--kokon-pass); }

.kokon-status[data-status="warn"]::before { background: var(--kokon-warn); }

.kokon-status[data-status="fail"]::before,
.kokon-status[data-status="bad"]::before,
.kokon-status[data-status="block"]::before,
.kokon-status[data-status="blocked"]::before { background: var(--kokon-fail); }

.kokon-status[data-status="open"]::before,
.kokon-status[data-status="todo"]::before { background: var(--kokon-open); }

.kokon-status[data-status="closed"]::before { background: var(--kokon-closed); }

/* Audit footer — doctrine §18 */
.kokon-audit-footer {
  display: flex;
  gap: 12px;
  padding: 4px 8px;
  border-top: 1px solid var(--kokon-line);
  background: var(--kokon-bg-1);
  color: var(--kokon-dim);
  font-family: var(--kokon-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.kokon-audit-footer .kokon-audit-cell {
  display: flex;
  gap: 4px;
}

.kokon-audit-footer .kokon-audit-label {
  color: var(--kokon-muted);
  text-transform: uppercase;
}

.kokon-audit-footer .kokon-audit-value {
  color: var(--kokon-text);
}

/* ─────────────────────────────────────────────────────────────────────────
 * UX migration 2026-05-11 (docs/MIGRATION_UX_2026-05-11.md Phase 0)
 *
 * Doctrine §16 unified status enum: PAS/WRN/FLR/BLK/OPN/CLS + NEU/UNK.
 * All status indicators across 30 surfaces converge on a single
 *   <span class="kokon-status" data-tone="pas">PAS</span>
 * pattern. Replaces 8 legacy patterns (.badge ok/warn/bad, .decision-tag,
 * .status-badge, .exec-lane-state, .policy-box, .stream-badge, .kpi-v,
 * .status) — those remain in place during cross-page migration window.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Full-saturation tokens for live, signal-bearing UI */
  --kokon-status-pas: #00ff66;
  --kokon-status-wrn: #ffb000;
  --kokon-status-flr: #ff3344;
  --kokon-status-blk: #ff3344;
  --kokon-status-opn: #888888;
  --kokon-status-cls: #444444;
  /* NEU/UNK — explicit "data not loaded yet" tone. Replaces hard-coded
   * WARN-badges in ceo.html / executive-company.html that scared the
   * operator with false alarms before stream connected. */
  --kokon-status-neu: #6a737d;
  --kokon-status-unk: #6a737d;
}

/* Universal data-tone application — any element with data-tone gets a
 * 3px left-border in the matching colour. Allows existing layout classes
 * (.experience-stat, .stat-card, .ceo-exec-lane, .badge, .status-badge,
 * etc.) to opt into the unified enum without rewriting their box model.
 *
 * Page-local styles can override via more specific selector if needed.
 * Operator-visible signal: even with default page chrome, presence of
 * data-tone now produces a coloured stripe.
 */
[data-tone="pas"] { border-left: 3px solid var(--kokon-status-pas); }
[data-tone="wrn"] { border-left: 3px solid var(--kokon-status-wrn); }
[data-tone="flr"] { border-left: 3px solid var(--kokon-status-flr); }
[data-tone="blk"] { border-left: 3px solid var(--kokon-status-blk); }
[data-tone="opn"] { border-left: 3px solid var(--kokon-status-opn); }
[data-tone="cls"] { border-left: 3px solid var(--kokon-status-cls); }
[data-tone="neu"],
[data-tone="unk"] { border-left: 3px solid var(--kokon-status-neu); }

/* Suppress universal border-left on body, html, and document-level
 * elements where it would be visually disruptive. */
body[data-tone],
html[data-tone],
nav[data-tone],
header[data-tone] { border-left: none !important; }

/* Unified status badge — apply via data-tone */
.kokon-status[data-tone="pas"]::before,
.kokon-status[data-tone="ok"]::before,
.kokon-status[data-tone="done"]::before { background: var(--kokon-status-pas); }
.kokon-status[data-tone="wrn"]::before,
.kokon-status[data-tone="warn"]::before { background: var(--kokon-status-wrn); }
.kokon-status[data-tone="flr"]::before,
.kokon-status[data-tone="fail"]::before,
.kokon-status[data-tone="bad"]::before { background: var(--kokon-status-flr); }
.kokon-status[data-tone="blk"]::before,
.kokon-status[data-tone="block"]::before,
.kokon-status[data-tone="blocked"]::before {
  background: var(--kokon-status-blk);
  box-shadow: 0 0 0 1px var(--kokon-status-blk);
}
.kokon-status[data-tone="opn"]::before,
.kokon-status[data-tone="todo"]::before,
.kokon-status[data-tone="pending"]::before { background: var(--kokon-status-opn); }
.kokon-status[data-tone="cls"]::before,
.kokon-status[data-tone="closed"]::before { background: var(--kokon-status-cls); }
.kokon-status[data-tone="neu"]::before,
.kokon-status[data-tone="unk"]::before,
.kokon-status[data-tone=""]::before,
.kokon-status:not([data-tone])::before { background: var(--kokon-status-neu); }

/* ─────────────────────────────────────────────────────────────────────────
 * Customer brand override (Item #12, 2026-05-13)
 *
 * Doctrine boundary: brand overrides the SEMANTIC ACCENT palette only
 * (--kokon-front / --kokon-control / --kokon-audit / --kokon-exec /
 * --kokon-threat / --kokon-amber and a new --kokon-brand-primary /
 * --kokon-brand-secondary pair).
 *
 * Brand does NOT override:
 *   - status enum tokens (--kokon-status-pas/wrn/flr/blk/opn/cls/neu)
 *     status semantics must read identically to every operator on every
 *     branded surface — green=PAS regardless of customer
 *   - background palette (--kokon-bg-0..3) — audit-dark stays
 *   - text / muted / line tokens
 *   - font stack
 *
 * Selector: body[data-brand="<id>"]. Default (no attr or attr="default_saa")
 * inherits the :root palette above unchanged.
 * Applied via kokon.applyBrand() / kokon.setBrand() — see kokon.js.
 * ───────────────────────────────────────────────────────────────────────── */

/* Brand: DEFAULT_SAA (explicit no-op for self-documenting attribute) */
body[data-brand="default_saa"] {
  /* :root values inherited unchanged */
}

/* Brand: NEUTRAL_INSTITUTIONAL — brand-rights-free slate + amber (D-2). */
body[data-brand="neutral_institutional"] {
  --kokon-brand-primary: #c0c4cb;
  --kokon-brand-secondary: #9aa0a8;
  --kokon-front: #c0c4cb;
  --kokon-control: #9aa0a8;
  --kokon-audit: #c0c4cb;
  --kokon-exec: #9aa0a8;
  --kokon-threat: #d4855a;
  --kokon-amber: #d4855a;
}

/* Brand: BLACKROCK_DEMO — graphite + amber on dark, BlackRock-like */
body[data-brand="blackrock_demo"] {
  --kokon-brand-primary: #e8a93c;
  --kokon-brand-secondary: #b3b3b3;
  --kokon-front: #e8a93c;
  --kokon-control: #d4d4d4;
  --kokon-audit: #c9a96e;
  --kokon-exec: #e8a93c;
  --kokon-threat: #ff6a3d;
  --kokon-amber: #e8a93c;
}

/* Brand: BINANCE_DEMO — Binance gold #f0b90b primary */
body[data-brand="binance_demo"] {
  --kokon-brand-primary: #f0b90b;
  --kokon-brand-secondary: #fcd535;
  --kokon-front: #f0b90b;
  --kokon-control: #fcd535;
  --kokon-audit: #f0b90b;
  --kokon-exec: #fcd535;
  --kokon-threat: #ff7a59;
  --kokon-amber: #f0b90b;
}

/* Brand badge — appears in chrome footer alongside live clock to make the
 * active brand explicit to the operator (doctrine §15 — surface all state). */
.kokon-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--kokon-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--kokon-line);
  background: var(--kokon-bg-2);
  color: var(--kokon-muted);
}
.kokon-brand-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--kokon-brand-primary, var(--kokon-front));
}

/* Traffic light — hero zone primary status component
 * Single 64×64 element with code + colour. Click-through to drill-down. */
.kokon-traffic-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--kokon-line);
  background: var(--kokon-bg-2);
  font-family: var(--kokon-font-mono);
  cursor: pointer;
  user-select: none;
}
.kokon-traffic-light[data-tone="pas"] { background: rgba(0,255,102,0.08); border-color: var(--kokon-status-pas); }
.kokon-traffic-light[data-tone="wrn"] { background: rgba(255,176,0,0.08); border-color: var(--kokon-status-wrn); }
.kokon-traffic-light[data-tone="flr"] { background: rgba(255,51,68,0.10); border-color: var(--kokon-status-flr); }
.kokon-traffic-light[data-tone="blk"] { background: rgba(255,51,68,0.15); border-color: var(--kokon-status-blk); }
.kokon-traffic-light[data-tone="opn"] { background: rgba(136,136,136,0.06); border-color: var(--kokon-status-opn); }
.kokon-traffic-light[data-tone="neu"],
.kokon-traffic-light[data-tone="unk"] { background: var(--kokon-bg-2); border-color: var(--kokon-line); }
.kokon-traffic-light:focus-visible { outline: 2px solid var(--kokon-control); outline-offset: 2px; }
.kokon-traffic-light-code {
  font: 700 18px/1 var(--kokon-font-mono);
  letter-spacing: 0.08em;
  color: var(--kokon-text);
}

/* Breadcrumb — replaces 27 absolute-positioned "← Main Menu" across pages */
.kokon-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 11px/1.2 var(--kokon-font-mono);
  letter-spacing: 0.04em;
  color: var(--kokon-dim);
}
.kokon-breadcrumb a {
  color: var(--kokon-muted);
  text-decoration: none;
}
.kokon-breadcrumb a:hover,
.kokon-breadcrumb a:focus-visible { color: var(--kokon-text); outline: none; text-decoration: underline; }
.kokon-breadcrumb-sep { color: var(--kokon-dim); padding: 0 2px; }
.kokon-breadcrumb-current { color: var(--kokon-text); }

/* Status chip — for KPI strips. Single source replaces .stat-card / .kpi-v / .status-badge variants.
 *
 * Apply pattern:
 *   <div class="kokon-status-chip" data-tone="wrn">
 *     <span class="kokon-status-chip-label">POSTURE</span>
 *     <span class="kokon-status-chip-value">awaiting</span>
 *   </div>
 *
 * Set data-tone via kokon.setStatus(el, "wrn") on live data arrival.
 * Until then leave data-tone="neu" (NOT "warn") — see UX audit §3 cross-cut #2. */
.kokon-status-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--kokon-line);
  border-left: 3px solid var(--kokon-status-neu);
  background: var(--kokon-bg-2);
  font-family: var(--kokon-font-mono);
}
.kokon-status-chip-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kokon-muted);
}
.kokon-status-chip-value {
  font: 14px/1 var(--kokon-font-mono);
  color: var(--kokon-text);
}
.kokon-status-chip[data-tone="pas"] { border-left-color: var(--kokon-status-pas); }
.kokon-status-chip[data-tone="wrn"] { border-left-color: var(--kokon-status-wrn); }
.kokon-status-chip[data-tone="flr"] { border-left-color: var(--kokon-status-flr); }
.kokon-status-chip[data-tone="blk"] { border-left-color: var(--kokon-status-blk); }
.kokon-status-chip[data-tone="opn"] { border-left-color: var(--kokon-status-opn); }
.kokon-status-chip[data-tone="cls"] { border-left-color: var(--kokon-status-cls); }

/* Keyboard shortcut hint footer — to be applied across pages in Phase 4.
 *   <footer class="kokon-shortcut-hint">
 *     <kbd>/</kbd> search · <kbd>G</kbd><kbd>S</kbd> scan · <kbd>?</kbd> help
 *   </footer>
 */
.kokon-shortcut-hint {
  font: 10px/1.3 var(--kokon-font-mono);
  color: var(--kokon-dim);
  padding: 4px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--kokon-line-soft);
}
.kokon-shortcut-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--kokon-bg-3);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  font-family: var(--kokon-font-mono);
  font-size: 10px;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Keyboard help overlay (triggered by ?)
 *  docs/MIGRATION_UX_2026-05-11.md Phase 4 (#3 keyboard navigation)
 * ───────────────────────────────────────────────────────────────────────── */
.kokon-help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 4, 0.86);
  backdrop-filter: blur(2px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kokon-help-overlay.kokon-help-open { display: flex; }

.kokon-help-dialog {
  background: var(--kokon-bg-1);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  font-family: var(--kokon-font-mono);
  max-width: 760px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  outline: none;
}
.kokon-help-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kokon-line);
  background: var(--kokon-bg-2);
}
.kokon-help-head h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--kokon-text);
}
.kokon-help-close {
  background: var(--kokon-bg-3);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-family: var(--kokon-font-mono);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.kokon-help-close:hover { background: var(--kokon-line); }
.kokon-help-body {
  padding: 12px 14px 16px 14px;
  display: grid;
  gap: 18px;
}
.kokon-help-body h3 {
  margin: 0 0 8px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kokon-muted);
  border-bottom: 1px solid var(--kokon-line-soft);
  padding-bottom: 4px;
}
.kokon-help-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: 11px;
}
.kokon-help-list dt {
  display: flex;
  gap: 3px;
  align-items: center;
  white-space: nowrap;
}
.kokon-help-list dd {
  margin: 0;
  color: var(--kokon-text);
  font-size: 11px;
}

/* Clickable launcher rows — overlay doubles as quick-launcher */
.kokon-help-launcher dt,
.kokon-help-launcher dd {
  padding: 4px 6px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color 0.08s ease-out, border-left-color 0.08s ease-out;
}
.kokon-help-link {
  color: var(--kokon-text);
  text-decoration: none;
  display: inline-block;
  width: 100%;
}
.kokon-help-link:hover {
  color: var(--kokon-brand-primary);
  text-decoration: underline;
}
/* Hover sync across the row (dt + dd pair) using :has() — modern browsers */
.kokon-help-launcher dt:hover,
.kokon-help-launcher dd:hover,
.kokon-help-launcher dd:has(.kokon-help-link:focus-visible),
.kokon-help-launcher dd:has(.kokon-help-link:hover) {
  background: var(--kokon-bg-3);
  border-left-color: var(--kokon-brand-primary);
}
.kokon-help-list kbd {
  display: inline-block;
  padding: 1px 6px;
  min-width: 18px;
  background: var(--kokon-bg-3);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  font-family: var(--kokon-font-mono);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
}
.kokon-help-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--kokon-line-soft);
  font-size: 10px;
  color: var(--kokon-dim);
}
.kokon-help-foot kbd {
  display: inline-block;
  padding: 0 4px;
  background: var(--kokon-bg-3);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  font-family: var(--kokon-font-mono);
  font-size: 10px;
}

@media (max-width: 760px) {
  .kokon-help-list { grid-template-columns: 1fr; gap: 4px 0; }
  .kokon-help-list dt { grid-column: 1; }
  .kokon-help-list dd { grid-column: 1; padding-bottom: 6px; border-bottom: 1px dotted var(--kokon-line-soft); }
}

/* ── Multi-tenant desk switcher (Phase 1) ─────────────────────── */
.kokon-desk-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kokon-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--kokon-line, #1d2530);
  background: var(--kokon-bg2, rgba(9, 12, 16, 0.7));
}
.kokon-desk-switcher .kds-org { color: var(--kokon-muted, #a0a7ae); }
.kokon-desk-switcher .kds-sep { color: var(--kokon-dim, #5f6770); }
.kokon-desk-switcher .kds-select {
  background: transparent;
  color: var(--kokon-text, #e7e8e2);
  border: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  outline: none;
  padding: 0;
  cursor: pointer;
  max-width: 220px;
}
.kokon-desk-switcher .kds-select option { background: #0a0d11; color: #e7e8e2; }
.kokon-desk-switcher .kds-role {
  font-size: 8px;
  border: 1px solid currentColor;
  padding: 1px 5px;
  color: var(--kokon-olive, #6b7a3b);
  letter-spacing: 0.12em;
}
.kokon-desk-switcher .kds-role[data-role="admin"] { color: var(--kokon-warn, #d4b27a); }
.kokon-desk-switcher .kds-role[data-role="head"] { color: var(--kokon-olive, #6b7a3b); }
.kokon-desk-switcher.kds-error { border-color: var(--kokon-bad, #8c5656); }

/* ── WCAG 2.1 AA accessibility additions (Item #8) ───────────────
 *
 * Goal: meet WCAG 2.1 AA contrast (4.5:1 normal text, 3:1 large/UI)
 * without sacrificing the audit-grade dark palette.
 *
 * Strategy: introduce --kokon-text-tertiary (was --muted/--dim usage
 * which sat at 3.6–4.0:1 on near-black bg); raise to 5.5:1. Add
 * universal :focus-visible ring and skip-link affordance.
 */
:root {
  /* AA-grade tertiary text — replaces ad-hoc usage of muted/dim
     when used for actual reading text (not decoration). 5.5:1 on #020304. */
  --kokon-text-tertiary: #b3bac1;
  /* AA-grade dim — used for timestamps, less critical metadata. 4.6:1 on #020304. */
  --kokon-text-dim: #8b939c;
  /* Accent/olive bumped slightly for AA. 4.7:1 on #020304. */
  --kokon-olive-aa: #88965a;
}

/* Skip-to-main-content link — visible only on focus; first tab stop. */
.kokon-skip-link {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 100000;
  background: #fbfaf6;
  color: #0a0d11;
  padding: 8px 14px;
  font: 700 11px/1 "IBM Plex Mono", "Consolas", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #6b7a3b;
  outline: none;
}
.kokon-skip-link:focus,
.kokon-skip-link:focus-visible {
  left: 8px;
}

/* Universal focus-visible ring — high contrast against dark bg. */
:focus-visible {
  outline: 2px solid var(--kokon-olive-aa, #88965a);
  outline-offset: 2px;
}
/* Suppress default browser outline for buttons/inputs that have :focus-visible above. */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only utility — content available to assistive tech but not visible. */
.kokon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Force-visible focus on key interactive components even if page CSS overrides outline. */
.kokon-status-chip:focus-visible,
.omni-row:focus-visible,
.ra-tab:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--kokon-olive-aa, #88965a) !important;
  outline-offset: 2px !important;
}

/* Respect reduced-motion preference — disable our animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Respect prefers-contrast: more — bump text-tertiary to white. */
@media (prefers-contrast: more) {
  :root {
    --kokon-text-tertiary: #ffffff;
    --kokon-text-dim: #e0e3e8;
  }
}


/* ── Item #9 — density-grade density strip (slim fixed-top bar) ──
 *
 * Always-visible 1-line ops tape. Fixed at top of viewport, z-index 9998
 * so it sits below browser chrome but above page content. Pages get
 * padding-top compensation via .kokon-has-density-strip body class so
 * content isn't covered.
 *
 * Cells (left → right):
 *   SAA · LIVE | AGENTS R/B/W/O | CONN <8 dots> | RECEIPTS <latest line + tooltip>
 */
#kokonDensityStrip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  pointer-events: auto;
}
.kokon-density-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--kokon-line, #1d2530);
  background: rgba(5, 7, 10, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--kokon-text, #e7e8e2);
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
}
.kokon-density-strip .kds-label {
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--kokon-olive-aa, #88965a);
  flex-shrink: 0;
}
.kokon-density-strip .kds-sep {
  color: var(--kokon-line, #1d2530);
  flex-shrink: 0;
}
.kokon-density-strip .kds-cell-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kokon-density-strip .kds-inline-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kokon-muted, #a0a7ae);
}
/* Agent mini-tiles inline */
.kokon-density-strip .kds-agent-tile {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  border-left: 2px solid var(--kokon-dim, #5f6770);
  background: rgba(255, 255, 255, 0.02);
}
.kokon-density-strip .kds-agent-tile[data-state="ready"]   { border-left-color: var(--kokon-olive-aa, #88965a); }
.kokon-density-strip .kds-agent-tile[data-state="busy"]    { border-left-color: var(--kokon-text, #e7e8e2); }
.kokon-density-strip .kds-agent-tile[data-state="waiting"] { border-left-color: #d4b27a; }
.kokon-density-strip .kds-agent-tile[data-state="offline"] { border-left-color: #8c5656; }
.kokon-density-strip .kds-agent-num {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--kokon-text, #e7e8e2);
}
.kokon-density-strip .kds-agent-key {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--kokon-muted, #a0a7ae);
  text-transform: uppercase;
}
/* Connector matrix — slim dots */
.kokon-density-strip .kds-conn-matrix {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.kokon-density-strip .kds-conn-dot {
  width: 7px;
  height: 7px;
  background: var(--kokon-dim, #5f6770);
}
.kokon-density-strip .kds-conn-dot[data-tone="pas"] { background: var(--kokon-olive-aa, #88965a); }
.kokon-density-strip .kds-conn-dot[data-tone="wrn"] { background: #d4b27a; }
.kokon-density-strip .kds-conn-dot[data-tone="flr"] { background: #8c5656; }
.kokon-density-strip .kds-conn-dot[data-tone="neu"] { background: var(--kokon-text-dim, #8b939c); }
/* Receipt latest inline */
.kokon-density-strip .kds-receipts-inline {
  flex: 1 1 auto;
  min-width: 0;
}
.kokon-density-strip .kds-receipt-latest {
  font-size: 10px;
  color: var(--kokon-text-tertiary, #b3bac1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  cursor: help;
}
.kokon-density-strip .kds-empty { color: var(--kokon-dim, #5f6770); font-style: italic; }

/* Body compensation — pages don't get content hidden under fixed strip. */
body.kokon-has-density-strip { padding-top: 28px; }
/* Pages that use fixed-positioned headers/banners must also be shifted
   so they don't overlap the density strip. Most KOKON pages don't, so
   default body padding alone covers them. */

@media (max-width: 900px) {
  .kokon-density-strip .kds-inline-label { display: none; }
  .kokon-density-strip { gap: 8px; padding: 0 8px; }
}
@media (max-width: 600px) {
  .kokon-density-strip .kds-receipts-inline { display: none; }
}
@media print {
  #kokonDensityStrip { display: none !important; }
  body.kokon-has-density-strip { padding-top: 0 !important; }
}

/* ── SAA Doctrine Chrome — universal shell on every page ──────────
 *
 * Mounts via kokon.installDoctrineChrome() auto-installed in kokon.js
 * DOMContentLoaded. Adds 4 fixed regions:
 *   1. .kokon-chrome-header  (top, 56px) — branding + breadcrumb + lang/mode/tenant
 *   2. .kokon-density-strip  (top+56, 28px) — agents/conn/receipts tape
 *   3. .kokon-chrome-rail    (left, 40px wide, between header and footer)
 *   4. .kokon-chrome-footer  (bottom, 22px) — endpoint, utc, page, hints
 *
 * Body class .kokon-has-chrome compensates page content with padding so
 * existing layouts aren't covered.
 */
body.kokon-has-chrome {
  padding-top: 56px;
  padding-bottom: 22px;
  padding-left: 40px;
  margin: 0;
}
body.kokon-has-chrome.kokon-has-density-strip { padding-top: 84px; }
body.kokon-has-chrome #kokonDensityStrip { top: 56px; }

/* ── Header (56px) ────────────────────────────────────────────── */
#kokonChromeHeaderHost { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
.kokon-chrome-header {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.98), rgba(4, 6, 8, 0.96));
  border-bottom: 1px solid var(--kokon-line, #1d2530);
  color: var(--kokon-text, #e7e8e2);
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.kokon-chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border: none;
}
.kokon-chrome-brand:hover { color: var(--kokon-olive-aa, #88965a); }
.kokon-chrome-logo { display: block; flex-shrink: 0; }
.kokon-chrome-brand-text { display: grid; gap: 1px; }
.kokon-chrome-brand-line1 {
  font: 700 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kokon-text, #e7e8e2);
}
.kokon-chrome-brand-line2 {
  font: 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--kokon-muted, #a0a7ae);
}
.kokon-chrome-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kokon-text-tertiary, #b3bac1);
  border-left: 1px solid var(--kokon-line-soft, #10161d);
  padding-left: 14px;
}
.kokon-chrome-crumb-root,
.kokon-chrome-crumb-mid { color: var(--kokon-muted, #a0a7ae); }
.kokon-chrome-crumb-sep { color: var(--kokon-line, #1d2530); }
.kokon-chrome-crumb-leaf { color: var(--kokon-text, #e7e8e2); font-weight: 600; }
.kokon-chrome-spacer { flex: 1 1 auto; }
.kokon-chrome-pill {
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}
.kokon-chrome-pill-classification { color: var(--kokon-warn, #d4b27a); }
.kokon-chrome-pill-tenant { color: var(--kokon-olive-aa, #88965a); }
.kokon-chrome-tenant { display: inline-flex; align-items: center; }
.kokon-chrome-lang {
  background: rgba(0, 0, 0, 0.3);
  color: var(--kokon-text, #e7e8e2);
  border: 1px solid var(--kokon-line, #1d2530);
  font: 10px "IBM Plex Mono", monospace;
  padding: 5px 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.kokon-chrome-mode {
  background: transparent;
  color: var(--kokon-olive-aa, #88965a);
  border: 1px solid var(--kokon-olive-aa, #88965a);
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
}
.kokon-chrome-mode:hover { background: rgba(136, 150, 90, 0.12); }

/* ── Left rail (40px) ─────────────────────────────────────────── */
#kokonChromeRailHost { position: fixed; top: 56px; bottom: 22px; left: 0; width: 40px; z-index: 9997; }
body.kokon-has-chrome.kokon-has-density-strip #kokonChromeRailHost { top: 84px; }
.kokon-chrome-rail {
  height: 100%;
  width: 40px;
  background: rgba(5, 7, 10, 0.96);
  border-right: 1px solid var(--kokon-line, #1d2530);
  overflow-y: auto;
  padding: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kokon-rail-group { display: flex; flex-direction: column; gap: 2px; }
.kokon-rail-head {
  font: 700 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kokon-muted, #a0a7ae);
  text-align: center;
  padding: 4px 0 3px;
  border-bottom: 1px solid var(--kokon-line-soft, #10161d);
  margin-bottom: 4px;
}
.kokon-rail-link {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 2px;
  border-left: 2px solid transparent;
  color: var(--kokon-text-tertiary, #b3bac1);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  border-bottom: none;
}
.kokon-rail-link:hover {
  color: var(--kokon-olive-aa, #88965a);
  background: rgba(136, 150, 90, 0.06);
  border-left-color: var(--kokon-line, #1d2530);
}
.kokon-rail-link-active {
  color: var(--kokon-olive-aa, #88965a);
  background: rgba(136, 150, 90, 0.12);
  border-left-color: var(--kokon-olive-aa, #88965a);
}
.kokon-rail-glyph { font-size: 14px; line-height: 1; }
.kokon-rail-label {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Footer (22px) ────────────────────────────────────────────── */
#kokonChromeFooterHost { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997; }
.kokon-chrome-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 22px;
  padding: 0 14px 0 50px;
  background: rgba(5, 7, 10, 0.98);
  border-top: 1px solid var(--kokon-line, #1d2530);
  font: 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  color: var(--kokon-muted, #a0a7ae);
  white-space: nowrap;
  overflow: hidden;
}
.kokon-chrome-foot-cell b { color: var(--kokon-text, #e7e8e2); font-weight: 600; }
.kokon-chrome-foot-cell a { color: var(--kokon-olive-aa, #88965a); border-bottom: 1px dotted; }
.kokon-chrome-foot-cell kbd {
  font: 700 9px "IBM Plex Mono", monospace;
  border: 1px solid var(--kokon-line, #1d2530);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 4px;
  color: var(--kokon-text, #e7e8e2);
}

/* ── Reposition skip link above doctrine chrome ───────────────── */
.kokon-skip-link { top: 64px; }
.kokon-skip-link:focus,
.kokon-skip-link:focus-visible { left: 48px; top: 64px; }

/* ── Print: hide all chrome ──────────────────────────────────── */
@media print {
  #kokonChromeHeaderHost,
  #kokonChromeRailHost,
  #kokonChromeFooterHost,
  #kokonDensityStrip { display: none !important; }
  body.kokon-has-chrome { padding: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Item #15 — Print / PDF export (2026-05-13)
 *
 * Doctrine: KOKON ships dark-on-dark for screen (quant-terminal). Paper is
 * the opposite covenant — light-on-paper for legibility, ink economy,
 * and physical archive longevity. The @media print block below inverts
 * the surface chrome to a print-safe palette while PRESERVING the status
 * enum colours (PAS/WRN/FLR), data-tone left-borders, and the brand
 * accents — these carry meaning that the printed sheet must still
 * convey at a glance.
 *
 * What hides on paper: chrome (header/rail/footer/density-strip),
 * persona switcher, brand picker, density strip, lang select, workspace
 * launcher, /ui/perf SW controls, mobile-only bottom nav, kokon-tab
 * controls, omni-search bars.
 *
 * What gets injected: kokon-print-stamp at the top of the page — two
 * rows of metadata: SAA / KOKON / classification / endpoint / UTC /
 * page / persona / brand / locale. Makes every printed sheet
 * self-identifying (doctrine §18).
 * ───────────────────────────────────────────────────────────────────────── */

/* Phase 118c — surfaces must never scroll horizontally. Long
   monospace strings, fixed grid tracks, and inline tables tend
   to push the viewport sideways; we clip at the edge instead. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
 * Phase 118d — MC-tone baseline.
 *
 * Mission Control was the reference: sharp edges, dark audit panels,
 * dense monospace data. Every other surface used to define its own
 * palette inline (sometimes drifting into pastel rounded cards). This
 * block ships the MC palette + reset under the short variable names
 * pages already reference (--bg, --panel, --line, --text, --muted,
 * --olive, --gold, --ok, --warn, --bad, --font-ui, --font-mono) and
 * a global border-radius:0 / box-shadow:none reset.
 *
 * Cascade rules: page-local <style> blocks that redefine the same
 * variables still win. Pages that don't define them now inherit the
 * MC look automatically.
 * ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:root {
  --bg: #020304;
  --panel: #0a0d11;
  --panel-soft: #05070a;
  --line: #1d2530;
  --line-soft: #10161d;
  --text: #e7e8e2;
  --muted: #a0a7ae;
  --dim: #5f6770;
  --ok: #8a9464;
  --warn: #d4b27a;
  --bad: #8c5656;
  --olive: #6b7a3b;
  --gold: #c39b4a;
  --font-ui: "IBM Plex Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono: "IBM Plex Mono","JetBrains Mono","Consolas","Liberation Mono",monospace;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 11px/1.4 var(--font-ui);
  letter-spacing: 0.02em;
}

a {
  color: var(--olive);
  text-decoration: none;
}
a:hover {
  color: var(--ok);
}

table {
  border-collapse: collapse;
  font: 10px/1.3 var(--font-mono);
  color: var(--text);
}
th {
  text-align: left;
  background: rgba(0,0,0,0.30);
  color: var(--muted);
  font: 700 8.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 5px 8px;
  border-bottom: 1px dotted var(--line-soft);
}

.kokon-panel {
  border: 1px solid var(--line);
  background: rgba(9,12,16,0.95);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kokon-panel > h3 {
  margin: 0;
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Phase 118d — shared "back to Mission Control" link. Phase 118b
   stripped the doctrine chrome (breadcrumb + workspace launcher);
   without this link the operator is stuck on any surface they land
   on. Quiet inline style, no shadow/pulse, just a thin border + the
   olive accent on hover. Insert once per surface header. */
.kokon-mc-back,
a.kokon-mc-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font: 9.5px var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kokon-mc-back:hover,
a.kokon-mc-back:hover {
  border-color: var(--olive);
  color: var(--ok);
}

@media print {
  @page {
    margin: 14mm 12mm 14mm 12mm;
    size: A4;
  }
  html, body {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
  }
  body * {
    color: inherit !important;
    box-shadow: none !important;
  }
  /* Surfaces that draw their own dark background — bleach for paper */
  .kokon-bg, .kokon-bg-0, .kokon-bg-1, .kokon-bg-2, .kokon-bg-3,
  body, html, main, section, article, aside, header, footer,
  div[class*="bg-"], div[class*="surface"] {
    background: #ffffff !important;
  }
  /* Lines stay visible but de-emphasise to ink-friendly grey */
  *[class*="kokon-line"],
  table, table th, table td,
  hr {
    border-color: #888 !important;
  }
  /* Muted / dim text — drop to a readable grey on paper */
  .kokon-muted, .kokon-dim, [class*="muted"], [class*="dim"] {
    color: #555 !important;
  }
  /* Hide non-content controls universally */
  .kokon-chrome-print-btn,
  .kokon-print-btn-page,
  .kokon-persona-switcher,
  .kokon-brand-picker,
  .kokon-tenant-switcher,
  .kokon-help,
  .kokon-omni,
  nav.bottom,
  .modal-backdrop,
  .toast,
  button[data-action],
  .kokon-chrome-workspace-btn { display: none !important; }
  /* Forms and approve/reject zones hide — paper is read-only */
  form, input, select, textarea, button { display: none !important; }
  /* Status enum — preserve meaning. Override the universal color:
   * inherit above with explicit ink colours that print legibly. */
  .kokon-status[data-tone="pas"], [data-tone="pas"] { color: #006030 !important; }
  .kokon-status[data-tone="wrn"], [data-tone="wrn"] { color: #8a5a00 !important; }
  .kokon-status[data-tone="flr"], [data-tone="flr"] { color: #a8141d !important; }
  .kokon-status[data-tone="blk"], [data-tone="blk"] { color: #6a0a14 !important; }
  .kokon-status[data-tone="opn"], [data-tone="opn"] { color: #555 !important; }
  .kokon-status[data-tone="cls"], [data-tone="cls"] { color: #222 !important; }
  /* Status pill backgrounds — drop to white so the colour reads cleanly */
  .kokon-status {
    background: #ffffff !important;
    border-color: currentColor !important;
  }
  /* Avoid orphan headings */
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  /* Avoid splitting rows across pages */
  tr, .card, article, .kokon-print-stamp { page-break-inside: avoid; }
  /* Tables — print-friendly */
  table { border-collapse: collapse; width: 100%; }
  table th, table td { padding: 4pt 6pt; border: 0.5pt solid #888; }
  table th { background: #f4f4f4 !important; font-weight: 600; }
  /* Link visibility — show URL inline for anchors that aren't internal */
  a[href^="http"]:after { content: " <" attr(href) ">"; font-size: 8pt; color: #555; }
  /* Print stamp — injected by kokon.print() */
  .kokon-print-stamp {
    display: block !important;
    margin-bottom: 8pt;
    padding-bottom: 4pt;
    border-bottom: 1pt solid #111;
    font-family: var(--kokon-font-mono);
    font-size: 8pt;
    color: #111 !important;
  }
  .kokon-print-stamp-row {
    display: flex;
    gap: 12pt;
    flex-wrap: wrap;
  }
  .kokon-print-stamp-cell {
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .kokon-print-stamp-cell b {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }
}

/* Stamp is hidden on screen — appears only at print time. */
.kokon-print-stamp { display: none; }

/* Print button (footer chrome cell) — pill style matching siblings */
.kokon-chrome-print-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 6px;
}
.kokon-chrome-print-btn:hover { color: var(--kokon-brand-primary); }
.kokon-chrome-print-btn:focus-visible {
  outline: 1px solid var(--kokon-brand-primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Density Phase 2 Wave 2 — deep-redesign primitives (2026-05-13)
 *
 * Five surfaces get a persona-density-aware deep redesign this round:
 *   agents-live (dual-pane), executive-company (sparklines on KPIs),
 *   program-board (kanban view), process-scan (minimap), council (3-pane).
 *
 * The CSS below provides reusable building blocks that compose with the
 * existing persona density tokens (body[data-persona-density="max|high|
 * medium|low"]). When density drops to medium/low, dense layouts collapse
 * gracefully (split-pane stacks; kanban becomes a list; minimap hides).
 * ───────────────────────────────────────────────────────────────────────── */

/* Sparkline — inline SVG mini-chart adjacent to KPI values */
.kokon-sparkline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}
.kokon-sparkline-svg { display: block; }
body[data-persona-density="low"] .kokon-sparkline,
body[data-persona-density="medium"] .kokon-sparkline-svg { display: none; }

/* Split-pane layout — used by agents-live + council */
.kokon-split-host {
  display: grid;
  grid-template-columns: var(--kokon-split-left, 38%) 4px 1fr;
  gap: 0;
  min-height: 60vh;
  border: 1px solid var(--kokon-line);
  background: var(--kokon-bg-1);
}
.kokon-split-left,
.kokon-split-right {
  overflow: auto;
  padding: 12px 14px;
  background: var(--kokon-bg-1);
}
.kokon-split-left { border-right: 1px solid var(--kokon-line-soft); }
.kokon-split-right { background: var(--kokon-bg-0); }
.kokon-split-divider {
  background: var(--kokon-line);
  cursor: col-resize;
  position: relative;
}
.kokon-split-divider::after {
  content: "";
  position: absolute;
  inset: 0 -3px;
}
.kokon-split-divider:focus-visible {
  outline: 2px solid var(--kokon-brand-primary, var(--kokon-front));
  outline-offset: 1px;
}
.kokon-split-host.kokon-split-stacked {
  grid-template-columns: 1fr;
}
.kokon-split-host.kokon-split-stacked .kokon-split-divider { display: none; }
.kokon-split-host.kokon-split-stacked .kokon-split-left { border-right: 0; border-bottom: 1px solid var(--kokon-line-soft); }
@media (max-width: 800px) {
  .kokon-split-host { grid-template-columns: 1fr; }
  .kokon-split-divider { display: none; }
  .kokon-split-left { border-right: 0; border-bottom: 1px solid var(--kokon-line-soft); }
}

/* Kanban — used by program-board */
.kokon-kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
}
.kokon-kanban-board.kokon-kanban-stacked,
body[data-persona-density="low"] .kokon-kanban-board,
body[data-persona-density="medium"] .kokon-kanban-board {
  grid-template-columns: 1fr;
}
.kokon-kanban-col {
  border: 1px solid var(--kokon-line);
  background: var(--kokon-bg-1);
  min-height: 100px;
}
.kokon-kanban-col[data-tone="pas"] { border-top: 3px solid var(--kokon-pass); }
.kokon-kanban-col[data-tone="wrn"] { border-top: 3px solid var(--kokon-warn); }
.kokon-kanban-col[data-tone="flr"] { border-top: 3px solid var(--kokon-fail); }
.kokon-kanban-col[data-tone="opn"] { border-top: 3px solid var(--kokon-open); }
.kokon-kanban-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--kokon-line-soft);
  background: var(--kokon-bg-2);
  font-family: var(--kokon-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kokon-muted);
}
.kokon-kanban-col-head b { color: var(--kokon-text); font-weight: 700; }
.kokon-kanban-col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kokon-kanban-card {
  padding: 8px 10px;
  background: var(--kokon-bg-0);
  border: 1px solid var(--kokon-line-soft);
  border-left: 3px solid var(--kokon-line);
  font-family: var(--kokon-font-mono);
  font-size: 12px;
  color: var(--kokon-text);
}
.kokon-kanban-card[data-tone="pas"] { border-left-color: var(--kokon-pass); }
.kokon-kanban-card[data-tone="wrn"] { border-left-color: var(--kokon-warn); }
.kokon-kanban-card[data-tone="flr"] { border-left-color: var(--kokon-fail); }
.kokon-kanban-card[data-tone="opn"] { border-left-color: var(--kokon-open); }
.kokon-kanban-card-title { color: var(--kokon-text); }
.kokon-kanban-card-owner { color: var(--kokon-muted); font-size: 10px; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Minimap — used by process-scan */
.kokon-minimap {
  position: fixed;
  top: 76px;
  bottom: 28px;
  width: 18px;
  z-index: 8;
  pointer-events: auto;
  display: flex;
  align-items: stretch;
}
.kokon-minimap-right { right: 4px; }
.kokon-minimap-left  { left:  4px; }
.kokon-minimap-track {
  width: 100%;
  background: var(--kokon-bg-1);
  border: 1px solid var(--kokon-line);
  position: relative;
  cursor: pointer;
}
.kokon-minimap-viewport {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--kokon-brand-primary, var(--kokon-front));
  opacity: 0.45;
  will-change: transform, height;
  transition: opacity 120ms ease-out;
}
.kokon-minimap-track:hover .kokon-minimap-viewport { opacity: 0.7; }
@media (max-width: 900px) {
  .kokon-minimap { display: none; }
}
body[data-persona-density="low"] .kokon-minimap,
body[data-persona-density="medium"] .kokon-minimap { display: none; }
@media print { .kokon-minimap { display: none !important; } }

/* Page-mounted print button (kokon.installPrintButton host) */
.kokon-print-btn-page {
  appearance: none;
  -webkit-appearance: none;
  background: var(--kokon-bg-2);
  border: 1px solid var(--kokon-line);
  color: var(--kokon-text);
  font-family: var(--kokon-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  cursor: pointer;
}
.kokon-print-btn-page:hover {
  border-color: var(--kokon-brand-primary);
  color: var(--kokon-brand-primary);
}
.kokon-print-btn-page:focus-visible {
  outline: 2px solid var(--kokon-brand-primary);
  outline-offset: 2px;
}

/* ── Reflow for narrow screens ────────────────────────────────── */
@media (max-width: 900px) {
  .kokon-chrome-brand-text { display: none; }
  .kokon-chrome-pill-classification { display: none; }
  .kokon-chrome-rail { display: none; }
  body.kokon-has-chrome { padding-left: 0; }
  #kokonChromeRailHost { display: none; }
}
@media (max-width: 600px) {
  .kokon-chrome-crumb { display: none; }
  .kokon-chrome-tenant { display: none; }
  body.kokon-has-chrome { padding-top: 48px; padding-bottom: 20px; }
  .kokon-chrome-header { height: 48px; padding: 0 10px; gap: 8px; }
  body.kokon-has-chrome.kokon-has-density-strip { padding-top: 76px; }
  body.kokon-has-chrome #kokonDensityStrip { top: 48px; }
}

/* ── Universal audit-grade doctrine safety net ──────────────────────
 * Strip any remaining light-mode / bright traffic-light artefacts that
 * leaked into per-page CSS. Applies to every page that loads kokon.css.
 * Doctrine: severity is conveyed via colour-on-dark, never via bright
 * background. audit-grade discipline / quant-terminal pattern conformance.
 */
/* Severity / sev classes — never use bright backgrounds */
.sev-critical, [class*="severity-critical"], [class*="danger-bright"] {
  background: #10151a !important;
  color: #8c5656 !important;
  border-color: #8c5656 !important;
}
.sev-warning, [class*="severity-warning"] {
  background: #10151a !important;
  color: #8a7a50 !important;
  border-color: #8a7a50 !important;
}
.sev-info, [class*="severity-info"] {
  background: #10151a !important;
  color: #8a9464 !important;
  border-color: #8a9464 !important;
}
/* Badges with hard-coded light backgrounds */
.badge-pass, [class*="badge-success"] {
  background: rgba(138, 148, 100, 0.08) !important;
  color: #8a9464 !important;
  border: 1px solid #4d5a3c !important;
}
.badge-warn, [class*="badge-warning"] {
  background: rgba(138, 122, 80, 0.08) !important;
  color: #8a7a50 !important;
  border: 1px solid #5a4f3c !important;
}
.badge-fail, [class*="badge-danger"], [class*="badge-error"] {
  background: rgba(140, 86, 86, 0.08) !important;
  color: #8c5656 !important;
  border: 1px solid #5a3838 !important;
}
/* Catch any item / card that still uses white background */
.item[style*="background:#fff"],
.item[style*="background: #fff"],
.card[style*="background:#fff"],
.card[style*="background: #fff"] {
  background: #0e1116 !important;
}
/* Strip any text-shadow / box-shadow that leaked through */
*, *::before, *::after { text-shadow: none !important; }
/* Force zero border-radius on legacy pill/chip/button shapes */
.pill, .chip, .badge, button, .btn, input, select, textarea, .card, .panel {
  border-radius: 0 !important;
}

/* ── Doctrine safety net — strip glow / bloom on interactive widgets ──
 *
 * Strips box-shadow on badge/pill/chip/status classes (they often carry
 * `box-shadow: 0 0 Npx rgba(...)` glow which is not audit-grade). Inset
 * box-shadow as border emulation (`inset 0 0 0 1px ...`) stays because
 * it's applied to panel/card/section/dag-node selectors that we don't
 * target here.
 */
.badge, .pill, .chip, .status,
[class*="badge-"], [class*="status-"], [class*="severity-"], [class*="state-"] {
  box-shadow: none !important;
}
/* Tone-aware override — when badge already has data-tone, use safety net colour. */
.badge[data-tone="pas"], .pill[data-tone="pas"], .chip[data-tone="pas"] {
  color: #8a9464 !important; border-color: #4d5a3c !important; background: rgba(138,148,100,0.08) !important;
}
.badge[data-tone="wrn"], .pill[data-tone="wrn"], .chip[data-tone="wrn"] {
  color: #8a7a50 !important; border-color: #5a4f3c !important; background: rgba(138,122,80,0.08) !important;
}
.badge[data-tone="flr"], .pill[data-tone="flr"], .chip[data-tone="flr"] {
  color: #8c5656 !important; border-color: #5a3838 !important; background: rgba(140,86,86,0.08) !important;
}
/* Strip animation glow on @keyframes alarm-bg type effects via opacity only — animations stay but bloom dims. */
/* (no rule needed — animation keyframes that include glow are page-local and rare.) */

/* ── Embed mode (iframe context inside Engineer Desk tabs) ─────
 * When ?chrome=off is in URL, body gets .kokon-embed-mode.
 * Strip extra padding so iframe content sits flush against tab frame.
 */
body.kokon-embed-mode {
  padding: 0 !important;
  margin: 0 !important;
}
body.kokon-embed-mode #backToMenuBtn,
body.kokon-embed-mode .kokon-skip-link,
body.kokon-embed-mode #kokonChromeHeaderHost,
body.kokon-embed-mode #kokonDensityStrip,
body.kokon-embed-mode #kokonChromeRailHost,
body.kokon-embed-mode #kokonChromeFooterHost {
  display: none !important;
}

/* ── Item #10 — Multi-monitor / ultrawide layouts ───────────────
 * density-grade operator typically uses 1×ultrawide, 2×27", or
 * 4×24-27" monitors. KOKON now adapts:
 *
 *   ≤ 1199px       — narrow (laptops, tablets) — existing single-col
 *   1200-1599px    — desktop default (current 1080p design)
 *   1600-1919px    — desktop wide (more breathing room)
 *   1920-2559px    — workstation 1920×1080 (current "target")
 *   2560-3439px    — 27" QHD / dual 1080p horizontal
 *   3440-5119px    — ultrawide 21:9 (3440×1440, 3840×1600)
 *   ≥ 5120px       — super-ultrawide 32:9 / triple 1080p (5120×1440)
 *
 * Pages opt into wide layout by using utility classes:
 *   .kokon-wide-grid          — auto-fit grid that adapts column count
 *   .kokon-wide-grid-2/3/4    — fixed N-col at workstation+, single below
 *   .kokon-ultrawide-only     — visible only ≥ 3440px
 *   .kokon-multimon-only      — visible only ≥ 5120px
 */

/* Base utility: a grid that scales with viewport breakpoints. */
.kokon-wide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Workstation tier (1920px+) — operator default 2-col */
@media (min-width: 1600px) {
  .kokon-wide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kokon-wide-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 1920px+ workstation */
@media (min-width: 1920px) {
  .kokon-wide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kokon-wide-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.kokon-has-chrome { padding-left: 48px; }
  #kokonChromeRailHost { width: 48px; }
  .kokon-chrome-rail { width: 48px; }
}

/* 27" QHD — 2560×1440 */
@media (min-width: 2560px) {
  .kokon-wide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kokon-wide-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kokon-wide-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  /* Density strip — show full receipt feed instead of latest-only at this width */
  .kokon-density-strip { font-size: 11px; }
  /* Doctrine header gets more breathing room */
  .kokon-chrome-header { padding: 0 24px; gap: 18px; }
}

/* Ultrawide 21:9 — 3440×1440 / 3840×1600 */
@media (min-width: 3440px) {
  .kokon-wide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kokon-wide-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kokon-ultrawide-only { display: block !important; }
  /* Page wrappers — let content breathe horizontally */
  body.kokon-has-chrome .wrap,
  body.kokon-has-chrome .wiz-shell,
  body.kokon-has-chrome .ed-shell,
  body.kokon-has-chrome .ra-shell {
    max-width: 3200px;
  }
}
@media (max-width: 3439px) { .kokon-ultrawide-only { display: none !important; } }

/* Super-ultrawide 32:9 / triple 1080p — 5120×1440 */
@media (min-width: 5120px) {
  .kokon-wide-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kokon-multimon-only { display: block !important; }
  body.kokon-has-chrome .wrap,
  body.kokon-has-chrome .wiz-shell,
  body.kokon-has-chrome .ed-shell,
  body.kokon-has-chrome .ra-shell {
    max-width: 4800px;
  }
  .kokon-chrome-header { padding: 0 36px; }
  .kokon-chrome-header .kokon-chrome-brand-line1 { font-size: 13px; }
  .kokon-chrome-header .kokon-chrome-brand-line2 { font-size: 10px; }
}
@media (max-width: 5119px) { .kokon-multimon-only { display: none !important; } }

/* Pop-out / detach affordance */
.kokon-popout-btn {
  background: transparent;
  border: 1px solid var(--kokon-line, #1d2530);
  color: var(--kokon-text-tertiary, #b3bac1);
  font: 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
}
.kokon-popout-btn:hover {
  border-color: var(--kokon-olive-aa, #88965a);
  color: var(--kokon-olive-aa, #88965a);
}
.kokon-popout-btn::before { content: "↗ "; }

/* Workspace launcher overlay (4-monitor preset) */
.kokon-workspace-launcher {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 4, 0.92);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.kokon-workspace-launcher.open { display: flex; }
.kokon-workspace-dialog {
  background: var(--kokon-bg1, rgba(9, 12, 16, 0.98));
  border: 1px solid var(--kokon-line, #1d2530);
  padding: 24px 28px;
  max-width: 720px;
  width: 92%;
  color: var(--kokon-text, #e7e8e2);
  font-family: "IBM Plex Sans", sans-serif;
}
.kokon-workspace-dialog h2 {
  margin: 0 0 6px;
  font: 700 14px/1.1 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kokon-workspace-dialog p {
  margin: 0 0 16px;
  font-size: 11px;
  color: var(--kokon-muted, #a0a7ae);
}
.kokon-workspace-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kokon-workspace-preset {
  display: block;
  text-align: left;
  background: var(--kokon-bg2, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--kokon-line, #1d2530);
  color: var(--kokon-text, #e7e8e2);
  padding: 10px 12px;
  cursor: pointer;
  font: 11px/1.4 "IBM Plex Sans", sans-serif;
}
.kokon-workspace-preset:hover {
  border-color: var(--kokon-olive-aa, #88965a);
  background: rgba(136, 150, 90, 0.06);
}
.kokon-workspace-preset b {
  display: block;
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kokon-olive-aa, #88965a);
  margin-bottom: 4px;
}
.kokon-workspace-preset span {
  display: block;
  color: var(--kokon-muted, #a0a7ae);
  font-size: 10px;
  margin-top: 2px;
}
.kokon-workspace-foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--kokon-line-soft, #10161d);
  padding-top: 14px;
  font: 9px "IBM Plex Mono", monospace;
  color: var(--kokon-muted, #a0a7ae);
  letter-spacing: 0.08em;
}
.kokon-workspace-close {
  background: transparent;
  border: 1px solid var(--kokon-line, #1d2530);
  color: var(--kokon-text, #e7e8e2);
  font: 10px "IBM Plex Mono", monospace;
  padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.kokon-workspace-close:hover { border-color: var(--kokon-olive-aa, #88965a); color: var(--kokon-olive-aa, #88965a); }

/* Workspace launcher pill button in doctrine header */
.kokon-chrome-workspace-btn {
  color: var(--kokon-olive-aa, #88965a);
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  cursor: pointer;
}
.kokon-chrome-workspace-btn:hover {
  background: rgba(136, 150, 90, 0.12);
}
@media (max-width: 1100px) {
  .kokon-chrome-workspace-btn { display: none; }
}

/* Finding Detail side-panel — shared chassis for /ui/process-scan,
   /ui/customer-onboarding, /ui/regulator-audit. Doctrine: dense analytical workstation pattern
   dense workstation, quant-terminal pattern, audit-grade discipline. 480px right-anchored,
   slide-in 180ms cubic-bezier(.4,0,.2,1), backdrop 50%. */
.kokon-finding-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998;
  opacity: 0; transition: opacity 180ms cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.kokon-finding-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.kokon-finding-detail {
  position: fixed; top: 56px; right: 0; bottom: 22px; width: 480px; max-width: 100vw;
  background: var(--kokon-bg-1, #06080b); border-left: 1px solid var(--kokon-line, #1c2530);
  transform: translateX(100%); transition: transform 180ms cubic-bezier(.4,0,.2,1);
  z-index: 9999; display: flex; flex-direction: column;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--kokon-text-tertiary, #b3bac1);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}
.kokon-finding-detail[data-open="true"] { transform: translateX(0); }
.kokon-finding-detail__header {
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 14px; background: var(--kokon-bg-2, #0b0e12);
  border-bottom: 1px solid var(--kokon-line, #1c2530);
}
.kokon-finding-detail__eyebrow {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--kokon-olive-aa, #88965a);
}
.kokon-finding-detail__title-main {
  margin: 2px 0 0; font-size: 12px; font-weight: 600; color: #e7e8e2;
  line-height: 1.3; word-break: break-word;
}
.kokon-finding-detail__close {
  background: transparent; border: 1px solid var(--kokon-line, #1c2530);
  color: var(--kokon-text-tertiary, #b3bac1); font-size: 14px; line-height: 1;
  padding: 4px 8px; cursor: pointer; font-family: inherit;
}
.kokon-finding-detail__close:hover,
.kokon-finding-detail__close:focus-visible {
  color: #e7e8e2; border-color: var(--kokon-olive-aa, #88965a); outline: none;
}
.kokon-finding-detail__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
.kokon-finding-detail__section {
  border: 1px solid var(--kokon-line, #1c2530); border-left-width: 3px;
  background: var(--kokon-bg-2, #0b0e12); padding: 8px 12px 10px; margin-bottom: 10px;
}
.kokon-finding-detail__section[data-tone="pas"] { border-left-color: var(--kokon-pass, #00ff66); }
.kokon-finding-detail__section[data-tone="wrn"] { border-left-color: var(--kokon-warn, #ffb000); }
.kokon-finding-detail__section[data-tone="flr"] { border-left-color: #d96f4a; }
.kokon-finding-detail__section[data-tone="blk"] { border-left-color: #8c5656; }
.kokon-finding-detail__section[data-tone="neu"],
.kokon-finding-detail__section[data-tone="unk"] { border-left-color: var(--kokon-text-dim, #8b939c); }
.kokon-finding-detail__section h3 {
  margin: 0 0 6px; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--kokon-olive-aa, #88965a);
}
.kokon-finding-detail__row {
  display: flex; justify-content: space-between; gap: 8px; padding: 2px 0;
  border-bottom: 1px solid var(--kokon-line-soft, #121820);
}
.kokon-finding-detail__row:last-child { border-bottom: none; }
.kokon-finding-detail__key { color: var(--kokon-text-dim, #8b939c); }
.kokon-finding-detail__val { color: #e7e8e2; text-align: right; word-break: break-word; }
.kokon-finding-detail__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kokon-finding-detail__chip {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--kokon-line, #1c2530);
  font-size: 10px; color: var(--kokon-text-tertiary, #b3bac1);
}
.kokon-finding-detail__chip[data-tone="flr"] { border-color: #d96f4a; color: #d96f4a; }
.kokon-finding-detail__chip[data-tone="wrn"] { border-color: var(--kokon-warn, #ffb000); color: var(--kokon-warn, #ffb000); }
.kokon-finding-detail__chip[data-tone="pas"] { border-color: var(--kokon-pass, #00ff66); color: var(--kokon-pass, #00ff66); }
.kokon-finding-detail__chip[data-tone="blk"] { border-color: #8c5656; color: #8c5656; }
.kokon-finding-detail__list { margin: 4px 0 0; padding: 0; list-style: none; }
.kokon-finding-detail__list li {
  padding: 2px 0 2px 10px; position: relative; word-break: break-word;
}
.kokon-finding-detail__list li::before {
  content: "·"; position: absolute; left: 0; color: var(--kokon-text-dim, #8b939c);
}
.kokon-finding-detail__prose { margin: 4px 0 0; color: #e7e8e2; line-height: 1.45; }
.kokon-finding-detail__nav {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--kokon-bg-2, #0b0e12);
  border-top: 1px solid var(--kokon-line, #1c2530);
}
.kokon-finding-detail__nav button {
  background: transparent; border: 1px solid var(--kokon-line, #1c2530);
  color: var(--kokon-text-tertiary, #b3bac1); font-family: inherit; font-size: 10px;
  padding: 3px 10px; cursor: pointer;
}
.kokon-finding-detail__nav button:hover,
.kokon-finding-detail__nav button:focus-visible {
  color: #e7e8e2; border-color: var(--kokon-olive-aa, #88965a); outline: none;
}
.kokon-finding-detail__pos { font-size: 10px; color: var(--kokon-text-dim, #8b939c); }
.kokon-finding-clickable { cursor: pointer; }
.kokon-finding-clickable:hover { border-color: var(--kokon-olive-aa, #88965a); }
.kokon-finding-clickable:focus-visible {
  outline: 2px solid var(--kokon-olive-aa, #88965a); outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Persona Hot-Swap (Stage B) — see docs/PERSONA_MATRIX_2026-05-12.md
 *
 * body[data-persona="<name>"] driven by kokon.applyPersona(). Density
 * tokens cascade through doctrine chrome + density strip + per-page
 * tables.
 *
 * Density bands: max | high | medium | low
 *
 * The 4 bands compose 3 dimensions:
 *   --kokon-density-row-padding-y   — table/row vertical padding
 *   --kokon-density-row-padding-x   — table/row horizontal padding
 *   --kokon-density-data-font-size  — monospace data cell size
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --kokon-density-row-padding-y: 4px;
  --kokon-density-row-padding-x: 8px;
  --kokon-density-data-font-size: 11px;
}

body[data-persona-density="max"] {
  --kokon-density-row-padding-y: 2px;
  --kokon-density-row-padding-x: 6px;
  --kokon-density-data-font-size: 10px;
}
body[data-persona-density="high"] {
  --kokon-density-row-padding-y: 4px;
  --kokon-density-row-padding-x: 8px;
  --kokon-density-data-font-size: 11px;
}
body[data-persona-density="medium"] {
  --kokon-density-row-padding-y: 6px;
  --kokon-density-row-padding-x: 10px;
  --kokon-density-data-font-size: 12px;
}
body[data-persona-density="low"] {
  --kokon-density-row-padding-y: 12px;
  --kokon-density-row-padding-x: 16px;
  --kokon-density-data-font-size: 14px;
}

/* Suppression flags from PERSONA_VIEW_CONFIG. Pages opt in by tagging
 * elements with data-board-hide / .kokon-density-strip / .kokon-tape /
 * .kokon-sparkline. */
body.kokon-persona-hide-density-strip .kokon-density-strip { display: none !important; }
body.kokon-persona-hide-tape .kokon-tape,
body.kokon-persona-hide-tape [data-kokon-tape] { display: none !important; }
body.kokon-persona-hide-sparklines .kokon-sparkline,
body.kokon-persona-hide-sparklines [data-kokon-sparkline] { display: none !important; }

/* Board persona — 1-page exec summary. Hides legacy engineer-density
 * UI on any page that opts in via data-board-hide attribute. */
body[data-persona="board"] [data-board-hide] { display: none !important; }
body[data-persona="board"] {
  font-size: var(--kokon-density-data-font-size);
}

/* Persona switcher widget — used inside doctrine chrome topbar or as a
 * standalone slot on per-page chrome. */
.kokon-persona-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--kokon-text-tertiary, #b3bac1);
}
.kokon-persona-switcher__eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--kokon-olive-aa, #88965a);
  font-size: 9px;
}
.kokon-persona-switcher__select {
  background: var(--kokon-bg-2, #0b0e12);
  border: 1px solid var(--kokon-line, #1c2530);
  color: var(--kokon-text-tertiary, #b3bac1);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.kokon-persona-switcher__select:focus-visible {
  outline: 2px solid var(--kokon-olive-aa, #88965a);
  outline-offset: 2px;
}

/* Brand picker — mirrors persona switcher shape; mounted via kokon.installBrandPicker */
.kokon-brand-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--kokon-text-tertiary, #b3bac1);
}
.kokon-brand-picker__eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--kokon-brand-primary, var(--kokon-front));
  font-size: 9px;
}
.kokon-brand-picker__select {
  background: var(--kokon-bg-2, #0b0e12);
  border: 1px solid var(--kokon-line, #1c2530);
  color: var(--kokon-text-tertiary, #b3bac1);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}
.kokon-brand-picker__select:focus-visible {
  outline: 2px solid var(--kokon-brand-primary, var(--kokon-front));
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Stage D Phase 2 — global density token plumbing.
 *
 * Persona density bands (max/high/medium/low) define tokens at :root +
 * body[data-persona-density="..."]. Per-page tables, KPI cards, status
 * pills, and density strips consume those tokens via these universal
 * selectors. Per-page <style> blocks remain free to override for surface-
 * specific designs; this is the "if you didn't pin a value, here's the
 * persona-aware default" layer.
 *
 * Affects 6 retrofit surfaces from RUNBOOK_INFORMATION_DENSITY §4 by
 * mechanical inheritance:
 *   /ui/agents-live · /ui/regulator-audit · /ui/executive-company ·
 *   /ui/process-scan · /ui/council · /ui/program-board
 * Plus the long-tail of 32 surfaces that follow the same table/card
 * patterns.
 *
 * Specificity by data-persona-density attribute on body — beats most
 * page-local rules that target tag selectors alone without page-class
 * scoping. Pages that explicitly need to opt out can add
 * `.kokon-density-locked` class on the parent and per-page styles win.
 * ──────────────────────────────────────────────────────────────────── */

/* Tables — primary data containers across 30+ surfaces */
body[data-persona-density] table:not(.kokon-density-locked) td,
body[data-persona-density] table:not(.kokon-density-locked) th {
  padding: var(--kokon-density-row-padding-y) var(--kokon-density-row-padding-x);
  font-size: var(--kokon-density-data-font-size);
}

/* KPI / metric cards — used on /ui, /ui/executive-company, /ui/agents-live */
body[data-persona-density] .kpi-v,
body[data-persona-density] .stat-card .value,
body[data-persona-density] .experience-stat .value,
body[data-persona-density] .summary-text {
  font-size: var(--kokon-density-data-font-size);
}

/* Status pills (.pill, .kokon-status, .badge) — keep readable but shrink padding on max density */
body[data-persona-density="max"] .pill,
body[data-persona-density="max"] .kokon-status,
body[data-persona-density="max"] .badge {
  padding: 1px 4px;
  font-size: 9px;
}
body[data-persona-density="low"] .pill,
body[data-persona-density="low"] .kokon-status,
body[data-persona-density="low"] .badge {
  padding: 4px 10px;
  font-size: 12px;
}

/* Density strip — auto-hidden under board (kokon-persona-hide-density-strip).
   Under low density on cio, scale down rather than hide entirely. */
body[data-persona-density="low"] .kokon-density-strip {
  min-height: 28px;
  font-size: 9px;
}
body[data-persona-density="max"] .kokon-density-strip {
  min-height: 24px;
  font-size: 9px;
}

/* Per-page article/card containers — common .card .surface-card .pmetric */
body[data-persona-density] .card,
body[data-persona-density] .surface-card,
body[data-persona-density] .pmetric,
body[data-persona-density] .conn-tile {
  padding: calc(var(--kokon-density-row-padding-y) * 1.5) calc(var(--kokon-density-row-padding-x) * 1.5);
}

/* Form rows — labels/inputs scaled with data font size where pages don't pin them */
body[data-persona-density] .field input,
body[data-persona-density] .field select,
body[data-persona-density] .field textarea {
  font-size: var(--kokon-density-data-font-size);
}

/* Hot-swap visual feedback: 180ms ease on data-persona-density swap so
 * the operator perceives the transition rather than a hard jump. */
body[data-persona-density] table td,
body[data-persona-density] table th,
body[data-persona-density] .pill,
body[data-persona-density] .kokon-status,
body[data-persona-density] .badge {
  transition: padding 180ms ease, font-size 180ms ease;
}

/* ── Doctrine guard — literal-case content surfaces ──────────────
 * JSON, code, monospace input/output must NEVER inherit text-transform
 * from an uppercase ancestor (headings, chrome labels, etc.). CSS
 * text-transform inherits — a single uppercase parent silently
 * corrupts every textarea/pre below it. This is a hard doctrine rule:
 * machine-readable content renders exactly as typed.
 */
textarea,
input,
select,
pre,
code,
kbd,
samp,
[contenteditable],
.kokon-mono,
[class*="-json"],
[class*="-code"],
[id*="request-body"],
[id*="response-body"] {
  text-transform: none !important;
}

/* ── SAA Logo 4D — immersive brand component ───────────────────────
 * Drop into any container. Wrapper provides perspective + breath +
 * depth shadow. Inner element (img/svg/text) gets mouse-tracked tilt
 * via kokon.installLogo4D(el). Effects layered so operator feels they
 * are standing in front of the logo, not looking at a flat sticker.
 *
 *   <div class="kokon-logo-4d-stage">
 *     <div class="kokon-logo-4d" id="saaLogo4D">
 *       <img src="/static/saa-alliance-logo.png" alt="SAA Alliance">
 *     </div>
 *   </div>
 *   <script>kokon.installLogo4D(document.getElementById('saaLogo4D'));</script>
 */
.kokon-logo-4d-stage {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(184, 152, 60, 0.08), transparent 65%), #050608;
}

/* Volumetric gold light behind logo — JS updates --glow-left / --glow-top
   based on cursor position; fallback 50%/50% keeps a static halo. */
.kokon-logo-4d-stage::before {
  content: "";
  position: absolute;
  top: var(--glow-top, 50%);
  left: var(--glow-left, 50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(212, 178, 122, 0.18), rgba(212, 178, 122, 0.03) 40%, transparent 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  transition: top 0.25s ease-out, left 0.25s ease-out;
}

/* Subtle film grain over the stage so the logo feels lit, not pasted */
.kokon-logo-4d-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.kokon-logo-4d {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  animation: kokon-logo-breath 8s ease-in-out infinite;
  /* Layered depth shadow — multiple offsets simulate volumetric light. */
  filter:
    drop-shadow(0 1px 0  rgba(255, 235, 180, 0.12))
    drop-shadow(0 8px 24px rgba(212, 178, 122, 0.22))
    drop-shadow(0 24px 64px rgba(0, 0, 0, 0.85));
}

.kokon-logo-4d img,
.kokon-logo-4d svg {
  display: block;
  max-width: 100%;
  height: auto;
  /* Inner highlight — top edge catches a faint warm light */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0.96) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0.96) 100%);
}

/* Edge shimmer — slow horizontal gold sweep across the logo */
.kokon-logo-4d::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 220, 150, 0.10) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: kokon-logo-shimmer 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  border-radius: inherit;
  z-index: 3;
}

@keyframes kokon-logo-breath {
  0%, 100% { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(0.985); }
  50%      { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(1.015); }
}
@keyframes kokon-logo-shimmer {
  0%   { background-position: 200% 0; opacity: 0; }
  20%  { opacity: 0.8; }
  60%  { opacity: 0.3; }
  100% { background-position: -100% 0; opacity: 0; }
}

/* Respect prefers-reduced-motion: kill breath + shimmer, keep tilt. */
@media (prefers-reduced-motion: reduce) {
  .kokon-logo-4d { animation: none; }
  .kokon-logo-4d::after { animation: none; opacity: 0; }
}

/* Static (no JS) fallback — logo still feels 3D via shadow alone. */
.kokon-logo-4d-stage:not([data-tilt-active]) .kokon-logo-4d {
  transform: rotateX(2deg) rotateY(-3deg);
}

/* ────────────────────────────────────────────────────────────────────
 * GC PAGE SHELL — extracted from gates-center.html
 *
 * Reusable page-shell primitives so every KOKON UI surface can adopt
 * the Gates Center visual signature: dense, strict, no rounded corners,
 * IBM Plex Sans + Mono, olive/gold accents, code-prefix headlines.
 *
 * Usage:
 *   <body class="user-mode">
 *     <div class="gc-page-grid">
 *       <header class="gc-headline">
 *         <div>
 *           <h1><span class="code">XX</span> Page Title</h1>
 *           <div class="sub">subtitle in mono caps</div>
 *         </div>
 *         <a class="back" href="/ui">◂ MC Mission Control</a>
 *       </header>
 *       <!-- page body -->
 *     </div>
 *   </body>
 * ──────────────────────────────────────────────────────────────────── */

.gc-page-grid {
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.gc-headline {
  border: 1px solid var(--kokon-line, #1c2530);
  background: rgba(9, 12, 16, 0.92);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-radius: 0;
}
.gc-headline h1 {
  margin: 0;
  font: 700 14px/1.1 var(--kokon-font-ui, "IBM Plex Sans", sans-serif);
  letter-spacing: 0.06em;
  color: var(--kokon-text, #e7e8e2);
}
.gc-headline h1 .code {
  color: var(--kokon-brand-primary, #6b7a3b);
  font-family: var(--kokon-font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-right: 8px;
}
.gc-headline .sub {
  font: 9px var(--kokon-font-mono, "IBM Plex Mono", monospace);
  color: var(--kokon-muted, #a0a7ae);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 3px;
}
.gc-headline a.back {
  font: 9px var(--kokon-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kokon-brand-primary, #6b7a3b);
  padding: 4px 10px;
  border: 1px solid var(--kokon-brand-primary, #6b7a3b);
  text-decoration: none;
  border-radius: 0;
}
.gc-headline a.back:hover {
  color: var(--kokon-brand-secondary, #c39b4a);
  border-color: var(--kokon-brand-secondary, #c39b4a);
}

.gc-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--kokon-line, #1c2530);
  background: rgba(0, 0, 0, 0.4);
}
.gc-tabs button {
  flex: 1;
  background: transparent;
  color: var(--kokon-muted, #a0a7ae);
  border: none;
  border-right: 1px solid var(--kokon-line, #1c2530);
  padding: 10px 12px;
  font: 700 10px/1.2 var(--kokon-font-mono, "IBM Plex Mono", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 1px;
  border-radius: 0;
}
.gc-tabs button:last-child { border-right: none; }
.gc-tabs button:hover {
  color: var(--kokon-text, #e7e8e2);
  background: rgba(255, 255, 255, 0.025);
}
.gc-tabs button.active {
  background: rgba(107, 122, 59, 0.18);
  color: var(--kokon-text, #e7e8e2);
  border-bottom: 2px solid var(--kokon-brand-primary, #6b7a3b);
}
.gc-tabs button .code {
  color: var(--kokon-brand-primary, #6b7a3b);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.gc-tabs button.active .code { color: var(--kokon-brand-secondary, #c39b4a); }
.gc-tabs button .desc {
  font: 8.5px/1.2 var(--kokon-font-ui, "IBM Plex Sans", sans-serif);
  color: var(--kokon-dim, #5f6770);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 2px;
}

.gc-frame-wrap {
  border: 1px solid var(--kokon-line, #1c2530);
  background: rgba(0, 0, 0, 0.5);
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.gc-frame-wrap .gc-frame-bar {
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--kokon-line, #1c2530);
  font: 9px var(--kokon-font-mono, "IBM Plex Mono", monospace);
  color: var(--kokon-dim, #5f6770);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gc-frame-wrap .gc-frame-bar a {
  color: var(--kokon-brand-primary, #6b7a3b);
  text-decoration: none;
}
.gc-frame-wrap .gc-frame-bar a:hover { color: var(--kokon-brand-secondary, #c39b4a); }
.gc-frame-wrap iframe.gc-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--kokon-bg-0, #020304);
}