/*
 * The form pages (login, signup, forgotten password, account settings,
 * contact), which the `pattern` layout draws over its background: a calm,
 * centred card with the form in it.
 *
 *   .form-card           the card; --wide for the contact form
 *   .form-links          the auth pages' cross-links under the form
 *   .form-rule           a divider inside a form
 *   .form-hint           a line of help above a field
 *   .checkbox-field      a checkbox and its label, 44px tall on touch
 *   .signup              the signup page's two columns: the pitch, then the
 *                        form. Stacked below 768px.
 */
@layer components {
  .form-card {
    display: grid;
    gap: var(--space-2xs);
    inline-size: 100%;
    max-inline-size: 26rem;
    margin-inline: auto;
    padding: var(--space-xl) var(--space-lg);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);

    & > form {
      display: grid;
      gap: var(--space-3xs);
    }

    & .button {
      justify-self: start;
      margin-block-start: var(--space-xs);
    }

    @media (width >= 640px) {
      padding: var(--space-2xl);
    }
  }

  .form-card--wide {
    max-inline-size: 48rem;
  }

  .form-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xl);
    margin-block-start: var(--space-lg);
    font-size: var(--text-ui);

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--target-min);
    }
  }

  .form-rule {
    margin-block: var(--space-sm) var(--space-md);
    border-color: var(--color-rule);
  }

  .form-hint {
    padding-block-end: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .form-text {
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
    line-height: 1.55;

    & + & {
      margin-block-start: var(--space-sm);
    }
  }

  .checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--target-min);
    font-size: var(--text-ui);

    & input[type="checkbox"] {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      accent-color: var(--color-accent);
      cursor: pointer;
    }

    & label {
      cursor: pointer;
    }
  }

  .signup {
    display: grid;
    gap: var(--space-lg);
    max-inline-size: 60rem;
    margin-inline: auto;

    & > .form-card {
      max-inline-size: none;
    }

    @media (width >= 768px) {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
  }

  .signup__pitch {
    padding: var(--space-xl) var(--space-lg);
    border: var(--rule-width) solid var(--color-accent-line);
    border-radius: var(--radius-xl);
    background-color: var(--color-accent-tint);

    @media (width >= 640px) {
      padding: var(--space-2xl);
    }
  }

  .signup__lead {
    padding-block-end: var(--space-sm);
    border-block-end: var(--rule-width) solid var(--color-accent-line);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
  }

  .signup__price {
    margin-block: var(--space-sm) var(--space-xs);
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
  }
}