.collapsible { margin-bottom: 1em }
.collapsible > .clpbutton {
	color: var(--links);
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	cursor: pointer;
	transition: color .2s;
	margin-bottom: 0.25em;
}
.collapsible > .clpbutton:hover { color: var(--links-hover) }
.collapsible > .clpbutton::before { content: "▶"; transition: transform 0.4s; }
.collapsible.active > .clpbutton::before { transform: rotate(90deg) }

.collapsible > .clpcontent {
	padding: 0.3em 1em;
	transition: max-height 0.4s ease;
	background-color: rgba(var(--text--rgb),0.05);
	border: 1px solid rgba(var(--links--rgb),0.5);
}
.clpcontent :not(ul, ol, li) { margin: 0.5em 0 }

.clpcontent hr {
	color: var(--headings);
	opacity: .25;
	width: 33%;
	margin: 1em auto;
}