/* Extra small breakpoint styles (<576px) */
@media (max-width: 576px) {
    /* ---- Upload: the drop box gives up two thirds of its height on a phone,
       where 260px of empty dashes pushes everything else below the fold. */
    .upload-box { height: 170px; }
    .upload-content .upload-icon { width: 36px; height: 36px; }
    .upload-processing-animation { width: 120px; height: 120px; }
    .cover-art-chip { width: 6rem; }
    .apply-all { gap: 10px; padding: 12px; }
    .ai-flags { flex-direction: row; flex-wrap: wrap; gap: 12px; }

    .mobile-app-install-banner {
        min-height: 54px;
        padding: 8px 10px;
        gap: 8px;
    }

    .mobile-app-install-icon {
        width: 34px;
        height: 34px;
    }

    .mobile-app-install-title {
        font-size: 13px;
    }

    .mobile-app-install-subtitle {
        display: none;
    }

    .mobile-app-install-store-badge {
        height: 34px;
    }

    .mobile-app-install-store-text {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    /* AdminSongManagement container */
    #grid-container {
        width: 100%;
        height: calc(100vh - 6rem);
    }

    /* SongPlayer extra small adjustments */
    .song-title {
        font-size: 24px;
    }

    .player-controls {
        gap: 2px;
    }

    .volume-bar-container {
        width: 50px;
    }

    /* MusicLibrary extra small adjustments */
    .music-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Featured Music Carousel - XS breakpoint: show 1.2 cards with peek */
    .featured-music-carousel {
        gap: 12px;
        padding-right: 16px;
    }

    .featured-music-carousel .music-card {
        /* 1.2 cards visible: 100vw / 1.2 = 83.33vw per card, minus padding/gap */
        width: calc(100vw / 1.2 - 32px);
        min-width: calc(100vw / 1.2 - 32px);
    }

    /* NavMenu */
    .cart-link {
        margin-right: 70px;
    }

    /* MainLayout top-row adjustments */
    .top-row {
        justify-content: space-between;
    }

        .top-row a, .top-row .btn-link {
            margin-left: 0;
        }

    .ai-content-badge-icon {
        width: 26px;
        height: 26px;
    }

    .player-ai-content-badges .ai-content-badge-icon {
        width: 30px;
        height: 30px;
    }

    .filter-pill-option-icon {
        width: 22px;
        height: 22px;
    }

    .song-text-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 5px;
    }

    .song-text-details .song-title {
        margin: 0;
    }

    .song-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        margin: 0 5px 0 5px;
        padding: 0;
    }

    /* Stream Count on Card */
    /* See the note in lg_app.css: dead colour and a fighting margin, both removed. */
    .card-stream-count {
        gap: 3px;
        font-size: 10px;
    }

    .stream-icon {
        width: 10px;
        height: 10px;
        fill: currentColor;
    }

    .app-logo {
        height: 30px;
    }

    .maintenance-warning-label {
        font-size: 0.75rem;
    }

    .action-controls {        
        gap: 8px;
        height: auto;
    }

    /* Compact persona/bio on XS screens */
    .playlist-persona-section {
        padding: 4px 8px;
        margin-bottom: 4px;
        gap: 8px;
    }

    .persona-image-sm {
        width: 40px;
        height: 40px;
    }

    .persona-bio {
        max-height: 3em;
        font-size: 0.8rem;
    }

    .home-container {
        padding: 2rem 0rem;
        max-width: 1200px;
        margin: 0 auto;
    }
}


