/* ==========================================================================
   ELEMENTS · FORMS — bare controls dressed as printed forms: a quire-white
   field on a hairline keyline, grotesque labels, a rubric focus ring. The
   richer field component (label + help + error) lives in 06-components.
   ========================================================================== */

label {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}

input,
textarea,
select {
  width: 100%;
  background: var(--surface-input);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: 0.55em 0.7em;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  box-shadow: var(--shadow-deboss);
  transition: var(--transition-ink);
}

/* Mono fields for figures — opt in with [inputmode=numeric] or type=number */
input[type="number"],
input[inputmode="numeric"],
input[inputmode="decimal"] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}

input::placeholder,
textarea::placeholder { color: var(--text-muted); opacity: 1; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

textarea { resize: vertical; min-height: 6em; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05em) 55%,
    calc(100% - 0.65em) 55%;
  background-size: 0.4em 0.4em, 0.4em 0.4em;
  background-repeat: no-repeat;
  padding-right: 2.2em;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--accent);
  box-shadow: none;
  vertical-align: -0.12em;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

fieldset { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-md); }
legend {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-inline: var(--space-2xs);
}

:invalid { border-color: color-mix(in oklab, var(--critical) 55%, var(--rule-strong)); }