/* Content Manager Pro — Premium Smart Table of Contents Engine (PHASE 15A2)
 *
 * Purely additive: everything here is scoped under .hpcm-toc-wrap so it
 * can never affect the study layout, archive pages, or theme markup.
 * Loads after hpcm-frontend.css. No JavaScript-driven layout is assumed —
 * every rule here degrades gracefully if hpcm-toc.js fails to load
 * (the desktop nav and mobile button remain visible/usable, just static).
 */

.hpcm-toc-wrap {
	--hpcm-toc-accent: #b5883a;
	--hpcm-toc-copper: #b5883a;
	--hpcm-toc-navy: #232a3b;
	--hpcm-toc-bg: #fffdf9;
	--hpcm-toc-border: #ece2cd;
	--hpcm-toc-text: #262b23;
	--hpcm-toc-muted: #77776c;
	--hpcm-toc-shadow: 0 12px 32px rgba(60, 46, 20, 0.12), 0 2px 8px rgba(60, 46, 20, 0.06);
	--hpcm-toc-radius: 14px;
	--hpcm-toc-sheet-radius: 20px;
	--hpcm-toc-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--hpcm-toc-font-display: 'Source Serif 4', Georgia, serif;

	box-sizing: border-box;
}

.hpcm-toc-wrap,
.hpcm-toc-wrap *,
.hpcm-toc-wrap *::before,
.hpcm-toc-wrap *::after {
	box-sizing: border-box;
	min-width: 0;
}


/* Anchor offset so smooth-scrolled headings don't hide under the fixed
 * progress bar. */
.hpcm-study-layout [id] {
	scroll-margin-top: 84px;
}

/* ---------------- Reading progress bar (fixed, all breakpoints) ----------------
 * Redesigned: the old layout overlapped/overflowed because its flex
 * children had no min-width:0, so text-overflow:ellipsis never actually
 * kicked in and the "current section" heading text just spilled over
 * everything next to it. Fixed here, plus a cleaner pill-style bar that
 * matches the light Ivory Editorial theme instead of the old green. */

.hpcm-toc-progress {
	/* Fixed (not sticky): every sibling in .hpcm-toc-wrap is already
	 * position:fixed or hidden, so the wrapper has almost no height of
	 * its own — a sticky bar inside it has nowhere to actually stick and
	 * scrolls away again within a few pixels. Fixed to the viewport is
	 * what this needs, same approach already used for the desktop TOC
	 * sidebar and the mobile toggle button below. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	max-width: 100%;
	background: var(--hpcm-toc-bg);
	border-bottom: 1px solid var(--hpcm-toc-border);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px clamp(12px, 3vw, 18px);
	font-family: inherit;
	overflow: hidden;
	/* Stays off-screen until the student scrolls past the player/intro
	 * (JS toggles .hpcm-toc-progress--visible), so it never sits on top
	 * of the audio player box at the very start of the article. */
	transform: translateY(-100%);
	transition: transform 0.2s ease;
}

.hpcm-toc-progress.hpcm-toc-progress--visible {
	transform: translateY(0);
}

.hpcm-toc-progress-bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 3px;
	width: 0%;
	max-width: 100%;
	background: linear-gradient(90deg, var(--hpcm-toc-accent), var(--hpcm-toc-navy));
	transition: width 0.12s linear;
}

.hpcm-toc-progress-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px !important;
	font-family: var(--hpcm-toc-font-mono);
	color: var(--hpcm-toc-muted) !important;
	width: 100%;
	max-width: var(--hpcm-study-max-width, 960px);
	margin: 0 auto;
	min-width: 0;
}

.hpcm-toc-progress-percent {
	font-weight: 700;
	color: var(--hpcm-toc-accent) !important;
	flex: 0 0 auto;
	min-width: 2.4em;
}

