/* <CreateAgentForm> — the create-agent form, rendered inside a `Dialog`
   from `AgentsPage` (see that component's file-top comment for why).
   Input/button chrome comes from the shared `ui/` form kit
   (`TextField`/`SelectField`/`Button`); this file only owns this
   component's own layout + copy. Column,
   not row inside the form itself: with a second field (hive) added, a
   row layout put fields of different natural widths on one baseline and
   looked misaligned — mara: "make it a col". Reuses the same base16
   slots (../theme.css) every other component draws from.

   This layout dropped an explicit page `max-width` after a few rounds:
   first added so bare `Panel` (no width opinion of its own) wouldn't
   fill `.shell-body`'s full 60em column behind a narrow form (the
   original "weird empty space" complaint), then widened for two panels
   side by side — but once both were equal-width flex children that cap
   itself became "doesn't fill the space" (mara: "the cards are neither
   centered nor fill the space tho"). Removing it lets the row fill
   `.shell-body`'s own width like most pages — nothing sits off-center
   once nothing is narrower than the row.

   `.create-agent-form-col`/`.create-agent-info-col` are equal-sized
   (`flex: 1 1 0` — zero basis so the 1.5em `gap` splits the row evenly,
   not each column keeping its natural content width) per mara's "both
   cards should be equal sized". `min-width` is the wrap threshold below
   which the row goes single-column instead (info card moving under the
   form) — no separate media query needed. Inputs fill their whole
   column now too ("inputs should fill full card width") — the kit's
   `.ui-form-control`/`.ui-form-field` dropped their old 16em cap for
   exactly this (../ui/form-field/FormField.css). */
.create-agent-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5em;
}
.create-agent-form-col,
.create-agent-info-col {
  flex: 1 1 0;
  min-width: 16em;
}
.create-agent-intro {
  margin: 0 0 1.5em;
  color: var(--muted);
}
.create-agent-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75em;
}
.create-agent-result {
  margin-top: 1em;
}
.create-agent-result-ok {
  color: var(--green);
}