/* J.A.R.V.I.S. HUD — matches the JarvisCombined floating-glass-over-full-bleed
 * paradigm: no bordered grid panels, small translucent glass cards floating
 * over a full-screen dark backdrop, a state-colored reactor orb, gradient-fade
 * top/bottom bars, pill-shaped controls. Colors and layout language ported
 * from that project; internals (data, behavior) are ours and unchanged.
 * No WebGL / camera — the orb is pure CSS, so it can never throw a runtime
 * error and take voice input down with it. */
:root{
  --bg:#000814;
  --idle:#00cfff; --listening:#ff5c7a; --processing:#4d9fff; --speaking:#00e5b0;
  --teal:#00e5b0; --ink:#e2edf5; --dim:rgba(200,220,235,.5);
  --glass:rgba(0,8,20,.75); --glass-line:rgba(0,229,176,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:"Rajdhani","JetBrains Mono",ui-monospace,Menlo,monospace;
  -webkit-font-smoothing:antialiased;font-size:13px}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font-family:inherit}
#fx{position:fixed;inset:0;z-index:0}

#hud{position:fixed;inset:0;z-index:5}

/* ── floating top bar (gradient fade, not a boxed header) ───────────── */
header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;
  justify-content:space-between;align-items:center;
  padding:16px 20px 20px;background:linear-gradient(to bottom, rgba(0,8,20,.85) 0%, transparent 100%)}
.brand{display:flex;align-items:center;gap:12px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 16px var(--teal);animation:blink 2s infinite}
.brand-name{font-size:17px;font-weight:700;letter-spacing:.34em;color:var(--teal)}
nav{display:flex;gap:2px;margin-left:8px}
nav button{padding:6px 11px;font-size:9.5px;letter-spacing:.16em;color:var(--dim);
  border-bottom:2px solid transparent;transition:.15s}
nav button:hover{color:var(--teal)}
nav button.on{color:var(--teal);border-bottom-color:var(--teal)}
.topstatus{display:flex;align-items:center;gap:10px}
#clock{font-size:12px;color:var(--ink);letter-spacing:.08em}
.status-dot{width:8px;height:8px;border-radius:50%;background:#00dd66;box-shadow:0 0 10px #00dd66}
.status-dot.off{background:#ff4444;box-shadow:0 0 10px #ff4444}
.icon-btn{display:flex;align-items:center;justify-content:center;padding:7px;
  border-radius:50%;color:var(--dim);background:rgba(0,0,0,.35);
  border:1px solid rgba(0,229,176,.25);transition:.2s}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{color:var(--teal);border-color:rgba(0,229,176,.6)}
.icon-btn.on{color:var(--teal);border-color:var(--teal);box-shadow:0 0 10px rgba(0,229,176,.3)}
.icon-btn.alert{color:var(--listening);border-color:var(--listening)}

/* ── the scene: full-bleed, reactor centered (real Three.js canvas, see
   reactor.js — it injects its own <canvas> into #orb-wrap and drives color
   purely from JS, so no per-state CSS is needed here) ──────────────────── */
.scene{position:absolute;inset:0;z-index:1;background:#000}
#wave{display:block;width:100%;max-width:680px;height:20px;margin:0 auto 8px;opacity:.8}

/* ── voice-state pill (floats above input, only when active) ────────── */
.state-pill{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:8px;padding:8px 22px;border-radius:30px;
  font-size:10.5px;letter-spacing:.18em;backdrop-filter:blur(8px);
  background:rgba(0,207,255,.18);border:1px solid rgba(0,207,255,.5);color:var(--idle);
  opacity:0;pointer-events:none;transition:opacity .25s}
.state-pill.show{opacity:1}
.state-pill.listening{background:rgba(255,92,122,.2);border-color:rgba(255,92,122,.5);color:var(--listening)}
.state-pill.busy{background:rgba(77,159,255,.2);border-color:rgba(77,159,255,.5);color:var(--processing)}
.state-pill.speaking{background:rgba(0,229,176,.2);border-color:rgba(0,229,176,.5);color:var(--speaking)}
.pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink .7s infinite}

/* ── floating glass cards (top-left stats/calendar, top-right actions) ── */
.card{position:absolute;z-index:25;background:var(--glass);border:1px solid var(--glass-line);
  border-radius:10px;padding:11px 14px;backdrop-filter:blur(8px);min-width:180px}
.card h2{font-size:8.5px;letter-spacing:.24em;color:var(--teal);opacity:.75;margin-bottom:9px}
.card-stats{top:66px;left:16px}
.card-cal{top:66px;left:16px;max-width:230px}
.card-actions{top:66px;right:16px}
.card-vitals{bottom:96px;right:16px;min-width:190px}

.stat-row{margin-bottom:7px}
.stat-row:last-child{margin-bottom:0}
.stat-label{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-bottom:3px}
.stat-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.stat-fill{height:100%;background:var(--teal);box-shadow:0 0 6px var(--teal);transition:width .8s ease}

#cal-list{list-style:none}
#cal-list li{border-left:2px solid rgba(0,229,176,.4);padding-left:8px;margin-bottom:7px}
#cal-list li:last-child{margin-bottom:0}
#cal-list .ctitle{font-size:10.5px;color:var(--ink);font-weight:600;line-height:1.25}
#cal-list .ctime{font-size:8.5px;color:rgba(0,229,176,.7);margin-top:2px;display:block}
#cal-list .cloc{font-size:8.5px;color:var(--dim);display:block}
.dim{color:var(--dim);font-size:10px}

.qa-col{display:flex;flex-direction:column;gap:5px}
.qa-col button{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
  color:var(--dim);transition:.15s;font-size:9.5px;letter-spacing:.1em}
.qa-col button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.qa-col button:hover{color:var(--teal);background:rgba(0,229,176,.08)}
.qa-col button.hit{color:var(--teal);background:rgba(0,229,176,.15)}

.vitals-row{display:flex;gap:10px}
.vital{flex:1;text-align:center}
.vlabel{display:block;font-size:8px;letter-spacing:.12em;color:var(--dim);margin-bottom:4px}
.vnum{font-size:17px;color:var(--teal)}
.vunit{font-size:7.5px;color:var(--dim);margin-left:2px}

/* ── transcript (floats above input when there's something to show) ─── */
.transcript-wrap{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:28;
  width:min(560px,60vw);max-height:26vh;display:flex;flex-direction:column-reverse;
  overflow:hidden auto;gap:6px;padding:0 4px;mask-image:linear-gradient(to bottom, transparent, #000 22%)}
#transcript{display:flex;flex-direction:column;gap:6px}
.msg{padding:7px 12px;border-radius:12px;max-width:88%;line-height:1.4;font-size:11.5px;
  backdrop-filter:blur(6px)}
.msg.user{align-self:flex-end;background:rgba(0,229,176,.14);border:1px solid rgba(0,229,176,.3)}
.msg.jarvis{align-self:flex-start;background:rgba(0,8,20,.8);border:1px solid rgba(0,229,176,.22)}
.msg.tool{align-self:center;font-size:9px;color:var(--dim);letter-spacing:.1em;background:none;border:none}

/* ── floating bottom input bar ───────────────────────────────────────── */
footer{position:absolute;bottom:0;left:0;right:0;z-index:30;padding:18px 24px;
  background:linear-gradient(to top, rgba(0,8,20,.95) 0%, transparent 100%)}
.inputbar{display:flex;gap:10px;align-items:center;max-width:680px;margin:0 auto}
.pill-btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(0,229,176,.12);
  border:1px solid rgba(0,229,176,.5);color:var(--teal);transition:.2s}
.pill-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pill-btn:hover{box-shadow:0 0 14px rgba(0,229,176,.3)}
.pill-btn.on{background:rgba(255,92,122,.22);border-color:rgba(255,92,122,.7);color:var(--listening);
  box-shadow:0 0 18px rgba(255,92,122,.4);animation:pulse 1.1s infinite}
.pill-btn.mute-on{background:rgba(255,92,122,.2);border-color:rgba(255,92,122,.6);color:var(--listening)}
#text{flex:1;padding:12px 18px;background:rgba(0,8,20,.7);border:1px solid rgba(0,229,176,.35);
  border-radius:26px;color:var(--ink);font-size:13px;outline:none}
#text:focus{border-color:var(--teal)}

/* ── drawer / viewer (unchanged behavior, restyled) ──────────────────── */
.drawer{position:fixed;right:16px;top:66px;bottom:80px;width:280px;z-index:40;
  background:rgba(0,5,15,.92);border:1px solid rgba(0,229,176,.5);border-radius:10px;
  display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,229,176,.2);backdrop-filter:blur(12px)}
.drawer.hidden{display:none}
.drawer-bar{display:flex;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--glass-line);font-size:10.5px;letter-spacing:.2em;color:var(--teal)}
.drawer-bar button{color:var(--dim);font-size:9.5px;letter-spacing:.1em}
#drawer-list{list-style:none;overflow:auto;padding:8px 14px;font-size:11px;line-height:2}
#drawer-list li{cursor:pointer;color:var(--ink);opacity:.85}
#drawer-list li:hover{color:var(--teal)}

