/* The mix desk inside the song-page record dock, and nothing else.

   Kept in its own file rather than added to practice.css so the recorder's
   styles can move without disturbing the Practice page's. */

.song-mix {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  gap: .85rem;
}

.song-mix__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.song-mix__at {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .9rem;
  color: rgba(255,255,255,.8);
}
/* Says where the backing came from, or that there isn't one. A mix screen
   that silently has nothing to mix against is worse than one that admits it. */
.song-mix__backing {
  font-size: .84rem;
  color: rgba(255,255,255,.6);
  flex: 1 1 12rem;
}
.song-mix__backing[data-missing="true"] { color: #ffce6b; }

.song-mix__level {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem .9rem;
}
.song-mix__level label {
  font-weight: 700;
  font-size: .92rem;
}
.song-mix__level output {
  grid-column: 2;
  font-size: .84rem;
  color: rgba(255,255,255,.62);
}
.song-mix__voice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.song-mix__voice button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.song-mix__voice button:hover:not(:disabled) { background: #fff; color: var(--text); }
.song-mix__voice button:disabled { opacity: .35; cursor: not-allowed; }
.song-mix__level input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--teal);
  background: transparent;
  cursor: pointer;
}
.song-mix__level input[type="range"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.song-mix__verb {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .92rem;
  font-weight: 600;
  /* The tap target is the whole line, not the twelve pixels of the box. */
  min-height: 44px;
  cursor: pointer;
}
.song-mix__verb input {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
  cursor: pointer;
}

.song-mix__keep {
  display: grid;
  gap: .45rem;
}
.song-mix__keep[hidden] { display: none !important; }
.song-mix__keep .btn { width: 100%; }

/* Two steppers, sat as plainly as the Reverb line above them. */
.song-mix__keys {
  display: grid;
  gap: .5rem;
}
.song-mix__key {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: .5rem;
}
.song-mix__key-name {
  font-weight: 700;
  font-size: .92rem;
}
.song-mix__key button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.song-mix__key button:hover:not(:disabled) { background: #fff; color: var(--text); }
.song-mix__key button:disabled { opacity: .35; cursor: not-allowed; }
.song-mix__key strong {
  min-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}
/* Teal only once it is off zero, so "no change" does not look like a setting. */
.song-mix__key strong[data-on="true"] { color: var(--teal); }
.song-mix__key-note {
  margin: 0;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}

@media (max-width: 640px) {
  .song-mix__level {
    grid-template-columns: 1fr;
  }
  .song-mix__level output { grid-column: 1; }
  .song-record__row .btn { flex: 1 1 auto; }
}

/* ---------- camera, while they record ----------
   The karaoke file stays playing (headphones) but is painted invisible.
   Camera + verse roll live on #song-rec-stage, a body child — not inside
   .player__frame. iPhone promotes a transformed <video> over siblings, and
   overflow:hidden on .player clips position:fixed lyrics. Preview is
   mirrored on the wrap, not the video. Export draws frames as-is.

   Capture stays 16:9 + min zoom (wider than the old 720×1280 punch-in).
   object-fit:contain letterboxed that landscape frame on a portrait
   stage — black bars ate the lyric dock, and the video layer covered
   the verses. cover fills the stage (side crop, no empty bars).
   Verses sit high on the camera (near the lens). No skip buttons. */

/* opacity:0 is not enough on iPhone: a <video> in #vhost is a compositor
   layer and still paints on top of the camera. visibility:hidden actually
   hides that layer; audio from the karaoke file keeps playing. */
#vhost[data-recording="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
#vhost[data-recording="true"] video,
#vhost[data-recording="true"] iframe {
  visibility: hidden;
}
/* First Record tap must not leave karaoke chrome over the camera stage.
   Full-screen #vhost is z-index 998; force it under the stage. */
body.is-taking #vhost,
body.is-taking #vhost[data-top="true"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.is-taking #vhost video,
body.is-taking #vhost iframe {
  visibility: hidden !important;
}

.player.is-recording .player__poster,
.player.is-recording .player__big,
.player.is-recording .player__badge { visibility: hidden; }

.player.is-recording .player__frame {
  aspect-ratio: 9 / 16;
  width: min(100%, 22.5rem);
  max-height: 72vh;
  margin-inline: auto;
}

.song-record__stage[hidden] { display: none !important; }
.song-record__stage {
  display: none;
  background: #000;
}

body.is-taking {
  overflow: hidden;
}
body.is-taking header,
body.is-taking main,
body.is-taking footer {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.is-taking #song-rec-stage:not([hidden]) {
  display: block !important;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 10000;
  overflow: visible;
  isolation: isolate;
  background: #000;
}
body.is-taking #song-rec-stage[hidden] {
  display: none !important;
}
/* Mix desk: camera stage must not sit on top of Play mix (z-index 10000
   vs 10010). :has(#song-mix) beats display:block !important on the live
   stage, including when [hidden] was lost. */
body.is-taking:has(#song-mix:not([hidden])) #song-rec-stage {
  display: none !important;
  visibility: hidden !important;
  z-index: 0 !important;
}
body.is-taking #song-record-dock {
  z-index: 10002;
}

/* Mirror the live preview on a wrap, never on the <video>. A transform on
   the video itself is a compositor layer that paints over the lyrics.
   isolation + clip keep that layer inside this wrap, under the verse roll. */
.song-record__cam-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  background: #000;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.song-record__cam {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* 16:9 capture, portrait stage: cover fills height (face + shoulders,
     modest side crop). contain was the letterbox. */
  object-fit: cover;
  background: #000;
}
.song-record__cam[hidden] { display: none; }

.song-record__words {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  bottom: auto;
  z-index: 6;
  padding: .7rem 3.1rem .85rem;
  background: rgba(0, 0, 0, .55);
  text-align: center;
  pointer-events: none;
  overflow: visible;
  color: #fff;
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 2px);
  transform: translate3d(0, 0, 2px);
}
.song-record__words[hidden] { display: none; }

body.is-taking #song-rec-words {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* High on the selfie, under the notch and the close control. */
  top: calc(3.1rem + env(safe-area-inset-top));
  bottom: auto;
  z-index: 6;
  overflow: visible;
}

.song-record__skip,
#song-rec-skip { display: none !important; }

.song-record__close {
  position: absolute;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.55rem, env(safe-area-inset-right));
  z-index: 8;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.song-record__close[hidden] { display: none; }

.song-record__count {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  color: #fff;
  font-size: clamp(4.5rem, 22vw, 8rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .65);
}
.song-record__count[hidden] { display: none !important; }

.song-record__fail {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 3rem 1.4rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}
.song-record__fail[hidden] { display: none; }
body.is-taking #song-rec-fail:not([hidden]) {
  display: grid !important;
}

body.is-taking #song-record-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  margin: 0;
  border-radius: 0;
  max-height: none;
  overflow: visible;
  padding: 0 1rem calc(.55rem + env(safe-area-inset-bottom));
  /* Bottom chrome: Record + one-line helper. Verses stay high. */
  background: linear-gradient(transparent, rgba(0, 0, 0, .72) 55%);
  pointer-events: none;
}
body.is-taking #song-record-dock .song-record__row {
  pointer-events: auto;
  align-items: center;
  padding-top: .45rem;
}
body.is-taking #song-rec-transport {
  display: flex;
  pointer-events: auto;
  padding-top: .15rem;
  padding-bottom: .2rem;
}
body.is-taking #song-rec-transport .btn {
  flex: 1 1 auto;
}
#song-rec-transport[hidden] { display: none !important; }
body.is-taking #song-record-dock:has(#song-mix:not([hidden])) #song-rec-transport {
  display: none !important;
}
body.is-taking #song-record-dock:has(#song-mix:not([hidden])) #song-rec-start,
body.is-taking #song-record-dock:has(#song-mix:not([hidden])) #song-rec-stop {
  display: none !important;
}
body.is-taking #song-record-hint {
  display: block;
  flex: 1 1 8rem;
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-taking #song-record-dock:has(#song-mix:not([hidden])) {
  max-height: 54vh;
  overflow: auto;
  pointer-events: auto;
  z-index: 10040;
  padding: .55rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .82) 28%);
}
body.is-taking #song-record-dock:has(#song-mix:not([hidden])) #song-record-hint {
  flex: 1 1 100%;
  white-space: normal;
  font-size: .84rem;
  color: rgba(255, 255, 255, .72);
}
body.is-taking .player.is-recording .player__frame {
  aspect-ratio: auto;
  width: auto;
  max-height: none;
  margin: 0;
}
.song-record__words .rec-roll {
  font-family: Vazirmatn, Tahoma, sans-serif;
  text-align: center;
}
.song-record__words .rec-line {
  font-size: clamp(1.28rem, 4.6vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, .38);
  opacity: 1;
}
.song-record__words .rec-line.is-soon { color: rgba(255, 255, 255, .38); }
.song-record__words .rec-line.is-past { color: rgba(255, 255, 255, .38); }
.song-record__words .rec-line.is-focus { color: #fff; }

/* Public Record is paused: same Sing / Record chrome, no studio. */
.record-btn--soon,
.record-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.now-record-soon {
  flex: 1 1 100%;
  margin: .2rem 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
}
.now-record-soon[hidden] { display: none !important; }

/* 9:16 karaoke picture — not a mirrored selfie. */
.song-record__stage.is-karaoke .song-record__cam-wrap {
  -webkit-transform: none;
  transform: none;
}
.song-record__stage.is-karaoke .song-record__cam {
  object-fit: contain;
}
.song-record__ready {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .28);
}
.song-record__ready[hidden] { display: none !important; }
.song-record__ready-btn {
  pointer-events: auto;
  min-width: 8.5rem;
  min-height: 3.4rem;
  padding: .85rem 1.6rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
}
body.is-taking #song-rec-words[hidden] {
  display: none !important;
}

/* Record is voice-only on phone and desktop. No 900px hide. Practice stays
   a separate button. */
/* Wait sheet after Stop / during Export. Not the camera stage. */
.take-wait {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .55);
}
.take-wait[hidden] { display: none !important; }
.take-wait__card {
  width: min(22rem, 100%);
  padding: 1.3rem 1.2rem 1.1rem;
  border-radius: 16px;
  background: #161616;
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.take-wait__card p {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}
.take-wait__track {
  margin: 1rem 0 .55rem;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.take-wait__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--teal);
  transition: width .2s linear;
}
.take-wait__pct {
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
}