* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--lab-bg, #0E1114);
  color: var(--lab-text, #E6E8EB);
  font: var(--lab-fs-12, 12px)/1.35 var(--font-ui);
  color-scheme: dark;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--lab-space-8, 8px);
  height: 32px;
  padding: 0 var(--lab-space-12);
  border-bottom: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  background: var(--lab-bg-raised, #161B20);
}

.app-bar__label {
  font-size: var(--lab-fs-13, 13px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-bar__meta {
  font-size: var(--lab-fs-11, 11px);
  color: var(--lab-text-dim, #8B939C);
}

.app-bar__rule { color: var(--lab-text-mute, #5C656E); }

.lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lab-space-8, 8px);
  padding: var(--lab-space-8, 8px);
  min-height: calc(100vh - 32px);
}

.widget {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--lab-bg-raised, #161B20);
  border: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  border-radius: var(--lab-radius-2, 2px);
}

.widget__head {
  height: 32px;
  padding: 0 var(--lab-space-8, 8px);
  display: flex;
  align-items: center;
  font-size: var(--lab-fs-11, 11px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lab-text-dim, #8B939C);
  border-bottom: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
}

.widget__body {
  display: flex;
  flex-direction: column;
  gap: var(--lab-space-8, 8px);
  padding: var(--lab-space-8, 8px);
  flex: 1;
  min-height: 0;
}

.widget__body--scope { background: var(--lab-bg-inset, #050607); }

.schematic {
  flex: 1;
  min-height: 280px;
  background-color: var(--lab-canvas, #12151A);
  /* grid is drawn inside the SVG (src/schematic.js) so it stays locked to parts */
  border: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  border-radius: var(--lab-radius-2, 2px);
}

.schematic svg { width: 100%; height: 100%; display: block; }
.schematic__handle { touch-action: none; cursor: grab; }
.schematic__handle:active { cursor: grabbing; }

.controls { display: grid; gap: var(--lab-space-8, 8px); }

.controls label {
  display: grid;
  grid-template-columns: 88px 1fr 72px;
  align-items: center;
  gap: var(--lab-space-8, 8px);
  font-size: var(--lab-fs-12, 12px);
  color: var(--lab-text-dim, #8B939C);
}

.controls output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--lab-fs-11, 11px);
  color: var(--lab-text, #E6E8EB);
  text-align: right;
}

.controls input[type="range"] {
  width: 100%;
  height: 28px;
  accent-color: var(--lab-ch1, #7CFF6B);
}

#scope-canvas {
  width: 100%;
  flex: 1;
  min-height: 240px;
  background: var(--lab-bg-inset, #050607);
  border: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  border-radius: var(--lab-radius-2, 2px);
}

.readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lab-space-8, 8px);
  margin: 0;
}

.readouts div {
  background: var(--lab-bg-inset, #050607);
  border: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  border-radius: var(--lab-radius-2, 2px);
  padding: 4px 8px;
}

.readouts dt {
  margin: 0;
  font-size: var(--lab-fs-11, 11px);
  color: var(--lab-text-mute, #5C656E);
}

.readouts dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--lab-fs-12, 12px);
  color: var(--lab-ch1, #7CFF6B);
}

@media (max-width: 900px) {
  .lab { grid-template-columns: 1fr; }
}

.proof {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lab-space-8, 8px);
  padding: 6px 8px;
  background: var(--lab-bg-inset, #050607);
  border: var(--lab-hairline, 1px) solid var(--lab-border, #2A3138);
  border-radius: var(--lab-radius-2, 2px);
}

.proof__eq {
  font-size: var(--lab-fs-12, 12px);
  color: var(--lab-text-dim, #8B939C);
  letter-spacing: 0.04em;
}

.proof__live {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--lab-fs-12, 12px);
  color: var(--lab-ch1, #7CFF6B);
}

/* R4 parts panel (injected by src/schematic.js via src/ui/parts.js) */
.parts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lab-space-8); margin-top: var(--lab-space-8); }
.parts__btn, .parts__value {
  min-height: 44px; min-width: 44px;
  padding: 0 var(--lab-space-12);
  background: var(--lab-bg-raised); color: var(--lab-text);
  border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2);
  font: inherit; font-family: var(--font-mono); touch-action: manipulation; cursor: pointer;
}
.parts__value { flex: 1 1 140px; }
.parts__btn:hover, .parts__value:hover { background: var(--lab-bg-hover); }
.parts__btn[aria-pressed="true"] { border-color: var(--lab-highlight); color: var(--lab-highlight); background: var(--lab-bg-active); }
.parts__status { color: var(--lab-text-dim); font-family: var(--font-mono); font-size: var(--lab-fs-12); }
.schematic__pin { cursor: crosshair; }

/* R5 fit: the app fills the viewport with no page scroll; panels flex, canvases shrink. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 0; }
/* Overhaul R7 (Layout): viewport-fit=cover (index.html) lets the page run edge to edge; the body keeps its content out of
 * notches / rounded corners / the home indicator. Fixed bottom sheets pad themselves (#inspector: see the R6 rule below). */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.app-bar { flex: none; }
.lab { flex: 1 1 auto; min-height: 0; height: calc(100dvh - 32px); overflow: hidden; }
.widget, .widget__body { min-height: 0; overflow: hidden; }
.widget__body { gap: var(--lab-space-8); }
.schematic { flex: 1 1 0; min-height: 160px; }
#scope-canvas { flex: 1 1 0; min-height: 120px; }
.parts { margin-top: 0; gap: var(--lab-space-4); }
.controls { gap: var(--lab-space-4); }
.controls label { min-height: 44px; }
.proof { margin: 0; }
/* R5: wire-mode pin circles fade until hovered/selected */
.schematic__pin { stroke-opacity: 0.2; transition: stroke-opacity 120ms; }
.schematic__pin:hover, .schematic__pin[fill-opacity="0.35"] { stroke-opacity: 0.9; }
.parts__btn:disabled { opacity: 0.45; cursor: default; }

/* ===== Bible UI: shared nav, drawer, bible page (tokens only) ===== */
.app-bar.app-bar--nav { height: auto; min-height: 44px; padding: 0 var(--lab-space-8); gap: 0; flex-wrap: nowrap; overflow-x: auto; }
.nav__link, .nav__sub { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 var(--lab-space-12); color: var(--lab-text-dim); text-decoration: none; white-space: nowrap; }
.nav__sub { color: var(--lab-text-mute); padding: 0 var(--lab-space-8); }
.nav__link:hover { color: var(--lab-text); background: var(--lab-bg-hover); }
.nav__link[aria-current="page"] { color: var(--lab-highlight); box-shadow: inset 0 -2px 0 var(--lab-highlight); }
.lab { height: calc(100dvh - 44px); }

.help-btn, .bible-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--lab-space-12);
  margin-left: var(--lab-space-8); vertical-align: middle;
  background: var(--lab-bg-raised); color: var(--lab-text-dim);
  border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2);
  font: inherit; font-family: var(--font-mono); cursor: pointer; touch-action: manipulation;
}
.help-btn:hover, .bible-btn:hover { color: var(--lab-highlight); border-color: var(--lab-highlight); }
.widget__head .help-btn { min-height: 44px; margin-left: auto; }

.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: var(--lab-bg-inset); opacity: 0.7; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
  display: flex; flex-direction: column; background: var(--lab-bg-panel);
  border-left: var(--lab-hairline) solid var(--lab-border-strong);
  transform: translateX(100%); transition: transform 160ms ease-out;
}
.drawer--open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--lab-space-8) 0 var(--lab-space-16); border-bottom: var(--lab-hairline) solid var(--lab-border); }
.drawer__title { color: var(--lab-text-dim); font-family: var(--font-mono); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--lab-space-16); }

