/* ---------------------------------------------------------------
   Panel styling follows the Oscilloscope Visualizer's L9 panel
   (kyle-grimm/oscilloscope-visualizer, index.html): graphite panel,
   outlined sections with ink nameplates, MS-20 knobs, rubber keys,
   black glass screens. Almost everything is built inline by
   script.js on a fixed 900 x 1440 stage that is scaled to the window;
   this file only holds the page shell and the states CSS must own.
   --------------------------------------------------------------- */
html, body { margin: 0; width: 100%; height: 100%; background: #242324; overflow: hidden; }
/* Mobile: the stage is scaled to fit by script, so the page never scrolls, bounces, zooms or inflates its text. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; inset: 0; overscroll-behavior: none; touch-action: none; -webkit-tap-highlight-color: transparent; }

#stage { position: absolute; left: 0; top: 0; width: 900px; height: 1440px; transform-origin: 0 0; color: #ebebeb;
  font-family: 'Barlow Semi Condensed', 'Segoe UI', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
#panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #2b2a2d, #242324 48px); }

button { outline: none; }
button:focus-visible { box-shadow: 0 0 0 2px #cfabf6 !important; }

#tip { position: absolute; display: none; padding: 3px 7px; border-radius: 3px; background: #050406; border: 1px solid #515053; color: #cfabf6;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 10; transform: translateX(-50%); }

/* Fullscreen: the browser makes #screen fill the display; keep the canvas (9:16 or 16:9) letterboxed, not stretched. */
#screen:fullscreen, #screen:-webkit-full-screen { background: #000; border-radius: 0; }
#screen:fullscreen canvas, #screen:-webkit-full-screen canvas { object-fit: contain; }
/* Where the Fullscreen API is missing or refused (iPhone Safari): the canvas moves into this overlay over the whole page.
   Its exit button shows for a few seconds on entry and after each tap. */
#fsview { position: fixed; inset: 0; z-index: 1000; display: none; background: #000; touch-action: none; }
#fsview canvas { object-fit: contain; }
#fsview .fs-exit { position: absolute; z-index: 1; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(10,10,12,0.6);
  color: #ebebeb; font: 700 18px/42px "Barlow Semi Condensed", "Segoe UI", sans-serif; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
#fsview.show-exit .fs-exit { opacity: 1; pointer-events: auto; }

.gl-error { position: absolute; inset: 24px; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #f0484a; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }

/* ---------------------------------------------------------------
   Parameter families: Anodized theme (chosen 2026-10-11 from nine
   candidates). Each family's section has a .fam-<family> fill clipped
   to its outline and a .tab-<family> nameplate: brushed-metal grain and
   a top-light sheen over a saturated anodised tint, nameplates in the
   family colour. Families: feedback, transform, color, chroma, layers,
   mix. --fc is the family's key colour, --anod its panel tint.
   --------------------------------------------------------------- */
.fam-feedback,  .tab-feedback,  .frame-feedback  { --fc: #b98aef; --anod: #3d2f57; }
.fam-transform, .tab-transform, .frame-transform { --fc: #6fa8ff; --anod: #233a5a; }
.fam-color,     .tab-color,     .frame-color     { --fc: #f0b45a; --anod: #573f1f; }
.fam-chroma,    .tab-chroma,    .frame-chroma    { --fc: #5fd08a; --anod: #1f4a30; }
.fam-layers,    .tab-layers,    .frame-layers    { --fc: #57c4c4; --anod: #1d4a4e; }
.fam-mix,       .tab-mix,       .frame-mix       { --fc: #c9c6d0; --anod: #35353f; }
.fam { background-color: var(--anod);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, rgba(0,0,0,0.05) 1px 2px, transparent 2px 3px, rgba(255,255,255,0.015) 3px 4px, transparent 4px 7px),
    linear-gradient(170deg, rgba(255,255,255,0.13), rgba(255,255,255,0) 45%, rgba(0,0,0,0.28)); }
.tab { background: var(--fc) !important; }

/* Recording: the Record key's text (Stop while recording) pulses a soft glow at 80 bpm (0.75 s). */
@keyframes rec-pulse { 0%, 100% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.25); } 50% { text-shadow: 0 0 6px #fff, 0 0 14px rgba(255, 225, 215, 0.85); } }
#stage .hk-rec[data-rec="1"] > span:last-child { animation: rec-pulse 0.75s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #stage .hk-rec[data-rec="1"] > span:last-child { animation: none; text-shadow: 0 0 6px #fff; } }