@layer components {
  .form {
    max-inline-size: 32rem;
    margin-block: var(--block-space);
  }

  .form__field {
    display: grid;
    gap: var(--block-space-quarter);
    margin-block-end: 1.25rem;

    & label {
      font-size: var(--text-small);
      font-weight: 600;
    }

    & p {
      margin: 0;
    }
  }

  .form__error {
    color: var(--color-wrong-ink);
    font-size: var(--text-small);
  }

  .form__buttons {
    display: flex;
    align-items: center;
    gap: var(--block-space);
  }

  /* Rails wraps an invalid field in a div of its own; contents keeps it out of the field grid. */
  .field_with_errors {
    display: contents;
  }

  /* iOS zooms the page in on any input it considers small; 16px is the threshold. A maxlength
     makes Rails emit size= too, which a grid item treats as a minimum it may not shrink below. */
  .form__field input,
  .form__field textarea {
    min-inline-size: 0;
    padding: var(--block-space-half);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    font: inherit;
    font-size: max(16px, 1em);
    background: var(--color-page);
    color: var(--color-ink);
    transition: border-color 120ms;

    &:hover {
      border-color: var(--color-muted);
    }
  }

  .field_with_errors input,
  .field_with_errors textarea {
    border-color: var(--color-wrong-rule);
    background: var(--color-wrong-wash);
  }
}