/* A musical's page and the musicals' index (RadioMusical.cshtml, RadioMusicals.cshtml), over
   radio.css: the song page's frame — the film beside its text — with the film's chapters and the
   host's words between the songs' lyrics. */

.musical-play { border: 0; cursor: pointer; }

/* The chapters: every song and every part between them; the one playing is lit. */
.musical-chapters { list-style: none; margin: 20px 0 4px; padding: 0; max-width: 520px; border-top: 1px solid #1f2937; }
.musical-chapters li { border-bottom: 1px solid #1f2937; }
.musical-chapter { display: flex; align-items: baseline; gap: 12px; padding: 9px 6px; text-decoration: none; color: #9ca3af; font: 600 13px var(--ui); }
.musical-chapter:hover { color: #fff; background: #111827; }
.musical-chapter.is-song { color: #e5e7eb; font-size: 15px; }
.musical-chapter.is-on { color: #fff; background: #1f2937; box-shadow: inset 3px 0 0 var(--cb-red); }
.musical-clock { flex: none; width: 44px; font-variant-numeric: tabular-nums; color: #6b7280; font-weight: 600; font-size: 12px; }
.musical-chapter.is-on .musical-clock { color: #f87171; }

/* The film as text. */
.musical-text { margin-top: 30px; }
.musical-song { margin: 34px 0 0; }
.musical-song-title { font: 700 22px/1.25 var(--serif); color: #fff; margin: 0 0 2px; }
.musical-side { margin: 0 0 4px; font-size: 13px; }
.musical-host { margin: 30px 0 0; padding-left: 14px; border-left: 2px solid #374151; }
.musical-host .song-part { margin-top: 0; }
.musical-host-text { font: italic 400 16px/1.55 var(--serif); color: #cbd5e1; margin: 0; max-width: 520px; }
.musical-ai { margin: 34px 0 0; font: 500 12px var(--ui); color: #6b7280; }

/* The index: a musical per tile, its still a portrait frame of the film. */
.musicals-grid .songs-tile img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }

/* The film is 16:9 (the wide frame, 2026-11-11): above its text, as wide as the window lets it be. */
.musical-stage { flex-direction: column; align-items: center; gap: 22px; }
.musical-stage .radio-screen { position: relative; top: 0; height: auto; aspect-ratio: 16 / 9; width: min(100%, 1100px, calc((100vh - 150px) * 16 / 9)); }
.musical-stage .song-text { flex: none; width: min(100%, 720px); }