/* ==========================================================================
   Phyllotaxis — 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. A figure here has to
   keep three things apart: the PATTERN, the MEASUREMENT laid over it, and the
   CLAIM being tested — which has to read as a claim rather than as a result. So
   the pattern is ink, measurement is one accent, and a claim under test gets a
   second accent used nowhere else. A reader can then tell at a glance whether a
   line in a figure is something measured or something asserted, which on a site
   about over-claimed patterns is the distinction that matters most.

   The register is herbarium rather than laboratory: warm off-white paper, a
   green-black ink, one clay accent for what is measured, and a muted red kept
   for the thing that failed its test.
   ========================================================================== */

:root {
  --paper:   #f4f5f0;
  --paper-2: #eceee5;
  --paper-3: #dfe2d6;
  --ink:     #1a2318;
  --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: #8a4b1f;   /* a measured quantity, and the axes that carry one */
  --c-b: #2b6046;   /* a second family, or the thing being compared with */
  --c-c: #3d6b8a;   /* a bound, a limit, a thing that cannot be crossed */
  --c-d: #7a6410;   /* a claim under test — used nowhere else */
  --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 pattern ----------------------------------------------------------
   A primordium is a filled dot and nothing else: no outline, no highlight, no
   suggestion that it is a seed rather than a point produced by a rule. What is
   drawn ON TOP of the pattern — a counted spiral family, a fitted curve, a
   marked optimum — is what carries the accents. */
.fig-svg .seed        { fill: var(--fig-ink); stroke: none; }
.fig-svg .disc        { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.fig-svg .meristem    { fill: color-mix(in oklab, var(--c-b) 10%, var(--paper-2)); stroke: var(--c-b); stroke-width: 1.2; }
.fig-svg .band        { fill: none; stroke: var(--c-c); stroke-width: 1.1; stroke-dasharray: 6 5; }

/* The two counted spiral families. Distinct in hue AND in dash, so the count is
   legible in greyscale and to a reader who cannot separate the two hues. */
.fig-svg .para-a      { stroke: var(--c-a); stroke-width: 1.5; fill: none; }
.fig-svg .para-b      { stroke: var(--c-b); stroke-width: 1.5; fill: none; stroke-dasharray: 7 4; }
.fig-svg .para        { stroke: var(--c-a); stroke-width: 1.4; fill: none; }

/* Growth curves. */
.fig-svg .spiral      { stroke: var(--fig-ink); stroke-width: 2.1; fill: none; }
.fig-svg .spiral-b    { stroke: var(--c-a); stroke-width: 2.1; fill: none; }
.fig-svg .spiral-warn { stroke: var(--c-warn); stroke-width: 2.1; fill: none; }
.fig-svg .branch      { stroke: var(--fig-ink); fill: none; stroke-linecap: round; }

/* Tilings. */
.fig-svg .cell        { fill: none; stroke: color-mix(in oklab, var(--fig-ink) 34%, var(--paper)); stroke-width: 0.9; }
.fig-svg .cell-six    { fill: color-mix(in oklab, var(--c-b) 14%, var(--paper-2)); stroke: color-mix(in oklab, var(--fig-ink) 34%, var(--paper)); stroke-width: 0.9; }

/* Measurement laid over the pattern. */
.fig-svg .measure     { stroke: var(--c-a); stroke-width: 2.2; fill: none; }
.fig-svg .guide       { stroke: color-mix(in oklab, var(--c-a) 40%, var(--paper)); stroke-width: 0.9; fill: none; }
.fig-svg .target-line { stroke: var(--c-d); stroke-width: 1.5; fill: none; stroke-dasharray: 7 4; }
.fig-svg .axis-faint  { stroke: var(--fig-faint); stroke-width: 1.1; fill: none; }
.fig-svg .pt-a        { fill: var(--c-a); 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 .pt-warn     { fill: var(--c-warn); stroke: var(--paper); stroke-width: 1.2; }
.fig-svg .pt-open     { fill: var(--paper); stroke: var(--fig-soft); stroke-width: 1.4; }
.fig-svg .panel       { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.fig-svg .fill-warn   { fill: color-mix(in oklab, var(--c-warn) var(--tint), var(--paper-2)); }

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

/* --- turning the one knob -------------------------------------------------
   Every subject here is a one- or three-parameter family, and the draggable
   parameter is the parameter: a divergence angle, a growth factor, a whorl
   expansion, a growth rate. Moving it IS the explanation rather than a
   decoration on one.

   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
   pattern no rule 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); }