/* ═══ تُراث ═══ */
/* ═══ تُراث — لغةٌ بصرية: آلةُ قراءةٍ لا كرّاسة ═══
   الأصل داكن: أرضٌ شبه سوداء، وحوافُّ مضيئة تتدرّج من أعلى، وشبكةٌ تقنية
   خافتة، ولونٌ حادّ واحد (سماويّ) للفعل، والذهبي للتراث. الزوايا أضيق
   والخطوط أدقّ — الحدّة تُقرأ قوةً، والاستدارة تُقرأ ليونة. */
:root{
  --bg:#eef2f7; --bg2:#e2e8f0; --ink:#060a11;
  --ink2:#2a3543; --mut:#5a6779; --faint:#8b98a9;
  --hair:rgba(6,14,26,.13); --hair2:rgba(6,14,26,.26); --acc:#0072a8;
  --acc2:#0090d0; --accsoft:rgba(0,114,168,.10); --accink:#00587f;
  --acc-glow:rgba(0,114,168,.28); --amber:#8a6212; --ambersoft:rgba(138,98,18,.12);
  --ok:#0c6b48; --oksoft:rgba(12,107,72,.10); --warn:#8a5b00;
  --warnsoft:rgba(138,91,0,.11); --bad:#a32020; --badsoft:rgba(163,32,32,.09);
  --surf:rgba(255,255,255,.72); --surf2:rgba(255,255,255,.48); --panel:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  --panel2:linear-gradient(180deg,#fff,rgba(255,255,255,.86)); --edge:linear-gradient(180deg,rgba(255,255,255,1),rgba(6,14,26,.10) 34%,rgba(6,14,26,.13)); --edgeHot:linear-gradient(180deg,var(--acc),rgba(0,114,168,.25) 50%,rgba(0,114,168,.10));
  --sh:0 1px 2px rgba(10,20,35,.07),0 8px 22px -14px rgba(10,20,35,.35); --sh2:0 2px 6px rgba(10,20,35,.09),0 26px 60px -22px rgba(10,20,35,.4); --grid:rgba(6,20,40,.05);
  --gridN:rgba(6,20,40,.09); --halo1:rgba(0,114,168,.10); --halo2:rgba(90,60,200,.07);
  --halo3:rgba(138,98,18,.06);
  --r:11px;--r2:8px;--side:16.5rem;--rail:20.5rem;--measure:46rem;--max:92rem;
  color-scheme:light;
}
/* الليلي لا يُفرَض بتفضيل النظام: النهاري هو الأصل عند أوّل فتح،
   ولا يُنتقل إلى الليلي إلا باختيارٍ صريح يُحفظ في المتصفّح. */
:root[data-theme="dark"]{
  /* رمادٌ محايد.
     جُرِّب الأزرقُ النيونيّ فكان طابعَ الشاشات، ثم جُرِّب الحبرُ الدافئ
     والذهب فكانت مسحتُه البنّية ثقيلة. فالأرضُ الآن رمادٌ محايدٌ لا يميل
     إلى لون، والأسطحُ والحدودُ بياضٌ شفيف — وبهذا يبقى الرماد رمادًا ولا
     يكتسب مسحةً من تحته. والبِنيةُ هي بنيةُ الوضع الفاتح نفسها: أرضٌ
     محايدة، ولونٌ دالٌّ هادئ لما يُنقر عليه، وذهبٌ خفيضٌ للعناوين. */
  --bg:#17191c; --bg2:#1c1f23; --ink:#e9eaec;
  --ink2:#b9bcc1; --mut:#8d9298; --faint:#787d83;
  --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.20); --acc:#7cb4d6;
  --acc2:#9dcbe6; --accsoft:rgba(124,180,214,.13); --accink:#a5cfe8;
  --acc-glow:rgba(124,180,214,.14); --amber:#c9a86a; --ambersoft:rgba(201,168,106,.13);
  --ok:#6fbf94; --oksoft:rgba(111,191,148,.13); --warn:#d9a05f;
  --warnsoft:rgba(217,160,95,.13); --bad:#dd8585; --badsoft:rgba(221,133,133,.13);
  --surf:rgba(255,255,255,.045); --surf2:rgba(255,255,255,.028);
  --panel:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.016));
  --panel2:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.032));
  --edge:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.055) 34%,rgba(255,255,255,.02));
  --edgeHot:linear-gradient(180deg,var(--acc),rgba(124,180,214,.18) 50%,rgba(124,180,214,.05));
  --sh:0 1px 0 rgba(0,0,0,.45),0 8px 26px -12px rgba(0,0,0,.85);
  --sh2:0 2px 0 rgba(0,0,0,.45),0 28px 70px -20px rgba(0,0,0,.9);
  --grid:rgba(255,255,255,.038); --gridN:rgba(255,255,255,.085);
  --halo1:rgba(124,180,214,.07); --halo2:rgba(255,255,255,.035);
  --halo3:rgba(201,168,106,.045);
  color-scheme:dark;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);direction:rtl;font-size:17.5px;line-height:1.95;
  font-family:"Noto Naskh Arabic",serif;position:relative;min-height:100vh}
/* هالاتٌ ضوئية كبيرة: تعطي العمق ويقع عليها انكسار الحواف */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 50% -12%,var(--halo1),transparent 68%),
    radial-gradient(46rem 32rem at 96% 8%,var(--halo2),transparent 70%),
    radial-gradient(40rem 28rem at 2% 22%,var(--halo3),transparent 70%),
    linear-gradient(180deg,var(--bg2),transparent 40rem)}
/* شبكةٌ دقيقة — تُقرأ أداةً مضبوطة، لا زخرفة */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 42%,transparent 88%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 42%,transparent 88%)}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
::selection{background:var(--ambersoft)}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
.amiri{font-family:"Amiri",serif}
.num{font-variant-numeric:tabular-nums}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 var(--accsoft)}
.navin{max-width:var(--max);margin:0 auto;padding:.75rem 1.6rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.5rem;font-family:"Reem Kufi",serif;font-size:1.4rem;
  font-weight:700;color:var(--ink);letter-spacing:-.02em}
.brand svg{width:1.5rem;height:1.5rem;color:var(--amber)}
.navl{display:flex;align-items:center;gap:.15rem}
.navl a{color:var(--mut);font-size:.92rem;padding:.45rem .85rem;border-radius:9px;transition:.15s}
.navl a{position:relative}
.navl a:hover{color:var(--ink);background:var(--surf)}
.navl a.on{color:var(--acc);background:var(--accsoft)}
.navl a.on::after{content:"";position:absolute;inset-inline:.85rem;bottom:-.78rem;height:2px;
  background:var(--acc);box-shadow:0 0 10px var(--acc-glow);border-radius:2px}
.tgl,.menu{width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1px solid var(--hair);
  border-radius:9px;background:var(--surf)}
.tgl svg,.menu svg{width:1.05rem;height:1.05rem;color:var(--amber)}
.tgl .moon{display:none}
:root[data-theme="dark"] .tgl .sun{display:none}:root[data-theme="dark"] .tgl .moon{display:block}
.menu{display:none}


/* الترويسة على الشاشات الضيّقة: الاسم وأربعة روابط ومفتاحان لا تسع ٤٢٠ بكسل،
   فيُدفع المفتاح خارج الحافة ويظهر تمريرٌ أفقي. تُضغط المقاسات وتُسمح بالالتفاف. */
