/* ================================================================
   صافي — public site.

   LIGHT BY DEFAULT, which is the opposite of the app, and deliberately so.
   The app is opened at one in the morning by someone in the dark and is
   dark-first for that reason. This site is read in daylight by someone
   deciding whether to trust it, and open, quiet, high-contrast pages read as
   more trustworthy than a dark landing page for a health subject. Dark mode
   still follows the system, so a reader who arrives at 2am is not flashbanged.

   Shares the app's accent so the two feel like one product.

   RTL: Arabic is primary, so everything uses LOGICAL properties. There is no
   [dir=rtl] block in this file and there should not need to be one.
   ================================================================ */

[hidden] { display: none !important; }

:root {
  --bg:      #ffffff;
  --bg2:     #f5f8f8;
  --bg3:     #eaf1f1;
  --line:    #dde8e8;
  --ink:     #122227;
  --ink2:    #4d666e;
  --ink3:    #7d939a;

  --accent:     #14776a;
  --accent-dim: #d6ebe7;
  --on-accent:  #ffffff;

  --radius:   16px;
  --radius-s: 10px;
  --wrap:     1100px;
  --narrow:   700px;
  --font:     'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow:   0 1px 2px rgba(18,34,39,.05), 0 10px 30px rgba(18,34,39,.06);
  color-scheme: light;
}
:root:lang(ar) { --font: 'Tajawal', ui-sans-serif, system-ui, sans-serif; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0d1417;
    --bg2:     #121c21;
    --bg3:     #18252b;
    --line:    #223339;
    --ink:     #e8f0f1;
    --ink2:    #9db2b9;
    --ink3:    #6d8189;
    --accent:     #58c0b0;
    --accent-dim: #1d3d39;
    --on-accent:  #05201c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.22);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap   { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: 22px; }
.narrow { width: min(var(--narrow), 100%); margin-inline: auto; }
.center { text-align: center; }
.muted  { color: var(--ink2); }
section { padding-block: 44px; }

/* Skip link — visible only on focus. */
.skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* ---------------- Header ---------------- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1rem;
}
.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink2); text-decoration: none; font-size: .95rem;
  padding: 8px 11px; border-radius: 999px;
}
.site-nav a:hover { color: var(--ink); background: var(--bg2); }
.site-nav .lang { color: var(--ink3); }
@media (max-width: 640px) {
  .site-nav a:not(.btn):not(.lang) { display: none; }   /* the footer carries them */
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 48px;
  background: var(--bg3); color: var(--ink);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost   { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-sm      { padding: 8px 15px; min-height: 40px; font-size: .92rem; }
.btn:active  { transform: translateY(1px); }

/* ---------------- Hero ---------------- */
.hero { padding-block: clamp(48px, 9vw, 90px) 40px; text-align: center; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.lede { font-size: clamp(1.05rem, 2.4vw, 1.24rem); color: var(--ink2); max-width: 56ch; margin-inline: auto; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-block-start: 26px; }
.hero-sub { font-size: .88rem; color: var(--ink3); margin-block-start: 14px; }

/* ---------------- Bands ---------------- */
.band { background: var(--bg2); border-block: 1px solid var(--line); }
.band-quiet { background: var(--accent-dim); border-color: transparent; }

/* ---------------- Tiles ---------------- */
.grid {
  display: grid; gap: 18px; margin-block-start: 28px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tile { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.band .tile { background: var(--bg); }
.tile h3 { color: var(--accent); }
.tile p  { color: var(--ink2); margin: 0; font-size: .98rem; }

/* ---------------- Tick list ---------------- */
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ticks li {
  position: relative; padding-inline-start: 30px; color: var(--ink2);
}
.ticks li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 14px; height: 8px;
  border-inline-start: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------------- Post cards ---------------- */
.cards {
  display: grid; gap: 18px; margin-block-start: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pcard {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  box-shadow: var(--shadow); overflow: hidden;
}
.pcard:hover { border-color: var(--accent); }
/* Fixed aspect so a grid of cards keeps its rhythm whatever the title length.
   width/height are on the element as well, so the box is reserved before the
   image loads and the cards do not jump as they arrive. */
.pcard-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: cover; }
.pcard-body { display: block; padding: 20px 22px 22px; }
.pcard h2, .pcard h3 { font-size: 1.14rem; margin-block: .35em .4em; }
.pcard p { color: var(--ink2); font-size: .95rem; margin: 0; }
.pcat { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pmeta { display: block; font-size: .82rem; color: var(--ink3); margin-block-start: 12px; }

/* ---------------- Chips ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 22px; }
.chip {
  font-size: .88rem; color: var(--ink2); text-decoration: none;
  background: var(--bg2); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px;
}
.chip.on, .chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- Article ---------------- */
.post { padding-block: 40px 20px; }
.crumbs { font-size: .88rem; color: var(--ink3); }
.crumbs a { color: var(--ink2); }
.prose { font-size: 1.05rem; }
.prose h2 { margin-block-start: 1.7em; }
.prose h3 { margin-block-start: 1.4em; }
.prose ul { padding-inline-start: 1.3em; }
.prose li { margin-block-end: .5em; }
.prose blockquote {
  margin: 1.5em 0; padding-inline-start: 18px;
  border-inline-start: 3px solid var(--accent);
  color: var(--ink2); font-style: normal;
}
.prose code { background: var(--bg3); padding: 2px 6px; border-radius: 5px; font-size: .92em; }
.prose-page h2 { margin-block-start: 1.8em; }

/* The disclaimer. Quiet but never invisible — it is on every page for a
   reason and dimming it into the background would defeat it. */
.disclaimer { font-size: .86rem; color: var(--ink2); line-height: 1.6; }
.disclaimer.inline {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px 16px; margin-block: 20px 28px;
}
.draft-flag {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}

.cta {
  margin-block-start: 44px; padding: 26px; text-align: center;
  background: var(--accent-dim); border-radius: var(--radius);
}
.cta h2 { font-size: 1.2rem; }
.cta p { color: var(--ink2); }
.closing { padding-block: 56px; }
.more { font-weight: 600; }

/* ---------------- FAQs ---------------- */
.faqs { margin-block-start: 26px; }
.faqs-inline { margin-block-start: 44px; padding-block-start: 26px; border-block-start: 1px solid var(--line); }
.faq { padding-block-end: 26px; margin-block-end: 26px; border-block-end: 1px solid var(--line); }
.faq:last-child { border-block-end: 0; margin-block-end: 0; }
.faq h2, .faq h3 { font-size: 1.14rem; margin-block-end: .5em; }
.faq .prose { font-size: 1rem; color: var(--ink2); }
.faq-more { font-size: .9rem; margin-block-start: 12px; margin-block-end: 0; }

/* ---------------- Citations ---------------- */
/* The superscript must not disturb the line box — Arabic line spacing is
   already generous and a raised number that pushes lines apart makes a long
   article visibly ragged. position:relative + a fixed top does it without
   vertical-align:super, which does affect line height. */
sup.ref { font-size: .68em; line-height: 0; position: relative; top: -.5em; margin-inline-start: 1px; }
sup.ref a { text-decoration: none; padding-inline: 1px; font-weight: 700; }
sup.ref a:target, .reflist li:target { background: var(--accent-dim); border-radius: 3px; }

.refs { margin-block-start: 44px; padding-block-start: 26px; border-block-start: 1px solid var(--line); }
.refs h2 { font-size: 1.1rem; }
.reflist { padding-inline-start: 1.4em; display: grid; gap: 16px; font-size: .93rem; }
.reflist li { padding-inline-start: 4px; }
.ref-kind {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg3); color: var(--ink2);
  padding: 2px 8px; border-radius: 999px; margin-inline-end: 8px;
  vertical-align: 2px;
}
/* The citation itself is LTR even in an Arabic page — author names, journal
   titles and DOIs are Latin, and letting them inherit rtl reorders the
   punctuation into nonsense. */
.ref-cite { direction: ltr; unicode-bidi: isolate; display: inline; }
.ref-link { direction: ltr; unicode-bidi: isolate; font-size: .88rem; white-space: nowrap; }
.ref-note { display: block; color: var(--ink2); margin-block-start: 6px; font-size: .92rem; }
.ref-used { display: block; margin-block-start: 6px; font-size: .86rem; color: var(--ink3); }
.evidence-list { gap: 24px; margin-block-start: 20px; }

/* The science-section warning. Quiet, above the article, never a red alarm. */
.sci-note {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px 16px;
  font-size: .9rem; color: var(--ink2); margin-block: 18px 0;
}
.sci-badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--accent); color: var(--on-accent);
  padding: 2px 9px; border-radius: 999px; margin-inline-end: 8px;
}

/* ---------------- Helplines ---------------- */
/* Not styled as an alarm. A red panic block is harder to read at the moment it
   is most needed, and it makes the page feel like an emergency rather than an
   option. Weight and a rule carry the emphasis instead. */
.danger-block {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 18px; margin-block: 26px 34px;
}
.danger-block h2 { font-size: 1.14rem; margin-block-end: .4em; }
.lines { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
/* LTR and isolated: a phone number that bidi-reorders inside an Arabic line is
   a number somebody dials wrong, and on this page that is the worst bug there
   is. `isolate` stops the surrounding Arabic dragging the digits around. */
.tel {
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  font-size: 1.2rem; font-weight: 700; text-decoration: none;
}

/* ---------------- Forms ---------------- */
.form { margin-block-start: 24px; }
.field { margin-block-end: 18px; }
.field label { display: block; font-weight: 600; margin-block-end: 6px; font-size: .95rem; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 12px 13px;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field that is never focusable by a person is enough. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice {
  background: var(--accent-dim); border-radius: var(--radius);
  padding: 20px 22px; margin-block-start: 20px;
}

/* ---------------- Footer ---------------- */
.site-foot {
  background: var(--bg2); border-block-start: 1px solid var(--line);
  padding-block: 34px; margin-block-start: 20px;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block: 20px; }
.foot-nav a { color: var(--ink2); text-decoration: none; font-size: .93rem; }
.foot-nav a:hover { color: var(--accent); }
.foot-tag { font-size: .85rem; color: var(--ink3); margin: 0; }

/* ---------------- Admin (minimal, shares the tokens) ---------------- */
.admin-wrap { width: min(920px, 100%); margin-inline: auto; padding: 30px 22px 60px; }
.admin-bar { display: flex; gap: 14px; align-items: center; margin-block-end: 24px; flex-wrap: wrap; }
.admin-bar a { color: var(--ink2); text-decoration: none; font-size: .95rem; }
table.admin { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.admin th, table.admin td { text-align: start; padding: 10px 8px; border-block-end: 1px solid var(--line); }
table.admin th { color: var(--ink3); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.tag { font-size: .74rem; padding: 2px 9px; border-radius: 999px; background: var(--bg3); color: var(--ink2); }
.tag.pub { background: var(--accent-dim); color: var(--accent); }