/* ==========================================================================
   "On this page" table of contents — ported from Enova's native sidebar TOC.

   Opt-in per post via the Ghost internal tag #table-of-content, which Ghost
   renders as body.tag-hash-table-of-content. Every rule below is gated on
   that class, so this file is inert on every other page.

   Desktop: sticky rail absolutely positioned in the right gutter of the
   .blog-article wrapper (Enova put its TOC in partials/sidebar-right.hbs).
   Narrower: collapsible card above the post content.

   Colours come from Travio's own tokens, so [data-theme=dark] follows along.
   ========================================================================== */

/* Accent for TEXT, per mode. Travio's own text-accent step is 600, but neither
   step clears AA in both modes against --color-background: 600 is 4.89:1 light
   / 3.98:1 dark, 500 is 2.97:1 light / 6.54:1 dark. Taking 600 in light and 500
   in dark clears 4.5:1 on both. The rail thumb stays on 500 in both modes — it
   is a fill, matching Travio's bg-accent-500 chips, not text. */
.snx-toc-wrap { display: none; --snx-accent-text: var(--accent-600, #25763b); }
[data-theme="dark"] .snx-toc-wrap { --snx-accent-text: var(--accent-500, #35944d); }
body.tag-hash-table-of-content.post-template .gh-content h2,
body.tag-hash-table-of-content.post-template .gh-content h3 { scroll-margin-top: var(--snx-anchor, 6.5rem); }

/* Default is the collapsible card; the script promotes it to the gutter rail
   once it has measured that the rail actually fits beside the article
   (html[data-snx-rail]). Deliberately NOT a media query: .blog-article is
   max-w-4xl, whose resolved width differs between theme builds — 1040px on
   stock Travio, wider once --ghost-reading-measure is widened — so a fixed
   breakpoint puts the rail on top of the text on one of them. */
body.tag-hash-table-of-content.post-template .snx-toc-inline { display: block; }
html[data-snx-rail] body.tag-hash-table-of-content.post-template .snx-toc-inline { display: none; }
html[data-snx-rail] body.tag-hash-table-of-content.post-template .snx-toc-side { display: block; }

/* The article is centred in the wrapper, so the gutter on each side is
   (wrapper - article) / 2. The rail's right edge is pinned --snx-toc-gap from
   the article and it grows outward from there; on stock Travio the gutter is
   narrower than the rail, so `right` goes negative and the rail sits partly
   outside the wrapper. The script only sets data-snx-rail when the viewport
   has room for that overhang. */
.snx-toc-side {
	--snx-toc-w: 13rem;
	--snx-toc-gap: 1.5rem;
	position: absolute; top: 0; height: 100%;
	width: var(--snx-toc-w);
	right: calc((100% - var(--snx-article-w, var(--container-4xl, 56rem))) / 2 - var(--snx-toc-gap) - var(--snx-toc-w));
	pointer-events: none;
}
.snx-toc-side .snx-toc-inner {
	position: sticky; top: 6.5rem; pointer-events: auto;
	max-height: calc(100vh - 9rem); overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain;
}

/* Colour and type below are Travio's own defaults, not new values:
     - uppercase label   = text-xs/text-sm + font-bold + text-primary-950,
                           the pattern in partials/common/page-header.hbs and
                           account.hbs (Travio uses no letter-spacing anywhere)
     - secondary text    = text-primary-700, its post-meta/excerpt convention
     - hairline divider  = primary-200, as in post.hbs's own rules
     - card border       = primary-100, its dominant border step
     - accent on text    = --snx-accent-text, set per mode above (accent-500 is
                           a fill token — bg-accent-500 on chips — and Travio
                           uses text-accent-500 zero times)
   Font family is inherited: Travio sets --font-text globally on `*` and has no
   body-font utility class, so not declaring one is what the theme expects.
   --color-primary-400 is undefined in this build and is avoided. */
.snx-toc-title {
	font-size: var(--text-xs, .75rem);
	line-height: var(--text-xs--line-height, 1.33333);
	text-transform: uppercase;
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-primary-950, #222);
	margin: 0 0 .75rem 0;
}
.snx-toc-body { position: relative; padding-left: 1rem; }
.snx-toc-track {
	position: absolute; left: 0; top: 0; width: 2px; height: 100%;
	background: var(--color-primary-200, #d1d1d1); border-radius: 2px;
}
.snx-toc-thumb {
	position: absolute; left: 0; width: 2px; border-radius: 2px;
	background: var(--accent-500, #35944d);
	top: var(--snx-top, 0px); height: var(--snx-height, 0px);
	transition: top .22s cubic-bezier(.4,0,.2,1), height .22s cubic-bezier(.4,0,.2,1);
}
.snx-toc-list { list-style: none; margin: 0; padding: 0; }
.snx-toc-list li { margin: 0; }
/* Travio's text-sm — the size it uses for post meta and author lines. */
.snx-toc-list a {
	display: block; padding: .3rem 0 .3rem .25rem;
	font-size: var(--text-sm, .875rem);
	line-height: var(--text-sm--line-height, 1.42857);
	text-decoration: none;
	overflow-wrap: anywhere;
	color: var(--color-primary-700, #4f4f4f);
	transition: color .18s ease;
}
.snx-toc-list a:hover { color: var(--snx-accent-text); }
.snx-toc-list li.snx-lvl-3 a { padding-left: 1rem; }
.snx-toc-list a.snx-active {
	color: var(--snx-accent-text);
	font-weight: var(--font-weight-semibold, 600);
}

.snx-toc-inline {
	margin: 0 0 2rem 0; border: 1px solid var(--color-primary-100, #e7e7e7);
	border-radius: .5rem; padding: .875rem 1rem;
	background: var(--color-background, transparent);
}
.snx-toc-inline > summary {
	cursor: pointer; list-style: none;
	font-size: var(--text-sm, .875rem);
	line-height: var(--text-sm--line-height, 1.42857);
	text-transform: uppercase;
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-primary-950, #222);
	display: flex; align-items: center; justify-content: space-between;
}
.snx-toc-inline > summary::-webkit-details-marker { display: none; }
.snx-toc-inline > summary::after {
	content: ""; width: .5rem; height: .5rem; margin-left: .75rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease;
}
.snx-toc-inline[open] > summary::after { transform: rotate(-135deg); }
.snx-toc-inline .snx-toc-body { margin-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
	.snx-toc-thumb { transition: none; }
}