/* ══ شاهين في عالم الجن والشياطين — قارئ الكتاب ══ */
:root{
  --paper:#F5F0E6; --paper-2:#EDE6D8; --card:#FBF8F2;
  --ink:#26221C; --ink-2:#4A443B; --mute:#6E6759;
  --line:rgba(38,34,28,.12); --line-2:rgba(38,34,28,.22);
  --gold:#8A6A2B; --gold-soft:#B8933F; --ayah:#1F5C46;
  --measure:34em; --fs:1.24rem; --lh:2.05;
  --bar:64px;
}
:root[data-font="s"]{ --fs:1.09rem; --lh:1.95 }
:root[data-font="l"]{ --fs:1.42rem; --lh:2.15 }

html.dark{
  --paper:#14161A; --paper-2:#1A1D22; --card:#191C21;
  --ink:#E7E3D9; --ink-2:#C9C4B8; --mute:#94907F;
  --line:rgba(231,227,217,.12); --line-2:rgba(231,227,217,.24);
  --gold:#D6B15F; --gold-soft:#B8933F; --ayah:#6FC49C;
}

*,*::before,*::after{ box-sizing:border-box }
/* الحارس نفسه: #resume و .drawer و .search تعتمد على hidden */
[hidden]{ display:none !important }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Amiri,"Times New Roman",serif;
  font-size:var(--fs); line-height:var(--lh);
  transition:background .3s ease, color .3s ease;
}
a{ color:var(--gold); text-decoration:none }

/* ── الشريط العلوي ─────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:40; height:var(--bar);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.bar__title{
  font-family:"Reem Kufi",serif; font-size:1rem; color:var(--ink);
  margin-inline-end:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bar__tools{ display:flex; gap:4px }
.ico{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  background:none; border:0; border-radius:9px; color:var(--ink-2);
  cursor:pointer; font-size:1rem; transition:background .2s, color .2s;
}
.ico:hover{ background:var(--paper-2); color:var(--ink) }
.bar__prog{ position:absolute; inset:auto 0 -1px; height:2px; background:var(--line) }
.bar__prog i{ display:block; height:100%; width:0; background:var(--gold); transition:width .15s linear }

/* ── المتن ─────────────────────────────────────── */
.read{ max-width:var(--measure); margin:0 auto; padding:44px 22px 30px }
.crumb{ margin:0 0 10px; font-family:"Reem Kufi",serif; font-size:.72em; color:var(--mute) }
.read h1{
  font-family:"Reem Kufi",serif; font-weight:500; font-size:1.62em;
  line-height:1.45; margin:0 0 6px; color:var(--ink);
}
.read h1::after{ content:""; display:block; width:64px; height:2px; background:var(--gold-soft); margin:18px 0 0 }
.read h3{
  font-family:"Reem Kufi",serif; font-weight:500; font-size:1.1em;
  color:var(--gold); margin:2em 0 .5em; line-height:1.6;
}
.read p{ margin:0 0 1.05em; text-align:justify; hyphens:auto }
.read strong{ font-weight:700; color:var(--ink) }
.bul{ margin:0 0 1.1em; padding:0; list-style:none }
.bul li{ position:relative; padding-inline-start:1.25em; margin-bottom:.5em; text-align:justify }
.bul li::before{
  content:""; position:absolute; inset-inline-start:.35em; top:.82em;
  width:6px; height:6px; border-radius:50%; background:var(--gold-soft);
}
blockquote{
  margin:1.4em 0; padding:.2em 1.1em; border-inline-start:3px solid var(--gold-soft);
  color:var(--ink-2);
}
.ayah{ color:var(--ayah); font-weight:700 }
.ref{ font-size:.78em; color:var(--mute); font-family:"Reem Kufi",serif }

