.org-scroll { overflow-x: auto; padding-bottom: 10px; }
.tree {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
min-width: fit-content;
}
.tree li {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0;
}
.tree > li { padding-top: 0; }

/* card node */
.org-card {
width: 280px;
max-width: 280px;
overflow: hidden;
border-radius: 1rem;
position: relative;
}
.org-card-root {
background: linear-gradient(135deg, #0a1733, #1e3a8a, #3b82f6);
border: 0;
}
.org-avatar {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, .6);
}
.org-tupoksi {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow-wrap: break-word;
line-height: 1.5;
min-height: 4.5em;
margin-bottom: 0;
}
.org-badge { border-radius: 50rem !important; }

/* drop line from a parent card */
.tree li:has(> ul) > .org-card::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 24px;
background: #93c5fd;
}

/* children container */
.tree ul {
list-style: none;
margin: 0;
padding: 20px 0 0;
display: flex;
justify-content: center;
gap: 20px;
position: relative;
}
.tree ul::before {
content: '';
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 2px;
background: #93c5fd;
}
.tree ul > li {
padding-top: 20px;
position: relative;
}
.tree ul > li::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: #93c5fd;
}
/* single child: collapse the horizontal line */
.tree ul:only-child::before {
left: 50%;
right: 50%;
display: none;
}
.tree ul:only-child > li:only-child::before { display: none; }
.tree ul:only-child > li:only-child { padding-top: 0; }