/* ============================================================================= Public legal pages — templates/legal_page.html (/terms, /privacy) ----------------------------------------------------------------------- Reuses the consent screen's theme machinery (auth_base + consent.css tokens + data-theme on ), so these pages track the Pro/Slate/Dark themes and respect the PWA safe-area exactly like the consent gate. This sheet adds only the page-specific layout: a full, readable document rather than the fixed- height "accept" box (so we do NOT use .policy-scroll here). HEX-FREE: every color is a var(--…) token from static/styles.css :root, so all three themes track automatically. Font sizes are plain rem literals. ============================================================================= */ .legal-page .consent-card { text-align: left; } .legal-title { font-size: 1.6rem; line-height: 1.2; margin: 0 0 var(--space-3, 12px); color: var(--text-heading, var(--text)); } /* .legal-draft-note removed 2026-07-27 with the draft banner it styled — the public pages present as the terms and carry no status label. */ /* Ordinary body copy, NOT a callout box — it states the update process, it is not a status disclaimer, and it must not read like the banner it replaced. */ .legal-update-note { color: var(--text-muted, var(--text)); margin: 0 0 var(--space-3, 12px); line-height: 1.6; } .legal-not { margin: 0 0 var(--space-5, 24px); } .legal-not h2 { font-size: 1rem; color: var(--text-heading, var(--text)); margin: 0 0 var(--space-3, 12px); } .legal-not-list { margin: 0; padding-left: 1.25em; } .legal-not-list li { margin: 0 0 6px; color: var(--text); } .legal-page .policy-section { margin-bottom: var(--space-5, 24px); } .legal-page .policy-section h2 { font-size: 1.15rem; color: var(--text-heading, var(--text)); margin: 0 0 var(--space-3, 12px); } .legal-page .policy-section p { color: var(--text); margin: 0 0 var(--space-3, 12px); line-height: 1.6; } .legal-crosslink, .legal-backlink { font-size: 0.9rem; color: var(--text-muted, var(--text)); } .legal-crosslink a, .legal-backlink a, .consent-brand a { color: var(--accent, var(--text)); text-decoration: none; } .legal-crosslink a:hover, .legal-backlink a:hover { text-decoration: underline; } .legal-backlink { margin-top: var(--space-5, 24px); }