/* Table of Contents by J6 Venture — front end
 * Variable-driven: presets set the variables + a few structural rules.
 * Custom mode overrides variables inline and toggles structural classes.
 * ------------------------------------------------------------------ */

.j6toc {
	--j6toc-accent: #0A0A0A;
	--j6toc-accent-contrast: #fff;
	--j6toc-text: inherit;
	--j6toc-link: inherit;
	--j6toc-hover: var(--j6toc-accent);
	--j6toc-active: var(--j6toc-accent);
	--j6toc-title: inherit;
	--j6toc-bg: transparent;
	--j6toc-border: transparent;
	--j6toc-border-width: 0px;
	--j6toc-radius: 10px;
	--j6toc-pad: 0px;
	--j6toc-gap: 0.34em;
	--j6toc-indent: 1.15em;
	--j6toc-font: inherit;
	--j6toc-size: 0.95em;
	--j6toc-title-size: 1.02em;
	--j6toc-title-weight: 700;
	--j6toc-item-weight: 400;
	--j6toc-marker: var(--j6toc-accent);

	margin: 1.6em 0;
	font-family: var(--j6toc-font);
	font-size: var(--j6toc-size);
	line-height: 1.5;
	color: var(--j6toc-text);
	background: var(--j6toc-bg);
	border: var(--j6toc-border-width) solid var(--j6toc-border);
	border-radius: var(--j6toc-radius);
	padding: var(--j6toc-pad);
}

