/* Pinion frontend — design tokens from PRD-supplied mockup. */

:root {
  --color-bg-page: #f5f3ee;
  --color-bg-frame: #ffffff;
  --color-bg-tile: #f5f3ee;
  --color-bg-soft: #ecebe6;
  --color-bg-info-soft: #ecf3fa;
  --color-bg-success-soft: #e6f0e3;
  --color-bg-warning-soft: #f7f0e0;
  --color-bg-danger-soft: #f7eaea;
  --color-ink-primary: #1a1814;
  --color-ink-secondary: #4a4640;
  --color-ink-tertiary: #8a857d;
  --color-ink-info: #1c4f8b;
  --color-ink-success: #2c6334;
  --color-ink-warning: #8a5a16;
  --color-ink-danger: #963535;
  --line: rgba(26, 24, 20, 0.10);
  --line-strong: rgba(26, 24, 20, 0.18);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
[data-theme="dark"] {
  --color-bg-page: #14130f;
  --color-bg-frame: #1c1a16;
  --color-bg-tile: #25221c;
  --color-bg-soft: #1f1d18;
  --color-bg-info-soft: #1a2a3d;
  --color-bg-success-soft: #1d2e21;
  --color-bg-warning-soft: #2e2516;
  --color-bg-danger-soft: #2e1a1a;
  --color-ink-primary: #ece8df;
  --color-ink-secondary: #b8b3a8;
  --color-ink-tertiary: #6e6a62;
  --color-ink-info: #6fa3d8;
  --color-ink-success: #7eb085;
  --color-ink-warning: #d8a662;
  --color-ink-danger: #d97676;
  --line: rgba(236, 232, 223, 0.10);
  --line-strong: rgba(236, 232, 223, 0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--font-sans); font-size: 14px; background: var(--color-bg-page); color: var(--color-ink-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; transition: background 0.2s ease; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

/* Sidebar */
.sidebar { border-right: 0.5px solid var(--line); background: var(--color-bg-frame); padding: 22px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-header { padding: 0 22px 18px; border-bottom: 0.5px solid var(--line); margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink-primary); }
.brand-mark { width: 22px; height: 22px; border: 0.5px solid var(--line-strong); border-radius: 4px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; background: var(--color-ink-primary); }
.brand-mark::before { width: 9px; height: 1.5px; transform: rotate(-30deg); }
.brand-mark::after  { width: 9px; height: 1.5px; transform: rotate(30deg); }
.brand-meta { display: flex; gap: 7px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-top: 8px; }
.brand-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-success); display: inline-block; }
.search-bar { padding: 0 22px 16px; border-bottom: 0.5px solid var(--line); margin-bottom: 14px; }
.search-input { width: 100%; padding: 8px 10px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: 6px; font-family: var(--font-sans); font-size: 12px; 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: 18px; padding: 0 22px; }
.nav-group-label { font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); margin-bottom: 8px; padding-left: 4px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-left: -10px; font-size: 13px; color: var(--color-ink-secondary); cursor: pointer; border-radius: 5px; position: relative; line-height: 1.3; transition: background 0.10s ease, color 0.10s ease; }
.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; }
.nav-badge { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: auto; background: var(--color-bg-info-soft); color: var(--color-ink-info); letter-spacing: 0.04em; }

/* Topbar */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; background: color-mix(in srgb, var(--color-bg-frame) 96%, transparent); border-bottom: 0.5px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }
.topbar-left, .topbar-right { display: flex; gap: 14px; align-items: center; }
.tenant-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-secondary); }
.period-selector { display: inline-flex; gap: 1px; border: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); overflow: hidden; }
.period-selector button { padding: 5px 11px; background: transparent; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 12px; color: var(--color-ink-tertiary); transition: all 0.12s ease; }
.period-selector button.active { background: var(--color-bg-frame); color: var(--color-ink-primary); font-weight: 500; }
.period-selector button:hover:not(.active) { color: var(--color-ink-secondary); }
.posture-light { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-ink-secondary); }
.posture-light .pl-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent); transition: box-shadow 120ms ease-out, transform 120ms ease-out; }
/* Brief outward pulse fired when the SSE debouncer coalesces incoming
   events into one rail refresh. Replaces the old "re-render the whole
   view 8× per second" flicker — viewer still sees liveness without
   the DOM flashing. */
.posture-light .pl-dot.pl-dot-pulse { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 35%, transparent); transform: scale(1.25); }
.posture-light.success { color: var(--color-ink-success); }
.posture-light.warning { color: var(--color-ink-warning); }
.posture-light.danger  { color: var(--color-ink-danger); }
.icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); color: var(--color-ink-secondary); }
.icon-btn:hover { color: var(--color-ink-primary); border-color: var(--line-strong); }
.user-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: 100px; font-size: 12px; color: var(--color-ink-secondary); }
.user-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--color-ink-primary); color: var(--color-bg-frame); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--font-mono); }
.btn { padding: 6px 12px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--color-ink-secondary); cursor: pointer; }
.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; cursor: not-allowed; }

/* View root */
.view-root { padding: 28px 32px; max-width: 1280px; }
.view { display: none; animation: viewFade 0.25s ease-out; }
.view.active { display: block; }
@keyframes viewFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.view-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 4px; }
.view-title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.view-sub { color: var(--color-ink-tertiary); font-size: 13px; margin-bottom: 24px; display: flex; gap: 14px; align-items: center; }
.view-sub .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-ink-tertiary); }
.section-heading { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 22px 0 12px; }

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

