/*
 * The legal pages' stylesheet.
 *
 * ── WHY THESE PAGES DO NOT USE THE APP'S OWN CSS ────────────────────────────
 * A privacy policy is the one page that has to render when the product does
 * not. It is read by a store reviewer, by a regulator and by someone who has
 * just been asked to agree to it before they have an account — three readers
 * who arrive with no session, sometimes no JavaScript, and no patience for a
 * 1 MB bundle. So these pages are static HTML with one small stylesheet, no
 * script at all, and no dependency on the SPA booting.
 *
 * It is a separate file rather than an inline <style> in each page because the
 * site's Content-Security-Policy allows inline styles but pins inline SCRIPTS
 * to one hash — a rule worth not living next to. `default-src 'self'` covers
 * this file with no CSP change.
 *
 * Colours are the app's own tokens, copied rather than imported: see
 * src/index.css. If they drift the pages still read correctly, which is the
 * trade this file is making.
 */
:root {
  --bg: #070c18;
  --surface: #0d1626;
  --border: rgba(255, 255, 255, .08);
  --text: #f1f5f9;
  --text-sec: #8b9fc5;
  --teal: #14b8a6;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 46rem; margin: 0 auto; }

header { padding: 32px 0 8px; border-bottom: 1px solid var(--border); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .01em;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

h1 { font-size: 1.55rem; line-height: 1.25; margin: 18px 0 6px; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 34px 0 8px; }
h3 { font-size: 1rem; margin: 22px 0 4px; color: var(--text); }

.stamp { color: var(--text-sec); font-size: .9rem; margin: 0 0 4px; }

/* The language switcher. Plain anchors — the three documents are all on the
   page, so this works with scripting off and survives being printed. */
nav.langs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 8px; padding: 0;
}
nav.langs a {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-sec); text-decoration: none; font-size: .9rem;
}
nav.langs a:hover, nav.langs a:focus-visible { color: var(--text); border-color: var(--teal); }

section.doc {
  padding: 8px 0 40px;
  border-bottom: 1px solid var(--border);
}
section.doc:last-of-type { border-bottom: 0; }

/* Arabic is right-to-left and needs a line-height of its own: the default one
   clips the descenders on the taller glyph set. */
section.doc[dir="rtl"] { line-height: 1.9; }

p, li { color: var(--text); }
p.note, .muted { color: var(--text-sec); }

ul { padding-inline-start: 1.3em; }
li { margin: 5px 0; }

a { color: var(--teal); }

dl.pairs { margin: 8px 0; }
dl.pairs dt { font-weight: 600; margin-top: 14px; }
dl.pairs dd { margin: 2px 0 0; color: var(--text-sec); padding-inline-start: 0; }

table {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .93rem;
  display: block; overflow-x: auto;
}
th, td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-sec); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin: 16px 0;
}

footer {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--text-sec); font-size: .9rem;
}
footer a { color: var(--text-sec); }

.top { display: inline-block; margin-top: 18px; font-size: .88rem; }