@media(max-width:44rem){
  .navin{padding:.55rem .85rem;gap:.4rem;flex-wrap:wrap}
  .brand{font-size:1.15rem;gap:.35rem}
  .brand svg{width:1.2rem;height:1.2rem}
  .navl{gap:.08rem;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .navl a{padding:.38rem .5rem;font-size:.82rem;white-space:nowrap}
  .navl a.on::after{inset-inline:.5rem;bottom:-.3rem}
  .tgl,.menu{width:1.95rem;height:1.95rem;flex:0 0 auto}
  .tgl svg,.menu svg{width:.95rem;height:.95rem}
}

/* shell */
.shell{max-width:var(--max);margin:0 auto;padding:1.5rem 1.6rem 5rem;display:grid;overflow-x:clip;
  grid-template-columns:var(--side) minmax(0,1fr);gap:2rem;align-items:start}
.side{position:sticky;top:4.7rem;max-height:calc(100vh - 6.4rem);overflow:auto;display:flex;
  flex-direction:column;gap:.7rem;padding-inline-end:.3rem}
.side h4{font-size:.7rem;letter-spacing:.2em;color:var(--amber);font-weight:700;padding:0 .4rem}
.side .lst{display:flex;flex-direction:column;gap:.1rem}
.side .lst a{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:10px;
  font-size:.9rem;color:var(--ink2);transition:.15s;border:1px solid transparent}
.side .lst a:hover{background:var(--surf)}
.side .lst a.on{background:var(--accsoft);color:var(--accink);font-weight:600;position:relative}
.side .lst a.on::before{content:"";position:absolute;inset-inline-start:0;top:.35rem;bottom:.35rem;
  width:2px;background:var(--acc);box-shadow:0 0 9px var(--acc-glow);border-radius:2px}
.side .lst a .n{min-width:1.6rem;font-size:.7rem;color:var(--faint);font-variant-numeric:tabular-nums}
.side .lst a b{font-weight:inherit;font-family:"Amiri",serif;font-size:1.05rem}
.side .lst a .side-n{margin-inline-start:auto;font-size:.7rem;color:var(--faint);font-variant-numeric:tabular-nums}
.main{min-width:0;display:flex;flex-direction:column;gap:1.9rem}

/* عمودان للقراءة: المتن في عرضٍ مقروء، والسياق في رفٍّ جانبي يملأ ما كان فراغًا */
.dual{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:1.6rem;align-items:start}
.dcol{min-width:0;display:flex;flex-direction:column;gap:1.5rem}
.rail{position:sticky;top:4.9rem;display:flex;flex-direction:column;gap:.85rem}
@media(max-width:74rem){.dual{grid-template-columns:1fr}.rail{position:static}}
/* بطاقة الرفّ */
.rc{border-radius:15px;padding:1.15rem 1.25rem}
.rc h4{font-size:.7rem;letter-spacing:.2em;color:var(--amber);font-weight:700;margin:0 0 .7rem}
.rc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem .9rem;align-items:baseline}
.rc dt{font-size:.8rem;color:var(--faint);white-space:nowrap}
.rc dd{margin:0;font-size:.92rem;color:var(--ink2);font-weight:600;text-align:end;
  font-variant-numeric:tabular-nums}
.rc .lnk{display:flex;flex-direction:column;gap:.15rem}
.rc .lnk a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .6rem;
  border-radius:9px;font-size:.9rem;color:var(--ink2);transition:.15s}
