/* legal.css — the public legal document pages (/privacy-policy, /terms).
 *
 * ⚠️ A PLAIN FILE SERVED AS-IS AT /css/legal.css — never routed through a Vite
 * entry. The pages are pre-rendered static HTML with no manifest, so a hashed
 * filename would be unreachable (docs/specs/ready/privacy-policy.md §1).
 *
 * ⚠️ CSP-SAFE BY CONSTRUCTION: this file loads nothing — no stylesheet imports
 * and no remote resource references — so the apex's `default-src 'self'` has
 * nothing to object to. tokens.css (linked by the page) brings the self-hosted
 * faces. tests/unit/legalDocuments.test.js scans this whole file, comments
 * included, which is why this note does not spell those constructs out.
 *
 * ⚠️⚠️ THE ARTICLE BODY IS STYLED THROUGH CHILD SELECTORS, AND THAT IS THE
 * EXCEPTION TO BEM, NOT A LAPSE. The fragment inside .legal-doc__body is HASHED
 * (lib/legal/renderLegalDocument.js) — it is the text an acceptance row records.
 * Putting classes on it would make a stylesheet rename a version event that
 * re-prompts every user. So the fragment stays class-free and is reached from
 * its one BEM parent: blocks with `>` (h1/h2/p/ul), and the only two inline
 * elements the renderer can emit (a, strong) by descendant — that set is
 * closed, because anything else throws at build time.
 */

.legal-doc {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  /* The documents carry long unbroken strings (email addresses, a bare URL); on a
     phone they must wrap rather than widen the page. */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

.legal-doc__masthead {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 0;
}

.legal-doc__wordmark {
  font-family: var(--font-wordmark);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  text-decoration: none;
}

.legal-doc__main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

/* ── Contents ───────────────────────────────────────────────────────────── */

.legal-doc__contents {
  margin: 0 0 var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.legal-doc__contents-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.legal-doc__contents-list {
  margin: 0;
  padding: 0 0 0 var(--space-5);
  columns: 2 16rem;
  column-gap: var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.legal-doc__contents-item {
  break-inside: avoid;
  margin: 0 0 var(--space-1);
  color: var(--color-text-faint);
}

.legal-doc__contents-link {
  color: var(--color-text);
  text-decoration: none;
}

.legal-doc__contents-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── The document (hashed fragment — child selectors only, see header) ──── */

.legal-doc__body > h1 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-page-title);
  font-weight: 400;
  line-height: 1.2;
}

.legal-doc__body > h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  scroll-margin-top: var(--space-6);
}

.legal-doc__body > p {
  margin: 0 0 var(--space-4);
}

.legal-doc__body > ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.legal-doc__body > ul > li {
  margin: 0 0 var(--space-2);
}

.legal-doc__body a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}

.legal-doc__body strong {
  font-weight: 600;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.legal-doc__footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-10);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legal-doc__footer-link {
  color: var(--color-text-muted);
}

.legal-doc__footer-link:hover {
  color: var(--color-accent);
}

.legal-doc__footer-sep {
  margin: 0 var(--space-2);
}

@media (max-width: 640px) {
  .legal-doc__masthead { padding: var(--space-6) var(--space-5) 0; }
  .legal-doc__main     { padding: var(--space-6) var(--space-5) var(--space-10); }
  .legal-doc__contents { padding: var(--space-4) var(--space-5); }
}

@media print {
  .legal-doc          { background: #fff; font-size: 11pt; }
  .legal-doc__contents,
  .legal-doc__footer  { display: none; }
  .legal-doc__main    { max-width: none; padding: 0; }
  .legal-doc__body a  { color: inherit; }
  .legal-doc__body > h2 { break-after: avoid; }
}