/* embedded-pick-album-home.css
   ────────────────────────────
   Album-picker homepage: three horizontal album rows that replace the
   bare "Search for an artist or album" empty state. Card + row shape
   intentionally mirrors the film picker's .fp-home so the two surfaces
   feel like siblings. */

.mx-home {
    padding: 4px 2px 12px;
    /* Container queries on the row let card counts respond to the
       picker's actual width instead of viewport width (the picker
       lives in a modal AND in the wizard's drawer-flanked column,
       which have very different widths at the same viewport). */
    container-type: inline-size;
}

/* Plain empty-state landing — used until the Spotify rate-limit story
   gets sorted and we wire the Grammy home rows back on. */
.mx-home--empty {
    padding: 30px 0;
}
.mx-home__empty-card {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
    color: #686b87;
}
.mx-home__empty-icon {
    font-size: 48px !important;
    color: #2b988f;
}
.mx-home__empty-title {
    margin: 12px 0 6px;
    font-weight: 700;
    color: #1a1d2e;
}
.mx-home__empty-sub {
    margin: 0;
    font-size: 0.88rem;
}

.mx-home__section {
    margin-bottom: 22px;
}
.mx-home__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.mx-home__title-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
    line-height: 1.2;
}
.mx-home__more {
    appearance: none;
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.mx-home__more:hover { color: #1b6b62; }
.mx-home__more .material-icons { font-size: 16px; }

/* Single-row strip of album cards. The column count copies the Grammy
   browser's grid (.mx-grammy-browser__grid: auto-fill, 130px min, 14px
   gap, never fewer than 3), so a row here holds exactly as many cards
   as a Grammy grid row does at the same picker width. That grid gets
   n columns once it is 144n − 14px wide; .mx-home is 4px wider than
   the Grammy grid (2px vs 4px side padding), hence the +4 on every
   step below. Up to 10 cards are rendered (HOME_ROW_MAX in the JS) and
   the ones past the current count are hidden, so the row only ever
   shows whole cards. The "More" button is the path into the full list.

   Vertical padding gives the hover lift (translateY -1px) room to
   breathe; negative margin neutralizes the padding's layout effect. */
.mx-home__row {
    --mx-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--mx-cols), minmax(0, 1fr));
    gap: 14px;
    padding: 4px 0;
    margin: -4px 0;
}
@container (min-width: 566px)  { .mx-home__row { --mx-cols: 4; } }
@container (min-width: 710px)  { .mx-home__row { --mx-cols: 5; } }
@container (min-width: 854px)  { .mx-home__row { --mx-cols: 6; } }
@container (min-width: 998px)  { .mx-home__row { --mx-cols: 7; } }
@container (min-width: 1142px) { .mx-home__row { --mx-cols: 8; } }
@container (min-width: 1286px) { .mx-home__row { --mx-cols: 9; } }
@container (min-width: 1430px) { .mx-home__row { --mx-cols: 10; } }
/* Hide cards past the current column count. */
.mx-home__row > .mx-home__card:nth-child(n+4) { display: none; }
@container (min-width: 566px)  { .mx-home__row > .mx-home__card:nth-child(4)  { display: flex; } }
@container (min-width: 710px)  { .mx-home__row > .mx-home__card:nth-child(5)  { display: flex; } }
@container (min-width: 854px)  { .mx-home__row > .mx-home__card:nth-child(6)  { display: flex; } }
@container (min-width: 998px)  { .mx-home__row > .mx-home__card:nth-child(7)  { display: flex; } }
@container (min-width: 1142px) { .mx-home__row > .mx-home__card:nth-child(8)  { display: flex; } }
@container (min-width: 1286px) { .mx-home__row > .mx-home__card:nth-child(9)  { display: flex; } }
@container (min-width: 1430px) { .mx-home__row > .mx-home__card:nth-child(10) { display: flex; } }

.mx-home__row-loading,
.mx-home__row-empty {
    padding: 20px;
    color: #686b87;
    font-size: 0.85rem;
}

/* Same hover treatment as the Grammy browser cards (which itself
   mirrors .fp-oscar__card) so the whole picker reads consistently.
   Width is owned by the grid (1fr per column) so cards stretch to
   fill the row evenly — no fixed width. min-width:0 keeps long
   titles from blowing out the column. */