/* ──────── Tiles ──────── */
.tile-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1.2fr; gap: 14px; margin-bottom: 22px; }
.tile { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-height: 110px; position: relative; }
.tile-warning { border: 1px solid color-mix(in srgb, var(--color-ink-warning) 40%, var(--line)); background: color-mix(in srgb, var(--color-bg-warning-soft) 50%, var(--color-bg-frame)); }
.tile-trifecta { border: 1px solid color-mix(in srgb, var(--color-ink-success) 40%, var(--line)); background: linear-gradient(180deg, var(--color-bg-success-soft), var(--color-bg-frame)); }
.tile-danger { border: 1px 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: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.tile-value { font-family: var(--font-mono); font-size: 28px; font-weight: 500; color: var(--color-ink-primary); }
.tile-value.lg { font-size: 32px; }
.tile-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tile-spark { display: block; width: 100%; height: 22px; opacity: 0.7; }

/* ──────── Panels (3-col) ──────── */
.three-col { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.panel { background: var(--color-bg-frame); border: 0.5px 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; }
.panel-title { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; }
.panel-link { font-size: 11px; color: var(--color-ink-info); }

.row { padding: 8px 0; border-bottom: 0.5px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; cursor: pointer; transition: background 0.10s; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--color-bg-tile); }
.row-text { font-size: 13px; color: var(--color-ink-secondary); line-height: 1.4; }
.row-text strong { color: var(--color-ink-primary); font-weight: 500; }
.row-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-tertiary); }
.op-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--line); align-items: center; }
.op-row:last-child { border-bottom: none; }
.op-label { font-size: 11px; color: var(--color-ink-tertiary); letter-spacing: 0.04em; }
.op-value { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-primary); font-weight: 500; }

/* ──────── Tags / badges ──────── */
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; 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 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; 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: 0.5px solid var(--line); color: var(--color-ink-secondary); }
.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); }

/* ──────── Buttons / actions bar ──────── */
.actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.action-btn { padding: 7px 14px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: 6px; font-size: 12.5px; color: var(--color-ink-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.action-btn:hover { color: var(--color-ink-primary); border-color: var(--line-strong); }
.action-btn-primary { background: var(--color-ink-primary); color: var(--color-bg-frame); border-color: var(--color-ink-primary); }
.action-btn-primary:hover { background: var(--color-ink-secondary); }

/* ──────── Chips ──────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: 100px; font-size: 12px; color: var(--color-ink-secondary); cursor: pointer; transition: all 0.12s; }
.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-family: var(--font-mono); font-size: 10px; opacity: 0.8; }
.chip.right { margin-left: auto; }
.chip.confirm { border-color: var(--color-ink-warning, #b8860b); color: var(--color-ink-warning, #b8860b); }
.chip.confirm:hover { background: color-mix(in srgb, var(--color-ink-warning, #b8860b) 12%, transparent); }
.chip.allow { border-color: var(--color-ink-tertiary); }

/* ──────── Tables ──────── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 0.5px solid var(--line); font-size: 12.5px; }
th { font-size: 10.5px; letter-spacing: 0.06em; color: var(--color-ink-tertiary); text-transform: uppercase; font-weight: 500; }
td.mono { font-family: var(--font-mono); font-size: 11.5px; }
tr:hover td { background: var(--color-bg-soft); }

/* ──────── kv ──────── */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 12.5px; align-items: baseline; }
.kv .k { color: var(--color-ink-tertiary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.kv .v { color: var(--color-ink-primary); }

/* ──────── Subgraph ──────── */
.subgraph-canvas { background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: var(--radius-md); padding: 16px; min-height: 380px; position: relative; overflow: hidden; }
.subgraph-svg { width: 100%; height: 380px; 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.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-family: var(--font-mono); font-size: 9px; fill: var(--color-ink-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.sg-node text.lbl { font-family: var(--font-sans); font-size: 11px; font-weight: 500; fill: var(--color-ink-primary); }
.sg-node text.detail { font-family: var(--font-mono); font-size: 8.5px; fill: var(--color-ink-tertiary); }
.sg-node text.step { font-family: var(--font-mono); font-size: 9px; 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; }
.sg-step { opacity: 1; }
.sg-step.replay-pending { opacity: 0; }
.sg-step.replay-revealed { opacity: 1; transition: opacity 0.25s ease-out; }

/* ──────── Trust state bar ──────── */
.trust-state-bar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; margin-bottom: 14px; border: 0.5px solid var(--line); }
.trust-segment { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; position: relative; transition: background 0.2s ease; }
.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 .label { font-family: var(--font-mono); font-size: 10px; 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: 16px; font-style: italic; color: var(--color-ink-primary); line-height: 1.55; }
.structural-reason em { font-family: var(--font-mono); font-style: normal; font-size: 12px; padding: 1px 6px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: 3px; }
.callout { padding: 12px 14px; border-radius: var(--radius-md); border-left: 3px solid var(--color-ink-info); background: var(--color-bg-info-soft); font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--color-ink-primary); }

/* ──────── Incidents layout ──────── */
.incidents-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.incidents-rail { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); max-height: 720px; overflow-y: auto; position: sticky; top: 70px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 0.5px solid var(--line); }
.rail-head .label { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; }
.inc-rail-row { padding: 12px 16px; border-bottom: 0.5px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; }
.inc-rail-row:hover { background: var(--color-bg-soft); }
.inc-rail-row.active { background: var(--color-bg-soft); }
.inc-rail-row.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--color-ink-primary); }
.inc-rail-summary { font-size: 12.5px; color: var(--color-ink-secondary); }
.inc-rail-summary strong { color: var(--color-ink-primary); }
.inc-rail-meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); }
.incident-canvas { display: flex; flex-direction: column; gap: 14px; }
.incident-canvas-head { display: flex; justify-content: space-between; align-items: flex-start; }
.incident-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; }
.incident-actor { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); margin-top: 2px; }
.mode-toggle { display: inline-flex; gap: 1px; border: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); }
.mode-toggle button { padding: 5px 11px; background: transparent; border: none; cursor: pointer; font-size: 11.5px; color: var(--color-ink-tertiary); }
.mode-toggle button.active { background: var(--color-bg-frame); color: var(--color-ink-primary); font-weight: 500; }
.incident-foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 0.5px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); }
.ledger-ref { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0.5px solid var(--line); background: var(--color-bg-tile); border-radius: 100px; cursor: pointer; }
.ledger-ref:hover { color: var(--color-ink-primary); }

