/* =========================================================
   ALBUM PLAYBACK QUEUE
========================================================= */

@media (min-width:1100px){
    /* Keep the cover and title together, then give the metadata strip the full hero width. */
    .album-playlist-page .album-hero{
        grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important;
        grid-template-areas:
            "cover label"
            "cover title"
            "cover subtitle"
            "info info" !important;
        grid-template-rows:auto auto auto auto !important;
        column-gap:24px !important;
        row-gap:8px !important;
        margin-bottom:24px !important;
    }

    .album-playlist-page .album-cover-box{
        grid-area:cover !important;
        max-width:280px !important;
        align-self:stretch !important;
    }

    .album-playlist-page .album-details{
        display:contents !important;
    }

    .album-playlist-page .song-label{
        grid-area:label !important;
        align-self:end !important;
        width:max-content !important;
        max-width:100% !important;
    }

    .album-playlist-page .song-title{
        grid-area:title !important;
        align-self:center !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .album-playlist-page .song-subtitle{
        grid-area:subtitle !important;
        align-self:start !important;
        margin:0 !important;
    }

    .album-playlist-page .album-info-card{
        grid-area:info !important;
        margin:8px 0 0 !important;
    }
}

.album-playlist-page .album-info-card .info-grid{
    grid-template-columns:
        minmax(170px,1.05fr)
        minmax(130px,.9fr)
        minmax(180px,1.12fr)
        minmax(145px,.95fr)
        minmax(125px,.8fr) !important;
    align-items:stretch !important;
    gap:8px !important;
}

/* Let track count and genre occupy their own desktop grid cells. */
.album-playlist-page .info-item-tracks-genre{
    display:contents !important;
}

.album-playlist-page .album-info-card .info-grid > .info-item,
.album-playlist-page .info-item-tracks-genre > .info-item{
    justify-content:center !important;
    min-height:66px !important;
    padding:9px 11px !important;
    border-color:#263449 !important;
    border-radius:11px !important;
    background:#111c2d !important;
}

.album-playlist-page .album-info-card .info-item span{
    font-size:10px !important;
    letter-spacing:.7px !important;
}

.album-playlist-page .album-info-card .info-item strong{
    font-size:13px !important;
    line-height:1.25 !important;
}

.album-playlist-page .album-play-all-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-width:0 !important;
    min-height:66px !important;
    padding:10px 12px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,#ff414d,#d91425) !important;
    box-shadow:0 7px 18px rgba(217,20,37,.18) !important;
    color:#fff !important;
    font:inherit !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}

.album-playlist-page .album-play-all-btn:hover:not(:disabled){
    filter:brightness(1.08) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 10px 22px rgba(217,20,37,.25) !important;
}

.album-playlist-page .album-play-all-btn:focus-visible{
    outline:3px solid rgba(255,255,255,.8) !important;
    outline-offset:3px !important;
}

.album-playlist-page .album-play-all-btn:disabled{
    opacity:.55 !important;
    cursor:not-allowed !important;
    box-shadow:none !important;
}

.album-playlist-page .album-play-all-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.18) !important;
    font-size:12px !important;
}

.album-playlist-page .album-tracklist-card .tracklist-heading{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
}

.album-playlist-page .album-tracklist-context{
    color:#fff !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.album-playlist-page .tracklist-title-group{
    display:inline-flex !important;
    flex:0 1 auto !important;
    align-items:baseline !important;
    gap:8px !important;
    min-width:0 !important;
    color:#fff !important;
    white-space:nowrap !important;
}

