/* ECEUH Electronics, ECE 3155 Experiment II (op-amp lab), October 8 2026.
   Builds on tokens.css and site-20260925.css (paper, ink, scarlet, system
   type) and follows the Electronics lesson pages: a dark bench for the
   circuit so voltage colours and highlights read clearly, calm paper around
   it. Everything is scoped to body.opamps-lab. Stage colours are tokens here;
   the canvas reads them at runtime. */
.opamps-lab {
  --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;
  --dot: #fff4d6;
  --shadow: #000000;
  --trace-1: #b9b5ad;
  --trace-2: #ff6b79;
  --trace-3: #8ea0ff;
  --trace-4: #ffd98a;
  --chip: #3a3742;
  --chip-top: #2a2830;
  --metal: #c8ccd4;
  --ghost: #8a8590;
  --hint-ink: #2b3a99;
  --flag-ink: #7d0a1d;
}

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

/* Page head */
.opamps-lab .lab { padding: 28px 0 100px; }
.opamps-lab .lab-head { display: grid; gap: 16px; padding: 8px 0 28px; }
.opamps-lab .lab-head h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); max-width: 15ch; }
.opamps-lab .lab-head .lede { max-width: 64ch; }
.opamps-lab .lab-honesty { max-width: 64ch; font-size: .9375rem; color: var(--ink); padding-left: 14px; border-left: 3px solid var(--blue); }
.opamps-lab .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); }
.opamps-lab .crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.opamps-lab .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

/* Activity picker, grouped by part */
.opamps-lab .picker-wrap { display: grid; gap: 12px; margin: 0 0 28px; }
.opamps-lab .picker-label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.opamps-lab .picker-groups { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.opamps-lab .picker-group { display: grid; gap: 4px; }
.opamps-lab .picker-part { font-size: .8125rem; font-weight: 650; color: var(--muted); }
.opamps-lab .picker { display: flex; flex-wrap: wrap; gap: 6px; }
.opamps-lab .picker button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 48px; min-height: 44px; padding: 0 8px;
  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; line-height: 1.1;
}
.opamps-lab .picker button .pk-sub { font-size: .6875rem; font-weight: 600; }
.opamps-lab .picker button:hover { border-color: var(--ink); }
.opamps-lab .picker button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.opamps-lab .prelab { max-width: 70ch; font-size: .9375rem; color: var(--muted); }

/* Workspace: one column on phones; on wide screens the stage stays in view
   while the activity, steps and tables scroll beside it. */
.opamps-lab .workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.opamps-lab .act-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.opamps-lab .act-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.opamps-lab .act-head h2:focus { outline: none; }
.opamps-lab .act-head h2:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.opamps-lab .act-source { margin-top: 8px; color: var(--muted); font-size: .9375rem; }

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

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