.bible { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: var(--lab-space-8); padding: var(--lab-space-8); height: calc(100dvh - 44px); min-height: 0; overflow: hidden; }
.bible .widget { min-height: 0; overflow: hidden; }
.bible__scroll { overflow-y: auto; min-height: 0; flex: 1; }
.bible__source { margin-left: var(--lab-space-8); color: var(--lab-text-mute); font-family: var(--font-mono); text-transform: none; }
.bible-search { width: 100%; min-height: 44px; padding: 0 var(--lab-space-12); background: var(--lab-bg-inset); color: var(--lab-text); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); font: inherit; }
.bible-group__h { margin: var(--lab-space-12) 0 var(--lab-space-4); color: var(--lab-text-mute); font-size: var(--lab-fs-11); text-transform: uppercase; letter-spacing: 0.08em; }
.bible-group__list { list-style: none; margin: 0; padding: 0; }
.bible-item { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: var(--lab-space-4) var(--lab-space-8); color: var(--lab-text); text-decoration: none; border-radius: var(--lab-radius-2); }
.bible-item:hover { background: var(--lab-bg-hover); }
.bible-item[aria-current="true"] { background: var(--lab-bg-active); box-shadow: inset 2px 0 0 var(--lab-highlight); }
.bible-item__sum { color: var(--lab-text-dim); font-size: var(--lab-fs-11); }
.bible-entry { max-width: 72ch; }
.bible-entry__cat { margin: 0; color: var(--lab-text-mute); font-family: var(--font-mono); text-transform: uppercase; font-size: var(--lab-fs-11); }
.bible-entry__title { margin: var(--lab-space-4) 0 var(--lab-space-8); color: var(--lab-text); font-weight: 600; }
.bible-entry__summary { color: var(--lab-text); }
.bible-entry__desc { color: var(--lab-text-dim); line-height: 1.55; }
.bible-entry__h { margin: var(--lab-space-16) 0 var(--lab-space-8); color: var(--lab-text-mute); font-size: var(--lab-fs-11); text-transform: uppercase; letter-spacing: 0.08em; }
.bible-formulas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lab-space-4); }
.bible-formulas li { display: flex; flex-wrap: wrap; gap: var(--lab-space-8); align-items: baseline; padding: var(--lab-space-8); background: var(--lab-bg-inset); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); }
.bible-formulas__name { color: var(--lab-text-dim); min-width: 12ch; }
.bible-formulas__expr { color: var(--lab-ch1); font-family: var(--font-mono); }
.bible-solver { display: grid; gap: var(--lab-space-4); }
.bible-solver__row { display: grid; grid-template-columns: 6ch minmax(8ch, 14ch) 4ch 1fr; align-items: center; gap: var(--lab-space-8); min-height: 44px; }
.bible-entry--compact .bible-solver__row { grid-template-columns: 6ch 1fr 4ch; }
.bible-solver__sym { font-family: var(--font-mono); color: var(--lab-text); }
.bible-solver__input { min-height: 44px; padding: 0 var(--lab-space-8); background: var(--lab-bg-inset); color: var(--lab-text); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); font: inherit; font-family: var(--font-mono); }
.bible-solver__unit, .bible-solver__desc { color: var(--lab-text-dim); }
.bible-solver .bible-btn { justify-self: start; margin-left: 0; }
.bible-solver__results { display: grid; grid-template-columns: auto 1fr; gap: var(--lab-space-4) var(--lab-space-12); margin: var(--lab-space-8) 0 0; font-family: var(--font-mono); }
.bible-solver__results dt { color: var(--lab-text-dim); }
.bible-solver__results dd { margin: 0; color: var(--lab-ch1); }
.bible-solver__err { color: var(--lab-fault); }
.bible-link { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--lab-space-12); color: var(--lab-ch3); }
.bible-empty { color: var(--lab-text-dim); }
@media (max-width: 720px) { .bible { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; } }
.bible-solver__need { color: var(--lab-ch2); }
.bible-solver__notes { margin: var(--lab-space-4) 0 0; padding-left: var(--lab-space-16); color: var(--lab-text-dim); }
.bible-related__check { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--lab-space-12); color: var(--lab-text-dim); font-family: var(--font-mono); }

