/* Org chart assets 2026.10.22-7 */
:root{--org-v:"2026.10.22-7"}
*{box-sizing:border-box}
:root{--fg:#fff;--surface:rgba(15,16,18,.78);--surface-solid:rgba(18,19,21,.95);--surface-fg:#fff;--border:rgba(255,255,255,.25);--chip:rgba(255,255,255,.1);
  --line:#ffffff;--node-border:rgba(255,255,255,.6);--topfade:rgba(0,0,0,.45);--glow:rgba(255,255,255,.07);--ring:#fff}
:root[data-theme="day"]{--bg:var(--bg-day);--fg:#1f2328;--surface:rgba(255,255,255,.9);--surface-solid:rgba(255,255,255,.98);--surface-fg:#1f2328;--border:rgba(0,0,0,.2);
  --chip:rgba(0,0,0,.07);--line:#2b2f36;--node-border:rgba(255,255,255,.9);--topfade:rgba(255,255,255,.75);--glow:rgba(255,255,255,.7);--ring:#1f2328;color-scheme:light}
html{transition:none}
body,.panel,.tip,.ctrl,.designs,.legend,.search input{transition:background-color .25s,color .25s,border-color .25s}
[data-theme="day"] .lg-night,:root:not([data-theme="day"]) .lg-day{display:none}
html,body{margin:0;height:100%;overflow:hidden}
body{background:radial-gradient(circle at 50% 35%,var(--glow),transparent 62%),var(--bg);color:var(--fg);font-family:var(--fb);-webkit-font-smoothing:antialiased}
button,input{font-family:inherit}
#stage{position:absolute;inset:0;cursor:grab;touch-action:none;overflow:hidden}
#stage:active{cursor:grabbing}
#lines{position:absolute;inset:0;pointer-events:none}
#nodes{position:absolute;inset:0}
.err{padding:40px;text-align:center}

.node{position:absolute;left:0;top:0;width:138px;height:54px;padding:3px 7px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--c,var(--c-grey));border:1px solid var(--node-border);border-radius:6px;text-align:center;cursor:pointer;user-select:none;
  box-shadow:0 6px 14px rgba(0,0,0,.35);will-change:transform;transition:opacity .25s,box-shadow .2s}
.s-orange{--c:var(--c-orange)}.s-teal{--c:var(--c-teal)}.s-blue{--c:var(--c-blue)}.s-magenta{--c:var(--c-magenta)}.s-grey{--c:var(--c-grey)}
.node .tx{font-size:11px;font-weight:600;line-height:1.2;min-width:0;max-width:100%}
.node .tl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.node.sub .tl{-webkit-line-clamp:2}
.node .tx small{display:block;margin-top:2px;font-weight:400;font-size:9.5px;opacity:.85}
.node .av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.7);flex:none}
.node:hover{box-shadow:0 0 0 2px var(--ring),0 8px 20px rgba(0,0,0,.5)}
.node.dim{opacity:.16}
.node.match{box-shadow:0 0 0 3px var(--ring),0 0 18px var(--ring)}
.node.sel{box-shadow:0 0 0 3px var(--accent),0 0 26px var(--accent)}
.node .tg{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--accent);color:#1b1b1b;font:700 11px/20px var(--fb);text-align:center}
.node .tg:hover{background:#fff}

.ui{position:absolute;z-index:20000}
.top{top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;pointer-events:none;
  background:linear-gradient(var(--topfade),transparent)}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{max-height:44px;max-width:150px;object-fit:contain}
.brand h1{margin:0;font:700 20px/1.1 var(--fh);letter-spacing:.2px}
.brand p{margin:3px 0 0;font-size:12px;opacity:.7}
.search{position:relative}
.search input{width:250px;max-width:46vw;padding:9px 40px 9px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--surface-fg);font-size:13px;outline:none}
.search input:focus{border-color:var(--accent)}
#qc{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.7}

.dock{left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 16px)}
/* safety net if an older index.php is served without the .dock wrapper */
body>.ctrl,body>.designs{left:50%;bottom:18px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 16px)}
.ctrl,.designs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px;border-radius:12px;background:var(--surface);backdrop-filter:blur(8px);max-width:96vw}
.designs button{padding:7px 13px;border:1px solid var(--border);border-radius:18px;background:transparent;color:var(--surface-fg);font-size:12px;cursor:pointer}
.designs button:hover{border-color:var(--accent)}
.designs button.on{background:var(--accent);border-color:var(--accent);color:#1b1b1b;font-weight:600}
.ctrl .nr{display:none!important}
#nodes.h .tg{left:auto;right:-10px;bottom:50%;transform:translateY(50%)}
.ctrl button,.designs button{font-family:inherit}
.ctrl button{padding:8px 13px;border:0;border-radius:8px;background:transparent;color:var(--surface-fg);font-size:12.5px;cursor:pointer}
.ctrl button:hover,.ctrl button.on{background:var(--accent);color:#1b1b1b}
.ctrl button:focus-visible,.panel button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.legend{left:20px;bottom:18px;display:flex;flex-direction:column;gap:6px;font-size:12px;padding:10px 12px;border-radius:10px;background:var(--surface)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}
.hint{right:20px;bottom:22px;font-size:11.5px;opacity:.6;max-width:260px;text-align:right}

.panel{top:calc(var(--top-h,70px) + 16px);right:16px;width:340px;max-height:calc(100% - var(--top-h,70px) - 36px);overflow:auto;padding:0 20px 20px;border-radius:12px;
  background:var(--surface-solid);color:var(--surface-fg);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.55);transform:translateX(125%);transition:transform .3s ease}
.panel.open{transform:none}
.panel .bar{height:6px;margin:0 -20px 16px;background:var(--c);border-radius:12px 12px 0 0}
.panel .x{position:absolute;top:12px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:var(--chip);color:var(--surface-fg);font-size:18px;cursor:pointer}
.panel h2{margin:0 30px 4px 0;font:700 19px/1.25 var(--fh)}
.panel .ct{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.panel .ct a{color:var(--accent);text-decoration:none;font-size:13.5px}
.panel .ds{font-size:13.5px;line-height:1.6;white-space:pre-wrap;opacity:.9}
.panel .muted{font-size:13px;opacity:.55}
.panel h4{margin:18px 0 8px;font:600 13px var(--fh);opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:6px 10px;border:1px solid var(--border);border-radius:14px;background:transparent;color:var(--surface-fg);font-size:12px;cursor:pointer;text-align:left}
.chips button:hover{border-color:var(--accent);color:var(--accent)}

/* people cards: side panel and hover card */
.pc{display:flex;gap:12px;margin:0 0 14px;align-items:flex-start}
.panel .ct a{color:var(--link,var(--accent))}:root[data-theme="day"]{--link:#a35a0a}
.themebtn{padding:9px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--surface-fg);font-size:12.5px;cursor:pointer;white-space:nowrap}
.themebtn:hover{border-color:var(--accent)}
.topr{display:flex;align-items:center;gap:8px}
.pc img,.pc i,.tp img,.tp i{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--c,#666);background:var(--c,#555);display:grid;place-items:center;font:700 20px/48px var(--fh);font-style:normal;text-align:center;color:#fff}
.pc b{font-size:14.5px;display:block}.pc em{display:block;font-style:normal;font-size:12.5px;opacity:.7;margin-top:1px}
.pc p{margin:6px 0 0;font-size:13px;line-height:1.55;opacity:.9;white-space:pre-wrap}
.pc .ct{margin:5px 0 0}
.tip{position:fixed;z-index:30000;left:0;top:0;width:290px;max-width:82vw;padding:0 14px 12px;border-radius:10px;pointer-events:none;
  background:var(--surface-solid);color:var(--surface-fg);box-shadow:0 14px 40px rgba(0,0,0,.55);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.tip.on{opacity:1;transform:none}
.tip .bar{height:5px;margin:0 -14px 10px;background:var(--c);border-radius:10px 10px 0 0}
.tip .tt{display:block;font:700 14px/1.3 var(--fh)}
.tip .td{margin:6px 0 2px;font-size:12px;line-height:1.5;opacity:.85}
.tip .tp{display:flex;gap:10px;margin-top:10px;align-items:flex-start}
.tip .tp img,.tip .tp i{width:38px;height:38px;font-size:15px;line-height:34px}
.tip .tp b{display:block;font-size:12.5px}.tip .tp em{display:block;font-style:normal;font-size:11px;opacity:.7}
.tip .tp small{display:block;margin-top:3px;font-size:11px;line-height:1.45;opacity:.82}
.tip .tm{margin-top:10px;font-size:11px;opacity:.6}
@media (hover:none){.tip{display:none}}
@media (max-width:1100px){
  .hint{display:none}
  .legend{bottom:auto;top:calc(var(--top-h,70px) + 8px)}
}
@media (min-width:721px){
  body.has-panel .dock{left:calc((100% - 356px) / 2);max-width:calc(100vw - 390px)}
}
@media (max-width:720px){
  .brand h1{font-size:16px}.brand img{max-height:34px}
  .top{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
  .topr{width:100%}.search{flex:1;min-width:0}.search input{width:100%;max-width:none}
  .legend{left:8px;right:8px;flex-direction:row;flex-wrap:wrap;gap:3px 12px;font-size:11px;padding:6px 10px}
  .panel{top:auto;left:8px;right:8px;bottom:calc(var(--dock-h,60px) + 28px);width:auto;max-height:calc(100% - var(--top-h,100px) - var(--dock-h,60px) - 60px)}
  .ctrl button{padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){.panel,.node{transition:none}}