@layer components {
    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .field__label {
        font-size: 15px;
        font-weight: 500;
    }

    .field__control {
        box-sizing: border-box;
        width: 100%;
        min-height: 50px;
        padding: 0 14px;
        border: 1.5px solid var(--color-muted);
        border-radius: var(--radius-control);
        background: var(--color-white);
        color: var(--color-ink);
        font-size: 16px;
    }

    .field__control--multiline {
        min-height: 130px;
        padding-block: 12px;
        resize: vertical;
    }

    .field__control[aria-invalid="true"] {
        border-color: var(--color-error);
    }

    .field__error {
        color: var(--color-error);
        font-size: 14px;
    }

    .dark .field__label {
        color: var(--color-muted-on-dark);
        font-size: 14px;
    }

    .dark .field__control {
        min-height: 48px;
        background: var(--color-ink);
        color: var(--color-white);
    }

    .dark .field__control--multiline {
        min-height: 0;
    }

    .dark .field__control[aria-invalid="true"] {
        border-color: var(--color-error-border-on-dark);
    }

    .dark .field__error {
        color: var(--color-error-on-dark);
    }

    .form-frame {
        display: contents;
    }

    .form-alert {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border: 1.5px solid var(--color-error);
        border-radius: var(--radius-control);
        background: var(--color-white);
        font-size: 15px;
        line-height: 1.5;
    }

    .form-alert__message {
        color: var(--color-error);
        font-weight: 500;
    }

    .dark .form-alert {
        border-color: var(--color-error-border-on-dark);
        background: var(--color-ink);
    }

    .dark .form-alert__message {
        color: var(--color-error-on-dark);
    }

    .turnstile {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .turnstile--challenge {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}