/* ===== GUI1: full-canvas board, side dock, scope slide-over, canvas tools, badges, nav active ===== */
.lab { grid-template-columns: 1fr; position: relative; }
.lab > .widget:first-child .widget__body.has-dock { flex-direction: row; gap: var(--lab-space-8); }
.has-dock > .schematic { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }
.dock { flex: 0 0 clamp(260px, 26vw, 340px); display: flex; flex-direction: column; gap: var(--lab-space-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dock .controls label { grid-template-columns: 72px 1fr 64px; }
.canvas-tools { position: absolute; top: var(--lab-space-8); right: var(--lab-space-8); display: flex; gap: var(--lab-space-4); z-index: 2; }
.canvas-tools__btn { padding: 0 var(--lab-space-8); }
/* R9 (Layout): compact icon-only buttons (canvas toolbar + part toolbar); 44 px square targets, words in tooltip / aria-label */
.icon-btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mini-tools .parts__btn.icon-btn, .mini-tools[data-orient="col"] .parts__btn.icon-btn { padding: 0; justify-content: center; }
.parts__btn.icon-btn .icon-btn__svg { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.canvas-tools__btn[aria-pressed="true"] { border-color: var(--lab-highlight); color: var(--lab-highlight); background: var(--lab-bg-active); }
/* Scope: slide-over from the right, toggled by body.scope-open */
.lab > .widget:nth-child(2) {
  position: fixed; top: 44px; right: 0; bottom: 0; width: min(560px, 92vw); z-index: 40;
  transform: translateX(105%); visibility: hidden; transition: transform 160ms ease-out, visibility 0s linear 160ms;
  border-left: var(--lab-hairline) solid var(--lab-border-strong);
}
body.scope-open .lab > .widget:nth-child(2) { transform: none; visibility: visible; transition: transform 160ms ease-out; }
.schematic__badge rect { transition: none; }
/* Nav: strong active tab */
.nav__link[aria-current="page"] { background: var(--lab-bg-active); color: var(--lab-highlight); font-weight: 600; box-shadow: inset 0 -3px 0 var(--lab-highlight); }

/* ===== scope-panel (src/ui/scope-panel.js): 2-channel scope inside the labScope drawer. Tokens only. ===== */
.scope2-mounted > #scope-canvas, .scope2-mounted > .readouts { display: none; }
.scope2 { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--lab-space-4); font-family: var(--font-mono); font-size: var(--lab-fs-11); color: var(--lab-text); }
.scope2__screen { position: relative; flex: 1 1 0; min-height: 180px; display: grid; grid-template-columns: 1fr 44px; grid-template-rows: 1fr 44px; }
.scope2__canvas { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; display: block; background: var(--lab-scope-well); border: var(--lab-hairline) solid var(--lab-border); touch-action: none; }
.scope2__vrail, .scope2__trail { position: relative; touch-action: none; }
.scope2__vrail { grid-area: 1 / 2; }
.scope2__trail { grid-area: 2 / 1; }
.scope2__handle {
  position: absolute; width: 44px; height: 44px; padding: 0; touch-action: none; cursor: grab;
  background: var(--lab-bg-raised); color: var(--lab-ch3); border: var(--lab-hairline) solid var(--lab-ch3-dim);
  border-radius: var(--lab-radius-2); font: inherit; font-size: var(--lab-fs-11);
}
.scope2__handle:active { cursor: grabbing; background: var(--lab-bg-active); }
.scope2__handle:focus-visible { outline: var(--lab-hairline) solid var(--lab-ch3); }
.scope2__handle--t { top: 0; transform: translateX(-50%); }
.scope2__handle--v { left: 0; transform: translateY(-50%); }
.scope2__handle[hidden] { display: none; }
.scope2__readouts { flex: none; display: flex; flex-direction: column; gap: 2px; min-height: 30px; font-variant-numeric: tabular-nums; }
.scope2__rorow { display: flex; flex-wrap: wrap; gap: 2px var(--lab-space-12); }
.scope2__ro b { font-weight: var(--lab-weight-medium); color: var(--lab-text-dim); }
.scope2__ro--ch1 b { color: var(--lab-ch1); }
.scope2__ro--ch2 b { color: var(--lab-ch2); }
.scope2__controls { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--lab-space-4); }
.scope2__row { display: flex; align-items: center; gap: var(--lab-space-4); min-width: 0; }
.scope2__cap { color: var(--lab-text-mute); font-size: var(--lab-fs-10); text-transform: uppercase; letter-spacing: var(--lab-tracking-caps); flex: none; }
.scope2__cap--lead { width: 44px; }
.sp-ctl {
  min-height: 44px; min-width: 44px; box-sizing: border-box; padding: 0 var(--lab-space-8);
  background: var(--lab-bg-raised); color: var(--lab-text); border: var(--lab-hairline) solid var(--lab-border);
  border-radius: var(--lab-radius-2); font: inherit; font-size: var(--lab-fs-11);
}
select.sp-ctl { flex: 0 1 auto; min-width: 0; }
.scope2__src { flex: 1 1 96px; }
.sp-ctl:focus-visible { outline: var(--lab-hairline) solid var(--lab-ch3); }
.scope2__range { flex: 1 1 60px; padding: 0; border: 0; background: transparent; accent-color: var(--lab-ch3); }
.scope2__row--1 .scope2__range { accent-color: var(--lab-ch1); }
.scope2__row--2 .scope2__range { accent-color: var(--lab-ch2); }
.scope2__num { width: 76px; flex: none; }
.scope2__out { flex: none; width: 64px; text-align: right; color: var(--lab-text-dim); font-variant-numeric: tabular-nums; }
.scope2__chbtn, .scope2__tog { flex: none; color: var(--lab-text-mute); }
.scope2__chbtn--1[aria-pressed="true"] { color: var(--lab-ch1); border-color: var(--lab-ch1-dim); background: var(--lab-bg-active); }
.scope2__chbtn--2[aria-pressed="true"] { color: var(--lab-ch2); border-color: var(--lab-ch2-dim); background: var(--lab-bg-active); }
.scope2__tog[aria-pressed="true"] { color: var(--lab-ch3); border-color: var(--lab-ch3-dim); background: var(--lab-bg-active); }
/* ===== end scope-panel ===== */

/* GUI2 palette: grouped tiles with symbol icons (src/ui/parts.js), tokens only */
.parts { display: flex; flex-direction: column; align-items: stretch; gap: var(--lab-space-4); }
.pal { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: var(--lab-space-4); }
.pal__cap { grid-column: 1 / -1; color: var(--lab-text-dim); font-size: var(--lab-fs-10); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; margin-top: var(--lab-space-4); }
.pal__cap:first-child { margin-top: 0; }
.parts__btn.pal__tile { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lab-space-4); padding: 0 var(--lab-space-4); font-size: var(--lab-fs-11); }
.pal__icon { width: 18px; height: 18px; flex: none; }
.pal__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lab-space-4); }
.insp-value { display: flex; flex-direction: column; gap: var(--lab-space-4); }
.insp-value[hidden] { display: none; }
.insp-value__cap { color: var(--lab-text-dim); font-size: var(--lab-fs-11); }
.insp-value .parts__value { flex: none; width: 100%; }
.help-btn--text { width: auto; padding: 0 var(--lab-space-8); font-size: var(--lab-fs-11); white-space: nowrap; }
.parts__btn.pal__tile { flex-direction: column; gap: 0; padding: 0 var(--lab-space-4); line-height: 1.1; }
.pal { display: flex; flex-wrap: wrap; gap: var(--lab-space-4) var(--lab-space-8); }
.pal__group { display: grid; grid-template-columns: repeat(auto-fill, 58px); grid-auto-rows: auto; gap: var(--lab-space-4); flex: 0 1 auto; }
.pal__group .pal__cap { margin-top: 0; }
.parts__btn.pal__tile { width: 58px; min-width: 44px; }
.pal__group { display: flex; flex-wrap: wrap; align-content: flex-start; }
.pal__group .pal__cap { flex: 0 0 100%; }
/* Part icons (src/ui/icons.js): icon above label, 20px, inherits tile colour; tile stays >= 44x44 */
.parts__btn.pal__tile { min-height: 44px; gap: 2px; padding: var(--lab-space-4); }
.pal__icon { width: 20px; height: 20px; flex: none; display: block; }

