@import url('../vendor/fonts/lato-1sd5i.css');

:root {
    --color-bg-light: #f1f1f1;
    --color-border-light: #e0e0e0;
    --color-primary: #29B5A8;
    --color-primary-dark: #21998d;
    --color-secondary: #666;
    --color-badge-text: #666;
    --color-badge-bg: #f1f1f1;
    --color-card-label: #29B5A8;
    --color-card-border: #074154;
    --color-card-top: #1A659E;
    --color-preview-image-bg: #ddd;
    --color-dropdown-active-bg: #29B5A8;
    --color-dropdown-active-text: white;
    --color-radio-border: #fff;
    --color-radio-bg: #fff;
    --color-radio-hover: #ddf1ff;
    --color-radio-active: #004e89;
    --color-radio-text: #333;
    --color-radio-hover-text: black;
}


* {
    box-sizing: border-box;
}

/* container */
.custom-album-picker {
    position: relative;
    width: 100%;
    margin: 12px auto;
    background: white;
    border-radius: 8px;
    overflow: visible;
}

.custom-album-picker__input,
.custom-album-picker__search-btn,
.custom-album-picker__refresh-btn {
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .custom-album-picker__refresh-btn .material-icons {
        line-height: 1;
        display: block;
    }


/* dropdown */
.custom-album-picker__search-results {
    position: absolute; /* ensure it’s positioned vs. the search‐bar */
    top: calc(100% + 4px); /* just below the bar */
    left: 0;
    width: 100%; /* match the bar’s width */
    background: white;
    box-shadow: 0 1px 15px rgba(0,0,0,0.1);
    border-radius: 6px;
    max-height: 200px; /* optional scroll if long */
    overflow-y: auto; /* scroll inside dropdown */
    opacity: 1; /* don’t fade out */
    transform: translateY(0); /* reset any previous translate */
    pointer-events: auto;
    z-index: 10;
}

    .custom-album-picker__search-results.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .custom-album-picker__search-results div {
        padding: 8px 12px;
        font-size: .85rem;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

        .custom-album-picker__search-results div:last-child {
            border-bottom: none;
        }

        .custom-album-picker__search-results div:hover,
        .custom-album-picker__search-results div.active {
            background: #cfe2ff;
            color: var(--c-accent-primary,#404089);
        }


.album-suggestion-meta {
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-size: .75rem;
}

.album-suggestion-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-suggestion-artist {
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-suggestion-info {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    border: 0px;
    background-color: transparent;
}


/* album cover */
.custom-album-picker__poster--featured {
    flex-shrink: 0;
    width: 210px;
    height: 210px;
    border: 4px solid white;
    box-shadow: 0px 10px 30px -20px;
    overflow: hidden;
    margin-right: 1.4rem;
}

    .custom-album-picker__poster--featured img {
        width: 100%;
        display: block;
    }

/* details column */
.custom-album-picker__details {
    flex: 1;
}


.custom-album-picker__artist {
    font-size: 1em;
    margin-bottom: 12px;
}

.custom-album-picker__release {
    font-size: 0.9em;
    color: gray;
}

.custom-album-picker__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
    font-size: .85rem;
    color: #666;
}

.custom-album-picker__divider-dot {
    font-size: .75rem;
}

.custom-album-picker__tracks-list {
    padding-left: 0rem;
    font-size: 0.75rem;
    list-style: none;
}

    .custom-album-picker__tracks-list li {
        line-height: 1.8;
    }


/* footer */
.custom-album-picker__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.custom-album-picker__prev-btn,
.custom-album-picker__launch-btn {
    padding: .5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.custom-album-picker__prev-btn {
    background: #ddd;
    color: #333;
}

.custom-album-picker__launch-btn {
    background: var(--c-accent-primary,#404089);
    color: #fff;
}

    .custom-album-picker__launch-btn:hover {
        background: #303066;
    }

/* new styles */
.custom-album-picker__artist-row {
    font-size: .85rem;
    color: #666;
    margin-bottom: .75rem;
}

.custom-album-picker__description {
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.4;
    color: #333;
}

/* Wiki summary fade + expand */
.custom-album-picker__wiki-text-container {
    position: relative;
    max-height: 80px;
    overflow: hidden;
    transition: max-height .3s ease;
}

    .custom-album-picker__wiki-text-container::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(transparent, white);
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .custom-album-picker__wiki-text-container.expanded {
        max-height: none;
    }

        .custom-album-picker__wiki-text-container.expanded::after {
            opacity: 0;
        }


.custom-album-picker {
    position: relative; /* needed for absolute loader */
}

.custom-album-picker__show-more {
    display: block;
    background: none;
    border: none;
    color: #2b988f;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.75rem;
}


.album-search-results {
    position: absolute;
    top: 89%;
    left: 0;
    right: 0;
    background: #F2F4F8;
    border-radius: 6px;
    z-index: 2147483646;
    max-height: 202px;
    overflow-y: auto;
    pointer-events: auto;
}


    .album-search-results > div {
        padding: 8px 10px;
        cursor: pointer;
        color: #333;
        font-weight: 600;
    }

.album-ac-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .album-ac-row img {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        object-fit: cover;
        background: #ddd;
        flex-shrink: 0;
    }

    /* Fallback thumb for autocomplete rows when the source has no cover
       (mostly books/authors via Google Books / Open Library). Same
       footprint as the img so the row layout doesn't shift. */
    .album-ac-row .ra-ac-thumb-fallback {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        background: #e2e8f0;
        color: #94a3b8;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .album-ac-row .ra-ac-thumb-fallback .material-icons {
        font-size: 20px;
        line-height: 1;
    }

/* ===============================
   Book picker — author-page slider
   Override the album-cover square so book covers fit inside the card
   in their natural ~2:3 portrait without being squished or cropped.
   =============================== */
[data-author-books-grid] .mx-artist-album-cover {
    aspect-ratio: 2 / 3;
    object-fit: contain;
    background: #f1f5f9;
}

/* Lock the book picker to 4 cards per row. The album picker keeps its
   154px-fixed cards via the original .mx-artist-album-card rule;
   .rt-books-slider-wrap scopes this override to the book picker only.
   Math: 3 gaps × 14px = 42px reserved, remaining width split 4 ways. */
.rt-books-slider-wrap .mx-artist-album-card {
    width: calc((100% - 42px) / 4);
    min-width: 0;
}

/* Author header — portrait frame + bio block (Open Library enrichment).
   Frame holds either an <img.artist-portrait-img> on success or a
   centered .artist-portrait-placeholder material-icon when there's no
   photo / the photo 404s. */
.artist-portrait-frame {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(43,152,143,0.12);
}
.artist-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.artist-portrait-placeholder {
    font-size: 48px !important;
    color: #94a3b8;
}
.artist-author-bio {
    color: #334155;
    line-height: 1.45;
}
.artist-author-bio p {
    margin: 0;
}
.artist-author-bio-loading {
    font-style: italic;
    opacity: 0.7;
}
.artist-author-sources a {
    color: #2b988f;
    text-decoration: none;
}
.artist-author-sources a:hover {
    text-decoration: underline;
}

/* Book genres — single subtle inline line, not pills. Google Books
   categories are slash-path strings that look chaotic as full pills. */
.picker-book-genres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #5b6b78;
}
.picker-book-genre {
    color: #2b988f;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.picker-book-genre-sep {
    color: #cfd6dc;
    font-weight: 700;
}
/* Shown in place of the Select button when a book fails the club's
   pick restrictions (author / genre / year range) in create mode. */
.picker-book-restriction-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecec;
    border: 1px solid #f5c2c2;
    color: #a23b3b;
    font-size: 0.82rem;
    line-height: 1.4;
}
.picker-book-restriction-hint .material-icons {
    font-size: 18px;
    flex-shrink: 0;
}
/* Transient state while Open Library subjects are fetched to double-check
   genre — neutral, not the red "blocked" treatment. */
.picker-book-restriction-hint--checking {
    background: #eef4f6;
    border-color: #d4e0e4;
    color: #5b6b78;
    align-items: center;
}

/* ===============================
   Book picker — book detail view
   =============================== */
.picker-book-title .picker-book-year {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.78em;
    margin-left: 4px;
}
.picker-book-author-line {
    font-size: 0.92rem;
}
.picker-book-author-line .picker-author-link {
    color: #17756D;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, color 0.15s;
}
.picker-book-author-line .picker-author-link:hover {
    color: #2B988F;
    border-bottom-color: currentColor;
}
/* Book synopsis "Read more" / "Show less" toggle. The block always renders
   both spans; the .is-collapsed modifier on the wrapper picks which is shown.
   The toggle <a> is shared between the two states. */
.picker-book-synopsis.is-collapsed .picker-book-synopsis-full { display: none; }
.picker-book-synopsis:not(.is-collapsed) .picker-book-synopsis-trunc { display: none; }
.picker-book-synopsis-toggle {
    margin-left: 4px;
    font-weight: 600;
    color: #2b988f;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.picker-book-synopsis-toggle:hover { text-decoration: underline; }

.picker-book-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.picker-book-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
}
.picker-book-stat strong {
    color: #1e293b;
}
.picker-book-stat .material-icons {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1;
}

.album-ac-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.album-ac-artist {
    font-size: 0.68rem;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.album-ac-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}


.album-search-results > div:hover,
.album-search-results > div.active {
    background: #E5F2F1;
}



.album-suggestions-header {
    line-height: 1;
}

.album-suggestions-refresh {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #6c757d; /* same muted tone */
}

    .album-suggestions-refresh .material-icons {
        font-size: 18px;
        line-height: 1;
        vertical-align: middle;
        transform: translateY(1px); /* 🔑 pixel-perfect baseline fix */
    }

    .album-suggestions-refresh:hover {
        color: #000;
    }


.album-picker-hidden {
    display: none !important;
}

/* =========================
   ALBUM ACTION BUTTONS
========================= */

.album-action-buttons {
    margin-top: 0.5rem;
    max-width: 220px;
}

.album-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 5px;
    transition: all 0.18s ease;
}

/* =========================
   QUEUE SAVE MODE
========================= */

.queue-save-mode {
    background: #2B988F !important;
    color: #fff !important;
    border-color: #198754 !important;
    box-shadow: 0 6px 18px rgba(25, 135, 84, 0.45);
}

    .queue-save-mode:hover {
        background: #106E66 !important;
    }

/* =========================
   TAB LOCK FEEDBACK
========================= */

.tab-locked-shake {
    animation: tabShake 0.3s ease;
}

@keyframes tabShake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}


.album-added-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1b994f;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transition: all .25s ease;
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

    .album-added-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

.btn-add-queue.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* =========================
   ALBUM / ARTIST TYPE SWITCH
========================= */

.album-search-type {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
}


.album-search-type__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d6dde6;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

    .album-search-type__btn:hover {
        background: #f5f7fb;
        border-color: #cbd5e1;
    }

.album-search-type.open .album-search-type__btn {
    background: #e5f2f1;
    border-color: #2b988f;
    color: #2b988f;
}


.album-search-type__btn:hover {
    background: #f5f7fb;
    border-color: #cdd6e1;
}

.album-search-type__btn .material-icons {
    font-size: 18px;
}

.album-search-type__btn .chevron {
    opacity: 0.6;
}

.album-search-type__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 2147483647; /* max int */
    pointer-events: auto;
    display: none;
}


