/* Long-form prose for the legal pages (privacy policy, terms of use).
 *
 * Loaded only by those pages, after tokens.css and base.css. It deliberately
 * does NOT live in base.css: the landing page never renders a document like
 * this, and growing the 40 KB stylesheet every visitor downloads for four
 * pages nobody reads twice is the wrong trade. Tokens are inherited, so the
 * palette and type scale stay in one place.
 *
 * Nothing here depends on JavaScript. The landing page's `.reveal` classes
 * start at `opacity: 0` and are switched on by js/index.js — a legal page that
 * needs a script to become visible is a legal page that is sometimes invisible,
 * so these pages load no JS at all and use no reveal classes.
 */

.legal {
  /* 68ch keeps a line at roughly 12-15 words, which is where long prose stops
     costing the reader their place on the return sweep. */
  width: min(68ch, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.legal-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.legal-meta {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.3rem);
  line-height: 1.3;
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid rgb(from var(--line) r g b / 0.55);
}

.legal h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: var(--space-5) 0 var(--space-2);
}

.legal p,
.legal li {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.72;
}

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

.legal ul,
.legal ol { margin: 0 0 var(--space-4); padding-left: 1.35rem; }
.legal li { margin-bottom: var(--space-2); }

.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--sky); }

/* Data inventory. A table is the honest shape for "what we collect, why, on
   what basis" — three parallel facts per row that a paragraph would blur. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }

.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid rgb(from var(--line) r g b / 0.6);
}

.legal th {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display);
  background: rgb(from var(--paper) r g b / 0.5);
}

.legal td { color: var(--ink-soft); }
.legal td code {
  font-size: 0.85em;
  color: var(--ink);
  background: rgb(from var(--bg-deep) r g b / 0.8);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Unresolved-fact marker.
 *
 * Highlights an unresolved OWNER span while a document is being written, so an
 * unfinished passage cannot be mistaken for a finished one during local work.
 * It never reaches production: `scripts/check-legal-drafts.sh` fails
 * `make check` while any marker survives, so the deploy is blocked first.
 *
 * The draft banner that used to sit beside this was removed once the documents
 * were complete — whether they have been through legal review is internal
 * information, recorded in docs/tasks/055, not something a visitor is told. */
.legal-todo {
  background: rgb(from var(--peach) r g b / 0.18);
  border-bottom: 2px solid var(--peach);
  color: var(--ink);
  padding: 0.05em 0.3em;
  border-radius: 3px;
  font-weight: 600;
}

.legal-footer-nav {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}