/* wavepurple -- STAGING additions. Load AFTER style.css.
   1) live VU meter / bars   2) "Seek" labels   3) larger controls
   Kept in its own file so it layers on top of whatever style.css is live. */

/* ---------- 1. meter ---------- */
.vu-mount { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; overflow: visible; }
.vu-mount:focus-visible .vu-frame { stroke: #e8563f; }

.vu-darkface { transition: opacity 0.25s ease; }
.vu-bars { display: none; }
.vu-mount[data-mode="bars"] .vu-darkface { opacity: 1; }
.vu-mount[data-mode="bars"] .vu-needle-part { display: none; }
.vu-mount[data-mode="bars"] .vu-bars { display: block; }

.vu-lamp { transition: fill 0.08s linear; }
.vu-lamp.on { fill: #ff5a45; filter: drop-shadow(0 0 3px #ff3b30); }

/* ---------- 2 + 3. desktop (metallic skin, SVG) ---------- */
.knob-label--lg { font-size: 11px; letter-spacing: 0.04em; }

/* ---------- 2 + 3. mobile vertical skin ---------- */
/* Heights follow the visible screen height (svh), so tall phones get roomier
   controls and short phones get tighter ones -- no hard breakpoints. */
@media (max-width: 899px) {
  .v-skin { --g: 64px; --m: 96px; --b: 72px; }                    /* fallback sizes */
  @supports (height: 1svh) {
    .v-skin {
      --g: clamp(46px, 10svh, 96px);    /* speaker grille */
      --m: clamp(79px, 13.5svh, 112px); /* meter height */
      --b: clamp(64px, 10.5svh, 80px);  /* Seek / Mute buttons */
    }
  }

  /* meter: no extra box, the face's own bezel is enough */
  .v-skin .v-meter { display: flex; justify-content: center; margin: 0 0 8px; padding: 0; background: none; border: 0; }
  .v-skin .v-meter .vu-mount { height: var(--m); width: calc(var(--m) * 2.4); max-width: 100%; }

  .v-skin .v-grille { height: var(--g); margin-bottom: 8px; }
  .v-skin .v-grille-logo { width: calc(var(--g) - 12px); height: calc(var(--g) - 12px); }

  /* one row: Seek | Mute | Seek -- all large, all labelled */
  .v-skin .v-primary-row { gap: 20px; margin: 2px 0 6px; align-items: flex-start; justify-content: center; }
  .v-skin .v-btn-group { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .v-skin .v-btn--sm,
  .v-skin .v-primary-row .v-knob--mute { width: var(--b); height: var(--b); }
  .v-skin .v-btn--sm svg { width: 32px; height: 32px; }
  .v-skin .v-primary-row .v-knob--mute svg { width: 30px; height: 30px; }
  .v-skin .v-primary-row .v-knob--mute::after { content: none; }
  .v-skin .v-btn-label { font-size: 14px; letter-spacing: 0.04em; color: var(--text-mid); }

  /* Browse button */
  .mp-browse-btn { font-size: 18px; padding: 18px 14px; min-height: 62px; }
}