/* Single-panel screens people reach from outside the app or before they're
 * in it: sign-in and sign-up (sessions, signups), invites (join_codes,
 * account/member_confirmations, people/joins) and help. Same type and colors
 * as the landing. Forms read top to bottom, so the panel is left-aligned with
 * a full-width button. */
@layer components {
  .auth {
    text-align: start;
  }

  .auth__art {
    align-self: flex-start;
    block-size: 2.25rem;
    inline-size: auto;
  }

  /* The inviting school's own logo, in place of the brand shape. */
  .auth__logo {
    align-self: flex-start;
    block-size: 3rem;
    border-radius: 50%;
    inline-size: 3rem;
    object-fit: cover;
  }

  .auth__step {
    color: var(--color-link);
    font-size: var(--text-x-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
  }

  .auth__title {
    font-family: var(--font-display);
    font-size: var(--text-x-large);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
  }

  .auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    inline-size: 100%;
  }

  .auth__submit {
    inline-size: 100%;
  }

  .auth__fine-print {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
  }

  /* "Reenviar código" is a form button that reads as a link inside a sentence. */
  .auth__link-button {
    background: none;
    border: 0;
    color: var(--color-link);
    padding: 0;
    text-decoration: underline;
  }
}