/* Shared layer on top of theme.css (the Smart Drive prototype stylesheet,
   copied unchanged). Header, footer, links and long-form legal text. Uses
   theme.css tokens only; no scripts and no remote resources (site CSP). */
:root { color-scheme: dark; }
html, body { height: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--cyan); text-underline-offset: 0.15em; }
.skip { position: absolute; left: -999px; top: 0; padding: 8px 14px; background: var(--bg2); color: var(--text); border-radius: 0 0 12px 0; }
.skip:focus { left: 0; z-index: 10; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 40px) 0; }
.topbar .brand { display: flex; padding: 0; color: var(--text); text-decoration: none; }
.topnav { display: flex; gap: 8px; }
.topnav a { text-decoration: none; }
.topnav .chip:hover, .topnav .chip[aria-current] { color: var(--text); border-color: rgba(76, 201, 240, .5); }

.sitefoot { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 40px; border-top: 1px solid var(--panel-b); color: var(--muted); font-size: 13px; }
.sitefoot p { margin: 0 0 6px; }
.sitefoot address { font-style: normal; margin: 0 0 6px; }

/* Long-form pages: Terms, Privacy, 404 */
main.legal { flex: 1; width: 100%; max-width: 50rem; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(16px, 3vw, 40px) 48px; font-size: 16px; line-height: 1.7; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.legal h2 { font-size: 22px; line-height: 1.3; margin: 40px 0 8px; letter-spacing: -.01em; scroll-margin-top: 16px; }
.legal h3 { font-size: 17px; margin: 28px 0 4px; color: #c4cbf0; scroll-margin-top: 16px; }
.legal p, .legal ul, .legal ol { margin: 0 0 16px; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal li { margin-bottom: 6px; }
.legal address { font-style: normal; margin: 0 0 16px; }
.legal .lede { font-size: 19px; color: #c4cbf0; max-width: 38rem; }
.legal .meta { color: var(--muted); font-size: 14px; }
.legal .toc { columns: 2 16rem; column-gap: 32px; padding-left: 1.4rem; }
.legal .toc li { break-inside: avoid; }
.legal .draft-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .4); color: #fde68a; }
.legal strong { color: var(--text); }