/* dashboard-login.css — beedle login screen (page === 'login').
 *
 * Loaded by nwl/layout.ejs when page === 'login' (body carries .dash-home).
 * Tokens + base components (.bd-btn, .bd-field, .bd-wrap, .bd-topbar/.bd-brand)
 * come from dashboard-home.css. Scoped under .bd-login. The login screen is a
 * single focused card — no marketing / informational nav (that lives on the
 * public site), just sign-in.
 */

/* ---------- minimal login header (login-header.ejs) ---------- */
.bd-login-topbar .bd-top-inner{ justify-content:space-between; }
.bd-login-lang{ display:flex; align-items:center; gap:8px; font-size:var(--bd-fs-sm); font-weight:700; }
.bd-login-lang a{ color:var(--bd-muted); text-decoration:none; padding:6px 8px; border-radius:8px; }
.bd-login-lang a:hover{ color:var(--bd-cyan-strong); background:var(--bd-cyan-soft); }
.bd-login-lang-sep{ color:var(--bd-faint); }

/* ---------- centered card ---------- */
.bd-login .bd-wrap{ display:flex; justify-content:center; }
.bd-login-card{ width:100%; max-width:440px; margin:6vh 0 0; background:var(--bd-surface);
  border:1px solid var(--bd-line); border-radius:var(--bd-r); box-shadow:var(--bd-shadow-md);
  padding:36px 32px 32px; }

.bd-login-logo{ text-align:center; margin-bottom:14px; }
.bd-login-logo img{ height:64px; width:auto; }

.bd-login-title{ text-align:center; font-size:var(--bd-fs-h1); font-weight:700; letter-spacing:-0.02em;
  color:var(--bd-ink); margin:0 0 24px; }

/* error (silent bad-login is now surfaced) */
.bd-login-error{ display:flex; align-items:center; gap:10px; background:var(--bd-red-soft); color:var(--bd-red-deep);
  border:1px solid oklch(0.88 0.06 25); border-radius:var(--bd-r-sm); padding:12px 14px; margin-bottom:20px;
  font-size:var(--bd-fs-sm); font-weight:600; }
.bd-login-error svg{ width:20px; height:20px; flex:none; }

/* form */
.bd-login-form{ display:flex; flex-direction:column; gap:18px; }
.bd-login .bd-field{ margin:0; }
.bd-login .bd-field label{ display:block; font-size:var(--bd-fs-lg); font-weight:600; color:var(--bd-ink); margin-bottom:7px; }
.bd-login .bd-input{ width:100%; font-family:inherit; font-size:var(--bd-fs-base); color:var(--bd-ink);
  background:var(--bd-surface); border:1px solid var(--bd-line); border-radius:10px; padding:14px 15px; min-height:56px; }
.bd-login .bd-input:focus{ outline:none; border-color:var(--bd-cyan); box-shadow:0 0 0 3px var(--bd-cyan-soft); }
.bd-login-submit{ margin-top:4px; min-height:58px; font-size:var(--bd-fs-lg); }

/* "or" divider */
.bd-login-sep{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--bd-faint);
  font-size:var(--bd-fs-sm); font-weight:600; text-transform:lowercase; }
.bd-login-sep::before, .bd-login-sep::after{ content:""; flex:1; height:1px; background:var(--bd-line); }

/* google sign-in */
.bd-login-google{ display:flex; justify-content:center; }
.bd-login-google :is(div, iframe, .g_id_signin){ max-width:100%; }

@media (max-width:640px){
  .bd-login-card{ margin-top:3vh; padding:28px 20px 24px; box-shadow:var(--bd-shadow-sm); }
  .bd-login-title{ font-size:var(--bd-fs-h2); margin-bottom:20px; }
}