/*
 * auth.css — section sheet for the passwordless sign-in pages (sessions#new,
 * sessions#check_email). tokens.css + ui.css load globally before it; this sheet
 * only carries the centered single-column layout and composes ui.css primitives
 * (.card, .field, .btn, .callout). It never restyles shared primitives.
 */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: var(--space-12);
  background:
    radial-gradient(720px 360px at 50% -160px, var(--cream-glow), transparent),
    var(--color-bg);
}

.auth__panel {
  width: 100%;
}

.auth__card {
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.auth__card--center {
  text-align: center;
}

.auth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-due-bg);
  color: var(--color-primary-ink);
  font-size: var(--text-lg);
  margin-inline: auto;
}

.auth__foot {
  text-align: center;
  font-size: var(--text-sm);
  margin-top: var(--space-5);
}