@media (max-width: 576px) {
    /*
     * SONG PLAYER - "Marquee" sizing: phone.
     * The hero puts the art beside the title rather than above it, so the fold
     * still reaches the lyrics. The transport pill wraps: seek bar on its own
     * row, then five controls spread across the width at 46px, comfortably over
     * the 44px touch-target floor.
     */
    .song-player-container { min-height: calc(100dvh - 58px); }
    .song-player-container .song-header { min-height: 0; padding: 20px 20px 18px; }
    .song-player-container .song-hero-inner {
        grid-template-areas: "art text" "actions actions";
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
        gap: 16px;
    }
    .song-player-container .song-tag-row,
    .song-player-container .song-meta-row,
    .song-player-container .action-controls { justify-content: flex-start; }
    .song-player-container .action-controls { gap: 8px; margin-top: 4px; }
    .song-player-container .player-art-shell { width: 118px; height: 118px; }
    .song-player-container .song-tag-row { gap: 5px; margin-bottom: 9px; }
    .song-player-container .song-chip { height: 24px; padding: 0 10px; font-size: 10px; }
    .song-player-container .song-title { font-size: 27px; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 8px; }
    .song-player-container .song-meta-row { gap: 10px; font-size: 12.5px; }
    .song-player-container .artist-link { font-size: 14px; }
    .song-player-container .subscription-badge,
    .song-player-container .preview-label { font-size: 12.5px; }
    .song-player-container .play-button-large { width: 54px; height: 54px; }
    .song-player-container .play-button-large .play-icon { width: 25px; height: 25px; }

    .song-player-container .song-stage { gap: 14px; padding: 12px 16px 0; }
    .song-player-container .song-stage-panel { height: 300px; padding: 16px 18px; }
    .song-player-container .song-panel-head { margin-bottom: 10px; }
    .song-player-container .song-panel-body { height: 216px; }
    .song-player-container .song-stage-art { max-height: 216px; }
    .song-player-container .lyrics-scroller--player { font-size: 18px; }
    .song-player-container .song-artist-panel { padding: 16px; }
    .song-player-container .persona-image-sm { width: 46px; height: 46px; }
    .song-player-container .persona-identity { gap: 12px; margin: 12px 0 10px; }
    .song-player-container .persona-bio { font-size: 12.5px; line-height: 1.55; margin-bottom: 12px; }

    .song-player-container .player-bar {
        flex-wrap: wrap;
        margin: 14px 14px 16px;
        height: auto;
        padding: 12px 16px 13px;
        gap: 6px;
        border-radius: 22px;
    }
    .song-player-container .progress-container { order: 1; width: 100%; flex: 0 0 100%; gap: 9px; }
    .song-player-container .player-controls { order: 2; flex: 1; justify-content: space-between; gap: 0; }
    /* Phones have hardware volume; the slider is dead weight on a small pill.
       Hidden rather than removed - the element stays in the DOM. */
    .song-player-container .volume-controls { display: none; }
    .song-player-container .control-button { width: 46px; height: 46px; }
    .song-player-container .control-icon { width: 19px; height: 19px; }
    .song-player-container .play-button-small { width: 54px; height: 54px; }
    .song-player-container .play-icon-small { width: 24px; height: 24px; }
    .song-player-container .time-display { min-width: 36px; font-size: 11px; }
}

@media (max-width: 576px) {
    .song-player-container .persona-bio { -webkit-line-clamp: 2; }
    .song-player-container .persona-more { font-size: 12px; margin-bottom: 10px; }
}


@media (max-width: 576px) {
    /*
     * PLAYLIST PLAYER - phone. Art beside the title rather than above it, so
     * the fold still reaches the track list. The transport pill wraps: seek bar
     * on its own row, five controls spread across the width at 46px, over the
     * 44px touch-target floor. Volume is hidden - phones have hardware volume -
     * but the element stays in the DOM.
     */
    .playlist-player-container { min-height: calc(100dvh - 58px); }
    .playlist-player-container .playlist-header { padding: 18px 16px 16px; }
    .playlist-player-container .playlist-hero-inner {
        grid-template-areas: "art text" "actions actions";
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
        gap: 14px;
    }
    .playlist-player-container .playlist-tag-row,
    .playlist-player-container .playlist-meta-row,
    .playlist-player-container .action-controls { justify-content: flex-start; }
    .playlist-player-container .action-controls { gap: 8px; margin-top: 2px; }
    .playlist-player-container .player-art-shell { width: 96px; height: 96px; }
    .playlist-player-container .playlist-tag-row { gap: 5px; margin-bottom: 8px; }
    .playlist-player-container .playlist-chip { height: 23px; padding: 0 10px; font-size: 10px; }
    .playlist-player-container .song-title { font-size: 30px; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 7px; }
    .playlist-player-container .playlist-meta-row { gap: 9px; font-size: 12px; }
    .playlist-player-container .subscription-badge,
    .playlist-player-container .preview-label { font-size: 12px; }
    .playlist-player-container .play-button-large { width: 52px; height: 52px; }
    .playlist-player-container .play-button-large .play-icon { width: 24px; height: 24px; }

    .playlist-player-container .playlist-stage { gap: 12px; padding: 12px 14px 0; }
    .playlist-player-container .playlist-panel { padding: 16px; }
    .playlist-player-container .playlist-panel-head { margin-bottom: 10px; }
    .playlist-player-container .playlist-stage-panel { height: 190px; }
    .playlist-player-container .playlist-stage-panel .playlist-panel-body { height: 118px; }
    .playlist-player-container .playlist-stage-art { max-height: 118px; }
    .playlist-player-container .lyrics-scroller--player { font-size: 15px; }
    .playlist-player-container .persona-image-sm { width: 42px; height: 42px; }

    .playlist-player-container .track-list th { font-size: 10px; padding: 0 8px 8px; }
    .playlist-player-container .track-list th.track-number { width: 34px; }
    .playlist-player-container .track-list th.track-image { width: 48px; }
    .playlist-player-container .track-list th.track-duration { width: 52px; }
    .playlist-player-container .track-row td { padding: 8px; font-size: 13.5px; }
    .playlist-player-container .track-name { font-size: 14px; }
    .playlist-player-container .track-sub { font-size: 12px; }
    .playlist-player-container .track-index { font-size: 13px; }

    .playlist-player-container .player-bar {
        flex-wrap: wrap;
        margin: 14px 12px 16px;
        height: auto;
        padding: 12px 16px 13px;
        gap: 6px;
        border-radius: 22px;
    }
    .playlist-player-container .progress-container { order: 1; width: 100%; flex: 0 0 100%; gap: 9px; }
    .playlist-player-container .player-controls { order: 2; flex: 1; justify-content: space-between; gap: 0; }
    .playlist-player-container .volume-controls { display: none; }
    .playlist-player-container .control-button { width: 46px; height: 46px; }
    .playlist-player-container .control-icon { width: 19px; height: 19px; }
    .playlist-player-container .play-button-small { width: 54px; height: 54px; }
    .playlist-player-container .play-icon-small { width: 24px; height: 24px; }
    .playlist-player-container .time-display { min-width: 36px; font-size: 11px; }
}


