/* LA CCTV Supply — SCIF interactive labs. Uses tokens.css only. Class prefix: lab- */

/* ------------------------------------------------------------------ shell */
.lab{
  position:relative; color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--glass-border); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:clamp(18px,3.2vw,40px); margin-block:0 clamp(28px,4vw,56px);
  overflow:hidden; isolation:isolate;
}
.lab::before{ /* blueprint grid wash */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px; mask-image:linear-gradient(180deg,var(--bg),transparent 55%);
  -webkit-mask-image:linear-gradient(180deg,var(--bg),transparent 55%);
}
.lab *,.lab *::before,.lab *::after{box-sizing:border-box}
.lab [hidden]{display:none!important}
.lab p{margin:0}
.lab p.lab-plain,.lab p.lab-note{margin-top:14px}
.lab p.lab-swipe{margin:0 0 6px}
.lab a{color:var(--cyan); text-underline-offset:3px; text-decoration-thickness:1px}
.lab a:hover{color:var(--ink)}
.lab strong{color:var(--ink); font-weight:600}
.lab :focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}
.lab-sr{position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0}
.lab-muted{color:var(--ink-3)}

.lab-head{max-width:78ch; margin-bottom:clamp(18px,2.4vw,28px)}
.lab-kicker{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:.4em .8em; align-items:center}
.lab-kicker-num{color:var(--cyan); border:1px solid var(--cyan-soft); background:var(--cyan-soft); border-radius:var(--r-pill); padding:2px 10px}
.lab-title{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,44px); line-height:1.04; letter-spacing:-.01em; margin:.35em 0 .3em; color:var(--ink); text-wrap:balance}
.lab-lede{color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); max-width:70ch; text-wrap:pretty}

.lab-label{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; padding:0}
.lab-label var,.lab var{font-style:italic; font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--ink-2)}
.lab-unit{color:var(--ink-3)}
.lab-stepchip{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--cyan-soft); color:var(--cyan); font-size:11px; letter-spacing:0}

/* ------------------------------------------------------------------ controls */
.lab-tabs{display:flex; flex-wrap:wrap; gap:6px; padding:5px; margin-bottom:18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill); width:fit-content; max-width:100%}
.lab-tab{appearance:none; border:0; background:transparent; color:var(--ink-2); font:500 14px/1.2 var(--font-body); padding:10px 16px; min-height:40px; border-radius:var(--r-pill); cursor:pointer; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lab-tab:hover{color:var(--ink); background:var(--surface-2)}
.lab-tab[aria-selected="true"]{background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--glass-border),0 0 18px -8px var(--cyan)}
.lab-tab[aria-selected="true"]::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-right:8px; vertical-align:middle; transform:translateY(-1px)}

.lab-btn{appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--cyan); background:var(--cyan); color:var(--bg); font:600 14px/1 var(--font-body); cursor:pointer; transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); white-space:nowrap}
.lab-btn:hover{box-shadow:var(--glow-cyan)}
.lab-btn:active{transform:translateY(1px)}
.lab-btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none}
.lab-btn--ghost{background:transparent; color:var(--ink); border-color:var(--glass-border)}
.lab-btn--ghost:hover{border-color:var(--cyan); box-shadow:none; background:var(--cyan-soft)}
.lab-btn--small{min-height:34px; padding:6px 12px; font-size:13px}

.lab-switch{appearance:none; display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:8px 16px 8px 8px; border-radius:var(--r-pill); border:1px solid var(--glass-border); background:var(--bg); color:var(--ink); font:500 14px/1.2 var(--font-body); cursor:pointer; text-align:left}
.lab-switch:hover{border-color:var(--ink-3)}
.lab-switch-track{position:relative; flex:none; width:44px; height:26px; border-radius:var(--r-pill); background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); transition:background var(--t) var(--ease)}
.lab-switch-knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--ink-2); transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.lab-switch[aria-pressed="true"]{border-color:var(--red)}
.lab-switch[aria-pressed="true"] .lab-switch-track{background:var(--red-soft); box-shadow:inset 0 0 0 1px var(--red)}
.lab-switch[aria-pressed="true"] .lab-switch-knob{transform:translateX(18px); background:var(--red)}
.lab--compartments .lab-switch[aria-pressed="true"]{border-color:var(--cyan)}
.lab--compartments .lab-switch[aria-pressed="true"] .lab-switch-track{background:var(--cyan-soft); box-shadow:inset 0 0 0 1px var(--cyan)}
.lab--compartments .lab-switch[aria-pressed="true"] .lab-switch-knob{background:var(--cyan)}

.lab-field{border:0; margin:0; padding:0; min-width:0}
.lab-seg-row{display:flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.lab-seg-opt{position:relative; flex:1 1 auto; cursor:pointer}
.lab-seg-opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.lab-seg-opt span{display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:6px 12px; border-radius:6px; color:var(--ink-2); font-size:14px; text-align:center; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lab-seg-opt small{color:var(--ink-3); font-size:12px}
.lab-seg-opt input:checked + span{background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--cyan)}
.lab-seg-opt input:checked + span small{color:var(--ink-2)}
.lab-seg-opt input:focus-visible + span{outline:2px solid var(--cyan); outline-offset:2px}
.lab-seg-opt:hover span{color:var(--ink)}

.lab-input{width:100%; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg); color:var(--ink); font:500 16px/1 var(--font-mono)}
.lab-input:focus{border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px var(--cyan-soft)}
.lab-range{-webkit-appearance:none; appearance:none; width:100%; height:40px; background:transparent; cursor:pointer; margin:0}
.lab-range::-webkit-slider-runnable-track{height:6px; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--cyan) var(--fill,50%),var(--surface-3) var(--fill,50%))}
.lab-range::-moz-range-track{height:6px; border-radius:var(--r-pill); background:var(--surface-3)}
.lab-range::-moz-range-progress{height:6px; border-radius:var(--r-pill); background:var(--cyan)}
.lab-range::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:var(--ink); border:3px solid var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft)}
.lab-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--ink); border:3px solid var(--cyan)}
.lab-range:focus-visible{outline:none}
.lab-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--cyan-soft),0 0 0 8px var(--cyan)}
.lab-check{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; min-height:32px}
.lab-check input{accent-color:var(--cyan); width:16px; height:16px}
.lab-hint{font-size:12.5px; color:var(--ink-3)}

.lab-swipe{display:none}
.lab-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-bottom:14px}
.lab-status{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3)}

/* ------------------------------------------------------------------ figure frame */
.lab-fig{margin:0; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden; position:relative}
.lab-fig-scroll{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--ink-4) transparent}
.lab-fig-scroll > .lab-svg{min-width:0}
.lab-svg{display:block; width:100%; height:auto; font-family:var(--font-mono); overflow:visible}
.lab-svg text{fill:var(--ink-2); font-size:14px}
@media (max-width:760px){
  .lab-fig-scroll > .lab-svg{min-width:780px}
  .lab-fig-scroll > .lab-cmp-svg{min-width:640px}
  .lab-stc-svg .lab-t-zone,.lab-stc-svg .lab-t-tiny{display:none}
  .lab-stc-cap{display:flex!important}
  .lab-swipe{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; text-align:right}
  .lab-fig-scroll{mask-image:linear-gradient(90deg,var(--bg) 86%,var(--glass)); -webkit-mask-image:linear-gradient(90deg,var(--bg) 86%,var(--glass))}
}

