@layer components {
    /*
     * Asked once, pinned to the bottom of the page.
     *
     * Bottom rather than a centre overlay: the player is a full-screen UI held in a car
     * mount, and a modal in the middle of it would cover the one control that matters. The
     * banner sits under the thumb instead, where answering it is the same gesture as using
     * the app.
     */
    .cookie-banner {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 100;
        display: grid;
        gap: var(--space-s);
        /* The safe-area padding is on <body>, which a fixed element escapes — without this
           the buttons sit under the home indicator and the first tap does nothing. */
        padding: var(--space-m) calc(var(--space-m) + env(safe-area-inset-right))
                 calc(var(--space-m) + env(safe-area-inset-bottom)) calc(var(--space-m) + env(safe-area-inset-left));
        border-block-start: 1px solid var(--color-border);
        background-color: var(--color-surface);
        color: var(--color-text);
        box-shadow: 0 -8px 24px rgb(0 0 0 / 25%);
    }

    .cookie-banner__text {
        display: grid;
        gap: var(--space-2xs);
        max-inline-size: 42rem;
        margin-inline: auto;
        inline-size: 100%;
    }

    .cookie-banner__lead {
        margin: 0;
        font-weight: 600;
    }

    .cookie-banner__detail {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);

        & a {
            color: var(--color-text);
            text-decoration: underline;
            text-decoration-color: var(--color-accent);
        }
    }

    .cookie-banner__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        max-inline-size: 42rem;
        inline-size: 100%;
        margin-inline: auto;
    }

    .cookie-banner__action {
        flex: 1 1 10rem;
        /* Both answers are the same size. A "refuse" button made small or pale is the kind of
           dark pattern this banner exists to not be. */
        min-block-size: 3rem;
        padding-inline: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background-color: transparent;
        font-size: var(--text-m);
        cursor: pointer;
    }

    .cookie-banner__action--primary {
        border-color: transparent;
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-weight: 600;
    }
}