/* Avionics Circuit Lab — design tokens + shell.
   Identity: "glass cockpit on the bench". Deep night ground, bezel panels,
   phosphor readouts. Cyan = primary/interactive, magenta = selection/course,
   green = positive voltage / ON, amber = current flow / caution, red = warning. */
:root{
  --bg:#070b12; --bg-2:#0b111b; --panel:#0f1723; --panel-2:#131d2b; --panel-3:#1a2638;
  --line:#22324a; --line-2:#2e4260; --grid:#152033; --grid-major:#1c2a40;
  --text:#e6edf7; --text-2:#a9b7cc; --text-3:#7d8ca3;
  --cyan:#35e0ff; --cyan-dim:#1b6f86; --magenta:#ff4fd8; --green:#4dff88; --green-dim:#1f7a45;
  --amber:#ffb640; --red:#ff5b5b; --white:#f4f8ff; --violet:#9d8cff;
  --f-head:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.03) inset;
  --glow-cyan:0 0 0 1px rgba(53,224,255,.35),0 0 18px rgba(53,224,255,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;letter-spacing:.02em;margin:0}
.mono{font-family:var(--f-mono)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--panel)}::-webkit-scrollbar-track{background:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45em;padding:.5em .95em;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-weight:500;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{border-color:var(--cyan-dim);background:var(--panel-3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.tab:focus-visible,.part-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.primary{border-color:var(--cyan);color:var(--cyan);background:rgba(53,224,255,.08);box-shadow:var(--glow-cyan)}
.btn.primary:hover{background:rgba(53,224,255,.16)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--line)}
.btn.icon{padding:.5em;width:36px;height:36px;justify-content:center}
.btn.on{border-color:var(--green);color:var(--green);background:rgba(77,255,136,.08)}
.btn.warn{border-color:var(--red);color:var(--red)}
.btn svg{width:18px;height:18px;flex:none}
.kbd{font:12px var(--f-mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--text-2)}

/* ---------- app frame ---------- */
#app{display:grid;grid-template-rows:56px 1fr;height:100vh}
.topbar{display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(180deg,#0e1622,#0a1019);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:230px}
.brand-mark{width:30px;height:30px}
.brand b{font:600 16px/1 var(--f-head);letter-spacing:.14em;display:block}
.brand small{font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--cyan);display:block;margin-top:4px}
.tabs{display:flex;gap:4px;background:var(--bg-2);padding:4px;border-radius:var(--r);border:1px solid var(--line)}
.tab{border:0;background:transparent;padding:.45em 1em;border-radius:7px;cursor:pointer;color:var(--text-2);font:600 13.5px var(--f-head);letter-spacing:.06em;text-transform:uppercase}
.tab:hover{color:var(--text)}
.tab.active{background:var(--panel-3);color:var(--cyan);box-shadow:inset 0 -2px 0 var(--cyan)}
.spacer{flex:1}
.simctl{display:flex;align-items:center;gap:6px}
.simtime{font:500 13px var(--f-mono);color:var(--text-2);min-width:96px;text-align:right}
.view{display:none;min-height:0}
.view.active{display:grid}

/* ---------- sandbox layout ---------- */
#sandbox{grid-template-columns:232px 1fr 300px;min-height:0}
.palette,.inspector{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;min-height:0}
.inspector{border-right:0;border-left:1px solid var(--line)}
.pal-head,.ins-head{padding:14px 14px 8px;font:600 11px var(--f-mono);letter-spacing:.2em;color:var(--text-3);text-transform:uppercase}
.pal-group{padding:4px 10px 10px}
.pal-group h4{font:600 11.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:8px 4px 6px}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.part-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 7px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-size:12px;color:var(--text-2);transition:.12s}
.part-btn canvas{width:64px;height:34px}
.part-btn:hover{border-color:var(--cyan-dim);color:var(--text)}
.part-btn.armed{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan)}
.stage{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.canvas-wrap{position:relative;min-height:0;overflow:hidden;background:radial-gradient(1200px 700px at 50% 40%,#0c1522,#070b12)}
#circuit{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.hud>*{pointer-events:auto}
.chip{font:500 12px var(--f-mono);padding:4px 9px;border-radius:20px;background:rgba(15,23,35,.85);border:1px solid var(--line);color:var(--text-2);backdrop-filter:blur(6px)}
.chip.cyan{color:var(--cyan);border-color:var(--cyan-dim)}
.chip.red{color:var(--red);border-color:rgba(255,91,91,.5)}
.chip.amber{color:var(--amber);border-color:rgba(255,182,64,.5)}
.toolbar{position:absolute;right:12px;top:12px;display:flex;gap:6px;background:rgba(15,23,35,.85);padding:5px;border-radius:var(--r);border:1px solid var(--line);backdrop-filter:blur(6px)}
.toolbar .btn{border-color:transparent;background:transparent}
.toolbar .btn:hover,.toolbar .btn.active{background:var(--panel-3);border-color:var(--line-2)}
.toolbar .btn.active{color:var(--cyan)}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:13px;color:var(--text-2);background:rgba(15,23,35,.9);border:1px solid var(--line);padding:6px 14px;border-radius:20px;pointer-events:none;white-space:nowrap}
.tooltip{position:absolute;pointer-events:none;background:rgba(9,14,22,.95);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font:12.5px/1.45 var(--f-mono);color:var(--text);box-shadow:var(--shadow);min-width:150px;z-index:5}
.tooltip b{font-family:var(--f-head);font-size:13px;color:var(--cyan);display:block;margin-bottom:3px;letter-spacing:.04em}
.tooltip .k{color:var(--text-3)}

/* inspector */
.ins-card{margin:0 12px 12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.ins-title{display:flex;align-items:center;gap:8px;font:600 17px var(--f-head);letter-spacing:.03em}
.ins-title .id{font:500 12px var(--f-mono);color:var(--magenta);border:1px solid rgba(255,79,216,.4);padding:1px 6px;border-radius:4px}
.ins-desc{color:var(--text-2);font-size:13.5px;margin:.5em 0 0}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.ro{background:#050910;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.ro .l{font:600 10px var(--f-mono);letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.ro .v{font:500 17px var(--f-mono);color:var(--green);text-shadow:0 0 12px rgba(77,255,136,.35)}
.ro.i .v{color:var(--amber);text-shadow:0 0 12px rgba(255,182,64,.35)}
.ro.p .v{color:var(--cyan);text-shadow:0 0 12px rgba(53,224,255,.35)}
.prop{margin-top:12px}
.prop label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2);margin-bottom:4px}
.prop label span{font-family:var(--f-mono);color:var(--text)}
input[type=range]{width:100%;accent-color:var(--cyan)}
select,.num{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;font:14px var(--f-body)}
.ins-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.learn{font-size:13.5px;color:var(--text-2)}
.learn h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 6px}
.learn p{margin:.35em 0}
.learn .law{font:500 14px var(--f-mono);color:var(--text);background:#050910;border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin:6px 0}
.empty-ins{padding:18px 16px;color:var(--text-2);font-size:13.5px}
.empty-ins ul{padding-left:18px;margin:.5em 0}
.empty-ins li{margin:.3em 0}

/* scope drawer
   minmax(0,1fr) + overflow:hidden + absolute canvas: stop the canvas bitmap
   intrinsic-size feedback loop that was blowing the row to ~349px and clipping
   the graticule under the viewport edge. */
.scope{border-top:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:32px minmax(0,1fr);height:280px;max-height:42vh;min-height:0;overflow:hidden;flex:none}
.scope.collapsed{height:32px;max-height:32px;overflow:hidden}
.scope .scope-bar{grid-column:1/-1;border-bottom:1px solid var(--line)}
.scope .scope-bar:hover{color:var(--text)}
.scope-screen{position:relative;min-width:0;min-height:0;overflow:hidden}
.scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scope-side{border-left:1px solid var(--line);padding:8px 10px;overflow-y:auto;font-size:12.5px;min-height:0;min-width:0}
.scope-bar{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;font:600 11px var(--f-mono);letter-spacing:.18em;color:var(--text-3);text-transform:uppercase;cursor:pointer}
.chan{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px dashed var(--line)}
.chan i{width:10px;height:10px;border-radius:2px;flex:none}
.chan .nm{flex:1;color:var(--text)}
.chan .vals{font-family:var(--f-mono);font-size:11.5px;color:var(--text-2)}
.chan button{background:none;border:0;color:var(--text-3);cursor:pointer;padding:0 2px}

/* ---------- modal / library ---------- */
.modal{position:fixed;inset:0;background:rgba(3,6,10,.72);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:50}
.modal.open{display:flex}
.sheet{width:min(1180px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sheet-head h2{font-size:22px}
.lib-cat{margin:18px 0 8px;font:600 12px var(--f-mono);letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lib-card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);cursor:pointer;overflow:hidden;text-align:left;padding:0;transition:.15s}
.lib-card:hover{border-color:var(--cyan-dim);transform:translateY(-2px);box-shadow:var(--glow-cyan)}
.lib-card canvas{display:block;width:100%;height:120px;background:#060a10;border-bottom:1px solid var(--line)}
.lib-card .t{padding:9px 11px 2px;font:600 15px var(--f-head)}
.lib-card .d{padding:0 11px 11px;font-size:12.5px;color:var(--text-2)}

/* lesson card (preset guide) */
.guide{position:relative;margin:12px 12px 0;background:linear-gradient(180deg,rgba(255,79,216,.07),rgba(12,19,29,.6) 60%);border:1px solid rgba(255,79,216,.35);border-radius:var(--r);padding:12px 14px;font-size:13.5px}
.guide[hidden]{display:none}
.chip.lesson{cursor:pointer}.chip.lesson:hover{border-color:var(--cyan)}
.guide h3{font-size:16px;margin-bottom:4px}
.guide .kick{padding-right:28px;font:600 10.5px var(--f-mono);letter-spacing:.2em;color:var(--magenta);text-transform:uppercase}
.guide p{margin:.4em 0;color:var(--text-2)}
.guide ol{margin:.4em 0;padding-left:0;list-style:none;counter-reset:s}
.guide ol li{counter-increment:s;position:relative;padding:5px 0 5px 30px;color:var(--text-2)}
.guide ol li::before{content:counter(s);position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);font:600 11px/18px var(--f-mono);text-align:center;color:var(--text-3)}
.guide ol li.done{color:var(--text)}
.guide ol li.done::before{content:"✓";border-color:var(--green);color:var(--green);background:rgba(77,255,136,.1)}
.guide .close{position:absolute;right:8px;top:6px}

/* ---------- welcome ---------- */
#welcome{position:fixed;inset:0;z-index:60;background:radial-gradient(900px 600px at 70% 30%,rgba(53,224,255,.08),transparent),radial-gradient(700px 500px at 20% 80%,rgba(255,79,216,.06),transparent),var(--bg);display:flex;align-items:center;overflow:auto}
#welcome.hide{display:none}
#welcome-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.w-inner{position:relative;max-width:1100px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.w-kick{font:600 12px var(--f-mono);letter-spacing:.3em;color:var(--cyan)}
.w-title{font:700 clamp(38px,4.3vw,60px)/1.04 var(--f-head);letter-spacing:.01em;margin:14px 0 16px}
.w-title em{font-style:normal;color:var(--cyan);text-shadow:0 0 30px rgba(53,224,255,.4)}
.w-sub{color:var(--text-2);font-size:17px;max-width:520px}
.w-actions{display:flex;flex-direction:column;gap:10px}
.w-card{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(15,23,35,.8);cursor:pointer;backdrop-filter:blur(6px);transition:.15s}
.w-card[hidden],.dmm[hidden],.tooltip[hidden]{display:none}
.w-card:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan);transform:translateX(4px)}
.w-card .ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);flex:none}
.w-card .ic svg{width:26px;height:26px}
.w-card b{font:600 18px var(--f-head);display:block}
.w-card span{color:var(--text-2);font-size:13.5px}

/* ---------- avionics systems view ---------- */
#systems{grid-template-columns:250px 1fr;min-height:0}
.sys-list{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding-bottom:12px}
.sys-item{display:flex;gap:10px;align-items:center;width:calc(100% - 20px);margin:4px 10px;padding:10px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;cursor:pointer;text-align:left}
.sys-item:hover{background:var(--panel-2)}
.sys-item.active{border-color:var(--cyan-dim);background:rgba(53,224,255,.06)}
.sys-item .freq{font:500 10.5px var(--f-mono);color:var(--text-3);display:block;letter-spacing:.06em}
.sys-item b{font:600 15px var(--f-head);display:block}
.sys-host{position:relative;min-width:0;min-height:0;overflow:auto;background:var(--bg)}

@media (max-width:1100px){#sandbox{grid-template-columns:190px 1fr 260px}.brand{min-width:0}.brand small{display:none}.simtime{display:none}}
@media (max-width:860px){
  #sandbox{grid-template-columns:118px 1fr;grid-template-rows:1fr 42vh}
  .inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .pal-grid{grid-template-columns:1fr}.part-btn span{font-size:11px}
  .brand b{font-size:13px}.brand-mark{display:none}.btn .lbl{display:none}
  .topbar{gap:6px;padding:0 8px;overflow-x:auto}.tab{padding:.45em .6em;font-size:12px}
  #systems{grid-template-columns:1fr}.sys-list{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.sys-item{min-width:180px}
  .w-inner{grid-template-columns:1fr;padding:28px 18px}}

/* ---------- multimeter: handheld, yellow holster, rotary dial, four jacks ---------- */
.dmm{position:absolute;right:14px;bottom:26px;width:214px;z-index:3;user-select:none}
.fk-body{position:relative;background:#f2c230;border-radius:26px 26px 30px 30px;padding:9px;box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 -4px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35)}
.fk-body::before{content:"";position:absolute;inset:7px;border-radius:20px 20px 24px 24px;background:linear-gradient(180deg,#3b3f45,#2a2d32);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fk-body>*{position:relative}
.fk-top{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 0}
.fk-brand{font:700 10px var(--f-mono);letter-spacing:.08em;color:#f2c230}.fk-brand b{font-weight:600;color:#d9dde3;letter-spacing:.06em;font-size:8.5px;margin-left:3px}
.fk-x{border:0;background:none;color:#aab2bd;cursor:pointer;font-size:12px;padding:2px 4px}.fk-x:hover{color:#fff}
.fk-lcd{margin:6px 8px 8px;background:linear-gradient(180deg,#cfd6c1,#bcc4ad);border-radius:6px;padding:4px 9px 5px;box-shadow:inset 0 2px 7px rgba(0,0,0,.5);color:#1c2418;border:2px solid #1d2024}
.fk-ann{display:flex;gap:8px;font:700 8.5px var(--f-mono);letter-spacing:.06em;height:11px;color:#1c2418}
.fk-ann span{opacity:0}.fk-ann span.on{opacity:.9}#annMode{margin-left:auto;opacity:.9}
.fk-read{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;height:40px}
.fk-val{font:700 33px/1 var(--f-mono);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.fk-val.warn{animation:blink .7s steps(2) infinite}
.fk-unit{font:700 12px var(--f-mono);min-width:30px}
@keyframes blink{50%{opacity:.25}}
.fk-bar{display:flex;gap:1.5px;height:6px;margin-top:2px}.fk-bar i{flex:1;background:#1c2418;opacity:.1;border-radius:1px}.fk-bar i.on{opacity:.85}
.fk-btns{display:flex;gap:6px;margin:0 10px}
.fk-btns button{flex:1;border:0;border-radius:5px;background:#555b63;color:#eef1f4;font:700 9.5px var(--f-mono);letter-spacing:.08em;padding:5px 0;cursor:pointer;box-shadow:0 2px 0 #1b1d21}
.fk-btns button:active{transform:translateY(1px);box-shadow:0 1px 0 #1b1d21}.fk-btns button.on{background:#f2c230;color:#1b1d21}
.fk-dial{position:relative;height:158px;margin:2px 0 0;touch-action:none;user-select:none;-webkit-user-select:none}
.fk-dial .pos{position:absolute;transform:translate(-50%,-50%);font:700 11.5px var(--f-mono);color:#e9edf2;cursor:pointer;padding:2px 3px;border-radius:4px;white-space:nowrap;line-height:1}
.fk-dial .pos.amp{color:#ff6b61}.fk-dial .pos.off{color:#aab2bd;font-size:9.5px}
.fk-dial .pos:hover,.fk-dial .pos.aim{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(242,194,48,.55)}.fk-dial .pos.on{color:#1b1d21;background:#f2c230}
.fk-dial .tick{position:absolute;width:2px;height:7px;background:#8e969f;transform-origin:50% 50%}
.fk-knob{position:absolute;left:50%;top:50%;width:82px;height:82px;margin:-41px 0 0 -41px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 38% 32%,#6b727b,#2c3036 62%,#1b1d21);box-shadow:0 5px 10px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.25);transition:transform .18s ease}
.fk-knob.turning{cursor:grabbing;transition:transform .08s ease}.fk-knob:focus-visible{outline:2px solid #f2c230;outline-offset:3px}
.fk-knob i{position:absolute;left:50%;top:5px;width:22px;height:72px;margin-left:-11px;border-radius:11px;background:linear-gradient(90deg,#34383e,#555b63 50%,#34383e);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.fk-knob i::after{content:"";position:absolute;left:50%;top:4px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:#f2c230}
.fk-jacks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 6px 4px;padding-bottom:6px}
.fk-j{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;cursor:pointer}
.fk-j span{font:700 8.5px var(--f-mono);color:#d9dde3;letter-spacing:.02em;white-space:nowrap}.fk-j.amp span{color:#ff6b61}
.fk-j i{position:relative;display:block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#050607 38%,#1e2126 42%,#3a3f46 70%);border:2px solid #8e969f}
.fk-j.amp i,.fk-j[data-j=VOHM] i{border-color:#d9463b}
.fk-j:hover i{box-shadow:0 0 0 3px rgba(242,194,48,.45)}
/* the banana plug of a plugged lead: sits in the jack and runs down past the holster, where the canvas lead picks it up */
.fk-j i.red::after,.fk-j i.black::after{content:"";position:absolute;left:50%;top:50%;width:10px;margin-left:-5px;height:46px;border-radius:3px 3px 4px 4px;pointer-events:none}
.fk-j i.red::after{background:linear-gradient(90deg,#8e1b16,#e0433a 45%,#8e1b16)}
.fk-j i.black::after{background:linear-gradient(90deg,#0d0e10,#3a3f46 45%,#0d0e10)}
.fk-j i.red::before,.fk-j i.black::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:1}
.fk-j i.red::before{background:#e0433a}.fk-j i.black::before{background:#2c3036}
.fk-hint{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;padding:6px 9px;border-radius:8px;background:rgba(11,17,27,.92);border:1px solid #22324a;font:500 12px/1.35 var(--f-body);color:#dbe4f0;text-align:center}
.fk-hint:empty{display:none}

/* ---------- menus, toasts, help ---------- */
.menu{position:fixed;top:52px;right:14px;z-index:40;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;font-size:13.5px;min-width:220px}
.menu[hidden]{display:none}
.menu label{display:flex;align-items:center;gap:8px;cursor:pointer}
.menu label.col{flex-direction:column;align-items:stretch;gap:4px;color:var(--text-2)}
.toast{position:fixed;left:50%;top:118px;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:rgba(12,19,29,.96);border:1px solid var(--cyan-dim);color:var(--text);padding:10px 18px;border-radius:24px;box-shadow:var(--glow-cyan);transition:.25s;z-index:70;font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;font-size:14px;color:var(--text-2)}
.help-grid h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:6px 0}
.help-grid ul{margin:0;padding-left:18px}.help-grid li{margin:.35em 0}
.help-grid ul.keys{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.help-grid b{color:var(--text)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;background:var(--panel-2);color:var(--text-2);padding:6px 4px;cursor:pointer;font-size:12.5px}
.seg button.on{background:rgba(53,224,255,.14);color:var(--cyan)}
.valrow{display:flex;gap:6px;align-items:center}
.valrow .num{width:96px;flex:none;font-family:var(--f-mono)}
.status{font:600 12px var(--f-mono);padding:3px 8px;border-radius:4px;display:inline-block;margin-top:8px}
.status.ok{color:var(--green);background:rgba(77,255,136,.08)}
.status.bad{color:var(--red);background:rgba(255,91,91,.1)}
.status.amber{color:var(--amber);background:rgba(255,182,64,.1)}
.lesson-done{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(77,255,136,.08);border:1px solid rgba(77,255,136,.35);color:var(--green);font-weight:600}
.lab-restart{display:block;width:100%;margin-top:12px;font-size:12.5px;color:var(--text-2)}.lab-restart.arm{border-color:var(--amber);color:var(--amber)}

/* ---------- lab mode (?lab=1): homework labs get the circuit, the meter, the steps, and nothing else ---------- */
body.lab .tabs, body.lab #btnLibrary, body.lab #speed, body.lab #btnStep, body.lab #btnReset, body.lab #btnFault,
body.lab #btnSettings, body.lab #btnHelp, body.lab .simtime, body.lab #palette, body.lab #scope, body.lab .brand small{display:none}
body.lab #app{grid-template-rows:48px 1fr}
/* steps and readings on the left, all in view; the circuit in the middle; the selected part's controls on the right */
body.lab #sandbox{grid-template-columns:clamp(290px,24vw,360px) minmax(0,1fr)}
body.lab .inspector{display:none}
body.lab.part-selected #sandbox{grid-template-columns:clamp(290px,24vw,360px) minmax(0,1fr) clamp(230px,19vw,290px)}
body.lab.part-selected .inspector{display:block}
.ins-close{display:none}
body.lab .ins-close{display:block;margin:10px 10px 0 auto}
body.lab .labside{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;min-height:0}
body.lab .labside .guide{margin:10px}
body.lab .labside .guide ol li{padding-top:3px;padding-bottom:3px;font-size:13px;line-height:1.38}
/* compact log in the side columns: one line per reading, the meter setting beside its label */
body.lab .labside .lablog-r,body.lab.syslab #sysGuide .lablog-r{padding:4px 8px;margin-bottom:4px}
body.lab .labside .lablog-r .w{font-size:12px}
body.lab .labside .lablog-r .w small{display:inline-block;margin:0 0 0 6px;white-space:nowrap}
body.lab .labside .lablog-r .v{font-size:13.5px}
body.lab .labside .guide h3{font-size:15px;margin-bottom:2px}
body.lab .stage{grid-template-rows:minmax(0,1fr)}
body.lab .inspector{border-left:1px solid var(--line)}
body.lab .guide{margin:10px}
body.lab .guide ol li.next{color:var(--text);background:rgba(53,224,255,.06);border-radius:6px}
body.lab .guide ol li.next::before{border-color:var(--cyan);color:var(--cyan)}
.lablog{margin:10px 0 8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.lablog-h{font:600 10.5px var(--f-mono);letter-spacing:.2em;color:var(--amber,#ffb640);text-transform:uppercase;margin-bottom:6px}
.lablog-note{font-size:11.5px;line-height:1.35;color:var(--text-3);margin:-2px 0 7px}
.lablog-r{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:rgba(0,0,0,.25)}
.lablog-r .w{font-size:12.5px;line-height:1.3;color:var(--text-2)}
.lablog-r .w small{display:block;font:500 10.5px var(--f-mono);color:var(--text-3);margin-top:2px}
.lablog-r .v{font:700 15px var(--f-mono);color:var(--text-3);white-space:nowrap}
.lablog-r.live{border-color:rgba(53,224,255,.55)}
.lablog-r.live .v{color:var(--cyan)}
.lablog-r.live .v.wrongfn{color:var(--amber);font-size:12.5px;white-space:normal;text-align:right;max-width:16em}
/* (a long hint wraps, and on a narrow screen the column is never wider than the screen: a hint that would not wrap widened a
   phone's page from 390 to 451 px, and the circuit jumped as it refit) */
.lablog-r.got{border-color:rgba(77,255,136,.45)}
.lablog-r.got .v{color:var(--green)}
/* one column on a narrow screen: the circuit, then the steps, then the part panel, each its full height and the page
   scrolling (auto rows squeezed both panels into the leftover height, so the part panel sat over the steps) */
@media (max-width:900px){body.lab #sandbox,body.lab.part-selected #sandbox{grid-template-columns:minmax(0,1fr);grid-template-rows:55vh max-content max-content;align-content:start;overflow-y:auto}body.lab .labside{order:2;overflow:visible}body.lab .inspector{order:3;overflow:visible}}
/* a phone lab: the meter docks under the circuit (app.meterRoom), so the canvas grows to hold both while it is open */
@media (max-width:609px){body.lab.meter-on #sandbox,body.lab.meter-on.part-selected #sandbox{grid-template-rows:86vh max-content max-content}
  /* a lab with the scope open adds the scope's own 280 px under the canvas instead of taking it from the circuit */
  body.lab.labscope #sandbox,body.lab.labscope.part-selected #sandbox{grid-template-rows:calc(55vh + 280px) max-content max-content}
  body.lab.meter-on.labscope #sandbox,body.lab.meter-on.labscope.part-selected #sandbox{grid-template-rows:calc(86vh + 280px) max-content max-content}}
body.lab #insBody .learn{display:none}
/* a lab is worked with the meter: the part panel keeps a part's settings but not its live readings (they gave the answers away) */
body.lab:not(.syslab) #insBody #ro{display:none}
body.lab.labscope #scope{display:grid}
body.lab.labscope .stage{grid-template-rows:minmax(0,1fr) auto}
/* systems lab (?lab=1&task=<id>): the instrument fills the screen, its steps and reading log on the right */
body.lab.syslab #systems{grid-template-columns:clamp(290px,24vw,360px) minmax(0,1fr)}
body.lab.syslab #sysList, body.lab.syslab #btnRun, body.lab.syslab #btnMeter{display:none}
body.lab.syslab #sysGuide{display:block;grid-column:1;grid-row:1;overflow-y:auto;border-left:0;border-right:1px solid var(--line)}
/* (display:block: the steps panel shares the inspector class, and "body.lab .inspector{display:none}" above hid it, steps and log, on every bench lab) */
body.lab.syslab #sysHost{grid-column:2;grid-row:1}
@media (max-width:900px){body.lab.syslab #systems{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 40vh}body.lab.syslab #sysGuide{grid-column:1;grid-row:2}body.lab.syslab #sysHost{grid-column:1;grid-row:1}}
/* a systems lab logs short phrases, not meter numbers: give the value room and let it wrap */
body.syslab .lablog-r{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
body.syslab .lablog-r .v{white-space:normal;font-size:13px;line-height:1.3;text-align:right;overflow-wrap:anywhere}
/* bench tour: one part of the instrument at a time, spotlighted, with a plain-language card beside it */
#tour{position:fixed;inset:0;z-index:200}
#tour .tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(3,6,10,.72),0 0 0 2px var(--cyan),0 0 24px rgba(53,224,255,.35);pointer-events:none;transition:all .25s ease}
#tour .tour-card{position:fixed;background:var(--panel-2);border:1px solid var(--cyan-dim);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);transition:left .25s ease,top .25s ease}
#tour .tour-n{font:600 10.5px var(--f-mono);letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;margin-bottom:6px}
#tour h4{font:600 17px var(--f-head);margin:0 0 6px}
#tour p{margin:0 0 12px;color:var(--text-2);font-size:14px;line-height:1.55}
#tour .tour-b{display:flex;gap:8px;align-items:center}#tour .spacer{flex:1}
.guide .tour-btn{margin:6px 0 2px;font-size:12.5px;padding:.4em .8em}