.mx-home__card {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 10px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    transition: border-color 120ms, transform 120ms, background 120ms;
}
.mx-home__card:hover {
    border-color: #2B988F;
    background: rgba(43,152,143,0.04);
    transform: translateY(-1px);
}
.mx-home__poster {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #eef0f7;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.mx-home__poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mx-home__poster-placeholder {
    color: #b6b9cf;
    font-size: 36px;
}
/* Title + inline favorite heart share a row; the title clamps and the
   heart is flex-isolated so it never gets swallowed by the clamp.
   Mirrors .fp-card__title on the film picker's home cards. */
.mx-home__titlerow {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.mx-home__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1d2e;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mx-home__titlerow .mx-home__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Card heart. Same size and feel as the film picker's .fp-film-fav.
   The compound selectors below out-rank the floating-circle treatment
   .favorite-album-heart carries by default (embedded-pick-album.css),
   which is built for a heart sitting on top of a cover, not in text. */
.favorite-album-heart.mx-home__fav,
.favorite-artist-star.mx-home__fav {
    font-size: 12px !important;
    line-height: 1;
    color: #b6b9cf;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-top: 1px;
    padding: 1px;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.favorite-album-heart.mx-home__fav:hover,
.favorite-artist-star.mx-home__fav:hover {
    color: #ff4d8d;
    background: transparent;
    box-shadow: none;
    transform: scale(1.15);
}
.favorite-album-heart.mx-home__fav.favorited,
.favorite-artist-star.mx-home__fav.favorited {
    color: #ff4d8d;
    background: transparent;
    box-shadow: none;
}
.favorite-album-heart.mx-home__fav.favorited:hover,
.favorite-artist-star.mx-home__fav.favorited:hover {
    box-shadow: none;
    transform: scale(1.15);
}
.favorite-album-heart.mx-home__fav:focus-visible,
.favorite-artist-star.mx-home__fav:focus-visible {
    outline: 2px solid rgba(255, 77, 141, 0.35);
    outline-offset: 1px;
}
/* Inside the media explorer modal, embedded-pick-album.css has
   `#mediaExplorerModal .favorite-album-heart` — the detail page's 36px
   floating white circle, position:absolute top-right, with !important
   display/font-size. Its id out-ranks the class rules above, so every home
   card's heart was pulled out of its card and stacked in the modal's
   corner. Restate the inline heart at id specificity (same approach that
   file uses for .album-detail-heart). */
#mediaExplorerModal .favorite-album-heart.mx-home__fav {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    display: inline-flex !important;
    width: auto;
    height: auto;
    margin-top: 1px;
    padding: 1px;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #b6b9cf;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}
#mediaExplorerModal .favorite-album-heart.mx-home__fav:hover {
    color: #ff4d8d;
    background: transparent;
    box-shadow: none;
    transform: scale(1.15);
}
#mediaExplorerModal .favorite-album-heart.mx-home__fav.favorited {
    color: #ff4d8d !important;
    background: transparent;
    box-shadow: none;
}
.favorite-album-heart.mx-home__fav.is-popping {
    animation: mx-home-fav-pop 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes mx-home-fav-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.55); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1.15); }
}
.mx-home__year {
    color: #686b87;
    font-weight: 400;
}
.mx-home__artist {
    font-size: 0.76rem;
    color: #686b87;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Queue-mode inline picker: search renders as an autocomplete dropdown
   anchored to the search row (mirrors the media-explorer modal's
   .media-explorer-ac so both pickers feel the same). */
#embeddedAlbumPicker .picker-search-row { position: relative; }

.queue-ac {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #F2F4F8;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
}

.queue-ac__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: normal;
}
.queue-ac__row:hover,
.queue-ac__row.active {
    background: #E5F2F1;
}
.queue-ac__row img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: #ddd;
    flex: 0 0 auto;
}
.queue-ac__row-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #ddd;
    color: #686b87;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
.queue-ac__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.queue-ac__sub {
    font-size: 0.75rem;
    color: #686b87;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-ac__title {
    font-size: 0.9rem;
    color: #1a1d2e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-ac__loading,
.queue-ac__empty {
    padding: 16px;
    color: #686b87;
    font-size: 0.9rem;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   Inline album detail (queue-mode picker). Renders in place when a
   user clicks a card on the home or search rows — no modal involved.
   ────────────────────────────────────────────────────────────────── */
.queue-album-detail { padding-top: 8px; }

.queue-album-detail__loading {
    padding: 40px 0;
    text-align: center;
    color: #686b87;
}

/* Lottie "album playing" animation used as the picker preloader in
   place of a plain "Loading…" string. */
.queue-album-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}
.queue-album-loader lottie-player {
    width: 180px;
    height: 180px;
}

.queue-album-detail__body {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.queue-album-detail__cover-col {
    flex: 0 0 240px;
    max-width: 240px;
}
.queue-album-detail__info-col {
    flex: 1 1 280px;
    min-width: 0;
}
.queue-album-detail__cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: block;
}
.queue-album-detail__cover--blank {
    background: #eef0f7;
    display: flex; align-items: center; justify-content: center;
}
.queue-album-detail__cover--blank .material-icons { color: #b6b9cf; font-size: 64px; }

.queue-album-detail__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    /* Size container, same as .album-action-buttons: the buttons below
       shrink with the column instead of dropping their icons and labels
       when the cover column narrows to 130px on mobile. */
    container-type: inline-size;
    container-name: pickeractions;
}
/* ── Action buttons ───────────────────────────────────────────────
   These three mirror the film/TV/book pickers' action stack
   (.album-action-buttons in embedded-pick-album.css): same 5px pill, same
   0.95rem/600 label and 0.6rem/10px padding, same coloured drop shadow and
   hover lift, same icon pop, same container-query shrink ladder. They can't just reuse that stack because the queue picker
   lays its own column out (.queue-album-detail__actions), so the shared
   look is restated here — colours match .btn-add-queue (black),
   .btn-add-queue.btn-danger (red), .btn-fav-album-modal (pink) and
   .btn-spotify (green) one-for-one. The icon-pop keyframes come from
   embedded-pick-album.css, which always loads before this file. */
.queue-album-detail__add-btn,
.queue-album-detail__remove-btn,
.queue-album-detail__fav-btn,
.queue-album-detail__spotify-btn {
    appearance: none; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.25rem;
    font-weight: 600; font-size: 0.95rem; line-height: 1.1;
    text-decoration: none;
    border: 0;
    border-radius: 5px;
    padding: 0.6rem 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.18s ease;
}
.queue-album-detail__add-btn .material-icons,
.queue-album-detail__remove-btn .material-icons,
.queue-album-detail__fav-btn .material-icons,
.queue-album-detail__spotify-btn .material-icons {
    font-size: 1em;
    margin-right: 4px;
    display: inline-block;
    transition: transform 0.15s ease;
}
.queue-album-detail__add-btn:hover,
.queue-album-detail__remove-btn:hover,
.queue-album-detail__fav-btn:hover,
.queue-album-detail__spotify-btn:hover {
    transform: translateY(-1px);
}
.queue-album-detail__add-btn:active,
.queue-album-detail__remove-btn:active,
.queue-album-detail__fav-btn:active,
.queue-album-detail__spotify-btn:active {
    transform: translateY(0);
}

/* Add to Queue — .btn-add-queue black */
.queue-album-detail__add-btn {
    background: #111; color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.queue-album-detail__add-btn:hover {
    background: #222; color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
}
.queue-album-detail__add-btn:hover .material-icons {
    animation: queue-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
.queue-album-detail__add-btn:disabled,
.queue-album-detail__add-btn.is-added {
    background: #b6b9cf;
    color: #fff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Remove from Queue — .btn-add-queue.btn-danger red */
.queue-album-detail__remove-btn {
    background: #dc3545; color: #fff;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.35);
}
.queue-album-detail__remove-btn:hover {
    background: #bb2d3b; color: #fff;
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.42);
}
.queue-album-detail__remove-btn:active {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.30);
}
.queue-album-detail__remove-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Add to Favorites — the button already carries .btn-fav-album-modal, so
   the pink fill arrives from there (it sets background/color !important).
   Only the shadow and the icon pop need restating. Scoped with the fav
   class because the media-explorer modal reuses __fav-btn as the layout
   class on its Remove-from-Queue button, which keeps its own dark-red
   shadow (.btn-remove-from-queue-modal). */
.queue-album-detail__fav-btn.btn-fav-album-modal {
    color: #fff;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}
.queue-album-detail__fav-btn.btn-fav-album-modal:hover {
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.42);
}
.queue-album-detail__fav-btn.btn-fav-album-modal:active {
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.30);
}
.queue-album-detail__fav-btn.btn-fav-album-modal:hover .material-icons {
    animation: fav-heart-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Open in Spotify — .btn-spotify green, the music counterpart of the film
   picker's IMDb-yellow "Open in IMDb". */
.queue-album-detail__spotify-btn {
    background: #1db954; color: #fff;
    box-shadow: 0 6px 16px rgba(30, 215, 96, 0.35);
}
.queue-album-detail__spotify-btn:hover {
    background: #18a84a; color: #fff;
    box-shadow: 0 8px 20px rgba(30, 215, 96, 0.42);
}
.queue-album-detail__spotify-btn:active {
    box-shadow: 0 4px 12px rgba(30, 215, 96, 0.30);
}
.queue-album-detail__spotify-btn:hover .material-icons {
    animation: spotify-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── Album detail actions: flat, no colour-matched glow ─────────────
   Each button above ships a big drop shadow tinted to its own fill — black
   Add to Queue, red Remove, pink Favorite, green Spotify, blue Backlog —
   which stacked up as five coloured glows down one column. Kill the shadow
   only: fills, hover shades, the lift and the icon pops all stay.

   !important because .album-backlog-btn (embedded-pick-album.css) sets its
   shadow that way, and the .album-backlog-btn selectors are spelled out
   because its :hover / .is-on rules are !important too — at equal weight
   specificity decides, so those need a longer selector than mine.

   Safe as a blanket rule: none of these buttons uses box-shadow for a
   focus ring (the only :focus rule on them, in style.css, is colour). */
.queue-album-detail__actions button,
.queue-album-detail__actions a,
.queue-album-detail__actions button:hover,
.queue-album-detail__actions a:hover,
.queue-album-detail__actions button:active,
.queue-album-detail__actions a:active,
.queue-album-detail__actions .album-backlog-btn,
.queue-album-detail__actions .album-backlog-btn:hover,
.queue-album-detail__actions .album-backlog-btn.is-on,
.queue-album-detail__actions .album-backlog-btn.is-on:hover {
    box-shadow: none !important;
}

/* Shrink ladder — the same steps .album-action-buttons uses, so a narrow
   music column reads exactly like a narrow film column: labels and icons
   stay, they just get smaller. (This replaces the old mobile treatment
   that hid every icon and swapped the labels for "Favorite" / "Remove" /
   "Spotify" via ::after, which left the buttons looking plain.) */
@container pickeractions (max-width: 220px) {
    .queue-album-detail__add-btn,
    .queue-album-detail__remove-btn,
    .queue-album-detail__fav-btn,
    .queue-album-detail__spotify-btn {
        font-size: 0.82rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}
@container pickeractions (max-width: 170px) {
    .queue-album-detail__add-btn,
    .queue-album-detail__remove-btn,
    .queue-album-detail__fav-btn,
    .queue-album-detail__spotify-btn {
        font-size: 0.72rem;
        padding: 6px;
        line-height: 1.5;
    }
    .queue-album-detail__add-btn .material-icons,
    .queue-album-detail__remove-btn .material-icons,
    .queue-album-detail__fav-btn .material-icons,
    .queue-album-detail__spotify-btn .material-icons {
        margin-right: 2px;
    }
    /* "Remove from Queue" is the one label too long for a 130px column —
       swap in the short span, the same trick the film picker's Remove
       button uses (.fp-btn-label-full / -short, embedded-pick-film.css). */
    .queue-album-detail__remove-btn .fp-btn-label-full,
    .btn-remove-from-queue-modal .fp-btn-label-full { display: none; }
    .queue-album-detail__remove-btn .fp-btn-label-short,
    .btn-remove-from-queue-modal .fp-btn-label-short { display: inline; }
}

.queue-album-detail__title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1d2e;
    line-height: 1.2;
}
.queue-album-detail__year {
    font-size: 1rem;
    font-weight: 500;
    color: #686b87;
}
.queue-album-detail__artist {
    font-size: 1rem;
    color: #2B988F;
    font-weight: 600;
    margin-bottom: 6px;
}
.queue-album-detail__artist-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.queue-album-detail__artist-link:hover {
    color: #1b6b62;
    border-bottom-color: currentColor;
}
.queue-album-detail__meta {
    font-size: 0.82rem;
    color: #686b87;
    margin-bottom: 14px;
}
.queue-album-detail__tracks-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.queue-album-detail__tracks {
    list-style: none;
    margin: 0; padding: 0;
}
.queue-album-detail__track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    font-size: 0.88rem;
}
.queue-album-detail__track:nth-child(even) {
    background: rgba(0, 0, 0, 0.035);
}
/* Tracklist Show all / Show less toggle — a clean teal pill with a
   chevron that rotates when the full list is expanded. */
.qad-tracks-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding: 6px 14px 6px 16px;
    border: 1px solid rgba(43, 152, 143, 0.35);
    border-radius: 999px;
    background: #f1faf9;
    color: #2b988f;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.qad-tracks-toggle:hover {
    background: #2b988f;
    border-color: #2b988f;
    color: #fff;
    box-shadow: 0 2px 8px rgba(43, 152, 143, 0.25);
}
.qad-tracks-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.3);
}
.qad-tracks-toggle__icon {
    font-size: 17px;
    transition: transform .2s ease;
}
.qad-tracks-toggle.is-expanded .qad-tracks-toggle__icon {
    transform: rotate(180deg);
}
.queue-album-detail__track-num {
    flex: 0 0 22px;
    color: #686b87;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    text-align: right;
}
.queue-album-detail__track-name {
    flex: 1 1 auto;
    color: #1a1d2e;
}
.queue-album-detail__explicit-pill {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    background: #686b87;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
}
/* Album-level explicit marker shown beside the title (replaces the
   per-track "E" pills). Light red shade. */