.album-search-type.open .album-search-type__menu {
    display: block;
}



.album-search-type__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .album-search-type__option:hover {
        color: #2b988f;
    }

    .album-search-type__option.active {
        background: #e5f2f1;
        color: #2b988f;
        font-weight: 700;
    }


.album-search-type__item:hover {
    background: #f2f5fb;
}

.album-search-type__item.active {
    background: #e5f2f1;
    color: #2b988f;
    font-weight: 700;
}

.album-search-type__item .material-icons {
    font-size: 18px;
}

.artist-album-block {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}


/* =========================
   ALBUM TYPE PILL SWITCH — SEPARATE PILLS
========================= */

.album-type-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.album-type-switch .album-type-pill {
    flex: 1;
    justify-content: center;
}

.album-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #666;
    background: #ffffff;
    border: 1px solid #d6dde6;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

    .album-type-pill:hover {
        background: #f5f7fb;
    }

    .album-type-pill.active {
        color: #2b988f;
        background: #e5f2f1;
        border-color: #2b988f;
        box-shadow: 0 4px 10px rgba(43,152,143,0.25);
    }

    .album-type-pill .material-icons {
        font-size: 18px;
        line-height: 1;
        display: block;
    }

/* slider no longer used but kept invisible so JS doesn't break */
.album-type-slider {
    display: none;
}

.picker-search-divider {
    width: 1px;
    height: 20px;
    background: #dde3e6;
    border-radius: 1px;
    flex-shrink: 0;
    margin: 0 4px;
}

/* Labels on Random/Favorites buttons — desktop: hidden, mobile: visible */
.picker-btn-label {
    display: none;
}
@media (max-width: 575.98px) {
    .picker-btn-label { display: inline; }
}

/* At wider widths: search input grows, pill switch stays natural size */
@media (min-width: 576px) {
    .album-type-switch {
        width: auto;
        flex-shrink: 0;
    }
    .album-type-switch .album-type-pill {
        flex: 0 0 auto;
    }
}




.album-search-empty {
    border: 1px dashed #dbe7e6;
    border-radius: 14px;
    background: #fafdfd;
    color: #5f6f73;
}

    .album-search-empty .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: #e5f2f1;
        color: #2b988f;
    }


.album-search-empty-inner {
    max-width: 360px;
    margin: 0 auto;
}

#albumSuggestionsGrid,
#albumSuggestionsHeader,
#refreshSuggestionsBtn {
    display: none !important;
}


/* =========================
   ARTIST POPULARITY METER
========================= */

.artist-followers-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.artist-popularity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #5f6f73;
}

.artist-popularity-bar {
    width: 70px;
    height: 6px;
    background: #e5f2f1;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(43,152,143,0.15);
}

.artist-popularity-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    animation: popGrow 0.6s ease forwards;
    transition: background 0.3s ease;
}

.artist-popularity[data-tier="hot"] .artist-popularity-fill {
    background: linear-gradient(90deg, #ff4d4d, #ff914d);
}

.artist-popularity[data-tier="rising"] .artist-popularity-fill {
    background: linear-gradient(90deg, #ffc107, #ffe066);
}

.artist-popularity[data-tier="steady"] .artist-popularity-fill {
    background: linear-gradient(90deg, #2b988f, #29b5a8);
}

.artist-popularity[data-tier="niche"] .artist-popularity-fill {
    background: linear-gradient(90deg, #6c757d, #adb5bd);
}


.artist-popularity-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #2b988f;
    min-width: 18px;
    text-align: right;
}

@keyframes popGrow {
    from {
        width: 0;
    }

    to {
        width: inherit;
    }
}


.artist-wiki-link {
    font-size: 0.8em;
    color: #2B988F;
    text-decoration: none;
}

    .artist-wiki-link:hover {
        text-decoration: underline;
    }

/* container */
.custom-album-picker {
    position: relative;
    width: 100%;
    margin: 12px auto;
    background: white;
    border-radius: 8px;
    overflow: visible;
}


/* search bar row */
.custom-album-picker__search-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem; /* more breathing room */
    background: #f2f4f8;
    padding: 10px 16px; /* looser padding */
    border-radius: 10px;
    width: 100% !important;
    margin-bottom: 16px;
    margin-top: 10px;
    border: 1px solid #dbe7e6;
}

#mediaExplorerModal .custom-album-picker__search-bar {
    margin-top: 0;
}


.custom-album-picker__--featured {
    width: 250px;
    height: 250px;
    border: 4px solid white;
    box-shadow: 0px 10px 30px -20px;
}

.custom-album-picker__input {
    flex: 1;
    padding: 18px;
    font-size: .85rem;
    color: #111827;
    background: #fff;
    border: 1px solid #d6dde6;
    border-radius: 6px;
    transition: border-color .2s ease;
}

    .custom-album-picker__input:focus {
        border-color: #2b988f;
        outline: none;
        background: #fffefc;
    }

.custom-album-picker__search-btn,
.custom-album-picker__refresh-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* Match archive dice button behavior */
.custom-album-picker__search-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

    /* Icon sizing */
    .custom-album-picker__search-btn img {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }

    /* Hover (same as archive-action-btn) */
    .custom-album-picker__search-btn:hover {
        background-color: #DEF1EF;
        border-color: rgba(43, 152, 143, .5);
        transform: translateY(-1px);
    }

    /* Active press */
    .custom-album-picker__search-btn:active {
        transform: translateY(0);
    }

    /* Focus ring */
    .custom-album-picker__search-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }

    /* Spin animation (like archive random dice) */
    .custom-album-picker__search-btn.spinning img {
        animation: archiveDiceSpin 0.18s ease;
    }

/* result area: image + details side by side */
.album-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}

.album-suggestion-card {
    position: relative;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .album-suggestion-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }

    .album-suggestion-card img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        display: block;
    }

.album-suggestion-meta {
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-size: .75rem;
}

