@layer blocks {
    /* The bar waits for the script, which alone can keep the choice; without it the page has no bar. */
    .consent:not([data-ready]),
    .consent-bar:not([data-open]),
    .consent-reopen {
        display: none;
    }

    .consent[data-ready] > .consent-bar:not([data-open]) + .consent-reopen {
        display: block;
    }

    .consent-bar {
        container-type: inline-size;
        position: fixed;
        z-index: 20;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        max-height: 100dvh;
        overflow-y: auto;
        padding: calc(var(--space-unit) * 1.5);
        border-top: 1px solid var(--tone-border);
        background: var(--tone-bg);
        color: var(--tone-fg);
        font-family: var(--font-ui);
    }

    .consent-text {
        max-width: 48rem;
        margin: 0 0 var(--space-unit);
    }

    .consent-privacy {
        display: inline-block;
        margin: 0 0 var(--space-unit);
        color: var(--tone-link);
    }

    .consent-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-unit);
        align-items: stretch;
    }

    .consent-details {
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        padding: var(--space-unit);
    }

    .consent-summary {
        cursor: pointer;
    }

    .consent-categories {
        display: grid;
        gap: var(--space-unit);
        margin: var(--space-unit) 0;
        padding: 0;
        border: 0;
    }

    .consent-category {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: calc(var(--space-unit) * 0.5);
    }

    .consent-name {
        font-weight: 600;
    }

    .consent-help {
        grid-column: 2;
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .consent-reopen {
        position: fixed;
        z-index: 20;
        bottom: var(--space-unit);
        left: var(--space-unit);
        padding: calc(var(--space-unit) * 0.5) var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        background: var(--tone-card);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        cursor: pointer;
    }

    @container (min-width: 40rem) {
        .consent-actions {
            flex-flow: row wrap;
            align-items: flex-start;
        }

        .consent-details {
            flex-basis: 100%;
        }
    }
}