/* 04-elements/_form.css — bare controls. c-field wraps these with labels and states. */
label { display: block; }
input, select, textarea {
  width: 100%;
  min-height: var(--height-control);
  padding: var(--pad-field-y) var(--pad-field-x);
  background: var(--surface-sunken);
  border: var(--stroke) solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); }
textarea { min-height: 5.5rem; resize: vertical; }
select { appearance: none; padding-inline-end: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234F5250' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
input[type="date"] { font-family: var(--font-mono); font-size: var(--text-sm); }
fieldset { border: 0; padding: 0; min-width: 0; }