.queue-album-detail__explicit-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #fde8e8;
    color: #d64545;
    border: 1px solid #f5c6c6;
    padding: 2px 7px;
    border-radius: 999px;
}

/* ──────────────────────────────────────────────────────────────────
   Inline artist detail (queue-mode picker). Hero strip with the
   artist image + name + genres, then a wrapping grid of their
   albums. Clicking an album drills into the inline album detail. */
.queue-artist-detail__hero {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
}
.queue-artist-detail__image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}
.queue-artist-detail__image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    display: block;
}
.queue-artist-detail__image--blank {
    background: #eef0f7;
    display: flex; align-items: center; justify-content: center;
}
.queue-artist-detail__image--blank .material-icons {
    color: #b6b9cf;
    font-size: 48px;
}
/* Spotify circle pinned to the bottom-right of the artist image —
   matches the badge on album hero covers (modal mobile view). */
.queue-artist-detail__spotify-circle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    background: #1DB954;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: transform 0.12s ease, background 0.12s ease;
}
.queue-artist-detail__spotify-circle:hover {
    transform: scale(1.08);
    background: #1ed760;
    color: #fff;
}
.queue-artist-detail__spotify-circle i {
    font-size: 18px;
    line-height: 1;
}
.queue-artist-detail__hero-info {
    flex: 1 1 240px;
    min-width: 0;
}
.queue-artist-detail__name {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1d2e;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.queue-artist-detail__heart {
    font-size: 22px !important;
    color: #b6b9cf;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.12s ease;
}
.queue-artist-detail__heart:hover { color: #e0245e; transform: scale(1.08); }
.queue-artist-detail__heart.favorited { color: #e0245e; }
.queue-artist-detail__followers {
    color: #686b87;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.queue-artist-detail__genres {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.queue-artist-detail__genre {
    background: rgba(43,152,143,0.10);
    color: #1d7a72;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.74rem;
    font-weight: 600;
}
.queue-artist-detail__bio {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.45;
    margin-bottom: 10px;
}
.queue-artist-detail__bio:empty {
    display: none;
}
.queue-artist-detail__actions {
    margin-top: 8px;
}
.queue-artist-detail__albums-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.queue-artist-detail__albums-head {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
}
.queue-artist-detail__sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #686b87;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.queue-artist-detail__sort-select {
    font: inherit;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1d2e;
    background: #fff;
    border: 1px solid #d4d6e1;
    border-radius: 6px;
    padding: 4px 8px;
    height: 30px;
    cursor: pointer;
}
.queue-artist-detail__sort-select:focus {
    outline: none;
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43,152,143,0.15);
}

/* Inline favorites view — two grids of cards, same shape as home rows. */
.queue-album-favorites { padding-top: 8px; }
.queue-fav__head {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
}
.queue-fav__head--mt { margin-top: 24px; }
/* Horizontal-scroll row (was a wrapping grid — no way to tell there was
   more off-screen) with prev/next arrows, mirroring the artist-album
   slider's .mx-artist-album-nav look. */
.queue-fav__row-wrap {
    position: relative;
    display: flex;
    align-items: center;
    container-type: inline-size;
}
.queue-fav__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 14px;
    padding: 2px 2px 6px;
    flex: 1;
    min-width: 0;
}
/* Whole cards per visible page, same count as a Grammy grid row (see
   .mx-home__row). These rows are containers themselves: the wrap spans
   the full picker, 8px wider than the Grammy grid, hence +8 on each
   step. The arrows eat into the track, so cards come out a little
   narrower than on Home, but the count per row matches. */
