/* جناح «القرآن» — quran.basaere.com (ADR-112). الألوان رموزٌ على :root (بيج · كحليّ · ذهبيّ) والداكنُ بالتفضيل.
   خطُّ المصحف بوحدات الحاوية (cqi) فيتّسع بعرض الصفحة التي تحدّدها مكتبة التقليب لا بعرض الشاشة. */
@font-face{font-family:"HafsKFGQPC";src:url("/assets/fonts/hafs-kfgqpc-v18.woff2") format("woff2");font-display:block}
@font-face{font-family:"NotoNaskh";src:url("/assets/fonts/notonaskharabic_RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV20Lg.woff2") format("woff2");font-display:swap}
:root{--paper:#FBF7EE;--card:#FFFDF8;--ink:#1B1A17;--ink-strong:#0F1A2E;--muted:#6B655A;--line:#E3DACB;
  --navy:#122A4C;--navy-2:#1C3D6B;--on-navy:#F4EFE4;--gold:#C9A227;--gold-ink:#7A5E0C;--sel:rgba(201,162,39,.22);
  --q:"HafsKFGQPC",serif;--r:16px;--sh:0 10px 30px rgba(18,42,76,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#15171A;--card:#1D2024;--ink:#ECEBE4;--ink-strong:#FFFFFF;--muted:#A7A295;--line:#2E3238;
  --navy:#0B1B33;--navy-2:#14305A;--on-navy:#F4EFE4;--gold:#D9B84A;--gold-ink:#E6CC6A;--sel:rgba(217,184,74,.25);--sh:0 10px 30px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--paper:#15171A;--card:#1D2024;--ink:#ECEBE4;--ink-strong:#FFFFFF;--muted:#A7A295;--line:#2E3238;
  --navy:#0B1B33;--navy-2:#14305A;--on-navy:#F4EFE4;--gold:#D9B84A;--gold-ink:#E6CC6A;--sel:rgba(217,184,74,.25);--sh:0 10px 30px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}                    /* الورقةُ المنحنية تتجاوز الحاوية لحظةَ التقليب (مقيس) */
body{margin:0;background:var(--paper);color:var(--ink);font-family:"NotoNaskh","Noto Naskh Arabic",system-ui,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
a{color:var(--gold-ink)}
::focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* الرأس */
.hd{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-navy)}
.hd-i{display:flex;align-items:center;gap:.6rem;min-height:56px}
.brand{color:var(--on-navy);text-decoration:none;font-weight:700;font-size:1.15rem}
.brand span{opacity:.75;font-weight:400;font-size:.9rem}
.hd-n{margin-inline-start:auto;display:flex;gap:.35rem}
.ic{min-width:44px;min-height:44px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08);color:var(--on-navy);font:inherit;font-size:1.05rem;cursor:pointer}
.ic:hover{background:rgba(255,255,255,.16)}
.ic.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* شريط التنقّل */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.7rem 0}
.pick{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
.pick select,.pick input{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;padding:0 .6rem;max-width:46vw}
.pick-p input{width:5.5rem;text-align:center}
.pos{margin-inline-start:auto;font-size:.85rem;color:var(--muted);white-space:nowrap}

/* الكتاب */
.book-wrap{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;margin-block:.4rem 1rem}
.book{width:100%;min-width:0;min-height:0}
.turn{min-width:44px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--sh)}
.turn span{font-size:1.6rem;line-height:1;color:var(--gold-ink)}
.turn b{font-size:.85rem;color:var(--muted);font-weight:400}
.turn:disabled{opacity:.35;cursor:default}
@media (max-width:640px){.book-wrap{grid-template-columns:1fr;gap:.6rem}.turn{min-height:48px;flex-direction:row;gap:.5rem}.turn-prev{order:2}.turn-next{order:3}}

/* الصفحة (داخل عنصر المكتبة ذي العرض المحدّد) */
/* المكتبةُ تفرض display:block على عنصر الصفحة (مقيس) فالتمدّدُ في غلافٍ داخليّ .pi */
.pf{container-type:inline-size;width:100%;height:100%;background:var(--card);color:var(--ink-strong);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 5px var(--card),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent)}
.pf.odd{box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 5px var(--card),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent),inset 18px 0 24px -22px rgba(0,0,0,.25)}
.pf.even{box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 5px var(--card),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent),inset -18px 0 24px -22px rgba(0,0,0,.25)}
.pi{height:100%;display:flex;flex-direction:column;padding:3.2cqi 5cqi 2.4cqi}
.pf.empty{display:grid;place-items:center;color:var(--muted);font-size:3cqi}
.mt{display:flex;justify-content:space-between;font-size:2.7cqi;color:var(--muted);padding-bottom:1.2cqi;border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent);margin-bottom:1.4cqi}
.lines{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.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:1.2cqi}
.pf.special .lines{justify-content:center;gap:2.6cqi}
.mw{cursor:pointer;border-radius:4px;padding:.9cqi .2cqi;transition:background .15s}
.mw.hov{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.mw.sel{background:var(--sel);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent)}
.am{font-family:var(--q);color:var(--gold-ink)}
.mh{display:grid;place-items:center;font-family:"NotoNaskh",serif;font-size:4.2cqi;color:var(--ink-strong);
  border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);border-radius:999px;margin-inline:10%;padding:.6cqi 0}
.mb{display:grid;place-items:center;font-family:var(--q);font-size:5cqi;color:var(--ink-strong)}
.mf{display:flex;justify-content:center;font-size:2.8cqi;color:var(--muted);padding-top:1.2cqi}
.book{direction:ltr}                     /* المكتبةُ تحسب الإحداثيّات بالاتّجاه الأيسر؛ والصفحاتُ نفسُها rtl */
.pf{direction:rtl}
#toast{position:fixed;inset-inline:0;bottom:1.2rem;margin:auto;width:max-content;max-width:90vw;padding:.6rem 1.1rem;border-radius:999px;background:var(--navy);color:var(--on-navy);font-size:.9rem;opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none;z-index:60}
#toast.show{opacity:1;transform:none}

/* التبويبات تحت المصحف */
.tabs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:clip;margin-bottom:1.5rem}
.tab-h{display:flex;border-bottom:1px solid var(--line)}
.tab-h button{flex:1;min-height:48px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:1rem;cursor:pointer;border-bottom:3px solid transparent}
.tab-h button[aria-selected="true"]{color:var(--ink-strong);border-bottom-color:var(--gold);font-weight:700}
.tab-b{padding:1rem 1.15rem}
.hint{font-size:.85rem;color:var(--muted);margin:0}
.ay{text-align:center;padding:.4rem 0}
.ay-t{font-family:var(--q);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:2.2;color:var(--ink-strong)}
.ay-r{margin-top:.3rem;color:var(--muted);font-size:.9rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;align-items:center}
.chip{min-height:40px;padding:0 .9rem;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--gold)}
.tf-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.tf-h select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;padding:0 .6rem;max-width:100%}
.tf-ed{font-size:.8rem;color:var(--muted)}
.tf-r{padding:.7rem .4rem;border-top:1px solid var(--line);scroll-margin-top:80px}
.tf-r:first-of-type{border-top:0}
.tf-r.cur{background:var(--sel);border-radius:10px;padding-inline:.7rem}
.tf-a{font-family:var(--q);font-size:1.25rem;color:var(--gold-ink);margin-bottom:.2rem}
.tf-t{white-space:pre-line;color:var(--ink);font-size:1rem;line-height:1.9}
.ft{font-size:.8rem;color:var(--muted);padding-block:1rem 3rem}

@media (prefers-reduced-motion:reduce){.mw{transition:none}}
:fullscreen body,.fs{background:var(--paper)}
.fs .hd,.fs .bar,.fs .tabs,.fs .ft{display:none}
.fs .book-wrap{margin:0;min-height:100vh;align-content:center}

/* المشغّل (المرحلة ②): القارئ · تشغيل · تكرار (المعلّم) · سكتة · سرعة */
.player{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.3rem 0 .6rem}
.pb{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--gold-ink);font:inherit;font-size:1.05rem;cursor:pointer}
.pb.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pnow{font-size:.85rem;color:var(--muted);margin-inline-start:auto;white-space:nowrap}
.mw.now{background:var(--gold);color:var(--navy);box-shadow:0 0 0 2px var(--gold)}
.mw.playing{background:color-mix(in srgb,var(--gold) 14%,transparent)}
/* الترجمة */
.tr-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.tr-h select{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;padding:0 .6rem;max-width:100%}
.tr-r{padding:.7rem .4rem;border-top:1px solid var(--line);scroll-margin-top:80px;display:grid;gap:.25rem}
.tr-r:first-of-type{border-top:0}
.tr-r.cur{background:var(--sel);border-radius:10px;padding-inline:.7rem}
.tr-a{font-family:var(--q);font-size:1.15rem;color:var(--gold-ink)}
.tr-t{font-size:1rem;line-height:1.8;color:var(--ink);font-family:system-ui,"Segoe UI","Noto Sans",sans-serif}
.tr-t[dir=rtl]{font-family:"NotoNaskh","Noto Naskh Arabic",system-ui,sans-serif}
.tr-meta{font-size:.78rem;color:var(--muted)}
@media (max-width:640px){.pnow{flex-basis:100%;margin:0}}