.album-suggestion-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-suggestion-artist {
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-suggestion-info {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    border: 0px;
    background-color: transparent;
}


/* album cover */
.custom-album-picker__poster--featured {
    flex-shrink: 0;
    width: 210px;
    height: 210px;
    border: 4px solid white;
    box-shadow: 0px 10px 30px -20px;
    overflow: hidden;
    margin-right: 1.4rem;
}

    .custom-album-picker__poster--featured img {
        width: 100%;
        display: block;
    }

.custom-album-picker__title {
    font-family: 'Lato',sans-serif;
    font-size: 1.5rem;
    margin: 0 0 .5rem;
}

.custom-album-picker__links-wrapper a {
    text-decoration: none;
    color: var(--c-accent-primary,#404089);
    font-weight: bold;
}


/* no-results */
.custom-album-picker__no-results {
    font-size: 1rem;
    color: #999;
    margin: 1rem auto;
    text-align: center;
}

.custom-album-picker__prev-btn,
.custom-album-picker__launch-btn {
    padding: .5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.custom-album-picker__prev-btn {
    background: #ddd;
    color: #333;
}

.custom-album-picker__launch-btn {
    background: var(--c-accent-primary,#404089);
    color: #fff;
}

    .custom-album-picker__launch-btn:hover {
        background: #303066;
    }

.custom-album-picker__year {
    opacity: .7;
    margin-left: 5px;
    margin-right: 5px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 10px;
}

.custom-album-picker__wiki-toggle {
    display: block;
    margin: 12px auto 0 auto; /* center horizontally */
    background: none;
    border: none;
    color: #2b988f;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 8px;
    text-align: center;
    margin-bottom: 1rem;
}


/* loader overlay */
.custom-album-picker__loader {
    position: absolute;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 5;
}

    /* visible state */
    .custom-album-picker__loader.visible {
        opacity: 1;
        pointer-events: all;
    }

.custom-album-picker__add-btn {
    padding: .5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: var(--color-primary);
    color: #fff;
    font-weight: bold;
    transition: background .2s ease;
}

    .custom-album-picker__add-btn:hover {
        background: var(--color-primary-dark);
    }


.album-suggestions-header {
    line-height: 1;
}

/* =========================
   ALBUM ACTION BUTTONS
========================= */

.btn-spotify {
    background: #1db954 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: 0 6px 16px rgba(30, 215, 96, 0.35);
}

.btn-google-books {
    background: #4285F4 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.32);
}

    .btn-google-books .material-icons {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .btn-google-books:hover {
        background: #3367d6 !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(66, 133, 244, 0.40);
    }

    .btn-google-books:hover .material-icons {
        animation: queue-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

/* Book picker — "find this book on…" icon row.
   Replaces the old per-source text buttons with a compact circular row
   where each circle is brand-colored and reveals its label via the
   global tooltip engine (tooltip.js, data-tooltip-pos="below"). */
/* Cover placeholder shown when a book has no cover image */
.picker-book-cover-placeholder {
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4f6f9 0%, #e8ecf2 100%);
    border: 1px solid #dde2ea;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8a93a3;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}
.picker-book-cover-placeholder .material-icons {
    font-size: 36px;
    color: #b2bac7;
}
.picker-book-cover-placeholder-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.picker-book-find-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 6px;
    width: 100%;
}
.picker-book-find-icon {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
.picker-book-find-icon .material-icons {
    font-size: 19px;
    line-height: 1;
}
.picker-book-find-img {
    display: block;
    pointer-events: none;
}
.picker-book-find-img--gbooks {
    width: 30px;
    height: 30px;
}
.picker-book-find-img--goodreads {
    width: 22px;
    height: 22px;
}
.picker-book-find-icon:hover {
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
/* Google Books — white tile (SVG carries the brand colors) */
.picker-book-find-icon--gbooks {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.picker-book-find-icon--gbooks:hover {
    background: #f4f4f4;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
}
/* Amazon — navy with orange icon */
.picker-book-find-icon--amazon {
    background: #232F3E;
    box-shadow: 0 4px 10px rgba(35, 47, 62, 0.28);
}
.picker-book-find-icon--amazon .material-icons {
    color: #FF9900;
}
.picker-book-find-icon--amazon:hover {
    background: #131921;
    box-shadow: 0 6px 14px rgba(35, 47, 62, 0.40);
}
/* Goodreads — tan/brown brand palette */
.picker-book-find-icon--goodreads {
    background: #553B08;
    box-shadow: 0 4px 10px rgba(85, 59, 8, 0.28);
}
.picker-book-find-icon--goodreads:hover {
    background: #382110;
    box-shadow: 0 6px 14px rgba(85, 59, 8, 0.40);
}

    .btn-spotify .fab,
    .btn-spotify .material-icons {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .btn-spotify:hover {
        background: #18a84a;
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-spotify:hover .fab,
    .btn-spotify:hover .material-icons {
        animation: spotify-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

.btn-add-queue {
    background: #111 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

    .btn-add-queue .material-icons {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .btn-add-queue:hover {
        background: #222;
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-add-queue:hover .material-icons {
        animation: queue-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

@keyframes queue-icon-pop {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-3px) scale(1.25); }
    65%  { transform: translateY(1px) scale(0.92); }
    100% { transform: translateY(0) scale(1.1); }
}

@keyframes spotify-icon-pop {
    0%   { transform: rotate(0deg) scale(1); }
    35%  { transform: rotate(14deg) scale(1.25); }
    65%  { transform: rotate(-7deg) scale(0.92); }
    100% { transform: rotate(0deg) scale(1.1); }
}

.album-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 5px;
    transition: all 0.18s ease;
}

.album-tracklist li {
    margin-left: -20px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 90%;
}



.artist-album-block {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Caret toggle button */
.alb-card-caret {
    position: absolute;
    bottom: 10px;
    right: 1.25rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 8px 4px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background .15s;
}
.alb-card-caret:hover { background: #e5e7eb; }
.alb-card-caret-label { font-size: 0.72rem; font-weight: 600; color: #6b7280; letter-spacing: 0.02em; }
.alb-card-caret .material-icons {
    font-size: 18px;
    color: #6b7280;
    transition: transform .2s ease;
}
.alb-card-caret.is-open .material-icons { transform: rotate(180deg); }

/* Expand panel */
.alb-card-expand {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}
.alb-card-expand-loading {
    font-size: .8rem;
    color: #9ca3af;
    padding: 8px 0;
}



/* =========================
   ARTIST HEADER BAR
========================= */

.artist-header-bar {
    padding: 14px 16px;
    border-bottom: 1px solid #f5f7fb;
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: start !important;
}

    .artist-header-bar .d-flex.align-items-center {
        align-items: flex-start !important;
    }

.artist-header-img {
    width: 64px !important;
    height: 64px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


.artist-header-bio {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
    padding-right: 1.3em;
}

.artist-sort {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    white-space: nowrap;
}

    .artist-sort small {
        font-size: 0.7rem;
        color: #9aa3ad;
        line-height: 1;
        letter-spacing: 0.02em;
    }


    .artist-sort select {
        min-width: 120px;
    }


#albumSuggestionsGrid,
#albumSuggestionsHeader,
#refreshSuggestionsBtn {
    display: none !important;
}

.explicit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #FEDEDE;
    color: #C74545;
    line-height: 1;
    margin-top: 4px;
}


.album-genre-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}


.album-genre-pill {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    border-radius: 0;
    background: none;
    color: #2b988f;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: normal;
    box-shadow: none;
}
.album-genre-pill + .album-genre-pill::before {
    content: "·";
    color: #cfd6dc;
    font-weight: 700;
    margin: 0 6px;
}




.artist-wiki-link {
    font-size: 0.8em;
    color: #2B988F;
    text-decoration: none;
}

    .artist-wiki-link:hover {
        text-decoration: underline;
    }


/* Artist album paging shimmer */
.artist-albums-shimmer {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 2;
}

.album-shimmer-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #eee;
}

/* Album shimmer boxes (enable shimmer animation) */
.album-shimmer-box {
    position: relative;
    overflow: hidden;
    background: #e5e5e5;
}

    /* Ensure shimmer animation applies */
    .album-shimmer-box.shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer 1.25s infinite;
    }


.artist-popularity {
    width: 100%;
    max-width: 220px;
}

.artist-popularity-bar {
    height: 6px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.artist-popularity-fill {
    height: 100%;
    background: linear-gradient(90deg, #1db954, #1ed760);
    transition: width .4s ease;
}

.artist-popularity-label {
    display: block;
    font-size: .75rem;
    margin-top: 4px;
    color: #1db954;
}


.spotify-btn-shimmer {
    width: 80px;
    height: 32px;
    border-radius: 20px;
    background: linear-gradient( 100deg, #e0e0e0 40%, #f5f5f5 50%, #e0e0e0 60% );
    background-size: 200% 100%;
    animation: shimmerMove 1.2s infinite linear;
}

@keyframes shimmerMove {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/* =====================================================
   MEDIA EXPLORER MODAL — VISUAL CLEANUP (SCOPED)
===================================================== */


#mediaExplorerModal .media-explorer-view-wrap {
    position: relative;
    padding: 0;
}

    /* create visual split without changing markup */
    #mediaExplorerModal .media-explorer-view-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 38%;
        height: 100%;
        background: linear-gradient( to right, rgba(0,0,0,0.55), rgba(0,0,0,0.15) );
        backdrop-filter: blur(18px);
        z-index: 0;
        pointer-events: none;
    }

    /* ensure existing content sits above blur */
    #mediaExplorerModal .media-explorer-view-wrap > * {
        position: relative;
        z-index: 1;
    }



/* =====================================================
   MEDIA EXPLORER AUTOCOMPLETE (SCOPED)
===================================================== */

#mediaExplorerModal .media-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

    #mediaExplorerModal .media-search-row img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        background: #ddd;
        flex-shrink: 0;
    }

    #mediaExplorerModal .media-search-row:hover {
        background: #e5f2f1;
    }

/* =========================
   MEDIA EXPLORER AUTOCOMPLETE
========================= */

#mediaExplorerModal .media-explorer-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: 260px;
    overflow-y: auto;
    z-index: 2147483647;
}

#mediaExplorerModal .media-ac-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: normal;
}

    #mediaExplorerModal .media-ac-row img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        background: #ddd;
    }

    #mediaExplorerModal .media-ac-row:hover,
    #mediaExplorerModal .media-ac-row.active {
        background: #E5F2F1;
    }

/* ======================================================
   Media Explorer Modal — Artist Popularity (ISOLATED)
====================================================== */

.mx-artist-popularity {
    margin-top: 6px;
    max-width: 240px;
}

.mx-artist-popularity-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 4px;
}

    .mx-artist-popularity-head .material-icons {
        font-size: 15px;
        color: #ff6a00;
    }

.mx-artist-popularity-track {
    width: 100%;
    height: 6px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
}

.mx-artist-popularity-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #ff9f40);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ======================================================
   Media Explorer Modal — Inline Popularity (Embedded Parity)
====================================================== */

.mx-artist-popularity-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #666;
}

.mx-artist-popularity-bar {
    width: 70px;
    height: 6px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
}

.mx-artist-popularity-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #ff9f40);
    border-radius: 999px;
}

.mx-artist-popularity-label {
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ======================================================
   Media Explorer Modal — Paginated Album Grid
====================================================== */

.mx-artist-album-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}

/* Desktop modal: full-width stacked blocks, not a card grid */
#mediaExplorerModal .mx-artist-album-grid {
    display: block;
}

.mx-artist-album-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 1rem;
}

.mx-artist-album-card {
    position: relative;
}

/* Restriction overlay for artist-view album cards */
.mx-artist-album-card.mx-album-restricted {
    opacity: 0.45;
}

.mx-album-restricted-badge {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    padding: 2px 4px;
    line-height: 1.4;
    pointer-events: none;
}

/* Album view cover image (replaces inline style="width:180px") */
.mx-album-cover {
    width: 180px;
    border-radius: 10px;
}

/* Media explorer close button (desktop) */
#mediaExplorerModal .album-modal-close-btn {
    top: -20px;
}

/* Media explorer drawer handle (mobile) */
.mx-drawer-handle {
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 12px;
    cursor: pointer;
}

/* Artist image wrapper — provides positioning context for the Spotify badge */
.mx-artist-img-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Spotify badge on artist image */
.mx-artist-spotify-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1db954;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: transform 0.15s ease;
}

    .mx-artist-spotify-badge:hover {
        transform: scale(1.15);
    }


.mx-artist-album-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    margin-bottom: 8px;
}

.mx-artist-album-meta {
    font-size: 0.85rem;
}

.mx-artist-album-title {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    color: #17756D;
    text-decoration: none;
}

    .mx-artist-album-title:hover {
        text-decoration: underline;
    }

.mx-artist-album-year {
    font-size: 0.75rem;
    color: #777;
}


/* ======================================================
   Media Explorer Modal — Album Toolbar + Slider w/ Arrows
====================================================== */

.mx-artist-album-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 8px;
}

.mx-artist-album-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #999;
    text-transform: uppercase;
}

.mx-artist-album-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.mx-artist-album-slider {
    display: flex;
    gap: 14px;
    overflow: hidden;
    padding: 4px 2px 8px;
    flex: 1;
    min-width: 0;
}

.mx-artist-album-card {
    flex: 0 0 auto;
    width: 154px;
    box-sizing: border-box;
    /* Same hover affordance as .mx-grammy__card / .mx-home__card so
       album cards feel identical across the picker, Grammy browser
       and modal. Transparent border in the base reserves the space
       so hover doesn't shift the slider layout; padding keeps the
       hover tint/border off the title text on the sides. */
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color 120ms, transform 120ms, background 120ms;
}
.mx-artist-album-card:hover {
    border-color: #2B988F;
    background: rgba(43, 152, 143, 0.04);
    transform: translateY(-1px);
}

.mx-artist-album-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    margin-bottom: 8px;
}

.mx-artist-album-meta {
    font-size: 0.85rem;
}

.mx-artist-album-title {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    color: #17756D;
    text-decoration: none;
}

    .mx-artist-album-title:hover {
        text-decoration: underline;
    }

.mx-artist-album-year {
    font-size: 0.75rem;
    color: #777;
}

/* ---------- Arrows ---------- */

.mx-artist-album-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;
}

    .mx-artist-album-nav.is-disabled {
        opacity: 0.25;
        pointer-events: none;
    }

    .mx-artist-album-nav:not(.is-disabled):hover {
        transform: translateY(-1px);
    }

    .mx-artist-album-nav .material-icons {
        font-size: 22px;
        color: #333;
    }

    .mx-artist-album-nav.mx-prev {
        margin-right: 8px;
    }

    .mx-artist-album-nav.mx-next {
        margin-left: 8px;
    }

/* =========================================
   Album slider shimmer (modal only)
========================================= */

.mx-album-shimmer {
    pointer-events: none;
}

.mx-album-shimmer-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: linear-gradient( 90deg, #e6e6e6 25%, #f2f2f2 37%, #e6e6e6 63% );
    background-size: 400% 100%;
    animation: mx-shimmer 1.2s ease infinite;
    gap: 6px;
}

.mx-album-shimmer-lines {
    margin-top: 10px;
}

.mx-album-shimmer-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #e6e6e6 25%, #f2f2f2 37%, #e6e6e6 63% );
    background-size: 400% 100%;
    animation: mx-shimmer 1.2s ease infinite;
    margin-bottom: 6px;
}

    .mx-album-shimmer-line.short {
        width: 60%;
    }

@keyframes mx-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* =========================================
   Artist album sort control (modal)
========================================= */

.mx-artist-album-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

    .mx-artist-album-sort label {
        margin: 0;
        white-space: nowrap;
    }

    .mx-artist-album-sort select {
        min-width: 140px;
    }

/* =========================================
   Artist album toolbar (modal)
========================================= */

.mx-artist-album-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mx-artist-album-heading {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #444;
}

.mx-artist-album-sort {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ===============================
   MODAL: Add to Queue button
   =============================== */

.btn-add-to-queue-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: #111 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    border: none;
    font-size: 0.9rem;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

    /* Icon sizing — match .btn-fav-album-modal so the three modal buttons
       are visually the same size. */
    .btn-add-to-queue-modal .material-icons {
        font-size: 1.1em;
        line-height: 1;
        display: inline-block;
        transition: transform 0.15s ease;
    }

    /* Hover state — matches embedded picker */
    .btn-add-to-queue-modal:hover {
        background: #222 !important;
        color: #fff !important;
        transform: translateY(-1px);
        border-color: #222;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
    }

    .btn-add-to-queue-modal:hover .material-icons {
        animation: queue-icon-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

    /* Active / pressed */
    .btn-add-to-queue-modal:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
    }

    /* Disabled (safety / future-proofing) */
    .btn-add-to-queue-modal:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }


/* ================================
   Add to Favorites Button
================================ */
@keyframes fav-heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1.15); }
}

.btn-fav-album-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: #ec4899 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    border: none !important;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.btn-fav-album-modal .material-icons {
    transition: transform 0.15s ease;
    font-size: 1.1em;
    line-height: 1;
}

.btn-fav-album-modal:hover {
    background: #db2777 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.42);
}

.btn-fav-album-modal:hover .material-icons {
    animation: fav-heart-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.btn-fav-album-modal.favorited {
    background: #db2777 !important;
    color: #fff !important;
}

.btn-fav-album-modal.favorited:hover {
    background: #be185d !important;
}

.btn-fav-album-modal:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.30);
}

.btn-fav-album-modal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ================================
   Spotify Embed Shimmer
================================ */

.spotify-preview {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .spotify-preview.loaded .spotify-embed-shimmer {
        opacity: 0;
        pointer-events: none;
        box-shadow: none !important;
        background: transparent !important;
    }

.spotify-embed-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient( 90deg, #eee 25%, #f5f5f5 37%, #eee 63% );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    z-index: 2;
    box-shadow: none;
}



.spotify-preview iframe {
    position: relative;
    z-index: 2;
}

/* Loaded state */
.spotify-preview.loaded .spotify-embed-shimmer {
    display: none;
}

.spotify-preview.loaded iframe {
    opacity: 1;
}

@keyframes spotify-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}


/* Random dice roll animation — added by JS for ~700ms when the user
   clicks a Random button. Two full rotations with a soft pop midway. */
@keyframes dice-roll {
    0%   { transform: rotate(0deg)   scale(1); }
    35%  { transform: rotate(270deg) scale(1.25); }
    65%  { transform: rotate(540deg) scale(1.25); }
    100% { transform: rotate(720deg) scale(1); }
}
.material-icons.is-dice-rolling {
    display: inline-block;
    animation: dice-roll 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ===============================
   MODAL: Remove from Queue button
   =============================== */

.btn-remove-from-queue-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background-color: #7a1f1f !important; /* Bootstrap danger red */
    color: #fff !important;
    border: 0px !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 16px rgba(122, 31, 31, 0.35);
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

    /* Icon sizing — match the other modal buttons */
    .btn-remove-from-queue-modal .material-icons {
        font-size: 1.1em;
        line-height: 1;
        display: inline-block;
        transition: transform 0.15s ease;
    }

    /* Hover — match add/spotify lift */
    .btn-remove-from-queue-modal:hover {
        background: #922525 !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(122, 31, 31, 0.45);
    }

    .btn-remove-from-queue-modal:hover .material-icons {
        animation: delete-icon-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

    /* Active / pressed */
    .btn-remove-from-queue-modal:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(122, 31, 31, 0.35);
    }

    /* Disabled (future-proofing) */
    .btn-remove-from-queue-modal:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

@keyframes delete-icon-shake {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(-12deg) scale(1.18); }
    50%  { transform: rotate(10deg) scale(1.18); }
    75%  { transform: rotate(-6deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1.1); }
}


.album-removed-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #dc3545;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    opacity: 0;
    transition: all .25s ease;
    z-index: 9999;
}

    .album-removed-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }


.btn-add-queue.btn-danger {
    background-color: #dc3545 !important; /* Bootstrap danger red */
    color: #fff !important;
    border: 0px !important;
}

    .btn-add-queue.btn-danger:hover {
        background-color: #bb2d3b;
    }

    .btn-add-queue.btn-danger:active,
    .btn-add-queue.btn-danger:focus {
        background-color: #a52834;
        border-color: #a52834;
        box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
    }


/* =========================
   QUEUE ZEBRA STRIPING
========================= */

.queue-item:nth-child(odd) {
    background-color: #ffffff;
}

.queue-item:nth-child(even) {
    background-color: #f5f6f8; /* very light grey */
}

/* Keep hover feeling interactive */
.queue-item:hover {
    background-color: #e9ecef;
}


/* ==========================================
   CREATE GROUP ALBUM SHIMMER
========================================== */

.cg-shimmer-cover {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #eeeeee 25%, #f6f6f6 37%, #eeeeee 63% );
    background-size: 400% 100%;
    animation: cgShimmer 1.2s ease-in-out infinite;
}

.cg-shimmer-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #eeeeee 25%, #f6f6f6 37%, #eeeeee 63% );
    background-size: 400% 100%;
    animation: cgShimmer 1.2s ease-in-out infinite;
}

@keyframes cgShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}


/* =========================
   FAVORITE TOAST
========================= */

.favorite-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #2B988F;
    color: #fff;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
}

    .favorite-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .favorite-toast.removing {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }

/* =========================
   ARTIST HEADER STAR ALIGN
========================= */

.artist-header-bar h3 {
    display: flex;
    align-items: center;
}

.artist-header-bar .favorite-artist-star {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 8px; /* micro-adjust for visual center */
    color: #ff4d8d; /* soft pink */
}


/* =========================
   Album Favorite Heart
========================= */

.favorite-album-heart {
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

/* Inline album-detail heart — sits next to the artist link on the
   album page (modal + embedded picker + wizard). Toggles the artist
   favourite (the album already has its own button below the cover).
   Same shape across both .favorite-artist-star and the legacy
   .favorite-album-heart classes so swapping either works. */
.favorite-artist-star.album-detail-heart,
.favorite-album-heart.album-detail-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0; background: transparent; box-shadow: none;
    color: #c5c5c5;
    cursor: pointer;
    font-size: 16px !important;
    vertical-align: -3px;
    line-height: 1;
}
.favorite-artist-star.album-detail-heart:hover {
    transform: scale(1.15);
    color: #ff4d8d;
}
.favorite-artist-star.album-detail-heart.favorited {
    color: #ff4d8d;
}
.favorite-album-heart.album-detail-heart:hover {
    transform: scale(1.15);
    background: transparent; box-shadow: none;
    color: #ff4d8d;
}
.favorite-album-heart.album-detail-heart.favorited {
    color: #ff4d8d;
    background: transparent;
    box-shadow: none;
}
.favorite-album-heart.album-detail-heart.favorited:hover {
    transform: scale(1.12);
    box-shadow: none;
}
.favorite-album-heart.album-detail-heart.is-popping {
    animation: album-detail-heart-pop 0.32s ease;
}
@keyframes album-detail-heart-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

    /* Hover (not favorited yet) */
    .favorite-album-heart:hover {
        transform: scale(1.15);
        background: rgba(0, 0, 0, 0.75);
        box-shadow: 0 0 10px rgba(255, 80, 80, 0.45);
    }

    /* Favorited state */
    .favorite-album-heart.favorited {
        color: #ff4d8d; /* soft pink */
        background: rgba(255,255,255,0.95);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.15);
    }

        /* Favorited + hover */
        .favorite-album-heart.favorited:hover {
            transform: scale(1.12);
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.2);
        }


/* ==========================================
   SLIDER ALBUM FAVORITE HEART
========================================== */

.mx-artist-album-card {
    position: relative;
}

/* ================================
   Floating Album Heart (Isolated)
================================ */

.mx-album-favorite {
    position: absolute;
    top: 8px;
    right: 8px;
    /* HARD RESET to defeat .material-icons bleed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px;
    height: 34px;
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    color: #888;
    cursor: pointer;
    z-index: 5;
    transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

    /* prevent weird baseline alignment */
    .mx-album-favorite.material-icons {
        display: flex !important;
    }

    /* hover lift */
    .mx-album-favorite:hover {
        transform: scale(1.15);
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 10px rgba(255, 80, 80, 0.45);
    }

    /* favorited */
    .mx-album-favorite.favorited {
        color: #ff4d8d;
        background: rgba(255,255,255,0.95);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.15);
    }

    /* subtle press */
    .mx-album-favorite:active {
        transform: scale(0.95);
    }

    /* pop when an album is favorited */
    .mx-album-favorite.is-popping {
        animation: fav-heart-pop 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }

/* Artist-slider album heart: smaller and pulled in from the corner
   so it doesn't crowd the edge. Applies everywhere the artist slider
   renders — queue picker and the media-explorer modal alike. */
.mx-artist-album-card .mx-album-favorite {
    width: 26px;
    height: 26px;
    top: 10px;
    right: 10px;
    font-size: 14px !important;
}

