/* The login page (/) while the full website is hidden: site.css's colours, logo and form styles, centred. */
.login-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.login-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 16px 24px; }
.login-brand { display: flex; align-items: center; gap: 14px; }
.login-brand img { border-radius: 14px; box-shadow: 0 10px 26px -10px var(--accent); }
.login-brand .wordmark { height: 40px; }
.login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 1.6rem; font-weight: 800; }
.login-card h1 + p { margin-top: -8px; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  color: var(--muted); font-size: .88rem; }
.login-footer nav { display: flex; gap: 18px; }
.login-footer a { text-decoration: none; }
.login-footer a:hover { color: var(--text); }