/*
 * Copyright (c) 2026 Precision Innovations LLC. All Rights Reserved.
 *
 * Source-available — Tier 1. See LICENSE in this package.
 * Part of @precision-innovations/aperture-dashboard.
 *
 * Minimal handwritten stylesheet. Dark theme by default — matches
 * developer-tool conventions (think Datadog, Grafana, Logflare) and
 * is easier on the eyes during long debugging sessions and live demos.
 */

/* ─── tokens ────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* surface */
  --bg: #0f0f10;
  --panel: #18181a;
  --panel-elevated: #1f1f22;
  --border: #2a2a2d;
  --border-strong: #3a3a3e;

  /* ink */
  --text: #ececef;
  --text-muted: #8a8a90;
  --text-soft: #b4b4ba;

  /* accent — Holonograph iris (brand #5f3ddc, lifted so it reads on the near-black surface) */
  --accent: #8b6dff;
  --accent-soft: #2a2350;

  /* semantic */
  --success: #58c081;
  --warning: #e0a44a;
  --error: #e07b6e;

  /* spacing scale (8pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-8: 48px;

  /* typography */
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono:
    'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Liberation Mono', monospace;
  --line-tight: 1.3;
  --line-normal: 1.55;
}

/* ─── light theme ───────────────────────────────────────────────────────────
   The same token names remapped for a light background. The header toggle stamps
   data-theme='light' (persisted in localStorage); on boot main.js resolves the OS
   `prefers-color-scheme` when no choice is saved, and stamps data-theme either way —
   so a forced choice always wins over the OS preference. Dark is the bare :root
   default (data-theme='dark' or absent). */
:root[data-theme='light'] {
  color-scheme: light;

  /* surface — the brand's warm-cool "paper" + iris-tinted "line" */
  --bg: #f6f5f9;
  --panel: #ffffff;
  --panel-elevated: #efedf6;
  --border: #e4e1ee;
  --border-strong: #cfc9e0;

  /* ink — the brand ink ramp (#17161d / #4b4a57 / #8a8796) */
  --text: #17161d;
  --text-muted: #6f6c7d;
  --text-soft: #4b4a57;

  /* accent — the true brand iris on paper */
  --accent: #5f3ddc;
  --accent-soft: #e9e3fb;

  /* semantic — darkened for contrast on a light background */
  --success: #2c8a53;
  --warning: #9f6a18;
  --error: #bd4738;
}

/* ─── reset ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Base size drives every em/rem in the sheet. 17px keeps the small labels
     (0.7–0.85em) legible; the layout leans on progressive disclosure to stay dense. */
  font-size: 17px;
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-loading='true'] {
  /* Soften the FOUC during script boot. */
  opacity: 0.85;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* ─── layout ────────────────────────────────────────────────────────────── */

.app-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.app-header__brand {
  /* The Holonograph wordmark — letter-spaced uppercase mono (matches the brand mark). */
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text);
}

.app-header__divider {
  color: var(--text-muted);
}

.app-header__sub {
  color: var(--text-muted);
  font-size: 0.93em;
}

.app-tabs {
  display: flex;
  gap: var(--s-1);
  /* Full-width second row of the header — the two job/legacy groups need the room. */
  order: 3;
  width: 100%;
  margin-left: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}

.app-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-soft);
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  font-size: 0.95em;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.app-tab:hover {
  background: var(--panel-elevated);
  color: var(--text);
}

.app-tab.is-active {
  background: var(--panel-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}

.app-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Embed mode (?embed=1 — e.g. Nigel's hosted lens on holonograph.ai): hide the operator chrome so
   an iframed lens shows content only. The palette is fixed by the page (dark by default, or
   overridden with ?theme=light), so the theme toggle goes too. */
:root[data-embed] #settings-toggle,
:root[data-embed] #theme-toggle {
  display: none;
}

/* two-group nav: the four operator jobs (primary) + the current pages folding into them */
.app-tabs {
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s-2);
}
.app-tabs__group {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.app-tabs__group--legacy {
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border);
}
.app-tabs__grouplbl {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--s-1);
}
.app-tab--job {
  font-weight: 600;
  color: var(--text);
}
.app-tabs__group--legacy .app-tab {
  font-size: 0.86em;
  color: var(--text-muted);
}
.app-tabs__group--legacy .app-tab:hover {
  color: var(--text);
}
.app-tab--job.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

