/* نَسَب — نظام التصميم
   الهوية: اللؤلؤ والبحر (البحرين). فيروز الخليج هو اللون الأساسي،
   والرملي للتمييز. مختلف عن هوية الدراسة (حمرة المخطوطات) عن قصد:
   هذه منصّة تُشغَّل، لا وثيقة تُقرأ. */

:root{
  --pearl:#F2F0EA; --surface:#FBFAF6; --surface-2:#E8E5DC;
  --ink:#141A1D; --muted:#6E7570;
  --teal:#0E6E6B; --teal-soft:#0E6E6B14; --teal-ink:#0A5250;
  --sand:#B8955F; --sand-soft:#B8955F1F;
  --line:#D5D1C6; --line-soft:#E3E0D6;
  --ok:#2F6B4F; --warn:#8A6212; --demo:#8A5A12;
  --shadow-sm:0 1px 2px rgba(20,26,29,.05);
  --shadow:0 1px 2px rgba(20,26,29,.05),0 10px 28px -14px rgba(20,26,29,.2);
  --shadow-lg:0 2px 4px rgba(20,26,29,.06),0 24px 48px -20px rgba(20,26,29,.28);
  --r:3px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pearl:#101413; --surface:#171C1B; --surface-2:#212726;
    --ink:#E7E4DB; --muted:#969C95;
    --teal:#5FB5B0; --teal-soft:#5FB5B01A; --teal-ink:#8ACFCA;
    --sand:#C9A971; --sand-soft:#C9A9711F;
    --line:#2E3634; --line-soft:#242B29;
    --ok:#6FB58C; --warn:#C9A24A; --demo:#C9A24A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --pearl:#101413; --surface:#171C1B; --surface-2:#212726;
  --ink:#E7E4DB; --muted:#969C95;
  --teal:#5FB5B0; --teal-soft:#5FB5B01A; --teal-ink:#8ACFCA;
  --sand:#C9A971; --sand-soft:#C9A9711F;
  --line:#2E3634; --line-soft:#242B29;
  --ok:#6FB58C; --warn:#C9A24A; --demo:#C9A24A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
/* السمة hidden يجب أن تغلب أي display صريح في الأصناف */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; direction:rtl; background:var(--pearl); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:2px}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

/* ---------- شريط علوي ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--pearl) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.topbar .in{
  max-width:1180px; margin:0 auto; padding:.7rem clamp(1rem,3vw,2rem);
  display:flex; align-items:center; gap:1rem;
}
.brand{font-family:"Aref Ruqaa",serif; font-size:1.7rem; font-weight:700; color:var(--ink); line-height:1}
.brand:hover{text-decoration:none; color:var(--teal)}
.topbar nav{margin-inline-start:auto; display:flex; gap:.3rem; align-items:center}
.navlink{
  font-size:.88rem; font-weight:500; color:var(--muted); padding:.4rem .8rem;
  border-radius:99px; transition:background .15s,color .15s;
}
.navlink:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.navlink.on{background:var(--teal); color:#fff}

/* ---------- وسم البيانات التجريبية — دائم ولا يُخفى ---------- */
.demobar{
  background:var(--sand-soft); border-bottom:1px solid var(--line);
  font-size:.8rem; color:var(--demo); text-align:center; padding:.45rem 1rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.demobar b{font-weight:600}
.chip-demo{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:600;
  background:var(--sand-soft); color:var(--demo); border:1px solid var(--sand);
  padding:.1rem .5rem; border-radius:99px; white-space:nowrap; line-height:1.6;
}

/* ---------- تخطيط ---------- */
.page{max-width:1180px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem) 5rem}
.crumbs{font-size:.82rem; color:var(--muted); padding:1.2rem 0 .3rem}
.crumbs a{color:var(--muted)}
.crumbs .sep{margin:0 .4rem; opacity:.5}

h1.page-t{font-family:"Amiri",serif; font-size:clamp(1.8rem,4.5vw,2.5rem); font-weight:700; margin:0 0 .3rem; line-height:1.3}
.page-sub{color:var(--muted); margin:0 0 2rem; max-width:60ch; font-size:.95rem}
h2.sec-t{font-family:"Amiri",serif; font-size:1.4rem; font-weight:700; margin:2.5rem 0 1rem}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0 0 .5rem}

/* ---------- بحث ---------- */
.searchbox{position:relative; max-width:460px; margin:0 0 2rem}
.searchbox input{
  width:100%; font-family:inherit; font-size:1rem; padding:.75rem 2.6rem .75rem 1rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink);
}
.searchbox input:focus{outline:2px solid var(--teal); outline-offset:-1px; border-color:transparent}
.searchbox .ico{position:absolute; inset-inline-end:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}