.rc .lnk a:hover{background:var(--accsoft);color:var(--accink)}
.rc .lnk a .n{font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.rc p{margin:0;font-size:.88rem;color:var(--mut);line-height:1.9}
@media(max-width:72rem){.shell{grid-template-columns:1fr;padding:1.1rem 1rem 4rem;gap:1.2rem}
  .side{position:static;max-height:none;display:none}.side.open{display:flex}.menu{display:grid}}

/* surfaces — لوحٌ داكن بحافّةٍ مضيئة تتدرّج من أعلى.
   الحافّة رسمٌ مستقلّ (::after مع mask-composite) لأن border عاديًّا لا يقبل تدرّجًا. */
.glass,.pane,.cell,.scard,.tile,.grp,.hit,.sbox,.srcbtn,.act,.chip,.sect .more,
.pager>a,.pager>span:not(.mid),.warn,dialog.srcdlg,.rc,.bk,.hn,.nm2{
  position:relative;background:var(--panel);border:0;border-radius:var(--r2);
  box-shadow:var(--sh)}
.glass::after,.pane::after,.cell::after,.scard::after,.tile::after,.grp::after,.hit::after,
.sbox::after,.srcbtn::after,.act::after,.chip::after,.pager>a::after,
.pager>span:not(.mid)::after,.warn::after,dialog.srcdlg::after,.rc::after,.bk::after,
.hn::after,.nm2::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
/* عند اللمس: تشتعل الحافّة ويظهر وهجٌ خارجي */
a.cell:hover::after,a.scard:hover::after,.tile:hover::after,.hit:hover::after,
.act:hover::after,.srcbtn:hover::after,.chip:hover::after,.pager>a:hover::after,
.sect .more:hover::after,.bk:hover::after,.hn:hover::after,a.nm2:hover::after,
.sbox:focus-within::after{background:var(--edgeHot)}
a.cell:hover,a.scard:hover,.tile:hover,.hit:hover,.act:hover,.srcbtn:hover,
.pager>a:hover,.bk:hover,.hn:hover,a.nm2:hover{
  box-shadow:var(--sh),0 0 22px -8px var(--acc-glow)}
.sbox:focus-within{box-shadow:var(--sh),0 0 0 3px var(--accsoft),0 0 26px -8px var(--acc-glow)}
.measure{max-width:var(--measure)}
.pane{border-radius:var(--r)}
.pane::after{border-radius:var(--r)}
/* عرض القراءة — السطر الطويل لا يُقرأ */
.measure{max-width:var(--measure)}
.pad{padding:1.7rem 1.9rem}
.hero{position:relative;padding:2.6rem 0 .6rem}
.hero .ey{font-size:.72rem;letter-spacing:.3em;color:var(--amber);font-weight:700}
.hero h1{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:clamp(3rem,8.5vw,5.4rem);line-height:.96;
  margin:.5rem 0 0;
  background:linear-gradient(150deg,var(--ink),var(--acc) 130%);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .sub{font-family:"Amiri",serif;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.95;
  color:var(--ink2);max-width:46rem;margin:.9rem 0 0}
.ph{padding:.2rem 0 .1rem}
.ph .k{font-size:.68rem;letter-spacing:.26em;color:var(--acc);font-weight:700;
  text-transform:uppercase}
.ph h1{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:clamp(1.9rem,4.2vw,2.8rem);
  margin:.35rem 0 .3rem;background:linear-gradient(170deg,var(--ink) 42%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ph .m{font-size:.92rem;color:var(--mut);font-variant-numeric:tabular-nums}
.crumb{font-size:.84rem;color:var(--mut);display:flex;gap:.35rem;flex-wrap:wrap}
.sep{color:var(--hair2);margin:0 .35rem}
.sh{display:flex;align-items:center;gap:.7rem}
.sh h2{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.2rem;color:var(--ink)}
.sh .ln{flex:1;height:1px;background:var(--hair)}
.sh .cnt{font-size:.75rem;color:var(--mut);border:1px solid var(--hair);border-radius:14px;
  padding:.1rem .6rem;font-variant-numeric:tabular-nums}

/* شبكات عامة — كانت .grid/.g2 مستعملة في الترميز وغير معرَّفة هنا،
   فبقيت روابطها عناصر سطريّة متراكبة */
.grid{display:grid;gap:.9rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:60rem){.g2,.g3{grid-template-columns:1fr}}

/* bento */
.bento{display:grid;gap:.9rem;grid-template-columns:repeat(6,1fr)}
.b3{grid-column:span 3}.b2{grid-column:span 2}.b6{grid-column:span 6}
@media(max-width:60rem){.b3,.b2{grid-column:span 6}}
.cell{display:block;border-radius:var(--r);padding:1.5rem 1.6rem;transition:.2s;position:relative;overflow:hidden}
a.cell:hover{border-color:var(--hair2);background:var(--surf2);transform:translateY(-2px);box-shadow:var(--sh2)}
.cell h3{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.35rem;margin-bottom:.3rem}
.cell p{margin:0;color:var(--mut);font-size:.98rem;line-height:1.85}
.cell .k{font-size:.68rem;letter-spacing:.22em;color:var(--acc);font-weight:700;margin-bottom:.5rem}
.cell .big{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:2.6rem;line-height:1.1;color:var(--acc);
  font-variant-numeric:tabular-nums;}
.cell .ic{width:1.9rem;height:1.9rem;color:var(--amber);margin-bottom:.6rem}
.cell .meta{margin-top:.8rem;font-size:.84rem;color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums}

/* lists */
.tiles{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.tile{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:13px;transition:.16s}
.tile:hover{border-color:var(--hair2);background:var(--surf2);transform:translateY(-1px)}
.tile .n{width:2rem;height:2rem;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;
  background:var(--ambersoft);color:var(--amber);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.tile .t{flex:1;min-width:0}
.tile .t b{display:block;font-family:"Amiri",serif;font-size:1.22rem;font-weight:400;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t span{font-size:.74rem;color:var(--faint)}
.tile.wrap .t b{white-space:normal;overflow:visible;font-size:1.08rem;line-height:1.55}
.tile.wrap{align-items:flex-start}

/* text */
.ayah{padding:2.8rem 2.2rem;text-align:center;font-family:"Amiri",serif;
  font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:2.3;color:var(--ink);
  background:var(--panel2)}
.ayah>span.tx{display:block;max-width:38rem;margin:0 auto}
.ayah .an{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--amber);
  border-radius:50%;color:var(--amber);font-family:"Noto Naskh Arabic",serif;font-size:.9rem;
  font-weight:700;margin-inline-start:.6rem;vertical-align:middle}
.para{margin:0 0 1.5rem;font-family:"Amiri",serif;font-size:1.5rem;line-height:2.45;color:var(--ink);
  text-align:justify;max-width:var(--measure)}
.para:last-child{margin-bottom:0}
.matn{font-family:"Amiri",serif;font-size:1.6rem;line-height:2.4;color:var(--ink);
  padding:2rem 2.1rem;background:var(--panel2)}
.matn::before{content:"";position:absolute;inset-inline-start:0;top:1rem;bottom:1rem;width:2px;
  background:linear-gradient(180deg,var(--acc),transparent);
  border-radius:2px;z-index:1}
.matn>span{display:block;max-width:var(--measure)}
.full{font-family:"Amiri",serif;font-size:1.42rem;line-height:2.4;color:var(--ink2);padding:1.9rem 2rem}
.full>span{display:block;max-width:var(--measure)}

/* grade */
.gband{display:flex;align-items:flex-start;gap:1.2rem;flex-wrap:wrap;padding:1.4rem 1.6rem}
.gbig{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.7rem;padding:.42rem 1.3rem;
  border-radius:var(--r2);position:relative}
/* حدُّ الدرجة حلقةٌ لا هالة: كانت هذه الألوان مكتوبةً نصًّا بقيم الوضع
   الداكن القديم، فلا تتبدّل بالوضع، وتُخرج توهّجًا حول «صحيح» طابعُه
   الشاشاتُ لا الورق. فصارت من الرموز، وبلا هالةٍ خارجية. */
.gbig.ok{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 38%,transparent)}
.gbig.mid{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 38%,transparent)}
.gbig.bad{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 38%,transparent)}
.gbig.ok{background:var(--oksoft);color:var(--ok)}.gbig.mid{background:var(--warnsoft);color:var(--warn)}
.gbig.bad{background:var(--badsoft);color:var(--bad)}.gbig.na{background:var(--surf2);color:var(--mut)}
.gdef{flex:1;min-width:14rem;max-width:34rem;font-size:.95rem;color:var(--mut);line-height:1.95}
.g{display:inline-block;border-radius:13px;padding:.15rem .65rem;font-size:.85rem;font-weight:600}
.g.ok{background:var(--oksoft);color:var(--ok)}.g.mid{background:var(--warnsoft);color:var(--warn)}
.g.bad{background:var(--badsoft);color:var(--bad)}.g.na{background:var(--surf2);color:var(--mut)}
.tag{font-size:.76rem;border-radius:13px;padding:.14rem .6rem;background:var(--surf2);color:var(--mut);
  border:1px solid var(--hair)}
.tag.c{background:var(--accsoft);color:var(--accink)}

/* tabs */
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:.75rem;
  margin-top:.4rem}
.tab{padding:.55rem 1.05rem;border-radius:11px;font-size:.94rem;font-weight:600;color:var(--mut);
  border:1px solid transparent;transition:.15s}
.tab:hover{color:var(--ink);background:var(--surf)}
.tab[aria-selected="true"]{background:var(--accsoft);color:var(--acc);position:relative;
  box-shadow:inset 0 0 0 1px var(--hair2)}
.tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:.9rem;bottom:-.78rem;
  height:2px;background:var(--acc);box-shadow:0 0 10px var(--acc-glow);border-radius:2px}
.tab .c{font-size:.74rem;opacity:.75;margin-inline-start:.3rem;font-variant-numeric:tabular-nums}
.panel{display:none}.panel.on{display:flex;flex-direction:column;gap:1.2rem}

.tab .tl{display:inline}.tab .ts{display:none}

/* التبويبات على الشاشات الضيّقة.
   لا تُمرَّر: خمسةٌ التفّت أوّلًا إلى سطرين فوقع خطّ المختار بينهما، ثم
   صُيِّرت سطرًا يُمرَّر فغاب «الشرح» عن الشاشة ولا شيء يدلّ على أنّه وراءها.
   وأيّ إخفاءٍ يحتاج إلى دليلٍ على نفسه فهو عيب. فصارت شبكةً من خمسة أعمدة
   متساوية تسع الشاشة كلَّها، ويُقصَّر لفظ «النصّ كاملًا» ليتّسع. */
@media(max-width:52rem){
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;
    overflow:visible;padding-bottom:.7rem}
  .tab{padding:.5rem .18rem;font-size:.81rem;min-width:0;white-space:nowrap;
    display:flex;align-items:center;justify-content:center}
  .tab .c{font-size:.68rem;margin-inline-start:.18rem}
  .tab .tl{display:none}.tab .ts{display:inline}
  .tab[aria-selected="true"]::after{inset-inline:.3rem;bottom:-.73rem}
}
@media(max-width:23rem){
  .tab{font-size:.73rem;padding:.5rem .1rem}
  .tab .c{display:none}
}

/* chain */
.node{display:flex;align-items:flex-start;gap:.95rem;position:relative}
.node .dot{width:2rem;height:2rem;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accsoft);color:var(--accink);font-size:.8rem;font-weight:700;z-index:1;
  border:1px solid var(--hair);font-variant-numeric:tabular-nums}
