.kl-toc {
	max-width: 760px;
	margin: clamp(1.4rem, 3vw, 2rem) 0;
}

.kl-toc details {
	border: 1px solid var(--kl-border);
	border-radius: var(--kl-radius);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--kl-mint) 24%, transparent), transparent 72%),
		color-mix(in srgb, var(--kl-surface) 94%, var(--kl-paper));
	box-shadow: var(--kl-shadow-soft);
}

.kl-toc summary {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.86rem 1rem;
	color: var(--kl-ink);
	font-weight: 900;
	list-style: none;
	cursor: pointer;
}

.kl-toc summary::-webkit-details-marker {
	display: none;
}

.kl-toc summary::marker {
	content: '';
}

.kl-toc summary:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--kl-leaf) 34%, transparent);
	outline-offset: 3px;
}

.kl-toc summary::after {
	content: '+';
	width: 1.65rem;
	height: 1.65rem;
	flex: 0 0 1.65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--kl-border);
	border-radius: 999px;
	color: var(--kl-leaf);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.95rem;
	font-weight: 900;
	line-height: 1;
}

.kl-toc details[open] summary::after {
	content: '\2212';
}

.kl-toc ol {
	counter-reset: kl-toc;
	display: grid;
	gap: 0.34rem;
	margin: 0;
	padding: 0 1rem 1rem;
	list-style: none;
}

.kl-toc li {
	counter-increment: kl-toc;
	display: grid;
	grid-template-columns: 1.65rem minmax(0, 1fr);
	gap: 0.58rem;
	align-items: start;
	margin: 0;
}

.kl-toc li::before {
	content: counter(kl-toc);
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 0.18rem;
	border: 1px solid color-mix(in srgb, var(--kl-tomato) 38%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--kl-surface) 82%, transparent);
	color: var(--kl-tomato);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	line-height: 1;
}

.kl-toc a {
	display: block;
	min-width: 0;
	padding-block: 0.22rem;
	color: var(--kl-muted);
	font-size: 0.94rem;
	font-weight: 760;
	line-height: 1.35;
	text-decoration: none;
}

.kl-toc a:hover {
	color: var(--kl-leaf);
}

@media (min-width: 1180px) {
	.kl-toc details {
		max-height: calc(100vh - 7rem);
		max-height: calc(100dvh - 7rem);
		overflow: auto;
		border-color: color-mix(in srgb, var(--kl-border-strong) 62%, transparent);
		scrollbar-color: var(--kl-leaf) color-mix(in srgb, var(--kl-surface-2) 78%, transparent);
		box-shadow: 0 10px 24px color-mix(in srgb, var(--kl-ink) 8%, transparent);
	}

	.kl-toc details::-webkit-scrollbar {
		width: 0.55rem;
	}

	.kl-toc details::-webkit-scrollbar-track {
		background: color-mix(in srgb, var(--kl-surface-2) 78%, transparent);
	}

	.kl-toc details::-webkit-scrollbar-thumb {
		border: 2px solid color-mix(in srgb, var(--kl-surface-2) 78%, transparent);
		border-radius: 999px;
		background: var(--kl-leaf);
	}

	.kl-toc summary {
		min-height: 44px;
		padding: 0.72rem 0.82rem;
		font-size: 0.86rem;
		text-transform: uppercase;
	}

	.kl-toc summary::after {
		width: 1.42rem;
		height: 1.42rem;
		flex-basis: 1.42rem;
	}

	.kl-toc ol {
		padding: 0 0.82rem 0.86rem;
	}

	.kl-toc li {
		grid-template-columns: 1.38rem minmax(0, 1fr);
		gap: 0.48rem;
	}

	.kl-toc li::before {
		width: 1.25rem;
		height: 1.25rem;
		font-size: 0.68rem;
	}

	.kl-toc a {
		font-size: 0.86rem;
		line-height: 1.3;
	}
}