/* <div class="w-field"><label class="w-label" for="x">Name</label><input class="w-input" id="x"><p class="w-hint">…</p></div>
   .w-input works on <input>, <select> and <textarea>. aria-invalid="true" marks an error. */
.w-field { display: grid; gap: 6px; margin-bottom: var(--w-space-4); }
.w-label { font: 500 var(--w-text)/1.3 var(--w-font); color: var(--w-fg); }
.w-hint { margin: 0; font: var(--w-text-sm)/1.4 var(--w-font); color: var(--w-muted); }
.w-input { box-sizing: border-box; width: 100%; min-height: 36px; padding: 6px var(--w-space-3);
  border: 1px solid var(--w-border); border-radius: var(--w-radius); background: var(--w-bg); color: var(--w-fg);
  font: var(--w-text)/1.4 var(--w-font); transition: border-color var(--w-speed); }
.w-input::placeholder { color: var(--w-muted); }
.w-input:focus-visible { outline: 2px solid var(--w-ring); outline-offset: 1px; }
.w-input:disabled { opacity: .5; cursor: not-allowed; }
.w-input[aria-invalid="true"] { border-color: var(--w-destructive); }
.w-input[aria-invalid="true"] ~ .w-hint { color: var(--w-destructive); }
textarea.w-input { min-height: 80px; resize: vertical; }
select.w-input { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--w-muted) 50%), linear-gradient(135deg, var(--w-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }