/* ==========================================================================
   Combinatorial Game Theory — tokens.
   ==========================================================================

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

   Light mode is ivory — a games table, bone and boxwood. Dark mode is walnut,
   the other half of the same table, rather than a generic night theme.

   The three principal roles are not chosen. bLue is Left and Red is Right,
   which is Conway's own mnemonic and the convention of Winning Ways, of
   Hackenbush and of every paper in the field; green is an edge either player
   may take, which is what makes a game impartial. Adopting them means a reader
   who knows the subject can read these figures without a key, and a reader who
   does not learns the convention they will meet everywhere else.
   ========================================================================== */

:root {
  --paper:   #f7f9fa;
  --paper-2: #eef2f4;
  --paper-3: #dfe6ea;
  --ink:     #10242b;
  --ink-2:   #3b525b;
  --ink-3:   #526871;
  --rule:    #cbd8de;
  --rule-3:  #e0e9ed;
  --rule-2:  #e0e9ed;

  /* Semantic roles, and they are the quantities the subject distinguishes.
     Never reuse them for decoration: a reader who learns that red means faster
     must be able to trust it on every figure. */
  --c-a: #0d5c73;   /* the flow itself: streamlines, velocity, the field */
  --c-b: #b3401f;   /* high speed / low pressure — the suction side */
  --c-c: #1d6b4f;   /* low speed / high pressure — the stagnation side */
  --c-d: #7a5a12;   /* a measured quantity: circulation, lift, a coefficient */
  --c-e: #7d2a86;   /* vorticity, and the rotation the ideal theory forbids */
  --c-warn: #a52218;

  --fig-ink:   var(--ink);
  --fig-soft:  #4e666f;
  --fig-faint: #b3c4cb;

  /* The body in the stream, and the surface it sits on. */
  --body-fill: #d7e0e4;
  --body-edge: #6d838c;
  --wall:      #93a6ad;

  --tint: 13%;
  --tint-strong: 24%;

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

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0d1719;
    --paper-2: #132125;
    --paper-3: #1b2d33;
    --ink:     #e6eef1;
    --ink-2:   #adc2ca;
    --ink-3:   #7f979f;
    --rule:    #26383f;
    --rule-2:  #18272c;
    --rule-3:  #18272c;

    --c-a: #5cc3e0;
    --c-b: #ff9470;
    --c-c: #5cd39d;
    --c-d: #e9c46a;
    --c-e: #d98ae0;
    --c-warn: #fb7b6f;

    --fig-ink:   #e2ebee;
    --fig-soft:  #8fa8b1;
    --fig-faint: #2b3d44;

    --body-fill: #21343a;
    --body-edge: #7b959e;
    --wall:      #6d868e;

    --tint: 19%;
    --tint-strong: 32%;
    --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
  }
}

:root[data-theme="dark"] {
  --paper:   #0d1719;
  --paper-2: #132125;
  --paper-3: #1b2d33;
  --ink:   #e6eef1;
  --ink-2:   #adc2ca;
  --ink-3:   #7f979f;
  --rule:  #26383f;
  --rule-2:  #18272c;
  --rule-3:  #18272c;

  --c-a: #5cc3e0;
  --c-b: #ff9470;
  --c-c: #5cd39d;
  --c-d: #e9c46a;
  --c-e: #d98ae0;
  --c-warn: #fb7b6f;

  --fig-ink:   #e2ebee;
  --fig-soft:  #8fa8b1;
  --fig-faint: #2b3d44;

  --body-fill: #21343a;
  --body-edge: #7b959e;
  --wall:    #6d868e;

  --tint: 19%;
  --tint-strong: 32%;
  --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
}

/* --- site-specific roles -------------------------------------------------- */

/* The flow itself. Streamlines are the one thing on every figure, so they are
   the quietest — a page of confident blue lines is unreadable. */
.fig-svg .stream        { stroke: var(--c-a); stroke-width: 1.5; fill: none; opacity: 0.85; }
.fig-svg .stream-set    { stroke-linecap: round; }
.fig-svg .streak        { stroke: var(--c-a); stroke-width: 2.4; fill: none; }

/* Contour bands. Nine of them, ramped from the high-pressure side through the
   paper colour to the suction side, so a band near ambient is nearly invisible
   and the extremes carry the eye. Both themes get a ramp because these are
   colour-mixes against the current paper, not fixed colours. */
.fig-svg .band          { stroke: none; }
.fig-svg .band-0        { fill: color-mix(in oklab, var(--c-c) 34%, var(--paper-2)); }
.fig-svg .band-1        { fill: color-mix(in oklab, var(--c-c) 25%, var(--paper-2)); }
.fig-svg .band-2        { fill: color-mix(in oklab, var(--c-c) 16%, var(--paper-2)); }
.fig-svg .band-3        { fill: color-mix(in oklab, var(--c-c) 8%,  var(--paper-2)); }
.fig-svg .band-4        { fill: var(--paper-2); }
.fig-svg .band-5        { fill: color-mix(in oklab, var(--c-b) 8%,  var(--paper-2)); }
.fig-svg .band-6        { fill: color-mix(in oklab, var(--c-b) 16%, var(--paper-2)); }
.fig-svg .band-7        { fill: color-mix(in oklab, var(--c-b) 25%, var(--paper-2)); }
.fig-svg .band-8        { fill: color-mix(in oklab, var(--c-b) 34%, var(--paper-2)); }
.fig-svg .iso           { stroke: color-mix(in oklab, var(--fig-ink) 26%, transparent);
                          stroke-width: 0.8; fill: none; }

/* Vorticity, which the ideal theory says cannot exist and which is where all
   the interesting behaviour comes from. Signed, so two directions. */
.fig-svg .vort-pos      { fill: color-mix(in oklab, var(--c-e) 30%, var(--paper-2)); stroke: none; }
.fig-svg .vort-neg      { fill: color-mix(in oklab, var(--c-a) 30%, var(--paper-2)); stroke: none; }

/* The body in the stream, and a wall. */
.fig-svg .body          { fill: var(--body-fill); stroke: var(--body-edge); stroke-width: 1.6; }
.fig-svg .wall          { stroke: var(--wall); stroke-width: 2.4; fill: none; }
.fig-svg .hatch         { stroke: var(--wall); stroke-width: 1; }

/* A measured quantity — a circulation loop, a coefficient, a force arrow. */
.fig-svg .measured      { stroke: var(--c-d); stroke-width: 2.2; fill: none; }
.fig-svg .force         { stroke: var(--c-d); stroke-width: 2.6; fill: none; }
.fig-svg .stagnation    { fill: var(--c-c); stroke: var(--paper); stroke-width: 1.4; }

/* A claim being tested and failing: the wrong explanation, drawn. */
.fig-svg .refuted       { stroke: var(--c-warn); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.fig-svg text.refuted   { fill: var(--c-warn); stroke: none; }

/* Axes, grids and the general furniture of a plotted figure. */
.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 .dot-a         { fill: var(--c-a); stroke: none; }
.fig-svg .dot-b         { fill: var(--c-b); stroke: none; }
.fig-svg .dot-warn      { fill: var(--c-warn); 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 rule under section headings. */
.section-head::after { border-top-style: solid; }

/* --- dragging a parameter -------------------------------------------------
   The Reynolds number is the site's most important axis and the reader can move
   it. The control sits under the caption, outside the SVG, so the figure keeps
   role="img" and the page reads correctly with the script absent. */
.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); }