/* SYCAMORE's page: the shared skin is ../module.css (site/public/module.css), the stage's layout and controls included;
   this is only what's SYCAMORE's own. The stage is the panel (KiCad's render of the face, its knobs and jacks drawn
   by ../parts.js, the knobs playable, and its LEARN and FLIP buttons by js/stage.js) beside "the room", a picture of
   the engine's windows going in at IN and coming back out at OUT (js/stage.js). SYCAMORE is gold like every page;
   only the buttons' LEDs are amber, as on the module. */

/* ---------- the stage ---------- */
/* 12 HP, drawn the same height as every other panel */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; }
/* LEARN and FLIP: the LED behind the frosted cap, amber when the engine lights it */
.p2-led { fill: #4a3524; }
.p2-button.lit svg { filter: drop-shadow(0 0 0.5em rgba(255, 168, 77, 0.75)); }
.p2-button.lit .p2-cap { fill: #ffe2b8; }
.p2-button.lit .p2-led { fill: #ffa84d; }

/* the room */
#room { display: block; width: 100%; aspect-ratio: 16 / 10; }
#legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px;
  font: 400 0.7rem/1 "Space Mono", ui-monospace, monospace; color: var(--dim);
}
#legend li { border: 1px solid var(--s-line); padding: 0.32rem 0.45rem; }
#legend li b { color: var(--ink); font-weight: 700; margin-right: 0.25rem; }
/* without the engine, just the panel */
.stage.no-engine .stage-side, .stage.no-engine .stage-hint { display: none; }
.stage.no-engine .stage-inner { grid-template-columns: minmax(0, 1fr); }