/* الخطوط مستضافة محليًا داخل المشروع - لا اتصال بأي طرف خارجي وقت التشغيل.
   خط أميري برخصة SIL Open Font License 1.1 (نسخة الرخصة في fonts/OFL.txt). */
@font-face{
  font-family:'Amiri Quran';
  src:url('fonts/AmiriQuran.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('fonts/Amiri-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('fonts/Amiri-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
/* خط مجمع الملك فهد العثماني (KFGQPC HAFS Uthmanic Script v2.2)، مجاني الاستعمال
   والتوزيع ويمنع ترخيصه التعديل، فيُقدَّم كما هو (fonts/KFGQPC-EULA.txt).
   صُمّم لنصّ المجمع وترميزه لا لترميز النص المخزَّن، فلا تستعمله الصفحات حاليًا. */
@font-face{
  font-family:'KFGQPC Hafs';
  src:url('fonts/UthmanicHafs_V22.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ===== صفحة المصحف: أنماط مشتركة بين النماذج الثلاثة ===== */
.read-wrap{padding-block:26px 40px}
.read-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:22px;
}
.read-title{display:flex;align-items:baseline;gap:12px}
.read-title h1{font-family:Readex,Arial,sans-serif;font-size:21px;font-weight:600}
.read-title span{font-size:13px;color:var(--secondary)}
.read-modes{display:flex;gap:6px;flex-wrap:wrap}
.read-modes a{
  font-size:12px;padding:7px 13px;border:1px solid var(--border);border-radius:999px;
  color:var(--secondary);background:var(--surface);
}
.read-modes a.on{background:var(--button);color:var(--button-text);border-color:var(--button)}

/* مبدّل طريقة العرض: مصحف مفتوح / صفحة مفردة */
.read-toggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:3px;gap:3px}
.read-toggle a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:6px;
  font-size:13px;color:var(--secondary);white-space:nowrap;
}
.read-toggle a .icon{width:18px;height:18px}
.read-toggle a:hover{color:var(--accent)}
.read-toggle a.on{background:var(--button);color:var(--button-text)}
.read-toggle a.on:hover{color:var(--button-text)}
@media(max-width:520px){
  .read-toggle a{padding:9px 11px;font-size:12px}
  .read-toggle a .icon{width:16px;height:16px}
}

.mus-page{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:42px 40px 52px;position:relative;display:flex;flex-direction:column;
  min-height:640px;
  container-type:inline-size;   /* أساس قياس حجم السطر */
  overflow:hidden;              /* شبكة أمان: لا يخرج سطر خارج إطار الصفحة */
}

/* إطار الصفحات العادية (٣ إلى ٦٠٤): خطان ذهبيان بينهما فاصل وخيط ذهبي فاتح،
   بنفس إيقاع وألوان السرلوحة وطبقة أركانها (theme/orn/SOURCE.txt) لا بزخرفة
   غريبة عنها — كما في المصحف المطبوع: الصفحتان الأوليان مذهَّبتان وما بعدهما
   بإطار بسيط، فلا يضيق متن الآيات في ٦٠٢ صفحة. */
:root{
  --frame-gold:#B38A46;
  --frame-gold-pale:#E9D19A;
  --frame-rule:rgba(179,138,70,.38);   /* خيوط العنوان والتذييل داخل الصفحة */
  /* الذهبي جميل في الزخرفة لكنه ضعيف التباين ككتابة على الورق العاجي،
     فكتابات الإطار (الجزء واسم السورة ورقم الصفحة) تأخذ لازورد التصميم. */
  --frame-text:#193E64;
  --sheet-ink:#26201A;                /* حبر الملاحق: الدعاء والفهرس */
  --mark-fill:rgba(179,138,70,.15);   /* تظليل الآية المقروءة: ذهب البرواز بشفافية */
  --mark-edge:rgba(179,138,70,.34);
  --mark-hover:rgba(179,138,70,.07);
}
[data-theme=dark]{
  --frame-gold:#C9A864;
  --frame-gold-pale:#E9D19A;
  --frame-rule:rgba(201,168,100,.34);
  --frame-text:#C9A864;   /* الوضع الداكن ملائم كما هو: ذهبي على أرضية ليلية */
  --sheet-ink:#E7DCC4;
  --mark-fill:rgba(201,168,100,.17);
  --mark-edge:rgba(201,168,100,.36);
  --mark-hover:rgba(201,168,100,.08);
}
/* قالب المتن للصفحات ٣ إلى ٦٠٤: زخرفة متجهة أصلية من الحزمة نفسها
   (theme/orn/SOURCE.txt)، بنسبة 2:3 ومساحات آمنة محدَّدة بالتصميم:
   الآيات 10% / 8.6667% بقياس 80% × 82.6667%،
   خانتا الرأس y 1.8% بارتفاع 2.1333% (اليمنى 64%، اليسرى 10%، كلٌّ 26%)، بعد تكبيرهما،
   وخانة رقم الصفحة 47.3% / 96.9667% بقياس 5.4% × 1.0667%، بعد إنزالها لتتوسّط ما تحت الإطار.
   المتن أوسع بـ62.4% من متن السرلوحة، فلا تضيق القراءة في ٦٠٢ صفحة. */
.mus-page:not(.is-illuminated){
  display:block;padding:0;min-height:0;
  aspect-ratio:2/3;
  background-color:#FAF5E9;
  background-image:url("/theme/orn/page-light.svg");
  background-size:100% 100%;background-repeat:no-repeat;
  border-color:#e0d2b4;
}
[data-theme=dark] .mus-page:not(.is-illuminated){
  background-color:#101C2B;
  background-image:url("/theme/orn/page-dark.svg");
  border-color:#24384f;
}
.pg-corner{display:none}

.mus-page:not(.is-illuminated) .mus-head{
  position:absolute;top:1.8%;left:10%;width:80%;height:2.1333%;
  border:0;padding:0;margin:0;line-height:1;
  align-items:center;
  font-size:clamp(9px,2.15cqi,21px);color:var(--frame-text);
}
.mus-page:not(.is-illuminated) .mus-head span{width:32.5%;text-align:center}

.mus-page:not(.is-illuminated) .mus-body{
  position:absolute;left:10%;top:8.6667%;width:80%;height:82.6667%;
  flex:0 0 auto;
  container-type:inline-size;   /* فيصير قياس السطر نسبةً إلى المتن لا للصفحة */
}
.mus-page:not(.is-illuminated) .mus-line{
  font-size:clamp(11px,5.1cqi,34px);
  /* ارتفاع السطر مثبَّت لا محسوب: صندوق السطر يتّسع قليلًا لأن .mus-fit عنصر
     سطري-كتلي خطُّ أساسه يخالف خطّ أساس السطر، والفرق يتراكم على خمسة عشر
     سطرًا فيُخرج آخرها من الحقل. التثبيت يجعل شبكة الصفحة مضبوطة كالمطبوع. */
  line-height:clamp(22px, calc(153cqi / (15 + 0.3 * var(--bars, 0))), 70px);
  height:clamp(22px, calc(153cqi / (15 + 0.3 * var(--bars, 0))), 70px);
}
/* سطر شريط السورة أعلى من سطر الآية بثلاثة أعشار، ويُقتطع الفرق بالتساوي من
   أسطر الصفحة نفسها، فيبقى مجموع الخمسة عشر سطرًا مساويًا لحقل المتن تمامًا.
   ‏(--bars عدد الأشرطة في الصفحة، يكتبه القالب.) cqi مكتوبة هنا مباشرة لا في
   متغيّر، لأن المتغيّر يُحسب عند عنصر تعريفه فيُقاس على الصفحة لا على المتن. */
.mus-page:not(.is-illuminated) .mus-line.mus-surah-plate{
  height:clamp(28px, calc(153cqi * 1.3 / (15 + 0.3 * var(--bars, 0))), 92px);
}

.mus-page:not(.is-illuminated) .mus-foot{
  position:absolute;left:47.3%;top:96.9667%;width:5.4%;height:1.0667%;
  display:flex;align-items:center;justify-content:center;
  border:0;padding:0;margin:0;line-height:1;background:none;
  font-size:clamp(7px,1.45cqi,14px);color:var(--frame-text);
}

/* شريط بداية السورة: الملف المرفق بالتصميم (800 × 56) يملأ عرض المتن،
   والاسم يُكتب فوقه نصًّا حيًّا داخل فتحته الوسطى (33.5% من عرض الشريط).
   الزخرفة كلها في الملف؛ لا تُضاف حدود ولا أطراف عبر CSS كي لا تتكرر. */
.mus-page:not(.is-illuminated) .mus-line.mus-surah-plate{
  display:flex;align-items:center;justify-content:center;
  border:0;padding:0;margin:0;color:var(--frame-text);
  background-image:url("/theme/orn/surah-bar-light.svg");
  background-size:100% auto;background-repeat:no-repeat;
  /* الشريط يُزاح إلى أسفل سطره بدل توسيطه فيه: صعود الحرف العربي بتشكيله
     أطول من نزوله، فالفسحة العليا تُستهلك والسفلى تفيض، فيبدو ملاصقًا لآخر
     آية من السورة قبله ومتباعدًا عن بسملة السورة بعده. الإزاحة تُسوّي الفراغين
     ولا تمسّ شبكة الخمسة عشر سطرًا لأن ارتفاع السطر ثابت. */
  background-position:center bottom;
}
/* الاسم محصور في المساحة الآمنة للفتحة، فلا يركب الزخرفة مهما طال،
   ويُزاح مع الشريط ليبقى في وسط فتحته. */
.mus-page:not(.is-illuminated) .mus-line.mus-surah-plate{align-items:flex-end}
.mus-page:not(.is-illuminated) .mus-line.mus-surah-plate .plate-name{
  max-width:37%;white-space:nowrap;
  /* الاسم صندوق بارتفاع الشريط نفسه (800 × 76 = 9.5cqi) يجلس فوقه تمامًا،
     ويُوسَّط حبره فيه. ‏line-height:normal يجعل صندوق السطر يشمل الحركات
     فوق الحروف وتحتها، فيتوسّط الحبر المرئي كله لا جسم الحرف وحده؛
     وإلا نزلت الكسرة وأذيال الحروف حتى تلامس الخيط الذهبي السفلي. */
  height:9.5cqi;margin:0;
  display:flex;align-items:center;justify-content:center;
  line-height:normal;
  /* خط أميري يحجز فوق الحرف مساحة للحركات المتراكبة أكبر مما يحجزه تحته،
     فيقع الحبر الفعلي أسفل المركز. رفعٌ نسبيٌّ لحجم الخط يصحّحه، ويبقى صحيحًا
     إن صُغِّر اسم طويل ليدخل الفتحة. */
  transform:translateY(-0.26em);
}
[data-theme=dark] .mus-page:not(.is-illuminated) .mus-line.mus-surah-plate{
  background-image:url("/theme/orn/surah-bar-dark.svg");
}
.mus-page:not(.is-illuminated) .mus-line.mus-surah-plate::before{display:none}
.mus-page:not(.is-illuminated) .plate-orn,
.mus-page:not(.is-illuminated) .plate-end{display:none}
.mus-page:not(.is-illuminated) .plate-name{font-size:clamp(10px,3.2cqi,22px);padding:0}
.mus-page:not(.is-illuminated) .mus-line.mus-bismillah{margin-bottom:0;font-size:clamp(11px,5.1cqi,34px)}
.mus-head{
  display:flex;justify-content:space-between;font-size:12px;color:var(--secondary);
  border-bottom:1px solid var(--frame-rule);padding-bottom:12px;margin-bottom:22px;letter-spacing:.2px;
}
.mus-body{flex:1}
/* بند اسم السورة: إطار مزدوج، وشريط عربي متشابك متكرر على الجانبين،
   ووريدتان ثمانيتا البتلات في الطرفين. كل الزخارف أقنعة (mask) بلون الثيم،
   ويتمدّد الشريط تلقائيًا مهما طال اسم السورة أو قصر. */
:root{
  --orn-band:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.15'%3E%3Cpath d='M0 7C5.5 0.6 20.5 0.6 26 7'/%3E%3Cpath d='M0 7C5.5 13.4 20.5 13.4 26 7'/%3E%3C/g%3E%3Ccircle cx='13' cy='7' r='1.9' fill='%23000'/%3E%3Ccircle cx='13' cy='3.1' r='0.85' fill='%23000'/%3E%3Ccircle cx='13' cy='10.9' r='0.85' fill='%23000'/%3E%3Ccircle cx='0' cy='7' r='1.15' fill='%23000'/%3E%3Ccircle cx='26' cy='7' r='1.15' fill='%23000'/%3E%3C/svg%3E");
  --orn-rosette:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Ccircle cx='10' cy='3.4' r='2'/%3E%3Ccircle cx='10' cy='16.6' r='2'/%3E%3Ccircle cx='3.4' cy='10' r='2'/%3E%3Ccircle cx='16.6' cy='10' r='2'/%3E%3Ccircle cx='5.3' cy='5.3' r='1.6'/%3E%3Ccircle cx='14.7' cy='5.3' r='1.6'/%3E%3Ccircle cx='5.3' cy='14.7' r='1.6'/%3E%3Ccircle cx='14.7' cy='14.7' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.mus-surah-plate,
.mus-line.mus-surah-plate{
  position:relative;
  display:flex;align-items:center;gap:9px;
  border:1.6px solid var(--frame-gold);
  border-radius:3px;
  padding:11px 13px;
  color:var(--frame-text);
  margin:14px 0 12px;
  white-space:nowrap;
}
.mus-surah-plate::before{
  content:"";position:absolute;inset:3.5px;border:1px solid var(--frame-gold);opacity:.6;border-radius:2px;
}
.plate-name{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:clamp(14px,3.6cqi,22px);
  padding:0 10px;position:relative;
  /* خط أميري القرآني بوزن واحد: حدّ رفيع بلون الاسم يثقّله قليلًا جدًّا */
  -webkit-text-stroke:.02em currentColor;
}
/* كتابات الإطار (الجزء واسم السورة في الرأس، ورقم الصفحة) أثقل لتُقرأ على الزخرفة.
   وخط أميري لا عريض فيه فوق 700، فيُزاد رقم الصفحة حدًّا رفيعًا بلونه كاسم السورة. */
.mus-head,.mus-foot{font-weight:700}
.mus-foot{-webkit-text-stroke:.025em currentColor}
.plate-orn{
  flex:1;height:14px;min-width:20px;position:relative;
  background-color:currentColor;opacity:.85;
  -webkit-mask-image:var(--orn-band);         mask-image:var(--orn-band);
  -webkit-mask-repeat:repeat-x;               mask-repeat:repeat-x;
  -webkit-mask-position:center;               mask-position:center;
  -webkit-mask-size:26px 14px;                mask-size:26px 14px;
}
.plate-end{
  flex:0 0 auto;width:17px;height:17px;position:relative;
  background-color:currentColor;opacity:.9;
  -webkit-mask-image:var(--orn-rosette);      mask-image:var(--orn-rosette);
  -webkit-mask-repeat:no-repeat;              mask-repeat:no-repeat;
  -webkit-mask-position:center;               mask-position:center;
  -webkit-mask-size:contain;                  mask-size:contain;
}
.mus-body > .mus-surah-plate:first-child{margin-top:0}
.mus-bismillah{
  text-align:center;font-family:'Amiri Quran','Amiri',serif;font-size:23px;
  color:var(--ink);margin-bottom:16px;
}
.mus-ayat{
  font-family:'Amiri Quran','Amiri','Traditional Arabic',serif;
  font-size:26px;line-height:2.45;text-align:justify;text-justify:inter-word;color:var(--ink);
}

/* سطر مصحف واحد: يُمدّ ليملأ عرض الصفحة كما في المطبوع.
   حجم الخط يتبع عرض الصفحة نفسها (cqi) لا رقمًا ثابتًا، وإلا طفح السطر
   خارج الإطار حين تضيق الصفحة كما في وضع المصحف المفتوح. */
/* تباعد الكلمات طبيعي كما في المطبوع. المصحف الورقي يملأ السطر بمدّ الحروف
   (الكشيدة) لا بتوسيع الفراغ بين الكلمات، ولا سبيل لذلك بخط عادي؛ فالأقرب
   للأصل هو الإبقاء على التباعد الطبيعي وتوسيط السطر، لا فتح ثقوب بين الكلمات. */
.mus-line{
  font-family:'Amiri Quran','Amiri','Traditional Arabic',serif;
  font-size:clamp(12px, 4.1cqi, 26px);
  /* ارتفاع السطر ثابت بالنسبة لعرض الصفحة لا لحجم الخط، حتى لا تتفاوت
     المسافات بين الأسطر حين يتغيّر حجم خط سطر لملء عرضه */
  line-height:clamp(26px, 9cqi, 58px);
  color:var(--ink);
  display:block;text-align:center;white-space:nowrap;margin-bottom:0;
}
/* كل سطر يُمدّ ليملأ عرض الصفحة كما في المطبوع: يقيسه الجافاسكربت ويضبط
   مقدار المدّ. بلا جافاسكربت يبقى السطر طبيعيًا موسّطًا دون كسر. */
.mus-ayat-line{text-align:right}
.mus-fit{display:inline-block;transform-origin:right center;will-change:transform}
.mus-ayat-line.is-centered{text-align:center}
.mus-ayat-line.is-centered .mus-fit{transform:none!important}
.mus-line.mus-bismillah{display:block;text-align:center;white-space:normal;margin-bottom:6px;font-size:clamp(13px,4cqi,24px)}

/* متصفحات بلا دعم وحدات الحاوية: حجم ثابت معقول بدل تجاهل القاعدة كليًا */
@supports not (font-size: 1cqi){
  .mus-line{font-size:20px}
  .read-single .mus-line{font-size:25px}
}
.mus-ayah{cursor:default}
.mus-ayah:hover{background:var(--tile);border-radius:3px}
/* علامة نهاية الآية: حلْية متجهة أصلية (المصدر في theme/orn/SOURCE.txt) والرقم
   فوقها نصّ حيّ يُحدَّد ويُنسخ. المقاس بالـem لا بالبكسل، فيتبع حجم السطر حين
   يضبطه الجافاسكربت لملء عرض الصفحة، ولا ينفصل عن الخط في الشاشات الضيقة.
   حرف نهاية الآية U+06DD يبقى في الشيفرة مخفيًّا بصريًّا، فيقرؤه قارئ الشاشة
   ويخرج مع النص المنسوخ كما كان. */
.mus-no{
  display:inline-grid;place-items:center;
  /* الحجم يُقاس على عرض الصفحة لا على حجم السطر، لأن الجافاسكربت يغيّر حجم خط
     كل سطر على حدة لملء عرضه؛ فلو تبعته العلامة لتفاوتت من سطر لآخر.
     وبتحديد font-size هنا يصير رقمها تابعًا لها هي لا للسطر. */
  width:1em;height:1em;font-size:clamp(22px, 9.4cqi, 62px);
  /* هامش رأسي سالب متناظر: الحلْية أطول من سطر المصحف، ولولاه لمدّت صندوق
     السطر فزحفت الأسطر الخمسة عشر خارج حقل الصفحة. مركزها لا يتغيّر. */
  margin:-.42em .06em;
  vertical-align:middle;
  background-image:url("/theme/orn/ayah-light.svg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
[data-theme=dark] .mus-no{background-image:url("/theme/orn/ayah-dark.svg")}
.mus-no > *{grid-area:1/1}
.mus-no-num{
  font-family:'Amiri',serif;
  font-size:.44em;line-height:1;
  color:#193E64;
  font-variant-numeric:tabular-nums;
}
[data-theme=dark] .mus-no-num{color:#E9D19A}
.mus-page.is-illuminated .mus-no{font-size:clamp(27px, 13.4cqi, 84px)}
/* المساحة الآمنة داخل الحلْية دائرة نصف قطرها 30 من 128، فالأرقام الأطول تصغر
   لتبقى داخلها (حتى ٢٨٦ في البقرة). */
.mus-no[data-len="2"] .mus-no-num{font-size:.38em}
.mus-no[data-len="3"] .mus-no-num{font-size:.29em}
.mus-foot{
  text-align:center;font-family:'Amiri',serif;font-size:14px;color:var(--secondary);
  border-top:1px solid var(--frame-rule);padding-top:12px;margin-top:20px;
  /* ‏style.css يلوّن كل <footer> بلون السطح لأجل تذييل الموقع؛ ورقم الصفحة
     جزء من ورق المصحف لا شريط مستقل، فيأخذ أرضية الصفحة نفسها. */
  background:none;
}

/* ===== شريط التحكم =====
   لوح واحد يجمع الزرّين وحقل الصفحة، ارتفاعه من ارتفاع نصّه لا أكبر منه: علبة الزرّ
   ٣٤ بكسل لخطٍّ ١٤، وحقل الرقم ٣٠ داخلها، وخيط رفيع يفصل مناطقه الثلاث.
   وعلى اللمس تُوسَّع المساحات المقروعة إلى ٤٤ بكسل (أدنى ما يُقرع بالإصبع مريحًا). */
.read-nav{
  display:flex;align-items:center;gap:2px;
  width:fit-content;margin:22px auto 0;padding:4px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  box-shadow:0 1px 2px rgba(20,42,50,.05);
}
.read-btn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:0;border-radius:8px;background:none;color:var(--ink);
  font-family:inherit;font-size:14px;line-height:1;cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out;
}
.read-btn .icon{width:17px;height:17px}
.read-btn:hover{background:var(--tile);color:var(--accent)}
.read-btn:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.read-btn[disabled]{opacity:.35;pointer-events:none}
.read-jump{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:11px;
  border-inline:1px solid var(--border);
  font-size:12.5px;color:var(--secondary);white-space:nowrap;
}
.read-jump input{
  width:58px;height:30px;text-align:center;
  border:1px solid var(--border);border-radius:7px;
  background:var(--bg);color:var(--ink);
  font-family:inherit;font-size:14px;font-variant-numeric:tabular-nums;
}
.read-jump input:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--ring)}
/* الملاحق الثلاثة: علامة صغيرة بجانب عدد صفحات المصحف، شرحها في تلميحها */
.read-extra{
  margin-inline-start:4px;padding:1px 5px;border-radius:999px;
  background:var(--tile);font-size:10.5px;cursor:help;
}
@media (pointer:coarse){
  .read-btn{height:44px;padding:0 14px}
  .read-jump{height:44px}
  .read-jump input{height:38px}
}
/* ===== نموذج ١: مصحف مفتوح ===== */
.read-spread .mus-stage{
  display:grid;grid-template-columns:1fr 1fr;max-width:1160px;margin-inline:auto;position:relative;
  border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.18);perspective:2400px;
}
/* أرضية الساحة بلون الورق: الصفحة المزخرفة أطول قليلًا من صفحة المتن
   (لوحتها ثم رقمها تحتها)، فلا يظهر فراغ أبيض تحت المقابلة لها */
.read-spread .mus-stage{background:#FAF5E9}
[data-theme=dark] .read-spread .mus-stage{background:#101C2B}
.read-spread .mus-page{border-radius:0;min-height:700px}
/* صفحات القالب نسبتها 2:3 ثابتة، فلا تُمطّ لتساوي الصفحة المقابلة */
.read-spread .mus-page:not(.is-illuminated){min-height:0;align-self:start}
.read-spread .mus-page:first-child{border-radius:0 6px 6px 0;border-inline-start:0}
.read-spread .mus-page:last-child{border-radius:6px 0 0 6px}
.read-spread .mus-stage::after{
  /* ظلّ الكعب ممتدّ من حافة الصفحة العليا إلى السفلى بلا انقطاع، كطيّة كتاب حقيقي */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:30px;margin-inline-start:-15px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 48%,transparent);pointer-events:none;
}
/* المصحف المفتوح يحتاج عرضًا يسع صفحتين. دون ذلك يُخفى الوجه المقابل، ويقرأ
   read.js المتغيّر ‎--spread-ok فيجعل الخطوة صفحةً واحدة؛ ولولاه لتُخطّيت الصفحات
   الزوجية فلا سبيل إليها. فالحدّ مكتوب هنا وحده، ولا يُكرَّر في الجافاسكربت. */
:root{--spread-ok:1}

@media(max-width:900px){
  :root{--spread-ok:0}
  .read-spread .mus-stage{grid-template-columns:1fr}
  .read-spread .mus-stage::after{display:none}
  /* الوجه المقابل وحده يُخفى. والصفحة الوحيدة (بعد التنقّل في الضيّق) هي أوّل
     وآخر في آن، فتُستثنى صراحةً وإلا اختفى المتن كلّه. */
  .read-spread .mus-page:last-child:not(:first-child){display:none}
  .read-spread .mus-page:first-child{border-radius:6px;border-inline-start:1px solid var(--border)}

  /* النموذجان يتطابقان في الضيّق، فلا معنى لمبدّل بينهما */
  .read-toggle{display:none}
}

/* ===== نموذج ٢: صفحة مفردة ===== */
.read-single .mus-stage{max-width:760px;margin-inline:auto;overflow:hidden}
.read-single .mus-page{box-shadow:0 18px 44px rgba(0,0,0,.12);border-radius:6px}

/* ===== الانتقال بين الصفحات =====
   الصفحة الجديدة تُبنى في طبقة فوق الساحة وهي غير مرئية (opacity 0)، فتُحمَّل خطوطها
   ويضبط الجافاسكربت حجم أسطرها هناك؛ فلا يرى القارئ إطارًا واحدًا بمقاس غير نهائي.

   والمتبادل هو الحبر وحده: الورق والبرواز والزوايا تُطفأ في الطبقة الداخلة أثناء
   الحركة، فيبقى ورق الصفحة القديمة — وهو نفسه بعينه — ظاهرًا كاملًا لا يتغيّر.
   قبل ذلك كانت الطبقتان تتلاشيان معًا، فيبهت البرواز وسطَ الحركة: قِيس بتصوير
   الإطارات أن سطوع شريط البرواز يرتفع ١٩ درجة لنحو ٢٢٠ مللي ثانية ثم يعود — وتلك هي
   الرعشة التي تُرى. الآن لا يتغيّر البرواز ولا الورق بدرجة واحدة.

   ويتداخل الحبران تداخلًا قصيرًا (يبدأ الداخل بعد ٦٠ مللي ثانية من بدء خروج القديم)،
   فلا يظهر ورق فارغ بينهما ولا يطول تراكب النصّين. والحركة على opacity وtransform
   وحدهما فتجري على المعالج الرسومي بلا إعادة تخطيط. */
/* الساحة مرجع تموضع طبقة الانتقال، فتأخذ مقاسها هي لا مقاس ما حولها */
.mus-stage{position:relative}
.mus-stage > .mus-swap{
  grid-column:1/-1;
  display:grid;grid-template-columns:inherit;gap:inherit;align-items:start;
}
.mus-stage > .mus-swap.is-ghost{position:absolute;inset:0;opacity:0;pointer-events:none}
/* الطبقة الداخلة تبقى فوق القديمة أثناء الحركة، وورقها مطفأ فلا يُرسم مرتين */
.mus-stage > .mus-swap.is-entering{position:absolute;inset:0;pointer-events:none}
.mus-swap.is-entering .mus-page{background:none;box-shadow:none;border-color:transparent}
.mus-swap.is-entering .pg-corner{display:none}
.mus-swap.is-entering .mus-body,
.mus-swap.is-entering .mus-head,
.mus-swap.is-entering .mus-foot{animation:inkIn .2s .06s ease-out both}
.mus-swap.is-leaving .mus-body,
.mus-swap.is-leaving .mus-head,
.mus-swap.is-leaving .mus-foot{animation:inkOut .16s ease-in both}
@keyframes inkIn{from{opacity:0;transform:translate3d(var(--ink-shift,6px),0,0)}to{opacity:1;transform:none}}
@keyframes inkOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(calc(var(--ink-shift,6px) * -0.6),0,0)}}
.mus-swap.is-prev{--ink-shift:-6px}

/* ===== نموذج ٣: تمرير متصل ===== */
.read-scroll .mus-stage{max-width:660px;margin-inline:auto;display:flex;flex-direction:column;gap:0}
.read-scroll .mus-page{border-radius:0;border-bottom:0}
.read-scroll .mus-page:first-child{border-radius:6px 6px 0 0}
.read-scroll .mus-page:last-child{border-radius:0 0 6px 6px;border-bottom:1px solid var(--border)}
.read-sentinel{height:1px}
.read-loading{text-align:center;color:var(--secondary);font-size:13px;padding:18px 0}

/* ===== فهرس السور ===== */
.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.surah-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);
}
.surah-card:hover{border-color:var(--accent)}
.surah-card:hover strong{color:var(--accent)}
.surah-no{
  flex-shrink:0;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;font-family:'Amiri',serif;font-size:14px;color:var(--secondary);
}
.surah-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.surah-body strong{font-family:'Amiri Quran','Amiri',serif;font-size:19px;font-weight:400}
.surah-body small{font-size:12px;color:var(--secondary)}

