/* ==========================================================================
   Circuit Response — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   The palette is designed from a functional constraint rather than a mood,
   because this subject makes an unusual demand: almost every figure carries
   two curves that describe the same object, and the reader has to be able to
   tell at a glance which is which. So there are four roles and they never
   swap.

     MEASURED  the solved answer — what the network actually does. Teal, solid,
               the heaviest line on the canvas.
     MODEL     what the model predicts — the ideal source, the straight-line
               sketch, 1/(ωC), the nullor's flat gain. Grey, dashed, lighter.
               It has to read as an assumption rather than as data.
     EDGE      where the model stops being true. Magenta, used for nothing
               else anywhere on the site, so that a reader who has seen one
               figure recognises the mark in every other.
     LEVEL     a nominal being held against: unity loop gain, −180°, half
               power, the value a divider claims. Amber, dashed fine.

   The register is a datasheet rather than a laboratory: a cool near-white
   page, graphite ink, and the accents saturated enough to hold their meaning
   at one-pixel line widths in both themes.
   ========================================================================== */

:root {
  --paper:   #f4f5f6;
  --paper-2: #eaecee;
  --paper-3: #dcdfe2;
  --ink:     #14181c;
  --ink-2:   #464e55;
  --ink-3:   #4d555c;   /* kept dark enough to clear WCAG AA on --paper-2 */
  --rule:    #c8ced3;
  --rule-2:  #e2e5e8;
  --rule-3:  #e2e5e8;

  /* Semantic roles, contrast-safe against --paper. */
  --c-a: #0f6d78;   /* MEASURED — the solved answer */
  --c-b: #8a5a12;   /* a second measured family */
  --c-c: #a3266b;   /* EDGE — where the model stops. Nothing else uses it. */
  --c-d: #4a4fa8;   /* a third family, and poles */
  --c-e: #5c6570;   /* MODEL — what was assumed */
  --c-warn: #a8321f; /* a refusal, or a configuration that has no answer */

  /* Data series inside plots — Okabe–Ito, which the sibling colour site
     measures rather than assumes. Not for text. */
  --series-1: #0072b2;
  --series-2: #d55e00;
  --series-3: #009e73;
  --series-4: #e69f00;
  --series-5: #56b4e9;
  --series-6: #cc79a7;

  --fig-ink:   var(--ink);
  --fig-soft:  #566068;
  --fig-faint: #c6cbd0;

  --tint: 15%;
  --tint-strong: 30%;

  --font-body: Georgia, "Nimbus Roman", "Liberation Serif", "Times New Roman", serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(20 24 28 / 8%), 0 8px 24px -14px rgb(20 24 28 / 30%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #101418;
    --paper-2: #171c21;
    --paper-3: #212831;
    --ink:     #e7ebee;
    --ink-2:   #b2bac1;
    --ink-3:   #98a1a9;
    --rule:    #2e3740;
    --rule-2:  #1b2127;
    --rule-3:  #1b2127;

    --c-a: #3fc7d4;
    --c-b: #e8a33c;
    --c-c: #ff79c0;
    --c-d: #9aa0f5;
    --c-e: #97a2ad;
    --c-warn: #ff8a72;

    --fig-ink:   #e7ebee;
    --fig-soft:  #98a1a9;
    --fig-faint: #2e3740;

    --tint: 24%;
    --tint-strong: 40%;
    --shadow: 0 1px 2px rgb(0 0 0 / 48%), 0 12px 34px -16px rgb(0 0 0 / 80%);
  }
}

:root[data-theme="dark"] {
  --paper:   #101418;
  --paper-2: #171c21;
  --paper-3: #212831;
  --ink:     #e7ebee;
  --ink-2:   #b2bac1;
  --ink-3:   #98a1a9;
  --rule:    #2e3740;
  --rule-2:  #1b2127;
  --rule-3:  #1b2127;

  --c-a: #3fc7d4;
  --c-b: #e8a33c;
  --c-c: #ff79c0;
  --c-d: #9aa0f5;
  --c-e: #97a2ad;
  --c-warn: #ff8a72;

  --fig-ink:   #e7ebee;
  --fig-soft:  #98a1a9;
  --fig-faint: #2e3740;

  --tint: 24%;
  --tint-strong: 40%;
  --shadow: 0 1px 2px rgb(0 0 0 / 48%), 0 12px 34px -16px rgb(0 0 0 / 80%);
}

/* --- the four roles -------------------------------------------------------
   These five rules carry the site. Everything else in this file is furniture. */

/* MEASURED: the solved answer. */
.fig-svg .measured-line { stroke: var(--c-a); stroke-width: 2.3; fill: none; }
.fig-svg .measured      { fill: var(--c-a); stroke: none; }

