@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/space-grotesk.woff2') format('woff2')}
/* Adversa console — design tokens. */

:root {
  /* Design system — ink scale + accents + type.
     Mapped onto the existing token names so every component picks them up. */
  --ink-900: #0a0b10; --ink-800: #14161e; --ink-700: #202331; --ink-600: #363a48;
  --ink-500: #4e5261; --ink-400: #5f6574; --ink-300: #8e93a1; --ink-200: #ced2dc;
  --ink-100: #dfe2e9; --ink-75: #eceef2; --ink-50: #f2f3f6; --ink-25: #f7f8fa;
  --paper: #ffffff;
  --accent: #35486E;            /* primary accent */

  --color-bg-page: var(--ink-25);
  --color-bg-frame: var(--paper);
  --color-bg-tile: var(--ink-50);
  --color-bg-soft: var(--ink-75);
  --color-bg-info-soft: #e6eef4;
  --color-bg-success-soft: #e4efe9;
  --color-bg-warning-soft: #f4ecdf;
  --color-bg-danger-soft: #f7e7e9;
  /* Full-viewport scrim behind a lightbox. Derived from the page surface so it
     follows the active theme; a theme block may override it outright. */
  --color-bg-scrim: color-mix(in srgb, var(--color-bg-page) 92%, transparent);
  --color-ink-primary: var(--ink-900);
  --color-ink-secondary: var(--ink-600);
  --color-ink-tertiary: #5f6574;  /* AA: 4.6:1 on page (was ink-300 3.0:1) */
  --color-ink-info: #2c657f;
  --color-ink-success: #2c6b4c;
  --color-ink-warning: #9c5a1c;
  --color-ink-danger: #b02734;
  --line: var(--ink-100);
  --line-strong: var(--ink-200);
  --color-border: var(--line);
  /* Theme-system tokens: every value a theme may legitimately re-voice without
     touching component rules. Defaults reproduce the historical literals. */
  --chrome-w: 0.5px;             /* structural hairline weight (borders app-wide) */
  --console-bg: #0e0f17;         /* terminal-like surfaces (playground log, snippets) */
  --console-ink: #cfd0db;
  --console-deny: #d9707e;       /* decision lines inside the console */
  --console-confirm: #c98d4e;
  --console-allow: #7eb085;
  --on-solid: #fff;              /* text over solid status fills (trust tiers, cap dots) */
  --heat-ink: rgb(120,170,230);      /* runtime-heatmap intensity ramp base (historical literal) */
  --motion: 1;                   /* animation scale; 0 = a theme damps motion */
  --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --font-serif: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Type scale. Tiers: --fz-sm1 (11) exceptional micro — role/brand only; --fz-sm2 (12) labels;
     --fz-md1 (14) secondary body + --fz-md2 (16) primary body — all data; --fz-lg1+ headings/titles. */
  --fz-sm1: 11px; --fz-sm2: 12px; --fz-md1: 14px; --fz-md2: 16px; --fz-lg1: 20px; --fz-lg2: 24px; --fz-xl1: 28px; --fz-xl2: 32px;
}
[data-theme="original-dark"] {
  --ink-900: #dfe3ec; --ink-800: #c4c9d6; --ink-700: #a0a6b6; --ink-600: #363b4a;
  --ink-500: #6a7080; --ink-400: #878da0; --ink-300: #565c6c; --ink-200: #272c38;
  --ink-100: #202430; --ink-75: #1a1e28; --ink-50: #151822; --ink-25: #10131b;
  --paper: #0a0c12;
  --accent: #9FB2D1;

  --color-bg-page: var(--ink-25);
  --color-bg-frame: #151924;
  --color-bg-tile: var(--ink-50);
  --color-bg-soft: var(--ink-75);
  --color-bg-info-soft: #14242e;
  --color-bg-success-soft: #12261c;
  --color-bg-warning-soft: #271f12;
  --color-bg-danger-soft: #2a1519;
  --color-ink-primary: var(--ink-900);
  --color-ink-secondary: var(--ink-700);
  --color-ink-tertiary: var(--ink-400);
  --color-ink-info: #6ba3c0;
  --color-ink-success: #4ba57c;
  --color-ink-warning: #c98d4e;
  --color-ink-danger: #d9707e;
  --line: var(--ink-200);
  --line-strong: var(--ink-300);
  --on-solid: #0a0c12;
  --console-deny: #d9707e;
  --console-confirm: #c98d4e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--font-sans); font-size: var(--fz-md2); background: var(--color-bg-page); color: var(--color-ink-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { height: 100vh; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ──────── App shell ──────── */
.app { display: grid; grid-template-columns: 256px 1fr; height: 100%; }

/* Sidebar */
.sidebar { border-right: var(--chrome-w) solid var(--line); background: var(--color-bg-frame); padding: 0 0 12px; position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.sidebar-footer { flex-shrink: 0; border-top: var(--chrome-w) solid var(--line); padding: 8px 20px; font-family: var(--font-sans); }
.sidebar-header { box-sizing: border-box; flex-shrink: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 20px; border-bottom: var(--chrome-w) solid var(--line); margin-bottom: 14px; }
.sidebar-header > .brand { align-self: center; }
.brand-sub { font-size: var(--fz-sm1); font-weight: 400; text-transform: uppercase; color: var(--color-ink-tertiary); line-height: 1.2; letter-spacing: 0.1px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--color-ink-primary); }
.brand-logo { height: 19px; width: auto; display: block; margin: 0px 4px; }
.brand-logo-white { display: none; }
[data-theme="original-dark"] .brand-logo-black { display: none; }
[data-theme="original-dark"] .brand-logo-white { display: block; }

.search-input { width: 100%; padding: 8px 10px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: 0; font-family: var(--font-sans); font-size: var(--fz-md1); color: var(--color-ink-secondary); }
.search-input::placeholder { color: var(--color-ink-tertiary); }
.search-input:focus { outline: none; border-color: var(--color-ink-secondary); background: var(--color-bg-frame); }
.nav-group { margin-bottom: 16px; padding: 0 20px; }
.nav-group-label { font-size: var(--fz-sm2); font-weight: 400; letter-spacing: 0.2px; text-transform: uppercase; color: var(--color-ink-tertiary); margin-bottom: 4px; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: var(--fz-md2); color: var(--color-ink-secondary); border-radius: 0; position: relative; line-height: 1.2; }
.nav-item:hover { background: var(--color-bg-soft); color: var(--color-ink-primary); }
.nav-item.active { color: var(--color-ink-primary); font-weight: 500; background: var(--color-bg-soft); }
.nav-item.active::before { content: ''; position: absolute; left: -22px; top: 7px; bottom: 7px; width: 2px; background: var(--color-ink-primary); }
.nav-icon { flex-shrink: 0; opacity: 0.65; width: 16px; height: 16px; }
.nav-item.active .nav-icon { opacity: 1; }
/* Topbar */
.main { display: flex; flex-direction: column; min-width: 0; position: relative; overflow-y: auto; }
.period-selector { display: inline-flex; border: var(--chrome-w) solid var(--line); border-radius: 0; background: var(--color-bg-tile); overflow: hidden; }
.period-selector button:not(:first-child) { border-left: var(--chrome-w) solid var(--line); }
.period-selector button { padding: 5px 10px; background: transparent; border: none; font-family: var(--font-sans); font-size: var(--fz-md1); color: var(--color-ink-tertiary); }
.period-selector button.active { background: var(--color-ink-primary); color: var(--color-bg-frame); }
.period-selector button:hover:not(.active) { color: var(--color-ink-secondary); }
.period-selector.view-period { display: inline-flex; margin: 2px 0 18px; }
/* Topbar observe/block switch — active side tinted so the mode shows on any page. */

.btn { padding: 5px 10px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: 0; font-size: var(--fz-sm2); color: var(--color-ink-secondary); }
.btn:hover { color: var(--color-ink-primary); border-color: var(--line-strong); }
.btn.primary { background: var(--color-ink-primary); color: var(--color-bg-frame); border-color: var(--color-ink-primary); font-weight: 500; }
.btn.primary:hover { background: var(--color-ink-secondary); }
.btn.success { background: var(--color-ink-success); color: var(--color-bg-frame); border-color: var(--color-ink-success); }
.btn.danger { background: transparent; color: var(--color-ink-danger); border-color: var(--color-ink-danger); }
.btn[disabled] { opacity: 0.5; }

/* View root */
.view-root { padding: 20px 60px 20px 40px; }
.view { display: none; animation: viewFade calc(var(--motion) * 0.25s) ease-out; }
.view.active { display: block; }
/* view-body: the universal main-content region (C.pageBody / C.page) — everything
   below the widget row, or below the mega title + selector row when there's none.
   One hook to target every page's content. */
.view-body { display: block; }
/* Sticky asides (C.splitLayout left slot) — one place for the scroll-pin offset
   shared by every master-detail left panel and the detail sticky. */
.incidents-feed,[data-datatable-id="risk-categories"],.wb-policy-list { position: sticky; top: 20px; }
/* banner: inline alert / note (C.banner), keyed on kind. */
.banner { padding: 8px 12px; border-radius: var(--radius-md); font-size: var(--fz-md1); border-left: 3px solid transparent; }
.banner-error { background: color-mix(in srgb, var(--color-ink-danger) 10%, transparent); border-left-color: var(--color-ink-danger); color: var(--color-ink-danger); }
.banner-warn { background: color-mix(in srgb, var(--color-ink-warning) 10%, transparent); border-left-color: var(--color-ink-warning); color: var(--color-ink-warning); }
.banner-success { background: color-mix(in srgb, var(--color-ink-success) 10%, transparent); border-left-color: var(--color-ink-success); color: var(--color-ink-success); }
.banner-info { background: color-mix(in srgb, var(--color-ink-info) 10%, transparent); border-left-color: var(--color-ink-info); color: var(--color-ink-secondary); }
/* matrix: labelled grid of cells (C.matrix — coverage matrix / heatmap). */
.matrix { display: grid; gap: 1px; background: var(--line); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.matrix-cell { background: var(--color-bg-tile); padding: 8px 10px; font-size: var(--fz-sm2); }
.matrix-corner, .matrix-colhead, .matrix-rowhead { background: var(--color-bg-frame); color: var(--color-ink-tertiary); font-weight: 500; }
@keyframes viewFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.view-eyebrow { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 4px; }
.view-title { font-family: var(--font-serif); font-size: var(--fz-xl2); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.view-sub { color: var(--color-ink-tertiary); font-size: var(--fz-lg1); margin-bottom: 24px; display: flex; gap: 14px; align-items: center; }
.view-sub .dot { display: inline-block; width: 4px; height: 4px; border-radius: 0; background: var(--color-ink-tertiary); }
/* mega-title: the single page-header component — eyebrow + title + subtitle as
   one block. The selector-row holds the page's selectors (period selector +
   siblings); it sits to the right and bottom-aligns with the title block. */
.mega-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.mega-title-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-title-text .view-eyebrow, .mega-title-text .view-title, .mega-title-text .view-sub { margin-bottom: 0; }
.selector-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; }
.selector-row .period-selector { margin: 0; }
/* Appearance panel (System Settings): Color (mode) and Theme (picker) rows. */
/* The period selector always sits at the very right of the selector row, after
   any sibling toggles (e.g. the incidents Grouped/Flat + Feed/Table controls). */
.selector-row .view-period { order: 100; }
.section-heading { font-family: var(--font-serif); font-size: var(--fz-lg1); font-weight: 500; margin: 22px 0 12px; }

.loading { color: var(--color-ink-tertiary); font-size: var(--fz-md1); padding: 28px 0; }
.empty { color: var(--color-ink-tertiary); font-family: var(--font-serif); font-size: var(--fz-md1); padding: 36px; text-align: center; }

/* ──────── Tiles ──────── */
.tile { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px; display: flex; flex-direction: column; gap: 2px; min-height: 110px; min-width: 0; overflow: hidden; position: relative; }
/* Drill-down tiles (open Threat Hunting). Hover/focus affordance only — no cursor. */
.tile-clickable:hover { border-color: var(--color-ink-primary); background: var(--color-bg-tile); }
.tile-clickable:focus-visible { outline: 2px solid var(--color-ink-primary); outline-offset: 2px; }

.tile-danger { border: var(--chrome-w) solid color-mix(in srgb, var(--color-ink-danger) 40%, var(--line)); background: color-mix(in srgb, var(--color-bg-danger-soft) 50%, var(--color-bg-frame)); }

.tile-label { font-size: var(--fz-md1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.tile-value { font-size: var(--fz-xl1); font-weight: 500; color: var(--color-ink-primary); white-space: nowrap; }
.tile-value.lg { font-size: var(--fz-xl2); }
.tile-meta { font-size: var(--fz-md1); color: var(--color-ink-tertiary); margin-top: auto; display: flex; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
/* Universal key-metric row: one grid container for every page's widget cards
   (the card is C.tile / .tile). Column count via a cols-N modifier. */
.widget-row { display: grid; gap: 20px; margin-bottom: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.widget-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.widget-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.widget-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* skel-bar: the shimmer placeholder for a tile value in the loading skeleton
   (C.tileSkel) — sits in .tile-value while the real number is being fetched. */
/* margin-top opens the gap below the tile label; the tile's flex gap (2px) adds to it. */
.skel-bar { display: inline-block; margin-top: 10px; height: 30px; width: 60px; background: var(--line); animation: skel-pulse 1s ease-in-out infinite; }
@keyframes skel-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .skel-bar { animation: none; } }
/* ──────── Panels (3-col) ──────── */

.panel { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
/* A head carrying a control (C.panel `aside`) centers it against the title —
   baseline alignment is for text-to-text heads only. */
.panel-head-aside { align-items: center; }
.panel-title { font-size: var(--fz-md1); color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; }
.panel-link { font-size: var(--fz-sm2); color: var(--color-ink-info); }

.row:last-child { border-bottom: none; }
.row:hover { background: var(--color-bg-tile); }
.row-meta { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
.op-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-bottom: var(--chrome-w) solid var(--line); align-items: center; }
.op-row:last-child { border-bottom: none; }
.op-label { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); letter-spacing: 0.04em; }
.op-value { font-size: var(--fz-md1); color: var(--color-ink-primary); font-weight: 500; }

/* ──────── Tags / badges ──────── */
.tag { padding: 2px 8px; font-size: var(--fz-sm1); letter-spacing: 0.06em; text-transform: uppercase; }
.tag-deny { background: var(--color-bg-danger-soft); color: var(--color-ink-danger); }
.tag-confirm { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); }
.tag-allow { background: var(--color-bg-success-soft); color: var(--color-ink-success); }
.tag-log { background: var(--color-bg-info-soft); color: var(--color-ink-info); }
.badge { gap: 4px; padding: 2px 7px; font-size: var(--fz-sm2); letter-spacing: 0.04em; }
.badge.deny { color: var(--color-ink-danger); background: var(--color-bg-danger-soft); }
.badge.confirm { color: var(--color-ink-warning); background: var(--color-bg-warning-soft); }
.badge.log { color: var(--color-ink-info); background: var(--color-bg-info-soft); }
.badge.allow { color: var(--color-ink-success); background: var(--color-bg-success-soft); }
.badge.outlined { background: transparent; border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); }
/* Node-key states, sized like the Status badges. Active revoke is a black chip
   (matches the "All"/active-chip style); once revoked it drops to a lighter
   passive chip. Status goes active (green) → inactive (gray). */
.nk-revoke { border: 0; font-family: inherit; line-height: 1.5; color: var(--color-bg-frame); background: var(--color-ink-primary); }
.nk-revoke:hover { background: var(--color-ink-secondary); }
/* Delete shows only on a revoked row — a soft danger chip, since it hard-removes
   the row (destructive, distinct from the black active-revoke chip). */
.nk-delete { border: 0; font-family: inherit; line-height: 1.5; color: var(--color-ink-danger); background: var(--color-bg-danger-soft); }
.nk-delete:hover { color: var(--color-bg-frame); background: var(--color-ink-danger); }

.badge.nk-inactive { background: color-mix(in srgb, var(--color-ink-tertiary) 14%, transparent); color: var(--color-ink-tertiary); }
.badge.kb1 { color: var(--color-ink-danger); background: var(--color-bg-danger-soft); }
.badge.kb2 { color: var(--color-ink-warning); background: var(--color-bg-warning-soft); }
.badge.kb3 { color: var(--color-ink-info); background: var(--color-bg-info-soft); }

/* ──────── Chips ──────── */
/* Connected chip row — a filter set or tab strip reads as ONE segmented control
   (shared outer hairline, hairline dividers, inverted active) exactly like
   .period-selector, instead of a scatter of separately-bordered pills. Applies to
   the table chip strip and .chip-row (page tab bars). A standalone
   .chip outside a row keeps its own border. */
/* The group hugs its chips. `inline-flex` alone is not enough: inside the sticky
   feeds (.incidents-feed, .wb-policy-list) the strip is a COLUMN flex item, so the
   default align-items:stretch pulled it to the full feed width — the trailing empty
   space then read as an over-long last chip, since nothing divides it. */
.chip-row, .datatable-chips { display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; flex-wrap: wrap; gap: 0; border: var(--chrome-w) solid var(--line); background: var(--color-bg-tile); align-items: stretch; }
.chip-row > .chip, .datatable-chips > .chip { border: 0; border-radius: 0; background: transparent; }
.chip-row > .chip + .chip, .datatable-chips > .chip + .chip { border-left: var(--chrome-w) solid var(--line); }
.chip-row > .chip.active, .datatable-chips > .chip.active { background: var(--color-ink-primary); color: var(--color-bg-frame); }

/* The page-level tab bar (C.tabRow). Owns its own spacing so a page never repeats
   a margin utility next to it, and sits a step larger than a filter chip because it
   navigates the page rather than narrowing a table. */
.tab-row { margin: 14px 0; }
.tab-row > .chip { padding: 7px 14px; font-size: var(--fz-md1); }
.tab-row-flush { margin: 0; }
/* The slot a tab paints into. Each tab leads with a different element — a panel, a
   grid, a section heading, a provenance chain — and each carries its own top margin,
   so without this the gap under the tab bar changes as you switch tabs. The tab row
   owns that spacing; the tab's first element contributes none. Interior margins are
   untouched, so a tab holding several sections keeps its internal rhythm. */
.tab-slot > :first-child { margin-top: 0; }

.chip { gap: 6px; padding: 5px 10px; font-size: var(--fz-sm2); }
.chip:hover { border-color: var(--line-strong); color: var(--color-ink-primary); }
.chip.active { background: var(--color-ink-primary); color: var(--color-bg-frame); border-color: var(--color-ink-primary); }
.chip-count { font-size: var(--fz-sm2); opacity: 0.8; }

.datatable-chips.filter-row { border: 0; background: transparent; gap: 12px 18px; align-items: flex-start; flex-wrap: wrap; }
.filter-row-host { display: contents; }
.filter-group { display: flex; align-items: center; gap: 0; flex: 0 0 100%; min-width: 0; }
.filter-label { display: inline-flex; align-items: center; margin-right: 8px; font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-tertiary); }
/* The Filters toggle lives in the table's panel head, on the title's baseline. */
.datatable-head-aside { display: inline-flex; align-items: center; gap: 12px; }
/* Collapsed, the strip renders nothing — so it must not keep reserving its margin. */
.datatable-chips.fr-collapsed { margin-bottom: 0; }
.chip.filter-toggle { position: relative; padding-right: 22px; background: var(--color-ink-primary); color: var(--color-bg-frame); border: var(--chrome-w) solid var(--color-ink-primary); }
.filter-toggle::after { content: ""; position: absolute; right: 9px; top: 50%; margin-top: -2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; }
.filter-toggle.open::after { border-top: 0; border-bottom: 4px solid currentColor; }
.filter-dd-trigger { position: relative; padding-right: 22px; border: var(--chrome-w) solid var(--line); background: var(--color-bg-tile); }
.filter-dd-trigger:hover { border-color: var(--line-strong); }
.filter-dd-trigger.active { background: var(--color-ink-primary); color: var(--color-bg-frame); border-color: var(--color-ink-primary); }
.filter-dd-trigger::after { content: ""; position: absolute; right: 9px; top: 50%; margin-top: -2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; }
.filter-dd-trigger.open::after { border-top: 0; border-bottom: 4px solid currentColor; }
.filter-group-strip { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.filter-group-strip > .chip-row { flex: 0 1 auto; min-width: 0; }
.filter-strip-search { flex: 0 0 100px; width: 100px; box-sizing: border-box; border: var(--chrome-w) solid var(--line); background: var(--color-bg-tile); color: var(--color-ink-primary); padding: 5px 10px; font-size: var(--fz-sm2); outline: none; }
.filter-strip-search:focus { border-color: var(--color-ink-secondary); }
.filter-chip[hidden] { display: none; }
/* panel-toggle: the standard in-panel display-mode switch. Same chip pills as the
   filter row, but a sentence-case caption (not the uppercase filter label) and a
   segmented single-select, so it reads as a view control rather than a filter. */
.panel-toggle { display: inline-flex; align-items: center; gap: 8px; }
.panel-toggle-label { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
/* The toggle sits on its own row under the panel head, inset to the panel gutter. */
.panel-toggle-row { padding: 0 16px 12px; }

/* ──────── Tables ──────── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-md1); }
th { font-size: var(--fz-md1); letter-spacing: 0.06em; color: var(--color-ink-tertiary); text-transform: uppercase; font-weight: 500; white-space: nowrap; }
/* No monospace anywhere — IDs, hashes, values, DSL/policy editors all render in the sans
   body font (house rule). */
code, pre { font-family: var(--font-sans); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
tr:hover td { background: var(--color-bg-soft); }

/* ──────── kv ──────── */
/* Reference key-value component (C.kv): a bordered grid with hairline row
   separators; content-sized key column, wrapping sans values (no monospace). */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; font-size: var(--fz-sm2); align-items: stretch; border: var(--chrome-w) solid var(--line); }
.kv .k { color: var(--color-ink-tertiary); font-size: var(--fz-sm2); letter-spacing: 0.04em; padding: 5px 10px; background: var(--color-bg-tile); border-bottom: var(--chrome-w) solid var(--line); border-right: var(--chrome-w) solid var(--line); }
.kv .v { color: var(--color-ink-primary); padding: 5px 10px; border-bottom: var(--chrome-w) solid var(--line); overflow-wrap: anywhere; }
.kv > *:nth-last-child(-n+2) { border-bottom: 0; }

/* ──────── Subgraph ──────── */
.subgraph-canvas { background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); padding: 16px; min-height: 380px; position: relative; }
/* The canvas height follows the viewBox, which grows with the nodes drawn. Pinning a
   height here instead scales the whole drawing down to fit — an incident with a dozen
   legs would render as an unreadable thumbnail rather than a taller graph. */
.subgraph-svg { width: 100%; height: auto; display: block; }
.sg-node rect { fill: var(--color-bg-frame); stroke: var(--line-strong); stroke-width: 0.7; }
.sg-node.identity rect { fill: var(--color-bg-info-soft); stroke: var(--color-ink-info); stroke-opacity: 0.5; }
.sg-node.session rect { fill: var(--color-ink-primary); }
.sg-node.session text.lbl, .sg-node.session text.eyebrow, .sg-node.session text.detail { fill: var(--color-bg-frame); }
.sg-node.trigger rect { fill: var(--color-bg-info-soft); stroke: var(--color-ink-info); stroke-opacity: 0.5; }
.sg-node.action.allow rect { fill: var(--color-bg-success-soft); stroke: var(--color-ink-success); stroke-opacity: 0.6; }
.sg-node.action.confirm rect { fill: var(--color-bg-warning-soft); stroke: var(--color-ink-warning); stroke-opacity: 0.6; }
.sg-node.action.log rect { fill: var(--color-bg-info-soft); stroke: var(--color-ink-info); stroke-opacity: 0.6; }
.sg-node.action.deny rect { fill: var(--color-bg-danger-soft); stroke: var(--color-ink-danger); stroke-opacity: 0.7; stroke-width: 1.5; }
.sg-node text.eyebrow { font-size: var(--fz-sm2); fill: var(--color-ink-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.sg-node text.lbl { font-family: var(--font-sans); font-size: var(--fz-sm2); font-weight: 500; fill: var(--color-ink-primary); }
.sg-node text.detail { font-size: var(--fz-sm2); fill: var(--color-ink-tertiary); }
.sg-node text.step { font-size: var(--fz-sm2); fill: var(--color-ink-tertiary); letter-spacing: 0.04em; }
.sg-edge { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.sg-edge.danger { stroke: var(--color-ink-danger); stroke-width: 1.5; }
.sg-edge.dashed { stroke-dasharray: 3 2; }

/* ──────── Trust state bar ──────── */
.trust-tier-label { font-size: var(--fz-sm2); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); margin-bottom: 6px; }
.trust-state-bar { display: flex; height: 28px; border-radius: 0; overflow: hidden; margin-bottom: 14px; border: var(--chrome-w) solid var(--line); }
.trust-segment { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--fz-sm2); color: var(--on-solid); letter-spacing: 0.06em; text-transform: uppercase; position: relative; }
.trust-segment + .trust-segment::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 0.5px; background: rgba(255,255,255,0.3); }
.trust-emp { background: var(--color-ink-info); }
.trust-cust { background: color-mix(in srgb, var(--color-ink-info) 70%, var(--color-ink-warning)); }
.trust-anon { background: var(--color-ink-warning); }
.trust-untrusted { background: var(--color-ink-danger); }

/* ──────── Structural reason / callouts ──────── */
.structural-reason { padding: 14px 16px; border-radius: var(--radius-md); border-left: 3px solid var(--color-ink-danger); background: var(--color-bg-danger-soft); margin: 14px 0; }
.structural-reason.confirm { border-color: var(--color-ink-warning); background: var(--color-bg-warning-soft); }
.structural-reason.log { border-color: var(--color-ink-info); background: var(--color-bg-info-soft); }
.structural-reason.allow { border-color: var(--color-ink-success); background: var(--color-bg-success-soft); }
.structural-reason.neutral { border-color: var(--line-strong); background: var(--color-bg-soft); }
.structural-reason .label { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 6px; }
.structural-reason .text { font-family: var(--font-serif); font-size: var(--fz-md1); font-style: italic; color: var(--color-ink-primary); line-height: 1.55; }
.structural-reason em { font-style: normal; font-size: var(--fz-sm2); padding: 1px 6px; background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: 0; }

/* ──────── Incidents layout ──────── */
/* split-layout: the shared master-detail grid (C.splitLayout). The per-view
   classes are kept only for their own child overrides. */
.split-layout,.incidents-layout,.hunt-layout,.wb-layout { display: grid; grid-template-columns: 40vh 1fr; gap: 14px; align-items: start; }
/* Incidents: the feed rows are short (a PIN chip + a line of policy text), so a
   height-based 40vh column wastes width on a wide screen and starves the detail —
   where the kill chain and per-badge evidence need room. Give the feed a bounded
   width-based column and hand the rest to the detail. */
.incidents-layout { grid-template-columns: clamp(300px, 22vw, 400px) minmax(0, 1fr); }
/* Equal-width widget grid — counterpart to split-layout. .cols-N is generic. */
.grid-layout { display: grid; gap: 14px; align-items: start; margin-bottom: 22px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* card-grid: default responsive card catalog grid (C.cardGrid). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
/* card-grid-fit: like card-grid but auto-fit collapses empty tracks, so a fixed
   small set of panels (e.g. the 3 landscape discovery lists) stretches to fill the
   row instead of leaving a phantom trailing column on a wide viewport. */
.card-grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
/* Grid items default to min-width:auto, so a wide subgraph/chain canvas in the
   detail column forces the column — and the whole page — past the viewport. Let
   the columns shrink and contain overflow inside the detail pane instead. */
.incidents-layout > * { min-width: 0; }
.incidents-layout > #incident-detail { overflow-x: auto; }
/* The feed is a fixed shell (head + chips + pager) with ONLY the row list
   scrolling between the chips and the pager. The component fills the viewport
   (sticky top 70px, bottom gap = the 32px global content padding) so the pager
   sticks to the bottom of the visible area regardless of row count. */
.incidents-feed { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); height: 75vh; display: flex; flex-direction: column; overflow: hidden; }
.incidents-feed > .datatable-head, .incidents-feed > .datatable-chips, .incidents-feed > .datatable-note, .incidents-feed > .datatable-pager, .incidents-feed > .panel-toggle-row { flex: 0 0 auto; }
.incidents-feed > #feed-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 16px 16px; border: var(--chrome-w) solid var(--line); }

.inc-feed-row { padding: 12px 16px; border-bottom: var(--chrome-w) solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; }
.inc-feed-row:hover { background: var(--color-bg-soft); }
.inc-feed-row.active { background: var(--color-bg-soft); }
.inc-feed-row.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--color-ink-primary); }
.inc-feed-summary { font-size: var(--fz-md1); color: var(--color-ink-secondary); }
.inc-feed-summary strong { color: var(--color-ink-primary); }
.inc-feed-meta { font-size: var(--fz-sm1); color: var(--color-ink-tertiary); }
.incident-canvas, .session-canvas { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }
/* detail-profile: the framed header block shared by the incident and session
   detail views — warn strip, verdict/actor head, ledger topbar, trust bar /
   incidents strip, and structural reason grouped as one panel. */
.detail-profile { display: flex; flex-direction: column; gap: 14px; background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.incident-canvas-head { display: flex; justify-content: space-between; align-items: flex-start; }
/* Incident metadata block (PIN · status · assignee · notes) — themed panel,
   aligned with .panel / .feed. Replaces the prior hardcoded dark inline styles. */
.incident-meta { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.incident-meta-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.incident-meta-controls { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.incident-meta-pin { font-size: var(--fz-md1); background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: 0; padding: 3px 8px; color: var(--color-ink-primary); }
.incident-meta details { margin-top: 10px; }
.incident-meta-note { padding: 6px 0; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-sm2); }
.incident-meta-addnote { display: flex; gap: 6px; margin-top: 8px; }
.incident-title { font-family: var(--font-serif); font-size: var(--fz-lg2); font-weight: 500; }
.incident-actor { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); margin-top: 2px; }
.canvas-topbar { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }

/* ──────── Agent Landscape canvases ──────── */
/* ──────── Agent Landscape canvases ────────
   Quantity is encoded by SIZE, WIDTH or a single-hue step — never by hue, which
   would imply a category or a risk grade this page does not have. */

/* Height comes from each renderer's viewBox (they size to their own content), so the
   element must not carry a fixed one. */
.lsmap-svg { display: block; width: 100%; height: auto; }
/* A pooled group stands for many ids and is not selectable, so it must not read as
   a control: no hover affordance, and its frame recedes. */
/* The reference block navigates to the Operators tab. Underlining its label is what
   says "link" — the pointer comes from the anchor element, never from a cursor rule. */
.lst-link { text-decoration: none; }
.lst-link .lst-group-lbl { text-decoration: underline; }

/* ── headline stat strip, shared by the partition views ── */

/* ── treemap: harness → model, area = sessions ── */
.lst-cell { fill: var(--color-bg-soft); stroke: var(--color-bg-frame); stroke-width: 1; }
.lst-frame { fill: none; stroke: var(--color-ink-secondary); stroke-width: var(--chrome-w); }
.lst-group-lbl { font-size: var(--fz-sm2); font-weight: 600; fill: var(--color-ink-primary); }
/* The GROUP header is chrome — it names the block and sizes with the other captions. */
.lst-group-sub { font-size: var(--fz-sm1); fill: var(--color-ink-tertiary); }
/* A CELL carries data — an action-kind name and its count — so it sits on the medium
   step the type scale reserves for database-rendered values, not the label smalls. Name
   and count share that step and are separated by ink alone. Changing the size means
   changing the cell metrics in app.js with it: the wrap and fit math is measured, not
   guessed, and a size the math does not know about overflows into the neighbouring cell
   (SVG text does not clip). */
.lst-lbl { font-size: var(--fz-md1); fill: var(--color-ink-secondary); }
.lst-sub { font-size: var(--fz-md1); fill: var(--color-ink-tertiary); }

/* ── row head shared by the partition views ── */
/* The newest version OBSERVED is the reference, not a claim about the newest
   RELEASED — so it is marked, not graded. */
.lsv-n { color: var(--color-ink-secondary); }

/* ── agent tiers: four node columns with weighted links ──
   Nodes are BARS with the label inside, not circles with the label beside them: at
   four columns a side-label needs the same gutter the next column's links pass
   through, so the two collide. */

/* ── MECE partition views: one bar primitive, because "a partition of a whole" is
   literally the same picture every time — a reader learns it once. ── */
.lsp-bar { display: flex; height: 18px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); background: var(--color-bg-tile); overflow: hidden; margin-top: 6px; }
.lsp-bar.is-empty { background: var(--color-bg-soft); }
.lsp-seg { min-width: 2px; border-right: var(--chrome-w) solid var(--color-bg-frame); }
.lsp-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.lsp-key { font-size: var(--fz-sm1); color: var(--color-ink-tertiary); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.lsp-key::before { content: ""; width: 10px; height: 10px; border: var(--chrome-w) solid var(--line); }
/* A class that is in the partition but is not observed activity. Set apart by a
   dashed edge and a recessed ground rather than by color, so it reads as a
   different KIND of row instead of a more-or-less severe one. */



/* ── adoption: one block per harness, facts then mix ── */
.lse-rows { display: flex; flex-direction: column; gap: 8px; }
.lse-row { padding: 10px 12px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); background: var(--color-bg-frame); }
.lse-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; min-width: 0; }
.lse-name { font-size: var(--fz-md1); font-weight: 600; color: var(--color-ink-primary); overflow-wrap: anywhere; }
.lse-facts { font-size: var(--fz-sm2); color: var(--color-ink-secondary); overflow-wrap: anywhere; }
.lse-noact { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); padding: 4px 0; }

