/**
 * FormErrors - server validation error display, for forms without FormState field tracking.
 *
 * Own --fe-* tokens and fe- classes on purpose: this file must stand alone on forms that never
 * load form-state.css (plain ApiSubmit forms are exactly the ones FormErrors exists for). The
 * defaults mirror the FormState design guide's error values (Bootstrap 5 palette) so the two
 * displays read identically when both are on a page.
 */
:root {
  --fe-error:      #dc3545; /* validation / save failure */
  --fe-error-soft: rgba(220, 53, 69, 0.08);
  --fe-icon-width: 1.75rem;
}

/* ---------------------------------------------------------------- the status line */

/* Block-level flex with a fixed height, the fs-status contract: appearing and clearing never
   shifts the form around it. */
.fe-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  overflow: hidden;
}

.fe-status .fe-status-icon {
  width: var(--fe-icon-width);
  text-align: center;
  flex: 0 0 var(--fe-icon-width);
  line-height: 1;
}

.fe-status--error { color: var(--fe-error); }

/* ---------------------------------------------------------------- per-field marks */

.fe-field--invalid input, .fe-field--invalid select, .fe-field--invalid textarea {
  border-color: var(--fe-error);
  background-color: var(--fe-error-soft);
}

/* The message right next to the input - colors over words, but with the words too. */
.fe-field-msg {
  font-size: 0.875rem;
  color: var(--fe-error);
  margin-top: 0.125rem;
}