/*
 * nice-forms.css: error messages for nice-forms.js. Each site sets its own colors with these (all optional):
 *   --nf-error (text + border), --nf-on-error (the "!" on the badge), --nf-error-bg (message background), --nf-ok (fixed field), --nf-radius
 * Source of truth: /opt/freelab/nice-forms
 */
.field-err {
  --_e: var(--nf-error, #c0392b);
  display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%;
  margin: 6px 0 0; padding: 6px 12px 6px 8px; border-radius: var(--nf-radius, 10px);
  background: var(--nf-error-bg, color-mix(in srgb, var(--_e) 11%, transparent));
  color: var(--_e); font-size: .9rem; font-weight: 550; line-height: 1.4;
  animation: nf-in .2s ease-out;
}
.field-err[hidden] { display: none; }
/* A round "!" badge, so the message isn't told by color alone */
.field-err::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 1.3em; height: 1.3em; margin-top: .02em;
  border-radius: 50%; background: var(--_e); color: var(--nf-on-error, #fff); font-size: .82em; font-weight: 800; line-height: 1;
}
.field-err.nf-leaving { animation: nf-out .18s ease-in forwards; }
@keyframes nf-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes nf-out { to { opacity: 0; transform: translateY(-4px); } }

/* The field itself: shown only after the visitor has had a go (never on page load) */
:is(input, select, textarea)[aria-invalid="true"],
:is(input, select, textarea):user-invalid {
  border-color: var(--nf-error, #c0392b) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-error, #c0392b) 20%, transparent);
}
:is(input, select, textarea)[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-error, #c0392b) 32%, transparent);
}
/* Fixed it: a brief green edge */
:is(input, select, textarea)[data-nf-touched]:required:user-valid:not(:focus) { border-color: var(--nf-ok, #1d7a45); }

/* A little shake when you try to send with this one wrong */
.nf-shake { animation: nf-shake .32s ease-in-out; }
@keyframes nf-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
@media (prefers-reduced-motion: reduce) { .field-err, .field-err.nf-leaving, .nf-shake { animation: none; } }