/* DigiDollar TOC — professional, brand-matched Table of Contents.
   Consumes the theme's --dd-* design tokens when present (dd-widgets.css),
   with self-contained fallbacks so the plugin still looks right standalone.
   Logical properties (inline-start/end) keep it correct in RTL and LTR.

   Two complementary surfaces share one visual language:
     • .dd-toc       — the in-content glass card (the real, crawlable nav)
     • .dd-toc-rail  — the sticky desktop reading-tracker (JS clone) with a
                       circular progress ring + a vertical progress spine.
*/

.dd-toc,
.dd-toc-rail {
	--_accent: var(--dd-toc-accent, #e0a300);
	--_grad: var(--dd-grad, linear-gradient(135deg, #fdb837 0%, #ffbf2f 45%, #e0be00 100%));
	--_card: var(--dd-card, #ffffff);
	--_brd: var(--dd-card-brd, rgba(20, 20, 35, .08));
	--_hair: var(--dd-hair, rgba(224, 190, 0, .32));
	--_ink: var(--dd-ink, #18181c);
	--_muted: var(--dd-muted, #6c6c78);
	--_radius: var(--dd-radius, 16px);
	--_shadow: var(--dd-shadow, 0 14px 38px -16px rgba(25, 22, 50, .22));
	--_gold-deep: var(--dd-gold-deep, #9a7d00);
	--_gold-bright: var(--dd-gold-bright, #ffbf2f);
	--_gold-2: var(--dd-gold-2, #fdb837);
	--_tint: rgba(253, 184, 55, .10);
	--_tint-2: rgba(253, 184, 55, .20);

	/* progress-spine geometry (shared by inline + rail) */
	--_node: 26px;          /* numbered node diameter */
	--_node-pad: 12px;      /* link inline-start padding before the node */
	--_spine-x: 24px;       /* spine line inline-start (≈ node centre) */
}

.dd-toc *,
.dd-toc *::before,
.dd-toc *::after,
.dd-toc-rail *,
.dd-toc-rail *::before,
.dd-toc-rail *::after {
	box-sizing: border-box;
}

/* ============================================================= *
 *  IN-CONTENT GLASS CARD
 * ============================================================= */
.dd-toc {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--_card);
	border: 1px solid var(--_hair);
	border-radius: var(--_radius);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	/* soft gold shadow lighting (white/black/gold — no blue) */
	box-shadow: 0 2px 10px rgba(20, 20, 30, .05), 0 16px 40px -22px rgba(224, 170, 0, .45);
	padding: 16px 22px 15px;
	margin: 26px 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--_ink);
	-webkit-font-smoothing: antialiased;
}

/* gold gradient top hairline — the site-wide card signature */
.dd-toc::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--_grad);
	opacity: .92;
}

/* ===== header row ===== */
.dd-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 1.9em;
}

.dd-toc__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 1.06em;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--_ink);
}

.dd-toc__title::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 1.05em;
	border-radius: 4px;
	background: var(--_grad);
}

/* ===== mobile toggle button ===== */
.dd-toc__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 1px solid var(--_hair);
	background: var(--_tint);
	color: var(--_gold-deep);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: .8em;
	font-weight: 700;
	line-height: 1;
	user-select: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.dd-toc__btn:hover {
	background: var(--_tint-2);
}

.dd-toc__chev {
	display: block;
	transition: transform .25s ease;
}

.dd-toc__toggle:checked ~ .dd-toc__head .dd-toc__chev {
	transform: rotate(180deg);
}

.dd-toc:not(.dd-toc--collapse) .dd-toc__btn {
	display: none;
}

/* ===== collapsible panel (CSS-only; content always in the DOM = crawlable) ===== */
.dd-toc__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .28s ease;
}

.dd-toc__panel > * {
	min-height: 0;
	overflow: hidden;
}

.dd-toc--collapse .dd-toc__panel {
	grid-template-rows: 0fr;
}

.dd-toc--collapse .dd-toc__toggle:checked ~ .dd-toc__panel {
	grid-template-rows: 1fr;
}

/* ============================================================= *
 *  SHARED LIST · NODES · PROGRESS SPINE  (inline + rail)
 * ============================================================= */
.dd-toc__list,
.dd-toc__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-toc__list {
	position: relative;          /* offset parent for the spine + node maths */
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--_brd);
}

.dd-toc__sub {
	padding-inline-start: 1.1em;
}

.dd-toc__item {
	margin: 0;
}

.dd-toc__item + .dd-toc__item {
	margin-top: 2px;
}

