/* retoor <retoor@molodetz.nl> */
.form { display: grid; gap: var(--space-lg); max-width: 34rem; }
.form.wide { max-width: none; }

.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field .help { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--faint); }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--bg-sunken);
  color: var(--ink);
  border: var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  font-size: var(--text-base);
}

textarea { min-height: 10rem; line-height: var(--leading-body); resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }

input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.check { display: flex; gap: var(--space-sm); align-items: center; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { color: var(--accent-ink); filter: brightness(1.08); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); font-weight: 500; }
.button.ghost:hover { border-color: var(--ink-soft); }
.button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.button.small { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }

.button.is-loading { opacity: 0.6; pointer-events: none; }
.button .spinner {
  width: 0.8em;
  height: 0.8em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }