/* Smart TOC – Frontend Styles */

.stoc {
	display: block;
	margin: 1.5em 0;
	background: var(--stoc-bg, #f8fafc);
	border: 1px solid var(--stoc-border, #e2e8f0);
	border-radius: var(--stoc-radius, 6px);
	overflow: hidden;
	box-shadow: var(--stoc-shadow, none);
	font-family: inherit;
	font-size: 1em;
}

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

/* Progress bar */
.stoc-progress {
	height: 3px;
	background: rgba(59,130,246,.15);
	background: rgba(var(--stoc-accent-rgb, 59,130,246), .15);
}
.stoc-progress__fill {
	height: 100%;
	width: 0;
	background: var(--stoc-accent, #3b82f6);
	transition: width .12s linear;
	will-change: width;
}

/* Header */
.stoc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	border-bottom: 1px solid var(--stoc-border, #e2e8f0);
	gap: 8px;
	outline: none;
}
.stoc__header[role="button"] { cursor: pointer; user-select: none; }
.stoc__header:focus-visible { outline: 2px solid var(--stoc-accent, #3b82f6); outline-offset: -2px; }

.stoc-title {
	font-size: var(--stoc-title-fs, 115%);
	font-weight: var(--stoc-title-fw, 600);
	color: var(--stoc-title-c, #1e293b);
	line-height: 1.3;
	margin: 0;
}

/* Toggle button */
.stoc-toggle {
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: var(--stoc-title-c, #1e293b);
	opacity: .55;
	flex-shrink: 0;
	line-height: 0;
	transition: opacity .12s;
}
.stoc-toggle:hover { opacity: 1; }
.stoc-toggle:focus-visible { outline: 2px solid var(--stoc-accent, #3b82f6); border-radius: 3px; }

/* Panel */
.stoc__panel { padding: 8px 0 10px; }

/* List */
.stoc-list {
	list-style: none;
	margin: 0;
	padding: 0 14px;
}
.stoc-list .stoc-list {
	padding-left: 14px;
	margin-top: 2px;
}

.stoc-item { margin: 0; padding: 0; }

.stoc-link {
	display: block;
	padding: 4px 4px;
	font-size: var(--stoc-link-fs, 95%);
	font-weight: var(--stoc-link-fw, 400);
	color: var(--stoc-link-c, #475569);
	text-decoration: none;
	line-height: 1.45;
	border-radius: 3px;
	transition: color .13s;
}
.stoc-link:hover  { color: var(--stoc-hover-c, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.stoc-link:visited { color: var(--stoc-visited-c, #7c3aed); }
.stoc-link:focus-visible { outline: 2px solid var(--stoc-accent, #3b82f6); outline-offset: 2px; }

/* Active state (set by JS) */
.stoc-link.is-active {
	color: var(--stoc-accent, #3b82f6) !important;
	font-weight: 600;
}

/* ── Counter styles ───────────────────────── */

/* Decimal: use CSS counters */
.stoc--counter-decimal .stoc-list { counter-reset: stoc-item; }
.stoc--counter-decimal .stoc-list--child { counter-reset: stoc-item; }
.stoc--counter-decimal .stoc-link::before {
	counter-increment: stoc-item;
	content: counters(stoc-item, '.', decimal) '. ';
	font-weight: 500;
	color: color-mix(in srgb, var(--stoc-link-c, #475569) 70%, transparent);
	margin-right: .25em;
	flex-shrink: 0;
}

/* Disc / circle / square: pseudo-element bullet */
.stoc--counter-disc .stoc-link::before  { content: '•'; margin-right: .35em; color: var(--stoc-accent, #3b82f6); }
.stoc--counter-circle .stoc-link::before { content: '○'; margin-right: .35em; color: var(--stoc-accent, #3b82f6); }
.stoc--counter-square .stoc-link::before { content: '▪'; margin-right: .35em; color: var(--stoc-accent, #3b82f6); }

/* ── Reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.stoc-progress__fill,
	.stoc-toggle svg,
	.stoc-link { transition: none !important; }
}