/**
 * THE RAIL — shared sticky section rail.
 *
 * Extracted from the inline rail on /dolly/ (v4.4.1) and /dolly/books/ (v4.4.2-books).
 *
 * THE SAFARI RULES. Every one of these earned its place on a physical iPhone:
 *   1. Solid opaque background. Never transparent, never a gradient over content.
 *   2. NO backdrop-filter. It is force-disabled below, not merely omitted.
 *   3. NO transform on the rail, ever. `transform: none !important` is deliberate.
 *      The rail moves only because its `top` changes with the header state class.
 *   4. The site header is the ONLY positioning authority, via
 *      --lvg-site-header-height, with an intentional 1px overlap to close the seam.
 *   5. .lvg-rail__cap paints an opaque strip ABOVE the rail (bottom:100%) so page
 *      artwork cannot show through the compositor seam during a scroll flip.
 * Changing any of these without a device test will reintroduce a known bug.
 */

/* Tokens per DOLLY_RAIL_IMPLEMENTATION_SCHEMATIC.md section 4. Mapped as aliases, as
   the spec asks, rather than duplicated page-side. */
.lvg-rail {
	--rail-bg: #000;
	--rail-surface: #050507;
	--rail-text: #f7f4fb;
	--rail-muted: rgba(247, 244, 251, 0.68);
	--rail-pink: var(--lvg-pink, #f34fb2);
	--rail-gold: var(--lvg-yellow, #ffd700);
	--rail-line: rgba(243, 79, 178, 0.24);
	--rail-radius-pill: 999px;
	--rail-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lvg-rail {
	position: sticky;
	z-index: 35;
	top: calc(var(--lvg-site-header-height, 85px) - 1px);
	isolation: isolate;
	border-block: 1px solid rgba(255, 79, 179, 0.24);
	background: #000;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transform: none;
}

/* The seam cap: an opaque overscan strip above the rail. Without it, moving page
   artwork bleeds through the hairline gap in Safari while the header animates. */
/* position:sticky is clipped by ANY non-visible overflow on an ancestor — including
   overflow-x:hidden, because hiding one axis forces the other to `auto` and makes the
   element a scroll container. .lvg-edc-page sets overflow-x:hidden for its decorative
   ::before/::after, but both are inset:0 and cannot overflow, so on a rail-bearing page
   the clip is unnecessary and must be lifted or the rail simply scrolls away. */
.lvg-edc-page--rail {
	overflow: visible;
}

/* Anchor targets must clear the header and the rail, or every jump lands underneath
   both of them. Falls back sanely when the JS has not measured yet. */
.lvg-rail-scroll-target {
	scroll-margin-top: calc(var(--lvg-site-header-height, 85px) + var(--lvg-rail-height, 52px) + 12px);
}

.lvg-rail__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
	background: #000;
	pointer-events: none;
}

/* The left action slot stays outside the scrolling section links. */
.lvg-rail__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	max-width: var(--lvg-max, 1180px);
	margin: 0 auto;
}

.lvg-rail__links {
	display: flex;
	min-width: 0;
	width: 100%;
	align-items: center;
	gap: 0.2rem;
	max-width: var(--lvg-max, 1180px);
	margin: 0 auto;
	padding: 0.35rem 0.5rem 0.35rem clamp(1rem, 4vw, 2rem);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	overflow-anchor: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: none;
}

.lvg-rail__links::-webkit-scrollbar {
	display: none;
}

.lvg-rail a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.38rem 0.68rem;
	border: 1px solid transparent;
	border-radius: 999px;
	color: rgba(247, 244, 251, 0.68);
	text-decoration: none;
	font-size: 0.62rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The existing header state chooses the action: brand/navigation or sharing. */
.lvg-rail__actions {
	position: relative;
	width: 104px;
	margin-inline-start: clamp(0.5rem, 2vw, 1rem);
}

.lvg-rail__actions > button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-width: 44px;
	min-height: 44px;
	padding: 0.25rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 900;
	cursor: pointer;
}

.lvg-rail__actions > .lvg-rail__brand,
body.lvg-rail-header-hidden .lvg-rail__actions > .lvg-rail__share {
	display: none;
}

body.lvg-rail-header-hidden .lvg-rail__actions > .lvg-rail__brand {
	display: flex;
}

.lvg-rail__actions button:focus-visible,
.lvg-rail__actions input:focus-visible {
	outline: 2px solid #ffbf57;
	outline-offset: 2px;
}

.lvg-rail__panel {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	width: min(340px, calc(100vw - 32px));
	max-height: calc(100vh - var(--lvg-site-header-height, 85px) - 90px);
	max-height: calc(100svh - var(--lvg-site-header-height, 85px) - 90px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	border: 1px solid #7953a0;
	border-radius: 14px;
	background: #100a21;
	color: #fffaf4;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
	font-size: 0.9rem;
}

.lvg-rail__panel[hidden] { display: none; }
.lvg-rail__panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lvg-rail__panel-heading button { min-width: 44px; min-height: 44px; border: 0; border-radius: 6px; background: #291b3d; color: #fff; font-size: 1.5rem; cursor: pointer; }
.lvg-rail .lvg-rail__panel a { display: flex; justify-content: flex-start; min-height: 44px; padding: 0.5rem; border-radius: 6px; font-size: 0.85rem; letter-spacing: 0; text-transform: none; white-space: normal; }
.lvg-rail__panel label { display: block; margin-block: 1rem 0.4rem; }
.lvg-rail__panel input { width: 100%; min-height: 44px; padding: 0.5rem; border: 1px solid #7953a0; border-radius: 6px; background: #060414; color: #fff; font-size: 16px; }
.lvg-rail__copy { margin-top: 0.75rem; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid #ffbf57; border-radius: 6px; background: #ffbf57; color: #100a21; font: inherit; font-weight: 800; cursor: pointer; }
.lvg-rail__panel p { margin-block: 0.75rem 0; font-size: 0.85rem; line-height: 1.45; }
.lvg-rail__connect { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #7953a0; }
.lvg-rail__connect strong, .lvg-rail__connect span { display: block; }
body:not(.lvg-rail-auto-hide) .lvg-rail__actions { display: none; }
body:not(.lvg-rail-auto-hide) .lvg-rail__inner { grid-template-columns: minmax(0, 1fr); }

.lvg-rail__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var(--rail-radius-pill, 999px);
	background-color: var(--rail-bg, #000);
	background-image:
		linear-gradient(var(--rail-bg, #000), var(--rail-bg, #000)),
		linear-gradient(90deg, #e31c25, #f47b20, #ffd700, #43b649, #3575ff, #a855f7);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	transition: box-shadow 0.2s ease;
}

.lvg-rail__brand:hover,
.lvg-rail__brand:focus-visible {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.16),
		0 0 19px rgba(243, 79, 178, 0.34),
		0 0 11px rgba(53, 117, 255, 0.24);
}

.lvg-rail__brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 26px;
	margin: auto;
	object-fit: contain;
}

/* The story pill.
   The rail sits below the hero, so its first pill owns the headline the reader has just
   scrolled past: it fills pink as they move through the story, and skips it on click.
   The fill is a background gradient stop driven by a custom property the controller
   updates — no transform, no backdrop-filter, nothing that would reopen the Safari
   compositor bug the rest of this file is written around. */
.lvg-rail__pill--story {
	position: relative;
	overflow: hidden;
	margin-inline-end: 0.35rem;
	padding-inline: 0.8rem;
	border-color: var(--lvg-pink, #f34fb2);
	color: var(--lvg-pink, #f34fb2);
	background: transparent;
	transition: border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}

/* Progress reads as a line inside the outline rather than filling the pill. */
.lvg-rail__pill--story::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: var(--lvg-rail-story-fill, 0%);
	background: var(--lvg-pink, #f34fb2);
	transition: width 0.18s linear, opacity 0.35s ease;
}

.lvg-rail__pill--story::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--lvg-pink, #f34fb2);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.lvg-rail__pill--story:hover,
.lvg-rail__pill--story:focus-visible {
	border-color: var(--lvg-pink, #f34fb2);
	color: #fff;
}

.lvg-rail__pill--story:hover::after,
.lvg-rail__pill--story:focus-visible::after {
	opacity: 0.16;
}

/* Entering the story: the pill lights up as the reader moves into it. */
.lvg-rail__pill--story.is-story-active {
	border-color: var(--lvg-pink, #f34fb2);
	color: #ffd6f1;
}

/* Leaving it: the outline and the progress line ease back out rather than freezing
   at full. Without this the pill only ever animated on the way in. */
.lvg-rail__pill--story.is-story-done {
	border-color: rgba(243, 79, 178, 0.34);
	color: rgba(243, 79, 178, 0.62);
}

.lvg-rail__pill--story.is-story-done::before {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lvg-rail__pill--story,
	.lvg-rail__pill--story::before,
	.lvg-rail__pill--story::after {
		transition: none;
	}
}

.lvg-rail a:hover,
.lvg-rail a:focus-visible {
	border-color: rgba(255, 79, 179, 0.34);
	color: #fff;
}

.lvg-rail a:focus-visible {
	outline: 2px solid var(--lvg-edc-gold, #ffbf57);
	outline-offset: 2px;
}

.lvg-rail a[aria-current="location"] {
	border-color: rgba(255, 191, 87, 0.42);
	background: linear-gradient(115deg, rgba(255, 79, 179, 0.19), rgba(255, 191, 87, 0.1));
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--lvg-edc-magenta, #ff4fb3);
}

/* Header-coupled states. The rail's `top` is the only thing that moves. */
body.lvg-rail-auto-hide .lvg-rail {
	top: calc(var(--lvg-site-header-height, 85px) - 1px);
	transform: none !important;
	will-change: auto;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transition: none !important;
	background: #000;
}

body.lvg-rail-auto-hide .lvg-site-header {
	/* Match Dolly/Books: header and rail change position in the same frame. */
	will-change: transform;
	transition: none;
}

body.lvg-rail-auto-hide.lvg-rail-header-hidden .lvg-site-header {
	transform: translate3d(0, -100%, 0);
}

body.lvg-rail-auto-hide.lvg-rail-header-hidden .lvg-rail {
	top: 0;
	transform: none !important;
}

/* Someone who has asked for less motion should not get a sliding header. */
@media (prefers-reduced-motion: reduce) {
	body.lvg-rail-auto-hide .lvg-site-header {
		transition: none;
	}
}

/* No JS: the rail still reads and scrolls, it just does not stick or track. */
.no-js .lvg-rail,
body:not(.lvg-rail-auto-hide) .lvg-rail {
	position: static;
}

@media (max-width: 640px) {
	/* The working Dolly/Books mobile rail also protects its header and ancestors.
	   Keep the header opaque and lift outer clipping for Safari sticky layers. */
	body.lvg-rail-auto-hide .lvg-site-header {
		background: #000 !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		transition: none !important;
	}

	body.lvg-rail-auto-hide,
	body.lvg-rail-auto-hide .lvg-site-shell,
	body.lvg-rail-auto-hide .lvg-site-main {
		overflow-x: visible !important;
	}

	.lvg-rail__links {
		gap: 0.1rem;
		padding-inline: 0.25rem 0.75rem;
	}

	.lvg-rail__actions {
		width: 86px;
		margin-inline-start: 0.5rem;
	}

	.lvg-rail .lvg-rail__links > a {
		min-width: 44px;
		padding-inline: 0.5rem;
		font-size: 0.57rem;
		letter-spacing: 0.055em;
	}
}

@supports selector(:has(*)) {
	@media (max-width: 640px) {
		html:has(body.lvg-rail-auto-hide) {
			overflow-x: visible !important;
		}
	}
}