/* piano-skin.css — Music workstation page chrome on the shared cosmic base
   (chord-styles.css supplies .bg / .rail / .shell / .mz-topbar / .mz-hero).
   The PRO-88 chassis itself is styled by pro88.css and is NOT touched here —
   we only place + scale it inside the shell. */

/* ── Shell: full-width flex column. The chrome (.pn-chrome) sits in VR's 1080
   column so the brand/hero match every other page at ALL widths; the workstation
   (.pn-stagewrap) breaks out to its own ~80% footprint. ──────────────────── */
.pn-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Chrome column = VR's .shell box exactly (1080 max, centered, 92px rail gutter)
   → brand lands at VR's x at every viewport width, not just ≥1350. */
.pn-chrome {
  width: 100%;
  max-width: 1080px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 22px 24px 0 92px;
}
/* flex-item BFC: hero's margin-bottom stays inside chrome and forms the gap to the stage.
   topbar's margin-bottom is the gap to the hero. */
.pn-chrome > .mz-hero { margin-top: 0 !important; }
/* Workstation stage — same width + padding the old .pn-shell carried, so
   .pn-stage-mount's clientWidth (the scaler's sole input) and the chassis
   size/position stay byte-identical. */
.pn-stagewrap {
  width: min(80%, 1700px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 24px 64px 92px;
}
.pn-stagewrap > .pn-stage-mount { width: 100%; }
@media (max-width: 1100px) {
  .pn-chrome    { padding: 22px 18px 0 84px; }
  .pn-stagewrap { width: auto; padding: 0 18px 56px 84px; }
}
@media (max-width: 720px) {
  .pn-chrome    { padding: 18px 10px 0 66px; }
  .pn-stagewrap { width: auto; padding: 0 10px 48px 66px; }
}

/* ── Workstation mount: holds the uniformly-scaled fixed 1640px chassis. ─── */
/* The scaler keeps the dense workstation pixel-perfect (transform only); the
   mount's JS-set height reserves the correct scaled space so nothing overlaps. */
.pn-stage-mount {
  position: relative;
  overflow: hidden;
}
.pn-stage-scaler {
  width: 1640px;
  transform-origin: top left;
  will-change: transform;
}

/* ── Two decks ────────────────────────────────────────────────────────────
   <App/> renders two scaled chassis halves: a TOP deck (main controls + patch
   browser + piano) and a LOWER deck (synth modules, scale rows, IO). The
   transform lives on the inner .pn-stage-scaler, so the .pn-mount-fixed wrapper
   has NO transformed ancestor and can be position:sticky cleanly. */
.pn-mount-fixed,
.pn-mount-scroll { width: 100%; }

/* Pin the controls + piano to the top while the lower deck scrolls beneath.
   Gated to desktop: on narrow/touch the deck is too tall to pin usefully and
   the chassis pans horizontally instead. */
/* Sticky pinning temporarily disabled — the whole page scrolls as one piece.
   (The two-deck structure is kept; re-enable by restoring position:sticky here.)
@media (min-width: 1025px) and (min-height: 760px) {
  .pn-mount-fixed {
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 22px 30px -22px rgba(0, 0, 0, .75);
  }
}
*/

/* A soft platform so the warm hardware reads as "sitting on" the cosmic stage —
   now under the lower deck only. */
.pn-mount-scroll::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(96%, 1500px); height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5), transparent 72%);
  pointer-events: none;
  z-index: 0;
}