@layer blocks {
    .booking-offer {
        container-type: inline-size;
        display: grid;
        gap: var(--space-unit);
        max-width: 48rem;
    }

    .booking-offer-name {
        margin: 0;
    }

    .booking-price {
        margin: 0;
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .booking-conditions,
    .booking-session-form {
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        padding: calc(var(--space-unit) * 0.5) var(--space-unit);
    }

    .booking-conditions summary,
    .booking-session-form summary {
        cursor: pointer;
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .booking-closed {
        margin: 0;
        color: var(--tone-muted);
    }

    .booking-sessions {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .booking-session {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-unit);
        align-items: start;
    }

    .booking-session-body {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        min-width: 0;
    }

    .booking-session-when,
    .booking-session-seats {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .booking-session-closes {
        display: block;
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .booking-session-full {
        font-weight: 600;
    }

    .booking-form {
        display: grid;
        gap: var(--space-unit);
        margin-top: var(--space-unit);
    }

    /* Out of sight and out of the tab order, but still in the form a bot fills. */
    .booking-form .field-honeypot {
        position: absolute;
        left: -100vw;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .booking-participants {
        display: grid;
        gap: var(--space-unit);
    }

    .booking-participant,
    .booking-booker {
        display: grid;
        gap: calc(var(--space-unit) * 0.75);
        margin: 0;
        padding: var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
    }

    .booking-participant legend,
    .booking-booker legend {
        padding: 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .booking-participant-add,
    .booking-participant-remove {
        justify-self: start;
    }

    /* The display of .button would show a hidden button. */
    .booking-participant-add[hidden] {
        display: none;
    }

    .booking-privacy,
    .booking-waitlist-note {
        margin: 0;
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .booking-page,
    .booking-sent,
    .booking-status {
        max-width: 40rem;
    }

    .booking-page-offer {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .booking-sent-text {
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .booking-status-facts,
    .booking-status-answers {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .booking-status-facts dt,
    .booking-status-answers dt {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .booking-status-facts dd,
    .booking-status-answers dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .booking-status-state {
        font-weight: 600;
    }

    .booking-status-payment {
        white-space: pre-line;
    }

    .booking-status-participants {
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding-left: calc(var(--space-unit) * 1.25);
    }

    .booking-status-action {
        margin: 0;
    }

    .event-booking {
        container-type: inline-size;
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        max-width: 48rem;
    }

    .event-booking-title,
    .event-booking-offer-name {
        margin: 0;
    }

    .event-booking-offer {
        display: grid;
        gap: var(--space-unit);
    }

    .event-booking-price {
        margin: 0;
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .event-booking-closed {
        margin: 0;
        color: var(--tone-muted);
    }

    @container (max-width: 24rem) {
        .booking-session {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}