.album-playlist-page .tracklist-label{
    color:#fff !important;
    font-size:inherit !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .tracklist-heading,
.album-playlist-page .album-tracklist-card .tracklist-heading > span:first-child{
    color:#fff !important;
}

.album-playlist-page .album-tracklist-card .tracklist-meta{
    color:#94a3b8 !important;
    font-size:12px !important;
    font-weight:500 !important;
    text-align:right !important;
}

.album-playlist-page .album-tracklist-card .album-track{
    display:grid !important;
    grid-template-columns:34px 28px minmax(120px,1.3fr) minmax(72px,.8fr) auto 42px !important;
    grid-template-areas:"play number info seek time view" !important;
    column-gap:10px !important;
    row-gap:0 !important;
    align-items:center !important;
    min-height:64px !important;
    padding:8px 6px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    cursor:pointer !important;
    transition:background-color .18s ease,border-color .18s ease !important;
}

.album-playlist-page .album-tracklist-card .album-track:hover,
.album-playlist-page .album-tracklist-card .album-track.is-current{
    background:#111e30 !important;
}

.album-playlist-page .album-tracklist-card .album-track.is-current{
    box-shadow:inset 3px 0 0 #ff334f !important;
}

.album-playlist-page .album-track-play,
.album-playlist-page .album-track-play-placeholder{
    grid-area:play !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#dc202e !important;
    color:#fff !important;
    font-size:12px !important;
}

.album-playlist-page .album-track-play{cursor:pointer !important;}
.album-playlist-page .album-track-play:hover{background:#f12f3c !important;}
.album-playlist-page .album-track-play-placeholder{visibility:hidden !important;}

.album-playlist-page .album-tracklist-card .track-number{
    grid-area:number !important;
    color:#91a0b6 !important;
    font-size:13px !important;
    font-weight:800 !important;
}

.album-playlist-page .album-tracklist-card .track-info{
    grid-area:info !important;
    gap:3px !important;
}

.album-playlist-page .album-tracklist-card .track-title{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .track-artist{
    overflow:hidden !important;
    color:#94a3b8 !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .track-main-artist,
.album-playlist-page .album-tracklist-card .track-featuring strong{
    color:inherit !important;
    font-weight:800 !important;
}

@media (min-width:1100px){
    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:34px 28px minmax(120px,1fr) minmax(180px,1.4fr) auto 54px !important;
        column-gap:14px !important;
    }
}

.album-playlist-page .album-tracklist-card .album-track-progress{
    grid-area:seek !important;
    min-width:0 !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .16s ease !important;
}

.album-playlist-page .album-tracklist-card .album-track.is-current .album-track-progress{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.album-playlist-page .album-tracklist-card .album-track-seek{
    display:block !important;
    width:100% !important;
    height:18px !important;
    margin:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    background:transparent !important;
    cursor:pointer !important;
}

.album-playlist-page .album-track-seek::-webkit-slider-runnable-track{
    height:5px !important;
    border-radius:5px !important;
    background:linear-gradient(to right,#ef3340 var(--seek-progress,0%),#344154 var(--seek-progress,0%)) !important;
}

.album-playlist-page .album-track-seek::-moz-range-track{
    height:5px !important;
    border-radius:5px !important;
    background:#344154 !important;
}

.album-playlist-page .album-track-seek::-moz-range-progress{
    height:5px !important;
    border-radius:5px !important;
    background:#ef3340 !important;
}

.album-playlist-page .album-track-seek::-webkit-slider-thumb{
    width:11px !important;
    height:11px !important;
    margin-top:-3px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-radius:50% !important;
    background:#ff5964 !important;
}

.album-playlist-page .album-track-seek::-moz-range-thumb{
    width:11px !important;
    height:11px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#ff5964 !important;
}

.album-playlist-page .album-track-time{
    grid-area:time !important;
    color:#cbd5e1 !important;
    font-size:12px !important;
    font-variant-numeric:tabular-nums !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-track-time-separator{color:#738198 !important;}

.album-playlist-page .album-tracklist-card .track-view{
    grid-area:view !important;
    display:block !important;
    color:#ff6670 !important;
    font-size:12px !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card.has-album-playlist-js .track-player[data-album-audio]{
    display:none !important;
}

.album-playlist-page:not(.has-album-playlist-js) .album-playlist-row .track-player{
    grid-column:3 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:28px !important;
}

.album-playlist-page .album-playlist-status{
    margin:10px 0 4px !important;
    padding:9px 12px !important;
    border:1px solid rgba(255,99,109,.3) !important;
    border-radius:9px !important;
    background:rgba(217,20,37,.1) !important;
    color:#ffd1d4 !important;
    font-size:13px !important;
    line-height:1.4 !important;
}

.album-playlist-page .album-playlist-status[hidden]{display:none !important;}

@media (min-width:768px) and (max-width:1099px){
    .album-playlist-page .album-info-card .info-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:32px 25px minmax(100px,1.2fr) minmax(66px,.7fr) auto 38px !important;
        column-gap:7px !important;
    }
}

@media (max-width:767px){
    .album-playlist-page .album-info-card .info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .album-playlist-page .info-item-tracks-genre{
        display:grid !important;
        grid-column:span 2 !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        min-width:0 !important;
    }

    .album-playlist-page .album-info-card .info-grid > .info-item,
    .album-playlist-page .info-item-tracks-genre > .info-item{
        min-height:58px !important;
        padding:8px 9px !important;
    }

    .album-playlist-page .album-play-all-btn{
        min-height:58px !important;
        padding:9px 8px !important;
        gap:7px !important;
        font-size:13px !important;
    }

    .album-playlist-page .album-play-all-icon{
        width:24px !important;
        height:24px !important;
        flex-basis:24px !important;
        font-size:11px !important;
    }

    .album-playlist-page .album-tracklist-card .tracklist-heading{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    .album-playlist-page .tracklist-title-group{
        gap:6px !important;
    }

    .album-playlist-page .album-tracklist-context{
        font-size:13px !important;
    }

    .album-playlist-page .tracklist-label{
        font-size:16px !important;
    }

    .album-playlist-page .album-tracklist-card .tracklist-meta{
        text-align:left !important;
    }

    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:30px 25px minmax(0,1fr) auto !important;
        grid-template-areas:
            "play number info time"
            ". . seek view" !important;
        column-gap:7px !important;
        row-gap:3px !important;
        min-height:66px !important;
        padding:8px 4px !important;
    }

    .album-playlist-page .album-track-play,
    .album-playlist-page .album-track-play-placeholder{
        width:28px !important;
        height:28px !important;
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-number{
        font-size:12px !important;
    }

    .album-playlist-page .album-tracklist-card .track-title{
        font-size:12.5px !important;
    }

    .album-playlist-page .album-tracklist-card .track-artist{
        font-size:11px !important;
    }

    .album-playlist-page .album-track-time{
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-view{
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-player{
        width:100% !important;
    }
}