/* Aligns the ALTCHA widget with the inputs and theme colors of the auth card. */
.auth-card__body altcha-widget {
    --altcha-max-width: 100%;
    /* A single length: the widget uses it in calc() for its error popover. */
    --altcha-padding: 0.625rem;
    --altcha-border-radius: var(--radius-field);
    --altcha-border-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
    --altcha-color-base: color-mix(in oklch, white 55%, transparent);
    --altcha-color-base-content: var(--color-base-content);
    --altcha-color-neutral: color-mix(in oklch, var(--color-base-content) 12%, transparent);
    --altcha-color-success: var(--color-accent);
    --altcha-color-success-content: var(--color-accent-content);
    --altcha-color-error: var(--color-error);
    --altcha-checkbox-size: 20px;
    --altcha-checkbox-border-radius: 4px;
    --altcha-checkbox-border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
    --altcha-spinner-color: var(--color-accent);
    font-size: 0.9375rem;
    text-align: start;
}

/* Label and footer side by side; the footer wraps below on narrow screens. */
.auth-card__body altcha-widget .altcha-main {
    flex-flow: row wrap;
    align-items: center;
}

.auth-card__body altcha-widget .altcha-checkbox input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}