/* purpose: form group wrapper — replaces inline `style="margin-bottom: 1rem"`
   on the <div> wrapping a label+input pair (keg_new.html, keg_settings.html). */
.form-row {
  margin-bottom: 1rem;
}

/* purpose: small uppercase-ish form label sitting above its input —
   replaces the multi-line inline `display: block; font-size: 0.85rem;
   color: var(--text-muted); margin-bottom: 0.35rem;` cluster used on
   <label> elements in keg_new.html, keg_settings.html, keg_nodes.html
   (search), and partials/node_edit.html. */
.form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

/* purpose: muted help text rendered below an input — replaces the
   inline `font-size: 0.8rem; color: var(--text-muted); margin-top:
   0.35rem` cluster used twice in keg_new.html. */
.form-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* purpose: full-width text/search input with the bg-elevated surface —
   replaces the multi-line inline `width: 100%; padding: 0.5rem 0.75rem;
   background: var(--bg-elevated); color: var(--text); border: 1px solid
   var(--border); border-radius: 6px; font-size: 0.95rem;` cluster used
   in keg_new.html (alias, title), keg_settings.html (title),
   keg_nodes.html (search). */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* purpose: compact input on the auth pages — replaces the multi-line
   inline `padding: 0.5rem; border-radius: 6px; border: 1px solid
   var(--border); background: var(--bg-deep); color: var(--text);` cluster
   used in login.html and register.html. Distinct from .form-input
   because the auth surface uses --bg-deep rather than --bg-elevated and
   has tighter padding. */
.form-input-auth {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text);
}

/* purpose: vertical flex stack used by labels on login/register that
   wrap a small <span> caption above an <input> — replaces the inline
   `display: flex; flex-direction: column; gap: 0.25rem` cluster. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* purpose: small muted caption rendered as the first child of a
   .form-field <label> — replaces the inline `font-size: 0.85rem;
   color: var(--text-muted)` on the <span> caption. */
.form-field-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* purpose: extra-small muted helper rendered as the last child of a
   .form-field <label> — replaces the inline `font-size: 0.75rem;
   color: var(--text-muted)` on register.html's username/password
   constraints. */
.form-field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* purpose: vertical auth form with consistent gap and a small top
   margin — replaces the inline `display: flex; flex-direction: column;
   gap: 0.75rem; margin-top: 1rem` on the <form> in login.html and
   register.html. */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* purpose: textarea used by the node editor — replaces the multi-line
   inline cluster on partials/node_edit.html (full-width, monospace,
   min-height 24rem, vertical-resize). */
.form-textarea {
  width: 100%;
  min-height: 24rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

/* purpose: token-create form on account.html — horizontal row of input
   + button + caption that wraps; replaces the inline `margin-bottom:
   1.5rem; display: flex; gap: 0.5rem; align-items: flex-start;
   flex-wrap: wrap;` cluster. */
.form-inline {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* purpose: visually-hidden label kept for accessibility — replaces the
   inline `display: none` on the token-name <label> in account.html. */
.form-label-hidden {
  display: none;
}