/* Electronics Bench · compact controls around a full-screen working scene */
.app-shell { display: grid; grid-template-rows: 58px 70px minmax(0, 1fr); width: 100%; height: 100dvh; min-height: 500px; overflow: hidden; background: var(--color-paper); }
.topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 0 var(--space-md); background: var(--color-paper-3); border-bottom: 1px solid var(--color-rule); }
.brand-block { display: grid; gap: 1px; min-width: 0; }
.brand-block strong { font-size: var(--text-lg); font-weight: 500; line-height: 1.1; }
.brand-block span { color: var(--color-muted); font-size: var(--text-xs); }
.topbar-state { display: flex; align-items: center; gap: var(--space-sm); }
#simulation-state { min-width: 130px; color: var(--color-cool); font-size: var(--text-sm); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.button:hover:not(:disabled) { border-color: var(--color-ink-2); background: var(--color-rule); }
.button-primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.button-primary:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-ink); color: var(--color-paper); }
.button-quiet { background: transparent; }
.parts-toolbar { position: relative; z-index: 4; display: flex; align-items: center; min-width: 0; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.parts-list { display: flex; align-items: center; width: 100%; min-width: 0; gap: var(--space-2xs); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.part-button { flex: 0 0 auto; display: grid; grid-template-columns: 22px auto; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-ink-2); white-space: nowrap; }
.part-button { touch-action: pan-x; }
.part-button[data-tool="resistor"], .part-button[data-tool="ldr"], .part-button[data-tool="lm339"], .part-button[data-tool="l293d"], .part-button[data-tool="lm317"], .part-button[data-tool="motor"] { cursor: grab; }
.part-button:hover { background: var(--color-paper); color: var(--color-ink); }
.part-button.is-active { border-color: var(--color-rule-2); background: var(--color-paper-3); color: var(--color-ink); }
.part-button svg, .add-board svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.part-button.is-active svg { color: var(--color-accent); }
.part-button b { font-size: var(--text-sm); font-weight: 500; }
.add-board { flex: 0 0 auto; gap: 7px; padding-inline: 11px; }
.add-board svg { width: 18px; height: 18px; }
.wire-color-control { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.wire-color-control select { height: 34px; padding: 0 8px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-3); font-size: var(--text-sm); }
.workspace, .bench-panel { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.workspace { display: grid; grid-template-rows: minmax(0, 1fr); }
.bench-panel { display: grid; grid-template-rows: minmax(0, 1fr); }
.scene-wrap { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--scene-floor); isolation: isolate; }
#circuit-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#circuit-scene:active { cursor: grabbing; }
.scene-heading { position: absolute; z-index: 2; top: 14px; left: 16px; max-width: min(520px, calc(100% - 340px)); pointer-events: none; }
.scene-heading h1 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1.25; }
.scene-heading p { margin-top: 3px; color: var(--color-muted); font-size: var(--text-xs); }
.scene-actions { position: absolute; z-index: 5; top: 12px; right: 14px; display: flex; align-items: flex-start; gap: 8px; }
.icon-button { display: inline-grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-3); color: var(--color-ink-2); }
.icon-button:hover { background: var(--color-rule); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coordinate-entry { position: relative; color: var(--color-ink-2); }
.coordinate-entry summary { display: inline-flex; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); cursor: pointer; list-style: none; }
.coordinate-entry summary::-webkit-details-marker { display: none; }
.coordinate-entry summary svg { width: 16px; height: 16px; margin-right: 6px; color: var(--color-accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.coordinate-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 12; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 9px; width: 236px; padding: 12px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-panel); background: var(--color-paper-3); box-shadow: 0 12px 28px #0007; }
.coordinate-popover label { color: var(--color-muted); font-size: var(--text-xs); }
.coordinate-popover select, .coordinate-fields input { min-width: 0; height: 34px; padding: 0 7px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-2); font-size: var(--text-sm); }
.coordinate-fields { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 6px; grid-column: 1 / -1; }
.coordinate-fields button { grid-column: 1 / -1; min-height: 34px; }
.scene-message { position: absolute; z-index: 2; top: 72px; left: 16px; max-width: min(440px, calc(100% - 32px)); padding: 7px 10px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); pointer-events: none; }
.scene-message:empty { display: none; }
.anchor-indicator { position: absolute; z-index: 2; top: 70px; left: 16px; padding: 6px 10px; border: 1px solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-accent-soft); color: var(--color-accent); font: 500 var(--text-xs)/1.25 var(--font-measure); box-shadow: 0 5px 14px #0005; pointer-events: none; }
.scene-status { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 0; max-width: min(720px, calc(100% - 28px)); overflow: hidden; border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-paper-3) 94%, transparent); box-shadow: 0 7px 20px #0005; }
.scene-status > div { display: grid; gap: 2px; min-width: 86px; padding: 7px 10px; border-right: 1px solid var(--color-rule); }
.scene-status > div span { color: var(--color-muted); font-size: 11px; line-height: 1.2; }
.scene-status > div output { color: var(--color-cool); font: 500 var(--text-xs)/1.3 var(--font-measure); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene-status > div:last-of-type { border-right: 0; }
.warnings { display: flex; gap: 5px; margin: 0; padding: 5px; list-style: none; }
.warnings:empty { display: none; }
.warnings li { max-width: 235px; padding: 5px 7px; border-radius: 4px; background: var(--color-bad-soft); color: var(--color-ink-2); font-size: 11px; line-height: 1.25; }
.warnings li.is-ok { background: var(--color-ok-soft); }
.scene-controls-hint, .model-note { position: absolute; right: 16px; z-index: 2; color: var(--color-muted); font-size: var(--text-xs); pointer-events: none; text-align: right; }
.scene-controls-hint { bottom: 42px; max-width: min(520px, calc(100% - 32px)); }
.model-note { bottom: 14px; }
.device-popover, .component-popover { position: absolute; z-index: 8; width: min(270px, calc(100% - 20px)); max-height: calc(100% - 90px); overflow-y: auto; padding: 13px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-panel); background: var(--color-paper-3); box-shadow: 0 12px 32px #0008; transition: opacity 130ms var(--ease-out), visibility 130ms; }
.device-popover { z-index: 7; }
.device-popover[aria-hidden="true"], .component-popover[aria-hidden="true"] { visibility: hidden; opacity: 0; pointer-events: none; }
.device-popover[aria-hidden="false"], .component-popover[aria-hidden="false"] { visibility: visible; opacity: 1; pointer-events: auto; }
.popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.popover-heading h2 { font-size: var(--text-sm); font-weight: 500; }
.popover-close { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--color-rule); border-radius: 5px; background: transparent; color: var(--color-ink-2); font-size: 19px; line-height: 1; }
.popover-close:hover { border-color: var(--color-rule-2); background: var(--color-paper-2); }
.range-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: var(--text-xs); }
.range-row output { color: var(--color-cool); font: 400 var(--text-xs)/1.3 var(--font-measure); font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type="range"] { width: 100%; height: 22px; margin: 0 0 4px; accent-color: var(--color-accent); }
.supply-toggle { width: 100%; min-height: 34px; margin: 5px 0; }
.supply-toggle.is-off { border-color: var(--color-rule-2); background: var(--color-paper-2); color: var(--color-muted); }
.panel-note { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.35; }
.meter-reading { display: block; min-height: 48px; margin-bottom: 8px; padding: 6px 9px; border: 1px solid var(--color-rule-2); border-radius: 5px; background: var(--scene-screen); color: var(--scene-chip); font: 500 22px/1.5 var(--font-measure); font-variant-numeric: tabular-nums; text-align: right; }
.meter-reading small { color: var(--scene-chip); font: 400 11px/1.2 var(--font-body); }
.meter-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--color-rule-2); border-radius: 5px; background: var(--color-rule-2); }
.meter-mode { min-height: 36px; border: 0; background: var(--color-paper-2); color: var(--color-ink-2); font: 500 var(--text-xs)/1.2 var(--font-measure); }
.meter-mode:hover { background: var(--color-rule); }
.meter-mode.is-active { background: var(--color-cool-soft); color: var(--color-cool); }
.meter-instruction { min-height: 2.7em; margin-top: 8px; color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.35; }
.meter-details { margin-top: 5px; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.35; }
.meter-clear { width: 100%; min-height: 32px; margin-top: 8px; }
.inspector-content { max-height: min(45vh, 360px); overflow-y: auto; }
.empty-copy { color: var(--color-muted); font-size: var(--text-xs); }
.component-summary { display: grid; gap: 8px; }
.component-summary h3 { margin: 0; font-size: var(--text-md); font-weight: 500; }
.component-summary p, .component-summary label { color: var(--color-ink-2); font-size: var(--text-xs); }
.component-summary select { width: 100%; min-height: 34px; padding: 0 7px; border: 1px solid var(--color-rule-2); border-radius: 5px; background: var(--color-paper-2); font-size: var(--text-sm); }
.component-summary dl { display: grid; gap: 3px; margin: 0; }
.component-summary dl > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--color-rule); padding: 4px 0; }
.component-summary dt { color: var(--color-muted); font-size: 11px; }
.component-summary dd { margin: 0; color: var(--color-cool); font: 400 11px/1.4 var(--font-measure); text-align: right; }
.pin-map { border: 1px solid var(--color-rule); border-radius: 5px; }
.pin-map summary { padding: 7px; color: var(--color-ink-2); font-size: var(--text-xs); cursor: pointer; }
.pin-map dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; margin: 0; padding: 0 7px 7px; }
.pin-map dl > div { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-top: 1px solid var(--color-rule); }
.pin-map dt { color: var(--color-muted); font: 400 11px/1.4 var(--font-measure); }
.pin-map dd { margin: 0; color: var(--color-cool); font-size: 11px; }
.delete-selected { width: 100%; min-height: 32px; margin-top: 10px; }
.is-hidden { display: none !important; }
body.is-dragging-part, body.is-dragging-part * { cursor: copy !important; }

