/* Advanced Table of Contents – front-end (v1.2.0) */

.atoc-wrap {
	--atoc-accent: #1d4ed8;
	--atoc-bg: #f8fafc;
	--atoc-text: #111827;
	--atoc-border: #e2e8f0;
	--atoc-radius: 14px;
	--atoc-size: 16px;
	/* Every top-level item overrides this; children inherit it. */
	--atoc-group: var(--atoc-accent);
	--atoc-tint-1: rgba(0, 0, 0, 0.04);
	--atoc-tint-2: rgba(0, 0, 0, 0.07);
	--atoc-surface: #ffffff;

	box-sizing: border-box;
	position: relative;
	margin: 2em 0;
	padding: 6px;
	background: linear-gradient(180deg, var(--atoc-surface) 0%, var(--atoc-bg) 100%);
	border: 1px solid var(--atoc-border);
	border-radius: var(--atoc-radius);
	color: var(--atoc-text);
	font-size: var(--atoc-size);
	line-height: 1.55;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -28px rgba(15, 23, 42, 0.45);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

.atoc-wrap *,
.atoc-wrap *::before,
.atoc-wrap *::after {
	box-sizing: border-box;
}

/* group tints, with flat fallbacks for older browsers */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.atoc-wrap,
	.atoc-wrap .atoc-item {
		--atoc-tint-1: color-mix(in srgb, var(--atoc-group) 9%, transparent);
		--atoc-tint-2: color-mix(in srgb, var(--atoc-group) 16%, transparent);
	}
}

/* ---------- alignment ---------- */

.atoc-align-center { margin-left: auto; margin-right: auto; }
.atoc-align-left   { float: left;  margin: 0.4em 1.8em 1.4em 0; max-width: 46%; }
.atoc-align-right  { float: right; margin: 0.4em 0 1.4em 1.8em; max-width: 46%; }

/* ---------- skins ---------- */

.atoc-skin-glass {
	background: rgba(255, 255, 255, 0.62);
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 24px 60px -30px rgba(15, 23, 42, 0.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
}

.atoc-skin-outline {
	background: none;
	box-shadow: none;
}

.atoc-skin-flat {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- header ---------- */

.atoc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 8px;
}

.atoc-skin-flat .atoc-head { padding-left: 0; padding-right: 0; }

.atoc-wrap .atoc-master {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 3px 4px;
	background: none;
	border: 0;
	border-radius: 10px;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.atoc-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.05);
	color: var(--atoc-accent);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.atoc-badge {
		background: color-mix(in srgb, var(--atoc-accent) 13%, transparent);
	}
}

.atoc-wrap .atoc-master:hover .atoc-badge { transform: translateY(-1px) scale(1.04); }

