/* ════════════════════════════════════════════════════════
   LEGAL PAGES — terms.html and privacy.html

   One reading column, nothing else. These are documents, so they
   get document furniture: a measure that stops around 68
   characters, generous line height, and headings that separate
   rather than shout.

   Tokens, themes and type come from lesson.css; the header comes
   from site-header.css and site-header.js. This file only lays out
   the page between them.
   ════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { overflow-x: clip; overflow-y: auto; }

/* The header sits in a .hero, as it does on every other page, but
   here the hero is only ever the header. */
.hero {
  --ease: var(--ease-ui);
  position: relative;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  padding: min(26px, 3.5vh) 48px min(20px, 2.6vh);
  z-index: 2;
}

.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 88px) 24px clamp(64px, 12vh, 120px);
  font-family: var(--body);
  color: var(--ink);
}

.doc-kicker {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: var(--track-label-wide); text-transform: uppercase;
  color: var(--ink-mid);
}

.doc h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 0.5rem 0 0.75rem;
  text-wrap: balance;
}

.doc-updated {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-mid);
  padding-bottom: clamp(24px, 4vh, 40px);
  border-bottom: 1px solid var(--divider);
  margin-bottom: clamp(28px, 5vh, 48px);
}

.doc h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.02em;
  margin: clamp(36px, 6vh, 56px) 0 0.7rem;
}
.doc h2:first-of-type { margin-top: 0; }

.doc p,
.doc li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-muted);
}
.doc p { margin: 0 0 1rem; }

.doc ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.doc li { margin-bottom: 0.4rem; }
.doc li::marker { color: var(--gold); }

.doc strong { color: var(--ink); font-weight: 700; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--gold-dark); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--card-bg);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--ink);
}

/* The opening summary. The whole document in a few lines, for
   anyone who will not read the rest — which is most people. */
.doc-summary {
  background: var(--card-bg);
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-soft);
  margin-bottom: clamp(28px, 5vh, 48px);
}
/* Short bar above, not a stripe down the side. This is the same mark
   .rx-rule-bar makes on every rule box in a lesson — same width, same
   height token, same colour — so a marked block looks the same here
   as it does inside the course. */
.doc-summary::before {
  content: '';
  display: block;
  width: 56px; height: var(--accent-bar-height);
  background: var(--highlight);
  margin-bottom: 16px;
}
.doc-summary p:last-child { margin-bottom: 0; }

/* Storage table */
.doc-table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.doc th {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mid);
  text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.doc td {
  padding: 12px; border-bottom: 1px solid var(--divider);
  color: var(--ink-muted); vertical-align: top; line-height: 1.55;
}
.doc td:first-child { color: var(--ink); }
.doc tr:last-child td { border-bottom: none; }

/* Something the author still has to fill in. Deliberately loud:
   an unfinished legal page should look unfinished. */
.doc-todo {
  background: var(--wrong-bg, #FDECEA);
  border: 1.5px dashed var(--wrong-border, #C0392B);
  border-radius: var(--radius-soft);
  padding: 16px 20px;
  margin: 0 0 1rem;
}
.doc-todo p { margin: 0; color: var(--ink); font-weight: 600; }

/* Slim footer. The full site footer carries a contact form; a legal
   page does not need one, and a third hand-written copy of that
   block is a third chance for the three to drift apart. */
.doc-foot {
  border-top: 1px solid var(--divider);
  padding: 28px 48px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  font-family: var(--sans);
  font-size: var(--size-xs); color: var(--ink-mid);
}
.doc-foot img { display: block; width: 130px; height: auto; }
html:is([data-theme="dark"], [data-theme="wald"]) .doc-foot img {
  filter: brightness(0) invert(1);
}
.doc-foot nav { display: flex; gap: 22px; }
.doc-foot a { color: var(--ink-mid); text-decoration: none; }
.doc-foot a:hover { color: var(--ink); }
.doc-foot :is(a, button):focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 3px;
}

@media (max-width: 900px) {
  .hero { padding: 18px 20px 16px; }
  .doc { padding-left: 20px; padding-right: 20px; }
  .doc-foot { padding: 24px 20px 32px; }
}