@media (max-width: 800px) {
  .app-shell { grid-template-rows: 52px 64px minmax(0, 1fr); min-height: 440px; }
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand-block strong { font-size: var(--text-md); }
  .brand-block span { font-size: 11px; }
  .topbar-state { gap: 5px; }
  #simulation-state { display: none; }
  .topbar-state .button { min-height: 34px; padding-inline: 8px; font-size: 11px; }
  .parts-toolbar { padding-inline: 6px; }
  .parts-list { gap: 2px; }
  .part-button { grid-template-columns: 19px auto; gap: 4px; min-height: 44px; padding-inline: 7px; }
  .part-button svg { width: 18px; height: 18px; }
  .part-button b, .add-board { font-size: 11px; }
  .add-board { min-height: 36px; padding-inline: 7px; }
  .scene-heading { top: 10px; left: 10px; max-width: calc(100% - 185px); }
  .scene-heading h1 { font-size: var(--text-md); }
  .scene-heading p { max-width: 46vw; font-size: 11px; }
  .scene-actions { top: 8px; right: 8px; gap: 5px; }
  .icon-button, .coordinate-entry summary { min-height: 34px; height: 34px; }
  .icon-button { width: 34px; }
  .coordinate-popover { width: 220px; }
  .anchor-indicator { top: 60px; left: 10px; }
  .scene-status { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .scene-status > div { min-width: auto; padding: 5px 7px; }
  .scene-status > div output { font-size: 11px; }
  .warnings { max-width: min(65vw, 400px); overflow-x: auto; }
  .scene-controls-hint { right: auto; bottom: 110px; left: 8px; max-width: 72vw; padding: 5px 7px; border: 1px solid var(--color-rule-2); border-radius: 4px; background: var(--color-paper-3); text-align: left; }
  .model-note { display: none; }
  .scene-message { top: 92px; left: 10px; max-width: min(300px, calc(100% - 20px)); }
  .device-popover, .component-popover { width: min(250px, calc(100% - 16px)); padding: 10px; }
}

@media (max-width: 460px) {
  .app-shell { grid-template-rows: 50px 60px minmax(0, 1fr); }
  .brand-block span { display: none; }
  .topbar-state .button { font-size: 11px; padding-inline: 6px; }
  .part-button { grid-template-columns: 1fr; justify-items: center; gap: 0; min-width: 50px; min-height: 46px; padding: 3px 5px; }
  .part-button svg { width: 17px; height: 17px; }
  .part-button b { font-size: 11px; }
  .add-board { gap: 3px; min-width: 55px; padding: 3px 5px; }
  .add-board svg { width: 16px; height: 16px; }
  .wire-color-control { gap: 3px; padding-left: 6px; }
  .wire-color-control span { display: none; }
  .wire-color-control select { height: 30px; padding-inline: 5px; font-size: 11px; }
  .scene-heading { max-width: calc(100% - 158px); }
  .scene-heading p { max-width: 42vw; }
  .coordinate-entry summary { padding-inline: 7px; font-size: 11px; }
  .coordinate-entry summary svg { margin-right: 3px; }
  .scene-status > div { padding: 4px 5px; }
  .scene-status > div span { font-size: 11px; }
  .scene-status > div output { font-size: 11px; }
  .scene-status { border-radius: 4px; }
  .scene-controls-hint { bottom: 120px; max-width: 72vw; }
  .warnings { gap: 3px; max-width: calc(100vw - 20px); }
  .warnings li { max-width: 180px; font-size: 11px; }
  .meter-reading { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}