/* ============================================================
   FORMS — shared by admin (admin.css layers its own plain skin
   on top of these base rules)
   ============================================================ */
.form-field { margin-bottom: var(--space-md); }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .45rem;
  color: var(--color-brass);
}
.on-light .form-field label { color: var(--color-brass-deep); }

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  background: rgba(241,231,210,.06);
  border: 1px solid rgba(241,231,210,.3);
  color: inherit;
  border-radius: var(--radius-sm);
}
.on-light .form-field input,
.on-light .form-field textarea,
.on-light .form-field select {
  background: #fff;
  border-color: rgba(23,16,13,.25);
}
.form-field textarea { min-height: 140px; resize: vertical; }

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid var(--color-flame);
  outline-offset: 2px;
}

.form-hint { font-size: .82rem; color: var(--color-muted-on-ink); margin-top: .35rem; }
.on-light .form-hint { color: var(--color-muted-on-paper); }

.form-error {
  border: 1px solid var(--color-flame);
  background: rgba(226,85,28,.1);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: .92rem;
}