@layer components {
    /*
     * The "change your mind" box on the cookie notice.
     *
     * Deliberately looks like part of the page and not like a widget: it is the answer to a
     * question the page just spent six paragraphs explaining, and a boxed-off control panel
     * reads as something separate from the text that justifies it.
     */
    .cookie-choice {
        display: grid;
        gap: var(--space-s);
        max-inline-size: 42rem;
        margin: var(--space-xl) auto 0;
        padding: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-m);
        background-color: var(--color-surface);
    }

    .cookie-choice__title {
        margin: 0;
        font-size: var(--text-m);
    }

    .cookie-choice__state {
        margin: 0;
    }

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

    .cookie-choice__action {
        flex: 1 1 12rem;
        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-choice__action--primary {
        border-color: transparent;
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-weight: 600;
    }

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

        & code {
            font-family: ui-monospace, monospace;
        }
    }
}