/* Auth pages scroll like a normal document — override the global
   app-shell lock from app_shell.css:26-32. Use `overflow: visible`
   (NOT `auto`) so the browser's viewport handles scrolling instead
   of body/html becoming self-contained scroll containers that can't
   scroll because they sized to content. */
html:has(.body--auth) {
  height: auto;
  overflow: visible;
}

.body--auth {
  height: auto;
  overflow: visible;
  min-height: 100dvh;
}

.auth-wordmark-wrap {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-wordmark {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.auth-wordmark .grailsome-wordmark-row__icon {
  width: 30px;
  height: 30px;
}

.auth-wordmark .grailsome-wordmark-row__text {
  font-size: 1.25rem;
}

.auth-card {
  padding: var(--space-8);
}

.auth-heading {
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-heading .heading-composed__top {
  font-size: 1.5rem;
}

.auth-heading .heading-composed__bottom {
  font-size: 2rem;
}

.auth-submit {
  width: 100%;
}

.auth-instruction {
  text-align: center;
  color: var(--color-ink-2);
  margin-bottom: var(--space-6);
}

.auth-hint {
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
  margin-top: var(--space-4);
}

.auth-footer-text {
  text-align: center;
  margin-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
}

.auth-check-heading {
  font-size: 1.8rem;
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth-check-message {
  color: var(--color-ink-2);
  margin-bottom: var(--space-2);
  text-align: center;
}

.auth-check-expiry {
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-check-client {
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth-client-link {
  display: inline-block;
}

.auth-check-resend {
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth-countdown-text {
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
}

.auth-check-spam {
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth-check-retry {
  color: var(--color-ink-muted);
  font-size: var(--text-app-label);
  text-align: center;
}