/* ==========================================================================
   Numerical Linear Algebra — 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. A
   figure here has to keep four things apart, and a reader has to be able to tell
   which is which without reading a legend:

     EXACT      — the answer that is known, from a theorem or from rational
                  arithmetic. Green, and used for nothing else.
     COMPUTED   — what the floating-point algorithm actually returned. Blue,
                  the site's working colour.
     PREDICTED  — a bound or a theoretical rate. Violet, and always dashed,
                  because it is a claim rather than a measurement.
     LOST       — the part of the answer the arithmetic destroyed. Warm red.

   Everything else is structure. The register is plotter-pen on graph paper: a
   cool grey-white, a near-black ink with a blue cast, and drawn lines that look
   as though they came off a pen plotter rather than out of a chart library.
   ========================================================================== */

:root {
  --paper:   #f4f6f7;
  --paper-2: #e9eef0;
  --paper-3: #dae1e5;
  --ink:     #16212b;
  --ink-2:   #44525c;
  --ink-3:   #4f5d67;
  --rule:    #c3cdd3;
  --rule-2:  #dfe6e9;
  --rule-3:  #dfe6e9;

  /* The four roles. Contrast-checked against --paper and --paper-2. */
  --c-a: #14538f;   /* COMPUTED — what the algorithm returned */
  --c-b: #0f6247;   /* EXACT — the known answer */
  --c-c: #6a3fa8;   /* PREDICTED — a bound, a rate, a theorem's line */
  --c-d: #a8401d;   /* LOST — the digits the arithmetic destroyed */
  --c-e: #56646d;   /* structure: frames, ground, the matrix itself */
  --c-warn: #9e1f13; /* a computation that broke down rather than degraded */

  /* 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:  #55636c;
  --fig-faint: #c6d0d6;

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

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #141a1f;
    --paper-2: #1a2128;
    --paper-3: #232c34;
    --ink:     #e6ecf0;
    --ink-2:   #b1bcc4;
    --ink-3:   #97a4ac;
    --rule:    #2f3a43;
    --rule-2:  #1e262c;
    --rule-3:  #1e262c;

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

    --fig-ink:   #e6ecf0;
    --fig-soft:  #98a5ad;
    --fig-faint: #2f3a43;

    --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:   #141a1f;
  --paper-2: #1a2128;
  --paper-3: #232c34;
  --ink:     #e6ecf0;
  --ink-2:   #b1bcc4;
  --ink-3:   #97a4ac;
  --rule:    #2f3a43;
  --rule-2:  #1e262c;
  --rule-3:  #1e262c;

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

  --fig-ink:   #e6ecf0;
  --fig-soft:  #98a5ad;
  --fig-faint: #2f3a43;

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

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

/* --- the four roles, as lines and as marks -------------------------------- */
.fig-svg .computed      { stroke: var(--c-a); stroke-width: 2.1; fill: none; }
.fig-svg .exact         { stroke: var(--c-b); stroke-width: 2.1; fill: none; }
.fig-svg .predicted     { stroke: var(--c-c); stroke-width: 1.7; fill: none; stroke-dasharray: 7 4; }
.fig-svg .lost          { stroke: var(--c-d); stroke-width: 2.1; fill: none; }
.fig-svg .broke         { stroke: var(--c-warn); stroke-width: 2.3; fill: none; stroke-dasharray: 2 3; }

.fig-svg .dot-computed  { fill: var(--c-a); stroke: none; }
.fig-svg .dot-exact     { fill: var(--c-b); stroke: none; }
.fig-svg .dot-predicted { fill: var(--c-c); stroke: none; }
.fig-svg .dot-lost      { fill: var(--c-d); stroke: none; }
.fig-svg .dot-open      { fill: var(--paper); stroke: var(--fig-soft); stroke-width: 1.3; }

/* Generic series, where a figure carries more than the four roles. */
.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; }
.fig-svg .dot-a { fill: var(--series-1); stroke: none; }
.fig-svg .dot-b { fill: var(--series-2); stroke: none; }
.fig-svg .dot-c { fill: var(--series-3); stroke: none; }
.fig-svg .dot-d { fill: var(--series-4); 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 .fill-quiet { fill: var(--paper-3); stroke: none; }
.fig-svg .panel { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }

/* --- the matrix, drawn as a matrix ----------------------------------------
   The entries are the figure on half this site, so the grid itself is quiet and
   the roles carry the meaning: the pivot being used, the entries it is about to
   change, and the ones already reduced to zero. */
.fig-svg .cell-num       { fill: var(--fig-ink); font-size: 12.5px; }
.fig-svg .cell-num.em    { font-weight: 700; }
.fig-svg .cell-pivot     { fill: color-mix(in oklab, var(--c-a) var(--tint-strong), var(--paper)); stroke: var(--c-a); stroke-width: 1.1; }
.fig-svg .cell-active    { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper)); stroke: none; }
.fig-svg .cell-done      { fill: color-mix(in oklab, var(--c-b) 10%, var(--paper)); stroke: none; }
.fig-svg .cell-zero      { fill: var(--paper-3); stroke: none; }
.fig-svg .cell-lost      { fill: color-mix(in oklab, var(--c-warn) var(--tint), var(--paper)); stroke: none; }
.fig-svg .bracket        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .bar-edge       { fill: none; }
.fig-svg .bar-edge.a     { stroke: var(--c-a); }
.fig-svg .bar-edge.b     { stroke: var(--c-b); }
.fig-svg .bar-edge.c     { stroke: var(--c-c); }
.fig-svg .bar-edge.d     { stroke: var(--c-d); }
.fig-svg .bar-edge.e     { stroke: var(--c-e); }

/* --- the residual badge ---------------------------------------------------
   The rule the site is named for, and therefore furniture rather than an
   annotation: same place, same type, on every figure that factorises anything.
   A value inside tolerance reads as ordinary; one outside reads as a failure,
   because it is one. */
.fig-svg .badge-bg  { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.fig-svg .good      { fill: var(--c-b); }
.fig-svg .bad       { fill: var(--c-warn); font-weight: 700; }

/* --- axes and furniture --------------------------------------------------- */
.fig-svg .axis   { stroke: var(--fig-soft); stroke-width: 1.3; 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 .target { stroke: var(--c-c); stroke-width: 1.5; stroke-dasharray: 5 3; fill: none; }
.fig-svg .dashed { stroke-dasharray: 5 3; }
.fig-svg text.mono { font-family: var(--font-mono); }
.fig-svg .lbl.sm { font-size: 12px; }
.fig-svg .lbl.em { font-weight: 700; }
.fig-svg .lbl.quiet { fill: var(--fig-soft); }
.fig-svg .lbl.a { fill: var(--c-a); }
.fig-svg .lbl.b { fill: var(--c-b); }
.fig-svg .lbl.c { fill: var(--c-c); }
.fig-svg .lbl.d { fill: var(--c-d); }
.fig-svg .lbl.warn { fill: var(--c-warn); }

/* A label over a filled region gets a real plate, not a stroke halo — svg_check
   samples the fill beneath the glyph, so a halo is readable to a person and
   invisible to the gate. */
.fig-svg .plate { fill: var(--paper); stroke: none; opacity: 0.92; }

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

/* --- turning the one knob -------------------------------------------------
   The knob on this site is the mantissa. Every frame is produced at build time
   by the same routine that drew the static figure, so every assertion the
   generator makes has been checked at every precision the reader can reach —
   including the precisions where the algorithm fails, which are the interesting
   end of the slider. */
.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); }