/* ── SelfBalance Lab / GYRO — component styles ──────────────────
   All color/space/type primitives come from css/tokens.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* keyboard focus: a single amber instrument ring everywhere, but only for
   keyboard users (:focus-visible) so pointer clicks stay clean. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── top-bar shell (product frame above the cockpit) ── */
#topbar {
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--edge-hi), 0 1px 0 rgba(0,0,0,0.25);
  position: relative;
  z-index: 20;
}
.tb-brand { display: flex; align-items: baseline; gap: 8px; }
.tb-mark { color: var(--accent); font-size: 16px; text-shadow: 0 0 10px var(--accent-glow), 0 0 22px var(--accent-glow); line-height: 1; }
.tb-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; color: var(--text); }
.tb-sub { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.tb-robot {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 11px; border: 1px solid var(--border-2); border-radius: var(--r-pill);
  font-size: 11.5px; color: var(--text-dim); font-family: var(--mono);
}
.tb-robot .tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.tb-robot.driving { color: var(--green); border-color: var(--green); }
.tb-robot.driving .tb-dot { background: var(--green); box-shadow: 0 0 7px var(--green); }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.tb-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Lucide icon sizing inside buttons/labels */
.lucide, [data-lucide] { width: 15px; height: 15px; stroke-width: 2; flex-shrink: 0; vertical-align: -2px; }

/* spinner for the Upload compile state */
@keyframes spin { to { transform: rotate(360deg); } }
button.loading > i, button.loading > .lucide { animation: spin 0.8s linear infinite; }

/* ── global motion: tactile button press + focus ring ──
   Named properties only (never `all`); transform/opacity are compositor-only. */
button {
  transition: transform var(--t-instant) var(--ease-snap),
              box-shadow var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), color var(--t-fast);
}
button:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: var(--r-sm); }

/* the "spark" flash on a freshly completed connection (checklist rows, chips) */
@keyframes connect-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  35%  { box-shadow: 0 0 12px 2px var(--ok-border); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.just-connected { animation: connect-pulse var(--t-slow) var(--ease-out); }

#app {
  display: grid;
  grid-template-columns: 240px 1fr 380px;
  flex: 1;
  min-height: 0;
  gap: 1px;
  background: var(--border);
}

aside, main { background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
#workspace { position: relative; background: var(--bg); }
/* engineering-paper blueprint grid behind the canvas (shows at the letterboxed
   edges + before the scene paints). Pure CSS gradients — no asset, CSP-safe. */
#workspace::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(120,160,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,200,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
#workspace::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 180px 30px rgba(0,0,0,0.55);
}
#three-canvas { position: relative; z-index: 1; }
#three-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.panel-header {
  padding: 11px 13px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  box-shadow: var(--edge-hi);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot-yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }

.hint { color: var(--text-dim); font-size: 12px; padding: 10px 12px; line-height: 1.5; }

/* ── auto-wire bar ── */
#auto-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 0; }
.auto-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; background: var(--btn-accent-grad);
  border: 1px solid var(--border-2);
  color: var(--accent); font-family: var(--ui); font-weight: 500; font-size: 12px;
  border-radius: var(--r); cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.auto-btn:hover { background: var(--btn-accent-grad-hover); border-color: var(--accent); }
.auto-btn:active { transform: translateY(1px); }
.auto-btn:disabled { opacity: 0.4; cursor: default; }

/* ── parts tray ── */
/* The left panel is a grid item; min-height:0 lets its flex children actually
   shrink + scroll (Firefox honours min-height:auto strictly, which otherwise
   let the tall parts tray squeeze the Inspector to zero height). */
#left-panel { min-height: 0; }
/* The three scrolling regions share the column proportionally (tray 3 : links 1 :
   inspector 3) so none can collapse — each scrolls within its own share. */
#parts-tray { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 3 1 0; min-height: 0; }
.part-card {
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  cursor: grab;
  user-select: none;
  box-shadow: var(--shadow-1), var(--edge-hi);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast), background var(--t-fast);
  position: relative;
}
.part-card:hover {
  border-color: var(--border-focus);
  transform: translateY(-1px);
  box-shadow: var(--shadow), var(--edge-hi);
}
.part-card:hover .part-swatch { box-shadow: 0 0 8px currentColor; }
.part-card:active { cursor: grabbing; transform: translateY(0) scale(0.99); }
.part-card.depleted { opacity: 0.35; pointer-events: none; box-shadow: none; }
.part-card .part-name { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; letter-spacing: 0.01em; }
.part-card .part-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; transition: box-shadow var(--t-fast); }
.part-card .part-desc { color: var(--text-dim); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.part-card .count-badge {
  position: absolute; top: 8px; right: 10px;
  font-size: 10.5px; color: var(--accent-text); font-family: var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.part-card .help-icon {
  position: absolute; bottom: 8px; right: 10px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--text-dim); color: var(--text-dim);
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  cursor: help;
}
.part-card .help-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ── checklist ── */
#checklist { padding: 8px 12px; overflow-y: auto; flex: 1 1 0; min-height: 0; max-height: 34%; }
.check-item { display: flex; gap: 8px; padding: 3px 0; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.check-item.done { color: var(--green); }
.check-item .box { flex-shrink: 0; }

/* ── inspector (live document + electrical solve) ── */
/* The Inspector sits in the RIGHT panel on desktop. The left column used to
   carry three stacked, independently-scrolling sections (tray, connections,
   inspector) while the right held a hint and one button — cramped on one side,
   empty on the other. Splitting them by role fixes both: left is what you build
   WITH, right is what the circuit is DOING. */
#inspector-block {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;   /* eat the empty space under RUN */
}
#inspector { padding: 8px 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; font-family: var(--mono); font-size: 11px; }
/* back to sharing the column when the phone shell moves it next to CONNECTIONS */
body.is-phone #inspector { flex: 3 1 0; }
.insp-sect { margin-bottom: 12px; }
.insp-h { color: var(--text-faint); letter-spacing: .12em; font-size: 9.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
.insp-count { color: var(--accent-text); }
.insp-comp { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; margin: 0 -6px; border-radius: var(--r-sm); transition: background var(--t-fast); }
.insp-comp:hover { background: var(--panel-3); }
.insp-id { color: var(--text); font-weight: 600; }
.insp-type { color: var(--text-faint); flex: 1; }
.insp-amps { color: var(--accent-text); font-variant-numeric: tabular-nums; font-weight: 600; }
.insp-dir { opacity: .9; margin-right: 1px; }
.insp-omega { color: var(--green); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── first-run onboarding coach ── */
#coach { position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  z-index: 40; width: min(340px, 86vw); padding: 13px 15px;
  background: var(--overlay-strong);
  border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--edge-hi); backdrop-filter: var(--glass-blur);
  font-size: 13px; transition: opacity .3s var(--ease-out); pointer-events: none;
  animation: slide-down var(--t-slow) var(--ease-out) both; }
#coach-dismiss, #coach-min, .coach-nudge, .coach-ask { pointer-events: auto; }
#coach.hidden { display: none; }
#coach.coach-complete { opacity: 0; }
/* minimize: shrink + fade toward the left edge, then remove from layout.
   animation:none is required — the base slide-down (fill:both) otherwise pins
   opacity:1 and would override this. visibility:hidden after the fade so it
   can't catch pointer events. */
#coach.minimized { opacity: 0; transform: translateX(-40px) scale(.85); pointer-events: none;
  animation: none; visibility: hidden;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s; }
#coach.minimized ~ #coach-chip { /* chip handles its own visibility */ }
#coach.dragging { animation: none; transition: none; cursor: grabbing; }
/* the header is the drag handle (rest of the tab stays click-through) */
.coach-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  pointer-events: auto; cursor: grab; touch-action: none; }
#coach.dragging .coach-head { cursor: grabbing; }
.coach-title { font-weight: 700; letter-spacing: .02em; color: var(--text, #e8eef5); margin-right: auto; }
#coach-dismiss, #coach-min { background: none; border: none; color: var(--text-dim, #8a93a3);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
#coach-dismiss:hover, #coach-min:hover { color: var(--text, #e8eef5); background: var(--panel-2, #1a1f2a); }
.coach-head-btns { display: flex; align-items: center; gap: 2px; }

/* the docked "restore" chip — a small pill on the left the tab collapses into */
#coach-chip { position: absolute; left: 12px; top: 54px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: var(--overlay-strong); color: var(--text); cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 999px;
  box-shadow: var(--shadow), var(--edge-hi); backdrop-filter: var(--glass-blur);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  opacity: 0; transform: translateX(-16px) scale(.9);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
#coach-chip.hidden { display: none; }
#coach-chip.in { opacity: 1; transform: none; }
#coach-chip:hover { border-color: var(--accent); }
#coach-chip .coach-chip-dot { color: var(--accent); animation: coach-pulse 2.4s ease-in-out infinite; }
@keyframes coach-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
#coach-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#coach-steps li { display: flex; align-items: center; gap: 8px; color: var(--text-dim, #8a93a3);
  padding: 3px 4px; border-radius: 6px; transition: color .2s, background .2s; }
#coach-steps li.current { color: var(--text, #e8eef5); background: color-mix(in srgb, var(--accent, #d4af37) 14%, transparent); }
#coach-steps li.done { color: var(--green, #2ecc71); }
#coach-steps li.done .coach-label { text-decoration: line-through; opacity: .7; }
.coach-check { width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.insp-params { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 2px 0 6px 4px; }
.insp-pfield { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.insp-pfield input[type=number] { width: 52px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 5px;
  font: inherit; font-size: 11px; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.insp-pfield input[type=number]:hover { border-color: var(--border-focus); }
.insp-pfield input[type=number]:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.insp-pfield i { font-style: normal; opacity: .6; }
.insp-net { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--text-dim); }
.insp-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.insp-eps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-ok { color: var(--green); font-size: 11px; }
.insp-viol { padding: 5px 7px; border-radius: var(--r-sm); margin: 3px 0; line-height: 1.4; }
.insp-viol b { letter-spacing: .04em; }
.insp-error { background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--red); }
.insp-warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--yellow); }
.insp-ref { display: block; color: var(--text-dim); font-size: 9.5px; margin-top: 2px; }

