/**
 * The contents list (#490): one component for reviews and every other page.
 *
 * Loaded by page-toc, hub-toc and review-toc (the latter two by handle), so
 * there is one stylesheet for one markup (PFG_Toc::markup()).
 *
 *   <1720px  a sticky, collapsed "On this page · <current section>" bar under
 *            the subnav, on the reading column's edges. The panel overlays the
 *            page below it rather than pushing it down, scrolls inside, and is
 *            capped at min(60dvh, the space left under the bar). Phones: full
 *            width on 16px gutters, 44px rows.
 *   >=1720px a sticky rail (~220px) hung in the gutter OUTSIDE the 1180px
 *            container, so the column never moves when it appears. It starts
 *            where the block sits and stops at the end of its parent.
 *
 * The look is the site's: a flat surface-1 panel on a white hairline, 16px
 * radius, hover as the hairline brightening, sentence case, and exactly one
 * accent mark, the dot on the current entry, which follows the vertical
 * through `--acc`.
 *
 * HOW THE RAIL STAYS OUT OF THE LAYOUT, because it is the part that is easy to
 * break. From 1720px the block's own box becomes an invisible sticky frame:
 * 1180px wide and centred (so it IS the container), one rail-height tall, with
 * a negative bottom margin of the same height so it takes no space in the
 * flow, and `pointer-events: none` so it never sits between the reader and the
 * article. The panel is absolutely positioned to the left of that frame. A
 * float would have been shorter, but these blocks sit in constrained layouts,
 * whose children carry `margin-inline: auto !important`, and that ends any
 * margin-based placement. A frame the full rail height tall is also what stops
 * the rail at the end of its parent: sticky stops the frame's bottom edge at
 * the parent's bottom edge, and the panel is inside the frame.
 */

.pfg-toc {
	/* Where the bar sticks: under the header and the subnav, both of which
	   publish their heights. --pfg-subnav-h is only defined where a subnav is
	   on the page, so a page without one sticks under the header alone. */
	--pfg-toc-top: calc(var(--hdr-h, 73px) + var(--pfg-subnav-h, 0px));

	/* The reading column the bar sits on. 75ch resolves against this box's
	   own font, which it inherits unchanged from the column it sits beside,
	   so no font is set on this element. */
	--pfg-toc-col: var(--wp--custom--layout--document-max, 75ch);

	box-sizing: border-box;
	position: sticky;
	top: var(--pfg-toc-top);
	z-index: 30;
}

/* Templates where the reading column is the 860px article, not 75ch. */
.pfg-rv-artgrid > .pfg-toc,
main:has(> .pfg-method-head) > .pfg-toc {
	--pfg-toc-col: 860px;
}

/* Tripled class for specificity, not for meaning: the hub body sets
   `max-width` and `margin-inline` on every child of post content at (0,2,0),
   and the bar has to sit on the same column without depending on file
   order. Its column lands on the same edges either way. */
.pfg-toc.pfg-toc.pfg-toc {
	width: 100%;
	max-width: var(--pfg-toc-col);
	margin-inline: auto;
}

.pfg-toc__disclosure {
	box-sizing: border-box;
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	border-radius: var(--wp--custom--radius--hero, 16px);
	background: var(--wp--preset--color--surface-1, #14171E);
	font-family: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	transition: border-color 150ms ease;
}

.pfg-toc__disclosure:hover,
.pfg-toc__disclosure[open] {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.14));
}

.pfg-toc__bar {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 14px 0 16px;
	list-style: none;
	cursor: pointer;
	border-radius: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

/* The native disclosure triangle, both engines: the chevron replaces it. */
.pfg-toc__bar::-webkit-details-marker {
	display: none;
}

.pfg-toc__bar::marker {
	content: "";
}

.pfg-toc__bar:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

.pfg-toc__label {
	flex: none;
}

/* The section the reader is in, written by view.js. Empty without script, and
   then the dot in front of it is not drawn either. */
.pfg-toc__current {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	color: var(--wp--preset--color--text-3, #979CAD);
}

.pfg-toc__current:not(:empty)::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin: 0 8px;
	color: var(--wp--preset--color--text-label, #828BA6);
}

.pfg-toc__chev {
	flex: none;
	margin-left: 10px;
	color: var(--wp--preset--color--text-3, #979CAD);
	transition: transform 150ms ease;
}

.pfg-toc__disclosure[open] .pfg-toc__chev {
	transform: rotate(180deg);
}

/* The open panel. Absolute against the sticky box, so opening it covers the
   page below rather than shoving the article down under a stuck bar. */
.pfg-toc__list {
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 8px;
	list-style: none;
	max-height: min(60vh, calc(100vh - var(--pfg-toc-top) - 80px));
	max-height: min(60dvh, calc(100dvh - var(--pfg-toc-top) - 80px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
	border-radius: var(--wp--custom--radius--hero, 16px);
	background: var(--wp--preset--color--surface-1, #14171E);
}

.pfg-toc__list li {
	margin: 0;
}

.pfg-toc__list a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	box-sizing: border-box;
	padding: 8px 12px 8px 24px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--wp--preset--color--text-3, #979CAD);
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
}

.pfg-toc__list a:hover {
	color: var(--wp--preset--color--text-1, #F2F3F8);
	background: var(--hover-wash, rgba(255, 255, 255, 0.04));
}

.pfg-toc__list a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

/* The one accent mark: a dot on the current entry, from the scrollspy. */
.pfg-toc__list a[aria-current="location"] {
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

.pfg-toc__list a[aria-current="location"]::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--acc, #E6FF00);
}

/* Below the rail breakpoint the bar covers 48px under the subnav, which the
   root's scroll-padding (header + subnav) does not know about. Every target
   the list links to clears it too. */
@media (max-width: 1719.98px) {

	:root:has(.pfg-toc) :is(h2[id], [id^="r-"], [id^="a-"]) {
		scroll-margin-top: 56px;
	}
}

/* Phones: the bar spans the screen on 16px gutters and every row is a 44px
   target. Width plus a shift rather than negative margins, because a
   constrained parent's `margin-inline: auto !important` would cancel those. */
@media (max-width: 600px) {

	.pfg-toc.pfg-toc.pfg-toc {
		width: calc(100% + 2 * (var(--gutter, 20px) - 16px));
		max-width: none;
		margin-inline: 0;
		translate: calc(16px - var(--gutter, 20px)) 0;
	}

	.pfg-toc__list a {
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------- rail */

@media (min-width: 1720px) {

	.pfg-toc.pfg-toc.pfg-toc {
		--pfg-toc-rail-h: calc(100vh - var(--pfg-toc-top) - 48px);
		top: calc(var(--pfg-toc-top) + 24px);
		z-index: 1;
		width: 100%;
		max-width: var(--wp--style--global--content-size, 1180px);
		height: var(--pfg-toc-rail-h);
		margin-block: 0 calc(-1 * var(--pfg-toc-rail-h));
		margin-inline: auto;
		pointer-events: none;
	}

	@supports (height: 100dvh) {

		.pfg-toc.pfg-toc.pfg-toc {
			--pfg-toc-rail-h: calc(100dvh - var(--pfg-toc-top) - 48px);
		}
	}

	/* The frame took the first-child slot, so the block after it would now get
	   the flow gap it never had. Give it back the edge it had. */
	.pfg-toc:first-child + * {
		margin-block-start: 0;
	}

	.pfg-toc__disclosure {
		position: absolute;
		top: 0;
		right: calc(100% + 28px);
		width: clamp(180px, calc(50vw - 590px - var(--gutter, 34px) - 28px), 220px);
		max-height: 100%;
		padding: 6px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		pointer-events: auto;
	}

	.pfg-toc__bar {
		min-height: 36px;
		padding: 0 10px;
		font-size: 12.5px;
		font-weight: 600;
		color: var(--wp--preset--color--text-label, #828BA6);
	}

	/* The rail lists everything with the current entry marked; the bar's
	   running label would repeat it. */
	.pfg-toc__current {
		display: none;
	}

	.pfg-toc__chev {
		margin-left: auto;
	}

	/* Open (view.js holds it open here), the summary is the rail's kicker. */
	.pfg-toc__disclosure[open] .pfg-toc__chev {
		display: none;
	}

	.pfg-toc__disclosure[open] .pfg-toc__bar {
		cursor: default;
	}

	.pfg-toc__list {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 2px 0 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.pfg-toc__list a {
		min-height: 34px;
		padding: 6px 10px 6px 24px;
		font-size: 13.5px;
	}

	/* No script: where the browser can style the disclosure's content slot,
	   show the list anyway, so the rail is a rail without view.js. Elsewhere
	   the rail is a closed bar that opens on click, which still works. */
	@supports selector(::details-content) {

		.pfg-toc__disclosure:not([open])::details-content {
			content-visibility: visible;
		}

		.pfg-toc__chev {
			display: none;
		}

		.pfg-toc__bar {
			pointer-events: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.pfg-toc__disclosure,
	.pfg-toc__chev,
	.pfg-toc__list a {
		transition: none;
	}
}