.node .nm{flex:1;padding-bottom:1.15rem;min-width:0;display:flex;align-items:baseline;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.node .nm a{font-family:"Amiri",serif;font-size:1.3rem;color:var(--ink)}
.node .nm a:hover{color:var(--acc)}
/* الوصف على الطرف المقابل، فلا يبقى نصف الصفّ فارغًا */
.node .sub{font-size:.82rem;color:var(--mut);text-align:end;flex:0 1 auto}
.node .rl{font-size:.7rem;letter-spacing:.14em;color:var(--amber);font-weight:700;display:block;
  margin-bottom:.1rem}
.node:not(:last-child)::before{content:"";position:absolute;top:2.05rem;bottom:-.05rem;right:.97rem;
  width:1px;background:var(--hair2)}
.node.last .dot{background:var(--ambersoft);color:var(--amber)}

/* misc */
table.t{width:100%;border-collapse:collapse}
table.t th,table.t td{text-align:right;padding:.85rem 1.4rem;font-size:1rem;border-bottom:1px solid var(--hair)}
table.t th{color:var(--mut);font-size:.8rem;font-weight:600}
table.t tr:last-child td{border-bottom:0}
table.t td:first-child{font-weight:600;white-space:nowrap}
.msg{padding:1.5rem;text-align:center;color:var(--mut);font-size:.98rem}
.note{font-size:.83rem;color:var(--faint);line-height:1.9;padding:0 .2rem}
.warn{border-radius:13px;padding:1rem 1.2rem;font-size:.92rem;color:var(--warn);line-height:1.9;
  background:linear-gradient(158deg,var(--warnsoft),transparent)}
.spin{display:inline-block;width:1rem;height:1rem;border:2px solid var(--hair2);border-top-color:var(--acc);
  border-radius:50%;animation:sp .8s linear infinite;vertical-align:-.15rem}
@keyframes sp{to{transform:rotate(360deg)}}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;max-width:40rem}
.pager>:first-child{justify-self:start}.pager>:last-child{justify-self:end}
.pager>a,.pager>span{border-radius:11px;padding:.65rem 1.15rem;font-size:.92rem;
  font-weight:600;color:var(--acc);min-width:6.5rem;text-align:center}
.pager>a:hover{border-color:var(--acc)}
.pager .off{opacity:.3;color:var(--faint);font-weight:400}
.pager .mid{border:0;background:none;box-shadow:none;color:var(--mut);font-weight:400;font-size:.87rem;
  font-variant-numeric:tabular-nums;-webkit-backdrop-filter:none;backdrop-filter:none}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.acts+.pager{margin-top:1.5rem}
.pager+.acts{margin-top:1.5rem}
.act{display:inline-flex;align-items:center;gap:.4rem;border-radius:11px;
  padding:.65rem 1.15rem;font-size:.9rem;font-weight:600;color:var(--acc)}
.act:hover{border-color:var(--acc)}
/* search */
.sbox{display:flex;align-items:center;gap:.75rem;border-radius:15px;padding:1.05rem 1.35rem;transition:.2s}
.sbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px var(--accsoft)}
.sbox svg{width:1.2rem;height:1.2rem;color:var(--mut);flex:0 0 auto}
.sbox input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:1.08rem;color:var(--ink);min-width:0}
.sbox input::placeholder{color:var(--faint)}
.sbox kbd{font-size:.7rem;color:var(--faint);border:1px solid var(--hair);border-radius:5px;padding:.08rem .35rem}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem}
.chips[hidden]{display:none}
.chips.sub{margin-top:.5rem;padding-top:.55rem;border-top:1px dashed var(--hair)}
.chips.sub .chip{font-size:.79rem;padding:.3rem .8rem}
.ayahit .tx{font-size:1.5rem;line-height:2.25;color:var(--ink)}
.chip{font-size:.83rem;padding:.4rem .95rem;border-radius:18px;color:var(--mut);transition:.15s}
.chip:hover{color:var(--ink);border-color:var(--hair2)}
.chip[aria-pressed="true"]{background:var(--accsoft);color:var(--acc);font-weight:600}
.chip[aria-pressed="true"]::after{background:var(--edgeHot)}
.sres{margin-top:1rem}
.sstat{font-size:.86rem;color:var(--mut);padding:.4rem .1rem;display:flex;align-items:center;gap:.6rem}
.bar{height:2px;background:var(--hair);border-radius:2px;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--acc);width:0;transition:width .25s}
.grp{border-radius:var(--r);margin-bottom:.85rem;overflow:hidden}
.grp-t{padding:1.3rem 1.5rem;font-family:"Amiri",serif;font-size:1.34rem;line-height:2.15;color:var(--ink)}
.grp-t mark{background:var(--ambersoft);color:var(--ink);border-radius:4px;padding:0 .2rem}
.grp-b{display:flex;gap:.45rem;flex-wrap:wrap;padding:.9rem 1.5rem;border-top:1px solid var(--hair)}
.bchip{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;border:1px solid var(--hair);
  border-radius:18px;padding:.35rem .9rem;color:var(--ink);transition:.15s}
.bchip:hover{border-color:var(--acc);color:var(--acc)}
.bchip .n{color:var(--mut);font-variant-numeric:tabular-nums}
/* ── بطاقة الموضع بدليله ──
   القارئ لا يستطيع أن يحكم على موضعٍ سيق إليه مجرَّدًا. فيُقدَّم الدليل على
   النصّ: ما اقتُبس من المتن، وتحت أيّ باب وقع. واللون يُلخّص ولا يُغني عنه. */
.evlead{color:var(--mut);line-height:1.95;margin:0 0 1rem;max-width:var(--measure)}
.ev{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);
  padding:1.05rem 1.2rem;margin-bottom:.85rem;position:relative;overflow:hidden}
.ev::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--evc)}
.ev{--evc:var(--hair)}
.ev-sure{--evc:var(--ok)}
.ev-strong{--evc:var(--acc)}
.ev-bab{--evc:var(--amber)}
.ev-weak{--evc:var(--faint)}
.evh{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.65rem}
.evb{font-size:.76rem;font-weight:700;letter-spacing:.01em;padding:.24rem .68rem;border-radius:999px;
  color:var(--evc);background:color-mix(in srgb,var(--evc) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--evc) 34%,transparent)}
.evp{font-size:.78rem;color:var(--faint);margin-inline-start:auto}
.evw{list-style:none;margin:0 0 .85rem;padding:0;display:grid;gap:.4rem}
.evw li{font-size:.87rem;line-height:1.85;color:var(--mut);padding-inline-start:1.5rem;position:relative}
.evw li::before{position:absolute;inset-inline-start:0;top:0;font-weight:700;font-size:.9rem}
.evw li.ok::before{content:"✓";color:var(--ok)}
.evw li.mid::before{content:"•";color:var(--faint)}
.evw li.no::before{content:"✕";color:var(--faint)}
.evw .wc{font-size:.75rem;color:var(--faint)}
.evt{font-family:"Amiri",serif;font-size:1.24rem;line-height:2.05;color:var(--ink2);
  border-top:1px solid var(--hair);padding-top:.85rem}
.evgo{display:inline-block;margin-top:.85rem;font-size:.85rem;font-weight:600;color:var(--acc)}
.evgo:hover{text-decoration:underline}
.ev mark{background:color-mix(in srgb,var(--acc) 20%,transparent);color:inherit;border-radius:3px;padding:0 .12em}
.hit{display:block;border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:.6rem;transition:.16s}
.hit:hover{border-color:var(--acc)}
.hit .m{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--faint);margin-bottom:.4rem}
.hit .tx{font-family:"Amiri",serif;font-size:1.25rem;line-height:2.05;color:var(--ink2)}
/* footer */
.foot{border-top:1px solid var(--hair);padding:2.2rem 0 1rem;text-align:center;margin-top:1rem}
.foot p{font-size:.85rem;color:var(--faint);line-height:2;margin:1rem 0 0}
.srcbtn{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;
  padding:.75rem 1.6rem;font-size:.95rem;font-weight:600;color:var(--ink)}
.srcbtn:hover{border-color:var(--amber);color:var(--amber)}
.srcbtn svg{width:1rem;height:1rem;color:var(--amber)}
dialog.srcdlg{border-radius:var(--r);padding:0;max-width:40rem;
  width:calc(100% - 2rem);color:var(--ink);box-shadow:var(--sh2);background:var(--bg2)}
dialog.srcdlg::backdrop{background:rgba(5,4,2,.6);backdrop-filter:blur(5px)}
.srcdlg .hd{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--hair)}
.srcdlg .hd b{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.25rem}
.srcdlg .bd{padding:1.1rem 1.5rem;max-height:62vh;overflow:auto}
.srcdlg .it{padding:.95rem 0;border-bottom:1px solid var(--hair)}
.srcdlg .it:last-child{border-bottom:0}
.srcdlg .it b{display:block;font-size:1.02rem}
.srcdlg .it span{display:block;font-size:.88rem;color:var(--mut);line-height:1.85;margin:.15rem 0}
.x{font-size:1.5rem;color:var(--mut);padding:.15rem .45rem;border-radius:8px}
.x:hover{background:var(--surf);color:var(--ink)}
@media(max-width:34rem){body{font-size:16px}.para,.full{font-size:1.3rem}.matn{font-size:1.34rem;padding:1.3rem 1.2rem}
  .pad{padding:1.2rem 1.1rem}.ayah{padding:1.7rem 1.1rem}}


/* بطاقة كتاب: العنوان والعدد على طرفَي السطر، ثم المؤلف والنبذة —
   فلا يبقى ثلثا البطاقة بياضًا كما كان */
.cell.card{display:flex;flex-direction:column;gap:.45rem;padding:1.7rem 1.8rem}
.cell.card .ch{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem}
.cell.card .cn{display:flex;align-items:baseline;gap:.35rem;font-family:"Noto Naskh Arabic",serif;font-weight:700;
  font-size:1.5rem;color:var(--acc);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cell.card .cn small{font-family:"Noto Naskh Arabic",serif;font-weight:500;font-size:.72rem;
  color:var(--faint);letter-spacing:0}
.cell.card .au{color:var(--amber);font-size:.88rem;font-weight:600}
.cell.card .meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--hair);color:var(--ink2)}
.cell.card .go{color:var(--acc);font-weight:600}
a.cell.card:hover .go{color:var(--acc2)}

/* قراءة الشروح */
.shh{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.15rem;color:var(--amber);
  margin:2rem 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair);max-width:var(--measure)}
.prose .para.here{background:var(--ambersoft);border-radius:10px;
  box-shadow:0 0 0 .7rem var(--ambersoft)}

/* سجلّ الترجمة: مصطلحٌ وقيمة على طرفَي سطرٍ محدود العرض */
.facts{max-width:44rem;display:flex;flex-direction:column}
.fr{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding:.75rem 0;border-bottom:1px solid var(--hair)}
.fr:last-child{border-bottom:0}
.fk{font-size:.85rem;color:var(--faint);white-space:nowrap}
.fv{font-size:1.02rem;color:var(--ink2);font-weight:600;text-align:end}
/* صناديق كتب الراوي، ثم أرقام أحاديثه في الكتاب المختار */
.bks{gap:.7rem;margin-bottom:.4rem}
.bk{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;
  border-radius:var(--r2);transition:.16s}
.bk:hover{border-color:var(--acc)}
.bk.on{border-color:var(--acc);background:var(--accsoft);box-shadow:none}
.bk .bn{font-family:"Amiri",serif;font-size:1.2rem;color:var(--ink);line-height:1.4}
.bk .bc{display:flex;align-items:baseline;gap:.3rem;font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.35rem;
  color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk .bc small{font-family:"Noto Naskh Arabic",serif;font-weight:500;font-size:.68rem;color:var(--faint);letter-spacing:0}
.nums{display:flex;flex-wrap:wrap;gap:.4rem}
.hn{min-width:3.4rem;text-align:center;padding:.42rem .6rem;border-radius:10px;
  border:1px solid var(--hair);color:var(--ink2);font-size:.92rem;font-variant-numeric:tabular-nums;
  background:var(--surf2);transition:.14s}
.hn:hover{border-color:var(--acc);color:var(--acc);background:var(--accsoft)}
.sh a.tag{white-space:nowrap}

/* أسماء الشيوخ والتلاميذ */
.names{display:flex;flex-wrap:wrap;gap:.4rem}
.nm2{font-family:"Amiri",serif;font-size:1.14rem;padding:.3rem .8rem;border-radius:11px;
  border:1px solid var(--hair);color:var(--ink);transition:.15s;background:var(--surf2)}
a.nm2:hover{border-color:var(--acc);color:var(--acc)}
.nm2.off{color:var(--mut);font-family:inherit;font-size:.9rem;direction:ltr}

/* نثر التفسير: فقرات متباعدة داخل عرضٍ مقروء */
.prose{padding:2rem 2.2rem}
.prose .para{max-width:none}
.rc .lnk a.on{background:var(--accsoft);color:var(--accink);font-weight:600}

/* ═══ الصفحة الرئيسية ═══ */
.home{max-width:var(--max);margin:0 auto;padding:0 1.6rem 5rem;overflow-x:clip}
.band{padding:4.6rem 0;position:relative}
/* الفاصل: خطٌّ يتلاشى طرفاه بدل مسطرةٍ مبتورة الطرفين */
.band::after{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--hair);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent)}
.band:first-of-type::after{display:none}
/* التظليل: هالةٌ تخفت عند أطرافها الأربعة — لا مستطيل له حافّتان حادّتان */
.band-tint::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg2),transparent 76%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.center{text-align:center}
/* البطل */
.mast{padding:5rem 0 3.4rem;text-align:center;position:relative}
/* أفقٌ مضيء يفصل الترويسة عمّا تحتها — يُقرأ حدًّا لا فراغًا */
.mast::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair2) 18%,var(--acc) 50%,var(--hair2) 82%,transparent);
  box-shadow:0 0 18px -2px var(--acc-glow)}
.mast .mark{width:4.2rem;height:4.2rem;color:var(--amber);margin:0 auto .9rem;display:block}
/* مع background-clip:text لا يُطلى إلا ما وقع داخل صندوق العنصر، وارتفاعُ
   الصندوق هو line-height. فسطرٌ أقصر من قياس الخطّ يقطع ما علا الحرف —
   وكانت ضمّة «تُراث» تُقصّ من أعلاها. فيُفسَح للسطر ولما فوقه. */
.mast h1{font-family:"Reem Kufi",serif;font-size:clamp(4.6rem,14vw,9rem);line-height:1.24;
  padding-top:.1em;letter-spacing:-.05em;margin:0;
  background:linear-gradient(168deg,var(--ink) 32%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px var(--acc-glow))}
.mast .lede{font-family:"Amiri",serif;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--mut);
  margin:.7rem auto 0;max-width:40rem;line-height:1.9}
.mast .search{max-width:44rem;margin:2.2rem auto 0}
.mast .chips{justify-content:center}
/* اختصارات الأقسام تحت شريط البحث */
/* اختصاراتُ الأقسام: الاسمُ والعددُ وحدهما لا يدلّان على ما في القسم،
   فيُقال مع كلٍّ ما يجده القارئ فيه. وهي ستٌّ، فثلاثةُ أعمدةٍ تُخرج
   صفّين متساويين لا كسرَ فيهما — وكان قبلها خمسًا فاحتيج إلى مدٍّ
   يفاوت بين البطاقات. */
.jump{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.7rem auto 0;max-width:62rem;text-align:start}
@media(max-width:64rem){.jump{grid-template-columns:repeat(2,1fr)}}
@media(max-width:34rem){.jump{grid-template-columns:1fr}}
.jmp{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" ". d";
  gap:.15rem .7rem;padding:1rem 1.1rem;align-content:start;
  border-radius:var(--r2);position:relative;background:var(--panel);box-shadow:var(--sh);
  color:var(--ink);transition:.16s}
.jmp::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.jmp:hover::after{background:var(--edgeHot)}
.jmp:hover{box-shadow:var(--sh),0 0 22px -8px var(--acc-glow)}
.jmp:hover .ji{color:var(--acc)}
.ji{grid-area:i;width:1.45rem;height:1.45rem;color:var(--faint);transition:.16s;margin-top:.12rem}
.jt{grid-area:t;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;min-width:0}
.jmp b{font-size:1.02rem;font-weight:700;line-height:1.5}
.jn{font-size:.74rem;color:var(--acc);font-weight:600;font-variant-numeric:tabular-nums;
  padding:.1rem .5rem;border-radius:999px;background:var(--accsoft);white-space:nowrap}
