/* Sign-in, registration and recovery pages (doc section 8.8). */
.auth-wrap { display: flex; justify-content: center; padding-top: 4rem; padding-bottom: 6rem; }
.auth-card { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 28rem; padding: 2rem 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); }
.auth-card-wide { max-width: 40rem; }
.auth-card h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.auth-card .muted { line-height: 1.6; }
.auth-icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--secondary); color: var(--primary); }
.auth-switch { font-size: .875rem; text-align: center; color: var(--muted-foreground); }
.auth-switch a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

/* Continue with Google (Google branding: white button, full-colour G mark, dark text). */
.google-form { display: flex; }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; color: #1f1f1f; font-size: .9375rem; font-weight: 600; transition: background-color .15s, border-color .15s; }
.btn-google:hover { background: var(--secondary); border-color: color-mix(in srgb, var(--foreground) 25%, var(--border)); }
.google-mark { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--muted-foreground); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-start-google { display: flex; flex-direction: column; gap: 1.25rem; max-width: 28rem; }
.auth-start-google:not(:has(form)) { display: none; } /* Google not configured */
.auth-email { padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--background); font-size: .9375rem; overflow-wrap: anywhere; }

/* Checkout start: sign-in and quick sign-up side by side on wide screens, sign-up first on phones. */
.auth-start { display: flex; flex-direction: column; gap: 2rem; padding-top: 3rem; padding-bottom: 6rem; }
.auth-start-head { display: flex; flex-direction: column; gap: .75rem; max-width: 40rem; }
.auth-start-grid { display: grid; gap: 1.5rem; align-items: start; }
.auth-start-grid .auth-card { max-width: none; }
.auth-start-grid .auth-card-accent { order: -1; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.auth-start-grid h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }

@media (min-width: 768px) {
  .auth-card { padding: 2.5rem; }
}
@media (min-width: 1024px) {
  .auth-start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .auth-start-grid .auth-card-accent { order: 0; }
}