/* fields.css — inputs, textareas and their labels (selects live in dropdown.css).
 *
 * Heights are 40 and 36, which are the two the rest of the app is built on: a
 * form field and the compact control that sits in a row beside other things.
 * Both clear the 44px touch target once their label and the gap above the next
 * field are counted, and responsive.css opens them further on a phone. */
.field{width:100%;height:40px;border:1px solid var(--field);border-radius:var(--r-md);padding:0 13px;outline:none;font-size:14px;background-color:var(--raised);color:var(--ink)}
.field.sm{height:36px;font-size:13.5px;padding:0 12px}
.field:hover{border-color:var(--field-hover)}
.field:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}
/* Tokenised rather than left to the browser: the default placeholder grey is
   picked from color-scheme, not from this palette, so it drifts from the rest
   of the muted text in one theme or the other. */
.field::placeholder{color:var(--muted);opacity:1}
textarea.field{min-height:140px;padding:12px 13px;line-height:1.6;resize:vertical;height:auto}
.fhint{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45}
.flabel{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.flabel.soft{font-size:12.5px;color:var(--ink-3);font-weight:500;margin-bottom:7px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}