/* CODEC's page: the shared skin is ../module.css (site/public/module.css); this is only CODEC's stage. The panel's
   screen is green, CODEC's own colour, and so is the page's accent; the name stays the brand's gold. */

:root { --accent: #78e8a0; --accent-hi: #b4f5c8; }

/* ---------- the stage: the panel, lit by the engine's demos (js/stage.js) ---------- */
.stage-inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.4rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem clamp(1rem, 3vw, 2.4rem); align-items: start;
}
.stage-panel { max-width: 520px; width: 100%; justify-self: end; }
.panel2d { position: relative; user-select: none; -webkit-user-select: none; }
.panel-face { display: block; width: 100%; height: auto; }
/* the screen: the face's top band, redrawn as the demo plays */
#screen { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.knob { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.knob-body { fill: #0f0f10; stroke: #2d2d30; stroke-width: 0.045; }
.knob-line { stroke: #77766f; stroke-width: 0.075; stroke-linecap: round; }
.knob-turn { transition: transform 0.05s linear; }
.stage-side { display: grid; gap: 1.1rem; min-width: 0; align-content: start; padding-top: clamp(0rem, 4vw, 3rem); }
.sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.sound-note { font-size: 0.8rem; color: var(--dim); }
#patches { display: flex; flex-wrap: wrap; gap: 6px; }
/* while a demo plays, its button fills toward the end */
.stage.playing .patches button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: calc(var(--p, 0) * 100%); background: var(--accent);
}
.patch-caption { margin-top: 0.8rem; min-height: 4.8em; font-size: 0.88rem; max-width: 460px; }
.stage.no-screen .stage-side { display: none; }
.stage.no-screen .stage-inner { grid-template-columns: minmax(0, 1fr); }
.stage.no-screen .stage-panel { justify-self: center; }

@media (max-width: 900px) {
  .stage-inner { grid-template-columns: minmax(0, 1fr); }
  .stage-panel { justify-self: center; }
  .stage-side { padding-top: 0; }
}