/* Copyright 2026 EGOVERNMENT AI LLC. SPDX-License-Identifier: Apache-2.0 */

:root {
  color-scheme: dark;
  --ink: #edf3ff;
  --muted: #8f9db5;
  --dim: #5f6d83;
  --bg: #050812;
  --surface: #0a101c;
  --surface-2: #0e1625;
  --surface-3: #131d2e;
  --line: rgba(146, 166, 201, .16);
  --line-strong: rgba(146, 166, 201, .3);
  --mint: #79f2d0;
  --mint-2: #42d3b0;
  --violet: #8c7cff;
  --cyan: #58c9ff;
  --amber: #ffca6b;
  --orange: #ff8e62;
  --red: #ff6f86;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { font-size: 16px; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(80, 110, 196, .16), transparent 42%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 64px auto minmax(0, 1fr) 92px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(170px, .75fr) auto minmax(420px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 18, .92);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 20;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(121, 242, 208, .3);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(121, 242, 208, .14), rgba(140, 124, 255, .08));
  box-shadow: inset 0 0 18px rgba(121, 242, 208, .07);
}
.brand-mark svg { width: 23px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark circle { fill: var(--amber); stroke: none; }

.session-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}
.session-meta strong { color: #c8d2e3; font-weight: 650; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(121, 242, 208, .09), 0 0 14px rgba(121, 242, 208, .7); }
.divider { height: 14px; width: 1px; background: var(--line-strong); }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.state-select-label { color: var(--dim); font-size: .76rem; }
.compact-select {
  height: 34px;
  min-width: 122px;
  padding: 0 29px 0 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: #cbd6e7;
  background: var(--surface-2);
  font-size: .78rem;
}

.button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  background: none;
  font-size: .8rem;
  font-weight: 650;
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.button:hover { transform: translateY(-1px); }
.button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-quiet { border-color: var(--line); background: rgba(255,255,255,.025); color: #bcc8d9; }
.button-quiet:hover { border-color: var(--line-strong); background: rgba(255,255,255,.055); color: var(--ink); }
.button-quiet.active { border-color: rgba(121,242,208,.32); color: var(--mint); background: rgba(121,242,208,.07); }
.button-primary { color: #05110e; background: linear-gradient(135deg, var(--mint), #5ce0d8); box-shadow: 0 8px 26px rgba(84, 222, 193, .16); }
.button-primary:hover { box-shadow: 0 10px 32px rgba(84, 222, 193, .25); }
.button-wide { width: 100%; }

.truth-banner {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-bottom: 1px solid rgba(88, 201, 255, .13);
  color: #aab8cc;
  background: linear-gradient(90deg, rgba(88, 201, 255, .075), rgba(140, 124, 255, .035));
  font-size: .78rem;
}
.truth-banner svg { flex: 0 0 18px; width: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.truth-banner p { margin: 0; flex: 1; }
.truth-banner strong { color: #d7e8f6; }
.truth-banner button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 1.2rem; }
.truth-banner button:hover { color: var(--ink); background: rgba(255,255,255,.05); }

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(480px, 1fr) 354px;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(15, 23, 39, .96), rgba(7, 12, 22, .97));
  box-shadow: inset 0 1px rgba(255,255,255,.018), var(--shadow);
}
.left-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.panel-heading { min-height: 70px; padding: 17px 18px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.compact-heading { min-height: auto; padding-bottom: 10px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--dim); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #e9f0fb; font-weight: 620; letter-spacing: -.025em; }
h1 { font-size: 1rem; line-height: 1.25; }
h2 { font-size: 1rem; }
.demo-pill, .stream-badge, .status-pill, .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}
.demo-pill { border-color: rgba(255,202,107,.2); color: var(--amber); background: rgba(255,202,107,.055); }

.query-panel { overflow: hidden; }
.query-panel textarea, .modal textarea {
  width: calc(100% - 36px);
  margin: 0 18px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  color: #e4ecf8;
  background: rgba(3, 7, 14, .5);
  font-size: .86rem;
  line-height: 1.45;
}
.query-panel textarea { min-height: 77px; max-height: 140px; }
.query-panel textarea:hover, .query-panel textarea:focus, .source-field input:hover, .source-field input:focus, .modal textarea:focus { border-color: rgba(121, 242, 208, .38); }
.source-field { display: block; margin: 11px 18px 0; }
.source-field span, .modal label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .73rem; font-weight: 650; }
.source-field input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: rgba(3, 7, 14, .5);
  font-size: .79rem;
}
.source-field input::placeholder, textarea::placeholder { color: #536077; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 18px 0; }
.attachment-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: #aebbd0; font-size: .7rem; background: rgba(255,255,255,.025); }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { border: 0; padding: 0; color: var(--dim); background: transparent; }
.query-actions { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; }
.query-actions .button-primary { flex: 1; }

.narration-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.stream-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.stream-badge.live { color: var(--mint); border-color: rgba(121,242,208,.24); background: rgba(121,242,208,.06); }
.stream-badge.live span { background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 1.1s ease-in-out infinite; }
.stream-badge.complete { color: var(--cyan); border-color: rgba(88,201,255,.24); background: rgba(88,201,255,.06); }
.stream-badge.complete span { background: var(--cyan); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.72); } }
.narration-list { min-height: 0; overflow: auto; padding: 0 10px 18px; scrollbar-color: #2b3850 transparent; scrollbar-width: thin; }
.empty-state { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 18px; padding: 28px; text-align: center; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.empty-state p { margin: 0; }
.empty-orbit { width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; }
.empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.empty-orbit::before { inset: 10px; border: 1px solid rgba(121,242,208,.32); }
.empty-orbit::after { width: 7px; height: 7px; top: 4px; left: 20px; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.narration-card {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 9px;
  padding: 11px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: inherit;
  background: transparent;
  text-align: left;
  animation: cardIn .38s ease both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(7px); } }
.narration-card:hover { background: rgba(255,255,255,.025); }
.narration-card.active { border-color: rgba(121,242,208,.2); background: linear-gradient(90deg, rgba(121,242,208,.07), rgba(121,242,208,.015)); }
.event-index { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--line); border-radius: 7px; color: var(--dim); font-size: .65rem; font-weight: 700; }
.active .event-index { color: var(--mint); border-color: rgba(121,242,208,.35); }
.narration-copy { min-width: 0; }
.narration-copy strong { display: block; color: #dce5f2; font-size: .79rem; font-weight: 610; line-height: 1.37; }
.narration-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.event-type { margin-top: 2px; color: var(--dim); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

.graph-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.graph-heading { min-height: 66px; align-items: center; border-bottom: 1px solid var(--line); }
.graph-tools { display: flex; align-items: center; gap: 7px; }
.canvas-mode-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,12,.45); }
.canvas-mode-switch button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 700; }
.canvas-mode-switch button.active { color: #07120f; background: var(--mint); box-shadow: 0 5px 14px rgba(121,242,208,.12); }
.zoom-value { min-width: 36px; color: var(--dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; text-align: center; }
.icon-button:disabled { opacity: .35; cursor: not-allowed; }
.legend { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .66rem; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.legend-dot.evidence { background: var(--cyan); }
.legend-dot.inference { background: var(--violet); }
.legend-dot.uncertainty { background: var(--amber); }
.legend-dot.decision { background: var(--mint); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.02); }
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.microscope-toolbar {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(190px,.8fr) minmax(280px,1.35fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(88,201,255,.035), rgba(140,124,255,.025));
}
.granularity-readout { min-width: 0; }
.granularity-readout > span { display: block; color: var(--dim); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.granularity-readout strong { display: block; margin: 3px 0; color: #dfe9f7; font-size: .82rem; }
.granularity-readout small { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.granularity-control { min-width: 0; }
.granularity-control input { width: 100%; height: 4px; margin: 4px 0 8px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--mint) var(--granularity-progress,25%), #243148 var(--granularity-progress,25%)); }
.granularity-control input::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border: 3px solid #07100f; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px rgba(121,242,208,.5), 0 0 13px rgba(121,242,208,.3); }
.granularity-control input::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #07100f; border-radius: 50%; background: var(--mint); }
.granularity-stops { display: flex; justify-content: space-between; color: var(--dim); font-size: .62rem; }
.boundary-status { display: flex; align-items: center; gap: 8px; min-width: 132px; padding: 8px 10px; border: 1px solid rgba(255,202,107,.18); border-radius: 10px; color: var(--amber); background: rgba(255,202,107,.045); }
.boundary-status > span:last-child { display: block; font-size: .67rem; }
.boundary-status strong { display: block; margin-bottom: 1px; color: #cdb985; font-size: .61rem; letter-spacing: .05em; text-transform: uppercase; }
.boundary-lock { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,202,107,.25); border-radius: 8px; font-weight: 800; }

.alert-rail { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.alert-chip { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 8px; background: transparent; font-size: .67rem; font-weight: 650; }
.alert-chip svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert-chip.warning { color: var(--amber); border: 1px solid rgba(255,202,107,.2); background: rgba(255,202,107,.05); }
.alert-chip.conflict { color: var(--orange); border: 1px solid rgba(255,142,98,.2); background: rgba(255,142,98,.05); }
.integrity-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .66rem; }
.integrity-chip span { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.integrity-chip.verified { color: var(--mint); }
.integrity-chip.verified span { background: var(--mint); box-shadow: 0 0 8px rgba(121,242,208,.5); }

.graph-stage { min-height: 240px; flex: 1; position: relative; overflow: auto; background: radial-gradient(circle at 60% 38%, rgba(76, 92, 168, .1), transparent 38%); scrollbar-color: #2b3850 transparent; scrollbar-width: thin; }
.graph-stage::after { content: attr(data-hint); position: absolute; right: 14px; bottom: 10px; color: #45536a; font-size: .58rem; font-weight: 800; letter-spacing: .1em; pointer-events: none; }
.canvas-transform { min-width: 100%; min-height: 100%; transform-origin: center center; transition: transform .28s ease; }
.microscope-view[hidden] { display: none !important; }
#evidenceGraph { width: 100%; height: 100%; min-height: 330px; display: block; transition: transform .35s ease; }
.graph-node { cursor: pointer; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s, filter .25s; }
.graph-node.revealed { opacity: 1; animation: nodeReveal .45s cubic-bezier(.2,.9,.2,1) both; }
@keyframes nodeReveal { from { opacity: 0; transform: scale(.65); } }
.graph-node rect { fill: #101a2a; stroke: rgba(151,169,202,.22); stroke-width: 1.2; transition: stroke .2s, fill .2s; }
.graph-node .node-accent { stroke: none; }
.graph-node text { pointer-events: none; }
.graph-node .node-kicker { fill: #7f8da5; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.graph-node .node-title { fill: #dce6f4; font-size: 13px; font-weight: 610; }
.graph-node .node-meta { fill: #718099; font-size: 10px; }
.graph-node:hover rect, .graph-node.selected rect { stroke: rgba(121,242,208,.72); fill: #142337; }
.graph-node.selected { filter: url(#nodeGlow); }
.graph-node.status-disputed rect { stroke: rgba(255,142,98,.48); }
.graph-node.status-unverified rect { stroke-dasharray: 5 4; stroke: rgba(255,202,107,.48); }
.graph-edge { opacity: 0; fill: none; stroke: rgba(125,146,182,.22); stroke-width: 1.3; transition: opacity .4s; }
.graph-edge.revealed { opacity: 1; stroke-dasharray: 7 7; animation: edgeFlow 5s linear infinite; }
.graph-edge.active { stroke: url(#activeEdge); stroke-width: 2.1; }
@keyframes edgeFlow { to { stroke-dashoffset: -28; } }
.edge-pulse { fill: var(--mint); opacity: 0; }
.graph-edge.revealed + .edge-pulse { opacity: .8; }

.system-view { min-height: 100%; padding: 22px; }
.system-orbit { min-height: 330px; display: grid; grid-template-columns: minmax(150px,1fr) 118px minmax(150px,1fr); grid-template-rows: repeat(2,1fr); gap: 16px 20px; align-items: center; position: relative; }
.system-core { grid-column: 2; grid-row: 1 / 3; width: 112px; height: 112px; display: grid; place-items: center; align-self: center; justify-self: center; padding: 0; border: 1px solid rgba(121,242,208,.35); border-radius: 50%; color: var(--mint); background: radial-gradient(circle, rgba(121,242,208,.12), rgba(121,242,208,.025) 62%, transparent 63%); box-shadow: 0 0 0 17px rgba(121,242,208,.025), 0 0 55px rgba(121,242,208,.08); text-align: center; }
.system-core:hover { border-color: var(--mint); box-shadow: 0 0 0 17px rgba(121,242,208,.04), 0 0 62px rgba(121,242,208,.16); }
.system-core::before { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, rgba(121,242,208,.2), transparent); z-index: -1; }
.system-core strong { display: block; font-size: .82rem; }
.system-core span { display: block; margin-top: 3px; color: var(--muted); font-size: .65rem; }
.system-card, .context-card, .lane-context-chip, .synthesis-card, .telemetry-card { border: 1px solid var(--line); color: inherit; background: rgba(12,20,34,.78); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
button.system-card:hover, button.context-card:hover, button.lane-context-chip:hover, button.synthesis-card:hover, button.telemetry-card:hover { border-color: rgba(121,242,208,.38); background: rgba(18,31,49,.92); transform: translateY(-1px); }
.system-card { min-height: 112px; padding: 13px; border-radius: 13px; }
.system-card:nth-of-type(odd) { justify-self: end; }
.system-card .system-label { display: block; margin-bottom: 7px; color: var(--dim); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.system-card strong { display: block; color: #dce6f4; font-size: .79rem; line-height: 1.35; }
.system-card small { display: block; margin-top: 7px; color: var(--muted); font-size: .67rem; line-height: 1.35; }

.agent-layer-view { min-height: 100%; padding: 12px 14px 32px; }
.architecture-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 9px; }
.architecture-key { min-width: 0; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; background: rgba(255,255,255,.018); text-align: left; }
.architecture-key:hover { transform: translateY(-1px); background: rgba(255,255,255,.04); }
.architecture-key > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: .59rem; font-weight: 850; }
.architecture-key strong { overflow: hidden; color: #d7e2f0; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.architecture-key small { color: var(--dim); font-size: .58rem; }
.architecture-key.llm { border-color: rgba(88,201,255,.2); }
.architecture-key.llm > span { color: var(--cyan); background: rgba(88,201,255,.09); }
.architecture-key.deterministic { border-color: rgba(255,202,107,.22); }
.architecture-key.deterministic > span { color: var(--amber); background: rgba(255,202,107,.09); }
.architecture-key.hybrid { border-color: rgba(140,124,255,.22); }
.architecture-key.hybrid > span { color: #ad9fff; background: rgba(140,124,255,.1); }
.agent-runtime-list { display: grid; gap: 8px; }
.agent-runtime-card { display: grid; grid-template-columns: 176px minmax(330px,1fr) 148px; align-items: center; gap: 11px; min-height: 112px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); }
.agent-runtime-card::before { content: ""; position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--agent-color); box-shadow: 0 0 14px color-mix(in srgb, var(--agent-color) 55%, transparent); }
.agent-runtime-card.architecture-llm { background: linear-gradient(90deg, rgba(88,201,255,.04), rgba(255,255,255,.008)); }
.agent-runtime-card.architecture-deterministic { border-style: dashed; background: linear-gradient(90deg, rgba(255,202,107,.05), rgba(255,255,255,.008)); }
.agent-runtime-card.architecture-hybrid { background: linear-gradient(90deg, rgba(140,124,255,.055), rgba(121,242,208,.022)); }
.agent-runtime-card.dormant { opacity: .43; }
.agent-runtime-card.awaiting { border-color: rgba(255,202,107,.34); }
.agent-runtime-card.blocked { border-color: rgba(255,111,134,.36); }
.agent-runtime-identity { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.agent-runtime-identity:hover .agent-name strong { color: var(--mint); }
.agent-runtime-flow { min-width: 0; display: grid; gap: 7px; }
.architecture-process { min-width: 0; display: grid; grid-template-columns: max-content 12px max-content 12px max-content; align-items: center; gap: 4px; color: var(--dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; text-transform: uppercase; }
.architecture-process span { overflow: hidden; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.018); text-overflow: ellipsis; white-space: nowrap; }
.architecture-process i { color: #445269; font-style: normal; text-align: center; }
.llm-process span { border-color: rgba(88,201,255,.16); }
.deterministic-process span { border-color: rgba(255,202,107,.18); color: #baa478; }
.hybrid-process span:first-child { border-color: rgba(140,124,255,.2); color: #a99cff; }
.hybrid-process span:last-child { border-color: rgba(121,242,208,.2); color: var(--mint); }
.agent-context-stream { min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.agent-context-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; max-width: 190px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; color: #8fa0b8; background: rgba(255,255,255,.015); font-size: .54rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-context-link:hover { color: #d3deec; border-color: color-mix(in srgb, var(--state-color) 45%, transparent); }
.agent-context-link > span { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--state-color,var(--cyan)); }
.agent-context-link.pending { opacity: .5; }
.agent-event-stream { min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.agent-event-chip { min-width: 145px; max-width: 220px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: rgba(4,9,17,.45); text-align: left; }
.agent-event-chip:hover { border-color: rgba(121,242,208,.4); background: rgba(16,28,44,.9); }
.agent-event-chip > span { display: block; color: var(--dim); font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agent-event-chip strong { display: block; overflow: hidden; margin: 3px 0; color: #c7d3e3; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-event-chip small { display: block; color: var(--muted); font-size: .51rem; }
.agent-event-chip.deterministically-verified { border-color: rgba(121,242,208,.25); }
.agent-event-chip.blocked { border-color: rgba(255,111,134,.28); }
.agent-event-chip.awaiting-human-authorization { border-color: rgba(255,202,107,.28); }
.agent-event-chip.pending { opacity: .55; }
.agent-runtime-actions { min-width: 0; display: grid; align-content: center; gap: 6px; }
.agent-runtime-actions > small { color: var(--dim); font-size: .52rem; line-height: 1.25; }
.lifecycle-pill { width: max-content; max-width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.02); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lifecycle-pill.active { color: var(--cyan); border-color: rgba(88,201,255,.24); }
.lifecycle-pill.complete { color: var(--mint); border-color: rgba(121,242,208,.24); }
.lifecycle-pill.awaiting { color: var(--amber); border-color: rgba(255,202,107,.24); }
.lifecycle-pill.blocked { color: var(--red); border-color: rgba(255,111,134,.28); }
.agent-inspect-action, .wasm-replay-button { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: #b7c4d6; background: rgba(255,255,255,.025); font-size: .59rem; font-weight: 750; }
.agent-inspect-action:hover { color: var(--mint); border-color: rgba(121,242,208,.35); }
.wasm-replay-button { color: #161106; border-color: rgba(255,202,107,.5); background: var(--amber); }
.wasm-replay-button:hover { background: #ffd88b; }
.wasm-replay-button:disabled { opacity: .55; cursor: wait; }
.replay-result { color: var(--dim); font-size: .53rem; line-height: 1.3; }
.replay-result.verified { color: var(--mint); }
.replay-result.failed { color: var(--red); }
.agent-boundary-note { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); font-size: .59rem; }
.agent-boundary-note strong { color: #cbd6e5; }

.agent-lanes-view { min-height: 100%; padding: 14px; }
.agent-lanes { display: grid; gap: 9px; }
.agent-lane { display: grid; grid-template-columns: 168px minmax(240px,1fr) 156px; align-items: center; gap: 12px; min-height: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); position: relative; overflow: hidden; }
.agent-lane::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--agent-color, var(--mint)); box-shadow: 0 0 12px var(--agent-color, var(--mint)); }
.agent-lane.dormant { opacity: .46; }
.agent-lane.component-wasm { border-style: dashed; background: linear-gradient(90deg, rgba(255,202,107,.045), rgba(255,255,255,.008)); }
.agent-lane .agent-button { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.agent-avatar { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--agent-color) 40%, transparent); border-radius: 10px; color: var(--agent-color); background: color-mix(in srgb, var(--agent-color) 8%, transparent); font-size: .68rem; font-weight: 800; }
.agent-name { min-width: 0; }
.agent-name strong { display: block; overflow: hidden; color: #dfe8f4; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-name span { display: block; margin-top: 3px; color: var(--dim); font-size: .62rem; }
.lane-flow { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.lane-context-chip { flex: 0 0 auto; padding: 7px 8px; border-radius: 8px; color: #b9c6d8; font-size: .66rem; white-space: nowrap; }
.lane-context-chip .context-state { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--state-color,var(--cyan)); }
.lane-arrow { color: #39465d; font-size: .7rem; }
.lane-metrics { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.lane-metrics > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: .62rem; }
.mini-track { height: 5px; overflow: hidden; border-radius: 999px; background: #1c273a; }
.mini-track span { display: block; height: 100%; border-radius: inherit; background: var(--agent-color,var(--mint)); }
.lane-metrics small { display: block; margin-top: 5px; color: var(--dim); font-size: .6rem; }
.lanes-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 11px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: .65rem; }
.lanes-footer strong { color: var(--amber); font-weight: 700; }

.context-map-view { min-height: 100%; padding: 14px; }
.context-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--muted); font-size: .68rem; }
.context-summary strong { color: #d7e2f0; }
.context-columns { display: grid; grid-template-columns: repeat(4,minmax(142px,1fr)); gap: 9px; }
.context-column { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,6,12,.2); }
.context-column h3 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 8px; color: #aebbd0; font-size: .69rem; font-weight: 750; }
.context-column h3 span { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 999px; color: var(--dim); background: rgba(255,255,255,.04); font-size: .58rem; }
.context-stack { display: grid; gap: 7px; }
.context-card { width: 100%; min-height: 68px; padding: 9px; border-radius: 9px; }
.context-card .context-kind { display: flex; align-items: center; gap: 5px; color: var(--state-color,var(--cyan)); font-size: .57rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.context-card strong { display: block; margin-top: 5px; color: #d4deec; font-size: .68rem; line-height: 1.3; }
.context-card small { display: block; margin-top: 4px; color: var(--dim); font-size: .6rem; line-height: 1.3; }

.telemetry-view { min-height: 100%; padding: 14px; }
.telemetry-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.boundary-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(255,202,107,.18); border-radius: 11px; color: inherit; background: rgba(255,202,107,.035); text-align: left; }
.boundary-card:hover { border-color: rgba(255,202,107,.4); background: rgba(255,202,107,.07); }
.boundary-card > span:first-child { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; color: var(--amber); background: rgba(255,202,107,.08); font-size: .66rem; font-weight: 800; }
.boundary-card strong { display: block; color: #d9c89a; font-size: .7rem; }
.boundary-card small { display: block; margin-top: 2px; color: var(--muted); font-size: .61rem; }
.telemetry-grid { display: grid; grid-template-columns: repeat(2,minmax(210px,1fr)); gap: 9px; }
.telemetry-card { min-height: 120px; padding: 11px; border-radius: 11px; }
.telemetry-card-header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.telemetry-card-header strong { color: #dce5f2; font-size: .7rem; }
.telemetry-card-header span { color: var(--dim); font-size: .59rem; }
.metric-row { display: grid; grid-template-columns: 64px 1fr 45px; align-items: center; gap: 7px; margin: 7px 0; color: var(--muted); font-size: .61rem; }
.metric-row > span:last-child { color: #aebbd0; text-align: right; }
.metric-track { height: 5px; overflow: hidden; border-radius: 999px; background: #1c273a; }
.metric-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--violet)); }
.activation-grid { display: grid; grid-template-columns: repeat(14,1fr); gap: 3px; margin: 10px 0; }
.activation-grid i { aspect-ratio: 1; border: 1px solid rgba(140,124,255,.13); border-radius: 2px; background: color-mix(in srgb, var(--violet) var(--activity), rgba(88,201,255,.08)); box-shadow: 0 0 7px color-mix(in srgb, var(--cyan) calc(var(--activity) / 3), transparent); }
.not-instrumented { color: var(--amber); font-size: .63rem; font-weight: 700; }
.synthetic-telemetry { border-color: rgba(140,124,255,.25); }
.synthetic-label { color: #ad9fff !important; font-weight: 800; }
.telemetry-caveat { display: block; color: var(--amber); font-size: .59rem; line-height: 1.35; }
.telemetry-caveat.adapter-ready { margin-top: 12px; color: var(--mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.adapter-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin-top: 17px; color: var(--dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .54rem; text-align: center; }
.adapter-flow span { padding: 6px 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.018); }
.adapter-flow i { color: #445269; font-style: normal; }
.telemetry-replay-card { display: grid; align-content: start; gap: 8px; }
.telemetry-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.telemetry-card-title strong { color: #dce5f2; font-size: .7rem; }
.telemetry-card-title span { color: var(--mint); font-size: .57rem; font-weight: 800; }
.replay-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.replay-facts span { min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--dim); font-size: .55rem; }
.replay-facts strong { display: block; overflow: hidden; margin-top: 3px; color: #b8c5d7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .58rem; text-overflow: ellipsis; }

.synthesis-view { min-height: 100%; padding: 14px; }
.synthesis-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 10px; }
.synthesis-card { min-height: 78px; padding: 10px; border-radius: 10px; }
.synthesis-card span { color: var(--dim); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.synthesis-card strong { display: block; margin: 5px 0; color: #dce5f2; font-size: .7rem; line-height: 1.3; }
.synthesis-card small { color: var(--muted); font-size: .59rem; }
.synthesis-card.dormant { opacity: .42; cursor: not-allowed; }
.synthesis-matrix-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.synthesis-matrix { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .64rem; }
.synthesis-matrix th, .synthesis-matrix td { padding: 9px; border-bottom: 1px solid var(--line); text-align: left; }
.synthesis-matrix th { color: var(--dim); background: rgba(255,255,255,.02); font-weight: 750; }
.synthesis-matrix td { color: #aebbd0; }
.synthesis-matrix tr:last-child td { border-bottom: 0; }
.matrix-agent-button { padding: 0; border: 0; color: #d1dbea; background: transparent; font-size: inherit; font-weight: 700; }
.matrix-agent-button:hover { color: var(--mint); }
.signal { display: inline-flex; align-items: center; gap: 5px; }
.signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal,var(--mint)); }
.synthesis-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; color: var(--muted); font-size: .65rem; }
.synthesis-flow button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: #b8c5d7; background: rgba(255,255,255,.02); font-size: .64rem; }
.synthesis-flow button:hover { border-color: rgba(121,242,208,.35); color: var(--ink); }
.synthesis-flow button:disabled { opacity: .35; cursor: not-allowed; }
.synthesis-flow > span { color: #46536a; }

.graph-state-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 40px; text-align: center; background: rgba(5,9,17,.88); backdrop-filter: blur(8px); z-index: 4; }
.graph-state-overlay[hidden] { display: none; }
.graph-state-overlay strong { font-size: .96rem; }
.graph-state-overlay > span:last-of-type { max-width: 420px; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.loader-rings { width: 45px; height: 45px; border: 2px solid rgba(121,242,208,.15); border-top-color: var(--mint); border-radius: 50%; animation: spin 1s linear infinite; }
.loader-rings::after { content: ""; display: block; width: 25px; height: 25px; margin: 8px; border: 2px solid rgba(140,124,255,.15); border-bottom-color: var(--violet); border-radius: 50%; animation: spin .7s linear reverse infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-symbol { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,111,134,.4); border-radius: 50%; color: var(--red); background: rgba(255,111,134,.08); font-weight: 800; }

.comparison-strip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; padding: 10px 14px 14px; border-top: 1px solid var(--line); background: rgba(5,8,15,.55); }
.comparison-strip[hidden] { display: none; }
.comparison-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: inherit; background: rgba(255,255,255,.025); text-align: left; }
.comparison-card:hover { background: rgba(255,255,255,.045); }
.comparison-card.selected { border-color: rgba(121,242,208,.25); }
.comparison-card.alternate { border-color: rgba(140,124,255,.24); }
.comparison-card strong, .comparison-card > span { display: block; }
.comparison-card strong { margin: 4px 0; color: #dbe5f2; font-size: .76rem; }
.comparison-card > span:last-child { color: var(--muted); font-size: .66rem; }
.trace-label { color: var(--mint); font-size: .57rem; font-weight: 800; letter-spacing: .08em; }
.alternate .trace-label { color: #a99cff; }
.versus { align-self: center; color: var(--dim); font-size: .62rem; font-weight: 800; }

.inspector-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.inspector-heading { min-height: 66px; align-items: center; border-bottom: 1px solid var(--line); }
.status-pill.verified { color: var(--mint); border-color: rgba(121,242,208,.24); background: rgba(121,242,208,.06); }
.status-pill.unverified { color: var(--amber); border-color: rgba(255,202,107,.24); background: rgba(255,202,107,.06); }
.status-pill.disputed, .status-pill.rejected { color: var(--orange); border-color: rgba(255,142,98,.24); background: rgba(255,142,98,.06); }
.status-pill.approved { color: var(--cyan); border-color: rgba(88,201,255,.24); background: rgba(88,201,255,.06); }
.status-pill.observed, .status-pill.deterministically-verified { color: var(--mint); border-color: rgba(121,242,208,.24); background: rgba(121,242,208,.06); }
.status-pill.human-readable-interpretation { color: #ad9fff; border-color: rgba(140,124,255,.26); background: rgba(140,124,255,.07); }
.status-pill.blocked { color: var(--red); border-color: rgba(255,111,134,.28); background: rgba(255,111,134,.07); }
.status-pill.awaiting-human-authorization { color: var(--amber); border-color: rgba(255,202,107,.28); background: rgba(255,202,107,.07); }
.status-pill.restricted, .status-pill.not-instrumented, .status-pill.unavailable { color: var(--amber); border-color: rgba(255,202,107,.28); background: rgba(255,202,107,.07); }
.status-pill.inferred { color: #ad9fff; border-color: rgba(140,124,255,.26); background: rgba(140,124,255,.07); }
.inspector-tabs { display: grid; grid-template-columns: repeat(3,1fr); padding: 7px 8px 0; border-bottom: 1px solid var(--line); }
.inspector-tabs button { min-height: 37px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 650; }
.inspector-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--mint); }
.inspector-tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: .6rem; }
.inspector-pane { min-height: 0; flex: 1; overflow: auto; padding: 16px; scrollbar-color: #2b3850 transparent; scrollbar-width: thin; }
.inspector-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--muted); text-align: center; font-size: .8rem; line-height: 1.5; }
.inspector-empty svg { width: 42px; fill: none; stroke: #415069; stroke-width: 1.5; stroke-linecap: round; }
.inspector-empty p { max-width: 230px; margin: 0; }
.type-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.type-badge { color: var(--cyan); border-color: rgba(88,201,255,.2); background: rgba(88,201,255,.055); }
.metadata { color: var(--dim); font-size: .67rem; }
.item-summary { margin: 15px 0; color: #dde6f4; font-size: .94rem; font-weight: 560; line-height: 1.45; }
.origin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.origin-grid > div { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.origin-grid span { display: block; margin-bottom: 4px; color: var(--dim); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.origin-grid strong { display: block; overflow: hidden; color: #bdcadb; font-size: .67rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-profile-block { margin: 0 0 12px; padding: 10px; border: 1px solid rgba(140,124,255,.2); border-radius: 11px; background: linear-gradient(145deg, rgba(140,124,255,.055), rgba(88,201,255,.018)); }
.agent-profile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.agent-profile-grid > div { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,10,18,.38); }
.agent-profile-grid span { display: block; margin-bottom: 3px; color: var(--dim); font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agent-profile-grid strong { display: block; color: #c7d3e3; font-size: .63rem; line-height: 1.35; }
.agent-policy-list { margin: 8px 0 0; }
.agent-policy-list div { padding: 7px 0; border-bottom: 1px solid var(--line); }
.agent-policy-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.agent-policy-list dt { color: var(--dim); font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agent-policy-list dd { margin: 3px 0 0; color: #aebcd0; font-size: .64rem; line-height: 1.4; }
.confidence-block { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.confidence-block > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.confidence-block strong { color: var(--mint); }
.confidence-track { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #1d293d; }
.confidence-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); transition: width .45s ease; }
.confidence-block p { margin: 9px 0 0; color: var(--dim); font-size: .67rem; line-height: 1.4; }
.provenance-list { margin: 14px 0; }
.provenance-list div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.provenance-list dt { margin-bottom: 5px; color: var(--dim); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.provenance-list dd { margin: 0; color: #b9c6d8; font-size: .74rem; line-height: 1.45; overflow-wrap: anywhere; }
.excerpt-block { margin: 14px 0; padding: 12px; border-left: 2px solid var(--violet); border-radius: 0 9px 9px 0; background: rgba(140,124,255,.05); }
.excerpt-block > span { color: var(--dim); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.excerpt-block blockquote { margin: 8px 0 0; color: #aebbd0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; line-height: 1.5; }
.history-list { margin: 0; padding: 0; list-style: none; }
.history-list li { position: relative; padding: 0 0 18px 24px; color: #b7c4d7; font-size: .76rem; line-height: 1.45; }
.history-list li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 7px; border: 2px solid var(--surface-2); border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 1px rgba(140,124,255,.35); }
.history-list li::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 0; width: 1px; background: var(--line-strong); }
.history-list li:last-child::after { display: none; }
.history-list time { display: block; margin-top: 3px; color: var(--dim); font-size: .65rem; }
.review-log > p { color: var(--muted); font-size: .77rem; }
.review-entry { margin-bottom: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.review-entry strong { text-transform: capitalize; font-size: .75rem; }
.review-entry p { margin: 7px 0; color: #aebbd0; font-size: .72rem; line-height: 1.45; }
.review-entry time { color: var(--dim); font-size: .64rem; }
.review-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 9px; border-top: 1px solid var(--line); }
.review-button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; font-size: .62rem; }
.review-button:hover { border-color: var(--line); background: rgba(255,255,255,.035); color: var(--ink); }
.review-button:disabled { opacity: .35; cursor: not-allowed; }
.review-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.review-button.approve:hover { color: var(--mint); }
.review-button.challenge:hover { color: var(--amber); }
.review-button.correct:hover { color: var(--cyan); }
.review-button.reject:hover { color: var(--red); }

.timeline-panel {
  display: grid;
  grid-template-columns: 238px minmax(300px, 1fr) 250px;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: rgba(6,10,18,.96);
}
.timeline-controls { display: flex; align-items: center; gap: 7px; }
.play-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(121,242,208,.3); border-radius: 50%; color: var(--mint); background: rgba(121,242,208,.06); }
.play-button:hover { background: rgba(121,242,208,.12); }
.play-button svg { grid-area: 1/1; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.timeline-clock { margin-left: 6px; color: #aab6c8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-variant-numeric: tabular-nums; }
.timeline-track-wrap { position: relative; padding: 18px 0 14px; }
.timeline-track-wrap input { width: 100%; height: 4px; margin: 0; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--mint) var(--progress, 0%), #243148 var(--progress, 0%)); }
.timeline-track-wrap input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 3px solid #07100f; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px rgba(121,242,208,.5), 0 0 14px rgba(121,242,208,.35); }
.timeline-track-wrap input::-moz-range-thumb { width: 11px; height: 11px; border: 3px solid #07100f; border-radius: 50%; background: var(--mint); }
.timeline-ticks { position: absolute; left: 2px; right: 2px; bottom: 8px; display: flex; justify-content: space-between; }
.timeline-ticks span { width: 1px; height: 5px; background: #334158; }
.timeline-now { min-width: 0; text-align: right; }
.timeline-now span { display: block; margin-bottom: 4px; color: var(--dim); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.timeline-now strong { display: block; overflow: hidden; color: #c7d3e4; font-size: .76rem; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(1,4,10,.78); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(510px, 100%); padding: 20px; border: 1px solid var(--line-strong); border-radius: 18px; background: #0d1523; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.modal-heading h2 { font-size: 1.15rem; }
.modal > p { margin: 0 0 16px; color: #b9c5d8; font-size: .83rem; line-height: 1.5; }
.modal label { margin-top: 14px; }
.modal label span { color: var(--dim); font-weight: 450; }
.modal textarea { width: 100%; margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.toast-region { position: fixed; right: 18px; bottom: 108px; z-index: 110; display: grid; gap: 8px; }
.toast { min-width: 240px; max-width: 360px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; color: #dbe5f2; background: #111b2b; box-shadow: var(--shadow); font-size: .75rem; animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 300px minmax(450px, 1fr) 320px; }
  .state-select-label, .session-meta .divider, .session-meta span:last-child { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .legend { display: none; }
  .microscope-toolbar { grid-template-columns: 170px minmax(230px,1fr); }
  .boundary-status { display: none; }
  .agent-lane { grid-template-columns: 145px minmax(190px,1fr) 130px; }
  .agent-runtime-card { grid-template-columns: 155px minmax(290px,1fr) 132px; }
  .context-columns { grid-template-columns: repeat(2,minmax(150px,1fr)); }
  .synthesis-status-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 960px) {
  .app-shell { display: block; }
  .topbar { min-height: 64px; grid-template-columns: 1fr auto; padding: 10px 15px; }
  .session-meta { display: none; }
  .top-actions .button { padding: 0 10px; }
  .top-actions .button svg { margin: 0; }
  .top-actions .button { font-size: 0; }
  .compact-select { min-width: 110px; }
  .truth-banner { padding: 9px 15px; }
  .workspace { display: grid; grid-template-columns: 1fr; overflow: visible; padding: 8px; }
  .left-column { display: contents; }
  .query-panel { order: 1; }
  .graph-panel { order: 2; min-height: 600px; }
  .narration-panel { order: 3; min-height: 420px; }
  .inspector-panel { order: 4; min-height: 560px; }
  .timeline-panel { position: sticky; bottom: 0; z-index: 30; grid-template-columns: auto 1fr; gap: 14px; padding: 10px 14px; }
  .timeline-now { display: none; }
  .toast-region { bottom: 94px; }
  .microscope-toolbar { grid-template-columns: minmax(170px,.8fr) minmax(240px,1.2fr) auto; }
  .boundary-status { display: flex; }
  .agent-lane { grid-template-columns: 168px minmax(240px,1fr) 156px; }
}

@media (max-width: 600px) {
  .topbar { gap: 8px; }
  .brand { font-size: .76rem; letter-spacing: .12em; }
  .brand-mark { width: 29px; height: 29px; }
  .top-actions { gap: 5px; }
  .compact-select { width: 40px; min-width: 40px; color: transparent; padding: 0; }
  .top-actions .button { width: 36px; padding: 0; }
  .truth-banner { align-items: flex-start; font-size: .72rem; line-height: 1.4; }
  .panel-heading { padding-left: 14px; padding-right: 14px; }
  .query-panel textarea, .source-field { margin-left: 14px; margin-right: 14px; width: calc(100% - 28px); }
  .query-actions { padding-left: 14px; padding-right: 14px; }
  .query-actions .button { padding: 0 10px; }
  .graph-panel { min-height: 530px; }
  .graph-tools { gap: 5px; }
  .graph-heading { align-items: flex-start; }
  .canvas-mode-switch button { padding: 0 7px; font-size: .64rem; }
  .zoom-value { display: none; }
  .graph-tools .icon-button { width: 30px; height: 30px; }
  .microscope-toolbar { grid-template-columns: 1fr; gap: 10px; padding: 11px 14px; }
  .granularity-readout small { white-space: normal; }
  .boundary-status { display: none; }
  .alert-rail { overflow-x: auto; }
  .integrity-chip { display: none; }
  #evidenceGraph { min-width: 680px; transform-origin: left center; }
  .graph-stage { overflow-x: auto; }
  .system-view, .agent-layer-view, .agent-lanes-view, .context-map-view, .telemetry-view, .synthesis-view { min-width: 650px; }
  .architecture-legend { grid-template-columns: repeat(3,minmax(180px,1fr)); }
  .agent-runtime-card { grid-template-columns: 155px minmax(300px,1fr) 135px; }
  .agent-lane { grid-template-columns: 155px minmax(250px,1fr) 145px; }
  .context-columns { grid-template-columns: repeat(4,minmax(142px,1fr)); }
  .telemetry-grid { grid-template-columns: repeat(2,minmax(210px,1fr)); }
  .comparison-strip { grid-template-columns: 1fr; }
  .versus { display: none; }
  .timeline-panel { grid-template-columns: auto minmax(120px,1fr); }
  .timeline-controls .icon-button { display: none; }
  .timeline-clock { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}