/* Music — Light theme. Listing and music-specific player composition only. */

/* Music listing ---------------------------------------------------------- */
/* kit-card base is owned by layout.css; only the music context extends it here. */
.music-grid { margin-top: 26px; }
.kit-card.is-music-kit { border-color: #ddd8ef; }
.kit-card.is-music-kit .kit-type-pill { background: rgba(76,62,128,.78); }
.kit-card.is-music-kit .kit-progress-line i { background: var(--music); }
.kit-card.is-music-kit .open-kit { background: #4f447c; }

/* Music player variables ------------------------------------------------ */
.is-music-workspace {
  --music-frame-min-height: clamp(410px,50vw,570px);
  --music-card-padding: 22px 24px 18px;
  --music-card-radius: 9px;
  --music-body-min-height: 220px;
  --music-body-padding: clamp(28px,5vw,58px) 14px 24px;
  --music-lyric-size: clamp(24px,3.15vw,42px);
  --music-cue-width: min(620px,78%);
  --music-wave-height: 88px;
  --music-wave-padding: 8px 10px 18px;
  --music-transport-margin: 18px;
  --music-transport-inline-padding: 14px;
  --music-transport-columns: 34px 46px 34px;
  --music-transport-gap: 7px 8px;
  --music-control-font: .66667em;
  --music-play-width: 36px;
  --music-neon-start: var(--player-progress-start);
  --music-neon-end: var(--player-progress-end);
  --music-neon-glow: var(--player-progress-glow);
  --music-neon-rest: var(--player-progress-rest);
}

/* Shared player shell palette is owned by player.css. Music only changes composition/behavior. */

/* Music stage details that are intentionally different from immersion. */
.is-music-workspace .learning-stages.is-music-mode {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.is-music-workspace .learning-stages.is-music-mode::before { display: none; }
.is-music-workspace .learning-stage {
  grid-template-columns: 32px minmax(0,1fr) 16px;
}
.is-music-workspace .learning-stage[data-stage="english"]::after {
  content: "›";
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font: 700 1.33333em/1 var(--font-body);
}

/* Lyrics player ---------------------------------------------------------
   The video keeps enough vertical room for readable Word by Word subtitles
   without letting the subtitle layer dominate the visual content. */
/* Lyrics owns its subtitle composition while reusing the canonical
   Word by Word spans/timestamps produced by player.js. */
.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitles.is-music {
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-speaker {
  display: none;
}

.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-en {
  width: min(100%,760px);
  max-width: 100%;
  margin: 0 auto;
  padding: 7px 10px;
  color: #fbfdfd;
  background: rgba(3,6,8,.58);
  border-radius: 8px;
  font-size: clamp(1.2em,2.1vw,2em);
  font-weight: 740;
  line-height: 1.28;
  letter-spacing: -.025em;
  text-shadow: 0 2px 9px rgba(0,0,0,.38);
  backdrop-filter: blur(5px);
}

.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-en .subtitle-word {
  opacity: .44;
}

.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-en .subtitle-word.is-sung {
  opacity: .82;
}

.is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-en .subtitle-word.is-active {
  opacity: 1;
}

/* Lyrics-specific controls ------------------------------------------------ */

.is-music-workspace .music-lyrics-language-tabs {
  position: absolute;
  z-index: var(--z-player-overlay);
  top: 10px;
  left: 50%;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(5,12,15,.58);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

.is-music-workspace .music-lyrics-language-tabs[hidden] { display: none; }

.is-music-workspace .music-lyrics-language-tabs button {
  min-height: 27px;
  padding: 0 9px;
  color: rgba(255,255,255,.70);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 750 .66667em/1 var(--font-body);
  cursor: pointer;
}

.is-music-workspace .music-lyrics-language-tabs button.is-active {
  color: #fff;
  background: rgba(7,112,103,.82);
}

.is-music-workspace .music-lyrics-language-tabs button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.is-music-workspace .music-fullscreen-button {
  position: absolute;
  z-index: var(--z-sticky-nav);
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(255,255,255,.88);
  background: rgba(5,12,15,.58);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

.is-music-workspace .music-fullscreen-button:hover,
.is-music-workspace .music-fullscreen-button.is-active {
  color: #fff;
  background: rgba(7,112,103,.78);
  border-color: rgba(82,222,209,.45);
}

.is-music-workspace .music-fullscreen-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-music-workspace .player-media-shell:fullscreen .video-subtitles.is-music,
.is-music-workspace .player-media-shell:-webkit-full-screen .video-subtitles.is-music {
  left: 5%;
  right: 5%;
  bottom: 7%;
}

.is-music-workspace .player-media-shell:fullscreen .video-subtitle-en,
.is-music-workspace .player-media-shell:-webkit-full-screen .video-subtitle-en {
  width: min(92%,980px);
  font-size: clamp(1.6em,4.1vw,3.33333em);
  line-height: 1.2;
}

.is-music-workspace .player-media-shell:fullscreen .music-line-progress,
.is-music-workspace .player-media-shell:-webkit-full-screen .music-line-progress {
  width: min(78%,860px);
}

.is-music-workspace .player-media-shell:fullscreen .music-next-line,
.is-music-workspace .player-media-shell:-webkit-full-screen .music-next-line {
  width: min(84%,900px);
  font-size: clamp(.66667em,1.2vw,.93333em);
}

/* Text + Audio ---------------------------------------------------------- */
.is-music-workspace .study-layout.is-music-audio-mode .learning-stages { margin-bottom: 12px; }
.is-music-workspace .study-layout.is-music-audio-mode .player-media-shell {
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}
.is-music-workspace .study-layout.is-music-audio-mode .player-theater-stage {
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
}

.is-music-workspace .video-frame.is-music-audio-mode {
  min-height: var(--music-frame-min-height);
  aspect-ratio: auto;
  overflow: hidden;
  margin-inline: auto;
  padding: 1px;
  background: transparent;
  border: 0;
  border-radius: var(--player-frame-radius);
  box-shadow: none;
}

.is-music-workspace .video-frame.is-music-audio-mode::after { display: none; }

.is-music-workspace .video-frame.is-music-audio-mode #simpleYouTubePlayer {
  position: absolute;
  z-index: var(--z-underlay);
  top: 50%;
  left: 50%;
  width: 112%;
  min-width: 112%;
  height: 112%;
  aspect-ratio: 16/9;
  opacity: .18;
  filter: saturate(.74) contrast(.96) brightness(1.08);
  transform: translate(-50%,-50%);
  transform-origin: center;
  pointer-events: none;
}

.is-music-workspace .audio-study-overlay.is-music-audio {
  inset: 1px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  color: var(--ink);
  background: transparent;
  text-align: center;
}

.is-music-workspace .audio-study-overlay.is-music-audio.is-visible { pointer-events: auto; }

.is-music-workspace .music-audio-card {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--music-card-padding);
  background: radial-gradient(circle at 82% 0%,rgba(var(--accent-rgb),.04),transparent 35%), linear-gradient(180deg,rgba(255,254,250,.73),rgba(248,245,237,.79));
  backdrop-filter: blur(1.2px) saturate(.96);
  border: 1px solid var(--line);
  border-radius: var(--music-card-radius);
  box-shadow: 0 16px 40px rgba(17,32,39,.07);
}

.is-music-workspace .music-audio-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex: 0 0 auto;
  padding: 2px 2px 13px;
}


.is-music-workspace .music-audio-time { color: var(--muted); font: 500 .53333em var(--font-mono); font-variant-numeric: tabular-nums; }
.is-music-workspace .music-audio-perforation { flex: 0 0 auto; height: 0; border-top: 1px dashed var(--line-strong); }

.is-music-workspace .music-audio-body {
  flex: 1 1 auto;
  min-height: var(--music-body-min-height);
  display: grid;
  place-items: center;
  padding: var(--music-body-padding);
}

.is-music-workspace .music-audio-lyric {
  width: min(100%,900px);
  max-width: 900px;
  margin: 0 auto;
  color: var(--ink);
  font-size: var(--music-lyric-size);
  font-weight: 720;
  line-height: 1.48;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.is-music-workspace .music-audio-lyric .subtitle-word { color: var(--ink-soft); }
.is-music-workspace .music-audio-lyric .subtitle-word.is-sung { color: var(--ink); }
.is-music-workspace .music-audio-lyric .subtitle-word.is-active { color: #00B4A6; }

/* Cue progress: retained neon treatment. */
.is-music-workspace .music-audio-cue-progress,
.is-music-workspace .music-line-progress {
  height: 2px;
  overflow: visible;
  border-radius: var(--r-pill);
}

.is-music-workspace .music-audio-cue-progress {
  width: var(--music-cue-width);
  flex: 0 0 auto;
  align-self: center;
  margin: 0 auto 13px;
  background: var(--music-neon-rest);
}

.is-music-workspace .music-line-progress { width: min(560px,78%); margin: 8px auto 0; background: rgba(255,255,255,.13); }

.is-music-workspace .video-subtitles .music-next-line {
  width: min(100%,680px);
  margin: 6px auto 0;
  overflow: hidden;
  color: rgba(244,248,248,.58);
  font-size: clamp(.6em,.92vw,.8em);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0,0,0,.38);
}

.is-music-workspace .video-subtitles .music-next-line.is-empty { display:none; }

.is-music-workspace .music-audio-cue-progress i,
.is-music-workspace .music-line-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,var(--music-neon-start),var(--music-neon-end));
  border-radius: inherit;
  box-shadow: 0 0 12px var(--music-neon-glow);
  transition: width .08s linear;
}

/* Wave animation itself stays in player.css. */
.is-music-workspace .music-audio-wave {
  flex: 0 0 auto;
  width: min(100%,760px);
  height: var(--music-wave-height);
  align-self: center;
  margin: 0 auto;
  padding: var(--music-wave-padding);
}

.is-music-workspace .music-audio-wave span { flex: 1 1 0; width: auto; max-width: 5px; background: var(--accent); }

/* Compact transport ----------------------------------------------------- */
.is-music-workspace .music-transport-slot {
  flex: 0 0 auto;
  width: 100%;
  margin-top: var(--music-transport-margin);
  padding: 8px var(--music-transport-inline-padding) 5px;
}

.is-music-workspace .music-transport-slot .player-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr var(--music-transport-columns) 1fr;
  grid-template-rows: 22px 34px 18px;
  justify-content: stretch;
  align-items: center;
  gap: var(--music-transport-gap);
  margin: 0 auto;
  padding: 0;
}

.is-music-workspace .music-transport-slot .control-btn,
.is-music-workspace .music-transport-slot .primary-button.compact {
  min-width: 0;
  min-height: var(--player-control-height);
  height: var(--player-control-height);
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--music-control-font);
  font-weight: 800;
  box-shadow: none;
}

.is-music-workspace .music-transport-slot #videoSeek { grid-column: 1/-1; grid-row: 1; width: 100%; min-width: 0; height: 20px; }
.is-music-workspace .music-transport-slot #videoBackButton { grid-column: 2; grid-row: 2; }
.is-music-workspace .music-transport-slot #videoPlayButton { grid-column: 3; grid-row: 2; width: var(--music-play-width); justify-self: center; overflow: hidden; white-space: nowrap; }
.is-music-workspace .music-transport-slot #videoForwardButton { grid-column: 4; grid-row: 2; }
.is-music-workspace .music-transport-slot #videoCurrentTime { grid-column: 1/3; grid-row: 3; justify-self: start; }
.is-music-workspace .music-transport-slot #videoDuration { grid-column: 4/6; grid-row: 3; justify-self: end; }
.is-music-workspace .music-transport-slot .time-display { font-size: .56667em; }

/* Music stage selector — Lyrics, Structures, optional Shadowing, and Audio. */
@media (min-width: 1024px) {
  .is-music-workspace .learning-stages.is-music-mode {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-bottom:8px;
  }

  .is-music-workspace .learning-stages.is-music-mode .learning-stage {
    min-height:40px;
    grid-template-columns:25px minmax(0,1fr) 14px;
    gap:7px;
    padding:3px 8px;
  }

  .is-music-workspace .learning-stages.is-music-mode .stage-number {
    width:25px;
    height:25px;
  }

  .is-music-workspace .learning-stages.is-music-mode .stage-copy strong { font-size:.8em; }
  .is-music-workspace .learning-stages.is-music-mode .stage-copy small { font-size:.73333em; }
}

/* Breakpoints modify variables instead of redefining the component. */
@media (max-width: 900px) {
  .is-music-workspace {
    --music-frame-min-height: clamp(450px,74vh,600px);
    --music-card-padding: 18px 16px 14px;
    --music-card-radius: 8px;
    --music-body-min-height: 245px;
    --music-body-padding: 30px 6px 22px;
    --music-lyric-size: clamp(21px,6.3vw,30px);
    --music-cue-width: 88%;
    --music-wave-height: 92px;
    --music-wave-padding: 8px 2px 18px;
    --music-transport-margin: 22px;
  }

}

@media (max-width: 700px) {
}

@media (max-width: 420px) {

  .is-music-workspace {
    --music-frame-min-height: 480px;
    --music-card-padding: 15px 12px 12px;
    --music-card-radius: 7px;
    --music-body-min-height: 260px;
    --music-body-padding: 28px 2px 18px;
    --music-lyric-size: clamp(20px,7vw,27px);
    --music-cue-width: 92%;
    --music-wave-height: 82px;
    --music-wave-padding: 8px 10px 14px;
    --music-transport-margin: 18px;
    --music-transport-columns: 31px 42px 31px;
    --music-transport-gap: 6px;
    --music-control-font: .63333em;
    --music-play-width: 36px;
    --music-transport-inline-padding: 12px;
  }

  .is-music-workspace .music-lyrics-language-tabs {
    top: 8px;
    padding: 2px;
  }

  .is-music-workspace .music-lyrics-language-tabs button {
    min-height: 25px;
    padding-inline: 8px;
    font-size: .6em;
  }

  .is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitles.is-music {
    left: 3%;
    right: 3%;
    bottom: 3.5%;
  }

  .is-music-workspace .video-frame:not(.is-music-audio-mode) .video-subtitle-en {
    padding: 6px 8px;
    font-size: clamp(1.13333em,5.4vw,1.4em);
    line-height: 1.22;
  }

  .is-music-workspace .video-frame:not(.is-music-audio-mode) .music-line-progress {
    width: 86%;
    margin-top: 7px;
  }

  .is-music-workspace .video-frame:not(.is-music-audio-mode) .music-next-line {
    width: 90%;
    margin-top: 5px;
    font-size: .6em;
  }

  .is-music-workspace .music-audio-head { padding-bottom: 10px; }
  .is-music-workspace .music-audio-cue-progress { margin-bottom: 10px; }
}

/* Responsive rules are colocated with their owning component (V9). */
@media (max-width: 700px) {
  .is-music-workspace .learning-stages.is-music-mode {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    overflow: visible;
    padding-inline: 0;
  }
  .is-music-workspace .learning-stage {
    min-height: 58px;
    grid-template-columns: 30px minmax(0,1fr) 10px;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
  }
  .is-music-workspace .learning-stage .stage-number { width: 30px; height: 30px; }
  .is-music-workspace .learning-stage .stage-copy strong { font-size: .83333em; }
  .is-music-workspace .learning-stage .stage-copy small { font-size: .7em; }
  .is-music-workspace .learning-stage[data-stage="english"]::after { font-size: 1.13333em; }
}