@layer components {
  /* One calm column: the Stacked lockup the brand names for sign-in, who is proving it, one field,
     and trust shown through people. */
  .sign-in {
    display: flex;
    flex-direction: column;
    max-inline-size: calc(var(--sign-in-inline-size) + 2 * var(--gutter-fluid));
    margin-inline: auto;
    padding: calc(var(--safe-top) + var(--space-12)) var(--gutter-fluid) var(--space-10);
  }

  .sign-in__brand {
    --logo-size: var(--sign-in-logo-size);

    align-self: center;
    margin-block-end: var(--space-10);
  }

  .sign-in__title {
    font: var(--type-display-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-align: center;
    text-wrap: balance;
  }

  .sign-in__lead {
    margin-block-start: var(--space-4);
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-align: center;
    text-wrap: pretty;
  }

  .sign-in__person {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-block: var(--space-8) var(--space-7);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
  }

  .sign-in__who {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: var(--space-0);
  }

  .sign-in__name {
    font: var(--type-label);
    color: var(--color-ink);
  }

  .sign-in__email {
    overflow: hidden;
    font: var(--type-caption);
    color: var(--color-ink-faint);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sign-in__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  :is(.sign-in__title, .sign-in__lead) + .sign-in__form {
    margin-block-start: var(--space-8);
  }

  .sign-in__continue {
    inline-size: var(--size-fill);
    margin-block-start: var(--space-2);
  }

  .sign-in__other {
    align-self: center;
  }

  .sign-in__terms {
    font: var(--type-caption);
    color: var(--color-ink-muted);
    text-align: center;
    text-wrap: pretty;
  }

  .sign-in__terms a {
    color: inherit;
    text-decoration: underline;
  }

  .sign-in__trust {
    margin-block-start: var(--space-10);
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-align: center;
  }
}