/* css.slopped.site exhibit: A form that tells you off, politely. From css/exhibits/validation.mjs. */
.x-validation .order { display: grid; gap: 16px; max-width: 520px; counter-reset: bad; }
.x-validation .order-intro { margin: 0; }
.x-validation .field { display: grid; gap: 4px; }
.x-validation label { font-weight: 700; }
.x-validation .req { color: var(--muted); font-weight: 400; }
.x-validation input, .x-validation select { min-height: 46px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font: 16px Arial, Helvetica, sans-serif; }
.x-validation .hint { color: var(--muted); font-size: 14px; }
.x-validation .err { display: none; color: var(--no); font-size: 14px; font-weight: 700; }
.x-validation .err::before { content: "✕ "; }
.x-validation .summary { margin: 0; font-weight: 700; }
.x-validation .sent { display: none; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--acid); color: var(--on-acid); }
.x-validation .sent:target { display: block; }
/* key */
/* :user-invalid waits until you've interacted; :invalid would shout at an empty form */
.x-validation :is(input, select):user-invalid { border-color: var(--no); border-width: 2.5px; background: color-mix(in srgb, var(--no) 8%, var(--paper)); }
.x-validation .field:has(:user-invalid) .err { display: block; }
.x-validation .field:has(:user-invalid) .hint { display: none; }
.x-validation .field:has(:user-valid) label::after { content: " ✓"; color: var(--yes); }

/* count what's wrong with counters, and say it once something is */
.x-validation .field:has(:user-invalid) { counter-increment: bad; }
.x-validation .order:has(:user-invalid) .summary::after {
  content: counter(bad) " to fix before it can go.";
  color: var(--no);
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-user-invalid .sup-no { display: none; }
@supports not selector(:user-invalid) { .sup-user-invalid .sup-yes { display: none; } .sup-user-invalid .sup-no { display: inline; } .sup-user-invalid { --sup: var(--no); } }
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }
.sup-counters .sup-no { display: none; }
@supports not (counter-increment: a) { .sup-counters .sup-yes { display: none; } .sup-counters .sup-no { display: inline; } .sup-counters { --sup: var(--no); } }