/* One control system (design review 2026-09-14; shape shared with the
   sibling, colours ours). Inputs, selects, textareas and buttons share one
   height (--control-h: 36px desktop, 44px under 860px), one radius
   (--r-control) and one font size; selects and inputs come from the SAME
   declaration block so they can never drift apart. Buttons are pills.
   Loads after explorer.css, before internal.css/kinetic_landing.css. */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
select,
textarea {
  font: inherit; font-size: var(--fs-table); line-height: 1.4; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--line-18); border-radius: var(--r-control);
  padding: 0 0.85rem; min-height: var(--control-h); width: 100%; max-width: 100%;
  box-sizing: border-box; margin: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea { padding: 0.55rem 0.85rem; min-height: calc(var(--control-h) * 2.4); resize: vertical; line-height: 1.5; }
select { padding-right: 2rem; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--ink3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-35); outline-offset: 1px; border-color: var(--accent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Field stacks: label above the field (13px, one tone down), 14px between fields. */
.stack { display: grid; gap: 0.875rem; }
.stack > label, .form-field, .field { display: grid; gap: 0.375rem; font-size: var(--fs-meta); color: var(--ink2); }
.form-field { margin: 0; }
.form-field label, .field > span:first-child { display: block; font-size: var(--fs-meta); color: var(--ink2); }
.stack > label > input, .stack > label > select, .stack > label > textarea { width: 100%; }
/* A wide field that never exceeds its column (receipts form: 28rem forced a 514px phone viewport, 09-15). */
.input--wide { min-width: min(28rem, 100%); }
/* Two-column form on wide cards, one column under 40rem of card width. */
.form-grid { display: grid; gap: 1.125rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.form-grid > .form-grid__full { grid-column: 1 / -1; }
/* One-line rows (search + button, amount + unit). */
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.form-row > input, .form-row > select { flex: 1 1 10rem; width: auto; }
.form-row--narrow > input, .form-row--narrow > select { flex: 0 1 12rem; }
/* Actions live inside the card, above a 1px rule. */
.form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding-top: 1.125rem; border-top: 1px solid var(--line-8); }
.form-help { font-size: var(--fs-meta); color: var(--ink3); margin: 0; line-height: 1.5; text-wrap: pretty; }
.form-error { font-size: var(--fs-table); color: var(--err); margin: 0 0 0.5rem; }

/* Buttons — pills, one height. `.btn` is the alias some console forms use. */
.button, .btn, input[type="submit"], button.seam-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-size: var(--fs-table); font-weight: 600; line-height: 1.2;
  min-height: var(--control-h); padding: 0 1.3rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: var(--on-accent);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.button:hover, .btn:hover, input[type="submit"]:hover { background: var(--accent-hov); color: var(--on-accent); }
.button:focus-visible, .btn:focus-visible, input[type="submit"]:focus-visible, .seam-toggle:focus-visible { outline: 2px solid var(--accent-35); outline-offset: 2px; }
/* Quiet (outline) buttons. `.seam-toggle` on a text button is the legacy
   spelling of the quiet button — kept so nothing regresses. */
.button--ghost, .button--quiet, button.seam-toggle, a.seam-toggle {
  background: transparent; color: var(--ink2); border-color: var(--line-18); font-weight: 500;
}
.button--ghost:hover, .button--quiet:hover, button.seam-toggle:hover, a.seam-toggle:hover { color: var(--ink); border-color: var(--accent-35); background: var(--accent-08); }
.button--danger:hover { color: var(--err); border-color: var(--err); background: transparent; }
.button--small { min-height: 1.75rem; padding: 0 0.875rem; font-size: var(--fs-label); }
.button--block { width: 100%; min-height: 2.9375rem; }
/* Icon controls (seam toggle, menu circle, avatar): the mark size, 32px, round.
   `button.seam-toggle--icon` is spelled out so the pill rule above
   (`button.seam-toggle`, same specificity class + element) cannot hand the
   toggle the 44px compact control height — it was an oval on phones next to
   the 32px menu circle (Christian, 2026-09-15). */
button.seam-toggle--icon, .seam-toggle--icon, .icon-control {
  width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: var(--fs-table); flex: 0 0 auto;
}