/* Sign-in — builds on the tokens and components in style.css */

/* ---------- Sign in ---------- */
.auth-page { min-height: calc(100vh - 90px); display: grid; place-items: center; padding: 32px var(--gutter) 48px; }
.auth-card { width: min(420px, 100%); padding: clamp(26px, 5vw, 36px); text-align: center; }
.auth-mark { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 14px; }
.auth-mark img { width: 24px; height: 24px; }
.auth-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.auth-sub { margin: 6px 0 22px; font-size: 0.93rem; color: var(--ink-2); }

.auth-google { gap: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06); }
.auth-google:hover { background: #f7f8fc; }
.auth-google svg { width: 20px; height: 20px; }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 0.8rem; color: var(--ink-3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-email { display: grid; gap: 8px; text-align: left; }
.auth-email label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.auth-email .input { padding: 12px 14px; }
.auth-email .btn { margin-top: 4px; }
.auth-email .btn:disabled { opacity: 0.6; cursor: progress; }

.auth-error.auth-note { background: rgba(22, 163, 74, 0.1); color: var(--ok); }
.auth-error { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(220, 38, 38, 0.08); color: var(--err); font-size: 0.88rem; font-weight: 500; text-align: left; }

.auth-sent-icon { width: 52px; height: 52px; margin: 4px auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-wash); color: var(--blue); }
.auth-sent-icon svg { width: 24px; height: 24px; }
.auth-sent h2 { font-size: 1.2rem; font-weight: 700; }
.auth-sent p { margin: 6px 0 14px; font-size: 0.93rem; color: var(--ink-2); overflow-wrap: anywhere; }
.auth-link { font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--blue); cursor: pointer; }
.auth-off { font-size: 0.93rem; color: var(--ink-2); }
.auth-off a, .auth-fine a { color: var(--blue); }
.auth-fine { margin-top: 20px; font-size: 0.76rem; color: var(--ink-3); }

/* The dashboard's styles live in dashboard.css */