/* المصحف الموسوعيّ — نموذج v2 (2026-10-06) · رموزُ tokens.css وحدها
   المصحفُ فوق، وتحته طبقاتٌ تُطوى وتُبسط: التفاسير · علوم القرآن · المواقع.
   ‣ خطُّ المصحف بوحدات الحاوية (cqi): يتّسع بعرض الصفحة لا الشاشة · ‣ الأكورديون بـ interpolate-size و::details-content
   ‣ الصفحتان متجاورتان في الشاشات العريضة (الفرديّةُ يمينًا) · ‣ ٤٤px للمس · ‣ يحترم «تقليل الحركة» */
@font-face{font-family:"HafsKFGQPC";src:url("/assets/fonts/hafs-kfgqpc-v18.woff2") format("woff2");font-display:block}
:root{interpolate-size:allow-keywords;--q:"HafsKFGQPC",serif;--r:16px;--sh:0 1px 2px rgb(18 42 76/.06),0 8px 28px rgb(18 42 76/.08)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Readex Pro",system-ui,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--gold-ink)}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* الرأس */
.hd{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-navy)}
.hd-in{display:flex;align-items:center;gap:.8rem;min-height:56px}
.brand{color:var(--on-navy);text-decoration:none;font-weight:600;font-size:1.05rem}
.brand span{opacity:.75;font-weight:400}
.proto{margin-inline-start:auto;font-size:.75rem;padding:.15rem .6rem;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:999px;color:var(--gold)}

