/* ==========================================================================
   Molecular Geometry & Bonding — 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 the cool white of a spectroscopy print. Dark mode is deep
   slate rather than a generic night theme.

   The two principal roles carry the single most important distinction in the
   subject: **the sign of the wavefunction**. A positive lobe is blue and a
   negative one is amber, and a figure that drew only the magnitude would have
   thrown away the difference between a bonding and an antibonding interaction.
   Blue and amber are chosen because they separate for every common form of
   colour vision, which matters when the whole argument is which lobe is which.
   ========================================================================== */

:root {
  --paper:   #f7f9fa;
  --paper-2: #eef2f4;
  --paper-3: #e0e7ea;
  --ink:     #16232a;
  --ink-2:   #42525a;
  --ink-3:   #58686f;
  --rule:    #ccd7dc;
  --rule-2:  #e3eaed;
  --rule-3:  #e3eaed;

  /* Semantic roles. The first two are the sign of psi and nothing else. */
  --c-a: #1f4b63;   /* a positive lobe, and the wavefunction generally */
  --c-b: #b0541f;   /* a negative lobe — the sign that makes bonding bonding */
  --c-c: #2f7a5e;   /* a node: where the wavefunction is exactly zero */
  --c-d: #8a6a12;   /* a measured or computed quantity */
  --c-e: #5a4a8c;   /* structure: nuclei, bonds, axes, symmetry elements */
  --c-warn: #a3231a;

  --fig-ink:   var(--ink);
  --fig-soft:  #62727a;
  --fig-faint: #c2ced3;

  --lobe-pos:  #1f4b63;
  --lobe-neg:  #b0541f;
  --nucleus:   #33404a;

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

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #11171c;
    --paper-2: #182028;
    --paper-3: #222c35;
    --ink:     #e6edf1;
    --ink-2:   #b0bec6;
    --ink-3:   #97a6af;
    --rule:    #2d3a45;
    --rule-2:  #1d252d;
    --rule-3:  #1d252d;

    --c-a: #74b6dc;
    --c-b: #f0a05e;
    --c-c: #63cba4;
    --c-d: #e6c463;
    --c-e: #b0a0ee;
    --c-warn: #fb7b6f;

    --fig-ink:   #e4ebef;
    --fig-soft:  #94a3ac;
    --fig-faint: #33414c;

    --lobe-pos:  #74b6dc;
    --lobe-neg:  #f0a05e;
    --nucleus:   #cdd8de;

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

:root[data-theme="dark"] {
  --paper:   #11171c;
  --paper-2: #182028;
  --paper-3: #222c35;
  --ink:     #e6edf1;
  --ink-2:   #b0bec6;
  --ink-3:   #97a6af;
  --rule:    #2d3a45;
  --rule-2:  #1d252d;
  --rule-3:  #1d252d;

  --c-a: #74b6dc;
  --c-b: #f0a05e;
  --c-c: #63cba4;
  --c-d: #e6c463;
  --c-e: #b0a0ee;
  --c-warn: #fb7b6f;

  --fig-ink:   #e4ebef;
  --fig-soft:  #94a3ac;
  --fig-faint: #33414c;

  --lobe-pos:  #74b6dc;
  --lobe-neg:  #f0a05e;
  --nucleus:   #cdd8de;

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

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

/* The two lobes. Every orbital face is one of these, and which one it is is the
   sign of the wavefunction there rather than a decorative choice. */
.fig-svg .lobe-pos {
  fill: color-mix(in oklab, var(--lobe-pos) var(--tint-strong), var(--paper-2));
  stroke: color-mix(in oklab, var(--lobe-pos) 55%, var(--paper)); stroke-width: 0.4;
}
.fig-svg .lobe-neg {
  fill: color-mix(in oklab, var(--lobe-neg) var(--tint-strong), var(--paper-2));
  stroke: color-mix(in oklab, var(--lobe-neg) 55%, var(--paper)); stroke-width: 0.4;
}
.fig-svg .lobe-pos-line { stroke: var(--lobe-pos); stroke-width: 2; fill: none; }
.fig-svg .lobe-neg-line { stroke: var(--lobe-neg); stroke-width: 2; fill: none; }

/* A node: where the wavefunction is exactly zero, drawn as the surface it is. */
.fig-svg .node-line { stroke: var(--c-c); stroke-width: 1.8; fill: none; stroke-dasharray: 6 5; }
.fig-svg .node-fill { fill: color-mix(in oklab, var(--c-c) 10%, var(--paper-2)); stroke: none; }

/* Nuclei and bonds. */
.fig-svg .nucleus { fill: var(--nucleus); stroke: none; }
/* An element symbol drawn on top of a nucleus needs the paper colour, not the
   ink colour — the nucleus is dark in light mode and light in dark mode, so the
   label has to be the opposite of the page rather than the same as it. */
.fig-svg text.on-nucleus { fill: var(--paper); stroke: none; }
.fig-svg .nucleus-ring { fill: var(--paper); stroke: var(--nucleus); stroke-width: 1.6; }
.fig-svg .bond { stroke: var(--c-e); stroke-width: 3.2; fill: none; stroke-linecap: round; }
.fig-svg .bond-thin { stroke: var(--c-e); stroke-width: 1.6; fill: none; }
.fig-svg .lone-pair { fill: var(--c-e); stroke: none; opacity: 0.8; }

/* Symmetry elements, in the conventions a chemist meets everywhere else. */
.fig-svg .axis-n { stroke: var(--c-e); stroke-width: 2.2; fill: none; }
.fig-svg .plane { fill: color-mix(in oklab, var(--c-e) 12%, var(--paper-2)); stroke: var(--c-e); stroke-width: 1.2; }
.fig-svg .centre { fill: var(--c-e); stroke: none; }

/* 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-b      { fill: var(--c-b); stroke: none; }
.fig-svg .dot-d      { fill: var(--c-d); stroke: none; }
.fig-svg .dot-e      { fill: var(--c-e); 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-d     { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); }
.fig-svg .fill-e     { fill: color-mix(in oklab, var(--c-e) 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 -------------------------------------------------
   Rotation is this site's natural draggable axis, and it earns its place more
   here than anywhere else in the fleet: three-dimensional structure genuinely
   cannot be read from one projection. Every frame was produced at build time by
   the same generator, so every frame passed the same assertions. 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); }