/* شاشة الشجرة: عمود بارتفاع النافذة، خمسة صفوف لا تتراكب، واللوحة وحدها مرنة (6-ك-2 · 6-ن) */
.treescreen{display:flex;flex-direction:column;height:calc(100dvh - 56px);overflow:hidden}
@media (max-width:860px){.treescreen{height:calc(100dvh - 56px - 64px - env(safe-area-inset-bottom))}}
.tree-toolbar{flex:0 0 56px;height:56px;display:flex;align-items:center;gap:8px;padding:0 10px;background:linear-gradient(180deg,var(--surface),var(--card));border-bottom:1px solid var(--rule);overflow:hidden;white-space:nowrap}
.tree-toolbar .btn{--depth:3px;min-height:48px;height:48px;border-radius:12px}
.tree-toolbar .btn.icon{width:48px;height:48px}
.tree-toolbar .sep{flex:0 0 1px;height:28px;background:var(--rule)}
.depthctl{display:inline-flex;align-items:center;gap:4px;font:600 .9375rem var(--f-head)}
.depthctl output{min-width:2.2em;text-align:center}
.tree-status{margin-inline-start:auto;color:var(--text-dim);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tree-path{flex:0 0 56px;display:flex;align-items:center;gap:6px;padding:0 10px;overflow-x:auto;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--rule)}
.tree-path::-webkit-scrollbar{display:none}
.crumb{flex:0 0 auto;min-height:48px;min-width:48px;padding:0 12px;border-radius:99px;border:1px solid var(--rule);background:var(--surface);color:var(--text);font:500 .875rem var(--f-head);cursor:pointer;border-inline-start:4px solid var(--gc)}
.crumb[aria-current=true]{border-color:var(--accent);box-shadow:var(--glow-gold);color:var(--accent-text)}
.crumb.hist{border-inline-start-width:1px;display:inline-flex;align-items:center;gap:6px}
.crumb.hist svg{width:18px;height:18px}
.tree-path .chev{color:var(--text-hint);flex:0 0 auto}
.tree-mid{flex:1 1 auto;min-height:0;display:flex}
.canvas{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;touch-action:none;cursor:grab;background:var(--surface);background-image:var(--grain),linear-gradient(180deg,var(--raised),var(--surface))}
.canvas:active{cursor:grabbing}
.canvas.heir{background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%,var(--ground) 100%);background-image:var(--grain),radial-gradient(60% 40% at 78% 18%,rgba(255,255,255,.07),transparent 70%),radial-gradient(50% 30% at 20% 30%,rgba(255,255,255,.05),transparent 70%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%,var(--ground) 100%)}
.canvas.heir::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.34) 100%);pointer-events:none}
.canvas svg{display:block;width:100%;height:100%}
.canvas.scroll{overflow:auto;touch-action:auto;cursor:default;padding:24px}
.rail{flex:0 0 28px;display:none;flex-direction:column-reverse;background:var(--card);border-inline-start:1px solid var(--rule)}
@media (min-width:900px){.rail{display:flex}}
.rail button{flex:1 1 0;border:0;border-top:1px solid rgba(0,0,0,.25);background:var(--gc);color:#14100a;font:700 .875rem var(--f-head);cursor:pointer;padding:0;min-height:28px;position:relative}
.rail button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #14100a}
.rail button:disabled{opacity:.28;cursor:default}
.tree-under{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border-top:1px solid var(--rule)}
.minimap{flex:0 0 132px;height:56px;border-radius:8px;border:1px solid var(--rule);background:var(--field);overflow:hidden;cursor:pointer}
.minimap svg{width:100%;height:100%;display:block}
@media (max-width:520px){.minimap{flex-basis:84px}}
.shapes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:2px 2px 6px}
.shapes::-webkit-scrollbar{display:none}
.shapes .btn{flex:0 0 auto;--depth:3px;min-height:48px;font-size:.9375rem;padding:0 14px}
.tree-legend{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 10px calc(6px + env(safe-area-inset-bottom) * 0);background:var(--surface);border-top:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;min-height:60px}
.tree-legend::-webkit-scrollbar{display:none}
.lchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 10px;border-radius:99px;border:1px solid var(--rule);background:var(--card);color:var(--text);font:500 .875rem var(--f-head);cursor:pointer}
.lchip i{width:14px;height:14px;border-radius:4px;background:var(--gc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.lchip[aria-pressed=true]{border-color:var(--accent);box-shadow:var(--glow-gold)}
.lchip.tog{font-weight:600;color:var(--accent-text)}
.lchip .n{color:var(--text-hint)}

/* عناصر الرسم */
.nd{cursor:pointer;outline:none}
.nd .nm{font-family:var(--f-head);font-weight:600;pointer-events:none}
.nd .rootnm{font-family:var(--f-display);font-weight:700}
.nd .sub{font-family:var(--f-body);font-weight:500;pointer-events:none}
.nd .gnum{font:700 11px var(--f-body);fill:#14100a;pointer-events:none}
.kbt{font:700 11px var(--f-body);pointer-events:none}
.kb{cursor:pointer}
.kb:hover rect{filter:url(#fGlow)}
.nd:hover .sway>rect:nth-of-type(2),.nd:hover .sway>path:first-of-type{filter:url(#fGlow)}
.nd:focus-visible .sway>rect,.nd:focus-visible .sway>path:first-of-type{stroke:#FFF0B8;stroke-width:3}
.nd.sel .sway>rect:nth-of-type(2),.nd.sel .sway>rect:first-of-type:last-of-type,.nd.sel.leafn .sway>path:first-of-type{stroke:#FFF0B8;stroke-width:3.2;filter:url(#fGlow)}
.br{fill:url(#gBark);stroke:rgba(40,18,0,.5);stroke-width:.6}
.br.lv3,.br.lv4{fill:url(#gTwig)}
.br.elbow,.br.stroke{fill:none;stroke:#8E4300;stroke-width:2.2;stroke-linecap:round}
.br.stroke{stroke:#A5560A}
.br.lit{fill:url(#gGold);stroke:#FFF0B8;stroke-width:1;filter:url(#fGlow)}
.br.elbow.lit,.br.stroke.lit{fill:none;stroke:#E8CE74;stroke-width:3.4}
.focus .nd:not(.onpath),.focus .br:not(.lit){opacity:.35}
.hl .nd:not(.hit),.hl .br{opacity:.22}
.lodhide .nd:not(.big) .nm,.lodhide .nd .sub,.lodhide .nd:not(.big) .gnum,.lodhide .nd:not(.big) .kb{display:none}
.band{opacity:.16}
.axis line{stroke:var(--rule);stroke-dasharray:3 5}
.axis text,.bandt{font:600 13px var(--f-head);fill:var(--text-dim)}
.lifebar{stroke-width:5;stroke-linecap:round;opacity:.75}
.wm{font:700 64px var(--f-head);fill:var(--text);opacity:.07;pointer-events:none}

/* الحركة: نمو مرة واحدة في الجلسة، ونسيم خفيف للأوراق */
.grow .br{animation:brgrow 520ms var(--ease-grow) both}
.grow .br.lv1{animation-delay:120ms}.grow .br.lv2{animation-delay:260ms}.grow .br.lv3{animation-delay:400ms}.grow .br.lv4{animation-delay:520ms}
.grow .trunk{animation:trunkgrow 380ms var(--ease-grow) both;transform-box:fill-box;transform-origin:50% 100%}
.grow .nd{animation:ndgrow 420ms var(--ease-out) both;animation-delay:300ms}
.grow .nd.deep{animation-delay:560ms}
@keyframes brgrow{from{opacity:0}}
@keyframes trunkgrow{from{transform:scaleY(0)}}
@keyframes ndgrow{from{opacity:0}}
.breeze .leafn .sway{animation:breeze 6s ease-in-out infinite;transform-box:fill-box;transform-origin:8% 50%}
.breeze .leafn.z1 .sway{animation-delay:-1.5s}.breeze .leafn.z2 .sway{animation-delay:-3s}.breeze .leafn.z3 .sway{animation-delay:-4.5s}
@keyframes breeze{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* بطاقة اللمح: طبقة عابرة يفتحها المستخدم، لا تجاوز ثلث اللوحة */
.peek{position:absolute;inset-inline:12px;max-width:520px;margin-inline:auto;max-height:33%;overflow:auto;z-index:5;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,var(--raised),var(--card));border:1px solid var(--accent);box-shadow:var(--e4);animation:rise var(--dur-2) var(--ease-out)}
.peek.top{top:12px}.peek.bottom{bottom:12px}
.peek b{font:600 1.0625rem var(--f-head)}
.peek .acts{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 6px;scrollbar-width:none}
.peek .acts .btn{flex:0 0 auto;--depth:3px;min-height:48px;font-size:.875rem;padding:0 12px}
.pcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pcard{cursor:pointer;border-inline-start:6px solid var(--gc)}
.pcard b{font:600 1.0625rem var(--f-head)}
.printlegend{display:none}
@media print{
  .treescreen{height:auto;overflow:visible;display:block}
  .tree-mid{display:block}.canvas{height:170mm;background:#fff!important}.canvas::after{display:none}
  .peek{display:none}
  .printlegend{display:flex;flex-wrap:wrap;gap:10px;font-size:10pt;border-top:1px solid #999;padding-top:6px;margin-top:6px}
  .focus .nd:not(.onpath),.focus .br:not(.lit){opacity:1}
}
:root[data-low="1"] .nd:hover .sway>*,:root[data-low="1"] .br.lit{filter:none}

/* الشاشات القصيرة: تُدمج الصفوف ولا تُقلَّص لوحة الرسم (6-ن) */
@media (max-height:760px){.tree-legend{display:none}}
@media (max-height:640px){.tree-path{display:none}.minimap{display:none}}
@media (max-height:520px){.tree-under{display:none}}
@media (max-height:520px){body.on-tree .topbar{display:none}.treescreen{height:100dvh}}
@media (max-height:520px) and (max-width:860px){.treescreen{height:calc(100dvh - 64px - env(safe-area-inset-bottom))}}
/* العرض البعيد: تُقرأ البنية بكتل الألوان وسماكة الأغصان، والأسماء تختفي ولا تصغر (6-ل) */
.lodhide .br{stroke:#B87002;stroke-width:1.4px;vector-effect:non-scaling-stroke}
.lodhide .br.lit{stroke:#FFF0B8;stroke-width:2.4px}
.lodhide .nd.leafn[data-gen="1"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="1"] .sway>rect:nth-of-type(2){fill:var(--g1)}
.lodhide .nd.leafn[data-gen="2"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="2"] .sway>rect:nth-of-type(2){fill:var(--g2)}
.lodhide .nd.leafn[data-gen="3"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="3"] .sway>rect:nth-of-type(2){fill:var(--g3)}
.lodhide .nd.leafn[data-gen="4"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="4"] .sway>rect:nth-of-type(2){fill:var(--g4)}
.lodhide .nd.leafn[data-gen="5"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="5"] .sway>rect:nth-of-type(2){fill:var(--g5)}
.lodhide .nd.leafn[data-gen="6"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="6"] .sway>rect:nth-of-type(2){fill:var(--g6)}
.lodhide .nd.leafn[data-gen="7"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="7"] .sway>rect:nth-of-type(2){fill:var(--g7)}
.lodhide .nd.leafn[data-gen="8"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="8"] .sway>rect:nth-of-type(2){fill:var(--g8)}
.lodhide .nd.leafn[data-gen="9"] .sway>path:first-child,.lodhide .nd.cardn[data-gen="9"] .sway>rect:nth-of-type(2){fill:var(--g9)}
.dot{display:none}
.lodhide .nd:not(.big) .dot{display:block;stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lodhide .nd.plaque:not(.big) .dot{stroke-width:10px}