.jd{grid-area:d;font-size:.8rem;line-height:1.8;color:var(--faint)}

/* أرقام بلا صناديق */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem;margin:3.4rem auto 0;max-width:58rem}
@media(max-width:46rem){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{text-align:center}
.fig b{display:block;font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:clamp(2.4rem,4.4vw,3.4rem);
  line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--ink),var(--acc));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.fig{position:relative;padding-top:1.1rem}
.fig::before{content:"";position:absolute;top:0;inset-inline:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair2),transparent)}
.fig .lb{display:block;font-size:.9rem;color:var(--ink2);margin-top:.5rem;font-weight:600;
  letter-spacing:.02em}
.fig .sub{display:block;font-size:.8rem;color:var(--faint);margin-top:.1rem}
/* عنوان قسم */
.sect{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:1.6rem}
.sect .l{max-width:44rem}
.sect .k{font-size:.68rem;letter-spacing:.28em;color:var(--acc);font-weight:700;
  display:inline-flex;align-items:center;gap:.55rem}
.sect .k::before{content:"";width:1.6rem;height:1px;background:var(--acc);
  box-shadow:0 0 8px var(--acc-glow)}
.sect h2{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.6rem);
  margin:.4rem 0 0;background:linear-gradient(170deg,var(--ink) 42%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sect p{color:var(--mut);font-size:1.02rem;line-height:1.9;margin:.6rem 0 0}
/* زرُّ القسم: كان رابطًا باهتًا يُقرأ خيارًا لا دعوة. فصار مطليًّا بلون
   القسم، فيه سطران: ما يفعله، وما يجده وراءه — فالعددُ يدعو والاسمُ وحده
   لا يدعو. وسهمُه يتقدّم عند اللمس. */
.sect .more{font-family:"Noto Naskh Arabic",serif;border-radius:var(--r);border:0;
  padding:.8rem 1.1rem .8rem 1.5rem;background:var(--acc);color:var(--bg);
  box-shadow:0 3px 16px -6px var(--acc-glow);white-space:nowrap;
  display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:.1rem .8rem;
  transition:.16s}
.sect .more .ml{grid-column:1;font-size:1.08rem;font-weight:800;line-height:1.4}
.sect .more .md{grid-column:1;font-size:.78rem;font-weight:600;opacity:.72;line-height:1.5;
  font-variant-numeric:tabular-nums}
.sect .more::after{content:"←";grid-column:2;grid-row:1/3;font-size:1.5rem;font-weight:400;
  opacity:.8;transition:transform .16s}
.sect .more:hover{background:var(--acc2);box-shadow:0 8px 26px -8px var(--acc-glow);
  transform:translateY(-2px)}
.sect .more:hover::after{transform:translateX(-.3rem);opacity:1}
@media(max-width:52rem){
  .sect .more{width:100%;justify-content:space-between;grid-template-columns:1fr auto;
    padding:.85rem 1.2rem}
}
/* شريط متحرك */
.car{position:relative}
/* overflow-x يفرض قصّ المحور الرأسي أيضًا، فتُبتر ظلال البطاقات وحوافّها.
   حشوةٌ داخلية بهامشٍ سالب تُعيد للظلّ مكانه دون إزاحة الشريط. */
/* لا حشوة أفقية هنا: صندوق محتوى الوعاء يجب أن يساوي صندوق حشوته تمامًا،
   وإلا أطلّت بطاقةٌ زائدة بمقدار الفرق. الفسحة الرأسية وحدها للظلال. */
/* لا scroll-behavior هنا: وجودها في CSS يجعل إسنادَ scrollLeft غير متزامن،
   فيقرأ اختبارُ اتجاه التمرير صفرًا ويستنتج الإشارة عكسًا، فلا يتحرّك الشريط
   أبدًا. النعومة تُمرَّر خيارًا في scrollTo بدلها. */
.track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.8rem 0 1.1rem;margin:-.8rem 0 -.6rem;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 2.2rem)/3);scroll-snap-align:start;min-width:0}
@media(max-width:64rem){.slide{flex-basis:calc((100% - 1.1rem)/2)}}
@media(max-width:42rem){.slide{flex-basis:86%}}
.scard{height:100%;display:flex;flex-direction:column;gap:.5rem;padding:1.7rem 1.6rem;border-radius:16px;
  transition:.2s}
a.scard:hover{border-color:var(--acc);background:var(--surf2);transform:translateY(-2px)}
.scard .top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.scard .idx{font-size:.72rem;letter-spacing:.16em;color:var(--amber);font-weight:700}
.scard h3{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.35rem;color:var(--ink)}
.scard .by{font-size:.86rem;color:var(--mut)}
.scard p{margin:0;font-size:.92rem;color:var(--mut);line-height:1.85}
.scard .fo{margin-top:auto;padding-top:.7rem;font-size:.85rem;color:var(--ink2);font-weight:600;
  font-variant-numeric:tabular-nums;border-top:1px solid var(--hair)}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:1.1rem}
.dots button{width:.45rem;height:.45rem;border-radius:50%;background:var(--hair2);transition:.2s}
.dots button[aria-current="true"]{background:var(--acc);width:1.6rem;border-radius:4px;
  box-shadow:0 0 12px var(--acc-glow)}
/* قوائم بسيطة */
.plain{display:grid;gap:1.6rem 3rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.plain .it h3{font-family:"Noto Naskh Arabic",serif;font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:.3rem}
.plain .it p{margin:0;color:var(--mut);font-size:.96rem;line-height:1.9}
.plain .it .n{font-size:.72rem;letter-spacing:.2em;color:var(--amber);font-weight:700;display:block;margin-bottom:.4rem}
.rules{display:grid;gap:.9rem 2.6rem;grid-template-columns:1fr 1fr}
@media(max-width:52rem){.rules{grid-template-columns:1fr}}
.rule{display:flex;gap:.8rem;align-items:flex-start;padding:.4rem 0}
.rule .mk{width:1.5rem;height:1.5rem;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;margin-top:.15rem}
.rule.yes .mk{background:var(--oksoft);color:var(--ok)}
.rule.no .mk{background:var(--badsoft);color:var(--bad)}
.rule b{display:block;color:var(--ink);font-size:1.02rem}
.rule span{color:var(--mut);font-size:.93rem;line-height:1.85}

/* ═══ السيرة ═══
   الخطّ يُقرأ بالمسح لا بالتوقّف: عمودٌ واحد، ولكلّ حدثٍ سطرٌ واسمٌ ووقتٌ
   وشريطُ توثيقٍ يُقرأ بلمحة. والشريط هو الفكرة كلَّها: أنّ ما تعرفه من
   السيرة لا يقوم كلُّه على أرضٍ واحدة. */
.line{list-style:none;margin:0 0 1.6rem;padding:0;position:relative}
.line::before{content:"";position:absolute;inset-block:1.1rem;inset-inline-start:.52rem;
  width:1px;background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent)}
.lev{position:relative}
.lev>a{display:flex;gap:1rem;align-items:flex-start;padding:.95rem 0 .95rem .4rem;
  border-bottom:1px solid var(--hair)}
.lev:last-child>a{border-bottom:0}
.lev>a:hover .lhd b{color:var(--acc)}
.ldot{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.42rem;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 0 0 2px var(--hair2);transition:.16s;z-index:1}
.lev>a:hover .ldot{box-shadow:inset 0 0 0 2px var(--acc),0 0 12px var(--acc-glow)}
.lbod{min-width:0;flex:1}
.lhd{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.lhd b{font-size:1.12rem;font-weight:700;color:var(--ink);transition:.16s}
.lwhen{font-size:.8rem;color:var(--acc);font-weight:600}
.lmeta{display:block;font-size:.82rem;color:var(--faint);margin:.22rem 0 .5rem}

/* شريط التوثيق */
.tier{display:flex;gap:.5rem;flex-wrap:wrap}
.tw{display:inline-flex;align-items:center;gap:.34rem;font-size:.75rem;color:var(--faint)}
.tw i{width:.5rem;height:.5rem;border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 1px var(--hair2)}
.tw.on{color:var(--mut)}
.tw.on i{background:var(--acc);box-shadow:0 0 8px var(--acc-glow)}
.tier-full{gap:.6rem;margin:0 0 1.6rem;padding:.85rem 1.1rem;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--panel)}
.tier-full .tw{font-size:.85rem}
.tier-full .tw i{width:.62rem;height:.62rem}

