@layer components {
    .actions {
        display: grid;
        gap: 1rem;
    }

    /* Compact: a pinned, full-width bottom bar (the iOS toolbar pattern). */
    @media (max-width: 47.999rem) {
        .actions {
            background: linear-gradient(
                transparent,
                light-dark(oklch(95% 0% 0deg), oklch(10% 0% 0deg))
            );
            bottom: 0;
            inset-inline: 0;
            padding-block-end: 2rem;
            padding-block-start: 1rem;
            padding-inline: 1rem;
            position: fixed;
            z-index: 2;
        }

        /* Reserve room so the pinned bar never hides the end of the content. */
        main:has([data-component="actions"]) {
            padding-block-end: 6rem;
        }
    }

    /* Regular: inline with the content, trailing-aligned (next to its form). */
    @media (min-width: 48rem) {
        .actions {
            display: flex;
            justify-content: end;
        }
    }
}