/* =====================================================
   EMBEDDED PICKER — FAVORITES + DICE + FAVORITE BUTTONS
   Clean consolidated block. No duplicates.
===================================================== */

/* ===============================
   DICE BUTTON
================================= */

.custom-album-picker__data #rollDiceBtnTop {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    background: #ffffff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

    .custom-album-picker__data #rollDiceBtnTop:hover {
        background: #DEF1EF;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(43,152,143,0.25);
    }

    .custom-album-picker__data #rollDiceBtnTop:active {
        transform: scale(0.92);
    }

    .custom-album-picker__data #rollDiceBtnTop .material-icons {
        font-size: 20px;
    }

    .custom-album-picker__data #rollDiceBtnTop.spinning .material-icons {
        animation: rtDiceSpin 0.3s ease;
    }

@keyframes rtDiceSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===============================
   FAVORITE HEART (ALBUM)
================================= */

.custom-album-picker__data .favorite-album-heart {
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

    .custom-album-picker__data .favorite-album-heart:hover {
        transform: scale(1.15);
        background: rgba(0,0,0,0.75);
        box-shadow: 0 0 12px rgba(255,80,80,0.4);
    }

    .custom-album-picker__data .favorite-album-heart.favorited {
        color: #ff4d8d !important;
        background: rgba(255,255,255,0.95);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.15);
    }

/* ===============================
   FAVORITE STAR (ARTIST)
================================= */

.custom-album-picker__data .favorite-artist-star {
    color: #aaa;
    transition: transform 0.15s ease, color 0.15s ease;
}

    .custom-album-picker__data .favorite-artist-star:hover {
        transform: scale(1.15);
        color: #ff4d8d;
    }

    .custom-album-picker__data .favorite-artist-star.favorited {
        color: #ff4d8d;
    }

/* ===============================
   FAVORITES VIEW
================================= */

.rtFavs {
    width: 100%;
}

.rtFavs__section {
    margin-bottom: 12px;
}

/* Primary Favorites Header (Browse Favorites) */
.rtFavs__title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 22px;
    color: var(--c-accent-primary);
}

/* Subheader wrapper */
.rtFavs__subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.rtFavs__subheader-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.rtFavs__sort-select {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.9);
    color: rgba(0,0,0,0.65);
    cursor: pointer;
    appearance: auto;
}
.rtFavs__sort-select:focus {
    outline: none;
    border-color: #2B988F;
}

/* Subheaders (Artists / Albums) */
.rtFavs__section h4 {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2B988F;
}

/* Inline edit link */
.rtFavs__edit-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(0,0,0,0.65) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

    .rtFavs__edit-link:hover {
        text-decoration: underline;
    }

/* GRID — 6 equal columns, one row */
.rtFavs__grid {
    display: grid;
    gap: 12px;
    width: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* CARD */
.rtFavs__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
    transition: transform 0.18s ease;
}

/* IMAGE WRAPPER */
.rtFavs__imgWrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

/* Artists circular override */
#mxFavArtists .rtFavs__imgWrap {
    border-radius: 50% !important;
}

/* Artists circular override */
#rtFavArtists .rtFavs__imgWrap {
    border-radius: 50% !important;
}

/* Authors / Directors / Actors — circle thumbs (people-like). */
#rtFavAuthors .rtFavs__imgWrap,
#rtFavDirectors .rtFavs__imgWrap,
#rtFavActors .rtFavs__imgWrap {
    border-radius: 50% !important;
}

/* Books / Films — portrait covers, mirrors how books & films render
   elsewhere (2:3 aspect ratio). */
#rtFavBooks .rtFavs__imgWrap,
#rtFavFilms .rtFavs__imgWrap {
    aspect-ratio: 2 / 3;
}

/* Placeholder icon shown when an image fails to load (or there's no
   image_url). Fills the wrapper, centered, neutral background. */
.rtFavs__imgWrap .rtFavs__placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #ececec;
    color: #888;
    font-size: 42px;
}

.rtFavs__imgWrap-artist {
    border-radius: 50% !important;
}

/* Subtle lift + glow */
.rtFavs__card:hover .rtFavs__imgWrap {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.rtFavs__imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}

/* smooth hover zoom */
.rtFavs__card:hover .rtFavs__imgWrap img {
    transform: scale(1.06);
}
/* LABEL */
.rtFavs__label {
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Turn label green when card is hovered */
.rtFavs__card:hover .rtFavs__label {
    color: #2B988F;
}

/* Artist credit under album label */
.rtFavs__artist {
    margin-top: 2px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtFavs__artist-link {
    font-size: 0.72rem;
    color: #6c757d;
    text-decoration: none;
    cursor: pointer;
}

.rtFavs__artist-link:hover {
    color: #2B988F;
    text-decoration: underline;
}

/* NAV BUTTON */

.rtFavs__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.custom-album-picker__data .rtFavs__chevron {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .custom-album-picker__data .rtFavs__chevron:hover {
        background: #DEF1EF;
        transform: translateY(-1px);
    }

/* ===============================
   FAVORITES — FLOATING NAV
================================= */

.rtFavs__section {
    position: relative;
}

.rtFavs__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none; /* allow clicks only on buttons */
    padding: 0 6px;
}

.rtFavs__chevron {
    pointer-events: all;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

    .rtFavs__chevron:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }

    .rtFavs__chevron:disabled {
        opacity: .25;
        cursor: default;
    }

/* ===============================
   FAVORITES PAGE SHIMMER
================================= */

.rtFavs__shimmer {
    display: grid;
    gap: 20px;
    width: 100%;
}

.rtFavs__shimmer-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient( 90deg, #eeeeee 25%, #f5f5f5 37%, #eeeeee 63% );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 8px; /* default album style */
}

/* Artist shimmer = circle */
#rtFavArtists .rtFavs__shimmer-box {
    border-radius: 50%;
}

/* Album shimmer = rounded square */
#rtFavAlbums .rtFavs__shimmer-box {
    border-radius: 8px;
}
@keyframes favShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ===============================
   FAVORITES EMPTY STATE
================================= */

.rtFavs__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 24px;
}

.rtFavs__empty-icon {
    font-size: 2.6rem;
    color: #d1d5db;
    margin-bottom: 14px;
    display: block;
}

.rtFavs__empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.rtFavs__empty-body {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 300px;
}

.rtFavs__empty-link {
    color: var(--c-accent-primary, #2B988F);
    font-weight: 600;
    text-decoration: none;
}

    .rtFavs__empty-link:hover {
        text-decoration: underline;
    }

.rtFavs__empty-heart {
    font-size: 0.9em !important;
    vertical-align: -2px;
    color: #e05a7a;
}

/* Per-section empty (one section has content, the other doesn't) */
.rtFavs__section-empty {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    padding: 6px 0 4px;
}

/* ===============================
   GLOBAL CUSTOM TOOLTIP
================================= */

.rt-tooltip {
    position: fixed;
    /* Must beat dash-mobile.css's `.modal { z-index: 10000 !important; }`
       override so tooltips render above the media-explorer modal. */
    z-index: 100000;
    background: #1e293b;
    color: #fff;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

    .rt-tooltip.show {
        opacity: 1;
        transform: translateY(0);
    }
/* =========================
   CUSTOM ALBUM PICKER — REFRESH BUTTON (MATCH PILLS)
========================= */

.custom-album-picker__refresh-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    border-top-color: rgb(219, 231, 230);
    border-right-color: rgb(219, 231, 230);
    border-bottom-color: rgb(219, 231, 230);
    border-left-color: rgb(219, 231, 230);
    background: #fff;
    background-color: rgb(255, 255, 255);
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

    .custom-album-picker__refresh-btn:hover {
        background: #f5f7fb;
    }

    .custom-album-picker__refresh-btn:active {
        transform: translateY(1px);
    }

    .custom-album-picker__refresh-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        display: block;
        transition: transform 0.25s ease;
    }



/* Dice spin — supports embedded (#rollDiceBtnTop) + Media Explorer modal (#mediaExplorerDiceBtn)
   Also supports either the BUTTON getting .spinning or the ICON getting .spinning */
#rollDiceBtnTop.spinning .material-icons,
#mediaExplorerDiceBtn.spinning .material-icons,
#rollDiceBtnTop .material-icons.spinning,
#mediaExplorerDiceBtn .material-icons.spinning {
    animation: rtDiceSpin 0.18s linear;
}

.modal-body {
    border-radius: 8px !important;
}


/* =====================================================
   MEDIA EXPLORER MODAL — FAVORITES + HEART COLOR FIXES
   (Scoped so nothing else gets touched)
===================================================== */

#mediaExplorerModal #mediaExplorerFavoritesBtn:hover,
#mediaExplorerModal #mediaExplorerDiceBtn:hover {
    background: #f5f7fb;
}


#mediaExplorerModal .favorite-album-heart {
    position: absolute;
    top: 8px;
    right: 25px;
    z-index: 5;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px;
    height: 36px;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* The inline album-detail heart that sits next to the artist name is
   NOT the floating top-right circle treatment above — override the
   modal-scoped rule so it reads as a clean inline icon. Specificity:
   id+class+class beats the id+class default. */
#mediaExplorerModal .favorite-artist-star.album-detail-heart {
    position: static;
    width: auto; height: auto;
    z-index: auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    box-shadow: none;
    margin-left: 6px;
    padding: 0;
    color: #c5c5c5;
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: -3px;
}
#mediaExplorerModal .favorite-artist-star.album-detail-heart:hover {
    transform: scale(1.15);
    color: #ff4d8d;
}
#mediaExplorerModal .favorite-artist-star.album-detail-heart.favorited {
    color: #ff4d8d;
}

#mediaExplorerModal .favorite-album-heart.album-detail-heart {
    position: static;
    top: auto; right: auto;
    width: auto; height: auto;
    z-index: auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    margin-left: 6px;
    padding: 0;
    color: #c5c5c5;
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: -3px;
}
#mediaExplorerModal .favorite-album-heart.album-detail-heart:hover {
    transform: scale(1.15);
    background: transparent;
    box-shadow: none;
    color: #ff4d8d;
}
#mediaExplorerModal .favorite-album-heart.album-detail-heart.favorited {
    color: #ff4d8d !important;
    background: transparent;
    box-shadow: none;
}

    #mediaExplorerModal .favorite-album-heart:hover {
        transform: scale(1.1);
    }

    #mediaExplorerModal .favorite-album-heart.favorited {
        color: #ff4d8d !important;
    }

    #mediaExplorerModal .mx-modal-fav.favorited {
        color: #ff4d8d !important;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 6px 18px rgba(224,36,94,.25), 0 0 6px rgba(224,36,94,.18);
    }

