/* مكتبة علوم القرآن — على رموز بصائر (tokens.css هو المصدر الوحيد، لا hex خام) */
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:"Readex Pro",system-ui,sans-serif;
  font-weight:300;font-size:var(--fs-0);line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:74rem;margin:0 auto;padding-inline:16px}
a{color:var(--gold-ink)}
button{font:inherit;cursor:pointer}
[hidden]{display:none !important}

/* ── الرأس والتذييل (البنيةُ الموحّدة في أجنحة بصائر) ── */
.hd{background:var(--navy)}
.hd-in{display:flex;align-items:center;gap:.7rem;padding-block:.5rem;flex-wrap:wrap}
.brand{font-family:Amiri,serif;font-size:1.35rem;font-weight:700;color:var(--on-navy);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumb{color:var(--gold);font-family:Amiri,serif;font-size:1.05rem}
.crumb::before{content:"› ";color:rgba(243,234,211,.5)}
.hd-lnk{margin-inline-start:auto;color:var(--on-navy);text-decoration:none;font-size:var(--fs--1);
  border:1px solid rgba(243,234,211,.45);border-radius:var(--r-pill);padding:.35rem 1rem;
  min-height:40px;display:inline-flex;align-items:center;transition:border-color var(--t-fast) var(--ease)}
.hd-lnk:hover{border-color:var(--gold)}
.ft{margin-top:3rem;border-top:1px solid var(--line);padding-block:1.2rem;color:var(--muted);
  font-size:var(--fs--1);text-align:center}
.ft .beta{opacity:.8;font-size:.78rem}

/* ── الصدر ── */
.hero{padding-block:1.4rem .6rem;text-align:center}
.hero h1{font-family:Amiri,serif;font-size:var(--fs-3);color:var(--ink-strong);line-height:1.4;
  font-weight:700}
.hero p{color:var(--muted);font-size:var(--fs--1);max-width:46rem;margin:.3rem auto 0}
.kpi{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem .5rem;margin-top:.9rem}
.kpi b{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.25rem .85rem;font-weight:400;font-size:.8rem;color:var(--ink);white-space:nowrap}
.kpi b i{font-style:normal;font-weight:600;color:var(--gold-ink);font-size:.95rem}

/* ── شريط الأدوات ── */
.bar{display:flex;align-items:center;gap:.6rem;padding-block:.9rem;flex-wrap:wrap;
  position:sticky;top:0;background:var(--paper);z-index:5;border-bottom:1px solid var(--line)}
.srch{display:flex;align-items:center;gap:.2rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.2rem .35rem;flex:1;min-width:13rem}
.srch input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;
  padding:.4rem .6rem;min-height:44px}
.srch input:focus{outline:none}
.srch:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.srch button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--navy);
  color:var(--on-navy);display:grid;place-items:center}
.srch button svg{width:20px;height:20px}
.seg{display:flex;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;
  background:var(--card)}
.seg button{border:0;background:transparent;color:var(--muted);padding:.3rem 1rem;min-height:44px;
  font-size:.85rem;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}

/* ── التخطيط: شجرةٌ ومحتوى ── */
.cols{display:grid;grid-template-columns:19rem 1fr;gap:1.4rem;align-items:start;padding-block:1rem}
@media (max-width:959px){.cols{grid-template-columns:1fr;gap:.6rem}}
.side{position:sticky;top:5.2rem;max-height:calc(100vh - 6.5rem);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .6rem}
@media (max-width:959px){.side{position:static;max-height:none}}
.side h2{font-family:Amiri,serif;font-size:1.05rem;color:var(--ink-strong);padding:.2rem .3rem .4rem}

/* الشجرة */
.tr details{border-bottom:1px dashed var(--line)}
.tr details:last-child{border-bottom:0}
.tr summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.45rem .3rem;min-height:44px;font-size:.92rem;color:var(--ink-strong)}
.tr summary::-webkit-details-marker{display:none}
.tr summary::before{content:"▸";color:var(--gold);transition:transform var(--t-fast) var(--ease);
  font-size:.8rem}
.tr details[open]>summary::before{transform:rotate(-90deg)}
.tr summary .nm{font-family:Amiri,serif;font-weight:700;font-size:1.02rem}
.tr summary .ax{color:var(--muted);font-size:.72rem;margin-inline-start:auto;white-space:nowrap}
.tr .sci{display:block;width:100%;text-align:right;border:0;background:transparent;
  color:var(--ink);padding:.3rem .3rem .3rem 1.3rem;min-height:40px;font-size:.85rem;
  border-radius:8px;line-height:1.6}
.tr .sci:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.tr .sci[aria-current="true"]{background:var(--navy);color:var(--on-navy)}
.tr .sci[aria-current="true"] .n{color:var(--gold)}
.tr .sci .cd{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tr .sci[aria-current="true"] .cd{color:rgba(243,234,211,.7)}
.tr .sci .n{color:var(--gold-ink);font-size:.74rem}
.tr .sci.z{opacity:.45}
.stg{font-family:Amiri,serif;color:var(--gold-ink);font-size:.8rem;padding:.6rem .3rem .1rem;
  border-top:1px solid var(--line);margin-top:.3rem}
.tr>.stg:first-child{border-top:0;margin-top:0}

/* ── المحتوى ── */
.ttl{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;padding-bottom:.2rem}
.ttl h2{font-family:Amiri,serif;font-size:var(--fs-2);color:var(--ink-strong);font-weight:700}
.ttl .sub{color:var(--muted);font-size:.8rem}
.crumbs{color:var(--muted);font-size:.76rem;padding-bottom:.5rem}
.note{background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold);
  border-radius:var(--r);padding:.6rem .9rem;color:var(--muted);font-size:.8rem;margin-block:.6rem}