@media(prefers-reduced-motion:reduce){
  .mus-swap.is-entering .mus-body,.mus-swap.is-entering .mus-head,.mus-swap.is-entering .mus-foot,
  .mus-swap.is-leaving .mus-body,.mus-swap.is-leaving .mus-head,.mus-swap.is-leaving .mus-foot{animation:none!important}
}

@media(max-width:680px){
  .mus-page{padding:20px 17px 34px;min-height:0}
  .mus-ayat{font-size:22px;line-height:2.35}
  .mus-bismillah{font-size:20px}
  .read-spread .mus-page{min-height:0}
  .read-title h1{font-size:18px}
}

/* ===== تلوين أحكام التجويد =====
   الوسوم تُكتب في HTML دائمًا ولا أثر لها حتى يختار القارئ مستوى التلوين،
   فتبقى الصفحات المحمَّلة أثناء التقليب متوافقة مع اختياره بلا طلب جديد.
   الحكم مستنبط من الرسم العثماني نفسه (سكون وشدّة وتنوين وعلامة مدّ)،
   والنص المخزَّن لا يتغيّر ولا يُحفظ ملوَّنًا.
   الألوان هي ألوان خط المجمع الملوّن (QCF V4) نفسها بلوحتيه الفاتحة والداكنة،
   ونظامها نظام «مصحف التجويد» (دار المعرفة)؛ فيتّحد التلوين في صفحتَي الافتتاح
   المرسومتين بذلك الخط وفي سائر الصفحات. */
