/* ===== LEGAL / LONG-FORM DOCUMENT PAGES =====
   Loaded after main.css on /privacy and /terms only (body.legal-page).

   These pages are read, not scanned, so they get the opposite treatment to the
   marketing bands: one narrow measure, generous leading, no reveal animation and
   no full-bleed sections. The shared nav and footer now come from the page shell
   — the `.legal-topbar` and `.legal-footer` rules this file used to carry were
   dropped when the pages moved into the build (src/content/utility.js), because
   they duplicated the site chrome.

   The document copy itself is owned by PRD-012 §3.4/§3.5 — "reference, do not
   re-author" — and is machine-copied from the pre-rebuild pages by
   tools/extract-partials.js. Styling it is in scope here; editing a word of it
   is not. */

body.legal-page {
  line-height: 1.7;
}

.legal-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

/* ===== DOCUMENT TYPOGRAPHY ===== */

.legal-wrap h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-12);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-32);
}

.legal-wrap h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-64);
  margin-bottom: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hairline);
  /* Clears the sticky nav when a table-of-contents link jumps here. */
  scroll-margin-top: 6rem;
}

.legal-wrap h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: var(--space-32);
  margin-bottom: var(--space-12);
  scroll-margin-top: 6rem;
}

.legal-wrap p,
.legal-wrap li {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
}

.legal-wrap ul,
.legal-wrap ol {
  margin: 0 0 var(--space-16) 1.35rem;
}

.legal-wrap li { margin-bottom: var(--space-8); }

.legal-wrap li::marker { color: var(--color-text-tertiary); }

.legal-wrap strong {
  font-weight: 600;
  color: var(--color-text);
}

.legal-wrap a {
  color: var(--color-accent-adaptive);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Lead paragraph under the H1 */
.legal-lead {
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-32);
}

/* ===== TABLE OF CONTENTS ===== */

.legal-toc {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-32);
  margin-bottom: var(--space-40);
}

.legal-toc h2 {
  margin: 0 0 var(--space-16);
  padding: 0;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.legal-toc ol {
  margin-bottom: 0;
  columns: 2;
  column-gap: var(--space-32);
}

.legal-toc li {
  margin-bottom: var(--space-8);
  font-size: var(--text-small);
  break-inside: avoid;
}

.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .legal-toc { padding: var(--space-24); }
  .legal-toc ol { columns: 1; }
}

/* ===== CALLOUT =====
   The plain-English summary of a section. Accent-tinted rather than grey so it
   reads as the authored summary it is, not as a disabled block. */
.legal-callout {
  background: var(--color-accent-surface);
  border: 1px solid var(--color-accent-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: var(--space-24);
  margin: var(--space-32) 0;
}

.legal-callout p {
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.legal-callout p:last-child { margin-bottom: 0; }

/* ===== TABLES (data-recipient / retention tables in the policy) ===== */

.legal-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-24);
  font-size: var(--text-small);
  /* A wide table scrolls inside its own box rather than widening the page. */
  display: block;
  overflow-x: auto;
}

.legal-wrap th,
.legal-wrap td {
  text-align: left;
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
}

.legal-wrap th {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.legal-wrap td { color: var(--color-text-secondary); }