/* grodan.app — fältvalidering, delad av startsidan och /dagverksamheter.
 *
 * Färgerna kommer från sidans egna tokens (--rule, --green-deep, --green-tint),
 * som definieras i respektive mall. Felröd är samma par som .form-msg.error
 * redan använder, så sidan får inte en andra röd.
 *
 * Felmeddelandet ligger ALLTID i markupen och döljs med display:none. Det gör
 * att aria-describedby kan peka på ett element som finns från början, och att
 * ingenting hoppar till när texten dyker upp — raden är redan inräknad. */

.field-error {
  display: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: #7a2e1c;
  margin: 6px 0 0;
}

.field.is-invalid .field-error { display: block; }

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: #b23b3b;
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  border-color: #b23b3b;
  box-shadow: 0 0 0 3px #f4e0d8;
}

/* Fälten ligger under en fast etikett, så ett felmeddelande som dyker upp får
   inte knuffa resten av formuläret. Utrymmet reserveras inte (det skulle ge
   luft som ser ut som ett misstag) — i stället är meddelandet kort nog att
   rymmas på en rad i kortets bredd. */
@media (prefers-reduced-motion: no-preference) {
  .field.is-invalid .field-error { animation: fel-in 0.16s ease-out; }
  @keyframes fel-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
  }
}