/* ── التنبيه الطبّي ────────────────────────────── */
.med{
  margin:0 0 1.8em; padding:15px 18px; border-radius:12px;
  background:var(--card); border:1px solid var(--line-2);
  border-inline-start:4px solid #C2762B;
  font-size:.83em; line-height:1.85; color:var(--ink-2);
}
.med strong{
  display:block; font-family:"Reem Kufi",serif; color:#C2762B;
  margin-bottom:4px; font-weight:600;
}

/* ── تنقّل الفصول ──────────────────────────────── */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
}
.pager__a{
  display:block; padding:14px 16px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  transition:border-color .25s, transform .25s;
}
.pager__a:hover{ border-color:var(--gold-soft); transform:translateY(-2px) }
.pager__a--n{ text-align:end }
.pager__a span{ display:block; font-family:"Reem Kufi",serif; font-size:.66em; color:var(--mute); margin-bottom:3px }
.pager__a b{ font-weight:400; font-size:.82em; line-height:1.5; display:block }

/* ── الغلاف والمحتويات ─────────────────────────── */
.home{ max-width:52em; margin:0 auto; padding:52px 22px 30px }
.cover{ text-align:center; padding-bottom:46px; border-bottom:1px solid var(--line) }
.cover__eyebrow{ margin:0 0 16px; font-family:"Reem Kufi",serif; font-size:.72em; color:var(--gold) }
.cover h1{
  font-family:"Reem Kufi",serif; font-weight:500; font-size:2.15em;
  line-height:1.42; margin:0 0 14px; color:var(--ink);
}
.cover__by{ margin:0 0 26px; color:var(--mute); font-size:.88em }
.cover__lede{ margin:0 auto 28px; max-width:32em; color:var(--ink-2); text-align:justify; font-size:.95em }
.cover__meta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px }
.cover__meta span{
  font-family:"Reem Kufi",serif; font-size:.68em; color:var(--mute);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 13px;
}
.cover__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{
  font-family:"Reem Kufi",serif; font-size:.82em; padding:12px 30px; border-radius:11px;
  background:var(--gold); color:var(--paper); transition:opacity .25s, transform .25s;
}
.btn:hover{ opacity:.9; transform:translateY(-2px) }
.btn--g{ background:transparent; color:var(--gold); border:1px solid var(--gold) }

.contents{ padding-top:42px }
.contents h2{ font-family:"Reem Kufi",serif; font-weight:500; font-size:1.3em; margin:0 0 22px }
.contents__part{
  font-family:"Reem Kufi",serif; font-weight:500; font-size:.95em; color:var(--gold);
  margin:34px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.contents__list{ margin:0 0 6px; padding:0 1.4em 0 0 }
.contents__list li{ margin-bottom:9px }
.contents__list a{ color:var(--ink-2); font-size:.88em; transition:color .2s }
.contents__list a:hover{ color:var(--gold) }

/* ── درج الفهرس ────────────────────────────────── */
.drawer{ position:fixed; inset:0; z-index:60 }
.drawer__veil{ position:absolute; inset:0; background:rgba(0,0,0,.42); animation:fade .25s ease }
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(380px,86vw); z-index:1;
  background:var(--paper); border-inline-start:1px solid var(--line);
  display:flex; flex-direction:column; animation:slide .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes fade{ from{opacity:0} }
@keyframes slide{ from{transform:translateX(-100%)} }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 12px 8px; border-bottom:1px solid var(--line);
  font-family:"Reem Kufi",serif; font-size:.85em;
}
.toc{ overflow-y:auto; padding:14px 16px 30px; flex:1 }
.toc__part{
  font-family:"Reem Kufi",serif; font-size:.74em; color:var(--gold);
  margin:20px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.toc ul{ margin:0; padding:0; list-style:none }
.toc li{ margin-bottom:3px }
.toc a{
  display:block; padding:7px 10px; border-radius:8px;
  font-size:.8em; line-height:1.6; color:var(--ink-2); transition:background .2s, color .2s;
}
.toc a:hover{ background:var(--paper-2); color:var(--ink) }
.toc a.on{ background:var(--paper-2); color:var(--gold); font-weight:700 }

/* ── البحث ─────────────────────────────────────── */
.search{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45); padding:70px 18px 20px; animation:fade .2s ease }
.search__box{
  max-width:640px; margin:0 auto; max-height:100%; display:flex; flex-direction:column;
  background:var(--paper); border-radius:16px; overflow:hidden; border:1px solid var(--line-2);
}
.search__head{ display:flex; align-items:center; gap:6px; padding:10px 10px 10px 14px; border-bottom:1px solid var(--line) }
#q{
  flex:1; border:0; background:none; color:var(--ink); font-family:inherit;
  font-size:1em; padding:9px 4px; outline:none;
}
.search__res{ overflow-y:auto; padding:8px 10px 16px }
.search__hint{ margin:14px 12px; color:var(--mute); font-size:.8em }
.hit{ display:block; padding:12px 13px; border-radius:10px; color:var(--ink); transition:background .2s }
.hit:hover{ background:var(--paper-2) }
.hit b{ display:block; font-family:"Reem Kufi",serif; font-weight:500; font-size:.82em; margin-bottom:3px }
.hit i{ display:block; font-style:normal; font-size:.62em; color:var(--gold); margin-bottom:5px; font-family:"Reem Kufi",serif }
.hit span{ display:block; font-size:.76em; color:var(--mute); line-height:1.75 }
.hit mark{ background:color-mix(in srgb,var(--gold) 30%,transparent); color:var(--ink); border-radius:3px }

