/* A legal document page: privacy.html, and any other that follows.
 *
 * Deliberately NOT the landing page. index.html is scroll theatre — a clock, a dusk crossfade,
 * entrance animations — and none of that belongs under a document somebody was sent to read,
 * possibly by an app-store reviewer who needs to reach the text without a session and without
 * waiting for anything to animate in.
 *
 * So this file adds a quiet reading column and nothing else. Every colour, the font and the
 * gutter come from styles.css, which is loaded first: the page is unmistakably Vezi without
 * redefining a single token. The .lang and .btn rules are inherited from there too, which is why
 * the header markup reuses those class names rather than inventing its own.
 *
 * The page is day-phase only. The landing page's night palette is tied to scrolling past dusk,
 * and a document has no dusk.
 */

.legal {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  margin: 0;
  /* Not `100vh`: on iOS that is the tall viewport and leaves a gap under the footer when the
     browser chrome is showing. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────────────────────────────────────── */

.legal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
  /* Sticky so the way back and the language switch stay reachable in a 6,000-word document. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
}

.legal__brand { display: inline-flex; align-items: center; }
.legal__brand img { display: block; height: 32px; width: auto; }

.legal__right { display: flex; align-items: center; gap: 12px; }

/* ── The document ───────────────────────────────────────────────────────────────────────────── */

.legal__doc {
  flex: 1;
  width: 100%;
  /* ~70 characters. Long-form prose, not a marketing column. */
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gutter) 96px;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.legal__doc h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--accent-display);
}

.legal__doc h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}

/* The first h2 follows the intro, where a rule would read as a divider under the title. */
.legal__doc > h1 + p + h2 { border-top: 0; padding-top: 0; }

.legal__doc h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.6em 0 0.4em;
  color: var(--ink);
}

.legal__doc p { margin: 0 0 1.1em; }
.legal__doc strong { font-weight: 600; color: var(--ink); }

.legal__doc ul,
.legal__doc ol { margin: 0 0 1.2em; padding-left: 1.1em; }
/* The reset in styles.css strips list-style from every list; steps need their numbers back. */
.legal__doc ol { list-style: decimal; }
.legal__doc li { margin-bottom: 0.5em; }
.legal__doc li::marker { color: var(--fill); }

.legal__doc a {
  color: var(--accent-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal__doc a:hover { text-decoration-thickness: 2px; }

.legal__doc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0 1.4em;
}

/* The version line after the rule — the last paragraph of the document. */
.legal__doc hr + p {
  color: var(--ink2);
  font-size: 0.9375rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────────────────────────── */

.legal__foot {
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  color: var(--ink2);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Print ──────────────────────────────────────────────────────────────────────────────────── */

/* A legal document gets printed and attached to things. The nav is useless on paper, and a
   hidden language block must stay hidden — `[hidden]` alone loses to `display` in some engines. */
@media print {
  .legal__nav, .legal__foot, .skip { display: none !important; }
  .legal__doc { max-width: none; padding: 0; font-size: 11pt; }
  .legal__doc [hidden], [data-doc][hidden] { display: none !important; }
  .legal__doc h2 { break-after: avoid; }
  .legal__doc a { color: inherit; text-decoration: underline; }
}