@layer components {
    /* Mobile first: one column, every target ≥ 44 px, never wider than a comfortable line. No box
       around it (Broadsheet). Order: e-mail → consent → picture check → errors/status → button →
       fine print (the button never sits next to the address). */
    .newsletter-signup {
        --consent-box: 1.375rem;

        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        max-inline-size: 36rem;
    }

    .newsletter-signup__form {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .newsletter-signup[data-state='sending'] .newsletter-signup__form {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Done: the status line says what to do next; the rest of the form gives way to it. */
    .newsletter-signup[data-state='done'] .newsletter-signup__form > :not(.newsletter-signup__status) {
        display: none;
    }

    .newsletter-signup__email .input {
        min-block-size: 44px;
        inline-size: 100%;
    }

    .newsletter-signup .input[aria-invalid='true'] {
        border-color: var(--danger);
    }

    .newsletter-signup__consent {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .newsletter-signup__choice {
        display: flex;
        gap: var(--space-3);
        align-items: center;
        min-block-size: 44px;
        color: var(--color-text);
        cursor: pointer;

        & input {
            flex: none;
            inline-size: var(--consent-box);
            block-size: var(--consent-box);
            margin: 0;
            accent-color: var(--color-accent);
        }

        & input[aria-invalid='true'] {
            outline: 2px solid var(--danger);
            outline-offset: 2px;
        }
    }

    .newsletter-signup__text {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        line-height: 1.5;
    }

    /* Errors read as errors: the danger colour (Broadsheet's magenta 700, 6.5 : 1 on the paper) for
       the text and a rule on its leading edge. */
    .newsletter-signup__error {
        margin: var(--space-1) 0 0;
        padding-inline-start: var(--space-2);
        border-inline-start: 3px solid var(--danger);
        color: var(--danger);
        font-size: var(--text-s);
        font-weight: 600;
    }

    .newsletter-signup__consent .newsletter-signup__error {
        margin-inline-start: calc(var(--consent-box) + var(--space-3));
    }

    .newsletter-signup__captcha {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .newsletter-signup__submit {
        align-self: flex-start;
        min-block-size: 44px;
    }

    .newsletter-signup--compact {
        font-size: var(--text-s);
    }
}

/* ---------------------------------------------------------------------------------------------
   The picture check's own widget (IconCaptcha). Deliberately OUTSIDE every @layer — the one
   documented exception to "every stylesheet rule stays in a cascade layer" (CLAUDE.md): the
   library's stylesheet ships unlayered, and unlayered CSS beats every layer whatever its selector
   or order. Out here it is an ordinary specificity contest, which the leading
   .newsletter-signup wins (and the stylesheet is loaded only when the widget is mounted, later).
   Light only, like the rest of the site.
   --------------------------------------------------------------------------------------------- */

.newsletter-signup .iconcaptcha-widget {
    font-family: var(--font-body);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__header {
    border-block-end: 1px solid var(--color-border);
}

/* The library sets the instruction in 11 px bold for its own one-liner; ours is two lines and the
   one thing on the widget that has to be read. */
.newsletter-signup .iconcaptcha-widget .iconcaptcha-modal__header span {
    padding: 8px 0;
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 600;
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-init .iconcaptcha-modal__body-title {
    color: var(--color-text);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__body-subtitle {
    color: var(--color-text-muted);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-circle {
    border-color: var(--color-accent);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-checkmark svg {
    stroke: var(--color-accent);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-title {
    color: var(--color-accent);
}

/* A wrong pick is something to act on: the same danger colour and rule as the form's errors. */
.newsletter-signup .iconcaptcha-widget.iconcaptcha-error .iconcaptcha-modal__body-title {
    color: var(--danger);
}

.newsletter-signup .iconcaptcha-widget.iconcaptcha-error {
    border-inline-start: 3px solid var(--danger);
}