/* Action-kind ink, indexed by RANK: darkest = the busiest kind, lightest = the
   smallest, so the shading carries the same ordering the segments do. Never a hue per
   kind, which would imply a category or a risk grade this page does not have. The
   inline legend carries the name and the count; the color only ranks.

   ONE token stepped by lightness, not a set of different tokens. The steps must stay
   separable when a theme removes hue (grayscale carries the `structural` trait for
   exactly this reason) — a ramp built from info + warning + two neutrals reads fine in
   a hue-bearing palette and collapses in grayscale, where two of its tints resolve one
   value apart. Stepping a single token keeps the separation in LUMINANCE, which every
   theme preserves. */
.lsp-seg.lsk0, .lsp-key.lsk0::before { background: color-mix(in srgb, var(--color-ink-info) 100%, transparent); }
.lsp-seg.lsk1, .lsp-key.lsk1::before { background: color-mix(in srgb, var(--color-ink-info) 84%, transparent); }
.lsp-seg.lsk2, .lsp-key.lsk2::before { background: color-mix(in srgb, var(--color-ink-info) 68%, transparent); }
.lsp-seg.lsk3, .lsp-key.lsk3::before { background: color-mix(in srgb, var(--color-ink-info) 52%, transparent); }
.lsp-seg.lsk4, .lsp-key.lsk4::before { background: color-mix(in srgb, var(--color-ink-info) 37%, transparent); }
.lsp-seg.lsk5, .lsp-key.lsk5::before { background: color-mix(in srgb, var(--color-ink-info) 23%, transparent); }

