/* ==================================================
	Vertical tree with connector lines (decorative)
	- Single column
	- Semantic lists
	- High contrast borders
================================================== */

.org-chart
{
	padding: 1rem;
	max-width: 900px;
	height: 100vh;
}

.org-root,
.org-branch
{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Each item has room for connector elbows */
.org-item
{
	position: relative;
	padding-left: 2.25rem;
	margin: .75rem 0;
}

/* The vertical trunk line for the branch */
.org-branch
{
	margin-top: .6rem;
	margin-left: .75rem;
	padding-left: 1.5rem;
	border-left: 2px solid #004881;
}

/* Elbow connector from trunk to card */
.org-item::before
{
	content: "";
	position: absolute;
	left: .75rem;
	top: 30px;
	width: 1.25rem;
	border-top: 4px solid #004881;
}

/* Remove elbow for top-level root items (no left trunk) */
.org-root > .org-item
{
	padding-left: 0;
}

.org-root > .org-item::before
{
	display: none;
}

/* Card styling */
.org-card
{
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 12px;
	padding: .75rem .9rem;
	box-shadow: 0 1px 0 rgba(0,0,0,.08);
	max-width: 760px;
}

/* Synthetic supervisor:  */
.org-card.is-synthetic
{
	border: 4px solid #ccc;
}

.org-name
{
	font-size: 1.05rem;
	line-height: 1.2;
	margin-bottom: unset;
}
.org-title
{
	color: #004881;
	font-weight: bold;
}
.org-title,
.org-dept
{
	margin-top: .25rem;
	font-size: .95rem;
	line-height: 1.25;
}

/* Focus visibility (if cards contain links/buttons later) */
.org-card:focus-within,
.org-card:focus
{
	outline: 3px solid #000;
	outline-offset: 3px;
}

@media (max-width: 520px)
{
	.org-chart { padding: .5rem; }
	.org-card { padding: .65rem .75rem; }
	.org-item { padding-left: 1.75rem; }
	.org-item::before { left: .5rem; width: 1rem; }
	.org-branch { margin-left: .5rem; padding-left: 1.25rem; }
}
	.orgname
	{
		background-color: #ffffde;
	}