/* Stage */
.opamps-lab .stage-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.opamps-lab .stage-card > * { min-width: 0; }
.opamps-lab .variants { display: flex; flex-wrap: wrap; gap: 6px; }
.opamps-lab .variants 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;
}
.opamps-lab .variants button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.opamps-lab .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);
}
.opamps-lab .bench:focus-within { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--red); }
.opamps-lab .bench canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; touch-action: none; cursor: grab; }
.opamps-lab .bench canvas:active { cursor: grabbing; }
.opamps-lab .bench canvas:focus { outline: none; }
.opamps-lab .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;
}
.opamps-lab .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;
}
.opamps-lab .stage-help { font-size: .8125rem; color: var(--muted); }
.opamps-lab .tools { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.opamps-lab .tool-group { display: flex; flex-wrap: wrap; gap: 6px; }
.opamps-lab .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);
}
.opamps-lab .tools button.text, .opamps-lab .tools button.toggle { padding: 0 12px; font-size: .875rem; font-weight: 600; }
.opamps-lab .tools button:hover { border-color: var(--ink); }
.opamps-lab .tools button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.opamps-lab .tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.opamps-lab .stage-status { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.opamps-lab .stage-status:empty { display: none; }
.opamps-lab .stage-status li { padding: 8px 12px; border-radius: 10px; background: #fff; }
.opamps-lab .stage-status .flag { display: block; color: var(--flag-ink); }

/* Steps */
.opamps-lab .steps { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); min-width: 0; }
.opamps-lab .steps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.opamps-lab .steps-head h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.opamps-lab #step-count { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.opamps-lab .step { display: grid; gap: 12px; }
.opamps-lab .step h3 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
.opamps-lab .step h3:focus { outline: none; }
.opamps-lab .step p { max-width: 68ch; }
.opamps-lab .eqs { display: grid; gap: 8px; }
.opamps-lab .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;
}
.opamps-lab .result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 14px; background: var(--rose); border-radius: 10px; font-weight: 600; }
.opamps-lab .result span { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-deep); }
.opamps-lab .step-scene { font-size: .875rem; color: var(--muted); }
.opamps-lab .step-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.opamps-lab .step-nav .button { min-height: 48px; padding: 0 24px; }
.opamps-lab .step-nav .button:disabled { opacity: .45; cursor: default; }
.opamps-lab .step-index summary, .opamps-lab .answers summary, .opamps-lab .netlist summary { min-height: 44px; font-weight: 650; }
.opamps-lab .step-index ol { margin: 0; padding-left: 24px; }
.opamps-lab .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;
}
.opamps-lab .step-index button[aria-current="true"] { color: var(--red); font-weight: 650; }
.opamps-lab .answers ul { margin: 0; padding: 0 0 16px 20px; }
.opamps-lab .answers li + li { margin-top: 8px; }
.opamps-lab .answers strong { margin-right: 4px; }

