/* ============================================================
   feature-toc.css - W3 On-page Table of Contents
   Sticky horizontal chip bar rendered by feature_toc.py.
   All classes are prefixed ft- per the shared module contract.
   Class inventory: .ft-toc, .ft-toc-inner, .ft-pill, .ft-active
   ============================================================ */

/* Sticky bar shell: sits flush over content, never wraps. */
.ft-toc {
	position: sticky;
	top: 0;
	z-index: 900; /* above page content, below dropdowns/tooltips (1000) */
	background: var(--color-surface-1);
	border-bottom: 1px solid var(--color-border);
}

/* Single scrollable row of pills. Horizontal overflow scrolls inside the
   bar (swipeable on touch); scrollbar chrome is hidden on all engines.
   position:relative anchors pill.offsetLeft for the scroll-spy math. */
.ft-toc-inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-2);
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--space-2) var(--space-5);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;    /* Firefox */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

.ft-toc-inner::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Pills: compact anchor chips. Bar stays ~44px tall:
   14px text + 2x6px pad + 2x1px border + 2x8px inner pad. */
.ft-pill {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--color-text-muted);
	text-decoration: none;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ft-pill:hover {
	color: var(--color-gold-200);
	border-color: var(--color-gold);
}

/* Visible keyboard focus, matching the site's gold glow pattern. */
.ft-pill:focus-visible {
	outline: none;
	box-shadow: var(--glow-gold);
	color: var(--color-gold-200);
	border-color: var(--color-gold);
}

/* Scroll-spy state set by the inline script: gold background tint. */
.ft-pill.ft-active {
	color: var(--color-gold-200);
	border-color: var(--color-gold);
	background: rgba(200, 170, 110, 0.16);
}

/* Anchor targets stop below the sticky bar instead of underneath it. */
[id^="sec-"] {
	scroll-margin-top: 64px;
}

/* Tablet */
@media (max-width: 768px) {
	.ft-toc-inner {
		gap: var(--space-1);
		padding: var(--space-2) var(--space-4);
	}

	.ft-pill {
		padding: 6px 10px;
	}
}

/* Phones: tighter chrome, xs type; still one swipeable row. */
@media (max-width: 480px) {
	.ft-toc-inner {
		padding: var(--space-2) var(--space-3);
	}

	.ft-pill {
		font-size: var(--font-size-xs);
		padding: 5px 9px;
	}

	[id^="sec-"] {
		scroll-margin-top: 56px;
	}
}