/**
 * Sidebar Outline Accordion - front styles
 */

.soa-root { display: none; }
.soa-root.is-ready { display: block; }

.soa {
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 8px;
	padding: 16px 12px;
	font-size: 14px;
	line-height: 1.6;
	max-height: var(--soa-max-height, 72vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.soa__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #1f2328;
}
.soa__title::before {
	content: "";
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: var(--soa-accent, #3d7bfd);
}

.soa__list,
.soa__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.soa__list li,
.soa__sub li {
	margin: 0;
	padding: 0;
}
.soa__list li::before,
.soa__sub li::before { content: none; }

.soa__link {
	position: relative;
	display: block;
	padding: 7px 10px;
	border-radius: 6px;
	color: #4a5159;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.soa__link:hover {
	background: #f5f7fa;
	color: #1f2328;
}
.soa__link:focus { outline: none; }
.soa__link:focus-visible {
	outline: 2px solid var(--soa-accent, #3d7bfd);
	outline-offset: 1px;
}

/* 親（H2） */
.soa__link--h2.has-children { padding-right: 26px; }
.soa__link--h2.is-active {
	color: #1f2328;
	font-weight: 600;
}
.soa__link--h2.has-children::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 11px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1.5px solid #b6bcc3;
	border-bottom: 1.5px solid #b6bcc3;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .28s ease, border-color .15s ease;
}
.soa__group.is-open > .soa__link--h2::after {
	transform: rotate(-135deg);
	margin-top: -1px;
	border-color: var(--soa-accent, #3d7bfd);
}

/* 子（H3 / H4） */
.soa__sub {
	overflow: hidden;
	max-height: 0;
	transition: max-height .28s ease;
}
.soa__link--h3 {
	margin-left: 10px;
	padding: 5px 10px 5px 14px;
	border-left: 1.5px solid #e6e8eb;
	border-radius: 0 6px 6px 0;
	font-size: 13px;
	color: #6b737b;
}
.soa__link--h3:hover { border-left-color: #cdd3da; }
.soa__link--h4 {
	margin-left: 22px;
	padding: 5px 10px 5px 14px;
	border-left: 1.5px solid #eef0f2;
	border-radius: 0 6px 6px 0;
	font-size: 13px;
	color: #868e96;
}

/* 現在地 */
.soa__link.is-current {
	background: color-mix(in srgb, var(--soa-accent, #3d7bfd) 8%, #fff);
	color: var(--soa-accent, #3d7bfd);
	font-weight: 600;
}
.soa__link--h3.is-current,
.soa__link--h4.is-current { border-left-color: var(--soa-accent, #3d7bfd); }

@supports not (background: color-mix(in srgb, red 8%, #fff)) {
	.soa__link.is-current { background: #f4f6fa; }
}

.soa::-webkit-scrollbar { width: 6px; }
.soa::-webkit-scrollbar-thumb {
	background: #dfe3e8;
	border-radius: 3px;
}
.soa::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
	.soa__link,
	.soa__sub,
	.soa__link--h2.has-children::after { transition: none; }
}