/* Overhaul R2 (Layout): canvas status, mini-toolbar, always-visible pins, repeat tile (tokens only) */
.canvas-status { position: absolute; left: var(--lab-space-8); bottom: var(--lab-space-8); z-index: 2; max-width: calc(100% - 16px); pointer-events: none; }
.canvas-status .parts__status { display: inline-block; padding: var(--lab-space-4) var(--lab-space-8); background: var(--lab-bg-raised); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); color: var(--lab-text); }
.canvas-status .parts__status:empty { display: none; }
.mini-tools { position: absolute; z-index: 3; display: flex; gap: var(--lab-space-4); padding: var(--lab-space-4); background: var(--lab-bg-raised); border: var(--lab-hairline) solid var(--lab-highlight); border-radius: var(--lab-radius-2); }
.mini-tools[hidden], .mini-tools__btn[hidden] { display: none; }
.mini-tools .parts__btn { margin: 0; padding: 0 var(--lab-space-8); }
.mini-tools[data-orient="col"] { flex-direction: column; } /* R6 (Layout): column when a row does not fit beside the part */
.mini-tools[data-orient="col"] .parts__btn { justify-content: flex-start; }
.mini-tools__leader { position: absolute; height: 0; border-top: 1.5px dashed var(--lab-highlight); transform-origin: 0 0; pointer-events: none; }
.mini-tools__leader[hidden] { display: none; }
.schematic__pin { stroke-opacity: 0; }
.schematic__pin:hover { stroke-opacity: 0.6; }
.pal__tile[data-repeat="true"] { outline: var(--lab-hairline) dashed var(--lab-highlight); outline-offset: 2px; }
.pal__tile[data-repeat="true"]::after { content: "∞"; font-size: var(--lab-fs-10); color: var(--lab-highlight); }
/* Overhaul R2 (Layout): the dock never scrolls; the DC-OP readout (duplicate of canvas readings) absorbs the squeeze */
.dock { overflow: hidden; }
.dock > * { flex: none; }
.dock > .proof { max-height: 88px; overflow: hidden; }
.dock > .lab-op { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Overhaul R3 (Layout): wrapping solver / empty-state message overlay (top-left, clear of the canvas toolbar) */
.canvas-msg { position: absolute; top: var(--lab-space-8); left: var(--lab-space-8); z-index: 2; max-width: calc(100% - 360px); min-width: 180px; padding: var(--lab-space-4) var(--lab-space-8); background: var(--lab-bg-raised); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); font-family: var(--font-mono); font-size: var(--lab-fs-11); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.canvas-msg[hidden] { display: none; }
/* R6 (Schematic): solver message docked over the Sandbox header band (sibling of the heading, outside the board). Calm: no box, no caps; 2 lines max. */
.widget:has(> .canvas-msg--docked) { position: relative; }
.widget > .canvas-msg--docked { position: absolute; top: 0; left: 96px; right: var(--lab-space-8); height: 32px; max-width: none; min-width: 0; margin: 0; padding: 0;
  display: flex; align-items: center; background: none; border: 0; border-radius: 0; text-transform: none; letter-spacing: 0; font-size: var(--lab-fs-11); line-height: 1.25; color: var(--lab-text-dim); }
.widget > .canvas-msg--docked { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 32px; }
.widget > .canvas-msg--docked[data-level="error"] { color: var(--lab-warn); border: 0; }
.widget > .canvas-msg--docked[hidden] { display: none; }
.canvas-msg[data-level="info"] { color: var(--lab-text-dim); }
.canvas-msg[data-level="error"] { color: var(--lab-error); border-color: var(--lab-error); }
/* Overhaul R4 (Layout): palette search (44 px target) + filtered tiles/groups */
.pal__search { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 var(--lab-space-8); background: var(--lab-bg-inset); color: var(--lab-text); border: var(--lab-hairline) solid var(--lab-border); border-radius: var(--lab-radius-2); font-family: var(--font-mono); font-size: var(--lab-fs-12); }
.pal__search::placeholder { color: var(--lab-text-mute); }
.pal__search:focus-visible { outline: 2px solid var(--lab-highlight); outline-offset: -1px; border-color: var(--lab-highlight); }
.pal__tile[hidden], .pal__group[hidden], .pal__none[hidden] { display: none; }
.pal__none { color: var(--lab-text-mute); font-size: var(--lab-fs-11); padding: var(--lab-space-4) 0; }
/* Overhaul R5 (Layout): long-press part menu (44 px items, tokens only) */
.part-menu { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: var(--lab-space-4); min-width: 148px; padding: var(--lab-space-4); background: var(--lab-bg-raised); border: var(--lab-hairline) solid var(--lab-highlight); border-radius: var(--lab-radius-2); box-shadow: 0 6px 18px var(--lab-bg-inset); }
.part-menu[hidden] { display: none; }
.part-menu .part-menu__item { min-height: 44px; margin: 0; padding: 0 var(--lab-space-12); text-align: left; justify-content: flex-start; }
/* Overhaul R6 (Layout): Examples menu, dropped under the canvas toolbar */
.examples-menu { top: calc(var(--lab-space-8) + 48px); right: var(--lab-space-8); min-width: 200px; }
/* Overhaul R5 (Layout): dock compaction steps (set by src/schematic.js compactDock while the dock would overflow) */
.dock[data-compact] > .proof, .dock[data-compact] > .lab-op { display: none; }
.dock[data-compact="2"] .pal__cap, .dock[data-compact="3"] .pal__cap { display: none; }
.dock[data-compact="3"] .pal__search:placeholder-shown { display: none; }
/* Overhaul R6 (Layout): the inspector bottom sheet (Analog's src/ui/inspector.css) respects the safe area and the VISUAL
 * viewport: --lab-vv-bottom / --lab-vv-h are set by src/schematic.js from window.visualViewport (on-screen keyboard,
 * browser chrome). Its height is capped to the visible viewport so it never runs off the bottom. */
@media (max-width: 1279.98px) {
  body #inspector.insp { bottom: var(--lab-vv-bottom, 0px); max-height: min(42vh, 42dvh, calc(var(--lab-vv-h, 100dvh) - 96px));
    padding-bottom: calc(var(--lab-space-16) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--lab-space-16) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--lab-space-16) + env(safe-area-inset-right, 0px));
    scroll-padding: var(--lab-space-16) 0; overscroll-behavior: contain; }
}

