@layer components {
    /* Asked once, pinned to the bottom, never a centred modal over the book. */
    .cookie-banner {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 100;
        display: grid;
        gap: var(--space-s);
        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);
        box-shadow: 0 -8px 24px rgb(0 0 0 / 15%);
    }

    .cookie-banner__text,
    .cookie-banner__actions {
        inline-size: 100%;
        max-inline-size: 42rem;
        margin-inline: auto;
    }

    .cookie-banner__text {
        display: grid;
        gap: var(--space-2xs);
    }

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

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

    .cookie-banner__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .cookie-banner__action {
        flex: 1 1 10rem;
        min-block-size: 3rem;
        padding-inline: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background-color: transparent;
        cursor: pointer;
    }

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