/* THREE DAYS' page: the shared skin is ../module.css (site/public/module.css); this is only THREE DAYS' stage and the
   two figures the engine draws. The stage is the panel, its knobs playable and its 27 lights lit from the engine
   (js/panel2d.js), beside the time and a picture of the three days (js/stage.js), straight on the page's black.
   THREE DAYS is gold, the default accent; its lights are a warm white. */
:root { --lit: #ffe2aa; }

/* ---------- the stage: the panel, playable, beside the clock ---------- */
.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, 1.05fr);
  gap: 1.4rem clamp(1rem, 2.5vw, 2.4rem); align-items: start;
}
.stage-panel { min-width: 0; }
/* the panel: the face as art.py draws it, the parts and the lights drawn over it where they sit (panel2d.js) */
.panel2d {
  position: relative; user-select: none; -webkit-user-select: none;
  width: min(100%, calc(80vh * 101.3 / 128.5), 560px); margin: 0 auto;
  border-radius: 3px; overflow: hidden;
}
.panel-face { display: block; width: 100%; height: auto; }
.p2-face { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.p2-halos { mix-blend-mode: screen; }
.p2 { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.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 { cursor: grab; touch-action: none; border-radius: 50%; }
.p2-pot.held { cursor: grabbing; }
.p2-pot:hover svg, .p2-pot.held svg { filter: drop-shadow(0 0 0.35em rgba(212, 175, 55, 0.75)); }
.p2:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 50%; }
.p2-lit { stroke: var(--lit); opacity: 0; }
.p2-out .p2-lit { stroke: var(--gold-hi); }
.p2-press { cursor: pointer; touch-action: none; border-radius: 50%; }
.p2-press:hover .p2-lit { opacity: 0.45 !important; }
.p2-press.held .p2-hole { fill: var(--gold); }
.stage-hint { max-width: 560px; margin: 0.8rem auto 0; }
.stage-hint strong { color: var(--ink); }
#knob-note { min-height: 1.3em; font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace; }

/* the clock, Listen, the example patches */
.stage-side { display: grid; gap: 1.1rem; min-width: 0; align-content: start; }
.clock-box { background: #12110e; border: 1px solid var(--s-line); padding: 14px 14px 10px; }
.when { font: italic 700 clamp(1.05rem, 2.2vw, 1.35rem)/1.25 "Space Mono", ui-monospace, monospace; color: var(--lit); }
.levels { margin-top: 0.3rem; min-height: 2.9em; font: 400 0.72rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--dim); }
#cycle { display: block; width: 100%; aspect-ratio: 16 / 7; margin-top: 0.4rem; }
.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.82rem; color: var(--ink); opacity: 0.85; margin-top: 0.55rem; min-height: 4em; }
.patch-caption { margin-top: 0.4rem; font: 400 0.7rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--dim); }
/* while the patches step on by themselves, the current one fills as its three days go by */
.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 figures the engine draws (js/figures.js) ---------- */
#outsfig { width: 100%; aspect-ratio: 1040 / 330; }
#dreadfig { width: 100%; aspect-ratio: 520 / 330; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.feature-row .figure { margin-top: 0; }

@media (max-width: 900px) {
  .stage-inner { grid-template-columns: minmax(0, 1fr); }
  .panel2d { width: min(100%, 520px); }
  .feature-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  #outsfig { aspect-ratio: 1040 / 520; }
}