:root{
  /* Layout: one line of descent down the page; each generation's other children sit in a labelled group beside the ancestor; details in a side panel. */
  --bg:#f4efe6;
  --bg-deep:#ebe3d4;
  --surface:#fffcf6;
  --ink:#1d1a16;
  --ink-2:#3b352d;
  --muted:#62594c;
  --line:#d8cdb9;
  --line-strong:#a99b84;
  --gold:#a8843f;
  --gold-ink:#7a5a1f;
  --accent:#1f4a7d;
  --accent-soft:#e4eaf2;
  --imam:#1a6a4c;
  --imam-soft:#e3efe6;
  --flag:#9a520e;
  --flag-soft:#f6e6cf;
  --chr:#6a3d9a;
  --chr-soft:#ece4f5;
  --oth:#2f6f73;
  --oth-soft:#dfeeee;
  --shadow-sm:0 1px 0 rgba(70,50,20,.04), 0 1px 3px rgba(70,50,20,.07);
  --shadow-md:0 10px 24px -12px rgba(40,30,15,.35);
  --shadow-lg:0 28px 60px -16px rgba(40,28,12,.32), 0 2px 8px rgba(40,28,12,.08);
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read:"Source Serif 4", Georgia, "Times New Roman", serif;
  --arabic:"Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
  --bar-h:64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13110e; --bg-deep:#1a1713; --surface:#1e1b16; --ink:#efe8dc; --ink-2:#d6cdbf; --muted:#a89f90; --line:#3b352c; --line-strong:#5e5547;
    --gold:#c9a35a; --gold-ink:#d8b673; --accent:#9dbdec; --accent-soft:#1c2738; --imam:#72cba4; --imam-soft:#142e26;
    --flag:#e7a964; --flag-soft:#35250f; --chr:#c3a6ea; --chr-soft:#2b2339; --oth:#7fcfd2; --oth-soft:#173133;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 10px 24px -10px rgba(0,0,0,.6); --shadow-lg:0 28px 60px -12px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13110e; --bg-deep:#1a1713; --surface:#1e1b16; --ink:#efe8dc; --ink-2:#d6cdbf; --muted:#a89f90; --line:#3b352c; --line-strong:#5e5547;
  --gold:#c9a35a; --gold-ink:#d8b673; --accent:#9dbdec; --accent-soft:#1c2738; --imam:#72cba4; --imam-soft:#142e26;
  --flag:#e7a964; --flag-soft:#35250f; --chr:#c3a6ea; --chr-soft:#2b2339; --oth:#7fcfd2; --oth-soft:#173133;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 10px 24px -10px rgba(0,0,0,.6); --shadow-lg:0 28px 60px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display); font-variant-numeric:lining-nums; font-weight:600; text-wrap:balance; margin:0}
a{color:var(--accent); text-underline-offset:2px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ar{font-family:var(--arabic); direction:rtl}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg.i{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- hero ---------- */
header.hero{max-width:1320px; margin:0 auto; padding:56px 24px 28px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px 56px; align-items:end}
.hero-in{display:grid; gap:14px}
.kicker{margin:0; display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.kicker::before{content:""; width:36px; height:1px; background:var(--gold)}
header.hero h1{font-size:clamp(2.5rem, 5.4vw, 4.25rem); line-height:.98; letter-spacing:-.015em; font-weight:600}
.hero-ar{margin:-4px 0 0; font-family:var(--arabic); font-size:clamp(1.4rem, 2.4vw, 1.9rem); line-height:1.4; color:var(--gold-ink); text-align:left}
.lede{max-width:66ch; color:var(--ink-2); margin:4px 0 0; font-family:var(--read); font-size:16.5px; line-height:1.65}
.stats{grid-column:1 / -1; display:flex; flex-wrap:wrap; margin:8px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stats li{flex:1 1 150px; padding:16px 18px 14px; border-left:1px solid var(--line); font-variant-numeric:tabular-nums; display:grid; gap:4px; align-content:start}
.stats li:first-child{border-left:none; padding-left:0}
.stats b{font-family:var(--display); font-variant-numeric:lining-nums tabular-nums; font-size:2.25rem; font-weight:600; line-height:1; color:var(--ink)}
.stats span{font-size:12.5px; line-height:1.35; color:var(--muted)}

.key{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); align-self:end}
.key summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 18px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.key summary::-webkit-details-marker{display:none}
.key summary::after{content:""; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s}
.key[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.legend{display:grid; gap:9px; font-size:13.5px; color:var(--ink-2); margin:0; padding:2px 18px 16px; list-style:none}
.legend li{display:flex; align-items:center; gap:11px}
.legend li > :first-child{flex:none; width:30px; display:inline-flex; justify-content:center}
.sw{display:inline-block; width:26px; height:16px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface)}
.sw.imam{border-color:var(--imam); background:var(--imam-soft); box-shadow:inset 3px 0 0 var(--imam)}
.sw.disp{border-style:dashed; border-color:var(--flag)}
.sw.kid{width:30px; height:14px; border-radius:999px}
.sw.pro{border-color:var(--accent); background:var(--accent-soft)}
.entry-l{display:inline-flex; color:var(--accent)}
.fl{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--flag-soft); color:var(--flag); font-size:11px; font-weight:700; line-height:1}

/* ---------- sticky toolbar ---------- */
.toolbar{position:sticky; top:0; z-index:15; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.toolbar-in{max-width:1320px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px; min-height:var(--bar-h)}
.search{position:relative; display:flex; align-items:center; gap:10px; flex:none}
.search label{font-size:13px; color:var(--muted); white-space:nowrap}
.search .field{position:relative; display:flex; align-items:center}
.search .field svg{position:absolute; left:11px; color:var(--muted); pointer-events:none}
.search input{width:260px; max-width:60vw; height:40px; padding:0 40px 0 36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s}
.search input::placeholder{color:var(--muted); opacity:.8}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.search kbd{position:absolute; right:9px; font:600 11px/1 var(--body); color:var(--muted); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:3px 6px; background:var(--bg); pointer-events:none}
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd{display:none}
.search output{font-size:13px; color:var(--muted); min-width:8ch; white-space:nowrap; font-variant-numeric:tabular-nums}
.eras{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding:2px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%)}
.eras::-webkit-scrollbar{display:none}
.theme-btn{flex:none; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; cursor:pointer; transition:border-color .15s, background-color .15s, color .15s}
.theme-btn:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.theme-btn svg.i{width:18px; height:18px}
.theme-btn .sun{display:none}
:root[data-mode="dark"] .theme-btn .sun{display:block}
:root[data-mode="dark"] .theme-btn .moon{display:none}
.eras button{flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:0 13px; font-size:13px; white-space:nowrap; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s}
.eras button:first-child{margin-left:10px}
.eras button:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.eras .side{font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.eras .side::after{content:"·"; margin-left:7px; color:var(--line-strong)}

/* ---------- tree ---------- */
.layout{padding:20px 24px 72px}
.scroll-hint{display:none}
.tree-wrap{overflow-x:auto; padding-bottom:12px}
.tree{position:relative; display:grid; grid-template-columns:1fr 1.25fr 1fr 36px 1fr 1.25fr 1fr; column-gap:16px; row-gap:24px; min-width:1240px; max-width:1700px; margin:0 auto}
.card.top{justify-self:center; width:min(340px,100%)}
.tree > svg{position:absolute; left:0; top:0; pointer-events:none; z-index:0; overflow:visible}
.ln{fill:none; stroke:var(--line-strong); stroke-width:1.5}
.ln.imam{stroke:var(--imam); stroke-width:2}
.ln.disp{stroke:var(--flag); stroke-dasharray:5 5}
.ln.second{opacity:.55}
.gutter{z-index:0; justify-self:center; width:1px; background:repeating-linear-gradient(to bottom, var(--gold) 0 2px, transparent 2px 7px); opacity:.55; margin-top:8px}

.era{justify-self:center; z-index:1; text-align:center; background:var(--bg); padding:18px 22px 8px; max-width:540px; scroll-margin-top:calc(var(--bar-h) + 20px)}
.era .num{display:flex; align-items:center; justify-content:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.era .num::before, .era .num::after{content:""; width:28px; height:1px; background:var(--gold); opacity:.7}
.era h2{font-size:2rem; line-height:1.1; margin-top:6px}
.era p{margin:4px 0 0; color:var(--muted); font-size:13.5px}
.era.disp h2{color:var(--flag)}

.card{position:relative; z-index:1; display:grid; gap:1px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px 11px; cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; width:100%; align-self:start; scroll-margin-top:calc(var(--bar-h) + 24px)}
.card:hover{border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-1px)}
.card.imam{border-color:color-mix(in srgb, var(--imam) 45%, var(--line)); background:var(--imam-soft); box-shadow:inset 3px 0 0 var(--imam), var(--shadow-sm)}
.card.imam:hover{border-color:var(--imam); box-shadow:inset 3px 0 0 var(--imam), var(--shadow-md)}
.card.disp{border-style:dashed; border-color:var(--flag); background:color-mix(in srgb, var(--flag-soft) 35%, var(--surface))}
.card[aria-pressed="true"], .chip[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent); border-color:var(--accent)}
.dim{opacity:.25}
.hit{box-shadow:0 0 0 3px var(--flag) !important}
.card .meta{display:flex; justify-content:space-between; align-items:center; gap:6px; min-height:20px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums}
.card .meta > span:first-child{display:inline-flex; align-items:center; gap:6px}
.card .badge{background:var(--imam); color:var(--surface); border-radius:999px; padding:1px 8px; font-weight:600; font-size:10.5px; letter-spacing:.04em; text-transform:none; white-space:nowrap}
.card .nm{font-family:var(--display); font-size:1.36rem; font-weight:600; line-height:1.12; margin-top:2px}
.card .ar{font-size:1.08rem; color:var(--gold-ink); line-height:1.35; text-align:left}
.card .sub{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:2px}
.card .right{display:flex; gap:5px; align-items:center}
.card .entry{display:inline-flex; color:var(--accent)}
.card .entry svg.i{width:13px; height:13px}

.kidcol{z-index:1; align-self:start; display:grid; gap:14px; min-width:0}
.kids{display:grid; gap:6px; padding:2px 0 2px 12px; border-left:1px dashed var(--line-strong); min-width:0}
.chip.prophet{border-color:var(--accent); color:var(--accent); font-weight:500}
.chip.link{border-style:solid; border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:500}
.card .badge.pro{background:var(--accent)}
.card.ref{border-style:dotted; background:transparent; box-shadow:none}
.branch{margin-top:72px; border-top:1px solid var(--line); padding-top:32px}
.branch > h2{font-size:clamp(1.8rem, 3.6vw, 2.5rem); text-align:center}
.branch > p{max-width:64ch; margin:8px auto 8px; color:var(--muted); text-align:center}
.kids .lbl{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); line-height:1.35}
.kids .chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{display:inline-flex; align-items:center; min-height:26px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:2px 10px; font-size:12.5px; line-height:1.4; cursor:pointer; text-align:left; transition:border-color .15s, background-color .15s, opacity .15s}
.chip:hover{border-color:var(--accent); background:var(--accent-soft)}
.chip.trad{border-style:dashed; border-color:var(--flag)}
.chip.has-entry::after{content:""; display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:7px}
.chip[hidden]{display:none}
.kids .more{border:none; background:none; color:var(--accent); font-size:12.5px; font-weight:500; min-height:26px; padding:2px 6px; cursor:pointer; border-radius:999px}
.kids .more:hover{background:var(--accent-soft)}
.kids .unnamed{font-size:12.5px; color:var(--muted); font-style:italic; line-height:1.45}

/* ---------- method ---------- */
.method{max-width:1080px; margin:80px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:40px 44px 36px; box-shadow:var(--shadow-sm)}
.method h2{font-size:2.1rem; margin-bottom:6px}
.method .kicker{margin-bottom:10px}
.method ul{list-style:none; padding:0; margin:22px 0 0; columns:2 340px; column-gap:44px}
.method li{break-inside:avoid; color:var(--ink-2); font-family:var(--read); font-size:14.5px; line-height:1.62; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.method li b{font-family:var(--display); font-size:1.24rem; font-weight:700; line-height:1; color:var(--ink)}
.method p{color:var(--muted); font-size:14px; line-height:1.7; margin:8px 0 0}
.method p a{white-space:nowrap}

/* ---------- details panel ---------- */
.panel{position:fixed; top:16px; right:16px; bottom:16px; width:min(420px, calc(100vw - 32px)); overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0 26px 30px; z-index:20; box-shadow:var(--shadow-lg); transform:translateX(calc(100% + 40px)); transition:transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1)}
.panel.open{transform:none}
.panel.wide{width:min(800px, calc(100vw - 32px))}
.ptools{position:sticky; top:0; z-index:3; display:flex; justify-content:flex-end; align-items:center; gap:6px; margin:0 -26px 6px; padding:12px 14px; background:color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.ptools button{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:0 12px; cursor:pointer; font-size:13px; transition:border-color .15s, background-color .15s}
.ptools button.close{width:34px; padding:0}
.ptools button:hover{border-color:var(--accent); background:var(--accent-soft)}
.enc{margin-top:26px; border-top:1px solid var(--line); padding-top:6px}
.enc > h3{display:flex; align-items:baseline; gap:8px}
.enc .cnt{font-weight:400; letter-spacing:0; text-transform:none}
.enc .lede2{font-family:var(--read); font-size:1.04rem; line-height:1.65; color:var(--ink-2); margin:4px 0 14px}
.toc{display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; margin-bottom:12px}
.toc a{color:var(--accent); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:3px 10px; transition:border-color .15s, background-color .15s}
.toc a:hover{border-color:var(--accent); background:var(--accent-soft)}
.encfilter{position:sticky; top:58px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); margin:4px -26px 6px; padding:8px 26px; background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.encfilter button{border:1px solid var(--line); background:transparent; border-radius:999px; min-height:28px; padding:2px 11px; cursor:pointer; font-size:12.5px; color:var(--ink); transition:background-color .15s, border-color .15s}
.encfilter button:hover{border-color:var(--ink)}
.encfilter button[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.esec[hidden], .eitem[hidden]{display:none}
.esec{scroll-margin-top:110px}
.esec h4{font-family:var(--display); font-size:1.5rem; font-weight:600; margin:22px 0 4px; padding-bottom:4px; border-bottom:1px solid var(--line)}
.eitem{padding:12px 0 10px; border-bottom:1px dotted var(--line)}
.eitem:last-child{border-bottom:none}
.eitem h5{font-size:15px; font-weight:600; margin:6px 0 4px; line-height:1.35}
.eitem p,.eitem .ebody{margin:0; max-width:68ch}
.panel.wide .eitem p, .panel.wide .eitem .ebody{max-width:none}
.ebody{font-family:var(--read); font-size:15px; line-height:1.65; color:var(--ink-2)}
.ebody ul{margin:6px 0 6px; padding-left:20px}
.ebody li{margin:3px 0}
.eitem .esrc{font-size:12.5px; color:var(--muted); margin-top:6px}
.etags{display:flex; flex-wrap:wrap; gap:4px}
.tag{font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:5px; padding:2px 7px}
.tag.g-isl{background:var(--imam-soft); color:var(--imam)}
.tag.g-jud{background:var(--accent-soft); color:var(--accent)}
.tag.g-chr{background:var(--chr-soft); color:var(--chr)}
.tag.g-shared{background:linear-gradient(90deg, var(--accent-soft), var(--chr-soft)); color:var(--ink)}
.tag.g-oth{background:var(--oth-soft); color:var(--oth)}
.tag.g-his{background:var(--flag-soft); color:var(--flag)}
.eitem.anote{background:color-mix(in srgb, var(--gold) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-left:3px solid var(--gold); border-radius:10px; padding:12px 16px; margin:12px 0}
.eitem.anote h5{font-family:var(--display); font-size:1.25rem}
.alabel{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; margin-bottom:6px}
.panel .eyebrow{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.panel h2{font-size:2.35rem; line-height:1.05; margin-top:4px}
.panel .ar{font-size:1.75rem; color:var(--gold-ink); margin-top:4px; line-height:1.4; text-align:left}
.panel .aka{color:var(--muted); font-style:italic; margin:4px 0 0}
.panel .role{display:inline-block; margin:12px 6px 0 0; font-size:12.5px; border-radius:999px; padding:3px 11px; background:var(--accent-soft); color:var(--accent); font-weight:500}
.panel .role.imam{background:var(--imam-soft); color:var(--imam)}
.panel dl{display:grid; grid-template-columns:max-content 1fr; margin:20px 0 0; font-size:14px; border-top:1px solid var(--line)}
.panel dt, .panel dd{padding:9px 0; border-bottom:1px solid var(--line)}
.panel dt{color:var(--muted); padding-right:18px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding-top:12px}
.panel dd{margin:0; line-height:1.55}
.panel .note{margin:16px 0 0; font-family:var(--read); font-size:15.5px; line-height:1.65}
.panel h3{font-family:var(--body); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:26px 0 10px}
.flagbox{background:var(--flag-soft); border-left:3px solid var(--flag); border-radius:8px; padding:10px 14px; font-size:14px; margin-bottom:8px; line-height:1.55}
.flagbox b{display:block; color:var(--flag); font-weight:600; margin-bottom:2px}
.panel ul.src{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.panel ul.src li{margin:3px 0}
.panel ul.src li::marker{color:var(--gold)}
.nav{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.nav button{border:1px solid var(--line); background:transparent; border-radius:999px; min-height:34px; padding:4px 13px; font-size:13px; cursor:pointer; transition:border-color .15s, background-color .15s}
.nav button:hover{border-color:var(--accent); background:var(--accent-soft)}
.panel .mainkid{font-weight:600}

.totop{position:fixed; left:20px; bottom:20px; z-index:14; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s}
.totop.show{opacity:1; transform:none; pointer-events:auto}
.totop:hover{border-color:var(--accent); color:var(--accent)}

@media (max-width: 1099px){
  header.hero{grid-template-columns:1fr; gap:22px; align-items:start}
  .key{max-width:none}
  .legend{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}
}
@media (max-width: 979px){
  :root{--bar-h:108px}
  .layout{padding:12px 16px 48px}
  header.hero{padding:36px 16px 20px}
  .toolbar-in{flex-wrap:wrap; gap:10px; padding:10px 16px}
  .search{flex:1 1 0; min-width:0}
  .search .field{flex:1}
  .search input{width:100%; max-width:none}
  .eras{order:3; flex:1 1 100%; margin:0 -16px; padding:2px 16px}
  .eras button:first-child{margin-left:0}
  .scroll-hint{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:13px; color:var(--muted)}
  .method{padding:28px 22px 24px; margin-top:56px}
  .panel{left:0; right:0; bottom:0; top:auto; width:auto; max-height:86dvh; max-height:86vh; border-radius:20px 20px 0 0; border-bottom:none; transform:translateY(105%)}
  .panel.wide{width:auto}
  .panel.open{transform:translateY(0)}
  .ptools{padding-top:18px}
  .ptools::before{content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--line-strong)}
  .encfilter{top:64px}
  #widen{display:none}
}
@media (max-width: 620px){
  .search label{display:none}
  .search{gap:8px}
  .search output{min-width:0}
  .search output:empty{display:none}
  header.hero h1{font-size:2.3rem}
  .lede{font-size:15.5px}
  .stats{display:grid; grid-template-columns:1fr 1fr}
  .stats li{padding:12px 12px 10px; border-left:none; border-top:1px solid var(--line)}
  .stats li:nth-child(-n+2){border-top:none}
  .stats li:nth-child(even){border-left:1px solid var(--line)}
  .stats li:first-child{padding-left:12px}
  .stats b{font-size:1.75rem}
  .tree{row-gap:18px}
  .card{padding:7px 9px 8px}
  .card .nm{font-size:1.1rem}
  .card .ar{font-size:.95rem}
  .card .sub{font-size:11.5px}
  .card.l .sub, .card.r .sub{display:none}
  .kids{padding-left:6px}
  .chip{font-size:11.5px; padding:1px 8px}
  .totop{left:auto; right:16px; bottom:16px}
  .panel{padding:0 20px 28px}
  .ptools{margin:0 -20px 6px}
  .encfilter{margin:4px -20px 6px; padding:8px 20px}
  .panel dl{grid-template-columns:1fr}
  .panel dt{border-bottom:none; padding:10px 0 0}
  .panel dd{padding-top:2px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }

/* ---------- simple pages (404, and any page you add later) ---------- */
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:var(--display); font-size:1.3rem; font-weight:600; line-height:1.1; margin-right:auto}
.brand img{width:34px; height:34px; flex:none}
.masthead .brand{gap:12px; font-size:1.45rem}
.masthead .brand img{width:40px; height:40px}
.masthead{grid-column:1 / -1; display:flex; align-items:center; margin-bottom:6px}
header.hero{padding-top:26px}
.brand:hover{color:var(--accent)}
.page{max-width:760px; margin:0 auto; padding:64px 24px 96px}
.page h1{font-size:clamp(2.3rem, 5vw, 3.4rem); line-height:1.02; margin:14px 0 18px}
.page h2{font-size:1.8rem; margin:40px 0 10px}
.page p, .page li{font-family:var(--read); font-size:16.5px; line-height:1.7; color:var(--ink-2)}
.page p.kicker{font-family:var(--body); font-size:12px; line-height:1.4; color:var(--gold-ink)}
.page .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; transition:border-color .15s, background-color .15s, color .15s}
.btn:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.btn.primary{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.btn.primary:hover{background:var(--accent); border-color:var(--accent); color:var(--surface)}

/* ---------- overview: the hanging lamp ---------- */
.overview{max-width:1320px; margin:0 auto; padding:8px 24px 36px; scroll-margin-top:calc(var(--bar-h) + 8px)}
.ov-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 40px; align-items:end; margin-bottom:6px}
.ov-head h2{font-size:clamp(1.8rem, 3.2vw, 2.4rem); line-height:1.05; margin-top:10px}
.ov-head p{margin:8px 0 0; max-width:62ch; color:var(--ink-2); font-family:var(--read); font-size:15.5px; line-height:1.6}
.ov-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--muted); justify-content:flex-end; max-width:520px}
.ov-legend li{display:inline-flex; align-items:center; gap:7px}
.ov-legend svg{flex:none; overflow:visible}
.ov-map{position:relative; overflow-x:auto; overflow-y:hidden; margin:0 -8px; padding:0 8px; scrollbar-width:thin}
.ov-svg{display:block; width:100%; max-width:1040px; min-width:760px; height:auto; margin:0 auto; font-family:var(--body); -webkit-tap-highlight-color:transparent}

.ov-body{fill:url(#ovLight); stroke:none}
.ov-glass{fill:none; stroke:#fffaf0; stroke-width:7; stroke-linecap:round}
.ov-glass.thin{stroke-width:4}
.ov-cup{fill:color-mix(in srgb, var(--gold) 16%, transparent); stroke:var(--gold); stroke-width:1.5; opacity:.85}
.ov-oil{fill:#d9a441; opacity:.45}
.ov-wick{stroke:#3a2a1a; stroke-width:2.2; stroke-linecap:round}
.ov-fire-hit{cursor:pointer}
:root[data-mode="dark"] .ov-glass{stroke:#ffe9c4}
:root[data-mode="dark"] .ov-wick{stroke:#1a120a}
.ov-ring{fill:none; stroke:var(--gold); stroke-width:3}
.ov-chainlink{stroke:var(--gold); stroke-width:4; stroke-dasharray:6 4; stroke-linecap:round}
.ov-foot{fill:var(--gold); opacity:.8}

.ov-track{stroke-width:5; stroke-linecap:round; fill:none}
.ov-track.t-top{stroke:var(--gold)}
.ov-track.t-ish{stroke:var(--imam)}
.ov-track.t-isa{stroke:var(--accent)}
.ov-track.disp{stroke-dasharray:7 6; stroke-linecap:butt; stroke-width:4}
.ov-track.second{stroke-width:2; stroke-dasharray:3 5; opacity:.75; stroke-linecap:round}
.ov-leader{fill:none; stroke:var(--line-strong); stroke-width:.8}

.ov-st{cursor:pointer; outline:none}
.ov-st .hit{fill:transparent}
.ov-st .dot{fill:var(--surface); stroke-width:2.5; transition:r .15s ease, stroke-width .15s ease}
.ov-st.t-top .dot{stroke:var(--gold)}
.ov-st.t-ish .dot{stroke:var(--imam)}
.ov-st.t-isa .dot{stroke:var(--accent)}
.ov-st.k-prophet .dot{stroke-width:3.5}
.ov-st.k-imam .dot{fill:var(--imam); stroke:var(--surface); stroke-width:2}
.ov-st.disp .dot{stroke-dasharray:2.5 2}
.ov-st .num{fill:var(--surface); font-size:11.5px; font-weight:600; text-anchor:middle; dominant-baseline:central; pointer-events:none; font-variant-numeric:lining-nums}
.ov-st .lab{fill:var(--ink-2); font-size:12.5px}
.ov-st .lab.l-minor{fill:var(--muted); font-size:11.5px}
.ov-st .lab.l-key{font-weight:500; fill:var(--ink)}
.ov-st .lab.l-prophet, .ov-st .lab.l-imam{font-weight:600; fill:var(--ink); font-size:13.5px}
.ov-st.on .dot, .ov-st:focus-visible .dot{stroke-width:4.5}
.ov-st.on .lab, .ov-st:focus-visible .lab{fill:var(--accent); text-decoration:underline; text-underline-offset:3px}
.ov-st:focus-visible .hit{stroke:var(--accent); stroke-width:2; fill:var(--accent-soft)}

.ov-era{cursor:pointer; outline:none}
.ov-era text{fill:var(--gold-ink); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase}
.ov-era.disp text{fill:var(--flag)}
.ov-era:hover text, .ov-era:focus-visible text{fill:var(--accent); text-decoration:underline}

.ov-card{position:absolute; z-index:5; width:250px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px 11px; box-shadow:var(--shadow-md); pointer-events:none; font-size:13px; line-height:1.45}
.ov-card .top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600}
.ov-card .b{border-radius:999px; padding:1px 8px; font-size:10.5px; letter-spacing:.03em; text-transform:none; color:var(--surface)}
.ov-card .b.imam{background:var(--imam)}
.ov-card .b.pro{background:var(--accent)}
.ov-card .nm{font-family:var(--display); font-size:1.4rem; font-weight:600; line-height:1.1; margin-top:4px; color:var(--ink)}
.ov-card .ar{font-family:var(--arabic); font-size:1.1rem; color:var(--gold-ink); text-align:left}
.ov-card .role{color:var(--ink-2); margin-top:3px}
.ov-card .meta{color:var(--muted); font-size:12.5px; margin-top:3px}
.ov-card .hint{margin-top:8px; padding-top:7px; border-top:1px solid var(--line); color:var(--accent); font-size:12px; font-weight:500}
.ov-hint{display:none}

.eras .ov-jump{border-color:var(--gold)}
@media (max-width: 979px){
  .overview{padding:4px 16px 28px}
  .ov-head{grid-template-columns:1fr}
  .ov-legend{justify-content:flex-start}
  .ov-hint{display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:13px; color:var(--muted)}
}
@media (hover: none){ .ov-card{display:none} }