/* The legal pages — today that is `/privacy/` and nothing else.
 *
 * **Third stylesheet, same pattern as `products/products.css`.** Every page on
 * the site loads `chrome.css` for the brand tokens and the top bar, then
 * `styles.css` for the body reset and `--max`; what a page needs beyond that
 * goes in a file only that page fetches. A legal document is the furthest thing
 * on this site from the marketing grid — one column of long prose, a table
 * nobody will widen, no hero and no placeholder art — so putting its rules in
 * `styles.css` would ship them to twenty-eight pages that will never use one.
 *
 * It is laid out to be *read*, which for a policy means two specific things:
 *
 *   A **measure**, not the grid. 70 characters, which is where a line stops
 *   costing the eye the return sweep. The marketing pages are 1200px wide
 *   because they are mostly pictures; a paragraph at 1200px is unreadable, and
 *   a privacy policy nobody finishes is a privacy policy nobody consented to.
 *
 *   **Numbered sections with their own anchors.** App Review, a data-protection
 *   enquiry and a support reply all need to point at one clause. A heading you
 *   cannot link to has to be quoted instead, and a quoted clause goes stale.
 */

/* **styles.css caps every heading on the site, and this page has to undo it.**
   `h1 { max-width: 11ch }` and `h2 { max-width: 14ch }` are right for a
   marketing page, where a headline is three big words that must not run the
   width of a 1200px grid. Here they turned "Everything we capture, in one
   table" into a 170px column of three lines. The rules below are more specific
   than the element selectors for everything they name — but a property they do
   not name is still the global one, which is exactly how this was missed. Keep
   `text-wrap: balance`: evening out a two-line heading is still wanted. */
.legal h1,
.legal h2 { max-width: none; }

/* Narrower than `--max` on purpose — see the note above. `ch` rather than px so
   it tracks the font rather than one measurement of it. */
.legal {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(48px, 8vw, 96px) clamp(64px, 9vw, 112px);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.legal h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}

/* The effective date and the "what this covers" line, which belong to the title
   rather than to the first section. */
.legal .meta {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* --- the summary ----------------------------------------------------------
 * **It is not a substitute and says so.** A summary box in a policy is a
 * genuine accessibility win and a genuine liability if it reads as the
 * operative text, so this one is styled as an aside and its last line points
 * down at the sections that bind. */
.legal .summary {
  margin: 36px 0 0;
  padding: 22px 24px;
  background: var(--wash);
  border-radius: 14px;
  border: 1px solid var(--line);
}

.legal .summary h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}

.legal .summary ul { margin: 0; padding-left: 20px; }
.legal .summary li { margin-block: 6px; }

/* The line that stops the box being mistaken for the policy. Set smaller and
   greyer than the list above it, because it is a label on the box rather than
   another one of its claims. */
.legal .summary .note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* --- sections -------------------------------------------------------------
 * `scroll-margin-top` and not a hack: `html` in styles.css sets
 * `scroll-padding-top: 96px` for the marketing pages' sticky bar, and a jump to
 * `#how-long` that lands with the heading under the chrome is a link that looks
 * broken. Belt and braces, because only one of the two applies depending on how
 * the browser got there. */
.legal section {
  padding-block: 0;
  margin-top: 56px;
  scroll-margin-top: 96px;
}

/* **Scoped to a section heading, not every h2 on the page.** The summary box
   has one too and must not get the hanging number treatment below. */
.legal section h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  position: relative;
}

/* **The number hangs in the margin, and the heading keeps the measure.**
   Written as a flex row first, which was wrong twice over: a bare text node
   beside the span becomes an anonymous flex item, and an anonymous item cannot
   be given `flex: 1` — so a three-word heading shrank to its longest word and
   set itself in a 120px column. Taken out of flow instead, the heading is an
   ordinary block that wraps against the measure like every paragraph under it,
   and its first letter lines up with theirs rather than being pushed right by
   the number.

   The numbers are in the markup rather than from a CSS counter on purpose: a
   counter renumbers silently when a section is inserted, and these numbers are
   quoted in support replies and in `docs/app-store.md`. */