/* ===== R12 FIX PASS (Layout): phone / iPad usability (docs/overhaul/R12-feedback-*.md). Tokens only, 44 px targets. ===== */
/* P0-1/P1-4: the canvas toolbar sits IN FLOW above the board (it no longer floats over the circuit); it wraps when narrow. */
.has-dock > .schematic { display: flex; flex-direction: column; }
.has-dock > .schematic > .canvas-tools { position: static; order: -1; flex: none; flex-wrap: wrap; justify-content: flex-end; padding: var(--lab-space-4) var(--lab-space-4) 0; }
.has-dock > .schematic > svg { flex: 1 1 0; min-height: 0; height: auto; }
.has-dock > .schematic > svg[style*="height"] { flex: none; } /* a sheet inset (src/schematic.js updateSheet) sets an explicit height */
/* P0-1: the scope sheet below 1280. Full viewport width; plot left, controls in their OWN scroll column right (landscape),
 * so probe / V-div / timebase never scroll under the plot. Shorter sheet at 1024 keeps more board visible. */
@media (max-width: 1279.98px) {
  html body .lab > .widget.scope-sheet { left: 0; width: 100vw; }
  html .scope-sheet .scope2__controls { flex: 1 1 auto; }
}
@media (max-width: 1279.98px) and (orientation: landscape) {
  html body .lab > .widget.scope-sheet { height: min(var(--scope-height, 42vh), 300px); }
  .scope-sheet .scope2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--lab-space-8); }
  .scope-sheet .scope2 > .scope2__screen { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  .scope-sheet .scope2 > .scope2__readouts { grid-column: 2; grid-row: 1; }
  .scope-sheet .scope2 > .scope2__controls { grid-column: 2; grid-row: 2; min-height: 0; }
}
@media (max-width: 1279.98px) and (orientation: landscape) and (max-height: 500px) {
  html body .lab > .widget.scope-sheet { height: calc(100dvh - 140px); max-height: none; } /* phone landscape: most of the screen */
}
@media (orientation: portrait) and (max-width: 1023.98px) {
  html body .lab > .widget.scope-sheet { height: min(62vh, 560px); max-height: none; }
  .scope-sheet .scope2__screen { min-height: 160px; flex: 1 1 0; }
  .scope-sheet .scope2__controls { flex: 1 1 0; }
}
/* P0-2: portrait = one column. Board full width; the parts dock is a right drawer behind a 44 px "Parts" toggle. */
.canvas-tools__parts { display: none; }
@media (orientation: portrait) and (max-width: 1023.98px) {
  .lab > .widget:first-child .widget__body.has-dock { flex-direction: column; }
  /* slid with `right`, NOT transform: #inspector (a fixed bottom sheet) lives inside the dock and must stay viewport-fixed */
  .has-dock > .dock { --drawer-w: min(340px, calc(100vw - 96px)); position: fixed; top: 44px; right: calc(-1 * var(--drawer-w) - 24px); bottom: 0; z-index: 35; width: var(--drawer-w); box-sizing: border-box; padding: var(--lab-space-8);
    background: var(--lab-bg-raised); border-left: var(--lab-hairline) solid var(--lab-border-strong); box-shadow: -6px 0 18px var(--lab-edge-lo);
    overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transition: right 160ms ease-out, visibility 0s linear 160ms; }
  body.dock-open .has-dock > .dock { right: 0; visibility: visible; transition: right 160ms ease-out; }
  .has-dock > .dock > #inspector { visibility: visible; } /* the inspector sheet shows with the drawer closed */
  .canvas-tools__parts { display: inline-flex; }
}
.canvas-tools__parts[aria-expanded="true"] { border-color: var(--lab-highlight); color: var(--lab-highlight); background: var(--lab-bg-active); }
/* P1-5: phone landscape: the dock scrolls (search, DC OP, V = I R, Compliance reachable) instead of clipping. */
@media (max-height: 500px) {
  .has-dock > .dock { overflow-y: auto; overscroll-behavior: contain; }
  .dock[data-compact] > .proof, .dock[data-compact] > .lab-op { display: flex; }
  .dock[data-compact] .pal__cap { display: block; }
  .dock[data-compact="3"] .pal__search:placeholder-shown { display: block; }
  .dock > .lab-op { flex: none; max-height: none; }
}
/* P2-7: palette icons at 24 px (the old 16 px override is gone). */
.parts__btn.pal__tile { padding: 2px var(--lab-space-4); }
.pal__icon { width: 24px; height: 24px; }
/* P1-3: an armed palette tile reads as armed. */
.pal__tile[aria-pressed="true"], .pal__tile[data-armed="true"] { border-color: var(--lab-highlight); color: var(--lab-highlight); background: var(--lab-bg-active); box-shadow: inset 0 -3px 0 var(--lab-highlight); }
/* The long-press menu is never positioned until opened (src/schematic.js sets left/top); an un-positioned one stays hidden
 * (its initial hidden=true sits inside a comment at schematic.js ~1344, so it relied on sitting below the board). */
