/* Layout: sticky tool bar; drill-down stage (ancestors ↓ focus ↓ sons) beside a detail/edit panel; list and review as tabs. */
:root{
  --bg:#F5F0E6; --paper:#FFFDF8; --ink:#2A2119; --muted:#766858; --line:#CFC1AA; --soft:#EEE6D6;
  --accent:#8C5A2B; --accent-soft:#F3E6D6; --flag:#B4402A; --flag-soft:#F8E1DB; --ok:#3E7A4A; --ok-soft:#E1EFE3;
  --c-mubarak:#4F6B2F; --c-mubarak-soft:#E7EDDC; --c-malfi:#9A5B24; --c-malfi-soft:#F6E7D5;
  --c-mulaifi:#2F5873; --c-mulaifi-soft:#E0EAF1; --c-nafil:#6E3F6B; --c-nafil-soft:#EFE2EE;
  --c-buraik:#2E6B66; --c-buraik-soft:#DDEDEB; --c-other:#6B6258; --c-other-soft:#ECE7DF;
  --shadow:0 1px 2px rgba(42,33,25,.06),0 10px 28px rgba(42,33,25,.08);
  --f-name:"Noto Naskh Arabic","Traditional Arabic","Amiri",serif; --f-ui:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16130F; --paper:#1F1B16; --ink:#EFE7DA; --muted:#A89A88; --line:#4A4136; --soft:#2A241D;
  --accent:#D9A46C; --accent-soft:#33271B; --flag:#F08A72; --flag-soft:#3A201A; --ok:#8CC99A; --ok-soft:#1C2E20;
  --c-mubarak:#A9C47E; --c-mubarak-soft:#232B1A; --c-malfi:#E0A266; --c-malfi-soft:#36281A;
  --c-mulaifi:#8DB6D3; --c-mulaifi-soft:#1D2A34; --c-nafil:#D3A2CF; --c-nafil-soft:#2F2130;
  --c-buraik:#86C7C0; --c-buraik-soft:#1A2C2A; --c-other:#B7AC9E; --c-other-soft:#2A251F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16130F; --paper:#1F1B16; --ink:#EFE7DA; --muted:#A89A88; --line:#4A4136; --soft:#2A241D;
  --accent:#D9A46C; --accent-soft:#33271B; --flag:#F08A72; --flag-soft:#3A201A; --ok:#8CC99A; --ok-soft:#1C2E20;
  --c-mubarak:#A9C47E; --c-mubarak-soft:#232B1A; --c-malfi:#E0A266; --c-malfi-soft:#36281A;
  --c-mulaifi:#8DB6D3; --c-mulaifi-soft:#1D2A34; --c-nafil:#D3A2CF; --c-nafil-soft:#2F2130;
  --c-buraik:#86C7C0; --c-buraik-soft:#1A2C2A; --c-other:#B7AC9E; --c-other-soft:#2A251F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{direction:rtl}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:20px 72px}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}
h1{font-family:var(--f-name);font-size:34px;line-height:1.25;margin:2px 0 4px;text-wrap:balance}
.src{color:var(--muted);font-size:13px;margin:0}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px 14px;min-width:84px}
.stat b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.stat.ok b{color:var(--ok)}

