/* ============================================================
   Клякса — legal pages (terms, privacy, cookie, AUP)
   Reuses tokens/topbar/footer from styles.css; only the
   document typography lives here.
   ============================================================ */

.legal {
  max-width: 760px;
  margin: 18px auto 40px;
  background: var(--paper-2);
  border: 1.5px solid var(--line-2);
  border-radius: 18px 26px 16px 24px / 24px 16px 26px 18px;
  padding: clamp(22px, 4vw, 44px);
  line-height: 1.6;
  font-size: 16px;
}
.legal-back { font-size: 14px; }
.legal h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  margin: 14px 0 6px;
}

.legal-meta { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.legal h2 { font-size: 20px; margin: 30px 0 8px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-inline-start: 22px; }
.legal li { margin-bottom: 6px; }
.legal code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--card);
  padding: 1px 5px;
  border-radius: 5px;
}
.legal-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 2px dashed #d8c9a8;
  font-size: 14px;
}
.legal-docs [aria-current="page"] { color: var(--ink); border-bottom-color: transparent; font-weight: 600; }

/* Version archive (scripts/archive-legal-version.py, registry legal-versions.json) */
.legal-archive-notice {
  margin: 12px 0 14px;
  padding: 10px 14px;
  background: var(--card);
  border-inline-start: 3px solid var(--amber);
  border-radius: 8px;
  font-size: 14px;
}
.legal-versions { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.legal-versions th, .legal-versions td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.legal-versions th { font-weight: 600; color: var(--muted); font-size: 13px; }