/* ECEUH Electronics HW1–HW4 lessons, October 8 2026. Builds on tokens.css and
   site-20260925.css (paper, ink, scarlet, system type). The 3D stage is a dark bench so
   node-voltage colours and the step highlight read clearly; everything around it stays calm.
   Stage colours are tokens here; the canvas reads them at runtime. */
.el-bench, .el-instruments {
  --bench: #121114;
  --board: #19181c;
  --grid: #27252b;
  --wire: #b9b5ad;
  --pos: #ff6b79;
  --neg: #8ea0ff;
  --part: #e9e4d8;
  --src: #c9d4f3;
  --label-bg: #0b0a0d;
  --label-ink: #f4f1f1;
  --hl: #ffd98a;
  --hl-ink: #ffe6b3;
  --dot: #fff4d6;
  --current: #7fe0b4;
  --current-ink: #a6f0cd;
  --volt-ink: #f4f1f1;
  --mark-ink: #e9e4d8;
  --ref-ink: #a6f0cd;
  --block: #6d6876;
  --block-ink: #c9c4cf;
  --test: #ffd98a;
  --test-ink: #ffe6b3;
  --opamp-top: #c9d4f3;
  --opamp-side: #6d79a8;
  --layer: #8ea0ff;
  --constant: #c9c4cf;
  --asym: #ff6b79;
  --asym-ink: #ffb3bb;
  --exact: #8ee3ff;
  --exact-ink: #b8eeff;
  --source: #ffd98a;
  --corner: #8a8590;
  --cursor: #ffd98a;
  --axis-ink: #c9c4cf;
}