.hpcm-toc-progress-current {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hpcm-toc-progress-remaining {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-left: 10px;
	border-left: 1px solid var(--hpcm-toc-border);
}

/* On narrow screens the current-section label is the first thing to go —
 * percent + remaining time stay, so the bar never gets cramped. */
@media (max-width: 480px) {
	.hpcm-toc-progress-current {
		display: none;
	}
}

/* ---------------- Desktop sticky sidebar TOC ---------------- */

.hpcm-toc-desktop {
	display: none;
}

@media (min-width: 1380px) {
	.hpcm-toc-desktop {
		display: block;
		position: fixed;
		top: 120px;
		/* Anchored from the right, off the SAME --hpcm-study-max-width the
		 * reading column itself uses (hpcm-study-layout.css), instead of a
		 * hardcoded guess — so this can never drift out of sync with the
		 * content column's actual width again and silently overlap it. */
		right: calc(50% + (var(--hpcm-study-max-width, 960px) / 2) + 40px);
		left: auto;
		width: 236px;
		max-width: calc(50vw - (var(--hpcm-study-max-width, 960px) / 2) - 56px);
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		background: var(--hpcm-toc-bg);
		border: 1px solid var(--hpcm-toc-border);
		border-top: 3px solid var(--hpcm-toc-accent);
		border-radius: var(--hpcm-toc-radius);
		box-shadow: var(--hpcm-toc-shadow);
		padding: 14px;
		z-index: 40;
	}

	/* max-width above keeps the sidebar from ever being wider than the
	 * actual margin next to the content column, so it can shrink but
	 * never grow into an overlap. */

	/* The reading column itself widens past 1600px (hpcm-study-layout.css)
	 * — follow it so the gap to the sidebar stays constant instead of
	 * shrinking as the column grows. */
	@media (min-width: 1600px) {
		.hpcm-toc-desktop {
			right: calc(50% + (var(--hpcm-study-wide-max-width, 1180px) / 2) + 40px);
			max-width: calc(50vw - (var(--hpcm-study-wide-max-width, 1180px) / 2) - 56px);
		}
	}

	.hpcm-toc-collapse-toggle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px 2px 10px;
		border-bottom: 1px dashed var(--hpcm-toc-border);
		margin-bottom: 10px;
		font-family: inherit;
		color: var(--hpcm-toc-text) !important;
	}

	.hpcm-toc-title {
		font-family: var(--hpcm-toc-font-display);
		font-weight: 600;
		font-size: 15px !important;
	}

	.hpcm-toc-title::before {
		content: "\26F0\FE0E  ";
	}

	.hpcm-toc-section-count {
		font-family: var(--hpcm-toc-font-mono);
		font-size: 11px !important;
		font-weight: 600;
		color: var(--hpcm-toc-copper) !important;
	}

	.hpcm-toc-chevron {
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--hpcm-toc-muted);
		border-bottom: 2px solid var(--hpcm-toc-muted);
		transform: rotate(45deg);
		transition: transform 0.18s ease;
	}

	.hpcm-toc-collapse-toggle[aria-expanded="false"] .hpcm-toc-chevron {
		transform: rotate(-45deg);
	}

	.hpcm-toc-collapse-toggle[aria-expanded="false"] + .hpcm-toc-list {
		display: none;
	}
}

/* Hide the desktop nav's own list on the mobile-only markup instance so it
 * never doubles up visually if a theme forces overflow visible below the
 * breakpoint. */
@media (max-width: 1379.98px) {
	.hpcm-toc-desktop {
		display: none;
	}
}

/* ---------------- Shared nested list (desktop + mobile sheet) ---------------- */

.hpcm-toc-list,
.hpcm-toc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hpcm-toc-sublist {
	padding-left: 14px;
	border-left: 2px dashed var(--hpcm-toc-border);
	margin-left: 6px;
}

.hpcm-toc-item {
	margin: 2px 0;
}

.hpcm-toc-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.hpcm-toc-link {
	flex: 1 1 auto;
	display: block;
	padding: 7px 8px;
	border-radius: 8px;
	font-size: 13.5px !important;
	line-height: 1.4;
	text-decoration: none;
	color: var(--hpcm-toc-muted) !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.hpcm-toc-level-3 .hpcm-toc-link {
	font-size: 13px !important;
}

.hpcm-toc-level-4 .hpcm-toc-link {
	font-size: 12.5px !important;
}

.hpcm-toc-link:hover,
.hpcm-toc-link:focus-visible {
	background: rgba(31, 107, 74, 0.08);
	color: var(--hpcm-toc-text) !important;
}

.hpcm-toc-link.hpcm-toc-active {
	background: rgba(185, 121, 58, 0.14);
	color: var(--hpcm-toc-copper) !important;
	font-weight: 700;
}

/* Trail-waypoint markers: a hollow ring for a section not yet reached, a
 * filled pine dot once scrolled past ("visited camp"), and a copper dot
 * with a soft pulsing ring for the section currently in view ("you are
 * here") — reinforcing the ridgeline motif used across the plugin. */
.hpcm-toc-link::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 9px;
	background: var(--hpcm-toc-bg);
	border: 2px solid var(--hpcm-toc-border);
	vertical-align: middle;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hpcm-toc-item.hpcm-toc-completed > .hpcm-toc-row .hpcm-toc-link::before {
	background: var(--hpcm-toc-accent);
	border-color: var(--hpcm-toc-accent);
}

.hpcm-toc-link.hpcm-toc-active::before {
	background: var(--hpcm-toc-copper);
	border-color: var(--hpcm-toc-copper);
	box-shadow: 0 0 0 3px rgba(185, 121, 58, 0.25);
	animation: hpcm-toc-pulse 2.4s ease-in-out infinite;
}

@keyframes hpcm-toc-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(185, 121, 58, 0.25); }
	50% { box-shadow: 0 0 0 6px rgba(185, 121, 58, 0.12); }
}