/* ──────── Coverage ──────── */
.coverage-grid { display: grid; grid-template-columns: 140px repeat(10, 1fr); gap: 0; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-frame); }
.cov-cell { padding: 12px 8px; text-align: center; font-size: var(--fz-sm2); color: var(--color-ink-secondary); border-right: var(--chrome-w) solid var(--line); border-bottom: var(--chrome-w) solid var(--line); display: flex; align-items: center; justify-content: center; min-height: 48px; }
.cov-cell:nth-child(11n) { border-right: none; }
.cov-cell.head { background: var(--color-bg-tile); font-size: var(--fz-sm2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.cov-cell.row-label { font-size: var(--fz-md1); background: var(--color-bg-tile); font-weight: 500; color: var(--color-ink-primary); justify-content: flex-start; padding-left: 14px; }
.cov-full { background: var(--color-bg-success-soft); color: var(--color-ink-success); font-size: var(--fz-md2); }
.cov-partial { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); font-size: var(--fz-md2); }
.cov-not-deployed { background: repeating-linear-gradient(45deg, var(--color-bg-soft), var(--color-bg-soft) 4px, var(--color-bg-tile) 4px, var(--color-bg-tile) 8px); color: var(--color-ink-tertiary); }
.cov-na { color: var(--color-ink-tertiary); font-size: var(--fz-sm2); }

/* ──────── Editor card ────────
   Shared by every source editor: Threat Hunting's query box, the Risk Policies
   workbench, and the Threat Modeling compiler. Named for the role, not for one
   page, because all three render the same card + head + action group. */

.editor-card { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* The title absorbs a long rule name (wraps); the action group is fixed-size, so
   button geometry never depends on the caption length. */
.editor-head .title { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.editor-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.editor-actions > .btn { white-space: nowrap; }
.editor-empty { padding: 60px 40px; text-align: center; color: var(--color-ink-tertiary); font-family: var(--font-serif); font-size: var(--fz-md1); }

/* ──────── Hunt ──────── */

.hunt-code { width: 100%; height: 72px; min-height: 72px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); padding: 12px; font-family: var(--font-sans); font-size: var(--fz-md1); line-height: 1.65; color: var(--color-ink-primary); white-space: pre-wrap; resize: vertical; }
.hunt-code:focus { outline: none; border-color: var(--color-ink-secondary); }
.hunt-hl-wrap { position: relative; height: 72px; }
.hunt-hl-wrap .hunt-hl-backdrop,
.hunt-hl-wrap .hunt-code { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 12px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fz-md1); line-height: 1.65; white-space: pre-wrap; overflow-wrap: break-word; overflow: auto; }
.hunt-hl-backdrop { background: var(--color-bg-tile); color: var(--color-ink-primary); pointer-events: none; z-index: 0; }
.hunt-hl-backdrop code { font: inherit; white-space: inherit; }
.hunt-hl-wrap .hunt-code { background: transparent; color: transparent; caret-color: var(--color-ink-primary); -webkit-text-fill-color: transparent; resize: none; min-height: 0; z-index: 1; }
.hl-kw { color: var(--color-ink-info); font-weight: 600; }
.hl-var { color: var(--color-ink-warning); }
.hl-str { color: var(--color-ink-success); }
.hl-num { color: var(--color-ink-danger); font-weight: 600; }
.hl-comment { color: var(--color-ink-tertiary); font-style: italic; }
/* ──────── Attacks ──────── */
/* Risk Library category sidebar — saved-hunts datalist style, sticky beside the cards. */
[data-datatable-id="risk-categories"] { align-self: start; }
[data-datatable-id="risk-categories"] .datalist-row { position: relative; }
[data-datatable-id="risk-categories"] .datalist-row[data-active="1"] { background: var(--color-bg-tile); }
[data-datatable-id="risk-categories"] .datalist-row[data-active="1"] strong { color: var(--color-ink-primary); }
[data-datatable-id="risk-categories"] .datalist-row[data-active="1"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-ink-primary); }