/* ── Hephaestus (natural-language build assistant) ── */
#hephaestus { position: absolute; right: 14px; bottom: 14px; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#hephaestus-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent)); color: #14110a; border: none; cursor: pointer;
  font-family: var(--display, inherit); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em;
  box-shadow: 0 4px 18px var(--accent-glow), var(--edge-hi);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
#hephaestus-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 26px var(--accent-glow), var(--edge-hi); }
#hephaestus-toggle svg { width: 15px; height: 15px; }
#hephaestus-panel {
  width: min(340px, 80vw); display: flex; flex-direction: column;
  background: var(--overlay-strong); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lg), var(--edge-hi); backdrop-filter: var(--glass-blur);
  animation: rise-in var(--t-med) var(--ease-out) both;
}
#hephaestus.collapsed #hephaestus-panel { display: none; }
#hephaestus-log { max-height: 46vh; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.hp-msg { font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: var(--r-lg); max-width: 92%; white-space: pre-wrap; box-shadow: var(--shadow-1); }
.hp-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid var(--accent-dim); color: var(--text); border-bottom-right-radius: var(--r-sm); }
.hp-bot { align-self: flex-start; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: var(--r-sm); }
.hp-err { align-self: flex-start; background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--red); font-size: 11.5px; }
.hp-tool { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; color: var(--accent-text); padding: 1px 4px; }
#hephaestus-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
#hephaestus-input { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: 8px 10px; font: inherit; font-size: 12.5px; }
#hephaestus-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-accent); }
#hephaestus-form button { background: var(--accent); border: none; border-radius: var(--r-sm); color: #14110a; width: 34px; cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-instant); }
#hephaestus-form button:hover:not(:disabled) { background: var(--accent-hover); }
#hephaestus-form button svg { width: 15px; height: 15px; }
#hephaestus-form button:disabled { opacity: .5; cursor: default; }

/* ── M1 run panel + sim title ── */
#run-hint {
  margin: 12px; padding: 12px 14px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
}
#run-hint b { color: var(--text); }
#run-hint .mono { font-family: var(--mono); color: var(--accent-text); }
.sim-title { font-family: var(--display, inherit); font-size: 12px; letter-spacing: .08em;
  color: var(--accent-text); margin-bottom: 6px; }

/* ── workspace HUD ── */
#workspace-hud {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  max-width: calc(100% - 120px);
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ── right panel ── */
/* min-height:0 lets the flex child shrink so CodeMirror can scroll to the end */
#editor-container { flex: 1 1 0; min-height: 0; overflow: hidden; }

/* progressive disclosure: the firmware is demoted (not hidden) until the board
   is wired, so a cold-start user leads with Build → Wire, not a wall of code. */
#editor-container, #serial { transition: opacity var(--t-med) var(--ease-out); }
/* 0.55 keeps the panel clearly de-emphasized while staying legible — dimming
   further pushed the (AA-compliant) editor/serial text back below AA. */
#right-panel.demoted #editor-container,
#right-panel.demoted #serial { opacity: 0.55; }
#fw-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 8px 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-dim);
  border-radius: var(--r-sm); color: var(--accent); font-size: var(--fs-sm);
}
#fw-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
#upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 10px 12px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: var(--r);
  cursor: not-allowed;
  transition: all 0.15s;
}
#upload-btn:not(:disabled) {
  background: var(--btn-go-grad);
  border-color: var(--green);
  color: var(--green);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(70,224,143,0);
}
#upload-btn:not(:disabled):hover { background: var(--btn-go-grad-hover); box-shadow: 0 6px 20px rgba(70,224,143,0.2); }
#upload-btn:not(:disabled):active { transform: translateY(1px); }

/* ── tooltip ── */
#tooltip {
  position: fixed; z-index: 100;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 11.5px;
  max-width: 260px;
  line-height: 1.45;
  pointer-events: none;
  color: var(--text);
}
#tooltip .unit { color: var(--text-dim); display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.04em; }
#tooltip .tt-role { margin-top: 5px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
#tooltip b { color: var(--text); font-size: 12.5px; }
#tooltip .tt-tag {
  display: inline-block; font-size: 9px; letter-spacing: 0.1em; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-bottom: 6px;
}
.tt-power  { background: #3a1616; color: var(--red); }
.tt-ground { background: #232833; color: var(--text-dim); }
.tt-data   { background: #3a3416; color: var(--yellow); }
#tooltip.error { border-color: var(--red); color: var(--red); }
.hidden { display: none !important; }

/* ── Guide rail (always-visible instructions, top-left of workspace) ── */
#guide {
  position: absolute; top: 12px; left: 12px; z-index: 8;
  width: 312px; max-height: calc(100% - 92px);
  display: flex; flex-direction: column;
  background: var(--overlay-strong); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow); backdrop-filter: blur(9px);
  overflow: hidden;
}
#guide.collapsed { width: 40px; height: 40px; background: none; border: none; box-shadow: none; padding: 0; overflow: visible; backdrop-filter: none; }
#guide.collapsed .g-head, #guide.collapsed .g-body { display: none; }
.g-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.g-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--text); display: flex; align-items: center; gap: 7px; }
.g-title [data-lucide] { color: var(--accent); }
.g-head-btns { display: flex; align-items: center; gap: 6px; }
.g-lessons {
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--accent);
  font-family: var(--ui); font-size: 11px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.g-lessons:hover { border-color: var(--accent); background: var(--accent-dim); }
.g-collapse {
  width: 22px; height: 22px; border-radius: var(--r-sm); background: none;
  border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1;
}
.g-collapse:hover { border-color: var(--accent); color: var(--accent); }
.g-body { overflow-y: auto; padding: 8px; }
.g-reopen {
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: var(--r-lg);
  background: var(--overlay-strong); border: 1px solid var(--border-2); color: var(--accent);
  cursor: pointer; backdrop-filter: blur(9px); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.g-reopen:hover { border-color: var(--accent); }

/* phase blocks */
.gp { border-radius: var(--r); padding: 8px 10px; transition: background var(--t-med); }
.gp + .gp { margin-top: 4px; }
.gp-head { display: flex; align-items: center; gap: 9px; }
.gp-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--text-dim); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600;
}
.gp-label { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.gp.future { opacity: 0.5; }
.gp.done .gp-num { border-color: var(--green); color: var(--green); background: rgba(61,220,132,0.12); }
.gp.done .gp-label { color: var(--green); }
.gp.open { background: var(--accent-soft); }
.gp.open .gp-num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.gp.open .gp-label { color: var(--text); font-weight: 600; }
.gp-body { margin: 7px 0 2px 29px; }
.gp-text { color: var(--text-dim); font-size: 11.8px; line-height: 1.55; }
.gp-text b { color: var(--text); font-weight: 600; }
.gp-check { margin: 9px 0 0; display: flex; flex-direction: column; gap: 2px; }
.gp-item { display: flex; gap: 7px; font-size: 11px; color: var(--text-dim); font-family: var(--mono); align-items: baseline; }
.gp-item.done { color: var(--green); }
.gp-box { flex-shrink: 0; }
.gp-tip { margin-top: 9px; font-size: 11px; color: var(--accent); opacity: 0.85; line-height: 1.5; }
.gp-tip b { color: var(--accent); }

/* interactive wire-connection rows (guided wiring: tap to connect) */
.gp-check .gp-wire {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-family: var(--mono); font-size: 11px; text-align: left;
  color: var(--text-dim); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 4px 7px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.gp-check .gp-wire:not(.done):hover { border-color: var(--border-2); background: var(--panel-2); color: var(--text); }
.gp-check .gp-wire.done { color: var(--green); cursor: default; opacity: 0.9; }
.gp-check .gp-wire.next {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.gp-check .gpw-label { flex: 1; }
.gp-check .gpw-next { flex-shrink: 0; color: var(--accent); font-family: var(--ui); font-weight: 600; font-size: 10px; }

/* ── controls legend (bottom-right, assembly only) ── */
#controls-legend {
  position: absolute; bottom: 52px; left: 12px; z-index: 6;
  background: var(--overlay); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 12px; backdrop-filter: blur(5px);
  font-size: 10.5px; color: var(--text-dim); line-height: 1.7; pointer-events: none;
}
#controls-legend b { color: var(--accent); font-weight: 600; }
#controls-legend .lg-title { color: var(--text); font-size: 10px; letter-spacing: 0.1em; margin-bottom: 3px; }

/* ── help button ── */
#help-btn {
  position: absolute; bottom: 14px; left: 14px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--overlay); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 15px; cursor: pointer; backdrop-filter: blur(4px);
}
#help-btn:hover { border-color: var(--accent); color: var(--accent); }