/* الآيات داخل بطاقة الدليل */
.qv{display:grid;gap:.5rem}
.aya{margin:0;font-size:1.34rem;line-height:2.15}
.aya .an{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;margin-inline-end:.5rem;
  border-radius:50%;background:var(--accsoft);color:var(--accink);font-family:"Noto Naskh Arabic",serif;
  font-size:.7rem;font-weight:700;vertical-align:.15em}

/* عدد ما وُصل من كل كتاب */
.hbooks{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 .9rem}
.hb{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--mut);
  padding:.28rem .7rem;border:1px solid var(--hair);border-radius:999px;background:var(--panel)}
.hb b{color:var(--acc);font-variant-numeric:tabular-nums}
.hcard .cx{display:block;font-size:.82rem;line-height:1.85;color:var(--faint);margin-top:.3rem}
.hcard mark{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--ink2);
  border-radius:3px;padding:0 .15em}
.hcard.hid{display:none}
.moreb{margin:.2rem 0 1rem}

@media(max-width:52rem){
  .lhd b{font-size:1.02rem}
  .tier{gap:.4rem}
  .tw{font-size:.7rem}
  .aya{font-size:1.2rem;line-height:2.05}
}
/* تاريخٌ محصورٌ بالترتيب لا منصوصٌ في المصدر — يُميَّز فلا يُساوى بالمنصوص */
.lwhen.soft{color:var(--faint);font-weight:500}

/* ═══ الفقه ═══
   القسمُ يعرض ولا يُفتي، والتنبيهُ بذلك ثابتٌ في رأس كل صفحةٍ منه لا
   مطويٌّ في الحاشية. */
.fnote{border:1px solid var(--hair);border-inline-start:3px solid var(--amber);
  border-radius:var(--r2);padding:.9rem 1.1rem;margin:0 0 1.5rem;background:var(--panel);
  color:var(--mut);font-size:.86rem;line-height:1.95}
.fnote b{color:var(--ink2)}

/* وسمُ الموضع: مأخوذٌ من تصريح المصنّف، لا حكمَ لنا فيه */
.ftag{display:inline-flex;align-items:center;font-size:.74rem;font-weight:700;
  padding:.2rem .62rem;border-radius:999px;margin-inline-end:.4rem;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent)}
.f-ok{--c:var(--ok)}.f-mid{--c:var(--warn)}.f-acc{--c:var(--acc)}

/* مسائل الإجماع: رقمُها من أصل الكتاب */
.ijl{display:grid;gap:.55rem;margin-bottom:1.2rem}
.ij{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  border:1px solid var(--hair);border-radius:var(--r2);background:var(--panel);padding:.9rem 1.05rem}
.ijn{min-width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;
  background:var(--accsoft);color:var(--accink);font-size:.8rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.ijt{font-family:"Amiri",serif;font-size:1.22rem;line-height:2.05;color:var(--ink2);margin:0}
.ijm{font-size:.76rem;color:var(--faint);margin-top:.45rem}
.ijm a{color:var(--acc)}

/* موضعُ خلاف */
.masla{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);
  padding:1.05rem 1.2rem;margin-bottom:.85rem}
.mhead{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-bottom:.55rem}
.mp{margin-inline-start:auto;font-size:.76rem;color:var(--faint)}
.mp a{color:var(--acc)}
.mbab{font-size:.8rem;color:var(--mut);margin-bottom:.5rem}
.mtx{font-family:"Amiri",serif;font-size:1.24rem;line-height:2.1;color:var(--ink2);margin:0}
.dl{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.9rem;
  border-top:1px solid var(--hair);padding-top:.8rem}
.dlh{font-size:.76rem;color:var(--faint);margin-inline-end:.3rem}
.dlink{display:inline-flex;align-items:center;gap:.35rem;font-size:.79rem;
  padding:.24rem .62rem;border-radius:999px;border:1px solid var(--hair);
  background:var(--surf);color:var(--ink2);transition:.15s}
.dlink:hover{border-color:var(--acc);color:var(--acc)}
.dlink .dk{font-size:.68rem;color:var(--faint)}
@media(max-width:52rem){ .ijt,.mtx{font-size:1.12rem;line-height:2} }

/* شريطُ التنقّل بين الأبواب: يُسمّى البابُ المقصود فلا يُنقر على المجهول */
.babnav{max-width:none}
.babnav>a,.babnav>span{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;
  text-align:start;min-width:0;max-width:100%;overflow:hidden}
.babnav .bd{font-size:.72rem;color:var(--faint);font-weight:600}
.babnav .bn{font-size:.88rem;font-weight:600;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.babnav a:hover .bn{color:var(--acc)}
/* شريطُ تتمّة الباب يقع تحت شريط الأبواب، فكان هامشُه السالب يسحبه
   عليه فيتراكبان. */
.pager.sub{margin:.55rem 0 0;font-size:.84rem}
.pager.sub .mid{color:var(--faint);font-size:.78rem}
.babt{color:var(--acc);border-bottom:1px solid var(--hair);padding-bottom:.6rem;margin-bottom:1rem}
@media(max-width:52rem){
  .babnav{grid-template-columns:1fr 1fr;gap:.5rem}
  .babnav .mid{grid-column:1/-1;order:-1;text-align:center;padding:0 0 .2rem}
  .babnav .bn{font-size:.8rem}
}

/* فهرسُ كتب الفقه: بطاقةٌ لكل كتابٍ بعدد مسائله */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem;margin-bottom:1.4rem}
.kcard{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem;border-radius:var(--r2);
  border:1px solid var(--hair);background:var(--panel);transition:.16s}
.kcard:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:var(--sh)}
.kcard b{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.5}
.kcard:hover b{color:var(--acc)}
.kn{font-size:.76rem;color:var(--faint);display:flex;gap:.5rem;flex-wrap:wrap}
.ks{color:var(--acc)}

/* عنوانُ مجموعةٍ في فهرس الكتاب */
.tocg{margin:1.4rem 0 .6rem;display:flex;align-items:center;gap:.8rem}
.tocg:first-child{margin-top:0}
.tocg h3{font-family:"Noto Naskh Arabic",serif;font-size:1.08rem;font-weight:700;color:var(--acc);margin:0}
.tocg::after{content:"";flex:1;height:1px;background:var(--hair)}

/* عناوينُ المحدّثين تطول عمدًا (يصف الباب ما فيه كلَّه)، فتُحدّ بسطرين
   في البلاطات والتنقّل، والنصُّ كاملٌ في صفحة الباب وفي عنوان التلميح. */
.tile .t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tocg h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ نماذجُ الرئيسية الحيّة ═══
   الرفُّ ليس المنتَج، فلا تُصدَّر الصفحةُ ببطاقات كتب. ولكلّ قسمٍ نموذجٌ
   من المنصّة نفسها: شكلُه شكلُ ما يجده الزائر في الداخل. */
.demo{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);
  padding:1.3rem 1.5rem;box-shadow:var(--sh)}
