/* ══════════════════════════════════════════════════════════════════════════
   Pathwise — the legal pages (privacy, terms, delete-account)

   ONE STYLESHEET FOR THREE DOCUMENTS, and deliberately not index.html's.

   The landing page carries three switchable skins, a lesson player and a
   runtime translator that walks the document's text nodes. None of that
   belongs on a page whose whole job is to be read, kept, printed and linked
   to — including by a Play Console reviewer on a slow connection, and by
   somebody who cannot sign in and needs the deletion instructions. So these
   pages load two stylesheets and no JavaScript at all.

   BILINGUAL WITHOUT A TOGGLE, for the same reason. index.html swaps language
   in place, which is right for marketing and wrong here: these documents say
   that the Persian text is the one that governs, and that sentence is only
   honest if both texts are on the page at once, one under the other, with
   nothing hiding either.

   The palette is the app's own Clean Slate, with Midnight Neon under
   prefers-color-scheme: dark — the same two token sets index.html defines,
   trimmed to what a document needs.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Clean Slate */
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F4F5F8;
  --border: #ECECEF;
  --border-strong: #E4E6EC;
  --accent: #4F5DE4;
  --accent-tint: #EEF0FE;
  --on-accent: #FFFFFF;
  --text: #17181C;
  --text-2: #5C616B;
  --text-3: #8A8F99;
  --fa: 'Vazirmatn';
  --en: 'Schibsted Grotesk';
  --shell: min(760px, 92vw);
  --r-card: 16px;
  --r-btn: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Midnight Neon, on the quieter end: a legal page is read for minutes at
       a time, so the accent is used as ink and a rule rather than as glow. */
    --bg: #0D1117;
    --surface: #161C24;
    --surface-2: #0F151B;
    --border: #232B36;
    --border-strong: #2E3844;
    --accent: #B8F135;
    --accent-tint: rgba(184, 241, 53, .1);
    --on-accent: #0D1117;
    --text: #F2F6FA;
    --text-2: #A9B4C0;
    --text-3: #7B8794;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fa), var(--en), system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.shell { width: var(--shell); margin-inline: auto }

/* ── top bar ──────────────────────────────────────────────────────────────
   The way back to the site, and nothing else. No nav, no CTA: somebody who
   arrived here from a store listing or from Settings came to read one thing.
   ─────────────────────────────────────────────────────────────────────── */
.top {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.top .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  font: 700 19px/1 var(--fa), var(--en), system-ui;
}
.mark {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent);
}
.mark svg { width: 60%; height: 60%; display: block }
.mark path { stroke: var(--on-accent); fill: none }
.mark circle { fill: var(--on-accent) }
.back {
  color: var(--text-2); text-decoration: none;
  font: 600 13.5px/1 var(--fa), var(--en), system-ui;
}
.back:hover { color: var(--accent) }

/* ── the document ─────────────────────────────────────────────────────── */
main { padding-block: clamp(34px, 6vw, 62px) }

article + article {
  margin-top: clamp(40px, 7vw, 72px);
  padding-top: clamp(40px, 7vw, 72px);
  border-top: 1px solid var(--border-strong);
}

h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5.2vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}
h2 {
  margin: clamp(30px, 4vw, 44px) 0 12px;
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 700;
  line-height: 1.45;
}
h3 {
  margin: 22px 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}
p, li { font-size: 15.5px; line-height: 1.95; color: var(--text-2); margin: 0 0 12px }
li { margin-bottom: 8px }
ul, ol { margin: 0 0 14px; padding-inline-start: 22px }
strong { color: var(--text); font-weight: 700 }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px }

/* The English half sets its own face and direction; the document root is
   Persian, because Persian is the text that governs. */
[lang="en"] {
  font-family: var(--en), system-ui, sans-serif;
}
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3 { letter-spacing: -.015em }
[lang="en"] p, [lang="en"] li { line-height: 1.75 }

/* ── the stamp ────────────────────────────────────────────────────────── */
.stamp {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 26px; padding: 7px 13px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  font: 700 12.5px/1.6 var(--fa), var(--en), system-ui;
}

/* ── callout: the one paragraph on a page that must not be skimmed past ── */
.note {
  margin: 18px 0;
  padding: 15px 17px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-card);
}
.note :last-child { margin-bottom: 0 }
.note.strong { border-color: var(--accent); background: var(--accent-tint) }
.note.strong p, .note.strong li { color: var(--text) }

/* Numbered steps: the deletion instructions, which are the only thing on
   these three pages somebody has to FOLLOW rather than read. */
ol.steps { counter-reset: step; list-style: none; padding-inline-start: 0 }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 44px;
  margin-bottom: 16px;
  min-height: 32px;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font: 700 14px/1 var(--fa), var(--en), system-ui;
}
[lang="en"] ol.steps > li::before { font-family: var(--en), system-ui }

/* ── footer ───────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: 28px;
}
footer p {
  margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-3);
}
footer .row {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between; align-items: center;
}
footer a { color: var(--text-2) }