.attack-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.attack-card { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.attack-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.attack-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.attack-card-title { font-family: var(--font-serif); font-size: var(--fz-md2); font-weight: 500; }.attack-card-source { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); margin-bottom: 8px; }
.attack-card-desc { font-size: var(--fz-md1); color: var(--color-ink-secondary); line-height: 1.55; margin-bottom: 12px; }
.attack-mini-graph { height: 60px; margin-bottom: 12px; }
.attack-card-policy { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--color-bg-success-soft); border-radius: 0; font-size: var(--fz-sm2); color: var(--color-ink-success); margin-bottom: 12px; }
/* In the inline chip row the card owns the spacing, so the block margin comes off. */
.attack-card-policy-inline { margin-bottom: 0; }
.attack-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ──────── Cost ──────── */

/* chart-panel: unified framed wrapper for in-page charts/canvases/matrices
   (C.chartPanel). Same frame as .panel, chart-sized padding. */
.chart-panel { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.chart-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }

/* ──────── Heatmap ──────── */

.hm-hot-1 { background: color-mix(in srgb, var(--color-bg-danger-soft) 70%, var(--color-bg-frame)); color: var(--color-ink-danger); }
.hm-hot-2 { background: var(--color-bg-danger-soft); color: var(--color-ink-danger); font-weight: 500; }
.hm-hot-3 { background: color-mix(in srgb, var(--color-ink-danger) 25%, var(--color-bg-danger-soft)); color: var(--color-ink-danger); font-weight: 500; }

/* ──────── TMC ──────── */
/* Model selectors: inverted fill marks the chosen backend, matching the segmented
   controls elsewhere (.period-selector button.active, .chip.active). */
.tmc-txt-btn.active, .tmc-vis-btn.active { background: var(--color-ink-primary); color: var(--color-bg-frame); border-color: var(--color-ink-primary); }
.tmc-txt-btn.active .row-meta, .tmc-txt-btn.active span, .tmc-vis-btn.active .row-meta, .tmc-vis-btn.active span { color: inherit; }
.tmc-txt-btn:hover:not(.active), .tmc-vis-btn:hover:not(.active) { color: var(--color-ink-secondary); border-color: var(--color-ink-secondary); }
.tmc-card { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.tmc-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tmc-card-title { font-size: var(--fz-sm2); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); }.tmc-badge-draft { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); }
.tmc-textarea { width: 100%; min-height: 130px; padding: 12px; font-family: var(--font-serif); font-size: var(--fz-md1); line-height: 1.6; color: var(--color-ink-primary); background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); resize: vertical; }
.tmc-textarea:focus { outline: none; border-color: var(--color-ink-primary); }
.tmc-textarea::placeholder { font-style: italic; color: var(--color-ink-tertiary); }

@keyframes tmc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.tmc-examples { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 14px; }

.tmc-example-text { font-family: var(--font-serif); font-size: var(--fz-md1); color: var(--color-ink-secondary); }
.tmc-example-result { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
/* Full-resolution view of the pasted screenshot, rendered in-page so it works
   under a popup blocker and closes with Escape or a backdrop click. */
.tmc-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--color-bg-scrim); }
.tmc-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tmc-lightbox-close { position: absolute; top: 16px; right: 20px; }
.tmc-output { animation: tmc-reveal calc(var(--motion) * 0.4s) cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes tmc-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tmc-compiled-dsl { background: var(--color-bg-tile); padding: 14px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fz-sm2); line-height: 1.65; white-space: pre-wrap; overflow-wrap: break-word; overflow: auto; border: var(--chrome-w) solid var(--line); }

/* ──────── Dual-form view: Cedar (production) + .pinion (authored) side-by-side ──────── */
.tmc-dual-view, .wb-dual-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px;
}
@media (max-width: 960px) {
  .tmc-dual-view, .wb-dual-view { grid-template-columns: 1fr; }
}
.tmc-dual-pane, .wb-dual-pane {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow pre/textarea inside grid cell to shrink + scroll */
}
.tmc-dual-pane-head, .wb-dual-pane-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: var(--chrome-w) solid var(--line);
  margin-bottom: 8px;
}
.tmc-dual-pane-title, .wb-dual-pane-title {
  
  font-size: var(--fz-md1);
  font-weight: 600;
  color: var(--color-ink-primary);
}
.tmc-dual-pane-sub, .wb-dual-pane-sub {
  font-size: var(--fz-sm2);
  color: var(--color-ink-tertiary);
}
.tmc-dual-pane .tmc-compiled-dsl { margin: 0; max-height: 380px; }
.wb-dual-pane .wb-editor-source { margin-bottom: 0; min-height: 320px; }
.tmc-test-summary { font-size: var(--fz-sm2); padding: 2px 8px; border-radius: 0; }
.tmc-test-summary.pass { background: var(--color-bg-success-soft); color: var(--color-ink-success); }
.tmc-test-summary.fail { background: color-mix(in srgb, var(--color-ink-danger) 12%, transparent); color: var(--color-ink-danger); }
.tmc-test-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-md1); }
.tmc-test-row:last-child { border-bottom: none; }
.tmc-result-caught { color: var(--color-ink-success); font-size: var(--fz-sm2); }
.tmc-result-benign { color: var(--color-ink-info); font-size: var(--fz-sm2); }
.tmc-result-fp { color: var(--color-ink-warning); font-size: var(--fz-sm2); font-weight: 600; }
.tmc-deploy-row { display: flex; gap: 10px; margin-top: 14px; }
.tmc-deploy-success { background: var(--color-bg-success-soft); border-left: 3px solid var(--color-ink-success); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; font-family: var(--font-serif); font-size: var(--fz-md2); line-height: 1.55; }

/* ──────── Workbench ──────── */
.wb-policy-list { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 0; height: 75vh; display: flex; flex-direction: column; overflow: hidden; }
.wb-policy-list > .datatable-head, .wb-policy-list > .datatable-chips { flex: 0 0 auto; }
.wb-policy-list > .wb-policy-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 16px 16px; border: var(--chrome-w) solid var(--line); }
.wb-policy-row { padding: 10px 16px; border-radius: 0; border-bottom: var(--chrome-w) solid var(--line); }
.wb-policy-row:last-child { border-bottom: 0; }
.wb-policy-row:hover { background: var(--color-bg-tile); }
.wb-policy-row.active { background: var(--color-bg-tile); position: relative; }
.wb-policy-row.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--color-ink-primary); }
.wb-policy-name { font-size: var(--fz-md1); color: var(--color-ink-primary); font-weight: 500; }
.wb-policy-status { font-size: var(--fz-sm1); color: var(--color-ink-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
/* Editable policy-metadata strip (correlation window) in the workbench editor */
.wb-meta-strip { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 8px 0 4px; margin-bottom: 6px; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-sm1); color: var(--color-ink-secondary); }
.wb-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.wb-meta-input { width: 66px; font-size: var(--fz-md1); padding: 2px 6px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); background: var(--color-bg-tile); color: var(--color-ink-primary); }
.wb-meta-hint { font-size: var(--fz-sm1); color: var(--color-ink-tertiary); }
/* Correlation-window inline editor: a read-only chip with an "Edit" text-button
   that swaps to an input + "Done". Small, quiet, keyboard-friendly. */