/* شريطُ الموضع — ثابتٌ أعلى الصفحة أثناء النزول في الطبقات */
.ctx{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.ctx-in{display:flex;align-items:center;gap:.45rem;min-height:56px}
.ic{flex:none;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer}
.ic:hover{border-color:var(--gold)}
.pick select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;padding:0 .6rem;max-width:44vw}
.pick-a select{max-width:6.5rem}
.pg-ref{margin-inline-start:auto;font-size:.82rem;color:var(--muted);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* الطبقات (أكورديون) */
main{padding-block:1rem 3rem;display:grid;gap:.9rem}
.lay{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:clip}
.lay>summary{list-style:none;display:flex;align-items:center;gap:.7rem;min-height:60px;padding:.4rem 1.1rem;cursor:pointer;user-select:none}
.lay>summary::-webkit-details-marker{display:none}
.lay-t{font-family:Amiri,serif;font-size:1.3rem;font-weight:700;color:var(--ink-strong)}
.lay-s{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.chev{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:transform .25s ease}
.chev::before{content:"";width:8px;height:8px;border-inline-start:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(-45deg)}
.lay[open]>summary .chev{transform:rotate(180deg)}
.lay::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
.lay[open]::details-content{height:auto}
.lay-b{padding:0 1.1rem 1.2rem;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.lay::details-content,.chev{transition:none}html{scroll-behavior:auto}}

/* أنماط العرض */
.modes{display:inline-flex;gap:.25rem;margin-block:.9rem;padding:.25rem;border-radius:999px;background:color-mix(in srgb,var(--line) 45%,transparent)}
.modes button{min-height:40px;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer}
.modes button[aria-checked="true"]{background:var(--navy);color:var(--on-navy);box-shadow:var(--sh)}
.hint{font-size:.78rem;color:var(--muted);margin-top:.6rem;text-align:center}

/* صفحةُ المصحف: ١٥ سطرًا، والخطُّ بوحدات الحاوية */
.stage{display:flex;justify-content:center;gap:1.2rem}
.mp{container-type:inline-size;width:min(100%,560px);aspect-ratio:1/1.62;background:var(--paper);border-radius:6px;
  padding:4.5cqi 5cqi 3cqi;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 5px var(--paper),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent),var(--sh);
  display:grid;grid-template-rows:repeat(15,1fr) auto;position:relative}
.spread .mp{width:min(49%,520px)}
.ml{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;font-family:var(--q);font-size:5.05cqi;line-height:1;color:var(--ink-strong)}
.ml.c{justify-content:center;gap:.6em}
.mw{cursor:pointer;border-radius:.2em;padding:0 .02em;transition:background .15s}
.mw:hover,.mw.hov{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.mw.sel{background:color-mix(in srgb,var(--gold) 30%,transparent)}
.mw.cur{background:var(--navy);color:var(--on-navy)}
.am{font-family:var(--q);color:var(--gold-ink)}
.mh{display:grid;place-items:center;font-family:Amiri,serif;font-size:4.4cqi;color:var(--ink-strong);
  border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);border-radius:999px;margin-inline:12%;
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.mb{display:grid;place-items:center;font-family:var(--q);font-size:5cqi;color:var(--ink-strong)}
.mf{display:flex;justify-content:space-between;font-size:2.6cqi;color:var(--muted);padding-top:1cqi}
.mp.special{grid-template-rows:repeat(4,1fr) repeat(8,1.2fr) repeat(3,1fr) auto}

/* الآية آيةً آية */
.ay{container-type:inline-size;width:min(100%,820px);text-align:center;padding:1.2rem .5rem}
.ay-t{font-family:var(--q);font-size:clamp(1.6rem,5.2cqi,2.6rem);line-height:2.2;color:var(--ink-strong)}
.ay-r{margin-top:.4rem;color:var(--muted);font-size:.9rem}

/* الكلمة كلمةً كلمة */
.wd{width:min(100%,820px);display:grid;gap:1rem;justify-items:center;text-align:center;padding-block:.6rem}
.wd-w{font-family:var(--q);font-size:clamp(3.2rem,12vw,6rem);line-height:1.6;color:var(--ink-strong)}
.wd-i{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.tag{font-size:.82rem;padding:.2rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-ink)}
.wd-x{max-width:60ch;font-size:.95rem;color:var(--ink);text-align:start;background:color-mix(in srgb,var(--line) 30%,transparent);border-radius:12px;padding:.7rem 1rem}
.wd-x b{color:var(--ink-strong)}
.wd-a{font-family:var(--q);font-size:clamp(1.3rem,3.6vw,1.9rem);line-height:2.1}

/* التفاسير */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding-top:.9rem}
.chips .g{flex-basis:100%;font-size:.78rem;color:var(--muted)}
.chips button{min-height:44px;padding:0 .9rem;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.chips button small{color:var(--muted)}
.chips button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.chips button[aria-selected="true"] small{color:inherit;opacity:.8}
.card{margin-top:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem}
.tf h3{font-family:Amiri,serif;font-size:1.3rem;color:var(--ink-strong)}
.tf .by{color:var(--muted);font-size:.88rem}
.badge{display:inline-block;margin:.35rem 0 0 .3rem;padding:.05rem .6rem;border-radius:999px;font-size:.78rem;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-ink)}
.badge.c{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.tx{margin-top:.7rem;line-height:2.05;font-size:1.04rem;overflow-wrap:anywhere;max-height:34rem;overflow:auto;padding-inline-end:.3rem}
.tx p{margin-block:.4rem}
.tx .q{font-family:var(--q);color:var(--gold-ink)}
.tx .n{font-size:.78em;color:var(--muted)}
.tx .fn{font-size:.85rem;color:var(--muted);border-inline-start:3px solid var(--line);padding:.3rem .7rem;background:color-mix(in srgb,var(--line) 25%,transparent);border-radius:6px}
.tx .fn b{color:var(--ink)}
.cite{margin-top:.8rem;padding-top:.6rem;border-top:1px dashed var(--line);font-size:.84rem;color:var(--muted)}
.mini{min-height:44px;margin-top:.4rem;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--gold-ink);font:inherit;cursor:pointer}

/* علوم القرآن والمواقع */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;padding-top:.9rem}
.uc{display:grid;gap:.15rem;padding:.8rem .95rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.uc:hover{border-color:var(--gold);transform:translateY(-1px)}
.uc .k{font-size:.75rem;color:var(--gold-ink)}
.uc b{font-family:Amiri,serif;font-size:1.08rem;color:var(--ink-strong)}
.uc span:last-child{font-size:.85rem;color:var(--muted)}
.sites{list-style:none;padding:.9rem 0 0;display:grid;gap:.45rem}
.sites a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:48px;padding:.4rem .95rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none}
.sites a:hover{border-color:var(--gold)}
.sites small{color:var(--muted)}
.empty{color:var(--muted);padding-top:.9rem}