:root{
  --tj-madd6:#B50000;   --tj-madd4:#F40000;    --tj-madd-jaiz:#FF7B00; --tj-madd2:#CE9E00;
  --tj-ghunnah:#09B000; --tj-tafkheem:#3F48E6; --tj-qalqalah:#2FADFF;  --tj-silent:#A5A5A5;
}
[data-theme=dark]{
  --tj-madd6:#E30000;   --tj-madd4:#FF5E8E;    --tj-madd-jaiz:#FF8E3B; --tj-madd2:#FFC1E0;
  --tj-ghunnah:#26B55D; --tj-tafkheem:#3C84D5; --tj-qalqalah:#00DEFF;  --tj-silent:#9D9999;
}

/* المستوى الأساسي: المدّ اللازم والواجب، والغنّة بأنواعها (في هذا النظام لون واحد
   للغنّة والإخفاء والإدغام بغنّة والإقلاب)، والقلقلة، وما لا يُلفظ */
[data-tajweed=basic] .tj-madd-6,[data-tajweed=full] .tj-madd-6{color:var(--tj-madd6)}
[data-tajweed=basic] .tj-madd-4,[data-tajweed=full] .tj-madd-4{color:var(--tj-madd4)}
[data-tajweed=basic] :is(.tj-ghunnah,.tj-ikhfa,.tj-idgham,.tj-iqlab,.tj-ikhfa-shafawi),
[data-tajweed=full] :is(.tj-ghunnah,.tj-ikhfa,.tj-idgham,.tj-iqlab,.tj-ikhfa-shafawi){color:var(--tj-ghunnah)}
[data-tajweed=basic] .tj-qalqalah,[data-tajweed=full] .tj-qalqalah{color:var(--tj-qalqalah)}
[data-tajweed=basic] .tj-silent,[data-tajweed=full] .tj-silent{color:var(--tj-silent)}

