/* Prototype B additions: the playable studio rack, its cables and the CRT channels.
   Sizes come from the rack's --u. */

/* the rack turns around in one step: the two faces share one cell, so the page keeps one height, and the face that
   is not showing is hidden outright (no input, no focus, nothing for a screen reader) */
.flip-wrap { position: relative; z-index: 1; }
.flipper { display: grid; grid-template-columns: minmax(0, 1fr); }
.flipper > .face { grid-area: 1 / 1; position: relative; min-width: 0; }
.flipper > .face.back, #studio.flipped .face.front { visibility: hidden; pointer-events: none; }
#studio.flipped .face.back { visibility: visible; pointer-events: auto; }
.face.back { touch-action: none; user-select: none; -webkit-user-select: none; }

/* cables: shadow, body, highlight, and a rendered plug at each end */
.cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.c-shadow { fill: none; stroke: #000; stroke-opacity: 0.45; stroke-width: 11; stroke-linecap: round; }
.c-body { fill: none; stroke-width: 8; stroke-linecap: round; }
.c-hi { fill: none; stroke: #fff; stroke-opacity: 0.22; stroke-width: 2.2; stroke-linecap: round; }

/* readout windows: fixed widths, the glass never changes size with its text */
#lcd-state { --w: 7ch; } #lcd-tempo { --w: 7ch; } #lcd-pos { --w: 11ch; } #lcd-tape { --w: 18ch; }
#lcd-drums { --w: 40ch; } #lcd-synth { --w: 32ch; } #lcd-filter { --w: 30ch; } #lcd-echo { --w: 30ch; } #lcd-master { --w: 34ch; } #lcd-pad { --w: 18ch; }
#pad .zone[data-label="Program"] { flex: 1 0 auto; } /* never below its readout, never below its label (the zone floor) */
#pad .knob-row.sm { gap: calc(var(--u) * 0.08); }
#pad .zone[data-label="Program"] { align-items: center; }
#pad .knob-row.sm .knob-cell { min-width: calc(var(--u) * 0.3); } #lcd-trk { --w: 22ch; }
#lcd-synth { font-size: calc(var(--u) * 0.15); }
#lcd-smp { --w: 36ch; } #lcd-song { --w: 30ch; } #lcd-proj { --w: 36ch; } #lcd-midi { --w: 22ch; } #lcd-keys { --w: 24ch; } #proj-name { --w: 12ch; }
#rec.live { animation: none; box-shadow: 0 0 0 1px #ff3b2f, 0 0 14px #ff3b2f; }

/* CRT channels */
canvas.ch { width: 100%; height: 100%; }
/* the video fills the rounded glass right into its corners: no backdrop shows around the picture */
.ch-tube iframe { position: absolute; inset: -2%; width: 104%; height: 104%; border: 0; }
.ch-tube .static { position: absolute; inset: 0; }
/* the menu card the tube shows before the first signal: slices of it land out of place, then the picture holds */
.crt.live .ch.idle, body.booting .ch.idle { display: none; }
.ch.idle.on { animation: glitch-in 0.9s steps(1, end) both; }
@keyframes glitch-in {
  0% { opacity: 0; }
  6% { opacity: 1; clip-path: inset(62% 0 18% 0); transform: translateX(-6%); }
  10% { opacity: 0; }
  14% { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translateX(4%); }
  18% { opacity: 0.45; clip-path: none; transform: translateX(-1.5%) skewX(-8deg); }
  24% { opacity: 1; clip-path: inset(40% 0 35% 0); transform: translateX(7%); }
  28% { opacity: 0.2; clip-path: none; transform: none; }
  34% { opacity: 1; clip-path: inset(0 0 55% 0); transform: translateX(-3%); }
  38% { opacity: 1; clip-path: inset(75% 0 0 0); transform: translateX(2%); }
  44% { opacity: 0.7; clip-path: none; transform: translateX(-0.5%); text-shadow: -3px 0 rgba(124, 255, 154, 0.9), 3px 0 rgba(255, 80, 60, 0.55); }
  52% { opacity: 1; clip-path: inset(20% 0 60% 0); transform: translateX(5%); text-shadow: 0 0 6px rgba(124, 255, 154, 0.8); }
  56% { opacity: 1; clip-path: none; transform: none; }
  70% { opacity: 0.5; }
  74%, 100% { opacity: 1; clip-path: none; transform: none; }
}

/* a device with no signal reaching it goes dark */
.dev.dead .lcd { opacity: 0.45; }

/* knobs and trims become real controls */
.knob, .trim { cursor: ns-resize; touch-action: none; }
.knob:focus-visible, .trim:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.trim { --rot: 0deg; transform: rotate(var(--rot)); }
#play.on, #loop.on, .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
#rec.on { animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { box-shadow: none; } }

.vent-sm { width: 120px; }
.rear-side { display: flex; align-items: center; gap: calc(var(--u) * 0.12); }
.nav.inline { grid-auto-flow: column; }
body.is-playing .reel { animation: reel 1.6s linear infinite; }
body.is-playing .reel.r, body.is-playing .reel + .reel { animation-duration: 2.1s; }

@media (max-width: 999px) {
  .ports { gap: 10px; }
  .rear-side { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-playing .reel { animation: none; }
}


/* the MX-1 meters: both labels sit in one column, so the GR and OUT bars start on the same line whatever the
   labels' own widths */
.meters { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: start; align-items: center; gap: calc(var(--u) * 0.1); }
.meters .knob-label { text-align: left; }

/* the Exit unit's keys carry whole words: the row sits against the right edge, so a longer print only moves its key left */
#exit .keycell small { max-width: none; }

/* the owner's manual: a tablet held up over the rack. The body is a rendered part (tablet.png, 40px slices at 2x,
   worn 1:1 as a 20px bezel: a 3px anodised rim, then black cover glass out to the screen); the camera, the power
   key and the volume keys are rendered parts as well. Everything rides one slab, so the entrance moves it as one
   object; the shadow sits on its own layer behind the body so the page inside scrolls on the compositor */
#manual { position: fixed; inset: 0; width: min(1180px, 100% - 40px); height: min(900px, 100% - 40px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
#manual::backdrop { background: rgba(6, 7, 9, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#manual .slab { position: absolute; inset: 0; }
#manual .shade { position: absolute; inset: 0; border-radius: 18px; box-shadow: 0 60px 100px rgba(0, 0, 0, 0.75), 0 14px 28px rgba(0, 0, 0, 0.5); }
/* the keys stand proud of the rim: the power key on the top edge, the volume keys on the right, their inner 3px under the bezel */
#manual .pwr, #manual .vol { position: absolute; background: center / 100% 100% no-repeat; }
#manual .pwr { top: -4px; right: 76px; width: 48px; height: 7px; background-image: url(../assets/img/parts/tab-pwr.png); }
#manual .vol { top: 76px; right: -4px; width: 7px; height: 64px; background-image: url(../assets/img/parts/tab-vol.png); }
/* the screen colour stays inside the bezel: the body's rounded corners are the part's own, nothing paints behind them */
#manual .tablet { position: absolute; inset: 0; border: 20px solid transparent; border-image: url(../assets/img/parts/tablet.png) 40 fill / 20px; background: #0e0f12; background-clip: padding-box; }
#manual .tablet::before { content: ""; position: absolute; top: -14px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: url(../assets/img/parts/cam.png) center / 100% 100% no-repeat; }
#manual iframe { display: block; width: 100%; height: 100%; border: 0; background: #0e0f12; }
/* it comes up from a slight tilt and settles flat: text is only ever read on a flat screen. The fill is backwards only:
   once it has landed the slab is an ordinary box again, with no transform left over the page inside scrolls under */
#manual[open] .slab { animation: tablet-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
#manual[open]::backdrop { animation: backdrop-in 0.4s ease-out backwards; }
@keyframes tablet-in { from { opacity: 0; transform: perspective(1800px) rotateX(12deg) translateY(36px) scale(0.97); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (max-width: 699px) {
  #manual { width: 100%; height: 100%; }
  #manual .tablet { border: 0; border-image: none; }
  #manual .tablet::before, #manual .shade, #manual .pwr, #manual .vol { display: none; }
}
@media (prefers-reduced-motion: reduce) { #manual[open] .slab, #manual[open]::backdrop { animation: none; } }