/* scroll-spy-toc.css — shared TOC styles for comparison + intervention reports.
   Neutral .oi-toc namespace. Sticky on desktop (≥1180px), single-row scroll
   on smaller screens to avoid eating viewport height. */

.oi-toc {
	margin: 1.5rem 0 2rem;
	padding: 0.85rem 1.25rem;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
	position: relative;
	z-index: 50;
}
.oi-toc[hidden] { display: none; }

.oi-toc-header {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 0.55rem;
}

/* Single-row nav: overflow scrolls horizontally rather than wrapping on top of
   content below (avoids the layout-bleed that happens when many headings are
   present). */
.oi-toc-nav {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.oi-toc-nav::-webkit-scrollbar { height: 6px; }
.oi-toc-nav::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.oi-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	white-space: nowrap;
}
.oi-toc-item { margin: 0; flex-shrink: 0; }

.oi-toc-link {
	display: inline-block;
	color: #374151;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}
.oi-toc-link:hover,
.oi-toc-link.is-active {
	background: #dbeafe;
	color: #1d4ed8;
}

@media (min-width: 1180px) {
	.oi-toc {
		position: sticky;
		top: 88px;
		z-index: 60;
	}
}

/* Mobile: tighter padding, ensure tap targets meet a11y 44px floor */
@media (max-width: 640px) {
	.oi-toc { padding: 0.7rem 0.9rem; }
	.oi-toc-link {
		padding: 0.55rem 0.8rem;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}