#sound-btn {
  position: absolute; bottom: 14px; left: 50px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--overlay); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
}
#sound-btn:hover { border-color: var(--accent); color: var(--accent); }
#sound-btn.muted { color: var(--text-dim); opacity: 0.7; }

/* Ambient rain — sits in the same round-button row as help / sound / share.
   Deliberately a separate control from mute: wanting rain while you work is a
   different preference from wanting UI blips. */
#ambient-btn {
  position: absolute; bottom: 14px; left: 122px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--overlay); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
}
#ambient-btn:hover { border-color: var(--accent); color: var(--accent); }
#ambient-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
#ambient-btn.loading { opacity: 0.6; cursor: progress; }

#share-btn {
  position: absolute; bottom: 14px; left: 86px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--overlay); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px);
}
#share-btn:hover { border-color: var(--accent); color: var(--accent); }
#share-btn svg { width: 15px; height: 15px; }

/* ── clear-all button ── */
#clear-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 6px 8px 0; padding: 8px; width: calc(100% - 16px);
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--ui); font-size: 11.5px; border-radius: var(--r); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#clear-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
#clear-btn:disabled { opacity: 0.35; cursor: default; }

/* ── title screen (Lab-Instrument welcome) ── */
#overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,7,10,0.82); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center;
}
#overlay .card {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-2); border-radius: var(--r-lg);
  padding: 30px 32px; max-width: 480px; width: calc(100% - 40px);
  box-shadow: var(--shadow-lg);
}
#overlay .ov-mark { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; }
#overlay .ov-mark span { text-shadow: 0 0 10px var(--accent-glow); }
#overlay h1 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; color: var(--text); letter-spacing: 0.01em; margin-bottom: 8px; }
#overlay .tagline { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 22px; max-width: 40ch; }
#overlay .ov-beats { display: flex; gap: 10px; margin-bottom: 24px; }
#overlay .ov-beat { flex: 1; padding: 12px 12px 13px; background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--r); }
#overlay .ov-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--accent); }
#overlay .ov-beat b { display: block; color: var(--text); font-size: 13px; margin: 5px 0 3px; }
#overlay .ov-beat p { color: var(--text-dim); font-size: 11px; line-height: 1.4; }
#overlay .start {
  width: 100%; padding: 13px; background: var(--btn-accent-grad); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--ui); font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: var(--r); cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast);
}
#overlay .start:hover { background: var(--btn-accent-grad-hover); box-shadow: 0 6px 22px var(--accent-glow); }

/* ── serial monitor ── */
#serial { flex-shrink: 0; height: 150px; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: #070a0e; }
#serial-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
}
#serial-head span { display: flex; align-items: center; gap: 6px; }
#serial-head .baud { font-family: var(--mono); letter-spacing: 0; font-weight: 400; }
#serial-log { flex: 1; overflow-y: auto; padding: 6px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.55; }
.ser-line { white-space: pre; color: #9fb0c4; }
.ser-line.dim { color: var(--text-dim); }
.ser-line.ok { color: var(--green); }
.ser-line.bad { color: var(--red); }
.ser-line.accent { color: var(--accent); }

/* ── CodeMirror sizing ── */
#editor-container { position: relative; }
.CodeMirror { height: 100% !important; font-size: 12px; font-family: var(--mono); }

/* ── sim HUD overlay ── */
#sim-hud {
  position: absolute; top: 10px; right: 12px; z-index: 8;
  background: var(--overlay-strong);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 13px;
  width: 324px;
  box-shadow: var(--shadow), var(--edge-hi);
  backdrop-filter: var(--glass-blur);
}
.sim-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#tilt-readout { font-size: 16px; color: var(--text); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
#sim-state { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px; }
.sim-ok { color: var(--green); background: var(--ok-bg); }
.sim-warn { color: var(--yellow); background: var(--warn-bg); }
.sim-bad { color: var(--red); background: var(--bad-bg); }
#sparkline { width: 100%; height: 70px; background: #0b0e13; border: 1px solid var(--border); border-radius: var(--r-sm); display: block; }
.sim-buttons { display: flex; gap: 6px; margin-top: 10px; }
.sim-buttons button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px; background: var(--panel-3); border: 1px solid var(--border);
  color: var(--text); font-family: var(--ui); font-size: 11px; border-radius: var(--r); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sim-buttons button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.sim-gains { margin-top: 8px; font-size: 11px; color: var(--text-dim); text-align: center; font-family: var(--mono); }
.sim-drive { margin-top: 4px; font-size: 10.5px; color: var(--accent); text-align: center; letter-spacing: 0.03em; }

/* ── mission HUD (top-left in sim) ── */
#mission-hud {
  position: absolute; bottom: 52px; left: 12px; z-index: 8; width: 250px;
  background: var(--overlay-strong); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; backdrop-filter: blur(6px);
}
.m-top { display: flex; justify-content: space-between; align-items: center; }
.m-title { font-weight: 600; font-size: 13px; color: var(--text); }
.m-medal { font-size: 15px; }
.m-brief { color: var(--text-dim); font-size: 11px; line-height: 1.45; margin: 5px 0 9px; }
.m-bar { height: 6px; background: #0b0e13; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.m-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width 0.2s; }
.m-status { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 7px; min-height: 15px; }
.m-status.ok { color: var(--green); }
.m-status.bad { color: var(--red); }
.m-btns { display: flex; gap: 6px; margin-top: 10px; }
.m-btns button {
  padding: 7px 8px; background: var(--panel-3); border: 1px solid var(--border);
  color: var(--text); font-family: var(--ui); font-size: 11px; border-radius: var(--r); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.m-btns button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
#m-start { flex: 1; font-weight: 600; }
#m-start.running { border-color: var(--red); color: var(--red); }
#m-start.running:hover { background: rgba(255,107,107,0.12); }

/* ── mobile: stack vertically ── */
/* ── tablet / small-screen reflow (≤1024px incl. landscape iPad) ─── */
@media (max-width: 1024px) {
  body:not(.is-phone) #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 60vh auto;
    height: auto;
  }
  body:not(.is-phone) { overflow-y: auto; }
  body:not(.is-phone) #workspace { height: 60vh; min-height: 340px; }
  /* the Guide rail is an overlay drawer here (default-collapsed via guide.js),
     so it never permanently occludes the 3D drag/wire area */
  #guide { max-width: min(340px, 88vw); background: var(--panel); }
  /* narrow the sim HUD so it doesn't dominate the smaller scene */
  #sim-hud { width: min(300px, 62vw); }
}
/* scrim behind the expanded Guide rail on tablets (tap to collapse) */
#guide-scrim { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.5); }
#guide-scrim.hidden { display: none; }

/* ── minimizable panels (tray + firmware) — collapse to their header so you
   can hand the whole screen to the robot, esp. on phones ── */
.panel-min {
  margin-left: auto; width: 24px; height: 22px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1;
}
.panel-min:hover { border-color: var(--accent); color: var(--accent); }
#left-panel.min > *:not(:first-child),
#right-panel.min > *:not(:first-child) { display: none; }
#left-panel.min, #right-panel.min { max-height: none; min-height: 0; flex: 0 0 auto; }
.min > .panel-header .panel-min { transform: rotate(180deg); }

/* ── phone reflow (≤600px): the no-JS fallback.
   js/app/mobile.js normally takes over below 820px (body.is-phone) and hands the
   bench the whole screen; this stacked layout is what's left if that never runs. */
@media (max-width: 600px) {
  body:not(.is-phone) { overflow: hidden; }
  body:not(.is-phone) #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(120px, 1fr) auto;
    height: calc(100dvh - 46px);
  }
  body:not(.is-phone) #workspace { height: auto; min-height: 120px; }
  body:not(.is-phone) #left-panel, body:not(.is-phone) #right-panel { max-height: 40vh; overflow-y: auto; }
  body:not(.is-phone) #sim-hud { width: min(240px, 80vw); font-size: 11px; top: 8px; right: 8px; }
  #mission-hud { display: none; }
  #guide { max-width: 92vw; }
  #workspace-hud { max-width: calc(100% - 24px); font-size: 10.5px; }
}

/* ── fatal fallback (WebGL unavailable / boot crash) + noscript ─ */
#fatal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
#fatal.hidden { display: none; }
.fatal-card {
  max-width: 460px; text-align: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow-lg);
}
.fatal-mark { color: var(--accent); font-size: 40px; text-shadow: 0 0 18px var(--accent-glow); margin-bottom: 12px; }
.fatal-card h1 { font-family: var(--display); font-size: 20px; color: var(--text); margin-bottom: 12px; }
.fatal-card p { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin-bottom: 12px; }
.fatal-card .fatal-tips { font-size: 12px; }
#fatal-reload {
  margin-top: 8px; padding: 9px 20px; cursor: pointer;
  background: var(--btn-accent-grad); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r); font-family: var(--ui); font-weight: 600;
}
#fatal-reload:hover { background: var(--btn-accent-grad-hover); }
.fatal-noscript {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 40px; text-align: center; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 15px;
}

