/* music-playlists.css — playlist tile grid, 2x2 mosaic
   covers, single-playlist hero (cover thumb + meta +
   actions). */

/* 2×2 mosaic of cover thumbnails inside a playlist tile. */
.ms-playlist-mosaic {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel-bg);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    transition: box-shadow var(--dur-fast) var(--ease-smooth);
}
/* Empty playlist: single fallback cover fills the whole square. */
.ms-playlist-mosaic.empty {
    display: block;
    padding: 0;
}
.ms-playlist-mosaic.empty > svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ms-playlist-mosaic-cell {
    overflow: hidden;
    background: var(--panel-bg);
    min-width: 0;
}
.ms-playlist-mosaic-cell.blank {
    background: color-mix(in srgb, var(--panel-bg) 65%, var(--bg));
}
.ms-playlist-mosaic-cell img,
.ms-playlist-mosaic-cell svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Custom uploaded cover: a single image fills the whole square instead
   of the 2x2 track-art grid. */
.ms-playlist-mosaic.ms-playlist-mosaic-custom {
    display: block;
    padding: 0;
}
.ms-playlist-mosaic-custom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ----- Playlist hero ----- */
.ms-playlist-hero {
    display: flex;
    gap: 1.5rem;
    margin: 0.5rem 0 1.5rem;
    align-items: flex-end;
}
.ms-playlist-hero-cover {
    width: var(--cover-hero);
    height: var(--cover-hero);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--panel-bg);
    flex-shrink: 0;
}
.ms-playlist-hero-cover img,
.ms-playlist-hero-cover svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ms-playlist-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* No padding-bottom: the hero uses align-items: flex-end so this
       column's bottom edge already meets the cover's bottom edge.
       Any padding here would push the actions up off that baseline
       and the row of [cover bottom | action button bottoms] would
       no longer line up. */
    min-width: 0;
}
.ms-playlist-hero-meta .kicker {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
}
.ms-playlist-hero-meta h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.1;
    word-break: break-word;
}
.ms-playlist-hero-meta .sub {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
.ms-playlist-hero-actions {
    display: flex;
    /* Wrap so the 4-button row (Play / Rename / Cover / Delete) never
       clips on narrow phones. At ~390pt width the four labelled buttons
       overflow the content column and the last one (Delete) was cut off
       at the right edge — it only fit on a 430pt Pro Max. One row on wide
       screens; wraps to a second line only when it must. `gap` doubles as
       row-gap so a wrapped button keeps clean vertical spacing. */
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.ms-playlist-hero-actions .ms-play-big {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Equal-height-in-row rule: hero actions (Play / Rename / Cover /
       Delete) all standardize on --control-h so the row sits on one baseline.
       Without this, Play's padding-based sizing left it visibly taller
       than the .ms-btn siblings beside it. */
    height: var(--control-h);
    box-sizing: border-box;
    padding: 0 1.2rem;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: filter var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.ms-playlist-hero-actions .ms-play-big:hover { filter: brightness(1.1); transform: scale(1.03); }
.ms-playlist-hero-actions .ms-play-big .icon { color: var(--bg); }

/* The in-musiced Settings view + the legacy in-library Search-results
   grouping (.ms-settings* / .ms-search-group*) used to live here.
   Settings was extracted to a standalone /settings page; the in-library
   search now filters tiles in place via the topbar input. Both rule
   blocks were dead — removed in the Batch 4 cleanup pass. */