:root {
  --ground:#f2f4f3; --surface:#fcfcfb; --surface-2:#eef1f0; --line:#d9e0de;
  --ink:#101615; --ink-2:#394542; --muted:#5d6965; --accent:#0b6e5f;
  --accent-ink:#fff; --accent-soft:#e2f0ed; --ok:#2f6b3a; --ok-soft:#e5f1e7;
  --warn:#806000; --warn-soft:#f8efd4; --fail:#b4441f; --fail-soft:#fbe9e2;
  --shadow:0 10px 32px rgba(24,45,40,.08); --radius:10px;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark) {
  :root { --ground:#0f1413; --surface:#181d1b; --surface-2:#222826; --line:#34403d;
    --ink:#ecf1ef; --ink-2:#c2ccc9; --muted:#96a39f; --accent:#58d3bb;
    --accent-ink:#07211c; --accent-soft:#15332d; --ok:#83ca8e; --ok-soft:#1d3422;
    --warn:#dec05e; --warn-soft:#352d15; --fail:#f18c65; --fail-soft:#3b2119;
    --shadow:0 12px 38px rgba(0,0,0,.24); }
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { min-height:100vh; display:flex; flex-direction:column; background:var(--ground); color:var(--ink); font:14px/1.45 var(--sans); }
button,select,textarea,input { font:inherit; color:inherit; }
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px;
}
.topbar { min-height:52px; display:flex; align-items:center; gap:18px; padding:9px 18px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-family:var(--mono); letter-spacing:-.02em; }
.brand b { color:var(--accent); }
.boundary,.quiet-link { color:var(--muted); font-size:12px; }
.quiet-link { text-decoration:none; }
.quiet-link:hover { color:var(--accent); }
.spacer { flex:1; }
.progress { height:38px; display:flex; align-items:center; justify-content:center; gap:12px; overflow-x:auto; white-space:nowrap; padding:0 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.progress span { display:flex; align-items:center; gap:6px; }
.progress span b { width:19px; height:19px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font:10px var(--mono); }
.progress span.active { color:var(--accent); font-weight:650; }
.progress span.active b { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.progress i { font-style:normal; color:var(--line); }
main { flex:1; min-height:0; display:grid; grid-template-columns:310px minmax(520px,1fr) 330px; }
aside { background:var(--surface); overflow:auto; }
.guide-panel { padding:22px 20px; border-right:1px solid var(--line); }
.evidence-panel { padding:18px; border-left:1px solid var(--line); }
.evidence-panel section+section { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
h1 { margin:3px 0 8px; font-size:23px; letter-spacing:-.03em; line-height:1.15; }
h2 { margin:1px 0 0; font-size:16px; letter-spacing:-.015em; }
.lede { margin:0 0 20px; color:var(--ink-2); font-size:13px; }
.eyebrow { margin:0; color:var(--muted); font:600 10px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.1em; }
label,.prompt-field { color:var(--ink-2); font-size:12px; font-weight:600; }
select,textarea,input[type=number],input[type=text] { width:100%; border:1px solid var(--line); background:var(--ground); border-radius:8px; padding:8px 9px; margin-top:5px; }
textarea { resize:vertical; min-height:108px; line-height:1.45; }
.field-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
.mode-field { border:0; padding:0; margin:0 0 17px; }
.mode-field legend { color:var(--ink-2); font-size:12px; font-weight:600; margin-bottom:7px; }
.mode-field label { display:flex; align-items:center; gap:8px; padding:8px; margin-bottom:6px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.mode-field label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.mode-field input { accent-color:var(--accent); }
.mode-field span { display:flex; flex-direction:column; }
.mode-field small { color:var(--muted); font-weight:400; }
.example-row { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 12px; }
.example { border:0; border-radius:99px; background:var(--surface-2); color:var(--muted); padding:5px 8px; font-size:10.5px; cursor:pointer; }
.example:hover { color:var(--accent); background:var(--accent-soft); }
button { border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:7px 10px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:650; }
button.secondary { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
button:disabled { opacity:.45; cursor:not-allowed; }
.wide { width:100%; }
.assistant-card { margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); padding:13px; background:linear-gradient(145deg,var(--surface),var(--accent-soft)); }
.assistant-card p { margin:5px 0; font-size:12.5px; }
.assistant-card h3 { margin:5px 0; font-size:15px; }
.assistant-card ul { margin:8px 0; padding-left:18px; font-size:12px; }
.empty-card { background:var(--surface-2); }
.proposal-actions { display:flex; gap:7px; margin-top:10px; }
.workspace { min-width:0; min-height:0; display:flex; flex-direction:column; }
.studio-library { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.studio-library summary,.model-settings summary { cursor:pointer; font-weight:650; font-size:14px; }
.studio-library p,.studio-library li { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.studio-library label,.studio-library button,.model-settings label,.model-settings button { font-size:14px; }
.library-actions { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.component-card { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:12px; }
.component-card h3 { font-size:16px; margin:0; }
.component-card ul { padding-left:18px; }
.model-settings { padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.settings-fields { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding-top:10px; }
.settings-fields label { flex:1 1 130px; min-width:0; }
.settings-fields input,.settings-fields select { font-size:14px; }
.node-head input { accent-color:var(--accent); flex:none; margin:5px 0; }
.workspace-toolbar { min-height:52px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line); }
.workspace-toolbar>div { display:flex; flex-direction:column; }
.workspace-toolbar strong { font-size:13px; }
.workspace-toolbar span:not(.spacer) { font-size:10.5px; color:var(--muted); font-family:var(--mono); }
.workspace-toolbar select { width:130px; margin:0; padding:6px; }
.graph-canvas { position:relative; flex:1; min-height:480px; overflow:auto; background-color:var(--ground); background-image:radial-gradient(var(--line) .8px,transparent .8px); background-size:22px 22px; }
.wire-layer,.node-layer { position:absolute; left:0; top:0; width:1200px; height:760px; }
.wire-layer { pointer-events:none; overflow:visible; }
.wire { fill:none; stroke:var(--muted); stroke-width:2; opacity:.72; }
.wire.bad { stroke:var(--fail); stroke-dasharray:6 4; }
.sim-node { position:absolute; width:210px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.sim-node.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),var(--shadow); }
.node-head { display:flex; align-items:flex-start; gap:8px; padding:10px 11px 8px; cursor:grab; border-bottom:1px solid var(--line); background:var(--surface-2); touch-action:none; user-select:none; }
.node-head:active { cursor:grabbing; }
.node-icon { width:25px; height:25px; flex:none; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font:600 11px var(--mono); }
.node-title { min-width:0; }
.node-title b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.node-title small { display:block; color:var(--muted); font-size:10px; }
.node-body { padding:8px 0; }
.port-row { min-height:26px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 10px; color:var(--muted); font-size:10.5px; }
.port { width:13px; height:13px; flex:none; border:2px solid var(--accent); border-radius:50%; background:var(--surface); padding:0; }
.port.connected { background:var(--accent); }
.port.pending { box-shadow:0 0 0 4px var(--accent-soft); }
.port.input { margin-left:-17px; }
.port.output { margin-right:-17px; }
.output-row { justify-content:flex-end; }
.canvas-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; color:var(--muted); }
.canvas-empty span { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:25px; color:var(--accent); }
.canvas-empty h2 { color:var(--ink); margin-top:12px; }
.canvas-empty p { max-width:42ch; margin:6px; }
.runbar { min-height:68px; display:flex; align-items:center; gap:16px; padding:10px 14px; background:var(--surface); border-top:1px solid var(--line); }
.run-message { display:flex; flex-direction:column; flex:1; min-width:0; }
.run-message b { font-size:12.5px; }
.run-message span { color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-chip { border-radius:99px; padding:3px 8px; background:var(--warn-soft); color:var(--warn); font:600 10px var(--mono); white-space:nowrap; }
.status-chip.pass { background:var(--ok-soft); color:var(--ok); }
.status-chip.fail { background:var(--fail-soft); color:var(--fail); }
.status-chip.neutral { background:var(--surface-2); color:var(--muted); }
.section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.diagnostic-list { margin-top:11px; }
.diagnostic { border-left:3px solid var(--line); padding:7px 9px; margin:7px 0; background:var(--ground); border-radius:0 7px 7px 0; }
.diagnostic.fail { border-color:var(--fail); }
.diagnostic.warn { border-color:var(--warn); }
.diagnostic.pass { border-color:var(--ok); }
.diagnostic b { display:block; font-size:11.5px; }
.diagnostic span { display:block; color:var(--muted); font-size:10.5px; margin-top:2px; }
.muted { color:var(--muted); font-size:12px; }
.inspector-title { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.inspector-title h3 { margin:5px 0; font-size:15px; }
.inspector-form { display:grid; gap:8px; margin-top:10px; }
.scenario-grid { grid-template-columns:1fr 1fr; margin:0; }
.scenario-module+.scenario-module { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.scenario-module h3 { margin:0 0 6px; font-size:13px; }
.scenario-module h4 { margin:12px 0 4px; font-size:11.5px; }
.inspector-form label { font-size:10.5px; }
.vent-hardware-fields,.vent-placement-fields { margin-top:8px; padding-top:4px; border-top:1px dashed var(--line); }
.inline-inputs { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.face-picker { margin:7px 0; padding:7px; border:1px solid var(--line); border-radius:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.face-picker legend { padding:0 3px; color:var(--muted); font-size:10px; }
.face-picker label { display:flex; align-items:center; gap:4px; color:var(--ink-2); font-weight:500; }
.face-picker input { accent-color:var(--accent); }
.remove-block { color:var(--fail); margin-top:12px; font-size:11px; }
#traceChart { width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:var(--ground); margin:10px 0; }
/* An open path is filled black by default: without fill:none the axis (M20 8 V112 H312)
   painted a black triangle over the trace — the "black wedge" a customer saw instead of a result (#153). */
.trace-axis { fill:none; stroke:var(--line); stroke-width:1; }
.trace-line { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
.trace-cursor { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; }
.live-values { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.live-value { padding:6px 7px; border:1px solid var(--line); border-radius:7px; background:var(--ground); }
.live-value span { display:block; color:var(--muted); font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-value b { font:600 11px var(--mono); }
.evidence-fold { margin-top:10px; font-size:11px; }
.evidence-fold summary { cursor:pointer; color:var(--accent); }
.evidence-fold div { color:var(--muted); margin-top:7px; }
.safety-card { border:1px solid var(--warn); background:var(--warn-soft); border-radius:9px; padding:10px; }
.safety-card.fail { border-color:var(--fail); background:var(--fail-soft); }
.safety-card h3 { margin:0 0 5px; font-size:13px; }
.safety-card p { margin:5px 0; font-size:11px; }
.barrier-table { width:100%; border-collapse:collapse; margin-top:9px; font-size:10.5px; }
.barrier-table th,.barrier-table td { text-align:left; padding:4px; border-bottom:1px solid color-mix(in srgb,var(--warn) 28%,transparent); }
.chemistry-table td { vertical-align:top; }
.chemistry-table th:nth-child(4),.chemistry-table td:nth-child(4) { min-width:150px; }
.chemistry-table .status-chip { display:inline-block; margin-top:3px; }
.vent-placement-table { min-width:610px; }
.safety-card { overflow-x:auto; }
.vent-range { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0; }
.vent-range>div { padding:8px; border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); border-radius:7px; background:var(--surface); }
.vent-range span,.vent-range small { display:block; color:var(--muted); font-size:9.5px; }
.vent-range b { display:block; font:650 15px var(--mono); margin:2px 0; }
.loop-card { margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--ground); }
.loop-card h3 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 5px; font-size:12px; }
.loop-card p { margin:5px 0 9px; color:var(--muted); font-size:10.5px; }
.loop-card label { display:block; font-size:10.5px; }
footer { min-height:34px; padding:8px 16px; background:var(--surface); border-top:1px solid var(--line); color:var(--muted); font-size:10.5px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
@media (max-width:1120px) {
  main { grid-template-columns:290px minmax(500px,1fr); }
  .evidence-panel { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .evidence-panel section+section { border-top:0; border-left:1px solid var(--line); margin:0; padding:0 0 0 18px; }
}
@media (max-width:760px) {
  .boundary { display:none; }
  .topbar { gap:9px; padding:8px 10px; }
  .brand span { display:none; }
  .progress { justify-content:flex-start; }
  main { display:flex; flex-direction:column; }
  .guide-panel { border-right:0; border-bottom:1px solid var(--line); padding:18px 15px; }
  .workspace-toolbar { flex-wrap:wrap; }
  .workspace-toolbar .spacer { display:none; }
  .graph-canvas { min-height:540px; }
  .evidence-panel { display:block; border-top:1px solid var(--line); padding:16px; }
  .evidence-panel section+section { border-left:0; border-top:1px solid var(--line); margin-top:16px; padding:16px 0 0; }
  .runbar { align-items:stretch; flex-direction:column; }
  .run-message span { white-space:normal; }
  .runbar button { width:100%; }
}

/* WP-12 (#137): accessibility media features — same rules as index.html. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .guide-panel, .evidence-panel, .status-chip, button, select, input, textarea, .graph-canvas { border: 1px solid CanvasText; }
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent, #0B6E5F); color: #fff; padding: 8px 14px; }
.skip-link:focus { left: 8px; top: 8px; }

/* The hidden attribute must win over every display rule above. .canvas-empty is display:flex,
   which has the same specificity as [hidden] and used to keep "Start with the result, not the
   blocks" painted over a canvas full of blocks (#153). !important is the point: no later rule
   may reopen this. */
[hidden] { display:none !important; }

.physical-signal { min-width: 0; margin: 12px 0; padding: 10px; border: 1px solid var(--line, #c8d4cf); border-radius: 8px; }
.physical-signal legend { max-width: 100%; overflow-wrap: anywhere; font-weight: 600; }
.physical-signal input[type="checkbox"] { width: auto; }
#physicalResults { overflow-wrap: anywhere; }