/*
 * Form validation states — Stripe-style inline validation visuals.
 *
 * Default border keeps the existing .form-input neutral style. The
 * invalid state switches to a deep, muted brick-red (#B23A2E) — bright
 * enough to be unmistakable, restrained enough to fit the AMC palette.
 * No green tick on success: a successful field simply returns to its
 * default border, which is the calmest possible affordance.
 *
 * Helper text lives in `<span class="form-field__error">` directly after
 * the input. Visibility is class-driven (.is-visible) so the slide-down
 * transition can play. The [hidden] attribute is also respected as a
 * belt-and-braces fallback for screen readers that ignore display:none
 * via class but honour the explicit attribute.
 *
 * Brand tokens used:
 *   #B23A2E  — error red (single-purpose, only here)
 *   #C9A961  — champagne, focus outline (inherited from global focus rule)
 *   #1A1410  — ink black, label colour (inherited from form-label)
 */

.form-field--invalid .form-input,
.form-field--invalid .form-select,
.form-field--invalid .form-textarea,
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color: #B23A2E;
    transition: border-color var(--amc-motion-fast, 240ms) var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

.form-field--invalid .form-input:focus,
.form-field--invalid .form-select:focus,
.form-field--invalid .form-textarea:focus,
.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
    outline-color: #B23A2E;
}

.form-field__error {
    display: block;
    margin-top: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #B23A2E;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 320ms var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity 260ms var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
        margin-top 320ms var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.form-field__error.is-visible {
    max-height: 80px;
    opacity: 1;
    margin-top: 6px;
}
.form-field__error[hidden] {
    /* Hard-hide when both the [hidden] attribute is set AND the
     * .is-visible class is absent. Some screen readers ignore CSS
     * display:none triggered via attribute selectors but always respect
     * the hidden attribute itself. */
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .form-field__error { transition: none; }
    .form-input[aria-invalid="true"],
    .form-select[aria-invalid="true"],
    .form-textarea[aria-invalid="true"] { transition: none; }
}