/* ==========================================================================
   ROAMLU — privacy.css
   Standalone styling for the long-form legal pages (privacy.html).
   Reuses the design tokens defined in styles.css (:root variables) so the
   page matches the site in both light and dark themes. Kept external (no
   inline styles) to satisfy the strict CSP (style-src 'self').
   ========================================================================== */

.legal-page {
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* ---- Top bar -------------------------------------------------------------- */
.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
  padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--bg-app) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-default);
}
.legal-topbar .brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }

/* ---- Document shell ------------------------------------------------------- */
.legal-doc {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(var(--sp-6), 5vw, var(--sp-30)) var(--sp-5) var(--sp-24);
}
.legal-doc .legal-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-2);
}
.legal-doc h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
}
.legal-doc .legal-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
}
.legal-doc .legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-default);
}

/* ---- Callout note --------------------------------------------------------- */
.legal-note {
  background: var(--tint-orange);
  border: 1px solid color-mix(in srgb, var(--brand-orange) 40%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: 0.92rem;
  color: var(--text-primary);
}
.legal-note strong { color: var(--brand-orange-strong); }

/* ---- Table of contents ---------------------------------------------------- */
.legal-toc {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-8);
}
.legal-toc h2 {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-3);
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--sp-6);
}
.legal-toc li { margin: 0 0 var(--sp-2); break-inside: avoid; }
.legal-toc a { color: var(--text-primary); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); text-decoration: underline; }
.legal-toc .legal-toc-num { color: var(--accent); font-family: var(--font-mono); margin-right: 0.4em; }

/* ---- Sections ------------------------------------------------------------- */
.legal-doc section { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); margin: var(--sp-8) 0 0; }
.legal-doc h2.legal-h {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-3);
}
.legal-doc h2.legal-h .legal-h-num {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--accent);
  margin-right: 0.5em;
}
.legal-doc h3 {
  font-size: 1.02rem;
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal-doc p { line-height: 1.7; margin: 0 0 var(--sp-4); color: var(--text-primary); }
.legal-doc ul, .legal-doc ol.legal-list { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.legal-doc li { line-height: 1.7; margin: 0 0 var(--sp-2); }
.legal-doc a { color: var(--accent); }
.legal-doc strong { color: var(--text-primary); }
.legal-doc .placeholder {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-surface-2);
  border: 1px dashed color-mix(in srgb, var(--brand-orange) 45%, transparent);
  border-radius: var(--r-xs);
  padding: 0.05em 0.4em;
  color: var(--brand-orange-strong);
}

/* ---- Data table ----------------------------------------------------------- */
.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-5); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}
.legal-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-surface);
}
.legal-table tbody tr:last-child td { border-bottom: none; }

/* ---- Footer --------------------------------------------------------------- */
.legal-footer {
  border-top: 1px solid var(--border-default);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.legal-footer a { color: var(--accent); text-decoration: none; }
.legal-footer a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}

/* ==========================================================================
   i18n — multilingual (en · ar · fr · es · tr · ur · de · nl)
   legal-boot.js sets <html lang> + <html dir> from the saved roamlu:legalLang
   BEFORE first paint, so visibility is driven purely by CSS (no flash). Every
   language's content block lives in the page inside a [data-lang] <main>; only
   the one matching <html lang> is shown. legal.js wires the language menu.
   ========================================================================== */
[data-lang] { display: none; }
html[lang="en"] [data-lang="en"],
html[lang="ar"] [data-lang="ar"],
html[lang="fr"] [data-lang="fr"],
html[lang="es"] [data-lang="es"],
html[lang="tr"] [data-lang="tr"],
html[lang="ur"] [data-lang="ur"],
html[lang="de"] [data-lang="de"],
html[lang="nl"] [data-lang="nl"] { display: revert; }

/* Logical properties so the layout mirrors correctly in RTL (Arabic, Urdu). */
.legal-doc ul,
.legal-doc ol.legal-list { padding-left: 0; padding-inline-start: 1.4em; }
.legal-toc-num { margin-right: 0; margin-inline-end: 0.4em; }
.legal-doc h2.legal-h .legal-h-num { margin-right: 0; margin-inline-end: 0.5em; }
.legal-table th,
.legal-table td { text-align: start; }

/* Arabic-script typography — the Latin display/mono faces don't cover Arabic or
   Urdu, so fall back to Cairo (already loaded in <head>) for AR & UR content. */
html[lang="ar"] body,
html[lang="ur"] body { font-family: "Cairo", var(--font-sans); }
html[lang="ar"] .legal-doc h1, html[lang="ur"] .legal-doc h1,
html[lang="ar"] .legal-doc h2.legal-h, html[lang="ur"] .legal-doc h2.legal-h,
html[lang="ar"] .legal-kicker, html[lang="ur"] .legal-kicker,
html[lang="ar"] .legal-meta, html[lang="ur"] .legal-meta,
html[lang="ar"] .legal-toc h2, html[lang="ur"] .legal-toc h2,
html[lang="ar"] .legal-table thead th,
html[lang="ur"] .legal-table thead th { font-family: "Cairo", var(--font-sans); }

/* Language menu in the top bar. */
.legal-topbar-actions { display: inline-flex; align-items: center; gap: var(--sp-3); }
.legal-lang {
  height: 36px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.legal-lang:hover { border-color: var(--accent); color: var(--accent); }
.legal-lang:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }