/* Form: fields, labels, hints, and the underlined input. */

.form { display: flex; flex-direction: column; gap: 1.375rem; }

.field { display: flex; flex-direction: column; gap: 0.25rem; }

.field__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field__hint { font-size: 0.8125rem; color: var(--ink-faint); }

/* Underline, not a box. A bordered input would read as a card, which this
   direction avoids everywhere. */
.field__input {
  padding: 0.625rem 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  outline: none;
}

.field__input:focus { border-bottom-color: var(--accent); }

.field__input::placeholder { color: var(--ink-faint); }

/* A textarea inherits the underline but needs its own box model: no resize
   handle on the horizontal axis, which would let it escape the panel. */
textarea.field__input { resize: vertical; line-height: 1.5; }