/**
 * Table of contents — v1 has no theme/color picker (see build scope): the
 * box inherits the surrounding page's own type and color instead of fighting
 * it. Only structural CSS lives here (box, list indentation, the
 * <details>/<summary> toggle affordance) — no JS toggle, no theme fork.
 */

.sbg-toc {
	font: inherit;
	color: inherit;
	margin: 1.5em 0;
}

.sbg-toc details {
	border: 1px solid #ddd; /* Fallback for browsers without color-mix() (Safari <16.2, older Firefox/Chromium). */
	border: 1px solid color-mix( in srgb, currentColor 20%, transparent );
	border-radius: 4px;
	padding: 0.6em 1em;
}

.sbg-toc details[ open ] {
	padding-bottom: 1em;
}

.sbg-toc summary {
	cursor: pointer;
	font-weight: 700;
	padding: 0.4em 0;
	list-style: none;
}

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

.sbg-toc summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 0.5em;
	transition: transform 150ms ease;
}

.sbg-toc details[ open ] summary::before {
	transform: rotate( 90deg );
}

.sbg-toc-list,
.sbg-toc-list ul {
	list-style: disc;
	margin: 0.3em 0 0;
	padding-left: 1.3em;
}

.sbg-toc-list {
	padding-left: 0;
	list-style: none;
}

.sbg-toc-list > li > ul {
	list-style: circle;
}

.sbg-toc-list li {
	margin: 0.25em 0;
}

.sbg-toc-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* The anchor span itself carries no visual styling of its own — it's a
   structural marker (TOC link target + schema speakable selector), not a
   design element. */
.sbg-toc-anchor {
	scroll-margin-top: 1.5em;
}

/* Editor-canvas placeholder for the block (see block/index.js) — never
   shown on the front end, the real box is server-rendered there. */
.sbg-toc-block-placeholder {
	border: 1px dashed color-mix( in srgb, currentColor 30%, transparent );
	border-radius: 4px;
	padding: 1em;
	opacity: 0.7;
}