/* figure-base.css — v1.0
   Chrome shared by every interactive figure, whatever engine draws it:
   the palette, the figure frame, the readout row, the control row, the
   caption. Engine-specific styling lives beside its engine.

   Page chrome (body, .page, h1/h2, prose) stays in the page.

   PALETTE CONTRACT — do not repaint these without repainting the whole family.

   Structural language (E5 stencil figures):
     --half    coral   half step / pinch / tension
     --stencil navy    the rigid stencil itself, whole steps, structure
     --aug     purple  augmented 2nd (a gap where a rung should be)
     --raised  teal    a degree raised relative to the reference shape
     --blue    blue    the blue note
     --accent  amber   a degree lowered relative to the reference shape; the
                       flash of a note being struck; and, everywhere, THE THING
                       THE READER JUST CHANGED

   Harmonic-function language (E3 grid/ribbon figures) — the Canon warm trio
   (DESIGN.md Appendix B, Ruling 2; ratified 2026-07-13), the same colours
   Doug's static harmony strips use (music-graphics skill), so a printed
   strip and an animated grid agree with each other:
     --fn-tonic       antique gold   I, vi, iii
     --fn-subdom      forest green   IV, ii
     --fn-dom         mahogany       V, V7
     --fn-mixture     plum           borrowed chords (Doug's ruling 2026-08-09)
*/

:root {
  --bg: #faf8f3;
  --paper: #fffdf8;
  --ink: #2c2a26;
  --muted: #7a766c;
  --key-white: #fffdf8;
  --key-stroke: #b9b4a8;
  --key-black: #33302b;
  --lit-white: #ffd98b;
  --lit-deep: #8a5a00;
  --lit-black: #e07a3f;
  --stencil: #2b5ea7;
  --half: #c8451f;
  --aug: #7a3f9e;
  --raised: #1d7d68;
  --blue: #1273de;
  --accent: #a8531f;

  --fn-tonic: #D1A866;
  --fn-subdom: #2F4F43;
  --fn-dom: #713D2F;
  --fn-mixture: #7B4E70;

  /* Height of the engraved key signature. One number resizes every figure;
     the signature is a real engraving in the readout, not a footnote. */
  --ksig-h: 6.2em;
}

.figure {
  margin: 26px -24px; padding: 24px 24px 18px; background: var(--bg);
  border: 1px solid #e6e1d4; border-radius: 10px;
}
.figure .figlabel {
  font-family: "Futura Condensed ExtraBold", "Futura-CondensedExtraBold", Futura, "Arial Narrow", sans-serif;
  font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--stencil);
  margin-bottom: 10px;
}
.figure svg { width: 100%; height: auto; display: block; margin: 4px 0 10px; }

/* Generic key/root selector row. */
.roots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; align-items: center; }
.roots button {
  font: inherit; font-size: 14px; min-width: 38px; padding: 6px 6px;
  border: 1px solid var(--key-stroke); border-radius: 7px;
  background: #fff; cursor: pointer; transition: all .15s;
}
.roots button:hover { border-color: var(--stencil); }
.roots button.active { background: var(--stencil); color: #fff; border-color: var(--stencil); }
.roots .step { min-width: 34px; font-size: 16px; background: #efece4; }

/* Generic segmented toggle row. */
.moderow { display: flex; gap: 4px; }
.moderow button {
  font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--key-stroke); border-radius: 7px;
  background: #fff; cursor: pointer; transition: all .15s;
}
.moderow button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.readout { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 4px; }
.keyname { font-size: 22px; font-weight: bold; }
/* The signature sits as an engraved staff with its plain-words gloss beside it.
   `.figure svg` sets width:100%/display:block for the keyboard — the badge has
   to opt out of both, hence the specificity here. */
.sig { font-size: 15px; color: var(--accent); font-weight: bold;
       display: inline-flex; align-items: center; gap: 9px; }
.figure svg.ksig {
  display: inline-block; margin: 0; color: var(--accent);
  height: var(--ksig-h);
  width: calc(var(--ksig-h) * var(--ksig-ar, 1.7));
}
.sig .sigwords { font-weight: normal; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.spell { font-size: 15px; letter-spacing: 1px; color: #4a463e; }
.aux { font-size: 15px; color: var(--aug); font-weight: bold; }
.aux.raised { color: var(--raised); }
.aux.cut { color: var(--half); }
.aux.blue { color: var(--blue); }
.aux.moved { color: var(--accent); }

.controls { margin: 8px 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.controls button {
  font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 7px;
  border: 1px solid var(--stencil); background: var(--stencil); color: #fff; cursor: pointer;
}
.controls button:disabled { opacity: .5; }
.legend { color: var(--muted); font-size: 13px; }
.legend b.h { color: var(--half); }
.legend b.w { color: var(--stencil); }
.legend b.a2 { color: var(--aug); }
.legend b.rz { color: var(--raised); }
.legend b.bl { color: var(--blue); }
.legend b.mv { color: var(--accent); }
/* Antique gold fails contrast as text on light (2.02:1 — forbidden per the
   measured contrast rulings); gold is permitted only as a labeled fill, so
   the tonic legend key is a gold chip with obsidian text. The other three
   functions pass as plain colored text. */
.legend b.t { background: var(--fn-tonic); color: #2F323A; padding: 0 0.35em; border-radius: 3px; }
.legend b.s { color: var(--fn-subdom); }
.legend b.d { color: var(--fn-dom); }
.legend b.x { color: var(--fn-mixture); }
.figcaption { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }

/* A line that names what the reader's last change did. Amber, per the palette
   contract; reserved a line's height so toggling never reflows the figure. */
.cascadenote { font-size: 13.5px; color: var(--accent); font-weight: bold; min-height: 1.3em; margin-top: 2px; }

@media (max-width: 640px) { .figure { margin: 22px -8px; } }