/* The styles figures.js output cannot draw without.
 *
 * figures.js emits bare SVG carrying seven class names and no presentation
 * attributes — `<line class="ax" .../>`, never `stroke="..."`. That is the
 * right split: the renderer decides geometry, the stylesheet decides ink. It
 * also means the SVG is **invisible** wherever these rules are absent, because
 * an SVG line with no stroke defaults to `stroke: none` rather than to black.
 *
 * Which is exactly what shipped. The prototypes carried their own copy of these
 * rules inline, the Rails app carried none, and 1,125 active questions drew
 * their labels and dots — which default to black *fill* — while every axis,
 * tick, guide and bar silently did not. "Which quadrant is point P in?" was
 * rendering a dot floating in blank space with no axes to have quadrants.
 *
 * So the rules live here, beside the renderer that emits them, and everything
 * that loads figures.js loads this too. There is no second copy to keep in step
 * — that was the bug.
 *
 * Colours come from three variables of the RENDERER'S OWN: --fig-ink (the
 * lines you read), --fig-mark (the one thing the question is about) and
 * --fig-label (the text). A host page maps its palette onto them.
 *
 * They are named for the renderer rather than for any app's brand, and every
 * reference here and in figures.js carries a fallback, because the previous
 * version read the app's --navy and --crimson directly. When those tokens were
 * renamed the CSS silently fell back to hardcoded navy and the SVG's own
 * inline `stroke="var(--navy)"` resolved to nothing at all, so a net came out
 * as a white blob with no edges. A renderer cannot depend on a name it does
 * not own.
 */

.ax {
  stroke: var(--fig-ink, #1f1c26);
  stroke-width: 1.6;
}

/* Fainter than an axis: reference lines you read past, not lines you read. */
.guide {
  stroke: color-mix(in srgb, var(--fig-ink, #1f1c26) 22%, transparent);
  stroke-width: 1;
}

.tick {
  stroke: var(--fig-ink, #1f1c26);
  stroke-width: 1.4;
}

.lbl {
  font-family: Charter, Cambria, Georgia, serif;
  font-size: 11px;
  fill: var(--fig-label, #615a6e);
}

.dot { fill: var(--fig-ink, #1f1c26); }

/* The hollow middle of an open circle on a number line: the thing that says
 * an endpoint is NOT included. It was `var(--paper)`, a name the renderer
 * does not own and the lesson player never defined, so it resolved to
 * nothing and SVG filled it solid black. Every open inequality in every
 * lesson looked closed. A host page may override it; the fallback is what
 * makes it right by default. */
:root { --fig-paper: #fcfcf9; }

.bar { fill: color-mix(in srgb, var(--fig-ink, #1f1c26) 72%, transparent); }

/* The one thing on the figure the question is about — the plotted point, the
 * marked value. Crimson because it is the answer, and it is the only thing on
 * any figure that gets that colour. */
.mark { fill: var(--fig-mark, #a8202f); }