/*
 * Shared chrome for the long-form legal pages (/privacy, /terms).
 *
 * index.html keeps its styles inline on purpose: it is the page every
 * deep link lands on, so it must paint without a second round trip.
 * These two are read rarely and read slowly, so one shared sheet is
 * the better trade — and it keeps the palette from drifting between
 * them. Tokens mirror constants/Theme.ts.
 */
:root {
  --bg: #0A0A1A;
  --panel: #15152A;
  --panel-border: #252538;
  --accent: #A855F7;
  --text: #F0F0F0;
  --text-dim: #9A9AB0;
  --text-faint: #555566;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 40px 20px 8px; }

.top { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.top img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.top a { color: var(--text); font-weight: 800; font-size: 17px; text-decoration: none; }

h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.updated { margin: 0 0 28px; color: var(--text-faint); font-size: 13px; }
h2 {
  margin: 32px 0 10px; font-size: 15px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.3px; text-transform: uppercase;
}
p, li { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 8px; }
li b, p b { color: var(--text); font-weight: 600; }
a { color: var(--accent); }

/* A callout for the one thing on each page a reader should not skim past. */
.note {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 16px 18px; margin: 0 0 14px;
}
.note p:last-child { margin-bottom: 0; }

footer {
  color: var(--text-faint); font-size: 11px; text-align: center;
  padding: 28px 20px 30px;
}
footer a { color: var(--text-dim); text-decoration: none; }