/* ECEUH Electronics section, October 8 2026. Builds on tokens.css and
   site-20260925.css (paper, ink, scarlet, system type). The circuit stage is
   a dark bench so voltage colours and the highlight read clearly; everything
   around it stays calm. Stage colours live here as tokens; the canvas reads
   them at runtime. */
.stage-card, .instruments {
  --bench: #121114;
  --board: #19181c;
  --grid: #27252b;
  --wire: #b9b5ad;
  --pos: #ff6b79;
  --neg: #8ea0ff;
  --part: #e9e4d8;
  --part-ink: #f4f1f1;
  --opamp-top: #c9d4f3;
  --opamp-side: #6d79a8;
  --label-bg: #0b0a0d;
  --label-ink: #f4f1f1;
  --hl: #ffd98a;
  --sat: #c8102e;
  --dot: #fff4d6;
  --shadow: #000000;
  --trace-1: #b9b5ad;
  --trace-2: #ff6b79;
  --trace-3: #8ea0ff;
  --trace-4: #ffd98a;
  --limit: #8a8590;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page head */
.lesson, .section-index { padding: 28px 0 100px; }
.lesson-head { display: grid; gap: 16px; padding: 8px 0 28px; }
.lesson-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 15ch; }
.lesson-head .lede { max-width: 62ch; }
.lesson-head .eyebrow { margin-bottom: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

/* Problem picker */
.picker-wrap { display: grid; gap: 10px; margin: 0 0 28px; }
.picker-label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.picker button {
  min-width: 44px; min-height: 44px; padding: 0 6px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff;
  color: var(--ink); font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.picker button:hover { border-color: var(--ink); }
.picker button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Workspace: one column on phones; on wide screens the stage stays in view
   while the problem and steps scroll beside it. */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.problem-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.problem-head h2:focus { outline: none; }
.problem-head h2:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.topic { margin-top: 8px; color: var(--muted); font-size: 1.0625rem; }

.problem-text { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); }
.problem-text h3, .steps h3.label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.problem-statement { font-size: 1.0625rem; line-height: 1.6; max-width: 70ch; }
.facts { display: grid; gap: 16px; }
.facts ul, .conventions { margin: 0; padding-left: 20px; }
.facts li + li, .conventions li + li { margin-top: 6px; }
.asks strong { font-weight: 650; margin-right: 4px; }
.conventions { color: var(--muted); font-size: .9375rem; }
.hint { padding: 16px 18px; background: var(--lav); border-radius: 14px; }
.hint h3 { color: #2b3a99; }

/* Maths typography: italic serif variables, stacked fractions. */
var { font-family: var(--site-serif); font-style: italic; }
.problem-statement sub, .step sub, .problem-text sub, .answers sub, .instruments sub { font-size: .72em; line-height: 0; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .12em; font-size: .94em; line-height: 1.25; }
.frac .num { padding: 0 .25em .08em; border-bottom: 1px solid currentColor; }
.frac .den { padding: .08em .25em 0; }

/* Stage */
.stage-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.stage-card > * { min-width: 0; }
.variants { display: flex; flex-wrap: wrap; gap: 6px; }
.variants button, .seg-row button {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-size: .875rem; font-weight: 600;
}
.variants button[aria-pressed="true"], .seg-row button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bench {
  position: relative; height: clamp(300px, 92vw, 560px);
  background: var(--bench); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(26, 23, 18, .6);
}
.bench:focus-within { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--red); }
.bench canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; touch-action: none; cursor: grab; }
.bench canvas:active { cursor: grabbing; }
.bench canvas:focus { outline: none; }
.stage-caption {
  margin: -6px 0 0; padding: 10px 14px; border-radius: 0 0 14px 14px; background: var(--bench);
  color: var(--label-ink); font-size: .875rem; line-height: 1.45;
}
.stage-caption .kind {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px;
  background: var(--hl); color: #1a1712; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.stage-caption .kind.saturated { background: var(--sat); color: #fff; }
.stage-help { font-size: .8125rem; color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.tool-group { display: flex; flex-wrap: wrap; gap: 6px; }
.tools button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink);
}
.tools button.text, .tools button.toggle { padding: 0 12px; font-size: .875rem; font-weight: 600; }
.tools button:hover { border-color: var(--ink); }
.tools button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.stage-status { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.stage-status:empty { display: none; }
.stage-status li { padding: 8px 12px; border-radius: 10px; background: #fff; }
.stage-status .flag { background: var(--rose); color: #7d0a1d; }
@media (min-width: 1100px) { .workspace.is-missing { grid-template-areas: "head head" "text text"; } }

/* Steps */
.steps { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); min-width: 0; }
.steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.steps-head h2 { font-size: 1.5rem; letter-spacing: -.02em; }
#step-count { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.step { display: grid; gap: 12px; }
.step h3 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
.step p { max-width: 68ch; }
.eqs { display: grid; gap: 8px; }
.eq {
  padding: 10px 14px; border-left: 3px solid var(--blue); background: var(--paper);
  border-radius: 0 10px 10px 0; font-family: var(--site-serif); font-size: 1.0625rem; line-height: 1.9; overflow-wrap: anywhere;
}
.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 14px; background: var(--rose); border-radius: 10px; font-weight: 600; }
.result span { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-deep); }
.step-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.step-nav .button { min-height: 48px; padding: 0 24px; }
.step-nav .button:disabled { opacity: .45; cursor: default; }
.step-index summary, .answers summary, .netlist summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 650;
}
.step-index ol { margin: 0; padding-left: 24px; }
.step-index button {
  display: block; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: none;
  color: var(--ink); text-align: left; font-size: .9375rem;
}
.step-index button[aria-current="true"] { color: var(--red); font-weight: 650; }
.step-index .part { color: var(--muted); font-weight: 600; }
.answers ul { margin: 0; padding-left: 20px; }
.answers li + li { margin-top: 8px; }
.answers strong { margin-right: 4px; }

