/* Lab section only: the WebGL stage plus the panes that float over it. Tokens come from
   theme.css; this file declares no colour of its own. */

.sec-lab { gap: 16px !important; max-width: none !important; }
.lab-wrap {
  position: relative;
  height: clamp(520px, 68vh, 760px);
  border: 1px solid var(--rule);
  background: var(--stage);
  overflow: hidden;
}
.stage { position: absolute; inset: 0; }
.stage canvas { width: 100%; height: 100%; display: block; }
/* The stage clips overflow, so the focus ring sits inside the canvas edge rather than outside. */
.stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.stage.no-webgl canvas { display: none; }

/* Scene caption + provenance + keyboard help (holo.js). Bottom right, clear of the panes and HUD. */
/* Sized to fit the 104px strip the panes leave clear, beside the HUD. */
.holo-overlay {
  position: absolute; right: 16px; bottom: 16px; width: min(540px, calc(100% - 360px));
  padding: 6px 10px; display: grid; gap: 2px;
  background: color-mix(in oklch, var(--paper) 88%, transparent); border: 1px solid var(--rule);
  font: 11px/1.4 var(--mono); color: var(--muted); pointer-events: none;
}
.holo-overlay p { margin: 0; min-width: 0; }
.holo-caption { color: var(--ink); }
.holo-caption .ev-badge { margin-right: 4px; }
/* One line; the full provenance is in the title, the canvas name and the fallback table. */
.holo-prov { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holo-help { color: var(--faint); }
.stage canvas:not(:focus-visible) ~ .holo-overlay .holo-help { display: none; }
.stage.no-webgl .holo-help { display: none; }

/* Accessible 2D/text stand-in for the canvas: same artifact-backed values, no WebGL needed. */
/* Desktop: the column between the story pane and the agents list, above the bottom strip. */
.holo-fallback {
  position: absolute; top: 14px; bottom: 104px;
  left: calc(min(400px, 56%) + 40px); right: 266px;
  overflow: auto; padding: 4px 12px 12px;
  font-size: 13px; color: var(--ink);
}
body:not([data-mode="cancer"]) .holo-fallback { right: 14px; }
.holo-fallback h2 { margin: 0 0 6px; font: 600 15px/1.3 var(--sans); }
.holo-fallback p { margin: 0 0 10px; max-width: 60ch; }
.holo-fallback-why { color: var(--muted); font: 12px/1.5 var(--mono); }
.holo-fallback table { border-collapse: collapse; width: 100%; max-width: 640px; font: 12px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.holo-fallback th, .holo-fallback td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.holo-fallback th { color: var(--muted); font-weight: 500; }
.holo-fallback td.prov { color: var(--muted); word-break: break-word; }

/* 3D-anchored callouts (SVG created by holo-scene.js). */
.holo-annot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.holo-annot polyline { fill: none; stroke: color-mix(in oklch, var(--ink) 45%, transparent); stroke-width: 1; }
.holo-annot circle { fill: none; stroke: var(--ink); stroke-width: 1; }
.holo-annot text { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.holo-annot .annot-sub { font-size: 8.5px; fill: var(--muted); }
.holo-annot .amber polyline { stroke: var(--accent-soft); }
.holo-annot .amber circle { stroke: var(--accent); }
.holo-annot .amber .annot-title { fill: var(--accent); }

/* Panes over the stage. */
/* The bottom strip is left clear for the run readout, so no pane sits on top of it. */
.lab-panes { position: absolute; inset: 14px 14px 104px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.story, .agents {
  pointer-events: auto;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  border: 1px solid var(--rule);
  padding: 18px;
  overflow: auto;
  max-height: 100%;
}
.story { width: min(400px, 56%); }
.agents { width: 240px; flex: 0 0 auto; }
.story h1 { margin: 0 0 8px; font: 700 22px/1.15 var(--display); letter-spacing: -0.025em; }
.story .lede { margin: 0 0 16px; }
body:not([data-mode="cancer"]) .agents { display: none; }

/* Progress steps, under the stage so the header stays at 7 controls. */
.steps {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: s;
  font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.steps li { counter-increment: s; padding: 9px 14px 8px; color: var(--muted); border-top: 2px solid var(--rule); white-space: nowrap; }
.steps li::before { content: counter(s, decimal-leading-zero) " "; color: var(--faint); }
.steps li.on { color: var(--accent); border-top-color: var(--accent); }
.steps li.done { color: var(--ink); border-top-color: var(--rule-strong); }
body:not([data-mode="cancer"]) .steps { display: none; }

.choices { display: grid; gap: 8px; margin-bottom: 16px; }
.choice {
  text-align: left; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink);
  padding: 11px 14px; cursor: pointer; font: inherit; display: grid; gap: 2px; min-height: var(--tap);
}
.choice strong { font: 600 15px/1.3 var(--sans); }
.choice span { color: var(--muted); font: 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.choice:hover { background: var(--paper-3); border-color: var(--rule-strong); }
.choice.on { background: var(--paper-3); border-color: var(--rule-strong); border-left: 2px solid var(--accent); }
.story .field { margin-bottom: 18px; }
.story .field small { color: var(--faint); font-size: 12px; }
.story .primary { width: 100%; margin-bottom: 10px; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 18px; font-size: 13.5px; }
.facts dt { color: var(--muted); font: 12px/1.6 var(--mono); }
.facts dd { margin: 0; font: 13px/1.6 var(--mono); font-variant-numeric: tabular-nums; word-break: break-word; }
.denied #gate-title { color: var(--danger); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
.card { min-width: 0; overflow: hidden; border: 1px solid var(--rule); padding: 12px; background: var(--paper-3); }
.card h3 { margin: 0 0 4px; font: 600 14px/1.3 var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.card p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.card a, .verdict a, .span a {
  color: var(--ink); font: 12px var(--mono); display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.card a:hover { text-decoration-color: var(--accent); }

/* Step 3 rich evidence (holo-evidence.js). */
.ev-item { border-top: 1px solid var(--rule); }
.ev-item summary { cursor: pointer; padding: 8px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); list-style: none; }
.ev-item summary::-webkit-details-marker { display: none; }
.ev-item summary:hover, .ev-item[open] summary { color: var(--accent); }
.span { margin: 0 0 8px; }
.span blockquote { margin: 0 0 4px; padding: 6px 10px; border-left: 2px solid var(--accent); background: var(--paper-2); font-size: 12.5px; color: var(--ink); }
.src-id { font: 11.5px/1.5 var(--mono); color: var(--muted); margin: 4px 0 6px; word-break: break-word; }
.claim-check { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 12px; }
.claim-check .kicker, .claim-check > div { grid-column: 1 / -1; }
.verdict { border: 1px solid var(--rule); padding: 10px 12px; background: var(--paper-3); }
.verdict.pass { border-color: var(--success); }
.verdict.fail { border-color: var(--danger); }
.verdict-label { margin: 0 0 6px; font: 600 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.verdict.pass .verdict-label { color: var(--success); }
.verdict.fail .verdict-label { color: var(--danger); }
.verdict .checks { display: block; margin: 0 0 8px; padding: 0; list-style: none; font: 12px/1.5 var(--mono); color: var(--muted); }
.full-view { display: inline-block; margin-bottom: 14px; }

#chart { width: 100%; height: auto; margin-bottom: 6px; }
#chart .grid { stroke: var(--rule); stroke-width: 0.5; }
#chart .drug { fill: none; stroke: var(--accent); stroke-width: 2; }
#chart .base { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
#chart .cursor { stroke: var(--ink); stroke-width: 1; }
.legend { font: 12px var(--mono); color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sw { width: 14px; height: 2px; display: inline-block; }
.sw.drug { background: var(--accent); }
.sw.base { background: var(--muted); }

#agent-list { list-style: none; margin: 0; padding: 0; display: grid; }
#agent-list li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--rule); }
#agent-list .dot { width: 7px; height: 7px; margin-top: 7px; background: var(--rule-strong); transform: rotate(45deg); }
#agent-list li.run .dot { background: var(--accent); animation: lab-pulse 1s var(--ease-in-out) infinite; }
#agent-list li.ok .dot { background: var(--success); }
#agent-list li.bad .dot { background: var(--danger); }
#agent-list li.wait .dot { background: transparent; border: 1px solid var(--accent); }
#agent-list li.idle .dot { background: transparent; border: 1px solid var(--rule-strong); }
#agent-list .dot { transition: background-color var(--fast) var(--ease-out); }
/* Per-row working state. Its only animation lives in motion.css. */
#agent-list .stage-note {
  display: block; margin-top: 2px;
  font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
#agent-list li.ok .stage-note { color: var(--success); }
#agent-list li.bad .stage-note { color: var(--danger); }
#agent-list strong { font: 600 13.5px/1.35 var(--sans); display: block; }
#agent-list span { font-size: 12.5px; color: var(--muted); }
#agent-list .stage-label { display: block; font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); border: 0; padding: 12px 0 4px; }
@keyframes lab-pulse { 50% { opacity: 0.35; } }

/* Run readout. */
.hud {
  position: absolute; left: 16px; bottom: 16px; display: flex; gap: 12px; align-items: center;
  padding: 8px 14px 8px 8px;
  background: color-mix(in oklch, var(--paper) 88%, transparent); border: 1px solid var(--rule);
  font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; pointer-events: none;
}
.rings { width: 72px; height: 72px; flex: 0 0 auto; }
.rings circle { fill: none; stroke: var(--accent); }
.rings .r1 { stroke-width: 1; stroke-dasharray: 1 4; opacity: 0.7; transform-origin: center; animation: lab-spin 18s var(--ease-linear) infinite; }
.rings .r2 { stroke-width: 5; stroke-dasharray: 40 18 8 18; opacity: 0.8; transform-origin: center; animation: lab-spin 9s var(--ease-linear) infinite reverse; }
.rings .r3 { stroke-width: 1; opacity: 0.7; }
.rings .core { fill: var(--accent-soft); stroke: none; }
.hud.idle .rings * { animation-play-state: paused; }
.hud-line { margin: 0; font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.hud-sub { margin: 4px 0 0; font: 11.5px var(--mono); color: var(--muted); }
@keyframes lab-spin { to { transform: rotate(360deg); } }

.disclaimer { margin: 0; font: 11px/1.5 var(--mono); color: var(--muted); }

@media (max-width: 900px) {
  .lab-wrap { height: auto; border: 0; background: none; overflow: visible; }
  .stage { position: relative; inset: auto; height: 44vh; min-height: 280px; background: var(--stage); border: 1px solid var(--rule); }
  .lab-panes { position: static; inset: auto; flex-direction: column; margin-top: 12px; }
  .story, .agents { width: 100%; max-height: none; background: var(--paper-2); }
  .hud { position: static; margin-top: 12px; }
  .holo-fallback { inset: 0; padding: 14px 14px 96px; }
  .holo-overlay { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* Hardware controller connect button + live status, at the end of the mode/steps row. */
.hw-ctl { margin-left: auto; display: flex; gap: 10px; align-items: center; min-width: 0; }
.hw-status { margin: 0; font: 11px/1.4 var(--mono); color: var(--muted); max-width: 46ch; }