/* purpose: horizontal flex row with the most common gap seen in
   templates (0.5rem) — covers `display: flex; gap: 0.5rem; ...`
   clusters in account.html (token banner + button row), keg_new.html
   (cancel + submit row), and partials/node_edit.html (cancel + save
   row). */
.row {
  display: flex;
  gap: 0.5rem;
}

/* purpose: align a row to the right edge — replaces inline
   `justify-content: flex-end` on flex containers in keg_new.html,
   keg_settings.html, partials/node_edit.html, and partials/node_view.html. */
.row-end {
  justify-content: flex-end;
}

/* purpose: muted text color — replaces the bare inline
   `color: var(--text-muted)` used in keg_settings.html (<dt> labels,
   <em> placeholder), kegs.html (subtitle), and similar. */
.muted {
  color: var(--text-muted);
}

/* purpose: vertical flex stack with the most common column gap
   (0.25rem) — covers the auth-form label clusters
   `display: flex; flex-direction: column; gap: 0.25rem` in login.html
   and register.html. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* purpose: horizontal flex group that wraps onto multiple lines —
   covers the token-create form in account.html where input, button,
   and caption are in one row but reflow on narrow viewports. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* purpose: vertical stack with the auth-provider list gap (0.75rem) — same
   shape as .form-stack but without its margin-top, since the provider list
   in login.html already sits below an <hr> or <p> that supplies the gap. */
.stack-loose {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.full-width {
  width: 100%;
}

/* purpose: bottom margin for the back-arrow link wrapper — replaces
   inline `margin-bottom: 1rem` on the `<div>` containing `&larr; ...`
   links in keg_new.html, keg_settings.html, and node.html. */
.back-link {
  margin-bottom: 1rem;
}

/* purpose: center inline text — replaces inline `text-align: center`
   on auth-page h1s (login, register) and a few one-off captions. */
.text-center {
  text-align: center;
}

/* purpose: capitalize the first letter of each word — replaces inline
   `text-transform: capitalize` on OAuth provider names in login.html
   and account.html. */
.text-capitalize {
  text-transform: capitalize;
}

/* purpose: vertical-spacing utility scale — replaces inline
   `margin-top: <value>` and `margin-bottom: <value>` clusters across
   auth pages, error page, kegs empty-state, and node-view/edit action
   wrappers. Tailwind-aligned numeric scale; only steps actually used
   are defined. */
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 0.75rem; }