.queue-fav__grid,
#embeddedAlbumPicker .mx-artist-album-slider {
    --mx-cols: 3;
}
@container (min-width: 570px)  { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 4; } }
@container (min-width: 714px)  { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 5; } }
@container (min-width: 858px)  { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 6; } }
@container (min-width: 1002px) { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 7; } }
@container (min-width: 1146px) { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 8; } }
@container (min-width: 1290px) { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 9; } }
@container (min-width: 1434px) { .queue-fav__grid, #embeddedAlbumPicker .mx-artist-album-slider { --mx-cols: 10; } }
.queue-fav__grid .mx-home__card {
    flex: 0 0 calc((100% - (var(--mx-cols) - 1) * 14px) / var(--mx-cols));
    width: calc((100% - (var(--mx-cols) - 1) * 14px) / var(--mx-cols));
}
.queue-fav__nav {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
    flex-shrink: 0;
    transition: opacity .25s ease, transform .2s ease;
}
.queue-fav__nav:disabled {
    opacity: 0.25;
    pointer-events: none;
}
.queue-fav__nav:not(:disabled):hover {
    transform: translateY(-1px);
}
.queue-fav__nav .material-icons {
    font-size: 22px;
    color: #333;
}
.queue-fav__nav--prev { margin-right: 8px; }
.queue-fav__nav--next { margin-left: 8px; }

/* ── Mobile: native touch slider, no chevrons ────────────────────
   Under 992px the favourites rows become the phone-app carousel: swipe
   with momentum, each card snapping to the left edge, the next one peeking
   so it’s obvious the row continues, and no scrollbar or arrows. The peek
   is what replaces the chevrons as the "there’s more" affordance.

   The arrows are only display:none’d — updateFavNavState() in
   embedded-pick-album-queue.js just sets .disabled on them and toggles a
   class on the wrap, all harmless against a hidden button, so the JS needs
   no mobile branch. */
@media (max-width: 991.98px) {
    .queue-fav__nav { display: none; }

    .queue-fav__grid {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* Trailing room so the last card can scroll clear of the edge
           instead of stopping flush against it. */
        padding: 2px 16px 10px 2px;
        /* Gap stays 14px: .queue-fav__grid .mx-home__card hard-codes that
           number in its flex-basis calc, so changing it here would leave
           the card width quietly wrong. */
        /* No track: the peek + snap carry the affordance. */
        scrollbar-width: none;
    }
    .queue-fav__grid::-webkit-scrollbar { display: none; }
    .queue-fav__grid .mx-home__card { scroll-snap-align: start; }

    /* Phone-width rows only. The wrap is the query container, so this
       tracks the row’s own width, not the viewport — a wide tablet keeps
       the whole-card counts from the steps above and just loses the
       chevrons. Two full cards plus a slice of the third; the existing
       flex-basis formula takes a fractional column count fine. */
    @container (max-width: 569.98px) {
        .queue-fav__grid { --mx-cols: 2.4; }
    }
}

/* Artist page album slider (queue picker). Its cards are Home cards
   (.mx-home__card), sized like the Favorites rows above: the wrap is the
   container, --mx-cols comes from the shared steps, and the loading
   shimmer takes the same width so the JS page-size probe measures the
   real card. !important because embedded-pick-album.css pins these
   cards to a third of the row on mobile with !important. */
#embeddedAlbumPicker .mx-artist-album-slider-wrap {
    container-type: inline-size;
}
#embeddedAlbumPicker .mx-artist-album-slider {
    gap: 14px;
}
#embeddedAlbumPicker .mx-artist-album-slider .mx-home__card,
#embeddedAlbumPicker .mx-artist-album-slider .mx-album-shimmer {
    flex: 0 0 calc((100% - (var(--mx-cols) - 1) * 14px) / var(--mx-cols)) !important;
    width: calc((100% - (var(--mx-cols) - 1) * 14px) / var(--mx-cols)) !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Inline retry shown if loading the artist's albums fails. */
