/* Sign-in page. Built only on the design-system tokens in /css/ds.css, so both themes follow html[data-work-theme]. */
body.login-body { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: var(--ds-6); box-sizing: border-box; background: var(--ds-ground); color: var(--ds-text); font-family: var(--ds-font); -webkit-font-smoothing: antialiased; }
.login { width: min(400px, 100%); display: grid; gap: var(--ds-6); }
.login-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: var(--ds-text); text-decoration: none; font: 500 var(--ds-text-lg)/1 var(--ds-font); letter-spacing: -0.01em; }
.login-mark { width: 26px; height: 26px; background: currentColor; -webkit-mask: url("/assets/outcomes/favicon.svg") center / contain no-repeat; mask: url("/assets/outcomes/favicon.svg") center / contain no-repeat; }
.login-card { gap: var(--ds-4); padding: var(--ds-8); box-shadow: var(--ds-shadow); }
.login-card :is(p, h1) { margin: 0; }

.login-card .ds-lead { font-size: var(--ds-text-lg); }
.login-google { width: 100%; box-sizing: border-box; margin-top: var(--ds-2); }
.login-google svg { width: 18px; height: 18px; flex: none; }
.login-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-4); }
.login-footer .ds-seg button { display: inline-flex; align-items: center; gap: 6px; }
.login-footer .ds-seg svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .login-card { padding: var(--ds-6); } }