/* ── account chip + magic-link auth ────────────────────────── */
.tb-account {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-3); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-pill); padding: 5px 12px; font-family: var(--ui); font-size: 12px; cursor: pointer;
}
.tb-account:hover { border-color: var(--accent); color: var(--accent); }
.tb-account .acc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.tb-account .acc-dot.pro { background: var(--green); box-shadow: 0 0 6px var(--green); }
.tb-account .acc-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-popover {
  position: absolute; top: 44px; right: 12px; z-index: 260; width: 220px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px;
}
.acc-popover .acc-email { font-size: 12.5px; color: var(--text); word-break: break-all; margin-bottom: 4px; }
.acc-popover .acc-plan { font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.acc-popover .acc-plan b { color: var(--accent); }
.acc-popover .acc-signout {
  width: 100%; padding: 7px; background: var(--panel-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; font-family: var(--ui); font-size: 12px;
}
.acc-popover .acc-classroom {
  width: 100%; padding: 7px; margin-bottom: 8px; background: var(--panel-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; font-family: var(--ui); font-size: 12px;
}
.acc-popover .acc-classroom:hover { border-color: var(--accent); color: var(--accent); }
.acc-popover .acc-signout:hover { border-color: var(--red); color: var(--red); }

/* ── classroom / teacher dashboard ─────────────────────────── */
#classroom-panel {
  position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--overlay-strong); backdrop-filter: blur(6px);
}
#classroom-panel.hidden { display: none; }
.cr-card {
  width: 100%; max-width: 620px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.cr-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cr-head h2 { font-family: var(--display); font-size: 17px; color: var(--text); }
.cr-close { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.cr-close:hover { color: var(--text); }
.cr-body { padding: 18px 20px; overflow-y: auto; }
.cr-sec { margin-bottom: 22px; }
.cr-sec-head, .cr-roster-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cr-sec-head h3, .cr-roster-head h3 { font-size: 13px; color: var(--text); letter-spacing: 0.04em; }
.cr-btn {
  background: var(--btn-accent-grad); color: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--r-pill); padding: 5px 12px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.cr-btn:hover { background: var(--btn-accent-grad-hover); }
.cr-class {
  display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 13px;
  margin-bottom: 7px; cursor: pointer; color: var(--text); font-family: var(--ui);
}
.cr-class:not(.static):hover { border-color: var(--accent); }
.cr-class.static { cursor: default; }
.cr-class-name { font-size: 13px; font-weight: 500; }
.cr-code { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.cr-code b { color: var(--accent); letter-spacing: 0.06em; }
.cr-empty { color: var(--text-dim); font-size: 12px; padding: 4px 0; }
.cr-back { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; margin-bottom: 10px; padding: 0; }
.cr-back:hover { color: var(--accent); }
.cr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cr-table th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cr-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.cr-table td:nth-child(3) { color: var(--yellow); }

#auth-modal {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--overlay-strong); backdrop-filter: blur(6px);
}
#auth-modal.hidden { display: none; }
.auth-card {
  position: relative; max-width: 380px; width: 100%;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 28px 26px; text-align: center;
}
.auth-card .auth-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.auth-card .auth-close:hover { color: var(--text); }
.auth-mark { color: var(--accent); font-size: 30px; text-shadow: 0 0 16px var(--accent-glow); margin-bottom: 8px; }
.auth-card h2 { font-family: var(--display); font-size: 18px; color: var(--text); margin-bottom: 8px; }
.auth-card p { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin-bottom: 16px; }
.auth-label { display: block; text-align: left; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
#auth-email {
  width: 100%; padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); color: var(--text);
  font-family: var(--ui); font-size: 13px;
}
#auth-email:focus { border-color: var(--accent); outline: none; }
.auth-submit {
  width: 100%; padding: 11px; cursor: pointer; font-family: var(--ui); font-weight: 600; font-size: 13px;
  background: var(--btn-accent-grad); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r);
}
.auth-submit:hover { background: var(--btn-accent-grad-hover); }
.auth-msg { margin-top: 12px; font-size: 12px; color: var(--green); min-height: 16px; }
.auth-msg.err { color: var(--red); }

/* ── resume prompt (save/load) ─────────────────────────────── */
#resume-bar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 150; display: flex; align-items: center; gap: 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-size: 13px;
  box-shadow: var(--shadow);
}
#resume-bar button {
  background: var(--panel-3); color: inherit; border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 12.5px;
}
#resume-bar button:hover { background: var(--panel-2); border-color: var(--border-2); }
#resume-bar #resume-yes { background: var(--accent); border-color: var(--accent); color: #1b1303; font-weight: 600; }

/* ── guided tour (spotlight + coach card) ──────────────────── */
#tut-ring {
  position: fixed; z-index: 240; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 10px;
  box-shadow: 0 0 0 6px var(--accent-glow), 0 0 24px var(--accent-glow);
  transition: all 0.3s ease;
}
#tut-card {
  position: fixed; z-index: 241; width: 300px;
  background: var(--overlay-strong); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: var(--shadow); backdrop-filter: blur(8px);
  transition: left 0.3s ease, top 0.3s ease;
}
#tut-card .tut-progress { font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.12em; margin-bottom: 4px; }
#tut-card .tut-title { font-weight: 600; font-size: var(--fs-md); color: var(--text); margin-bottom: 6px; }
#tut-card .tut-text { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.55; }
#tut-card .tut-text b, #tut-card .tut-text code { color: var(--text); }
#tut-card .tut-btns { margin-top: 10px; display: flex; justify-content: flex-end; }
#tut-card button {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: var(--fs-sm); border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer;
}
#tut-card button:hover { border-color: var(--accent); color: var(--accent); }
#overlay .tour {
  width: 100%; margin-top: 8px; padding: 9px; background: transparent;
  border: 1px solid var(--border-2); color: var(--accent);
  font-family: var(--ui); font-size: 12px; border-radius: var(--r); cursor: pointer;
}
#overlay .tour:hover { border-color: var(--accent); }

/* ── lesson browser (rendered inline in the Guide rail) ────── */
.learn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.learn-head h2 { font-size: var(--fs-lg); color: var(--text); }
.learn-head button { background: none; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.learn-head button:hover { color: var(--accent); }
.learn-track { margin-bottom: var(--sp-3); }
.lt-name { font-weight: 600; color: var(--accent); font-size: var(--fs-md); }

/* progression spine (lesson browser) */
.learn-progress { margin-bottom: var(--sp-3); }
.lp-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 5px; }
.lp-stars { color: var(--yellow); font-weight: 600; }
.lp-bar { height: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.lp-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width var(--t-med); }
.lt-head { display: flex; justify-content: space-between; align-items: baseline; }
.lt-count { font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--mono); }
.ltl-new {
  margin-left: 7px; font-family: var(--ui); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-dim);
  padding: 1px 5px; border-radius: var(--r-pill); vertical-align: middle;
}
.lt-blurb { color: var(--text-dim); font-size: var(--fs-sm); margin: 2px 0 8px; line-height: 1.45; }
.lt-lessons { display: flex; flex-direction: column; gap: var(--sp-2); }
.lt-lesson {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px 11px; color: var(--text); font-family: var(--ui); font-size: var(--fs-sm);
  cursor: pointer; text-align: left; transition: border-color var(--t-fast);
}
.lt-lesson:hover:not(.locked) { border-color: var(--accent); }
.lt-lesson.locked { opacity: 0.45; cursor: default; }
.ltl-stars { color: var(--yellow); font-size: var(--fs-xs); flex-shrink: 0; }

/* Pro (entitlement) lessons — aspirational, NOT the greyed prereq-lock look */
.lt-lesson.pro { border-left: 2px solid var(--accent); opacity: 1; cursor: pointer; }
.lt-lesson.pro:hover { border-color: var(--accent); }
.ltl-sub { display: block; font-family: var(--ui); font-size: 9.5px; color: var(--text-dim); margin-top: 2px; }
.ltl-pro {
  font-family: var(--ui); font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent);
  padding: 1px 6px; border-radius: var(--r-pill);
}
/* upgrade panel (inline rail view) */
.l-pro-track { color: var(--accent) !important; }
.up-compare { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.up-row { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.45; }
.up-tag {
  flex-shrink: 0; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: var(--r-pill); margin-top: 1px;
}
.up-tag.up-free { color: var(--text-dim); background: var(--panel-3); border: 1px solid var(--border); }
.up-tag.up-pro { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); }
.up-cta { background: var(--btn-accent-grad) !important; color: var(--accent) !important; border-color: var(--accent) !important; font-weight: 600; }

/* ── active lesson card (rendered inline in the Guide rail) ─── */
#g-lesson .l-top { display: flex; justify-content: space-between; align-items: center; }
#g-lesson .l-track { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--accent); font-weight: 700; }
#g-lesson .l-quit { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
#g-lesson .l-quit:hover { color: var(--red); }
#g-lesson .l-title { font-weight: 600; font-size: var(--fs-lg); color: var(--text); margin: 4px 0 6px; }
#g-lesson .l-brief { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: 10px; }
#g-lesson .l-learned { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--green); font-weight: 700; margin: 8px 0 3px; }
#g-lesson .l-unlock {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: var(--fs-sm); color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-dim);
  border-radius: var(--r-sm); padding: 6px 9px;
}
#g-lesson .l-unlock b { color: var(--text); }
#g-lesson .l-obj { display: flex; gap: 7px; font-size: var(--fs-sm); color: var(--text-dim); padding: 2px 0; }
#g-lesson .l-obj.done { color: var(--green); }
#g-lesson .l-obj.current { color: var(--text); font-weight: 500; }
#g-lesson .l-bar { height: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; margin-top: 10px; }
#g-lesson .l-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width 0.2s; }
#g-lesson .l-stars { font-size: 22px; color: var(--yellow); margin: 6px 0; letter-spacing: 4px; }
#g-lesson .l-btns { display: flex; gap: 8px; margin-top: 10px; }
#g-lesson .l-btns button {
  flex: 1; padding: 8px; background: var(--panel-3); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); cursor: pointer; font-family: var(--ui); font-size: var(--fs-sm);
}
#g-lesson .l-btns button:hover { border-color: var(--accent); color: var(--accent); }

