/* Form: fieldset container, labelled fields and inputs */

.form {
  display: grid;
  gap: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-xs);
}
.field > span {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
}

/* A field boundary needs 3:1, so the border uses quiet, not line. */
.input {
  font: inherit;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-quiet);
  border-radius: var(--radius-control);
}
/* Native select arrows sit on the border; draw our own with room to breathe. */
.input--select {
  appearance: none;
  padding-right: 44px;
  background: var(--color-paper) url("/icons/chevron-down.svg") no-repeat right 16px center / 12px
    8px;
}
.input::placeholder {
  color: var(--color-quiet);
}
.input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}