.queue-artist-detail__more-btn {
    appearance: none;
    border: 1px solid #d4d7e6;
    background: #fff;
    color: #1a1d2e;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.queue-artist-detail__more-btn:hover {
    border-color: #2B988F;
    background: rgba(43, 152, 143, 0.05);
}
.queue-artist-detail__albums-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #b3261e;
    font-size: 0.85rem;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   Album detail on phone + tablet.
   The cover column drops to 130px (embedded-pick-album.css), leaving the
   info column narrow: the tracklist steps down a size, and the
   Show all / Show less toggle stops being a floating pill and becomes
   the closing row of the list itself. */
@media (max-width: 991.98px) {
    .queue-album-detail__tracks-label {
        font-size: 0.82rem;
        margin-bottom: 4px;
    }
    .queue-album-detail__track {
        gap: 8px;
        padding: 4px 8px;
        font-size: 0.76rem;
    }
    .queue-album-detail__track-num {
        flex: 0 0 16px;
        font-size: 0.7rem;
    }

    /* Full width across the same -8px bleed the rows use, squared into
       the list's bottom corners, teal tint + chevron carrying the theme —
       so it reads as part of the tracklist instead of a stray pill. */
    .qad-tracks-toggle {
        display: flex;
        justify-content: center;
        width: auto;
        margin: 2px -8px 0;
        padding: 7px 10px;
        border: 0;
        border-top: 1px solid rgba(43, 152, 143, 0.22);
        border-radius: 0 0 6px 6px;
        background: rgba(43, 152, 143, 0.09);
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .qad-tracks-toggle:hover {
        background: rgba(43, 152, 143, 0.16);
        border-top-color: rgba(43, 152, 143, 0.35);
        color: #1b6b62;
        box-shadow: none;
    }
    .qad-tracks-toggle:active {
        background: rgba(43, 152, 143, 0.22);
    }
    .qad-tracks-toggle__icon {
        font-size: 15px;
    }
}

/* ── Cover action strip (.mx-home__acts) ──
   Two halves across the bottom of an album cover: favourite on the left,
   backlog on the right. Same treatment as the film picker's .tvc-acts strip
   (embedded-pick-film.css) — translucent dark panels, white glyphs — but
   shown at every width rather than phones only, so it carries hover as well
   as a pressed state. Opted into per card via cardHtml(item, { acts: true });
   today only the artist page's album slider asks for it.

   Each half IS the control the delegated handlers already look for, so its
   state and repainting come for free. */
.mx-home__acts {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    min-height: 24px;
    max-height: 32px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    /* The halves carry their own panel, so only the cover's bottom third
       is covered and the strip itself stays transparent. */
    background: transparent;
}
/* !important throughout: .album-backlog-btn (embedded-pick-album.css) paints
   itself solid blue with !important on background, colour and shadow, so
   nothing short of that repaints it. .favorite-album-heart.mx-home__fav does
   the same with its 12px font-size. */
.mx-home__acts .mx-home__act {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400;
    color: #fff !important;
    background: rgba(15, 18, 30, 0.55) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: font-size .18s cubic-bezier(.34, 1.56, .64, 1),
                color .12s ease, background-color .12s ease, opacity .12s ease;
}
.mx-home__acts .mx-home__act + .mx-home__act {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* The two halves aren't the same shape — the heart IS a .material-icons
   element, the backlog icon is a wrapper around one — so everything below
   acts on the half itself. Nothing targets an inner glyph, which would
   only ever reach one of them. */
.mx-home__acts .mx-home__act .material-icons {
    font-size: inherit;
    line-height: 1;
    color: inherit !important;
}

/* Hover: the half under the pointer brightens its panel, and the other one
   fades back so the target is unambiguous. Opacity, not colour, does the
   fading — a colour would have to out-specify the pink and green on-states
   and would wash them out.

   Pointer devices only: on a phone :hover sticks after a tap and the strip
   would sit there looking permanently pressed. */
/* The pop is font-size, not transform. The two halves aren't the same
   shape — the heart IS a .material-icons element, the backlog icon wraps one
   — so a transform on the half would scale its panel and the divider with
   it, and a transform on an inner glyph would only ever reach one of them.
   Growing the type grows both glyphs inside panels that stay put (the inner
   icon inherits its size), which is the same springy easing the picker's
   other icon buttons use.

   Pointer devices only: on a phone :hover sticks after a tap and the strip
   would sit there looking permanently pressed. */
@media (hover: hover) {
    .mx-home__acts .mx-home__act:hover {
        background: rgba(15, 18, 30, 0.8) !important;
        font-size: 20px !important;
        box-shadow: none !important;
    }
    /* The other half steps back so the target is unambiguous. Opacity, not
       colour — a colour would have to out-specify the pink and green
       on-states and would wash them out. */
    .mx-home__acts:hover .mx-home__act:not(:hover) { opacity: .55; }
}
.mx-home__acts .mx-home__act:active {
    background: rgba(15, 18, 30, 0.9) !important;
    font-size: 14px !important;
}
.mx-home__acts .mx-home__act:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
    .mx-home__acts .mx-home__act { transition: none; }
    .mx-home__acts .mx-home__act:hover,
    .mx-home__acts .mx-home__act:active { font-size: 16px !important; }
}
.mx-home__acts .favorite-album-heart.mx-home__act.favorited {
    color: #ff4d8d !important;
    transform: none;
}
/* The same pair the film picker's strip uses: pink once favourited, green
   once saved. White at rest. */
.mx-home__acts .mx-home__act--backlog.is-on,
.mx-home__acts .mx-home__act--backlog.is-on .material-icons { color: #4ade80 !important; }
/* Hover tints a not-yet-on glyph toward the colour it will turn — a soft
   pink heart, a soft green bookmark — so the target previews its action.
   Already-on halves keep their full colour. Pointer devices only, like the
   rest of the hover. */
@media (hover: hover) {
    .mx-home__acts .favorite-album-heart.mx-home__act:not(.favorited):hover { color: #ff9cc0 !important; }
    .mx-home__acts .mx-home__act--backlog:not(.is-on):hover,
    .mx-home__acts .mx-home__act--backlog:not(.is-on):hover .material-icons { color: #86efac !important; }
}

/* One set or the other, never both: a card carrying the strip drops the
   small heart beside its title. */
.mx-home__card--acts .mx-home__titlerow .mx-home__fav { display: none; }

/* Every other album card carries the strip too (.mx-home__acts--phone), but
   only shows it on phones — the film picker's rule: a 12px title-row heart
   is fine with a mouse, not with a thumb. */
.mx-home__acts--phone { display: none; }
@media (max-width: 575.98px) {
    .mx-home__acts--phone { display: flex; }
    /* Id + !important: the explorer modal forces every .favorite-album-heart
       to display:flex !important (embedded-pick-album.css). */
    .mx-home__card:has(.mx-home__acts--phone) .mx-home__titlerow .mx-home__fav,
    #mediaExplorerModal .mx-home__card:has(.mx-home__acts--phone) .mx-home__titlerow .mx-home__fav { display: none !important; }

    /* Same proportions as the film strip on a phone: the bottom fifth of the
       cover, 18px glyphs. */
    .mx-home__acts {
        height: 20%;
        min-height: 0;
        max-height: none;
    }
    .mx-home__acts .mx-home__act { font-size: 18px !important; }
}