/* sparkline legend (PID visualizer) */
.spark-legend { display: flex; gap: 10px; margin-top: 4px; font-size: 9.5px; letter-spacing: 0.05em; }
.spark-legend .lg-tilt { color: var(--trace-tilt); }
.spark-legend .lg-p { color: var(--trace-p); }
.spark-legend .lg-i { color: var(--trace-i); }
.spark-legend .lg-d { color: var(--trace-d); }

/* ── touch driving controls (coarse pointers, sim mode) ────── */
#touch-controls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#tc-stick {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 24px;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--overlay); border: 1px solid var(--border-2);
  pointer-events: auto; touch-action: none; backdrop-filter: blur(4px);
}
#tc-knob {
  position: absolute; left: 50%; top: 50%; margin: -26px 0 0 -26px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-dim); border: 2px solid var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transition: transform 0.05s linear;
}
#tc-jump {
  position: absolute; bottom: max(44px, env(safe-area-inset-bottom)); right: 24px;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--overlay-strong); border: 2px solid var(--green); color: var(--green);
  font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
  pointer-events: auto; touch-action: none; cursor: pointer; backdrop-filter: blur(4px);
}
#tc-jump:active { background: var(--ok-bg); }

/* ── motion: entrances + success beats (Lab Instrument) ─────────
   All of this is auto-disabled by the prefers-reduced-motion guard
   in tokens.css. Kept to DOM chrome — the 3D scene owns its own motion. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop-in  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ready-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(70,224,143,0); }
  40% { transform: scale(1.025); box-shadow: 0 0 24px rgba(70,224,143,0.35); }
  100% { transform: scale(1); box-shadow: 0 6px 20px rgba(70,224,143,0.12); }
}
@keyframes slide-down { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* title screen: backdrop fades, card rises, beats stagger in */
#overlay:not(.hidden) { animation: fade-in var(--t-med) ease; }
#overlay .card { animation: rise-in var(--t-slow) var(--ease-out) both; }
#overlay .ov-beat { animation: pop-in var(--t-med) var(--ease-spring) both; }
#overlay .ov-beat:nth-child(1) { animation-delay: 0.06s; }
#overlay .ov-beat:nth-child(2) { animation-delay: 0.13s; }
#overlay .ov-beat:nth-child(3) { animation-delay: 0.20s; }

/* Upload becomes armed → one-shot pop (fires when :disabled is removed) */
#upload-btn:not(:disabled) { animation: ready-pop var(--t-slow) var(--ease-spring); }

/* sim overlays glide in when Upload swaps to drive mode */
#sim-hud { animation: rise-in var(--t-med) var(--ease-out); }
#mission-hud { animation: rise-in var(--t-med) var(--ease-out); }

/* resume prompt drops in from the top */
#resume-bar { animation: slide-down var(--t-slow) var(--ease-out) both; }

/* tooltip: quick fade so it doesn't pop harshly */
#tooltip:not(.hidden) { animation: fade-in var(--t-fast) ease; }

/* part cards press in when grabbed */
.part-card:active { transform: scale(0.98); }

/* ── robot chip as a button + picker popover ── */
.tb-robot { background: transparent; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.tb-robot:hover { border-color: var(--accent); color: var(--text); }
.tb-caret { color: var(--text-dim); font-size: 9px; margin-left: 2px; }
#robot-picker {
  position: fixed; z-index: 320; width: 300px;
  background: var(--overlay-strong); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(9px);
  padding: 8px; animation: pop-in var(--t-fast) var(--ease-out);
}
#robot-picker .rp-head { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-dim); padding: 4px 8px 8px; }
.rp-card {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 12px; cursor: pointer; font-family: var(--ui);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.rp-card:last-child { margin-bottom: 0; }
.rp-card:hover:not([disabled]) { border-color: var(--accent); }
.rp-card.active { border-color: var(--accent); background: var(--accent-soft); }
.rp-card.soon { opacity: 0.55; cursor: default; }
.rp-top { display: flex; justify-content: space-between; align-items: center; }
.rp-name { font-weight: 600; color: var(--text); font-size: 13px; }
.rp-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--border-2); color: var(--text-dim); }
.rp-card.active .rp-tag { color: var(--accent); border-color: var(--accent); }
.rp-blurb { color: var(--text-dim); font-size: 11px; line-height: 1.4; margin-top: 4px; }

/* ── in-sim live PID sliders ── */
.sim-pid { margin-top: 10px; padding: 9px 10px; background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--r); }
.sim-pid .pid-head { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 7px; }
.pid-row { display: grid; grid-template-columns: 22px 1fr 40px; align-items: center; gap: 8px; margin-bottom: 5px; }
.pid-row:last-child { margin-bottom: 0; }
.pid-k { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
.pid-v { font-family: var(--mono); font-size: 11px; color: var(--text); text-align: right; }
.pid-row input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--r-pill);
  background: var(--border-2); outline: none; cursor: pointer;
}
.pid-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: pointer;
}
.pid-row input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: pointer;
}

/* ── light-mode overrides for the code editor + serial monitor ──
   CodeMirror ships the fixed-dark material-darker theme and the serial log
   hardcodes a near-black bg; both need explicit light reskins. Selector
   specificity (:root[data-theme] + class) beats the theme's two-class rules. */
:root[data-theme="light"] .CodeMirror { background: #fbfcfe; color: #1c2430; }
:root[data-theme="light"] .CodeMirror-gutters { background: #eef1f6; border-right: 1px solid var(--border); }
:root[data-theme="light"] .CodeMirror-linenumber { color: #9aa4b2; }
:root[data-theme="light"] .CodeMirror-cursor { border-left: 1px solid #1c2430; }
:root[data-theme="light"] .CodeMirror-selected { background: #d5e2f5 !important; }
:root[data-theme="light"] .CodeMirror-activeline-background { background: #eef2f8; }
:root[data-theme="light"] .cm-comment { color: #6a737d; }
:root[data-theme="light"] .cm-keyword, :root[data-theme="light"] .cm-atom { color: #cf222e; }
:root[data-theme="light"] .cm-number { color: #0550ae; }
:root[data-theme="light"] .cm-def, :root[data-theme="light"] .cm-variable, :root[data-theme="light"] .cm-variable-2 { color: #1c2430; }
:root[data-theme="light"] .cm-string { color: #0a7d32; }
:root[data-theme="light"] .cm-type, :root[data-theme="light"] .cm-builtin, :root[data-theme="light"] .cm-tag { color: #8250df; }
:root[data-theme="light"] .cm-operator, :root[data-theme="light"] .cm-punctuation { color: #57606a; }

:root[data-theme="light"] #serial { background: #f4f6fa; }
:root[data-theme="light"] #serial-log { color: #3a4658; }
:root[data-theme="light"] .ser-line { color: #3a4658; }
:root[data-theme="light"] #sparkline { background: #eef2f8; }

/* ── custom scrollbars (scientific-instrument thin rails) ──────
   Applied to the scrolling panels so the chrome reads as one system. */
#parts-tray, #inspector, #checklist, #hephaestus-log, #serial-log,
.g-body, .cr-body, #editor-container .CodeMirror-vscrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
#parts-tray::-webkit-scrollbar, #inspector::-webkit-scrollbar,
#checklist::-webkit-scrollbar, #hephaestus-log::-webkit-scrollbar,
#serial-log::-webkit-scrollbar, .g-body::-webkit-scrollbar,
.cr-body::-webkit-scrollbar { width: 10px; height: 10px; }
#parts-tray::-webkit-scrollbar-thumb, #inspector::-webkit-scrollbar-thumb,
#checklist::-webkit-scrollbar-thumb, #hephaestus-log::-webkit-scrollbar-thumb,
#serial-log::-webkit-scrollbar-thumb, .g-body::-webkit-scrollbar-thumb,
.cr-body::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
  transition: background var(--t-fast);
}
#parts-tray::-webkit-scrollbar-thumb:hover, #inspector::-webkit-scrollbar-thumb:hover,
#checklist::-webkit-scrollbar-thumb:hover, #hephaestus-log::-webkit-scrollbar-thumb:hover,
#serial-log::-webkit-scrollbar-thumb:hover, .g-body::-webkit-scrollbar-thumb:hover,
.cr-body::-webkit-scrollbar-thumb:hover { background: var(--gray-8); background-clip: content-box; }
#parts-tray::-webkit-scrollbar-track, #inspector::-webkit-scrollbar-track,
#checklist::-webkit-scrollbar-track, #hephaestus-log::-webkit-scrollbar-track,
#serial-log::-webkit-scrollbar-track, .g-body::-webkit-scrollbar-track,
.cr-body::-webkit-scrollbar-track { background: transparent; }

/* ── panel-header: sticky lit rail so section titles stay anchored ── */
.panel-header { position: relative; z-index: 1; }
.panel-header .dot { flex-shrink: 0; }

/* ── overlay / modal CTA lift (buy-once polish) ── */
#overlay .start:hover, .auth-submit:hover, #resume-bar #resume-yes:hover {
  transform: translateY(-1px);
}
#resume-bar #resume-yes { transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }

/* ============================================================
   Integration pass — styles for classes/hooks introduced by the
   parallel inspector / tray-search / touch / coach+hephaestus work.
   ============================================================ */

/* -- Inspector: new component-card + violation hierarchy -- */
.insp-empty { color: var(--text-faint); font-size: var(--fs-sm); padding: var(--sp-3); text-align: center; }
.insp-comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.insp-readings { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.insp-unit { color: var(--text-dim); font-size: 0.85em; margin-left: 2px; }
.insp-idle { color: var(--text-faint); }
.insp-amps.is-live { color: var(--accent); }
.insp-pbool { display: inline-flex; align-items: center; gap: 6px; }
.insp-plabel { color: var(--text-dim); font-size: var(--fs-xs); }
.insp-ok-mark { color: var(--success); font-weight: 700; }
.insp-issues { display: flex; flex-direction: column; gap: var(--sp-2); }
.insp-h-alert { color: var(--warn); }
.insp-viol-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.insp-viol-tag { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; color: var(--warn); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 0 5px; }
.insp-viol-msg { color: var(--text); font-size: var(--fs-sm); }
.insp-viol-hint { color: var(--text-dim); font-size: var(--fs-xs); font-style: italic; margin-top: 1px; }

/* -- Parts tray: search + category filters -- */
.tray-controls { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); position: sticky; top: 0; z-index: var(--z-panel); background: var(--panel-2); }
.tray-search { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-3); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.tray-search:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.tray-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.tray-chip { border: 1px solid var(--border); background: var(--panel-3); color: var(--text-dim); font-size: var(--fs-xs); padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.tray-chip:hover { color: var(--text); }
.tray-chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tray-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tray-empty { color: var(--text-faint); font-size: var(--fs-sm); text-align: center; padding: var(--sp-3); }

/* -- Coach: hints, ask-Hephaestus nudge, celebration -- */
.coach-body { display: flex; flex-direction: column; gap: 4px; }
.coach-hint { color: var(--text-dim); font-size: var(--fs-xs); font-style: italic; }
.coach-nudge { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); }
.coach-ask { color: var(--accent); background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; }
.coach-done { color: var(--success); font-weight: 600; text-align: center; padding: var(--sp-2); }

/* -- Hephaestus: thinking indicator + example-prompt chips -- */
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hp-chip { border: 1px solid var(--border); background: var(--panel-3); color: var(--text-dim); font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.hp-chip:hover { color: var(--accent); border-color: var(--accent); }
.hp-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hp-thinking { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.hp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .5; animation: hpblink 1.2s infinite ease-in-out; }
.hp-dot:nth-child(2) { animation-delay: .2s; }
.hp-dot:nth-child(3) { animation-delay: .4s; }
@keyframes hpblink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* -- iOS: page-level overscroll lock + touch-control safe-area insets -- */
html, body { overscroll-behavior: none; }
#touch-controls { padding-bottom: var(--tc-safe-bottom, 0); padding-left: var(--tc-safe-left, 0); padding-right: var(--tc-safe-right, 0); }

@media (prefers-reduced-motion: reduce) {
  .hp-dot { animation: none; }
}

/* ── example-circuit gallery ── */
#examples-btn {
  position: absolute; top: 14px; right: 14px; z-index: 7;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--overlay-strong); border: 1px solid var(--border-2); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  box-shadow: var(--shadow-1), var(--edge-hi); backdrop-filter: var(--glass-blur);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
#examples-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
#examples-btn span:first-child { color: var(--accent); }

/* room-mode swap (modeled ⇄ scan): sits just below the Examples button */
#room-toggle {
  position: absolute; top: 54px; right: 14px; z-index: 7;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--overlay-strong); border: 1px solid var(--border-2); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  box-shadow: var(--shadow-1), var(--edge-hi); backdrop-filter: var(--glass-blur);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
#room-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
#room-toggle span:first-child { color: var(--accent); }
@media (max-width: 900px) { #room-toggle span:last-child { display: none; } #room-toggle { padding: 8px; } }

#examples-panel {
  position: absolute; top: 54px; right: 14px; z-index: 30;
  width: min(340px, 88vw); max-height: min(70vh, 560px); display: flex; flex-direction: column;
  background: var(--overlay-strong); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, var(--shadow)), var(--edge-hi); backdrop-filter: var(--glass-blur);
  animation: slide-down var(--t-slow) var(--ease-out) both;
}
#examples-panel.hidden { display: none; }
.ex-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ex-head b { color: var(--text); font-family: var(--heading, inherit); letter-spacing: .01em; }
.ex-close { background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.ex-close:hover { color: var(--text); background: var(--panel-2); }
.ex-body { overflow-y: auto; padding: 8px; min-height: 0; }
.ex-group { margin-bottom: 10px; }
.ex-tier { color: var(--text-faint); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; padding: 4px 6px 6px; }
.ex-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 11px; margin-bottom: 4px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.ex-item:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.ex-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ex-title { color: var(--text); font-weight: 600; font-size: 13px; }
.ex-blurb { color: var(--text-dim); font-size: 11px; line-height: 1.4; }

@media (max-width: 1024px) {
  #examples-btn span:last-child { display: none; }   /* icon-only on tablets */
  #examples-btn { padding: 8px; }
}

/* ══ PHONE SHELL (≤820px, body.is-phone — see js/app/mobile.js) ═══════════════
   The desktop cockpit is tray | bench | run panel. Stacked into three rows on a
   phone that left the bench — the actual product — as a ~130px letterbox with
   every floating overlay piled into it. So below 820px the bench goes
   full-bleed, the panels become one bottom sheet (Parts / Circuit / Hephaestus, one
   at a time), and RUN moves into a fixed bottom bar. mobile.js moves the nodes;
   everything here is layout only, and all of it is scoped to .is-phone so a
   viewport that grows back to desktop width reverts cleanly. */
#mobile-bar { display: none; }

@media (max-width: 820px) {
  body.is-phone {
    --m-bar-h: 58px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);
    --m-sheet-h: min(56dvh, 460px);
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* iOS < 15.4 has no dvh: 100vh there is the *large* viewport, so the bottom of
     the page (i.e. RUN) hides under Safari's toolbar. mobile.js publishes the
     real visualViewport height as --app-h for exactly that case. */
  @supports not (height: 100dvh) {
    body.is-phone { height: var(--app-h, 100vh); }
    body.is-phone { --m-sheet-h: min(56vh, 460px); }
  }

  /* ── top bar: compact, notch-safe, and the canvas' round buttons live here ── */
  body.is-phone #topbar {
    height: calc(46px + var(--m-safe-t));
    padding: var(--m-safe-t) 8px 0;
    gap: 6px;
    white-space: nowrap;
  }
  /* Mark only: the wordmark, the build chip, four icon buttons and the account
     chip do not fit across 390px, and of those the wordmark is the one the user
     already knows. It stays in the accessibility tree. */
  body.is-phone .tb-name {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.is-phone .tb-sub { display: none; }          /* "Robotics Creator" */
  body.is-phone .tb-brand { gap: 0; }
  body.is-phone .tb-robot { padding: 4px 9px; font-size: 11px; max-width: 30vw; overflow: hidden; }
  body.is-phone #tb-robot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-phone .tb-actions { gap: 4px; }
  body.is-phone .tb-actions #help-btn,
  body.is-phone .tb-actions #sound-btn,
  body.is-phone .tb-actions #share-btn {
    position: static; width: 34px; height: 34px; border-radius: var(--r-sm);
    background: transparent; backdrop-filter: none; flex-shrink: 0;
  }
  body.is-phone .tb-account { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }
  body.is-phone .tb-account .acc-name { max-width: 72px; }

  /* ── the bench owns the screen ── */
  body.is-phone #app { display: block; position: relative; gap: 0; overflow: hidden; }
  body.is-phone #workspace { position: absolute; inset: 0; height: auto; min-height: 0; }
  body.is-phone #right-panel { display: none; }     /* its RUN button moved to the bar */
  body.is-phone .panel-min { display: none; }       /* minimize is meaningless in a sheet */

  /* ── bottom sheet (parts / circuit) ── */
  body.is-phone #left-panel {
    position: fixed; left: 0; right: 0; z-index: 60;
    bottom: calc(var(--m-bar-h) + var(--m-safe-b));
    height: var(--m-sheet-h); max-height: var(--m-sheet-h);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel);
    border-top: 1px solid var(--border-2);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.5);
    transform: translateY(calc(100% + var(--m-bar-h) + var(--m-safe-b)));
    visibility: hidden;
    transition: transform var(--t-med, .24s) var(--ease-out), visibility 0s .24s;
  }
  body.is-phone.sheet-open[data-sheet="parts"] #left-panel,
  body.is-phone.sheet-open[data-sheet="circuit"] #left-panel {
    transform: none; visibility: visible;
    transition: transform var(--t-med, .24s) var(--ease-out), visibility 0s 0s;
  }
  /* one group at a time; each scrolls on its own */
  body.is-phone #left-panel .m-group { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 10px; }
  body.is-phone[data-sheet="parts"] #left-panel .m-group[data-mgroup="parts"],
  body.is-phone[data-sheet="circuit"] #left-panel .m-group[data-mgroup="circuit"] { display: block; }
  /* inside a sheet the sub-regions size to content — the desktop 3:1:3 flex
     split would fight the sheet's own scroll */
  body.is-phone #left-panel #parts-tray,
  body.is-phone #left-panel #checklist,
  body.is-phone #left-panel #inspector { flex: none; overflow: visible; }
  body.is-phone #left-panel .panel-header { position: sticky; top: 0; z-index: 2; background: var(--panel); }

  .m-handle {
    flex: 0 0 auto; width: 100%; height: 28px; position: relative;
    background: none; border: 0; padding: 0; cursor: pointer; touch-action: none;
  }
  .m-handle::before {
    content: ""; position: absolute; left: 50%; top: 11px; margin-left: -21px;
    width: 42px; height: 4px; border-radius: 999px; background: var(--border-2);
  }
  .m-handle:active::before { background: var(--accent); }

  /* ── the fixed bottom bar: sheet tabs + RUN ── */
  body.is-phone #mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: stretch; gap: 6px;
    padding: 6px 8px calc(6px + var(--m-safe-b));
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35);
  }
  body.is-phone #mobile-bar .m-tab {
    flex: 1 1 0; min-height: 46px; min-width: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 1px solid transparent; border-radius: var(--r);
    color: var(--text-dim); font-family: var(--ui); font-size: 10px; letter-spacing: .03em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.is-phone #mobile-bar .m-tab span { white-space: nowrap; }
  body.is-phone #mobile-bar .m-tab.is-open {
    color: var(--accent); background: var(--accent-soft); border-color: var(--accent-dim);
  }
  body.is-phone #mobile-bar #upload-btn {
    flex: 1.4 1 0; min-height: 46px; margin: 0; padding: 10px; width: auto; gap: 7px;
    font-size: 12.5px; animation: none;
  }
  body.is-phone.mode-sim #mobile-bar { display: none; }   /* RUN mode: sim card owns the edge */

  /* ── overlays above the bar ── */
  body.is-phone #workspace-hud {
    bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 10px);
    max-width: calc(100% - 16px); font-size: 11px;
  }
  body.is-phone #controls-legend {
    left: 8px; right: 8px; bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 44px);
    font-size: 10.5px; line-height: 1.55; text-align: center;
    transition: opacity var(--t-med) var(--ease-out);
  }
  body.is-phone #controls-legend.faded { opacity: 0; }
  body.is-phone #sim-hud {
    top: auto; left: 12px; right: 12px; width: auto;
    bottom: calc(12px + var(--m-safe-b));
  }
  body.is-phone #sim-hud .sim-buttons button { min-height: 44px; }
  /* The coach is a five-step checklist with a hint under each line — on a phone
     that card covered the entire bench. Keep the step list (progress is the
     point) but only the step you're on carries its hint. */
  body.is-phone #coach {
    top: calc(var(--m-safe-t) + 54px); left: 8px; right: 8px; transform: none;
    width: auto; padding: 11px 12px; font-size: 12.5px;
    max-height: 42dvh; overflow-y: auto;
    /* the desktop entrance animates translate(-50%) — with fill:both it pins the
       card half a screen to the left of a full-width sheet, so swap the tween */
    animation: fade-in var(--t-slow) var(--ease-out) both;
  }
  body.is-phone #coach-steps li:not(.current) .coach-hint { display: none; }
  body.is-phone #coach-steps li:not(.current) { font-size: 12px; padding: 2px 4px; }
  body.is-phone .coach-nudge { font-size: 11.5px; }
  body.is-phone #coach-chip { top: calc(var(--m-safe-t) + 54px); }
  body.is-phone #examples-btn, body.is-phone #room-toggle { top: 10px; right: 10px; min-height: 36px; }
  body.is-phone #room-toggle { top: 52px; }

  /* ── Hephaestus: a sheet like the others, driven by the bar's tab ── */
  body.is-phone #hephaestus {
    position: fixed; left: 8px; right: 8px; z-index: 60;
    bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 8px);
    align-items: stretch;
  }
  body.is-phone #hephaestus-toggle { display: none; }        /* the bar tab replaces the pill */
  body.is-phone #hephaestus-panel { width: auto; }
  body.is-phone #hephaestus-log { max-height: 38dvh; }
  body.is-phone #hephaestus-input { font-size: 16px; }       /* < 16px makes iOS zoom the page */
  body.is-phone #hephaestus-form button { width: 44px; min-height: 44px; }

  /* ── touch targets + touch-friendly tray ──
     .part-card needs touch-action:none or the sheet's own scroll swallows the
     drag that places a part — the single biggest "nothing works on my phone". */
  body.is-phone .part-card { padding: 13px 14px; touch-action: none; }
  body.is-phone .part-card .part-desc { font-size: 11.5px; }
  body.is-phone .part-card .help-icon { width: 26px; height: 26px; bottom: 6px; right: 8px; font-size: 12px; }
  body.is-phone .tray-search { font-size: 16px; min-height: 42px; }
  body.is-phone .tray-chip { min-height: 34px; padding: 6px 13px; }
  body.is-phone #clear-btn, body.is-phone .auto-btn { min-height: 44px; }
  body.is-phone .insp-pfield input[type=number] { min-height: 34px; width: 68px; font-size: 16px; }
  /* popovers and panels anchored to a desktop corner get phone-width instead */
  body.is-phone .acc-popover,
  body.is-phone #examples-panel {
    top: calc(var(--m-safe-t) + 52px); left: 8px; right: 8px; width: auto;
    max-height: min(62dvh, 460px);
  }
  body.is-phone #classroom-panel { padding: 10px; }
  body.is-phone .cr-card { max-height: 86dvh; }
  body.is-phone .cr-body { padding: 14px; }
  body.is-phone #coach-dismiss, body.is-phone #coach-min { min-width: 34px; min-height: 34px; }

  /* hover styling is meaningless on touch and leaves cards stuck "lifted" */
  @media (hover: none) {
    .part-card:hover { transform: none; box-shadow: var(--shadow-1), var(--edge-hi); }
  }

  /* ── onboarding card: the three beats stack instead of squeezing ── */
  #overlay .card { padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 92dvh; overflow-y: auto; }
  #overlay h1 { font-size: 25px; }
  #overlay .ov-beats { flex-direction: column; gap: 8px; margin-bottom: 18px; }
  #overlay .ov-beat { padding: 10px 12px; }
  #overlay .ov-beat b { display: inline; margin: 0 0 0 8px; }
  #overlay .ov-beat p { margin-top: 4px; }
  #overlay .start, #overlay .tour { min-height: 48px; }
}

