@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

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

    /* Highlight the label of a field with an invalid input. */
    &:has([aria-invalid="true"], :user-invalid) .field__label {
      color: var(--color-danger);
    }
  }

  .field__label {
    font-size: var(--step--1);
    font-weight: 560;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .field__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    font-size: var(--step--1);
  }

  .field__input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.6em 0.8em;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: max(16px, var(--step-0)); /* >= 16px prevents iOS zoom on focus */
    transition:
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);

    &::placeholder {
      color: color-mix(in oklab, var(--color-text-muted) 75%, transparent);
    }

    &:hover {
      border-color: color-mix(in oklab, var(--color-border-strong), var(--color-text) 20%);
    }

    &:focus-visible {
      border-color: var(--color-accent);
      box-shadow: var(--focus-ring);
      border-radius: var(--radius-m);
    }

    &[aria-invalid="true"], &:user-invalid {
      border-color: var(--color-danger);

      &:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 35%, transparent);
      }
    }
  }

  /* Date and time pickers don't need the full width. */
  .field__input--auto {
    inline-size: auto;
    max-inline-size: 100%;
  }

  textarea.field__input {
    field-sizing: content;
    min-block-size: 6lh;
    max-block-size: 20lh;
    resize: vertical;
  }

  .field__hint {
    color: var(--color-text-muted);
    font-size: var(--step--1);
  }

  .field__error {
    color: var(--color-danger);
    font-size: var(--step--1);
    font-weight: 500;
  }

  /* Error summary above a form */
  .form-errors {
    padding: var(--space-xs) var(--space-s);
    border: var(--border-width) solid color-mix(in oklab, var(--color-danger) 35%, transparent);
    border-radius: var(--radius-m);
    background-color: color-mix(in oklab, var(--color-danger) 8%, var(--color-surface));
    font-size: var(--step--1);

    & h2 {
      font-family: var(--font-sans);
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0;
      color: var(--color-danger);
    }

    & ul {
      margin-block-start: var(--space-3xs);
      padding-inline-start: 1.1em;
    }
  }
}