/* Form: labelled fields, their error text, the error summary, the notices
   for an unavailable form or a failed send, and a control inline with its
   submit button. An error is text naming the field and the fix, in the
   danger colour, never colour alone. */

.form {
  max-inline-size: var(--measure);
}

.form__fieldset {
  --stack-space: var(--space-m);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form__field label {
  font-weight: 600;
}

.form__control {
  min-block-size: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.form__control:hover {
  border-color: var(--text-muted);
}

.form__control:focus-visible {
  border-color: var(--accent);
}

.form__control:active {
  border-color: var(--accent);
}

.form__control:disabled {
  background-color: var(--bg-cell-empty);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form__control[aria-invalid="true"] {
  border-color: var(--danger);
}

.form__error {
  color: var(--danger);
  font-size: var(--step--1);
}

.form__summary {
  padding: var(--space-m);
  border: 1px solid var(--danger);
  border-radius: var(--radius-card);
  background-color: var(--danger-soft);
  color: var(--danger);
}

.form__summary a {
  color: var(--danger);
}

.form__summary-title {
  font-size: var(--step-0);
}

.form__notice {
  max-inline-size: var(--measure);
  padding: var(--space-s);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
}

.form__notice[data-kind="error"] {
  border-color: var(--danger);
  background-color: var(--danger-soft);
  color: var(--danger);
}

/* A control beside its submit button, as in the directory search: the
   control takes the free width and the button wraps under it when narrow. */
.form__inline > .form__control {
  flex: 1 1 16em;
  min-inline-size: 0;
}

.form__control[type="search"] {
  appearance: none;
}