/* ── phone in landscape ───────────────────────────────────────
   A phone on its side has ~340px of height, so a bottom sheet at 56dvh leaves
   almost no bench and the bar eats the rest. The sheet becomes a side drawer
   there instead, and the notch moves to the side, so the insets follow it. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body.is-phone {
    --m-bar-h: 50px;
    --m-safe-l: env(safe-area-inset-left, 0px);
    --m-safe-r: env(safe-area-inset-right, 0px);
  }
  body.is-phone #topbar { padding-left: max(8px, var(--m-safe-l)); padding-right: max(8px, var(--m-safe-r)); }
  body.is-phone #left-panel {
    top: calc(46px + var(--m-safe-t)); bottom: calc(var(--m-bar-h) + var(--m-safe-b));
    left: var(--m-safe-l); right: auto;
    width: min(330px, 62vw); height: auto; max-height: none;
    border-radius: 0 18px 18px 0;
    box-shadow: 14px 0 44px rgba(0, 0, 0, 0.5);
    transform: translateX(calc(-100% - var(--m-safe-l)));
  }
  body.is-phone.sheet-open[data-sheet="parts"] #left-panel,
  body.is-phone.sheet-open[data-sheet="circuit"] #left-panel { transform: none; }
  /* the handle reads as a grab bar on the drawer's inner edge */
  body.is-phone #left-panel .m-handle { height: 22px; }
  body.is-phone #left-panel .m-handle::before { width: 34px; top: 9px; }
  body.is-phone #mobile-bar { padding-left: max(8px, var(--m-safe-l)); padding-right: max(8px, var(--m-safe-r)); }
  body.is-phone #mobile-bar .m-tab { min-height: 40px; flex-direction: row; gap: 6px; }
  body.is-phone #mobile-bar #upload-btn { min-height: 40px; }
  body.is-phone #coach {
    top: calc(var(--m-safe-t) + 52px); left: auto; right: 10px; width: min(320px, 52vw);
    max-height: calc(100dvh - var(--m-bar-h) - var(--m-safe-t) - 70px); overflow-y: auto;
  }
  /* only the step you're on: five rows don't fit beside a landscape bench */
  body.is-phone #coach-steps li:not(.current) { display: none; }
  body.is-phone #hephaestus { left: auto; right: 10px; width: min(360px, 56vw); }
  body.is-phone #controls-legend { display: none; }   /* no room; the coach carries it */
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY WORKSPACE
   Flat, quiet application chrome. The bench and assistant are the product;
   everything else behaves like a compact tool palette.
   ═══════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body { font-size: 14px; letter-spacing: 0; }
#topbar {
  height: 48px; padding: 0 10px; gap: 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.tb-brand { min-width: 196px; gap: 8px; }
.tb-mark {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--accent-dim); box-shadow: none;
}
.tb-mark .lucide { width: 15px; height: 15px; stroke-width: 2; }
.tb-lockup { display: flex; flex-direction: row; align-items: baseline; gap: 8px; }
.tb-name { font-size: 14px; letter-spacing: -.01em; }
.tb-sub { color: var(--text-faint); font-size: 9px; letter-spacing: .11em; }
.tb-robot {
  order: 2; min-height: 28px; margin-left: 0; padding: 4px 9px;
  border-radius: var(--r-sm); background: transparent; font-size: 11px;
}
.tb-actions { order: 3; margin-left: auto; }
.tb-btn { width: 28px; height: 28px; border-radius: var(--r-sm); background: transparent; }

