/* Peraoke Practice — personal player, not the karaoke roll. */

body.chrome-slim #nav,
body.chrome-slim .search,
body.chrome-slim .search-toggle,
body.chrome-slim .donate-pill,
body.chrome-slim .nav-toggle,
body.chrome-slim .header-search,
body.chrome-slim .nav-scrim { display: none !important; }
body.chrome-slim .site-header .wrap { justify-content: flex-start; }
body.chrome-slim .header-tools { margin-left: auto; }
.header-catalogue {
  display: none; align-items: center; min-height: 44px; padding: .45rem .85rem;
  font-weight: 700; color: #fff; text-decoration: none; border-radius: 8px;
}
body.chrome-slim .header-catalogue { display: inline-flex; }
.header-catalogue:hover { background: rgba(255,255,255,.08); }
.header-account { display: none; align-items: center; gap: .5rem; }
body.chrome-slim .header-account { display: flex; }
.header-account button, .header-account .header-avatar {
  min-height: 44px; border: 0; border-radius: 999px; padding: .4rem .9rem;
  font-weight: 700; cursor: pointer; background: #fff; color: #111;
}
.header-avatar {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  background: var(--teal); color: #05201f;
}
.header-login-panel {
  position: absolute; right: var(--gut); top: calc(var(--header-h) + 8px);
  width: min(22rem, calc(100vw - 2rem)); background: #fff; color: #111;
  border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); z-index: 90;
}
.header-login-panel[hidden] { display: none; }
.header-login-panel label { display: grid; gap: .3rem; font-weight: 600; margin-bottom: .7rem; }
.header-login-panel input {
  border: 1px solid rgba(0,0,0,.16); border-radius: 8px; padding: .65rem .8rem; font: inherit;
}
.header-login-panel .row { display: flex; gap: .5rem; flex-wrap: wrap; }

.song-record {
  margin: .8rem 0 0; padding: .9rem 1rem; background: #111; border-radius: 12px; color: #fff;
}
.song-record__hint { margin: 0 0 .7rem; font-size: .9rem; color: rgba(255,255,255,.72); }
.song-record__row { display: flex; flex-wrap: wrap; gap: .5rem; }

.practice-narrow { max-width: 36rem; }
.practice-lead { color: rgba(255,255,255,.78); margin: .8rem 0 1.6rem; font-size: 1.05rem; }
.practice-kicker {
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: .78rem; color: var(--teal-ink); margin: 1.4rem 0 .8rem;
}
.practice-form { display: grid; gap: 1rem; }
.practice-form--row {
  grid-template-columns: 1fr 1fr;
}
.practice-form label { display: grid; gap: .4rem; font-weight: 600; }
.practice-form input[type="email"],
.practice-form input[type="password"],
.practice-lyrics-label textarea {
  width: 100%; border: 1px solid rgba(0,0,0,.16); border-radius: 10px;
  padding: .75rem .9rem; background: #fff; font: inherit;
}
.practice-drop {
  position: relative; display: grid; place-items: center; min-height: 8rem;
  border: 2px dashed rgba(255,255,255,.35); border-radius: 12px;
  color: #fff; font-weight: 600; cursor: pointer; text-align: center;
  padding: 1.2rem;
}
.practice-drop input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.practice-hero .practice-form label { color: #fff; }
.practice-hint { color: var(--muted); font-size: .92rem; margin: .5rem 0 0; }
.practice-hero .practice-hint { color: rgba(255,255,255,.7); }
/* Said only when a song page sent you here, so it must read as an answer to
   the button you pressed, not as another line of the pitch above it. */
.practice-wanted {
  margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,.08); border-left: 3px solid var(--teal);
  color: #fff; font-weight: 600;
}
/* The first verse, shown before anything has been uploaded. Quieter and
   smaller than the verse box in the player: this is a label confirming which
   song you are on, not the thing you sing from. */
.practice-lyric-preview {
  margin: 0 0 1.4rem; padding: 1rem 1.1rem; border-radius: 12px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.9);
  font-family: Vazirmatn, Tahoma, sans-serif; font-size: 1.05rem;
  line-height: 1.75; white-space: pre-line;
}

.practice-stage { max-width: 40rem; padding-bottom: 4rem; }
.practice-verse {
  min-height: 7rem; background: #111; color: #fff; border-radius: 14px;
  padding: 1.2rem 1.3rem; font-family: Vazirmatn, Tahoma, sans-serif;
  font-size: 1.35rem; line-height: 1.7; font-weight: 600;
  white-space: pre-line;
}
/* Word timing, when the handoff brought any. Only ever inside the practice
   verse box — the karaoke roll is burnt into video and knows nothing of this. */
.practice-verse .word { opacity: .55; transition: opacity .12s, color .12s; }
.practice-verse .word.is-now { opacity: 1; color: var(--teal); }
.practice-verse--preview { margin: 0 0 1.4rem; min-height: 0; }
.practice-verse__next {
  margin-top: .35rem; font-size: .85em; color: rgba(255,255,255,.45); font-weight: 600;
}
.practice-verse-nav {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .4rem;
}
.practice-transport {
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem;
  align-items: center; margin: 1.2rem 0;
}
.practice-mix, .practice-pitch {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0;
}
.practice-mix button, .practice-pitch button {
  min-height: 44px; min-width: 44px; border: 0; border-radius: 999px;
  padding: .45rem .95rem; font-weight: 700; background: #f3f4f6; cursor: pointer;
}
.practice-mix button.is-on, .practice-pitch button:focus-visible {
  background: var(--teal); color: #111;
}
.practice-mix button:disabled { opacity: .45; cursor: not-allowed; }
.practice-lyrics-label { display: grid; gap: .4rem; font-weight: 600; margin: 1.4rem 0 .7rem; }
.practice-account {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(0,0,0,.08);
}
.practice-account h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.practice-record-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.practice-form--row button { align-self: end; }

.take-mix {
  margin-top: 1.4rem; padding: 1.1rem 1.15rem 1.2rem;
  background: #111; color: #fff; border-radius: 14px;
}
.take-mix h3 {
  margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: .04em;
  text-transform: uppercase;
}
.take-mix .practice-hint { color: rgba(255,255,255,.7); }
.take-mix .practice-hint[data-kind="warn"] { color: #f3c27a; }
.take-mix__voice {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem;
  align-items: center; margin: 1rem 0 .8rem; font-weight: 700;
}
.take-mix__voice input[type="range"] { width: 100%; accent-color: var(--teal); }
.take-mix__reverb {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; font-weight: 700; cursor: pointer;
}
.take-mix__reverb input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal); }

@media (max-width: 640px) {
  .practice-form--row { grid-template-columns: 1fr; }
  .practice-transport { grid-template-columns: 1fr; }
}