/* Field validation (BNN, 2026-10-24): our own message under the field instead of the browser's grey bubble
   ("Please fill in this field."). Rules: DESIGN-SYSTEM.md section 4.7.
   - the message sits under the field, in the site's own type (Helvetica Neue 400, 14/20, .4px), no icon, no box
   - the field's line turns the error colour and gets thicker: the same language as the focus line (no rectangles)
   - it appears with a short fade (.18 s), no shaking, nothing jumps (the footer keeps room for it)
   - colour is never the only signal: the text says what to do, the field is marked aria-invalid */
:root { --bnn-error: #ff2d2d; }                  /* saturated red (HSL 0, 100%, 59%) on the black scenes: 5.7:1 */
.color-scheme-1, .color-scheme-2 { --bnn-error: #cc0000; }   /* saturated red on the light Dawn pages (contact, cart): 5.9:1 on white */

.bnn-error {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  font-family: "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;      /* 300 looks thin and dim in red on black */
  letter-spacing: .4px;
  text-align: left;
  text-transform: none;
  color: var(--bnn-error);
  animation: bnn-error-in .18s ease-out;
}
.bnn-error[hidden] { display: none; }
@keyframes bnn-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The line under the field. !important: the theme and the footer set the focus line with higher specificity,
   and an invalid field must show the error colour even while it has the focus. */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-bottom-color: var(--bnn-error) !important;
  box-shadow: 0 1px 0 0 var(--bnn-error) !important;
}
/* Dawn draws the contact-page field border with ::after */
.field.bnn-invalid::after { box-shadow: 0 0 0 .1rem var(--bnn-error) !important; }
.field.bnn-invalid:hover::after { box-shadow: 0 0 0 .1rem var(--bnn-error) !important; }
.field.bnn-invalid .field__label { color: var(--bnn-error); }

/* The footer keeps 24px for the message (--ft-error-room in banan-footer.css): 4 + 20 fits exactly, the page never moves. */
footer.footer .bnn-error { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bnn-error { animation: none; }
}