/* Focus underline field: a borderless field sitting on a 1px hairline that darkens when the field has focus.
   Measured on Sadewa (Framer form, contact_misc.css .fw): the line is an INSET box-shadow (inset 0 -1px 0), not a
   border, so focus, error and thickness changes never move a pixel of layout; it fades #d3d3d3 -> #131313 over
   .4s cubic-bezier(.44,0,.56,1). Error state (ours, the source has none): the line and a small message turn red;
   the message sits in the gap under the line (absolutely placed), so showing it doesn't push the form down either. */
.fuf {
  --fuf-line: #d3d3d3;            /* resting hairline */
  --fuf-line-focus: #131313;      /* focused hairline */
  --fuf-line-error: #d4372b;      /* invalid hairline + message */
  --fuf-w: 1px;                   /* hairline thickness at rest */
  --fuf-w-focus: 1px;             /* ... and on focus (the source keeps 1px) */
  --fuf-dur: .4s;
  --fuf-ease: cubic-bezier(.44, 0, .56, 1);
  --fuf-ink: #131313;             /* typed text */
  --fuf-placeholder: #b4b4b4;
  --fuf-label: #131313;
  --fuf-pad: 12px;                /* text padding above and below (left/right is 0: the text sits on the line's ends) */
  --fuf-gap: 4px;                 /* label to field */
  --fuf-font: 500 18px/21.6px ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fuf-tracking: -.03em;
  --fuf-label-font: 400 14px/14px ui-monospace, "Roboto Mono", Menlo, monospace;
  --fuf-label-case: uppercase;
  --fuf-error-font: 400 12px/16px ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fuf-error-dur: .2s;
  --fuf-area-h: 100px;            /* textarea starting height */
  position: relative; display: flex; flex-direction: column; gap: var(--fuf-gap); width: 100%; min-width: 0;
}
.fuf__label { font: var(--fuf-label-font); text-transform: var(--fuf-label-case); letter-spacing: 0; color: var(--fuf-label); }
.fuf__label i { font-style: normal; opacity: .45; }  /* "(optional)" marker */

/* the line: an inset shadow on the wrapper, so it takes no height and never shifts the text */
.fuf__wrap {
  position: relative; display: flex; align-items: center;
  box-shadow: inset 0 calc(var(--fuf-w) * -1) 0 var(--fuf-line);
  transition: box-shadow var(--fuf-dur) var(--fuf-ease);
}
.fuf__wrap:focus-within, .fuf.is-active .fuf__wrap { box-shadow: inset 0 calc(var(--fuf-w-focus) * -1) 0 var(--fuf-line-focus); }
.fuf.is-invalid .fuf__wrap,
.fuf__wrap:has(> [aria-invalid="true"]) { box-shadow: inset 0 calc(var(--fuf-w-focus) * -1) 0 var(--fuf-line-error); }

.fuf__wrap > input, .fuf__wrap > select, .fuf__wrap > textarea {
  box-sizing: border-box; width: 100%; min-width: 0; margin: 0; border: 0; outline: 0; border-radius: 0; background: none;
  font: var(--fuf-font); letter-spacing: var(--fuf-tracking); color: var(--fuf-ink); padding: var(--fuf-pad) 0;
  -webkit-appearance: none; appearance: none;
}
.fuf__wrap > input::placeholder, .fuf__wrap > textarea::placeholder { color: var(--fuf-placeholder); opacity: 1; }
.fuf__wrap > textarea { display: block; height: var(--fuf-area-h); min-height: var(--fuf-area-h); resize: vertical; }
.fuf__wrap > select { padding-right: 24px; cursor: pointer; }
.fuf__wrap > select:invalid { color: var(--fuf-placeholder); }
.fuf__wrap > select option { color: var(--fuf-ink); }
.fuf__chev { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--fuf-ink); pointer-events: none; }
/* browser autofill paints a coloured box; keep the field clear so the line stays the only edge */
.fuf__wrap > input:-webkit-autofill { -webkit-text-fill-color: var(--fuf-ink); transition: background-color 600000s 0s; }

/* error message: hangs in the gap under the line (give fields >= 22px of gap), fades in, no reflow */
.fuf__error {
  position: absolute; left: 0; right: 0; top: 100%; padding-top: 6px;
  font: var(--fuf-error-font); color: var(--fuf-line-error);
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity var(--fuf-error-dur) var(--fuf-ease), transform var(--fuf-error-dur) var(--fuf-ease);
}
.fuf.is-invalid .fuf__error { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fuf__wrap, .fuf__error { transition-duration: 0s; }
}