/* ---------- شبكة العوائل ---------- */
.fgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:.9rem}
.fcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.15rem;
  box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s;
  border-inline-start:3px solid var(--teal);
}
.fcard:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-inline-start-color:var(--sand); text-decoration:none}
.fcard .laqab{font-family:"Aref Ruqaa",serif; font-size:1.85rem; font-weight:700; color:var(--ink); line-height:1.25}
.fcard .kind{font-size:.72rem; color:var(--muted); letter-spacing:.04em}
.fcard .nums{display:flex; gap:.9rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-soft); flex-wrap:wrap}
.fcard .nums div{display:flex; flex-direction:column; line-height:1.35}
.fcard .nums .v{font-family:"IBM Plex Mono",monospace; font-size:1.02rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--teal)}
.fcard .nums .l{font-size:.68rem; color:var(--muted)}

/* ---------- بطاقات إحصاء ---------- */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:0 0 2rem}
.statrow .st{background:var(--surface); padding:1rem; text-align:center}
.statrow .st .v{font-family:"IBM Plex Mono",monospace; font-size:1.7rem; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.1}
.statrow .st .l{font-size:.74rem; color:var(--muted); margin-top:.3rem}

/* ---------- المشجرة ---------- */
.treewrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:auto; max-height:78vh; box-shadow:var(--shadow-sm); position:relative;
}
.treewrap .inner{padding:1.6rem clamp(1rem,3vw,2rem); min-width:min-content}
.gen{display:flex; align-items:flex-start; gap:.5rem; position:relative; padding-bottom:.2rem}
.gen-lbl{
  position:sticky; inset-inline-start:0; z-index:2; flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:99px;
  padding:.1rem .5rem; margin-top:.5rem; white-space:nowrap;
}
.gen-row{display:flex; gap:.45rem; flex-wrap:wrap; padding-bottom:1.1rem}

.pnode{
  background:var(--pearl); border:1px solid var(--line); border-radius:var(--r);
  padding:.5rem .75rem; cursor:pointer; text-align:start; font-family:inherit;
  font-size:.88rem; color:var(--ink); white-space:nowrap; display:flex;
  flex-direction:column; gap:.1rem; transition:border-color .12s, background .12s;
  min-width:86px;
}
.pnode:hover{border-color:var(--teal); background:var(--teal-soft)}
.pnode.on{border-color:var(--teal); background:var(--teal); color:#fff; box-shadow:var(--shadow-sm)}
.pnode.on .sub{color:rgba(255,255,255,.82)}
.pnode .nm{font-weight:600; line-height:1.4}
.pnode .sub{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted); line-height:1.4}
.pnode.root{border-inline-start:3px solid var(--sand)}
.pnode.haskids::after{content:"▾"; position:absolute}

/* ---------- لوحة الشخص ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.2rem; align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem; box-shadow:var(--shadow-sm); position:sticky; top:5.5rem;
}
.panel h3{font-family:"Amiri",serif; font-size:1.5rem; margin:0 0 .1rem; font-weight:700; line-height:1.3}
.panel .chain{font-family:"Amiri",serif; font-size:1.05rem; color:var(--teal-ink); line-height:1.75; margin:.4rem 0 1rem}
.panel dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .8rem; font-size:.86rem}
.panel dt{color:var(--muted); white-space:nowrap}
.panel dd{margin:0; font-weight:500}
.panel .acts{display:flex; gap:.4rem; margin-top:1.1rem; flex-wrap:wrap}
.btn{
  font-family:inherit; font-size:.84rem; font-weight:600; cursor:pointer;
  background:var(--teal); color:#fff; border:0; border-radius:var(--r);
  padding:.5rem 1rem; transition:opacity .15s;
}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent; color:var(--teal); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal); background:var(--teal-soft)}
.btn:disabled{opacity:.5; cursor:wait}

/* ---------- نتيجة القرابة ---------- */
.relout{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-soft)}
.relout .big{font-family:"Amiri",serif; font-size:1.5rem; font-weight:700; color:var(--teal); line-height:1.4}
.relout .pathline{margin-top:.5rem; line-height:2.1}
.node-pill{display:inline-block; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:.05rem .55rem; margin:.1rem .05rem; font-size:.8rem; white-space:nowrap}
.node-pill.hi{background:var(--teal); color:#fff; border-color:var(--teal)}
.arr{color:var(--muted); margin:0 .15rem; font-size:.8rem}
.relout .meta{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); margin-top:.5rem}

/* ---------- حالات ---------- */
.empty{text-align:center; padding:3rem 1rem; color:var(--muted)}
.skel{display:inline-block; background:var(--line); border-radius:2px; animation:pulse 1.4s ease-in-out infinite; vertical-align:middle}
@keyframes pulse{50%{opacity:.4}}
.err{color:var(--warn); font-size:.9rem}
.note{background:var(--teal-soft); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.2rem; font-size:.88rem; margin-top:1.5rem}
.note b{color:var(--teal-ink)}
.note code{font-family:"IBM Plex Mono",monospace; font-size:.85em; background:var(--surface); padding:.1em .4em; border-radius:2px; direction:ltr; display:inline-block}

footer.site{border-top:1px solid var(--line); margin-top:4rem; padding:2rem clamp(1rem,3vw,2rem) 3rem; text-align:center; color:var(--muted); font-size:.8rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}