/* SVG type */
/* text halo keeps labels legible where they cross walls and lines */
.lab-svg .lab-t-zone,.lab-svg .lab-t-label,.lab-svg .lab-t-cap,.lab-svg .lab-t-small,.lab-svg .lab-t-tiny,.lab-wg-cuttext,.lab-wg-tick{paint-order:stroke fill; stroke:var(--bg-2); stroke-width:4px; stroke-linejoin:round}
.lab-t-zone{font-size:13px!important; letter-spacing:.14em; font-weight:600}
.lab-t-sub{font-size:12.5px!important; fill:var(--ink-3)!important}
.lab-t-cap{font-size:13px!important; font-weight:700; letter-spacing:.12em; fill:var(--ink)!important}
.lab-t-label{font-size:14px!important; fill:var(--ink)!important}
.lab-fl-svg .lab-t-label{letter-spacing:0}
.lab-t-small{font-size:12.5px!important}
.lab-t-tiny{font-size:11px!important}
.lab-t-shield{font-size:11px!important; letter-spacing:.32em; font-weight:700; fill:var(--cyan)!important}
.lab-svg .lab-t-red{fill:var(--red)!important}
.lab-svg .lab-t-cyan{fill:var(--cyan)!important}
.lab-svg .lab-t-amber{fill:var(--amber)!important}
.lab-svg .lab-t-muted{fill:var(--ink-3)!important}

.lab-zone--out{fill:var(--surface)}
.lab-zone--in,.lab-zone--scif{fill:var(--cyan-soft); opacity:.55}
.lab-shield-body{fill:var(--surface-3)}
.lab-shield-face{stroke:var(--cyan); stroke-width:2}
.lab-box{fill:var(--surface-2); stroke:var(--ink-4); stroke-width:1.5}
.lab-box--red{stroke:var(--red)}
.lab-box--cyan{stroke:var(--cyan)}
.lab-box-line{stroke:var(--ink-4); stroke-width:3; stroke-linecap:round}
.lab-tube{fill:var(--surface-3); stroke:var(--ink-4); stroke-width:1}
.lab-cond--red{fill:var(--red)}
.lab-cond--cyan{fill:var(--cyan)}
.lab-sleeve{fill:var(--surface-2); stroke:var(--ink-3); stroke-width:1.5}
.lab-gasket{fill:var(--ink-3)}
.lab-leader{fill:none; stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3}
.lab-hatch{stroke:var(--ink-4); stroke-width:1.5; fill:none}
.lab-hatch--amber{stroke:var(--amber); opacity:.7}
.lab-num circle{fill:var(--bg); stroke:var(--cyan); stroke-width:1.5}
.lab-num text{fill:var(--cyan)!important; font-size:12px!important; font-weight:700}
.lab-num--amber circle{stroke:var(--amber)}
.lab-num--amber text{fill:var(--amber)!important}
.lab-wave{fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.lab-wave--noise{stroke:var(--red)}
.lab-wave--clean{stroke:var(--cyan)}
.lab-scroll{animation:lab-scroll 2.6s linear infinite}
@keyframes lab-scroll{to{transform:translateX(calc(-1 * var(--period,110px)))}}
.lab-arc{fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; opacity:0; animation:lab-radiate 1.8s ease-out infinite; animation-delay:calc(var(--i,0) * .3s)}
.lab-arc--test{stroke:var(--green)}
@keyframes lab-radiate{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.lab-current{fill:none; stroke:var(--amber); stroke-width:3; stroke-dasharray:10 14; stroke-linecap:round; animation:lab-flow 1.1s linear infinite}
@keyframes lab-flow{to{stroke-dashoffset:-24}}

/* ------------------------------------------------------------------ 1 · filter */
.lab-fl-case{fill:var(--surface-2); stroke:var(--ink-2); stroke-width:2}
.lab-fl-comp--line{fill:var(--red-soft)}
.lab-fl-comp--load{fill:var(--cyan-soft)}
.lab-fl-coil{fill:none; stroke:var(--ink); stroke-width:2}
.lab-fl-wire--red{stroke:var(--red); stroke-width:2.5}
.lab-fl-wire--cyan{stroke:var(--cyan); stroke-width:2.5}
.lab-fl-shunt{stroke:var(--amber); stroke-width:2}
.lab-fl-plate{stroke:var(--amber); stroke-width:3}
.lab-fl-term--red{fill:var(--red)}
.lab-fl-term--cyan{fill:var(--cyan)}
.lab-fl-flange{fill:var(--cyan)}
.lab-fl-bolt{fill:var(--bg)}
.lab-fl-test line{stroke:var(--green); stroke-width:2.5; stroke-linecap:round}
.lab-fl-filter{transition:transform var(--t-slow) var(--ease)}
.lab-fl-dirty,.lab-fl-tube-out,.lab-fl-clean,.lab-fl-tube-in{transform-box:fill-box; transition:transform var(--t-slow) var(--ease)}
.lab-fl-dirty,.lab-fl-tube-out{transform-origin:0 50%}
.lab-fl-clean,.lab-fl-tube-in{transform-origin:100% 50%}
.lab-fl-dirty{transform:scaleX(var(--fl-dirty,1))}
.lab-fl-tube-out{transform:scaleX(var(--fl-tube-out,1))}
.lab-fl-clean{transform:scaleX(var(--fl-clean,1))}
.lab-fl-tube-in{transform:scaleX(var(--fl-tube-in,1))}
/* Conductor extents, one row per state. Targets in viewBox units:
   dirty ends at the LINE terminal, tube-out at the case, clean starts at the
   LOAD terminal, tube-in at the case. Fault carries dirty past the barrier plate. */
.lab-panel{--fl-dirty:.3525; --fl-tube-out:.3023; --fl-clean:1; --fl-tube-in:1}          /* out  ok   300 260 440 480 */
.lab-panel[data-face="in"]{--fl-dirty:.8022; --fl-tube-out:.7868; --fl-clean:.4444; --fl-tube-in:.3902} /* in ok 550 510 690 730 */
.lab-panel.is-fault{--fl-dirty:1; --fl-tube-out:1}                                        /* out fault 660 620 */
.lab-panel[data-face="in"].is-fault{--fl-dirty:1.4137; --fl-tube-out:1.4845}              /* in  fault 890 870 */
.lab-fl-bad{opacity:0; transition:opacity var(--t) var(--ease)}
.lab-fl-ok{transition:opacity var(--t) var(--ease)}
/* The fault is an unbonded case and unfiltered LINE carried past the barrier plate.
   The case deliberately does NOT move: which face it sits on is not the fault. */
.is-fault .lab-fl-bad{opacity:1}
.is-fault .lab-fl-ok{opacity:0}
.is-fault .lab-fl-flange{fill:var(--red)}

/* --- Lab 06 mount face -------------------------------------------------
   READ BEFORE EDITING. This translate is bound to the mount-face RADIO GROUP,
   whose two states are BOTH correct installs. It is not the Round 4 / C2 defect,
   where a translate was bound to the FAULT switch and so taught that moving the
   case was the failure. The fault control still moves nothing on either face —
   qa_live_filter_figure.js asserts exactly that. See DEEP-AUDIT pass 3, L33, L38. */
.lab-panel[data-face="in"] .lab-fl-filter{transform:translateX(250px)}
.lab-panel[data-face="in"] .lab-fl-radiate{transform:translateX(250px)}
.lab-fl-radiate{transition:transform var(--t-slow) var(--ease)}

/* Whichever flange faces the shield is the one shown. Exact mirrors about x=495. */
.lab-fl-fl{transition:opacity var(--t) var(--ease)}
.lab-fl-fl--in{opacity:0}
.lab-panel[data-face="in"] .lab-fl-fl--out{opacity:0}
.lab-panel[data-face="in"] .lab-fl-fl--in{opacity:1}

/* Face-conditional figure labels (SVG) and prose (spans in the stepper). */
.lab-fl-if{transition:opacity var(--t) var(--ease)}
.lab-fl-if--in{opacity:0}
.lab-panel[data-face="in"] .lab-fl-if--out{opacity:0}
.lab-panel[data-face="in"] .lab-fl-if--in{opacity:1}
.lab-step-text .lab-fl-if--in{display:none}
.lab-panel[data-face="in"] .lab-step-text .lab-fl-if--out{display:none}
.lab-panel[data-face="in"] .lab-step-text .lab-fl-if--in{display:inline}

/* The RF barrier plate — UFGS 13 49 20.00 10 2.7.1.1. Cyan because it is part of
   the shield boundary, like the wall and the flange, not a filter element. */
.lab-fl-barrier{fill:var(--cyan)}
.lab-t-barrier{font-family:var(--font-mono); font-size:8.5px!important; letter-spacing:.06em; fill:var(--ink-3)!important}
.lab-fl-can{fill:var(--surface-3); stroke:var(--ink-3); stroke-width:1.5}

/* The shielded envelope. It detours outward to enclose the LOAD compartment on an
   outside mount and inward to exclude the LINE compartment on an inside mount, and
   closes on the barrier plate either way. Unbonded, it does not close at all. */
.lab-fl-bnd-wall,.lab-fl-bnd-case{fill:none; stroke:var(--green); stroke-width:3; stroke-dasharray:7 6; stroke-linecap:round; stroke-linejoin:round}
.lab-fl-bnd-case{transition:opacity var(--t) var(--ease)}
.lab-fl-bnd-break{opacity:0; transition:opacity var(--t) var(--ease)}
.lab-fl-bnd-break circle{fill:none; stroke:var(--red); stroke-width:3}
.lab-fl-bnd--in{opacity:0}
.lab-panel[data-face="in"] .lab-fl-bnd--out{opacity:0}
.lab-panel[data-face="in"] .lab-fl-bnd--in{opacity:1}
/* Fault rules come last on purpose: same specificity as the face rules above, so
   source order makes the broken envelope win on either face. */
.lab-panel.is-fault .lab-fl-bnd-case{opacity:0}
.lab-panel.is-fault .lab-fl-bnd-break{opacity:1}
.is-fault .lab-sleeve{stroke:var(--red)}
.lab-fl-svg [data-step]{transition:opacity var(--t) var(--ease)}
.lab-panel[data-active-step] .lab-fl-svg [data-step]{opacity:.18}
.lab-panel[data-active-step="1"] .lab-fl-svg [data-step~="1"],
.lab-panel[data-active-step="2"] .lab-fl-svg [data-step~="2"],
.lab-panel[data-active-step="3"] .lab-fl-svg [data-step~="3"],
.lab-panel[data-active-step="4"] .lab-fl-svg [data-step~="4"]{opacity:1}

.lab-stepper{margin-top:18px}
.lab-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; counter-reset:none}
.lab-step{appearance:none; width:100%; height:100%; display:flex; gap:12px; align-items:flex-start; text-align:left; padding:14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; cursor:pointer; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.lab-step:hover{border-color:var(--ink-4); background:var(--surface-2)}
.lab-step.is-active{border-color:var(--cyan); background:var(--surface-2); box-shadow:var(--glow-cyan)}
.lab-step-num{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--cyan); color:var(--cyan); font:700 13px/1 var(--font-mono)}
.lab-step.is-active .lab-step-num{background:var(--cyan); color:var(--bg)}
.lab-step.is-done .lab-step-num{background:var(--cyan-soft)}
.lab-step-body{display:flex; flex-direction:column; gap:4px}
.lab-step-title{color:var(--ink); font-weight:600; font-size:14.5px; line-height:1.3}
.lab-step-text{font-size:13.5px; line-height:1.5}
.lab-stepnav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.lab-stepnav-count{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); text-align:center}

/* dielectric */
.lab-gwb{fill:var(--surface-3); stroke:var(--bg); stroke-width:1}
.lab-pipe{fill:var(--ink-4)}
.lab-pipe-hi{fill:var(--ink-3); opacity:.45}
.lab-db-break{fill:var(--surface); stroke:var(--amber); stroke-width:2}
.lab-db-metal{fill:var(--ink-4); opacity:0; transition:opacity var(--t) var(--ease)}
.lab-flange{fill:var(--ink-3)}
.lab-db-through{opacity:0; transition:opacity var(--t) var(--ease)}
.lab-db-stop circle{fill:var(--bg); stroke:var(--cyan); stroke-width:2.5}
.lab-db-stop line{stroke:var(--cyan); stroke-width:2.5; stroke-linecap:round}
.lab-db-stop,.lab-db-ok,.lab-db-bad{transition:opacity var(--t) var(--ease)}
.lab-db-bad{opacity:0}
.is-nobreak .lab-db-metal,.is-nobreak .lab-db-through,.is-nobreak .lab-db-bad{opacity:1}
.is-nobreak .lab-db-through{stroke:var(--red)}
.is-nobreak .lab-db-stop,.is-nobreak .lab-db-ok{opacity:0}

/* vent */
.lab-duct{fill:var(--surface-2); stroke:var(--ink-4); stroke-width:1.5}
.lab-duct-gap{fill:var(--surface-2)}
.lab-hc-body{fill:var(--surface-3); stroke:var(--cyan); stroke-width:1.5}
.lab-hc-cell{stroke:var(--cyan); stroke-width:1; opacity:.55}
.lab-wave-flat{stroke:var(--cyan); stroke-width:2; opacity:.45; stroke-dasharray:2 6}
.lab-air{stroke:var(--ink-2); stroke-width:2; stroke-dasharray:14 10; animation:lab-flow 1.3s linear infinite}
.lab-arrowhead{fill:var(--ink-2)}
.lab-inset{fill:none; stroke:var(--line); stroke-width:1.5}
.lab-hc-face-bg{fill:var(--surface)}
.lab-hc-hex{fill:none; stroke:var(--cyan); stroke-width:1.3; opacity:.75}

