/* ==========================================================================
   Crystallography & Symmetry — 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:   #faf8f6;
  --paper-2: #f2eeea;
  --paper-3: #e6e0da;
  --ink:     #1e1a2c;
  --ink-2:   #4a4462;
  --ink-3:   #605a78;
  --rule:    #d8d2cc;
  --rule-3:  #e9e4de;
  --rule-2:  #e9e4de;

  /* Semantic roles, and they are the symmetry elements themselves. A reader who
     learns that a lens means a two-fold centre must be able to trust it. */
  --c-a: #3d2f6b;   /* rotation centres, and the group itself */
  --c-b: #a3341f;   /* mirror lines */
  --c-c: #1d6b52;   /* glide lines — a mirror that also translates */
  --c-d: #7a5a12;   /* a measured or counted quantity */
  --c-e: #8a2a6b;   /* the lattice: translations, cells, basis vectors */
  --c-warn: #a52218;

  --fig-ink:   var(--ink);
  --fig-soft:  #5b5470;
  --fig-faint: #c3bcd0;

  --motif:      #3d2f6b;
  --motif-2:    #a3341f;
  --cell-edge:  #8a2a6b;

  --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:   #14121c;
    --paper-2: #1c1928;
    --paper-3: #262135;
    --ink:     #ece8f4;
    --ink-2:   #bab3d0;
    --ink-3:   #a49cbc;
    --rule:    #332c46;
    --rule-2:  #221d31;
    --rule-3:  #221d31;

    --c-a: #a99bf0;
    --c-b: #ff9578;
    --c-c: #5fd3a6;
    --c-d: #e9c46a;
    --c-e: #e58ec8;
    --c-warn: #fb7b6f;

    --fig-ink:   #e8e4f0;
    --fig-soft:  #9990b4;
    --fig-faint: #37304a;

    --motif:      #a99bf0;
    --motif-2:    #ff9578;
    --cell-edge:  #e58ec8;

    --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:   #14121c;
  --paper-2: #1c1928;
  --paper-3: #262135;
  --ink:   #ece8f4;
  --ink-2:   #bab3d0;
  --ink-3:   #a49cbc;
  --rule:  #332c46;
  --rule-2:  #221d31;
  --rule-3:  #221d31;

  --c-a: #a99bf0;
  --c-b: #ff9578;
  --c-c: #5fd3a6;
  --c-d: #e9c46a;
  --c-e: #e58ec8;
  --c-warn: #fb7b6f;

  --fig-ink:   #e8e4f0;
  --fig-soft:  #9990b4;
  --fig-faint: #37304a;

  --motif:    #a99bf0;
  --motif-2:  #ff9578;
  --cell-edge:  #e58ec8;

  --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 symmetry elements, drawn as crystallography has drawn them for a century:
   a lens for a two-fold centre, a triangle for three, a square for four, a
   hexagon for six; a solid line for a mirror, a dashed one for a glide. Using
   the International Tables conventions costs nothing and means a reader meets
   the same marks everywhere else. */
.fig-svg .rot        { fill: var(--c-a); stroke: none; }
.fig-svg .rot-open   { fill: var(--paper); stroke: var(--c-a); stroke-width: 1.6; }
.fig-svg .mirror     { stroke: var(--c-b); stroke-width: 2.2; fill: none; }
.fig-svg .glide      { stroke: var(--c-c); stroke-width: 2.2; fill: none; stroke-dasharray: 8 6; }

/* The lattice: cell edges, basis vectors, translation arrows. */
.fig-svg .cell       { stroke: var(--cell-edge); stroke-width: 1.6; fill: none; }
.fig-svg .cell-fill  { fill: color-mix(in oklab, var(--c-e) 7%, var(--paper-2)); stroke: none; }
.fig-svg .basis      { stroke: var(--c-e); stroke-width: 2.4; fill: none; }
.fig-svg .lattice-pt { fill: var(--fig-soft); stroke: none; }

/* The motif, and its images under the group. The first point of the asymmetric
   unit is marked differently so a reader can follow which way it has been
   turned or flipped — which is the whole information a comma carries. */
.fig-svg .motif      { fill: var(--motif); stroke: none; }
.fig-svg .motif-head { fill: var(--motif-2); stroke: none; }
.fig-svg .motif-line { stroke: var(--motif); stroke-width: 2; fill: none; stroke-linejoin: round; }
.fig-svg .motif-flip { stroke: var(--motif-2); stroke-width: 2; fill: none; stroke-linejoin: round; }

/* A claim under test, and one that failed. */
.fig-svg .measured   { stroke: var(--c-d); stroke-width: 2.2; fill: none; }
.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 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 .dot-a      { fill: var(--c-a); stroke: none; }
.fig-svg .dot-d      { fill: var(--c-d); stroke: none; }
.fig-svg .dot-warn   { fill: var(--c-warn); stroke: none; }

/* Aperiodic tiles. Fill and outline in one element rather than two: a Penrose
   tiling at depth six is several thousand tiles, and doubling the element count
   to draw an outline separately doubles the page weight for nothing. */
.fig-svg .tile-a {
  fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2));
  stroke: var(--fig-faint); stroke-width: 0.9; stroke-linejoin: round;
}
.fig-svg .tile-d {
  fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2));
  stroke: var(--fig-faint); stroke-width: 0.9; stroke-linejoin: round;
}
.fig-svg .fill-a     { fill: color-mix(in oklab, var(--c-a) 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 -------------------------------------------------
   Inflation depth is this site's natural draggable axis, and cell count is the
   other. 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); }