.has-dock > .schematic > .part-menu:not(.examples-menu):not([style]) { display: none; }
/* ===== end R12 FIX PASS ===== */

/* ==== R12 WIDGETS (Layout): full-bleed board + floating widgets. Everything scoped to html.lab-float (ON by default,
   src/ui/widgets.js; ?float=0 = old layout). Tokens only; local vars below are built from existing tokens. ==== */
html.lab-float { --wgt-bg: var(--lab-bg-panel); --wgt-bd: var(--lab-border-strong); --wgt-r: var(--lab-radius-4); --wgt-hit: 44px; --wgt-z: var(--lab-z-overlay); }
html.lab-float, html.lab-float body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.lab-float .lab { position: fixed; inset: 0; display: block; padding: 0; margin: 0; }
html.lab-float .lab > .widget:not(.scope-sheet) { position: fixed; inset: 0; margin: 0; border: 0; border-radius: 0; padding: 0; background: var(--lab-canvas); }
html.lab-float #sandbox-title { display: none; }
html.lab-float .lab > .widget > .widget__body.has-dock { position: fixed; inset: 0; padding: 0; margin: 0; display: block; }
html.lab-float #schematic.schematic { position: fixed; inset: 0; margin: 0; border: 0; border-radius: 0; min-height: 0; padding: 0 !important; display: block; }
html.lab-float #schematic.schematic > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html.lab-float .has-dock > .dock { display: contents; }
html.lab-float #sandbox-solver-msg { position: fixed; top: 60px; left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: calc(100vw - 16px); z-index: var(--lab-z-chrome); }
/* top pill: title + nav folded behind the menu button */
html.lab-float .app-bar { position: fixed; top: var(--lab-space-8); left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100vw - 16px);
  display: flex; align-items: center; gap: var(--lab-space-4); padding: 0 var(--lab-space-4); min-height: var(--wgt-hit); border: 1px solid var(--wgt-bd);
  border-radius: 999px; background: var(--wgt-bg); z-index: var(--lab-z-chrome); flex-wrap: nowrap; }