/* fiber */
.lab-patch{stroke:var(--ink-3); stroke-width:3}
.lab-led{fill:var(--green)}
.lab-wg-tube{fill:var(--surface-3); stroke:var(--cyan); stroke-width:1.5}
.lab-fiber-glow{stroke:var(--cyan-soft); stroke-width:12; stroke-linecap:round}
.lab-fiber{stroke:var(--cyan); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:2 10; animation:lab-flow .9s linear infinite}
.lab-copper{stroke:var(--amber); stroke-width:4; stroke-linecap:round}
.lab-power{fill:none; stroke:var(--cyan); stroke-width:1.5; stroke-dasharray:6 4}
.lab-power--dirty{stroke:var(--red)}
.lab-fib-bad{opacity:0; transition:opacity var(--t) var(--ease)}
.lab-fib-ok{transition:opacity var(--t) var(--ease)}
.is-copper .lab-fib-bad{opacity:1}
.is-copper .lab-fib-ok{opacity:0}
.is-copper .lab-wg-tube{stroke:var(--red)}

/* ------------------------------------------------------------------ callouts, cards, notes */
.lab-callout{margin-top:14px; padding:16px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); display:grid; gap:8px; font-size:14.5px; color:var(--ink-2); animation:lab-rise var(--t) var(--ease)}
.lab-callout--fail{border-color:var(--red); background:linear-gradient(180deg,var(--red-soft),transparent 140%)}
.lab-callout-title{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:15.5px}
.lab-callout--fail .lab-callout-title{color:var(--red)}
@keyframes lab-rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.lab-icon{flex:none; display:inline-block; width:18px; height:18px; border-radius:50%; position:relative; vertical-align:middle}
.lab-icon::before,.lab-icon::after{content:""; position:absolute; background:var(--bg); border-radius:1px}
.lab-icon--fail{background:var(--red)}
.lab-icon--fail::before,.lab-icon--fail::after{width:10px; height:2px; left:4px; top:8px; transform:rotate(45deg)}
.lab-icon--fail::after{transform:rotate(-45deg)}
.lab-icon--pass{background:var(--green)}
.lab-icon--pass::before{width:5px; height:2px; left:4px; top:9px; transform:rotate(45deg)}
.lab-icon--pass::after{width:9px; height:2px; left:6px; top:8px; transform:rotate(-50deg)}
.lab-icon--warn{background:var(--amber); border-radius:4px; transform:rotate(45deg) scale(.82)}
.lab-icon--warn::before{width:2px; height:7px; left:8px; top:4px; transform:rotate(-45deg); transform-origin:center}
.lab-icon--warn::after{width:2px; height:2px; left:11px; top:11px; transform:rotate(-45deg)}

.lab-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; margin-top:18px}
.lab-card{padding:16px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--cyan); font-size:14px; color:var(--ink-2); display:grid; gap:6px; align-content:start}
.lab-card--amber{border-top-color:var(--amber)}
.lab-card--red{border-top-color:var(--red)}
.lab-card-title{color:var(--ink); font-weight:600; font-size:15px; line-height:1.3}
.lab-note{margin-top:14px; font-size:13.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline}
.lab-note-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber-soft); background:var(--amber-soft); border-radius:var(--r-pill); padding:2px 9px}
.lab-flag{display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:var(--r-sm); border:1px dashed var(--amber); background:var(--amber-soft); color:var(--ink-2); font-size:14px; margin-bottom:18px}
.lab-flag strong{color:var(--amber)}
.lab-flag .lab-icon{margin-top:2px}

.lab-foot{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:8px; font-size:12.5px; color:var(--ink-3)}
.lab-sources{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.lab-sources-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-right:4px}
.lab-sources a{display:inline-block; padding-block:6px; margin-block:-6px; color:var(--ink-2)}
.lab-sources a:hover{color:var(--cyan)}

.lab-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.lab-chip{display:inline-block; padding:5px 12px; line-height:1.35; border-radius:var(--r-pill); font-size:13px; border:1px solid var(--line); color:var(--ink)}
.lab-chip--cyan{border-color:var(--cyan); background:var(--cyan-soft)}
.lab-chip--amber{border-color:var(--amber); background:var(--amber-soft)}
.lab-chip em{font-style:normal; color:var(--cyan)}
.lab-chip--amber em{color:var(--amber)}

/* ------------------------------------------------------------------ 2 · waveguide */
.lab-wg-grid{display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:start}
.lab-wg-controls{display:grid; gap:16px; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.lab-presets{display:flex; flex-wrap:wrap; gap:6px}
.lab-chipbtn{appearance:none; display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; min-height:44px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg); color:var(--ink); font:500 13.5px/1.2 var(--font-body); cursor:pointer; text-align:left; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.lab-chipbtn small{color:var(--ink-3); font-size:12px}
.lab-chipbtn:hover{border-color:var(--ink-3)}
.lab-chipbtn[aria-pressed="true"]{border-color:var(--cyan); background:var(--cyan-soft)}
.lab-chipbtn[aria-pressed="true"] small{color:var(--ink-2)}
.lab-num-row{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center}
.lab-num-row .lab-hint{grid-column:2}
.lab-wg-controls .lab-range{--fill:0%}
.lab-wg-controls .lab-range::-webkit-slider-runnable-track{background:var(--surface-3)}

.lab-wg-results{display:grid; gap:14px; min-width:0}
.lab-readouts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0}
.lab-readout{padding:12px 14px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); min-width:0}
.lab-readout dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.lab-readout dt var{text-transform:none}
.lab-readout dd{margin:0}
.lab-readout output{display:block; font-family:var(--font-display); font-size:clamp(24px,2.3vw,32px); font-weight:600; color:var(--ink); line-height:1.15; margin-top:4px; white-space:nowrap; font-variant-numeric:tabular-nums}
.lab-readout-sub{font-size:12px; color:var(--ink-3); margin-top:2px!important; line-height:1.35}
.lab-readout--cyan{border-color:var(--cyan-soft); box-shadow:inset 0 2px 0 var(--cyan)}
.lab-readout--cyan output{color:var(--cyan)}
.lab-readout--amber{box-shadow:inset 0 2px 0 var(--amber)}
.lab-readout--amber output{color:var(--amber)}
.lab-readout.is-bad{box-shadow:inset 0 2px 0 var(--red); border-color:var(--red-soft)}
.lab-readout.is-bad output{color:var(--red)}