/* Page head */
.el-lesson { padding: 28px 0 100px; }
.el-head { display: grid; gap: 16px; padding: 8px 0 28px; }
.el-head h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); max-width: 15ch; }
.el-head .lede { max-width: 62ch; }
.el-head .eyebrow { margin-bottom: 0; }
.el-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); }
.el-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.el-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.el-callout { padding: 16px 20px; background: #fff; border-radius: var(--r); border-left: 3px solid var(--red); }

/* Problem picker */
.el-picker-wrap { display: grid; gap: 10px; margin: 0 0 28px; }
.el-label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.el-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.el-picker button {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  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;
}
.el-picker button:hover { border-color: var(--ink); }
.el-picker button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Workspace */
.el-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.el-problem-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.el-problem-head h2:focus { outline: none; }
.el-problem-head h2:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.el-topic { margin-top: 8px; color: var(--muted); font-size: 1.0625rem; }

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

/* Stage */
.el-stage-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.el-stage-card > * { min-width: 0; }
.el-seg-line { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.el-seg-line:has(> .el-seg[hidden]:first-child + .el-seg[hidden]) { display: none; }
.el-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.el-seg button {
  min-height: 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; text-align: left;
}
.el-seg button:hover { border-color: var(--ink); }
.el-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.el-bench {
  position: relative; height: clamp(300px, 80vw, 560px);
  background: var(--bench); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(26, 23, 18, .6);
}
.el-bench:focus-within { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--red); }
.el-bench canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; touch-action: none; cursor: grab; }
.el-bench canvas:active { cursor: grabbing; }
.el-bench canvas:focus { outline: none; }
.el-caption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0;
  padding: 8px 12px; border-radius: 12px; background: rgba(11, 10, 13, .88);
  color: #f4f1f1; font-size: .8125rem; line-height: 1.4; pointer-events: none;
}
.el-kind {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px;
  background: #ffd98a; color: #1a1712; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.el-kind.test { background: #fff4d6; }
.el-help { font-size: .8125rem; color: var(--muted); }
.el-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.el-tool-group { display: flex; flex-wrap: wrap; gap: 6px; }
.el-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);
}
.el-tools button.el-text-btn { padding: 0 12px; font-size: .875rem; font-weight: 600; }
.el-tools button:hover { border-color: var(--ink); }
.el-tools button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.el-tools button:disabled { opacity: .5; cursor: not-allowed; }
.el-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.el-status { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.el-status:empty { display: none; }
.el-status li { padding: 8px 12px; border-radius: 10px; background: #fff; }
.el-status .el-flag { background: var(--rose); color: #7d0a1d; }

/* Steps */
.el-steps { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); min-width: 0; }
.el-steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.el-steps-head h2 { font-size: 1.5rem; letter-spacing: -.02em; }
#el-step-count { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.el-step { display: grid; gap: 12px; }
.el-step:focus { outline: none; }
.el-step h3 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
.el-step p { max-width: 68ch; }
.el-part { color: var(--muted); font-weight: 600; font-size: .85em; letter-spacing: 0; }
.el-eqs { display: grid; gap: 8px; }
.el-eq {
  padding: 10px 14px; border-left: 3px solid var(--blue); background: var(--paper);
  border-radius: 0 10px 10px 0; font-family: ui-serif, "New York", Georgia, serif; font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere;
}
.el-step-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.el-step-nav .button { min-height: 48px; padding: 0 24px; }
.el-step-nav .button:disabled { opacity: .45; cursor: default; }
.el-disclosure summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 650; }
.el-step-list { margin: 0; padding-left: 24px; }
.el-step-list button {
  display: block; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: none;
  color: var(--ink); text-align: left; font-size: .9375rem;
}
.el-step-list button[aria-current="true"] { color: var(--red); font-weight: 650; }
.el-answers { margin: 0; padding-left: 20px; }
.el-answers li + li { margin-top: 10px; }
.el-answers strong { display: block; font-weight: 650; }
.el-num { font-variant-numeric: tabular-nums; font-weight: 650; }
.el-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; vertical-align: 1px; }
.el-badge.explore { background: var(--lav); color: #2b3a99; }

/* Instruments */
.el-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; }
.el-instruments h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.el-controls { display: grid; gap: 14px; }
.el-controls:empty { display: none; }
.el-explore { display: grid; gap: 12px; margin: 0; padding: 14px 16px; border: 1.5px solid var(--lav-deep); border-radius: 14px; min-width: 0; }
.el-explore legend { padding: 0 6px; font-weight: 650; }
.el-ctl { display: grid; gap: 6px; min-width: 0; }
.el-ctl label, .el-ctl-title { font-weight: 650; font-size: .9375rem; }
.el-range { display: flex; align-items: center; gap: 12px; }
.el-range input { flex: 1; min-width: 0; height: 44px; accent-color: var(--red); }
.el-range output { min-width: 9ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9375rem; }
.el-reset { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--red); font-size: .875rem; font-weight: 650; }
.el-note-small { font-size: .875rem; color: var(--muted); }
.el-legend { display: grid; gap: 6px; font-size: .875rem; color: var(--muted); }
.el-key { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 2px; border-radius: 3px; vertical-align: -1px; }
.el-key.pos { background: var(--pos); }
.el-key.neg { background: var(--neg); margin-left: 10px; }
.el-key.zero { background: var(--wire); margin-left: 10px; }
.el-chart-wrap { display: grid; gap: 10px; }
#el-chart { display: block; width: 100%; max-width: 100%; height: 340px; border-radius: 14px; background: var(--bench); }
.el-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.el-swatch { display: inline-block; width: 18px; height: 4px; margin-right: 8px; border-radius: 2px; vertical-align: 3px; }
.el-swatch.asym { background: var(--asym); }
.el-swatch.exact { background: var(--exact); }
.el-swatch.source { background: var(--source); height: 7px; vertical-align: 2px; opacity: .7; }
.el-swatch.cursor { background: var(--cursor); }
.el-table-scroll { overflow-x: auto; }
.el-instruments table { font-size: .875rem; min-width: 480px; }
.el-instruments table.el-narrow { min-width: 0; }
.el-instruments caption { padding-top: 12px; text-align: left; color: var(--muted); }
.el-instruments td, .el-instruments th { padding: 9px 12px 9px 0; vertical-align: top; }
.el-chosen th, .el-chosen td { background: var(--rose); }
.el-note { margin-top: 36px; max-width: 70ch; font-size: .875rem; color: var(--muted); }

@media (min-width: 1100px) {
  .el-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;
  }
  .el-problem-head { grid-area: head; }
  .el-text { grid-area: text; }
  .el-stage-card { grid-area: stage; position: sticky; top: 100px; }
  .el-steps { grid-area: steps; }
  .el-instruments { grid-area: inst; }
  .el-bench { height: min(58vh, 600px); }
  .el-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .el-tools button.el-text-btn { padding: 0 10px; }
  .el-seg button { padding: 0 11px; }
}