@layer components {
    /* A label is an optional leading icon beside its title content. The title is
       a text() (or a caller-supplied stack of text() for multi-row), so a
       multi-row label — icon, then title over subtitle — works anywhere. */
    .label {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        min-inline-size: 0;

        /* The icon wrapper gives the leading graphic an identity the title
           rules can never match, so an icon that is itself a stack (a track
           number beside a cover) keeps its natural size instead of growing
           like title content. */
        & > .label__icon {
            align-items: center;
            display: flex;
            flex-shrink: 0;
            gap: 0.5rem;
        }

        /* Only a BARE svg icon gets the default size and tint — a composite
           icon (a tile, a stack) owns its svg's color, so the child combinator
           must not reach through it. */
        & > svg,
        & > .label__icon > svg {
            block-size: 1.5rem;
            color: oklch(60% 0.15 var(--hue));
            flex-shrink: 0;
            inline-size: 1.5rem;
        }

        /* The title content fills the row so its own layout (a space-between
           hstack, a trailing value) spans the full width; the leading icon and
           any trailing accessory keep their natural size. */
        & > .text,
        & > .stack {
            flex: 1 1 auto;
            min-inline-size: 0;
        }
    }

    /* A stack that directly holds marquee text (e.g. the title/subtitle vstack)
       must shrink below that text so the marquee can clip and scroll instead of
       forcing the row to overflow. Scoped to a direct-child marquee so a fixed
       trailing stack beside it keeps its natural size and isn't squashed. */
    .label .stack:has(> .marquee) {
        min-inline-size: 0;
    }
}