/* Account pages: sign in, password reset, invitations, the app's sign-in
 * confirmation and beta onboarding. Loaded after core.css. These pages sit
 * outside the application shell, so the block lays out the whole page.
 */

@layer block {
  /* A narrow column in the middle of the screen. data-width widens it;
     data-align="start" starts it at the top for pages longer than a card. */
  .account {
    --account-width: 24rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xl);
    min-block-size: 100dvh;
    padding: var(--space-2xl) var(--space-l);
    font-size: var(--text-s);
  }
  .account > * { inline-size: 100%; max-inline-size: var(--account-width); margin-inline: auto; }
  .account[data-width="medium"] { --account-width: 28rem; }
  .account[data-width="wide"] { --account-width: 36rem; }
  .account[data-width="widest"] { --account-width: 42rem; }
  .account[data-align="start"] { justify-content: flex-start; }

  .account__header { text-align: center; }
  .account[data-align="start"] .account__header { text-align: start; }
  .account__brand { font-size: var(--text-xl); font-weight: 700; letter-spacing: .05em; }
  .account__title { font-size: var(--text-xl); font-weight: 700; line-height: 2.25rem; letter-spacing: -.025em; }
  .account__brand + .account__title,
  .repel + .account__title { margin-block-start: 2.5rem; }
  .account__lede { margin-block-start: var(--space-xs); color: var(--muted); }
  .account__card { --panel-padding: var(--space-xl); }

  /* The outcome of a link that has been followed: an icon, what happened
     and what to do next. */
  .account__result { text-align: center; }
  .account__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-inline: auto;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .account__icon[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); }
  .account__icon[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
  .account__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

  /* Onboarding steps: status on the left, what the step is on the right. */
  .account__step { display: flex; align-items: flex-start; gap: var(--space-m); }
}