/* Sign-in and offline pages: one centred card. */
body.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-main { width: 100%; max-width: 360px; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px 24px; display: grid; justify-items: center; text-align: center; }
.login-icon { border-radius: 15px; margin-bottom: 14px; }
.login-card h1 { font-size: 22px; }
.login-sub { margin: 2px 0 22px; color: var(--muted); }
.login-step { display: grid; gap: 12px; width: 100%; }
.login-step[hidden] { display: none; }
.welcome { margin: 0; color: var(--ink-2); }
.welcome b { color: var(--ink); }
.hint { margin: 0; color: var(--ink-2); font-size: 12.5px; }

.primary { display: block; width: 100%; appearance: none; border: 0; border-radius: 10px; padding: 12px 16px; background: var(--ink); color: var(--page); font: 600 15px/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer; }
.primary:hover { opacity: 0.88; }
.primary:disabled { opacity: 0.5; cursor: progress; }
.primary:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

.msg { width: 100%; margin: 16px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; text-align: left; background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }
.msg.info { background: var(--wash); color: var(--ink-2); }
.msg[hidden] { display: none; }