/* ========================================
   YOUR LIBRARY

   style.css      — the shell
   components.css — album cards, artist cards, chips,
                    show-all and follow buttons
   library.css    — only what is new here
======================================== */


/* ========================================
   HEADING
======================================== */

.library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 16px;
}

.library-heading .eyebrow {
    display: block;

    margin-bottom: 6px;

    color: var(--cyan);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.library-heading h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.library-heading #resultCount {
    color: var(--muted);

    font-size: 0.76rem;
    letter-spacing: 0.02em;

    white-space: nowrap;
}


/* ========================================
   SMALL BUTTONS ON A SECTION HEADING
======================================== */

.heading-buttons {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-left: auto;
}

.small-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 15px;

    color: var(--milk);

    background: rgba(10, 26, 48, 0.7);

    border: 1px solid var(--line);
    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 600;

    cursor: pointer;
    transition: 0.25s ease;
}

.small-button svg {
    width: 13px;
    height: 13px;

    fill: currentColor;
}

.small-button:hover {
    color: #04121f;

    background: var(--cyan);

    border-color: var(--cyan);
}


/* ========================================
   SONG ROWS — an album column, same shape
   as the search page
======================================== */

.library-header,
.library-tracks article {
    grid-template-columns:
        44px
        46px
        minmax(140px, 1fr)
        minmax(110px, 180px)
        70px
        44px;
}

.from-album {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.from-album a {
    color: var(--muted);

    text-decoration: none;

    border-bottom: 1px solid transparent;

    transition: 0.2s ease;
}

.from-album a:hover {
    color: var(--cyan);

    border-bottom-color: var(--cyan);
}

.no-album {
    color: var(--muted-dark);

    font-size: 0.72rem;
    font-style: italic;
}

#playedSongs article .cover .recent-play {
    right: 50% !important;
    bottom: 50% !important;
    transform: translate(50%, 50%) !important;
    opacity: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

#playedSongs article .cover .recent-play:hover,
#playedSongs article .cover .recent-play:focus-visible {
    background: var(--cyan);
    color: #061522;
}


/* ========================================
   CARDS WITH A REMOVE BUTTON UNDER THEM
======================================== */

.library-card {
    position: relative;

    min-width: 0;
}

/* the remove button sits in the corner of its card and
   only appears when you point at it */
.remove-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;

    padding: 6px 13px;

    color: var(--milk);

    background: rgba(4, 12, 24, 0.86);

    border: 1px solid rgba(170, 210, 255, 0.32);
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 600;

    opacity: 0;

    transform: translateY(-4px);

    cursor: pointer;
    transition: 0.2s ease;
}

.library-card:hover .remove-button,
.library-card:focus-within .remove-button {
    opacity: 1;

    transform: translateY(0);
}

.remove-button:hover {
    color: #04121f;

    background: #ff7a7a;

    border-color: #ff7a7a;
}


/* the grids hold .library-card now, so the card inside
   needs to fill it */
#savedAlbums .album-card,
#followed .artist-card {
    width: 100%;
}


/* ========================================
   EMPTY SECTIONS
======================================== */

.library-empty {
    display: grid;
    justify-items: start;
    gap: 12px;

    padding: 28px;

    background: rgba(10, 26, 48, 0.5);

    border: 1px dashed rgba(130, 185, 255, 0.24);
    border-radius: var(--radius-medium);
}

.library-empty p {
    color: var(--muted);

    font-size: 0.84rem;
    line-height: 1.6;
}

.library-empty a {
    padding: 10px 18px;

    color: var(--milk);

    background: rgba(6, 20, 40, 0.6);

    border: 1px solid var(--line);
    border-radius: 999px;

    font-size: 0.76rem;
    font-weight: 600;

    text-decoration: none;

    transition: 0.25s ease;
}

.library-empty a:hover {
    color: #04121f;

    background: var(--cyan);

    border-color: var(--cyan);
}


/* ========================================
   SECTIONS AND BODIES THAT HIDE THEMSELVES
======================================== */

#likedSection[hidden],
#albumsSection[hidden],
#artistsSection[hidden],
#playedSection[hidden],
.library-body[hidden],
.library-empty[hidden] {
    display: none;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {
    .library-header,
    .library-tracks article {
        grid-template-columns:
            44px
            46px
            minmax(120px, 1fr)
            70px
            44px;
    }

    .from-album {
        display: none;
    }
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {
    .library-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .library-header {
        display: none;
    }

    /* style.css hides the index and the extra columns on a phone */
    .library-tracks article {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;
    }

    .heading-buttons {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .small-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* the saved-album row scrolls sideways like the other
       album rows, so the remove button travels with its card */
    #savedAlbums .library-card {
        flex: 0 0 46%;

        scroll-snap-align: start;
    }

    /* no hover on a phone — the button stays put and visible */
    .remove-button {
        position: static;

        margin-top: 8px;

        opacity: 1;

        transform: none;
    }

    .library-empty {
        padding: 20px;
    }
}