/* ============================================================
   legal.css — privacy, terms, the health and AI disclaimer.

   A legal document is the plainest reading there is, so it gets the
   reading system and almost nothing of its own: the measure, the two
   sizes and the luminance ladder come from editorial.css. What is left
   here is the structure a long document needs — a table of contents
   that opens, numbered sections, and tables that stay readable.

   Gone with the rest of the site: the gradient hairline that faded out
   two thirds across each heading, the filled panel under the contents,
   and seven type sizes between 14px and 68px.

   js/legal-toc.js builds the contents from the h2s; without the script
   the document is unchanged, just without the rail. Its hooks are
   `.legal-doc`, `.legal-toc` and the headings' ids.
   ============================================================ */

.legal-main { max-width: var(--measure); }

.legal-doc h2 {
  position: relative;
  scroll-margin-top: 108px;
}

.legal-doc ul { margin: 14px 0 20px; padding-left: 1.1em; }
.legal-doc li { margin: 8px 0; }
.legal-doc li::marker { color: var(--lum-4); }

/* ---------- On this page ----------
   A control you operate, so it is a contour rather than a surface — the
   same hairline the cards use. */
.legal-toc {
  margin: 0 0 var(--s-section);
  border: 1px solid var(--card-line);
  border-radius: 22px;
  transition: border-color 0.22s var(--ease-soft);
}

.legal-toc:hover,
.legal-toc:focus-within { border-color: var(--card-line-hi); }

.legal-toc > summary {
  padding: 16px 20px;
  color: var(--lum-1);
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.legal-toc > summary::-webkit-details-marker { display: none; }

/* The chevron is the only mark here: it says the thing opens. */
.legal-toc > summary::after {
  content: "";
  float: right;
  width: 7px;
  height: 7px;
  margin: 9px 2px 0 0;
  border-right: 1.5px solid var(--lum-4);
  border-bottom: 1.5px solid var(--lum-4);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-soft);
}

.legal-toc[open] > summary::after { transform: rotate(-135deg); }

.legal-toc ol {
  margin: 0;
  padding: 0 20px 18px 38px;
}

.legal-toc li { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .legal-toc,
  .legal-toc > summary::after { transition: none; }
}