/* Experiments use the bench's existing paper, ink and live-signal palette. */
.experiment h3 { margin-bottom: 8px; }
.experiment p { margin: 8px 0 12px; }
.experiment-scene { margin: 14px 0 8px; background: var(--chrome-2); border-radius: 8px; color: var(--ink-2); }
.experiment-scene svg { display: block; width: 100%; max-height: 110px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.experiment-scene text { fill: var(--ink-2); stroke: none; text-anchor: middle; font: 11px var(--font-ui); }
.experiment-scene .experiment-accent { stroke: var(--live); }
.experiment-scene .experiment-marker { fill: var(--live); stroke: var(--card); stroke-width: 2; }
.experiment-scene .experiment-water { fill: var(--live); fill-opacity: .2; stroke: none; }
.experiment-input { color: var(--ink-2); font-size: 12px; }
.experiment-input b { color: var(--ink); font: 600 12px var(--font-mono); }
.experiment-presets, .experiment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.experiment-presets { margin: 12px 0; }
.experiment-presets:empty { display: none; }
.experiment-presets .btn[aria-pressed="true"] { color: var(--on-live); background: var(--live); border-color: var(--live); }
.experiment-control { display: block; margin: 14px 0; padding: 0; border: 0; color: var(--ink-2); font-size: 12px; }
.experiment-control output { float: right; color: var(--ink); font: 600 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.experiment-control input, .experiment-control select { display: block; width: 100%; margin-top: 8px; accent-color: var(--live); }
.experiment-control input { min-height: 28px; cursor: pointer; }
.experiment .experiment-result { padding: 10px 0; border-top: 1px solid var(--line); color: var(--live); font: 600 12px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.experiment-result.is-warn { color: var(--warn-ink); }
.experiment-evidence { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 12px; table-layout: fixed; }
.experiment-evidence caption { text-align: left; font-weight: 700; color: var(--ink); padding: 0 0 8px; }
.experiment-evidence th, .experiment-evidence td { text-align: left; vertical-align: top; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.experiment-evidence th { width: 40%; padding-right: 10px; font-weight: 500; color: var(--ink-2); }
.experiment-evidence td { color: var(--ink); font-variant-numeric: tabular-nums; }
.experiment-actions { margin-top: 12px; }
.experiment .experiment-note { margin-bottom: 0; color: var(--ink-3); font-size: 11px; line-height: 1.5; }
.experiment :is(button, input, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.experiment-banner-title { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.experiment-banner-title span { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--ink-2); }
.stimulus { pointer-events: none; }
.stimulus rect { fill: var(--card); stroke: var(--ink-3); stroke-width: .6; }
.stimulus text { fill: var(--ink-2); font: 600 8px var(--font-mono); text-anchor: middle; dominant-baseline: middle; }
.stimulus-leader { fill: none; stroke: var(--ink-3); stroke-width: .7; stroke-dasharray: 2 2; }
.stimulus-face { fill: var(--gold); fill-opacity: .18; stroke: var(--gold-ink); stroke-width: .8; }
.stimulus.is-selected rect { stroke: var(--gold-ink); stroke-width: 1; }
.stimulus.is-selected .stimulus-face { fill-opacity: .35; }
@media (pointer: coarse) {
  .experiment .btn { min-height: 44px; }
  .experiment-control input { min-height: 44px; }
}
@media (max-width: 980px) {
  #missionBanner:has(.experiment-banner-title) { flex-wrap: wrap; gap: 8px; }
  .experiment-banner-title { flex-basis: 100%; }
}