/* ── RealtiFlow auth pages (signup / login) ──────────────────────────────
   Tokens, resets, focus rings and motion preferences come from base.css,
   which every page links first. This file is auth layout only.          */
h1, h2, h3 { letter-spacing: -.02em; }

/* Auth body */
.auth-body { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(900px 400px at 80% -10%, rgba(20,184,166,.15), transparent 55%),
             radial-gradient(700px 350px at 10% 0%, rgba(3,105,161,.12), transparent 50%),
             var(--bg-soft);
}
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-lg); padding:40px; width:100%; max-width:430px; }
.auth-logo { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--primary); margin-bottom:26px; }
.auth-card h1 { font-size:27px; margin-bottom:6px; color:var(--ink); }
.auth-sub { color:var(--muted); margin-bottom:24px; font-size:15px; }

label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:16px 0 6px; }
/* 16px prevents iOS Safari from zooming the page on field focus. */
input { width:100%; padding:13px 15px; border:1px solid var(--border); border-radius:11px; font-size:16px; background:#fff; transition:border-color var(--motion-base), box-shadow var(--motion-base); font-family:var(--font-body); min-height:44px; }
input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.12); }

/* Password show/hide toggle — the eye button sits inside a wrapper so the
   input keeps its full width and the icon aligns to the right edge. */
.pwd-field { position:relative; }
.pwd-field input { padding-right:48px; }
.pwd-toggle {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer; color:var(--ink);
  border-radius:9px; transition:color var(--motion-base), background var(--motion-base);
}
.pwd-toggle:hover { color:var(--primary); background:rgba(0,0,0,.05); }
.pwd-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.pwd-toggle svg { width:20px; height:20px; stroke:currentColor; }

.btn-primary { width:100%; margin-top:20px; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:600; font-size:16px; padding:14px; border:none; border-radius:999px; cursor:pointer; transition:background var(--motion-base), transform var(--motion-base); box-shadow:0 8px 24px -8px rgba(15,118,110,.5); min-height:48px; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.auth-error { color:#DC2626; background:#FEF2F2; border:1px solid #FECACA; padding:10px 14px; border-radius:10px; margin-top:14px; font-size:14px; }
.auth-note { color:#047857; background:#ECFDF5; border:1px solid #A7F3D0; padding:12px 16px; border-radius:10px; margin-top:16px; font-size:15px; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:24px 0 16px; color:var(--muted); font-size:13px; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.btn-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border:1px solid var(--border); border-radius:999px; background:#fff; font-weight:600; font-size:15px; cursor:pointer; transition:background var(--motion-base), border-color var(--motion-base); color:var(--ink); min-height:48px; }
.btn-google:hover { background:var(--bg-soft); border-color:var(--primary); }

.auth-switch { text-align:center; margin-top:20px; color:var(--muted); font-size:14px; }
.auth-switch a { color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ── Dark theme (auth pages) ─────────────────────────────────────────────
   login.html and signup.html had ZERO dark-mode support — they were hardcoded
   light. base.css provides the token overrides for html[data-theme="dark"],
   but auth.css hardcodes a few light values (input background, button bg).
   These overrides make the auth pages follow the system/theme like the rest
   of the site. */
html[data-theme="dark"] .auth-body {
  background:radial-gradient(900px 400px at 80% -10%, rgba(20,184,166,.12), transparent 55%),
             radial-gradient(700px 350px at 10% 0%, rgba(3,105,161,.10), transparent 50%),
             var(--bg-soft);
}
html[data-theme="dark"] input {
  background:var(--card);
  color:var(--ink);
  border-color:var(--border);
}
html[data-theme="dark"] input::placeholder { color:var(--muted); }
html[data-theme="dark"] .btn-google {
  background:var(--card);
  color:var(--ink);
  border-color:var(--border);
}
html[data-theme="dark"] .btn-google:hover { background:var(--bg-soft); }
html[data-theme="dark"] .lang-select {
  background:var(--card);
  color:var(--ink);
  border-color:var(--border);
}

/* ── Mobile ─────────────────────────────────────────────────────────────
   The card drops its heavy chrome on small screens so the form itself
   gets the full width instead of being boxed inside a shadowed panel. */
@media (max-width: 640px) {
  .auth-body { padding:16px; align-items:flex-start; }
  .auth-card {
    padding:28px 22px;
    border-radius:var(--radius-lg);
    margin-top:24px;
    box-shadow:var(--shadow-sm);
  }
  .auth-card h1 { font-size:24px; }
}

@media (max-width: 380px) {
  .auth-body { padding:10px; }
  .auth-card { padding:24px 18px; border-radius:16px; }
}