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

   These pages are read, not scanned, so the document itself keeps the opposite
   treatment to the marketing bands: a reading measure, generous leading, no
   reveal animation and no full-bleed sections. What they do NOT keep is a
   narrow *page* — the container is the same `.shell` measure the nav and footer
   use, and on desktop the table of contents moves into a sticky sidebar so the
   page fills its width the way the rest of the site does. Below 1024px the
   layout is inert and everything stacks in source order.

   The wrappers those rules hang off — `.legal-masthead`, `.legal-layout`,
   `.legal-aside`, `.legal-doc` — do not exist in the partials. They are added
   at build time by `legalBody()` in src/content/utility.js, which re-parents the
   partial's own nodes without altering them; see the note there.

   The shared nav and footer 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, 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;
}

/* ===== PAGE SHELL =====
   The base rule is the ORIGINAL one, unchanged: a single 46rem column. Below
   1024px there is no room for a sidebar, so a narrow centred measure is still
   the correct answer, and keeping it as the base means phone and tablet render
   byte-for-byte as they did before the sidebar existed. Widening the container
   is scoped to the breakpoint that can actually use the width — see below. */
.legal-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

/* ===== TWO-COLUMN DOCUMENT LAYOUT =====
   The problem this solves: at desktop widths these were the only pages whose
   content did not reach the same edges as the nav above it and the footer below
   it — a 46rem column stranded inside 1180px of chrome, which read as a phone
   layout stretched onto a desktop. So from 1024px up the container becomes the
   same `.shell` measure the rest of the site uses (main.css §3), and the table
   of contents moves into a sticky sidebar so the page has something to fill the
   recovered width with. The reading measure moves to `.legal-doc`: the document
   column, not the page, is what has to stay narrow.

   Everything here is inside the media query on purpose. `.legal-layout`,
   `.legal-aside` and `.legal-doc` carry no rules at all below the breakpoint,
   so they are inert divs and their children stack in source order.

   1024px is where 17rem of sidebar, the gap, a full reading measure and both
   gutters first fit without squeezing the document column. */
@media (min-width: 1024px) {
  .legal-wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
  }

  .legal-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  /* Sticky so the section list stays reachable through a long scroll. The 6rem
     top clears the sticky site nav, matching the `scroll-margin-top` the
     headings use so a click and its landing agree. */
  .legal-aside {
    position: sticky;
    top: 6rem;
    /* Own scrollbar rather than a clipped list if the TOC outgrows the viewport
       (the privacy policy has 16 entries). */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The reading measure, now scoped to the document column. `--prose-max` is
     the site-wide long-form measure from tokens.css. */
  .legal-doc { max-width: var(--prose-max); }

  /* The masthead spans the full shell, but its prose must not: an H1 and a lede
     set across 1180px read as a mistake. */
  .legal-masthead { max-width: 52rem; }

  /* First heading in the document column sits level with the top of the TOC
     card — the 4rem top margin the rule below gives every other h2 is there to
     separate it from the section above it, and there is no section above this
     one. */
  .legal-doc > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* ===== 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.
   Scoped to `.legal-wrap` so it outweighs the `.legal-wrap p` rule above —
   as a bare `.legal-lead` it lost every declaration it shares with that rule
   (size, colour, margin) and only its line-height was ever reaching the page. */
.legal-wrap .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; }
}

/* In the desktop sidebar the card is 17rem wide, so the two-up entry list that
   suits a full-width card no longer fits — one column, and the side padding
   comes back in to buy the entries their measure. The bottom margin goes too:
   the card is the sidebar's only child and the grid gap already separates it. */
@media (min-width: 1024px) {
  .legal-aside .legal-toc {
    padding: var(--space-24);
    margin-bottom: 0;
  }

  .legal-aside .legal-toc ol {
    columns: 1;
    /* The list is numbered and the numbers are meaningful cross-references in
       the body copy, so the markers stay — but they sit inside the card. */
    margin-left: 1.1rem;
  }

  .legal-aside .legal-toc li { line-height: 1.45; }
}

/* ===== 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); }