/* ns-field-feedback.css — OPUS5-M09
 * ---------------------------------------------------------------------------
 * One look for "this field is wrong", across all four of the estate's form
 * dialects (ns-form-*, nsst-*, ua-*, Bootstrap .form-control / .auth-v2-input).
 *
 * It is deliberately SMALL and ADDITIVE. It does not restyle inputs, labels,
 * spacing or layout — that would fight ns-forms.css and four page stylesheets
 * at once. It styles exactly two new things (.ns-field-error and its summary)
 * and adds the red border/ring to whatever input carries .is-invalid.
 *
 * The visual language is lifted from the design system's own error treatment
 * (public/css/ns-forms.css:235 — 12px, ⚠ glyph, #ef4444, 2px ring at 14% alpha)
 * so a creator who sees an error on the stitch door and an error on the settings
 * tab is looking at the same thing, not two different products.
 *
 * Calm, not shouty: no shake animation, no all-caps, no red panel behind the
 * field. The message appears under the field, in the field's own rhythm, and
 * says what to do.
 */

:root {
  --ns-field-error-color: var(--ns-form-error, var(--ns-error, #ef4444));
  --ns-field-error-ring: rgba(239, 68, 68, 0.14);
  --ns-field-error-wash: rgba(239, 68, 68, 0.08);
}

/* ---------- the message, under the field it belongs to ---------- */

.ns-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  /* 6px clears the input's focus ring; the message belongs to the field above
     it, so the gap below is larger than the gap above. */
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--ns-text-xs, 12px);
  line-height: var(--ns-leading-normal, 1.5);
  color: var(--ns-field-error-color);
  /* Long copy wraps rather than stretching a grid column. */
  overflow-wrap: anywhere;
}

.ns-field-error::before {
  content: '⚠';
  flex: 0 0 auto;
  /* Optically aligns the glyph with the first line of text rather than the
     top of the box. */
  margin-top: 1px;
  font-size: 11px;
  line-height: inherit;
}

/* ---------- the summary: errors whose field is not on this page ---------- */

/* A 422 naming a field the form does not render used to vanish, leaving the
   creator with a banner and nothing highlighted — a dead end. Anything the
   client cannot place under a field lands here instead, still readable. */
.ns-field-error-summary {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ns-field-error-color) 40%, transparent);
  border-left-width: 3px;
  border-radius: var(--ns-radius-md, 8px);
  background: var(--ns-field-error-wash);
}

.ns-field-error-summary:empty {
  display: none;
}

.ns-field-error-summary .ns-field-error {
  margin: 0;
}

.ns-field-error-summary .ns-field-error + .ns-field-error {
  margin-top: 6px;
}

/* ---------- the red state on the control itself ---------- */

/* Listed per dialect rather than as a bare `.is-invalid` so this file can never
   repaint an input that some other page already owns the invalid state for. */
.ns-form-input.is-invalid,
.ns-form-textarea.is-invalid,
.ns-form-select.is-invalid,
.nsst-input.is-invalid,
.nsst-textarea.is-invalid,
.nsst-select.is-invalid,
.ua-input.is-invalid,
.ua-textarea.is-invalid,
.ua-select.is-invalid,
.auth-v2-input.is-invalid,
.auth-v2-select.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--ns-field-error-color) !important;
  box-shadow: 0 0 0 2px var(--ns-field-error-ring);
}

/* Focus on an errored field keeps the red — the ring gets brighter rather than
   turning back to the accent colour, so fixing it feels like the state changing
   rather than the error disappearing on focus. */
.ns-form-input.is-invalid:focus,
.ns-form-textarea.is-invalid:focus,
.ns-form-select.is-invalid:focus,
.nsst-input.is-invalid:focus,
.nsst-textarea.is-invalid:focus,
.ua-input.is-invalid:focus,
.ua-textarea.is-invalid:focus,
.ua-select.is-invalid:focus,
.auth-v2-input.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

/* A label whose group is in error leans red without shouting. */
.ns-has-error > .ns-form-label,
.ns-has-error > .nsst-label,
.ns-has-error > .ua-label,
.ns-has-error > label {
  color: var(--ns-field-error-color);
}

/* ---------- 375px ---------- */

/* The narrowest supported width. The message must stay on its own lines under
   the field and never push the control off-screen. */
@media (max-width: 480px) {
  .ns-field-error {
    font-size: 12px;
    line-height: 1.45;
  }

  .ns-field-error-summary {
    padding: 10px 12px;
    margin-bottom: 12px;
  }
}

/* ---------- reduced motion / high contrast ---------- */

@media (prefers-contrast: more) {
  .ns-field-error {
    color: #ff6b6b;
  }

  .ns-field-error-summary {
    border-color: #ff6b6b;
  }
}