#mediaExplorerModal .favorite-artist-star {
    color: #aaa;
    transition: transform 0.15s ease, color 0.15s ease;
}

    #mediaExplorerModal .favorite-artist-star:hover {
        transform: scale(1.15);
        color: #ff4d8d;
    }

    #mediaExplorerModal .favorite-artist-star.favorited {
        color: #ff4d8d;
    }

/* Favorites view layout */
#mediaExplorerModal .mxFavs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

#mediaExplorerModal .mxFavs__title {
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #2B988F;
}

#mediaExplorerModal .mxFavs__count {
    font-size: 0.8rem;
    color: #9aa3ad;
    font-weight: 600;
}

#mediaExplorerModal .mxFavs__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

#mediaExplorerModal .mxFavs__grid--artists {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

#mediaExplorerModal .mxFavs__card {
    cursor: pointer;
    user-select: none;
}

#mediaExplorerModal .mxFavs__imgWrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    transition: transform .18s ease, box-shadow .18s ease;
}

#mediaExplorerModal .mxFavs__imgWrap--circle {
    border-radius: 50%;
}

#mediaExplorerModal .mxFavs__card:hover .mxFavs__imgWrap {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

#mediaExplorerModal .mxFavs__imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#mediaExplorerModal .mxFavs__label {
    margin-top: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mediaExplorerModal .mxFavs__sub {
    margin-top: 2px;
    font-size: 0.78rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =================================================
   MOBILE QUEUE TAB OVERRIDES
   Scoped to #pane-queue so they only apply on the
   mobile layout without needing a breakpoint.
================================================= */

/* ── Suggestion grid: single-column list rows ── */
#pane-queue .album-suggestion-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}
#pane-queue .album-suggestion-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: none !important;
}
#pane-queue .album-suggestion-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
#pane-queue .album-suggestion-card img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}
#pane-queue .album-suggestion-meta {
    position: static !important;
    background: transparent !important;
    flex: 1 !important;
    width: auto !important;
    padding: 0 10px !important;
    color: #212529 !important;
    min-width: 0 !important;
}
#pane-queue .album-suggestion-title { color: #212529 !important; font-size: 0.83rem !important; }
#pane-queue .album-suggestion-artist { color: #6b7280 !important; font-size: 0.75rem !important; opacity: 1 !important; }
#pane-queue .album-suggestion-info {
    position: static !important;
    flex-shrink: 0 !important;
    margin: 0 10px 0 0 !important;
    top: auto !important;
    right: auto !important;
}


/* ── Loader: full-page overlay on mobile ── */
#pane-queue .custom-album-picker__loader {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
}

#pane-queue .rtFavs__label {
    font-size: 0.7rem !important;
    margin-top: 5px !important;
}

