/* TONGUES's page: the shared skin is ../module.css (site/public/module.css), which lays out the stage and draws its parts
   as every module page has them; this is only what's TONGUES's own: the panel's size, its sixteen windows (each a pane
   of the light's colour and a bloom screened over the face) and TAKE's line. The page is gold, as every page is; only
   the panel's own lights keep their colour. */

/* ---------- the stage: the panel (20 HP, 101.3 mm), its windows lit by the engine ---------- */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; overflow-x: clip; }
.panel-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.live .panel-lit { display: none; }
.p2-pane { position: absolute; pointer-events: none; }
.p2-glow { position: absolute; max-width: none; pointer-events: none; mix-blend-mode: screen; opacity: 0; z-index: 2; }
.p2 { z-index: 1; }
.p2-button { z-index: 3; }
.p2-button svg { filter: none; }

/* beside the panel: TAKE's line, the state of the take, the knob being turned */
.take-hint { font-size: 0.8rem; color: var(--dim); }
.take-hint strong { color: var(--ink); }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 8.6em; }