/* Tandem Account: tokens from ~/dev/tandemweb/DESIGN-SYSTEM.md (fonts self-hosted; CSP allows 'self' only). */
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans.woff") format("woff"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: light;
  --tandem-green: #135740;
  --tandem-green-hover: #0f4733;
  --tandem-green-soft: #e8f5ef;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a5a;
  --text-muted: #6b7280;
  --bg-light: #f7f8fa;
  --border-light: #e5e7eb;
  --border-input: #c9cfd6;
  --error: #b42318;
  --error-soft: #fef3f2;
  --shadow-md: 0 2px 12px rgba(19, 87, 64, 0.08);
  --shadow-lg: 0 4px 24px rgba(19, 87, 64, 0.12);
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--text-primary);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; padding: 48px 16px; display: grid; place-items: start center; }
a { color: var(--tandem-green); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid rgba(19, 87, 64, 0.35); outline-offset: 2px; }

/* Sign-in */
.auth-shell { width: min(100%, 420px); display: grid; gap: 24px; justify-items: center; }
.brand { width: 220px; height: auto; }
.card {
  width: 100%; background: white; border: 1px solid var(--border-light); border-radius: 12px;
  padding: 40px 32px 32px; box-shadow: var(--shadow-lg);
}
.card h1 { margin: 0; font-family: var(--font-heading); font-size: 2.03rem; font-weight: 700; line-height: 1.2; }
.subtitle { margin: 8px 0 24px; color: var(--text-secondary); line-height: 1.5; }
.subtitle strong { color: var(--text-primary); overflow-wrap: anywhere; }
label { display: block; margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
input {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-input); border-radius: 8px;
  font: inherit; font-size: 1rem; color: var(--text-primary); background: white;
}
input:focus { border-color: var(--tandem-green); outline: 3px solid rgba(19, 87, 64, 0.15); outline-offset: 0; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: progress; }
.primary, .outline {
  width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 8px; font-size: 0.95rem; font-weight: 600; transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.primary { margin-top: 16px; border: 0; background: var(--tandem-green); color: white; box-shadow: 0 2px 8px rgba(19, 87, 64, 0.25); }
.primary:hover:not(:disabled) { background: var(--tandem-green-hover); transform: translateY(-1px); }
.outline { border: 1px solid var(--border-input); background: white; color: var(--text-primary); }
.outline:hover:not(:disabled) { border-color: var(--tandem-green); background: var(--tandem-green-soft); }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text-muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-light); }
.quiet { margin: 20px 0 0; text-align: center; }
.text {
  border: 0; background: none; padding: 4px; color: var(--tandem-green); font-size: 0.9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.text:hover { text-decoration-thickness: 2px; }
.status { min-height: 1.5em; margin: 16px 0 0; color: var(--text-secondary); font-size: 0.9rem; text-align: center; }
.status:empty { display: none; }
.alert {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--error-soft); color: var(--error);
  font-size: 0.9rem; line-height: 1.45;
}
.auth-links { display: flex; gap: 10px; margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-links a { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .primary, .outline { transition: none; } }
@media (max-width: 480px) { body { padding-top: 24px; } .card { padding: 32px 20px 24px; } }

/* Account, tools and privacy pages */
main:not(.card) {
  width: min(100%, 460px); background: white; border: 1px solid var(--border-light); border-radius: 12px;
  padding: 32px; box-shadow: var(--shadow-md);
}
main.info-page { width: min(100%, 760px); }
main:not(.card) h1 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 2.03rem; line-height: 1.2; }
main:not(.card) h2 { margin: 28px 0 8px; font-family: var(--font-heading); font-size: 1.25rem; }
main:not(.card) p { line-height: 1.6; color: var(--text-secondary); }
main:not(.card) li { margin: 8px 0; line-height: 1.55; color: var(--text-secondary); }
main:not(.card) button { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: var(--tandem-green); color: white; font-weight: 600; }
main:not(.card) button.secondary { margin-top: 12px; background: var(--tandem-green-soft); color: var(--tandem-green); }
.eyebrow { margin: 0 0 6px; color: var(--tandem-green); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lead { font-size: 1.1rem; }
.actions { margin: 30px 0 18px; }
.button-link {
  display: inline-block; border-radius: 8px; background: var(--tandem-green); color: white; padding: 14px 24px;
  font-weight: 600; text-decoration: none;
}
.fine-print { font-size: 0.85rem; color: var(--text-muted); }
#status:not(.status) { min-height: 24px; color: var(--text-secondary); }
main:not(.card) .notice { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--tandem-green-soft); color: var(--tandem-green); font-size: 0.9rem; }
main:not(.card) .notice.error { background: var(--error-soft); color: var(--error); }
main:not(.card) p strong { color: var(--text-primary); overflow-wrap: anywhere; }
.name-form button { margin-top: 12px; }
main:not(.card) .emails { margin: 0; padding-left: 20px; }
.email-form button { margin-top: 16px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 12px 0 0; font-weight: 400; color: var(--text-secondary); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--tandem-green); }