/* small floating panel by default; #viewer-size toggles .large to expand */
.viewer{position:fixed;z-index:50;background:rgba(0,5,15,.94);
  border:1px solid var(--teal);border-radius:10px;box-shadow:0 0 30px rgba(0,229,176,.2);
  display:flex;flex-direction:column;backdrop-filter:blur(10px);
  bottom:16px;right:16px;width:240px;height:270px;transition:all .25s ease}
.viewer.hidden{display:none}
.viewer.large{inset:8% 12%;bottom:auto;right:auto;width:auto;height:auto;
  box-shadow:0 0 60px rgba(0,229,176,.25)}
#viewer3d{position:relative;flex:1;width:100%;height:100%;overflow:hidden}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 12px;border-top:1px solid var(--glass-line);font-size:9.5px;
  letter-spacing:.14em;color:var(--teal);overflow:hidden}
.viewer-bar #viewer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-bar .vgroup{display:flex;gap:5px;align-items:center;flex-shrink:0}
.viewer-bar button{color:var(--dim);font-size:9px;letter-spacing:.08em;
  padding:4px 7px;border-radius:5px;border:1px solid transparent;transition:.15s}
.viewer-bar button:hover{color:var(--teal)}
.viewer-bar button.on{color:var(--teal);background:rgba(0,229,176,.14);border-color:rgba(0,229,176,.3)}

/* ── pinch-to-grab: hand cursors + holographic-self panel + grabbed-card
   feedback. The raw camera feed (#grab-video) is detection-only, never
   shown — the holo-mount canvas (holo3d.js) is the actual visible avatar. */
#grab-video{position:fixed;width:2px;height:2px;opacity:0;pointer-events:none;left:-9999px;top:-9999px}
.hand-cursor{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid var(--teal);background:rgba(0,229,176,.15);
  z-index:70;pointer-events:none;opacity:0;transition:opacity .15s,transform .02s linear,background .15s,box-shadow .15s}
.hand-cursor.show{opacity:.85}
.hand-cursor.pinching{background:rgba(77,159,255,.35);border-color:var(--processing);
  box-shadow:0 0 18px rgba(77,159,255,.6)}
.card.grabbed{box-shadow:0 0 26px rgba(0,229,176,.45);border-color:var(--teal);
  z-index:45;cursor:grabbing;transition:none}

.card-holo{bottom:16px;left:16px;width:196px;padding:10px 10px 12px}
.card-holo.hidden{display:none}
.holo-mount{position:relative;width:100%;height:190px;border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse at center, rgba(0,229,176,.08), transparent 70%)}

.card-map{top:66px;left:50%;transform:translateX(-50%);width:380px}
.card-map.hidden{display:none}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.map-head h2{margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.map-head #map-query{color:var(--ink);opacity:.85;text-transform:none;letter-spacing:normal}
.map-head button{color:var(--dim);font-size:12px;flex-shrink:0;padding:2px 5px;border-radius:4px}
.map-head button:hover{color:var(--teal);background:rgba(0,229,176,.12)}
.map-frame{width:100%;height:260px;border:0;border-radius:6px;display:block}

/* Jarvis-authored widgets. Sized a little larger than the map card since a
   widget may be a chart or a control panel, and resizable by the widget
   itself via Jarvis.resize(). */
.card-widget{top:66px;left:50%;transform:translateX(-50%);width:440px}
.card-widget.hidden{display:none}
.widget-frame{width:100%;height:320px;border:0;border-radius:6px;display:block;background:rgba(4,9,12,.55)}
.card-widget.grabbed{box-shadow:0 0 0 1px var(--teal),0 0 24px rgba(0,229,176,.35)}


/* Media player. Wider than the widget card and 16:9, because unlike a chart or a
   control panel this is something you actually watch. */
.card-media{top:66px;left:50%;transform:translateX(-50%);width:520px}
.card-media.hidden{display:none}
.card-media.grabbed{box-shadow:0 0 0 1px var(--teal),0 0 24px rgba(0,229,176,.35)}
.media-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:6px;display:block;
  background:#000}
.media-frame.hidden{display:none}
/* Shown instead of a player when the site refuses framing (Netflix, Spotify) —
   an honest button beats a black rectangle that silently never loads. */
.media-link{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;min-height:96px;padding:16px;border:1px solid var(--line);border-radius:6px;
  color:var(--teal);text-decoration:none;font-size:14px;line-height:1.45;
  background:rgba(0,229,176,.06)}
.media-link:hover{background:rgba(0,229,176,.14);border-color:var(--teal)}
.media-link.hidden{display:none}

/* call setup view */

/* lite mode (Raspberry Pi / low-power kiosk): backdrop-filter blur is the single
   most expensive thing a Pi GPU does here, so drop every blur; also stop the
   ambient animations that burn CPU on a device with no cycles to spare. The
   Three.js reactor + particle field are skipped in hud.js, not here. */
html.lite *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
html.lite #fx{display:none}
html.lite .brand-dot,html.lite .status-dot,html.lite .stat-fill{animation:none !important}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}

@media(max-width:900px){
  nav{display:none}
  .card-cal,.card-actions,.card-vitals{display:none}
  .transcript-wrap{width:88vw}
  /* The floating cards are all fixed pixel widths tuned for a desktop/projector
     HUD. On a phone those overflow the viewport and the page scrolls sideways,
     so clamp every one of them to the screen. The media card is the widest and
     the most likely to be opened on a phone ("play X" from bed), which is what
     surfaced this. */
  .card-map,.card-widget,.card-media{width:min(94vw,520px)}
  .media-frame{aspect-ratio:16/9;height:auto}
  .widget-frame{height:min(60vh,320px)}
}

/* enlarge/shrink gesture: the panel being resized, and the calibration readout */
.card.scaling{box-shadow:0 0 0 1px var(--teal),0 0 30px rgba(0,229,176,.45);transition:none}
/* one-shot pulse when a discrete content-zoom pump lands */
.card.pumped{box-shadow:0 0 0 2px var(--teal),0 0 22px rgba(0,229,176,.6)}
/* point-and-dwell click feedback: a brief teal flash on the pressed control */
.point-hit{outline:2px solid var(--teal)!important;outline-offset:2px;
  box-shadow:0 0 16px rgba(0,229,176,.7)!important;transition:box-shadow .1s}
#gesture-debug{position:fixed;left:10px;top:10px;z-index:9999;pointer-events:none;
  white-space:pre;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--teal);background:rgba(4,9,12,.85);border:1px solid var(--line);
  border-radius:5px;padding:6px 9px}

/* hand-gesture sensitivity slider (header) */
.sens-wrap{display:flex;align-items:center;gap:6px;padding:0 8px;height:30px;border-radius:15px;
  background:rgba(0,0,0,.35);border:1px solid rgba(0,229,176,.25)}
.sens-ic{width:13px;height:13px;fill:var(--teal);stroke:none;flex-shrink:0;opacity:.85}
.sens-val{font-size:9.5px;color:var(--dim);min-width:16px;text-align:right;font-variant-numeric:tabular-nums}
.sens-slider{-webkit-appearance:none;appearance:none;width:84px;height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--teal) 0%,var(--teal) 50%,rgba(255,255,255,.15) 50%);
  outline:none;cursor:pointer}
.sens-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--teal);box-shadow:0 0 8px rgba(0,229,176,.7);cursor:pointer}
.sens-slider::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;
  background:var(--teal);box-shadow:0 0 8px rgba(0,229,176,.7);cursor:pointer}
@media(max-width:760px){.sens-wrap{display:none}}

/* ── Project Studio ────────────────────────────────────────────────────────
   The biggest surface in the HUD, deliberately: a 3D build, a schematic and
   live instrumentation are meant to be visible together rather than in three
   separate places. In-page rather than a widget — see the note in index.html. */
.studio{position:fixed;inset:6% 7% 7%;z-index:60;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%,#08181a 0%,#04090c 70%);
  border:1px solid var(--teal);border-radius:10px;overflow:hidden;
  box-shadow:0 0 60px rgba(0,229,176,.22);backdrop-filter:blur(10px)}
.studio.hidden{display:none}
.st-head{display:flex;align-items:center;gap:12px;padding:9px 13px 0;flex:none;
  position:relative;z-index:2}
#st-title{font-size:11px;letter-spacing:.22em;color:var(--teal);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
#st-clock{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.st-tabs{display:flex;gap:4px;flex:1}
.st-tab{font:inherit;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid transparent;border-radius:5px;
  padding:5px 10px;cursor:pointer}
.st-tab:hover{color:var(--ink)}
.st-tab.on{color:var(--teal);background:rgba(0,229,176,.1);border-color:rgba(0,229,176,.3)}
#st-close{font:inherit;font-size:9px;letter-spacing:.14em;background:transparent;
  color:var(--dim);border:1px solid rgba(0,229,176,.2);border-radius:5px;padding:4px 9px;
  cursor:pointer}
#st-close:hover{color:var(--teal);border-color:rgba(0,229,176,.45)}
.st-main{display:flex;flex:1;min-height:0;margin-top:8px}
/* Exactly one pane is ever shown, so they are plain flex children rather than
   absolutely positioned. Stacking them with inset:0 meant a single missing
   containing block dropped every pane to the top of the panel, where the
   Scenario sidebar printed straight over the tab strip. */
#st-panes{position:relative;flex:1;min-width:0;min-height:0;display:flex}
.st-pane{flex:1;min-width:0;min-height:0;display:flex}
.st-pane[hidden]{display:none}
#st-stage{position:relative;flex:1;min-width:0}
#st-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#st-overlay{position:absolute;left:12px;bottom:12px;right:12px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
#st-overlay>*{pointer-events:auto}
.st-toolbar{display:flex;align-items:center;gap:9px;background:rgba(4,12,16,.72);
  border:1px solid var(--glass-line);border-radius:7px;padding:6px 10px;backdrop-filter:blur(7px)}
.st-toolbar.st-inline{margin-bottom:10px}
.st-toolbar label{font-size:8.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.studio input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:110px;
  background:rgba(0,229,176,.25);border-radius:2px;outline:none}
.studio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
  border-radius:50%;background:var(--teal);cursor:pointer;box-shadow:0 0 8px rgba(0,229,176,.6)}
.st-act{font:inherit;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,229,176,.08);color:var(--teal);border:1px solid rgba(0,229,176,.3);
  border-radius:5px;padding:5px 11px;cursor:pointer}
.st-act:hover{background:rgba(0,229,176,.18)}
.st-act.on{background:var(--teal);color:#04090c}
#st-sel{max-width:250px;background:rgba(4,12,16,.8);border:1px solid var(--glass-line);
  border-radius:7px;padding:8px 11px;font-size:11px;line-height:1.5;backdrop-filter:blur(7px)}
#st-sel b{color:var(--teal);letter-spacing:.1em;margin-right:6px}
#st-sel span{display:block;color:var(--dim);font-size:9.5px}
#st-sel .desc{margin-top:3px;color:rgba(215,255,244,.7)}
#st-probe{position:fixed;z-index:80;background:rgba(4,12,16,.94);border:1px solid var(--teal);
  border-radius:6px;padding:6px 9px;font-size:10px;line-height:1.5;pointer-events:none;
  box-shadow:0 0 18px rgba(0,229,176,.28)}
#st-probe[hidden]{display:none}
#st-probe b{color:var(--teal);display:block;letter-spacing:.08em}
#st-probe span{display:block;color:var(--dim)}
#st-probe .val{color:#fff;font-size:13px;margin-top:2px}
.st-side{width:224px;flex:none;border-left:1px solid var(--glass-line);overflow-y:auto;
  padding:10px 11px;background:rgba(3,10,13,.55)}
.st-side h3{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  opacity:.8;margin:14px 0 6px}
.st-side h3:first-child{margin-top:0}
.studio table{width:100%;border-collapse:collapse;font-size:10.5px}
.studio td{padding:2px 0;vertical-align:top}
.studio td.k{color:rgba(215,255,244,.85)}
.studio td.v{text-align:right;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.studio td.s{text-align:right;padding-left:6px}
.studio td.q{color:var(--teal);padding-right:6px}
.studio td.dim{color:var(--dim)}
.studio tr.hi td{background:rgba(0,229,176,.12)}
.studio tr.tot td{border-top:1px solid var(--glass-line);padding-top:5px;color:var(--teal)}
.studio b.on{color:var(--teal)} .studio b.bad{color:#ff5c7a}
.studio ul{list-style:none;margin:0;padding:0;font-size:10px;line-height:1.55}
#st-faults li{padding:3px 0 3px 9px;border-left:2px solid transparent}
#st-faults li.error{border-color:#ff5c7a;color:#ffb9c6}
#st-faults li.warn{border-color:#ffb638;color:#ffdca8}
#st-faults li.ok{border-color:var(--teal);color:var(--dim)}
#st-log li{color:var(--dim);padding:1px 0}
#st-log .t{color:var(--teal);margin-right:5px;font-variant-numeric:tabular-nums}
#st-warn{margin:8px 13px 0;padding:7px 10px;border:1px solid rgba(255,182,56,.35);
  border-radius:6px;background:rgba(255,182,56,.07);color:#ffdca8;font-size:10px;line-height:1.5;
  list-style:none;flex:none}
#st-warn[hidden]{display:none}
.st-ctl{margin-bottom:9px}
.st-ctl label{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.st-ctl em{font-style:normal;color:#fff}
.st-ctl input[type=range]{width:100%}
.st-press{width:100%;font:inherit;font-size:10px;letter-spacing:.16em;
  background:rgba(0,229,176,.08);color:var(--teal);border:1px solid rgba(0,229,176,.3);
  border-radius:5px;padding:6px;cursor:pointer}
.st-press.on{background:var(--teal);color:#04090c}
#st-schematic{flex:1;overflow:auto;padding:16px}
#st-schematic svg{display:block;margin:0 auto}
#st-schematic .sym{cursor:pointer}
#st-schematic .sym.hi rect{fill:rgba(0,229,176,.16)}
#st-schematic .sym.hi path,#st-schematic .sym.hi circle{stroke-width:2.2}
#st-buildit{flex:1;overflow-y:auto;padding:14px 16px}
#st-buildit h3{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  margin:0 0 8px}
#st-buildit h3:not(:first-child){margin-top:18px}
#st-wirelist li{padding:4px 0;border-bottom:1px solid rgba(0,229,176,.09)}
#st-wirelist b{color:#fff;margin-right:7px}
.st-cls{font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:1px 5px;
  border-radius:3px;margin-right:7px}
.st-cls.power{background:rgba(255,92,122,.16);color:#ff9aae}
.st-cls.ground{background:rgba(136,153,170,.18);color:#b3c0cc}
.st-cls.signal{background:rgba(0,229,176,.14);color:#00e5b0}
.st-cls.data{background:rgba(77,159,255,.16);color:#8cc2ff}
#st-wirelist .nodes{color:var(--dim)}
.st-hint{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);
  font-size:11px;text-align:center;padding:20px;line-height:1.7}
#st-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:12px;padding:24px;text-align:center}
#st-empty[hidden]{display:none}
@media (max-width:900px),(max-height:620px){.studio{inset:2% 2% 3%}.st-side{width:180px}}

/* Test fit — lowering the assembly into the case by hand. Sits opposite the
   selection card so both can be open at once without fighting for space. */
#st-fitpanel{position:absolute;top:12px;right:12px;width:250px;z-index:6;
  background:rgba(4,12,16,.86);border:1px solid var(--glass-line);border-radius:8px;
  padding:10px 12px;backdrop-filter:blur(8px)}
#st-fitpanel[hidden]{display:none}
#st-fitpanel h3{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);opacity:.8;margin:0 0 7px}
.st-fithead{font-size:11px;line-height:1.45;margin-bottom:6px}
.st-fithead.ok{color:var(--teal)}
.st-fithead.bad{color:#ff8fa3}
.st-fithead.dim{color:var(--dim)}
#st-fitstatus ul{list-style:none;margin:0;padding:0;font-size:10px;line-height:1.5}
#st-fitstatus li{padding:2px 0 2px 8px;border-left:2px solid #ff5c7a;color:#ffb9c6;
  margin-bottom:3px}
#st-fitstatus li b{color:#fff;margin-right:4px}
.st-fithint{font-size:9.5px;color:var(--dim);margin:8px 0 8px;line-height:1.4}
.st-fitbtns{display:flex;flex-wrap:wrap;gap:5px}
.st-fitbtns .st-act{flex:1 1 auto;padding:5px 8px;font-size:9px}
.st-fitbtns .st-act:disabled{opacity:.35;cursor:not-allowed}
.st-fitbtns .st-act:disabled:hover{background:rgba(0,229,176,.08)}
#st-simnotes{list-style:none;margin:0 0 4px;padding:0;font-size:9.5px;line-height:1.45}
#st-simnotes[hidden]{display:none}
#st-simnotes li.warn{padding:4px 7px;margin-bottom:4px;border-left:2px solid #ffb638;
  background:rgba(255,182,56,.08);color:#ffdca8;border-radius:3px}