/* ============================================================================
   multimeter.css — Using a Multimeter
   Same paper-and-ink design language as the oscilloscope tool; the meter
   itself renders as a dark instrument with an amber protective boot (field
   meter) or a slim compact body (pocket meter), switched via
   .meter-shell[data-meter].
   ========================================================================= */

:root {
    --paper: #f6f3ec;
    --paper-2: #efeadf;
    --ink: #1c1a15;
    --ink-2: #4a463d;
    --ink-3: #8a8478;
    --rule: #d9d3c2;
    --accent: #c8341a;
    --accent-2: #9a2818;
    --meter-body: #3a3d42;
    --meter-face: #2e3136;
    --boot: #e8a91d;
    --boot-2: #c98f12;
    --lcd-bg: #c9d2bf;
    --lcd-ink: #1d241a;
    --yellow-btn: #f0c53a;
    --warn: #d68a1a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(200, 52, 26, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(200, 52, 26, 0.03) 0%, transparent 50%);
}
.serif { font-family: 'Fraunces', Georgia, serif; }
.wrap { max-width: 1330px; margin: 0 auto; padding: 16px 16px 40px; }

/* ===== Masthead (same as the scope tool) ===== */
.masthead {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.masthead h1 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 500;
    font-size: clamp(22px, 4vw, 40px); margin: 0;
    letter-spacing: -0.02em; line-height: 1.1;
}
.masthead h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.masthead-links { display: flex; align-items: center; gap: 2px; }
.masthead-link {
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--ink-3); background: transparent; border: none;
    padding: 6px 8px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--rule);
    transition: color 0.15s, text-decoration-color 0.15s;
}
.masthead-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.masthead-sep { color: var(--ink-3); font-size: 13px; user-select: none; padding: 0 2px; opacity: 0.6; }
body.intro-active .masthead-links { display: none; }

/* ===== Layout ===== */
/* Meter on the left, bench on the right — fixed widths, centered on the page.
   The side panel is reserved for the intro/lesson guide card. */
.main-stack {
    display: grid;
    grid-template-columns: 400px 290px;
    grid-template-areas: "meter bench";
    gap: 20px;
    align-items: start;
    justify-content: center;
    width: 100%;
}
.bench { grid-area: bench; }
.meter-shell { grid-area: meter; }
.side-host { grid-area: side; display: none; }
body.intro-active .side-host { display: flex; }
/* Tour + guided lessons: meter + guide only (bench / free-practice panel hidden). */
body.intro-active .main-stack {
    grid-template-columns: 400px minmax(280px, 380px);
    grid-template-areas: "meter side";
}
body.intro-active .bench { display: none !important; }
@media (max-width: 760px) {
    .main-stack {
        grid-template-columns: min(400px, 100%);
        grid-template-areas: "meter" "bench";
    }
    body.intro-active .main-stack {
        grid-template-columns: min(400px, 100%);
        grid-template-areas: "meter" "side";
    }
}

/* ===== The bench panel ===== */
.bench {
    display: flex; flex-direction: column; gap: 10px;
}
.bench-actions {
    display: flex; gap: 8px; align-items: stretch;
    /* Keep in lockstep with .meter-tabs height. */
    --bar-h: 44px;
}
.bench-actions .btn.big {
    flex: 1; width: auto; min-width: 0;
    height: var(--bar-h); min-height: var(--bar-h);
    padding: 0 8px; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.bench-label {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 5px;
}
.bench-body {
    display: flex; flex-direction: column; gap: 10px;
}
.bench-body[hidden] { display: none; }
.bench-body #swap-leads-btn { width: 100%; }
/* Tour-only hide is declared above; lessons keep the bench visible. */

/* ===== THE METER ===== */
.meter-shell {
    display: flex; flex-direction: column; align-items: center;
    position: relative; gap: 10px;
}
/* Tabs above the meter — click to switch Field / Compact.
   Same bar height as .bench-actions (SET CIRCUIT / RESET METER). */
.meter-tabs {
    --bar-h: 44px;
    display: grid; grid-template-columns: 1fr 1fr;
    width: 380px; max-width: 100%;
    height: var(--bar-h); min-height: var(--bar-h);
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    background: var(--paper-2);
    box-sizing: border-box;
}
.meter-tab {
    appearance: none; border: none; background: transparent;
    padding: 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; line-height: 1.15;
    border-right: 1px solid var(--rule);
    transition: background 0.12s, color 0.12s;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.meter-tab:last-child { border-right: none; }
.meter-tab small {
    display: block; font-size: 9px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.08em; margin-top: 1px;
}
.meter-tab:hover:not(.active) { background: rgba(28, 26, 21, 0.04); color: var(--ink); }
.meter-tab.active {
    background: var(--ink); color: var(--paper);
}
.meter-tab.active small { color: #cfccc2; }
.meter-tab:focus-visible {
    outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1;
}
/* Both meters share one FIXED width — same footprint, different skin. */
.meter-boot {
    background: linear-gradient(160deg, var(--boot), var(--boot-2));
    border-radius: 26px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(30, 25, 10, 0.28), inset 0 2px 0 rgba(255,255,255,0.25);
    width: 380px;
    max-width: 100%;
}
.meter-face {
    background: linear-gradient(175deg, var(--meter-body), var(--meter-face));
    border-radius: 16px;
    padding: 16px 18px 20px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
}
/* Pocket skin: dark body, thinner boot, no field-yellow — same width. */
.meter-shell[data-meter="pocket"] .meter-boot {
    background: linear-gradient(160deg, #4a4e55, #35383e);
    padding: 10px;
    border-radius: 20px;
}
.meter-shell[data-meter="pocket"] .meter-face { padding: 12px 14px 16px; }

.meter-brand {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
}
.meter-model {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 15px; color: #e8e4da; letter-spacing: 0.06em;
    text-transform: uppercase;
}
.meter-tagline {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    color: var(--boot); letter-spacing: 0.14em;
}

/* ===== LCD ===== */
.lcd {
    background: var(--lcd-bg);
    border: 3px solid #17191c;
    border-radius: 8px;
    padding: 8px 12px 10px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.2s;
    /* Fixed min height so OFF (blank digits) cannot collapse the face. */
    min-height: 108px;
}
/* Hide content but keep layout size when the dial is OFF. */
.lcd.lcd-off .lcd-main, .lcd.lcd-off .lcd-annun, .lcd.lcd-off .lcd-bar,
.lcd.lcd-off .lcd-range { visibility: hidden; }
.lcd-annun {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    color: var(--lcd-ink); min-height: 28px;
}
.lcd-annun-left {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    min-width: 0; flex: 1; padding-top: 2px;
}
/* Fixed segment stacks — AC over DC, Hz over % — permanent like a real LCD. */
.lcd-annun-right {
    display: flex; gap: 8px; align-items: flex-start; flex: none;
}
.an-stack {
    display: flex; flex-direction: column; align-items: center;
    gap: 1px; line-height: 1.15;
}
.lcd-annun .an { opacity: 0.08; transition: opacity 0.1s; }
.lcd-annun .an.on { opacity: 1; }
.lcd-annun .an-slot {
    display: block; text-align: center; letter-spacing: 0.04em;
    min-width: 1.6em; /* reserved width so neighbors never shift */
}
.lcd-annun .an-minmax {
    display: inline-block; min-width: 2.6em; /* MAX / MIN / AVG */
}
.lcd-annun .an-bolt.on { color: #a33; }
.lcd-main {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
    min-height: 56px;
}
.lcd-neg {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 40px; color: var(--lcd-ink); visibility: hidden;
}
.lcd-digits {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 46px; letter-spacing: 0.04em; color: var(--lcd-ink);
    font-variant-numeric: tabular-nums;
    transform: skewX(-4deg);   /* seven-segment lean */
}
.lcd-unit {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 20px; color: var(--lcd-ink); min-width: 42px;
}
/* Continuity visual — semi-transparent waves expand from the meter body
   while the beeper sounds (works muted / for deaf/hard-of-hearing students). */
.beep-waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.12s;
}
.meter-shell.beeping .beep-waves { opacity: 1; }
.beep-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 92%;
    height: 88%;
    border: 2px solid rgba(200, 52, 26, 0.38);
    border-radius: 32px;
    box-shadow: 0 0 12px rgba(200, 52, 26, 0.12);
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    animation: none;
}
.meter-shell.beeping .beep-ring {
    animation: beep-wave 1.35s ease-out infinite;
}
.meter-shell.beeping .beep-ring:nth-child(2) { animation-delay: 0.45s; }
.meter-shell.beeping .beep-ring:nth-child(3) { animation-delay: 0.9s; }
@keyframes beep-wave {
    0%   { transform: translate(-50%, -50%) scale(0.92); opacity: 0.42; }
    70%  { opacity: 0.12; }
    100% { transform: translate(-50%, -50%) scale(1.28); opacity: 0; }
}
/* 33-segment bargraph (field meter) */
/* Range scale above the bargraph — 0 at the left, the active range's full
   scale at the right, exactly like the range annunciation on the real
   field meter. Populated by renderRange(); field meter only. */
.lcd-range {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    color: var(--lcd-ink); opacity: 0.8; margin-top: 6px; line-height: 1;
    min-height: 11px;
}
.lcd-bar { display: flex; gap: 2px; margin-top: 3px; height: 8px; }
.lcd-bar i {
    flex: 1; background: rgba(29, 36, 26, 0.12); border-radius: 1px;
}
.lcd-bar i.lit { background: var(--lcd-ink); }

/* ===== Tooltips =====
   Any element with data-tip grows a small dark bubble above it on hover —
   plain-language names for every symbol (dial legends, LCD annunciators,
   jacks) without opening the Quick Reference. Pure CSS: a delayed
   opacity/visibility transition so quick mouse passes don't flash tips. */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 7px);
    transform: translateX(-50%);
    background: #14141a; color: #f0ede4;
    font-family: system-ui, sans-serif;
    font-size: 11.5px; font-weight: 500; letter-spacing: 0;
    line-height: 1.35; white-space: nowrap;
    padding: 5px 9px; border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
    z-index: 95;
}
[data-tip]:hover::after {
    opacity: 1; visibility: visible;
    transition-delay: 0.3s, 0.3s;
}

/* ===== Buttons row ===== */
.meter-buttons {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    margin: 14px 0 6px;
}
.mbtn {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.04em;
    background: #52565e; color: #e8e4da;
    border: 1px solid #23252a; border-bottom-width: 3px;
    border-radius: 7px; padding: 7px 10px; cursor: pointer;
    transition: all 0.08s;
}
.mbtn:active { transform: translateY(1px); border-bottom-width: 2px; }
.mbtn.active { background: #7f858f; color: #16181b; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.mbtn-yellow { background: var(--yellow-btn); color: #4a3800; border-color: #8a6d10; }
.mbtn-yellow.active { background: #ffe071; color: #4a3800; }

/* ===== Dial ===== */
.dial-area { display: flex; justify-content: center; padding: 12px 0 6px; }
.dial-wrap { position: relative; width: 280px; height: 280px; }
.dial {
    position: absolute; left: 50%; top: 50%;
    width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #63666d, #43464c 65%, #33363b);
    border: 3px solid #202226;
    box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.15);
    transform: rotate(var(--rot));
    transition: transform 0.18s ease-out;
    cursor: pointer;
}
.dial:focus-visible { outline: 3px solid var(--boot); outline-offset: 3px; }
.dial-grip {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 116px;
    margin: -58px 0 0 -20px; border-radius: 20px;
    background: linear-gradient(90deg, #3a3d42, #55585f 50%, #3a3d42);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
}
.dial-pointer {
    position: absolute; left: 50%; top: 5px; width: 9px; height: 26px;
    margin-left: -4.5px; border-radius: 4px;
    background: var(--boot);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
/* One consistent type scale for all panel markings: dial legends 14.5px,
   sub-legends 10.5px, symbols 1.25em, schematic icons sized to the
   cap height of the text they sit beside. */
.dial-label {
    position: absolute; transform: translate(-50%, -50%);
    background: none; border: none; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14.5px;
    color: #cfccc2; text-align: center; line-height: 1.15;
    padding: 4px 6px; border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}
.dial-label small {
    display: block; font-size: 10.5px; color: var(--boot); font-weight: 700;
}
/* AC (~) and DC (⎓) symbols read larger than the letters, like real dials */
.dial-label .sym { font-size: 1.25em; line-height: 0.9; }
/* Schematic icons in the dial legends */
.dial-label .dlab-icon { height: 22px; width: auto; display: block; margin: 1px auto 0; }
.dial-label small .dlab-icon { height: 14px; display: inline-block; vertical-align: middle; margin: 0 1px; }
/* Schematic icons on the LCD annunciator row */
.lcd-annun .an-svg { height: 18px; width: auto; vertical-align: -4px; }
/* Same icons on the V jack legend, scaled to the jack text */
.jack-label .dlab-icon { height: 14px; width: auto; vertical-align: -2px; }
.jack-sub .dlab-icon { height: 12px; width: auto; vertical-align: -2px; }
.dial-label:hover { background: rgba(255,255,255,0.08); }
.dial-label.active { color: #fff; background: rgba(232, 169, 29, 0.18); }
.dial-label.off { color: #8d8a81; }
.dial-label.off.active { color: #fff; }

/* ===== Jacks =====
   Labels ABOVE the holes and a panel-ratings row BELOW them, laid out like
   the real front panel: the "10 A FUSED" bracket spans A–COM, the CAT
   rating sits between COM and VΩ. Every jack shares one footprint so the
   labels, sub-legends, and holes line up in clean rows. */
.jacks {
    display: flex; justify-content: space-around; align-items: flex-start;
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.jack {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: 'JetBrains Mono', monospace; color: #cfccc2;
    padding: 4px 6px; border-radius: 8px;
    width: 94px;
    transition: background 0.12s;
}
.jack:not(:disabled):hover { background: rgba(255,255,255,0.07); }
.jack:disabled { cursor: default; }
.jack-hole {
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #23252a 55%, #0d0e10 60%);
    border: 3px solid #64686f;
    position: relative;
}
.jack-hole.com { border-color: #64686f; }
/* The plugged-in lead: red or black plug filling the hole */
.jack.has-red .jack-hole {
    border-color: #d33;
    background: radial-gradient(circle at 45% 40%, #e05545, #a01f12 70%);
    box-shadow: 0 0 8px rgba(220, 60, 40, 0.5);
}
.jack.has-black .jack-hole {
    border-color: #222;
    background: radial-gradient(circle at 45% 40%, #4a4a4a, #111 70%);
}
.jack-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; }
.jack-sub {
    font-size: 9.5px; color: var(--boot); font-weight: 600;
    letter-spacing: 0.04em; min-height: 13px; line-height: 13px;
}

/* Panel ratings under the jack row — engraved-look markings. Two equal-width
   columns: "10 A FUSED" on the left, the CAT rating on the right. The left and
   right insets pull the outer edges in to sit under the outside jacks (A and
   V), whose centers are ~16.7% in from each edge of the jack row. */
.jack-ratings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding: 2px 16.7% 0;
}
.jr {
    display: flex; flex-direction: column; align-items: center;
    min-width: 0;
    font-family: 'JetBrains Mono', monospace;
}
.jr-bracket {
    width: 82%; height: 7px;
    border: 1.5px solid #8f939b; border-top: none;
    border-radius: 0 0 5px 5px;
}
.jr-text {
    margin-top: 3px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
    color: #a8acb4; white-space: nowrap;
}

/* ===== Lead wires =====
   Two test leads plug into the jacks, sag, and run off the LEFT edge of
   the page — as if the probes are clipped to the bench beside you. Drawn
   into #lead-wires (a document-anchored SVG) by drawLeadWires(), which
   re-routes the red wire when the red plug moves between jacks. Sits IN
   FRONT of the meter so the wires visibly plug into the jack holes
   (pointer-events: none keeps every control clickable through them);
   modals (z-index 100) still cover the wires. */
#lead-wires {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 30;
}

/* Fuse-blow drama — a hard jolt on the body plus a flash-then-flicker on
   the LCD, timed with the pop sound (playFusePop in controls.js). */
.meter-shell.bang .meter-boot { animation: bang-shake 0.7s; }
@keyframes bang-shake {
    0%, 100% { transform: translateX(0); }
    8%  { transform: translate(-11px, 2px) rotate(-1.4deg); }
    20% { transform: translate(9px, -2px) rotate(1.1deg); }
    34% { transform: translateX(-7px) rotate(-0.7deg); }
    50% { transform: translateX(5px) rotate(0.4deg); }
    68% { transform: translateX(-3px); }
    84% { transform: translateX(2px); }
}
.lcd.fuse-pop { animation: lcd-pop 0.9s ease-out; }
@keyframes lcd-pop {
    0%   { background: #fff; box-shadow: inset 0 0 24px rgba(255,255,255,0.9), 0 0 18px rgba(255, 240, 200, 0.8); }
    10%  { background: #6a705f; }
    18%  { background: var(--lcd-bg); }
    26%  { background: #7d8471; }
    38%  { background: var(--lcd-bg); }
    100% { background: var(--lcd-bg); }
}

/* ===== Side panel (intro only) ===== */
.side-host { flex-direction: column; gap: 10px; }
body.intro-active .side-host > *:not(.intro-card) { display: none; }

.btn {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: 0.05em; border-radius: 6px; cursor: pointer;
    padding: 9px 14px; border: 1px solid var(--rule);
    background: var(--paper); color: var(--ink-2);
    transition: all 0.12s;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.big { width: 100%; padding: 12px; font-size: 13px; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent-2); }
.btn-accent:hover { background: var(--accent-2); color: #fff; }
.btn-secondary { background: var(--paper-2); }
.btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pulse-attn { animation: pulse-attn 1.6s ease-in-out infinite; }
@keyframes pulse-attn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 52, 26, 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(200, 52, 26, 0); }
}

/* ===== Circuit description — a written statement of what each probe touches
   (replaces the old bench drawing). ===== */
#circuit-visual { }
.cv-desc {
    padding: 14px 15px;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5;
    color: var(--ink);
}
.cv-object {
    margin: 0 0 12px; font-weight: 600; color: var(--ink);
}
.cv-probe {
    display: flex; align-items: flex-start; gap: 9px; margin: 9px 0;
}
.cv-dot {
    flex: none; width: 13px; height: 13px; border-radius: 50%; margin-top: 3px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.cv-dot.red   { background: #cf4130; border: 1px solid #8e2417; }
.cv-dot.black { background: #2b2b30; border: 1px solid #0e0e10; }
.cv-probe-txt { flex: 1; }
.cv-here { color: var(--accent-2); }
/* Tap scenarios: buttons to move a probe to another contact point. */
.cv-move { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.cv-pointbtn {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
    border-radius: 7px; padding: 3px 9px; margin: 3px 4px 0 0; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cv-pointbtn:hover { border-color: var(--ink-3); }
.cv-pointbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-pointbtn.red.active   { background: #cf4130; border-color: #8e2417; color: #fff; }
.cv-pointbtn.black.active { background: #2b2b30; border-color: #0e0e10; color: #fff; }
.cv-note {
    margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule);
    font-size: 13px; color: var(--ink-2);
}

.circuit-card {
    background: var(--paper-2); border: 1px solid var(--rule);
    border-radius: 10px; padding: 14px 16px;
}
.cc-head {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px;
}
.cc-prompt { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Teacher mode (?teacher=1) — name + notes on the circuit card only. */
.teacher-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.04em; color: #5a3d0a;
    background: #f3e2b0; border: 1px solid #d4b56a; border-radius: 4px;
    padding: 4px 8px; margin: 0 0 8px; display: inline-block;
}
.teacher-notes {
    margin: 0 0 12px; padding: 8px 10px; border-radius: 6px;
    background: #f7f1e0; border: 1px dashed #c9b88a;
    font-size: 12.5px; color: #5c4a12; line-height: 1.45;
}
body:not(.teacher-mode) .teacher-badge,
body:not(.teacher-mode) .teacher-notes { display: none !important; }
/* Bench-instrument controls on the circuit card (#23 PSU, #24 FGen, switches) */
#instrument-controls {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
}
.inst-head {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 8px;
}
.inst-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 3px 0;
}
.inst-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.inst-stepper { display: inline-flex; align-items: center; gap: 6px; }
.inst-btn {
    font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700;
    width: 28px; height: 26px; border-radius: 4px; cursor: pointer;
    background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2);
    line-height: 1;
}
.inst-btn:hover { border-color: var(--accent); color: var(--ink); }
.inst-value {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
    color: var(--ink); min-width: 72px; text-align: center;
}
.inst-seg { display: inline-flex; gap: 4px; }
.inst-seg-wide { width: 100%; }
.inst-seg-wide .inst-wave { flex: 1; justify-content: center; font-size: 11px; padding: 7px 8px; }
.inst-wave {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    padding: 4px 9px; border-radius: 4px; cursor: pointer;
    background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2);
}
.inst-wave .wv-icon { height: 11px; width: auto; flex: none; }
.inst-wave.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Challenge callout (the #10 fuse trap): amber, one clear action. */
.challenge-card {
    margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
    background: #faf0d7; border: 1px solid #ddbe6a;
}
.ch-head {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; color: #8a6207; margin-bottom: 5px;
}
.ch-text { margin: 0 0 10px; font-size: 13.5px; color: #5c4a12; line-height: 1.5; }

.fuse-banner {
    margin-top: 12px; padding: 10px 12px; border-radius: 6px;
    background: #fbe9e5; border: 1px solid #e5b3a8;
    font-size: 13px; color: #7a2013; line-height: 1.5;
}

/* ===== Modals ===== */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(30, 26, 18, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
    width: 100%; max-width: 560px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    box-shadow: 0 18px 50px rgba(30, 25, 10, 0.35);
}
.modal.quickref { max-width: 720px; }
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px 10px; border-bottom: 1px solid var(--rule);
}
.modal-header h2 { margin: 0; font-size: 21px; font-weight: 500; }
.modal-close {
    background: none; border: none; font-size: 26px; color: var(--ink-3);
    cursor: pointer; line-height: 1; padding: 0 4px;
}
.modal-close:hover { color: var(--accent); }
.modal-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; }
.modal-intro { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 18px 14px; border-top: 1px solid var(--rule);
}

/* Circuit list */
/* Bench instruments — two big labeled buttons at the top of the modal */
.cl-inst-row { display: flex; gap: 8px; width: 100%; margin-bottom: 4px; }
.cl-inst {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: 7px;
    padding: 11px 10px; cursor: pointer; color: var(--ink-2);
    transition: all 0.1s;
}
.cl-inst .wv-icon { height: 15px; width: auto; flex: none; }
.cl-inst:hover { border-color: var(--accent); color: var(--ink); }
.cl-inst.active { background: var(--accent); color: #fff; border-color: var(--accent-2); }

.cl-level {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
    margin: 14px 0 6px; width: 100%;
}
.cl-level:first-child { margin-top: 0; }
#circuit-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-btn {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 5px;
    padding: 8px 12px; cursor: pointer; color: var(--ink-2);
    transition: all 0.1s;
}
.cl-btn:hover { border-color: var(--accent); color: var(--ink); }
.cl-btn.active { background: var(--accent); color: #fff; border-color: var(--accent-2); }

/* ===== Quick Reference typography (from the scope tool) ===== */
.quickref-section { padding: 14px 0 2px; border-bottom: 1px solid var(--rule); }
.quickref-section:last-child { border-bottom: none; padding-bottom: 8px; }
.quickref-section:first-child { padding-top: 2px; }
.quickref-section-title {
    font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 500;
    color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em;
}
.quickref-section-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.quickref-section-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }
.quickref-dl {
    margin: 0; display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    column-gap: 18px; row-gap: 8px; padding-bottom: 12px;
}
.quickref-dl dt { font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.45; }
.quickref-dl dd { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.quickref-dl code {
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px;
    padding: 1px 5px; color: var(--ink); white-space: nowrap;
}
.use-when { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.use-when b { color: var(--accent); font-weight: 600; margin-right: 4px; }
@media (max-width: 560px) {
    .quickref-dl { grid-template-columns: 1fr; row-gap: 4px; }
    .quickref-dl dt { margin-top: 6px; }
}

/* ===== Intro card + spotlight ===== */
/* ===== Guided lessons menu ===== */
.modal.lessons-modal { max-width: 720px; }
.lessons-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 560px) {
    .lessons-list { grid-template-columns: 1fr; }
}
.lesson-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    text-align: left; cursor: pointer;
    padding: 12px 14px; border-radius: 8px;
    background: var(--paper-2); border: 1.5px solid var(--rule);
    color: var(--ink); transition: border-color 0.12s, box-shadow 0.12s;
}
.lesson-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(30,25,10,0.08); }
.lesson-card.done { border-color: #8aaf6e; background: #f2f7ec; }
.lesson-card-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; color: var(--accent);
}
.lesson-card.done .lesson-card-num { color: #3d6b28; }
.lesson-card-title {
    font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 500;
    line-height: 1.2;
}
.lesson-card-blurb {
    font-size: 12.5px; color: var(--ink-2); line-height: 1.4;
}
.lesson-card-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--ink-3); margin-top: 4px;
}
.lesson-progress {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; color: var(--ink-3); margin: 0 0 8px;
}
.lesson-require-hint {
    margin: 10px 0 0; padding: 8px 10px; border-radius: 6px;
    background: #faf0d7; border: 1px solid #ddbe6a;
    font-size: 13px; color: #5c4a12; line-height: 1.4;
}
.lesson-teacher-notes { margin-top: 10px; }
/* Actions that live on the bench in free practice — available on the guide
   card while the bench panel is hidden during a lesson. */
.lesson-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0;
}
.lesson-actions[hidden] { display: none !important; }
.lesson-actions .btn { font-size: 11px; padding: 7px 10px; }

.intro-card {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px;
    padding: 18px;
}
.intro-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 24px; margin: 0 0 8px; }
.intro-body { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; min-height: 120px; }
.intro-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.intro-skip {
    background: none; border: none; color: var(--ink-3); font-size: 13px;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.intro-nav { display: flex; gap: 8px; }
.intro-btn {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    padding: 8px 14px; border-radius: 6px; cursor: pointer;
    background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
}
.intro-btn.primary { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.intro-btn:disabled { opacity: 0.4; cursor: default; }
/* Spotlight: dim the meter, lift the highlighted part */
body.intro-dimmed .meter-face > *:not(.intro-spotlight):not(:has(.intro-spotlight)) {
    opacity: 0.28;
    transition: opacity 0.25s;
}
.intro-spotlight {
    position: relative;
    opacity: 1 !important;
    border-radius: 10px;
    box-shadow: 0 0 0 3px var(--boot), 0 0 22px rgba(232, 169, 29, 0.55);
    animation: spot-pulse 1.8s ease-in-out infinite;
}
@keyframes spot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--boot), 0 0 22px rgba(232, 169, 29, 0.55); }
    50% { box-shadow: 0 0 0 3px var(--boot), 0 0 34px rgba(232, 169, 29, 0.85); }
}

/* ===== Colophon ===== */
.colophon {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule);
    font-size: 12.5px; color: var(--ink-3);
    text-align: center;
}
.colophon p { margin: 0; }
.colophon a { color: var(--ink-3); }

/* ===== Print: the Quick Reference as a paper handout ===== */
@media print {
    body:has(#quickref-modal:not([hidden])) { background: #fff; background-image: none; }
    body:has(#quickref-modal:not([hidden])) .masthead,
    body:has(#quickref-modal:not([hidden])) .main-stack,
    body:has(#quickref-modal:not([hidden])) .colophon,
    body:has(#quickref-modal:not([hidden])) .modal-backdrop:not(#quickref-modal) {
        display: none !important;
    }
    body:has(#quickref-modal:not([hidden])) #quickref-modal {
        position: static; display: block; background: none; padding: 0;
    }
    body:has(#quickref-modal:not([hidden])) .modal.quickref {
        max-width: 100%; max-height: none; border: none; border-radius: 0;
        box-shadow: none; display: block;
    }
    body:has(#quickref-modal:not([hidden])) .modal.quickref .modal-body {
        overflow: visible; max-height: none; padding: 0;
    }
    body:has(#quickref-modal:not([hidden])) .modal.quickref .modal-close,
    body:has(#quickref-modal:not([hidden])) .modal.quickref .modal-footer {
        display: none !important;
    }
    .quickref-dl dt, .quickref-dl dd { break-inside: avoid; }
    .quickref-section-title { break-after: avoid; }
}