html.lab-float .app-bar .nav__link:not(.app-bar__label) { display: none; }
html.lab-float .app-bar.lab-pill--open { flex-wrap: wrap; border-radius: var(--wgt-r); justify-content: center; }
html.lab-float .app-bar.lab-pill--open .nav__link { display: inline-flex; }
html.lab-float .lab-pill__title { font-weight: var(--lab-weight-semi); color: var(--lab-text); white-space: nowrap; font-size: var(--lab-fs-14); }
.lab-pill__menu { display: none; }
html.lab-float .lab-pill__menu { display: inline-grid; place-items: center; min-width: var(--wgt-hit); min-height: var(--wgt-hit); background: none; border: 0; color: var(--lab-text); font-size: var(--lab-fs-16); cursor: pointer; }
/* one slim bottom toolbar */
html.lab-float .schematic > .canvas-tools { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--lab-space-8) + env(safe-area-inset-bottom, 0px)); top: auto;
  width: max-content; max-width: calc(100vw - 16px); overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; justify-content: flex-start; gap: var(--lab-space-2);
  padding: 2px var(--lab-space-4); margin: 0; border: 1px solid var(--wgt-bd); border-radius: 999px; background: var(--wgt-bg); z-index: var(--lab-z-chrome); scrollbar-width: none; }
html.lab-float .schematic > .canvas-tools > * { flex: 0 0 auto; }
html.lab-float [data-e2e="parts-drawer-toggle"] { display: inline-grid !important; }
/* widget cards */
html.lab-float .lab-wgt { position: fixed; z-index: var(--wgt-z); display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--wgt-bg); border: var(--lab-wgt-border, 1px solid var(--wgt-bd)); border-radius: var(--lab-wgt-radius, var(--wgt-r)); box-shadow: var(--lab-wgt-shadow, 0 6px 24px color-mix(in srgb, var(--lab-bg) 70%, transparent)); padding: 0; margin: 0; }
html.lab-float .lab-wgt.lab-wgt--collapsed { display: none !important; }
html.lab-float .lab-wgt__head { display: flex; align-items: center; gap: var(--lab-space-4); min-height: var(--wgt-hit); padding: 0 0 0 var(--lab-space-8); cursor: grab; user-select: none; flex: 0 0 auto; }
html.lab-float .lab-wgt__title { flex: 1 1 auto; font-size: var(--lab-fs-12); font-weight: var(--lab-weight-semi); color: var(--lab-text-dim); text-transform: uppercase; letter-spacing: var(--lab-tracking-caps); }
html.lab-float .lab-wgt__tools { display: inline-flex; margin-left: auto; }
html.lab-float .lab-wgt__btn { min-width: var(--wgt-hit); min-height: var(--wgt-hit); background: none; border: 0; color: var(--lab-text); font-size: var(--lab-fs-16); cursor: pointer; }
html.lab-float .lab-wgt__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--lab-space-8) var(--lab-space-8); }
html.lab-float .lab-wgt__resize { position: absolute; right: 0; bottom: 0; width: var(--wgt-hit); height: var(--wgt-hit); cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, transparent 62%, var(--lab-border-strong) 62%, var(--lab-border-strong) 68%, transparent 68%, transparent 78%, var(--lab-border-strong) 78%, var(--lab-border-strong) 84%, transparent 84%); }
@media (pointer: fine) { html.lab-float .lab-wgt__resize { width: 20px; height: 20px; } }
.lab-bubble { display: none; }
html.lab-float .lab-bubble { position: fixed; z-index: var(--wgt-z); display: grid; place-items: center; width: var(--wgt-hit); height: var(--wgt-hit); border-radius: 50%;
  border: 1px solid var(--wgt-bd); background: var(--wgt-bg); color: var(--lab-highlight); font-size: var(--lab-fs-16); cursor: pointer; }