.ft{padding-block:1.5rem 2.5rem;text-align:center;font-size:.82rem;color:var(--muted)}

@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .lay>summary{padding-inline:.85rem}.lay-b{padding-inline:.85rem}
  .modes{display:flex;width:100%}.modes button{flex:1;padding:0 .4rem}
  .modes [data-m="spread"]{display:none}
  .tx{max-height:none}
  .pg-ref{display:none}
}
.brand,.proto{white-space:nowrap}
@media (max-width:640px){.brand span{display:none}.proto{font-size:.7rem}}

/* ── الحركات (2026-10-06 · طلب المؤلّف: «حركاتٌ راقية للعرض الذي تستحقّه الآيات») ──
   الوقارُ لا الاستعراض: منحنياتٌ هادئة (cubic-bezier .2,.7,.2,1) · ≤٧٠٠ms · وكلُّها تُطفأ لمن طلب تقليل الحركة. */
.br{font-family:var(--q);color:var(--gold-ink)}
.ay-t .mw,.wd-a .mw,.ay-t .am,.ay-t .br{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  /* تقليبُ الصفحة — View Transitions: التاليةُ تأتي من اليسار كما في المصحف المفتوح (RTL) */
  .stage{view-transition-name:mushaf}
  ::view-transition-group(mushaf){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(mushaf){animation:.42s cubic-bezier(.4,0,.2,1) both turn-out}
  ::view-transition-new(mushaf){animation:.6s cubic-bezier(.2,.7,.2,1) both turn-in}
  html[data-turn="prev"]::view-transition-old(mushaf){animation-name:turn-out-prev}
  html[data-turn="prev"]::view-transition-new(mushaf){animation-name:turn-in-prev}
  @keyframes turn-out{to{opacity:0;transform:perspective(1400px) translateX(7%) rotateY(10deg) scale(.985)}}
  @keyframes turn-in{from{opacity:0;transform:perspective(1400px) translateX(-7%) rotateY(-10deg) scale(.985)}}
  @keyframes turn-out-prev{to{opacity:0;transform:perspective(1400px) translateX(-7%) rotateY(-10deg) scale(.985)}}
  @keyframes turn-in-prev{from{opacity:0;transform:perspective(1400px) translateX(7%) rotateY(10deg) scale(.985)}}
  .mp{animation:page-in .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes page-in{from{opacity:0;transform:translateY(8px)}}

  /* الآية: ينفتح القوس، ثمّ تُكتب كلمةً كلمة صاعدةً من ضبابٍ خفيف، ثمّ يُغلق القوس ويُزهر الرقم */
  .ay-t .br:first-child{animation:fade .5s ease both}
  .ay-t .mw{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--i),40) * 55ms + 120ms)}
  .ay-t .br:not(:first-child){animation:fade .5s ease both;animation-delay:calc(min(var(--i),40) * 55ms + 180ms)}
  .ay-t .am{animation:bloom .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--i),40) * 55ms + 260ms)}
  .ay-r{animation:fade .6s ease both .3s}
  @keyframes rise{from{opacity:0;transform:translateY(.4em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  @keyframes fade{from{opacity:0}}
  @keyframes bloom{0%{opacity:0;transform:scale(.55);text-shadow:0 0 0 transparent}
    65%{opacity:1;transform:scale(1.1);text-shadow:0 0 .5em color-mix(in srgb,var(--gold) 70%,transparent)}
    100%{transform:scale(1);text-shadow:0 0 0 transparent}}

  /* الكلمة: تبرز من الضباب إلى الوضوح، وتتبعها بطاقاتُها تباعًا */
  .wd-w{animation:emerge .75s cubic-bezier(.2,.7,.2,1) both}
  @keyframes emerge{from{opacity:0;transform:scale(.92);filter:blur(10px);letter-spacing:.08em}to{opacity:1;transform:none;filter:none}}
  .wd-i .tag{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .wd-i .tag:nth-child(2){animation-delay:.08s}.wd-i .tag:nth-child(3){animation-delay:.16s}.wd-i .tag:nth-child(4){animation-delay:.24s}
  .wd-x{animation:rise .55s cubic-bezier(.2,.7,.2,1) both .28s}
  .wd-a{animation:fade .6s ease both .35s}
  .wd-a .mw.cur{animation:ink .6s ease both}

  /* الآيةُ المختارة في الصفحة: يسري فيها الذهبيّ كالحبر */
  .mp .mw.sel{animation:ink .7s ease both}
  @keyframes ink{from{background-color:transparent}}
  .mh{background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 28%,transparent) 50%,transparent 70%);
    background-size:250% 100%;background-repeat:no-repeat;animation:sheen 1.6s ease .2s both}
  @keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}

  /* الطبقات تتفتّح بلطف، والتفسيرُ ينساب عند التبديل */
  .lay[open] .lay-b{animation:fade-up .4s cubic-bezier(.2,.7,.2,1) both}
  #tf-body>*{animation:fade-up .45s cubic-bezier(.2,.7,.2,1) both}
  .uc,.sites li{animation:fade-up .45s cubic-bezier(.2,.7,.2,1) both}
  .uc:nth-child(2),.sites li:nth-child(2){animation-delay:.05s}.uc:nth-child(3),.sites li:nth-child(3){animation-delay:.1s}
  .uc:nth-child(n+4),.sites li:nth-child(n+4){animation-delay:.15s}
  @keyframes fade-up{from{opacity:0;transform:translateY(6px)}}
}
/* شبكةُ أمان: إن لم تجرِ الحركة (طباعة · لقطة · صفحةٌ مخفيّة) فالآيةُ تُثبَّت ظاهرةً بعد ثلاث ثوانٍ — لا تبقى شفّافة */
.settled .mw,.settled .am,.settled .br,.settled .ay-r,.settled .wd-w,.settled .wd-i .tag,.settled .wd-x,.settled .wd-a{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
@media print{*{animation:none!important}}
/* في عرضَي الآية والكلمة الآيةُ كلُّها هي المختارة: لا تظليلَ لها — يبقى تمييزُ الكلمة الحاليّة وحدها */
.ay-t .mw.sel,.wd-a .mw.sel{background:none}
.ay-t .mw:hover,.wd-a .mw:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.wd-a .mw.cur{background:var(--navy);color:var(--on-navy)}
/* الإعراب والتفسير البلاغيّ مضمَّنان من التطبيق السابق (/classic/?embed=…) — الارتفاعُ برسالة الإطار */
.emb{display:block;width:100%;height:560px;margin-top:.9rem;border:0;border-radius:12px;background:var(--paper)}
/* إصلاحُ فيضان الهاتف (مقيس حيًّا: ٤٧٦ في ٣٧٥): نسبةُ أبعاد الصفحة تنقل ارتفاعَ الأسطر الأدنى إلى عرضٍ أدنى (٤٣١) —
   فيُلغى الحدُّ الأدنى المستنتَج على الصفحة وحاوياتها، فتتقيّد بعرض الشاشة */
main>.lay,.lay-b,.stage{min-width:0}
.mp{min-width:0;min-height:0;grid-template-rows:repeat(15,minmax(0,1fr)) auto}
.mp.special{grid-template-rows:repeat(4,minmax(0,1fr)) repeat(8,minmax(0,1.2fr)) repeat(3,minmax(0,1fr)) auto}
.ml{min-width:0}