/* Commander player: equal panels and a directory-style track display. */
@media(min-width:1100px){
 html[data-design="commander"] .dual-panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer{padding:0!important;background:var(--paper)!important;color:var(--ink)!important;overflow:auto}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .tidal-player-table,
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis{background:var(--paper)!important;color:var(--ink)!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-display{display:contents!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-vu{grid-column:1!important;grid-row:1!important;position:relative;width:100%!important;max-width:none!important;padding-right:48px!important;box-sizing:border-box}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-transport{grid-column:1!important;grid-row:2!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-track-info{display:block!important;grid-column:1!important;grid-row:3!important;background:var(--paper)!important;color:var(--ink)!important;padding:12px!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-track-copy,html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-track-copy *{color:var(--ink)!important;font-family:Commander,monospace!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-track-cover{display:none!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-vu .commander-player-close{position:absolute;top:6px;right:8px;padding:0 6px;border:0!important;background:transparent!important;color:#fff!important;font-size:24px!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .tidal-preview-disclosure,html[data-design="commander"] .dual-panel.player-open #tidalPlayer .tidal-help{display:none!important}
}
@media(max-width:760px){
 html[data-design="commander"] #tidalPlayer:not([hidden]){position:fixed!important;inset:0!important;z-index:1000!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;overflow:auto!important;background:var(--paper)!important;color:var(--ink)!important}
 html[data-design="commander"] #tidalPlayer .deck-vu{position:relative;padding-right:42px!important}
 html[data-design="commander"] #tidalPlayer .commander-player-close{position:absolute;top:6px;right:8px;padding:0 6px;border:0!important;background:transparent!important;color:#fff!important;font-size:24px!important}
 html[data-design="commander"] #tidalPlayer .commander-track-copy,html[data-design="commander"] #tidalPlayer .commander-track-copy *{font-family:Commander,monospace!important;color:var(--ink)!important}
 html[data-design="commander"] #tidalPlayer .commander-track-cover{display:none!important}
}
/* Published Commander transport colors follow the active operation. */
html[data-design="commander"] #tidalPlayer[data-transport-state="play"] .deck-chassis button[data-control="play"]{background:#27894b!important;color:#fff!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="pause"] .deck-chassis button[data-control="pause"]{background:#2872be!important;color:#fff!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="pause"] .deck-chassis button[data-control="play"]{background:#27894b!important;color:#fff!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="previous"] .deck-chassis button[data-control="previous"],html[data-design="commander"] #tidalPlayer[data-transport-state="next"] .deck-chassis button[data-control="next"]{background:#d3aa22!important;color:#111!important}
/* Black meter and square album artwork beside the song information. */
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu{background:#000!important;color:#fff!important}
html[data-design="commander"] #tidalPlayer .deck-vu :is(.deck-vu-scale,.deck-vu-row b){color:#fff!important}
html[data-design="commander"] #tidalPlayer .deck-track-info{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(80px,28%);align-items:start;gap:12px}
html[data-design="commander"] #tidalPlayer .commander-track-cover{display:block!important;position:relative;aspect-ratio:1;margin:0!important;min-width:0;background:var(--paper);overflow:hidden}
html[data-design="commander"] #tidalPlayer .commander-track-cover img:not([hidden]){display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
@media(min-width:1100px){html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-track-info{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(80px,28%)}html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-track-cover{display:block!important}}
@media(max-width:760px){html[data-design="commander"] #tidalPlayer .commander-track-cover{display:block!important}}
/* Dynamic Commander meter and player layout. */
html[data-design="commander"] #tidalPlayer .deck-vu-row>span{display:grid!important;grid-template-columns:repeat(60,minmax(0,1fr));gap:1px;flex:1;min-width:0}
html[data-design="commander"] #tidalPlayer .deck-vu-row i{display:block!important;width:100%;height:11px;background:#f4f4ed!important;opacity:.16}
html[data-design="commander"] #tidalPlayer .deck-vu-row i.over{background:#f34b46!important}
html[data-design="commander"] #tidalPlayer .deck-vu-row i.vu-lit,html[data-design="commander"] #tidalPlayer .deck-vu-row i.vu-peak{opacity:1!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="play"] .deck-vu-transport [data-vu-state="play"]{color:#60ec8f!important;opacity:1!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="pause"] .deck-vu-transport [data-vu-state="pause"]{color:#73bfff!important;opacity:1!important}
html[data-design="commander"] #tidalPlayer[data-transport-state="previous"] .deck-vu-transport [data-vu-state="previous"],html[data-design="commander"] #tidalPlayer[data-transport-state="next"] .deck-vu-transport [data-vu-state="next"]{color:#f1c664!important;opacity:1!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-display{display:contents!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu{grid-column:1!important;grid-row:1!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .commander-transport{grid-column:1!important;grid-row:2!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-track-info{grid-column:1!important;grid-row:3!important;display:flex!important;flex-direction:column;align-items:stretch;gap:12px}
html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-cover{width:min(100%,400px);max-width:100%;align-self:center;flex:none;aspect-ratio:1}
/* Place the transport between the meter and track details at every size. */
html[data-design="commander"] #tidalPlayer .deck-chassis{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display,html[data-design="commander"] #tidalPlayer .deck-chassis .deck-display{display:contents!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display>.deck-vu,html[data-design="commander"] #tidalPlayer .deck-chassis .deck-display>.deck-vu{grid-area:1 / 1!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis>.commander-transport,html[data-design="commander"] #tidalPlayer .deck-chassis>.commander-transport{grid-area:2 / 1!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display>.deck-track-info,html[data-design="commander"] #tidalPlayer .deck-chassis .deck-display>.deck-track-info{grid-area:3 / 1!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display>.deck-track-info,html[data-design="commander"] #tidalPlayer .deck-chassis .deck-display>.deck-track-info{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .commander-track-cover,html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-cover{display:block!important;width:min(100%,400px);max-width:100%;align-self:center;flex:none;aspect-ratio:1}
/* Desktop: no close control in the meter; outline the transport row. */
@media(min-width:1100px){html[data-design="commander"] .dual-panel.player-open #tidalPlayer .commander-player-close{display:none!important}}
html[data-design="commander"] #tidalPlayer .deck-chassis>.commander-transport{border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
html[data-design="commander"] #tidalPlayer .deck-chassis>.commander-transport td{border-bottom:1px solid var(--line)!important}
/* Fullscreen phone player prioritizes the album cover. */
@media(max-width:760px){
 html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-copy{display:none!important}
 html[data-design="commander"] #tidalPlayer .deck-chassis .deck-track-info{padding:0!important}
 html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-cover{width:100%!important;max-width:none!important;aspect-ratio:1}
}
/* Fullscreen Commander player: use the track-details area for artwork. */
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .commander-track-copy{display:none!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-track-info{padding:0!important}
html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .commander-track-cover{width:100%!important;max-width:none!important;aspect-ratio:1}

.commander-mobile-back{display:none!important}
@media(max-width:760px){
 html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-copy{display:block!important;order:2;padding:12px;color:var(--ink)!important}
 html[data-design="commander"] #tidalPlayer .deck-chassis .commander-track-cover{order:1}
 html[data-design="commander"] #tidalPlayer .commander-player-close{display:none!important}
 html[data-design="commander"] #tidalPlayer :is(.tidal-preview-disclosure,.tidal-help){display:none!important}
 html[data-design="commander"] #tidalPlayer .commander-mobile-back{display:block!important;width:100%;padding:12px!important;text-align:left;background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--line)!important;font-family:Commander,monospace!important}
}

@media(max-width:760px){html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu button.commander-player-close{display:none!important}}
/* Desktop Commander player: cover, meter, then transport. */
@media(min-width:1100px){
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display>.deck-track-info{grid-area:1 / 1!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis .deck-display>.deck-vu{grid-area:2 / 1!important}
 html[data-design="commander"] .dual-panel.player-open #tidalPlayer .deck-chassis>.commander-transport{grid-area:3 / 1!important}
}
/* Keep the counter and all meter markings legible on the black display. */
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu [data-tape-counter],
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu [data-tape-counter]>span,
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu .commander-counter-drum>span{color:#f4f4ed!important;background:#080a08!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu .deck-vu-scale{display:flex!important;visibility:visible!important;color:#eee!important;opacity:1!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu .deck-vu-scale>span{color:#eee!important;visibility:visible!important;opacity:1!important}
html[data-design="commander"] #tidalPlayer .deck-chassis .deck-vu .deck-vu-transport [data-vu-state]{visibility:visible!important;opacity:.5;color:#b5b5b5}

.commander-mobile-navigation{display:none!important}
@media(max-width:760px){
 html[data-design="commander"] #tidalPlayer .commander-mobile-navigation{display:grid!important;grid-template-columns:1fr;margin-top:12px;border:1px solid var(--line)}
 html[data-design="commander"] #tidalPlayer .commander-mobile-navigation button{min-height:44px;padding:10px;background:var(--paper)!important;color:var(--ink)!important;border:0;border-right:1px solid var(--line);font-family:Commander,monospace!important}
 html[data-design="commander"] #tidalPlayer .commander-track-copy>span{display:block;line-height:1.5}
}

.commander-mobile-keys{display:none!important}
@media(max-width:760px){
 html[data-design="commander"] #tidalPlayer .commander-mobile-keys{display:flex!important;overflow-x:auto;overscroll-behavior-inline:contain;flex-wrap:nowrap}
}
@media(max-width:760px){html[data-design="commander"] #tidalPlayer .commander-mobile-keys{position:sticky!important;left:auto;right:auto;bottom:0;z-index:5}}
@media(max-width:760px){
 html[data-design="commander"] body:not(.pane-embedded)>.command-bar{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:1001!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important}
 html[data-design="commander"] body:not(.pane-embedded){padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))!important}
 html[data-design="commander"] #tidalPlayer:not([hidden]){z-index:1002!important;padding-bottom:50px!important}
}