/* ---- Title / summary ---- */
.j6toc-title {
	font-weight: var(--j6toc-title-weight);
	font-size: var(--j6toc-title-size);
	color: var(--j6toc-title);
	margin: 0 0 0.55em;
	display: block;
}
.j6toc-details > .j6toc-title {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.j6toc-details > .j6toc-title::-webkit-details-marker { display: none; }
.j6toc-details > .j6toc-title::before {
	content: "";
	width: 0; height: 0;
	border-left: 6px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transform: rotate(90deg);
	transition: transform 0.18s ease;
	opacity: 0.55;
}
.j6toc-details:not([open]) > .j6toc-title::before { transform: rotate(0deg); }

/* ---- Lists ---- */
.j6toc-list, .j6toc-sublist { margin: 0; padding-left: var(--j6toc-indent); }
.j6toc-item { margin: var(--j6toc-gap) 0; }
.j6toc-gap { list-style: none; margin: 0; }

/* ---- Links ---- */
.j6toc-link {
	color: var(--j6toc-link);
	text-decoration: none;
	font-weight: var(--j6toc-item-weight);
	border-bottom: 1px solid transparent;
	border-radius: 4px;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.j6toc-link:hover, .j6toc-link:focus { color: var(--j6toc-hover); }
.j6toc-spy .j6toc-link.is-active { color: var(--j6toc-active); font-weight: 600; }

/* Hover-effect variants (used by presets + custom .j6toc-h-*) */
.j6toc-h-underline .j6toc-link:hover,
.j6toc-h-underline .j6toc-link:focus { border-bottom-color: var(--j6toc-hover); }
.j6toc-h-background .j6toc-link { padding: 0.05em 0.4em; margin-left: -0.4em; }
.j6toc-h-background .j6toc-link:hover,
.j6toc-h-background .j6toc-link:focus { background: color-mix(in srgb, var(--j6toc-accent) 14%, transparent); color: var(--j6toc-hover); }

/* ---- Marker variants ---- */
.j6toc-m-none .j6toc-list, .j6toc-m-none .j6toc-sublist { list-style: none; padding-left: 0.2em; }
.j6toc-m-none .j6toc-sublist { padding-left: 1em; }
.j6toc-m-dashes .j6toc-list, .j6toc-m-dashes .j6toc-sublist { list-style: none; padding-left: 0.9em; }
.j6toc-m-dashes .j6toc-item:not(.j6toc-gap)::before { content: "–"; color: var(--j6toc-marker); margin-right: 0.5em; margin-left: -0.9em; }

/* Numbered badges (preset + custom .j6toc-m-numbered).
   Badge is placed on the link (inline) so nested sub-lists still stack below. */
.j6toc-m-numbered .j6toc-list, .j6toc-m-numbered .j6toc-sublist { list-style: none; padding-left: 0; counter-reset: j6toc; }
.j6toc-m-numbered .j6toc-sublist { padding-left: 2em; }
.j6toc-m-numbered .j6toc-item:not(.j6toc-gap) { counter-increment: j6toc; }
.j6toc-m-numbered .j6toc-item:not(.j6toc-gap) > .j6toc-link::before {
	content: counter(j6toc);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.55em;
	vertical-align: -0.4em;
	font-size: 0.72em;
	font-weight: 700;
	color: var(--j6toc-accent);
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--j6toc-accent) 40%, transparent);
	border-radius: 7px;
	line-height: 1;
	transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.j6toc-m-numbered .j6toc-item:not(.j6toc-gap) > .j6toc-link.is-active::before {
	background: var(--j6toc-accent); border-color: var(--j6toc-accent); color: var(--j6toc-accent-contrast);
}

/* ---- Structural containers ---- */
.j6toc-c-boxed {
	--j6toc-bg: rgba(0,0,0,0.02);
	--j6toc-border: rgba(0,0,0,0.1);
	--j6toc-border-width: 1px;
	--j6toc-pad: 1em 1.25em;
}
.j6toc-c-bar { --j6toc-pad: 0 0 0 1em; border-left: 3px solid var(--j6toc-accent); border-radius: 0; }
.j6toc-c-dark {
	--j6toc-bg: #0f1115;
	--j6toc-text: #d7dbe0;
	--j6toc-link: #eef1f4;
	--j6toc-title: #fff;
	--j6toc-border: #23262d;
	--j6toc-border-width: 1px;
	--j6toc-pad: 1.1em 1.35em;
}

/* Dividers between items */
.j6toc-has-dividers .j6toc-list > .j6toc-item { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: var(--j6toc-gap); }
.j6toc-has-dividers .j6toc-list > .j6toc-item:last-child { border-bottom: 0; }

/* =====================  PRESETS  =====================
 * Craft language (docs-grade): items are a muted secondary colour and only
 * darken or take the accent on hover / when active; the active row lights up
 * a rail or node; soft rounded hover backgrounds; refined type + transitions.
 * -------------------------------------------------------------------------- */

/* 1. Rail — the docs-sidebar indicator (default) */
.j6toc-p-rail { --j6toc-link: #5b616e; --j6toc-gap: 0; }
.j6toc-p-rail .j6toc-title {
	font-family: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, monospace;
	text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.72em; font-weight: 600;
	color: #63666d; margin-bottom: 0.9em;
}
.j6toc-p-rail .j6toc-list { list-style: none; padding-left: 0; border-left: 2px solid rgba(0,0,0,0.09); }
.j6toc-p-rail .j6toc-sublist { list-style: none; padding-left: 0.7em; border-left: 0; }
.j6toc-p-rail .j6toc-item { margin: 0; }
.j6toc-p-rail .j6toc-link {
	display: block; padding: 0.38em 0.95em; color: var(--j6toc-link);
	border-radius: 0 6px 6px 0; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.j6toc-p-rail .j6toc-link:hover { color: #15171c; background: rgba(0,0,0,0.035); }
.j6toc-p-rail .j6toc-link.is-active {
	color: var(--j6toc-active); font-weight: 600;
	box-shadow: inset 3px 0 0 var(--j6toc-accent);
}
.j6toc-p-rail .j6toc-sublist .j6toc-link { font-size: 0.95em; }

/* 2. Minimal — understated, no box, animated underline */
.j6toc-p-minimal { --j6toc-link: #4a4f57; --j6toc-gap: 0.44em; }
.j6toc-p-minimal .j6toc-title { font-weight: 600; font-size: 1em; letter-spacing: -0.01em; margin-bottom: 0.7em; }
.j6toc-p-minimal .j6toc-list { list-style: none; padding-left: 0; }
.j6toc-p-minimal .j6toc-sublist { list-style: none; padding-left: 1em; }
.j6toc-p-minimal .j6toc-link { position: relative; color: var(--j6toc-link); transition: color 0.15s ease; }
.j6toc-p-minimal .j6toc-link::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
	background: var(--j6toc-accent); transition: width 0.22s cubic-bezier(0.16,1,0.3,1);
}
.j6toc-p-minimal .j6toc-link:hover { color: var(--j6toc-accent); }
.j6toc-p-minimal .j6toc-link:hover::after { width: 100%; }
.j6toc-p-minimal .j6toc-link.is-active { color: var(--j6toc-accent); font-weight: 600; }
.j6toc-p-minimal .j6toc-sublist .j6toc-link { color: #7a808a; }

/* 3. Card — elevated card, hover rows, tinted active */
.j6toc-p-card {
	--j6toc-link: #454b54; --j6toc-gap: 0;
	background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
	padding: 1.15em; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px -12px rgba(16,24,40,0.18);
}
.j6toc-p-card .j6toc-title { font-weight: 700; font-size: 0.95em; letter-spacing: -0.01em; margin: 0 0 0.65em 0.6em; }
.j6toc-p-card .j6toc-list { list-style: none; padding-left: 0; }
.j6toc-p-card .j6toc-sublist { list-style: none; padding-left: 0.9em; }
.j6toc-p-card .j6toc-link { display: block; padding: 0.4em 0.7em; border-radius: 8px; color: var(--j6toc-link); transition: color 0.14s ease, background-color 0.14s ease; }
.j6toc-p-card .j6toc-link:hover { background: rgba(0,0,0,0.045); color: #15171c; }
.j6toc-p-card .j6toc-link.is-active { background: color-mix(in srgb, var(--j6toc-accent) 12%, transparent); color: var(--j6toc-accent); font-weight: 600; }

/* 4. Numbered — outlined mono chips that fill when active */
.j6toc-p-numbered {
	--j6toc-link: #454b54; --j6toc-gap: 0.06em;
	background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
	padding: 1.15em 1.25em; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px -12px rgba(16,24,40,0.18);
}
.j6toc-p-numbered .j6toc-title { font-weight: 700; font-size: 0.95em; margin: 0 0 0.7em; }
.j6toc-p-numbered .j6toc-list, .j6toc-p-numbered .j6toc-sublist { list-style: none; padding-left: 0; counter-reset: j6toc; }
.j6toc-p-numbered .j6toc-sublist { padding-left: 2.4em; }
.j6toc-p-numbered .j6toc-item:not(.j6toc-gap) { counter-increment: j6toc; }
.j6toc-p-numbered .j6toc-link { display: flex; align-items: center; gap: 0.7em; padding: 0.3em 0.4em; border-radius: 8px; color: var(--j6toc-link); transition: color 0.14s ease, background-color 0.14s ease; }
.j6toc-p-numbered .j6toc-item:not(.j6toc-gap) > .j6toc-link::before {
	content: counter(j6toc, decimal-leading-zero); flex: 0 0 auto; width: 1.9em; height: 1.9em;
	display: inline-flex; align-items: center; justify-content: center;
	font: 600 0.72em/1 ui-monospace, "IBM Plex Mono", monospace; color: var(--j6toc-accent);
	border: 1.5px solid color-mix(in srgb, var(--j6toc-accent) 38%, transparent);
	border-radius: 8px; transition: all 0.14s ease;
}
.j6toc-p-numbered .j6toc-link:hover { background: rgba(0,0,0,0.04); color: #15171c; }
.j6toc-p-numbered .j6toc-link.is-active { color: var(--j6toc-accent); font-weight: 600; }
.j6toc-p-numbered .j6toc-item:not(.j6toc-gap) > .j6toc-link.is-active::before { background: var(--j6toc-accent); border-color: var(--j6toc-accent); color: #fff; }

/* 5. Timeline — refined nodes on a track, active node glows */
.j6toc-p-timeline { --j6toc-link: #5b616e; --j6toc-gap: 0.18em; }
.j6toc-p-timeline .j6toc-title { font-weight: 700; font-size: 0.95em; margin: 0 0 0.85em; }
.j6toc-p-timeline .j6toc-list { list-style: none; padding-left: 1.25em; border-left: 2px solid rgba(0,0,0,0.1); }
.j6toc-p-timeline .j6toc-sublist { list-style: none; padding-left: 1em; border-left: 0; }
.j6toc-p-timeline .j6toc-list > .j6toc-item { position: relative; }
.j6toc-p-timeline .j6toc-list > .j6toc-item::before {
	content: ""; position: absolute; left: calc(-1.25em - 5px); top: 0.5em;
	width: 9px; height: 9px; border-radius: 50%; background: #fff;
	border: 2px solid rgba(0,0,0,0.25); transition: all 0.15s ease;
}
.j6toc-p-timeline .j6toc-list > .j6toc-item.j6toc-gap::before { display: none; }
.j6toc-p-timeline .j6toc-link { display: block; padding: 0.24em 0; color: var(--j6toc-link); transition: color 0.15s ease; }
.j6toc-p-timeline .j6toc-link:hover { color: #15171c; }
.j6toc-p-timeline .j6toc-link.is-active { color: var(--j6toc-accent); font-weight: 600; }
.j6toc-p-timeline .j6toc-list > .j6toc-item:has(> .j6toc-link.is-active)::before {
	background: var(--j6toc-accent); border-color: var(--j6toc-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--j6toc-accent) 18%, transparent);
}

/* 6. Dark — premium dark panel, rail indicator */
.j6toc-p-dark {
	--j6toc-link: #9aa3af; --j6toc-gap: 0; --j6toc-title: #fff;
	background: #0d1017; border: 1px solid #1e232c; border-radius: 14px; padding: 1.2em 1.3em;
}
.j6toc-p-dark .j6toc-title {
	font-family: ui-monospace, "IBM Plex Mono", monospace;
	text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.72em; font-weight: 600;
	color: #6b7280; margin-bottom: 0.9em;
}
.j6toc-p-dark .j6toc-list { list-style: none; padding-left: 0; border-left: 2px solid rgba(255,255,255,0.1); }
.j6toc-p-dark .j6toc-sublist { list-style: none; padding-left: 0.7em; border-left: 0; }
.j6toc-p-dark .j6toc-item { margin: 0; }
.j6toc-p-dark .j6toc-link {
	display: block; padding: 0.38em 0.95em; color: var(--j6toc-link);
	border-radius: 0 6px 6px 0; transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.j6toc-p-dark .j6toc-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.j6toc-p-dark .j6toc-link.is-active { color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--j6toc-accent); }
.j6toc-p-dark .j6toc-sublist .j6toc-link { font-size: 0.95em; }

/* 7. Pills — chip items, active fills */
.j6toc-p-pills { --j6toc-link: #4a4f57; --j6toc-gap: 0.2em; }
.j6toc-p-pills .j6toc-title { font-weight: 700; font-size: 0.95em; margin: 0 0 0.7em; }
.j6toc-p-pills .j6toc-list, .j6toc-p-pills .j6toc-sublist { list-style: none; padding-left: 0; }
.j6toc-p-pills .j6toc-sublist { padding-left: 1em; }
.j6toc-p-pills .j6toc-link { display: inline-block; padding: 0.28em 0.85em; border-radius: 999px; color: var(--j6toc-link); background: rgba(0,0,0,0.045); transition: color 0.14s ease, background-color 0.14s ease; }
.j6toc-p-pills .j6toc-link:hover { background: color-mix(in srgb, var(--j6toc-accent) 14%, transparent); color: var(--j6toc-accent); }
.j6toc-p-pills .j6toc-link.is-active { background: var(--j6toc-accent); color: #fff; font-weight: 600; }

/* 8. Callout — accent-tinted info box */
.j6toc-p-callout {
	--j6toc-link: #3f4650; --j6toc-gap: 0.1em;
	background: color-mix(in srgb, var(--j6toc-accent) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--j6toc-accent) 22%, transparent);
	border-left: 3px solid var(--j6toc-accent); border-radius: 10px; padding: 1.05em 1.2em;
}
.j6toc-p-callout .j6toc-title { font-weight: 700; font-size: 0.92em; color: var(--j6toc-accent); margin: 0 0 0.55em; }
.j6toc-p-callout .j6toc-list { list-style: none; padding-left: 0; }
.j6toc-p-callout .j6toc-sublist { list-style: none; padding-left: 0.9em; }
.j6toc-p-callout .j6toc-link { display: block; padding: 0.28em 0.5em; border-radius: 6px; color: var(--j6toc-link); transition: color 0.14s ease, background-color 0.14s ease; }
.j6toc-p-callout .j6toc-link:hover { background: color-mix(in srgb, var(--j6toc-accent) 10%, transparent); color: var(--j6toc-accent); }
.j6toc-p-callout .j6toc-link.is-active { color: var(--j6toc-accent); font-weight: 600; }

/* 9. Bordered — flat outline with accent top rule */
.j6toc-p-bordered {
	--j6toc-link: #454b54; --j6toc-gap: 0;
	border: 1px solid rgba(0,0,0,0.12); border-top: 3px solid var(--j6toc-accent);
	border-radius: 4px; padding: 1.1em 1.25em;
}
.j6toc-p-bordered .j6toc-title {
	font-family: ui-monospace, "IBM Plex Mono", monospace; text-transform: uppercase;
	letter-spacing: 0.1em; font-size: 0.74em; font-weight: 600; color: #6b7280; margin: 0 0 0.7em;
}
.j6toc-p-bordered .j6toc-list { list-style: none; padding-left: 0; }
.j6toc-p-bordered .j6toc-sublist { list-style: none; padding-left: 0.95em; }
.j6toc-p-bordered .j6toc-link { display: block; padding: 0.34em 0; color: var(--j6toc-link); transition: color 0.14s ease; }
.j6toc-p-bordered .j6toc-link:hover { color: var(--j6toc-accent); }
.j6toc-p-bordered .j6toc-link.is-active { color: var(--j6toc-accent); font-weight: 600; }

/* 10. Inline — horizontal chip row (top-of-article) */
.j6toc-p-inline { --j6toc-link: #4a4f57; }
.j6toc-p-inline .j6toc-title {
	font-family: ui-monospace, "IBM Plex Mono", monospace; text-transform: uppercase;
	letter-spacing: 0.12em; font-size: 0.72em; font-weight: 600; color: #9096a1; margin: 0 0 0.7em;
}
.j6toc-p-inline .j6toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.j6toc-p-inline .j6toc-sublist { display: contents; }
.j6toc-p-inline .j6toc-item { margin: 0; display: inline-flex; }
.j6toc-p-inline .j6toc-link { display: inline-block; padding: 0.3em 0.85em; border: 1px solid rgba(0,0,0,0.13); border-radius: 999px; background: #fff; color: var(--j6toc-link); transition: all 0.14s ease; }
.j6toc-p-inline .j6toc-link:hover { border-color: var(--j6toc-accent); color: var(--j6toc-accent); }
.j6toc-p-inline .j6toc-link.is-active { background: var(--j6toc-accent); border-color: var(--j6toc-accent); color: #fff; font-weight: 600; }

/* ---- Editor placeholder ---- */
.j6toc-placeholder { border: 1px dashed rgba(0,0,0,0.25); border-radius: 8px; padding: 1em 1.25em; color: #666; background: rgba(0,0,0,0.02); }
.j6toc-placeholder p { margin: 0; }

/* ---- Dark scheme awareness for the light presets ---- */
@media ( prefers-color-scheme: dark ) {
	/* Default (blank) accent: ink is invisible on dark surfaces, so fall back to a
	   legible near-white. A user-set accent is applied inline and still wins here. */
	.j6toc { --j6toc-accent: #E9E9E2; --j6toc-accent-contrast: #0A0A0A; }

	.j6toc-p-rail { --j6toc-link: #99a0ac; }
	.j6toc-p-rail .j6toc-title { color: #9ba1ad; }
	.j6toc-p-rail .j6toc-list { border-left-color: rgba(255,255,255,0.12); }
	.j6toc-p-rail .j6toc-link:hover { color: #fff; background: rgba(255,255,255,0.05); }

	.j6toc-p-minimal { --j6toc-link: #aab0ba; }
	.j6toc-p-minimal .j6toc-sublist .j6toc-link { color: #868c96; }

	.j6toc-p-card, .j6toc-p-numbered {
		background: #14171d; border-color: rgba(255,255,255,0.1); --j6toc-link: #aab0ba;
		box-shadow: 0 1px 2px rgba(0,0,0,0.4);
	}
	.j6toc-p-card .j6toc-link:hover, .j6toc-p-numbered .j6toc-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
	.j6toc-p-timeline { --j6toc-link: #99a0ac; }
	.j6toc-p-timeline .j6toc-list { border-left-color: rgba(255,255,255,0.14); }
	.j6toc-p-timeline .j6toc-list > .j6toc-item::before { background: #14171d; border-color: rgba(255,255,255,0.3); }

	.j6toc-p-pills { --j6toc-link: #aab0ba; }
	.j6toc-p-pills .j6toc-link { background: rgba(255,255,255,0.06); }
	.j6toc-p-bordered { --j6toc-link: #aab0ba; border-color: rgba(255,255,255,0.14); }
	.j6toc-p-inline { --j6toc-link: #aab0ba; }
	.j6toc-p-inline .j6toc-link { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }
	.j6toc-p-callout { --j6toc-link: #cdd2d9; }

	.j6toc-c-boxed { --j6toc-bg: rgba(255,255,255,0.04); --j6toc-border: rgba(255,255,255,0.14); }
	.j6toc-c-bar { border-left-color: rgba(255,255,255,0.2); }
	.j6toc-has-dividers .j6toc-list > .j6toc-item { border-bottom-color: rgba(255,255,255,0.1); }
}