/* ②-ب: بطاقة الكلمة · الجذر · التجويد · العلامات · الروابط */
.wcard{margin-top:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;text-align:start}
.wc-w{font-family:var(--q);font-size:2rem;line-height:1.6;color:var(--ink-strong);text-align:center}
.wc-g{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:.4rem 0 .6rem}
.chip.st{cursor:default;color:var(--muted)}
.chip.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.wc-r{margin:.45rem 0}
.wc-r b{display:block;font-size:.8rem;color:var(--gold-ink)}
.wc-r p{margin:.1rem 0;line-height:1.8}
.wc-src{font-size:.8rem;color:var(--muted)}
.wc-d{margin:.3rem 0;border-top:1px dashed var(--line);padding-top:.3rem}
.wc-d summary{cursor:pointer;color:var(--gold-ink);font-size:.9rem;min-height:36px;display:flex;align-items:center}
.wc-d p{margin:.2rem 0 .4rem;line-height:1.8;white-space:pre-line}
.mw.rt{box-shadow:inset 0 -3px 0 var(--gold)}
.tj{font-family:inherit}
.tjk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem;margin-bottom:.6rem;font-size:.82rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.tjk b{color:var(--ink-strong)}
.tjk-f{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center}
.tjk-f span{color:var(--muted)}
.tjk-f i{font-style:normal;font-weight:700}
.bml{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.6rem;font-size:.85rem}
.bml b{color:var(--muted)}
.bml .chip{min-height:36px}
.lk-w{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.lk-h{font-size:.85rem;color:var(--muted);margin:.4rem 0}
.lk-r{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;padding:.5rem .3rem;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.lk-r:hover{background:var(--sel)}
.lk-k{font-size:.72rem;padding:.1rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-ink)}

/* ③: السور والموضوعات */
.view{margin:.6rem 0 1.5rem}
.sv-h{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.8rem}
.sv-h input{flex:1;min-width:200px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;padding:0 .8rem}
.modes{display:inline-flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border-radius:999px;background:color-mix(in srgb,var(--line) 45%,transparent)}
.modes button{min-height:40px;padding:0 .9rem;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.modes button.on{background:var(--card);color:var(--ink-strong);box-shadow:var(--sh)}
.sv-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}
.sv-c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem;position:relative}
.sv-n{position:absolute;top:.6rem;inset-inline-end:.8rem;font-family:var(--q);font-size:1.3rem;color:var(--gold-ink)}
.sv-c h3{margin:0 2.2rem .2rem 0;font-family:"NotoNaskh",serif;font-size:1.25rem;color:var(--ink-strong)}
.sv-m{font-size:.78rem;color:var(--muted)}
.sv-q{font-size:.9rem;line-height:1.7;margin:.4rem 0}
.sv-a{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.sv-a .chip{min-height:36px}
.sv-x{margin-top:.5rem;font-size:.9rem;line-height:1.7;border-top:1px dashed var(--line);padding-top:.4rem}
.sv-x ul{margin:.2rem 0;padding-inline-start:1.2rem}
.sv-x b{color:var(--gold-ink)}
.tp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}
.tp-cat{min-height:64px;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-align:start}
.tp-cat b{font-size:1.05rem;color:var(--ink-strong)}
.tp-cat span{font-size:.78rem;color:var(--muted)}
.tp-cat:hover{border-color:var(--gold)}
.tp-h{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem}
.tp-h input{flex:1;min-width:180px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;padding:0 .8rem}
#tp-tree details{border-inline-start:2px solid var(--line);margin:.15rem 0 .15rem .2rem;padding-inline-start:.6rem}
#tp-tree summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:.4rem;color:var(--ink-strong)}
#tp-tree summary:hover{color:var(--gold-ink)}
.tp-n{font-size:.75rem;color:var(--muted)}
.tp-refs{display:flex;flex-wrap:wrap;gap:.3rem;padding:.3rem 0 .5rem}
.ref{min-height:34px;padding:0 .6rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer}
.ref:hover{border-color:var(--gold);color:var(--gold-ink)}

/* ④: الكتب */
.bk-lv{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.6rem}
.bk-s{border:1px solid var(--line);border-radius:12px;margin:.4rem 0;padding:0 .8rem;background:var(--paper)}
.bk-s summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.bk-s summary b{color:var(--ink-strong)}
.bk-d{font-size:.75rem;color:var(--muted)}
.bk-e{border-top:1px solid var(--line);padding:.55rem 0}
.bk-e p{margin:.1rem 0;line-height:1.85;white-space:pre-line}
.chip:disabled{opacity:.4;cursor:default}