/* المستوى الكامل: يضيف المدّ الطبيعي. الإدغام بغير غنّة يبقى بلون المتن: النظام يرسم
   النون المدغمة وحدها بلون ما لا يُلفظ، والمحرّك يسم النون وما أُدغمت فيه معًا، فتلوينهما
   يوحي بسقوط حرف منطوق. */
[data-tajweed=full] .tj-madd-2{color:var(--tj-madd2)}

/* مفتاح الألوان */
.tj-bar{margin:14px 0 0;text-align:center}
.tj-bar > .read-jump{
  display:inline-flex;vertical-align:middle;margin-inline-end:8px;
  height:auto;border:0;padding-inline:0;
}
.tj-levels{
  display:inline-flex;vertical-align:middle;gap:2px;padding:3px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);
}
.tj-levels button{
  height:30px;padding:0 13px;font-size:13px;line-height:1;
  background:none;color:var(--secondary);
  border:0;border-radius:7px;cursor:pointer;font-family:inherit;
  transition:background-color .15s ease-out,color .15s ease-out;
}
.tj-levels button:hover[aria-pressed=false]{background:var(--tile);color:var(--ink)}
@media (pointer:coarse){
  .tj-levels button{height:38px}
}
.tj-levels button[aria-pressed=true]{background:var(--button);color:var(--button-text)}
.tj-legend{
  display:none;flex-wrap:wrap;justify-content:center;gap:6px 14px;
  margin:12px auto 0;max-width:74ch;font-size:12px;color:var(--secondary);
}
.tj-legend li{display:inline-flex;align-items:center;gap:6px;list-style:none}
.tj-sw{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}
[data-tajweed=basic] ~ .tj-bar .tj-legend,
[data-tajweed=full]  ~ .tj-bar .tj-legend{display:flex}
[data-tajweed=basic] ~ .tj-bar .tj-legend li[data-level=full]{display:none}
.tj-note{display:none;text-align:center;font-size:11px;color:var(--secondary);opacity:.85;margin:8px auto 0;max-width:70ch}
[data-tajweed=basic] ~ .tj-bar .tj-note,
[data-tajweed=full]  ~ .tj-bar .tj-note{display:block}

