/* ════════════════════════════════════════════════════════════════════════
   legal.css — shared styling for the standalone legal pages
   (privacy.html, terms.html)

   These pages are deliberately SEPARATE from the app shell. They must be
   reachable and readable with no JavaScript, no login and no WebGL, because
   an App Store reviewer, a GDPR request, or a user on a slow connection all
   need to read them. Nothing here depends on globe.css or any script.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0b0d12;
  --panel:     #12151d;
  --ink:       #e8e6e1;
  --muted:     rgba(232, 230, 225, 0.62);
  --faint:     rgba(232, 230, 225, 0.38);
  --gold:      #c9973b;
  --gold-lite: #e0b05a;
  --line:      rgba(201, 151, 59, 0.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  padding: 0 20px 80px;
}

.legal-wrap { max-width: 760px; margin: 0 auto; }

/* ── Masthead ────────────────────────────────────────────────────────── */
.legal-head {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.legal-head a.brand { display: inline-block; }
.legal-head img { width: 150px; height: auto; display: block; }
.legal-head h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 400;
  margin: 26px 0 8px;
  letter-spacing: 0.2px;
}
.legal-meta { color: var(--faint); font-size: 13.5px; margin: 0; }

/* ── Body copy ───────────────────────────────────────────────────────── */
h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold-lite);
  margin: 42px 0 12px;
  padding-top: 4px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 26px 0 8px;
  color: var(--ink);
}
p, li { color: var(--muted); }
p { margin: 0 0 14px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--gold); }
a:hover { color: var(--gold-lite); }

/* Callout for the things people most need to notice — public sharing,
   deletion, and how to report content. */
.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 14.5px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(232, 230, 225, 0.09);
  vertical-align: top;
}
th { color: var(--ink); font-weight: 600; }
td { color: var(--muted); }

/* Wide tables must scroll inside themselves, never the page. */
.table-scroll { overflow-x: auto; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.legal-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--faint);
}
.legal-foot a { margin-right: 16px; }

@media (max-width: 620px) {
  body { font-size: 15.5px; padding: 0 16px 60px; }
  .legal-head h1 { font-size: 27px; }
  h2 { font-size: 20px; }
}