/* Analog figures: plots (tools/templates/v3/plot-svg.mjs) and schematics
   (tools/templates/v3/schematic-svg.mjs). The card, heading, controls, step notes, text view and
   caption come from diagrams.css. Every colour is a theme token: a plot lives on the waveform
   screen (--wave-*) like a trace, a schematic is ink on paper like a textbook drawing; moving
   current is --flow-data and a highlighted branch --flow-call. Text always wears a text token;
   a coloured mark beside it carries the series identity. */

/* ---------- plots ---------- */
.plot-kind { color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.plot-stage { background: var(--wave-bg); }
.plot-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 14px 20px 0; list-style: none; color: var(--wave-text); font: 500 13.5px/1.4 var(--sans); }
.plot-legend li { display: inline-flex; align-items: center; gap: 8px; }
.plot-legend-axis { color: var(--wave-muted); font-weight: 400; }
.plot-key { flex: none; overflow: visible; }
.plot-screen { container-type: inline-size; padding: 10px 8px 2px; background: var(--wave-bg); }
.plot-screen:focus-visible { outline-offset: -3px; }
.plot-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.plot-wide { max-width: 720px; }
.plot-narrow { display: none; max-width: 480px; }
@container (max-width: 560px) {
  .plot-wide { display: none; }
  .plot-narrow { display: block; }
}
.plot-readout { margin: 0; padding: 2px 20px 12px; color: var(--wave-text); font: 500 12.5px/1.5 var(--mono); }
.plot-readout[hidden] { display: none; }
.pl-s0 { --pl-ink: var(--wave-signal); }
.pl-s1 { --pl-ink: var(--wave-z); }
.pl-s2 { --pl-ink: var(--wave-x); }
.pl-s3 { --pl-ink: var(--wave-expected); }
.pl-area { fill: var(--wave-bg); }
.pl-frame { fill: none; stroke: var(--wave-grid); stroke-width: 1; }
.pl-grid { stroke: var(--wave-grid); stroke-width: 1; }
.pl-grid.minor { opacity: .5; }
.pl-grid.zero { stroke: var(--wave-muted); opacity: .6; }
.pl-tickmark { stroke: var(--wave-muted); stroke-width: 1; }
.pl-tick { fill: var(--wave-muted); font: 11.5px var(--mono); }
.pl-tick[data-off] { visibility: hidden; }
.pl-axis-title { fill: var(--wave-text); font: 600 12.5px var(--sans); }
.pl-curve { fill: none; stroke: var(--pl-ink); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Histogram bars (kind 'hist'): the series colour, translucent, under the step outline. */
.pl-bar { fill: var(--wave-signal); fill-opacity: .28; }
.pl-outline { stroke-width: 1.6; }
.pl-hline { stroke: var(--wave-muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.pl-mark { stroke: var(--wave-marker); stroke-width: 1.4; stroke-dasharray: 4 3; }
.pl-ref-label, .pl-mark-label { fill: var(--wave-text); font: 500 11.5px var(--mono); paint-order: stroke; stroke: var(--wave-bg); stroke-width: 4px; stroke-linejoin: round; }
.pl-point-dot { fill: var(--wave-marker); stroke: var(--wave-bg); stroke-width: 2; }
.pl-leader { stroke: var(--wave-muted); stroke-width: 1; }
.pl-label-bg { fill: var(--wave-bg); stroke: var(--wave-grid); stroke-width: 1; }
.pl-point-label { fill: var(--wave-text); font: 600 11.5px var(--mono); }
.pl-badge { fill: var(--wave-bg); stroke: var(--wave-cursor); stroke-width: 1.6; }
.pl-badge-text { fill: var(--wave-text); font: 700 11px var(--mono); }
.pl-badge-guide { stroke: var(--wave-cursor); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.pl-cursor { display: none; }
.plot-figure[data-pl-focused] .pl-badges { display: none; }
.plot-figure[data-pl-focused] .pl-cursor[data-on] { display: inline; animation: pl-in var(--dur-2) var(--ease); }
@keyframes pl-in { from { opacity: 0; } }
.plot-figure[data-pl-focused] .pl-point :is(.pl-label-bg, .pl-point-label, .pl-leader) { display: none; }
.pl-cursor-line { stroke: var(--wave-cursor); stroke-width: 1.6; }
.pl-cursor-tip { fill: var(--wave-cursor); }
.pl-dot { fill: var(--wave-bg); stroke: var(--pl-ink); stroke-width: 2.6; }
.pl-chip { fill: var(--wave-bg); stroke: var(--pl-ink); stroke-width: 1.3; }
.pl-chip-key { fill: var(--pl-ink); }
.pl-chip-text { fill: var(--wave-text); font: 600 11.5px var(--mono); }
.pl-stamp { fill: var(--wave-bg); stroke: var(--wave-cursor); stroke-width: 1.4; }
.pl-stamp-text { fill: var(--wave-text); font: 700 11px var(--mono); }
.pl-hover-line { stroke: var(--wave-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pl-hover-dot { fill: var(--wave-bg); stroke: var(--pl-ink); stroke-width: 2; }
.plot-reading { display: block; margin-top: 3px; color: var(--ink-2); font: 500 13px/1.5 var(--mono); }
.plot-table table { font-variant-numeric: tabular-nums; }
.plot-table td, .plot-table th { font-family: var(--mono); font-size: 13px; }

/* The focused step's note, as in a diagram: one explanation in a card with an accent edge. */
:is(.plot-figure[data-pl-focused], .schematic-figure[data-sch-focused]) .diagram-step-list { list-style: none; padding-left: 0; }
:is(.plot-figure[data-pl-focused], .schematic-figure[data-sch-focused]) .diagram-note { margin: 16px; padding: 14px 16px 4px; border: 1px solid var(--rule-strong); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
@media (max-width: 520px) { :is(.plot-figure[data-pl-focused], .schematic-figure[data-sch-focused]) .diagram-note { margin-inline: 10px; padding-inline: 12px; } }

/* ---------- schematics ---------- */
.schematic-viewport { display: block; overflow: auto; background: var(--paper); padding: 4px; }
.schematic-viewport:focus-visible { outline-offset: -3px; }
.schematic-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sch-grid-dot { fill: var(--rule-strong); opacity: .32; }
.sch-line, .sch-wire { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sch-plate { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: butt; }
.sch-fill { fill: var(--ink); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.sch-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.sch-junction { fill: var(--ink); }
.sch-sign { fill: var(--ink); font: 600 15px var(--sans); }
.sch-sign.small { font-size: 12.5px; }
.sch-label { fill: var(--ink); font: 650 13.5px var(--sans); }
.sch-value { fill: var(--ink-2); font: 500 12px var(--mono); }
.sch-sub { font-size: .78em; }
.sch-node-dot { fill: var(--accent); }
.sch-node-name { fill: var(--ink-2); font: 600 12px var(--mono); }
.sch-volts-bg { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; }
.sch-volts { fill: var(--ink); font: 600 12px var(--mono); }
.sch-part, .sch-wire { transition: opacity var(--dur-2), stroke var(--dur-2); }
.schematic-figure[data-sch-focused] .sch-part:not([data-on]),
.schematic-figure[data-sch-focused] .sch-wire:not([data-on]) { opacity: .28; }
.schematic-figure[data-sch-focused] .sch-junction { opacity: .5; }
.sch-wire[data-on] { stroke: var(--flow-call); stroke-width: 2.6; }
.sch-part[data-on] .sch-line, .sch-part[data-on] .sch-plate { stroke: var(--flow-call); }
.sch-part[data-on] .sch-fill { fill: var(--flow-call); stroke: var(--flow-call); }
.sch-currents { display: none; }
.schematic-figure[data-sch-focused] .sch-currents[data-on] { display: inline; }
.sch-current { fill: none; stroke: var(--flow-data); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 16; animation: sch-flow .8s linear infinite; }
@keyframes sch-flow { to { stroke-dashoffset: -16; } }
.sch-current-arrow { fill: none; stroke: var(--flow-data); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sch-current-bg { fill: var(--card); stroke: var(--flow-data); stroke-width: 1.4; }
.sch-current-label { fill: var(--ink); font: 600 12px var(--mono); }
.schematic-currents { margin: 4px 0 0; color: var(--ink-2); font: 500 13px/1.5 var(--mono); }
@media (prefers-reduced-motion: reduce) {
  .sch-current { animation: none; }
  .plot-figure[data-pl-focused] .pl-cursor[data-on] { animation: none; }
  .sch-part, .sch-wire { transition: none; }
}
@media (forced-colors: active) {
  .pl-curve, .pl-dot, .pl-chip { stroke: CanvasText; }
  .pl-cursor-line, .pl-badge, .pl-stamp { stroke: Highlight; }
  .sch-line, .sch-wire, .sch-plate { stroke: CanvasText; }
  .sch-fill, .sch-junction { fill: CanvasText; }
  .sch-wire[data-on], .sch-current, .sch-current-arrow { stroke: Highlight; }
}

/* ---------- SPICE runs in Try it (assets/v3/lesson.mjs, assets/v3/spice-plots.mjs) ----------
   The Plots tab of a spice lesson's instrument: the run's measurements as chips, then every plot
   of the run drawn by the same code as the lesson's figures. */
.run-plots { display: grid; gap: 12px; padding: 12px; border-top: var(--bw) solid var(--screen-rule); background: var(--screen-2); }
.run-plots[hidden] { display: none; }
.run-plots .plot-figure { margin: 0; }
.run-plots .diagram-heading { padding: 12px 16px 10px; }
.run-plots .diagram-title { font-size: 18px; }
.run-meas { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.run-meas code { display: inline-block; padding: 3px 10px; border: 1px solid var(--screen-rule); border-radius: 999px; color: var(--screen-ink); background: var(--screen); font: 500 12.5px/1.5 var(--mono); }
.run-plots-note, .run-plots-empty { margin: 0; color: var(--screen-muted); font: 13.5px/1.5 var(--sans); }
.output .out-line { padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.output .out-line:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.output .out-meas { color: var(--screen-ink); font-weight: 600; }
/* Phones: the run's plots use the full width of the screen, so the narrow drawing keeps its text size. */
@media (max-width: 560px) {
  .run-plots { padding: 10px 0 0; gap: 10px; }
  .run-meas, .run-plots-note, .run-plots-empty { padding-inline: 10px; }
  .run-plots .plot-figure { border-radius: 0; border-inline: 0; }
  .run-plots .plot-screen { padding-inline: 0; }
}