/* ===== السرلوحة: صفحتا الفاتحة وأول البقرة =====
   زخرفة متجهة أصلية (theme/orn/SOURCE.txt). الزخرفة خلفية للوحة، والنص يبقى
   HTML حقيقيًا فوقها قابلًا للتحديد والنسخ، داخل المساحات الآمنة للتصميم:
   الآيات 16.8% / 22.6667% بقياس 66.4% × 61.3333%، واسم السورة 27% / 17.1333% × 46% × 2.4%.

   اللوحة تملأ بطاقة الصفحة بلا حشوة، وتُوسَّع الساحة للصفحتين المزخرفتين
   وحدهما، حتى يبقى متن الآيات بعرض متن الصفحة العادية لا أضيق منه. */
/* أرضية البطاقة بلون ورق اللوحة نفسه، فلا يظهر شريط مخالف تحتها عند رقم الصفحة */
/* داخل اللوحة تُقاس cqi على المتن (66.4% من عرض اللوحة)، فتكبر النسبة تبعًا */
.mus-page.is-illuminated{padding:0 0 20px;background:#FAF5E9;border-color:#e0d2b4}
[data-theme=dark] .mus-page.is-illuminated{background:#101C2B;border-color:#24384f}
.mus-page.is-illuminated::before,
.mus-page.is-illuminated::after{display:none}
.mus-page.is-illuminated .pg-corner{display:none}

.mus-page.is-illuminated .mus-body{
  flex:0 0 auto;
  position:relative;   /* اللوحة هي مرجع تموضع خرطوش اسم السورة */
  box-sizing:border-box;
  aspect-ratio:2/3;
  /* حشوة بالنسبة المئوية للعرض: 34% و24% رأسيًا تساويان 22.6667% و16%
     من الارتفاع عند نسبة 2:3، فينتج متن بعرض 66.4% وارتفاع 61.3333% تمامًا */
  padding:34% 16.8% 24%;
  background-image:url("/theme/orn/illumination-light.svg");
  background-size:100% 100%;
  background-repeat:no-repeat;
  container-type:inline-size;   /* فيصير قياس السطر نسبةً إلى المتن لا إلى الصفحة */
  display:flex;flex-direction:column;justify-content:space-evenly;
}
[data-theme=dark] .mus-page.is-illuminated .mus-body{
  background-image:url("/theme/orn/illumination-dark.svg");
}

/* شريط السورة في الصفحتين الافتتاحيتين هو شريط سائر الصفحات نفسه، ليتّسق
   المصحف كله. حُذف شريط السرلوحة من ملفها (المجموعة surah_bar)، ويوضع هذا
   مكانه بالضبط: عرض الشريط المحذوف 664 من 1000 (x 168–832) أي عرض المتن
   تمامًا، ومركزه y=275 من 1500. بنسبة 800:76 يكون ارتفاعه 6.308% من عرض
   اللوحة = 4.205% من ارتفاعها، وقمّته عند 16.23% منه. */
.mus-page.is-illuminated .mus-line.mus-surah-plate{
  position:absolute;inset-inline-start:16.8%;top:16.23%;width:66.4%;height:4.205%;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;border:0;box-shadow:none;
  line-height:1;color:var(--frame-text);
  background-image:url("/theme/orn/surah-bar-light.svg");
  background-size:100% 100%;background-repeat:no-repeat;
}
[data-theme=dark] .mus-page.is-illuminated .mus-line.mus-surah-plate{
  background-image:url("/theme/orn/surah-bar-dark.svg");
}
/* الاسم موسَّط على حبره المرئي بالطريقة نفسها في سائر الصفحات: الشريط بعرض
   المتن هنا أيضًا، فارتفاعه 9.5cqi والفتحة 37% من عرضه. */
.mus-page.is-illuminated .mus-line.mus-surah-plate .plate-name{
  font-size:clamp(10px,3.2cqi,22px);padding:0;
  max-width:37%;white-space:nowrap;
  height:100%;margin:0;
  display:flex;align-items:center;justify-content:center;
  line-height:normal;
  transform:translateY(-0.26em);
}
[data-theme=dark] .mus-page.is-illuminated .mus-line.mus-surah-plate{color:var(--frame-text)}
.mus-page.is-illuminated .mus-line.mus-surah-plate::before{display:none}
.mus-page.is-illuminated .plate-orn,
.mus-page.is-illuminated .plate-end{display:none}
/* عنوان الجزء يُطوى في السرلوحة: اسم السورة صار في الخرطوش، والصفحتان من الجزء الأول */
.mus-page.is-illuminated .mus-head{display:none}

/* وريدات أرقام الآيات بذهب الإطار لا بلون الثيم، وعنوان الصفحة يتنحّى للزخرفة */

/* رقم الصفحتين الافتتاحيتين في خانة كخانة سائر الصفحات: القطعة مقصوصة من
   طبقة page_number في قالب المتن (216 × 32 من مقاس 1000)، فعرضها 21.6% من
   عرض الصفحة وارتفاعها 3.2% منه، والرقم في وسطها كما هناك. */
.mus-page.is-illuminated .mus-foot{
  border-top:0;padding:0;margin:.6cqi auto 0;
  width:21.6cqi;height:3.2cqi;
  display:flex;align-items:center;justify-content:center;
  background-image:url("/theme/orn/pagenum-light.svg");
  background-size:100% 100%;background-repeat:no-repeat;
  font-size:clamp(7px,1.45cqi,14px);line-height:1;color:var(--frame-text);
}
[data-theme=dark] .mus-page.is-illuminated .mus-foot{
  background-image:url("/theme/orn/pagenum-dark.svg");
}
.mus-page.is-illuminated .mus-line.mus-bismillah{margin-bottom:0}

@media(max-width:680px){
  .mus-page.is-illuminated{padding:0 0 14px}
}
/* ‏6.4cqi من المتن (66.4% من اللوحة) تساوي 4.25% من عرض اللوحة، أي أكبر قليلًا
   من سطر الصفحة العادية (4.1% من عرضها) كما في المصحف المطبوع. وأسطر هاتين
   الصفحتين موسّطة بنصّ المصدر لا ممدودة، والجافاسكربت يصغّرها وحدها إن ضاق العرض. */
.mus-page.is-illuminated .mus-line{
  font-size:clamp(13px,6.4cqi,40px);
  line-height:clamp(30px,11cqi,72px);
}


/* ===== تكوين بيضاوي لمتن الصفحتين الافتتاحيتين (١ و٢) =====
   المتن تدفّق نصّي واحد، ومهمّة تشكيله موكولة إلى قطعتَي CSS تحدّدان المساحة
   المحظورة يمين النص ويساره بمنحنى قطع ناقص، فيتولّى المتصفح قطع الأسطر عند
   حافة الشكل: أعلاه قصير، ووسطه أعرض، وأسفله يضيق. لا كشيدة ولا مدّ أفقي
   ولا تفاوت في حجم الحروف، والنص يبقى نصًّا قابلًا للتحديد والتلوين. */
.mus-page.is-illuminated .mus-body.mus-body-oval{
  display:flex;flex-direction:column;justify-content:center;
}
/* لوحة مركزية أقصر من الحقل لا تملؤه: ملء الارتفاع ليس هدفًا، والمقصود
   تكوين مجموع في وسط المتن تحتضنه الزخرفة كما في المصاحف المزخرفة. */
.mus-oval{
  position:relative;width:100%;flex:0 0 auto;
  height:var(--oval-h, 74%);
}
/* اللوحة بلا حدّ حولها ولا وريدات فوقها وتحتها، بطلب صاحب المشروع:
   الوريدتان كانتا بشكل علامة الآية بلا رقم فتُلتبسان بها. */
.oval-shape{display:block;width:50%;height:100%;pointer-events:none}
.oval-l{
  float:left;
  shape-outside:polygon(0% 0%, 38.00% 0.0%, 38.00% 6.0%, 38.00% 9.0%, 35.01% 12.0%, 27.62% 15.5%, 20.00% 20.0%, 13.40% 25.0%, 7.50% 31.0%, 2.92% 38.0%, 0.72% 44.0%, 0.00% 50.0%, 0.72% 56.0%, 2.92% 62.0%, 7.50% 69.0%, 13.40% 75.0%, 20.00% 80.0%, 27.62% 84.5%, 35.01% 88.0%, 38.00% 91.0%, 38.00% 94.0%, 38.00% 100.0%, 0% 100%);
}
.oval-r{
  float:right;
  shape-outside:polygon(100% 0%, 62.00% 0.0%, 62.00% 6.0%, 62.00% 9.0%, 64.99% 12.0%, 72.38% 15.5%, 80.00% 20.0%, 86.60% 25.0%, 92.50% 31.0%, 97.08% 38.0%, 99.28% 44.0%, 100.00% 50.0%, 99.28% 56.0%, 97.08% 62.0%, 92.50% 69.0%, 86.60% 75.0%, 80.00% 80.0%, 72.38% 84.5%, 64.99% 88.0%, 62.00% 91.0%, 62.00% 94.0%, 62.00% 100.0%, 100% 100%);
}
.mus-flow{
  margin:0;
  font-family:'Amiri Quran','Amiri','Traditional Arabic',serif;
  color:var(--ink);
  text-align:center;
  /* ارتفاع السطر نسبة لا طول ثابت، ليتبع حجم الخط الذي يضبطه الجافاسكربت.
     الفسحة تسع التشكيل وعلامات الوقف فوق الحروف وتحتها. */
  line-height:1.95;
  font-size:5.6cqi;   /* قيمة احتياطية بلا جافاسكربت؛ يضبطها fitMedallion بدقّة */
  white-space:normal;
  text-wrap:pretty;
}
/* علامة الآية تابعة لحجم المتن لا لعرض الصفحة، فتتّحد كل العلامات في الصفحة */
.mus-page.is-illuminated .mus-oval .mus-no{font-size:1.25em;margin:-.5em 0}
/* البسملة سطر واحد لا يُقطع: وتر قمة الشكل مرسوم ليسعها كاملة */
.mus-bism{display:block;white-space:nowrap}

/* سطر لم يبلغ عرض الصفحة حتى بعد المدّ: يُوسَّط بفراغ متساوٍ على طرفيه،
   كما يصنع المصحف المطبوع بآخر سطر في السورة، بدل نفخ حجم حروفه. */
.mus-ayat-line.mus-short{text-align:center}
.mus-ayat-line.mus-short .mus-fit{transform-origin:center}

/* البسملة المرسومة في الصفحات العادية: محرف البسملة الموحّد بخط أميري، وهو رسم
   خطّي جاهز داخل الخط نفسه (لا ملف خارجي). عرضه نحو أحد عشر ضعف حجمه، فيُقاس
   حجمه على عرض المتن لا على حجم السطر، ويُوسَّط رأسيًّا في سطره. */
.mus-page:not(.is-illuminated) .mus-line.mus-bismillah{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.bsm-art{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:clamp(12px,4.3cqi,28px);
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  /* الرسمة زخرفة: لا تُحدَّد ولا تُنسخ، فينسخ القارئ نص البسملة الحقيقي وحده */
  user-select:none;-webkit-user-select:none;
  /* حبر الرسمة ثقيل من أسفل (مدّة الباء وكسراتها)، فتُرفع قليلًا لتبتعد عن
     أول سطر في السورة تحتها */
  transform:translateY(-0.14em);
}
/* في لوحتَي الافتتاح تُرسم البسملة بالحجم المطلق نفسه الذي في سائر الصفحات:
   هناك 4.3cqi من متن عرضه 80% من الصفحة = 3.44% من عرض الصفحة، وهنا المتن
   66.4% فالمقابل 5.18cqi. عرضها حينئذ نحو 59% من اللوحة، دون وترها العلوي
   (62%)، فلا تُجبر الملاءمة على تصغير النص. */
.mus-oval .bsm-art{font-size:clamp(12px,5.18cqi,34px);transform:translateY(-0.1em)}
/* فسحة تحت البسملة المرسومة في لوحة الافتتاح: علامات الوقف المرتفعة في أول سطر
   بعدها (كتعانق الوقف في «لَا رَيْبَ ۛ») كانت تقع تحت طرف الرسمة مباشرة فتبدو
   تابعة للبسملة لا للآية. الملاءمة تحسب هذه الفسحة ضمن ارتفاع اللوحة. */
.mus-oval .mus-bism{margin-bottom:.42em}

/* ===== كشف المصحف بعد اكتمال هيئته =====
   يُخفى المصحف منذ أول رسم للصفحة حتى يُحمَّل خطّه وتُضبط أسطره ولوحته، ثم يظهر
   مرة واحدة. الإخفاء بالشفافية لا بإزالة العنصر: فيبقى له مكانه فلا تقفز عناصر
   الصفحة تحته، ويُقاس ويُطلب خطّه أثناء الإخفاء. */
.mus-loading .mus-stage{opacity:0}
.mus-reveal .mus-stage{transition:opacity .22s ease-out}
@media (prefers-reduced-motion:reduce){
  .mus-reveal .mus-stage{transition:none}
}

/* آخر كلمة في الآية مع علامتها في لوحتَي الافتتاح: وحدة لا تُقطع */
.mus-end{white-space:nowrap}

/* ===== المصحف برموز خطوط المجمع (QCF V4) =====
   لكل صفحة خطّها ولوحات ألوانه، تُعرَّف مع الصفحة نفسها (read/_qcf_fonts). كل كلمة رسمة
   خطّية جاهزة كما في المطبوع، والرموز في نطاق الاستعمال الخاص فلا معنى لها بخط بديل:
   font-display:block يمنع ظهورها قبل التحميل، وكشف المصحف ينتظر الخط (read.js).
   خط واحد للوضعين: التلوين يبدّل لوحة الألوان المضمَّنة وحدها، فلا يتغيّر حجم النص
   ولا مواضعه عند تشغيله أو إيقافه. */
.qcf-run{
  font-family:var(--qcf-font),serif;font-weight:400;font-style:normal;
  white-space:nowrap;
  font-palette:--qcf-plain-light;
}
[data-theme=dark] .qcf-run{font-palette:--qcf-plain-dark}
[data-tajweed=basic] .qcf-run,
[data-tajweed=full] .qcf-run{font-palette:--qcf-tajweed-light}
[data-theme=dark] [data-tajweed=basic] .qcf-run,
[data-theme=dark] [data-tajweed=full] .qcf-run{font-palette:--qcf-tajweed-dark}

/* صفحتا الافتتاح: الأسطر موسَّطة بعرضها الطبيعي، فيتشكّل المتن منها كما في المطبوع
   دون مدّ ولا قطع. الحجم واحد للصفحة كلها ويضبطه fitQcf. */
.mus-qcf{
  flex:1 1 0;min-height:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  font-size:6cqi;   /* قيمة احتياطية بلا جافاسكربت */
}
.mus-qcf-line{position:relative;white-space:nowrap;line-height:2.05}
/* الفراغ بين الكلمات كما اعتُمد على صورة المرجع (مسافة الخط 0.04em وحدها أضيق) */
.mus-qcf .qcf-run{word-spacing:.07em}

/* سائر الصفحات: كل سطر في خانته من شبكة الأسطر الخمسة عشر، والرموز مصمَّمة ليملأ السطر
   الكامل عرض المتن؛ فالحجم واحد للصفحة يضبطه fitQcf على المتن، والسطر يرثه. */
.mus-page:not(.is-illuminated) .mus-body.mus-glyph{font-size:4.6cqi}   /* احتياط بلا جافاسكربت */
.mus-page:not(.is-illuminated) .mus-line.mus-glyph-line{
  font-size:inherit;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
}
/* المسافة بين الكلمات كما صُمّمت عليه الخطوط (0.04em)؛ سبعة خطوط تحمل رمز مسافة بعرض آخر
   فيُصحَّح لها (--qcf-space من الخادم). البسملة من خط الصفحة الأولى فلا تحتاجه. */
.mus-page:not(.is-illuminated) .mus-glyph .qcf-run{word-spacing:var(--qcf-space, 0em)}
/* البسملة أصغر من أسطر الآيات قليلًا، فلا تلاصق شريط السورة فوقها ولا أول آية تحتها */
.mus-page:not(.is-illuminated) .mus-glyph-bism .qcf-run{word-spacing:0;font-size:.75em}

/* علامة نهاية الآية: رمز الخط يبقى مكانه مخفيًّا فيحفظ عرضه الذي صُمّم عليه السطر، وتُرسم
   فوقه حلية المصحف الذهبية ورقمها نصًّا (الحلية نفسها في كل الصفحات وفي الوضعين).
   المقاس بالـem فيتبع حجم الخط الذي تضبطه الملاءمة. */
.qw.qe{position:relative;display:inline-block;--qe-size:1.08em;--qe-shift:0em}
.qe-glyph{visibility:hidden}
.qw.qe::before{
  content:"";position:absolute;left:50%;top:50%;
  width:var(--qe-size);height:var(--qe-size);
  transform:translate(-50%, calc(-50% + var(--qe-shift)));
  background:url("/theme/orn/ayah-light.svg") center/100% 100% no-repeat;
}
[data-theme=dark] .qw.qe::before{background-image:url("/theme/orn/ayah-dark.svg")}
.qe-num{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(calc(-50% + var(--qe-shift)));
  text-align:center;
  font-family:'Amiri',serif;font-size:.47em;line-height:1;
  color:#193E64;font-variant-numeric:tabular-nums;
}
[data-theme=dark] .qe-num{color:#E9D19A}
.qw.qe[data-len="2"] .qe-num{font-size:.41em}
.qw.qe[data-len="3"] .qe-num{font-size:.31em}

/* ===== تحديد الآية المقروءة =====
   كلمات الآية في السطر مقطع واحد (qa)، فتُظلّل الآية وحدةً متصلة لا كلماتٍ متقطّعة.
   الظلّ يُرسم في عنصر خلفي بأبعاد بالـem، فلا يزيد عرض المقطع ولا يزحزح حرفًا عن
   موضعه الذي صمّمه الخط. والسطر معزول (isolation) ليبقى الظلّ خلف النص فوق ورق
   الصفحة. اللون من ذهب البرواز نفسه بشفافية عالية: يبيّن الآية ولا يطغى على ألوان
   التجويد ولا على سواد الرسم. */
.qa{position:relative}
.qa::before{
  content:"";position:absolute;z-index:-1;
  /* علبة السطر أعلى من رسم الكلمات بكثير (مقاييس خطوط المجمع)، فارتفاع الشريط
     مقدَّر بالـem وموسَّط عليها: يحيط بالكلمات ويبقى بين سطرين فرجة ظاهرة. */
  top:50%;height:1.45em;transform:translateY(-50%);
  left:-.1em;right:-.1em;
  border-radius:.22em;
  background:transparent;
  transition:background-color .16s ease-out;
}
.mus-line.mus-glyph-line,.mus-qcf-line{isolation:isolate}
.qa.is-marked::before{
  background-color:var(--mark-fill);
  box-shadow:inset 0 0 0 1px var(--mark-edge);
}
/* تلميح خفيف بمرور المؤشر: يُعرّف بأن الآية قابلة للنقر، ولا يظهر على اللمس */
@media (hover:hover){
  .qa:not(.is-marked):hover::before{background-color:var(--mark-hover)}
}
@media (prefers-reduced-motion:reduce){
  .qa::before{transition:none}
}

/* ===== ملاحق المصحف: دعاء الختم (٦٠٥) وفهرس السور (٦٠٦ و٦٠٧) =====
   في برواز صفحات المصحف نفسه وحقل متنها نفسه، فلا يشذّ شكلهما عنه. المقاسات
   بوحدة cqi كنصّ المصحف (حقل المتن حاوية استعلام)، فتكبر وتصغر مع الصفحة معًا.
   صفوف الفهرس روابط إلى موضع السورة، ولها حالة تمرير وحالة تركيز للوحة المفاتيح. */
.mus-page.is-sheet .mus-body{
  display:flex;flex-direction:column;gap:2.2cqi;
  font-family:'Amiri',serif;color:var(--sheet-ink);
}
/* العنوان في صندوق بارتفاع ثابت يُوسَّط حبره فيه: خط أميري يحجز فوق الحرف مساحة
   للحركات أكبر مما يحجزه تحته، فيقع الحبر أسفل المركز ويلاصق الخيط. line-height:normal
   ليشمل الصندوق الحركات كلها، ورفعٌ نسبيٌّ بالـem يُسوّي الفراغين (كاسم السورة في الشريط). */
.sheet-title{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  height:9.4cqi;margin:0;padding:0;
  font-family:'Amiri Quran','Amiri',serif;font-weight:400;
  font-size:4.4cqi;line-height:normal;color:var(--frame-text);
  border-bottom:1px solid var(--frame-rule);
}
/* مقدار الرفع مقيس لا مخمَّن: حبر العنوان يقع في أسفل صندوق سطره (خط أميري قرآن
   يحجز فوق الحرف مساحة الحركات)، فيُرفع نصف الفرق بين فراغَي الصندوق = 0.45em. */
.sheet-title span{display:block;transform:translateY(-0.42em)}

/* الفهرس: عمودان يُقرآن من اليمين إلى اليسار، وصفوفه موزّعة على ارتفاع المتن */
.idx-list{
  flex:1 1 auto;min-height:0;margin:0;padding:0;list-style:none;
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--idx-rows, 29), 1fr);
  column-gap:4.5cqi;
}
.idx-list li{min-width:0}
.idx-row{
  display:flex;align-items:baseline;gap:1cqi;
  height:100%;padding:0 .7cqi;border-radius:.7cqi;
  font-size:2.7cqi;line-height:1.15;
  color:inherit;text-decoration:none;
}
.idx-no{
  flex:0 0 auto;min-width:3.6cqi;text-align:center;
  font-size:.84em;color:var(--frame-text);font-variant-numeric:tabular-nums;
}
/* أسماء السور بخط أميري النصّي لا أميري قرآن: الثاني مصمَّم للأحجام الكبيرة، وعند
   حجم سطر الفهرس (نحو ١٤ بكسل) تسقط نقاط الحروف في الرسم فتُقرأ «التـ.بة» و«يـ.نس».
   قِيس بلقطة مكبَّرة: النقاط تظهر بالخطّين عند ٤٠ بكسل، وتغيب بأميري قرآن عند ١٤. */
.idx-name{
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'Amiri',serif;
}
/* خيط النقاط يصل الاسم برقم صفحته كما في فهارس المصاحف المطبوعة */
.idx-dots{
  flex:1 1 auto;min-width:1.4cqi;align-self:center;
  border-bottom:1px dotted var(--frame-rule);
}
.idx-page{
  flex:0 0 auto;font-size:.84em;color:var(--frame-text);font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .idx-row:hover{background:var(--mark-fill)}
}
.idx-row:focus-visible{outline:2px solid var(--frame-text);outline-offset:1px}

/* صفحة الدعاء: نصّ موسَّط في وسط المتن بفسحة بين فقراته */
/* نصّ الدعاء يملأ ما بين العنوان وبيان المصدر، وحجمه يضبطه fitSheet في read.js
   ليسع الصفحة كاملًا مهما طال النصّ في ملفه أو قصر. */
.sheet-dua{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:1.8cqi;
  text-align:center;font-size:3.4cqi;line-height:1.95;
  font-weight:700;   /* وجه أميري العريض: أثقل وأوضح في صفحة الدعاء */
}
.sheet-dua p{margin:0;text-align:justify;text-align-last:center}
/* علامة ۞ الفاصلة بين فقرات الدعاء: بلون ذهب البرواز وأكبر قليلًا، كحلي المصحف */
.dua-mark{color:var(--frame-gold);font-size:1.2em;line-height:1}

/* بيان المصدر والتنبيه: سطور صغيرة أسفل الصفحة يفصلها خيط ذهبي رفيع.
   الأرضية تُصفَّر صراحةً: تذييل الموقع في style.css يأخذ أرضية بيضاء، وهي تفسد ورق الصفحة. */
.sheet-meta{
  flex:0 0 auto;margin:0;padding:1cqi 0 0;
  background:none;border:0;border-top:1px solid var(--frame-rule);
  text-align:center;color:var(--frame-text);
}
.sheet-source,.sheet-note{margin:0;font-size:1.85cqi;line-height:1.75}
.sheet-note{opacity:.85}
.sheet-empty{
  margin:auto;text-align:center;font-size:2.6cqi;line-height:2;color:var(--frame-text);
}
.sheet-empty code{font-family:ui-monospace,monospace;font-size:.78em;direction:ltr;unicode-bidi:isolate}