.wb-corr .wb-meta-key { color: var(--color-ink-secondary); }
.wb-corr-view, .wb-corr-edit-wrap { display: inline-flex; align-items: center; gap: 8px; }
.wb-corr-chip { font-weight: 600; color: var(--color-ink-primary); background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); padding: 1px 8px; font-variant-numeric: tabular-nums; }
.wb-corr-edit, .wb-corr-done { font-size: var(--fz-sm1); padding: 2px 8px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--color-ink-secondary); font-family: var(--font-sans); }
.wb-corr-edit:hover, .wb-corr-done:hover { border-color: var(--accent); color: var(--color-ink-primary); }
.wb-corr-done { border-color: var(--accent); color: var(--color-ink-primary); }
.wb-corr-edit-wrap .wb-meta-input { width: 76px; }
.wb-corr-unit { font-size: var(--fz-sm1); color: var(--color-ink-tertiary); }
.wb-corr-sep { color: var(--color-ink-tertiary); font-size: var(--fz-sm1); margin: 0 2px; }
.wb-corr-edit-wrap .wb-meta-input:disabled { opacity: 0.5; }
.wb-backtest-results { margin: 4px 0 10px; padding: 12px 14px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); background: var(--color-bg-tile); }
.wb-bt-head { font-size: var(--fz-sm2); color: var(--color-ink-secondary); margin-bottom: 10px; }
.wb-bt-fired { font-size: var(--fz-md1); color: var(--color-ink-primary); }
.wb-editor { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.wb-editor-source { background: var(--color-bg-tile); padding: 14px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fz-sm2); line-height: 1.65; white-space: pre-wrap; border: var(--chrome-w) solid var(--line); margin-bottom: 14px; resize: vertical; min-height: 240px; width: 100%; color: var(--color-ink-primary); }
/* Editing component matches the policy-list height (720px); dual-view + textareas fill. Scoped to the in-grid editor so the standalone Policy-engine-tester card is unaffected. */
/* The editor grows past its resting height rather than being fixed at it: the
   backtest results are a flex sibling of the code panes, so a fixed height makes
   every pixel they occupy come straight out of the panes. */
.wb-layout > .wb-editor { min-height: 720px; display: flex; flex-direction: column; }
/* #wb-editor-form wraps the dual-view, so it must itself grow as a flex column or the
   editor's height never reaches the panes and the absolute-filled code backdrop
   collapses to a narrow sliver. */
.wb-layout > .wb-editor > #wb-editor-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* The panes keep a floor so nothing rendered above them can squeeze the code out
   of view; the column grows instead. */
.wb-layout > .wb-editor .wb-dual-view { flex: 1 1 auto; min-height: 320px; grid-auto-rows: minmax(0, 1fr); }
.wb-layout > .wb-editor > #wb-editor-form > .wb-backtest-results { flex: 0 0 auto; }
.wb-layout > .wb-editor .wb-dual-pane .wb-hl-wrap { flex: 1 1 auto; min-height: 0; }
.wb-hl-wrap { position: relative; min-height: 240px; }
.wb-hl-wrap .wb-hl-backdrop,
.wb-hl-wrap .wb-editor-source { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 14px; border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fz-sm2); line-height: 1.65; white-space: pre-wrap; overflow-wrap: break-word; overflow: auto; }
.wb-hl-backdrop { background: var(--color-bg-tile); color: var(--color-ink-primary); pointer-events: none; z-index: 0; }
.wb-hl-backdrop code { font: inherit; white-space: inherit; }
.wb-hl-wrap .wb-editor-source { background: transparent; color: transparent; caret-color: var(--color-ink-primary); -webkit-text-fill-color: transparent; resize: none; z-index: 1; }

.wb-verdict-text { font-family: var(--font-serif); font-size: var(--fz-md2); color: var(--color-ink-secondary); }
.wb-verdict-meta { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }

/* ──────── Plugins ──────── */
.plugins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.plugin-card { background: var(--color-bg-frame); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.plugin-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.plugin-name { font-family: var(--font-serif); font-size: var(--fz-md2); font-weight: 500; }
.ups-field-div { border-left: var(--chrome-w) solid var(--line); padding-left: 12px; }

.plugin-foot { padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.det-endpoint              { font-size: var(--fz-sm2); padding: 2px 6px; background: var(--color-bg-tile); border-radius: 0; color: var(--color-ink-secondary); flex-basis: 100%; margin-top: 2px; }
.det-fingerprint           { padding: 8px 0 0; font-size: var(--fz-sm2); color: var(--color-ink-tertiary); border-top: var(--chrome-w) solid var(--line); margin-top: 8px; }
.det-cust-toggle           { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fz-sm2); color: var(--color-ink-secondary); }
.det-cust-toggle input     { accent-color: var(--color-ink-success); }

.agg-cell { padding: 12px; text-align: center; border-right: var(--chrome-w) solid var(--line); border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-sm2); }
.agg-cell.head { background: var(--color-bg-tile); color: var(--color-ink-tertiary); font-size: var(--fz-sm2); letter-spacing: 0.06em; text-transform: uppercase; }
.agg-cell.row-label { font-size: var(--fz-md1); background: var(--color-bg-tile); text-align: left; }

.agg-cell.disagree { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); }

/* ──────── Evidence ──────── */
.evidence-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.framework-selector { display: inline-flex; gap: 1px; border: var(--chrome-w) solid var(--line); border-radius: 0; background: var(--color-bg-tile); }
.framework-selector button { padding: 5px 10px; background: transparent; border: 0; font-size: var(--fz-md1); color: var(--color-ink-tertiary); }
.framework-selector button.active { background: var(--color-ink-primary); color: var(--color-bg-frame); }

.evidence-doc { background: var(--color-bg-frame); border-top: 4px solid var(--color-ink-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 36px 44px; box-shadow: 0 0 0 0.5px var(--line); margin-bottom: 18px; }

.evidence-attestation { background: var(--color-bg-success-soft); border-left: 3px solid var(--color-ink-success); padding: 14px 16px; border-radius: var(--radius-md); margin: 22px 0; }
.evidence-attestation .label { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 6px; }
.evidence-attestation .text { font-family: var(--font-serif); font-size: var(--fz-md2); line-height: 1.55; }
.attestation-hash { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); word-break: break-all; margin-top: 8px; }

.control-status-gap { font-size: var(--fz-sm2); padding: 3px 8px; background: var(--color-bg-warning-soft); color: var(--color-ink-warning); border-radius: 0; text-align: center; }
.evidence-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; padding-top: 18px; border-top: var(--chrome-w) solid var(--line); font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
.evidence-watermark { text-align: center; font-size: var(--fz-sm2); letter-spacing: 0.10em; color: var(--color-ink-tertiary); margin-top: 28px; }

/* ──────── Incident triage inputs ──────── */

.triage-input { width: 100%; padding: 10px 12px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: var(--radius-md); font-size: var(--fz-md1); color: var(--color-ink-primary); margin-bottom: 8px; }
.triage-input:focus { outline: none; border-color: var(--color-ink-secondary); }

/* ── Runtime view ─────────────────────────────────────────────── */

.rt-table { width: 100%; border-collapse: collapse; font-size: var(--fz-md1); }
.rt-table th { text-align: left; padding: 9px 10px; font-size: var(--fz-md1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-tertiary); border-bottom: var(--chrome-w) solid var(--line); }
.rt-table td { padding: 10px; border-bottom: var(--chrome-w) solid var(--line); vertical-align: top; }
.rt-table tr:hover td { background: var(--color-bg-tile); }
/* universal data table (Type 2) — the "Findings" reference shell */
.rt-table th.datatable-sortable { user-select: none; white-space: nowrap; }
.rt-table th.datatable-sortable:hover, .rt-table th.datatable-sortable.active { color: var(--color-ink-secondary); }
.datatable-empty { padding: 28px 14px; text-align: center; color: var(--color-ink-tertiary); }
.datatable-panel { padding: 0; overflow: hidden; }
.datatable-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 10px; }
.datatable-chips { margin: 0 16px 12px; }
.datatable-note { padding: 0 16px 10px; font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
/* datalist — the list-widget body inside the shared datatable-panel shell. */
.datalist .datalist-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: var(--chrome-w) solid var(--line); font-size: var(--fz-md1); }
.datalist .datalist-row:last-child { border-bottom: 0; }
.datalist .datalist-row.datatable-row:hover { background: var(--color-bg-tile); }
.datalist .datalist-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.datalist .datalist-meta { margin-left: auto; color: var(--color-ink-tertiary); font-size: var(--fz-sm1); }
/* Header link (e.g. "ALL") styled like a panel-title: small, uppercase, tracked. */
/* Underlined like every other link in the console — a panel's "ALL →" is a
   navigation, and the only thing that had marked it as one was its arrow. */
.datatable-link { color: var(--color-ink-tertiary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); font-size: var(--fz-md1); letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; }
.datatable-link:hover { color: var(--color-ink-secondary); text-decoration-color: currentColor; }
/* Table region: a bordered box inset from the panel edges, aligned under the
   title + chips (both at 16px). Scrolls horizontally when the table is wide. */
.datatable-wrap { overflow-x: auto; margin: 0 16px 16px; border: var(--chrome-w) solid var(--line); }
/* fixed layout keeps column widths stable when the rows re-sort */
.datatable { table-layout: fixed; width: 100%; }
.datatable td { overflow-wrap: anywhere; }
/* Body cells wrap; header cells never wrap and are never shortened — each
   column's width is floored at its header width (computed in datatableShell). */
.datatable th, .datatable th.datatable-sortable { white-space: nowrap; }
/* Header row reads a shade darker than the body rows. Dark mode needs a
   bigger step (tile sits almost on top of the frame), so drop to the page
   surface there for a clearer header. */
.datatable thead th { background: var(--color-bg-tile); }
/* Uniform cell text across tables — dimmed (.row-meta) / bold / code text
   inside body cells inherits the base cell style so no column reads differently
   from another (font size, weight, color, family). Semantic pills/tags/buttons
   keep their own classes. Findings (Security Issues) + Hosts (Runtime Controls)
   opt out via .datatable-rich — they use multi-line rich cells by design. */
.datatable:not(.datatable-rich) td .row-meta,
.datatable:not(.datatable-rich) td code,
.datatable:not(.datatable-rich) td strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}
[data-theme="original-dark"] .datatable thead th { background: var(--color-bg-page); }
/* Pager mirrors the chip strip: left-aligned at the same 16px inset. */
.datatable-pager { display: flex; gap: 6px; margin: 12px 16px; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.rt-host { font-weight: 500; }.rt-caps { white-space: normal; overflow-wrap: anywhere; }
.cap-dot { display: inline-block; width: 18px; height: 18px; border-radius: 0; line-height: 18px; text-align: center; font-size: var(--fz-sm2); font-weight: 600; margin-right: 3px; }
.cap-dot.on  { background: var(--color-ink-success); color: var(--on-solid); }
.cap-dot.off { background: var(--color-bg-tile); color: var(--color-ink-tertiary); border: var(--chrome-w) solid var(--line); }

/* Agent Request Trace detail — the expanding row under a Traces table row.
   Four labelled rows (Identity / Insights / Raw Data / Preview), each a label +
   a segmented tab strip (.period-selector supplies the control) + its panes.
   The label mirrors .panel-title's tier and the JSON bodies sit on the shared
   console surface, so the pane reads like the rest of the console. Pane
   visibility is a JS concern (inline display), so .trace-panes/.trace-tabpane
   are grouping hooks and carry no rules. */
.trace-detail-inline { padding: 4px 0 12px; }
.row-detail-inline > td { padding: 0; }
.row-detail-body { padding: 14px 16px; border-top: var(--chrome-w) solid var(--line-strong, var(--line)); overflow-x: auto; }
.trace-row { margin-top: 14px; padding-top: 12px; border-top: var(--chrome-w) solid var(--line); }
.trace-row:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.trace-row-label { font-size: var(--fz-sm2); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); margin-bottom: 8px; }
.trace-tabs { margin-bottom: 10px; max-width: 100%; }
.trace-body { background: var(--console-bg); color: var(--console-ink); font-size: var(--fz-sm2); padding: 10px 12px; border-radius: var(--radius-md); max-height: 420px; overflow: auto; margin: 0; }
.trace-link { color: var(--color-ink-info); text-decoration: underline; }

