/* Single space-between row under the waveform: identity on the left, accents on the right.
   Colours come from the MudBlazor theme (the dock surface is theme-aware), so unlike the
   always-dark TrackCard glass we do not hard-code green-accent overrides here. */
.track-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 2px 4px 0;
}

/* Left group shrinks and truncates so a long title never pushes the chip off-screen. */
.track-meta-identity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

::deep .track-meta-title {
    font-family: var(--deepdrft-font-mono);
    min-width: 0;
}

::deep .track-meta-artist {
    opacity: 0.75;
    min-width: 0;
}

/* Right group keeps its natural size and never shrinks. */
.track-meta-accents {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

::deep .track-meta-year {
    opacity: 0.75;
}

/* The metadata's three shapes track the dock's layout bands (same breakpoints as the grid in
   AudioPlayerBar.razor.css), not the label's own slot width — in the <600 band the slot is actually
   full-width yet we still want it fully vertical, which a container query can't express.

   Mid band (600–900): 2×2 — title over artist on the left (start-justified), genre over year on the
   right (end-justified). The row stays a row; only the two inner groups go vertical. */
@media (min-width: 600px) and (max-width: 899.98px) {
    .track-meta-row {
        align-items: flex-start;
    }

    .track-meta-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .track-meta-accents {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    ::deep .track-meta-sep {
        display: none;
    }

    ::deep .track-meta-year {
        padding-left: 8px;
    }
}

/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
@media (min-width: 420px) and (max-width: 599.98px) {
    .track-meta-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .track-meta-accents {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    ::deep .track-meta-sep {
        display: none;
    }

    ::deep .track-meta-year {
        padding-left: 8px;
    }
}

@media (max-width: 419.98px) {
    .track-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}