.lab-wg-chart{margin:0; padding:14px 14px 10px; border-radius:var(--r); background:var(--bg); border:1px solid var(--line); min-width:0}
.lab-wg-charthead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; margin-bottom:6px}
.lab-wg-charttitle{font-weight:600; color:var(--ink); font-size:14.5px}
.lab-wg-plot{position:relative}
.lab-wg-svg{touch-action:pan-y; user-select:none; -webkit-user-select:none}
.lab-wg-gridline{stroke:var(--line-2); stroke-width:1}
.lab-wg-axis{stroke:var(--ink-4); stroke-width:1}
.lab-wg-tick{fill:var(--ink-3)!important; font-size:11.5px!important; font-variant-numeric:tabular-nums}
.lab-wg-axistitle{fill:var(--ink-3)!important; font-size:11.5px!important; letter-spacing:.06em}
.lab-wg-region{fill:var(--red-soft)}
.lab-wg-area{fill:var(--cyan-soft)}
.lab-wg-line{fill:none; stroke:var(--cyan); stroke-width:2.5; stroke-linejoin:round}
.lab-wg-prop{stroke:var(--red); stroke-width:4; stroke-linecap:round}
.lab-wg-cutoff line{stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 4}
.lab-wg-cuttext{fill:var(--red)!important; font-size:12px!important; font-weight:700}
.lab-wg-hover line{stroke:var(--ink-3); stroke-width:1}
.lab-wg-hover circle{fill:var(--ink); stroke:var(--bg); stroke-width:2}
.lab-wg-hit{fill:transparent; cursor:crosshair}
.lab-wg-mline{stroke:var(--amber); stroke-width:2}
.lab-wg-mdot{fill:var(--amber); stroke:var(--bg); stroke-width:2.5}
.lab-wg-mlabel-bg{fill:var(--surface-3); stroke:var(--amber); stroke-width:1}
.lab-wg-mlabel{fill:var(--ink)!important; font-size:12px!important; font-weight:600}
.lab-wg-handle{cursor:ew-resize; outline:none}
.lab-wg-handle-hit{fill:transparent}
.lab-wg-handle-dot{fill:var(--amber); stroke:var(--bg); stroke-width:3}
.lab-wg-handle:focus-visible .lab-wg-handle-dot{stroke:var(--ink); stroke-width:3}
.lab-wg-handle:focus-visible .lab-wg-handle-hit{fill:var(--amber-soft)}
.lab-tip{position:absolute; transform:translateX(-50%); pointer-events:none; padding:6px 10px; border-radius:var(--r-sm); background:var(--surface-3); border:1px solid var(--glass-border); box-shadow:var(--shadow); display:grid; gap:1px; font-size:12.5px; white-space:nowrap; color:var(--ink-2); z-index:2}
.lab-tip strong{font-family:var(--font-mono); font-size:12.5px}
.lab-wg-legend{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; font-size:12.5px; color:var(--ink-3); margin-top:6px}
.lab-legend-item{display:inline-flex; align-items:center; gap:8px}
.lab-key{display:inline-block; width:16px; height:3px; border-radius:2px}
.lab-key--cyan{background:var(--cyan)}
.lab-key--red{background:var(--red)}
.lab-key--amber{background:var(--amber)}

.lab-math{margin-top:18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface)}
.lab-math summary{cursor:pointer; padding:14px 18px; font-weight:600; color:var(--ink); list-style:none; display:flex; align-items:center; gap:10px; min-height:44px}
.lab-math summary::-webkit-details-marker{display:none}
.lab-math summary::before{content:""; width:8px; height:8px; border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg); transition:transform var(--t-fast) var(--ease)}
.lab-math[open] summary::before{transform:rotate(45deg)}
.lab-math-body{padding:0 18px 16px; display:grid; gap:8px}
.lab-math-line{display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:4px 16px; align-items:baseline; padding-top:8px; border-top:1px solid var(--line-2)}
.lab-math-k{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.lab-math code{font-family:var(--font-mono); font-size:13.5px; color:var(--ink); overflow-wrap:anywhere}

/* ------------------------------------------------------------------ 3 · walls */
.lab-walls-stage{background:var(--bg)}
.lab-wall-layer{transition:transform var(--t-slow) var(--ease); transition-delay:calc(var(--i,0) * 45ms)}
.lab-wall-layer .lab-num,.lab-wall-lbl{transition:opacity var(--t) var(--ease); transition-delay:calc(var(--i,0) * 45ms + 180ms)}
.is-collapsed .lab-wall-layer{transform:translateX(var(--cx,0px)); transition-delay:0ms}
.is-collapsed .lab-wall-layer .lab-num,.is-collapsed .lab-wall-lbl{opacity:0; transition-delay:0ms}
.is-instant .lab-wall-layer,.is-instant .lab-wall-layer .lab-num,.is-instant .lab-wall-lbl{transition:none!important}
.lab-w-face.lab-w-gwb{fill:var(--ink-4); stroke:var(--ink-3); stroke-width:1}
.lab-w-top.lab-w-gwb,.lab-w-side.lab-w-gwb{fill:var(--ink-3); stroke:var(--ink-3); stroke-width:.75}
.lab-w-screw{fill:var(--ink-3)}
.lab-w-face.lab-w-steel{fill:var(--ink-3); stroke:var(--bg-2); stroke-width:.75}
.lab-w-side.lab-w-steel{fill:var(--ink-4); stroke:var(--bg-2); stroke-width:.75}
.lab-w-sealant{stroke:var(--amber); stroke-width:4; stroke-linecap:round; stroke-dasharray:.5 6}
.lab-w-anchor{fill:var(--amber)}
.lab-w-face.lab-w-fillbase{fill:var(--violet-soft); stroke:var(--violet); stroke-width:1}
.lab-w-top.lab-w-fillbase,.lab-w-side.lab-w-fillbase{fill:var(--surface-3); stroke:var(--violet); stroke-width:.75}
.lab-w-fillline{fill:none; stroke:var(--violet); stroke-width:1.5; opacity:.7}
.lab-w-face.lab-w-mesh{fill:var(--cyan-soft); stroke:var(--cyan); stroke-width:1.5}
.lab-w-top.lab-w-mesh,.lab-w-side.lab-w-mesh{fill:var(--surface-3); stroke:var(--cyan); stroke-width:.75}
.lab-w-meshline{fill:none; stroke:var(--cyan); stroke-width:1.2}
.lab-w-face.lab-w-ply{fill:var(--amber-soft); stroke:var(--amber); stroke-width:1.2}
.lab-w-top.lab-w-ply,.lab-w-side.lab-w-ply{fill:var(--surface-3); stroke:var(--amber); stroke-width:.75}
.lab-w-grain{fill:none; stroke:var(--amber); stroke-width:1; opacity:.6}

.lab-walls-info{display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr); gap:clamp(16px,2.6vw,32px); margin-top:18px; align-items:start}
.lab-walls-serves{display:grid; gap:12px; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.lab-walls-serves .lab-label{margin:0}
.lab-walls-acoustic{font-size:14px; color:var(--ink-2)}
.lab-walls-finish{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); padding-top:12px; border-top:1px solid var(--line-2)}
.lab-walls-finish .lab-icon{margin-top:2px}
.lab-layer-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.lab-layer-list li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; padding:12px 0; border-top:1px solid var(--line-2)}
.lab-layer-list li:first-child{border-top:0; padding-top:0}
.lab-layer-num{display:grid; place-items:center; height:28px; border-radius:var(--r-pill); border:1.5px solid var(--cyan); color:var(--cyan); font:700 12px/1 var(--font-mono); white-space:nowrap}
.lab-layer-num--amber{border-color:var(--amber); color:var(--amber)}
.lab-layer-title{color:var(--ink); font-weight:600; font-size:15px; line-height:1.35}
.lab-layer-text{font-size:14px; color:var(--ink-2); margin-top:2px!important}

