/* <FormField> — label stacked above its control, plus the shared
   `.ui-form-control` chrome every text/select input in the kit draws
   from (one class, so the two never drift). `max-width` + `width: 100%`
   rather than a fixed `width`: caps the control on a wide desktop
   viewport without forcing an overflow on a narrow/touch one.
   `min-height` is a touch-target floor (44px at the default 16px root
   font — WCAG 2.5.5's minimum), not a visual choice — it's the same on
   every control in the kit whether or not it's ever used on a touch
   device, since the alternative is a component that behaves differently
   per input method. Colours are the shared base16-derived vars
   (../../theme.css), never literal. */
.ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.ui-form-field-label {
  font-size: 0.85em;
  color: var(--muted);
}
.ui-form-control {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--purple-dim);
  border-radius: 0.3em;
  padding: 0.4em 0.6em;
  font: inherit;
  width: 100%;
  max-width: 16em;
  box-sizing: border-box;
  min-height: 2.75em;
}