/* Instruments: controls, legend, scope, text tables */
.instruments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); min-width: 0; }
.controls { display: grid; gap: 14px; }
.controls:empty { display: none; }
.ctl { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ctl label, .ctl legend { font-weight: 650; font-size: .9375rem; padding: 0; }
.badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; vertical-align: 1px; }
.badge.explore { background: var(--lav); color: #2b3a99; }
.badge.given { background: var(--rose); color: #a30c25; }
.badge.design, .badge.convention { background: var(--paper-deep); color: var(--ink); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input { flex: 1; min-width: 0; height: 44px; accent-color: var(--red); }
.range-row output { min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.reset-given { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--red); font-size: .875rem; font-weight: 650; }
.legend { display: grid; gap: 6px; font-size: .875rem; color: var(--muted); }
.key { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 2px; border-radius: 3px; vertical-align: -1px; }
.key.pos { background: var(--pos); }
.key.neg { background: var(--neg); }
.key.zero { background: var(--wire); margin-left: 10px; }
.key.neg { margin-left: 10px; }
.figure-note { font-size: .875rem; color: var(--muted); }
.phase-note { padding: 10px 14px; border-radius: 10px; background: var(--lav); color: #2b3a99; font-size: .875rem; }
.scope-wrap { display: grid; gap: 10px; }
.scope-wrap h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
#bode-canvas { display: block; width: 100%; max-width: 100%; height: 320px; border-radius: 14px; background: var(--bench); }
#pz-canvas { display: block; width: 100%; max-width: 100%; height: 190px; border-radius: 14px; background: var(--bench); }
.bode-wrap { display: grid; gap: 10px; }
.bode-wrap h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.workspace.is-missing .stage-card, .workspace.is-missing .steps, .workspace.is-missing .instruments, .workspace.is-missing .facts { display: none; }
.picker button.missing { border-style: dashed; color: var(--muted); }
#scope-canvas { display: block; width: 100%; max-width: 100%; height: 230px; border-radius: 14px; background: var(--bench); }
.scope-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.swatch { display: inline-block; width: 18px; height: 4px; margin-right: 8px; border-radius: 2px; vertical-align: 3px; }
.swatch.t1 { background: var(--trace-1); }
.swatch.t2 { background: var(--trace-2); }
.swatch.t3 { background: var(--trace-3); }
.swatch.t4 { background: var(--trace-4); }
.swatch.limit { background: var(--limit); }
.swatch.sat { background: var(--sat); }
.netlist { min-width: 0; }
.netlist table { font-size: .875rem; }
.netlist table.narrow { min-width: 0; }
.netlist caption { padding-top: 12px; }
.netlist td, .netlist th { padding: 10px 12px 10px 0; }
.lesson-note { margin-top: 36px; max-width: 70ch; font-size: .875rem; color: var(--muted); }

@media (min-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr);
    grid-template-areas: "stage head" "stage text" "stage steps" "stage inst";
    column-gap: 32px;
  }
  .problem-head { grid-area: head; }
  .problem-text { grid-area: text; }
  .stage-card { grid-area: stage; position: sticky; top: 100px; }
  .steps { grid-area: steps; }
  .instruments { grid-area: inst; }
  .bench { height: min(58vh, 600px); }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* Section index */
.hw-card + .hw-card { margin-top: 24px; }
.hw-card { display: grid; gap: 24px; padding: clamp(20px, 4vw, 44px); background: #fff; border-radius: var(--r-lg); }
.hw-card-head { display: grid; gap: 18px; align-items: end; }
.hw-card-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 4px 0 12px; }
.hw-card-head p { max-width: 58ch; color: var(--muted); }
.hw-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.hw-card-head .hw-kicker { color: var(--blue); }
.hw-card-head .button { justify-self: start; }
.hw-list { display: grid; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.hw-list a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.hw-list a:hover { color: var(--red); }
.hw-list .n {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) {
  .hw-card-head { grid-template-columns: 1fr auto; }
  .hw-list { grid-template-columns: 1fr 1fr; }
}

/* Homepage entry */
.study-band { padding: clamp(40px, 6vw, 72px) 0; }
.study-card {
  display: grid; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 48px);
  background: var(--charcoal); color: var(--charcoal-text); border-radius: var(--r-lg);
}
.study-card h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); max-width: 18ch; margin-bottom: 14px; }
.study-card p { max-width: 54ch; }
.study-card .eyebrow { color: #c9d4f3; }
.study-card .button { justify-self: start; border-color: #fff; color: #fff; }
.study-card .button:hover { background: #fff; color: var(--ink); }
@media (min-width: 900px) { .study-card { grid-template-columns: 1fr auto; } }

@media (max-width: 380px) {
  .tools button.text, .tools button.toggle { padding: 0 10px; }
  .variants button, .seg-row button { padding: 0 11px; }
}