/* ============================================================================
   test-bench.css — the test bench screen (assets/js/test-bench.js)
   Shared by Practise Testing and Learn to Test. Reads the Electronics tokens
   (--card, --text, --muted, --border, --accent-2 …). One screen at 1180 × 760.
   The meter stays yellow in both appearances (BENCH-PLAN R3); the board's own
   colours come from the stripboard engine's --sbd-* tokens.
   ============================================================================ */
.tbx{
  --tb-ok:#15803d; --tb-ok-bg:#effaf3; --tb-bad:#b91c1c; --tb-bad-bg:#fdf0ef;
  position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px;
  height:clamp(600px, calc(100dvh - 120px), 900px); font-size:18px; line-height:1.5; color:var(--text);
}
@media (prefers-color-scheme: dark){
  .tbx{ --tb-ok:#3ddc9a; --tb-ok-bg:rgba(61,220,154,.14); --tb-bad:#ff8a7a; --tb-bad-bg:rgba(255,138,122,.13); }
  .tbx-board{
    --sbd-track:#2a3a34; --sbd-hole:#0d1815; --sbd-holeline:#47574f;
    --sbd-lab:#8fa39a; --sbd-body:#17231e; --sbd-ink:#dcece5;
    --sbd-icfill:#1c2b25; --sbd-cut:#ff8a7a; --sbd-tp:#6fc0f0;
    --sbd-page:#0b1512; --sbd-hl:#f0b429; --sbd-hl2:#6fc0f0; --sbd-cur:#3ddc9a; --sbd-lhalo:#b9c9c1;
  }
}
.tbx [hidden]{ display:none !important; }
.tbx button{
  font:800 16px/1.2 "Trebuchet MS","Segoe UI",system-ui,sans-serif; min-height:48px; padding:6px 12px;
  border:1px solid var(--border-strong); border-radius:10px; background:var(--card); color:var(--text);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.tbx button[aria-pressed="true"]{ background:var(--accent-2); color:var(--card); border-color:var(--accent-2); }
.tbx button:disabled, .tbx button[aria-disabled="true"]{ opacity:.45; cursor:default; }
.tbx button:focus-visible, .tbx select:focus-visible, .tbx [tabindex]:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.tbx-seg{ display:inline-flex; }
.tbx-seg button{ border-radius:0; margin-left:-1px; }
.tbx-seg button:first-child{ border-radius:10px 0 0 10px; margin-left:0; }
.tbx-seg button:last-child{ border-radius:0 10px 10px 0; }

/* ---- job line */
.tbx-job{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px 12px; }
.tbx-title{ font-weight:900; font-size:19px; }
.tbx-sub{ font-weight:800; color:var(--muted); font-size:18px; margin-left:8px; }
.tbx-should{ font-size:18px; }
.tbx-tech{ font-size:18px; line-height:1.4; font-weight:900; text-align:right; }
.tbx-tech .ok, .tbx td.ok{ color:var(--tb-ok); }
.tbx-tech .bad, .tbx td.bad{ color:var(--tb-bad); }
.tbx-sc{ display:block; color:var(--tb-bad); }

/* ---- main grid: board left, meter right */
.tbx-main{ display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:10px; min-height:0; }
.tbx-left{ display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:6px; min-height:0; }
.tbx-left.no-ins{ grid-template-rows:auto minmax(0,1fr) auto; }
.tbx-bar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tbx-tps{ display:inline-flex; gap:4px; }
.tbx-tps button{ min-width:52px; padding:6px 8px; }
.tbx-pick select{ min-height:48px; max-width:200px; font:800 16px "Trebuchet MS","Segoe UI",system-ui,sans-serif;
  border:1px solid var(--border-strong); border-radius:10px; background:var(--card); color:var(--text); padding:0 8px; }
/* power, the slide switches, the LDR's lamp or cap, and sound (§16 3.2b) */
.tbx-ctl{ display:flex; gap:6px 14px; align-items:center; flex-wrap:wrap; }
.tbx-in{ display:inline-flex; gap:6px; align-items:center; }
.tbx-ctl .tbx-seg button{ padding:6px 11px; }
.tbx-log-btns{ display:inline-flex; gap:6px; }
/* power: one toggle beside the tools (BENCH-PLAN §16, r1), drawn so it is found at a glance:
   the power mark, and its state in words, red while off, green while on */
.tbx .tbx-pw{ margin-left:auto; flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:6px; white-space:nowrap; border:2px solid var(--tb-bad); }
.tbx-pw-ic{ width:20px; height:20px; flex:none; fill:none; stroke:var(--tb-bad); stroke-width:2.6; stroke-linecap:round; }
.tbx-pw-s{ font-weight:900; color:var(--tb-bad); }
.tbx .tbx-pw[aria-pressed="true"]{ background:var(--tb-ok); border-color:var(--tb-ok); color:var(--tb-on-ink); }
.tbx-pw[aria-pressed="true"] .tbx-pw-ic{ stroke:currentColor; }
.tbx-pw[aria-pressed="true"] .tbx-pw-s{ color:inherit; }
.tbx .tbx-pw.is-call{ outline:4px solid var(--tb-go); outline-offset:3px; animation:tbx-call 1s ease-in-out 2; }
@keyframes tbx-call{ 50%{ outline-offset:7px; } }
.tbx-board{ position:relative; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--sbd-page,#fff); border:1px solid var(--border); border-radius:12px; }
.tbx-board.is-copper{ background:#d8c8a2; }
.tbx-board svg{ width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.tbx-board .tbx-circ{ touch-action:manipulation; }
.tbx-under{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:8px; height:148px; }
.tbx-status{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:6px 10px;
  font-size:18px; line-height:1.5; display:flex; flex-direction:column; gap:0; overflow:hidden; }
.tbx-led b{ font-weight:900; }
.tbx-off{ color:var(--muted); font-weight:800; }
.tbx-log{ background:var(--card); border:1px solid var(--border); border-radius:10px; display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; overflow:hidden; }
.tbx-log-h{ display:flex; justify-content:space-between; align-items:center; padding:0 2px 0 10px; font-size:18px; }
.tbx-log-h button{ min-height:44px; padding:4px 12px; }
.tbx-log-b{ overflow:auto; padding:0 10px 4px; }
.tbx-log table{ width:100%; border-collapse:collapse; font-size:18px; line-height:1.5; table-layout:fixed; }
.tbx-log th:nth-child(1){ width:27%; } .tbx-log th:nth-child(2){ width:30%; } .tbx-log th:nth-child(4){ width:34px; }
.tbx-log th{ position:sticky; top:0; background:var(--card); text-align:left; font-size:18px; line-height:1.5; color:var(--muted); padding:0 6px; box-shadow:0 1px 0 var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbx-log td{ padding:1px 6px; vertical-align:top; }
.tbx-log td:first-child{ font-weight:900; }
.tbx-log tr.tbx-setrow td{ font-weight:800; color:var(--muted); text-align:left; padding-top:3px; }
.tbx-log td:last-child{ font-weight:900; text-align:center; }
.tbx-none{ color:var(--muted); }

/* ---- right column */
.tbx-right{ display:grid; grid-template-rows:minmax(0,1fr) auto auto auto auto; gap:6px; min-height:0; }
.tbx-inst{ position:relative; min-height:0; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:4px; overflow:hidden; }
.tbx-meter, .tbx-probe{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.tbx-meter svg{ height:100%; width:auto; max-width:100%; display:block; }
.tbx-probe svg{ width:100%; height:auto; display:block; }
.tbx-beep{ position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#111; color:#ffd84d;
  font-weight:900; font-size:22px; letter-spacing:.04em; padding:2px 14px; border-radius:8px; }
.tbx-dialrow{ display:flex; gap:6px; }
.tbx-dialrow > button:first-child, .tbx-dialrow > button:last-child{ min-width:56px; font-size:18px; }
.tbx-cur{ flex:1; }
.tbx-leadrow, .tbx-row, .tbx-proberow{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tbx-lbl{ font-weight:900; font-size:16px; }
.tbx-row button{ padding:6px 8px; }
.tbx-leadrow .tbx-seg button{ padding:6px 9px; }
.tbx-fb{ border-left:5px solid var(--border-strong); background:var(--surface-2); border-radius:8px; padding:6px 10px;
  font-size:18px; line-height:1.5; height:140px; overflow:auto; }
.tbx-fb.is-ok{ border-color:var(--tb-ok); background:var(--tb-ok-bg); }
.tbx-fb.is-bad{ border-color:var(--tb-bad); background:var(--tb-bad-bg); }
.tbx-fb.is-look{ border-color:var(--accent-2); }
.tbx-fb-h{ font-weight:900; }
.tbx-fb.is-ok .tbx-fb-h{ color:var(--tb-ok); }
.tbx-fb.is-bad .tbx-fb-h{ color:var(--tb-bad); }
.tbx-block{ margin:.35rem 0; }
/* a refused tap: why, and what to do next, in the job line and in the box (never only spoken) */
.tbx-nope{ margin:0; flex:1 1 560px; min-width:0; max-width:none; font-size:18px; line-height:1.5; padding:1px 10px;
  border-left:5px solid var(--tb-go); border-radius:6px; background:var(--tb-nope-bg); }
.tbx-job.has-nope .tbx-should{ display:none; }
.tbx-fb.is-nope{ border-color:var(--tb-go); background:var(--tb-nope-bg); }
.tbx-fb.is-nope .tbx-fb-h{ color:var(--tb-go-text); }
.tbx-nope.is-new, .tbx-fb.is-new{ animation:tbx-nudge .4s ease-out; }
@keyframes tbx-nudge{ 20%{ transform:translateX(-5px); } 45%{ transform:translateX(4px); } 70%{ transform:translateX(-2px); } }

/* ---- the job flow (Practise Testing): header steps, predict panel, cards, diagnose */
.tbx{ --tb-go:#c2410c; --tb-go-ink:#fff; --tb-go-text:#9a3412; --tb-nope-bg:#fff1e8; --tb-on-ink:#fff; }
@media (prefers-color-scheme: dark){ .tbx{ --tb-go:#ff9d6e; --tb-go-ink:#1a0d05; --tb-go-text:#ffb48f; --tb-nope-bg:rgba(255,157,110,.15); --tb-on-ink:#04140d; } }
.tbx .tbx-diag, .tbx .tbx-go{ background:var(--tb-go); color:var(--tb-go-ink); border-color:var(--tb-go); }
.tbx-diag{ margin-left:auto; }
.tbx-job.is-jobs{ display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:2px; }
.tbx-job.is-jobs .tbx-job-t{ flex:1 1 auto; }
.tbx-job.is-jobs .tbx-sub{ display:none; }
.tbx-job.is-jobs .tbx-should{ flex:1 1 560px; min-width:0; }
.tbx-job.is-jobs .tbx-tech{ flex:0 0 auto; }
.tbx-jobno{ font-weight:800; color:var(--muted); }
.tbx-steps{ list-style:none; margin:0; padding:0; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.tbx-steps li{ border:1px solid var(--border-strong); border-radius:999px; padding:0 9px; font-weight:800; color:var(--muted); white-space:nowrap; }
.tbx-steps li.is-done{ color:var(--tb-ok); border-color:var(--tb-ok); }
.tbx-steps li.is-now{ background:var(--accent-2); border-color:var(--accent-2); color:var(--card); }
.tbx-left{ position:relative; }
.tbx-jobpanel{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 12px; }
.tbx-q{ font-size:18px; margin-bottom:6px; }
.tbx-qn{ color:var(--muted); font-weight:800; }
.tbx-opts{ display:flex; flex-wrap:wrap; gap:6px; }
.tbx-opts button{ font-size:18px; }
.tbx button.is-wrong{ border:2px solid var(--tb-bad); background:var(--tb-bad-bg); color:var(--text); opacity:1; }
.tbx button.is-right{ border:2px solid var(--tb-ok); background:var(--tb-ok-bg); color:var(--text); opacity:1; }
.tbx-qfb{ margin-top:6px; }
.tbx-qfb:empty{ display:none; }
.tbx-qfb, .tbx-dg-ffb{ border-left:5px solid var(--border-strong); background:var(--surface-2); border-radius:8px; padding:4px 10px; }
.tbx-qfb.is-ok, .tbx-dg-ffb.is-ok{ border-color:var(--tb-ok); background:var(--tb-ok-bg); }
.tbx-qfb.is-bad, .tbx-dg-ffb.is-bad{ border-color:var(--tb-bad); background:var(--tb-bad-bg); }
.tbx-qfb .tbx-go{ margin-left:8px; }
.tbx-pop{ position:absolute; inset:0; z-index:20; display:flex; align-items:flex-start; justify-content:flex-end; padding:58px 10px 0 0; pointer-events:none; }
.tbx-pop.is-modal{ align-items:center; justify-content:center; padding:0; background:rgba(19,32,28,.38); border-radius:12px; pointer-events:auto; }
.tbx-card{ pointer-events:auto; background:var(--card); border:2px solid var(--text); border-radius:14px; padding:12px 18px; max-width:620px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); }
.tbx-card h2{ font-size:22px; margin:0 0 6px; }
.tbx-card p{ margin:0 0 6px; }
.tbx-card-k{ font-weight:900; color:var(--muted); }
.tbx-card-s{ color:var(--muted); }
.tbx-card.is-done{ max-width:340px; }
.tbx-diagbox{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(19,32,28,.45); border-radius:12px; padding:6px; }
.tbx-dg-in{ background:var(--card); border:2px solid var(--text); border-radius:14px; width:min(1160px,100%); max-height:100%; overflow:auto; padding:8px 14px 10px; }
.tbx-dg-h{ display:flex; justify-content:space-between; align-items:center; }
.tbx-dg-cols{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px; }
.tbx-dg-cols h3{ font-size:18px; margin:2px 0 6px; font-weight:800; }
.tbx-need{ color:var(--muted); }
.tbx-dg-opts{ display:grid; gap:6px; margin-bottom:8px; }
.tbx-dg-opts button{ text-align:left; font-size:18px; }
.tbx-dg-e.is-off{ opacity:.55; }
.tbx-ev{ display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; min-height:44px; border:1px solid var(--border); border-radius:8px; padding:4px 8px; margin-bottom:5px; cursor:pointer; }
.tbx-ev input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--accent-2); }
.tbx-ev-t{ font-weight:800; }
.tbx-ev-fb{ grid-column:2; }
.tbx-ev-fb:empty{ display:none; }
.tbx-ev.is-ok{ border:2px solid var(--tb-ok); background:var(--tb-ok-bg); }
.tbx-ev.is-bad{ border:2px solid var(--tb-bad); background:var(--tb-bad-bg); }
.tbx-dg-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.tbx-dg-sum{ flex:1 1 320px; }
.tbx-dg-sum .tbx-go{ margin-left:8px; }

/* ---- Learn to Test: the steps marked at a reading, what Show me is doing, the task list */
.tbx-checks{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:4px; vertical-align:middle; }
.tbx-ck{ border:1px solid var(--border-strong); border-radius:999px; padding:0 9px; font-weight:800; font-size:16px; color:var(--muted); white-space:nowrap; }
.tbx-ck.is-ok{ color:var(--tb-ok); border-color:var(--tb-ok); background:var(--tb-ok-bg); }
.tbx-ck.is-bad{ color:var(--tb-bad); border-color:var(--tb-bad); background:var(--tb-bad-bg); }
.tbx .is-hl{ outline:4px solid var(--tb-go); outline-offset:3px; border-radius:12px; }
.tbx .cm-tap.is-hl{ outline:none; fill:rgba(194,65,12,.16); stroke:#c2410c; stroke-width:12; }
.tbx-tl{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:4px; }
.tbx-tl li{ display:flex; align-items:center; gap:10px; min-height:44px; }
.tbx-tl button{ min-width:250px; text-align:left; }
.tbx-tl-soon{ display:inline-block; min-width:250px; padding:0 12px; color:var(--muted); font-weight:800; }
.tbx-tl-r{ color:var(--tb-ok); font-weight:900; }
.tbx-card .tbx-opts{ margin-top:4px; }

/* ---- the class meter (booklet geometry; yellow in both appearances) */
.tbx .cm-body{ fill:#f2c230; stroke:#111; stroke-width:8; }
.tbx .cm-lcd{ fill:#cfdcc8; stroke:#111; stroke-width:8; }
.tbx .cm-seg{ fill:#111; }
.tbx .cm-btn{ fill:#fff; stroke:#111; stroke-width:8; }
.tbx .cm-t{ fill:#111; text-anchor:middle; font-family:"Trebuchet MS",sans-serif; }
.tbx .cm-ink{ fill:#111; }
.tbx .cm-line{ stroke:#111; stroke-width:3; fill:none; }
.tbx .cm-sec{ fill:none; stroke:#111; stroke-width:3; }
.tbx .cm-knob{ fill:#fff; stroke:#111; stroke-width:10; }
.tbx .cm-sock{ fill:#fff; stroke:#111; stroke-width:8; }
.tbx .cm-tap, .tbx .cm-hit{ fill:transparent; cursor:pointer; outline:none; }
.tbx .cm-tap:focus-visible{ fill:rgba(8,115,94,.14); stroke:#08735e; stroke-width:10; }
.tbx .cm-hit.cm-on{ fill:rgba(8,115,94,.18); stroke:#08735e; stroke-width:7; }
.tbx .cm-hit:focus-visible{ stroke:#c2410c; stroke-width:7; }

/* ---- the logic probe */
.tbx .pr-tip{ stroke:#9aa0a6; stroke-width:5; stroke-linecap:round; }
.tbx .pr-body{ fill:#2f3437; stroke:#111; stroke-width:2; }
.tbx .pr-led{ fill:#4b5157; stroke:#111; stroke-width:2; }
.tbx .pr-hi.on{ fill:#ff3030; } .tbx .pr-lo.on{ fill:#22c55e; } .tbx .pr-pulse.on{ fill:#ffb000; }
.tbx .is-dead .pr-led{ fill:#4b5157; }
.tbx .pr-lab{ fill:var(--text); font:900 15px "Trebuchet MS",sans-serif; }
.tbx .pr-sw{ fill:#15181a; stroke:#111; } .tbx .pr-knob{ fill:#d9dde0; }
.tbx .pr-note{ fill:var(--muted); font:800 13px "Trebuchet MS",sans-serif; }

/* ---- the bench layer on the board */
.tbx .tbx-print{ font:700 11px "Trebuchet MS",sans-serif; fill:var(--sbd-ink,#13201c); }
.tbx .tbx-glow{ pointer-events:none; }
.tbx .tbx-ring{ fill:none; stroke-width:3; }
.tbx .tbx-ring.is-red{ stroke:#c62828; } .tbx .tbx-ring.is-black{ stroke:var(--sbd-ink,#222); } .tbx .tbx-ring.is-tip{ stroke:#c2410c; }
.tbx .tbx-cab-o{ fill:none; stroke:#111; stroke-width:8; stroke-linecap:round; }
.tbx .tbx-cab{ fill:none; stroke-width:5; stroke-linecap:round; }
.tbx .tbx-cab.is-red{ stroke:#d32f2f; } .tbx .tbx-cab.is-black{ stroke:#3a3a3a; } .tbx .tbx-cab.is-probe{ stroke:#5a6066; }
.tbx .tbx-needle{ stroke:#c9ced2; stroke-width:3; stroke-linecap:round; }
.tbx .tbx-ntip{ fill:#eee; stroke:#555; stroke-width:1; }
.tbx .tbx-clip{ stroke:#111; stroke-width:1.2; } .tbx .tbx-clip.is-red{ fill:#c62828; } .tbx .tbx-clip.is-black{ fill:#2a2a2a; }
.tbx .tbx-jaw{ stroke:#9aa0a6; stroke-width:2.5; stroke-linecap:round; }
.tbx .tbx-pen{ fill:#2f3437; stroke:#111; stroke-width:1.5; }
.tbx .tbx-look{ fill:none; stroke:#e86a00; stroke-width:3; stroke-dasharray:7 5; }
.tbx .tbx-dring{ fill:none; stroke-width:3.5; }
.tbx .tbx-dring.is-red{ stroke:#c62828; } .tbx .tbx-dring.is-black{ stroke:var(--text); } .tbx .tbx-dring.is-tip{ stroke:#c2410c; }
.tbx .tb-dtp{ cursor:pointer; }
.tbx .tbx-lp-bg{ fill:var(--sbd-page,#fff); }
.tbx .is-copper .tbx-lp-bg{ fill:#d8c8a2; }
.tbx .tbx-lp-rim{ fill:none; stroke:#13201c; }
.tbx .tbx-lp-x{ fill:none; stroke:#c2410c; }
.tbx .tbx-lp-t{ font-family:"Trebuchet MS",sans-serif; font-weight:900; fill:#13201c; paint-order:stroke; stroke:#fff; stroke-width:4px; }

/* ---- the copper side: a physical object, so the same in both appearances */
.tbx .tbx-cl{ font:700 11px "Trebuchet MS",sans-serif; fill:#5a4626; }
.tbx .tbx-shlab{ font:800 12px "Trebuchet MS",sans-serif; fill:rgba(60,45,25,.8); }
.tbx .tbx-ctitle{ font:900 15px "Trebuchet MS",sans-serif; fill:#4a3818; }

/* ---- the big dial */
.tbx-dial{ position:fixed; inset:0; z-index:1002; background:rgba(19,32,28,.55); display:flex; align-items:center; justify-content:center; }
.tbx-dial-in{ display:flex; gap:16px; align-items:center; background:var(--card); border:2px solid var(--text); border-radius:16px; padding:12px 16px; max-width:96vw; }
.tbx-dial-art{ width:min(720px, 88dvh, 66vw); aspect-ratio:1; }
.tbx-dial-art svg{ width:100%; height:100%; display:block; }
.tbx-dial-side{ width:250px; font-size:18px; line-height:1.5; }
.tbx-dial-now{ font-weight:900; font-size:18px; }
.tbx-dial-side button{ width:100%; margin-top:8px; }
.tbx-dial-fb .tbx-fb-h{ color:var(--tb-bad); }
.tbx-dial-fb button{ display:none; }

/* ---- narrower screens: board on top, controls under it */
@media (max-width:900px){
  .tbx{ height:auto; }
  .tbx-main{ grid-template-columns:1fr; }
  .tbx-left{ grid-template-rows:auto auto auto auto; } .tbx-left.no-ins{ grid-template-rows:auto auto auto; }
  .tbx-board{ aspect-ratio:1.4; }
  .tbx-right{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto; }
  .tbx-inst{ grid-row:span 4; height:min(420px, 70vw); }
  .tbx-fb{ grid-column:1 / -1; }
  .tbx-dg-cols{ grid-template-columns:1fr; }
  .tbx-diagbox{ position:fixed; z-index:1002; }
  .tbx-pop{ padding-top:8px; }
  .tbx-dial-in{ flex-direction:column; }
  .tbx-dial-art{ width:min(720px, 92vw, 70dvh); }
}
@media (max-width:520px){
  .tbx-under{ grid-template-columns:1fr; height:auto; }
  .tbx-log-b{ max-height:200px; }
  .tbx-log th{ white-space:normal; }
  .tbx-right{ grid-template-columns:1fr; }
  .tbx-inst{ grid-row:auto; height:360px; }
}
@media (prefers-reduced-motion: reduce){
  .tbx *{ transition:none !important; animation:none !important; }
}

/* ---- the bench layer's moving parts (§16): switch knobs, the LDR, lifted ends, the pump */
.tbx-slot{ fill:#3b3f44; }
.tbx-knob{ fill:#f4f5f6; stroke:#2b2f33; stroke-width:1.2; }
.tbx-cap circle{ fill:#141414; stroke:#000; stroke-width:1; }
.tbx-cap .tbx-cap-hi{ fill:#5a5a5a; stroke:none; }
@media (prefers-color-scheme: dark){ .tbx-cap circle{ stroke:#8fa39a; } }
.tbx-lamp{ fill:rgba(255,214,51,.42); stroke:#e0a800; stroke-width:1.5; stroke-dasharray:4 3; }
.tbx-gap{ fill:none; stroke:#c2410c; stroke-width:2; stroke-dasharray:3 2; }
.tbx-liftleg{ fill:none; stroke:#9aa1a8; stroke-width:2.6; stroke-linecap:round; }
.tbx-liftleg.is-link{ stroke:#6b7280; stroke-width:3.4; }
.tbx-liftend{ fill:#c9ced3; stroke:#2b2f33; stroke-width:1.2; }
.tbx-below{ fill:var(--sbd-page,#fff); }
.tbx-fly{ fill:none; stroke-width:3; stroke-linecap:round; }
.tbx-fly.is-red{ stroke:#d41c1c; } .tbx-fly.is-black{ stroke:#222; }
.tbx-pump-b{ fill:#2f6aa8; stroke:#173a5e; stroke-width:1.5; }
.tbx-pump-t{ fill:#fff; font:900 19px "Trebuchet MS","Segoe UI",system-ui,sans-serif; }
.tbx-pump-cap{ fill:var(--muted); font:800 21px "Trebuchet MS","Segoe UI",system-ui,sans-serif; }
.tbx-drop{ fill:#3fa9f5; opacity:0; }
.tbx-pump.is-on .tbx-drop{ opacity:1; animation:tbx-drip .6s linear infinite; }
.tbx-pump.is-on .tbx-drop.d1{ animation-delay:.2s; } .tbx-pump.is-on .tbx-drop.d2{ animation-delay:.4s; }
@keyframes tbx-drip{ from{ transform:translateY(-4px); opacity:1; } to{ transform:translateY(6px); opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .tbx-pump.is-on .tbx-drop{ animation:none; opacity:1; } }

/* ---- Learn to Test: an item's own panel (parts list, pin-out, truth table) in the log's place */
.tbx-tpanel{ max-height:210px; overflow:auto; }
.tbx-ph, .tbx-tt caption{ font-weight:900; text-align:left; }
.tbx-plist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 18px; }
.tbx-tt{ border-collapse:collapse; }
.tbx-tt th, .tbx-tt td{ border:1px solid var(--border-strong); padding:0 14px; text-align:center; min-width:64px; }
.tbx-tt th{ font-weight:900; }
.tbx-fig{ margin:0; display:flex; gap:14px; align-items:center; }
.tbx-fig svg{ height:150px; width:auto; flex:none; }
.tbx-fig figcaption{ font-weight:800; }
@media (max-width:520px){ .tbx-plist{ grid-template-columns:1fr; } .tbx-fig{ flex-direction:column; align-items:flex-start; } }