.tabsline{display:flex;flex-wrap:wrap;gap:.3rem;padding-block:.4rem 0}
.tabsline span{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  padding:.05rem .7rem;font-size:.74rem;color:var(--muted)}

/* بطاقة الكتاب */
.bk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-block:.45rem;overflow:hidden}
.bk-h{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:transparent;
  padding:.55rem .9rem;min-height:52px;text-align:right;color:var(--ink)}
.bk-h:hover{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.bk-h .ix{flex:none;width:1.9rem;color:var(--muted);font-size:.72rem;
  font-variant-numeric:tabular-nums}
.bk-h .mid{min-width:0;flex:1}
.bk-h .t{font-family:Amiri,serif;font-size:1.13rem;color:var(--ink-strong);font-weight:700;
  display:block;line-height:1.5}
.bk-h .a{color:var(--muted);font-size:.78rem;display:block}
.bk-h .d{flex:none;color:var(--ok);font-size:.76rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bk-b{border-top:1px dashed var(--line);padding:.7rem .9rem}
.fl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;font-size:.83rem;
  margin-bottom:.55rem}
.fl dt{color:var(--muted);font-size:.76rem;white-space:nowrap}
.fl dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.blurb{font-size:.86rem;color:var(--ink);border-inline-start:2px solid var(--line);
  padding-inline-start:.7rem;margin-block:.5rem}
.card-raw{white-space:pre-wrap;font-size:.78rem;color:var(--muted);background:var(--paper);
  border:1px dashed var(--line);border-radius:10px;padding:.5rem .7rem;margin-block:.5rem}
.lnks{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
.lnks a,.lnks button{display:inline-flex;align-items:center;min-height:40px;padding:.1rem .95rem;
  border:1.5px solid var(--gold);border-radius:var(--r-pill);text-decoration:none;background:transparent;
  color:var(--gold-ink);font-size:.8rem;transition:background var(--t-fast) var(--ease)}
.lnks a:hover,.lnks button:hover{background:var(--gold);color:var(--navy-2)}
.lnks a.pri{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.lnks a.pri:hover{background:var(--navy-2)}

/* شارات */
.bdg{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--r-pill);
  padding:0 .55rem;font-size:.68rem;border:1px solid var(--line);color:var(--muted);
  background:var(--paper);white-space:nowrap;line-height:1.7}
.bdg.ours{border-color:var(--ok);color:var(--ok)}
.bdg.ent{border-color:var(--info);color:var(--info)}
.bdg.out{border-color:var(--warn);color:var(--warn)}
.bdg.sci{border-color:var(--gold);color:var(--gold-ink)}
.bdgs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}

/* القرون */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem;
  padding-block:.6rem}
.cen{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .7rem;
  text-align:center;color:var(--ink);transition:border-color var(--t-fast) var(--ease)}
.cen:hover{border-color:var(--gold)}
.cen[aria-current="true"]{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.cen .c{font-family:Amiri,serif;font-size:1.5rem;color:var(--ink-strong);display:block;
  line-height:1.3;font-weight:700}
.cen[aria-current="true"] .c{color:var(--gold)}
.cen .n{font-size:.74rem;color:var(--muted)}
.cen[aria-current="true"] .n{color:rgba(243,234,211,.8)}
.cen .bar{display:block;height:3px;border-radius:2px;background:var(--gold);opacity:.5;
  margin-top:.35rem;position:static;border:0}

/* المؤلّفون */
.au{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-block:.4rem;
  overflow:hidden}
.au-h{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:transparent;
  padding:.5rem .9rem;min-height:50px;text-align:right;color:var(--ink)}
.au-h:hover{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.au-h .av{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy);
  color:var(--gold);display:grid;place-items:center;font-family:Amiri,serif;font-size:1.1rem}
.au-h .nm{font-family:Amiri,serif;font-size:1.08rem;color:var(--ink-strong);font-weight:700}
.au-h .mt{color:var(--muted);font-size:.75rem}
.au-h .cnt{margin-inline-start:auto;color:var(--gold-ink);font-size:.76rem;white-space:nowrap}
.au-b{border-top:1px dashed var(--line);padding:.7rem .9rem}
.au-b .bio{font-size:.87rem;white-space:pre-wrap}
.au-b .bsrc{color:var(--muted);font-size:.72rem;margin-top:.4rem}

.more{display:block;margin:1rem auto 2rem;border:1.5px solid var(--gold);border-radius:var(--r-pill);
  background:transparent;color:var(--gold-ink);padding:.3rem 1.4rem;min-height:44px}
.more:hover{background:var(--gold);color:var(--navy-2)}
.none{color:var(--muted);text-align:center;padding-block:1.6rem}
.load{color:var(--muted);text-align:center;padding-block:1rem;font-size:.82rem}
.src-line{color:var(--muted);font-size:.76rem;border-top:1px solid var(--line);margin-top:1.4rem;
  padding-top:.8rem}
.src-line b{color:var(--ink)}
details.meta{margin-top:.8rem}
details.meta summary{cursor:pointer;color:var(--gold-ink);font-size:.8rem;min-height:40px;
  display:flex;align-items:center}
details.meta ul{margin:.3rem 1.2rem;font-size:.78rem;color:var(--muted)}

/* الشجرةُ مطويّةٌ على الجوّال مفتوحةٌ على الحاسوب (يضبطها السكربت بـmatchMedia) */
#treebox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.2rem .3rem}
#treebox>summary::-webkit-details-marker{display:none}
#treebox>summary::after{content:"▾";color:var(--gold);margin-inline-start:auto;
  transition:transform var(--t-fast) var(--ease)}
#treebox[open]>summary::after{transform:rotate(180deg)}
@media (min-width:960px){#treebox>summary{cursor:default}#treebox>summary::after{display:none}}