/* MODEL: what was assumed. Dashed, so it reads as a claim and not as data. */
.fig-svg .ideal-line { stroke: var(--c-e); stroke-width: 1.7; fill: none; stroke-dasharray: 7 4; }

/* EDGE: where the model stops being true. Used nowhere else. */
.fig-svg .edge {
  stroke: var(--c-c); stroke-width: 1.7; fill: none; stroke-dasharray: 5 3.5;
}
.fig-svg .edge-soft {
  stroke: color-mix(in oklab, var(--c-c) 62%, var(--paper-2));
  stroke-width: 1.4; fill: none; stroke-dasharray: 3 3;
}

/* LEVEL: a nominal being held against. */
.fig-svg .target { stroke: var(--c-b); stroke-width: 1.4; fill: none; stroke-dasharray: 4 4; }

/* --- plots ---------------------------------------------------------------- */
.fig-svg .axis        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .axis-faint  { stroke: var(--fig-faint); stroke-width: 1.2; fill: none; }
.fig-svg .grid        { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg .grid-faint  { stroke: color-mix(in oklab, var(--fig-faint) 50%, var(--paper-2)); stroke-width: 0.7; }
.fig-svg .guide       { stroke: color-mix(in oklab, var(--c-a) 42%, var(--paper-2)); stroke-width: 1; fill: none; }
.fig-svg .ghost       { stroke: color-mix(in oklab, var(--fig-ink) 20%, var(--paper-2)); stroke-width: 1.3; fill: none; }
.fig-svg .span-line   { stroke: var(--c-c); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.fig-svg .target-line { stroke: var(--c-b); stroke-width: 2; fill: none; }
.fig-svg .mark-b      { stroke: var(--c-d); stroke-width: 1.2; fill: none; stroke-dasharray: 3 3; }
.fig-svg .pole-mark   { stroke: var(--c-d); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.fig-svg .dashed      { stroke-dasharray: 5 3; }

.fig-svg .series-a { stroke: var(--series-1); stroke-width: 2.1; fill: none; }
.fig-svg .series-b { stroke: var(--series-2); stroke-width: 2.1; fill: none; }
.fig-svg .series-c { stroke: var(--series-3); stroke-width: 2.1; fill: none; }
.fig-svg .series-d { stroke: var(--series-4); stroke-width: 2.1; fill: none; }
.fig-svg .series-e { stroke: var(--series-6); stroke-width: 2.1; fill: none; }

.fig-svg .dot-a { fill: var(--c-a); stroke: none; }
.fig-svg .dot-b { fill: var(--c-b); stroke: none; }
.fig-svg .dot-c { fill: var(--c-c); stroke: none; }
.fig-svg .dot-d { fill: var(--c-d); stroke: none; }

/* A label over a filled region gets a real plate, not a stroke halo — svg_check
   samples the fill beneath the glyph and a halo is invisible to it. */
.fig-svg .plate { fill: var(--paper-2); stroke: none; opacity: 0.94; }

/* A diagram <text> must not inherit the root stroke, or every label is drawn
   twice and reads as bold mud. Fleet-wide gotcha, cheap to state. */
.fig-svg text { stroke: none; }

/* --- schematics, drawn as labels ------------------------------------------
   Small, one hand, in a corner. The layout of a schematic carries no
   information — two drawings of the same circuit with different placement are
   the same circuit — so it is styled to read as an annotation rather than as a
   drawing worth studying. */
.fig-svg .wire     { stroke: var(--fig-soft); stroke-width: 1.3; fill: none; }
.fig-svg .part     { stroke: var(--fig-ink); stroke-width: 1.4; fill: var(--paper); }
.fig-svg .part-l   { stroke: var(--fig-ink); stroke-width: 1.5; fill: none; }
.fig-svg .node-dot { fill: var(--fig-soft); stroke: none; }
.fig-svg .sch-box  { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }

.section-head::after { border-top-style: solid; }

/* --- turning the one knob -------------------------------------------------
   Every field here has a parameter whose movement is the argument: a load, a
   frequency, a lead inductance, a filter order, a second pole, a length of
   track. Every frame a reader can reach was produced at build time by the same
   generator that drew the static picture, so every assertion it makes has been
   checked at every position on the slider. A circuit that does not do what the
   caption says cannot appear on it. */
.drag-row { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }
.drag-slider { width: min(28rem, 100%); accent-color: var(--c-a); cursor: ew-resize; }
.drag-slider:focus-visible { outline: 2px solid var(--c-a); outline-offset: 3px; }
.drag-readout {
  margin: 0; font: 0.8rem/1.4 var(--font-ui); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.drag-note { margin: 0; font: 0.74rem/1.4 var(--font-ui); color: var(--ink-3); }