/* ──────── Trifecta ──────── */
.trifecta-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.trifecta-counter { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 22px; position: relative; }
.trifecta-counter .corner-icon { position: absolute; top: 18px; right: 18px; opacity: 0.4; }
.trifecta-counter .label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); margin-bottom: 12px; }
.trifecta-counter .value { font-family: var(--font-mono); font-size: 32px; font-weight: 500; color: var(--color-ink-primary); }
.trifecta-counter .meta { font-size: 11.5px; color: var(--color-ink-tertiary); margin-top: 4px; }
.venn-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 22px; }
.venn-panel-head { font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--color-ink-secondary); }
.venn-panel-head strong { background: var(--color-bg-danger-soft); padding: 1px 5px; border-radius: 3px; color: var(--color-ink-danger); font-weight: 500; }
.venn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.venn-stat { padding: 10px 12px; background: var(--color-bg-tile); border-radius: var(--radius-md); border: 0.5px solid var(--line); }
.venn-stat.danger { border: 1px solid color-mix(in srgb, var(--color-ink-danger) 30%, var(--line)); background: var(--color-bg-danger-soft); }
.venn-stat .value { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--color-ink-primary); }
.venn-stat .label { font-size: 11px; color: var(--color-ink-tertiary); margin-top: 4px; }
.venn-svg { display: block; width: 100%; height: 320px; }
.cond-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; border: 0.5px solid var(--line); color: var(--color-ink-tertiary); margin-right: 4px; }
.cond-pill.on { background: var(--color-bg-danger-soft); color: var(--color-ink-danger); border-color: rgba(150, 53, 53, 0.25); }

/* ──────── Topology ──────── */
.topo-canvas { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.topo-svg { display: block; width: 100%; height: 480px; }
.topo-node circle { stroke-width: 1; }
.topo-node.green circle { fill: var(--color-bg-success-soft); stroke: var(--color-ink-success); }
.topo-node.yellow circle { fill: var(--color-bg-warning-soft); stroke: var(--color-ink-warning); }
.topo-node.red circle { fill: var(--color-bg-danger-soft); stroke: var(--color-ink-danger); stroke-width: 1.5; }
.topo-node.idle circle { fill: var(--color-bg-soft); stroke: var(--color-ink-tertiary); stroke-dasharray: 3 2; }
.topo-node text.lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--color-ink-secondary); }
.topo-node text.sub { font-family: var(--font-mono); font-size: 9px; fill: var(--color-ink-tertiary); }
.topo-edge { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.topo-edge.shared { stroke-dasharray: 3 3; }
.topo-edge.hot { stroke: var(--color-ink-danger); stroke-width: 1.5; }
.topo-mini-timeline { display: flex; gap: 2px; margin-top: 14px; padding: 10px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-md); }
.timeline-bar { flex: 1; height: 28px; background: var(--color-bg-soft); border-radius: 2px; cursor: pointer; transition: background 0.12s; position: relative; }
.timeline-bar:hover { background: var(--color-bg-tile); }
.timeline-bar.deny { background: var(--color-bg-danger-soft); }
.timeline-bar.confirm { background: var(--color-bg-warning-soft); }

/* ──────── Coverage ──────── */
.coverage-grid { display: grid; grid-template-columns: 140px repeat(10, 1fr); gap: 0; border: 0.5px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-frame); }
.cov-cell { padding: 12px 8px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-secondary); border-right: 0.5px solid var(--line); border-bottom: 0.5px 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: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.cov-cell.row-label { 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: 16px; }
.cov-partial { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); font-size: 16px; }
.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: 10px; }
.cov-legend { display: flex; gap: 18px; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); }
.cov-legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.honest-limits { padding: 18px 22px; background: var(--color-bg-tile); border-left: 3px solid var(--color-ink-tertiary); margin-top: 28px; border-radius: var(--radius-md); }
.honest-limits .title { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 12px; }
.honest-limits .limit { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--color-ink-secondary); padding: 4px 0 4px 20px; position: relative; }
.honest-limits .limit::before { content: '—'; position: absolute; left: 0; color: var(--color-ink-tertiary); }

/* ──────── Hunt ──────── */
.hunt-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.hunt-saved-panel { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); position: sticky; top: 70px; max-height: 720px; overflow-y: auto; }
.hunt-saved-row { padding: 10px 14px; border-bottom: 0.5px solid var(--line); cursor: pointer; }
.hunt-saved-row:hover { background: var(--color-bg-tile); }
.hunt-saved-row.active { background: var(--color-bg-tile); }
.hunt-saved-row .name { font-size: 12.5px; color: var(--color-ink-primary); font-weight: 500; }
.hunt-saved-row .meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-top: 2px; }
.hunt-editor { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.hunt-editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hunt-editor-head .title { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; }
.hunt-editor-actions { display: flex; gap: 8px; }
.hunt-code { width: 100%; min-height: 110px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: var(--radius-md); padding: 12px; font-family: var(--font-mono); font-size: 12.5px; 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); }
.hl-kw { color: var(--color-ink-info); }
.hl-var { color: var(--color-ink-warning); }
.hl-str { color: var(--color-ink-success); }
.hl-num { color: var(--color-ink-danger); }
.hl-comment { color: var(--color-ink-tertiary); font-style: italic; }
.hunt-results { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.hunt-results-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); }
/* 5 columns: session-id · subtype + excerpt · decision tag · provenance pill · timestamp.
   The provenance pill was added in the PRD-04 work; the original grid had 4 columns
   so the timestamp wrapped to a second line and the rows visually misaligned. */
