/* BORROW's page: the shared skin is ../module.css (site/public/module.css); this is only BORROW's stage. The accent is the
   lights' violet; the name stays the brand's gold. */

:root { --accent: #a878ff; --accent-hi: #d9c8ff; }

/* ---------- the stage: the panel, its four lights lit by the engine, the controls playable ---------- */
.stage { overflow-x: clip; }        /* the lights' glow may spill past the panel, never past the page */
.stage-inner {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.4rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 1.4rem clamp(1rem, 3vw, 3rem); align-items: start;
}
.stage-panel { min-width: 0; }
/* 20 HP: the panel's height is what's kept on screen */
.panel2d {
  position: relative; user-select: none; -webkit-user-select: none;
  width: min(100%, calc(86vh * 101.3 / 128.5), 540px); margin: 0 auto;
}
.panel-face { display: block; width: 100%; height: auto; border-radius: 3px; }
.panel-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.live .panel-lit { display: none; }
.p2 { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; z-index: 1; }
.p2 svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0.06em 0.12em 0.12em rgba(0, 0, 0, 0.7)); }
.p2-pot, .p2-big { cursor: grab; touch-action: none; border-radius: 50%; }
.p2-pot.held, .p2-big.held { cursor: grabbing; }
.p2-toggle, .p2-button { cursor: pointer; border-radius: 50%; touch-action: none; }
.p2-button.held svg g { transform: scale(0.93); }
.p2-pot:hover svg, .p2-big:hover svg, .p2-toggle:hover svg, .p2-button:hover svg, .p2.held svg { filter: drop-shadow(0 0 0.35em rgba(168, 120, 255, 0.55)); }
.p2:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 50%; }
.p2-lit { stroke: var(--accent); opacity: 0; }

/* the lights: a lit lens over the face's dark one, and a glow screened round it, both by opacity */
.p2-light { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.p2-lens {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #faf6ff 0%, #ddcbff 30%, #a878ff 70%, #7a4fe0 100%);
}
.p2-glow {
  position: absolute; inset: -160%; opacity: 0; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 120, 255, 0.55) 0%, rgba(168, 120, 255, 0.2) 28%, rgba(168, 120, 255, 0) 62%);
}
.stage-hint { max-width: 540px; margin: 0.9rem auto 0; }
.stage-hint strong { color: var(--ink); }

/* Listen, the example patches, the readouts */
.stage-side { display: grid; gap: 1rem; min-width: 0; align-content: start; padding-top: clamp(0rem, 3vw, 2.2rem); }
.sound-row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.sound-note { font-size: 0.78rem; color: var(--dim); flex: 1 1 14rem; }
#patches { display: flex; flex-wrap: wrap; gap: 6px; }
#patch-note { font-size: 0.86rem; color: var(--ink); opacity: 0.88; margin-top: 0.6rem; min-height: 8.4em; }
.tv-label { font: 400 0.7rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--dim); }
.status {
  min-height: 4.2em;
  font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--dim);
}
.stage[data-listening] .status { color: var(--accent-hi); }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
/* while the patches step by themselves, the current one fills toward the next */
.stage.auto .patches button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: calc(var(--p, 0) * 100%); background: var(--accent);
}

/* the shared skin's gold bullets, in the lights' violet here */
.feature-list li::before { background: var(--accent); }

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