.form {
  display: grid;
  justify-items: start;
  gap: var(--block);
  /* On a wide page, fields keep the width of a narrow page. */
  max-width: var(--page-width);
  margin-block: var(--block-double);
}

.field {
  display: grid;
  gap: var(--block-half);
  width: 100%;
}

.field label {
  color: var(--ink-darker);
  font-size: var(--text-small);
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.5em 0.8em;
  border: 1px solid var(--ink-medium);
  border-radius: var(--rounded-md);
  background: var(--canvas);
  color: var(--ink-darkest);
  font: inherit;
  /* Below 16px, Safari zooms the page on focus. */
  font-size: max(16px, 1em);
}

.field input:focus-visible {
  outline-offset: -1px;
}

.field input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  margin: 0;
  color: var(--error);
  font-size: var(--text-small);
}

.button {
  --button-background: var(--canvas);
  --button-hover-background: var(--ink-lightest);
  --button-border: var(--ink-light);
  --button-color: var(--ink-darkest);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0.5em 1.25em;
  border: 1px solid var(--button-border);
  border-radius: var(--rounded-full);
  background: var(--button-background);
  color: var(--button-color);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--button-hover-background);
}

.button--primary {
  --button-background: var(--ink-darkest);
  --button-hover-background: var(--ink-darker);
  --button-border: var(--ink-darkest);
  --button-color: var(--canvas);
}

.button--destructive {
  --button-background: var(--error);
  --button-hover-background: color-mix(in oklch, var(--error) 80%, var(--ink-darkest));
  --button-border: var(--error);
  --button-color: var(--ink-inverted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block);
}