/* ------------------------------------------------------------------ 4 · stc */
.lab-stc-grid{display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr); gap:clamp(16px,2.6vw,32px); align-items:center}
.lab-stc-controls{display:grid; gap:18px}
.lab-stc-value{font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5vw,60px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.lab-stc-scale{position:relative; padding-top:6px}
.lab-range--stc{height:44px}
.lab-range--stc::-webkit-slider-runnable-track{height:8px}
.lab-range--stc::-webkit-slider-thumb{margin-top:-8px; width:24px; height:24px}
.lab--stc[data-tone="fail"] .lab-range--stc::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--red) var(--fill,50%),var(--surface-3) var(--fill,50%))}
.lab--stc[data-tone="warn"] .lab-range--stc::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--amber) var(--fill,50%),var(--surface-3) var(--fill,50%))}
.lab--stc[data-tone="pass"] .lab-range--stc::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--green) var(--fill,50%),var(--surface-3) var(--fill,50%))}
.lab-stc-marks{position:relative; height:30px; margin-top:2px}
.lab-stc-mark{position:absolute; top:0; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); white-space:nowrap; padding-top:12px}
.lab-stc-mark::before{content:""; position:absolute; top:0; width:2px; height:10px; border-radius:1px; background:var(--cyan)}
.lab-stc-mark--3{right:calc(12px + (100% - 24px) * .5 - 1px); padding-right:8px; text-align:right}
.lab-stc-mark--3::before{right:0}
.lab-stc-mark--4{left:calc(12px + (100% - 24px) * .66667 - 1px); padding-left:8px}
.lab-stc-mark--4::before{left:0; background:var(--violet)}
.lab-stc-ends{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-4); padding-inline:4px}
.lab-stc-verdict{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--green); background:var(--green-soft); font-size:14px; color:var(--ink)}
.lab-stc-verdict[data-ok="false"]{border-color:var(--red); background:var(--red-soft)}
.lab-stc-verdict .lab-icon{margin-top:1px}
.lab-stc-fig{align-self:center}
.lab-stc-cap{display:none; justify-content:space-between; gap:12px; padding:8px 12px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.lab-stc-cap span:first-child{color:var(--cyan)}
.lab-stc-svg{min-width:0}
.lab-stc-person circle,.lab-stc-person path{fill:none; stroke:var(--ink-2); stroke-width:2.5; stroke-linecap:round}
.lab-stc-voice{stroke:var(--cyan)!important}
.lab-stc-ear{stroke:var(--ink)!important}
.lab-wave--speech{stroke:var(--cyan); stroke-width:1.6}
.lab-wave--speech-out{stroke:var(--green); stroke-width:1.6; transition:stroke var(--t) var(--ease)}
.lab--stc[data-tone="fail"] .lab-wave--speech-out{stroke:var(--red)}
.lab--stc[data-tone="warn"] .lab-wave--speech-out{stroke:var(--amber)}
.lab-stc-out{transform-box:view-box; transform-origin:715px 140px; transition:transform var(--t) var(--ease)}
.lab-stc-axis{stroke:var(--line); stroke-width:1}
.lab-cavity{stroke:none}
.lab-stc-cavity{fill:var(--surface-2)}
.lab-stc-wall .lab-gwb{fill:var(--surface-3)}
.lab-stc-groups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px}
.lab-group{padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:grid; gap:10px; align-content:start; transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.lab-group header{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center}
.lab-group-name{font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); line-height:1.1; white-space:nowrap}
.lab-group-req{grid-column:1; font-family:var(--font-mono); font-size:12px; color:var(--ink-3)}
.lab-pill{grid-row:1 / span 2; grid-column:2; padding:5px 12px; border-radius:var(--r-pill); font:700 12px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--red); color:var(--red); background:var(--red-soft); white-space:nowrap}
.lab-group.is-met .lab-pill{border-color:var(--green); color:var(--green); background:var(--green-soft)}
.lab-group.is-required{border-color:var(--glass-border); box-shadow:inset 0 2px 0 var(--cyan)}
.lab-group.is-required .lab-group-name::after{content:"Required for this room"; display:table; margin:6px 0 0; vertical-align:middle; font:600 10.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); border:1px solid var(--cyan-soft); background:var(--cyan-soft); padding:4px 8px; border-radius:var(--r-pill)}
.lab-quote{margin:0; padding-left:12px; border-left:2px solid var(--line); color:var(--ink-2); font-size:14px; font-style:italic}
.lab-group-where{font-size:13px; color:var(--ink-3)}
.lab-plain{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; padding:14px 16px; border-radius:var(--r); background:var(--surface-2); color:var(--ink); font-size:15px}
.lab-plain .lab-note-label{color:var(--cyan); border-color:var(--cyan-soft); background:var(--cyan-soft)}

/* ------------------------------------------------------------------ 5 · compartments */
.lab-cmp-grid{display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:clamp(16px,2.6vw,32px); align-items:start}
.lab-cmp-side{display:grid; gap:18px}
.lab-creds{display:grid; gap:6px}
.lab-cred{position:relative; display:block; cursor:pointer}
.lab-cred input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1; width:100%; height:100%}
.lab-cred-body{display:grid; gap:1px; padding:9px 12px 9px 38px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); position:relative; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.lab-cred-body::before{content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; border:2px solid var(--ink-4); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.lab-cred-name{color:var(--ink); font-weight:600; font-size:14px}
.lab-cred-sub{color:var(--ink-2); font-size:12.5px}
.lab-cred:hover .lab-cred-body{border-color:var(--ink-4)}
.lab-cred input:checked + .lab-cred-body{border-color:var(--cyan); background:var(--surface-2)}
.lab-cred input:checked + .lab-cred-body::before{border-color:var(--cyan); box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 8px var(--cyan)}
.lab-cred input:focus-visible + .lab-cred-body{outline:2px solid var(--cyan); outline-offset:2px}
.lab-doors{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.lab-door-btn{appearance:none; width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) 22px; gap:10px; align-items:center; padding:8px 10px; min-height:48px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.lab-door-btn:hover{border-color:var(--cyan); background:var(--cyan-soft)}
.lab-door-code{display:grid; place-items:center; height:26px; border-radius:6px; background:var(--surface-3); font:700 11.5px/1 var(--font-mono); color:var(--ink-2)}
.lab-door-body{display:grid; line-height:1.25}
.lab-door-name{font-weight:600; font-size:14px}
.lab-door-sub{font-size:12px; color:var(--ink-3)}
.lab-door-state{width:18px; height:18px; border-radius:50%; justify-self:end}
.lab-door-btn[data-state="granted"]{border-color:var(--green)}
.lab-door-btn[data-state="granted"] .lab-door-state{background:var(--green)}
.lab-door-btn[data-state="denied"]{border-color:var(--red)}
.lab-door-btn[data-state="denied"] .lab-door-state{background:var(--red)}
.lab-door-btn[data-state="exit"] .lab-door-state{background:var(--cyan)}
.lab-door-btn[data-state="pending"] .lab-door-state{background:var(--amber)}
.lab-cmp-actions{display:flex; flex-wrap:wrap; gap:8px}
.lab-cmp-main{display:grid; gap:12px; min-width:0}
.lab-cmp-where{font-size:14px; color:var(--ink-3)}
.lab-cmp-where strong{color:var(--cyan)}
.lab-cmp-zone{stroke-width:2.5; transition:stroke-width var(--t) var(--ease),filter var(--t) var(--ease)}
.lab-cmp-zone--street{fill:var(--bg-2)}
.lab-cmp-zone--lobby{fill:var(--surface); stroke:var(--ink-4)}
.lab-cmp-zone--collateral{fill:var(--surface-2); stroke:var(--ink-3)}
.lab-cmp-zone--scif{fill:var(--surface-3); stroke:var(--cyan)}
.lab-cmp-zone--comp{fill:var(--bg-2); stroke:var(--amber)}
.lab-cmp-zone.is-here{stroke-width:5}
.lab-cmp-door{cursor:pointer}
.lab-cmp-door-hit{fill:transparent}
.lab-cmp-door-gap{fill:var(--bg)}
.lab-cmp-door-leaf{fill:var(--ink-3); transition:fill var(--t-fast) var(--ease)}
.lab-cmp-reader{fill:var(--surface); stroke:var(--ink-2); stroke-width:2; transition:fill var(--t-fast) var(--ease)}
.lab-cmp-door-code{fill:var(--ink-3)!important; font-size:12px!important; font-weight:700}
.lab-cmp-door:hover .lab-cmp-door-leaf{fill:var(--ink)}
.lab-cmp-door.is-granted .lab-cmp-door-leaf,.lab-cmp-door.is-granted .lab-cmp-reader{fill:var(--green)}
.lab-cmp-door.is-denied .lab-cmp-door-leaf,.lab-cmp-door.is-denied .lab-cmp-reader{fill:var(--red)}
.lab-cmp-door.is-exit .lab-cmp-door-leaf{fill:var(--cyan)}
.lab-cmp-door.is-pending .lab-cmp-reader{fill:var(--amber)}
.lab-cmp-door.is-denied{animation:lab-shake 420ms var(--ease)}
.lab-cmp-door.is-granted .lab-cmp-door-leaf{animation:lab-glow 900ms var(--ease)}
@keyframes lab-shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes lab-glow{0%{opacity:.3}100%{opacity:1}}
.lab-cmp-person{transition:transform var(--t-slow) var(--ease)}
.lab-cmp-person-halo{fill:var(--cyan-soft); stroke:var(--cyan); stroke-width:1; animation:lab-pulse 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.lab-cmp-person-dot{fill:var(--ink); stroke:var(--bg); stroke-width:3}
.lab-cmp-person-txt{fill:var(--bg)!important; font-size:10.5px!important; font-weight:700; font-family:var(--font-mono)}
@keyframes lab-pulse{0%,100%{transform:scale(.85); opacity:.9}50%{transform:scale(1.15); opacity:.4}}
.lab-cmp-part{opacity:0; transition:opacity var(--t) var(--ease)}
.is-ids .lab-cmp-part{opacity:1}
.lab-cmp-part rect{fill:var(--cyan-soft); stroke:var(--cyan); stroke-width:1.5}
.lab-cmp-part text{fill:var(--cyan)!important; font-size:11px!important; font-weight:700; letter-spacing:.08em}
.lab-cmp-part.is-disarmed rect{fill:var(--amber-soft); stroke:var(--amber)}
.lab-cmp-part.is-disarmed text{fill:var(--amber)!important}
.lab-cmp-result{padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); display:grid; gap:4px; min-height:92px; transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.lab-cmp-result-title{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:var(--ink)}
.lab-cmp-result-text{font-size:14.5px; color:var(--ink-2); padding-left:28px}
.lab-cmp-result[data-tone="idle"] .lab-icon,.lab-cmp-result[data-tone="pending"] .lab-icon,.lab-cmp-result[data-tone="exit"] .lab-icon{background:var(--cyan-soft); box-shadow:inset 0 0 0 2px var(--cyan)}
.lab-cmp-result[data-tone="granted"]{border-color:var(--green); background:linear-gradient(180deg,var(--green-soft),transparent 160%)}
.lab-cmp-result[data-tone="granted"] .lab-cmp-result-title{color:var(--green)}
.lab-cmp-result[data-tone="denied"]{border-color:var(--red); background:linear-gradient(180deg,var(--red-soft),transparent 160%)}
.lab-cmp-result[data-tone="denied"] .lab-cmp-result-title{color:var(--red)}
.lab-cmp-result[data-tone="warn"]{border-color:var(--amber)}
.lab-cmp-result[data-tone="warn"] .lab-cmp-result-title{color:var(--amber)}
.lab-cmp-result[data-tone="pending"] .lab-icon{animation:lab-pulse 700ms ease-in-out infinite}
.lab-cmp-result[data-tone="exit"]{border-color:var(--cyan-soft)}
.lab-cmp-ids{display:grid; gap:10px; justify-items:start}
.lab-cmp-ids .lab-parts,.lab-cmp-ids .lab-part-note{justify-self:stretch}
.lab-parts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:8px}
.lab-part{display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:2px 10px; align-items:center; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--cyan); background:var(--cyan-soft)}
.lab-part.is-disarmed{border-color:var(--amber); background:var(--amber-soft)}
.lab-part-name{font-weight:600; font-size:14px}
.lab-part-state{grid-row:2; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan)}
.lab-part.is-disarmed .lab-part-state{color:var(--amber)}
.lab-part .lab-btn{grid-row:1 / span 2; grid-column:2}
.lab-part-note{font-size:13px; color:var(--ink-3)}

/* ------------------------------------------------------------------ 6 · response */
.lab-rsp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px; border-radius:var(--r); background:var(--bg); border:1px solid var(--line); margin-bottom:20px}
.lab-seg--inline{border:0; margin:0; padding:0}
.lab-rsp-clock{margin-left:auto; display:flex; align-items:baseline; gap:10px}
.lab-rsp-clock-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.lab-rsp-clock-time{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; min-width:5.4ch; text-align:right}
.lab--response.is-running .lab-rsp-clock-time{color:var(--red)}
.lab-btn--play{background:var(--red); border-color:var(--red); color:var(--bg)}
.lab-btn--play:hover{box-shadow:0 0 0 1px var(--red),0 0 24px -6px var(--red)}
.lab-btn--play[aria-pressed="true"]{background:transparent; color:var(--ink); border-color:var(--ink-3)}
.lab-play-icon{width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor}
.lab-btn--play[aria-pressed="true"] .lab-play-icon{width:10px; height:12px; border-width:0 3px; border-color:currentColor}
.lab-rsp-group{margin-top:4px}
.lab-rsp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px}
.lab-rsp-grid--follow{grid-template-columns:repeat(2,minmax(0,1fr))}
.lab-ring-card{display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; align-items:center; padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); transition:border-color var(--t) var(--ease)}
.lab-ring-card--follow{grid-template-columns:120px minmax(0,1fr)}
.lab-rsp-grid:not(.lab-rsp-grid--follow) .lab-ring-card{grid-template-columns:minmax(0,1fr); justify-items:start; align-items:start}
.lab-rsp-grid:not(.lab-rsp-grid--follow) .lab-ring{width:132px}
.lab-ring{width:100%; height:auto; display:block; overflow:visible}
.lab-ring-ticks line{stroke:var(--ink-4); stroke-width:1.5}
.lab-ring-track{fill:none; stroke:var(--surface-3); stroke-width:10}
.lab-ring-fill{fill:none; stroke:var(--cyan); stroke-width:10; stroke-linecap:round}
.lab-ring-card--amber .lab-ring-fill{stroke:var(--amber)}
.lab-ring-card--violet .lab-ring-fill{stroke:var(--violet)}
.lab-ring-big{fill:var(--ink)!important; font-family:var(--font-display); font-size:36px!important; font-weight:600; font-variant-numeric:tabular-nums}
.lab-ring-unit{fill:var(--ink-3)!important; font-family:var(--font-mono); font-size:13px!important; letter-spacing:.08em; text-transform:uppercase}
.lab-ring-body{display:grid; gap:6px; min-width:0}
.lab-ring-title{margin:0; font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.15; color:var(--ink)}
.lab-ring-desc{font-size:13.5px; color:var(--ink-2)}
.lab-ring-state{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.lab-ring-cite{font-size:12px; color:var(--ink-3)}
.lab-ring-card.is-running .lab-ring-state{color:var(--cyan)}
.lab-ring-card.is-due{border-color:var(--red)}
.lab-ring-card.is-due .lab-ring-fill{stroke:var(--red)}
.lab-ring-card.is-due .lab-ring-state{color:var(--red)}
.lab-ring-card.is-due .lab-ring{animation:lab-due 1.4s ease-in-out 2}
@keyframes lab-due{50%{transform:scale(1.04)}}

/* ------------------------------------------------------------------ 7 · roadmap */
.lab-road{--progress:0}
.lab-road-rail{position:relative; margin-bottom:20px}
.lab-road-track{position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:21px; height:2px; background:var(--surface-3); border-radius:2px}
.lab-road-fill{position:absolute; inset:0; background:linear-gradient(90deg,var(--cyan),var(--green)); transform-origin:0 50%; transform:scaleX(var(--progress)); transition:transform var(--t-slow) var(--ease); border-radius:2px}
.lab-road-steps{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.lab-road-step{appearance:none; background:transparent; border:0; color:var(--ink-3); font:inherit; display:grid; justify-items:center; gap:10px; padding:0 4px 8px; cursor:pointer; text-align:center; border-radius:var(--r-sm)}
.lab-road-dot{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--bg); border:2px solid var(--ink-4); color:var(--ink-3); font:700 15px/1 var(--font-mono); transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.lab-road-label{font-size:13.5px; line-height:1.3; font-weight:500; max-width:16ch}
.lab-road-step:hover .lab-road-dot{border-color:var(--ink-2)}
.lab-road-step:hover{color:var(--ink)}
.lab-road-step.is-done .lab-road-dot{border-color:var(--cyan); background:var(--cyan-soft); color:var(--cyan)}
.lab-road-step[aria-selected="true"]{color:var(--ink)}
.lab-road-step[aria-selected="true"] .lab-road-dot{border-color:var(--cyan); background:var(--cyan); color:var(--bg); box-shadow:var(--glow-cyan)}
.lab-road-panel{padding:clamp(16px,2.4vw,26px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line); animation:lab-rise var(--t) var(--ease)}
.lab-road-head{display:grid; gap:6px; max-width:80ch; margin-bottom:18px}
.lab-road-title{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.6vw,32px); line-height:1.1; color:var(--ink)}
.lab-road-summary{color:var(--ink-2)}
.lab-road-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.lab-road-who{display:grid; gap:12px; align-content:start}
.lab-road-box{padding:14px 16px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line-2)}
.lab-road-box h4{margin:0 0 8px; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}
.lab-road-box ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.lab-road-box li{position:relative; padding-left:16px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.lab-road-box li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:2px; background:var(--ink-4)}
.lab-road-box--deliver li::before{background:var(--cyan)}
.lab-road-box--approve h4{color:var(--green)}
.lab-road-box--approve li::before{background:var(--green)}
.lab-road-box--tasks h4{color:var(--ink)}
.lab-road-box--traps{border-color:var(--amber-soft); background:linear-gradient(180deg,var(--amber-soft),transparent 120%)}
.lab-road-box--traps h4{color:var(--amber)}
.lab-road-box--traps li::before{background:var(--amber)}
.lab-road-box--traps .lab-icon{width:14px; height:14px}
.lab-road-box--traps .lab-icon::before{left:6px; top:3px; height:5px}
.lab-road-box--traps .lab-icon::after{left:8px; top:8px}
.lab-road-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}
.lab-road-count{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .lab-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-road-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-rsp-grid{grid-template-columns:minmax(0,1fr)}
  .lab-rsp-grid--follow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .lab-wg-grid,.lab-stc-grid,.lab-cmp-grid,.lab-walls-info{grid-template-columns:minmax(0,1fr)}
  .lab-cmp-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start}
  .lab-cmp-actions{grid-column:1 / -1}
}
@media (max-width:760px){
  .lab-sources{gap:14px 10px}
  .lab-sources a{padding-block:10px; margin-block:-10px}
  .lab{border-radius:var(--r)}
  .lab-tabs{border-radius:var(--r); width:100%}
  .lab-tab{flex:1 1 auto}
  .lab-steps{grid-template-columns:minmax(0,1fr)}
  .lab-stc-groups{grid-template-columns:minmax(0,1fr)}
  .lab-math-line{grid-template-columns:minmax(0,1fr)}
  .lab-rsp-clock{margin-left:0; width:100%; justify-content:space-between}
  .lab-ring-card,.lab-ring-card--follow,.lab-rsp-grid:not(.lab-rsp-grid--follow) .lab-ring-card{grid-template-columns:96px minmax(0,1fr); gap:14px; padding:14px; align-items:center}
  .lab-rsp-grid:not(.lab-rsp-grid--follow) .lab-ring{width:100%}
  .lab-ring-title{font-size:18px}
  /* vertical stepper */
  .lab-road-rail{margin-bottom:14px}
  .lab-road-track{left:21px; right:auto; top:22px; bottom:22px; width:2px; height:auto}
  .lab-road-fill{transform-origin:50% 0; transform:scaleY(var(--progress)); background:linear-gradient(180deg,var(--cyan),var(--green))}
  .lab-road-steps{grid-template-columns:minmax(0,1fr); gap:4px}
  .lab-road-step{grid-template-columns:44px minmax(0,1fr); justify-items:start; align-items:center; text-align:left; gap:14px; padding:2px 0}
  .lab-road-label{max-width:none; font-size:14.5px}
  .lab-road-cols{grid-template-columns:minmax(0,1fr)}
  .lab-road-nav .lab-btn{padding-inline:14px}
  .lab-stepnav .lab-btn,.lab-road-nav .lab-btn{flex:1 1 0; min-width:0}
  .lab-stepnav-count,.lab-road-count{display:none}
}
@media (max-width:480px){
  .lab-readouts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lab-readout output{font-size:22px}
  .lab-num-row{grid-template-columns:84px minmax(0,1fr)}
  .lab-group-name{font-size:19px}
  .lab-pill{padding:5px 9px; font-size:11px}
}

/* ------------------------------------------------------------------ motion & paint economy */
.lab-offscreen *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .lab *,.lab *::before,.lab *::after{animation:none!important; transition-duration:0ms!important; transition-delay:0ms!important; scroll-behavior:auto!important}
  .lab-arc{opacity:.8}
  .lab-cmp-person-halo{opacity:.6}
}
@media (forced-colors:active){
  .lab-switch-track,.lab-step-num,.lab-road-dot{forced-color-adjust:none}
}