/* ── Workbench test-result rows ────────────────────────────────── */
.wb-test-row { padding: 10px 12px; border-bottom: var(--chrome-w) solid var(--line); }
.wb-test-row:last-child { border-bottom: 0; }
.wb-test-row .wb-test-policy { font-size: var(--fz-sm2); color: var(--color-ink-secondary); margin-left: 8px; }
.wb-test-row .wb-verdict-text { margin-top: 4px; font-size: var(--fz-sm2); line-height: 1.5; color: var(--color-ink-primary); }
.wb-test-row .wb-verdict-meta { margin-top: 3px; font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }

/* ── Runbook PII detector probes ───────────────────────────────── */

.pii-cat-bar { height: 8px; background: var(--color-bg-frame); border-radius: 0; overflow: hidden; }
.pii-cat-bar > div { height: 100%; }
.pii-cat-bar > .cov-full    { background: var(--color-ink-success); }
.pii-cat-bar > .cov-partial { background: var(--color-ink-warning); }
.pii-cat-bar > .cov-empty   { background: var(--color-ink-tertiary); }

/* Policy Violations table — its Detection and Reason cells wrap to several lines,
   so every cell in the row starts at the top. */
.datatable-panel[data-datatable-id="violations"] td { vertical-align: top; }

/* Agent Decisions provenance table — the datatable-panel supplies its own frame;
   these rules only carry the per-row verdict tint + cell wrapping, scoped to it. */
.datatable-panel[data-datatable-id="decisions"] td { vertical-align: top; }
.datatable-panel[data-datatable-id="decisions"] tr.prov-deny td { background: color-mix(in srgb, var(--color-ink-danger) 7%, transparent); }
.datatable-panel[data-datatable-id="decisions"] tr.prov-confirm td { background: color-mix(in srgb, var(--color-ink-warning) 6%, transparent); }
.datatable-panel[data-datatable-id="decisions"] tr.prov-log td { background: color-mix(in srgb, var(--color-ink-info) 6%, transparent); }
.datatable-panel[data-datatable-id="decisions"] tr.prov-deny:hover td, .datatable-panel[data-datatable-id="decisions"] tr.prov-confirm:hover td, .datatable-panel[data-datatable-id="decisions"] tr.prov-log:hover td { background: var(--color-bg-soft); }

/* ──────── MCP broker demo view ──────── */
.mcp-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 8px 0 16px;
  border-radius: var(--radius-md);
  font-size: var(--fz-md1);
  border: var(--chrome-w) solid var(--color-border);
}
.mcp-banner.ready    { background: rgba(47, 122, 74, 0.08); border-color: var(--color-ink-success); }
.mcp-banner.notready { background: rgba(182, 130, 42, 0.10); border-color: var(--color-ink-warning); }
.mcp-banner .dot { width: 8px; height: 8px; border-radius: 0; background: currentColor; }
.mcp-banner code { font-size: var(--fz-sm2); padding: 0 2px; }

/* trace details — kind badges + client sub-panel + header table */
.badge-organic { color: var(--color-ink-success); background: var(--color-bg-success-soft); }
.badge-synthetic { color: var(--color-ink-warning); background: var(--color-bg-warning-soft); }
.badge-unknown { background: transparent; border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); }
.panel-sub { margin: 6px 0 10px; padding: 8px 10px; border: var(--chrome-w) solid var(--line); border-radius: 0; }