.hunt-result-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto 150px; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--line); align-items: center; cursor: pointer; }
.hunt-result-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hunt-result-row:hover { background: var(--color-bg-tile); }

/* ──────── Attacks ──────── */
.attack-grid-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.cat-panel { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); position: sticky; top: 70px; max-height: 720px; overflow-y: auto; padding: 8px; }
.cat-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; align-items: center; }
.cat-item:hover { background: var(--color-bg-tile); }
.cat-item.active { background: var(--color-bg-tile); font-weight: 500; }
.cat-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; font-family: var(--font-mono); font-size: 10px; background: var(--color-bg-tile); border-radius: 4px; color: var(--color-ink-tertiary); }
.cat-item.active .cat-num { background: var(--color-ink-primary); color: var(--color-bg-frame); }
.cat-name { font-size: 12.5px; color: var(--color-ink-secondary); }
.cat-count { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-left: auto; }
.attack-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.attack-card { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; transition: all 0.15s; }
.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: 18px; font-weight: 500; }
.attack-asi-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 2px 6px; background: var(--color-bg-tile); border-radius: 4px; color: var(--color-ink-tertiary); flex-shrink: 0; }
.attack-card-source { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-bottom: 8px; }
.attack-card-desc { font-size: 12.5px; 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: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-success); margin-bottom: 12px; }
.attack-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ──────── Cost ──────── */
.cost-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.cost-chart-panel { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 22px; }
.chart-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.chart-toggle { display: inline-flex; gap: 1px; border: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); }
.chart-toggle button { padding: 4px 10px; background: transparent; border: none; cursor: pointer; font-size: 11.5px; color: var(--color-ink-tertiary); }
.chart-toggle button.active { background: var(--color-bg-frame); color: var(--color-ink-primary); font-weight: 500; }
.cost-chart-svg { display: block; width: 100%; height: 220px; }
.cost-spenders-table { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }

/* ──────── Heatmap ──────── */
.heatmap-grid { display: grid; grid-template-columns: 130px repeat(9, 1fr); gap: 0; border: 0.5px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.heatmap-cell { padding: 8px 4px; text-align: center; font-family: var(--font-mono); font-size: 11px; border-right: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); display: flex; align-items: center; justify-content: center; min-height: 36px; transition: transform 0.1s; }
.heatmap-cell:hover { transform: scale(1.08); z-index: 2; position: relative; }
.heatmap-cell.head { background: var(--color-bg-tile); font-size: 10px; color: var(--color-ink-tertiary); writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 2px; min-height: 88px; }
.heatmap-cell.head:hover { transform: rotate(180deg) scale(1.05); }
.heatmap-cell.row-label { background: var(--color-bg-tile); justify-content: flex-start; padding-left: 12px; color: var(--color-ink-primary); font-size: 11px; }
.hm-0 { background: var(--color-bg-soft); color: var(--color-ink-tertiary); }
.hm-warm-1 { background: color-mix(in srgb, var(--color-bg-warning-soft) 60%, var(--color-bg-frame)); color: var(--color-ink-warning); }
.hm-warm-2 { background: var(--color-bg-warning-soft); color: var(--color-ink-warning); }
.hm-warm-3 { background: color-mix(in srgb, var(--color-ink-warning) 30%, var(--color-bg-warning-soft)); color: var(--color-ink-warning); font-weight: 500; }
.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; }
.queue-row { display: grid; grid-template-columns: 1fr 100px 200px; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid var(--line); align-items: center; }
.queue-age { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-warning); }
.queue-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-deny { padding: 4px 10px; background: transparent; border: 0.5px solid var(--color-ink-danger); border-radius: 4px; color: var(--color-ink-danger); font-size: 11.5px; cursor: pointer; }
.btn-approve { padding: 4px 10px; background: var(--color-bg-success-soft); border: 0.5px solid var(--color-ink-success); border-radius: 4px; color: var(--color-ink-success); font-size: 11.5px; cursor: pointer; }

/* ──────── TMC ──────── */
.tmc-explainer { background: var(--color-bg-info-soft); border-radius: var(--radius-md); padding: 14px 16px; display: flex; gap: 10px; margin-bottom: 22px; }
.tmc-explainer .icon { color: var(--color-ink-info); flex-shrink: 0; }
.tmc-explainer .body { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--color-ink-secondary); }
.tmc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tmc-card { background: var(--color-bg-frame); border: 0.5px 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-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.tmc-card-badge { padding: 2px 7px; font-family: var(--font-mono); font-size: 10px; border-radius: 3px; }
.tmc-badge-live { background: var(--color-bg-success-soft); color: var(--color-ink-success); }
.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: 15px; line-height: 1.6; color: var(--color-ink-primary); background: var(--color-bg-tile); border: 0.5px 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); }
.tmc-compile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-ink-primary); color: var(--color-bg-frame); border: 0; border-radius: 6px; font-size: 13px; cursor: pointer; margin-top: 12px; }
.tmc-progress { display: flex; gap: 8px; margin-top: 14px; }
.tmc-step { flex: 1; padding: 8px 10px; background: var(--color-bg-tile); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); display: flex; align-items: center; gap: 6px; }
.tmc-step::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-tertiary); }
.tmc-step.active { background: var(--color-bg-info-soft); color: var(--color-ink-info); }
.tmc-step.active::before { background: var(--color-ink-info); animation: tmc-pulse 1.2s ease-in-out infinite; }
.tmc-step.done { color: var(--color-ink-success); }
.tmc-step.done::before { background: var(--color-ink-success); }
@keyframes tmc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.tmc-clarification { background: var(--color-bg-info-soft); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; }
.tmc-clarification-option { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; cursor: pointer; }
.tmc-radio { width: 14px; height: 14px; border: 0.5px solid var(--line-strong); border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; }
.tmc-radio.checked::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-ink-info); }
.tmc-option-text { font-size: 13px; }
.tmc-option-rec { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-success); margin-left: 6px; }
.tmc-oos { background: var(--color-bg-warning-soft); border-left: 3px solid var(--color-ink-warning); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 14px; font-family: var(--font-serif); font-size: 14px; line-height: 1.55; }
.tmc-presets { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 14px; }
.tmc-preset-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 0.5px solid var(--line); }
.tmc-preset-row:last-child { border-bottom: none; }
.tmc-preset-text { font-family: var(--font-serif); font-size: 14px; color: var(--color-ink-secondary); }
.tmc-preset-result { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); }
.tmc-empty-state { padding: 60px 40px; text-align: center; color: var(--color-ink-tertiary); font-family: var(--font-serif); font-size: 16px; }
.tmc-output { animation: tmc-reveal 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-mono); font-size: 12.5px; line-height: 1.65; white-space: pre; overflow: auto; border: 0.5px 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: 0.5px solid var(--line);
  margin-bottom: 8px;
}
.tmc-dual-pane-title, .wb-dual-pane-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-primary);
}
.tmc-dual-pane-sub, .wb-dual-pane-sub {
  font-size: 10.5px;
  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-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.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: 0.5px solid var(--line); font-size: 12.5px; }