/* the not-yet-built job pages (Trust / Curate / Explore) — the IA frame outline */
.stub-page {
  max-width: 900px;
  display: grid;
  gap: var(--s-4);
}
.stub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.stub-job {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.stub-title {
  margin: 0;
  font-size: 1.25rem;
}
.stub-purpose {
  margin: 4px 0 0;
  max-width: 62ch;
  line-height: 1.5;
}
.stub-tag {
  flex: none;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
}
.stub-lead {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}
.stub-mods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.stub-mod {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 12px;
}
.stub-mod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.stub-mod__name {
  margin: 0;
  font-size: 0.92rem;
}
.stub-mod__from {
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.stub-mod__desc {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.stub-mod__mock {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.stub-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* Lens Status dialog (drift's new home) */
.lens-status__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.86rem;
}
.lens-status__kv dt {
  color: var(--text-muted);
}
.lens-status__kv dd {
  margin: 0;
  color: var(--text-soft);
}
.lens-status__log-lbl {
  margin: 4px 0 0;
  font-size: 0.72rem;
}
.lens-status__log {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* Lens Health — a header-anchored inline popover (not a centered modal) */
.lens-health-anchor {
  position: relative;
  display: inline-flex;
}
.lens-health-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 900;
  width: min(420px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 14px 16px;
}
/* a small caret pointing up at the button (anchored left, under the trigger) */
.lens-health-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: var(--panel);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
.lens-health-pop[hidden] {
  display: none;
}
.lens-health-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lens-health-pop__head h2 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.lens-health-pop__close {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 4px;
}
.lens-health-pop__close:hover {
  color: var(--text);
}
/* the header trigger — sits next to the logo, subtle until hover/open */
.lh-trigger {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 6px;
}
.lh-trigger:hover,
.lh-trigger[aria-expanded='true'] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* health "lights" — a colored status dot leads each signal */
.lh-lights {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}
.lh-light {
  display: grid;
  grid-template-columns: 10px max-content 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.lh-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lh-dot--ok {
  background: var(--success);
}
.lh-dot--warn {
  background: var(--warning);
}
.lh-dot--bad {
  background: var(--error);
}
.lh-light__lbl {
  color: var(--text-soft);
}
.lh-light__val {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}
.lh-light__val .muted {
  font-weight: 400;
}
/* progressive-load shimmer — a slow read (delivery reach · lens history · judge liveness) shows this
   until it lands, then swaps to its real value or the honest-null "—". Distinct from "—" so a still-
   loading field never reads as an absent one. */
.lh-loading-bar {
  display: inline-block;
  width: 4.5rem;
  height: 0.62em;
  vertical-align: -0.06em;
  border-radius: 3px;
  background: linear-gradient(
    100deg,
    var(--panel-elevated) 30%,
    var(--accent-soft) 50%,
    var(--panel-elevated) 70%
  );
  background-size: 220% 100%;
  animation: lh-shimmer 1.25s ease-in-out infinite;
}
.lh-loading-rows {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.lh-loading-rows .lh-loading-bar {
  width: 100%;
  height: 0.85rem;
}
@keyframes lh-shimmer {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -40% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lh-loading-bar {
    animation: none;
  }
}
/* provenance facts */
.lh-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.lh-facts dt {
  color: var(--text-muted);
}
.lh-facts dd {
  margin: 0;
  color: var(--text);
}
/* recent changes */
.lh-log-lbl {
  margin: 0 0 5px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lh-log {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.lh-log__date {
  display: inline-block;
  min-width: 44px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* escalation: glance popover → the topology-mesh slide-over */
.lh-open-map {
  cursor: pointer;
  margin-top: 12px;
  width: 100%;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}
.lh-open-map:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.view-host {
  padding: var(--s-5);
  max-width: 1280px;
  margin: 0 auto;
}

.app-footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88em;
  text-align: center;
}

/* ─── chips ─────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-elevated);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text-soft);
}

.chip__label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

.chip__value {
  color: var(--text);
}

.chip--error {
  border-color: var(--error);
  color: var(--error);
}

.chip--error .chip__value {
  color: var(--error);
}

/* ─── buttons ───────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-elevated);
  color: var(--text);
  font-size: 0.93em;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.button:hover {
  background: var(--border);
}

.button--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
}

.button--ghost:hover {
  background: var(--panel-elevated);
  color: var(--text);
}

/* On-brand primary (the accent is purple). White text on a slightly-darkened accent
 * reads cleanly in both themes; the old amber fill with near-black text did not. */
.button--primary {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: #fff;
  font-weight: 600;
}

.button--primary:hover {
  background: color-mix(in srgb, var(--accent) 76%, #000);
  border-color: color-mix(in srgb, var(--accent) 76%, #000);
}

/* ─── helpers ───────────────────────────────────────────────────────────── */

.muted {
  color: var(--text-muted);
}

.error-banner {
  padding: var(--s-3) var(--s-4);
  background: rgba(224, 123, 110, 0.08);
  border: 1px solid var(--error);
  border-radius: 6px;
  color: var(--error);
}

/* ─── settings dialog ───────────────────────────────────────────────────── */

.settings-dialog {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 0;
  width: min(520px, 90vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.settings-form {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.settings-form h2 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.settings-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
}

.settings-field input[type='url'],
.settings-field input[type='password'],
.settings-field input[type='text'] {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 8px 10px;
}

.settings-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
}

/* ─── shared view primitives (used by recent + drift in Blocks C/D) ───── */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-4);
}

.panel + .panel {
  margin-top: var(--s-4);
}

.panel__title {
  margin: 0 0 var(--s-3) 0;
  font-size: 0.92em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.kv__k {
  color: var(--text-muted);
}

.kv__v {
  color: var(--text);
  word-break: break-all;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

/* indicator dots for pass/fail/gated (used by drift.js) */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  vertical-align: middle;
}

.dot--pass {
  background: var(--success);
}

.dot--fail {
  background: var(--error);
}

.dot--gated {
  background: var(--warning);
}

/* Lens bookkeeping records (analysis.* / availability.*) — neutral, NOT a
   pass/fail signal. A distinct steel-blue hue so it never reads as an alarm. */
.dot--system {
  background: #6b8fb0;
}

/* ─── recent runs view ──────────────────────────────────────────────────── */

.recent-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.recent-toolbar {
  padding: var(--s-3) var(--s-4);
}

.recent-toolbar__meta {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.recent-toolbar__meta--error {
  color: var(--error);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter__label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.filter__select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 4px 8px;
}

.filter__select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.event-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.event-card[open] {
  border-color: var(--border-strong);
}

.event-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  flex-wrap: wrap;
}

.event-summary::-webkit-details-marker {
  display: none;
}

.event-summary:hover {
  background: var(--panel-elevated);
}

.event-summary__dot {
  flex: 0 0 8px;
}

.event-summary__time {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.85em;
  min-width: 100px;
}

.event-summary__time-clock {
  color: var(--text);
}

.event-summary__time-date {
  font-size: 0.85em;
}

.event-summary__correlation,
.event-summary__msgid,
.event-summary__tokens,
.event-summary__latency {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.event-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Humanized summary panel — sits above the four-layer JSON walls.
   At-a-glance signals (surface + description, speed, routing, lens,
   cohort tags) so the operator can read what a call was without
   parsing layer 1/2/3/4 JSON. */
.event-body__humanized {
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

.event-body__humanized-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: 0.88em;
}

.event-body__humanized-grid dt {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78em;
  align-self: start;
  padding-top: 0.15em;
}

.event-body__humanized-grid dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

.event-body__humanized-desc {
  font-size: 0.92em;
  color: var(--text-soft);
  margin-top: 0.25em;
  line-height: 1.4;
}

.event-summary__tag {
  display: inline-block;
  font-size: 0.85em;
  color: var(--text-soft);
  margin-right: 0.25em;
  padding: 0 0.35em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.event-body__layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* A lens system/analysis record carries ONE payload panel, not four layers. */
.event-body__layers--single {
  grid-template-columns: 1fr;
}

/* Neutral accent so a bookkeeping record is visually distinct from an
   evaluation card in the stream without shouting. */
.event-card--system {
  border-left: 2px solid #6b8fb0;
}

.event-body__layer h4 {
  margin: 0 0 var(--s-2) 0;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 500;
}

.event-body__json {
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-3);
  max-height: 320px;
  overflow: auto;
  margin: 0;
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--text-soft);
}

.event-body__meta {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* ─── drift view ────────────────────────────────────────────────────────── */

.drift-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.drift-toolbar {
  padding: var(--s-3) var(--s-4);
}

.drift-toolbar__meta {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.drift-toolbar__meta--error {
  color: var(--error);
}

.drift-panels {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.drift-panel-note {
  margin: var(--s-3) 0 0 0;
  font-size: 0.88em;
}

/* Change-log rows (light-source + substrate-columns) */

.drift-changelog {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drift-changelog__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.85em;
  flex-wrap: wrap;
}

.drift-changelog__arrow {
  font-weight: 700;
  color: var(--accent);
}

/* Per-surface pass-rate strip */

.drift-passrate {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drift-passrate__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  flex-wrap: wrap;
}

.drift-passrate__surface {
  min-width: 140px;
}

.drift-passrate__glyphs {
  font-family: var(--font-mono);
  font-size: 1.2em;
  letter-spacing: 4px;
  color: var(--text-soft);
}

.drift-passrate__pct {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.drift-passrate__pct--good {
  color: var(--success);
}

.drift-passrate__pct--warn {
  color: var(--warning);
}

.drift-passrate__pct--bad {
  color: var(--error);
}

.drift-passrate__count {
  font-family: var(--font-mono);
  font-size: 0.8em;
  min-width: 90px;
  text-align: right;
}

.drift-passrate__legend {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text);
  padding: 0 2px;
}

/* Drift attribution panel (C-8) */

.drift-attribution__claim {
  font-weight: 400;
  font-size: 0.85em;
}

.drift-attribution__surface {
  margin-top: var(--s-3);
}

.drift-attribution__surface:first-child {
  margin-top: var(--s-2);
}

.drift-attribution__surface-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.drift-attribution__count {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.drift-attribution__err {
  flex: 1;
}

.drift-attribution__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drift-attribution__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

.drift-attribution__row-top,
.drift-attribution__row-bottom {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.drift-attribution__source .chip__value {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drift-attribution__source--substrate {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
}

.drift-attribution__source--light-source {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.45);
}

.drift-attribution__source--lens {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.45);
}

.drift-attribution__source--noise {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.45);
}

.drift-attribution__delta {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 80px;
}

.drift-attribution__delta--up {
  color: var(--success);
}

.drift-attribution__delta--down {
  color: var(--error);
}

.drift-attribution__confidence--high .chip__value {
  color: var(--success);
}

.drift-attribution__confidence--medium .chip__value {
  color: var(--warning);
}

.drift-attribution__confidence--low .chip__value,
.drift-attribution__confidence--none .chip__value {
  color: var(--text-soft);
}

.drift-attribution__other {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding-left: var(--s-2);
}

/* Lens evolution panel (C-18 trajectory) */

.lens-evo__claim,
.lens-evo__count-head {
  font-weight: 400;
  font-size: 0.85em;
  margin-left: var(--s-2);
}

.lens-evo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.lens-evo__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

.lens-evo__row--latest {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.04);
}

.lens-evo__row-head,
.lens-evo__row-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.lens-evo__version .chip__value {
  font-weight: 600;
}

.lens-evo__current {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.45);
}

.lens-evo__current .chip__value {
  color: var(--success);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.lens-evo__bootstrap {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.45);
}

.lens-evo__at {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.lens-evo__rate {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}

.lens-evo__rate--good {
  color: var(--success);
}

.lens-evo__rate--warn {
  color: var(--warning);
}

.lens-evo__rate--bad {
  color: var(--error);
}

.lens-evo__delta {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 72px;
}

.lens-evo__delta--up {
  color: var(--success);
}

.lens-evo__delta--down {
  color: var(--error);
}

.lens-evo__count {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.lens-evo__summary {
  font-size: 0.9em;
  color: var(--text-soft);
  line-height: 1.5;
  padding: var(--s-2) 0 0 0;
  border-top: 1px dashed var(--border);
}

/* ─── C-5a multiplex view ──────────────────────────────────────────────── */

.c5a-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c5a-toolbar .filter__input {
  min-width: 280px;
  font-family: var(--font-mono);
}

.c5a-toolbar__hint {
  margin: var(--s-2) 0 0 0;
  font-size: 0.9em;
}

.c5a-toolbar__hint code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--panel-elevated);
}

.c5a-status {
  margin: 0;
  padding: var(--s-2) var(--s-2);
  font-size: 0.95em;
}

.c5a-status.error {
  color: var(--error);
}

.c5a-strip {
  display: block;
}

.c5a-strip.hidden {
  display: none;
}

.c5a-strip__heading {
  margin: 0 0 var(--s-3) 0;
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.c5a-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}

.c5a-strip__cell {
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-3);
}

.c5a-strip__cell--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .c5a-strip__cell--wide {
    grid-column: span 1;
  }
}

.c5a-strip__label {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.c5a-strip__value {
  font-family: var(--font-mono);
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: var(--s-1);
}

.c5a-strip__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
}

.c5a-strip__list code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.c5a-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.c5a-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.c5a-group[open] {
  border-color: var(--border-strong);
}

.c5a-group__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: 0.95em;
  flex-wrap: wrap;
}

.c5a-group__summary::-webkit-details-marker,
.c5a-group__summary::marker {
  display: none;
  content: '';
}

.c5a-group__time {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.c5a-group__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.c5a-group__corr {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.chip--primary {
  border-color: var(--success);
}

.chip--primary .chip__label {
  color: var(--success);
}

.chip--observer {
  border-color: var(--border-strong);
}

.chip--observer .chip__label {
  color: var(--text-muted);
}

.c5a-group__body {
  border-top: 1px solid var(--border);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c5a-panels {
  display: grid;
  gap: var(--s-3);
}

.c5a-panel {
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.c5a-panel--primary {
  border-color: var(--success);
}

.c5a-panel__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.c5a-panel__role {
  flex: 1 1 auto;
  min-width: 0;
}

.c5a-panel__role .chip__value {
  font-family: var(--font-mono);
  font-size: 0.8em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.c5a-panel__text {
  max-height: 280px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--s-2);
}

.c5a-panel__text pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-mono);
  font-size: 0.85em;
  line-height: 1.5;
}

.c5a-panel__raw {
  margin-top: var(--s-2);
  font-size: 0.85em;
}

.c5a-panel__raw summary {
  cursor: pointer;
}

.c5a-panel__json {
  max-height: 200px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--s-2);
  margin: var(--s-2) 0 0 0;
}

.c5a-panel__json code {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.c5a-diff__heading {
  margin: 0 0 var(--s-2) 0;
  font-size: 0.95em;
  font-weight: 600;
}

.c5a-diff__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.c5a-diff__table th,
.c5a-diff__table td {
  text-align: left;
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.c5a-diff__table th {
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.c5a-diff__col-vendor {
  font-family: var(--font-mono);
  font-size: 0.8em !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.c5a-diff__cell-actual code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.c5a-diff__cell-actual .dot {
  margin-right: 6px;
  vertical-align: baseline;
}

.c5a-diff__row--diverge {
  background: rgba(224, 123, 110, 0.06);
}

.c5a-diff__verdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.c5a-diff__verdict--agree {
  background: rgba(88, 192, 129, 0.12);
  color: var(--success);
}

.c5a-diff__verdict--diverge {
  background: rgba(224, 123, 110, 0.18);
  color: var(--error);
}

/* "compare vendors" link on Recent runs event cards */
.event-summary__compare {
  font-size: 0.85em;
  text-decoration: none;
  color: var(--text-soft);
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.event-summary__compare:hover {
  border-color: var(--success);
  color: var(--success);
}

/* Humanized descriptors on the C-5a multiplex group header — surface
   id, runMode, provenance as chips; description as a muted subtitle. */
.c5a-group__description {
  margin: var(--s-2) 0 0 0;
  padding: 0 var(--s-3);
  font-size: 0.9em;
  line-height: 1.4;
}

.c5a-group__surface,
.c5a-group__runmode,
.c5a-group__provenance {
  margin-right: var(--s-2);
}

/* Drift pass-rate row gains a description subtitle. The row main
   becomes a flex row carrying the chip + glyphs; the description
   sits beneath, indented to the chip column. */
.drift-passrate__row-main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.drift-passrate__description {
  margin: 0.25em 0 0 0;
  padding-left: var(--s-3);
  font-size: 0.88em;
  line-height: 1.4;
}

/* F16 Path B — projected-from-raw-response marker. Distinguishes
   sentinel-fallback values from operator-graded values in the
   per-dimension comparison table. The tilde is small, dimmed, and
   carries an explanatory tooltip. */
.c5a-diff__projected {
  display: inline-block;
  margin-right: 0.4em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.92em;
  cursor: help;
}

/* M2M — per-vendor cost rollup + operational-read auto-summary in
   the C-5a aggregate strip. */

.c5a-strip__ratio {
  font-size: 0.85em;
  font-family: var(--font-mono);
  font-weight: 400;
  margin-left: 0.4em;
}

.c5a-strip__opread {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

.c5a-strip__opread-list {
  margin: var(--s-2) 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.c5a-strip__opread-item {
  font-size: 0.94em;
  line-height: 1.5;
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  background: var(--panel-elevated);
  border-left: 3px solid var(--border-strong);
}

.c5a-strip__opread-item--routing {
  border-left-color: var(--success);
}

.c5a-strip__opread-item--edge {
  border-left-color: var(--accent);
}

.c5a-strip__opread-item--weak {
  border-left-color: var(--warning);
}

.c5a-strip__opread-item--cost {
  border-left-color: var(--text-soft);
}

/* ── Pagination footer ─────────────────────────────────────────────── */

.pagination-footer {
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0 var(--s-3);
}

.pagination-footer .button {
  min-width: 220px;
}

/* ── Lessons pipeline view (M4C) ───────────────────────────────────── */

.lessons-pipeline-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.lessons-pipeline-toolbar .row + .row {
  margin-top: var(--s-2);
}

/* Single column. This ceremony opens in the right-side slide-over (~600px), so a 3-up grid
 * crushed each lane to ~180px and wrapped the drafts one character per line. Stacked lanes,
 * full-width cards, legible. */
.lessons-pipeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4, 1.5rem);
}

/* ── lessons-pipeline toolbar: lead + kind filter + limit control ── */
.lp-lead {
  margin: 0 0 var(--s-3);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.lp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.lp-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lp-seg__btn {
  appearance: none;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}
.lp-seg__btn:first-child {
  border-left: none;
}
.lp-seg__btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lp-seg__btn.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.lp-status {
  font-size: 0.85rem;
}
/* per-lane "Load older" footer — cursor pagination, no cap (matches Explore) */
.lp-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-2) 0 0;
}
.lp-more__sentinel {
  width: 1px;
  height: 1px;
}

.lane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.lane--skill {
  border-color: var(--accent, var(--border));
}

.lane--stub {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.lane__header {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
}

.lane__title {
  margin: 0 0 var(--s-1);
  font-size: var(--font-2);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.lane__sub {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-0);
}

.lane__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* M4D — lessons-pipeline drafter card. Uses `<details>` so each card
 * is collapsed by default (50+ drafts shouldn't auto-expand) with
 * proposedName + metrics visible in the summary, full body inside.
 * Named `.drafter-card` rather than `.event-card` to avoid colliding
 * with the recent-runs `.event-card` styles above. */
.drafter-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── content-first drafter card (dc__): the proposal leads, the drafter run collapses last ── */
.dc__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.dc__kind {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.dc__kind--code-change-recommendation {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.dc__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.dc__time {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.dc__tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-soft) 14%, transparent);
  color: var(--text-soft);
}
.dc__tag--novel-pattern {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.dc__tag--existing-coverage-gap {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.dc__proposal {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dc__prose {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}
.dc__prose--lead {
  font-size: 1rem;
}
.dc__why {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}
.dc__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-right: 0.4rem;
}
.dc__block {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dc__block .dc__lbl {
  margin-right: 0;
}
.dc__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.dc__meta-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.dc__applies,
.dc__file {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.dc__file {
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  color: var(--text);
}
.dc__expected {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dc__expected li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.93rem;
}
.dc__verdict {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
}
.dc__verdict--pass {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.dc__verdict--fail {
  background: color-mix(in srgb, var(--error) 16%, transparent);
  color: var(--error);
}
.dc__expected-why {
  color: var(--text-muted);
}
.dc__sub {
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 0.4rem 0.6rem;
}
.dc__sub summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.dc__code {
  margin: 0.5rem 0 0;
  padding: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}
.dc__unparsed {
  margin: 0;
}
.dc__run {
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
}
.dc__run-sum {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.dc__run-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
}
.dc__run-line {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.dc__run-line code {
  font-family: var(--font-mono);
}

.drafter-card__details {
  display: flex;
  flex-direction: column;
}

.drafter-card__details[open] {
  border-color: var(--border-strong);
}

.drafter-card__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.drafter-card__summary::-webkit-details-marker {
  display: none;
}

.drafter-card__summary-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.drafter-card__name {
  font-family: var(--font-mono);
  font-size: var(--font-1);
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}

.drafter-card__time {
  font-family: var(--font-mono);
  font-size: var(--font-0);
  color: var(--text-soft);
  white-space: nowrap;
}

.drafter-card__summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--font-0);
  color: var(--text-soft);
  align-items: baseline;
}

.drafter-card__vendor {
  font-family: var(--font-mono);
  color: var(--text);
}

.drafter-card__summary-meta .metric--cost {
  color: var(--text);
  font-weight: 600;
}

.drafter-card__dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.drafter-card__dimensions .chip {
  font-size: var(--font--1, 12px);
  padding: 2px 8px;
}

.drafter-card__body {
  border-top: 1px solid var(--border);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.drafter-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.drafter-card__label {
  font-size: var(--font--1, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.drafter-card__rationale {
  margin: 0;
  color: var(--text);
  font-size: var(--font-0);
  line-height: 1.5;
}

.drafter-card__body-pre {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: var(--font--1, 12px);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
}

.drafter-card__footer {
  font-family: var(--font-mono);
  font-size: var(--font--1, 12px);
  color: var(--text-soft);
}

/* Per-lane count badge in the header. */
.lane__count {
  display: inline-block;
  min-width: 1.4rem;
  text-align: center;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-soft) 16%, transparent);
  color: var(--text-soft);
  font-size: var(--font-0);
  font-weight: 600;
  vertical-align: middle;
}

/* Drafter-card CTA panel — Approve (publish) / Reject, gated through the shared approver gate.
 * Always visible (below the collapsible details), so the actions read as calls-to-action. */
.drafter-card__actions {
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.drafter-card__actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
/* `:not([hidden])` so the `hidden` toggle (removeAttribute/setAttribute) actually hides it —
 * a bare `display: flex` would beat the UA `[hidden] { display: none }` rule on specificity. */
.drafter-card__reject-form:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.drafter-card__reject-comment {
  width: 100%;
  font: inherit;
  font-size: var(--font-0);
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.drafter-card__action-status {
  font-size: var(--font-0);
  color: var(--text-soft);
}
.action-status--pending {
  color: var(--text-soft);
}
.action-status--success {
  color: var(--success);
}
.action-status--error {
  color: var(--error);
}
/* Code-change recommendations are advisory — a human applies them in the editor, so no publish. */
.drafter-card__advisory {
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
  font-size: var(--font-0);
  color: var(--text-soft);
  font-style: italic;
}
/* On-brand primary action (the accent is purple). White text on a slightly-darkened accent
 * reads cleanly in both themes; a bright-green fill with dark text did not. */
.button--approve {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: #fff;
  font-weight: 600;
}
.button--approve:hover {
  background: color-mix(in srgb, var(--accent) 76%, #000);
  border-color: color-mix(in srgb, var(--accent) 76%, #000);
}
.button--reject {
  background: transparent;
  border-color: color-mix(in srgb, var(--error) 50%, var(--border));
  color: var(--error);
}
.button--reject:hover {
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.chip--trigger {
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  color: var(--text);
  font-size: var(--font--1, 12px);
  padding: 2px 8px;
}

.chip--applies {
  background: color-mix(in srgb, var(--accent, #4a90e2) 18%, transparent);
  color: var(--accent, #4a90e2);
  font-size: var(--font--1, 12px);
  padding: 2px 8px;
}

/* M5A — wrapper-injected cohort tag chips on drafter cards. Surfaced on
 * the summary line so the operator sees the classification + cluster
 * linkage without expanding the card. */
.drafter-card__meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
}

.chip--classification {
  font-size: var(--font--1, 12px);
  padding: 2px 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chip--classification--novel-pattern {
  background: color-mix(in srgb, var(--accent, #4a90e2) 22%, transparent);
  color: var(--accent, #4a90e2);
}

.chip--classification--existing-coverage-gap {
  background: color-mix(in srgb, var(--warn, #c89832) 22%, transparent);
  color: var(--warn, #c89832);
}

.chip--cluster {
  background: color-mix(in srgb, var(--text-soft) 10%, transparent);
  color: var(--text-soft);
  font-size: var(--font--1, 12px);
  padding: 2px 8px;
  font-family: var(--font-mono);
}

.chip--cluster code {
  color: var(--text);
}

/* M5A — lesson lane mirrors the skill lane visually; declare it
 * explicitly so the .lane--skill border highlight on the lessons-pipeline
 * grid doesn't make lesson cards feel second-class. */
.lane--lesson {
  /* Inherits .lane base styles; placeholder for future lane-specific overrides. */
}

.chip--pass {
  background: color-mix(in srgb, var(--pass, #2a9d3c) 18%, transparent);
  color: var(--pass, #2a9d3c);
}

.chip--fail {
  background: color-mix(in srgb, var(--fail, #d33) 18%, transparent);
  color: var(--fail, #d33);
}

.lane__stub-card {
  border: 1px dashed var(--border);
  border-radius: var(--radius-1);
  padding: var(--s-3);
  background: var(--bg);
}

/* ─── Topology view (M6E-3) ──────────────────────────────────────────── */

.topology-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.topology-readonly-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-left: 3px solid var(--accent);
}

.topology-readonly-banner__pill {
  flex: none;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px var(--s-2);
  border-radius: var(--radius-1);
}

.topology-toolbar .row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.topology-toolbar__meta--error {
  color: var(--error);
}

.topology-report {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.topology-section__title {
  margin: 0 0 var(--s-1);
  font-size: 1rem;
}

.topology-section__title-note,
.topology-section__sub {
  font-weight: 400;
  font-size: 0.85rem;
}

.topology-section__sub {
  margin: 0 0 var(--s-3);
}

.topology-altitude-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}

.topology-altitude {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.topology-altitude__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.topology-altitude__head h4 {
  margin: 0;
}

.topology-altitude__hint {
  font-size: 0.72rem;
}

.topology-stream__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.topology-stream__label {
  font-weight: 600;
  font-size: 0.85rem;
}

.topology-stream__formula {
  font-size: 0.74rem;
  margin: 2px 0 var(--s-1);
}

.topology-stream__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.topology-stream__unknown {
  font-size: 0.78rem;
  font-style: italic;
}

.topology-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 1px var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--panel-elevated);
  color: var(--text-soft);
}

.topology-chip--pick {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--border-strong);
}

.topology-chip--pick:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* M9B-3 — owner-namespace badge + the badge+chip pair wrapper. */
.topology-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topology-owner {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: var(--radius-1);
  border: 1px solid var(--border);
  color: var(--text-soft);
  background: transparent;
}

/* product surfaces (the customer's): quiet, default emphasis. */
.topology-owner--product {
  border-color: var(--border-strong);
}

/* system surfaces (Holon platform — drafters/judges): stand out. */
.topology-owner--system {
  border-color: var(--accent);
  color: var(--accent);
}

.topology-ownership-note {
  margin-top: var(--s-1);
}

.topology-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-3);
  font-size: 0.85rem;
}

.topology-kv__k {
  color: var(--text-muted);
}

.topology-kv__v--em {
  font-weight: 600;
  color: var(--accent);
}

.topology-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: var(--s-2);
}

.topology-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
}

.topology-table td {
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.topology-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.topology-num--em {
  font-weight: 700;
  color: var(--accent);
}

.topology-flag {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.topology-flag--muted {
  background: var(--panel-elevated);
  color: var(--text-muted);
}

.topology-blast {
  display: inline-block;
  font-size: 0.74rem;
  padding: 0 var(--s-1);
  border-radius: var(--radius-1);
}

.topology-blast--low {
  background: color-mix(in srgb, var(--text-muted) 22%, transparent);
  color: var(--text-soft);
}

.topology-blast--moderate {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
}

.topology-blast--high {
  background: color-mix(in srgb, var(--error) 22%, transparent);
  color: var(--error);
}

.topology-blast--critical {
  background: var(--error);
  color: #1a1a1a;
  font-weight: 700;
}

/* F54 / JD-8 — judge-dispatch liveness status pills. */
.topology-judge-status {
  display: inline-block;
  font-size: 0.74rem;
  padding: 0 var(--s-1);
  border-radius: var(--radius-1);
}

.topology-judge-status--dispatching {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

.topology-judge-status--not-dispatching {
  background: var(--error);
  color: #1a1a1a;
  font-weight: 700;
}

.topology-judge-status--not-observed {
  background: var(--panel-elevated);
  color: var(--text-muted);
}

.topology-judge-alarm {
  margin-top: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-left: 3px solid var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--text-soft);
  font-size: 0.82rem;
}

.topology-normality--near {
  color: var(--success);
}

.topology-normality--moderate {
  color: var(--warning);
}

.topology-normality--non {
  color: var(--error);
}

.topology-normality--unknown {
  color: var(--text-muted);
}

.topology-viability__verdict {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-3);
  font-size: 0.9rem;
}

.topology-blast-dist {
  margin-top: var(--s-3);
}

.topology-blast-dist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.topology-caveat,
.topology-caveats {
  font-size: 0.78rem;
  margin: var(--s-2) 0 0;
}

.topology-caveats {
  padding-left: var(--s-4);
}

.topology-fdr {
  margin-top: var(--s-3);
  background: var(--bg);
}

.topology-fdr__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.85rem;
}

.topology-fdr__pill {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--accent);
}

.topology-bootstrap__controls {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.topology-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  color: var(--text);
  padding: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.topology-input:focus {
  outline: none;
  border-color: var(--accent);
}

.topology-bootstrap__result {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.topology-bootstrap__head,
.topology-candidate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.topology-candidate {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.topology-candidate__id {
  font-weight: 600;
}

.topology-candidate__scoring {
  font-size: 0.78rem;
}

.topology-candidate__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: 0.8rem;
}

.topology-rationales__list {
  margin: var(--s-1) 0 0;
  padding-left: var(--s-4);
  font-size: 0.8rem;
}

.topology-raw__json {
  max-height: 420px;
  overflow: auto;
  font-size: 0.74rem;
}

.lane__stub-title {
  margin: 0 0 var(--s-1);
  font-weight: 600;
}

/* ─── M9B-3 eval workbench ─────────────────────────────────────────────── */
.eval-readonly-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}
.eval-readonly-banner__pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px var(--s-2);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-1);
}
.eval-toolbar .row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.eval-toolbar .spacer {
  flex: 1;
}
.eval-toolbar__toggle {
  font-size: 0.82rem;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.eval-card {
  padding: var(--s-4);
  margin-top: var(--s-2);
}
.eval-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}
.eval-card__title {
  margin: 0;
}
.eval-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: 0.8rem;
  margin: var(--s-1) 0 var(--s-3);
}
.eval-insight {
  font-size: 0.86rem;
  color: var(--text);
  background: var(--panel-elevated);
  border-left: 3px solid var(--error);
  border-radius: 0;
  padding: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3);
}

/* status + verdict badges */
.eval-status,
.eval-verdict {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--s-2);
  border-radius: var(--radius-1);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  white-space: nowrap;
}
.eval-status--locked {
  border-color: var(--accent);
  color: var(--accent);
}
.eval-status--approved,
.eval-verdict--viable {
  border-color: var(--success);
  color: var(--success);
}
.eval-status--quarantined,
.eval-verdict--insufficient-n,
.eval-verdict--instrument-limited,
.eval-verdict--stale-floor {
  border-color: var(--warning);
  color: var(--warning);
}
.eval-status--rejected,
.eval-verdict--contaminated {
  border-color: var(--error);
  color: var(--error);
}
.eval-verdict--degenerate {
  border-color: var(--border-strong);
  color: var(--text-soft);
}

/* waterfall svg */
.wf-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--s-2) 0;
}
.wf-bar--base {
  fill: var(--text-soft);
  opacity: 0.55;
}
.wf-bar--drop {
  fill: var(--border-strong);
}
.wf-bar--rise {
  fill: var(--error);
}
.wf-bar--result {
  fill: var(--accent);
}
.wf-refline {
  stroke: var(--text-soft);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}
.wf-reftext {
  fill: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}
.wf-val {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
}
.wf-xlabel {
  fill: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* lens-discrimination strip */
.eval-lens-strip {
  margin: var(--s-3) 0;
}
.eval-lens-strip__label {
  font-size: 0.75rem;
}
.eval-lens-strip__bars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}
.eval-lens {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
}
.eval-lens--placeholder {
  border-color: var(--error);
}
.eval-lens__ver {
  font-size: 0.62rem;
  color: var(--text-soft);
}
.eval-lens__mean {
  font-size: 0.82rem;
  color: var(--text);
}

/* recommendation block */
.eval-rec {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.eval-rec__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.eval-rec__rationale {
  font-size: 0.86rem;
  margin: var(--s-2) 0;
}
.eval-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.eval-check {
  display: flex;
  gap: var(--s-2);
  font-size: 0.78rem;
  padding-left: var(--s-3);
  border-left: 2px solid var(--border-strong);
}
.eval-check--pass {
  border-left-color: var(--success);
}
.eval-check--fail {
  border-left-color: var(--error);
}
.eval-check__name {
  font-family: var(--font-mono);
  min-width: 140px;
}

/* run list */
.eval-runlist {
  margin-top: var(--s-2);
  padding: var(--s-3);
}
.eval-runlist__items {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
}
.eval-runlist__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  padding: var(--s-1) var(--s-2);
  cursor: pointer;
  color: var(--text);
}
.eval-runlist__btn:hover {
  border-color: var(--border-strong);
  background: var(--panel-elevated);
}
.eval-runlist__item--selected .eval-runlist__btn {
  border-color: var(--accent);
}
.eval-best-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-1);
  padding: 0 var(--s-1);
}

/* gated curation controls (3b-ii) */
.eval-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.eval-actions__status {
  font-size: 0.8rem;
}
.eval-actions__status--error {
  color: var(--error);
}

/* ─── Conformance desk (C3) — content-first, single-column (renders in the ~600px slide-over) ─── */
.conformance-view {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* intro — what the desk is + the 3-step model, so the operator knows what to do */
.conformance-intro {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.conformance-intro__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--text);
}
.conformance-intro__lede {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
.conformance-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.conformance-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.conformance-step__n,
.conformance-step-head__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

/* step 1 — authoring */
.conformance-authoring {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.conformance-step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.conformance-authoring__hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}
.conformance-surface-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--s-3);
  resize: vertical;
}
.conformance-surface-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.conformance-authoring__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.conformance-authoring__load {
  cursor: pointer;
}
.conformance-authoring__status {
  font-size: 0.85rem;
}
.conformance-authoring__status--error {
  color: var(--error);
}

/* results */
.conformance-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.conformance-summary {
  margin: 0;
  font-size: 0.9rem;
}
.conformance-run {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.conformance-run__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.conformance-run__surfaceid {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}

/* coverage strip — color-coded count pills + required markers */
.conformance-coverage {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}
.conformance-cov__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.conformance-cov__pill {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
.conformance-cov__pill--trace {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.conformance-cov__pill--judge {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.conformance-cov__pill--unenf {
  background: color-mix(in srgb, var(--text-soft) 14%, transparent);
  color: var(--text-soft);
}
.conformance-cov__total {
  font-size: 0.82rem;
}
.conformance-cov__markers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}
.conformance-cov__markers-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-right: 0.2rem;
}
.conformance-marker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  color: var(--text);
}

/* enforceability groups */
.conformance-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.conformance-group__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.conformance-group__title {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.conformance-group__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-soft) 16%, transparent);
  color: var(--text-soft);
}
.conformance-group__gloss {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* enforceability badge */
.conformance-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-soft) 14%, transparent);
  color: var(--text-soft);
  white-space: nowrap;
}
.conformance-badge--trace-enforceable {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.conformance-badge--judge-required {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.conformance-badge--unenforceable {
  background: color-mix(in srgb, var(--text-soft) 14%, transparent);
  color: var(--text-soft);
}

/* content-first candidate card (cc__): the rule prose leads, the assertion + telemetry recede */
.conformance-candidate {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}
.cc__desc {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.55;
}
.cc__assertion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.cc__sentence {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-soft);
}
.cc__flag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.cc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.cc__status {
  font-size: 0.82rem;
}
.cc__status--ok {
  color: var(--success);
}
.cc__status--error {
  color: var(--error);
}
.cc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.cc__meta span:first-child {
  font-family: var(--font-mono);
}
.conformance-candidate--approved {
  opacity: 0.55;
}

/* needs-repair */
.conformance-repair {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-2);
}
.conformance-repair__title {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}
.conformance-repair__lede {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.conformance-repair__row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}
.conformance-repair__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.conformance-repair__desc {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.conformance-repair__reason {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* clerk-response issue banner */
.conformance-clerk-issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}
.conformance-clerk-issue__reason {
  margin: var(--s-1) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* approved fixtures */
.conformance-approved {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.conformance-approved__title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.conformance-approved__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.conformance-approved__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}
.conformance-approved__desc {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.conformance-approved__ruleid {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* C4 — conformance-check verdict badge + result strip (approved-fixtures list) */
.conformance-approved__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.conformance-check-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.conformance-check-result__violations {
  flex-basis: 100%;
  margin-top: var(--s-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: baseline;
}
.conformance-verdict {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--s-2);
  border-radius: var(--radius-1);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  white-space: nowrap;
}
.conformance-verdict--ok {
  border-color: var(--success);
  color: var(--success);
}
.conformance-verdict--fail {
  border-color: var(--error);
  color: var(--error);
}
.conformance-verdict--warn {
  border-color: var(--warning);
  color: var(--warning);
}
.conformance-verdict--muted {
  border-color: var(--border-strong);
  color: var(--text-soft);
}

/* ─── Verdict Reliability view ──────────────────────────────────────────── */
.vr-tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
.vr-chip {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.85rem;
}
.vr-chip strong {
  font-size: 1rem;
}
.vr-question {
  border-color: var(--error);
  color: var(--error);
}
.vr-trust {
  border-color: var(--success);
  color: var(--success);
}
.vr-review {
  border-color: var(--warning);
  color: var(--warning);
}
.vr-total {
  color: var(--text-muted);
}
.vr-section {
  margin: var(--s-5) 0;
}
.vr-section h3 {
  font-size: 0.95rem;
  margin-bottom: var(--s-2);
}
.vr-flagged {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vr-flagged-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-strong);
  font-size: 0.85rem;
}
.vr-flagged-item .vr-surface {
  color: var(--accent);
  min-width: 12rem;
}
.vr-flagged-item .vr-drivers {
  color: var(--error);
}
.vr-flagged-item .vr-eventid {
  color: var(--text-muted);
  margin-left: auto;
  font-family: monospace;
}
.vr-rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.vr-rates th,
.vr-rates td {
  text-align: left;
  padding: var(--s-1) var(--s-3);
  border-bottom: 1px solid var(--border-strong);
}
.vr-rates td.num,
.vr-rates th:not(:first-child) {
  text-align: right;
}

/* Shared view header/body + refresh button (also used by verdict-reliability). */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.view-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.xp-open-err__detail {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-soft);
  overflow-x: auto;
}
/* Act finding → full corpus view (items 7-8) */
.act-corpus-link {
  display: inline-block;
  margin: 0.5rem 0 0.25rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 550;
  cursor: pointer;
}
.act-corpus-link:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.view-header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.app-button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  font: inherit;
}
.app-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Compact secondary action (e.g. Explore's σ² decomposition — a niche escalation, not a
   primary button): smaller type + tighter padding so it sits quietly beside the header. */
.app-button--sm {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}
/* Icon-only action (e.g. Refresh → ↻): square, glyph-centered; the label lives on title/aria. */
.app-button--icon {
  padding: 0.2rem 0.45rem;
  font-size: 0.95rem;
  line-height: 1;
}

/* Trajectory (wrongful-refusal) view. */
.traj-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.traj-notes {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.traj-note {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--text-muted);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.traj-note--warn {
  border-left-color: var(--warning);
  color: var(--text);
}
.traj-note code {
  font-family: var(--font-mono);
  color: var(--accent);
}
.traj-section h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--s-3);
}
.traj-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.traj-finding {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: var(--s-3);
  background: var(--panel);
}
.traj-finding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.traj-finding__surface {
  font-weight: 600;
}
.traj-finding__convo {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.traj-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.traj-badge--p3-disclaim-then-recover {
  border-color: var(--error);
  color: var(--error);
}
.traj-badge--p2-user-reask {
  border-color: var(--warning);
  color: var(--warning);
}
.traj-badge--p1-and-t4 {
  border-color: var(--accent);
  color: var(--accent);
}
.traj-evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.traj-evi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 0.82rem;
}
.traj-evi__role {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.traj-evi__role--refusal {
  color: var(--error);
}
.traj-evi__role--recovery {
  color: var(--success);
}
.traj-evi__note {
  color: var(--text);
}
.traj-evi__eventid {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── Act (attention inbox) ─────────────────────────────────────────────────
 * Dense monitoring-console feel (§6 density spec): 8px card radii, ~6px pill
 * tags, ~10px padding, ~21px tile values. Severity is the loud channel; triage
 * state is a separate, quieter pill.
 */

.act-subtitle {
  font-size: 0.85rem;
  font-weight: 400;
}

.act-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.act-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--panel);
}
.act-tile__value {
  font-size: 21px;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.act-tile__unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.act-tile--alarm {
  border-left-color: var(--error);
}
.act-tile--needs-review {
  border-left-color: var(--warning);
}
.act-tile--untriaged {
  border-left-color: var(--accent);
}
.act-tile--total {
  border-left-color: var(--border-strong);
}

.act-filters {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-3);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.act-filters select {
  margin-left: var(--s-1);
  background: var(--panel-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font: inherit;
}
.act-filters__spacer {
  flex: 1 1 auto;
}

/* Sort toggle (Severity | Newest) — a segmented control on the accent. */
.act-sort {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.act-sort__btn {
  appearance: none;
  border: 0;
  background: var(--panel-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  padding: 3px 10px;
  cursor: pointer;
}
.act-sort__btn + .act-sort__btn {
  border-left: 1px solid var(--border);
}
.act-sort__btn.is-active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.act-sort__btn:hover:not(.is-active) {
  color: var(--text);
}

/* "Just fired" band — recent gate catches, an amber-bordered spotlight above the queue. */
.act-just-fired {
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}
.act-just-fired__head {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.act-just-fired__spark {
  color: var(--warning);
}

.act-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.act-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.act-row--open {
  border-color: var(--border-strong);
}
.act-row__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.act-row__head:hover {
  background: var(--panel-elevated);
}
.act-row__label {
  font-weight: 600;
  white-space: nowrap;
}
.act-row__ref {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.act-row__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.act-row__age {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: right;
}
.act-row__chev {
  color: var(--text-muted);
  transition: transform 0.12s ease;
}
.act-row--open .act-row__chev {
  transform: rotate(90deg);
}
/* A row whose LIVE evidence drilled empty — its header count/age are a stale prior-scan
   snapshot the current lens no longer reproduces (TR 2026-08-21). De-emphasize the
   misleading numbers and tag it "aged out" so it never reads as a live systematic failure. */
.act-row--stale .act-row__count,
.act-row--stale .act-row__age {
  opacity: 0.4;
  text-decoration: line-through;
}
.act-row__stale {
  font-size: 0.7rem;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  padding: 0 0.4em;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* pills — ~6px tags, not lozenges */
.act-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.act-pill--sev.act-sev--alarm {
  background: color-mix(in srgb, var(--error) 18%, transparent);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}
.act-pill--sev.act-sev--needs-review {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}
.act-pill--sev.act-sev--coverage {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-soft);
  border-color: var(--border-strong);
}
.act-pill--state {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--panel-elevated);
}
.act-pill--state.act-state--untriaged {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.act-pill--state.act-state--confirmed-defect {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}
.act-pill--state.act-state--acknowledged {
  color: var(--text-soft);
}
.act-pill--state.act-state--resolved {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.act-drawer {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--panel-elevated);
}
.act-evidence-summary {
  margin: 0 0 var(--s-3);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.act-evidence-summary[title] {
  cursor: help;
}
.act-es__count {
  color: var(--text);
  font-weight: 650;
}
.act-es__range {
  color: var(--text-soft);
  border-bottom: 1px dotted var(--border-strong);
}

/* the lazily-loaded consolidated judge-check card */
.act-evidence {
  margin: 0 0 var(--s-3);
}
.act-ev-loading,
.act-ev-empty {
  font-size: 0.82rem;
  margin: 0;
}
/* The honest "evidence aged out" drill state — the header count is a prior-scan snapshot
   the live re-derivation no longer reproduces. */
.act-ev-stale {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-ev-stale > p {
  margin: 0;
}
.act-ev-stale__ic {
  opacity: 0.7;
}
.act-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.act-card__lede {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act-card__headline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.act-card__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.act-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 2px;
}

/* the "Judge said ≠ Reality" conflict */
.act-conflict {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: stretch;
  gap: 2px;
}
.act-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
}
.act-pane--claim {
  border-color: color-mix(in srgb, var(--error) 30%, var(--border));
}
.act-pane--truth {
  border-color: color-mix(in srgb, var(--success) 26%, var(--border));
}
.act-pane h4 {
  margin: 0 0 8px;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.act-pane ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  flex: 1;
}
.act-pane li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 7px;
  font-size: 0.84rem;
  line-height: 1.4;
}
.act-pane code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.act-mk {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}
.act-mk--no {
  color: var(--error);
}
.act-mk--yes {
  color: var(--success);
}
.act-mk--q {
  color: var(--warning);
}
.act-note {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-top: 2px;
}
.act-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--error);
  font-size: 1.1rem;
  font-weight: 600;
}
.act-pane__verdict {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.act-pane__verdict .act-badge {
  margin-left: 0;
}
.act-pane__gloss {
  font-weight: 600;
}
.act-pane__gloss--bad {
  color: var(--error);
}
.act-pane__gloss--ok {
  color: var(--success);
}
.act-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-left: 4px;
}
.act-badge--pass {
  color: var(--text-soft);
}
.act-badge--fail {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}
.act-badge--clean {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.act-conseq {
  margin: 0;
  padding: 9px 12px;
  border-left: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 6%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  color: var(--text-soft);
}

/* collapsed evidence details */
.act-ev-more {
  border-top: none;
}
.act-ev-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.act-ev-more > summary::-webkit-details-marker {
  display: none;
}
.act-ev-more > summary:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--panel-elevated);
}
.act-ev-more__caret {
  transition: transform 0.15s ease;
  font-size: 0.6rem;
}
.act-ev-more[open] .act-ev-more__caret {
  transform: rotate(90deg);
}
.act-ev-more__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-2) 0 2px;
}
.act-turn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
}
.act-turn__who {
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.act-turn__txt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.act-kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
}
.act-kv dt {
  color: var(--text-muted);
}
.act-kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.act-ids {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.act-ids b {
  color: var(--text-soft);
  font-weight: 500;
}

/* the orthogonality "Hidden factor" card */
.act-card__tag--hf {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
/* the group bar chart */
.act-hf-chart__h {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}
.act-hf-chart__sub {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.act-hf-plot {
  position: relative;
  margin-top: 8px;
  padding-top: 14px;
}
.act-hf-avg {
  position: absolute;
  top: 14px;
  bottom: 4px;
  width: 0;
  border-left: 1px dashed var(--text-muted);
  pointer-events: none;
}
.act-hf-avg span {
  position: absolute;
  top: -13px;
  left: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.act-hf-bar {
  display: grid;
  grid-template-columns: 72px 1fr 44px 40px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}
.act-hf-bar__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-hf-bar__name code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.act-hf-bar__track {
  height: 9px;
  background: var(--panel);
  border-radius: 999px;
  overflow: hidden;
}
.act-hf-bar__fill {
  display: block;
  height: 100%;
  background: var(--warning);
  border-radius: 999px;
}
.act-hf-bar__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8rem;
}
.act-hf-bar__n {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.act-hf-caption {
  margin: 9px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.act-hf-caption b {
  color: var(--text-soft);
}

/* one significance line */
.act-hf-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.82rem;
  color: var(--text-soft);
}
.act-hf-trust__ck {
  font-weight: 700;
  line-height: 1.4;
}
.act-hf-trust--ok .act-hf-trust__ck {
  color: var(--success);
}
.act-hf-trust--warn {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, transparent);
}
.act-hf-trust--warn .act-hf-trust__ck {
  color: var(--warning);
}

/* the agent-vs-eval fork */
.act-hf-fork {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.act-hf-fork__t {
  margin: 0;
  padding: 10px 13px;
  font-size: 0.82rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.act-hf-fork__o {
  position: relative;
  margin: 0;
  padding: 8px 13px 8px 26px;
  font-size: 0.82rem;
  color: var(--text);
}
.act-hf-fork__o::before {
  content: '—';
  position: absolute;
  left: 13px;
  color: var(--text-muted);
}
.act-hf-fork__f {
  margin: 0;
  padding: 9px 13px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-muted);
  background: var(--bg);
}

/* the traffic-mix consequence (amber, a validity concern — not an error) */
.act-conseq--hf {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
  color: var(--text-soft);
}
.act-hf-mix {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* collapsed evidence rows */
.act-hf-evbody {
  gap: 0;
}
.act-hf-ev {
  display: grid;
  grid-template-columns: 108px 92px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
.act-hf-ev:first-child {
  border-top: 0;
}
.act-hf-ev__t {
  color: var(--text-muted);
}
.act-hf-ev__v {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
}
.act-hf-ev__m {
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}
.act-hf-caveats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-hf-caveats p {
  margin: 0;
  padding: 7px 10px;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
  border-left: 2px solid var(--warning);
  border-radius: 0 6px 6px 0;
}

/* instrument partition — the diagnosis behind instrumentHeterogeneous (TR 0.40.3) */
.act-hf-instr {
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--warning) 4%, transparent);
}
.act-hf-instr__h {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border));
}
.act-hf-instr__k {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-mono);
}
.act-hf-instr__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
.act-hf-instr__row:first-of-type {
  border-top: 0;
}
.act-hf-instr__id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.act-hf-instr__row--unknown .act-hf-instr__id {
  color: var(--warning);
  font-style: italic;
}
.act-hf-instr__n {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.act-hf-instr__mean {
  font-family: var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}
.act-hf-instr__f {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border));
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg);
}

/* replay-unavailable banner — evidence predates full input capture (TR reAdjudicable) */
.act-readjudicable {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.82rem;
  color: var(--text-soft);
}
.act-readjudicable__ic {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.3;
}

/* the trajectory "Wrongful refusal" card */
.act-card__tag--wr {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
}
.act-wr-arc {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.act-wr-turn {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.act-wr-turn--refusal {
  border-color: color-mix(in srgb, var(--error) 30%, var(--border));
  background: color-mix(in srgb, var(--error) 6%, transparent);
}
.act-wr-turn--recovery {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 6%, transparent);
}
.act-wr-turn__mk {
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.act-wr-turn--refusal .act-wr-turn__mk {
  color: var(--error);
}
.act-wr-turn--recovery .act-wr-turn__mk {
  color: var(--success);
}
.act-wr-turn--user-reask .act-wr-turn__mk,
.act-wr-turn--availability-unused .act-wr-turn__mk {
  color: var(--warning);
}
.act-wr-turn__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.act-wr-turn__role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.act-wr-turn__ix {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.act-wr-turn__txt {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.act-wr-turn__note {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.act-wr-also {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.act-wr-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
}
.act-conseq--wr {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 6%, transparent);
}

/* the judge-liveness "Judge didn't run" card */
.act-card__tag--jl {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
}
.act-jl-stat {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.84rem;
  color: var(--text-soft);
}
.act-jl-stat__big {
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--error);
}
/* Why / Fix / Rubric guidance rows */
.act-jl-guide {
  display: grid;
  gap: 6px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.act-jl-guide p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.act-jl-guide__lbl {
  display: inline-block;
  min-width: 30px;
  margin-right: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.act-jl-guide code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  word-break: break-all;
}
.act-conseq--jl {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 6%, transparent);
}

/* the coverage-gap "Blind spot" card — the quiet `coverage` band, neutral not alarming */
.act-card__tag--cg {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
}
.act-cg-stat {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.84rem;
  color: var(--text-soft);
}
.act-cg-stat__big {
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* the two honest causes — mis-routed vs dead contract */
.act-cg-fork {
  display: grid;
  gap: 6px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.act-cg-fork p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.act-cg-fork__lbl {
  font-weight: 600;
  color: var(--text);
}
.act-cg-fork__lbl::after {
  content: ' — ';
  color: var(--text-muted);
}
.act-conseq--cg {
  border-left-color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 5%, transparent);
}

/* the quarantine-candidate "Held out" card — needs-review band (amber), reuses the .act-cg-* layout */
.act-card__tag--ho {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.act-conseq--ho {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 6%, transparent);
}
/* the prominent surface target — the thing the operator goes to fix */
.act-ho-target {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2px;
}
.act-ho-target__lbl {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.act-ho-target code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  word-break: break-all;
}
/* what the drafter used instead — the decision-critical list */
.act-ho-changes {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.act-ho-changes__lbl {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}
.act-ho-changes ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}
.act-ho-changes li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.act-ho-changes code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  word-break: break-all;
}
.act-ho-strat {
  color: var(--text-muted);
  font-size: 0.76rem;
}

/* reach-gap: the declared post-outcome stage topology between the verdict and the user */
.act-rg-stages {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.act-rg-stages__lbl {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}
.act-rg-stages ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}
.act-rg-stages li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.act-rg-stages code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  word-break: break-all;
}
.act-rg-obs {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
  border: 1px solid transparent;
}
.act-rg-obs--dark {
  color: var(--warning);
  border-color: var(--warning);
}
.act-rg-obs--seen {
  color: var(--success);
  border-color: var(--success);
}

/* reach-gap shortfall: the disposition breakdown (dark / delivered / in-flight) */
.act-rg-dispo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}
.act-rg-dispo__item {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.act-rg-dispo__item strong {
  color: var(--text);
}
.act-rg-dispo__item--dark strong {
  color: var(--warning);
}
.act-rg-dispo__item--ok strong {
  color: var(--success);
}

@media (max-width: 640px) {
  .act-conflict {
    grid-template-columns: 1fr;
  }
  .act-vs {
    height: 18px;
  }
  .act-hf-bar {
    grid-template-columns: 56px 1fr 40px 34px;
    gap: 7px;
  }
  /* the average line's offsets assume the desktop grid; drop it rather than mis-place it */
  .act-hf-avg {
    display: none;
  }
  .act-hf-ev {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.act-drawer__latest {
  margin: 0 0 var(--s-3);
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* the "Resolve" accordion — the triage controls, tucked behind a second disclosure */
.act-resolve {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.act-resolve__summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.act-resolve__summary::-webkit-details-marker {
  display: none;
}
.act-resolve[open] .act-resolve__summary {
  border-bottom: 1px solid var(--border);
}
.act-resolve[open] .act-ev-more__caret {
  transform: rotate(90deg);
}
.act-triage {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
}
.act-triage__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.act-triage__btn {
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}
.act-triage__btn--confirm {
  border-color: color-mix(in srgb, var(--error) 45%, var(--border-strong));
  color: var(--error);
}
.act-triage__btn--confirm:hover {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}
.act-triage__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.act-triage__field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
}
.act-triage__field textarea,
.act-triage__field input {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.82rem;
  resize: vertical;
}
.act-triage__field--inline input {
  flex: 1 1 auto;
}
.act-triage__result {
  margin: 0;
  font-size: 0.8rem;
  color: var(--success);
}
.act-triage__result--error {
  color: var(--error);
}

.act-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  background: var(--panel);
}
.act-empty__head {
  margin: 0 0 var(--s-2);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--success);
}

.act-loadmore {
  margin-top: var(--s-3);
  text-align: center;
}

@media (max-width: 640px) {
  .act-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .act-row__ref {
    display: none;
  }
}

/* ─── Trust view (job B: can I believe the numbers / where am I blind) ─────── */

.view-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
}

.trust-section {
  margin: 0 0 2rem;
}
/* Progressive-load placeholder — a section still reading the lens (fills in place). */
.trust-section--loading {
  opacity: 0.55;
}
.trust-section h3 {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.trust-reach,
.trust-facetreport {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
}
.trust-reach--poor {
  border-left: 3px solid var(--error);
}
.trust-reach--ok {
  border-left: 3px solid var(--success);
}
.trust-reach--unmeasured {
  border-left: 3px solid var(--border-strong);
}

.trust-reach__head,
.trust-facetreport__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: space-between;
}
.trust-reach__surface,
.trust-facetreport__id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
}
.trust-reach__headline {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.95rem;
  color: var(--text);
}
.trust-facts {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.trust-sub {
  margin-top: 0.3rem;
}

/* delivery reach bar */
.trust-bar {
  flex: 1;
  max-width: 260px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
  display: flex;
}
.trust-bar__delivered {
  background: var(--success);
  height: 100%;
}
.trust-bar__dark {
  background: var(--error);
  height: 100%;
}
/* verdict-reliability REVIEW segment — the blind fraction (no check had a handle). A neutral
   grey: unknown, not a failure — but visible, so it never reads as "checked and clean." */
.trust-bar__review {
  background: var(--border-strong);
  height: 100%;
}

/* pills */
.trust-pill {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
.trust-pill--muted {
  background: var(--border);
  color: var(--text-muted);
}
.trust-pill--facet {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.trust-pill--default {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}

/* facet coverage */
.trust-facetreport__nmk {
  font-size: 0.85rem;
  color: var(--text-soft);
}
.trust-facetreport__nmk strong {
  color: var(--text);
}
.trust-facetlist {
  margin-top: 0.6rem;
}
.trust-facetlist > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--accent);
  user-select: none;
}
.trust-facets {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.trust-facet {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.28rem 0;
  border-top: 1px solid var(--border);
}
.trust-facet__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  flex: 1;
}
.trust-facet__count {
  font-size: 0.78rem;
  min-width: 2rem;
  text-align: right;
}

/* Trust → Act deep-link + the Act scope chip (actionable readouts) */
.trust-action {
  margin: 0.6rem 0 0;
}
.trust-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.trust-link:hover {
  text-decoration: underline;
}
.act-scope {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-soft);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin: 0 0 0.75rem;
}
.act-scope code {
  color: var(--text);
}
.act-scope__clear {
  margin-left: auto;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
}
.act-scope__clear:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── D · Explore — raw-events lab bench + §C rubric drill ─────────────────── */
.xp-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.xp-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.xp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}
.xp-toggle input {
  cursor: pointer;
}
.xp-picker select {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.xp-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-soft);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
}
.xp-scope code {
  color: var(--text);
  font-family: var(--font-mono);
}
.xp-scope__clear {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
}
.xp-scope__clear:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* rubric-identity panel (the drill payload) */
.xp-rubric {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.9rem 1.05rem;
  margin-bottom: 1rem;
}
.xp-rubric__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.xp-rubric__facet {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.xp-rubric__where {
  margin: 0.55rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--text);
}
.xp-rubric__where code,
.xp-facts code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
}
.xp-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}
.xp-facts {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* pills + verdicts (mirror the Trust palette so bespoke/default read the same) */
.xp-pill {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
.xp-pill--facet {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.xp-pill--default {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.xp-pill--muted {
  background: var(--border);
  color: var(--text-muted);
}
/* a lens self-observation record row reads dimmer than scored traffic */
.xp-event__row--record .xp-event__facet {
  color: var(--text-soft);
}
.xp-verdict {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
  /* Fixed box so pass/fail occupy identical width — the score + surface columns stop jumping. */
  min-width: 2.75rem;
  text-align: center;
  box-sizing: border-box;
}
.xp-verdict--pass {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.xp-verdict--fail {
  background: color-mix(in srgb, var(--error) 16%, transparent);
  color: var(--error);
}
/* Gate flag — a deterministic reliability-gate finding on this event's verdict, distinct
   from the judge's pass/fail. Amber (needs-review), informational (title carries the why). */
.xp-gate-flag {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
  cursor: help;
}

/* events list */
.xp-events {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.xp-event__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.85rem;
  /* button reset — the row is a <button> for free keyboard access */
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: inherit;
  font-family: inherit;
  text-align: left;
}
.xp-events > .xp-event__row:first-child {
  border-top: none;
}
.xp-event__row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.xp-event__row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.xp-event__score {
  font-family: var(--font-mono);
  font-weight: 600;
  /* fixed column so the surface label always starts at the same x, whatever the score width */
  flex: 0 0 2.75rem;
  color: var(--text);
}
/* the primary identity — surface (strong) + model (muted). Takes the row's slack so the
   signal/source chips + timestamp trail cleanly at the right (no more smushed hash columns). */
.xp-event__id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  overflow: hidden;
}
.xp-event__surface {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.xp-event__model {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.xp-event__row--record .xp-event__surface {
  color: var(--text-soft);
  font-weight: 500;
}
.xp-event__facet {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  flex: 0 0 auto;
  white-space: nowrap;
}
.xp-event__when {
  font-size: 0.76rem;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--text-muted);
}

/* ── filters: verdict segmented control + date range ── */
.xp-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.xp-seg__btn {
  appearance: none;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.72rem;
  cursor: pointer;
}
.xp-seg__btn:first-child {
  border-left: none;
}
.xp-seg__btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.xp-seg__btn.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.xp-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.xp-date input[type='date'] {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, transparent);
  color: var(--text);
  color-scheme: light dark;
}
.xp-date__clear {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ── "Load older" pagination footer ── */
.xp-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.85rem;
  border-top: 1px solid var(--border);
}
.xp-more__sentinel {
  width: 1px;
  height: 1px;
}
.xp-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.9rem;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
}
.xp-kv dt {
  color: var(--text-muted);
}
.xp-kv dd {
  margin: 0;
  color: var(--text);
}
.xp-kv code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
}
.xp-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--border);
  color: var(--text-soft);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.xp-rationale {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.45;
}
.xp-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
}

/* Trust `no-bespoke-ref` pill → Curate (a clickable pill) */
.trust-pill--link {
  text-decoration: none;
  cursor: pointer;
}
.trust-pill--link:hover {
  filter: brightness(1.15);
  text-decoration: underline;
}

/* ── C · Curate — rubric-author worklist + curation desks ─────────────────── */
.cur-section {
  margin: 0 0 2rem;
}
.cur-section h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.cur-lead {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 62ch;
}
.cur-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-soft);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  margin: 0 0 0.9rem;
}
.cur-scope code {
  color: var(--text);
  font-family: var(--font-mono);
}
.cur-scope__clear {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
}
.cur-scope__clear:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* a work item */
.cur-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
}
.cur-item--active {
  border-left-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.cur-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cur-item__facet {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.cur-item__where {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.cur-item__cost {
  margin: 0.45rem 0 0.35rem;
  font-size: 0.88rem;
  color: var(--text);
}
.cur-item__path {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.cur-item__path code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
}
.cur-item__actions {
  margin: 0.5rem 0 0;
}
.cur-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.cur-link:hover {
  text-decoration: underline;
}
.cur-empty {
  padding: 1.25rem 0.5rem;
}

/* curation desks */
.cur-desks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.7rem;
}
.cur-desk {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.85rem 1rem;
  text-decoration: none;
  /* now a <button> (opens the ceremony in a slide-over) — reset button chrome */
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.cur-desk:hover {
  border-color: var(--accent);
}
.cur-desk:hover {
  border-color: var(--accent);
}
.cur-desk__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.cur-desk__desc {
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ── The slide-over primitive — the deep-dive chrome for the whole dashboard ── */
.slideover {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.slideover[hidden] {
  display: none;
}
.slideover__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.slideover.is-open .slideover__backdrop {
  opacity: 1;
}
.slideover__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 75% of the page (Brian) — these are content-heavy deep-dives and nothing is live behind
     the panel; capped so it doesn't get absurd on ultra-wide monitors, floored to a readable column. */
  width: clamp(400px, 75vw, 1280px);
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slideover.is-open .slideover__panel {
  transform: translateX(0);
}
.slideover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.slideover__title {
  margin: 0;
  font-size: 0.9rem;
  font-family: var(--font-mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slideover__close {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.slideover__close:hover {
  color: var(--text);
  border-color: var(--accent);
}
.slideover__body {
  padding: 1.1rem;
  overflow-y: auto;
  flex: 1;
}

/* ── Lens Health · topology mesh (slide-over payload) ──────────────────────── */
.lh-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* the mesh "stage" — a subtle vignette so the terrain reads against the panel */
.lh-mesh {
  position: relative;
  width: 100%;
  /* Cap + center: the deep-dive panel widens to 1280px on big monitors, and an
     unbounded 16:10 mesh balloons past readability. Hold it to a legible size and
     center it in the wider panel. The canvas re-reads its box each rAF, so it
     re-renders crisply at the capped width. */
  max-width: 760px;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  min-height: 240px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(
    120% 100% at 50% 0%,
    color-mix(in srgb, var(--accent) 7%, var(--panel)) 0%,
    var(--panel) 72%
  );
}
.lh-mesh__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.lh-mesh__caption {
  margin: -0.4rem 0 0;
  font-size: 0.82rem;
}
/* mesh loading placeholder — holds the exact .lh-mesh box while the topology scan assembles
   (~25-30 s on a large contract), so the tray opens on a live loading bar instead of a blank frame. */
.lh-mesh--loading {
  display: grid;
  place-items: center;
}
.lh-mesh__loading {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 24px;
}
.lh-loading-bar--mesh {
  width: min(70%, 420px);
  height: 12px;
  border-radius: 6px;
}
.lh-mesh__loading-note {
  margin: 0;
  font-size: 0.9rem;
}
/* legend */
.lh-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
}
.lh-legend__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.lh-leg__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}
.lh-leg__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/* surface roster — legible without the canvas */
.lh-roster {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.lh-roster th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.lh-roster td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.lh-roster .lh-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lh-roster__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.lh-roster__flags {
  font-size: 0.76rem;
}
/* drift readout */
.lh-drift__note {
  margin: 0 0 10px;
  font-size: 0.82rem;
}
.lh-drift__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.lh-drift__card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}
.lh-drift__card h4 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.lh-drift__kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  padding: 2px 0;
}
.lh-drift__kv code {
  font-size: 0.78rem;
  word-break: break-all;
  text-align: right;
}
/* escalation footer */
.lh-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.lh-foot__hint {
  font-size: 0.78rem;
}
.lh-empty {
  margin: 0;
  font-size: 0.88rem;
}
/* "what changed" changelog (folded from Drift — C-18 lens evolution) */
.lh-changelog__lbl {
  margin: 12px 0 5px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lh-changelog {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 0.84rem;
  color: var(--text-soft);
}
.lh-changelog__date {
  display: inline-block;
  min-width: 44px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lh-changelog__empty {
  margin: 10px 0 0;
  font-size: 0.8rem;
}
/* the collapsed forensic "Topology detail" disclosure (folded from Topology) */
.lh-fold {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.lh-fold > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
}
.lh-fold > summary::-webkit-details-marker {
  display: none;
}
.lh-fold > summary::before {
  content: '▸ ';
  color: var(--text-muted);
}
.lh-fold[open] > summary::before {
  content: '▾ ';
}
.lh-fold__body {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lh-fold__section h4 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--text);
}
.lh-fold__line {
  margin: 0;
  font-size: 0.82rem;
}
.lh-fold__empty {
  margin: 0;
  font-size: 0.84rem;
}
/* candidate streams (D∖O∖T) */
.lh-stream {
  margin-bottom: 8px;
}
.lh-stream__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.lh-stream__label {
  color: var(--text);
  font-weight: 500;
}
.lh-stream__formula {
  font-size: 0.76rem;
}
.lh-stream__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.lh-stream__items {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
}
.lh-stream__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lh-stream__ns {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
.lh-stream__tag {
  font-size: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
}
/* dark-mass envelope + generic KV grid */
.lh-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 14px;
}
.lh-kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  padding: 1px 0;
}
/* score-distribution health table */
.lh-score {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.lh-score th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
}
.lh-score td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.lh-score .lh-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lh-norm {
  font-size: 0.74rem;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.lh-norm--near {
  color: var(--success);
}
.lh-norm--moderate {
  color: var(--warning);
}
.lh-norm--non {
  color: var(--error);
}
.lh-gate {
  margin: 8px 0 0;
  font-size: 0.78rem;
}
.lh-gate__pill {
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--text-soft);
}
/* raw scan JSON escape hatch */
.lh-raw > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-soft);
}
.lh-raw__json {
  max-height: 320px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.72rem;
  margin: 6px 0 0;
}

/* ── The four-layer event inspector (Explore's slide-over payload) ─────────── */
.xp-insp__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.xp-insp__surface {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.xp-insp__when {
  font-size: 0.78rem;
}
.xp-insp__sec {
  margin: 0 0 1.15rem;
}
.xp-insp__sec h4 {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xp-insp__dim {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.4rem;
}
.xp-insp__dim--scoped {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.xp-insp__dimid {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
}
.xp-insp__score {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}
.xp-insp__rationale {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.45;
}
.xp-insp__link {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
}
.xp-insp__link:hover {
  text-decoration: underline;
}
.xp-kv--mono dt,
.xp-kv--mono dd {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.xp-kv--mono dd code {
  word-break: break-all;
}
/* fingerprints — one dense line each, sorted moved-first; a 3-column grid keeps the value
   column straight regardless of key length; styling carries the grouping (Stage 1) */
.xp-fp__row {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 0.32rem 1.25rem;
  align-items: baseline;
  padding: 0.32rem 0;
  font-size: 0.78rem;
}
.xp-fp__row + .xp-fp__row {
  border-top: 0.5px solid var(--border);
}
.xp-fp__key {
  font-family: var(--font-mono);
  word-break: break-all;
}
.xp-fp__val {
  justify-self: center; /* the value column — aligned across every row */
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.xp-fp__val:hover {
  color: var(--text);
  text-decoration: underline;
}
.xp-fp__val.is-copied {
  color: var(--warning);
}
.xp-fp__status {
  justify-self: end;
  text-align: right;
  color: var(--text-soft);
}
.xp-fp__row--moved .xp-fp__key,
.xp-fp__row--moved .xp-fp__status {
  color: var(--warning);
}
.xp-fp__row--churn {
  opacity: 0.55;
}
.xp-insp__tags {
  margin: 0;
  line-height: 1.9;
}
.xp-insp__label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xp-insp__text {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 18rem;
  overflow-y: auto;
}
.xp-insp__raw {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.xp-insp__raw > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--accent);
  user-select: none;
}
.xp-insp__rawgrid {
  padding: 0 0.75rem 0.5rem;
}
.xp-insp__json {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 16rem;
  overflow: auto;
}
.xp-insp__footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* the multiplex call-to-action inside the event inspector */
.xp-insp__mux {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.9rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.xp-mux-btn {
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.xp-mux-hint {
  font-size: 0.8rem;
}

/* ── Cross-vendor multiplexer (the C-suite money shot) ─────────────────────── */
.mux {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.mux-back {
  align-self: flex-start;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.mux-back:hover {
  color: var(--accent);
}
.mux__ctx {
  font-size: 0.85rem;
  color: var(--text-soft);
}
.mux__ctx code {
  font-size: 0.82rem;
}
/* the headline — leads with the answer */
.mux-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.mux-head--diverge {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}
.mux-head--agree {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.mux-head--neutral {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.mux-head--neutral .mux-head__icon {
  color: var(--accent);
}

/* ── Live-run configurator ─────────────────────────────────────────────── */
.mux-cfg__head {
  margin-bottom: 0.35rem;
}
.mux-cfg__title {
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text);
}
.mux-cfg__vendors {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.85rem 0.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mux-cfg__vendors legend {
  font-size: 0.8rem;
  padding: 0 0.4rem;
}
.mux-cfg__hint {
  opacity: 0.7;
}
.mux-cfg__vendor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}
.mux-cfg__vendor:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.mux-cfg__vendor input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.mux-cfg__vname {
  flex: 1;
  font-weight: 550;
  color: var(--text);
}
.mux-cfg__srctag {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 0.4rem;
}
.mux-cfg__vcost {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.mux-cfg__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
}
.mux-cfg__est {
  font-size: 0.95rem;
  color: var(--text);
}
.mux-cfg__est strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
}
.mux-cfg__estnote {
  margin-left: 0.4rem;
  font-size: 0.82rem;
}
.mux-cfg__run-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mux-cfg__run {
  font-weight: 600;
}
.mux-cfg__run:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mux-cfg__status {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ── Live-run result banner ────────────────────────────────────────────── */
.mux-live__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  font-size: 0.85rem;
}
.mux-live__badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  padding: 1px 8px;
}
.mux-live__failed {
  color: var(--warning);
  font-weight: 550;
}

/* ── Judge transfer curve ──────────────────────────────────────────────── */
.xp-insp__curve {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.xp-curve-btn {
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.xp-curve-hint {
  font-size: 0.8rem;
}
.tc__ctx {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.tc__head {
  margin-bottom: 1rem;
}
.tc__title {
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text);
}
.tc-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.tc-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem 1rem;
}
.tc-card.is-flagged {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, transparent);
}
.tc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.tc-card__dim {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.tc-card__badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.tc-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.tc-badge--ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.tc-badge--quantized,
.tc-badge--saturated,
.tc-badge--concentrated {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}
/* The distribution strip — one bar per achieved score. */
.tc-strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 88px;
  padding: 0.3rem 0.2rem 0;
  overflow-x: auto;
}
.tc-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 22px;
  flex: 1 1 22px;
  height: 100%;
}
.tc-bar__fill {
  width: 100%;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--accent) 55%, var(--panel));
}
.tc-bar__fill.is-end {
  background: color-mix(in srgb, var(--warning) 60%, var(--panel));
}
.tc-bar__label {
  margin-top: 4px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.tc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
}
.tc-stat strong {
  color: var(--text);
}
.tc-findings {
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--text-soft);
}
.tc-findings li {
  margin: 0.2rem 0;
}
.tc-smooth {
  margin: 0.6rem 0 0;
  font-size: 0.84rem;
}
.tc__foot {
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
.tc-empty {
  text-align: center;
  padding: 2rem 1rem;
}
.tc-empty__icon {
  font-size: 2rem;
}
.tc-empty__main {
  font-weight: 600;
  color: var(--text);
  margin-top: 0.4rem;
}
.tc-empty__sub {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.mux-head__icon {
  font-size: 1.6rem;
  line-height: 1;
}
.mux-head--diverge .mux-head__icon {
  color: var(--warning);
}
.mux-head--agree .mux-head__icon {
  color: var(--success);
}
.mux-head__main {
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text);
  line-height: 1.25;
}
.mux-head__sub {
  font-size: 0.85rem;
  margin-top: 2px;
}
/* THE hero — the verdict grid */
.mux-grid {
  display: grid;
  grid-template-columns: minmax(84px, max-content) repeat(var(--mux-cols), minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.mux-grid__corner {
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}
.mux-grid__vh {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-strong);
  border-left: 1px solid var(--border);
}
.mux-grid__vname {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text);
}
.mux-grid__primary {
  align-self: flex-start;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 4px;
  padding: 0 4px;
  margin-top: 2px;
}
.mux-grid__vmodel {
  font-size: 0.68rem;
  font-family: var(--font-mono);
}
.mux-grid__dim {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mux-grid__dim.is-diverge {
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.mux-grid__spark {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  border-radius: 4px;
  padding: 0 4px;
}
.mux-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  min-width: 0;
}
.mux-grid__dim.is-diverge + .mux-cell,
.mux-grid.is-diverge .mux-cell {
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}
.mux-cell__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.mux-cell.is-pass .mux-cell__dot {
  background: var(--success);
}
.mux-cell.is-fail .mux-cell__dot {
  background: var(--error);
}
.mux-cell__val {
  font-family: var(--font-mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* cost & speed */
.mux-cost__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mux-cost__table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.mux-cost__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.mux-cost__table .mux-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mux-cost__v {
  font-family: var(--font-mono);
  font-weight: 600;
}
.mux-tag {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
}
.mux-tag--good {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.mux-cost__punch {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 8px 8px 0;
}
.mux-cost__punch code {
  font-size: 0.82rem;
}
/* request + responses */
.mux-fold {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.mux-fold > summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}
.mux-fold__pre {
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  white-space: pre-wrap;
  font-size: 0.8rem;
  color: var(--text-soft);
}
.mux-responses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
  padding: 0 0.9rem 0.9rem;
}
.mux-resp {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.mux-resp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.mux-resp__v {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.mux-resp__tally {
  font-size: 0.74rem;
}
.mux-resp__text {
  margin: 0;
  padding: 0.6rem 0.7rem;
  max-height: 220px;
  overflow: auto;
  font-size: 0.76rem;
  white-space: pre-wrap;
  color: var(--text-soft);
}
/* single-vendor honest state */
.mux-empty {
  text-align: center;
  padding: 2rem 1rem;
}
.mux-empty__icon {
  font-size: 2rem;
  color: var(--text-muted);
}
.mux-empty__main {
  margin-top: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.mux-empty__sub {
  margin: 0.5rem auto 0;
  max-width: 42ch;
  font-size: 0.85rem;
}

/* ── event-reference chip (lib/event-ref.js) ──────────────────────────────────────────────
   The human-readable, copyable, traceable replacement for a raw `<code>evt-…</code>` id:
   label = the surface, full id + when on rollover, click copies the id, ↗ opens it in Explore. */
.evref {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: baseline;
  max-width: 100%;
}
.evref__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  color: var(--text-soft);
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.evref__id:hover {
  border-color: var(--accent);
  color: var(--text);
}
.evref__id.is-copied {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.evref__id.is-copied::after {
  content: ' ✓';
  color: var(--accent);
}
.evref__id.is-copy-failed::after {
  content: ' ✕';
  color: var(--error);
}
.evref__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  color: var(--text-muted);
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9em;
  flex: none;
}
.evref__open:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.evref--empty {
  font-size: 0.85em;
}

/* Explore find-by-id input (event-reference landing) */
.xp-find {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  min-width: 15ch;
  max-width: 22ch;
}
.xp-find:focus {
  outline: none;
  border-color: var(--accent);
}
.xp-find::placeholder {
  color: var(--text-muted);
}