/**
 * Anmeldeseiten (.auth) und Formularseiten (.form-page).
 * .auth: schmale zentrierte Karte (25 rem) mit Logo, Titel, gedämpfter Zeile,
 * Formular, einer Primäraktion in voller Breite und kleinem Nebenlink.
 * .form-page: ruhige Karte bis 40 rem, Aktionen rechts unten.
 * Nur Tokens, keine festen Farben oder Radien.
 */
@layer components {
  .auth {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    padding-block-start: var(--space-8);
  }

  .auth__logo {
    color: var(--text-primary);
  }

  .auth__logo .logo {
    inline-size: 6.5rem;
    block-size: auto;
  }

  .auth__card {
    display: grid;
    gap: var(--space-6);
    inline-size: 100%;
    max-inline-size: 25rem;
  }

  .auth__head {
    display: grid;
    gap: var(--space-2);
  }

  .auth__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .auth__lead {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  .auth__form {
    display: grid;
    gap: var(--space-4);
  }

  .auth__submit {
    inline-size: 100%;
  }

  .auth__facts {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--font-size-small);
  }

  .auth__facts dt {
    color: var(--theme-meta-color);
  }

  .auth__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .auth__aside {
    margin: 0;
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .auth__aside a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
  }

  .form-page {
    inline-size: 100%;
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .form-page__card {
    display: grid;
    gap: var(--space-6);
  }

  .form-page__head {
    display: grid;
    gap: var(--space-2);
  }

  .form-page__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .form-page__lead {
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  .form-page__form {
    display: grid;
    gap: var(--space-5);
  }

  .form-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
  }

  @media (max-width: 48.75em) {
    .auth {
      padding-block-start: var(--space-4);
    }

    .form-page__actions {
      flex-direction: column-reverse;
    }

    .form-page__actions .btn {
      inline-size: 100%;
    }
  }

  .profile-avatar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .profile-avatar__remove {
    margin-block-start: var(--space-4);
  }
}