/* Sign-in and sign-up shell around Clerk's prebuilt components.
   Layout reuses the onboarding sheet in hub.css; this file only adds the auth-specific parts. */
.auth-intro { margin-top: 6px; }
.auth-mount { width: 100%; margin-top: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); outline: none; }

/* Our heading introduces the first step; Clerk's own step header (verify email, reset password)
   takes over afterwards. The class comes from the documented appearance.elements.header key. */
.auth-page[data-auth-step="start"] .doom-clerk-header { display: none; }
.auth-page[data-auth-step="step"] .auth-intro { display: none; }
.auth-page[data-auth-step="step"] .auth-mount { margin-top: 8px; }

.auth-mount .doom-clerk-root, .auth-mount .doom-clerk-card { width: 100%; max-width: 100%; }
.auth-mount .doom-clerk-card { border-radius: 26px; box-shadow: 0 0 0 1px var(--hairline); }
.auth-skeleton { height: 380px; border-radius: 26px; }
.auth-notice { margin-top: 4px; }
.auth-policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; width: 100%; max-width: 460px; margin: 12px 0 20px; color: var(--muted); font-size: 13px; }
.auth-policy-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.auth-policy-links a:hover { color: var(--violet-deep); }

/* Desktop: brand pinned to the top of the panel, intro and form centred below it. */
@media (min-width: 900px) {
  .auth .onboard-body { position: relative; justify-content: center; padding-top: 96px; padding-bottom: 40px; }
  .auth .onboard-top { position: absolute; top: 24px; left: 48px; }
  .auth-intro, .auth-mount { width: 100%; max-width: 460px; }
  .auth-mount { padding-bottom: 0; }
  .auth-mount .doom-clerk-card { box-shadow: 0 0 0 1px var(--hairline), 0 24px 60px -40px rgba(36, 28, 92, .35); }
}

/* The temporary shared-account form uses the same shell while production Clerk awaits its domain. */
.auth-form-card { border: 1px solid var(--hairline); border-radius: 26px; padding: 28px; background: var(--surface); }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.auth-form input:not([type="hidden"]) { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--row); color: var(--ink); font: inherit; font-size: 16px; }
.auth-form input + label { margin-top: 24px; }
.auth-form .pill { width: 100%; min-height: 50px; margin-top: 30px; justify-content: center; }
.auth-form-note { margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-form-error { margin-bottom: 20px; padding: 12px 14px; border-radius: 14px; background: var(--danger-soft); color: #b4233c; font-size: 14px; }