/* LISTEN'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 LISTEN's own: the panel's size, its light (lit by the
   engine in its own cool white, js/panel2d.js), the screen of the loops as the engine hears them and BORED's meter
   (js/stage.js). The page is gold, as every page is; only the light on the panel keeps its white. */

/* ---------- the stage: the panel (12 HP, 60.66 mm), playable, beside the loops it hears ---------- */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; }
.panel2d { isolation: isolate; }        /* the light's glow screens over the face, and nothing else */
/* the light: the LED's dome in its hole, lit, and its glow over the art */
.p2-light { pointer-events: none; }
.p2-light svg { filter: none; }
.p2-glow { mix-blend-mode: screen; }

/* the loops on the screen, BORED's meter */
#loops { display: block; width: 100%; aspect-ratio: 16 / 10; }
.bored-meter {
  display: grid; grid-template-columns: auto 1fr 3.6em; gap: 10px; align-items: center; margin-top: 8px;
  font: 400 0.7rem/1 "Space Mono", ui-monospace, monospace; color: var(--dim);
}
.bored-meter i { display: block; height: 6px; background: rgba(238, 236, 228, 0.12); }
.bored-meter b { display: block; height: 100%; width: 0; background: var(--gold-hi); }
.bored-meter span:last-child { text-align: right; color: var(--gold-hi); }
.readout {
  text-align: center; min-height: 1.4em;
  font: italic 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
#patch-note { min-height: 2.6em; }

/* ---------- the sections: the jacks under the pillars ---------- */
.feature-list.jacks { margin-top: 2.2rem; }
.inside-model { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

@media (max-width: 620px) {
  #loops { aspect-ratio: 4 / 3; }
  #module { aspect-ratio: 3 / 4; }
}