/* Login, privacy, terms. Tokens come from app.css. */

.page-login { min-height: 100dvh; }
.login { display: grid; grid-template-columns: 1fr; min-height: 100dvh; align-content: center; }
.login-hero { display: grid; gap: 8px; padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 0; justify-items: start; }
.login-wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: var(--t-17); }
.login-wordmark .wm-sub { font-weight: 500; color: var(--ink-3); font-size: var(--t-15); letter-spacing: 0; }
.login-art { width: 100%; display: flex; justify-content: center; }
.login-art .hero-img { width: 100%; max-width: 360px; height: auto; animation: float 6s ease-in-out infinite; }
.hero-img.is-light { display: none; }
[data-theme="light"] .hero-img.is-light { display: block; }
[data-theme="light"] .hero-img.is-dark { display: none; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.login-headline { font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; display: grid; }
.login-headline .dim { color: var(--ink-3); }

.login-side { display: grid; place-items: center; padding: 20px 20px calc(40px + env(safe-area-inset-bottom, 0px)); }
.login-card { width: 100%; max-width: 420px; display: grid; gap: 16px; padding: 28px 24px; }
.login-title { font-size: var(--t-24); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.login-lead { color: var(--ink-2); font-size: var(--t-15); }
.login-error { padding: 12px 14px; border-radius: var(--r-in); background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); color: var(--err); font-size: var(--t-14); }
.login-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: var(--r-btn); border: 1px solid transparent; background: #fff; color: #1f1f1f; font-size: var(--t-15); font-weight: 600; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.login-google::before { content: ''; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34A21.99 21.99 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E") center / contain no-repeat; }
.login-google:hover { background: #F1F3F4; }
.login-google:active { transform: translateY(1px); }
[data-theme="light"] .login-google { background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); }
[data-theme="light"] .login-google:hover { background: var(--card-3); }
.login-note { font-size: var(--t-13); color: var(--ink-3); text-align: center; }
.login-links { font-size: var(--t-13); color: var(--ink-3); text-align: center; }
.login-links a { text-decoration: underline; text-underline-offset: 3px; }
.login-links a:hover { color: var(--ink); }

@media (min-width: 1024px) {
  .login { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .login-hero { padding: 48px 24px 48px 64px; gap: 24px; align-content: center; }
  .login-art .hero-img { max-width: 560px; }
  .login-headline { font-size: 3.5rem; }
  .login-side { padding: 48px 64px 48px 24px; }
  .login-card { padding: 36px 32px; gap: 20px; }
}

/* privacy / terms */
.page-public main { max-width: 72ch; margin: 0 auto; padding: calc(32px + env(safe-area-inset-top, 0px)) 20px 64px; }
.pub-head { display: grid; gap: 12px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.page-public .pub-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--ink-2); font-size: var(--t-14); font-weight: 500; }
.page-public .pub-back a:hover { color: var(--ink); }
.page-public h1 { font-size: var(--t-32); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pub-date { color: var(--ink-3); font-size: var(--t-14); }
.page-public article { display: grid; gap: 48px; font-size: var(--t-15); line-height: 1.7; }
.page-public section { display: grid; gap: 14px; }
.page-public section + section { padding-top: 40px; border-top: 1px solid var(--line); }
.page-public h2 { font-size: var(--t-24); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.page-public h3 { font-size: var(--t-17); font-weight: 700; letter-spacing: -.01em; margin-top: 10px; }
.page-public p, .page-public li { color: var(--ink-2); }
.page-public ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.page-public li::marker { color: var(--ink-3); }
.page-public article a, .page-public footer a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.page-public a:hover { color: var(--ink); }
.page-public footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-13); color: var(--ink-3); }
.page-public footer a { color: var(--ink-2); }
.page-public h2.pub-h { font-size: var(--t-17); font-weight: 700; letter-spacing: -.01em; margin-top: 10px; line-height: 1.3; }