/* ----- the vertical progress spine (injected by JS as first child of a list) ----- */
.dd-toc__spine {
	position: absolute;
	inset-inline-start: var(--_spine-x);
	width: 2px;
	border-radius: 2px;
	background: var(--_brd);
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.dd-toc__spine-fill {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 0;
	border-radius: 2px;
	background: var(--_grad);
	box-shadow: 0 0 10px -1px var(--_accent);
	transition: height .22s cubic-bezier(.4, 0, .2, 1);
}

/* ----- list links ----- */
.dd-toc__link {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	text-decoration: none;
	color: var(--_ink);
	padding: 7px var(--_node-pad);
	border-radius: 10px;
	line-height: 1.5;
	transition: color .15s ease, background-color .15s ease;
}

.dd-toc__link:hover,
.dd-toc__link:focus-visible {
	color: var(--_gold-deep);
	background: var(--_tint);
	outline: none;
}

.dd-toc__txt {
	flex: 1 1 auto;
	padding-top: 1px;
}

/* ----- numbered node sitting on the spine (default look = hollow) ----- */
.dd-toc__link::before {
	content: "";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--_node);
	height: var(--_node);
	border-radius: 50%;
	background: var(--_card);
	border: 2px solid var(--_brd);
	color: var(--_muted);
	font-weight: 800;
	font-size: .82em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: background .25s ease, border-color .25s ease, color .25s ease,
		box-shadow .25s ease, transform .2s ease;
}

.dd-toc--numbered .dd-toc__list,
.dd-toc--numbered .dd-toc__sub {
	counter-reset: dd-toc;
}

.dd-toc--numbered .dd-toc__link::before {
	counter-increment: dd-toc;
	content: counter(dd-toc);
}

.dd-toc--numbered.dd-toc--deep .dd-toc__link::before {
	content: counters(dd-toc, ".") " ";
	font-size: .72em;
}

/* passed sections: solid gold node */
.dd-toc__link.is-read::before {
	background: var(--_gold-2);
	border-color: var(--_gold-2);
	color: #fff;
}

.dd-toc__link.is-read {
	color: var(--_gold-deep);
}

/* active section: lit-up node + emphasis */
.dd-toc__link.is-active::before {
	background: var(--_accent);
	border-color: var(--_accent);
	color: #fff;
	box-shadow: 0 0 0 4px var(--_tint-2), 0 0 14px -1px var(--_accent);
	transform: scale(1.06);
}

.dd-toc__link.is-active {
	color: var(--_gold-deep);
	font-weight: 700;
	background: linear-gradient(90deg, var(--_tint-2), transparent 92%);
}

/* hover lifts the node a touch */
.dd-toc__link:hover::before {
	border-color: var(--_gold-2);
	color: var(--_gold-deep);
}

.dd-toc__link.is-read:hover::before,
.dd-toc__link.is-active:hover::before {
	color: #fff;
}

/* ===== desktop: keep the inline card open, drop the toggle ===== */
@media (min-width: 782px) {
	.dd-toc {
		padding: 18px 24px 16px;
		font-size: 16px;
	}
	.dd-toc--open-desktop.dd-toc--collapse .dd-toc__panel {
		grid-template-rows: 1fr;
	}
	.dd-toc--open-desktop .dd-toc__btn {
		display: none;
	}
}

@media (max-width: 781px) {
	.dd-toc {
		margin: 22px 0;
		font-size: 15px;
	}
}

/* ============================================================= *
 *  STICKY DESKTOP READING-TRACKER (the rail) — built by JS.
 *  Pinned to the RIGHT gutter (natural start side for RTL).
 * ============================================================= */
.dd-toc-rail {
	position: fixed;
	top: 50%;
	right: 24px;
	left: auto;
	transform: translateY(-50%) translateX(18px);
	width: 270px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;          /* inner body scrolls instead */
	z-index: 9985;
	box-sizing: border-box;
	background: var(--_card);
	border: 1px solid var(--_hair);
	border-radius: 18px;
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	box-shadow: 0 2px 12px rgba(20, 20, 30, .06), 0 22px 52px -24px rgba(224, 170, 0, .5);
	padding: 16px 16px 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--_ink);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s ease;
}

.dd-toc-rail::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--_grad);
	opacity: .92;
}

.dd-toc-rail.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

/* ----- rail header: eyebrow + title + circular progress ring ----- */
.dd-toc-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--_brd);
}

.dd-toc-rail__heading {
	min-width: 0;
}

.dd-toc-rail__eyebrow {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--_muted);
	margin-bottom: 3px;
}

