/* <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). `width: 100%` fills
   whichever container the caller gives it — the kit itself has no
   opinion on a maximum width; a page that wants one narrower than its
   own layout caps it at the layout level (`CreateAgentForm.css`'s
   `.create-agent-form-col` is the existing example), same reasoning
   `Panel` has no width opinion of its own either. `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.

   The field wrapper repeats `.ui-form-control`'s own `width: 100%`
   rather than leaving the wrapper unconstrained: inside a shrink-to-fit
   flex column (`CreateAgentForm`'s form is one), an unconstrained
   wrapper sizes to its own content — and a `width: 100%` *control*
   inside an auto-width wrapper resolves against that shrunk width, not
   the container the page actually gave it, so two fields with
   differently-long labels ("agent name" vs "hive") ended up with
   differently-wide inputs — the misalignment mara reported on the
   create-agent form. Matching the two declarations here means every
   field's control width is driven by the same container width
   regardless of its label's length or its siblings'. */
.ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: 100%;
}
.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%;
  box-sizing: border-box;
  min-height: 2.75em;
}