/* ── التذييل ───────────────────────────────────── */
.foot{
  max-width:var(--measure); margin:0 auto; padding:34px 22px 46px;
  border-top:1px solid var(--line); text-align:center;
  font-size:.76em; color:var(--mute); line-height:1.9;
}
.foot p{ margin:0 0 5px }
.foot__note{ font-size:.92em }

@media (max-width:620px){
  .read{ padding:32px 18px 24px }
  .home{ padding:36px 18px 24px }
  .pager{ grid-template-columns:1fr }
  .cover h1{ font-size:1.72em }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* ── الكتاب يُقرأ هنا فقط ──────────────────────── */
@media print{
  body > *{ display:none !important }
  body::after{
    content:"هذا الكتاب متاحٌ للقراءة على الإنترنت فقط — mhwari.com/shaheen";
    display:block; padding:40px; font-family:serif; font-size:16pt; text-align:center;
  }
}

/* ── الاقتباسات: آيةٌ أو نصٌّ منقول ─────────────── */
blockquote.q{
  margin:1.5em 0; padding:.9em 1.2em; border-radius:10px;
  background:var(--card); border:1px solid var(--line);
  border-inline-start:3px solid var(--gold-soft);
  font-size:.97em; line-height:2.1; color:var(--ink-2); text-align:justify;
}
blockquote.q--ayah{ border-inline-start-color:var(--ayah) }
blockquote.q .ayah{ font-size:1.06em }

/* ── صندوق القناة والنسخة المطبوعة في نهاية كل فصل ── */
.chbox{
  margin:46px 0 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px;
}
.chbox a{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:11px;
  font-family:"Reem Kufi",serif; font-size:.78em; text-decoration:none; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease;
}
.chbox a:hover{ transform:translateY(-2px); border-color:var(--gold-soft) }
.chbox a:first-child{
  background:linear-gradient(135deg, rgba(37,211,102,.12), rgba(37,211,102,.03));
  border-color:rgba(37,211,102,.34); color:#17724A;
}
.chbox a:first-child:hover{ border-color:rgba(37,211,102,.66) }
html.dark .chbox a:first-child{ color:#6FD6A0 }

/* ── التذييل: عنوان الكتاب ثم جامعه ومشرفه ── */
.foot__t{ font-family:"Reem Kufi",serif; font-size:1.06em; color:var(--ink); margin-bottom:8px !important }
.foot__link{ margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line) }