/* Long-form documents on the نقاء site — the privacy policy, and anything
   like it that comes later.

   ONLY WHAT PROSE NEEDS. The palette, the starfield, the shell and the footer
   all come from site.css, which this loads beside rather than duplicating: a
   second copy of `--gold` is a second thing to forget when the first changes.
   What is here is the part site.css has no reason to carry — the measure, the
   rhythm between a heading and its paragraph, and lists that stay readable at
   RTL when they run to eight items.

   A separate FILE, not a <style> block, for the same reason site.css is one:
   the Content-Security-Policy in vercel.json says style-src 'self', and an
   inline block would mean loosening that for the whole site. */

/* ─── Document head ──────────────────────────────────────────────────── */

.doc-head {
  padding: clamp(28px, 6vw, 56px) 0 clamp(18px, 3vw, 28px);
  border-bottom: 1px solid var(--line-faint);
  margin-bottom: clamp(24px, 4vw, 40px);
}

/* The way back, and it is a link rather than a browser-back suggestion: this
   page is opened from a store listing as often as from the site itself, so
   «back» frequently means «leave», and a person who has just read a privacy
   policy is exactly the person who might now want to look at the app. */
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.doc-back:hover { opacity: 1; }

/* Rotated, not a second icon: the chevron points «forward» in a LTR file and
   this document is RTL, so back is the mirror of it. */
.doc-back svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.doc-head h1 {
  font-family: 'Amiri', Georgia, serif;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.3;
  margin-top: 14px;
  color: var(--hue-green-deep);
}

.doc-sub {
  color: var(--text-faint);
  opacity: 1;
  font-size: 0.92rem;
  margin-top: 6px;
}

/* ─── Body ───────────────────────────────────────────────────────────── */

/* A measure, because the shell is 1080px wide for a grid of cards and prose
   read at that width loses its place between one line and the next. */
.doc {
  max-width: 68ch;
  padding-bottom: clamp(40px, 8vw, 80px);
}

.doc section { margin-bottom: clamp(30px, 5vw, 46px); }

.doc h2 {
  font-family: 'Amiri', Georgia, serif;
  font-size: clamp(1.25rem, 3.4vw, 1.55rem);
  color: var(--hue-green-deep);
  margin-bottom: 12px;
  font-weight: 700;
}

/* A question inside a section — «ولماذا يُرسل هذا أصلًا؟». Smaller than h2 and
   not gold-clipped: it is a turn in the argument, not a new subject, and giving
   it the same weight as the section head would make the page read as a list of
   equals rather than as something with a shape. */
.doc h3 {
  font-family: 'Cairo', system-ui, sans-serif;
  font-size: clamp(1.02rem, 2.6vw, 1.15rem);
  font-weight: 700;
  color: var(--text-strong);
  margin: 22px 0 10px;
}

.doc p {
  color: var(--text-body);
  opacity: 1;
  line-height: 1.95;
  margin-bottom: 12px;
}

.doc b { color: var(--text-strong); font-weight: 700; opacity: 1; }

.doc a {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease;
  /* An email address in RTL prose wraps mid-address without this. */
  word-break: break-word;
}

.doc a:hover { border-bottom-color: var(--text-accent); }

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--surface-gold);
  border: 1px solid var(--line-faint);
  border-radius: 5px;
  padding: 1px 6px;
  /* Latin identifier inside Arabic prose: without this the surrounding
     direction pulls the brackets and punctuation to the wrong side. */
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

/* The summary block. Raised rather than merely first, because most people who
   open a privacy policy want one answer and should not have to mine for it. */
.doc-lede {
  background: var(--surface-accent);
  border: 1px solid var(--line-faint);
  border-radius: 16px;
  padding: clamp(18px, 3.5vw, 26px);
  margin-bottom: clamp(30px, 5vw, 46px);
}

.doc-lede p:last-child { margin-bottom: 0; }

/* ─── Lists ──────────────────────────────────────────────────────────── */

/* Custom markers rather than list-style, because a native RTL bullet sits at a
   different distance in every browser and these run long enough for the
   indent to matter. */
.doc-list { list-style: none; }

.doc-list li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 12px;
  color: var(--text-body);
  opacity: 1;
  line-height: 1.9;
}

.doc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue-green);
  opacity: 1;
}

/* The «never leaves your phone» list gets a check, not a bullet: the items are
   assurances, and reading them as an inventory is the opposite of the point. */
.doc-list--never li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  color: var(--text-accent);
  font-weight: 700;
  opacity: 1;
}

.doc-steps {
  list-style: none;
  counter-reset: step;
}

.doc-steps li {
  position: relative;
  counter-increment: step;
  padding-inline-start: 38px;
  margin-bottom: 16px;
  color: var(--text-body);
  opacity: 1;
  line-height: 1.9;
}

.doc-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0.2em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--surface-accent-solid);
}

.doc-note {
  font-size: 0.92rem;
  opacity: 0.72;
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 14px;
  margin-top: 14px;
}

.doc-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-accent);
  padding: 12px 16px;
}

.doc-details summary {
  color: var(--text-accent);
  cursor: pointer;
  font-weight: 700;
}

.doc-details p {
  margin: 12px 0 0;
}

@media (max-width: 560px) {
  .doc { max-width: none; }
}

/* Printed, or saved as PDF — which is what someone does with a policy they
   want to keep, and what a reviewer sometimes attaches to a case. The dark
   ground would empty a cartridge and render the gold-clipped headings as
   nothing at all. */
@media print {
  .starfield { display: none; }
  body { background: var(--hue-white); color: var(--hue-ink); }
  .doc p, .doc-list li, .doc-steps li, .doc-sub { color: var(--hue-ink); opacity: 1; }
  .doc h1, .doc-head h1, .doc h2 { color: var(--hue-green-deep); }
  .doc b { color: var(--hue-green-deep); }
  .doc a { color: var(--hue-green-deep); }
  .doc-lede { background: var(--surface-sunk); border-color: var(--line); }
  .doc-back, footer .share-btn { display: none; }
}