:root {
--text-body: #4a5262;
--primary-hover: #0f1722;
--radius-pill: 999px;
--shadow-lift: 0 1px 0 rgb(22 32 46 / 0.04), 0 24px 48px -24px rgb(22 32 46 / 0.28);
}
[data-theme="dark"] {
--text-body: #c9cbc9;
--primary-hover: #ffffff;
--shadow-lift: 0 1px 0 rgb(0 0 0 / 0.2), 0 24px 48px -24px rgb(0 0 0 / 0.7);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--text-body: #c9cbc9;
--primary-hover: #ffffff;
--shadow-lift: 0 1px 0 rgb(0 0 0 / 0.2), 0 24px 48px -24px rgb(0 0 0 / 0.7);
}
}
body:has(.app-main--auth) .app-header .site-header__inner { flex-wrap: nowrap; min-height: 4rem; padding-block: var(--space-2); }
body:has(.app-main--auth) .app-header .brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; font-size: 1.125rem; letter-spacing: -0.01em; white-space: nowrap; }
body:has(.app-main--auth) .app-header .brand::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--link); -webkit-mask: url("/media/mark.svg") center / contain no-repeat; mask: url("/media/mark.svg") center / contain no-repeat; }
body:has(.app-main--auth) .app-header .site-nav { flex: none; order: 0; }
body:has(.app-main--auth) .app-header .site-nav__list { flex-wrap: nowrap; align-items: center; gap: var(--space-4); }
body:has(.app-main--auth) .app-header .site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-body); font-size: var(--text-sm); text-decoration: none; }
body:has(.app-main--auth) .app-header .site-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.3em; }
body:has(.app-main--auth) .app-header .site-nav a[aria-current="page"] { color: var(--text); background: none; }
body:has(.app-main--auth) .app-header .site-nav li:last-child a { padding: 0 1.125rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; }
body:has(.app-main--auth) .app-header .site-nav li:last-child a:hover { background: var(--primary-hover); text-decoration: none; }
body:has(.app-main--auth) .app-header .theme-toggle { flex: none; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; font-size: 1.125rem; line-height: 1; }
@media (max-width: 40rem) {
body:has(.app-main--auth) .app-header .site-header__inner { gap: var(--space-3); }
body:has(.app-main--auth) .app-header .site-nav__list { gap: var(--space-3); }
body:has(.app-main--auth) .app-header .site-header__inner .btn { min-height: 2.75rem; padding-inline: 0; }
body:has(.app-main--auth) .app-header .site-nav li:has(a[aria-current="page"]) { display: none; }
}
@media (max-width: 24rem) {
body:has(.app-main--auth) .app-header .brand { font-size: 0; gap: 0; }
}
.app-main--auth { min-height: calc(100vh - 4rem); padding-block: var(--space-7) var(--space-6); gap: var(--space-5); }
.app-main--auth .auth-card { width: min(100%, 26rem); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.app-main--auth .auth-card h1 { margin-bottom: var(--space-2); font: 600 1.75rem / 1.15 "Source Serif 4", "Serif Fallback", Georgia, serif; letter-spacing: -0.01em; }
.app-main--auth .auth-card .lede { margin-bottom: var(--space-5); color: var(--text-body); font-size: var(--text-sm); line-height: 1.5; }
.app-main--auth .field__label { font-size: var(--text-sm); font-weight: 700; }
.app-main--auth .field__hint { margin: 0; }
.app-main--auth .input { background: var(--surface); }
.app-main--auth .input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.app-main--auth .field__error { margin: 0; font-weight: 700; }
.app-main--auth .alert--danger { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.app-main--auth .btn { border-width: 1px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; }
.app-main--auth .btn--primary:hover:not([disabled]) { background: var(--primary-hover); }
.app-main--auth .auth-card__submit { margin-top: var(--space-2); }
.app-main--auth .auth-card__links .btn--ghost { min-height: 2.75rem; padding: 0; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.app-main--auth .auth-card__links .btn--ghost:hover { text-decoration-color: currentColor; }
.app-main--auth p.auth-card__links { display: block; text-align: center; }
.app-main--auth p.auth-card__links:has(.btn) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); }
.app-main--auth .auth-card__links { margin-top: var(--space-3); color: var(--text-body); font-size: 0.875rem; }
.app-main--auth ul.auth-card__links { gap: var(--space-1); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.app-main--auth .auth-card a { text-underline-offset: 0.2em; }
.app-main__back a { color: var(--text-body); }
@media (max-width: 30rem) {
.app-main--auth { padding-block: var(--space-5); }
.app-main--auth .auth-card { padding: var(--space-5); }
}
.app-main--auth .auth-card__google { margin-bottom: var(--space-4); }
.app-main--auth .btn-google { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0 var(--space-4); border: 1px solid #747775; border-radius: var(--radius-pill); background: #fff; color: #1f1f1f; font: 500 var(--text-sm) / 1.25 Roboto, Arial, sans-serif; text-decoration: none; cursor: pointer; }
.app-main--auth .btn-google:hover { background: #f0f1f1; color: #1f1f1f; text-decoration: none; }
.app-main--auth .btn-google__logo { flex: none; }
[data-theme="dark"] .app-main--auth .btn-google { border-color: #8e918f; background: #131314; color: #e3e3e3; }
[data-theme="dark"] .app-main--auth .btn-google:hover { background: #26272a; color: #e3e3e3; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .app-main--auth .btn-google { border-color: #8e918f; background: #131314; color: #e3e3e3; }
:root:not([data-theme="light"]) .app-main--auth .btn-google:hover { background: #26272a; color: #e3e3e3; }
}
.app-main--auth .auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.app-main--auth .auth-divider::before, .app-main--auth .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }