/* ====================================================================
   Legal pages — privacy / terms / cookies / delete, x4 languages.
   Depends on: /css/mentranova.css (tokens, nav, footer) + /css/articles.css.
   Loaded LAST so it wins over the generic `h1` / `.step` rules in articles.css.

   WHY THIS FILE EXISTS
   These 16 pages used to carry a self-contained dark <style> block. Commit
   17c9eaa51 ("changed tests and articles to new style", Apr 2026) removed it and
   linked mentranova.css + articles.css instead — but neither of those ever
   carried the legal-page layout classes (.container, .header, .logo,
   .last-updated, .back-link, .content-section, tables, and the delete-page
   .step* / .visual-guide / .path set). The pages therefore shipped as unstyled
   browser-default text for months: nothing 404'd, nothing errored, every class
   was simply undefined. Grepping the HTML could never show it.

   Everything is scoped under `body.legal` so it cannot leak into the ~6,700
   generated pages if this file is ever linked more widely, and so it outranks
   articles.css without !important.

   `lib/legalRender.js` rewrites the region between the LEGAL_CONTENT markers
   from admin-published documents. The markup it emits is exactly the markup
   below — .content-section per h2, .highlight-box for callouts, bare <table> —
   so a CMS-rendered page and a hand-written one style identically.
   ==================================================================== */

/* ---- LAYOUT ---- */
body.legal .container {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
@media (max-width: 720px) { body.legal .container { padding: 28px 18px 56px; } }

/* ---- BACK LINK ---- */
body.legal .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 32px;
  transition: border-color .15s, color .15s;
}
body.legal .back-link:hover { border-color: var(--line-2); color: var(--ink); }

/* ---- PAGE HEADER ---- */
body.legal .header {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
body.legal .header h1 {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
  max-width: none;
  margin: 0 0 12px;
  text-align: left;
}
body.legal .last-updated,
body.legal .subtitle {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-style: normal;
  margin: 0;
}
body.legal .subtitle {
  font-family: var(--ff-sans);
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---- SECTIONS ---- */
body.legal .content-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 26px 30px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { body.legal .content-section { padding: 22px 20px; } }

/* The sticky nav would otherwise cover an #anchor target — legal documents get
   linked section-by-section from the app, the cookie banner and support mail. */
body.legal .content-section h2,
body.legal .content-section h3 { scroll-margin-top: 90px; }

body.legal .content-section h2 {
  font-size: clamp(22px, 2.8vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}
body.legal .content-section h2 ~ h2 { margin-top: 40px; }
body.legal .content-section h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 30px 0 10px;
}
body.legal .content-section p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.72;
  margin: 0 0 16px;
}
body.legal .content-section p:last-child { margin-bottom: 0; }
body.legal .content-section ul,
body.legal .content-section ol {
  margin: 0 0 16px 22px;
  padding: 0;
  color: var(--ink-2);
}
body.legal .content-section li {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 8px;
}
body.legal .content-section strong { color: var(--ink); font-weight: 600; }
body.legal .content-section a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.legal .content-section a:hover { color: var(--accent); }

/* ---- TABLES (privacy: processors + retention; cookies: the cookie list) ---- */
body.legal .content-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
body.legal .content-section caption {
  caption-side: top;
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
}
body.legal .content-section th,
body.legal .content-section td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
body.legal .content-section th {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
body.legal .content-section td { color: var(--ink-2); }
body.legal .content-section tbody tr:last-child td { border-bottom: 0; }

/* ---- CALLOUTS ----
   .highlight-box and .info-box already come from articles.css; only the spacing
   inside a .content-section card and the unstyled .warning-box need adding here.
   (.warning-box lives in tests.css, which these pages do not load.) */
body.legal .content-section .highlight-box,
body.legal .content-section .info-box,
body.legal .content-section .warning-box { margin: 20px 0; }
body.legal .content-section .highlight-box ul,
body.legal .content-section .info-box ul,
body.legal .content-section .warning-box ul { margin-bottom: 0; }

body.legal .warning-box {
  background: var(--warm-tint);
  border-left: 3px solid var(--warm);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 20px 24px;
  color: var(--warm-ink);
}
body.legal .warning-box strong { color: var(--warm-ink); }
body.legal .warning-box p,
body.legal .warning-box li { color: var(--warm-ink); }

/* ---- COOKIE SETTINGS BUTTON (/cookies) ----
   mentranova.css resets every <button> to borderless/transparent, so without
   this the "manage cookie settings" control renders as plain body text. */
body.legal .manage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background .15s;
}
body.legal .manage-btn:hover { background: var(--accent-ink); }

/* ---- STEP LIST (/delete) ----
   articles.css .step is a centred, counter-numbered card and its ::before would
   print a SECOND number next to the explicit <span class="step-number">. */
body.legal .step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 18px 20px;
  margin: 0 0 12px;
}
body.legal .step::before { content: none; }
body.legal .step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}
body.legal .step-content { flex: 1; min-width: 0; }
body.legal .step-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.4;
}
body.legal .step-description {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ---- QUICK PATH BOX (/delete) ---- */
body.legal .visual-guide {
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-m);
  padding: 16px 20px;
  margin: 20px 0;
}
body.legal .visual-guide-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  margin-bottom: 8px;
}
body.legal .path {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-word;
}