/* =============================================================
   ParlayDesk — auth page layout (login + signup)
   Linked from: /login, /signup
   Depends on: /shared.css (must be linked first)
   ============================================================= */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

.auth-clerk-mount {
  animation: authFadeUp 0.4s ease-out both;
}

@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Clerk placeholder override ────────────────────────────────────────────
   ID-scoped selector (specificity 1,1,1) beats any class-only Clerk rule.
   This is the page-level fallback; unsafeCss handles inside the component.
   ─────────────────────────────────────────────────────────────────────── */
#clerk-signin .cl-formFieldInput::placeholder,
#clerk-signup .cl-formFieldInput::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Input text — dark on white, never inherit Clerk's light colorText */
#clerk-signin .cl-formFieldInput,
#clerk-signup .cl-formFieldInput {
  color: #000 !important;
}