.atoc-title {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 1.02em;
	font-weight: 700;
	letter-spacing: -0.015em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atoc-count {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	color: var(--atoc-accent);
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-align: center;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.atoc-count { background: color-mix(in srgb, var(--atoc-accent) 12%, transparent); }
}

.atoc-master .atoc-chev--master {
	margin-left: auto;
	opacity: 0.5;
}

.atoc-wrap .atoc-expand-all {
	flex: 0 0 auto;
	margin: 0;
	padding: 5px 12px;
	background: none;
	border: 1px solid var(--atoc-border);
	border-radius: 999px;
	color: inherit;
	font: inherit;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.6;
	opacity: 0.75;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.atoc-wrap .atoc-expand-all:hover {
	border-color: var(--atoc-accent);
	color: var(--atoc-accent);
	opacity: 1;
}

/* ---------- chevrons ---------- */

.atoc-chev {
	flex: 0 0 auto;
	transform: rotate(90deg);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.atoc-wrap.is-collapsed .atoc-chev--master { transform: rotate(0deg); }
.atoc-item.is-closed > .atoc-row > .atoc-toggle .atoc-chev { transform: rotate(0deg); }

/* ---------- lists ---------- */

.atoc-body { transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.atoc-panel { transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

.atoc-wrap .atoc-list {
	margin: 0;
	padding: 0 6px 8px;
	list-style: none;
}

.atoc-skin-flat .atoc-list { padding-left: 0; padding-right: 0; }

.atoc-wrap .atoc-list .atoc-list {
	margin-left: 15px;
	padding: 2px 0 2px 8px;
	border-left: 2px solid var(--atoc-tint-2);
}

.atoc-wrap:not(.atoc-lines) .atoc-list .atoc-list { border-left-color: transparent; }

.atoc-wrap .atoc-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.atoc-wrap .atoc-item::before,
.atoc-wrap .atoc-item::marker { content: none; }

/* rows */

.atoc-row {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 6px 2px 0;
	border-radius: 10px;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.atoc-row:hover {
	background: var(--atoc-tint-1);
	transform: translateX(2px);
}

.atoc-wrap .atoc-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 1px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--atoc-group);
	opacity: 0.6;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.18s ease, opacity 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.atoc-wrap .atoc-toggle:hover {
	background: var(--atoc-tint-2);
	opacity: 1;
}

.atoc-wrap .atoc-toggle--empty { cursor: default; opacity: 0; }

/* markers – solid chip for the group head, tinted chip for its children */

.atoc-marker {
	flex: 0 0 auto;
	color: var(--atoc-group);
	font-size: 0.74em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.atoc-marker--chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	margin-right: 8px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--atoc-tint-2);
}

.atoc-depth-1 > .atoc-item > .atoc-row > .atoc-marker--chip {
	background: var(--atoc-group);
	color: #fff;
	box-shadow: 0 2px 6px -2px var(--atoc-group);
}

.atoc-marker--plain {
	min-width: 18px;
	margin-right: 6px;
	font-size: 0.9em;
	text-align: center;
}

/* links */

.atoc-wrap .atoc-link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 4px 5px 0;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
	transition: color 0.18s ease;
}

.atoc-wrap .atoc-link:hover,
.atoc-wrap .atoc-link:focus-visible { color: var(--atoc-group); }

.atoc-text {
	display: inline;
	background-image: linear-gradient(var(--atoc-group), var(--atoc-group));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size 0.25s ease;
	word-break: break-word;
}

.atoc-wrap .atoc-link:hover .atoc-text,
.atoc-wrap .atoc-link:focus-visible .atoc-text { background-size: 100% 1.5px; }

/* one look per group: the head is bolder, everything under it matches */
.atoc-depth-1 > .atoc-item > .atoc-row > .atoc-link { font-weight: 700; letter-spacing: -0.01em; }
.atoc-list .atoc-list .atoc-row { font-size: 0.94em; }
.atoc-list .atoc-list .atoc-link { font-weight: 500; }
.atoc-list .atoc-list .atoc-list .atoc-row { font-size: 1em; }

/* active section */

.atoc-row.is-active {
	background: var(--atoc-tint-2);
}

.atoc-row.is-active > .atoc-link {
	color: var(--atoc-group);
	font-weight: 700;
}

.atoc-row.is-active > .atoc-marker--chip {
	background: var(--atoc-group);
	color: #fff;
	box-shadow: 0 2px 8px -2px var(--atoc-group);
}

.atoc-row.is-active > .atoc-toggle { opacity: 1; }

/* focus + motion */

.atoc-wrap a:focus-visible,
.atoc-wrap button:focus-visible {
	outline: 2px solid var(--atoc-group);
	outline-offset: 2px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.atoc-wrap *,
	.atoc-wrap *::before { transition: none !important; }
	.atoc-row:hover { transform: none; }
}

/* ---------- dark mode ---------- */

@media (prefers-color-scheme: dark) {
	.atoc-auto-dark {
		--atoc-surface: #131a26;
		--atoc-bg: #0f1520;
		--atoc-text: #e6e9ef;
		--atoc-border: rgba(255, 255, 255, 0.09);
		--atoc-tint-1: rgba(255, 255, 255, 0.05);
		--atoc-tint-2: rgba(255, 255, 255, 0.1);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -30px rgba(0, 0, 0, 0.9);
	}

	@supports (background: color-mix(in srgb, red 10%, transparent)) {
		.atoc-auto-dark,
		.atoc-auto-dark .atoc-item {
			--atoc-tint-1: color-mix(in srgb, var(--atoc-group) 22%, transparent);
			--atoc-tint-2: color-mix(in srgb, var(--atoc-group) 32%, transparent);
		}
		.atoc-auto-dark .atoc-marker { color: color-mix(in srgb, var(--atoc-group) 45%, #ffffff); }
		.atoc-auto-dark .atoc-row.is-active > .atoc-link,
		.atoc-auto-dark .atoc-link:hover { color: color-mix(in srgb, var(--atoc-group) 40%, #ffffff); }
	}

	.atoc-auto-dark.atoc-skin-glass {
		background: rgba(19, 26, 38, 0.66);
		border-color: rgba(255, 255, 255, 0.08);
	}

	.atoc-auto-dark .atoc-depth-1 > .atoc-item > .atoc-row > .atoc-marker--chip,
	.atoc-auto-dark .atoc-row.is-active > .atoc-marker--chip { color: #0f1520; }
}

/* ---------- mobile ---------- */

@media (max-width: 600px) {
	.atoc-align-left,
	.atoc-align-right { float: none; max-width: 100%; margin: 1.6em 0; }

	.atoc-wrap { font-size: calc(var(--atoc-size) - 1px); }
	.atoc-wrap .atoc-list .atoc-list { margin-left: 10px; padding-left: 6px; }
	.atoc-marker--chip { min-width: 23px; height: 20px; margin-right: 6px; padding: 0 5px; }
	.atoc-wrap .atoc-expand-all { padding: 5px 9px; font-size: 0.68em; }
	.atoc-title { font-size: 0.98em; }
}

/* ---------- heading boxes ---------- */

.atoc-items-boxed .atoc-row,
.atoc-items-card .atoc-list .atoc-list .atoc-row {
	margin: 0 0 6px;
	padding: 3px 10px 3px 3px;
	background: var(--atoc-surface);
	border: 1px solid var(--atoc-tint-2);
	border-radius: 10px;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.atoc-items-boxed .atoc-depth-1 > .atoc-item > .atoc-row {
	padding: 5px 12px 5px 4px;
	background: var(--atoc-tint-1);
	border-color: var(--atoc-tint-2);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.atoc-items-boxed .atoc-row:hover,
.atoc-items-card .atoc-list .atoc-list .atoc-row:hover {
	border-color: var(--atoc-group);
	box-shadow: 0 6px 16px -12px var(--atoc-group);
	transform: translateX(2px);
}

.atoc-items-boxed .atoc-row.is-active,
.atoc-items-card .atoc-row.is-active {
	border-color: var(--atoc-group);
	background: var(--atoc-tint-2);
	box-shadow: inset 3px 0 0 0 var(--atoc-group), 0 6px 16px -12px var(--atoc-group);
}

.atoc-items-boxed .atoc-list .atoc-list,
.atoc-items-card .atoc-list .atoc-list {
	margin-left: 16px;
	padding-top: 0;
	padding-bottom: 0;
}

.atoc-items-boxed .atoc-panel,
.atoc-items-card .atoc-panel { padding-top: 0; }

/* one card per top-level group, sub-headings live inside it */

.atoc-items-card .atoc-depth-1 > .atoc-item {
	margin-bottom: 10px;
	padding: 5px 6px 2px;
	background: var(--atoc-surface);
	border: 1px solid var(--atoc-tint-2);
	border-left: 3px solid var(--atoc-group);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.atoc-items-card .atoc-depth-1 > .atoc-item:hover {
	box-shadow: 0 10px 26px -20px var(--atoc-group);
}

.atoc-items-card .atoc-depth-1 > .atoc-item > .atoc-row {
	margin-bottom: 2px;
	padding: 3px 8px 3px 2px;
	border-radius: 9px;
}

.atoc-items-card .atoc-depth-1 > .atoc-item > .atoc-row:hover { background: var(--atoc-tint-1); }
.atoc-items-card .atoc-depth-1 > .atoc-item:last-child { margin-bottom: 4px; }

.atoc-items-boxed .atoc-list,
.atoc-items-card .atoc-list { padding-bottom: 4px; }

@media (prefers-color-scheme: dark) {
	.atoc-auto-dark.atoc-items-boxed .atoc-row,
	.atoc-auto-dark.atoc-items-card .atoc-depth-1 > .atoc-item {
		background: rgba(255, 255, 255, 0.035);
		box-shadow: none;
	}
}

@media (max-width: 600px) {
	.atoc-items-boxed .atoc-list .atoc-list,
	.atoc-items-card .atoc-list .atoc-list { margin-left: 10px; }
	.atoc-items-boxed .atoc-row { padding-right: 8px; }
}