.hpcm-toc-expand {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.hpcm-toc-expand::before,
.hpcm-toc-expand::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--hpcm-toc-muted);
	transform: translate(-50%, -50%);
}

.hpcm-toc-expand::before {
	width: 10px;
	height: 2px;
}

.hpcm-toc-expand::after {
	width: 2px;
	height: 10px;
	transition: transform 0.15s ease;
}

.hpcm-toc-expand[aria-expanded="false"]::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.hpcm-toc-expand[aria-expanded="false"] ~ .hpcm-toc-sublist,
.hpcm-toc-item:has(> .hpcm-toc-row > .hpcm-toc-expand[aria-expanded="false"]) > .hpcm-toc-sublist {
	display: none;
}

/* ---------------- Mobile: floating button + bottom sheet ---------------- */

.hpcm-toc-mobile-toggle {
	display: none;
}

@media (max-width: 1379.98px) {
	.hpcm-toc-mobile-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		right: 18px;
		bottom: 22px;
		z-index: 60;
		background: linear-gradient(135deg, var(--hpcm-toc-accent), #123f2b);
		color: #fff !important;
		border: none;
		border-radius: 999px;
		padding: 12px 18px;
		font-family: var(--hpcm-toc-font-mono);
		font-size: 12.5px !important;
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		box-shadow: var(--hpcm-toc-shadow), 0 0 0 1px rgba(185, 121, 58, .5) inset;
		cursor: pointer;
	}

	.hpcm-toc-mobile-icon {
		width: 14px;
		height: 10px;
		position: relative;
		display: inline-block;
	}

	.hpcm-toc-mobile-icon::before,
	.hpcm-toc-mobile-icon::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background: #fff;
		border-radius: 1px;
	}

	.hpcm-toc-mobile-icon::before { top: 0; }
	.hpcm-toc-mobile-icon::after { bottom: 0; }
}

.hpcm-toc-mobile-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 26, 0.45);
	z-index: 70;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.hpcm-toc-mobile-backdrop[hidden] {
	display: none;
}

.hpcm-toc-mobile-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--hpcm-toc-bg);
	border-top-left-radius: var(--hpcm-toc-sheet-radius);
	border-top-right-radius: var(--hpcm-toc-sheet-radius);
	box-shadow: var(--hpcm-toc-shadow);
	max-height: 72vh;
	overflow-y: auto;
	padding: 8px 18px 24px;
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.hpcm-toc-mobile-sheet[hidden] {
	display: block; /* keep transition-able; JS toggles .hpcm-toc-open instead */
	transform: translateY(100%);
	visibility: hidden;
	pointer-events: none;
}

.hpcm-toc-mobile-sheet.hpcm-toc-open {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

.hpcm-toc-mobile-backdrop.hpcm-toc-open {
	opacity: 1;
}

.hpcm-toc-mobile-handle {
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--hpcm-toc-border);
	margin: 8px auto 12px;
}

.hpcm-toc-mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.hpcm-toc-mobile-header .hpcm-toc-title {
	font-family: var(--hpcm-toc-font-display);
	font-weight: 600;
	font-size: 16px !important;
	color: var(--hpcm-toc-text) !important;
}

.hpcm-toc-mobile-header .hpcm-toc-title::before {
	content: "\26F0\FE0E  ";
}

.hpcm-toc-mobile-close {
	background: none;
	border: none;
	font-size: 22px !important;
	line-height: 1;
	color: var(--hpcm-toc-muted) !important;
	cursor: pointer;
	padding: 4px 8px;
}

.hpcm-toc-mobile-sheet .hpcm-toc-link {
	padding: 10px 8px;
	font-size: 15px !important;
}

/* Respect reduced-motion preferences across every animated part. */
@media (prefers-reduced-motion: reduce) {
	.hpcm-toc-mobile-sheet,
	.hpcm-toc-mobile-backdrop,
	.hpcm-toc-progress-bar,
	.hpcm-toc-chevron,
	.hpcm-toc-expand::after {
		transition: none !important;
	}

	.hpcm-toc-link.hpcm-toc-active::before {
		animation: none !important;
	}

	.hpcm-study-layout [id] {
		scroll-behavior: auto;
	}
}

/* Focus visibility for keyboard users on every interactive TOC control. */
.hpcm-toc-wrap button:focus-visible,
.hpcm-toc-wrap a:focus-visible {
	outline: 2px solid var(--hpcm-toc-accent);
	outline-offset: 2px;
}