@media (max-width: 991.98px) {

/* ── Media Explorer: bottom sheet (mobile + tablet) ──
   All four media modals (music/#mediaExplorerModal, film/#filmExplorerModal,
   TV/#tvExplorerModal, book/#bookExplorerModal) share identical Bootstrap
   markup (.modal-dialog.modal-lg.modal-dialog-centered > .modal-content >
   .album-modal-close-btn + .album-info-modal-body > .mx-drawer-handle), so
   one selector list drives all of them — this used to only cover the music
   modal (plus book, but only on dashboard.php via dash-mobile.css), which is
   why film/TV opened centered with Bootstrap's default content-driven
   height instead of as a bottom sheet. */

  #mediaExplorerModal .modal-dialog,
  #filmExplorerModal .modal-dialog,
  #tvExplorerModal .modal-dialog,
  #bookExplorerModal .modal-dialog {
    position: fixed !important;
    bottom: var(--mnav-clearance) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Backdrop must sit BELOW the tab bar (z 9000) so the tab bar reads as
     undimmed and in front, like the other mobile modals */
  body:has(#mediaExplorerModal.show) .modal-backdrop,
  body:has(#filmExplorerModal.show) .modal-backdrop,
  body:has(#tvExplorerModal.show) .modal-backdrop,
  body:has(#bookExplorerModal.show) .modal-backdrop {
    z-index: 8000 !important;
  }

  /* Kill Bootstrap's default modal-content border (the semi-transparent
     edge that bleeds through the inline background:transparent) */
  #mediaExplorerModal .modal-content,
  #filmExplorerModal .modal-content,
  #tvExplorerModal .modal-content,
  #bookExplorerModal .modal-content {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Slide-up animation */
  #mediaExplorerModal.fade .modal-dialog,
  #filmExplorerModal.fade .modal-dialog,
  #tvExplorerModal.fade .modal-dialog,
  #bookExplorerModal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #mediaExplorerModal.show .modal-dialog,
  #filmExplorerModal.show .modal-dialog,
  #tvExplorerModal.show .modal-dialog,
  #bookExplorerModal.show .modal-dialog {
    transform: none;
  }

  /* White box: rounded top corners, scrollable. Cap the height so the
     drawer handle always has room at the top of the viewport — long album
     details scroll inside the sheet rather than pushing the handle off
     screen. The cap accounts for the 62px tab bar so the visible top
     buffer stays consistent regardless of content length. */
  #mediaExplorerModal .album-info-modal-body,
  #filmExplorerModal .album-info-modal-body,
  #tvExplorerModal .album-info-modal-body,
  #bookExplorerModal .album-info-modal-body {
    border-radius: 20px 20px 0 0 !important;
    max-height: calc(100dvh - 78px - var(--mnav-clearance));
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 12px 12px 74px !important;
    transition: max-height 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Compact while loader is visible — sheet stays small at bottom */
  #mediaExplorerModal.mx-is-loading .album-info-modal-body {
    max-height: 220px !important;
  }

  /* Content slides up when injected */
  #mediaExplorerModal [data-media-view] > * {
    animation: mxContentIn 0.32s ease 0.08s both;
  }
  @keyframes mxContentIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Force-hide close button — display:flex !important in style.css beats d-none */
  #mediaExplorerModal .album-modal-close-btn,
  #filmExplorerModal .album-modal-close-btn,
  #tvExplorerModal .album-modal-close-btn,
  #bookExplorerModal .album-modal-close-btn {
    display: none !important;
  }

  /* Drawer handle */
  #mediaExplorerModal .mx-drawer-handle,
  #filmExplorerModal .mx-drawer-handle,
  #tvExplorerModal .mx-drawer-handle,
  #bookExplorerModal .mx-drawer-handle {
    width: 44px;
    height: 5px;
    margin-bottom: 14px;
  }

  /* ── Search bar reflow (mobile) ──────────────────────────────────────
     Target layout:
        row 1 = [back][home][random][favorites][grammys]
        row 2 = [search input][type dropdown]
     The back/home buttons + action pills live in two different wrapper
     rows (.picker-search-row = back/home/input; .album-type-switch =
     dropdown/pills), so we collapse BOTH wrappers with display:contents to
     make every control a direct flex child of the search bar, then order
     them. A full-width 0-height ::after (order 4) splits the button row
     from the search row. !important is required because the base (non-mobile)
     rules for these selectors appear LATER in this file and would otherwise
     win on source order. */
  .custom-album-picker__search-bar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 5px; /* row-gap / column-gap — tight columns so the 5 buttons fit */
    padding: 10px 14px;
    position: relative; /* anchor the autocomplete dropdown below the bar */
  }
  .custom-album-picker__search-bar .picker-search-row,
  .custom-album-picker__search-bar .album-type-switch {
    display: contents !important;
  }
  /* Line break between the button row (1-3) and the search row (5-6) */
  .custom-album-picker__search-bar::after {
    content: "";
    order: 4;
    flex: 1 0 100%;
    height: 0;
  }
  /* Row 1 — buttons */
  .custom-album-picker__search-bar .picker-back-btn { order: 1 !important; }
  .custom-album-picker__search-bar .picker-home-btn { order: 2 !important; }
  .custom-album-picker__search-bar .custom-album-picker__refresh-btn { order: 3 !important; }
  /* Row 2 — search input + type dropdown */
  .custom-album-picker__search-bar .picker-search-row .custom-album-picker__input,
  .custom-album-picker__search-bar .custom-album-picker__input {
    order: 5 !important;
    flex: 1 1 0 !important;       /* basis 0 so the dropdown stays on the same line */
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .custom-album-picker__search-bar .fp-type-dd,
  .custom-album-picker__search-bar .album-type-switch > .album-type-pill[data-type] {
    order: 6 !important;
    flex: 0 0 auto !important;
  }
  .custom-album-picker__search-bar .album-type-slider { display: none !important; }

  /* Back/home: always present on mobile (left of Random), but dimmed and
     inert when the picker can't act on them — the JS leaves the
     .is-visible class off on the home/landing view, so home reads as
     disabled while you're home and back while there's nowhere to go. */
  /* Match the action pills' height/shape so the whole row 1 is uniform:
     same padding, icon size, border + pill radius, content-sized (not a
     fixed 30px circle). */
  .custom-album-picker__search-bar .picker-back-btn,
  .custom-album-picker__search-bar .picker-home-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .custom-album-picker__search-bar .picker-back-btn .material-icons,
  .custom-album-picker__search-bar .picker-home-btn .material-icons {
    font-size: 13px !important;
  }
  .custom-album-picker__search-bar .picker-back-btn:not(.is-visible),
  .custom-album-picker__search-bar .picker-home-btn:not(.is-visible) {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }

  /* Action pills KEEP their text labels, just shrunk so all five row-1
     buttons (back + home + the three pills) fit on a single line. */
  .custom-album-picker__search-bar .picker-btn-label { display: inline !important; }
  .custom-album-picker__search-bar .custom-album-picker__refresh-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    border: 1px solid #d6dde6 !important;
    background: #ffffff !important;
    color: #555 !important;
    font-size: 0.6rem !important;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .custom-album-picker__search-bar .custom-album-picker__refresh-btn .material-icons {
    font-size: 13px !important;
    line-height: 1;
    flex-shrink: 0;
  }
  /* Type dropdown / book-author toggle pills (row 2, beside the input) */
  .custom-album-picker__search-bar .album-type-switch > .album-type-pill[data-type] {
    font-size: 0.72rem;
    padding: 6px 9px;
    gap: 4px;
  }
  .custom-album-picker__search-bar .album-type-switch > .album-type-pill[data-type] .material-icons {
    font-size: 15px;
  }
  .custom-album-picker__search-bar .fp-type-dd__toggle {
    padding: 6px 9px;
    font-size: 0.74rem;
  }
  /* The type dropdown sits at the right edge of the search bar on mobile, so
     anchor its menu to the right and let it open leftward — otherwise the
     220px panel (left:0 by default) runs off the right side of the screen. */
  .custom-album-picker__search-bar .fp-type-dd__menu {
    left: auto !important;
    right: 0 !important;
  }

  /* ── Album detail: compact two-column layout on mobile ──
     Small cover + action buttons on the LEFT, title / meta / tracklist in
     the column right BESIDE it (not stacked underneath). Applies to both
     the media-explorer modal and the embedded queue picker. !important is
     needed because the base rule (embedded-pick-album-home.css) loads from a
     later stylesheet and would otherwise win on source order. */
  .queue-album-detail__body {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .queue-album-detail__cover-col {
    flex: 0 0 130px !important;
    max-width: 130px !important;
  }
  /* basis 0 (not auto) so the info column is sized to the remaining space
     rather than its content width — otherwise a long tracklist makes the
     body overflow and the modal's overflow-x:hidden clips this column. */
  .queue-album-detail__info-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* Drop the leading icons on the Add/Remove-queue and Favorite buttons on
     mobile — in the narrow cover column the icon makes them look bulky. */
  .queue-album-detail__add-btn .material-icons,
  .queue-album-detail__fav-btn .material-icons {
    display: none !important;
  }
  /* Favorite button → short "Favorite" / "Unfavorite" labels. The bare text
     node ("Add to Favorites" / "Remove Favorite") is collapsed with
     font-size:0 and the shorter label is supplied via ::after so it can vary
     by state (.favorited). Scoped to .btn-fav-album-modal so the sibling
     Remove-from-Queue button (same layout class) keeps its own text. */
  .queue-album-detail__fav-btn.btn-fav-album-modal {
    font-size: 0 !important;
  }
  .queue-album-detail__fav-btn.btn-fav-album-modal::after {
    content: "Favorite";
    font-size: 0.8rem;
    font-weight: 600;
  }
  .queue-album-detail__fav-btn.btn-fav-album-modal.favorited::after {
    content: "Unfavorite";
  }
  /* Remove-from-Queue button → just "Remove", no icon. The modal renders it
     as .btn-remove-from-queue-modal, the embedded picker as
     .queue-album-detail__remove-btn. Both always mean "remove" (add/remove
     are separate buttons, re-rendered per state), so a static label is safe. */
  .queue-album-detail__remove-btn .material-icons,
  .btn-remove-from-queue-modal .material-icons {
    display: none !important;
  }
  .queue-album-detail__remove-btn,
  .btn-remove-from-queue-modal {
    font-size: 0 !important;
  }
  .queue-album-detail__remove-btn::after,
  .btn-remove-from-queue-modal::after {
    content: "Remove";
    font-size: 0.8rem;
    font-weight: 600;
  }
  /* "Open in Spotify" → a compact green "Spotify" button (no icon). */
  .queue-album-detail__spotify-btn {
    font-size: 0 !important;
    background: #1DB954 !important;
    border-color: #1DB954 !important;
    color: #ffffff !important;
  }
  .queue-album-detail__spotify-btn .material-icons {
    display: none !important;
  }
  .queue-album-detail__spotify-btn::after {
    content: "Spotify";
    font-size: 0.8rem;
    font-weight: 700;
  }
  /* ── Album page action buttons: compact flex instead of full-width stacked grid ── */
  .mx-album-actions-sm {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .mx-album-actions-sm .btn {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
    flex: 1 1 auto;
  }
  .mx-album-actions-sm .btn .material-icons {
    font-size: 0.9em;
  }

  /* ── Artist header: override display:grid with block so layout adapts ── */
  #mediaExplorerModal .artist-header-bar {
    display: block !important;
    padding: 0 0 12px;
  }
  #mediaExplorerModal .artist-header-bar h3 {
    font-size: 1rem;
  }
  /* Bio: clamp to 3 lines */
  #mediaExplorerModal .artist-header-bio {
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #mediaExplorerModal .artist-wiki-link {
    display: block;
    margin-top: 4px;
  }

  /* ── Album toolbar: tighten ── */
  #mediaExplorerModal .mx-artist-album-toolbar,
  #album-data .mx-artist-album-toolbar {
    padding: 4px 0 !important;
  }

  /* ── Album grid: mobile uses blocks, no grid needed ── */
  #mediaExplorerModal .mx-artist-album-grid {
    display: block;
  }

  /* ── Album slider: 2 full covers always fit, never clipped. Slider
     gap is 14px, plus a small safety margin so a sub-pixel rounding
     can't push the second card out of view. The JS page size is also
     dropped to 2 on mobile so arrows advance exactly the visible
     window. Applies to the media-explorer modal AND the embedded
     album picker on the queue tab — both share the .mx-artist-album-*
     class set. ── */

  /* Modal — flex math against the modal body works fine. */
  #mediaExplorerModal .mx-artist-album-slider {
    overflow: hidden;
    padding: 4px 0 8px;
    gap: 12px;
  }
  #mediaExplorerModal .mx-artist-album-slider .mx-artist-album-card,
  #mediaExplorerModal .mx-artist-album-slider .mx-album-shimmer {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #mediaExplorerModal .mx-artist-album-slider .mx-artist-album-cover {
    width: 100% !important;
    height: auto !important;
  }
  #mediaExplorerModal .mx-artist-album-nav {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  #mediaExplorerModal .mx-artist-album-nav .material-icons { font-size: 18px; }
  #mediaExplorerModal .mx-artist-album-nav.mx-prev { margin-right: 4px; }
  #mediaExplorerModal .mx-artist-album-nav.mx-next { margin-left: 4px; }

  /* ── Embedded pickers (queue tab + create-club): mirror the working
     media-explorer modal layout exactly. slider-wrap stays as a flex
     row with arrows as flex children; slider is flex:1 with min-width:0
     so cards can shrink. Cards are 50% - 6px each so 2 + 12px gap fits
     the slider's available width perfectly. ── */
  #embeddedAlbumPicker,
  #cgEmbeddedAlbumPicker,
  #album-data {
    overflow-x: hidden;
    max-width: 100vw;
  }
  #embeddedAlbumPicker .custom-album-picker__data,
  #cgEmbeddedAlbumPicker .custom-album-picker__data,
  #album-data {
    min-width: 0;
    max-width: 100%;
  }
  #embeddedAlbumPicker .mx-artist-album-slider-wrap,
  #cgEmbeddedAlbumPicker .mx-artist-album-slider-wrap,
  #album-data .mx-artist-album-slider-wrap {
    min-width: 0;
    max-width: 100%;
  }
  #embeddedAlbumPicker .mx-artist-album-slider,
  #cgEmbeddedAlbumPicker .mx-artist-album-slider,
  #album-data .mx-artist-album-slider {
    overflow: hidden;
    padding: 4px 0 8px;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
  }
  #embeddedAlbumPicker .mx-artist-album-slider .mx-artist-album-card,
  #embeddedAlbumPicker .mx-artist-album-slider .mx-album-shimmer,
  #cgEmbeddedAlbumPicker .mx-artist-album-slider .mx-artist-album-card,
  #cgEmbeddedAlbumPicker .mx-artist-album-slider .mx-album-shimmer,
  #album-data .mx-artist-album-slider .mx-artist-album-card,
  #album-data .mx-artist-album-slider .mx-album-shimmer {
    flex: 0 0 calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #embeddedAlbumPicker .mx-artist-album-slider .mx-artist-album-cover,
  #cgEmbeddedAlbumPicker .mx-artist-album-slider .mx-artist-album-cover,
  #album-data .mx-artist-album-slider .mx-artist-album-cover {
    width: 100% !important;
    height: auto !important;
  }
  #embeddedAlbumPicker .mx-artist-album-nav,
  #cgEmbeddedAlbumPicker .mx-artist-album-nav,
  #album-data .mx-artist-album-nav {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  #embeddedAlbumPicker .mx-artist-album-nav .material-icons,
  #cgEmbeddedAlbumPicker .mx-artist-album-nav .material-icons,
  #album-data .mx-artist-album-nav .material-icons {
    font-size: 18px;
  }
  #embeddedAlbumPicker .mx-artist-album-nav.mx-prev,
  #cgEmbeddedAlbumPicker .mx-artist-album-nav.mx-prev,
  #album-data .mx-artist-album-nav.mx-prev { margin-right: 4px; }
  #embeddedAlbumPicker .mx-artist-album-nav.mx-next,
  #cgEmbeddedAlbumPicker .mx-artist-album-nav.mx-next,
  #album-data .mx-artist-album-nav.mx-next { margin-left: 4px; }

  /* ── Favorites grid: 6 columns so all items fit in one row ── */
  #mediaExplorerModal .rtFavs__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  #mediaExplorerModal .rtFavs__label {
    font-size: 0.6rem;
  }
  #mediaExplorerModal .rtFavs__title {
    font-size: 1.1rem;
    margin-bottom: 14px;
  }

  /* ── Genre tags: slightly smaller on mobile to match book picker scale ── */
  #mediaExplorerModal .album-genre-pill {
    font-size: 0.7rem;
  }

  /* ── Album view: shrink the left column so the tracklist + details
     get more room. Cover and action buttons are scaled down to match. ── */
  #mediaExplorerModal .mx-album-view { --bs-gutter-x: 0.75rem; }
  #mediaExplorerModal .mx-album-cover-col {
    padding-right: 6px !important;
  }
  #mediaExplorerModal .mx-album-cover {
    width: 130px;
  }
  #mediaExplorerModal .album-action-buttons {
    width: 130px;
  }
  /* Book mobile view puts the action stack in the flex:1 column next to
     the cover, not under a 130px cover. Let it fill the column. */
  #mediaExplorerModal .album-action-buttons--book {
    width: 100%;
  }
  #mediaExplorerModal .album-action-buttons .btn {
    font-size: 0.75rem;
    padding: 6px 8px;
    line-height: 1.15;
  }
  #mediaExplorerModal .album-action-buttons .btn .material-icons {
    font-size: 0.95em;
  }
}

/* A `#mediaExplorerModal .film-picker__detail { grid-template-columns:
   1fr !important }` rule used to live in the ≤991.98px block above. It
   was dead weight at true mobile width — embedded-pick-film.css's own
   ≤540px rule for the same selector is more specific
   (:not(.fp-detail--cols):not(.film-picker__detail--ep)) and always won
   there regardless, correctly setting a 120px+1fr two-column layout. But
   nothing in film.css counters it above 540px, so from 541-991.98px
   (iPad width) it was the only rule in effect — forcing the poster,
   action buttons, and Academy Awards block into one full-width column
   with the title/synopsis stacked below, instead of side-by-side. Removed
   outright rather than re-scoped, since it was never doing anything at
   the width it was “protecting”. */