.tmc-test-row:last-child { border-bottom: none; }
.tmc-result-caught { color: var(--color-ink-success); font-family: var(--font-mono); font-size: 10.5px; }
.tmc-result-benign { color: var(--color-ink-info); font-family: var(--font-mono); font-size: 10.5px; }
.tmc-result-fp { color: var(--color-ink-warning); font-family: var(--font-mono); font-size: 10.5px; }
.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: 14px; line-height: 1.55; }

/* ──────── Workbench ──────── */
.wb-layout { display: grid; grid-template-columns: 240px 1fr 220px; gap: 14px; align-items: start; }
.wb-policy-list { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 8px; position: sticky; top: 70px; max-height: 720px; overflow-y: auto; }
.wb-policy-row { padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.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-family: var(--font-mono); font-size: 11px; color: var(--color-ink-primary); font-weight: 500; }
.wb-policy-status { font-size: 10px; color: var(--color-ink-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.wb-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-ink-success); }
.wb-editor { background: var(--color-bg-frame); border: 0.5px 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-mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; border: 0.5px solid var(--line); margin-bottom: 14px; resize: vertical; min-height: 240px; width: 100%; color: var(--color-ink-primary); }
.wb-test { background: var(--color-bg-tile); border-radius: var(--radius-md); padding: 12px; }
.wb-test-result { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 10px; }
.wb-verdict-badge { padding: 4px 10px; border: 0.5px solid currentColor; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; }
.wb-verdict-badge.deny { color: var(--color-ink-danger); }
.wb-verdict-text { font-family: var(--font-serif); font-size: 14px; color: var(--color-ink-secondary); }
.wb-verdict-meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); }
.wb-helpers { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; position: sticky; top: 70px; }
.wb-helpers-section { margin-bottom: 18px; }
.wb-helpers-section .title { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.wb-fn-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-info); padding: 3px 0; cursor: pointer; }
.wb-fn-name:hover { background: var(--color-bg-tile); }
.wb-helper-warn { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; background: var(--color-bg-warning-soft); color: var(--color-ink-warning); border-radius: 3px; }

/* ──────── Plugins ──────── */
.plugins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.plugin-card { background: var(--color-bg-frame); border: 0.5px 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: 18px; font-weight: 500; }
.plugin-version { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-left: 8px; }
.plugin-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.plugin-stat .label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.plugin-stat .value { font-family: var(--font-mono); font-size: 18px; color: var(--color-ink-primary); margin-top: 4px; }
.plugin-stat .meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-top: 2px; }
.plugin-foot { padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plugin-mode-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--color-bg-tile); border-radius: 100px; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-secondary); }
.plugin-signing { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); }

/* PRD-07 §3.2-3.3 detector sidecar pills. Same shape as .plugin-mode-pill
   but colour-coded by transport (http/grpc/in-proc) and by signature
   verification status. The dashboard's at-a-glance scan is "is each
   sidecar signed and trusted, or is it slipping through unverified?" */