/* ── Kill-chain strip (trifecta incident detail) ───────────────────────────── */
.chain-strip { margin-bottom: 14px; }
.vchain-controls { margin-left: auto; display: inline-flex; gap: 10px; text-transform: none; letter-spacing: 0; }
.vchain-ctl { font-size: var(--fz-sm2); color: var(--accent); background: none; border: none; padding: 0; font-family: var(--font-sans); }
.vchain-ctl:hover { text-decoration: underline; }
.chain-strip-cards { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.chain-arrow { align-self: center; color: var(--color-ink-tertiary); font-size: var(--fz-lg1); flex-shrink: 0; padding: 0 2px; }
.chain-card {
  flex: 1; min-width: 140px; border-radius: 0; padding: 10px 12px;
  border: var(--chrome-w) solid var(--line); background: var(--color-bg-soft); user-select: none;
  outline: none;
}
.chain-card.observed { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: rgba(53, 72, 110,0.05); }

.chain-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Vertical Agent Decision Provenance Graph — each leg is a wide half-page card
   stacked top-to-bottom (earliest first), arrow-down between rows; the detail
   opens to the right of the clicked card in the same row. */
/* vchain: the session provenance graph. It IS a data panel — head, filter chips,
   note, canvas — so .panel supplies the frame and only the canvas is styled here. */
.vchain > .vchain-rows { margin-top: 4px; }
/* The note carries the canvas controls on its right. */
.vchain-note { display: flex; align-items: baseline; gap: 12px; }
.vchain-rows { display: flex; flex-direction: column; }
.vchain-row { display: flex; flex-direction: column; }
.vchain-card { width: 100%; box-sizing: border-box; border: var(--chrome-w) solid color-mix(in srgb, var(--accent) 35%, transparent); background: rgba(53, 72, 110,0.05); border-radius: 0; padding: 12px 16px; user-select: none; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.vchain-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vchain-card-headline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vchain-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vchain-card-eyebrow { font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-secondary); }
.vchain-card-title { font-weight: 600; font-size: var(--fz-md2); color: var(--color-ink-primary); }
.vchain-card-date { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); white-space: nowrap; }
.vchain-step { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.vchain-card-signals { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vchain-card-meta { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; }
.vchain-card-summary { font-size: var(--fz-md1); color: var(--color-ink-secondary); word-break: break-word; }
.vchain-card-hint { white-space: nowrap; font-size: var(--fz-md1); color: var(--accent); margin-left: 6px; }
.vchain-card-hint::after { content: 'read more'; }
.vchain-card[aria-expanded="true"] .vchain-card-hint::after { content: 'read less'; }
.vchain-detail { box-sizing: border-box; background: var(--color-bg-tile); border-left: 2px solid var(--accent); padding: 10px 14px; margin: 0 0 0 20px; }
.vchain-arrow { width: 2px; height: 16px; margin: 2px 0 2px 16px; background: rgba(53, 72, 110,0.45); position: relative; }
.vchain-arrow::after { content: ''; position: absolute; left: -3px; bottom: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(53, 72, 110,0.45); }
.vchain-group { display: flex; flex-direction: column; margin-top: 10px; }
.vchain-group-head { display: flex; align-items: baseline; gap: 8px; padding: 3px 0 5px; user-select: none; }
.vchain-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }.vchain-group-title { font-size: var(--fz-md2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-secondary); }
.vchain-group-range { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); }
.vchain-group-members { display: none; flex-direction: column; gap: 12px; margin-left: 16px; padding-left: 16px; border-left: 2px solid rgba(53, 72, 110,0.45); }
.vchain-group-head[aria-expanded="true"] + .vchain-group-members { display: flex; }
.chain-card.observed:hover { border-color: rgba(53, 72, 110,0.65); background: rgba(53, 72, 110,0.10); }
.chain-card[aria-expanded="true"] { border-color: var(--accent); background: rgba(53, 72, 110,0.13); box-shadow: 0 0 0 2px rgba(53, 72, 110,0.25); }
.chain-card-eyebrow { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.chain-card-title { font-size: var(--fz-md1); font-weight: 600; color: var(--color-ink-primary); margin-bottom: 3px; }
.chain-card-detail { font-size: var(--fz-md1); color: #9a86c6; word-break: break-all; line-height: 1.4; }
.chain-card-hint { font-size: var(--fz-sm2); color: var(--color-ink-tertiary); margin-top: 6px; }
.chain-card[aria-expanded="true"] .chain-card-hint { color: var(--accent); }
.chain-ipi-badge { font-size: var(--fz-sm2); margin-left: 4px; vertical-align: middle; }
.chain-detail {
  margin-top: 8px; border-radius: 0;
  border: var(--chrome-w) solid rgba(53, 72, 110,0.3); background: rgba(53, 72, 110,0.05);
  padding: 12px 14px; font-size: var(--fz-sm2); line-height: 1.55;
  animation: fadeIn calc(var(--motion) * 0.1s) ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.chain-detail-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.chain-detail-key { font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-ink-tertiary); flex-shrink: 0; min-width: 96px; }
.chain-detail-val { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: var(--fz-md1); color: var(--color-ink-primary); word-break: break-word; overflow-wrap: anywhere; }
.chain-detail-val pre, .chain-detail-val code { max-width: 100%; overflow-wrap: anywhere; }
.chain-detail-val .tag { font-family: var(--font-sans); }
.chain-detail-val code { font-size: var(--fz-sm2); }
.chain-detail-empty { color: var(--color-ink-tertiary); }
.chain-detail-sub { margin: 0 0 8px 16px; padding-left: 12px; border-left: 2px solid rgba(53, 72, 110,0.25); }
.chain-detail-sub .chain-detail-row { margin-bottom: 4px; }
.chain-detail-sub .chain-detail-key { min-width: 72px; text-transform: none; letter-spacing: 0; }
/* CCI per-badge evidence: stack the label above its proof so the proof gets the
   full column width instead of the ~half a side-by-side row leaves it — the
   proof is a sentence, not a short value. */
.cci-evidence .chain-detail-row { flex-direction: column; align-items: stretch; gap: 1px; margin-bottom: 8px; }
.cci-evidence .chain-detail-key { min-width: 0; color: var(--color-ink-secondary); }
.cci-evidence .chain-detail-val { width: 100%; }
/* The CCI verdict card's evidence control is a real button (in-page expand), so
   strip the native button chrome to match the surrounding link styling. */
button.u-link-info { background: none; border: 0; padding: 0; font: inherit; }
.chain-excerpt {
  font-size: var(--fz-sm2); line-height: 1.5; font-family: var(--font-sans);
  background: rgba(0,0,0,0.04); border-left: 3px solid rgba(53, 72, 110,0.5);
  border-radius: 0; padding: 7px 10px; margin: 4px 0 8px;
  white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto;
}
[data-theme="original-dark"] .chain-excerpt { background: rgba(0,0,0,0.25); }
.chain-ipi-block {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
  background: rgba(122,46,46,0.12); border: var(--chrome-w) solid rgba(53, 72, 110,0.3);
  border-radius: 0; padding: 8px 10px; margin: 6px 0 8px;
}

/* ════════════ Accents ════════════ */
/* Purple active-nav indicator + focus ring. */
.nav-item.active::before { background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════ Dark-mode native controls + form accents ════════ */
:root { color-scheme: light; accent-color: var(--accent); }
[data-theme="original-dark"] { color-scheme: dark; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-track { background: transparent; }

/* ════════════ Utilities ════════════ */
.text-danger { color: var(--color-ink-danger); }
.empty-error { color: var(--color-ink-danger); text-align: left; padding: 8px 10px; }

/* ════════════ Role badge (color by role; purple when unhide is on) ════════════ */
#meta-role { display: none; font-family: var(--font-sans); font-size: var(--fz-sm1); font-weight: 500; padding: 2px 4px; letter-spacing: 0.2px; border-radius: 0; border: var(--chrome-w) solid transparent; }
/* Gateway = tag-deny; Platform = neutral. */
body[data-role="gateway"] #meta-role { background: var(--color-bg-danger-soft); color: var(--color-ink-danger); border-color: color-mix(in srgb, var(--color-ink-danger) 40%, transparent); }
body[data-role="platform"] #meta-role { background: var(--color-bg-info-soft); color: var(--color-ink-info); border-color: color-mix(in srgb, var(--color-ink-info) 40%, transparent); }
body[data-role] #meta-role { display: inline-block; }

/* Wrap long content (UUIDs/reasons/hashes) inside cells & rows — never clip. */
td, th, .kv > *, .row > * { overflow-wrap: anywhere; }

/* Incident detail headline: verdict is the key fact (prominent, decision-colored);
   the policy slug is demoted to a supporting sub-line. */
.incident-verdict { font-family: var(--font-serif); font-size: var(--fz-lg2); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.incident-verdict.deny    { color: var(--color-ink-danger); }
.incident-verdict.confirm { color: var(--color-ink-warning); }
.incident-verdict.log     { color: var(--color-ink-info); }
.incident-verdict.allow   { color: var(--color-ink-success); }
.incident-policy { font-size: var(--fz-lg1); color: var(--color-ink-secondary); }
.incident-cofire { font-size: var(--fz-md2); }
body[data-role="gateway"] #meta-role[data-unhide="on"] { background: var(--color-ink-danger); color: var(--color-bg-frame); border-color: var(--color-ink-danger); }
body[data-role="platform"] #meta-role[data-unhide="on"] { background: var(--color-ink-info); color: var(--color-bg-frame); border-color: var(--color-ink-info); }

.preview-wrap { display: flex; gap: 20px; align-items: flex-start; font-size: var(--fz-md1); padding: 12px 16px; }
.preview-nav { flex: 0 0 25%; max-width: 25%; height: 50vh; display: flex; flex-direction: column; border-right: var(--chrome-w) solid var(--line); padding-right: 12px; }
.preview-nav-title { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-tertiary); padding-bottom: 10px; margin-bottom: 10px; border-bottom: var(--chrome-w) solid var(--line); }
.preview-dir { background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); font-size: var(--fz-sm2); padding: 5px 10px; }
.preview-dir:hover { border-color: var(--line-strong, var(--line)); color: var(--color-ink-primary); }
.preview-nav-list { flex: 1 1 auto; overflow: auto; min-height: 0; }
.preview-nav-item { display: block; padding: 6px 6px; font-size: var(--fz-sm2); color: var(--color-ink-secondary); border-left: 2px solid transparent; border-bottom: var(--chrome-w) solid var(--line); }
.preview-nav-item:hover { background: var(--color-bg-tile); color: var(--color-ink-primary); }
.preview-nav-item.user { border-left-color: var(--color-ink-info); }
.preview-nav-item.assistant { border-left-color: var(--color-ink-success); }
.preview-nav-item.system { border-left-color: var(--color-ink-warning); }
.preview-nav-item.tool { border-left-color: var(--color-ink-tertiary); }
.preview-nav-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.preview-nav-kvs { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-nav-kvs .idx { color: var(--color-ink-tertiary); }
.preview-nav-kvs .k { color: var(--color-ink-tertiary); }
.preview-nav-kvs .v { color: var(--color-ink-primary); }
.preview-nav-line1 .size { flex: 0 0 auto; font-size: var(--fz-sm2); color: var(--color-ink-secondary); }
.preview-nav-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.preview-nav-tag { font-size: var(--fz-sm2); padding: 1px 5px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.preview-main { flex: 1 1 auto; min-width: 0; height: 50vh; display: flex; flex-direction: column; }
.preview-chat-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: var(--chrome-w) solid var(--line); }
.preview-chat-left { display: flex; align-items: center; gap: 8px; }
.preview-chat-title { font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-tertiary); }
.preview-chat-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.preview-chat-head button { font-size: var(--fz-sm2); padding: 5px 10px; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); }
.preview-chat-head button:hover { border-color: var(--line-strong, var(--line)); color: var(--color-ink-primary); }
.preview-chat-scroll { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; min-height: 0; }
.preview-chat { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.preview-turn { width: 90%; border: var(--chrome-w) solid var(--line); border-left-width: 3px; background: var(--color-bg-soft); }
.preview-turn.user { border-left-color: var(--color-ink-info); }
.preview-turn.assistant { border-left-color: var(--color-ink-success); }
.preview-turn.system { border-left-color: var(--color-ink-warning); }
.preview-turn.tool { border-left-color: var(--color-ink-tertiary); }
.preview-turn.other { border-left-color: var(--line-strong, var(--line)); }
.preview-turn-head { padding: 8px 12px; list-style: none; display: flex; align-items: center; }
.preview-turn-head::-webkit-details-marker { display: none; }
.preview-turn-head::before { content: '\25B8'; margin-right: 8px; color: var(--color-ink-tertiary); font-size: var(--fz-sm2); }
.preview-turn[open] .preview-turn-head::before { content: '\25BE'; }
.preview-turn[open] .preview-turn-head { border-bottom: var(--chrome-w) solid var(--line); }
.preview-turn-body { padding: 8px 12px; }
.preview-role { font-size: var(--fz-sm2); letter-spacing: 0.02em; color: var(--color-ink-secondary); }
.preview-role-k { color: var(--color-ink-tertiary); }
.preview-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; color: var(--color-ink-primary); line-height: 1.5; }
.preview-node { display: grid; grid-template-columns: max-content minmax(0, 1fr); border: var(--chrome-w) solid var(--line); margin-top: 4px; }
.preview-key, .preview-idx { padding: 3px 8px; border-right: var(--chrome-w) solid var(--line); border-bottom: var(--chrome-w) solid var(--line); background: var(--color-bg-tile); color: var(--color-ink-tertiary); white-space: nowrap; }
.preview-idx { font-size: var(--fz-sm2); }
.preview-val { padding: 3px 8px; border-bottom: var(--chrome-w) solid var(--line); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.preview-branch-key { grid-column: 1 / -1; padding: 3px 8px; border-bottom: var(--chrome-w) solid var(--line); background: var(--color-bg-tile); color: var(--color-ink-tertiary); }
.preview-branch { grid-column: 1 / -1; min-width: 0; padding: 2px 0 4px 12px; }
.preview-lit { color: var(--color-ink-primary); }
.preview-lit.num { color: var(--color-ink-danger); }
.preview-lit.bool, .preview-lit.null { color: var(--color-ink-info); }
.preview-lit.empty { color: var(--color-ink-tertiary); font-family: inherit; font-size: inherit; }
/* De-collide the preview's reused generic classes from the global .empty (serif)
   and the trace-detail embedded .k/.v (12px) so the widget keeps its own scale. */
.preview-nav .preview-nav-kvs .k, .preview-nav .preview-nav-kvs .v { font-size: var(--fz-sm2); }
.preview-jsonstr { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.hl-jsontag { font-size: var(--fz-sm2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-info); border: var(--chrome-w) solid var(--color-ink-info); padding: 0 4px; }
.hl-tag { color: var(--color-ink-info); }
.hl-md-head { color: var(--color-ink-warning); font-weight: 600; }
.hl-md-bold { font-weight: 600; }
.hl-md-code { color: var(--color-ink-success); }
.preview-tools { margin-top: 14px; }
.preview-tools > summary { font-size: var(--fz-sm2); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-secondary); }
.preview-tool { border-top: var(--chrome-w) solid var(--line); padding: 6px 0; }
.preview-empty { color: var(--color-ink-tertiary); padding: 10px 0; }
.preview-wrap.preview-fullscreen { position: fixed; inset: 0; z-index: 1000; background: var(--color-bg-page); padding: 16px; }
.preview-fullscreen .preview-nav, .preview-fullscreen .preview-main { height: calc(100vh - 32px); }

/* ---- Extracted inline-style utilities (appended last so single-class
   specificity reproduces the old inline-wins precedence). ---- */
.u-mt4 { margin-top: 4px; }
.u-mt6 { margin-top: 6px; }
.u-mt8 { margin-top: 8px; }
.u-mt10 { margin-top: 10px; }
.u-mt14 { margin-top: 14px; }

.u-mt24 { margin-top: 24px; }
.u-mb6 { margin-bottom: 6px; }
.u-mb8 { margin-bottom: 8px; }
.u-mb12 { margin-bottom: 12px; }
.u-mb16 { margin-bottom: 16px; }

.u-ml6 { margin-left: 6px; }
.u-mla { margin-left: auto; }
/* Type-scale utility classes — one per named step. */
.u-fz-sm2 { font-size: var(--fz-sm2); }
.u-fz-md1 { font-size: var(--fz-md1); }
.u-fz-md2 { font-size: var(--fz-md2); }
.u-fz-lg1 { font-size: var(--fz-lg1); }
.u-ink3 { color: var(--color-ink-tertiary); }
.u-ink-danger { color: var(--color-ink-danger); }
.u-o70 { opacity: .7; }
.u-italic { font-style: italic; }
.u-fw400-o75 { font-weight: 400; opacity: 0.75; }
.u-amber { color: var(--color-ink-warning); }
.u-green { color: var(--color-ink-success); }
.u-link-info { color: var(--color-ink-info); text-decoration: underline; text-underline-offset: 2px; }

/* ──────── Entity cross-links ────────
   Wherever a page names an entity that has a home elsewhere — the rule a decision
   fired, the agent behind an action — the name is the way there. Both read as one
   grammar: the entity's own text, underlined, in the page's ink. A .rule-link
   inside a pill inherits the pill's color so the pill stays one object. */
.rule-link,
.hunt-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.rule-link:hover,
.hunt-link:hover { text-decoration-color: currentColor; }
.rule-link-head { text-decoration-thickness: 1px; }
/* A drill-down rendered as a control rather than inline text: a span carrying .btn
   is not a button, so it needs the centring a button does natively — otherwise it
   stretches in a flex action row and its label rides the top edge. */
span.btn { display: inline-flex; align-items: center; }
.u-field-label { display: block; font-size: var(--fz-sm2); font-weight: 500; margin-bottom: 4px; }
.u-empty-pad { padding: 24px; text-align: left; }
.u-p14 { padding: 14px; }
.u-p14-16 { padding: 14px 16px; }
.u-p10-14 { padding: 10px 14px; }
.u-p6-14-12 { padding: 6px 14px 12px; }

.u-w100 { width: 100%; }
.u-actions-right { margin-left: auto; display: flex; gap: 6px; }

.u-fz-md1-ink3 { font-size: var(--fz-md1); color: var(--color-ink-tertiary); }
.u-fz-sm2-ml6 { font-size: var(--fz-sm2); margin-left: 6px; }
.u-flex-min160 { flex: 1; min-width: 160px; }
.u-row-between { display: flex; justify-content: space-between; align-items: center; }
.u-row-g6 { display: flex; align-items: center; gap: 6px; }
.u-row-g8 { display: flex; gap: 8px; }
.u-row-g8-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u-ok-cell { color: var(--color-ink-success); text-align: left; padding: 8px 10px; }

.u-track { height: 6px; background: rgba(255,255,255,0.07); border-radius: 0; margin: 11px 0; overflow: hidden; }
.u-track-lg { background: var(--color-bg-soft); height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.u-pre-body { white-space: pre-wrap; padding: 14px; font-size: var(--fz-md1); line-height: 1.6; color: var(--color-ink-secondary); }
.u-empty-dashed { border: var(--chrome-w) dashed var(--color-border); border-radius: 0; padding: 16px; text-align: center; color: var(--color-ink-tertiary); font-size: var(--fz-md1); }
.u-serif-note { background: var(--color-bg-tile); padding: 12px 14px; border-radius: 0; font-family: var(--font-serif); font-size: var(--fz-md2); line-height: 1.55; color: var(--color-ink-secondary); }
.u-warn-note { margin: 10px 0; padding: 12px 14px; border-radius: 0; background: var(--color-bg-warning-soft,#2a2418); border-left: 3px solid var(--color-ink-warning,#c89a4a); }
.u-warn-eyebrow { font-weight: 600; font-size: var(--fz-sm2); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-warning,#c89a4a); margin-bottom: 6px; }
.u-code-note { background: var(--console-bg); color: var(--console-ink); padding: 10px 12px; border-radius: 0; font-size: var(--fz-sm2); margin: 8px 0; }
.u-table-sep { border-collapse: separate; border-spacing: 2px; }

/* ================= Unified atom system =================
   One semantic-color layer. `--sc` (status color) drives the dynamic
   status recipe; `.tone-*` are the soft badge/pill palette. All colors
   resolve to the shared --color-ink-* / --color-bg-*-soft tokens so a
   given meaning is ONE color everywhere (see C.pill / C.statusPill). */

/* soft, borderless decision/label palette — apply to .pill or .badge */
.tone-ok      { --sc: var(--color-ink-success);  color: var(--color-ink-success);  background: var(--color-bg-success-soft); }
.tone-bad     { --sc: var(--color-ink-danger);   color: var(--color-ink-danger);   background: var(--color-bg-danger-soft); }
.tone-warn    { --sc: var(--color-ink-warning);  color: var(--color-ink-warning);  background: var(--color-bg-warning-soft); }
.tone-info    { --sc: var(--color-ink-info);     color: var(--color-ink-info);     background: var(--color-bg-info-soft); }
.tone-muted   { --sc: var(--color-ink-tertiary); color: var(--color-ink-tertiary); background: var(--color-bg-soft); }
.tone-accent  { --sc: var(--accent);             color: var(--accent);             background: color-mix(in srgb, var(--accent) 13%, transparent); }

/* canonical small label — the go-forward base for badge-like atoms */
.pill { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; padding: 2px 8px; border-radius: 0; font-size: var(--fz-sm1); letter-spacing: 0.04em; font-weight: 500; color: var(--color-ink-secondary); }
.pill.up { text-transform: uppercase; }
.pill.outlined { background: transparent; border: var(--chrome-w) solid var(--line); color: var(--color-ink-secondary); }
/* .bordered adds only a tinted border and keeps the tone's background+color; .outlined
   would override both, so a toned pill renders gray and its tone is lost. */
.pill.bordered { border: var(--chrome-w) solid color-mix(in srgb, var(--sc, var(--line)) 40%, transparent); }
.pill .dot { width: 6px; height: 6px; border-radius: 0; background: currentColor; }
/* A pill naming something the row does NOT have — a trifecta leg the session is
   missing. Struck through, so present and absent differ in shape and not only in
   weight: a dimmed pill still reads as a fact about the row, a struck one reads as
   its negation. */
.pill.pill-absent { text-decoration: line-through; opacity: 0.55; }
.pill-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* dynamic status pill — color supplied at runtime via style="--sc:…" */
.status-tone, .incident-meta-status, .inc-feed-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fz-sm1); text-transform: uppercase; letter-spacing: 0.3px;
  border-radius: 0; padding: 2px 8px;
  color: var(--sc, var(--color-ink-tertiary));
  background: color-mix(in srgb, var(--sc, var(--color-ink-tertiary)) 13%, transparent);
  border: var(--chrome-w) solid color-mix(in srgb, var(--sc, var(--color-ink-tertiary)) 40%, transparent);
}

/* de-flood group collapse marker (was inline, rounded 9px — now square + tokenised) */
.inc-group-badge { display: inline-block; padding: 1px 6px; font-size: var(--fz-sm2); border-radius: 0; color: var(--color-ink-tertiary); background: var(--color-bg-soft); border: var(--chrome-w) solid var(--line); }

/* shared shape bases (dedup — no rendered change) */
.chip { display: inline-flex; align-items: center; background: var(--color-bg-tile); border: var(--chrome-w) solid var(--line); border-radius: 0; color: var(--color-ink-secondary); }
.badge, .tag { display: inline-flex; align-items: center; border-radius: 0; }

/* ---- Extended utilities (exhaustive inline-style extraction) ---- */
.u-ai-c { align-items: center; }
.u-ai-fe { align-items: flex-end; }
.u-ai-fs { align-items: flex-start; }
.u-bg-soft { background: var(--color-bg-soft); }
.u-br0 { border-radius: 0; }
.u-break { word-break: break-all; }
.u-bt-border { border-top: var(--chrome-w) solid var(--color-border); }
.u-bt-line { border-top: var(--chrome-w) solid var(--line); }
.u-c-inherit { color: inherit; }
.u-fd-col { flex-direction: column; }
.u-flex { display: flex; }
.u-flex1 { flex: 1; }
.u-flex12 { flex: 1.2; }
.u-fw-wrap { flex-wrap: wrap; }
.u-fwt500 { font-weight: 500; }
.u-fwt600 { font-weight: 600; }
.u-g10 { gap: 10px; }
.u-g14 { gap: 14px; }

.u-g3 { gap: 3px; }
.u-g7 { gap: 7px; }
.u-g8 { gap: 8px; }
.u-h14 { height: 14px; }
.u-ink-warning { color: var(--color-ink-warning); }
.u-ink1 { color: var(--color-ink-primary); }
.u-ink2 { color: var(--color-ink-secondary); }
.u-jc-sb { justify-content: space-between; }
.u-lh145 { line-height: 1.45; }
.u-lh15 { line-height: 1.5; }
.u-lh155 { line-height: 1.55; }
.u-lh16 { line-height: 1.6; }
.u-ls1 { letter-spacing: 0.1em; }
.u-ls3 { letter-spacing: 0.3px; }
.u-m12-0 { margin: 12px 0; }
.u-m2-0-10 { margin: 2px 0 10px; }
.u-m4-0-0 { margin: 4px 0 0; }
.u-m5-0-3 { margin: 5px 0 3px; }
.u-m6-0-0-18 { margin: 6px 0 0 18px; }

.u-mb10 { margin-bottom: 10px; }
.u-mb14 { margin-bottom: 14px; }
.u-mb18 { margin-bottom: 18px; }
.u-mb20 { margin-bottom: 20px; }
.u-mb4 { margin-bottom: 4px; }
.u-mb7 { margin-bottom: 7px; }
.u-ml3 { margin-left: 3px; }
.u-ml8 { margin-left: 8px; }
.u-mn6-0-10 { margin: -6px 0 10px; }
.u-mr6 { margin-right: 6px; }
.u-mt16 { margin-top: 16px; }
.u-mt18 { margin-top: 18px; }
.u-mt2 { margin-top: 2px; }
.u-mt3 { margin-top: 3px; }
.u-mt5 { margin-top: 5px; }
.u-mw16 { min-width: 16px; }
.u-mw84 { min-width: 84px; }
.u-nowrap { white-space: nowrap; }

.u-o065 { opacity: 0.65; }
.u-ox-auto { overflow-x: auto; }
.u-p1-5 { padding: 1px 5px; }
.u-p10 { padding: 10px; }
.u-p10-0 { padding: 10px 0; }
.u-p3-6 { padding: 3px 6px; }
.u-p36 { padding: 36px; }
.u-p5-0 { padding: 5px 0; }
.u-p4-0 { padding: 4px 0; }
.u-p6-0 { padding: 6px 0; }
.u-p6 { padding: 6px; }
.u-p6-12 { padding: 6px 12px; }
.u-p6-8 { padding: 6px 8px; }
.u-p8-12-12 { padding: 8px 12px 12px; }
.u-pl22 { padding-left: 22px; }
.u-pt12 { padding-top: 12px; }
.u-pt8 { padding-top: 8px; }

.u-ta-c { text-align: center; }
.u-ta-l { text-align: left; }
.u-ta-r { text-align: right; }
.u-upper { text-transform: uppercase; }
.u-va-mid { vertical-align: middle; }
.u-w160 { width: 160px; }
.u-w260 { width: 260px; }

.u-xw680 { max-width: 680px; }

/* ---- Semantic components (extracted from inline) ---- */
.accent-warn { margin-bottom: 14px; border-left: 3px solid var(--color-ink-warning); padding-left: 12px; }

.box-ok-pad { border: var(--chrome-w) solid var(--color-ink-success); }

.box-warn-pad { padding: 10px 12px; margin-bottom: 10px; border: var(--chrome-w) solid var(--color-ink-warning); }
.coverage-grid-wide { grid-template-columns: 300px repeat(10, 1fr); }

.perm-chip { display: inline-block; padding: 1px 6px; margin: 1px 2px; border-radius: 0; background: var(--color-bg-info-soft); }
.preview-img { max-width: 100%; max-height: 200px; border: var(--chrome-w) solid var(--color-border); border-radius: 0; }

.tile-note { background: var(--color-bg-tile); padding: 12px 14px; border-radius: 6px; font-size: var(--fz-md1); line-height: 1.55; color: var(--color-ink-secondary); }
.id-panel { display: flex; align-items: center; gap: 9px; }
.id-avatar { width: 28px; height: 28px; border-radius: 0; background: var(--color-bg-tile); color: var(--color-ink-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fz-md1); flex: 0 0 auto; }
.id-meta { min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.id-name { font-size: var(--fz-md1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-email { font-size: var(--fz-md1); color: var(--color-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-signout { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--color-ink-secondary); }
.id-signout:hover { color: var(--color-ink-primary); }

/* Skill Scanner view — sizing via --fz-*, radius via --radius-* (square by
   default), and the verdict/tier/AST labels are `pill` + `tone-*`, not new badge
   classes. */
.skillscan-input { width: 100%; box-sizing: border-box; font-size: var(--fz-md1); line-height: 1.5; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); color: var(--color-ink-primary); resize: vertical; }
.skillscan-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.skillscan-finding { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 10px; background: var(--color-bg-soft); }
.skillscan-finding.sev-critical, .skillscan-finding.sev-high { border-left-color: var(--color-ink-danger); }
.skillscan-finding.sev-medium { border-left-color: var(--color-ink-warning); }
.skillscan-finding.sev-low, .skillscan-finding.sev-info { border-left-color: var(--color-ink-info); }
.skillscan-finding code { font-size: var(--fz-sm1); word-break: break-word; }
.skillscan-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }

/* Screenshot area. The pasted image is evidence the author reads, so it is sized
   to stay legible. Scoped under .tmc-screenshot so the generic .preview-img and
   .u-empty-dashed utilities keep their own sizing. */
.tmc-screenshot .u-empty-dashed { padding: 30px 16px; font-size: var(--fz-sm2); }
.tmc-screenshot .preview-img { max-height: 460px; }
.tmc-screenshot .preview-img:hover { border-color: var(--accent); }

/* The input column is sized by width, since a pasted screenshot is width-bound.
   clamp() floors it so the textarea is never cramped and caps it so the compiled
   policy and caveat panels keep the majority of the page. Scoped to .tmc-layout so
   the other .split-layout views keep their current sizing. */
.tmc-layout { grid-template-columns: clamp(300px, 30vw, 460px) 1fr; }