/* ═════════════════════════════════════════════════════════════
   Book picker — landing page + back button + results grid
   Scoped to elements only emitted by embedded-pick-book.js, so
   nothing here can leak into the album picker.
   ═════════════════════════════════════════════════════════════ */

/* Row container for [back][home][input] — keeps the buttons inline
   to the left of the search box on every viewport (and lets us wrap
   the whole row to its own line on mobile, replacing the previous
   "input takes 100%" rule). */
.custom-album-picker__search-bar .picker-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.custom-album-picker__search-bar .picker-search-row .custom-album-picker__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Back button — sits to the left of the search input. Hidden on
   the landing page, fades in on every other view. */
.custom-album-picker__search-bar .picker-back-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #d6dde6;
    border-radius: 50%;
    background: #fff;
    color: #2b988f;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease, transform .15s ease;
}
.custom-album-picker__search-bar .picker-back-btn.is-visible {
    display: inline-flex;
}
.custom-album-picker__search-bar .picker-back-btn:hover {
    background: #f1faf9;
    transform: translateX(-1px);
}
.custom-album-picker__search-bar .picker-back-btn .material-icons {
    font-size: 20px;
}

/* Home button — same shape as the back button, sits to its right and
   resets the picker to the home landing. Visibility is in lock-step
   with the back button (shown on person/detail). */
.custom-album-picker__search-bar .picker-home-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #d6dde6;
    border-radius: 50%;
    background: #fff;
    color: #2b988f;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease, transform .15s ease;
}
.custom-album-picker__search-bar .picker-home-btn.is-visible {
    display: inline-flex;
}
.custom-album-picker__search-bar .picker-home-btn:hover {
    background: #f1faf9;
    transform: none;
}
.custom-album-picker__search-bar .picker-home-btn .material-icons {
    font-size: 20px;
}

/* ── Landing wrapper ───────────────────────────────────────── */
.picker-landing {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 4px 0 8px;
}
.picker-landing-section {
    /* Override the global `section { min-height: 60vh }` rule in
       style.css — landing sections size to their content. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.picker-landing-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.picker-landing-section-head h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.picker-landing-section-head h4 .material-icons {
    color: #2b988f;
    font-size: 1.2em;
}
.picker-landing-list-select {
    border: 1px solid #d6dde6;
    background: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: .85rem;
    color: #1f2937;
    cursor: pointer;
}
.picker-landing-loading,
.picker-landing-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    border: 1px dashed #dbe7e6;
    border-radius: 10px;
    background: #fafbfc;
    color: #6b7280;
    font-size: .9rem;
}
.picker-landing-empty .material-icons { color: #9ca3af; }

/* ── NYT slider ────────────────────────────────────────────── */
.picker-landing-nyt-slider {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.picker-landing-nyt-strip {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.picker-landing-nyt-arrow {
    flex: 0 0 36px;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5eaf1;
    background: #fff;
    color: #2b988f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: opacity .15s ease, transform .15s ease;
}
.picker-landing-nyt-arrow:hover:not(:disabled) {
    transform: scale(1.06);
    color: #1f7a72;
}
.picker-landing-nyt-arrow:disabled {
    opacity: .35;
    cursor: default;
}
.picker-landing-nyt-arrow .material-icons { font-size: 22px; }

/* Shimmer placeholders shown during page swaps. */
.picker-landing-nyt-card--shimmer {
    pointer-events: none;
}
.picker-landing-nyt-card--shimmer .shimmer-block {
    background: linear-gradient(90deg, #eef1f5 0%, #f7f9fc 50%, #eef1f5 100%);
    background-size: 200% 100%;
    animation: nyt-shimmer 1.1s ease-in-out infinite;
    border-radius: 6px;
    color: transparent;
}
.picker-landing-nyt-card--shimmer .picker-landing-nyt-rank.shimmer-block {
    width: 28px;
    height: 14px;
}
.picker-landing-nyt-card--shimmer .picker-landing-nyt-cover.shimmer-block {
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
}
.picker-landing-nyt-card--shimmer .picker-landing-nyt-title.shimmer-block {
    height: 12px;
    margin-top: 6px;
}
.picker-landing-nyt-card--shimmer .shimmer-block--short { width: 60%; height: 10px; margin-top: 4px; }
@keyframes nyt-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.picker-landing-nyt-card {
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.picker-landing-nyt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -14px rgba(15,23,42,.4);
    border-color: #2b988f;
}
.picker-landing-nyt-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #2b988f;
    color: #fff;
    font-weight: 700;
    font-size: .7rem;
    padding: 3px 7px;
    border-radius: 999px;
    z-index: 1;
}
.picker-landing-nyt-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: #f1f5f9;
    display: block;
}
.picker-landing-nyt-cover--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.picker-landing-nyt-cover--ph .material-icons { font-size: 36px; }
.picker-landing-nyt-meta { display: flex; flex-direction: column; gap: 2px; }
.picker-landing-nyt-title {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.picker-landing-nyt-author {
    font-size: .75rem;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Popular authors row ───────────────────────────────────── */
.picker-landing-authors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px;
}
.picker-landing-author {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    transition: background-color .15s ease;
}
.picker-landing-author:hover { background: #f1faf9; }
.picker-landing-author-portrait {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px -8px rgba(15,23,42,.35);
    color: #94a3b8;
}
.picker-landing-author-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.picker-landing-author-portrait .material-icons { font-size: 36px; }
.picker-landing-author-name {
    font-size: .78rem;
    color: #1f2937;
    text-align: center;
    line-height: 1.2;
}

/* ── Genre chips ───────────────────────────────────────────── */
.picker-landing-genres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.picker-landing-genre {
    background: #fff;
    border: 1px solid #d6dde6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .85rem;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.picker-landing-genre-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.picker-landing-genre:hover {
    background: #2b988f;
    border-color: #2b988f;
    color: #fff;
}
.picker-landing-genre .material-icons {
    font-size: 1.05em;
    color: #2b988f;
}
.picker-landing-genre:hover .material-icons { color: #fff; }
/* Genre not allowed by the club's pick restriction — greyed, not clickable. */
.picker-landing-genre.is-disabled,
.picker-landing-genre:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #f3f5f8;
}
.picker-landing-genre.is-disabled:hover,
.picker-landing-genre:disabled:hover {
    background: #f3f5f8;
    border-color: #d6dde6;
    color: #1f2937;
}
.picker-landing-genre.is-disabled:hover .material-icons,
.picker-landing-genre:disabled:hover .material-icons { color: #2b988f; }

/* ── Generic results grid (genre clicks etc.) ──────────────── */
.picker-results-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 12px;
}
.picker-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.picker-results-card {
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.picker-results-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -14px rgba(15,23,42,.4);
    border-color: #2b988f;
}
.picker-results-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: #f1f5f9;
    display: block;
}
.picker-results-cover--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.picker-results-cover--ph .material-icons { font-size: 36px; }
.picker-results-title {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.picker-results-author {
    font-size: .75rem;
    color: #6b7280;
}

@media (max-width: 600px) {
    .picker-landing-nyt-strip { gap: 8px; }
    .picker-landing-nyt-arrow { flex-basis: 28px; width: 28px; height: 28px; }
    .picker-landing-nyt-arrow .material-icons { font-size: 18px; }
    .picker-landing-author-portrait { width: 64px; height: 64px; }
    .picker-results-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .custom-album-picker__search-bar .picker-back-btn,
    .custom-album-picker__search-bar .picker-home-btn { width: 34px; height: 34px; }
}

/* ── NYT Best Sellers browser ──────────────────────────────────────
   Full-page browser inside the book picker, mirroring the Grammy
   browser in the music modal. Pill button (data-nyt-launch) hides
   the picker chrome and reveals this view; back button restores it. */
.book-nyt-browser {
    padding: 16px 4px;
    color: #1f2937;
}
.book-nyt-browser__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.book-nyt-browser__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #1f2937;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.book-nyt-browser__back:hover { background: #e2e8f0; }
.book-nyt-browser__back .material-icons { font-size: 18px; }
.book-nyt-browser__heading { flex: 1 1 auto; min-width: 0; }
.book-nyt-browser__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}
.book-nyt-browser__title .material-icons {
    color: #ca8a04;
    font-size: 24px;
}
.book-nyt-browser__subtitle {
    font-size: 0.92rem;
    color: #64748b;
}
.book-nyt-browser__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.book-nyt-browser__filter {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.book-nyt-browser__select {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0f172a;
    text-transform: none;
    letter-spacing: normal;
    min-width: 220px;
    background: #fff;
    cursor: pointer;
}
.book-nyt-browser__select:focus {
    outline: none;
    border-color: #2b988f;
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.18);
}
.book-nyt-browser__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.book-nyt-browser__loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 0;
    color: #64748b;
    font-size: 0.95rem;
}
.book-nyt-browser__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0;
    color: #94a3b8;
}
.book-nyt-browser__empty .material-icons { font-size: 32px; }
.book-nyt-browser__footer {
    display: flex;
    justify-content: flex-end;
    padding: 18px 4px 4px;
}
.book-nyt__card {
    appearance: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 10px 12px;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.book-nyt__card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.18);
}
.book-nyt__poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-nyt__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.book-nyt__poster-placeholder {
    color: #94a3b8;
    font-size: 36px;
}
.book-nyt__rank {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0.02em;
}
.book-nyt__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-nyt__author {
    font-size: 0.82rem;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .book-nyt-browser__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
    .book-nyt-browser__select { min-width: 0; width: 100%; }
    .book-nyt-browser__filter { width: 100%; }
}

/* "This club only allows Grammy …" banner: linked categories. The
   banner itself is rendered with inline color tokens from a kind-based
   palette, so the link inherits the banner's color and just gets an
   underline + pointer + a slightly stronger hover. */
.cgw-banner-grammy-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: inherit;
}
.cgw-banner-grammy-link:hover,
.cgw-banner-grammy-link:focus {
    color: inherit;
    text-decoration-thickness: 2px;
    outline: none;
}

/* Dismiss (×) button on the artist / release-date restriction banners.
   ms-auto pushes it to the right edge; teal to match the banner theme. */
.album-restriction-dismiss {
    appearance: none;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    margin: -2px -4px -2px 0;
    padding: 2px;
    line-height: 1;
    border-radius: 6px;
    color: #2B988F;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.album-restriction-dismiss:hover,
.album-restriction-dismiss:focus-visible {
    background: rgba(43, 152, 143, 0.14);
    color: #1a6b65;
    outline: none;
}
.album-restriction-dismiss .material-icons {
    font-size: 18px;
    color: inherit;
}