.tree {
    padding: 0;
	margin: 0 0 0 -1ch;
    --dsz: 1em;
	--mgn: .5em;
}

.tree li {
	display: block;
	position: relative;
	padding-left: 2ch;
}
.tree a {
	display: inline-block;
	margin-left: 2ch;
}
	
.tree ul {
	padding-left: 0;
}

.tree ul li {
    border-left: 1px solid var(--color-gray-form, #ddd);
}

.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before,
.tree summary::after,
.tree details[open] > summary:before {
    content: '';
    position: absolute;
    border: solid var(--color-gray-form, #ddd);
}

.tree ul li::before {
    top: calc(-.5lh - var(--mgn));
    left: -1px;
    width: 2ch;
    height: calc(1lh + var(--mgn));
    border-width: 0 0 1px 1px;
}

.tree summary {
	position: relative;
	display: block;
	cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary:focus-visible {
  outline: 1px dotted var(--color-dark-blue, #555);
}

.tree summary::after {
    top: calc(.5lh - var(--dsz) / 2 - 1px);
    left: calc(var(--dsz) / -2);
    height: var(--dsz);
    width: var(--dsz);
    border-width: 1px;
    border-radius: 50%;
	z-index: 1;
	background: #fff url(/pic/xicons.svg#arrow-r) center / var(--dsz) 60% no-repeat;
	transform: rotate(90deg);
	transition: transform .3s;
}

.tree details[open] > summary::after {
  transform: rotate(270deg);
}
.tree details[open] > summary:before {
    left: 0;
    top: .5lh;
    height: calc(100% - 1lh);
    width: 1px;
    border-width: 0 0 0 1px;
}

.tree ul li,
.tree summary + ul {
	margin-top: var(--mgn);
}

.tree a:hover {
	color: var(--color-dark-blue);
	text-decoration: underline;
}
.tree details > ul {
    clip-path: inset(-9999px -5px -5px calc(var(--dsz) / -2));
    max-height: 0;
	transition: max-height 10s;
}	
.tree details[open] > ul {
    max-height: 9999px;
}