.field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend {
  display: flex; justify-content: space-between; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted);
}
.field output { color: var(--fg); }
.field select, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: 0;
  transition: border-color var(--dur-fast);
}
.field textarea { padding-block: var(--space-3); min-height: 7rem; resize: vertical; }
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--muted); }
.field select:focus-visible, .field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.field input[type="range"] { width: 100%; height: var(--tap); accent-color: var(--fg); background: transparent; }