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

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

.field label {
  font-size: var(--text-xs);
}

.field textarea,
.field select,
.field input[type="text"],
.field input[type="password"],
.field input[type="file"] {
  font-size: var(--text-sm);
  padding: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 4px;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: green;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  gap: 1rem;
}

.form .btn-primary,
.form input[type="submit"] {
  align-self: flex-start;
}

/* Mobile Safari zooms in when focusing an input whose font-size is under 16px.
   Enforce a 16px minimum on small screens for every text control so focusing
   a field doesn't disrupt the layout. */
@media (max-width: 1024px) {
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="email"],
  .field input[type="search"],
  .field input[type="number"],
  .field input[type="url"],
  .field input[type="date"],
  .field textarea,
  .field select {
    font-size: 16px;
  }
}