/* Public music catalog. Kept separate from screen.css so the shared shell stays stable. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.music-page { background: radial-gradient(circle at 50% -15%, rgba(255, 184, 48, .13), transparent 35rem); }
.music-inner { width: min(100% - 2rem, 1060px); margin: 0 auto; }
.music-intro { padding: 40px var(--space-md) 32px; border-bottom: 1px solid var(--color-border); text-align: center; }
.music-eyebrow, .music-show-kicker, .music-track-role {
    color: var(--accent-gold); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
}
.music-intro h1 { margin-bottom: 4px; font-size: 1.75rem; }
.music-intro p:not(.music-eyebrow) { max-width: 38rem; margin: 0 auto var(--space-sm); color: var(--color-text-muted); font-size: 1rem; }
.music-catalog { padding: 0; }
.music-show { margin-bottom: clamp(3rem, 8vw, 6rem); }
.music-show:last-child { margin-bottom: 0; }
.music-show-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.music-show-header img { width: clamp(88px, 14vw, 132px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 16px 36px rgba(0, 0, 0, .38); }
.music-show-kicker { margin: 0 0 .35rem; }
.music-show-header h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.music-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.music-track { padding: 1.25rem; background: rgba(17, 17, 17, .86); border: 1px solid var(--color-border); border-radius: 10px; }
.music-track h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.music-track-role { margin: 0; }
.music-track-credit { margin: .45rem 0 0; color: var(--color-text-muted); font-size: .86rem; }
.music-player { margin-top: 1.2rem; }
.music-native { width: 100%; min-height: 38px; }
.music-player.is-enhanced .music-native { display: none; }
.music-controls { display: grid; grid-template-columns: auto minmax(4rem, 1fr) auto auto auto; gap: .55rem; align-items: center; }
.music-controls button { min-height: 2.5rem; border: 1px solid rgba(255, 184, 48, .7); border-radius: 5px; background: transparent; color: var(--color-text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.music-play { display: inline-flex; align-items: center; gap: .38rem; padding: .35rem .65rem; }
.music-play:hover, .music-mute:hover { background: var(--accent-gold); color: #17120a; }
.music-mute { padding: .35rem .55rem; }
.music-seek { width: 100%; accent-color: var(--accent-gold); cursor: pointer; }
.music-seek:disabled { cursor: wait; opacity: .5; }
.music-current, .music-duration { color: var(--color-text-muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.music-time-divider { color: var(--color-text-muted); font-size: .78rem; }
.music-status, .music-delivery-note { min-height: 1.25rem; margin: .6rem 0 0; color: var(--color-text-muted); font-size: .8rem; }
.music-status.is-error { color: #fca5a5; }
.music-download {
    display: inline-block;
    margin-top: .55rem;
    padding: .35rem .65rem;
    min-height: 2.5rem;
    border: 1px solid rgba(255, 184, 48, .7);
    border-radius: 5px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.music-download:hover { background: var(--accent-gold); color: #17120a; }
.music-download:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }
.music-empty { max-width: 42rem; padding: 2rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-elevated); }
.music-empty h2 { margin-bottom: .5rem; }
.music-empty p { margin: 0; color: var(--color-text-muted); }
.music-controls button:focus-visible, .music-seek:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }

@media (max-width: 700px) {
    .music-tracks { grid-template-columns: 1fr; }
    .music-controls { grid-template-columns: auto minmax(2rem, 1fr) auto auto; }
    .music-mute { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 420px) {
    .music-show-header { align-items: flex-start; }
    .music-show-header img { width: 76px; }
    .music-track { padding: 1rem; }
}