.dmh{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.dmk{font-size:.7rem;letter-spacing:.2em;font-weight:700;color:var(--faint)}
.dmref{margin-inline-start:auto;font-size:.88rem;font-weight:700;color:var(--acc)}
.dmref:hover{text-decoration:underline}
.dmtx{font-family:"Amiri",serif;font-size:1.3rem;line-height:2.1;color:var(--ink2);margin:0 0 .9rem;
  max-width:var(--measure)}
.dmtx.qv{font-size:1.42rem}
.dmp{color:var(--mut);line-height:1.95;margin:0 0 .9rem;max-width:var(--measure)}
.dmwarn{font-size:.86rem;line-height:1.85;color:var(--warn);border-inline-start:3px solid var(--warn);
  background:var(--warnsoft);border-radius:var(--r2);padding:.6rem .9rem;margin-bottom:.8rem}
.dmg{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.gp{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--hair);border-radius:999px;
  padding:.22rem .5rem .22rem .75rem;background:var(--surf);font-size:.8rem}
.gp b{color:var(--mut);font-weight:600}
.dmsb{font-size:.9rem;line-height:1.95;color:var(--mut);border-inline-start:3px solid var(--amber);
  padding:.6rem .9rem;background:var(--ambersoft);border-radius:var(--r2);margin-bottom:.9rem}
.dmsb b{color:var(--amber);display:block;font-size:.78rem;margin-bottom:.2rem}
.dmsrc{font-size:.76rem;color:var(--faint)}
.dmtwo{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.9rem}
.dmcol{border:1px solid var(--hair);border-radius:var(--r2);padding:.8rem 1rem;background:var(--surf2)}
.dmcol b{display:block;font-size:.8rem;color:var(--acc);margin-bottom:.35rem}
.dmcol p{margin:0;font-size:.92rem;line-height:1.9;color:var(--mut)}
.dmf{font-size:.83rem;color:var(--faint);line-height:1.9;border-top:1px solid var(--hair);padding-top:.8rem}
.demo .tier-full{margin:0 0 .9rem}
.demo .mhead{margin-bottom:.7rem}
.demo .dl{margin-top:.2rem;border-top:0;padding-top:0}
.skel{display:grid;gap:.7rem}
.skel i{display:block;height:1.1rem;border-radius:6px;background:var(--surf);
  animation:pulse 1.4s ease-in-out infinite}
.skel i:nth-child(2){width:80%}.skel i:nth-child(3){width:55%}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.9}}

/* أرقامُ الوصل */
.lnums{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.lnum{border:1px solid var(--hair);border-radius:var(--r2);background:var(--panel);padding:1rem 1.15rem}
.lnum b{display:block;font-family:"Noto Naskh Arabic",serif;font-size:1.9rem;font-weight:800;
  color:var(--acc);line-height:1.25;font-variant-numeric:tabular-nums}
.lnum span{display:block;font-size:.92rem;font-weight:600;color:var(--ink2);margin:.15rem 0 .3rem}
.lnum i{display:block;font-style:normal;font-size:.79rem;color:var(--faint);line-height:1.75}
@media(max-width:64rem){.lnums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){
  .lnums{grid-template-columns:1fr}
  .dmtwo{grid-template-columns:1fr}
  .demo{padding:1.1rem 1.15rem}
  .dmtx{font-size:1.18rem}
}

/* أسهمُ التقليب بيد القارئ، إلى جانب النقاط */
.cnav{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.9rem}
.carw{width:2.1rem;height:2.1rem;flex:0 0 auto;border-radius:50%;border:1px solid var(--hair);
  background:var(--panel);color:var(--acc);font-size:1.2rem;line-height:1;display:grid;place-items:center;
  cursor:pointer;transition:.15s}
.carw:hover{border-color:var(--acc);background:var(--accsoft)}
.cnav .dots{margin:0}
/* شريحةٌ بعرض الإطار — للنماذج */
.track.full .slide{flex:0 0 100%}
/* عنوانٌ صغير فوق شريط الكتب داخل القسم */
.sub-strip{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 .8rem}
.sub-strip h3{font-family:"Noto Naskh Arabic",serif;font-size:1rem;font-weight:700;color:var(--mut);margin:0}
.sub-strip::after{content:"";flex:1;height:1px;background:var(--hair)}
/* بطاقةُ راوٍ مصغَّرة */
.rcard{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;border-radius:var(--r);
  background:var(--panel);box-shadow:var(--sh);border:1px solid var(--hair);height:100%;transition:.16s}
.rcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.rct{font-size:.7rem;letter-spacing:.14em;color:var(--amber);font-weight:700}
.rcard b{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard:hover b{color:var(--acc)}
.rcb{font-size:.8rem;color:var(--faint);line-height:1.7}
.rcn{margin-top:auto;padding-top:.5rem;font-size:.82rem;color:var(--acc);font-weight:600}

/* صفحة من نحن ومصادرنا */
.abs{margin:0 0 2.6rem;max-width:var(--measure)}
.abs h2{font-family:"Noto Naskh Arabic",serif;font-size:1.6rem;font-weight:700;color:var(--ink);
  margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair)}
.abs p{color:var(--mut);line-height:2.05;margin:0 0 .9rem;font-size:1.02rem}
.abox{border:1px solid var(--hair);border-inline-start:3px solid var(--amber);border-radius:var(--r2);
  background:var(--ambersoft);padding:1.1rem 1.3rem;margin:0 0 1.1rem}
.abox b{display:block;font-size:1.12rem;color:var(--ink);margin-bottom:.4rem}
.abox p{margin:0;color:var(--ink2)}
.abr{margin:0;padding-inline-start:1.3rem;display:grid;gap:.7rem}
.abr li{color:var(--mut);line-height:2;font-size:1rem}
.abr b{color:var(--ink)}
.absec{margin:1.6rem 0}
.absec h3{font-family:"Noto Naskh Arabic",serif;font-size:1.1rem;color:var(--acc);margin:0 0 .7rem}
.abl{display:grid;gap:.5rem}
.abi{border:1px solid var(--hair);border-radius:var(--r2);background:var(--panel);padding:.85rem 1.05rem}
.abi b{display:block;font-size:1rem;color:var(--ink);margin-bottom:.25rem}
.abi span{font-size:.9rem;color:var(--mut);line-height:1.9}

/* تنبيهُ أوّل زيارة */
dialog.agree{border:0;padding:0;max-width:34rem;width:calc(100% - 2rem);border-radius:var(--r);
  background:var(--bg2);color:var(--ink);box-shadow:var(--sh2);overflow:hidden}
dialog.agree::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.agh{display:flex;align-items:center;gap:.7rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--hair);
  background:var(--panel2)}
.agh svg{width:1.5rem;height:1.5rem;color:var(--amber)}
.agh b{font-family:"Noto Naskh Arabic",serif;font-size:1.2rem}
.agb{padding:1.3rem 1.4rem}
.agl{font-size:1.22rem;margin:0 0 .7rem;color:var(--ink)}
.agl b{color:var(--warn)}
.agb p{color:var(--mut);line-height:2;margin:0 0 .8rem}
.agu{margin:0 0 .9rem;padding-inline-start:1.2rem;display:grid;gap:.45rem}
.agu li{color:var(--mut);line-height:1.95;font-size:.95rem}
.agf{font-size:.92rem;color:var(--faint);border-top:1px solid var(--hair);padding-top:.8rem;margin:0}
.aga{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem 1.3rem}
.agbtn{font-family:"Noto Naskh Arabic",serif;font-size:1.06rem;font-weight:700;border:0;cursor:pointer;
  padding:.75rem 2.2rem;border-radius:var(--r2);background:var(--acc);color:var(--bg);transition:.15s}
.agbtn:hover{background:var(--acc2);transform:translateY(-1px)}
.aglink{margin-inline-start:auto;font-size:.88rem;color:var(--acc)}
.aglink:hover{text-decoration:underline}
@media(max-width:40rem){ .aga{flex-direction:column;align-items:stretch}
  .agbtn{width:100%} .aglink{margin:0;text-align:center} }