/* Lightweight org chart styles - orgchart-lite.css */
#orgchart-root { width:100%; overflow:auto; padding:20px 0; }
.orgchart { display:flex; justify-content:center; align-items:flex-start; flex-direction:column; gap:18px; }
.orgchart ul { padding:0; margin:0; display:flex; justify-content:center; gap:20px; }
.orgchart li { list-style:none; text-align:center; position:relative; padding:10px; }
.orgchart li .node { background:#fff; border:1px solid rgba(0,0,0,0.06); padding:10px 12px; border-radius:8px; min-width:120px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.orgchart li .node img { width:84px; height:84px; object-fit:cover; border-radius:50%; display:block; margin:0 auto 8px; border:3px solid rgba(0,0,0,0.04); }
.orgchart li .node .name { font-weight:600; color:#333; font-size:0.95rem; }
.orgchart li .node .title { font-size:0.85rem; color:#777; }
.orgchart li::before, .orgchart li::after { content:''; position:absolute; top:0; }
/* horizontal connector between siblings */
.orgchart li::before { left:50%; width:2px; height:20px; background:rgba(0,0,0,0.06); transform:translateX(-50%); }
.orgchart li::after { left:0; right:0; height:1px; top:20px; background:transparent; }
/* connector line between parent and children group */
.orgchart .children::before { content:''; position:absolute; left:50%; top:-12px; width:2px; height:12px; background:rgba(0,0,0,0.06); transform:translateX(-50%); }
.orgchart .children { display:flex; justify-content:center; gap:20px; padding-top:12px; position:relative; }
/* center "me" style - use brand variable to match theme */
.orgchart .node.me { border:3px solid var(--brand-tan, #c49a76); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
@media (max-width:768px) {
  .orgchart ul { gap:12px; }
  .orgchart li .node { min-width:90px; padding:8px; }
  .orgchart li .node img { width:64px; height:64px; }
}