.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:14px;box-shadow:var(--shadow);position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20}
.tabs{display:flex;background:var(--soft);border-radius:10px;padding:3px;flex-wrap:wrap}
.tab{border:0;background:transparent;border-radius:8px;padding:6px 12px;font-size:14px;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.search{flex:1 1 200px;position:relative;min-width:0}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 36px 8px 12px;outline:none}
.search input:focus{border-color:var(--accent)}
.search svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.results{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;padding:6px;z-index:25}
.results button{display:block;width:100%;text-align:right;background:none;border:0;padding:8px 10px;border-radius:8px}
.results button:hover{background:var(--soft)}
.results small{color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 12px;font-size:13px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:600}
.btn.danger{border-color:var(--flag);color:var(--flag)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.switch{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;background:var(--bg)}
.switch input{accent-color:var(--accent);width:16px;height:16px}
.pending{display:flex;align-items:center;gap:6px}
.msg{font-size:13px;color:var(--muted)}
.msg.err{color:var(--flag)}
.msg.ok{color:var(--ok)}

.stage{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
@media (max-width:980px){.stage{grid-template-columns:1fr}}
.flow{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 12px 30px;min-width:0}
.ancestry{display:flex;flex-direction:column;align-items:center}
.more-anc{border:1px dashed var(--line);background:transparent;border-radius:999px;padding:3px 14px;font-size:12.5px;color:var(--muted)}
.anc{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:3px 16px;display:inline-flex;align-items:baseline;gap:8px}
.anc:hover{border-color:var(--accent)}
.anc .nm{font-family:var(--f-name);font-weight:700;font-size:16px}
.down{width:2px;height:22px;background:var(--line);position:relative;margin:0 auto}
.down::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid var(--line);border-bottom:0}
.focus{margin:0 auto;max-width:460px;text-align:center;border-radius:20px;padding:16px 22px 14px;background:var(--br-soft);border:2px solid var(--br);position:relative}
.focus .nm{font-family:var(--f-name);font-size:40px;font-weight:700;line-height:1.25;color:var(--br);overflow-wrap:anywhere}
.focus .lin{font-family:var(--f-name);font-size:15.5px;opacity:.8;margin-top:2px}
.focus .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;border-radius:999px;padding:2px 10px;background:var(--paper);border:1px solid var(--line)}
.chip.flag{background:var(--flag-soft);border-color:var(--flag);color:var(--flag)}
.chip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.focus .up{position:absolute;top:10px;inset-inline-start:10px;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:2px 10px;font-size:12.5px}
.trunk{width:2px;height:26px;background:var(--br);margin:0 auto;opacity:.6}
.kids-scroll{overflow-x:auto;padding:0 4px 8px}
.kids{display:flex;width:max-content;margin-inline:auto;animation:rise .28s ease-out}
.kgrid{position:relative;margin:0 auto;animation:rise .28s ease-out;max-width:100%}
@keyframes rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kids,.kgrid{animation:none}}
.kid{position:relative;padding:24px 5px 0;display:flex;flex-direction:column;align-items:center}
.kid::before{content:"";position:absolute;top:0;inset-inline:0;border-top:2px solid color-mix(in srgb,var(--br) 60%,transparent)}
.kid:first-child::before{inset-inline-start:50%}
.kid:last-child::before{inset-inline-end:50%}
.kid:only-child::before{display:none}
.kid .stem{position:absolute;top:0;left:50%;width:2px;height:18px;background:color-mix(in srgb,var(--br) 60%,transparent);transform:translateX(-50%)}
.kid .stem::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid color-mix(in srgb,var(--br) 60%,transparent);border-bottom:0}
.krow{display:flex;position:relative;padding-bottom:12px}
.krow .kid{width:100px;flex:none}
.krow .card{width:100%;min-width:0;padding-inline:6px}
.krow .kid:first-child::before{inset-inline-start:-18px}
.krow .kid:last-child::before{inset-inline-end:50%}
.krow .kid:only-child::before{display:block;inset-inline-start:-18px;inset-inline-end:50%}
.krow:not(:last-child)::after{content:"";position:absolute;inset-inline-start:-18px;top:0;bottom:0;border-inline-start:2px solid color-mix(in srgb,var(--br) 60%,transparent)}
.card{min-width:86px;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:8px 12px 7px;text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);border-color:var(--br);box-shadow:var(--shadow)}
.card .ord{display:block;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.card .nm{display:block;font-family:var(--f-name);font-weight:700;font-size:18px;line-height:1.5;white-space:nowrap}
.card .sub{display:block;font-size:11px;color:var(--muted);white-space:nowrap}
.card.has .sub{color:var(--br);font-weight:600}
.card.leaf{background:var(--bg)}
.card.sel{outline:2px solid var(--br);outline-offset:1px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-start:4px;vertical-align:middle}
.dot.flag{background:var(--flag)}.dot.ok{background:var(--ok)}
.nokids{text-align:center;color:var(--muted);font-size:14px;margin-top:14px}

.side{position:sticky;top:84px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;min-width:0}
@media (max-width:980px){.side{position:static}}
.side h3{font-size:12px;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;font-weight:600}
.side h3:first-child{margin-top:0}
.side .who{font-family:var(--f-name);font-size:24px;font-weight:700;line-height:1.3}
.lineage{font-family:var(--f-name);font-size:16px;line-height:2;background:var(--bg);border-radius:12px;padding:8px 12px;overflow-wrap:anywhere}
.lineage a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted);cursor:pointer}
.lineage .bin{color:var(--muted);font-size:13px}
.sibs{display:flex;flex-wrap:wrap;gap:5px}
.sibs button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:2px 10px;font-size:14px}
.sibs button[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14px;margin:0}
dl.meta dt{color:var(--muted)}
dl.meta dd{margin:0;font-variant-numeric:tabular-nums}
.note{background:var(--soft);border-radius:12px;padding:9px 12px;font-size:14px;white-space:pre-wrap}
.note.flag{background:var(--flag-soft);border-inline-start:3px solid var(--flag)}
.edit{border-top:1px dashed var(--line);margin-top:16px;padding-top:4px}
.field{display:flex;gap:6px;margin-bottom:8px}
.field input,.field select,.edit textarea{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.edit textarea{width:100%;min-height:64px;resize:vertical;display:block;margin-bottom:6px}
.row-btns{display:flex;flex-wrap:wrap;gap:6px}
.confirm{background:var(--flag-soft);border:1px solid var(--flag);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13.5px}
.hint{font-size:12.5px;color:var(--muted);margin:4px 0 0}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 16px 22px;min-width:0}
.panel h2{font-size:18px;margin:0 0 4px}
.panel>p{color:var(--muted);margin:0 0 14px;font-size:14px}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree-wrap{overflow-x:auto}
.tree ul{padding-inline-start:22px}
.tree li{position:relative;padding-inline-start:18px}
.tree li::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;border-inline-start:1.5px solid var(--line)}
.tree li:last-child::before{bottom:auto;height:19px}
.tree li::after{content:"";position:absolute;inset-inline-start:0;top:19px;width:14px;border-top:1.5px solid var(--line)}
.tree>li{padding-inline-start:0}.tree>li::before,.tree>li::after{display:none}
.trow{display:flex;align-items:center;gap:5px;padding:2px 0}
.tog{width:22px;height:22px;border-radius:7px;border:1px solid var(--line);background:var(--paper);color:var(--muted);display:grid;place-items:center;flex:none;padding:0}
.tog.leaf{visibility:hidden}
li.closed>ul{display:none}
li.closed>.trow .tog svg{transform:rotate(90deg)}
.lnode{border:1px solid transparent;background:var(--br-soft);border-radius:9px;padding:3px 10px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.lnode .nm{font-family:var(--f-name);font-weight:700;font-size:16px;color:var(--br)}
.lnode small{font-size:11px;color:var(--muted)}
.pages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pg{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:4px 10px;font-size:13px;font-variant-numeric:tabular-nums;min-width:56px;text-align:center;position:relative;overflow:hidden}
.pg .bar-in{position:absolute;inset-block-end:0;inset-inline-start:0;height:3px;background:var(--ok)}
.pg[aria-pressed="true"]{border-color:var(--ink);background:var(--paper);font-weight:700}
.pg.done{border-color:var(--ok);color:var(--ok)}
.fam{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:var(--bg)}
.fam .head{font-size:13px;color:var(--muted);margin-bottom:6px}
.fam .head b{font-family:var(--f-name);font-size:16px;color:var(--ink)}
.names{display:flex;flex-wrap:wrap;gap:6px}
.nchip{border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:2px 10px;font-family:var(--f-name);font-weight:700;font-size:15px}
.nchip.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.nchip.flag{border-color:var(--flag)}
.bsec{margin-top:18px}
.bsec>h3{font-family:var(--f-name);font-size:19px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.bsec>h3 small{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);font-weight:500}
.brow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:6px}
.brow .bname{font-family:var(--f-name);font-weight:700;font-size:17px;color:var(--br)}
.brow .blin{font-family:var(--f-name);font-size:14px;color:var(--muted);flex:1 1 180px;min-width:0}
.brow .bcount{font-size:12px;border-radius:999px;padding:1px 9px;background:var(--paper);border:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.brow .btns{display:flex;gap:5px;flex-wrap:wrap}
.brow .btns .btn{padding:3px 9px;font-size:12px}
.bsum{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.badge-sug{font-size:12px;border:1px dashed var(--accent);color:var(--accent);border-radius:999px;padding:1px 10px}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:14px}
.log time{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.log .by{color:var(--muted);font-size:12.5px}
.empty{color:var(--muted);text-align:center;padding:24px}
footer{color:var(--muted);font-size:12.5px;margin-top:22px;text-align:center}
.theme{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);display:grid;place-items:center;z-index:30}
@media (max-width:640px){
  h1{font-size:27px}.focus .nm{font-size:32px}
  .card{min-width:72px;padding:7px 9px 6px}.card .nm{font-size:16px}
  .tree ul{padding-inline-start:8px}.tree li{padding-inline-start:13px}.tree li::after{width:10px}
  .bar{position:static}
}

/* ---------- App additions: login, form, submissions ---------- */
.center-card{max-width:440px;margin:8vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px}
.center-card h1{font-size:28px;margin:0 0 4px}
.center-card p{color:var(--muted);margin:0 0 16px;font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;outline:none}
.inp:focus{border-color:var(--accent)}
label.lbl{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.ftree,.ftree ul{list-style:none;margin:0;padding:0}
.ftree ul{padding-inline-start:20px;border-inline-start:1.5px solid var(--line);margin-inline-start:10px}
.ftree li{padding:3px 0}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fname{font-family:var(--f-name);font-weight:700;font-size:18px}
.fname.renamed{color:var(--c-malfi)}
.fname .old{font-family:var(--f-ui);font-size:12px;color:var(--muted);font-weight:400;margin-inline-start:6px;text-decoration:line-through}
.fnew{border:1px solid var(--ok);background:var(--ok-soft);border-radius:9px;padding:5px 10px;font-family:var(--f-name);font-weight:700;font-size:17px;width:170px;max-width:60vw;outline:none}
.fnew.err{border-color:var(--flag);background:var(--flag-soft)}
.fedit{border:1px solid var(--c-malfi);border-radius:9px;padding:5px 10px;font-family:var(--f-name);font-size:17px;width:170px;max-width:60vw;background:var(--paper)}
.mini{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:2px 9px;font-size:12.5px}
.mini.add{border-color:var(--ok);color:var(--ok);font-weight:600}
.mini.del{border-color:var(--flag);color:var(--flag)}
.lineage-bar{font-family:var(--f-name);font-size:16px;color:var(--muted);background:var(--bg);border-radius:12px;padding:8px 12px;margin-bottom:12px}
.declare{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:12px;padding:10px 12px;font-size:14px}
.declare input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.purpose{font-size:13px;color:var(--muted);border-inline-start:3px solid var(--line);padding-inline-start:10px;margin:0 0 14px}
.sub-item{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:8px}
.sub-item b{font-family:var(--f-name);font-size:17px}
.rv-list{list-style:none;margin:0;padding:0}
.rv-list li{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--soft)}
.rv-list input{accent-color:var(--ok);width:17px;height:17px}
.tag{font-size:11.5px;border-radius:999px;padding:1px 8px;border:1px solid var(--line)}
.tag.add{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.tag.ren{border-color:var(--c-malfi);color:var(--c-malfi);background:var(--c-malfi-soft)}
.toast{position:fixed;inset-inline:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);max-width:520px;margin:0 auto;background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 14px;font-size:14px;z-index:40;text-align:center}