html.lab-float .lab-bubble[hidden] { display: none; }
/* parts widget: dense wrap-around tiles, no horizontal scroll */
html.lab-float .parts-host.lab-wgt { overflow: hidden; }
html.lab-float body:not(.dock-open) .parts-host.lab-wgt { display: none; }
html.lab-float .parts-host.lab-wgt > .parts { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 var(--lab-space-8) var(--lab-space-24); position: static; transform: none; width: auto; height: auto; max-height: none; visibility: visible; }
html.lab-float .parts-host.lab-wgt .pal { display: flex; flex-wrap: wrap; gap: var(--lab-space-4); overflow: visible; max-height: none; }
html.lab-float .parts-host.lab-wgt .pal__group { display: contents; }
html.lab-float .parts-host.lab-wgt .pal__search { width: 100%; box-sizing: border-box; }
/* scope widget: the scope section itself is the card (open = body.scope-open) */
html.lab-float body .lab > .widget.scope-sheet.lab-wgt { bottom: auto !important; right: auto; transform: none !important; max-height: none; border-radius: var(--lab-wgt-radius, var(--wgt-r)); }
html.lab-float body:not(.scope-open) .lab > .widget.scope-sheet.lab-wgt { visibility: hidden; pointer-events: none; }
html.lab-float body:not(.scope-open) .lab-bubble--scope { display: none; }
html.lab-float .scope-sheet.lab-wgt .scope-sheet__grip { display: none; }
html.lab-float .scope-sheet.lab-wgt.lab-wgt--max { left: var(--lab-space-8) !important; top: 60px !important; width: calc(100vw - 16px) !important; height: calc(100dvh - 128px) !important; }
/* inspector widget follows the selection; readings / compliance are small cards */
html.lab-float .lab-wgt--inspector:has(#inspector[hidden]) { display: none; }
html.lab-float body:not(:has(#inspector:not([hidden]))) .lab-bubble--inspector { display: none; }
html.lab-float .lab-wgt--inspector #inspector { position: static !important; inset: auto; transform: none !important; width: auto; max-height: none; height: auto; border: 0; box-shadow: none; visibility: visible; margin: 0; }
html.lab-float .lab-wgt--readings .lab-op, html.lab-float .lab-wgt--readings .proof { margin: 0; border: 0; }
html.lab-float .lab-wgt--compliance .live-profile { margin: 0; border: 0; }
/* readings are glass over the board: taps and drags reach the board under the card body (header + buttons stay live) */
html.lab-float .lab-wgt--readings .lab-wgt__body { pointer-events: none; }
html.lab-float .lab-wgt--readings .lab-wgt__body button, html.lab-float .lab-wgt--readings .lab-wgt__body a { pointer-events: auto; }
html.lab-float .lab-wgt--readings { pointer-events: none; }
html.lab-float .lab-wgt--readings > .lab-wgt__head, html.lab-float .lab-wgt--readings > .lab-wgt__resize { pointer-events: auto; }
/* Examples menu: anchored above the bottom toolbar (board-level menus cannot stack above the body-level cards) */
html.lab-float .schematic > .examples-menu { top: auto !important; bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); max-height: calc(100dvh - 150px); overflow-y: auto; }
/* the Samples tab stays one tap away in the pill; the other tabs sit behind the menu button */
html.lab-float .app-bar .nav__link.nav__samples:not(.app-bar__label) { display: inline-flex; }
html.lab-float .lab-wgt--inspector #inspector { min-width: 0; box-sizing: border-box; }
html.lab-float .lab-wgt--inspector #inspector :is(input, select, textarea) { max-width: 100%; box-sizing: border-box; }
html.lab-float .lab-bubble { z-index: calc(var(--wgt-z) - 1); }
.lab-tb-extra { display: none; }
html.lab-float .lab-tb-extra { display: inline-grid; place-items: center; }

/* ==== R12 POLISH (Layout) ==== */
/* layout switch (Cook's --lab-switch-* tokens): in the pill menu when floating, in the app bar when classic */
.lab-switch { display: inline-flex; align-items: center; justify-content: center; gap: var(--lab-space-8); min-width: var(--lab-switch-hit); min-height: var(--lab-switch-hit);
  padding: 0 var(--lab-space-4); background: none; border: 0; color: var(--lab-text); font: inherit; font-size: var(--lab-fs-12); cursor: pointer; }
.lab-switch__track { position: relative; flex: 0 0 auto; box-sizing: border-box; width: var(--lab-switch-w); height: var(--lab-switch-h); border-radius: 999px;
  background: var(--lab-switch-track); border: 1px solid var(--lab-switch-track-border); transition: background var(--lab-switch-dur) var(--lab-switch-ease), border-color var(--lab-switch-dur) var(--lab-switch-ease); }
.lab-switch__thumb { position: absolute; top: 1px; left: 1px; width: var(--lab-switch-thumb); height: var(--lab-switch-thumb); border-radius: 50%;
  background: var(--lab-switch-thumb-bg); box-shadow: var(--lab-switch-thumb-shadow); transition: transform var(--lab-switch-dur) var(--lab-switch-ease), background var(--lab-switch-dur) var(--lab-switch-ease); }
.lab-switch[aria-checked="true"] .lab-switch__track { background: var(--lab-switch-track-on); border-color: var(--lab-switch-track-on); }
.lab-switch[aria-checked="true"] .lab-switch__thumb { transform: translateX(calc(var(--lab-switch-w) - var(--lab-switch-thumb) - 4px)); background: var(--lab-switch-thumb-on); }
.lab-switch:focus-visible { outline: none; }
.lab-switch:focus-visible .lab-switch__track { box-shadow: var(--lab-switch-ring); }
@media (prefers-reduced-motion: reduce) { .lab-switch__track, .lab-switch__thumb { transition-duration: 0ms; } }
.app-bar .lab-switch { margin-left: auto; }
html.lab-float .app-bar .lab-switch { display: none; margin-left: 0; }
html.lab-float .app-bar.lab-pill--open .lab-switch { display: inline-flex; }
/* bubbles step aside while the Examples menu (anchored above the toolbar) is open */
html.lab-float body:has(.examples-menu:not([hidden])) .lab-bubble { visibility: hidden; pointer-events: none; }
html.lab-float body:has(.examples-menu:not([hidden])) :is(.lab-wgt--inspector, .lab-wgt--scope) { visibility: hidden !important; pointer-events: none; }
/* short landscape (844x390): the Parts card packs every tile without scrolling (group captions hidden) */
@media (max-height: 500px) and (min-width: 600px) { html.lab-float .parts-host.lab-wgt .pal__cap { display: none; } }