/* Measurement tables and calculators */
.opamps-lab .work { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r); min-width: 0; }
.opamps-lab .work-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.opamps-lab .work-head h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.opamps-lab .work-intro { color: var(--muted); font-size: .9375rem; max-width: 68ch; }
.opamps-lab #work-body { display: grid; gap: 22px; min-width: 0; }
.opamps-lab .work-panel { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.opamps-lab .work-panel h3 { font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.2; }
.opamps-lab table.work { min-width: 0; font-size: .9375rem; }
.opamps-lab table.work th, .opamps-lab table.work td { padding: 10px 10px 10px 0; vertical-align: middle; }
.opamps-lab table.work td { color: var(--ink); }
.opamps-lab table.work thead th { font-size: .8125rem; color: var(--muted); }
.opamps-lab .fieldbox { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.opamps-lab .num-in {
  width: 100%; min-width: 5.5em; min-height: 44px; padding: 0 10px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.opamps-lab .num-in:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.opamps-lab .num-in[aria-invalid="true"] { border-color: var(--red); background: var(--rose); }
.opamps-lab .unit { color: var(--muted); font-size: .875rem; }
.opamps-lab output.calc { font-weight: 650; font-variant-numeric: tabular-nums; }
.opamps-lab .work-msg { font-size: .875rem; color: var(--muted); }
.opamps-lab .work-msg:empty { display: none; }
.opamps-lab .work-note { font-size: .875rem; color: var(--muted); }
.opamps-lab .plane, .opamps-lab .design-set { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opamps-lab .plane legend, .opamps-lab .design-set legend { padding: 0; margin-bottom: 4px; font-weight: 650; font-size: .9375rem; }
.opamps-lab .radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9375rem; cursor: pointer; }
.opamps-lab .radio input { width: 20px; height: 20px; flex: none; accent-color: var(--red); }
.opamps-lab .design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.opamps-lab .design-field { display: grid; gap: 4px; font-size: .875rem; font-weight: 600; }
.opamps-lab .calc-list { display: grid; gap: 0; margin: 0; }
.opamps-lab .calc-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.opamps-lab .calc-list dt { font-size: .875rem; color: var(--muted); }
.opamps-lab .calc-list dd { margin: 0; }

/* Instruments: legend, scope, controls, text tables */
.opamps-lab .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; }
.opamps-lab .controls { display: grid; gap: 14px; }
.opamps-lab .controls:empty { display: none; }
.opamps-lab .ctl { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opamps-lab .ctl label { font-weight: 650; font-size: .9375rem; }
.opamps-lab .ctl-note { font-size: .8125rem; color: var(--muted); }
.opamps-lab .toggle-row {
  justify-self: start; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--ink); font-size: .875rem; font-weight: 600;
}
.opamps-lab .toggle-row[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.opamps-lab .badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; vertical-align: 1px; }
.opamps-lab .badge.explore, .opamps-lab .badge.illustration { background: var(--lav); color: var(--hint-ink); }
.opamps-lab .badge.given { background: var(--rose); color: var(--red-deep); }
.opamps-lab .badge.example { background: var(--paper-deep); color: var(--ink); }
.opamps-lab .range-row { display: flex; align-items: center; gap: 12px; }
.opamps-lab .range-row input { flex: 1; min-width: 0; height: 44px; accent-color: var(--red); }
.opamps-lab .range-row output { min-width: 8ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.opamps-lab .reset-given { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--red); font-size: .875rem; font-weight: 650; }
.opamps-lab .legend { display: grid; gap: 6px; font-size: .875rem; color: var(--muted); }
.opamps-lab .key { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 2px; border-radius: 3px; vertical-align: -1px; }
.opamps-lab .key.pos { background: var(--pos); }
.opamps-lab .key.neg { background: var(--neg); margin-left: 10px; }
.opamps-lab .key.zero { background: var(--wire); margin-left: 10px; }
.opamps-lab .figure-note { font-size: .875rem; color: var(--muted); }
.opamps-lab .scope-wrap { display: grid; gap: 10px; }
.opamps-lab .scope-wrap h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.opamps-lab #scope-canvas { display: block; width: 100%; max-width: 100%; height: 250px; border-radius: 14px; background: var(--bench); }
.opamps-lab .scope-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.opamps-lab .scope-text { font-size: .875rem; color: var(--muted); }
.opamps-lab .swatch { display: inline-block; width: 18px; height: 4px; margin-right: 8px; border-radius: 2px; vertical-align: 3px; }
.opamps-lab .swatch.t1 { background: var(--trace-1); }
.opamps-lab .swatch.t2 { background: var(--trace-2); }
.opamps-lab .swatch.t3 { background: var(--trace-3); }
.opamps-lab .swatch.t4 { background: var(--trace-4); }
.opamps-lab .swatch.dashed { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 9px); }
.opamps-lab .swatch.t1.dashed { background: repeating-linear-gradient(90deg, var(--trace-1) 0 6px, transparent 6px 9px); }
.opamps-lab .swatch.t2.dashed { background: repeating-linear-gradient(90deg, var(--trace-2) 0 6px, transparent 6px 9px); }
.opamps-lab .swatch.t3.dashed { background: repeating-linear-gradient(90deg, var(--trace-3) 0 6px, transparent 6px 9px); }
.opamps-lab .swatch.t4.dashed { background: repeating-linear-gradient(90deg, #b07a12 0 6px, transparent 6px 9px); }
.opamps-lab .netlist { min-width: 0; }
.opamps-lab .netlist table { font-size: .875rem; }
.opamps-lab .netlist table.narrow { min-width: 0; }
.opamps-lab .netlist caption { padding-top: 12px; }
.opamps-lab .netlist td, .opamps-lab .netlist th { padding: 10px 12px 10px 0; }
.opamps-lab .lesson-note { margin-top: 36px; max-width: 70ch; font-size: .875rem; color: var(--muted); }

@media (min-width: 1100px) {
  .opamps-lab .workspace {
    grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr);
    grid-template-areas: "stage head" "stage text" "stage steps" "stage work" "stage inst";
    column-gap: 32px;
  }
  .opamps-lab .act-head { grid-area: head; }
  .opamps-lab .act-text { grid-area: text; }
  .opamps-lab .stage-card { grid-area: stage; position: sticky; top: 100px; }
  .opamps-lab .steps { grid-area: steps; }
  .opamps-lab .work { grid-area: work; }
  .opamps-lab .instruments { grid-area: inst; }
  .opamps-lab .bench { height: min(58vh, 600px); }
  .opamps-lab .facts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
  .opamps-lab .calc-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; }
}
@media (max-width: 380px) {
  .opamps-lab .tools button.text, .opamps-lab .tools button.toggle { padding: 0 10px; }
  .opamps-lab .variants button { padding: 0 11px; }
  .opamps-lab .picker-groups { gap: 10px 14px; }
}