@media (max-width: 576px) {
    /*
     * CARDS — phone. THE ARTWORK IS THE CARD.
     *
     * This REPLACES the horizontal 84px-thumbnail layout that used to live here. That
     * layout traded artwork size for density - about four cards per screen - and the
     * result was that the cover art and the scrolling lyrics, the two things a listener
     * actually looks at, were the smallest things on the card while the text column ran
     * tall and half empty. The trade is now inverted deliberately: art runs the full
     * card width and roughly 1.5 cards fit a phone screen.
     *
     * Three things pay for that height:
     *   - the AI badges and like/dislike move ON TO the art, sharing grid row 1 with it
     *   - artist / genre / streams merge onto one .card-meta line
     *   - the mini player collapses to a single row and drops volume entirely
     *
     * Only inside .music-cards-grid, which keeps the home carousel out of it AND keeps
     * every rule off Creator/LyricsTimingEditor.razor - that page renders these same
     * .card-mini-* / .card-volume-* classes and is asserted on them.
     */
    /* The single 1fr column and its gap are already set higher up in this file. */
    .music-cards-grid .music-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 10px;
    }

    /* Art and the badge row share row 1; everything else auto-places into rows 2+, so no
       grid-column is needed on any of them. The card's 10px padding IS the art's margin -
       "full width" here means full width of the content box, not bled to the card edge. */
    .music-cards-grid .card-album-art {
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        height: auto;      /* aspect-ratio:1 in app.css owns the height */
    }

    /*
     * The badge row overlaid on the art. z-index 6 puts it above everything inside
     * .card-album-art (see the ladder in app.css) - it is a sibling, not a child, so it is
     * not clipped by that element's overflow:hidden and can sit inside the rounded corners
     * by padding alone.
     */
    .music-cards-grid .card-ai-actions-row {
        grid-row: 1;
        grid-column: 1;
        align-self: start;
        position: relative;
        z-index: 6;
        min-height: 0;
        margin: 0;
        padding: 8px;
        /* The row stretches the full card width at z-index 6, so without this it would shadow
           .card-art-open and the whole top strip of the artwork would stop opening the player.
           Only the two buttons take pointer events back; the AI badges are plain <img>. */
        pointer-events: none;
    }

    .music-cards-grid .card-ai-actions-row .like-button,
    .music-cards-grid .card-ai-actions-row .dislike-button {
        pointer-events: auto;
    }

    /* Above the scrim. Both were z-index 4, and ::after paints after every child, so a short
       cover could have put the gradient over the toggle. */
    .music-cards-grid .card-album-art .lyrics-toggle-button { z-index: 5; }

    /*
     * A scrim under that row, because the badges and counts now sit on an arbitrary
     * photograph. Painted only at this breakpoint - no other layout overlays the art.
     * pointer-events:none so it never eats a tap meant for .card-art-open beneath it.
     *
     * Literal colours, not tokens, for the same reason app.css gives for
     * .lyrics-toggle-button: a card token is measured against --st-surface and says nothing
     * about legibility over a cover. rgba(8,12,20,.72) is the same family that button uses.
     *
     * Measured against the WORST case, which is white artwork: at .62 the scrim composites
     * to #66686d there, and #fff on it is 5.58:1. Over dark artwork it approaches 21:1. Both
     * clear AA, so the overlay is legible on any cover in either site theme.
     *
     * A FIXED height, not a percentage. At 42% of a 447px square it was a 188px grey wash
     * across the top third of every cover - far more darkening than a 42px row of badges
     * needs. 96px covers the row and still leaves most of the fade below it.
     */
    .music-cards-grid .card-album-art::after {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 96px;
        z-index: 4;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(8, 12, 20, .62) 0%, rgba(8, 12, 20, .30) 50%, rgba(8, 12, 20, 0) 100%);
    }

    /*
     * Like/dislike sit on that scrim now, so --st-text-3 (measured on --st-surface) is the
     * wrong colour by definition. White, both resting and active - and note the ACTIVE state
     * is not carried by colour at all: LikeDislikeButtons already swaps a filled glyph for an
     * outlined one, which reads on any artwork. --st-accent was the obvious choice for active
     * and is the wrong one: #02b8fd on the worst-case scrim is 3.54:1 and fails.
     *
     * These live here rather than in light.css / dark.css because they are literals identical
     * in both themes - the same arrangement app.css uses for .lyrics-toggle-button. The extra
     * .music-cards-grid ancestor is what makes them outrank the theme sheets, which load last.
     */
    .music-cards-grid .card-ai-actions-row .like-button,
    .music-cards-grid .card-ai-actions-row .dislike-button,
    .music-cards-grid .card-ai-actions-row .like-button.active,
    .music-cards-grid .card-ai-actions-row .dislike-button.active {
        color: #fff;                       /* 8.09:1 on the scrim over white artwork */
        text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    }

    .music-cards-grid .card-ai-actions-row .like-button:hover,
    .music-cards-grid .card-ai-actions-row .dislike-button:hover {
        color: #c8eafd;                    /* 6.41:1, same worst case */
    }

    /* One meta line: artist · genre · streams, with tip and report pinned right by
       .card-stream-count's own space-between. Its width:100% would force a wrap here. */
    .music-cards-grid .card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        min-width: 0;
    }

    .music-cards-grid .card-meta .card-stream-count {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .music-cards-grid .card-meta .card-genre::before,
    .music-cards-grid .card-meta .card-stream-count::before {
        content: '·';
        margin-right: 8px;
    }

    /* Only a separator when something precedes it - a song with no artist would otherwise
       open the line with a dot. */
    .music-cards-grid .card-meta > :first-child::before { content: none; }

    /* 24px alongside 11px text made the tip heart the loudest thing on the merged line. It
       had a row to itself before this layout; now it shares one with everything else. */
    .music-cards-grid .card-meta .tip-heart-card .tip-heart-icon {
        width: 18px;
        height: 18px;
    }

    .music-cards-grid .card-meta .tip-heart-button { padding: 2px; }

    /*
     * Mini player on one row: [play][stop] 0:13 ————— 3:51.
     *
     * Volume goes entirely. A phone has hardware keys for it, and it is what buys the
     * scrubber enough width to be usable at 390px. Scoped, so the lyric timing editor keeps
     * its own volume control.
     */
    .music-cards-grid .card-mini-player {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .music-cards-grid .card-mini-controls-row { flex: 0 0 auto; gap: 6px; }
    .music-cards-grid .card-progress-container { flex: 1 1 auto; min-width: 0; gap: 6px; }
    .music-cards-grid .card-volume-controls { display: none; }

    /* Inherited 14px from .music-card, which is a lot of the row's width at 390px. min-width
       stops the scrubber twitching as the elapsed time crosses 9:59 / 0:09. */
    .music-cards-grid .card-time-display {
        flex: 0 0 auto;
        min-width: 32px;
        font-size: 12px;
        text-align: center;
    }

    /* 40px, not the 44px floor .action-button gets below: it is the largest that leaves a
       usable scrubber beside it on a 390px screen. Play/pause stays :first-child, which is
       what carries the accent fill. */
    .music-cards-grid .card-mini-controls .e-btn { width: 40px; height: 40px; }

    /*
     * TYPE — phone. Every size here is a step up from the ladder the horizontal card used,
     * because that ladder was drawn for a 12px-wide-ish text column beside an 84px thumbnail.
     * The column is now the full width of the screen and can carry normal reading sizes.
     */
    .music-cards-grid .card-song-title { font-size: 16px; }
    .music-cards-grid .card-artist-name { font-size: 13.5px; }
    .music-cards-grid .card-genre { font-size: 12.5px; }
    .music-cards-grid .card-stream-count { font-size: 12px; }
    .music-cards-grid .card-stream-info .stream-icon { width: 12px; height: 12px; }
    .music-cards-grid .action-button { height: 44px; }

    /*
     * The card lyrics. app.css sets 11px and calls it "smallest type, in place of a 210px
     * cover" - which was true everywhere until this breakpoint stopped being a thumbnail.
     * The panel is ~350px on a phone now, WIDER than that desktop cover, and 11px in it read
     * like fine print. 15px matches what the playlist player uses at this width and stays a
     * clear step below the song player's 18px, so the hierarchy across the three surfaces
     * still reads. Scoped to .music-cards-grid, so the home carousel keeps the small type -
     * its card is still narrow.
     */
    .music-cards-grid .lyrics-scroller--card { font-size: 15px; }

    /* Line padding scaled with the type; 1px was set against 11px text. */
    .music-cards-grid .lyrics-scroller--card .lyrics-line { padding: 3px 10px; }

    .filter-pill { height: 34px; padding: 0 13px; font-size: 13px; }
    .music-library-sticky-header { gap: 8px; padding: 10px 0; }
    .music-library-sticky-header h3 { font-size: 19px; }
}

@media (max-width: 576px) {
    /* Section headers and page states — phone. The header stacks so a long title and its
       action link stop fighting for one line. */
    .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .section-eyebrow { font-size: 10.5px; }
    .empty-state { padding: 40px 16px; }
    .empty-state-icon { width: 54px; height: 54px; }
    .empty-state-icon svg { width: 26px; height: 26px; }
    .empty-state-title { font-size: 16.5px; }
    .state-action { height: 44px; width: 100%; }

/* Auth pages - phone. The panel keeps the logo and the brand colour, which is the only
       place either appears once the page scrolls. */
    .auth-page { margin: -1rem -1.5rem 0; min-height: calc(100dvh - 56px); }
    .auth-panel { height: 148px; padding: 20px 24px; }
    .auth-panel-logo { height: 28px; }
    .auth-panel-title { font-size: 26px; line-height: 1.14; margin-bottom: 12px; }
    .auth-panel-body { display: none; }
    .auth-panel-rule { width: 56px; }

    .auth-form-col { padding: 22px 24px 20px; }
    .auth-title { font-size: 26px; margin-bottom: 6px; }
    .auth-subtitle { margin-bottom: 20px; }
    .auth-check { margin-bottom: 20px; }
    .auth-page .e-btn.auth-submit { height: 50px; }
    .auth-page .e-btn.auth-provider { height: 48px; }
    .auth-divider { margin: 18px 0; }
    .auth-footer { margin-top: 22px; }

/* Register - phone. */
    .auth-legal { padding: 14px; margin-bottom: 20px; }
    .auth-page .auth-input.form-control { height: 48px; }
    .auth-rule { margin: 20px 0; }

/* Settings surfaces - phone. */
    .settings-page { padding: 22px 16px 40px; min-height: calc(100dvh - 56px); }
    .settings-main { max-width: none; }
    .settings-column { gap: 18px; }
    .settings-card { padding: 18px; }
    .settings-head-title { font-size: 26px; }
    .settings-section-head { flex-direction: column; gap: 10px; }
    .fact-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .fact-value { text-align: left; }
    .passkey-row { flex-wrap: wrap; }
    .passkey-actions { width: 100%; }
    :is(.settings-page, .settings-dialog) .e-btn.settings-btn.settings-btn-small { flex: 1 1 auto; }

    /* Creator settings. The three status tiles stop competing for width and become
       label-and-pill rows, which is the only shape that stays legible at 390. */
    .status-tiles { flex-direction: column; gap: 10px; }
    .status-tile { flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
    .status-tile-label { margin-bottom: 0; }
    .payout-section { padding: 14px; }
    .payout-heading { flex-wrap: wrap; }
    .settings-consent { padding: 14px; }
    .persona-row { align-items: flex-start; }
    .persona-cards { grid-template-columns: 1fr; gap: 14px; }
    .persona-card { padding: 16px; }
    .persona-card-head { flex-wrap: wrap; }
    .persona-toolbar { align-items: stretch; }
    /* Two actions on one line at 390 leaves neither with a usable target. */
    .persona-card .settings-actions .e-btn.settings-btn { flex: 1 1 auto; }
    .persona-image-picker { flex-direction: column; }
    .crop-canvas { width: 100%; max-width: 300px; height: auto; }


}