/* ==========================================================================
   Visual Plane — 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, and
   the constraint is that a perspective figure has to keep four things apart at a
   glance: the OBJECT being drawn, the CONSTRUCTION lines that locate it, the
   HORIZON and vanishing points, and the MEASUREMENT laid over the top. A reader
   who confuses a construction ray with an edge of the object has lost the
   figure, and those two are the pair most easily confused because they are both
   long straight lines.

   So the object is ink-weight and solid, the construction is thin and tinted,
   the horizon is a single reserved hue that appears nowhere else, and
   measurements are drawn in the accent with a plate behind any label.

   The register is drawing-office rather than laboratory: bright paper, graphite,
   a blue-grey for the construction and one warm accent for the thing measured.
   ========================================================================== */

:root {
  --paper:   #f5f3ef;
  --paper-2: #eeebe4;
  --paper-3: #e1ddd3;
  --ink:     #15181d;
  --ink-2:   #4a5158;
  --ink-3:   #5b6269;   /* darkened from #646c74: 4.48:1 on --paper-2 failed WCAG AA */
  --rule:    #cfc9be;
  --rule-2:  #e6e2da;
  --rule-3:  #e6e2da;

  /* Semantic roles, contrast-safe against --paper. */
  --c-a: #1c5f78;   /* a measured quantity, and the axes that carry one */
  --c-b: #a8480d;   /* the driven thing: the crank, the input */
  --c-c: #16695a;   /* a bound, a limit, a thing that cannot be crossed */
  --c-d: #7d5c07;   /* a prediction laid over a measurement */
  --c-e: #75508c;   /* structure: the frame, the ground */
  --c-warn: #ad2318; /* a claim that failed, or a configuration that cannot exist */

  /* The four things a mechanism figure must keep apart. */
  --l-input:   #a8480d;   /* the driven link */
  --l-coupler: #1c5f78;   /* the link that carries the motion across */
  --l-output:  #16695a;   /* the driven output */
  --l-frame:   #6b6459;   /* ground */
  --l-trace:   #75508c;   /* the path a point traces */

  /* 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:  #5b6269;   /* was #6f7780: quiet labels measured 2.44:1 on tinted figure grounds */
  --fig-faint: #cbc5b9;

  --tint: 16%;
  --tint-strong: 32%;

  --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(28 32 36 / 8%), 0 8px 24px -14px rgb(28 32 36 / 30%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #16191c;
    --paper-2: #1c2024;
    --paper-3: #262b30;
    --ink:     #e9ecef;
    --ink-2:   #b5bcc3;
    --ink-3:   #9aa2aa;
    --rule:    #333a41;
    --rule-2:  #20252a;
    --rule-3:  #20252a;

    --c-a: #56b4e9;
    --c-b: #ef8b3c;
    --c-c: #3fcfa5;
    --c-d: #edd94e;
    --c-e: #c193d8;
    --c-warn: #ff8a80;

    --l-input:   #ef8b3c;
    --l-coupler: #56b4e9;
    --l-output:  #3fcfa5;
    --l-frame:   #8d8578;
    --l-trace:   #c193d8;

    --fig-ink:   #e9ecef;
    --fig-soft:  #97a0a8;
    --fig-faint: #333a41;

    --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:   #16191c;
  --paper-2: #1c2024;
  --paper-3: #262b30;
  --ink:     #e9ecef;
  --ink-2:   #b5bcc3;
  --ink-3:   #9aa2aa;
  --rule:    #333a41;
  --rule-2:  #20252a;
  --rule-3:  #20252a;

  --c-a: #56b4e9;
  --c-b: #ef8b3c;
  --c-c: #3fcfa5;
  --c-d: #edd94e;
  --c-e: #c193d8;
  --c-warn: #ff8a80;

  --l-input:   #ef8b3c;
  --l-coupler: #56b4e9;
  --l-output:  #3fcfa5;
  --l-frame:   #8d8578;
  --l-trace:   #c193d8;

  --fig-ink:   #e9ecef;
  --fig-soft:  #97a0a8;
  --fig-faint: #333a41;

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

/* --- the picture ----------------------------------------------------------
   The object is ink. The construction that locates it is thin and tinted, so a
   ray to a vanishing point can never be mistaken for an edge of the thing being
   drawn — which is the one confusion that makes a perspective figure useless. */
.fig-svg .edge          { stroke: var(--fig-ink); stroke-width: 2.1; fill: none; stroke-linecap: round; }
.fig-svg .edge-thin     { stroke: var(--fig-ink); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.fig-svg .edge-near     { stroke: var(--c-b); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .edge-hidden   { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.fig-svg .edge-reflected{ stroke: color-mix(in oklab, var(--fig-ink) 38%, var(--paper)); stroke-width: 1.7; fill: none; }
.fig-svg .face-fill     { fill: color-mix(in oklab, var(--c-a) 14%, var(--paper-2)); stroke: none; }
.fig-svg .plan-fill     { fill: color-mix(in oklab, var(--c-a) 12%, var(--paper-2)); stroke: var(--c-a); stroke-width: 1.1; }

/* Construction: rays, guides, the picture plane, the ground line. */
.fig-svg .guide       { stroke: color-mix(in oklab, var(--c-a) 42%, var(--paper)); stroke-width: 0.9; fill: none; }
.fig-svg .ray         { stroke: var(--c-a); stroke-width: 1.7; fill: none; }
.fig-svg .picture-plane { stroke: var(--c-e); stroke-width: 2.2; fill: none; }
.fig-svg .ground-line { stroke: var(--l-frame); stroke-width: 1.8; }
.fig-svg .frame-outline { fill: none; stroke: var(--fig-soft); stroke-width: 1.4; stroke-dasharray: 6 4; }
.fig-svg .angle-arc   { stroke: var(--c-d); stroke-width: 1.4; fill: none; }

/* The horizon gets a hue of its own, used for nothing else on the site. */
.fig-svg .horizon     { stroke: var(--c-d); stroke-width: 1.7; fill: none; stroke-dasharray: 9 5; }
.fig-svg .axis-faint  { stroke: var(--fig-faint); stroke-width: 1.1; fill: none; }
.fig-svg .vp          { fill: var(--c-d); stroke: var(--paper); stroke-width: 1.3; }
.fig-svg .vp-halo     { fill: none; stroke: color-mix(in oklab, var(--c-d) 55%, var(--paper)); stroke-width: 1.2; }
.fig-svg .vp-triangle { fill: color-mix(in oklab, var(--c-d) 9%, var(--paper-2)); stroke: color-mix(in oklab, var(--c-d) 55%, var(--paper)); stroke-width: 1.1; }

/* The eye, which is part of the geometry on this site rather than an onlooker. */
.fig-svg .eye         { fill: var(--c-b); stroke: none; }
.fig-svg .eye-ring    { fill: none; stroke: var(--c-b); stroke-width: 1.3; }

/* Measurement laid over the picture. */
.fig-svg .measure     { stroke: var(--c-b); stroke-width: 2.2; fill: none; }
.fig-svg .target-line { stroke: var(--c-c); stroke-width: 1.5; fill: none; stroke-dasharray: 7 4; }
.fig-svg .truth-line  { stroke: color-mix(in oklab, var(--c-c) 60%, var(--paper)); stroke-width: 1.3; }
.fig-svg .conic       { stroke: var(--c-a); stroke-width: 2; fill: none; }
.fig-svg .pt-a        { fill: var(--c-b); stroke: var(--paper); stroke-width: 1.2; }
.fig-svg .pt-b        { fill: var(--fig-ink); stroke: none; }
.fig-svg .pt-c        { fill: var(--c-c); stroke: var(--paper); stroke-width: 1.2; }
.fig-svg .panel       { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }

/* The ground, drawn through the camera like everything else. */
.fig-svg .grid-line   { stroke: var(--fig-faint); stroke-width: 1; fill: none; }
.fig-svg .grid-line-b { stroke: color-mix(in oklab, var(--c-a) 30%, var(--paper)); stroke-width: 1; fill: none; }
.fig-svg .sky         { fill: color-mix(in oklab, var(--c-a) 6%, var(--paper-2)); stroke: none; }
.fig-svg .floor-below { fill: color-mix(in oklab, var(--c-e) 5%, var(--paper-2)); stroke: none; }

/* Light and shadow. */
.fig-svg .lamp        { fill: var(--c-d); stroke: var(--ink); stroke-width: 1.2; }
.fig-svg .shadow-fill { fill: color-mix(in oklab, var(--ink) 16%, var(--paper-2)); stroke: none; }
.fig-svg .drop        { stroke: color-mix(in oklab, var(--ink) 45%, var(--paper)); stroke-width: 1.5; fill: none; }
.fig-svg .post        { stroke: var(--fig-ink); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* People, used for the eye-level figures. */
.fig-svg .figure-block{ fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.2; }
.fig-svg .figure-head { fill: color-mix(in oklab, var(--c-e) var(--tint-strong), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.2; }

/* Spheres for the wide-angle figure, and the anamorphic sheet. */
.fig-svg .ball        { fill: color-mix(in oklab, var(--c-a) 26%, var(--paper)); stroke: none; }
.fig-svg .ball-mid    { fill: color-mix(in oklab, var(--c-b) 26%, var(--paper)); stroke: none; }
.fig-svg .ball-edge   { fill: none; stroke: var(--fig-ink); stroke-width: 1.2; }
.fig-svg .sheet       { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.fig-svg .glyph       { fill: var(--fig-ink); stroke: none; }
.fig-svg .glyph-ghost { fill: color-mix(in oklab, var(--fig-ink) 16%, var(--paper-2)); stroke: none; }

/* Plot series. */
.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; }

/* Axes and general furniture. */
.fig-svg .axis   { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .grid   { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg .soft   { stroke: var(--fig-soft); stroke-width: 1.2; fill: none; }
.fig-svg .faint  { stroke: var(--fig-faint); stroke-width: 1; fill: none; }
.fig-svg .measured      { fill: var(--c-a); stroke: none; }
.fig-svg .measured-line { stroke: var(--c-a); stroke-width: 2.1; fill: none; }
.fig-svg .fitted        { stroke: var(--c-d); stroke-width: 1.8; fill: none; stroke-dasharray: 6 4; }
.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; }
.fig-svg .fill-a { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); }
.fig-svg .fill-b { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); }
.fig-svg .fill-c { fill: color-mix(in oklab, var(--c-c) var(--tint), var(--paper-2)); }
.fig-svg .fill-d { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); }
.fig-svg text.mono { font-family: var(--font-mono); }

/* 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); stroke: none; opacity: 0.92; }

/* 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; }

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

/* --- moving the viewpoint -------------------------------------------------
   The natural draggable parameter here is a property of the camera — the field
   of view, the tilt, where the reader is standing — and it is not a decoration.
   The site's claim is that a picture is a projection from a point; moving the
   point IS the explanation.

   Every frame is produced at build time by the same generator that drew the
   static figure, which means every assertion the generator makes has been
   checked at every position the reader can reach. A picture no camera could
   produce cannot appear on the slider. */
.drag-row { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }
.drag-slider { width: min(28rem, 100%); accent-color: var(--c-b); cursor: ew-resize; }
.drag-slider:focus-visible { outline: 2px solid var(--c-b); 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); }