/* Small WinPlay3-inspired stereo: bevelled controls and a phosphor display. */
#music-window { width: 430px; max-width: calc(100vw - 24px); z-index: 210; }
#music-window .music-body { align-items: stretch; gap: 6px; padding: 8px; overflow-y: auto; }
.music-header-button { background: transparent; border: 0; font: inherit; cursor: pointer; padding: 0 4px; }
.music-display { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; background: #07100A; border: 3px inset #DDD; color: #89FF58; padding: 8px 10px; min-width: 0; flex-shrink: 0; }
.music-led-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: .62rem; color: #75B361; }
.music-led-main { grid-column: 1; grid-row: 2 / 4; align-self: center; }
#music-time { font-size: 1.9rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.2; text-shadow: 0 0 6px #75FF4933; }
.music-disc { display: none; }
#music-title { grid-column: 2; align-self: end; font-weight: bold; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#music-artist { grid-column: 2; color: #91B383; font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-lyrics { grid-column: 1 / -1; border-top: 1px solid #30432D; margin-top: 4px; padding-top: 7px; height: 96px; text-align: center; line-height: 1.45; }
#music-lyric-current { color: #C7FFAB; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 44px; overflow-y: auto; }
#music-lyric-next { color: #829979; font-size: .66rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 36px; overflow-y: auto; margin-top: 3px; }
#music-window [hidden] { display: none !important; }
.music-seek-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #111; font-size: .65rem; font-variant-numeric: tabular-nums; }
#music-window input[type="range"] { width: 100%; min-width: 0; accent-color: #000080; cursor: pointer; height: 22px; }
.music-transport { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 6px; }
#music-window .dos-button { min-width: 0; min-height: 30px; font-size: .75rem; padding: 3px 6px; }
.music-transport .music-play { font-weight: bold; }
.music-settings { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.music-volume { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; min-width: 0; }
.music-volume input { flex: 1; }
#music-volume-value { color: #222; min-width: 4ch; font-size: .66rem; text-align: right; }
.music-modes { display: flex; gap: 6px; }
#music-window [aria-pressed="true"] { background: #000080; color: #FFFF55; border-style: inset; box-shadow: none; }
.music-list-toggle { text-align: left; }
#music-count { color: #444; font-weight: normal; margin-left: 6px; }
#music-search { min-width: 0; width: 100%; margin-bottom: 5px; background: #EEE; color: #111; font: inherit; font-size: .72rem; padding: 5px 7px; border: 2px inset #EEE; }
.music-library { background: #080D09; border: 2px inset #EEE; max-height: 180px; overflow-y: auto; flex-shrink: 0; scrollbar-color: #999 #161F18; }
#music-list { list-style: none; }
.music-track { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 8px; width: 100%; border: 0; border-bottom: 1px solid #1C2A1E; background: transparent; color: #AADBA0; font: inherit; font-size: .75rem; padding: 8px 10px; text-align: left; cursor: pointer; }
.music-track-index { color: #63815C; font-variant-numeric: tabular-nums; }
.music-track-label { overflow-wrap: anywhere; min-width: 0; }
.music-track-label small { display: block; color: #85967E; font-size: .63rem; margin-top: 2px; }
.music-track:hover { background: #192B20; }
.music-track.is-current { background: #153E29; color: #C7FFAB; box-shadow: inset 3px 0 #89FF58; }
.music-track.is-current .music-track-index { color: #89FF58; }
#music-empty { padding: 12px; color: #8EA18B; text-align: center; font-size: .76rem; line-height: 1.7; }
.music-status { color: #222; font-size: .66rem; line-height: 1.5; min-height: 1.5em; flex-shrink: 0; }
.music-body > * { flex-shrink: 0; }
.music-dock { position: fixed; bottom: calc(100dvh - var(--workspace-top) - var(--workspace-height) + 8px); right: 12px; z-index: 485; max-width: min(280px, calc(100vw - 24px)); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: .72rem; }
#music-window :is(button,input):focus-visible { outline: 2px solid #000080; outline-offset: 2px; }
#music-window .music-track:focus-visible { outline-color: #FFFF55; outline-offset: -3px; }
@media (max-width: 768px), (pointer: coarse) {
    #music-window .music-body { padding: 6px; gap: 6px; }
    #music-window .dos-button { min-height: 40px; }
    #music-window .music-transport .dos-button { min-height: 44px; }
    #music-window input[type="range"] { min-height: 36px; }
    .music-volume { flex-basis: 130px; }
    .music-library { max-height: clamp(80px, calc(var(--workspace-height) - 490px), 150px); }
    .music-track { min-height: 44px; }
    #music-search { min-height: 36px; font-size: 16px; }
}