.legal section h2 .n {
  position: absolute;
  right: 100%;
  margin-right: 14px;
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--accent);
  /* Optically on the heading's first baseline rather than its box top. */
  top: 0.42em;
}

/* Below the width where the gutter can hold a hanging number, it rejoins the
   line. `--gutter` bottoms out at 20px and the number needs about 30, so the
   breakpoint is where the measure stops being the binding constraint. */
@media (max-width: 760px) {
  .legal section h2 .n {
    position: static;
    margin-right: 10px;
  }
}

.legal h3 {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin: 32px 0 10px;
}

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

.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-block: 8px; }

.legal strong { color: var(--ink); font-weight: 500; }

/* The controller's registered name and address — a real `address` element,
   because that is what it is, and browsers italicise it by default, which a
   postal address is not. */
.legal address {
  font-style: normal;
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  line-height: 1.6;
}

/* Inline links are underlined. On a marketing page an underline is noise; in a
   policy, a link the reader cannot see is a disclosure they did not get. */
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.legal a:hover { text-decoration-color: var(--accent); color: var(--accent); }

.legal code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--wash);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}

/* --- the tables -----------------------------------------------------------
 * The heart of the document: what is captured, where it goes, how long it is
 * kept. Wrapped in `.legal-table` so the table can scroll sideways on a phone
 * without the page doing it — a body that scrolls horizontally breaks every
 * other section to show one row. */
.legal-table {
  overflow-x: auto;
  margin-block: 0 20px;
  -webkit-overflow-scrolling: touch;

  /* **It breaks out of the measure, and the measure is why it has to.** 70ch is
     about 575px — a four-column table of prose does not belong in that, and the
     tables are the part of this page somebody actually came to read. So the
     wrapper takes the marketing grid's width instead, up to what the window
     allows, and centres itself on the text column:

       width         the grid's 1200px, or the viewport minus both gutters,
                     whichever is smaller.
       margin-inline 50% of the *column* is the column's centre; pulling back
                     half the wrapper's own width centres the wider box on it.
                     Negative above 70ch, which is the whole point, and exactly
                     0 on a phone where the two widths agree — so there is no
                     breakpoint to maintain.

     `100vw` counts a classic scrollbar that the layout viewport does not, which
     can make this up to ~15px wider than the body's content box. It lands in
     the gutter, which is at least 20px, so it never makes the page scroll
     sideways — the wrapper does that itself, which is what `overflow-x` is for. */
  --escape: min(var(--max), calc(100vw - 2 * var(--gutter)));
  width: var(--escape);
  margin-inline: calc(50% - var(--escape) / 2);
}

/* A real `caption`, not a paragraph above the table: it is the table's own
   accessible name, which is what a screen reader announces on entering it. Left
   aligned, because a centred caption over a left-aligned table reads as a
   heading for the section rather than a label for the table. */
.legal caption {
  text-align: left;
  padding-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.5;
}

.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.legal thead th {
  font-weight: 500;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-2);
  white-space: nowrap;
}

.legal tbody th {
  font-weight: 500;
  color: var(--ink);
  /* The row label is the thing being scanned for, so it does not wrap away from
     its row on a narrow screen — the wrapper scrolls instead. */
  min-width: 13ch;
}

.legal tbody tr:last-child th,
.legal tbody tr:last-child td { border-bottom: none; }

/* A cell that is the answer somebody came for. One per table at most. */
.legal td.never { color: var(--ink); font-weight: 500; }

/* --- contents -------------------------------------------------------------
 * Twelve sections is past the length a reader will scroll to survey, so they
 * get a list. Not sticky and not a sidebar: a legal page is read once, and a
 * floating panel is a thing to style at four widths for a journey nobody
 * repeats. */
.legal-toc {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
  font-size: 14.5px;
}

@media (max-width: 560px) { .legal-toc { columns: 1; } }

.legal-toc li { margin-block: 5px; break-inside: avoid; }

.legal-toc a {
  text-decoration: none;
  color: var(--ink-2);
}

.legal-toc a:hover { color: var(--accent); }

.legal-toc .n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-right: 8px;
}