.det-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.det-pill.det-inproc       { background: var(--color-bg-tile); border-color: var(--color-ink-tertiary); color: var(--color-ink-tertiary); }
.det-pill.det-http         { background: rgba(60, 110, 175, 0.12); border-color: #3c6eaf; color: #3c6eaf; }
.det-pill.det-grpc         { background: rgba(132, 75, 191, 0.16); border-color: #844bbf; color: #6b3aa0; }
.det-pill.det-sig-ok       { background: rgba(47, 122, 74, 0.12); border-color: #2f7a4a; color: #2f7a4a; }
.det-pill.det-sig-bad      { background: rgba(185, 28, 28, 0.10); border-color: #b91c1c; color: #b91c1c; }
.det-pill.det-sig-na       { background: var(--color-bg-tile); border-color: var(--color-ink-tertiary); color: var(--color-ink-tertiary); }
.det-pub                   { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); }
.det-endpoint              { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--color-bg-tile); border-radius: 4px; color: var(--color-ink-secondary); }
.det-fingerprint           { padding: 8px 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); border-top: 0.5px solid var(--line); margin-top: 8px; }
.agreement-panel { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 22px; }
.agreement-grid { display: grid; grid-template-columns: 130px repeat(3, 1fr); gap: 0; border: 0.5px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: 12px; }
.agg-cell { padding: 12px; text-align: center; border-right: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; }
.agg-cell.head { background: var(--color-bg-tile); color: var(--color-ink-tertiary); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.agg-cell.row-label { background: var(--color-bg-tile); text-align: left; }
.agg-cell.diag { color: var(--color-ink-tertiary); }
.agg-cell.agree { background: var(--color-bg-success-soft); color: var(--color-ink-success); }
.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: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); }
.framework-selector button { padding: 6px 12px; background: transparent; border: 0; cursor: pointer; font-size: 12px; color: var(--color-ink-tertiary); }
.framework-selector button.active { background: var(--color-bg-frame); color: var(--color-ink-primary); font-weight: 500; }
.verifier-link { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-info); padding: 4px 10px; border: 0.5px solid var(--line); border-radius: 100px; }
.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-stamp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 18px; padding: 12px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.evidence-stamp .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.evidence-stamp .v { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-primary); margin-top: 4px; }
.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-family: var(--font-mono); font-size: 10px; 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: 14px; line-height: 1.55; }
.attestation-hash { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); word-break: break-all; margin-top: 8px; }
.evidence-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.controls-section { margin-top: 22px; }
.control-card { display: grid; grid-template-columns: 90px 1fr 80px; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid var(--line); align-items: center; }
.control-id { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; background: var(--color-bg-tile); border-radius: 4px; text-align: center; }
.control-status-pass { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; background: var(--color-bg-success-soft); color: var(--color-ink-success); border-radius: 4px; text-align: center; }
.control-status-gap { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; background: var(--color-bg-warning-soft); color: var(--color-ink-warning); border-radius: 4px; text-align: center; }
.evidence-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; padding-top: 18px; border-top: 0.5px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); }
.evidence-watermark { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; color: var(--color-ink-tertiary); margin-top: 28px; }
.crosswalk-row { display: grid; grid-template-columns: 110px 1fr 1fr 90px; gap: 14px; padding: 10px 0; border-bottom: 0.5px solid var(--line); align-items: center; font-size: 12.5px; }
.crosswalk-row .observation { color: var(--color-ink-info); cursor: pointer; }

/* ──────── Misc ──────── */
.flex-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.scroll-x { overflow-x: auto; }
hr.sep { border: none; border-top: 0.5px solid var(--line); margin: 18px 0; }

/* ──────── Fleet view ──────── */
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fleet-card { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; transition: all 0.15s; }
.fleet-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.fleet-card.selected { border-color: var(--color-ink-primary); box-shadow: 0 0 0 1px var(--color-ink-primary); }
.fleet-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.fleet-glyph { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--color-bg-tile); font-size: 18px; flex-shrink: 0; }
.fleet-name { font-family: var(--font-serif); font-size: 16px; font-weight: 500; line-height: 1.2; }
.fleet-id { font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-tertiary); margin-top: 2px; }
.fleet-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 100px; }
.fleet-status.running { background: var(--color-bg-success-soft); color: var(--color-ink-success); }
.fleet-status.stopped { background: var(--color-bg-soft); color: var(--color-ink-tertiary); }
.fleet-status.error { background: var(--color-bg-danger-soft); color: var(--color-ink-danger); }
.fleet-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fleet-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); margin: 8px 0; }
.fleet-stat .label { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-tertiary); }
.fleet-stat .value { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-primary); margin-top: 2px; }
.fleet-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fleet-actions .btn { padding: 4px 9px; font-size: 11px; }

.fleet-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 16px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); }
.fleet-launch-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.fleet-detail { background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 18px; }
.fleet-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 0.5px solid var(--line); }
.fleet-detail-tabs { display: inline-flex; gap: 1px; border: 0.5px solid var(--line); border-radius: 6px; background: var(--color-bg-tile); margin-bottom: 14px; }
.fleet-detail-tabs button { padding: 5px 12px; background: transparent; border: 0; cursor: pointer; font-size: 12px; color: var(--color-ink-tertiary); }
.fleet-detail-tabs button.active { background: var(--color-bg-frame); color: var(--color-ink-primary); font-weight: 500; }
.fleet-tab { display: none; }
.fleet-tab.active { display: block; }
.fleet-log { background: #0d0c0a; color: #ece8df; font-family: var(--font-mono); font-size: 11.5px; padding: 12px 14px; border-radius: var(--radius-md); max-height: 280px; overflow: auto; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.fleet-log .deny { color: #d97676; }
.fleet-log .confirm { color: #d8a662; }
.fleet-log .allow { color: #7eb085; }
.fleet-exec-input { width: 100%; padding: 10px 12px; background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12.5px; color: var(--color-ink-primary); margin-bottom: 8px; }
.fleet-exec-input:focus { outline: none; border-color: var(--color-ink-secondary); }

.fleet-no-docker { padding: 22px; background: var(--color-bg-warning-soft); border-left: 3px solid var(--color-ink-warning); border-radius: var(--radius-md); font-family: var(--font-serif); font-size: 14px; line-height: 1.55; }


/* ── Runtime view (Phase 3) ────────────────────────────────────────── */
.cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cov-card { padding: 14px 16px; border: 0.5px solid var(--line); border-radius: var(--radius-lg); background: var(--color-bg-tile); position: relative; }
.cov-card.cov-full    { border-left: 3px solid var(--color-ink-success, #2f7a4a); }
.cov-card.cov-partial { border-left: 3px solid var(--color-ink-warning, #b6822a); }
.cov-card.cov-empty   { border-left: 3px solid var(--color-ink-tertiary); opacity: 0.78; }
.cov-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-tertiary); }
.cov-val   { font-family: var(--font-mono); font-size: 22px; font-weight: 500; margin-top: 4px; }
.cov-pct   { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-secondary); }
.cov-hint  { font-size: 11px; color: var(--color-ink-tertiary); margin-top: 6px; line-height: 1.4; }

.rt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rt-table th { text-align: left; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-tertiary); border-bottom: 0.5px solid var(--line); }
.rt-table td { padding: 10px; border-bottom: 0.5px solid var(--line); vertical-align: top; }
.rt-table tr:hover td { background: var(--color-bg-tile); }
.rt-host { font-weight: 500; }
.rt-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.rt-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rt-status.live    { color: #2f7a4a; background: rgba(47,122,74,0.12); }
.rt-status.stale   { color: #b6822a; background: rgba(182,130,42,0.12); }
.rt-status.offline { color: #888;    background: rgba(136,136,136,0.12); }
.rt-caps { font-family: var(--font-mono); white-space: nowrap; }
.cap-dot { display: inline-block; width: 18px; height: 18px; border-radius: 4px; line-height: 18px; text-align: center; font-size: 10px; font-weight: 600; margin-right: 3px; }
.cap-dot.on  { background: #2f7a4a; color: white; }
.cap-dot.off { background: var(--color-bg-tile); color: var(--color-ink-tertiary); border: 0.5px solid var(--line); }

.rt-snippet { background: #0d0c0a; color: #ece8df; font-family: var(--font-mono); font-size: 11.5px; padding: 10px 12px; border-radius: var(--radius-md); margin-top: 10px; white-space: pre-wrap; word-break: break-all; }

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

/* ── Honest synthetic-tile badges (Phase 3.1) ──────────────────────── */
.synth-badge { display: inline-block; padding: 1px 6px; margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; background: rgba(182, 130, 42, 0.12); color: #b6822a; vertical-align: middle; }
.synth-badge[title]:hover { cursor: help; }

/* ── Runbook Phase-3 cards (runtime vs bare) ───────────────────────── */
.runbook-fleet-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 14px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-lg); font-size: 13px; }
.runbook-rt-card { border-left: 3px solid var(--color-ink-info); }
.runbook-rt-explain { margin-top: 8px; display: grid; gap: 6px; padding: 10px 12px; background: var(--color-bg-tile); border-radius: var(--radius-md); border: 0.5px solid var(--line); font-size: 12.5px; line-height: 1.5; }
.runbook-rt-pill { display: inline-block; padding: 1px 7px; margin-right: 6px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.runbook-rt-pill.bare { background: rgba(136,136,136,0.15); color: #777; }
.runbook-rt-pill.rt   { background: rgba(47,122,74,0.15);  color: #2f7a4a; }
.runbook-rt-result { padding: 12px 14px; background: var(--color-bg-frame); border: 0.5px solid var(--line); border-radius: var(--radius-md); }
.runbook-rt-headline { font-family: var(--font-mono); font-size: 13px; margin-bottom: 10px; }
.runbook-rt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.runbook-rt-table th { text-align: left; padding: 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-tertiary); border-bottom: 0.5px solid var(--line); }
.runbook-rt-table td { padding: 7px 8px; border-bottom: 0.5px solid var(--line); }
.runbook-rt-table tr:last-child td { border-bottom: 0; }

/* Per-container detection blocks inside runbook results */
.runbook-rt-container { background: var(--color-bg-tile); border: 0.5px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; }
.runbook-rt-container-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.runbook-rt-silent { padding: 8px 10px; background: var(--color-bg-frame); border-radius: 4px; color: var(--color-ink-tertiary); font-size: 12px; font-style: italic; }
.runbook-rt-source { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; }
.runbook-rt-source.simulate { background: rgba(47,122,74,0.15); color: #2f7a4a; }
.runbook-rt-source.background-runtime { background: rgba(80,120,180,0.15); color: #5078b4; }
.runbook-rt-source.other { background: rgba(136,136,136,0.15); color: #777; }
.runbook-rt-headline { display: flex; align-items: center; }

/* Fleet card engine pills */
.fleet-engines { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 0.5px solid var(--line); }
.engine-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; font-family: var(--font-mono); }
.engine-pill.on  { background: rgba(47,122,74,0.13);  color: #2f7a4a; }
.engine-pill.off { background: rgba(136,136,136,0.13); color: #888; }
.engine-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Coverage Surfaces-deployed cards */
.surface-deployment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 8px; }
.surface-card { padding: 12px 14px; border-radius: var(--radius-lg); border: 0.5px solid var(--line); background: var(--color-bg-tile); position: relative; }
.surface-card.on      { border-left: 3px solid #2f7a4a; }
.surface-card.partial { border-left: 3px solid #b6822a; }
.surface-card.off     { border-left: 3px solid var(--color-ink-tertiary); opacity: 0.72; }
.surface-card-name  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-tertiary); }
.surface-card-count { font-family: var(--font-mono); font-size: 22px; font-weight: 500; margin-top: 3px; }
.surface-card-bar   { height: 4px; background: var(--color-bg-frame); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.surface-card-bar > div { height: 100%; background: #2f7a4a; transition: width 0.3s; }
.surface-card-hint  { margin-top: 6px; font-size: 11px; color: var(--color-ink-tertiary); line-height: 1.4; }

/* ── Runbook PII detector probes (Phase 4) ─────────────────────────── */
.pii-probe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.pii-probe-grid > button { font-size: 12px; padding: 7px 10px; text-align: left; }

.pii-cat-headline { font-family: var(--font-mono); font-size: 13px; margin-bottom: 10px; padding: 8px 10px; background: var(--color-bg-tile); border-radius: var(--radius-md); }
.pii-cat-grid { display: flex; flex-direction: column; gap: 4px; }
.pii-cat-row { display: grid; grid-template-columns: 180px 60px 1fr 50px; gap: 8px; align-items: center; padding: 4px 6px; font-size: 12px; }
.pii-cat-name { font-family: var(--font-mono); font-size: 11px; }
.pii-cat-count { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-tertiary); }
.pii-cat-bar { height: 8px; background: var(--color-bg-frame); border-radius: 2px; overflow: hidden; }
.pii-cat-bar > div { height: 100%; }
.pii-cat-bar > .cov-full    { background: #2f7a4a; }
.pii-cat-bar > .cov-partial { background: #b6822a; }
.pii-cat-bar > .cov-empty   { background: var(--color-ink-tertiary); }
.pii-cat-pct { font-family: var(--font-mono); font-size: 11px; text-align: right; }

/* ──────── provenance pill ──────── */
/* Small badge showing which producer surfaced the event behind an
   action. Drives the demo "this attack was caught by eBPF, the proxy
   never saw it" story. Color buckets:
     proxy             → green outline   (HTTP intercept)
     runtime · eBPF    → purple fill     (kernel observer — proxy blind)
     runtime · fs/etc. → blue outline    (user-space observer)
     shim              → amber outline   (MCP shim)
     unknown           → grey            (legacy / pre-provenance) */
.prov-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: lowercase;
}
.prov-pill.prov-proxy           { background: rgba(47, 122, 74, 0.10); border-color: #2f7a4a; color: #2f7a4a; }
.prov-pill.prov-runtime-ebpf    { background: rgba(132, 75, 191, 0.16); border-color: #844bbf; color: #6b3aa0; }
.prov-pill.prov-runtime-notify  { background: rgba(60, 110, 175, 0.10); border-color: #3c6eaf; color: #3c6eaf; }
.prov-pill.prov-shim            { background: rgba(182, 130, 42, 0.12); border-color: #b6822a; color: #8c5e16; }
.prov-pill.prov-unknown         { background: var(--color-bg-tile); border-color: var(--color-ink-tertiary); color: var(--color-ink-tertiary); }

/* Per-action provenance list under the subgraph in the incident view.
   Renders one row per action with verdict tag, subtype/excerpt, provenance
   pill, and timestamp. The clearest place in the UI for the eBPF demo:
   regulator hovers over the pill, reads the tooltip, gets the story
   without us writing a sentence. */
.action-prov-panel {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--color-bg-tile);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.action-prov-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-secondary);
  margin-bottom: 8px;
}
.action-prov-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}
.action-prov-row:first-of-type { border-top: none; }
.action-prov-text { font-family: var(--font-mono); color: var(--color-ink-primary); }
.action-prov-text strong { font-weight: 600; }

/* Per-member attack catalogue list (fleet detail panel → scenario
   tab). Each row pairs the catalogue card with a single "▶ run"
   button that targets THIS container only. Output renders inline
   below the row so it doesn't disrupt scroll position when multiple
   attacks are fired in sequence. */
.fleet-attacks-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fleet-attack-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-bg-tile);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.fleet-attack-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fleet-attack-meta > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-attack-meta > div:nth-child(3) { white-space: normal; color: var(--color-ink-tertiary); line-height: 1.4; }
.fleet-attack-title { font-family: var(--font-mono); font-size: 13px; }
/* ──────── 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: 13px;
  border: 1px solid var(--color-border);
}
.mcp-banner.ready    { background: rgba(47, 122, 74, 0.08); border-color: #2f7a4a; }
.mcp-banner.notready { background: rgba(182, 130, 42, 0.10); border-color: #b6822a; }
.mcp-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mcp-banner code { font-family: var(--font-mono); font-size: 12px; padding: 0 2px; }

.mcp-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.mcp-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .mcp-grid-2 { grid-template-columns: 1fr; } }

.mcp-panel { padding: 0; overflow: hidden; }
.mcp-config {
  margin: 0;
  background: #0d0c0a;
  color: #ece8df;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  max-height: 420px;
}
.mcp-config mark.leak {
  background: rgba(185, 28, 28, 0.85);
  color: #fff;
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 600;
}
.mcp-config mark.safe {
  background: rgba(47, 122, 74, 0.85);
  color: #fff;
  padding: 0 3px;
  border-radius: 2px;
}

.mcp-inv { display: flex; flex-direction: column; padding: 6px 0; }
.mcp-inv-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}
.mcp-inv-row:first-of-type { border-top: none; }
.mcp-inv-ref { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-primary); }

.mcp-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px;
}
@media (max-width: 900px) { .mcp-actions-grid { grid-template-columns: 1fr; } }
.mcp-run-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  text-align: left;
  height: auto;
  min-height: 92px;
  white-space: normal;
}
.mcp-run-btn.deny  { background: rgba(185, 28, 28, 0.10); border-color: #b91c1c; color: #b91c1c; }
.mcp-run-btn.pair  { background: var(--color-bg-tile); }
.mcp-run-btn .mcp-run-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-ink-tertiary);
  color: #fff;
}
.mcp-run-btn .mcp-run-tag.allow { background: #2f7a4a; }
.mcp-run-btn .mcp-run-tag.deny  { background: #b91c1c; }
.mcp-run-btn .mcp-run-title { font-size: 14px; font-weight: 600; font-family: var(--font-serif); }
.mcp-run-output {
  margin: 0 14px 14px;
  background: #0d0c0a;
  color: #ece8df;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  max-height: 240px;
  overflow: auto;
  min-height: 24px;
  white-space: pre-wrap;
}
.mcp-run-output:empty { display: none; }

.mcp-audit { display: flex; flex-direction: column; padding: 6px 0; }
.mcp-audit-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) minmax(0, 2fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}
.mcp-audit-row:first-of-type { border-top: none; }

.fleet-attack-out {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  background: #0d0c0a;
  color: #ece8df;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  max-height: 220px;
  overflow: auto;
}