.panel-header {
  min-height: 48px; padding: 7px 9px; gap: 8px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.panel-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex-basis: 26px; border-radius: var(--r-sm);
  color: var(--text-dim); background: transparent; border: 1px solid var(--border);
}
.panel-icon.is-yellow, .panel-icon.is-green, .panel-icon.is-mint {
  color: var(--text-dim); background: transparent;
}
.panel-icon .lucide { width: 14px; height: 14px; }
.panel-heading { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.panel-kicker { color: var(--text-faint); font-size: 8px; letter-spacing: .12em; }
.panel-title { font: var(--fw-semibold) 13px/1.25 var(--ui); letter-spacing: 0; }
.panel-min { width: 24px; height: 24px; border-radius: var(--r-sm); background: transparent; }
.panel-intro { display: none; }

#workspace { border: 0; box-shadow: none; }
#workspace::after { box-shadow: inset 0 0 50px rgba(17, 19, 21, .16); }
#workspace-hud {
  bottom: 10px; max-width: calc(100% - 190px); padding: 6px 10px;
  border-radius: var(--r-sm); border-color: rgba(255,255,255,.18);
  background: rgba(17,19,21,.72); box-shadow: none; backdrop-filter: blur(6px);
  font-size: 11px; font-weight: var(--fw-medium);
}
#workspace-hud .lucide { width: 13px; color: currentColor; }

.tray-controls { padding: 7px; gap: 6px; background: var(--panel); border-bottom: 1px solid var(--border); }
.tray-search { min-height: 32px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--panel-3); font-size: 12px; }
.tray-filters { gap: 3px; }
.tray-chip { min-height: 24px; padding: 3px 7px; border-radius: var(--r-sm); font-size: 9.5px; }
.tray-chip.is-active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-dim); box-shadow: none; }
#parts-tray { padding: 0; gap: 0; }
.part-card {
  display: grid; align-items: center;
  grid-template-columns: 32px minmax(0, 1fr); gap: 8px; min-height: 50px;
  padding: 7px 27px 7px 8px; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent; box-shadow: none;
}
.part-card:hover { transform: none; border-color: var(--border); background: var(--panel-3); box-shadow: none; }
.part-visual {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--part-color) 10%, var(--panel-3));
  border-color: color-mix(in srgb, var(--part-color) 26%, var(--border));
}
.part-visual .lucide { width: 16px; height: 16px; stroke-width: 2; }
.part-copy { min-width: 0; }
.part-card .part-name { font-size: 12px; font-weight: var(--fw-semibold); }
.part-card .part-desc { margin-top: 1px; color: var(--text-faint); font-size: 9.5px; line-height: 1.25; }
.part-card .help-icon {
  right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: transparent; color: var(--text-faint); font-size: 9px;
}
.part-card.drag-ghost { width: 190px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--panel-2); box-shadow: var(--shadow-2); }
#clear-btn { margin: 6px; min-height: 30px; border-radius: var(--r-sm); font-size: 11px; }
#auto-bar { padding: 6px; gap: 4px; }
.auto-btn { min-height: 30px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--panel-3); color: var(--text); border: 1px solid var(--border); font-size: 11px; }
.auto-btn:hover { background: var(--panel-4); border-color: var(--border-2); }
#checklist { padding: 5px 9px 9px; }
.check-item { padding: 3px 0; gap: 6px; font-size: 10px; }
.check-item .box { font-size: 12px; }

/* Desktop assistant: persistent, full-height, and structurally part of the rail. */
#right-panel > .panel-header { flex: 0 0 auto; }
#right-panel #hephaestus {
  position: static; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 210px;
  display: flex; align-items: stretch; gap: 0; border: 0; overflow: hidden;
}
#right-panel #hephaestus-toggle { display: none; }
#right-panel #hephaestus.collapsed #hephaestus-panel { display: flex; }
#right-panel #hephaestus-panel {
  width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column;
  border: 0; border-radius: 0; background: var(--panel); box-shadow: none;
}
.hp-head { display: flex; align-items: center; min-height: 42px; padding: 7px 9px; gap: 8px; border-bottom: 1px solid var(--border); background: var(--panel-3); }
.hp-head > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.hp-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-dim); }
#right-panel .hp-head { flex: 0 0 auto; }
#right-panel .hp-head b { font-size: 11px; }
#right-panel .hp-head small { font-size: 9.5px; }
#right-panel #hephaestus-log { flex: 1 1 auto; min-height: 0; max-height: none; padding: 10px; gap: 7px; }
.hp-msg { max-width: 88%; padding: 7px 9px; border-radius: var(--r); font-size: 12px; line-height: 1.4; }
#right-panel #hephaestus-form { flex: 0 0 auto; padding: 8px; gap: 6px; background: var(--panel-2); }
#right-panel #hephaestus-input { min-height: 34px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 12px; }
#right-panel #hephaestus-form button { width: 34px; min-height: 34px; border-radius: var(--r-sm); background: var(--accent); }

#run-tools {
  display: grid; grid-template-columns: minmax(0, 1fr) 74px; align-items: center; gap: 8px;
  flex: 0 0 auto; padding: 7px 8px; border-top: 1px solid var(--border); background: var(--panel-2);
}
#run-hint { display: flex; margin: 0; padding: 0; gap: 1px; border: 0; border-radius: 0; background: transparent; font-size: 9.5px; line-height: 1.25; }
#run-hint b { font-size: 11px; }
#upload-btn {
  min-height: 34px; width: 74px; margin: 0; padding: 5px 8px; gap: 6px;
  border-radius: var(--r-sm); box-shadow: none; font-size: 10px; letter-spacing: .05em;
}
#upload-btn .run-icon { width: auto; height: auto; border-radius: 0; background: transparent; }
#upload-btn .run-icon .lucide { width: 13px; height: 13px; }

#inspector-block { flex: 0 0 30%; min-height: 170px; max-height: 285px; border-top: 1px solid var(--border); }
#inspector-block .panel-header { min-height: 40px; padding-block: 5px; }
#inspector { padding: 6px 8px 10px; font-size: 11px; }
.insp-sect { margin-bottom: 9px; }
.insp-h { margin: 2px 0 5px; padding-bottom: 4px; font-size: 8.5px; }
.insp-count { min-width: 18px; padding: 1px 5px; border-radius: var(--r-sm); }
.insp-comp { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; margin: 0 0 3px; padding: 6px; border-radius: var(--r-sm); background: var(--panel-3); }
.insp-id { font-size: 10px; }
.insp-type { font-size: 9px; }
.insp-params { padding-top: 4px; }
.insp-pfield input[type=number] { min-height: 24px; border-radius: var(--r-sm); }
.insp-net { padding: 3px 5px; margin-bottom: 2px; border-radius: var(--r-sm); }
.insp-ok { padding: 6px; gap: 7px; border-radius: var(--r-sm); font-size: 10px; }
.insp-ok-mark { width: 20px; height: 20px; }
.insp-ok small { font-size: 9px; }

#examples-btn {
  min-height: 30px; padding: 5px 8px; border-radius: var(--r-sm);
  background: rgba(247,247,245,.92); color: #1b1e22; border-color: rgba(27,30,34,.18);
  box-shadow: none; font-size: 10px;
}
#examples-btn .lucide { width: 13px; color: #245ea9; }
#examples-panel { width: 320px; border-radius: var(--r); box-shadow: var(--shadow-2); }
#controls-legend { padding: 7px 9px; border-radius: var(--r-sm); box-shadow: none; font-size: 9.5px; }
#help-btn, #share-btn, #sound-btn, #ambient-btn { width: 30px; height: 30px; border-radius: var(--r-sm); box-shadow: none; }

#overlay .card { border-radius: var(--r-lg); }
#overlay .ov-beat { border-radius: var(--r); }
#overlay .start { border-radius: var(--r); }
#sim-hud { border-radius: var(--r-lg); }

@media (min-width: 821px) {
  #app { grid-template-columns: 220px minmax(420px, 1fr) 360px; gap: 0; padding: 0; background: var(--border); }
  #left-panel, #right-panel, #workspace { border: 0; border-radius: 0; box-shadow: none; }
  #left-panel { border-right: 1px solid var(--border); }
  #right-panel { border-left: 1px solid var(--border); }
  body.mode-sim #app { grid-template-columns: minmax(420px, 1fr) 360px; }
  body.mode-sim #left-panel { display: none; }
  body.mode-sim #right-panel { display: flex; }
  body.mode-sim #workspace { border-radius: 0; }
}

@media (max-width: 1080px) and (min-width: 821px) {
  #app { grid-template-columns: 190px minmax(320px, 1fr) 320px; gap: 0; padding: 0; }
  body.mode-sim #app { grid-template-columns: minmax(320px, 1fr) 320px; }
}

@media (max-width: 820px) {
  body.is-phone #topbar { background: var(--panel-2); }
  body.is-phone .tb-brand { min-width: 36px; }
  body.is-phone #right-panel #hephaestus { position: fixed; }
  body.is-phone #hephaestus-panel { display: flex; flex-direction: column; }
  body.is-phone #hephaestus.collapsed #hephaestus-panel { display: none; }
  body.is-phone #hephaestus-log { flex: 1 1 auto; }
  body.is-phone #run-tools { display: contents; }
}