/* Form fields: floating labels and validation states. Boxed by default; .ff-line (on the field or any parent) draws a
   single rule instead. Colours from --ui-* then --sx-*; --ui-error and --ui-ok for the two states (set them for a
   dark ground). The label floats on focus or once there is a value (:placeholder-shown, so fields.js gives every
   field a blank placeholder). */
.ff { --_g: var(--ui-ground, var(--sx-ground, #fff)); --_i: var(--ui-ink, var(--sx-ink, #121212)); --_a: var(--ui-accent, var(--sx-accent, #121212));
  --_mu: var(--ui-mute, var(--sx-mute, color-mix(in srgb, var(--_i) 66%, var(--_g)))); --_line: color-mix(in srgb, var(--_i) 30%, transparent);
  --_t: var(--ui-text, var(--sx-text, system-ui, sans-serif)); --_rad: calc(var(--ui-radius, var(--sx-radius, 14px)) * .7);
  --_err: var(--ui-error, #B42318); --_ok: var(--ui-ok, #23704A); --_ease: var(--t-ease, cubic-bezier(.16, 1, .3, 1)); --_ms: var(--t-hover, 300ms);
  position: relative; display: grid; margin: 0 0 6px; font: 400 16px/1.4 var(--_t); color: var(--_i); }
.ff-in { grid-area: 1 / 1; width: 100%; min-height: 58px; box-sizing: border-box; margin: 0; padding: 24px 44px 8px 16px; font: inherit; color: inherit;
  background: transparent; border: 1.5px solid var(--_line); border-radius: var(--_rad); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--_ms) ease, box-shadow var(--_ms) ease; }
textarea.ff-in { min-height: 132px; padding-top: 28px; resize: vertical; }
.ff-in::placeholder { color: transparent; }
.ff-in:hover { border-color: color-mix(in srgb, var(--_i) 50%, transparent); }
.ff-in:focus-visible, .ff-in:focus { border-color: var(--_i); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_a) 28%, transparent); }
.ff-label { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 18px 0 0 17px; padding: 0; pointer-events: none; color: var(--_mu);
  transform-origin: 0 0; transition: translate var(--_ms) var(--_ease), scale var(--_ms) var(--_ease), color var(--_ms) ease; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff.is-required .ff-label::after { content: " *"; color: var(--_mu); }
/* Floated: on focus, with a value, for a select, or a date (which always shows its own pattern). */
.ff-in:focus + .ff-label, .ff-in:not(:placeholder-shown) + .ff-label, .ff-select .ff-label, .ff-in[type="date"] + .ff-label, .ff.has-value .ff-label {
  translate: 0 -10px; scale: .78; color: var(--_i); font-weight: 600; }
.ff-select .ff-in { padding-right: 44px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 17px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ff-hint, .ff-msg { grid-column: 1; margin: 6px 2px 0; font-size: 14px; line-height: 1.35; }
.ff-hint { color: var(--_mu); }
.ff-msg { color: var(--_err); font-weight: 500; min-height: 0; }
.ff-msg:empty { display: none; }
.ff-msg:not(:empty)::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 6px -2px 0; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff'/%3E%3Cpath d='M8 4v5' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat luminance; }
.ff-count { grid-column: 1; justify-self: end; margin: 4px 2px 0; font-size: 12px; color: var(--_mu); font-variant-numeric: tabular-nums; }
.ff.is-near .ff-count { color: var(--_err); }
/* States: an error marks the field and its label; a correct field earns a small tick. */
.ff.is-invalid .ff-in { border-color: var(--_err); }
.ff.is-invalid .ff-in:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--_err) 22%, transparent); }
.ff.is-invalid .ff-label { color: var(--_err); }
.ff.is-invalid { animation: ff-nudge calc(var(--_ms) * 1.2) var(--_ease); }
.ff::after { content: ""; grid-area: 1 / 1; align-self: start; justify-self: end; width: 18px; height: 18px; margin: 20px 16px 0 0; pointer-events: none;
  background: var(--_ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; scale: .5; transition: opacity var(--_ms) ease, scale var(--_ms) var(--_ease); }
.ff.is-valid::after { opacity: 1; scale: 1; }
.ff-select::after, .ff-check::after { display: none; }
.ff-in:disabled { opacity: .5; cursor: not-allowed; }
@keyframes ff-nudge { 30% { translate: -4px 0; } 60% { translate: 3px 0; } }

/* A checkbox (consent, "send me the newsletter"): the box, then the label beside it. */
.ff-check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.ff-check .ff-in { grid-area: auto; width: 22px; min-height: 0; height: 22px; padding: 0; margin: 1px 0 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.ff-check .ff-in::after { content: ""; width: 12px; height: 12px; background: var(--_g); clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 40% 70%); scale: 0; transition: scale .2s var(--_ease); }
.ff-check .ff-in:checked { background: var(--_i); border-color: var(--_i); }
.ff-check .ff-in:checked::after { scale: 1; }
.ff-check .ff-label { grid-area: auto; margin: 0; translate: none !important; scale: none !important; color: var(--_i) !important; font-weight: 400 !important; white-space: normal; pointer-events: auto; cursor: pointer; max-width: none; }
.ff-check .ff-msg, .ff-check .ff-hint { grid-column: 2; }

/* The single-rule version. */
.ff-line .ff-in, .ff.ff-line .ff-in { border-width: 0 0 1.5px; border-radius: 0; padding-left: 0; padding-right: 32px; }
.ff-line .ff-in:focus, .ff.ff-line .ff-in:focus { box-shadow: 0 1.5px 0 0 var(--_i); }
.ff-line .ff-label, .ff.ff-line .ff-label { margin-left: 0; }
.ff-line .ff::after, .ff.ff-line::after { margin-right: 2px; }
.ff-line .ff-check .ff-in { border-width: 1.5px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { .ff, .ff-in, .ff-label, .ff::after { transition: none; animation: none !important; } }