.dd-toc-rail__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 1em;
	font-weight: 800;
	line-height: 1.2;
	color: var(--_ink);
}

.dd-toc-rail__title::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 1.05em;
	border-radius: 4px;
	background: var(--_grad);
}

/* circular progress ring = the headline "how far have I scrolled" indicator */
.dd-toc-rail__ring {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.dd-toc-rail__ring svg {
	width: 100%;
	height: 100%;
	display: block;
	transform: rotate(-90deg);   /* start the arc at 12 o'clock */
}

.dd-toc-rail__ring circle {
	fill: none;
	stroke-width: 3.4;
}

.dd-toc-rail__ring-bg {
	stroke: var(--_brd);
}

.dd-toc-rail__ring-fg {
	stroke: var(--_accent);
	stroke-linecap: round;
	transition: stroke-dashoffset .25s ease;
}

.dd-toc-rail__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--_gold-deep);
	font-variant-numeric: tabular-nums;
}

.dd-toc-rail__pct small {
	font-size: .68em;
	font-weight: 700;
	margin-inline-start: 1px;
	opacity: .7;
}

/* ----- rail body (scrolls); holds the spine + cloned list ----- */
.dd-toc-rail__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-inline: -4px;
	padding: 10px 4px 8px;
}

.dd-toc-rail .dd-toc__list {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.dd-toc-rail .dd-toc__item + .dd-toc__item {
	margin-top: 3px;
}

.dd-toc-rail .dd-toc__link {
	padding: 7px var(--_node-pad);
}

.dd-toc-rail__body::-webkit-scrollbar {
	width: 7px;
}

.dd-toc-rail__body::-webkit-scrollbar-thumb {
	background: var(--_hair);
	border-radius: 7px;
}

.dd-toc-rail__body::-webkit-scrollbar-track {
	background: transparent;
}

@media (max-width: 1199px) {
	.dd-toc-rail {
		display: none !important;
	}
}

/* ============================================================= *
 *  DARK MODE
 * ============================================================= */
html[data-dracula-scheme="dark"] .dd-toc,
html[data-dracula-scheme="dark"] .dd-toc-rail {
	--_card: var(--dd-card, rgba(255, 255, 255, .05));
	--_brd: var(--dd-card-brd, rgba(255, 255, 255, .12));
	--_ink: var(--dd-ink, #f3f1ea);
	--_muted: var(--dd-muted, #9a9aa8);
}

html[data-dracula-scheme="dark"] .dd-toc {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .34), 0 18px 50px -26px rgba(253, 184, 55, .30);
}

html[data-dracula-scheme="dark"] .dd-toc-rail {
	box-shadow: 0 2px 14px rgba(0, 0, 0, .4), 0 24px 56px -26px rgba(253, 184, 55, .32);
}

/* hollow nodes need a darker fill so the ring reads against the glass */
html[data-dracula-scheme="dark"] .dd-toc__link::before {
	background: rgba(255, 255, 255, .04);
}

html[data-dracula-scheme="dark"] .dd-toc__link:hover,
html[data-dracula-scheme="dark"] .dd-toc__link.is-active,
html[data-dracula-scheme="dark"] .dd-toc__link.is-read,
html[data-dracula-scheme="dark"] .dd-toc__btn,
html[data-dracula-scheme="dark"] .dd-toc-rail__pct {
	color: var(--_gold-bright);
}

html[data-dracula-scheme="dark"] .dd-toc__link.is-read::before,
html[data-dracula-scheme="dark"] .dd-toc__link.is-active::before {
	color: #1a1505;
}

/* Standalone dark fallback (no theme tokens present). var-guarded so that when the
   theme IS present its LIGHT token wins — otherwise an OS dark preference would wrongly
   paint a navy box on a light-mode page. */
@media (prefers-color-scheme: dark) {
	:root:not([data-dracula-scheme]) .dd-toc,
	:root:not([data-dracula-scheme]) .dd-toc-rail {
		--_card: var(--dd-card, #1d2030);
		--_brd: var(--dd-card-brd, rgba(255, 255, 255, .12));
		--_ink: var(--dd-ink, #f3f1ea);
		--_muted: var(--dd-muted, #9a9aa8);
	}
}

/* ============================================================= *
 *  REDUCED MOTION
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.dd-toc__panel,
	.dd-toc__chev,
	.dd-toc__link,
	.dd-toc__link::before,
	.dd-toc__spine-fill,
	.dd-toc-rail,
	.dd-toc-rail__ring-fg {
		transition: none;
	}
}