/* ==========================================================================
   Account entrance pages (views/auth/login, register, forgot-password,
   reset-password): a standalone shell with no navbar, like /discord. The
   pages use the kit (page header, sheets, forms); this file lays out the
   shell around them. Unlayered and token-only.
   ========================================================================== */

.auth-page { margin: 0; min-height: 100dvh; background-color: var(--color-canvas); color: var(--color-ink); }

.auth-shell {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.auth-shell--narrow { max-width: 30rem; }

/* The emblem links home. */
.auth-mark { justify-self: start; border-radius: var(--shape-md); }
.auth-mark img { display: block; width: 3.5rem; height: 3.5rem; border-radius: var(--shape-md); box-shadow: var(--shadow-lift); }
.auth-mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.auth-columns { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 48rem) {
  .auth-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Turnstile's widget is 300px wide and does not shrink: scroll, never widen. */
.auth-turnstile { max-width: 100%; overflow-x: auto; }

.auth-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}

.auth-foot ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.auth-foot a { color: inherit; }
.auth-foot a:hover { color: var(--color-accent-ink); }