/* =========================================================================
   lwl-path — Phase 2 styles
   The Path: Routes screen + Route Console + retractable left menu
   ---------------------------------------------------------------------
   Aesthetic anchor: the existing journey-stage dark/gold/cinematic look.
   All custom properties prefixed --lwl-path-* so they don't collide.
   ========================================================================= */

:root {
	--lwl-path-bg-0: #02030a;
	--lwl-path-bg-1: #0a0e1f;
	--lwl-path-bg-2: #0f172a;
	--lwl-path-ink-1: #f5f3ee;
	--lwl-path-ink-2: #cbd5e1;
	--lwl-path-ink-3: #94a3b8;
	--lwl-path-gold: #fcd34d;
	--lwl-path-gold-soft: rgba(245, 158, 11, 0.55);
	--lwl-path-gold-line: rgba(245, 158, 11, 0.32);
	--lwl-path-emerald: #34d399;
	--lwl-path-emerald-soft: rgba(52, 211, 153, 0.55);
	--lwl-path-violet: #c084fc;
	--lwl-path-rose: #fb7185;
	--lwl-path-sky: #38bdf8;
	--lwl-path-card: rgba(15, 23, 42, 0.78);
	--lwl-path-card-line: rgba(245, 158, 11, 0.22);
	--lwl-path-card-glow: 0 14px 38px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	--lwl-path-radius-md: 14px;
	--lwl-path-radius-lg: 22px;
	--lwl-path-radius-pill: 999px;
	--lwl-path-fast: 0.18s cubic-bezier(0.32, 0.72, 0.4, 1);
	--lwl-path-mid: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	--lwl-path-slow: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	--lwl-path-menu-w: 320px;
	--lwl-path-menu-w-collapsed: 56px;
}

/* Theme tints per route */
.lwl-path[data-theme="compass-dawn"]   { --lwl-path-route-tint: #f59e0b; --lwl-path-route-tint-soft: rgba(245, 158, 11, 0.32); }
.lwl-path[data-theme="verdant"]        { --lwl-path-route-tint: #34d399; --lwl-path-route-tint-soft: rgba(52, 211, 153, 0.32); }
.lwl-path[data-theme="violet-arcane"]  { --lwl-path-route-tint: #c084fc; --lwl-path-route-tint-soft: rgba(192, 132, 252, 0.32); }
.lwl-path[data-theme="summit-gold"]    { --lwl-path-route-tint: #fcd34d; --lwl-path-route-tint-soft: rgba(252, 211, 77, 0.32); }

/* =========================================================================
   Page shell — the dark backdrop the whole experience sits on
   ========================================================================= */
.lwl-path-page {
	min-height: 100vh;
	background: radial-gradient(ellipse at top, var(--lwl-path-bg-1) 0%, var(--lwl-path-bg-0) 80%);
	color: var(--lwl-path-ink-1);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lwl-path-header {
	padding: 28px 36px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: linear-gradient(180deg, rgba(2,3,10,0.92) 0%, rgba(2,3,10,0.6) 100%);
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(8px);
}
.lwl-path-header__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--lwl-path-ink-1);
}
.lwl-path-header__title .eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--lwl-path-gold);
	text-transform: uppercase;
	margin-bottom: 4px;
	font-weight: 600;
}
.lwl-path-header__crumbs {
	color: var(--lwl-path-ink-3);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-top: 2px;
}
.lwl-path-header__crumbs a {
	color: var(--lwl-path-ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--lwl-path-fast), color var(--lwl-path-fast);
}
.lwl-path-header__crumbs a:hover {
	color: var(--lwl-path-gold);
	border-color: var(--lwl-path-gold-soft);
}
.lwl-path-header__actions {
	display: flex;
	gap: 10px;
	align-items: center;
}
.lwl-path-pill-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--lwl-path-radius-pill);
	border: 1px solid var(--lwl-path-gold-line);
	background: rgba(245, 158, 11, 0.06);
	color: var(--lwl-path-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--lwl-path-fast), border-color var(--lwl-path-fast);
}
.lwl-path-pill-link:hover {
	background: rgba(245, 158, 11, 0.14);
	border-color: var(--lwl-path-gold-soft);
}

/* =========================================================================
   Routes screen — the "choose your route" landing
   ========================================================================= */
.lwl-path-routes {
	max-width: 1080px;
	margin: 0 auto;
	padding: 56px 36px 80px;
}
.lwl-path-routes__intro {
	text-align: center;
	margin-bottom: 44px;
}
.lwl-path-routes__intro h1 {
	font-size: clamp(28px, 4vw, 38px);
	margin: 0 0 12px;
	font-weight: 700;
	color: var(--lwl-path-ink-1);
	letter-spacing: -0.01em;
}
.lwl-path-routes__intro p {
	color: var(--lwl-path-ink-3);
	font-size: 15px;
	margin: 0;
	letter-spacing: 0.04em;
}
.lwl-path-routes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

/* The route card — layered card with gem on the right and a slow-fill bar */
.lwl-path-route {
	display: grid;
	grid-template-columns: 1fr 130px;
	align-items: center;
	gap: 28px;
	padding: 24px 28px;
	background: var(--lwl-path-card);
	border: 1px solid var(--lwl-path-card-line);
	border-radius: var(--lwl-path-radius-lg);
	box-shadow: var(--lwl-path-card-glow);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: transform var(--lwl-path-mid), border-color var(--lwl-path-mid), box-shadow var(--lwl-path-mid);
	isolation: isolate;
}
.lwl-path-route::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 50%, var(--lwl-path-route-tint-soft) 0%, transparent 60%);
	opacity: 0.55;
	z-index: -1;
	pointer-events: none;
	transition: opacity var(--lwl-path-mid);
}
.lwl-path-route:hover {
	transform: translateY(-2px);
	border-color: var(--lwl-path-route-tint);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--lwl-path-route-tint-soft);
}
.lwl-path-route:hover::before {
	opacity: 1;
}

.lwl-path-route__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.lwl-path-route__label {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lwl-path-route-tint);
	font-weight: 700;
	margin: 0;
}
.lwl-path-route__title {
	font-size: 22px;
	margin: 0;
	font-weight: 700;
	color: var(--lwl-path-ink-1);
	letter-spacing: -0.01em;
}
.lwl-path-route__meta {
	display: flex;
	gap: 14px;
	color: var(--lwl-path-ink-3);
	font-size: 12px;
	letter-spacing: 0.06em;
}
.lwl-path-route__meta strong {
	color: var(--lwl-path-ink-2);
	font-weight: 600;
}

/* The slow-fill progress bar */
.lwl-path-route__progress {
	margin-top: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--lwl-path-radius-pill);
	overflow: hidden;
	position: relative;
}
.lwl-path-route__progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--lwl-path-route-tint) 0%, color-mix(in srgb, var(--lwl-path-route-tint) 60%, white) 100%);
	border-radius: inherit;
	box-shadow: 0 0 12px var(--lwl-path-route-tint-soft);
	transition: width var(--lwl-path-slow);
}
.lwl-path-route--locked .lwl-path-route__progress-fill {
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}
.lwl-path-route__progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lwl-path-ink-3);
	margin-top: 4px;
}

/* The gem */
.lwl-path-route__gem {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: drop-shadow(0 6px 18px var(--lwl-path-route-tint-soft));
	transition: transform var(--lwl-path-mid);
}
.lwl-path-route:hover .lwl-path-route__gem {
	transform: rotate(8deg) scale(1.04);
}

.lwl-path-route--locked {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
.lwl-path-route--locked .lwl-path-route__gem {
	filter: grayscale(0.7) brightness(0.5);
}
.lwl-path-route--locked .lwl-path-route__title { color: var(--lwl-path-ink-3); }

/* =========================================================================
   Route console — header + retractable left menu + main viewport
   ========================================================================= */
.lwl-path-console {
	/* r10: single-column — menu is now a dropdown overlay anchored to the
	   sticky header trigger, no longer eats a column. Lesson viewport
	   takes the full width. */
	display: block;
	min-height: calc(100vh - 80px);
	position: relative;
}
/* r9.2: when collapsed the grid becomes a single column — the menu is FLOATED
   absolutely so the viewport centres on the full width without the toggle
   icon eating a column. The toggle button itself floats over the top-left. */
/* r10: .is-collapsed kept for backward compat but no-op now (single-column) */
/* r10: collapsed-menu rule retired — menu is now a dropdown */
/* r10: in-aside toggle is hidden — header trigger replaces it */
.lwl-path-menu__toggle {
	display: none !important;
}
.lwl-path-console.is-collapsed .lwl-path-menu__toggle {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	margin: 12px;
	padding: 0;
	background: rgba(15, 23, 42, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(252, 211, 77, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease, color 240ms ease;
}
.lwl-path-console.is-collapsed .lwl-path-menu__toggle:hover {
	transform: scale(1.05);
	background: rgba(15, 23, 42, 0.95);
	box-shadow: 0 10px 28px rgba(252, 211, 77, 0.22), inset 0 0 0 1px rgba(252, 211, 77, 0.18);
}

/* --- Left retractable menu --- */
.lwl-path-menu {
	/* r10.1: dropdown overlay — JS dynamically positions it just below
	   the trigger button via getBoundingClientRect (works regardless of
	   the global journey-stage shell header height). Initially hidden;
	   .is-menu-open reveals with slide-down + fade. */
	position: fixed;
	top: 80px; /* JS overrides — fallback if JS fails */
	left: 18px;
	width: 360px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overflow-x: hidden;
	background: rgba(2, 3, 10, 0.96);
	border: 1px solid rgba(252, 211, 77, 0.18);
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
	z-index: 60;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px);
	transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lwl-path-console.is-menu-open .lwl-path-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
/* Backdrop layer — clicking outside closes the dropdown */
.lwl-path-console.is-menu-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 55;
	opacity: 0;
	animation: lwl-path-dropdown-backdrop-in 200ms ease forwards;
}
@keyframes lwl-path-dropdown-backdrop-in {
	to { opacity: 1; }
}
.lwl-path-menu__toggle {
	position: sticky;
	top: 0;
	width: 100%;
	height: 48px;
	background: rgba(15, 23, 42, 0.85);
	color: var(--lwl-path-ink-2);
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	z-index: 10;
}
.lwl-path-menu__toggle:hover { color: var(--lwl-path-gold); }
.lwl-path-menu__toggle svg { width: 18px; height: 18px; transition: transform var(--lwl-path-mid); }
.is-collapsed .lwl-path-menu__toggle svg { transform: rotate(180deg); }
.is-collapsed .lwl-path-menu__toggle .label { display: none; }

.lwl-path-menu__inner {
	padding: 14px 0 28px;
	opacity: 1;
	visibility: visible;
	transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.is-collapsed .lwl-path-menu__inner {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms;
}

/* Stepping stone group */
.lwl-path-stone {
	margin-bottom: 4px;
}
.lwl-path-stone__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 18px;
	background: transparent;
	border: 0;
	color: var(--lwl-path-ink-2);
	cursor: pointer;
	text-align: left;
	font-size: 13px;
	font-weight: 500;
	transition: background var(--lwl-path-fast), color var(--lwl-path-fast);
}
.lwl-path-stone__head:hover {
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%);
	color: var(--lwl-path-ink-1);
	padding-left: 22px;
}
.lwl-path-stone__head:hover .index {
	transform: scale(1.06);
	box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.18);
}
.lwl-path-stone__head .index { transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease; }
.lwl-path-stone__head .index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--lwl-path-ink-3);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
}
.lwl-path-stone__head .chev {
	width: 14px;
	height: 14px;
	transition: transform var(--lwl-path-fast);
	color: var(--lwl-path-ink-3);
}
.lwl-path-stone.is-open .lwl-path-stone__head .chev { transform: rotate(90deg); color: var(--lwl-path-gold); }
.lwl-path-stone__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: 0.01em;
	font-size: 15.5px;
}
.lwl-path-stone__items {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--lwl-path-mid);
}
.lwl-path-stone.is-open .lwl-path-stone__items {
	max-height: 1200px;
}

/* Stone-state highlight (green = passed, gold = attempted) */
.lwl-path-stone[data-state="passed"]    .lwl-path-stone__head .index { background: rgba(52, 211, 153, 0.18); color: var(--lwl-path-emerald); box-shadow: 0 0 0 1px var(--lwl-path-emerald-soft); }
.lwl-path-stone[data-state="attempted"] .lwl-path-stone__head .index { background: rgba(252, 211, 77, 0.18); color: var(--lwl-path-gold); box-shadow: 0 0 0 1px var(--lwl-path-gold-soft); }

/* Lesson / quiz item */
.lwl-path-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 50px;
	color: var(--lwl-path-ink-3);
	font-size: 12.5px;
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: background var(--lwl-path-fast), color var(--lwl-path-fast), border-color var(--lwl-path-fast);
}
.lwl-path-item:hover {
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.09) 0%, transparent 80%);
	color: var(--lwl-path-ink-1);
	padding-left: 54px;
	border-left-color: rgba(252, 211, 77, 0.4);
}
.lwl-path-item:hover .lwl-path-item__dot {
	transform: scale(1.3);
	box-shadow: 0 0 12px rgba(252, 211, 77, 0.5);
}
.lwl-path-item__dot { transition: background var(--lwl-path-fast), box-shadow 240ms ease, transform 240ms ease; }
.lwl-path-item.is-current {
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), transparent 80%);
	color: var(--lwl-path-ink-1);
	border-left-color: var(--lwl-path-gold);
}
.lwl-path-item__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	flex: none;
	transition: background var(--lwl-path-fast), box-shadow var(--lwl-path-fast);
}
.lwl-path-item[data-state="passed"]    .lwl-path-item__dot { background: var(--lwl-path-emerald); box-shadow: 0 0 8px var(--lwl-path-emerald-soft); }
.lwl-path-item[data-state="attempted"] .lwl-path-item__dot { background: var(--lwl-path-gold); box-shadow: 0 0 8px var(--lwl-path-gold-soft); }
.lwl-path-item__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
}
.lwl-path-item__type {
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lwl-path-ink-3);
	margin-left: auto;
}

/* --- Main viewport in console --- */
.lwl-path-viewport {
	padding: 36px 48px 80px;
	overflow-y: auto;
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
}

/* =========================================================================
   2026-04-30 (r4) — Multi-segment progress bar (replaces verbose hero card)
   --------------------------------------------------------------------------
   Each segment = one child item. Glows gold on completion. Stones are visually
   grouped with a wider gap; segments within a stone sit shoulder-to-shoulder.
   ========================================================================= */
.lwl-path-progress-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px auto 28px;
	max-width: 820px;
	/* 2026-05-10 — opaque backdrop strip. Previously transparent: each seg's
	   rgba(255,255,255,0.07) fill let the lesson card's hero background bleed
	   through, which on bright-mood lessons (Signal Plaza pagoda glow) looked
	   like a cream veil washing across the segments. The strip resolves that
	   by giving the bar its own dark surface regardless of what's behind it. */
	padding: 10px 14px 12px;
	background: linear-gradient(180deg, rgba(14,10,22,0.78) 0%, rgba(14,10,22,0.88) 100%);
	border-radius: 14px;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.04) inset,
		0 8px 22px rgba(0,0,0,0.45);
	position: relative;
	z-index: 5;
}
.lwl-path-progress-bar__track {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 8px;
}
.lwl-path-progress-bar__stone {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.lwl-path-progress-bar__seg {
	flex: 1 1 0;
	min-width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,0.07);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
	transition: background 320ms ease, box-shadow 320ms ease, height 220ms ease, transform 220ms ease;
	cursor: pointer; /* 2026-05-10 — clickable, routes via lwl-path.js native-nav handler (lwl-lesson renderer, never Tutor) */
	text-decoration: none;
	display: block;
	position: relative; /* tooltip anchor */
	box-sizing: border-box;
}
.lwl-path-progress-bar__seg:focus-visible {
	outline: 2px solid rgba(255,235,170,0.85);
	outline-offset: 3px;
}
.lwl-path-progress-bar__seg:hover {
	transform: scaleY(1.4);
}

/* =========================================================================
   2026-05-10 — Hover tooltip on each progress-bar segment
   --------------------------------------------------------------------------
   Each <a class="lwl-path-progress-bar__seg"> contains a child
   <span class="lwl-path-progress-bar__seg-tip">Lesson title</span>. By
   default the tip is hidden + slightly translated; on :hover / :focus-visible
   of the parent it slides up into a calm cream pill above the segment.
   Reads `data-title` indirectly via the inline child text (chosen over
   `attr()` content because Safari has historical bugs with attr() on
   pseudo-elements). pointer-events: none on the tip so the hover stays
   bound to the segment itself.
   ========================================================================= */
.lwl-path-progress-bar__seg-tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: rgba(28,22,38,0.96);
	color: #fff5d9;
	font-family: var(--font-body, 'Inter', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.3;
	padding: 7px 11px;
	border-radius: 7px;
	white-space: nowrap;
	max-width: 280px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 80;
	box-shadow:
		0 8px 22px rgba(0,0,0,0.45),
		0 0 0 1px rgba(255,216,123,0.14);
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.lwl-path-progress-bar__seg-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: rgba(28,22,38,0.96);
}
.lwl-path-progress-bar__seg:hover .lwl-path-progress-bar__seg-tip,
.lwl-path-progress-bar__seg:focus-visible .lwl-path-progress-bar__seg-tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	transition-delay: 60ms;
}
/* Tooltip styling shift for the current segment — same shape, brighter ring */
.lwl-path-progress-bar__seg.is-current .lwl-path-progress-bar__seg-tip,
.lwl-path-progress-bar__seg[data-current="1"] .lwl-path-progress-bar__seg-tip {
	box-shadow:
		0 8px 22px rgba(0,0,0,0.5),
		0 0 0 1px rgba(255,235,170,0.4),
		0 0 18px rgba(255,210,120,0.25);
}
@media (prefers-reduced-motion: reduce) {
	.lwl-path-progress-bar__seg-tip { transition: opacity 1ms; }
	.lwl-path-progress-bar__seg:hover { transform: none; }
}
.lwl-path-progress-bar__seg[data-state="attempted"] {
	background: rgba(255,216,123,0.25);
	box-shadow: inset 0 0 0 1px rgba(255,216,123,0.35);
}
.lwl-path-progress-bar__seg[data-state="passed"] {
	background: linear-gradient(90deg, #ffd87b 0%, #ffba5a 100%);
	box-shadow:
		0 0 6px rgba(255,216,123,0.55),
		0 0 14px rgba(255,200,100,0.35),
		inset 0 0 0 1px rgba(255,235,180,0.55);
	height: 8px;
	animation: lwl-path-seg-pulse 3.6s ease-in-out infinite;
}
@keyframes lwl-path-seg-pulse {
	0%, 100% { box-shadow: 0 0 6px rgba(255,216,123,0.55), 0 0 14px rgba(255,200,100,0.35), inset 0 0 0 1px rgba(255,235,180,0.55); }
	50%      { box-shadow: 0 0 9px rgba(255,216,123,0.75), 0 0 22px rgba(255,200,100,0.5),  inset 0 0 0 1px rgba(255,235,180,0.7); }
}

/* =========================================================================
   2026-05-05 — Active stepping-stone glow + sparks
   --------------------------------------------------------------------------
   The seg whose content is currently rendered in the viewport gets a
   brighter pulse (1.6s vs 3.6s for passed) and emits two staggered ember
   sparks that drift up above the bar. "You are here" without words.
   Additive only — passes through prefers-reduced-motion. PHP marks the seg
   with class .is-current and data-current="1"; both selectors guard the rule
   so soft-nav swaps survive class-only updates.
   ========================================================================= */
.lwl-path-progress-bar__seg.is-current,
.lwl-path-progress-bar__seg[data-current="1"] {
	position: relative;
	overflow: visible;
	height: 10px;
	background: linear-gradient(90deg, #fff1c4 0%, #ffd87b 50%, #ffba5a 100%);
	box-shadow:
		0 0 8px rgba(255,235,170,0.95),
		0 0 18px rgba(255,210,120,0.7),
		0 0 32px rgba(255,190,90,0.45),
		inset 0 0 0 1px rgba(255,245,210,0.85);
	animation: lwl-path-seg-current-pulse 1.6s ease-in-out infinite;
	z-index: 3;
}
@keyframes lwl-path-seg-current-pulse {
	0%, 100% {
		box-shadow:
			0 0 8px rgba(255,235,170,0.85),
			0 0 18px rgba(255,210,120,0.6),
			0 0 30px rgba(255,190,90,0.4),
			inset 0 0 0 1px rgba(255,245,210,0.8);
		transform: scaleY(1);
	}
	50% {
		box-shadow:
			0 0 12px rgba(255,250,210,1),
			0 0 26px rgba(255,220,140,0.85),
			0 0 44px rgba(255,200,100,0.55),
			inset 0 0 0 1px rgba(255,250,220,1);
		transform: scaleY(1.18);
	}
}
.lwl-path-progress-bar__seg.is-current::before,
.lwl-path-progress-bar__seg.is-current::after,
.lwl-path-progress-bar__seg[data-current="1"]::before,
.lwl-path-progress-bar__seg[data-current="1"]::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -2px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,247,210,1) 0%, rgba(255,210,120,0.85) 50%, rgba(255,190,90,0) 100%);
	pointer-events: none;
	opacity: 0;
	animation: lwl-path-seg-current-spark 2.4s ease-out infinite;
	will-change: transform, opacity;
}
.lwl-path-progress-bar__seg.is-current::after,
.lwl-path-progress-bar__seg[data-current="1"]::after {
	width: 2px;
	height: 2px;
	animation-delay: 1.1s;
	animation-duration: 2.8s;
}
@keyframes lwl-path-seg-current-spark {
	0%   { opacity: 0;    transform: translate(-50%, 0)     scale(0.5); }
	18%  { opacity: 1;    transform: translate(-60%, -6px)  scale(1); }
	55%  { opacity: 0.85; transform: translate(-30%, -16px) scale(0.85); }
	100% { opacity: 0;    transform: translate(-55%, -28px) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
	.lwl-path-progress-bar__seg.is-current,
	.lwl-path-progress-bar__seg[data-current="1"] {
		animation: none;
	}
	.lwl-path-progress-bar__seg.is-current::before,
	.lwl-path-progress-bar__seg.is-current::after,
	.lwl-path-progress-bar__seg[data-current="1"]::before,
	.lwl-path-progress-bar__seg[data-current="1"]::after {
		display: none;
	}
}
.lwl-path-progress-bar__seg:hover {
	background: rgba(255,255,255,0.16);
}
.lwl-path-progress-bar__seg[data-state="passed"]:hover {
	background: linear-gradient(90deg, #ffe8a3 0%, #ffc878 100%);
}
.lwl-path-progress-bar__divider {
	width: 1px;
	height: 14px;
	background: rgba(255,255,255,0.14);
	flex-shrink: 0;
}
.lwl-path-progress-bar__meta {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(244,236,220,0.55);
	font-weight: 600;
	flex-shrink: 0;
	min-width: 36px;
	text-align: right;
}
.lwl-path-progress-bar[data-pct="100"] .lwl-path-progress-bar__pct {
	color: #ffd87b;
	text-shadow: 0 0 8px rgba(255,216,123,0.45);
}
.lwl-path-viewport__hero {
	display: grid;
	grid-template-columns: 1fr 100px;
	align-items: center;
	gap: 28px;
	padding: 28px 30px;
	background: var(--lwl-path-card);
	border: 1px solid var(--lwl-path-card-line);
	border-radius: var(--lwl-path-radius-lg);
	margin-bottom: 36px;
	position: relative;
	overflow: hidden;
}
.lwl-path-viewport__hero::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 78% 50%, var(--lwl-path-route-tint-soft) 0%, transparent 60%);
	opacity: 0.5; z-index: 0;
	pointer-events: none;
}
.lwl-path-viewport__hero > * { position: relative; z-index: 1; }
.lwl-path-viewport__hero h2 {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.lwl-path-viewport__hero p {
	margin: 0;
	color: var(--lwl-path-ink-3);
	font-size: 13.5px;
	letter-spacing: 0.04em;
}
.lwl-path-viewport__gem {
	width: 90px; height: 90px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	filter: drop-shadow(0 6px 16px var(--lwl-path-route-tint-soft));
}

/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 760px) {
	.lwl-path-routes { padding: 36px 18px 56px; }
	.lwl-path-route { grid-template-columns: 1fr; padding: 20px 22px; }
	.lwl-path-route__gem { width: 80px; height: 80px; align-self: end; justify-self: end; }
	.lwl-path-console { grid-template-columns: 1fr; }
	.lwl-path-console.is-collapsed .lwl-path-menu { display: none; }
	.lwl-path-menu { width: 100%; max-height: 280px; }
	.lwl-path-viewport { padding: 24px 18px 56px; }
	.lwl-path-header { padding: 18px 18px 14px; flex-wrap: wrap; gap: 10px; }
}

/* =========================================================================
   Phase 2.1 — chrome cleanup + hover polish
   ========================================================================= */

/* Hide theme chrome when stage shell is active (anything outside our shell is "messy outside") */
body.lwl-stage-active .journey-back,
body.lwl-stage-active .lwl-stage__message:not(.lwl-stage__shell .lwl-stage__message) {
	display: none !important;
}

/* When lwl-path renders inside the stage shell, suppress its own header (the shell already provides chrome) */
body.lwl-stage-active main#main.journey-stage > .lwl-path-header,
.lwl-stage__shell .lwl-path-header {
	display: none !important;
}

/* Make the stage shell take the full viewport when active so nothing peeks around it */
body.lwl-stage-active main#main.journey-stage {
	background: var(--lwl-path-bg-0);
}

/* --- Stronger hover glow on route cards --- */
.lwl-path-route:hover {
	transform: translateY(-3px);
	border-color: var(--lwl-path-route-tint);
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.55),
		0 0 0 1px var(--lwl-path-route-tint),
		0 0 80px var(--lwl-path-route-tint-soft),
		inset 0 0 40px rgba(252, 211, 77, 0.08);
}
.lwl-path-route:hover::before {
	opacity: 1;
}

/* --- Gold particle field on hover (CSS-only, no JS) --- */
.lwl-path-route__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 0;
}
.lwl-path-route:hover .lwl-path-route__particles {
	opacity: 1;
}
.lwl-path-route__particles span {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(252, 211, 77, 0.95) 0%, rgba(252, 211, 77, 0) 70%);
	filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.6));
	bottom: -10px;
	animation: lwl-path-particle-rise 4.5s linear infinite;
	will-change: transform, opacity;
}
.lwl-path-route__particles span:nth-child(1)  { left:  6%;  animation-delay: 0s;    animation-duration: 4.2s; }
.lwl-path-route__particles span:nth-child(2)  { left: 14%;  animation-delay: 0.6s;  animation-duration: 5.1s; transform: scale(0.7); }
.lwl-path-route__particles span:nth-child(3)  { left: 22%;  animation-delay: 1.2s;  animation-duration: 3.8s; transform: scale(1.2); }
.lwl-path-route__particles span:nth-child(4)  { left: 32%;  animation-delay: 0.3s;  animation-duration: 4.6s; transform: scale(0.8); }
.lwl-path-route__particles span:nth-child(5)  { left: 41%;  animation-delay: 1.8s;  animation-duration: 5.3s; }
.lwl-path-route__particles span:nth-child(6)  { left: 50%;  animation-delay: 0.9s;  animation-duration: 4.0s; transform: scale(1.1); }
.lwl-path-route__particles span:nth-child(7)  { left: 58%;  animation-delay: 2.2s;  animation-duration: 4.4s; transform: scale(0.6); }
.lwl-path-route__particles span:nth-child(8)  { left: 66%;  animation-delay: 1.5s;  animation-duration: 5.0s; }
.lwl-path-route__particles span:nth-child(9)  { left: 74%;  animation-delay: 0.4s;  animation-duration: 4.7s; transform: scale(1.3); }
.lwl-path-route__particles span:nth-child(10) { left: 82%;  animation-delay: 2.6s;  animation-duration: 3.9s; transform: scale(0.7); }
.lwl-path-route__particles span:nth-child(11) { left: 90%;  animation-delay: 1.1s;  animation-duration: 4.8s; }
.lwl-path-route__particles span:nth-child(12) { left: 96%;  animation-delay: 0.7s;  animation-duration: 5.2s; transform: scale(0.9); }

@keyframes lwl-path-particle-rise {
	0% {
		bottom: -10px;
		opacity: 0;
		transform: translateX(0) scale(var(--p-s, 1));
	}
	10% { opacity: 1; }
	50% { transform: translateX(8px) scale(var(--p-s, 1)); }
	100% {
		bottom: 110%;
		opacity: 0;
		transform: translateX(-6px) scale(calc(var(--p-s, 1) * 0.4));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lwl-path-route__particles { display: none; }
	.lwl-path-route__progress-fill { transition: none !important; }
}

/* Soft-nav in-flight cue */
.lwl-stage__shell .lwl-path-routes.is-loading,
.lwl-stage__shell .lwl-path-console.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

/* =========================================================================
   Phase 2.5 — frame wrapper layout (stage-shell embed mode)
   The .lwl-path-frame is a single-root container around either the Routes
   screen or the Console. When injected into the stage shell viewport, it
   needs to take full available height so the inner grid (.lwl-path-console)
   and the content (.lwl-path-routes) can expand correctly.
   ========================================================================= */
.lwl-path-frame {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	background: var(--lwl-path-bg-0);
	color: var(--lwl-path-ink-1);
}

/* Inside the stage shell — ensure the frame fills the viewport and inner
   content scrolls within its own scroll container. */
.lwl-stage__shell .lwl-path-frame,
.lwl-stage--shell .lwl-path-frame {
	min-height: 100vh;
	height: auto;
	flex: 1 1 auto;
}

/* The console grid inside the frame — let it grow to fill the frame */
.lwl-path-frame > .lwl-path-console {
	flex: 1 1 auto;
	min-height: 0;
}

/* Routes screen inside the frame — already auto-height, just ensure it
   takes the available vertical space if the viewport is tall. */
.lwl-path-frame > .lwl-path-routes {
	flex: 1 1 auto;
}

/* When the frame replaces other content via soft-nav, make sure typography
   colours match (the stage shell parent might have set inherited colors). */
.lwl-path-frame * {
	color: inherit;
}
.lwl-path-frame .lwl-path-route__title,
.lwl-path-frame .lwl-path-routes__intro h1,
.lwl-path-frame .lwl-path-viewport__hero h2 {
	color: var(--lwl-path-ink-1);
}

/* =========================================================================
   2026-04-29 — Stage-shell scroll-reveal fix
   --------------------------------------------------------------------------
   Some script on logged-in journey-stage pages sets inline
   `style="opacity:0; transform: translate(0, 10px)"` on .lwl-path-console
   and .lwl-path-routes (intended as the initial state of a scroll-reveal
   animation). Inside the stage shell viewport the IntersectionObserver
   that would normally clear it doesn't fire (its observer targets `.reveal`
   and the page's main scroll, not the inner viewport's), so the inline
   opacity:0 sticks forever and the entire console body is invisible.
   These !important rules override the inline opacity/transform so content
   ALWAYS paints inside the stage shell. The transition itself is kept; if
   the reveal observer ever does fire later, the visual change is harmless.
   Diagnosed live in Chrome 2026-04-29 — see findings/STAGE_OPACITY_BUG.md
   ========================================================================= */
body.lwl-stage-active .lwl-path-console,
body.lwl-stage-active .lwl-path-routes,
body.lwl-stage-active .lwl-path-frame,
body.lwl-stage-active .lwl-journey-screen[data-frame] {
	opacity: 1 !important;
	transform: none !important;
}

/* Belt-and-braces: even outside the stage shell, our standalone path-shell
   pages should never be invisible. */
.lwl-path-page .lwl-path-console,
.lwl-path-page .lwl-path-routes,
.lwl-path-page .lwl-path-frame {
	opacity: 1 !important;
	transform: none !important;
}

/* =========================================================================
   2026-04-29 — Lesson + Quiz polish (Phase 3, additive)
   --------------------------------------------------------------------------
   Wraps body content in a card-like container, restores typography hierarchy,
   gives Grammar Dojo lessons their own scoped accent, and styles the quiz UI
   (multiple choice, true/false, fill in the blank, short answer).
   ========================================================================= */

/* ---------------- Lesson card wrapper ---------------- */
.lwl-path-lesson,
.lwl-path-quiz {
	margin-top: 24px;
	/* 2026-04-30 (r4.1) — REVERTED to translucent. The dark opaque outer
	   card was hiding the per-stone imagery. Liam's clarification: the
	   contrast change was meant for the INNER cinematic sub-cards (the
	   "Time Anchor / Comparison Lens" boxes), NOT this outer wrapper.
	   Outer is a soft dark wash so imagery reads through. */
	background: linear-gradient(180deg, rgba(14,18,28,0.42), rgba(14,18,28,0.28));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 18px;
	padding: 32px 36px;
	box-shadow: 0 14px 56px rgba(0,0,0,0.32);
	color: var(--lwl-path-ink-2);
	/* Center on wide screens — even side gutters via auto margins inside the
	   already-centered .lwl-path-viewport (max-width 980px). */
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
/* 2026-04-30 (r4) — brighter body text so it reads through the translucent
   wrapper without needing the heavy outer wash. */
.lwl-path-lesson__content {
	color: rgba(244,236,220,0.96) !important;
}
.lwl-path-lesson__content p,
.lwl-path-lesson__content li {
	color: rgba(244,236,220,0.96) !important;
}
.lwl-path-lesson__content strong { color: #fff8e8 !important; }
/* Section headings inside lessons — make them visibly gold (Tutor cinematic
   blocks render h2/h3 as section titles; previously rendered in dim purple). */
.lwl-path-lesson__content h1,
.lwl-path-lesson__content h2,
.lwl-path-lesson__content h3,
.lwl-path-lesson__content h4 {
	color: #ffd87b !important;
}

.lwl-path-lesson__header,
.lwl-path-quiz__header {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lwl-path-lesson__type,
.lwl-path-quiz__header .lwl-path-lesson__type {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--lwl-path-route-tint, rgba(255,200,120,0.85));
	font-weight: 600;
	margin-bottom: 6px;
}

.lwl-path-lesson__title {
	margin: 0;
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-size: 34px;
	line-height: 1.16;
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-weight: 600;
}

.lwl-path-lesson__content {
	font-size: 17px;
	line-height: 1.78;
	color: var(--lwl-path-ink-2, rgba(244,236,220,0.86));
}

.lwl-path-lesson__content > *:first-child { margin-top: 0; }
.lwl-path-lesson__content > *:last-child  { margin-bottom: 0; }

.lwl-path-lesson__content p {
	margin: 0 0 14px;
}

.lwl-path-lesson__content h1,
.lwl-path-lesson__content h2,
.lwl-path-lesson__content h3,
.lwl-path-lesson__content h4 {
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-weight: 600;
	margin: 28px 0 14px;
	line-height: 1.25;
}
.lwl-path-lesson__content h1 { font-size: 26px; }
.lwl-path-lesson__content h2 { font-size: 22px; }
.lwl-path-lesson__content h3 { font-size: 19px; color: var(--lwl-path-route-tint, #c2a4f0); }
.lwl-path-lesson__content h4 { font-size: 16px; }

.lwl-path-lesson__content strong { color: var(--lwl-path-ink-1, #f4ecdc); font-weight: 600; }
.lwl-path-lesson__content em { color: rgba(244,236,220,0.9); }

.lwl-path-lesson__content a {
	color: var(--lwl-path-route-tint, #c2a4f0);
	text-decoration: none;
	border-bottom: 1px solid rgba(194,164,240,0.4);
	transition: border-color 120ms ease, color 120ms ease;
}
.lwl-path-lesson__content a:hover {
	color: #e7d6ff;
	border-bottom-color: rgba(231,214,255,0.7);
}

.lwl-path-lesson__content ul,
.lwl-path-lesson__content ol {
	margin: 12px 0 18px;
	padding-left: 24px;
}
.lwl-path-lesson__content li {
	margin-bottom: 6px;
}

.lwl-path-lesson__content blockquote {
	margin: 18px 0;
	padding: 14px 22px;
	border-left: 3px solid var(--lwl-path-route-tint, #c2a4f0);
	background: rgba(255,255,255,0.03);
	border-radius: 0 12px 12px 0;
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-style: italic;
}

.lwl-path-lesson__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0;
	font-size: 14.5px;
	background: rgba(255,255,255,0.025);
	border-radius: 10px;
	overflow: hidden;
}
.lwl-path-lesson__content table th {
	text-align: left;
	padding: 10px 14px;
	background: rgba(255,255,255,0.04);
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lwl-path-lesson__content table td {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	vertical-align: top;
}
.lwl-path-lesson__content table tr:last-child td { border-bottom: 0; }

.lwl-path-lesson__content code,
.lwl-path-lesson__content pre {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	background: rgba(0,0,0,0.35);
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 13.5px;
	color: #e9dfff;
}
.lwl-path-lesson__content pre {
	padding: 14px 18px;
	overflow-x: auto;
	margin: 14px 0;
}

.lwl-path-lesson__content hr {
	border: 0;
	height: 1px;
	background: rgba(255,255,255,0.08);
	margin: 26px 0;
}

.lwl-path-lesson__content img {
	max-width: 100%;
	border-radius: 14px;
	margin: 14px 0;
	box-shadow: 0 10px 36px rgba(0,0,0,0.35);
}

/* Tutor-LMS-style scenes (lwl-scene / lwl-cinematic) embedded in lesson HTML
   need to relax vs the lesson card so they're not double-padded. */
.lwl-path-lesson__content .lwl-scene,
.lwl-path-lesson__content .lwl-cinematic {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
}

/* =========================================================================
   2026-04-30 (r5) — Per-lesson-type animated card backgrounds.
   Each type gets:
     • a less-transparent base (so text reads cleanly without depending on
       the per-stone PNG, which still shows through outside the card).
     • a slow drifting blurred radial-gradient blob layer (::before) that
       creates the "moving colour blend" effect.
     • content stays on top via z-index isolation.
   The per-stone PNG background (.lwl-path-viewport[data-has-bg]) is not
   touched — that paints behind the whole viewport.
   ========================================================================= */

/* ---------------- Grammar Dojo variant — sunset amber/peach/red --------- */
.lwl-path-lesson--dojo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Less transparent so text contrast is solid */
	background: linear-gradient(180deg, rgba(38,18,12,0.82), rgba(28,12,8,0.74)) !important;
	border: 1px solid rgba(255,150,80,0.20) !important;
	box-shadow: 0 18px 60px rgba(60,18,8,0.45) !important;
}
.lwl-path-lesson--dojo > * { position: relative; z-index: 1; }
.lwl-path-lesson--dojo::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(50% 38% at 22% 28%, rgba(255,150,80,0.42) 0%, transparent 70%),
		radial-gradient(48% 36% at 80% 70%, rgba(220,80,60,0.38) 0%, transparent 70%),
		radial-gradient(42% 32% at 55% 50%, rgba(255,110,40,0.30) 0%, transparent 75%),
		radial-gradient(40% 30% at 30% 80%, rgba(180,55,40,0.28) 0%, transparent 75%);
	filter: blur(28px) saturate(1.05);
	animation: lwl-path-amber-drift 22s ease-in-out infinite alternate;
}
@keyframes lwl-path-amber-drift {
	0%   { transform: translate(0,0)     scale(1);    }
	33%  { transform: translate(2%, -1%) scale(1.04); }
	66%  { transform: translate(-2%, 2%) scale(1.06); }
	100% { transform: translate(1%, -2%) scale(1.03); }
}
.lwl-path-lesson--dojo .lwl-path-lesson__type    { color: #ffd0a0; }
.lwl-path-lesson--dojo .lwl-path-lesson__title   { color: #fff0d8; }
.lwl-path-lesson--dojo .lwl-path-lesson__content h3 { color: #ffb88c; }
.lwl-path-lesson--dojo .lwl-path-lesson__content blockquote { border-left-color: #ff9b9b; }
.lwl-path-lesson--dojo .lwl-path-lesson__content a {
	color: #ffd0b0;
	border-bottom-color: rgba(255,208,176,0.4);
}
/* Inner sub-card border tint matches the type theme */
.lwl-path-lesson--dojo .lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) {
	border-color: rgba(255,180,140,0.28) !important;
	box-shadow: 0 8px 22px rgba(40,12,8,0.40) !important;
}

/* ---------------- Atelier variant — deep purples and blues -------------- */
.lwl-path-lesson--atelier {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(20,16,42,0.82), rgba(14,12,32,0.74)) !important;
	border: 1px solid rgba(180,140,255,0.22) !important;
	box-shadow: 0 18px 60px rgba(20,14,50,0.50) !important;
}
.lwl-path-lesson--atelier > * { position: relative; z-index: 1; }
.lwl-path-lesson--atelier::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(52% 40% at 25% 28%, rgba(140,100,255,0.40) 0%, transparent 70%),
		radial-gradient(48% 36% at 78% 68%, rgba(70,110,220,0.40) 0%, transparent 70%),
		radial-gradient(45% 33% at 52% 48%, rgba(110,80,200,0.30) 0%, transparent 75%),
		radial-gradient(38% 30% at 35% 82%, rgba(60,90,180,0.32) 0%, transparent 75%);
	filter: blur(30px) saturate(1.1);
	animation: lwl-path-purple-drift 26s ease-in-out infinite alternate;
}
@keyframes lwl-path-purple-drift {
	0%   { transform: translate(0,0)     scale(1);    }
	33%  { transform: translate(-3%, 1%) scale(1.04); }
	66%  { transform: translate(2%, -2%) scale(1.06); }
	100% { transform: translate(-1%, 2%) scale(1.03); }
}
.lwl-path-lesson--atelier .lwl-path-lesson__type    { color: #c8b8ff; }
.lwl-path-lesson--atelier .lwl-path-lesson__title   { color: #ffe9b0; }
.lwl-path-lesson--atelier .lwl-path-lesson__content h3 { color: #ffd87b; }
.lwl-path-lesson--atelier .lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) {
	border-color: rgba(180,140,255,0.30) !important;
	box-shadow: 0 8px 22px rgba(14,10,40,0.50) !important;
}

/* Reduced-motion: stop the blob drift but keep the static gradient look */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-lesson--dojo::before,
	.lwl-path-lesson--atelier::before {
		animation: none !important;
	}
}

/* ---------------- Quiz UI ---------------- */
.lwl-path-quiz__brief {
	color: rgba(244,236,220,0.78);
	font-size: 14.5px;
	line-height: 1.6;
	margin-top: 8px;
}
.lwl-path-quiz__brief p:last-child { margin-bottom: 0; }

.lwl-path-quiz__form { margin: 0; }

.lwl-path-quiz__questions {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pquiz;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lwl-path-quiz__question {
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	padding: 20px 22px;
	transition: border-color 160ms ease, background 160ms ease;
}
.lwl-path-quiz__question[data-state="correct"] {
	border-color: rgba(120,210,150,0.55);
	background: rgba(120,210,150,0.06);
}
.lwl-path-quiz__question[data-state="incorrect"] {
	border-color: rgba(230,120,120,0.55);
	background: rgba(230,120,120,0.06);
}

.lwl-path-quiz__qstem {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin-bottom: 12px;
}
.lwl-path-quiz__qnum {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0 6px;
}
.lwl-path-quiz__qtitle {
	font-size: 16px;
	line-height: 1.5;
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-weight: 500;
}
.lwl-path-quiz__qtitle p { margin: 0; }

.lwl-path-quiz__qdesc {
	margin: 6px 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(244,236,220,0.7);
}

.lwl-path-quiz__answers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lwl-path-quiz__answer label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.16);
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.lwl-path-quiz__answer label:hover {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.16);
}
.lwl-path-quiz__answer input[type="radio"] {
	margin-top: 3px;
	accent-color: var(--lwl-path-route-tint, #c2a4f0);
	flex-shrink: 0;
}
.lwl-path-quiz__answer-text {
	color: var(--lwl-path-ink-2, rgba(244,236,220,0.88));
	font-size: 15px;
	line-height: 1.5;
}
.lwl-path-quiz__answer.is-correct label {
	border-color: rgba(120,210,150,0.55);
	background: rgba(120,210,150,0.08);
}
.lwl-path-quiz__answer.is-incorrect label {
	border-color: rgba(230,120,120,0.55);
	background: rgba(230,120,120,0.08);
}
.lwl-path-quiz__answer.is-missed label {
	border-color: rgba(120,210,150,0.45);
	background: rgba(120,210,150,0.04);
	border-style: dashed;
}

/* =========================================================================
   2026-04-30 (r4) — Multi-choice GOLD GLOW + dust on selection
   --------------------------------------------------------------------------
   When a radio inside a quiz answer is checked, the whole label glows gold
   and animated dust specks float inside the box. CSS-only via :has() and
   keyframes. The dust uses radial-gradients positioned at multiple spots,
   each animated to drift up + fade in/out.
   ========================================================================= */
.lwl-path-quiz__answer label {
	position: relative;
	overflow: hidden;
	transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.lwl-path-quiz__answer label::before,
.lwl-path-quiz__answer label::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 320ms ease;
	border-radius: inherit;
}
/* Soft gold inner glow layer */
.lwl-path-quiz__answer label::before {
	background: radial-gradient(120% 80% at 50% 50%, rgba(255,216,123,0.18) 0%, rgba(255,216,123,0.04) 50%, transparent 100%);
	z-index: 0;
}
/* Floating dust specks layer — 6 specks at staggered positions */
.lwl-path-quiz__answer label::after {
	background:
		radial-gradient(circle 1.2px at 14% 78%, rgba(255,216,123,0.95) 0%, rgba(255,216,123,0) 70%),
		radial-gradient(circle 1px at 28% 32%, rgba(255,235,180,0.85) 0%, rgba(255,235,180,0) 70%),
		radial-gradient(circle 1.4px at 46% 64%, rgba(255,200,100,0.9) 0%, rgba(255,200,100,0) 70%),
		radial-gradient(circle 1px at 62% 22%, rgba(255,235,180,0.85) 0%, rgba(255,235,180,0) 70%),
		radial-gradient(circle 1.3px at 78% 56%, rgba(255,216,123,0.95) 0%, rgba(255,216,123,0) 70%),
		radial-gradient(circle 1.1px at 90% 30%, rgba(255,200,100,0.9) 0%, rgba(255,200,100,0) 70%);
	background-size: 100% 200%;
	background-repeat: no-repeat;
	z-index: 1;
}
/* Keep existing children above the layers */
.lwl-path-quiz__answer label > * { position: relative; z-index: 2; }

/* Selected state — radio inside is checked */
.lwl-path-quiz__answer label:has(input[type="radio"]:checked),
.lwl-path-quiz__answer label:has(input[type="checkbox"]:checked) {
	border-color: rgba(255,216,123,0.7);
	background: linear-gradient(180deg, rgba(255,216,123,0.07), rgba(255,216,123,0.03));
	box-shadow:
		0 0 0 1px rgba(255,216,123,0.35) inset,
		0 0 18px rgba(255,216,123,0.28),
		0 0 38px rgba(255,216,123,0.18);
}
.lwl-path-quiz__answer label:has(input[type="radio"]:checked)::before,
.lwl-path-quiz__answer label:has(input[type="checkbox"]:checked)::before {
	opacity: 1;
	animation: lwl-path-glow-pulse 2.4s ease-in-out infinite;
}
.lwl-path-quiz__answer label:has(input[type="radio"]:checked)::after,
.lwl-path-quiz__answer label:has(input[type="checkbox"]:checked)::after {
	opacity: 1;
	animation: lwl-path-dust-rise 4.2s linear infinite;
}
@keyframes lwl-path-glow-pulse {
	0%, 100% { opacity: 0.85; }
	50%      { opacity: 1; }
}
@keyframes lwl-path-dust-rise {
	0%   { background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { background-position: 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 -100%; opacity: 0; }
}
/* Fallback for browsers without :has() — keep them functional, just no glow */
@supports not (selector(:has(*))) {
	.lwl-path-quiz__answer input[type="radio"]:checked + .lwl-path-quiz__answer-text,
	.lwl-path-quiz__answer input[type="checkbox"]:checked + .lwl-path-quiz__answer-text {
		color: #ffd87b;
	}
}

.lwl-path-quiz__fill,
.lwl-path-quiz__short {
	margin-top: 4px;
}
.lwl-path-quiz__input,
.lwl-path-quiz__textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(0,0,0,0.25);
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-size: 15px;
	font-family: inherit;
	line-height: 1.5;
	transition: border-color 120ms ease, background 120ms ease;
	outline: none;
}
.lwl-path-quiz__input:focus,
.lwl-path-quiz__textarea:focus {
	border-color: var(--lwl-path-route-tint, #c2a4f0);
	background: rgba(0,0,0,0.4);
}
.lwl-path-quiz__textarea { resize: vertical; min-height: 84px; }

.lwl-path-quiz__hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: rgba(244,236,220,0.55);
	letter-spacing: 0.02em;
}

.lwl-path-quiz__feedback {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.5;
}
.lwl-path-quiz__feedback.is-correct {
	background: rgba(120,210,150,0.12);
	color: #b2efc2;
}
.lwl-path-quiz__feedback.is-incorrect {
	background: rgba(230,120,120,0.12);
	color: #ffc9c9;
}

.lwl-path-quiz__actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.lwl-path-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.04);
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.lwl-path-cta:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,200,120,0.5);
	transform: translateY(-1px);
}
.lwl-path-cta--primary {
	background: var(--lwl-path-route-tint, #c2a4f0);
	color: #1a1426;
	border-color: transparent;
}
.lwl-path-cta--primary:hover {
	background: #d6b8ff;
	color: #14101e;
}
.lwl-path-cta--ghost {
	background: transparent;
}

.lwl-path-quiz__score {
	margin-top: 22px;
	padding: 18px 22px;
	border-radius: 14px;
	background: rgba(0,0,0,0.22);
	border: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.lwl-path-quiz__score[data-tier="perfect"] {
	border-color: rgba(255,200,120,0.6);
	background: rgba(255,200,120,0.08);
}
.lwl-path-quiz__score[data-tier="strong"] {
	border-color: rgba(120,210,150,0.55);
	background: rgba(120,210,150,0.06);
}
.lwl-path-quiz__score[data-tier="needs-practice"] {
	border-color: rgba(230,120,120,0.45);
	background: rgba(230,120,120,0.05);
}

.lwl-path-quiz__score-num {
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-size: 28px;
	color: var(--lwl-path-ink-1, #f4ecdc);
}
.lwl-path-quiz__score-msg {
	font-size: 14px;
	color: var(--lwl-path-ink-2);
	flex: 1;
	min-width: 220px;
	line-height: 1.5;
}

.lwl-path-quiz__empty {
	padding: 24px;
	text-align: center;
	color: rgba(244,236,220,0.6);
	font-style: italic;
}

/* Stage shell + page mode safety net for the new wrappers — same opacity:0
   bug, same fix. Catches anything our reveal observer might stamp. */
body.lwl-stage-active .lwl-path-lesson,
body.lwl-stage-active .lwl-path-quiz,
.lwl-path-page .lwl-path-lesson,
.lwl-path-page .lwl-path-quiz {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------------- Per-stone background (lessons only, NOT quizzes) ---------------- */
.lwl-path-viewport { position: relative; isolation: isolate; }
.lwl-path-viewport > * { position: relative; z-index: 1; }
.lwl-path-viewport[data-has-bg="1"]::before {
	content: "";
	position: absolute;
	/* 2026-04-30 (r3) — wider bleed so the background breathes around the card */
	inset: -80px -80px 0 -80px;
	background: var(--lwl-path-stone-bg, transparent) center top / cover no-repeat;
	/* 2026-04-30 (r3) — boosted from 0.42 → 0.7 (Liam's #2 ask) */
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
	border-radius: 28px;
	/* Softer fade — only fade at the very bottom, keep top + sides visible */
	mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0.7) 88%, rgba(0,0,0,0) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0.7) 88%, rgba(0,0,0,0) 100%);
	transition: opacity 480ms ease;
	animation: lwl-path-bg-rise 800ms ease both;
}
.lwl-path-viewport[data-has-bg="1"]::after {
	/* 2026-04-30 (r3) — softer vignette so background stays visible.
	   Was rgba(8,8,16,0.45)→0.85; now 0.18→0.55 for legibility without
	   smothering the image. */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(140% 90% at 50% 10%, rgba(8,8,16,0.18) 0%, rgba(8,8,16,0.45) 60%, rgba(8,8,16,0.6) 100%);
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}
.lwl-path-viewport[data-has-bg="1"]:has(.lwl-path-quiz)::before,
.lwl-path-viewport[data-has-bg="1"]:has(.lwl-path-quiz)::after {
	opacity: 0;
}

@keyframes lwl-path-bg-rise {
	0%   { opacity: 0; transform: translateY(8px) scale(1.02); }
	100% { opacity: 0.7; transform: translateY(0) scale(1); }
}

/* =========================================================================
   2026-04-29 (round 2) — Entrance animations + cinematic-block integration
   --------------------------------------------------------------------------
   - .lwl-path-enter triggers a one-shot fade-up on lesson/quiz mount.
     Independent of the global reveal observer (which is what caused the
     opacity:0 stuck bug). Uses CSS animation, not transition + JS class flip,
     so it always runs once and never sticks at opacity:0.
   - Embedded Tutor "lwl-scene / lwl-cinematic" cards now blend into the dark
     theme so the lesson doesn't look like a light card pasted on a dark page.
   ========================================================================= */
/* 2026-04-30 (r4.2) — entrance animation now gated by .is-ready so it only
   runs AFTER the JS double-rAF reveal (giving :has() time to settle).
   .lwl-path-enter alone (without .is-ready) keeps the card invisible. */
.lwl-path-enter:not(.is-ready) {
	opacity: 0;
}
.lwl-path-enter.is-ready {
	animation: lwl-path-enter 540ms cubic-bezier(0.22, 0.64, 0.36, 1) both;
}
@keyframes lwl-path-enter {
	0%   { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}
.lwl-path-enter.is-ready > * {
	animation: lwl-path-enter-child 620ms cubic-bezier(0.22, 0.64, 0.36, 1) both;
	animation-delay: 80ms;
}
.lwl-path-enter.is-ready > *:nth-child(2) { animation-delay: 140ms; }
.lwl-path-enter.is-ready > *:nth-child(3) { animation-delay: 200ms; }
.lwl-path-enter.is-ready > *:nth-child(4) { animation-delay: 260ms; }
@keyframes lwl-path-enter-child {
	0%   { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}
/* No-JS fallback — if JS doesn't run, the inline style="opacity:0" would
   permanently hide the lesson. Use a CSS animation as a safety net that
   force-reveals after 1s even without the .is-ready class. */
.lwl-path-enter:not(.is-ready) {
	animation: lwl-path-failsafe 0s 1.2s forwards;
}
@keyframes lwl-path-failsafe {
	to { opacity: 1; }
}

/* 2026-04-30 (r5) — center ALL direct text inside .lwl-path-lesson__content.
   This catches the pre-card "Welcome Briefing / Before the Path begins..."
   block at the top and the post-card "Welcome Hearth is not the Path yet /
   The Gates Ahead..." block at the bottom — both were rendering left-aligned.
   Sub-cards already have their own centered text from inline styles, so
   this is consistent. Tables are reverted to default alignment so column
   headers/cells stay readable. */
.lwl-path-lesson__content,
.lwl-path-lesson__content p,
.lwl-path-lesson__content h1,
.lwl-path-lesson__content h2,
.lwl-path-lesson__content h3,
.lwl-path-lesson__content h4,
.lwl-path-lesson__content h5,
.lwl-path-lesson__content h6,
.lwl-path-lesson__content ul,
.lwl-path-lesson__content ol,
.lwl-path-lesson__content li,
.lwl-path-lesson__content blockquote {
	text-align: center !important;
}
/* 2026-04-30 (r5.1) — markers sit WITH the centered text, not in a far-left
   gutter. Apply to ALL lists inside .lwl-path-lesson__content (Liam's ask).
   list-style-position: inside puts the marker on the same line as the text;
   combined with text-align:center the marker travels with the text and
   reads as one centered line ("• Word count: 140-190 words"). */
.lwl-path-lesson__content ul,
.lwl-path-lesson__content ol,
.lwl-path-lesson__content [style*="background"] ul,
.lwl-path-lesson__content [style*="background"] ol {
	list-style-position: inside !important;
	padding-left: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 720px;
}
.lwl-path-lesson__content li {
	list-style-position: inside !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
/* Tighter gap between marker and text so "1. Health…" reads tight */
.lwl-path-lesson__content li::marker {
	color: rgba(255,216,123,0.85);
}
/* Tables stay default-aligned */
.lwl-path-lesson__content table,
.lwl-path-lesson__content table th,
.lwl-path-lesson__content table td,
.lwl-path-lesson__content table * {
	text-align: revert !important;
}
/* Orphan-content escape hatch (if HTML imbalance pushes anything outside
   the lesson card, center it as a graceful fallback). */
.lwl-path-page > main > h1,
.lwl-path-page > main > h2,
.lwl-path-page > main > h3,
.lwl-path-page > main > h4,
.lwl-path-page > main > p,
.lwl-path-page > main > ul,
.lwl-path-page > main > ol,
.lwl-path-page > main > blockquote,
body.lwl-stage-active main#main > h1,
body.lwl-stage-active main#main > h2,
body.lwl-stage-active main#main > h3,
body.lwl-stage-active main#main > h4,
body.lwl-stage-active main#main > p,
body.lwl-stage-active main#main > ul,
body.lwl-stage-active main#main > ol,
body.lwl-stage-active main#main > blockquote {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	color: rgba(244,236,220,0.92);
}

/* 2026-04-30 (r4.1) — Outer cinematic wrappers (.lwl-scene/.lwl-cinematic/
   .lwl-cinematic-frame/.lwl-card) are STRUCTURAL only. They don't render
   chrome themselves — that role belongs to the inline-styled <section>
   sub-cards inside them ("Time Anchor", "Comparison Lens", etc.).
   This avoids double-boxing where the outer wrapper would consume the
   visual budget and drown the inner sub-cards. */
.lwl-path-lesson__content .lwl-scene,
.lwl-path-lesson__content .lwl-cinematic,
.lwl-path-lesson__content .lwl-cinematic-frame,
.lwl-path-lesson__content .lwl-card {
	background: transparent !important;
	background-image: none !important;
	color: rgba(244,236,220,0.96) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
	box-shadow: none !important;
}
/* Strip chrome on nested wrappers so a .lwl-card inside a .lwl-cinematic
   doesn't double up. Only the OUTERMOST cinematic wrapper renders the box;
   any nested wrapper becomes a transparent structural element. */
.lwl-path-lesson__content .lwl-scene .lwl-scene,
.lwl-path-lesson__content .lwl-scene .lwl-cinematic,
.lwl-path-lesson__content .lwl-scene .lwl-cinematic-frame,
.lwl-path-lesson__content .lwl-scene .lwl-card,
.lwl-path-lesson__content .lwl-cinematic .lwl-scene,
.lwl-path-lesson__content .lwl-cinematic .lwl-cinematic,
.lwl-path-lesson__content .lwl-cinematic .lwl-cinematic-frame,
.lwl-path-lesson__content .lwl-cinematic .lwl-card,
.lwl-path-lesson__content .lwl-cinematic-frame .lwl-scene,
.lwl-path-lesson__content .lwl-cinematic-frame .lwl-cinematic,
.lwl-path-lesson__content .lwl-cinematic-frame .lwl-cinematic-frame,
.lwl-path-lesson__content .lwl-cinematic-frame .lwl-card,
.lwl-path-lesson__content .lwl-card .lwl-scene,
.lwl-path-lesson__content .lwl-card .lwl-cinematic,
.lwl-path-lesson__content .lwl-card .lwl-cinematic-frame,
.lwl-path-lesson__content .lwl-card .lwl-card {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 14px !important;
	box-shadow: none !important;
}

/* 2026-04-30 (r4.1) — Tutor exports the cinematic sub-cards as plain
   <section> / <div> with inline `style="background:#fff;border:..."`
   (no LWL class). Strategy: ONLY LEAF inline-styled elements (those with
   NO inline-styled descendants) get the dark opaque card chrome. Inline-
   styled wrappers stay transparent so we don't double up.
   Uses :has() — modern Chromium / Safari / Firefox 121+ all support it.
   The :not(:has(...)) version is the leaf check.
   ========================================================================= */
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])):not([style*="height: 1px"]) {
	background: linear-gradient(180deg, rgba(10,14,22,0.92), rgba(10,14,22,0.86)) !important;
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(10,14,22,0.92), rgba(10,14,22,0.86)) !important;
	border: 1px solid rgba(255,216,123,0.22) !important;
	border-radius: 14px !important;
	padding: 18px 22px !important;
	margin: 14px auto !important;
	box-shadow: 0 8px 22px rgba(0,0,0,0.32) !important;
	color: rgba(244,236,220,0.96) !important;
	max-width: 720px !important;
}
/* Inline-styled WRAPPERS (have inline-styled descendants) — stay invisible
   structural blocks. They just provide spacing for the leaf sub-cards. */
.lwl-path-lesson__content [style*="background"]:has([style*="background"]) {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
	box-shadow: none !important;
	max-width: none !important;
}
/* Section elements without inline backgrounds (Tutor wraps title sections
   in plain <section>) — keep transparent. */
.lwl-path-lesson__content > section:not([style*="background"]),
.lwl-path-lesson__content section:not([style*="background"]) {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
}
/* Force light text inside the dark leaf sub-cards (override Tutor's inline
   dark-slate text colors that are designed for white backgrounds). */
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])),
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) * {
	color: rgba(244,236,220,0.96) !important;
}
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) strong {
	color: #fff8e8 !important;
}
/* Section title (first <p><strong>...</strong></p> or h-tag inside a leaf
   sub-card) — gold so the section name pops. */
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) h1,
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) h2,
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) h3,
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) h4,
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) > p:first-child > strong,
.lwl-path-lesson__content [style*="background"]:not(:has([style*="background"])) > p:first-child {
	color: #ffd87b !important;
}
/* Keep the 1px Tutor dividers transparent and thin. */
.lwl-path-lesson__content [style*="height: 1px"],
.lwl-path-lesson__content [style*="height:1px"] {
	background: rgba(255,216,123,0.25) !important;
	height: 1px !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 18px auto !important;
	max-width: 520px !important;
}
.lwl-path-lesson__content .lwl-scene * ,
.lwl-path-lesson__content .lwl-cinematic *,
.lwl-path-lesson__content .lwl-cinematic-frame *,
.lwl-path-lesson__content .lwl-card * {
	color: inherit !important;
}
.lwl-path-lesson__content .lwl-scene h1, .lwl-path-lesson__content .lwl-scene h2, .lwl-path-lesson__content .lwl-scene h3,
.lwl-path-lesson__content .lwl-cinematic h1, .lwl-path-lesson__content .lwl-cinematic h2, .lwl-path-lesson__content .lwl-cinematic h3,
.lwl-path-lesson__content .lwl-cinematic-frame h1, .lwl-path-lesson__content .lwl-cinematic-frame h2, .lwl-path-lesson__content .lwl-cinematic-frame h3 {
	color: var(--lwl-path-ink-1, #f4ecdc) !important;
}
.lwl-path-lesson__content .lwl-title {
	color: var(--lwl-path-route-tint, #c2a4f0) !important;
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif) !important;
}
.lwl-path-lesson--dojo .lwl-path-lesson__content .lwl-title {
	color: #ffd0b0 !important;
}

/* =========================================================================
   2026-04-29 (round 2) — Atelier submission box
   ========================================================================= */
.lwl-path-atelier-submit {
	margin-top: 28px;
	padding: 26px 28px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,216,123,0.06), rgba(120,90,40,0.025));
	border: 1px solid rgba(255,216,123,0.18);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.lwl-path-atelier-submit__head { margin-bottom: 4px; }
.lwl-path-atelier-submit__title {
	margin: 4px 0 6px;
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-size: 22px;
	color: #ffd87b;
}
.lwl-path-atelier-submit__hint {
	margin: 0;
	font-size: 13.5px;
	color: rgba(244,236,220,0.7);
}
.lwl-path-atelier-submit__textarea {
	width: 100%;
	min-height: 280px;
	padding: 18px 20px;
	border-radius: 12px;
	background: rgba(0,0,0,0.32);
	border: 1px solid rgba(255,216,123,0.22);
	color: var(--lwl-path-ink-1, #f4ecdc);
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-size: 16px;
	line-height: 1.65;
	resize: vertical;
	outline: none;
	transition: border-color 160ms ease, background 160ms ease;
}
.lwl-path-atelier-submit__textarea:focus {
	border-color: #ffd87b;
	background: rgba(0,0,0,0.45);
}
.lwl-path-atelier-submit__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.lwl-path-atelier-submit__counter {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(244,236,220,0.7);
}
.lwl-path-atelier-submit__counter[data-state="under"] { color: #ffb88c; }
.lwl-path-atelier-submit__counter[data-state="ok"]    { color: #b2efc2; }
.lwl-path-atelier-submit__counter[data-state="over"]  { color: #ffc9c9; }
.lwl-path-atelier-submit__counter span[data-role="words"] {
	font-family: var(--lwl-path-font-display, "Playfair Display", "Fraunces", Georgia, serif);
	font-size: 22px;
	color: var(--lwl-path-ink-1, #f4ecdc);
	margin-right: 4px;
	text-transform: none;
	letter-spacing: 0;
}
.lwl-path-atelier-submit__counter-target {
	margin-left: 6px;
	font-size: 12px;
}
.lwl-path-atelier-submit__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.lwl-path-atelier-submit__confirm {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	margin-top: 12px;
	border-radius: 12px;
	background: rgba(120,210,150,0.1);
	border: 1px solid rgba(120,210,150,0.4);
	color: #b2efc2;
	animation: lwl-path-enter 480ms ease both;
}
/* 2026-04-30 (r3) — class-based hide that beats the global stage-shell
   !important opacity rule (which was making `[hidden]` show through).
   Removed by lwl-path.js on successful submit. */
.lwl-path-atelier-submit__confirm.is-hidden {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}
.lwl-path-atelier-submit__confirm-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #78d296;
	color: #0e1a13;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0;
}
.lwl-path-atelier-submit__confirm-msg {
	margin: 4px 0 0;
	color: rgba(244,236,220,0.8);
	font-size: 13.5px;
	line-height: 1.55;
}

/* =========================================================================
   2026-04-30 r6 — LWL LESSON COMPONENT VOCABULARY
   -------------------------------------------------------------------------
   All new lesson HTML uses the BEM-ish vocabulary defined here. Legacy
   override blocks above are kept until every lesson is migrated (Phase 3
   cleanup will drop them). New work goes through these classes; nothing
   here uses :has() or [style*=...] so it is fast and predictable.

   Vocabulary:
     .lwl-lesson-body          - root spacing rhythm
     .lwl-section              - titled section
     .lwl-quote-card           - italic introductory blockquote
     .lwl-place-card           - "Stepping Stone N — Place Name" panel
     .lwl-stage-card           - Time Anchor / Comparison Lens / Emotion Signals
     .lwl-callout              + --cambridge | --booster | --spanish | --prompt | --checklist
     .lwl-table                - styled semantic table
     .lwl-rule                 - proper hr divider
     .lwl-closing-card         - gold-bordered "When the hearth is lit..." footer
     .lwl-gates                - "The Gates Ahead" unlock list
     .lwl-prompt               - emphatic centered question prompt (Atelier)

   Per-lesson-type variants extend the existing --dojo / --atelier recipe:
     --hearth, --lexicon, --field-film, --exam-trial
   ========================================================================= */

/* ---- Root spacing rhythm ---------------------------------------------- */
.lwl-path-lesson__content .lwl-lesson-body {
	display: block;
	padding: 0;
	margin: 0;
}
.lwl-path-lesson__content .lwl-lesson-body > * + * {
	margin-top: 22px;
}
.lwl-path-lesson__content .lwl-lesson-body > .lwl-rule + *,
.lwl-path-lesson__content .lwl-lesson-body > * + .lwl-rule {
	margin-top: 14px;
}

/* ---- Section block ---------------------------------------------------- */
.lwl-path-lesson__content .lwl-section {
	display: block;
	padding: 0;
	margin: 0;
}
.lwl-path-lesson__content .lwl-section > * + * { margin-top: 12px; }
.lwl-path-lesson__content .lwl-section__title {
	font-family: "Playfair Display", "Crimson Pro", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: #ffe7c2;
	margin: 0;
	line-height: 1.25;
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
}
.lwl-path-lesson__content .lwl-section__title::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255,205,140,0.85) 0%, rgba(255,205,140,0.0) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.lwl-path-lesson__content .lwl-section.is-revealed .lwl-section__title::after,
body.lwl-no-motion .lwl-path-lesson__content .lwl-section__title::after {
	transform: scaleX(1);
}
.lwl-path-lesson__content .lwl-section__lead {
	font-size: 16.5px;
	line-height: 1.7;
	color: rgba(244,236,220,0.92);
	margin: 0;
}
.lwl-path-lesson__content .lwl-section p {
	font-size: 18px;
	line-height: 1.72;
	color: rgba(244,236,220,0.88);
	font-weight: 450;
}

/* ---- Quote card ------------------------------------------------------- */
.lwl-path-lesson__content .lwl-quote-card {
	position: relative;
	font-family: "Playfair Display", "Crimson Pro", "Cormorant Garamond", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	line-height: 1.55;
	color: #f4ecdc;
	text-align: center;
	max-width: 640px;
	margin: 6px auto 6px;
	padding: 26px 38px;
	border: 0;
	border-left: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
	border-radius: 14px;
}
.lwl-path-lesson__content .lwl-quote-card::before,
.lwl-path-lesson__content .lwl-quote-card::after {
	position: absolute;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 64px;
	line-height: 1;
	color: rgba(255,205,140,0.45);
	opacity: 0;
	transition: opacity 600ms ease 200ms, transform 600ms ease 200ms;
}
.lwl-path-lesson__content .lwl-quote-card::before {
	content: "\201C";
	top: -6px;
	left: 4px;
	transform: translateY(6px);
}
.lwl-path-lesson__content .lwl-quote-card::after {
	content: "\201D";
	bottom: -34px;
	right: 4px;
	transform: translateY(-6px);
}
.lwl-path-lesson__content .lwl-quote-card.is-revealed::before,
.lwl-path-lesson__content .lwl-quote-card.is-revealed::after,
body.lwl-no-motion .lwl-path-lesson__content .lwl-quote-card::before,
body.lwl-no-motion .lwl-path-lesson__content .lwl-quote-card::after {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Place card (Stepping Stone N — Place Name) ----------------------- */
.lwl-path-lesson__content .lwl-place-card {
	max-width: 620px;
	margin: 0 auto;
	padding: 22px 26px;
	text-align: center;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(255,205,140,0.08) 0%, rgba(255,205,140,0) 60%),
		linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,205,140,0.20);
	border-radius: 16px;
	box-shadow: 0 8px 26px rgba(0,0,0,0.30);
}
.lwl-path-lesson__content .lwl-place-card__name {
	font-family: "Playfair Display", "Crimson Pro", Georgia, serif;
	font-size: 23px;
	font-weight: 600;
	color: #fff2d4;
	margin: 0 0 8px;
	line-height: 1.25;
}
.lwl-path-lesson__content .lwl-place-card__sub {
	font-size: 15px;
	color: rgba(244,236,220,0.78);
	line-height: 1.55;
	margin: 0;
	font-style: italic;
}

/* ---- Stage card ------------------------------------------------------- */
.lwl-path-lesson__content .lwl-stage-card {
	display: block;
	padding: 18px 22px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease, border-color 320ms ease;
	position: relative;
	opacity: 0;
	transform: translateY(8px);
	will-change: transform, opacity;
}
.lwl-path-lesson__content .lwl-stage-card.is-revealed,
body.lwl-no-motion .lwl-path-lesson__content .lwl-stage-card {
	opacity: 1;
	transform: translateY(0);
}
.lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255,205,140,0.32);
	box-shadow: 0 10px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,205,140,0.12);
}
.lwl-path-lesson__content .lwl-stage-card__title {
	font-family: "Playfair Display", "Crimson Pro", "Fraunces", Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	color: #ffe7c2;
	margin: 0 0 14px;
	line-height: 1.3;
}
.lwl-path-lesson__content .lwl-stage-card__title .lwl-stage-card__icon {
	margin-left: 6px;
	font-size: 1.05em;
	vertical-align: -1px;
}
.lwl-path-lesson__content .lwl-stage-card__body {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(244,236,220,0.86);
	margin: 0;
}
.lwl-path-lesson__content .lwl-stage-card__body strong {
	color: #fff0d2;
	font-weight: 600;
}
/* Stage card grid wrapper for groups of 2-3 cards on wider lessons */
.lwl-path-lesson__content .lwl-stage-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* ---- Callouts (single-purpose insight boxes) -------------------------- */
.lwl-path-lesson__content .lwl-callout {
	position: relative;
	padding: 14px 18px 14px 24px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
	border: 1px solid rgba(255,255,255,0.10);
	overflow: hidden;
}
.lwl-path-lesson__content .lwl-callout::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	border-radius: 4px 0 0 4px;
	background: rgba(255,255,255,0.20);
}
.lwl-path-lesson__content .lwl-callout p {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: rgba(244,236,220,0.92);
	font-weight: 450;
}
.lwl-path-lesson__content .lwl-callout p + p { margin-top: 8px; }
.lwl-path-lesson__content .lwl-callout strong { color: #fff0d2; font-weight: 600; }
.lwl-path-lesson__content .lwl-callout ul,
.lwl-path-lesson__content .lwl-callout ol {
	margin: 8px 0 0 18px;
	padding: 0;
}
.lwl-path-lesson__content .lwl-callout li {
	color: rgba(244,236,220,0.88);
	font-size: 15px;
	line-height: 1.6;
}

/* Cambridge tip — gold ribbon, exam authority */
.lwl-path-lesson__content .lwl-callout--cambridge {
	background: linear-gradient(180deg, rgba(255,205,140,0.10) 0%, rgba(255,205,140,0.025) 100%);
	border-color: rgba(255,205,140,0.32);
}
.lwl-path-lesson__content .lwl-callout--cambridge::before {
	background: linear-gradient(180deg, #ffd58a 0%, #f6a43d 100%);
	box-shadow: 0 0 12px rgba(255,180,70,0.45);
}
.lwl-path-lesson__content .lwl-callout--cambridge::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,220,0.55) 50%, transparent 100%);
	transform: translateY(-100%);
	animation: lwl-ribbon-shimmer 5s ease-in-out 1.5s infinite;
}
.lwl-path-lesson__content .lwl-callout--cambridge strong { color: #ffd58a; }

/* B2/C1 Booster — purple ribbon, advancement */
.lwl-path-lesson__content .lwl-callout--booster {
	background: linear-gradient(180deg, rgba(180,140,255,0.10) 0%, rgba(180,140,255,0.025) 100%);
	border-color: rgba(180,140,255,0.32);
}
.lwl-path-lesson__content .lwl-callout--booster::before {
	background: linear-gradient(180deg, #c8b8ff 0%, #8e6bff 100%);
	box-shadow: 0 0 12px rgba(180,140,255,0.45);
}
.lwl-path-lesson__content .lwl-callout--booster strong { color: #d8c8ff; }

/* Signal for Spanish speakers — teal ribbon */
.lwl-path-lesson__content .lwl-callout--spanish {
	background: linear-gradient(180deg, rgba(120,210,200,0.10) 0%, rgba(120,210,200,0.025) 100%);
	border-color: rgba(120,210,200,0.30);
}
.lwl-path-lesson__content .lwl-callout--spanish::before {
	background: linear-gradient(180deg, #84e3d2 0%, #43b8a6 100%);
	box-shadow: 0 0 12px rgba(100,210,190,0.40);
}
.lwl-path-lesson__content .lwl-callout--spanish strong { color: #b8efe2; }

/* Question / situation prompt — soft slate */
.lwl-path-lesson__content .lwl-callout--prompt {
	background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
	border-color: rgba(255,255,255,0.16);
	text-align: center;
	padding: 18px 22px;
}
.lwl-path-lesson__content .lwl-callout--prompt::before { display: none; }
.lwl-path-lesson__content .lwl-callout--prompt p {
	font-family: "Playfair Display", "Crimson Pro", Georgia, serif;
	font-size: 18px;
	color: #fff2d4;
	font-style: italic;
}

/* Submission checklist - green-ish accent */
.lwl-path-lesson__content .lwl-callout--checklist {
	background: linear-gradient(180deg, rgba(120,210,150,0.08) 0%, rgba(120,210,150,0.018) 100%);
	border-color: rgba(120,210,150,0.28);
}
.lwl-path-lesson__content .lwl-callout--checklist::before {
	background: linear-gradient(180deg, #b2efc2 0%, #4fa86b 100%);
	box-shadow: 0 0 10px rgba(140,220,170,0.40);
}
.lwl-path-lesson__content .lwl-callout--checklist strong { color: #c8f0d6; }

@keyframes lwl-ribbon-shimmer {
	0%   { transform: translateY(-100%); opacity: 0; }
	18%  { opacity: 0.85; }
	45%  { transform: translateY(100%); opacity: 0; }
	100% { transform: translateY(100%); opacity: 0; }
}

/* ---- Table ------------------------------------------------------------ */
.lwl-path-lesson__content .lwl-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.10);
	font-size: 14.5px;
	line-height: 1.55;
}
.lwl-path-lesson__content .lwl-table thead th {
	text-align: left;
	background: rgba(255,205,140,0.10);
	color: #ffe7c2;
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255,205,140,0.22);
}
.lwl-path-lesson__content .lwl-table tbody td {
	padding: 10px 14px;
	color: rgba(244,236,220,0.88);
	border-top: 1px solid rgba(255,255,255,0.06);
	vertical-align: top;
}
.lwl-path-lesson__content .lwl-table tbody tr:first-child td { border-top: 0; }
.lwl-path-lesson__content .lwl-table tbody tr:hover td {
	background: rgba(255,255,255,0.025);
}
.lwl-path-lesson__content .lwl-table strong { color: #fff0d2; font-weight: 600; }
.lwl-path-lesson__content .lwl-table em { color: rgba(255,232,200,0.92); }

/* ---- Rule (proper hr) ------------------------------------------------- */
.lwl-path-lesson__content .lwl-rule,
.lwl-path-lesson__content hr.lwl-hr {
	display: block;
	height: 1px;
	border: 0;
	margin: 18px auto;
	max-width: 480px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255,205,140,0.35) 30%,
		rgba(255,205,140,0.35) 70%,
		transparent 100%);
}

/* ---- Closing card ----------------------------------------------------- */
.lwl-path-lesson__content .lwl-closing-card {
	display: block;
	margin: 20px auto 0;
	max-width: 620px;
	padding: 22px 26px;
	text-align: center;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(255,205,140,0.10) 0%, rgba(255,205,140,0) 60%),
		linear-gradient(180deg, rgba(15,8,4,0.55) 0%, rgba(15,8,4,0.35) 100%);
	border: 1px solid rgba(255,205,140,0.40);
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,205,140,0.22);
	animation: lwl-closing-pulse 4.5s ease-in-out infinite;
}
.lwl-path-lesson__content .lwl-closing-card__title {
	font-family: "Playfair Display", "Crimson Pro", Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	color: #fff2d4;
	margin: 0 0 8px;
	letter-spacing: 0.005em;
}
.lwl-path-lesson__content .lwl-closing-card p {
	margin: 0;
	color: rgba(255,232,200,0.86);
	font-size: 15px;
	line-height: 1.6;
}
@keyframes lwl-closing-pulse {
	0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 0 rgba(255,205,140,0.22); }
	50%      { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 22px 4px rgba(255,205,140,0.16); }
}

/* ---- Gates Ahead ------------------------------------------------------ */
.lwl-path-lesson__content .lwl-gates {
	display: block;
	margin: 24px 0 0;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.lwl-path-lesson__content .lwl-gates__title {
	font-family: "Playfair Display", "Crimson Pro", Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	color: #ffe7c2;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.lwl-path-lesson__content .lwl-gates__intro {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(244,236,220,0.85);
	margin: 0 0 16px;
}
.lwl-path-lesson__content .lwl-gates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.lwl-path-lesson__content .lwl-gates__list li {
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.06);
	font-size: 15px;
	color: rgba(244,236,220,0.88);
	display: flex;
	align-items: baseline;
	gap: 10px;
	transition: background 200ms ease, border-color 200ms ease;
}
.lwl-path-lesson__content .lwl-gates__list li:hover {
	background: rgba(255,255,255,0.045);
	border-color: rgba(255,205,140,0.20);
}
.lwl-path-lesson__content .lwl-gates__list li strong {
	color: #fff0d2;
	font-weight: 600;
}
.lwl-path-lesson__content .lwl-gates__list li em {
	color: rgba(244,236,220,0.66);
	margin-left: auto;
	font-size: 13.5px;
	font-style: italic;
}
.lwl-path-lesson__content .lwl-gates__footer {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: rgba(244,236,220,0.62);
	font-style: italic;
	text-align: center;
}

/* ---- Prompt ----------------------------------------------------------- */
.lwl-path-lesson__content .lwl-prompt {
	display: block;
	margin: 8px auto;
	max-width: 620px;
	padding: 16px 22px;
	text-align: center;
	background: linear-gradient(180deg, rgba(255,205,140,0.08) 0%, rgba(255,205,140,0.02) 100%);
	border: 1px solid rgba(255,205,140,0.28);
	border-radius: 14px;
	color: #fff2d4;
}
.lwl-path-lesson__content .lwl-prompt p {
	margin: 0;
	font-family: "Playfair Display", "Crimson Pro", Georgia, serif;
	font-style: italic;
	font-size: 17.5px;
	line-height: 1.5;
}

/* =========================================================================
   2026-04-30 r6 — NEW VARIANTS (--hearth, --lexicon, --field-film, --exam-trial)
   Each follows the existing --dojo / --atelier recipe:
     gradient base + animated radial-blob ::before + reduced-motion guard.
   ========================================================================= */

/* ---- --hearth (Welcome Hearth, Common Room, Compass Room, etc.) ------- */
.lwl-path-lesson--hearth {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(34,18,12,0.82), rgba(22,12,8,0.74)) !important;
	border: 1px solid rgba(255,180,120,0.20) !important;
	box-shadow: 0 18px 60px rgba(60,22,12,0.45) !important;
}
.lwl-path-lesson--hearth > * { position: relative; z-index: 1; }
.lwl-path-lesson--hearth::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(50% 38% at 28% 32%, rgba(255,160,100,0.34) 0%, transparent 70%),
		radial-gradient(48% 36% at 75% 70%, rgba(220,90,80,0.30) 0%, transparent 70%),
		radial-gradient(40% 30% at 50% 55%, rgba(255,130,80,0.22) 0%, transparent 75%),
		radial-gradient(34% 26% at 25% 78%, rgba(180,55,40,0.22) 0%, transparent 75%);
	filter: blur(32px) saturate(1.05);
	animation: lwl-path-ember-drift 34s ease-in-out infinite alternate;
}
@keyframes lwl-path-ember-drift {
	0%   { transform: translate(0,0)     scale(1);    }
	33%  { transform: translate(1.5%, -0.8%) scale(1.03); }
	66%  { transform: translate(-1.5%, 1.5%) scale(1.05); }
	100% { transform: translate(0.8%, -1.5%) scale(1.02); }
}
.lwl-path-lesson--hearth .lwl-path-lesson__type    { color: #ffd0a0; }
.lwl-path-lesson--hearth .lwl-path-lesson__title   { color: #fff0d8; }
.lwl-path-lesson--hearth .lwl-path-lesson__content h3 { color: #ffc090; }
/* Dropcap on place-card name in hearth lessons */
.lwl-path-lesson--hearth .lwl-place-card__name::first-letter {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.6em;
	color: #ffc788;
	margin-right: 2px;
	line-height: 0.9;
}

/* ---- --lexicon (New Spells / vocab decks) ----------------------------- */
.lwl-path-lesson--lexicon {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(28,20,42,0.80), rgba(22,16,38,0.72)) !important;
	border: 1px solid rgba(220,180,255,0.20) !important;
	box-shadow: 0 18px 60px rgba(36,20,56,0.45) !important;
}
.lwl-path-lesson--lexicon > * { position: relative; z-index: 1; }
.lwl-path-lesson--lexicon::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(50% 38% at 25% 30%, rgba(220,180,255,0.30) 0%, transparent 72%),
		radial-gradient(46% 36% at 78% 66%, rgba(255,180,210,0.26) 0%, transparent 72%),
		radial-gradient(38% 30% at 55% 50%, rgba(180,160,240,0.22) 0%, transparent 75%);
	filter: blur(34px) saturate(1.08);
	animation: lwl-path-pearl-drift 28s ease-in-out infinite alternate;
}
@keyframes lwl-path-pearl-drift {
	0%   { transform: translate(0,0)     scale(1);    }
	50%  { transform: translate(2%, 1.5%) scale(1.04); }
	100% { transform: translate(-1.5%, -1%) scale(1.02); }
}
.lwl-path-lesson--lexicon .lwl-path-lesson__type    { color: #d8c8ff; }
.lwl-path-lesson--lexicon .lwl-path-lesson__title   { color: #fde6ff; }
.lwl-path-lesson--lexicon .lwl-path-lesson__content h3 { color: #d8c8ff; }

/* ---- --field-film (video lessons / Story from the World) -------------- */
.lwl-path-lesson--field-film {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(12,22,32,0.84), rgba(10,18,28,0.76)) !important;
	border: 1px solid rgba(140,200,220,0.20) !important;
	box-shadow: 0 18px 60px rgba(8,18,28,0.50) !important;
}
.lwl-path-lesson--field-film > * { position: relative; z-index: 1; }
.lwl-path-lesson--field-film::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		radial-gradient(60% 38% at 18% 28%, rgba(80,160,200,0.30) 0%, transparent 72%),
		radial-gradient(55% 36% at 82% 70%, rgba(60,120,160,0.26) 0%, transparent 72%),
		linear-gradient(115deg, transparent 40%, rgba(120,180,210,0.10) 50%, transparent 60%);
	filter: blur(28px) saturate(1.05);
	animation: lwl-path-cinematic-sweep 30s linear infinite;
}
@keyframes lwl-path-cinematic-sweep {
	0%   { transform: translate(-3%, 0)   scale(1.0);  }
	50%  { transform: translate( 3%, -1%) scale(1.04); }
	100% { transform: translate(-3%, 0)   scale(1.0);  }
}
.lwl-path-lesson--field-film .lwl-path-lesson__type    { color: #b0e0f0; }
.lwl-path-lesson--field-film .lwl-path-lesson__title   { color: #e8f2ff; }
.lwl-path-lesson--field-film .lwl-path-lesson__content h3 { color: #b0d8ee; }

/* ---- --exam-trial (Exam Dojo / Take Flight / high-stakes) ------------- */
.lwl-path-lesson--exam-trial {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(10,14,28,0.86), rgba(8,12,24,0.78)) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	box-shadow: 0 18px 60px rgba(8,10,22,0.55) !important;
}
.lwl-path-lesson--exam-trial > * { position: relative; z-index: 1; }
.lwl-path-lesson--exam-trial::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background:
		linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%),
		radial-gradient(50% 40% at 50% 50%, rgba(80,120,200,0.18) 0%, transparent 75%);
	filter: blur(20px);
	animation: lwl-path-exam-sweep 22s ease-in-out infinite;
}
@keyframes lwl-path-exam-sweep {
	0%   { transform: translate(-4%, 0); }
	50%  { transform: translate( 4%, 0); }
	100% { transform: translate(-4%, 0); }
}
.lwl-path-lesson--exam-trial .lwl-path-lesson__type    { color: #c8d8ff; }
.lwl-path-lesson--exam-trial .lwl-path-lesson__title   { color: #f4f8ff; }
.lwl-path-lesson--exam-trial .lwl-path-lesson__content h3 { color: #c8d8ff; }

/* Reduced-motion: kill all the new variant drifts + the section underline + closing pulse */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-lesson--hearth::before,
	.lwl-path-lesson--lexicon::before,
	.lwl-path-lesson--field-film::before,
	.lwl-path-lesson--exam-trial::before {
		animation: none !important;
	}
	.lwl-path-lesson__content .lwl-callout--cambridge::after { animation: none !important; opacity: 0 !important; }
	.lwl-path-lesson__content .lwl-closing-card { animation: none !important; }
	.lwl-path-lesson__content .lwl-stage-card,
	.lwl-path-lesson__content .lwl-section,
	.lwl-path-lesson__content .lwl-quote-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* ---- 2026-04-30 r6.1 — bridge text (the centered-italic narrative line that
   sits between sections, e.g. "The Welcome Hearth is not the Path yet…") --- */
.lwl-path-lesson__content .lwl-bridge-text {
	display: block;
	max-width: 560px;
	margin: 18px auto 0;
	padding: 0 12px;
	text-align: center;
	font-style: italic;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(244,236,220,0.78);
}

/* ---- 2026-04-30 r6.1 — alias support so legacy .lwl-callout--neutral on
   already-shipped Dojo + Atelier lessons still renders consistently with the
   new vocabulary, no double migration required. --- */
.lwl-path-lesson__content .lwl-callout--neutral {
	background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
	border-color: rgba(255,255,255,0.10);
}
.lwl-path-lesson__content .lwl-callout--neutral::before {
	background: rgba(255,255,255,0.20);
}

/* =========================================================================
   2026-04-30 r7 — POST-r6 REGRESSION FIXES (additive override block)
   -------------------------------------------------------------------------
   Bug A — Lesson content reads as flat prose. r6 stripped the legacy
   .lwl-scene/.lwl-cinematic chrome and replaced sections with a transparent
   .lwl-section; Welcome Hearth, Grammar Dojo and Atelier all read as one
   long centred prose column. This block restores SUBTLE card chrome to
   .lwl-section so each titled section visually groups its content. Two
   layers max: outer .lwl-path-lesson (variant card) → .lwl-section (this
   inset) → content. We do NOT re-introduce the 6-layer nested-cinematic
   look that Liam already killed in r6.

   Bug B — Word Formation quizzes show the literal heading "Fill in the
   gap" with an empty input field. The sentence template + bracketed root
   word live in answers[0].answer_title (with {dash} placeholder); the
   correct word lives in answers[0].answer_two_gap_match. Confirmed across
   all 136 fill_in_the_blank questions in the corpus. The PHP renderer was
   reading answer_title as the expected answer (broken grading too) and
   never displaying the sentence. r7 PHP now extracts the stem + cue and
   renders them inline; this CSS styles the new __fill-stem / __fill-blank
   / __fill-cue classes so they sit naturally in the existing quiz card.
   ========================================================================= */

/* ---- Bug A — section card chrome --------------------------------------- */
.lwl-path-lesson__content .lwl-section {
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	padding: 22px 26px;
	margin: 0;
}
/* Section title — slightly tighter top spacing now that the title sits
   inside its own card padding. */
.lwl-path-lesson__content .lwl-section > .lwl-section__title:first-child {
	margin-top: 0;
}
/* Variant tints — give each lesson family a subtle border accent so the
   inset card chrome harmonises with the outer variant gradient instead
   of fighting it. */
.lwl-path-lesson--hearth .lwl-path-lesson__content .lwl-section {
	background: rgba(255, 215, 175, 0.038);
	border-color: rgba(255, 200, 155, 0.10);
}
.lwl-path-lesson--dojo .lwl-path-lesson__content .lwl-section {
	background: rgba(255, 196, 140, 0.04);
	border-color: rgba(255, 196, 140, 0.10);
}
.lwl-path-lesson--atelier .lwl-path-lesson__content .lwl-section {
	background: rgba(190, 170, 255, 0.04);
	border-color: rgba(190, 170, 255, 0.12);
}
.lwl-path-lesson--lexicon .lwl-path-lesson__content .lwl-section {
	background: rgba(220, 200, 255, 0.038);
	border-color: rgba(220, 200, 255, 0.10);
}
.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-section {
	background: rgba(180, 200, 220, 0.035);
	border-color: rgba(180, 200, 220, 0.10);
}
.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-section {
	background: rgba(150, 180, 220, 0.032);
	border-color: rgba(150, 180, 220, 0.10);
}

/* ---- Bug B — Word Formation fill-in-the-blank stem + cue --------------- */
.lwl-path-quiz__fill-stem {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(244,236,220,0.92);
}
.lwl-path-quiz__fill-blank {
	display: inline-block;
	min-width: 110px;
	margin: 0 4px;
	padding: 0 6px;
	border-bottom: 2px dashed rgba(255,205,140,0.55);
	color: transparent;
	user-select: none;
	line-height: 1.2;
	vertical-align: baseline;
}
.lwl-path-quiz__fill-cue {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 11px;
	border-radius: 999px;
	background: rgba(255,205,140,0.14);
	border: 1px solid rgba(255,205,140,0.35);
	color: #ffe7c2;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* =====================================================================
   2026-04-30 (r8) — Quiz persistence + animation
   See findings/QUIZ_AXIS_MAPPING.md for the full axis taxonomy.

   Components:
   - .lwl-history-card        — Memory of the Path (revisit experience)
   - .lwl-attempt-pill        — single-attempt pill with score + axis bars
   - .lwl-trend-indicator     — improving / steady / declining chip
   - .lwl-path-quiz__results  — results view container (fillbar + score card)
   - .lwl-path-quiz__fillbar  — gold gradient progress bar (reuses seg-pulse)
   - .lwl-path-quiz__score    — score card (slide-up + tier-tinted glow)
   - .lwl-path-quiz__explanation — side-panel slide-in ("Why this works")
   - .lwl-path-quiz__question--revealing / --revealed — stagger states
   - .lwl-path-quiz__form--folded / --revealed       — revisit fold/unfold
   ===================================================================== */

/* ---------------- Memory of the Path history card ---------------- */
.lwl-history-card {
	display: block;
	margin: 0 0 22px;
	padding: 22px 26px 18px;
	border-radius: 16px;
	background: linear-gradient(180deg,
		rgba(252, 211, 77, 0.06) 0%,
		rgba(255, 200, 100, 0.04) 60%,
		rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(252, 211, 77, 0.2);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(255, 235, 180, 0.05);
	transition: opacity 360ms ease, transform 360ms ease, max-height 360ms ease, padding 360ms ease, margin 360ms ease;
	max-height: 1200px;
	overflow: hidden;
}
.lwl-history-card--folded {
	opacity: 0.45;
	transform: translateY(-8px) scale(0.985);
	margin-bottom: 14px;
	max-height: 56px;
	padding-top: 10px;
	padding-bottom: 10px;
	pointer-events: none;
}
.lwl-history-card--folded .lwl-history-card__pills,
.lwl-history-card--folded .lwl-history-card__cta {
	opacity: 0;
}
.lwl-history-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
	margin: 0 0 14px;
}
.lwl-history-card__eyebrow {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	font-weight: 600;
}
.lwl-history-card__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
}
.lwl-trend-indicator {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
}
.lwl-trend-indicator--improving { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.08); }
.lwl-trend-indicator--steady    { color: rgba(255, 255, 255, 0.75); }
.lwl-trend-indicator--declining { color: #fca5a5; border-color: rgba(252, 165, 165, 0.3); background: rgba(252, 165, 165, 0.06); }

.lwl-history-card__pills {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: opacity 240ms ease;
}

.lwl-attempt-pill {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 200ms ease, border-color 200ms ease;
}
.lwl-attempt-pill[data-tier="perfect"]  { border-color: rgba(252, 211, 77, 0.4); background: rgba(252, 211, 77, 0.06); }
.lwl-attempt-pill[data-tier="strong"]   { border-color: rgba(245, 158, 11, 0.32); }
.lwl-attempt-pill[data-tier="practice"] { border-color: rgba(248, 113, 113, 0.22); }
.lwl-attempt-pill__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
.lwl-attempt-pill__date  { color: rgba(255, 255, 255, 0.55); font-feature-settings: "tnum"; }
.lwl-attempt-pill__score { font-weight: 700; color: rgba(255, 255, 255, 0.95); font-feature-settings: "tnum"; }
.lwl-attempt-pill__pct   { color: rgba(255, 255, 255, 0.55); font-feature-settings: "tnum"; }
.lwl-attempt-pill__tier {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
}
.lwl-attempt-pill__tier[data-tier="perfect"]  { background: rgba(252, 211, 77, 0.18); color: var(--lwl-path-gold); }
.lwl-attempt-pill__tier[data-tier="strong"]   { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.lwl-attempt-pill__tier[data-tier="practice"] { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

/* Per-axis mini-bars inside each pill */
.lwl-attempt-pill__axes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.lwl-attempt-pill__axis-bar {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 110px;
	height: 18px;
	padding: 0 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
}
.lwl-attempt-pill__axis-bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: linear-gradient(90deg, rgba(252, 211, 77, 0.18), rgba(252, 211, 77, 0.08));
	transition: width 360ms ease;
}
.lwl-attempt-pill__axis-bar[data-tier="perfect"]  .lwl-attempt-pill__axis-bar-fill { background: linear-gradient(90deg, rgba(252, 211, 77, 0.45), rgba(245, 158, 11, 0.25)); }
.lwl-attempt-pill__axis-bar[data-tier="strong"]   .lwl-attempt-pill__axis-bar-fill { background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(245, 158, 11, 0.15)); }
.lwl-attempt-pill__axis-bar[data-tier="practice"] .lwl-attempt-pill__axis-bar-fill { background: linear-gradient(90deg, rgba(248, 113, 113, 0.3), rgba(248, 113, 113, 0.12)); }
.lwl-attempt-pill__axis-bar-label {
	position: relative;
	z-index: 2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.lwl-history-card__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	transition: opacity 240ms ease;
}
.lwl-history-card__note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
	font-style: italic;
}

/* ---------------- Quiz form fold / reveal (revisit experience) ---------------- */
.lwl-path-quiz__form {
	transition: opacity 360ms ease, transform 360ms ease, max-height 360ms ease;
	max-height: 6000px;
}
.lwl-path-quiz__form--folded {
	opacity: 0;
	transform: translateY(8px);
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	margin: 0;
}
.lwl-path-quiz__form--revealed {
	opacity: 1;
	transform: translateY(0);
	max-height: 6000px;
}

/* ---------------- Submission results: stagger reveal ---------------- */
.lwl-path-quiz__form[data-state="results"] .lwl-path-quiz__questions { gap: 6px; }

.lwl-path-quiz__question {
	transition:
		background 320ms ease,
		border-color 320ms ease,
		box-shadow 320ms ease,
		transform 320ms ease;
}
.lwl-path-quiz__question--revealing {
	transform: scale(0.998);
}
.lwl-path-quiz__question--revealed { transform: none; }

.lwl-path-quiz__question--correct {
	background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
	border-color: rgba(34, 197, 94, 0.32) !important;
	box-shadow: 0 4px 18px rgba(34, 197, 94, 0.08);
}
.lwl-path-quiz__question--correct .lwl-path-quiz__qstem::before {
	content: '✓';
	display: inline-block;
	margin-right: 8px;
	font-weight: 700;
	color: #4ade80;
	font-size: 16px;
}
.lwl-path-quiz__question--incorrect {
	background: linear-gradient(180deg, rgba(248, 113, 113, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
	border-color: rgba(248, 113, 113, 0.3) !important;
	box-shadow: 0 4px 18px rgba(248, 113, 113, 0.08);
}
.lwl-path-quiz__question--incorrect .lwl-path-quiz__qstem::before {
	content: '×';
	display: inline-block;
	margin-right: 8px;
	font-weight: 700;
	color: #fca5a5;
	font-size: 18px;
}
.lwl-path-quiz__question--unanswered {
	background: rgba(148, 163, 184, 0.06);
	border-color: rgba(148, 163, 184, 0.2) !important;
}
.lwl-path-quiz__question--submitted {
	background: rgba(96, 165, 250, 0.05);
	border-color: rgba(96, 165, 250, 0.22) !important;
}

/* Side-panel explanation slide-in */
.lwl-path-quiz__explanation {
	margin-top: 14px;
	padding: 14px 18px;
	border-radius: 10px;
	background: rgba(252, 211, 77, 0.06);
	border-left: 3px solid var(--lwl-path-gold-soft);
	transform: translateX(24px);
	opacity: 0;
	transition: opacity 320ms ease, transform 320ms ease;
}
.lwl-path-quiz__explanation--shown {
	opacity: 1;
	transform: translateX(0);
}
.lwl-path-quiz__explanation-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	margin-bottom: 6px;
	font-weight: 600;
}
.lwl-path-quiz__explanation-body {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}
.lwl-path-quiz__explanation-body p:last-child { margin-bottom: 0; }

/* ---------------- Fillbar (gold gradient + glow) ---------------- */
.lwl-path-quiz__results {
	margin-top: 22px;
	transition: opacity 240ms ease;
}
.lwl-path-quiz__results[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.lwl-path-quiz__results[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.lwl-path-quiz__fillbar {
	margin: 0 0 18px;
}
.lwl-path-quiz__fillbar-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.lwl-path-quiz__fillbar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: linear-gradient(90deg, #ffe8a3 0%, #ffc878 60%, #f59e0b 100%);
	box-shadow:
		0 0 8px rgba(255, 216, 123, 0.6),
		0 0 18px rgba(255, 200, 100, 0.4),
		inset 0 0 0 1px rgba(255, 235, 180, 0.55);
	border-radius: 999px;
	transition: width 200ms ease-out;
	animation: lwl-path-seg-pulse 3.6s ease-in-out infinite;
}

/* ---------------- Score card (slide-up + tier glow) ---------------- */
.lwl-path-quiz__score {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 26px;
	border-radius: 16px;
	background:
		linear-gradient(180deg, rgba(252, 211, 77, 0.08) 0%, rgba(255, 200, 100, 0.04) 100%),
		rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(252, 211, 77, 0.28);
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.5),
		inset 0 0 0 1px rgba(255, 235, 180, 0.05);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 480ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.lwl-path-quiz__score--show {
	opacity: 1;
	transform: translateY(0);
}
.lwl-path-quiz__score[data-tier="perfect"]  { border-color: rgba(252, 211, 77, 0.55); box-shadow: 0 14px 40px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(255, 235, 180, 0.18); }
.lwl-path-quiz__score[data-tier="strong"]   { border-color: rgba(245, 158, 11, 0.4); }
.lwl-path-quiz__score[data-tier="practice"] { border-color: rgba(248, 113, 113, 0.32); background: linear-gradient(180deg, rgba(248, 113, 113, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 23, 42, 0.6); }

.lwl-path-quiz__score-num {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 36px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: -0.01em;
	font-feature-settings: "tnum";
}
.lwl-path-quiz__score-pct {
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	font-feature-settings: "tnum";
}
.lwl-path-quiz__score[data-tier="practice"] .lwl-path-quiz__score-pct { color: #fca5a5; }
.lwl-path-quiz__score-msg {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	font-style: italic;
}
.lwl-path-quiz__score-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/* ---------------- prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.lwl-history-card,
	.lwl-history-card--folded,
	.lwl-path-quiz__form,
	.lwl-path-quiz__form--folded,
	.lwl-path-quiz__form--revealed,
	.lwl-path-quiz__question,
	.lwl-path-quiz__explanation,
	.lwl-path-quiz__results,
	.lwl-path-quiz__fillbar-fill,
	.lwl-path-quiz__score {
		transition: none !important;
		animation: none !important;
	}
	.lwl-path-quiz__fillbar-fill { animation: none !important; }
	.lwl-path-quiz__score--show  { transform: none; opacity: 1; }
}

/* =====================================================================
   2026-04-30 (r9) — Revisit results-first + atelier states + fillbar polish
   ===================================================================== */

/* ---------------- Quiz revisit hero (results-first) ---------------- */
.lwl-path-quiz__revisit {
	position: relative;
	padding: 36px 32px 30px;
	margin: 0 0 8px;
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(252, 211, 77, 0.12) 0%, transparent 60%),
		radial-gradient(80% 100% at 0% 100%, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
	border: 1px solid rgba(252, 211, 77, 0.28);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.55),
		inset 0 0 0 1px rgba(255, 235, 180, 0.06);
}
.lwl-path-quiz__revisit[data-tier="perfect"] {
	border-color: rgba(252, 211, 77, 0.55);
	box-shadow:
		0 22px 60px rgba(252, 211, 77, 0.18),
		inset 0 0 0 1px rgba(255, 235, 180, 0.18);
}
.lwl-path-quiz__revisit[data-tier="practice"] {
	border-color: rgba(248, 113, 113, 0.34);
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(248, 113, 113, 0.08) 0%, transparent 60%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
}
.lwl-path-quiz__revisit--leaving {
	opacity: 0;
	transform: translateY(-12px) scale(0.99);
	transition: opacity 280ms ease, transform 320ms ease;
	pointer-events: none;
}

.lwl-path-quiz__revisit-hero {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 580px;
}
.lwl-path-quiz__revisit-eyebrow {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	font-weight: 600;
}
.lwl-path-quiz__revisit-title {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 4px 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: -0.01em;
}
.lwl-path-quiz__revisit-pct {
	font-size: 64px;
	line-height: 1;
	font-feature-settings: "tnum";
	color: var(--lwl-path-gold);
	text-shadow: 0 0 24px rgba(252, 211, 77, 0.35);
}
.lwl-path-quiz__revisit[data-tier="practice"] .lwl-path-quiz__revisit-pct { color: #fca5a5; text-shadow: 0 0 24px rgba(248, 113, 113, 0.32); }
.lwl-path-quiz__revisit-pct-sym { font-size: 32px; opacity: 0.85; margin-left: 2px; }
.lwl-path-quiz__revisit-divider {
	display: inline-block;
	width: 1px;
	height: 48px;
	background: linear-gradient(180deg, transparent 0%, rgba(252, 211, 77, 0.4) 50%, transparent 100%);
}
.lwl-path-quiz__revisit-tier-label {
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-family: inherit;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(252, 211, 77, 0.15);
	color: var(--lwl-path-gold);
	border: 1px solid rgba(252, 211, 77, 0.32);
}
.lwl-path-quiz__revisit-tier-label[data-tier="practice"] {
	background: rgba(248, 113, 113, 0.14);
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.3);
}
.lwl-path-quiz__revisit-tier-label[data-tier="strong"] {
	background: rgba(245, 158, 11, 0.14);
	color: #fbbf24;
	border-color: rgba(245, 158, 11, 0.3);
}
.lwl-path-quiz__revisit-msg {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.84);
	font-style: italic;
	margin: 4px 0 8px;
}
.lwl-path-quiz__revisit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	letter-spacing: 0.04em;
}
.lwl-path-quiz__revisit-meta-cell strong { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

/* Decorative concentric rings — soft, drifting */
.lwl-path-quiz__revisit-orb {
	position: absolute;
	top: -70px;
	right: -70px;
	width: 360px;
	height: 360px;
	pointer-events: none;
	z-index: 1;
	opacity: 0.55;
	mix-blend-mode: screen;
}
.lwl-path-quiz__revisit-orb-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(252, 211, 77, 0.18);
	animation: lwl-path-revisit-orb-drift 18s ease-in-out infinite alternate;
}
.lwl-path-quiz__revisit-orb-ring--mid   { inset: 35px; opacity: 0.7; animation-delay: -6s; border-color: rgba(252, 211, 77, 0.24); }
.lwl-path-quiz__revisit-orb-ring--inner { inset: 75px; opacity: 0.85; animation-delay: -12s; border-color: rgba(252, 211, 77, 0.32); }
@keyframes lwl-path-revisit-orb-drift {
	0%,100% { transform: scale(1) rotate(0deg); }
	50%     { transform: scale(1.04) rotate(20deg); }
}
.lwl-path-quiz__revisit[data-tier="practice"] .lwl-path-quiz__revisit-orb-ring { border-color: rgba(248, 113, 113, 0.18); }

.lwl-path-quiz__revisit-pills {
	list-style: none;
	margin: 24px 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	z-index: 2;
}
.lwl-path-quiz__revisit-pills .lwl-attempt-pill {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background 240ms ease;
}
.lwl-path-quiz__revisit-pills .lwl-attempt-pill--entered {
	opacity: 1;
	transform: translateY(0);
}
.lwl-path-quiz__revisit-pills .lwl-attempt-pill--top {
	border-color: rgba(252, 211, 77, 0.55) !important;
	background: linear-gradient(180deg, rgba(252, 211, 77, 0.12) 0%, rgba(252, 211, 77, 0.04) 100%);
	box-shadow: 0 10px 30px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(255, 235, 180, 0.15);
}
.lwl-attempt-pill__attempt-no {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.5);
	font-feature-settings: "tnum";
	font-weight: 700;
}
.lwl-attempt-pill__axis-bar-pct {
	position: relative;
	z-index: 2;
	margin-left: auto;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	font-feature-settings: "tnum";
}
.lwl-attempt-pill__axis-bar-fill {
	transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lwl-path-quiz__revisit-cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lwl-path-quiz__revisit-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
	margin: 0;
}

/* ---------------- Striking Retake CTA (gold gradient + glow) ---------------- */
.lwl-path-cta--retake {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(20, 18, 8, 0.95);
	background: linear-gradient(135deg, #ffe8a3 0%, #fcd34d 50%, #f59e0b 100%);
	border: 1px solid rgba(245, 158, 11, 0.6);
	box-shadow:
		0 6px 24px rgba(252, 211, 77, 0.32),
		inset 0 1px 1px rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease;
	overflow: hidden;
	isolation: isolate;
}
.lwl-path-cta--retake:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow:
		0 12px 36px rgba(252, 211, 77, 0.48),
		inset 0 1px 1px rgba(255, 255, 255, 0.6);
	filter: brightness(1.05);
}
.lwl-path-cta--retake:active {
	transform: translateY(0) scale(0.99);
}
.lwl-path-cta__glow {
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 235, 180, 0.5), rgba(245, 158, 11, 0.5), rgba(255, 235, 180, 0.5));
	z-index: -1;
	filter: blur(10px);
	opacity: 0;
	transition: opacity 260ms ease;
}
.lwl-path-cta--retake:hover .lwl-path-cta__glow { opacity: 0.9; }
.lwl-path-cta--retake::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-110%);
	transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.lwl-path-cta--retake:hover::before { transform: translateX(110%); }
.lwl-path-cta__arrow {
	font-weight: 600;
	transition: transform 220ms ease;
}
.lwl-path-cta--retake:hover .lwl-path-cta__arrow { transform: translateX(3px); }

/* ---------------- Atelier states ---------------- */
.lwl-path-atelier-state {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px 26px;
	padding: 28px 32px;
	margin: 0 0 22px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
	border: 1px solid rgba(252, 211, 77, 0.22);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 235, 180, 0.06);
	overflow: hidden;
	transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lwl-path-atelier-state--entering { opacity: 0; transform: translateY(18px); }
.lwl-path-atelier-state--entered  { opacity: 1; transform: translateY(0); }
.lwl-path-atelier-state--leaving  { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.lwl-path-atelier-state__glow {
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: radial-gradient(60% 80% at 30% 0%, rgba(252, 211, 77, 0.18) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Awaiting state — owl glyph + slow drift */
.lwl-path-atelier-state--awaiting {
	background:
		radial-gradient(80% 60% at 30% 0%, rgba(96, 165, 250, 0.08) 0%, transparent 70%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
	border-color: rgba(96, 165, 250, 0.3);
}
.lwl-path-atelier-state--awaiting .lwl-path-atelier-state__glow {
	background: radial-gradient(60% 80% at 30% 0%, rgba(96, 165, 250, 0.18) 0%, transparent 70%);
}
.lwl-path-atelier-state__icon {
	position: relative;
	z-index: 2;
	width: 96px;
	height: 96px;
	color: #93c5fd;
	display: grid;
	place-items: center;
}
.lwl-path-atelier-state__owl {
	width: 100%;
	height: 100%;
	animation: lwl-path-owl-pulse 3.6s ease-in-out infinite;
	filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.38));
}
@keyframes lwl-path-owl-pulse {
	0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.38)); }
	50%      { transform: scale(1.04) rotate(-2deg); filter: drop-shadow(0 0 22px rgba(96, 165, 250, 0.6)); }
}
.lwl-path-atelier-state__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lwl-path-atelier-state__eyebrow {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	font-weight: 600;
}
.lwl-path-atelier-state--awaiting .lwl-path-atelier-state__eyebrow { color: #93c5fd; }
.lwl-path-atelier-state__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	margin: 0;
	letter-spacing: -0.01em;
}
.lwl-path-atelier-state__msg {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 4px;
}
.lwl-path-atelier-state__meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.04em;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-feature-settings: "tnum";
}
.lwl-path-atelier-state__meta strong { color: rgba(255, 255, 255, 0.85); font-weight: 700; }
.lwl-path-atelier-state__sep { opacity: 0.35; }

/* Corrected state — score hero + rubric bars */
.lwl-path-atelier-state--corrected {
	grid-template-columns: 1fr;
	border-color: rgba(252, 211, 77, 0.4);
}
.lwl-path-atelier-state--corrected[data-tier="practice"] {
	border-color: rgba(248, 113, 113, 0.38);
}
.lwl-path-atelier-state--corrected[data-tier="perfect"] {
	border-color: rgba(252, 211, 77, 0.6);
	box-shadow: 0 18px 60px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(255, 235, 180, 0.18);
}
.lwl-path-atelier-state__head { position: relative; z-index: 2; }
.lwl-path-atelier-state__score {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex-wrap: wrap;
	margin: 4px 0 14px;
}
.lwl-path-atelier-state__score-num {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 56px;
	line-height: 1;
	color: var(--lwl-path-gold);
	font-feature-settings: "tnum";
	letter-spacing: -0.01em;
	text-shadow: 0 0 28px rgba(252, 211, 77, 0.32);
}
.lwl-path-atelier-state[data-tier="practice"] .lwl-path-atelier-state__score-num { color: #fca5a5; text-shadow: 0 0 28px rgba(248, 113, 113, 0.3); }
.lwl-path-atelier-state__mark-sep { opacity: 0.5; margin: 0 6px; }
.lwl-path-atelier-state__mark-max { font-size: 32px; opacity: 0.7; }
.lwl-path-atelier-state__score-meta {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	font-feature-settings: "tnum";
}
.lwl-path-atelier-state__pct {
	font-size: 18px;
	font-weight: 700;
	color: var(--lwl-path-gold);
	letter-spacing: 0.04em;
}
.lwl-path-atelier-state[data-tier="practice"] .lwl-path-atelier-state__pct { color: #fca5a5; }

.lwl-path-atelier-state__rubric {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 18px;
}
.lwl-path-atelier-state__rubric-row {
	display: grid;
	grid-template-columns: 220px 1fr 56px;
	align-items: center;
	gap: 12px;
}
.lwl-path-atelier-state__rubric-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
.lwl-path-atelier-state__rubric-bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.lwl-path-atelier-state__rubric-bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: linear-gradient(90deg, #ffe8a3 0%, #fcd34d 60%, #f59e0b 100%);
	box-shadow: 0 0 8px rgba(252, 211, 77, 0.5);
	border-radius: 999px;
	transition: width 760ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 0%;
}
.lwl-path-atelier-state__rubric-row[data-tier="practice"] .lwl-path-atelier-state__rubric-bar-fill {
	background: linear-gradient(90deg, rgba(248, 113, 113, 0.7), rgba(248, 113, 113, 0.45));
	box-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
}
.lwl-path-atelier-state__rubric-score {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.92);
	font-feature-settings: "tnum";
	text-align: right;
}

.lwl-path-atelier-state__note {
	position: relative;
	z-index: 2;
	margin: 0 0 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 0;
}
.lwl-path-atelier-state__note > summary {
	cursor: pointer;
	padding: 12px 18px;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	font-weight: 600;
	list-style: none;
}
.lwl-path-atelier-state__note > summary::-webkit-details-marker { display: none; }
.lwl-path-atelier-state__note > summary::after { content: '▾'; float: right; opacity: 0.6; }
.lwl-path-atelier-state__note[open] > summary::after { content: '▴'; }
.lwl-path-atelier-state__note-body {
	padding: 0 22px 18px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}
.lwl-path-atelier-state__note-body p { margin: 0 0 10px; }
.lwl-path-atelier-state__note-body p:last-child { margin-bottom: 0; }

.lwl-path-atelier-state__history {
	position: relative;
	z-index: 2;
	margin: 0 0 18px;
}
.lwl-path-atelier-state__history > summary {
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	padding: 6px 0;
	list-style: none;
}
.lwl-path-atelier-state__history > summary::-webkit-details-marker { display: none; }
.lwl-path-atelier-state__history-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lwl-path-atelier-state__cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.lwl-path-atelier-state__note-cta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
	margin: 0;
}

/* ---------------- Fillbar polish — climb glow + fizzle particles ---------------- */
.lwl-path-quiz__fillbar-track {
	position: relative;
	overflow: visible; /* let sparks fly above the rail */
}
.lwl-path-quiz__fillbar-fill::after {
	content: '';
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 235, 180, 1) 0%, rgba(252, 211, 77, 0.6) 50%, transparent 75%);
	filter: blur(2px);
	pointer-events: none;
	opacity: 0.95;
}
.lwl-path-quiz__fillbar-fill--pulse {
	animation: lwl-path-fillbar-pulse 360ms ease-out;
}
@keyframes lwl-path-fillbar-pulse {
	0%   { box-shadow: 0 0 8px rgba(255, 216, 123, 0.6),  0 0 16px rgba(255, 200, 100, 0.4),  inset 0 0 0 1px rgba(255, 235, 180, 0.55); }
	50%  { box-shadow: 0 0 14px rgba(255, 216, 123, 0.95), 0 0 28px rgba(255, 200, 100, 0.7),  inset 0 0 0 1px rgba(255, 250, 220, 0.85); }
	100% { box-shadow: 0 0 8px rgba(255, 216, 123, 0.6),  0 0 18px rgba(255, 200, 100, 0.4),  inset 0 0 0 1px rgba(255, 235, 180, 0.55); }
}
.lwl-path-quiz__fillbar-track--landed .lwl-path-quiz__fillbar-fill {
	animation: lwl-path-fillbar-landed 1.6s ease-out infinite;
}
@keyframes lwl-path-fillbar-landed {
	0%, 100% { box-shadow: 0 0 12px rgba(255, 216, 123, 0.7),  0 0 22px rgba(255, 200, 100, 0.5),  inset 0 0 0 1px rgba(255, 235, 180, 0.7); }
	50%      { box-shadow: 0 0 18px rgba(255, 216, 123, 0.95), 0 0 32px rgba(255, 200, 100, 0.7),  inset 0 0 0 1px rgba(255, 250, 220, 0.9); }
}

.lwl-path-quiz__fillbar-burst {
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 3;
}
.lwl-path-quiz__fillbar-spark {
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 235, 180, 1) 0%, rgba(252, 211, 77, 0.8) 50%, transparent 80%);
	box-shadow: 0 0 6px rgba(255, 216, 123, 0.9);
	transform: translate(0, 0) scale(var(--lwl-spark-s, 1));
	animation: lwl-path-spark-rise var(--lwl-spark-d, 360ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
	opacity: 1;
}
@keyframes lwl-path-spark-rise {
	0%   { transform: translate(0, 0) scale(var(--lwl-spark-s, 1)); opacity: 1; }
	60%  { opacity: 0.8; }
	100% { transform: translate(var(--lwl-spark-x, 0px), var(--lwl-spark-y, -40px)) scale(0); opacity: 0; }
}

/* ---------------- prefers-reduced-motion overrides for r9 additions ---------------- */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-quiz__revisit,
	.lwl-path-quiz__revisit-orb-ring,
	.lwl-path-atelier-state,
	.lwl-path-atelier-state__owl,
	.lwl-path-quiz__fillbar-fill,
	.lwl-path-quiz__fillbar-fill::after,
	.lwl-path-cta--retake,
	.lwl-path-cta--retake::before,
	.lwl-attempt-pill__axis-bar-fill,
	.lwl-path-atelier-state__rubric-bar-fill {
		transition: none !important;
		animation: none !important;
	}
	.lwl-path-quiz__revisit-pills .lwl-attempt-pill { opacity: 1; transform: none; }
}

/* =====================================================================
   2026-04-30 (r9.1) — Polish pass for ship: more glow, more breathing,
   ambient particles, score landing flash, idle CTA pulse, hover lifts.
   ===================================================================== */

/* Tier label — soft pulse on landing */
.lwl-path-quiz__revisit-tier-label {
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}
.lwl-path-quiz__revisit-tier-label--landed {
	animation: lwl-path-tier-land 1.1s ease-out;
}
@keyframes lwl-path-tier-land {
	0%   { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.0); }
	35%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(252, 211, 77, 0.3); }
	60%  { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.0); }
	100% { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.0); }
}

/* Pill hover lift (revisit + history) */
.lwl-attempt-pill {
	transition: opacity 380ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.lwl-attempt-pill:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(252, 211, 77, 0.16) inset;
}
.lwl-path-quiz__revisit-pills .lwl-attempt-pill--top {
	animation: lwl-path-top-pill-glow 4.2s ease-in-out infinite;
}
@keyframes lwl-path-top-pill-glow {
	0%, 100% { box-shadow: 0 10px 30px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(255, 235, 180, 0.15); }
	50%      { box-shadow: 0 14px 38px rgba(252, 211, 77, 0.32), inset 0 0 0 1px rgba(255, 235, 180, 0.28); }
}

/* Retake CTA — idle slow breathing glow when at rest */
.lwl-path-cta--retake {
	animation: lwl-path-retake-breathe 4.8s ease-in-out infinite;
}
.lwl-path-cta--retake:hover { animation: none; }
@keyframes lwl-path-retake-breathe {
	0%, 100% { box-shadow: 0 6px 24px rgba(252, 211, 77, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.5); }
	50%      { box-shadow: 0 10px 32px rgba(252, 211, 77, 0.5),  inset 0 1px 1px rgba(255, 255, 255, 0.6); }
}
.lwl-path-cta--retake:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

/* Ambient gold particles drifting behind the revisit hero */
.lwl-path-quiz__revisit::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(2px 2px at 20% 30%, rgba(255, 235, 180, 0.45), transparent 60%),
		radial-gradient(1.5px 1.5px at 85% 70%, rgba(252, 211, 77, 0.5), transparent 60%),
		radial-gradient(1.5px 1.5px at 50% 85%, rgba(255, 235, 180, 0.35), transparent 60%),
		radial-gradient(2px 2px at 75% 20%, rgba(252, 211, 77, 0.4), transparent 60%),
		radial-gradient(1px 1px at 30% 65%, rgba(255, 235, 180, 0.5), transparent 60%);
	opacity: 0.55;
	animation: lwl-path-revisit-dust 22s ease-in-out infinite alternate;
}
.lwl-path-quiz__revisit[data-tier="practice"]::before { opacity: 0.3; }
@keyframes lwl-path-revisit-dust {
	0%, 100% { transform: translateY(0) translateX(0); opacity: 0.45; }
	50%      { transform: translateY(-6px) translateX(2px); opacity: 0.7; }
}

/* Score card — landing flash + tier-tinted ambient glow */
.lwl-path-quiz__score--landed::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(80% 60% at 50% 0%, rgba(252, 211, 77, 0.32) 0%, transparent 70%);
	opacity: 0;
	animation: lwl-path-score-flash 900ms ease-out;
	pointer-events: none;
	z-index: 0;
}
@keyframes lwl-path-score-flash {
	0%   { opacity: 0; transform: scale(1.04); }
	30%  { opacity: 0.9; }
	100% { opacity: 0; transform: scale(1); }
}
.lwl-path-quiz__score--show {
	animation: lwl-path-score-rise 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lwl-path-score-rise {
	0%   { opacity: 0; transform: translateY(20px) scale(0.98); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lwl-path-quiz__score[data-tier="perfect"] {
	animation: lwl-path-score-rise 480ms cubic-bezier(0.22, 1, 0.36, 1),
		lwl-path-score-perfect-glow 4.4s ease-in-out 600ms infinite;
}
@keyframes lwl-path-score-perfect-glow {
	0%, 100% { box-shadow: 0 14px 40px rgba(252, 211, 77, 0.18), inset 0 0 0 1px rgba(255, 235, 180, 0.18); }
	50%      { box-shadow: 0 22px 56px rgba(252, 211, 77, 0.34), inset 0 0 0 1px rgba(255, 235, 180, 0.32); }
}

/* Score card position context for the ::after flash */
.lwl-path-quiz__score { position: relative; overflow: hidden; }
.lwl-path-quiz__score > * { position: relative; z-index: 1; }

/* Atelier awaiting — subtle paper-plane / letter-drift accent */
.lwl-path-atelier-state--awaiting::after {
	content: '';
	position: absolute;
	right: 8%;
	bottom: 14%;
	width: 64px;
	height: 64px;
	background-image:
		linear-gradient(135deg, rgba(147, 197, 253, 0.5), rgba(147, 197, 253, 0.15));
	clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
	filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.5));
	transform: translateX(0) rotate(0deg);
	animation: lwl-path-letter-drift 6.2s ease-in-out infinite;
	opacity: 0.7;
	pointer-events: none;
}
@keyframes lwl-path-letter-drift {
	0%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: 0.55; }
	50%      { transform: translate(8px, -10px) rotate(3deg); opacity: 0.85; }
}
.lwl-path-atelier-state__owl {
	transition: filter 600ms ease;
}

/* Atelier corrected — score-num shimmer + rubric bar lit */
.lwl-path-atelier-state--corrected .lwl-path-atelier-state__score-num {
	position: relative;
}
.lwl-path-atelier-state--corrected[data-tier="perfect"] .lwl-path-atelier-state__score-num::after,
.lwl-path-atelier-state--corrected[data-tier="strong"]  .lwl-path-atelier-state__score-num::after {
	content: '';
	position: absolute;
	inset: -8px -16px;
	background: radial-gradient(60% 80% at 50% 50%, rgba(252, 211, 77, 0.25), transparent 70%);
	pointer-events: none;
	z-index: -1;
	animation: lwl-path-score-num-aura 4s ease-in-out infinite;
}
@keyframes lwl-path-score-num-aura {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.04); }
}

.lwl-path-atelier-state__rubric-bar-fill {
	position: relative;
	overflow: hidden;
}
.lwl-path-atelier-state__rubric-bar-fill--lit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: lwl-path-bar-shimmer 1.4s ease-out;
}
@keyframes lwl-path-bar-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(150%); }
}

/* Fillbar leading edge — comet-trail and brighter glow */
.lwl-path-quiz__fillbar-fill {
	background: linear-gradient(90deg,
		rgba(255, 232, 163, 0.92) 0%,
		rgba(252, 211, 77, 1) 50%,
		rgba(245, 158, 11, 1) 100%);
}
.lwl-path-quiz__fillbar-fill::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: lwl-path-fillbar-shimmer 1.8s ease-in-out infinite;
	pointer-events: none;
}
@keyframes lwl-path-fillbar-shimmer {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(120%); }
	100% { transform: translateX(120%); }
}
/* Brighter leading-edge orb */
.lwl-path-quiz__fillbar-fill::after {
	width: 18px;
	height: 18px;
	background: radial-gradient(circle, rgba(255, 250, 220, 1) 0%, rgba(252, 211, 77, 0.85) 40%, rgba(245, 158, 11, 0.4) 70%, transparent 80%);
	filter: blur(1.5px);
}

/* Lesson card / atelier-state lift on hover (subtle) */
.lwl-path-atelier-state {
	will-change: transform, box-shadow;
}
.lwl-path-atelier-state:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 235, 180, 0.08);
}

/* prefers-reduced-motion overrides for new animations */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-cta--retake,
	.lwl-path-quiz__revisit-pills .lwl-attempt-pill--top,
	.lwl-path-quiz__score[data-tier="perfect"],
	.lwl-path-quiz__score--show,
	.lwl-path-quiz__revisit-tier-label--landed,
	.lwl-path-atelier-state--corrected .lwl-path-atelier-state__score-num::after,
	.lwl-path-atelier-state__rubric-bar-fill--lit::before,
	.lwl-path-quiz__fillbar-fill::before,
	.lwl-path-quiz__revisit::before,
	.lwl-path-atelier-state--awaiting::after {
		animation: none !important;
	}
}

/* =====================================================================
   2026-04-30 (r9.2) — Navigation polish: floating arrows, Routes screen
   live progress, tablet responsive.
   ===================================================================== */

/* ---------------- Japanese-esque prev/next arrows ---------------- */
.lwl-path-arrow {
	position: fixed;
	top: 50%;
	z-index: 80;
	width: 64px;
	height: 64px;
	border: 0;
	background: transparent;
	color: var(--lwl-path-gold);
	cursor: pointer;
	padding: 0;
	display: grid;
	place-items: center;
	transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 280ms ease;
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
}
.lwl-path-arrow.is-active {
	opacity: 0.92;
	pointer-events: auto;
}
.lwl-path-arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0.85);
}
.lwl-path-arrow--prev {
	left: 18px;
	transform: translateY(-50%);
}
.lwl-path-arrow--next {
	right: 18px;
	transform: translateY(-50%);
}
.lwl-path-arrow:hover {
	transform: translateY(-50%) scale(1.08);
	filter: drop-shadow(0 6px 22px rgba(252, 211, 77, 0.45));
}
.lwl-path-arrow:active {
	transform: translateY(-50%) scale(0.96);
}
.lwl-path-arrow svg {
	width: 64px;
	height: 64px;
	overflow: visible;
}
/* Soft halo circle — subtle, like sumi-e */
.lwl-path-arrow__halo {
	fill: rgba(15, 23, 42, 0.55);
	stroke: rgba(252, 211, 77, 0.32);
	stroke-width: 0.7;
	transition: fill 280ms ease, stroke 280ms ease, stroke-width 280ms ease;
}
.lwl-path-arrow:hover .lwl-path-arrow__halo {
	fill: rgba(15, 23, 42, 0.78);
	stroke: rgba(252, 211, 77, 0.7);
	stroke-width: 1.2;
}
.lwl-path-arrow.is-active .lwl-path-arrow__halo {
	animation: lwl-path-arrow-halo-glow 4s ease-in-out infinite;
}
@keyframes lwl-path-arrow-halo-glow {
	0%, 100% { stroke: rgba(252, 211, 77, 0.32); }
	50%      { stroke: rgba(252, 211, 77, 0.55); }
}
/* Brush-stroke arrow — single thoughtful line */
.lwl-path-arrow__brush {
	fill: none;
	stroke: var(--lwl-path-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 240ms ease, stroke-width 240ms ease;
}
.lwl-path-arrow:hover .lwl-path-arrow__brush {
	stroke: #ffe8a3;
	stroke-width: 2.4;
}
/* Dot terminus — the brush settling */
.lwl-path-arrow__dot {
	fill: none;
	stroke: var(--lwl-path-gold);
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0.55;
}
.lwl-path-arrow:hover .lwl-path-arrow__dot { opacity: 0.95; }

/* Hover preview hint label */
.lwl-path-arrow__hint {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	opacity: 0;
	transition: opacity 240ms ease;
	white-space: nowrap;
	font-weight: 600;
}
.lwl-path-arrow:hover .lwl-path-arrow__hint { opacity: 0.85; }

/* ---------------- Routes screen — progress fill animation ---------------- */
.lwl-path-route__progress-fill {
	background: linear-gradient(90deg, #ffe8a3 0%, #fcd34d 60%, #f59e0b 100%);
	box-shadow: 0 0 8px rgba(252, 211, 77, 0.45);
	transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lwl-path-route--passed { /* >= 100% */
	border-color: rgba(252, 211, 77, 0.6) !important;
	box-shadow: 0 18px 50px rgba(252, 211, 77, 0.22), inset 0 0 0 1px rgba(255, 235, 180, 0.18) !important;
}
.lwl-path-route--passed::after {
	content: '✓ Complete';
	position: absolute;
	top: 14px;
	right: 18px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lwl-path-gold);
	background: rgba(252, 211, 77, 0.16);
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid rgba(252, 211, 77, 0.4);
	z-index: 4;
}
.lwl-path-route--in-progress .lwl-path-route__progress-fill {
	animation: lwl-path-route-fill-glow 4.2s ease-in-out infinite;
}
@keyframes lwl-path-route-fill-glow {
	0%, 100% { box-shadow: 0 0 8px rgba(252, 211, 77, 0.45); }
	50%      { box-shadow: 0 0 14px rgba(252, 211, 77, 0.7); }
}

/* Route list arrival animation — staggered fade-up on Routes screen */
.lwl-path-routes__grid > .lwl-path-route {
	opacity: 0;
	transform: translateY(14px);
	animation: lwl-path-route-arrive 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lwl-path-routes__grid > .lwl-path-route:nth-child(1) { animation-delay: 80ms; }
.lwl-path-routes__grid > .lwl-path-route:nth-child(2) { animation-delay: 200ms; }
.lwl-path-routes__grid > .lwl-path-route:nth-child(3) { animation-delay: 320ms; }
.lwl-path-routes__grid > .lwl-path-route:nth-child(4) { animation-delay: 440ms; }
@keyframes lwl-path-route-arrive {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Tablet (iPad) responsive ---------------- */
@media (max-width: 1199px) {
	.lwl-path-viewport {
		max-width: none;
		padding: 28px 36px 80px;
	}
}

@media (max-width: 1024px) {
	/* Console becomes a single column on iPad portrait — menu collapses to a
	   floating drawer that slides in from the left. The big toggle stays
	   pinned top-left. */
	.lwl-path-console {
		grid-template-columns: 1fr !important;
	}
	.lwl-path-menu {
		position: fixed;
		top: 80px;
		left: 0;
		width: 84%;
		max-width: 360px;
		height: calc(100vh - 80px);
		transform: translateX(-100%);
		transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
		z-index: 70;
		background: rgba(2, 3, 10, 0.96);
		border-right: 1px solid rgba(255, 255, 255, 0.06);
		box-shadow: 18px 0 40px rgba(0, 0, 0, 0.5);
	}
	.lwl-path-console:not(.is-collapsed) .lwl-path-menu {
		transform: translateX(0);
	}
	.lwl-path-console.is-collapsed .lwl-path-menu {
		position: fixed;
		transform: translateX(-100%);
		pointer-events: none;
		width: 84%;
		max-width: 360px;
	}
	.lwl-path-console.is-collapsed .lwl-path-menu__toggle {
		position: fixed;
		top: 92px;
		left: 12px;
		pointer-events: auto;
		z-index: 80;
	}
	/* Backdrop when menu is open on tablet */
	.lwl-path-console:not(.is-collapsed)::before {
		content: '';
		position: fixed;
		inset: 80px 0 0 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 65;
		animation: lwl-path-fade-in 240ms ease;
	}
	@keyframes lwl-path-fade-in { from { opacity: 0; } to { opacity: 1; } }
	.lwl-path-viewport {
		padding: 28px 24px 100px;
		max-width: 760px;
	}
	.lwl-path-arrow {
		width: 52px;
		height: 52px;
	}
	.lwl-path-arrow svg {
		width: 52px;
		height: 52px;
	}
	.lwl-path-arrow--prev { left: 8px; }
	.lwl-path-arrow--next { right: 8px; }
	/* Routes grid wraps */
	.lwl-path-routes__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	/* Atelier rubric grid collapses */
	.lwl-path-atelier-state__rubric-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 8px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}
	.lwl-path-atelier-state__rubric-bar { width: 100%; }
	.lwl-path-atelier-state__rubric-score { text-align: left; }
	.lwl-path-atelier-state {
		grid-template-columns: 1fr;
		padding: 22px 22px;
	}
	.lwl-path-atelier-state__icon { width: 72px; height: 72px; }
	/* Quiz answers stack better */
	.lwl-path-quiz__answers {
		grid-template-columns: 1fr;
	}
	/* Score card stacks on tablet */
	.lwl-path-quiz__score-num {
		font-size: 28px;
	}
	.lwl-path-quiz__score-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.lwl-path-quiz__score-actions .lwl-path-cta { text-align: center; }
	/* Revisit hero — smaller pct, vertical stack */
	.lwl-path-quiz__revisit {
		padding: 28px 22px 24px;
	}
	.lwl-path-quiz__revisit-pct { font-size: 48px; }
	.lwl-path-quiz__revisit-title { gap: 12px; flex-wrap: wrap; }
	.lwl-path-quiz__revisit-orb { width: 240px; height: 240px; top: -50px; right: -50px; opacity: 0.4; }
}

@media (max-width: 768px) {
	/* Phone: single-column everywhere, even tighter padding */
	.lwl-path-viewport {
		padding: 20px 16px 80px;
	}
	.lwl-path-routes__grid {
		grid-template-columns: 1fr;
	}
	.lwl-path-arrow {
		display: none; /* keyboard / menu nav only on phones */
	}
	.lwl-path-quiz__revisit-meta {
		font-size: 12px;
	}
	.lwl-path-atelier-state__score-num {
		font-size: 40px;
	}
	.lwl-path-atelier-state__rubric-row {
		grid-template-columns: 1fr;
	}
}

/* prefers-reduced-motion guards */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-arrow,
	.lwl-path-arrow.is-active .lwl-path-arrow__halo,
	.lwl-path-routes__grid > .lwl-path-route,
	.lwl-path-route--in-progress .lwl-path-route__progress-fill {
		animation: none !important;
		transition: none !important;
	}
	.lwl-path-routes__grid > .lwl-path-route { opacity: 1; transform: none; }
}
/* =========================================================================
   2026-05-01 r10 — INNER CARD ELEVATION (additive, append to lwl-path.css)
   --------------------------------------------------------------------------
   Goal: restore the legacy "floating 3D card" sensation for the inner
   content cards (Time Anchor / Comparison Lens / Emotion Signals; the
   Cambridge / Booster / Spanish callouts; the alignment tables; the
   opening quote card) WITHOUT touching the outer per-lesson wrapper
   (--hearth / --dojo / --atelier / --lexicon / --field-film / --exam-trial)
   which Liam wants left exactly as it is.

   Why three layers (rim-light + close shadow + far shadow):
     • The single most important trick for "raised on dark" is the inset
       top rim-light (`0 1px 0 rgba(255,...,...,) inset`). It mimics light
       hitting the card's upper edge — without it, even with a strong
       cast shadow, dark-on-dark cards look stamped, not raised.
     • The close shadow (-8px y-offset blur) gives a crisp definition.
     • The far shadow (-16px y-offset blur, larger) gives ambient bloom.

   Hover language matches `.lwl-path-route:hover` (translateY(-3px) + gold
   border halo + deepened shadow) so inner cards feel of-a-piece with the
   route-card and quiz-answer hovers already on the page.

   This block ONLY lifts the inner content cards. Variant wrappers untouched.
   ========================================================================= */

/* =========================================================================
   1) STAGE CARDS — Time Anchor / Comparison Lens / Emotion Signals
   The hero "tool card" inside lessons; biggest visual win for elevation.
   ========================================================================= */

.lwl-path-lesson__content .lwl-stage-card {
	/* Brighter, semi-opaque parchment-tinted surface. The wrapper still
	   shows through faintly, which keeps everything in family, but the
	   card is now clearly a discrete object above it. */
	background:
		linear-gradient(180deg,
			rgba(255, 248, 232, 0.10) 0%,
			rgba(255, 248, 232, 0.035) 100%);
	border: 1px solid rgba(255, 215, 170, 0.30);
	box-shadow:
		0 1px 0 rgba(255, 235, 200, 0.08) inset,         /* top rim light */
		0 12px 30px -8px rgba(0, 0, 0, 0.55),             /* close cast */
		0 26px 70px -18px rgba(0, 0, 0, 0.45);            /* ambient bloom */
	transition:
		transform 280ms cubic-bezier(.2, .7, .2, 1),
		box-shadow 280ms ease,
		border-color 280ms ease;
}

.lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 215, 140, 0.60);
	box-shadow:
		0 1px 0 rgba(255, 240, 210, 0.12) inset,
		0 18px 42px -8px rgba(0, 0, 0, 0.62),
		0 32px 90px -18px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 215, 140, 0.20),              /* gold halo */
		0 0 50px -10px rgba(255, 200, 130, 0.28);         /* gold bloom */
}

/* Variant tinting — each lesson family pushes its palette into the inner
   card surface so cards harmonise with the wrapper instead of looking
   foreign. Wrapper itself is untouched. */
.lwl-path-lesson--hearth   .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(255, 220, 175, 0.13) 0%, rgba(255, 200, 150, 0.04) 100%);
	border-color: rgba(255, 195, 140, 0.34);
}
.lwl-path-lesson--hearth   .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(255, 200, 140, 0.65);
	box-shadow:
		0 1px 0 rgba(255, 235, 200, 0.14) inset,
		0 18px 42px -8px rgba(40, 16, 8, 0.62),
		0 32px 90px -18px rgba(40, 16, 8, 0.55),
		0 0 0 1px rgba(255, 200, 140, 0.24),
		0 0 50px -10px rgba(255, 180, 120, 0.32);
}

.lwl-path-lesson--dojo     .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(255, 200, 150, 0.13) 0%, rgba(255, 170, 120, 0.04) 100%);
	border-color: rgba(255, 175, 120, 0.34);
}
.lwl-path-lesson--dojo     .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(255, 180, 120, 0.65);
	box-shadow:
		0 1px 0 rgba(255, 230, 195, 0.14) inset,
		0 18px 42px -8px rgba(40, 16, 8, 0.62),
		0 32px 90px -18px rgba(40, 16, 8, 0.55),
		0 0 0 1px rgba(255, 180, 120, 0.26),
		0 0 50px -10px rgba(255, 160, 100, 0.32);
}

.lwl-path-lesson--atelier  .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(220, 200, 255, 0.13) 0%, rgba(190, 170, 255, 0.04) 100%);
	border-color: rgba(190, 160, 255, 0.34);
}
.lwl-path-lesson--atelier  .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(195, 165, 255, 0.65);
	box-shadow:
		0 1px 0 rgba(220, 200, 255, 0.14) inset,
		0 18px 42px -8px rgba(20, 14, 50, 0.62),
		0 32px 90px -18px rgba(20, 14, 50, 0.55),
		0 0 0 1px rgba(190, 160, 255, 0.26),
		0 0 50px -10px rgba(180, 140, 255, 0.32);
}

.lwl-path-lesson--lexicon  .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(220, 200, 255, 0.12) 0%, rgba(255, 200, 230, 0.035) 100%);
	border-color: rgba(220, 180, 255, 0.32);
}
.lwl-path-lesson--lexicon  .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(220, 180, 255, 0.62);
	box-shadow:
		0 1px 0 rgba(235, 220, 255, 0.14) inset,
		0 18px 42px -8px rgba(28, 18, 56, 0.60),
		0 32px 90px -18px rgba(28, 18, 56, 0.50),
		0 0 0 1px rgba(220, 180, 255, 0.24),
		0 0 50px -10px rgba(210, 170, 250, 0.30);
}

.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(180, 220, 240, 0.12) 0%, rgba(120, 180, 220, 0.035) 100%);
	border-color: rgba(160, 210, 230, 0.32);
}
.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(160, 210, 230, 0.62);
	box-shadow:
		0 1px 0 rgba(220, 235, 245, 0.14) inset,
		0 18px 42px -8px rgba(8, 18, 28, 0.62),
		0 32px 90px -18px rgba(8, 18, 28, 0.55),
		0 0 0 1px rgba(160, 210, 230, 0.24),
		0 0 50px -10px rgba(120, 190, 220, 0.30);
}

.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg, rgba(200, 220, 255, 0.10) 0%, rgba(150, 180, 220, 0.03) 100%);
	border-color: rgba(180, 200, 235, 0.30);
}
.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-stage-card:hover {
	border-color: rgba(180, 200, 235, 0.60);
	box-shadow:
		0 1px 0 rgba(220, 230, 250, 0.14) inset,
		0 18px 42px -8px rgba(6, 12, 24, 0.62),
		0 32px 90px -18px rgba(6, 12, 24, 0.55),
		0 0 0 1px rgba(180, 200, 235, 0.24),
		0 0 50px -10px rgba(140, 180, 230, 0.28);
}

/* =========================================================================
   2) CALLOUTS — Cambridge / Booster / Spanish / Prompt / Checklist / Neutral
   Same elevation pattern, but tinted by category (gold / purple / teal /
   slate / green) — the existing left-ribbon (::before) cue is preserved.
   ========================================================================= */

.lwl-path-lesson__content .lwl-callout {
	/* Bump from 3.5%→1.2% to 8%→2% so the callout reads as a card, not a
	   tinted region of the page. */
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.075) 0%,
		rgba(255, 255, 255, 0.02) 100%);
	border-color: rgba(255, 255, 255, 0.20);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 10px 24px -8px rgba(0, 0, 0, 0.45),
		0 18px 50px -16px rgba(0, 0, 0, 0.32);
	transition:
		transform 280ms cubic-bezier(.2, .7, .2, 1),
		box-shadow 280ms ease,
		border-color 280ms ease;
}

.lwl-path-lesson__content .lwl-callout:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 14px 30px -8px rgba(0, 0, 0, 0.50),
		0 22px 60px -16px rgba(0, 0, 0, 0.40);
}

/* Cambridge tip — gold tone in the surface (not just the ribbon) */
.lwl-path-lesson__content .lwl-callout--cambridge {
	background: linear-gradient(180deg,
		rgba(255, 205, 140, 0.16) 0%,
		rgba(255, 205, 140, 0.04) 100%);
	border-color: rgba(255, 205, 140, 0.45);
	box-shadow:
		0 1px 0 rgba(255, 235, 190, 0.10) inset,
		0 10px 24px -8px rgba(50, 28, 8, 0.45),
		0 18px 50px -16px rgba(255, 180, 80, 0.18);
}
.lwl-path-lesson__content .lwl-callout--cambridge:hover {
	border-color: rgba(255, 205, 140, 0.68);
	box-shadow:
		0 1px 0 rgba(255, 235, 190, 0.13) inset,
		0 14px 30px -8px rgba(50, 28, 8, 0.55),
		0 22px 60px -16px rgba(255, 180, 80, 0.30);
}

/* B2/C1 Booster — purple */
.lwl-path-lesson__content .lwl-callout--booster {
	background: linear-gradient(180deg,
		rgba(180, 140, 255, 0.16) 0%,
		rgba(180, 140, 255, 0.04) 100%);
	border-color: rgba(180, 140, 255, 0.45);
	box-shadow:
		0 1px 0 rgba(220, 200, 255, 0.10) inset,
		0 10px 24px -8px rgba(30, 20, 60, 0.50),
		0 18px 50px -16px rgba(160, 130, 230, 0.20);
}
.lwl-path-lesson__content .lwl-callout--booster:hover {
	border-color: rgba(180, 140, 255, 0.68);
	box-shadow:
		0 1px 0 rgba(220, 200, 255, 0.13) inset,
		0 14px 30px -8px rgba(30, 20, 60, 0.55),
		0 22px 60px -16px rgba(160, 130, 230, 0.32);
}

/* Spanish signal — teal */
.lwl-path-lesson__content .lwl-callout--spanish {
	background: linear-gradient(180deg,
		rgba(120, 210, 200, 0.15) 0%,
		rgba(120, 210, 200, 0.04) 100%);
	border-color: rgba(120, 210, 200, 0.45);
	box-shadow:
		0 1px 0 rgba(180, 235, 220, 0.10) inset,
		0 10px 24px -8px rgba(8, 30, 28, 0.50),
		0 18px 50px -16px rgba(80, 200, 180, 0.18);
}
.lwl-path-lesson__content .lwl-callout--spanish:hover {
	border-color: rgba(120, 210, 200, 0.68);
	box-shadow:
		0 1px 0 rgba(180, 235, 220, 0.13) inset,
		0 14px 30px -8px rgba(8, 30, 28, 0.55),
		0 22px 60px -16px rgba(80, 200, 180, 0.30);
}

/* =========================================================================
   3) TABLES — Cambridge alignment / Traffic Light / etc.
   Tables ARE content cards in the new vocabulary, treat them the same.
   ========================================================================= */

.lwl-path-lesson__content .lwl-table {
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.065) 0%,
		rgba(255, 255, 255, 0.02) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 12px 28px -8px rgba(0, 0, 0, 0.45),
		0 22px 60px -16px rgba(0, 0, 0, 0.32);
}

/* Tables also benefit from a gentle hover (most lesson tables are
   single-purpose reference; lifting them tells the eye "this is a
   self-contained reference card"). */
.lwl-path-lesson__content .lwl-table {
	transition: box-shadow 280ms ease, transform 280ms cubic-bezier(.2,.7,.2,1);
}
.lwl-path-lesson__content .lwl-table:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 16px 32px -8px rgba(0, 0, 0, 0.52),
		0 26px 70px -16px rgba(0, 0, 0, 0.40);
}

/* =========================================================================
   4) QUOTE CARD — opening italic blockquote
   Smaller lift; it's narrative furniture, not a tool card.
   ========================================================================= */

.lwl-path-lesson__content .lwl-quote-card {
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0.018) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 10px 26px -8px rgba(0, 0, 0, 0.40),
		0 18px 50px -16px rgba(0, 0, 0, 0.25);
}

/* =========================================================================
   5) Reduced-motion guard
   Drop the hover transform but keep the visual depth (shadow + border)
   so motion-sensitive students still see the elevation cue.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.lwl-path-lesson__content .lwl-stage-card,
	.lwl-path-lesson__content .lwl-callout,
	.lwl-path-lesson__content .lwl-table {
		transition: box-shadow 0s, border-color 0s;
	}
	.lwl-path-lesson__content .lwl-stage-card:hover,
	.lwl-path-lesson__content .lwl-callout:hover,
	.lwl-path-lesson__content .lwl-table:hover {
		transform: none;
	}
}

/* =========================================================================
   2026-05-01 r10.1 — ROUTE PROGRESS BAR — celebratory fill (additive)
   --------------------------------------------------------------------------
   The bar in the routes screen reads as something the student EARNED.
   Five tiers (driven by JS adding a class based on data-pct):

     is-spark    1–24%   warm dim — they've started
     is-warm    25–49%   shimmer joins; warming up
     is-bright  50–74%   stronger glow; shimmer faster
     is-blaze   75–99%   hot gradient peak; shimmer fast
     is-perfect    100%  pulsing celebratory halo + brightest gradient

   Color tokens derive from --lwl-path-route-tint so all routes (gold
   compass-dawn, emerald verdant, violet arcane, summit gold) look right
   without per-route hardcoding.
   ========================================================================= */

/* Track — slightly taller, depth via inner shadow */
.lwl-path-route__progress {
	height: 9px;
	background: rgba(255, 255, 255, 0.045);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Fill — base: gradient from a slightly muted route-tint shade up to a
   highlight stop. Tier classes below override the gradient + glow. */
.lwl-path-route__progress-fill {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 80%, #2b1006) 0%,
		var(--lwl-path-route-tint, #f59e0b) 60%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 55%, #fff5d6) 100%);
	box-shadow: 0 0 8px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.40));
	transition: width 1.2s cubic-bezier(.16, 1, .3, 1), box-shadow 380ms ease, background 380ms ease;
	position: relative;
	overflow: hidden;
}

/* Shimmer overlay — a faint diagonal highlight that drifts L→R through
   the fill, suggesting flowing energy. Off by default; tier classes turn
   it on at varying speeds. */
.lwl-path-route__progress-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg,
		transparent 38%,
		rgba(255, 255, 240, 0.45) 50%,
		transparent 62%);
	transform: translateX(-100%);
	opacity: 0;
	transition: opacity 240ms ease;
	pointer-events: none;
}

/* ---- Tier 1 — spark (1–24%): just started, dim warm ------------------- */
.lwl-path-route__progress-fill.is-spark {
	box-shadow: 0 0 6px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.30));
}

/* ---- Tier 2 — warm (25–49%): shimmer kicks in ------------------------- */
.lwl-path-route__progress-fill.is-warm {
	box-shadow: 0 0 10px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.45));
}
.lwl-path-route__progress-fill.is-warm::after {
	opacity: 0.55;
	animation: lwl-path-progress-shimmer 4.5s linear infinite;
}

/* ---- Tier 3 — bright (50–74%): real progress, two-layer glow ---------- */
.lwl-path-route__progress-fill.is-bright {
	box-shadow:
		0 0 12px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.55)),
		0 0 26px -4px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.32));
}
.lwl-path-route__progress-fill.is-bright::after {
	opacity: 0.7;
	animation: lwl-path-progress-shimmer 3.5s linear infinite;
}

/* ---- Tier 4 — blaze (75–99%): hot peak, brighter highlight stop ------- */
.lwl-path-route__progress-fill.is-blaze {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 65%, #2b1006) 0%,
		var(--lwl-path-route-tint, #f59e0b) 45%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 35%, #fff5d6) 100%);
	box-shadow:
		0 0 15px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.65)),
		0 0 38px -6px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.45));
}
.lwl-path-route__progress-fill.is-blaze::after {
	opacity: 0.85;
	animation: lwl-path-progress-shimmer 2.8s linear infinite;
}

/* ---- Tier 5 — perfect (100%): pulse + brightest gradient -------------- */
.lwl-path-route__progress-fill.is-perfect {
	background: linear-gradient(90deg,
		var(--lwl-path-route-tint, #f59e0b) 0%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 50%, #fff5d6) 50%,
		#fff5d6 100%);
	animation: lwl-path-progress-pulse 3s ease-in-out infinite;
}
.lwl-path-route__progress-fill.is-perfect::after {
	opacity: 1;
	animation: lwl-path-progress-shimmer 2.2s linear infinite;
}

/* ---- Animations ------------------------------------------------------- */
@keyframes lwl-path-progress-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}
@keyframes lwl-path-progress-pulse {
	0%, 100% {
		box-shadow:
			0 0 16px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.65)),
			0 0 40px -6px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.45));
	}
	50% {
		box-shadow:
			0 0 24px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.85)),
			0 0 60px -6px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.65)),
			0 0 95px -10px rgba(255, 240, 180, 0.42);
	}
}

/* ---- Locked routes — keep dim, kill animation ------------------------- */
.lwl-path-route--locked .lwl-path-route__progress,
.lwl-path-route--locked .lwl-path-route__progress-fill {
	animation: none !important;
	box-shadow: none;
}
.lwl-path-route--locked .lwl-path-route__progress-fill::after {
	display: none;
}

/* ---- Reduced-motion: kill animation but keep tier glows --------------- */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-route__progress-fill,
	.lwl-path-route__progress-fill::after {
		animation: none !important;
		transition: width 600ms ease, box-shadow 240ms ease, background 240ms ease;
	}
}

/* =========================================================================
   2026-05-01 r10.2 — INNER CARD TUNE-UP + LEFT-NAV HOVER FLASH FIX (additive)
   --------------------------------------------------------------------------
   THREE issues addressed, all additive:

   1) Card surface opacity in the dark-wrapper variants (especially --hearth
      on the Welcome Hearth landing page) was 13% — too close to the
      wrapper's luminance, so cards read as "tinted region" instead of
      "discrete floating object". Bumped to 18–22% with a stronger inset
      rim-light AND a thin inner bottom-edge shadow. The bottom inner edge
      is what actually sells the "card sits proud" trick on dark UI.

   2) :hover transform on stage-cards was silently failing because
      `.lwl-path-lesson__content .lwl-stage-card.is-revealed { transform: translateY(0) }`
      (specificity 0,0,3,0) beat `.lwl-path-lesson__content .lwl-stage-card:hover { transform: translateY(-3px) }`
      (specificity 0,0,2,1). The fix is to scope hover under `.is-revealed`
      so it has matching specificity (0,0,3,1) and wins. Now the lift on
      hover actually happens.

   3) Left-nav hover white flash: parent theme (Astra) injects a default
      link/button hover background that paints for one frame before our
      tinted rule takes over. Defensive resets on the menu interactive
      states neutralise it, with !important to beat any !important
      theme rule.
   ========================================================================= */

/* =========================================================================
   1) CARD SURFACE BUMP — variant overrides (background + rim-light + bottom-edge)
   ========================================================================= */

.lwl-path-lesson--hearth .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(255, 225, 185, 0.20) 0%,
		rgba(255, 200, 155, 0.07) 100%);
	border-color: rgba(255, 200, 150, 0.42);
	box-shadow:
		0 1px 0 rgba(255, 240, 210, 0.16) inset,            /* top rim light */
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,                 /* bottom inner edge */
		0 12px 30px -8px rgba(0, 0, 0, 0.62),
		0 26px 70px -18px rgba(0, 0, 0, 0.48);
}

.lwl-path-lesson--dojo .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(255, 205, 160, 0.20) 0%,
		rgba(255, 175, 130, 0.07) 100%);
	border-color: rgba(255, 180, 130, 0.42);
	box-shadow:
		0 1px 0 rgba(255, 235, 200, 0.16) inset,
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,
		0 12px 30px -8px rgba(0, 0, 0, 0.62),
		0 26px 70px -18px rgba(0, 0, 0, 0.48);
}

.lwl-path-lesson--atelier .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(225, 205, 255, 0.18) 0%,
		rgba(195, 175, 255, 0.06) 100%);
	border-color: rgba(195, 165, 255, 0.42);
	box-shadow:
		0 1px 0 rgba(225, 210, 255, 0.16) inset,
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,
		0 12px 30px -8px rgba(0, 0, 0, 0.62),
		0 26px 70px -18px rgba(20, 14, 50, 0.50);
}

.lwl-path-lesson--lexicon .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(225, 205, 255, 0.18) 0%,
		rgba(255, 200, 230, 0.06) 100%);
	border-color: rgba(220, 180, 255, 0.40);
	box-shadow:
		0 1px 0 rgba(235, 220, 255, 0.16) inset,
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,
		0 12px 30px -8px rgba(0, 0, 0, 0.60),
		0 26px 70px -18px rgba(28, 18, 56, 0.46);
}

.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(190, 225, 245, 0.18) 0%,
		rgba(130, 190, 225, 0.06) 100%);
	border-color: rgba(165, 215, 235, 0.40);
	box-shadow:
		0 1px 0 rgba(220, 235, 245, 0.16) inset,
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,
		0 12px 30px -8px rgba(0, 0, 0, 0.62),
		0 26px 70px -18px rgba(8, 18, 28, 0.50);
}

.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-stage-card {
	background: linear-gradient(180deg,
		rgba(210, 225, 255, 0.16) 0%,
		rgba(160, 190, 230, 0.05) 100%);
	border-color: rgba(190, 210, 240, 0.38);
	box-shadow:
		0 1px 0 rgba(220, 230, 250, 0.16) inset,
		0 -1px 0 rgba(0, 0, 0, 0.30) inset,
		0 12px 30px -8px rgba(0, 0, 0, 0.62),
		0 26px 70px -18px rgba(6, 12, 24, 0.50);
}

/* =========================================================================
   2) HOVER SPECIFICITY FIX — beat .is-revealed for the lift transform
   The .is-revealed selector has specificity 0,0,3,0 (three classes); our
   r10 hover was 0,0,2,1 (two classes + pseudo). Adding .is-revealed to
   the hover selector raises us to 0,0,3,1 — wins on every property.
   ========================================================================= */

.lwl-path-lesson--hearth .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--hearth .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 200, 140, 0.72);
	box-shadow:
		0 1px 0 rgba(255, 245, 220, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(40, 16, 8, 0.68),
		0 32px 90px -18px rgba(40, 16, 8, 0.55),
		0 0 0 1px rgba(255, 200, 140, 0.32),
		0 0 50px -10px rgba(255, 180, 120, 0.38);
}

.lwl-path-lesson--dojo .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--dojo .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 180, 120, 0.72);
	box-shadow:
		0 1px 0 rgba(255, 240, 210, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(40, 16, 8, 0.68),
		0 32px 90px -18px rgba(40, 16, 8, 0.55),
		0 0 0 1px rgba(255, 180, 120, 0.34),
		0 0 50px -10px rgba(255, 160, 100, 0.40);
}

.lwl-path-lesson--atelier .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--atelier .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(195, 165, 255, 0.74);
	box-shadow:
		0 1px 0 rgba(225, 210, 255, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(20, 14, 50, 0.68),
		0 32px 90px -18px rgba(20, 14, 50, 0.55),
		0 0 0 1px rgba(195, 165, 255, 0.34),
		0 0 50px -10px rgba(180, 140, 255, 0.40);
}

.lwl-path-lesson--lexicon .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--lexicon .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(220, 180, 255, 0.72);
	box-shadow:
		0 1px 0 rgba(235, 220, 255, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(28, 18, 56, 0.65),
		0 32px 90px -18px rgba(28, 18, 56, 0.52),
		0 0 0 1px rgba(220, 180, 255, 0.32),
		0 0 50px -10px rgba(210, 170, 250, 0.38);
}

.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--field-film .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(165, 215, 235, 0.72);
	box-shadow:
		0 1px 0 rgba(225, 240, 250, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(8, 18, 28, 0.68),
		0 32px 90px -18px rgba(8, 18, 28, 0.55),
		0 0 0 1px rgba(165, 215, 235, 0.32),
		0 0 50px -10px rgba(120, 190, 220, 0.40);
}

.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-stage-card.is-revealed:hover,
.lwl-path-lesson--exam-trial .lwl-path-lesson__content .lwl-stage-card:hover {
	transform: translateY(-3px);
	border-color: rgba(190, 210, 240, 0.70);
	box-shadow:
		0 1px 0 rgba(225, 235, 250, 0.22) inset,
		0 -1px 0 rgba(0, 0, 0, 0.32) inset,
		0 18px 42px -8px rgba(6, 12, 24, 0.68),
		0 32px 90px -18px rgba(6, 12, 24, 0.55),
		0 0 0 1px rgba(190, 210, 240, 0.30),
		0 0 50px -10px rgba(140, 180, 230, 0.36);
}

/* =========================================================================
   3) LEFT-NAV HOVER WHITE-FLASH FIX
   Defensive resets that kill any parent-theme link/button hover, focus,
   and tap-highlight bleeding into the menu. Then re-assert our gold-tint
   hover with !important so we win even if the theme uses !important too.
   ========================================================================= */

.lwl-path-menu a,
.lwl-path-menu button {
	-webkit-tap-highlight-color: transparent;
}

/* Hard-reset every interactive state inside the menu — kills the white
   flash from Astra's default a:hover background. */
.lwl-path-menu a:hover,
.lwl-path-menu a:focus,
.lwl-path-menu a:active,
.lwl-path-menu a:focus-within,
.lwl-path-menu button:hover,
.lwl-path-menu button:focus,
.lwl-path-menu button:active {
	background-color: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* Re-assert our own gold-tint hover for stone heads + lesson/quiz items
   AFTER the reset above, so these win. */
.lwl-path-menu .lwl-path-stone__head:hover {
	background-color: rgba(245, 158, 11, 0.06) !important;
	color: var(--lwl-path-ink-1) !important;
}
.lwl-path-menu .lwl-path-item:hover {
	background-color: rgba(245, 158, 11, 0.05) !important;
	color: var(--lwl-path-ink-1) !important;
}

/* Keep the .is-current item's gold gradient even when hovered. */
.lwl-path-menu .lwl-path-item.is-current,
.lwl-path-menu .lwl-path-item.is-current:hover {
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), transparent 80%) !important;
	color: var(--lwl-path-ink-1) !important;
	border-left-color: var(--lwl-path-gold) !important;
}

/* Accessible focus ring — gold, not browser default white/blue. */
.lwl-path-menu a:focus-visible,
.lwl-path-menu button:focus-visible {
	outline: 2px solid rgba(245, 158, 11, 0.55);
	outline-offset: -2px;
	border-radius: 4px;
}

/* =========================================================================
   2026-05-01 r10.3 — Kill the lwl-journey theme's link-underline-sweep
   animation inside the Path menu (additive)
   --------------------------------------------------------------------------
   ROOT CAUSE: lwl-journey/assets/css/base.css applies a global animated
   underline to every <a>:

       a { background-image: linear-gradient(currentColor, currentColor);
           background-size: 0 1.5px; ... }
       a:hover { background-size: 100% 1.5px; }

   This is the marketing-page link-sweep effect. Inside the path nav menu,
   each .lwl-path-item is an <a>, so on hover a 1.5px slate-gray bar sweeps
   across the bottom of every row — that's the "white flash" Liam was seeing.

   r10.2's resets only neutralised background-COLOR; this neutralises the
   background-IMAGE / background-SIZE that drives the sweep. Scoped to the
   menu only — the marketing-site sweep elsewhere stays intact.
   ========================================================================= */

.lwl-path-menu a,
.lwl-path-menu a:hover,
.lwl-path-menu a:focus,
.lwl-path-menu a:focus-visible,
.lwl-path-menu a:active {
	background-image: none !important;
	background-size: auto !important;
	background-position: 0 0 !important;
}

/* =========================================================================
   2026-05-01 r10.4 — Let the progress-bar glow ESCAPE the track (additive)
   --------------------------------------------------------------------------
   ROOT CAUSE: r10.1's celebratory glow box-shadow lives on the FILL, but
   the parent .lwl-path-route__progress has `overflow: hidden` (line 227,
   untouched legacy rule). Box-shadow extending outside the fill is clipped
   at the 9px-tall track boundary, so all the glow Liam was meant to see
   gets sliced off. Result: the warm gradient bar renders fine, but the
   surrounding halo is invisible — looks identical to the pre-r10.1 bar.

   FIX:
     1) Override the track to `overflow: visible` so the fill's box-shadow
        can paint outside the 9px boundary.
     2) Round the fill's right edge via `border-radius: inherit` so the
        bar end sits cleanly against the track's pill shape (no jagged
        right edge poking out).
     3) Add a faint OUTER halo on the track itself (via :has()) tied to
        the tier — gives an extra "the whole route is glowing" cue at
        is-blaze / is-perfect.
   ========================================================================= */

.lwl-path-route__progress {
	overflow: visible !important;
}

.lwl-path-route__progress-fill {
	border-radius: inherit;
}

/* Track-level outer halo, tier-aware via :has() — only applies at higher
   tiers so "just started" doesn't bloom too much. Layered over the
   existing inset shadow from r10.1. */
.lwl-path-route__progress:has(.lwl-path-route__progress-fill.is-bright) {
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.45),
		0 0 18px -2px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.34));
}
.lwl-path-route__progress:has(.lwl-path-route__progress-fill.is-blaze) {
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.45),
		0 0 22px -2px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.45)),
		0 0 50px -10px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.30));
}
.lwl-path-route__progress:has(.lwl-path-route__progress-fill.is-perfect) {
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.45),
		0 0 28px -2px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.55)),
		0 0 60px -10px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.40)),
		0 0 100px -14px rgba(255, 240, 180, 0.30);
}

/* =========================================================================
   2026-05-01 r10.5 — Defensive locked override (additive)
   --------------------------------------------------------------------------
   In production, locked routes carry data-pct="0" so the fill renders at
   width:0 and is invisible — that's correct. But Liam's devtools test on
   2026-05-01 forced Route IV (locked) to data-pct=90 + class is-blaze and
   it rendered as a bright glowing bar — visually saying "almost complete"
   for a route that hasn't been started.

   Why: the existing locked rules only reset `animation` and `box-shadow`
   on the fill. They don't override `background`, so when a tier class
   (is-spark .. is-perfect) is also present, its tier gradient wins.

   r10.5 hardens the locked rule so a locked route ALWAYS reads as muted
   regardless of any tier class or width that ends up applied to it.
   This is purely defensive — production data is unaffected.
   ========================================================================= */

.lwl-path-route--locked .lwl-path-route__progress-fill,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-spark,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-warm,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-bright,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-blaze,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-perfect {
	background: rgba(255, 255, 255, 0.10) !important;
	box-shadow: none !important;
	animation: none !important;
}

.lwl-path-route--locked .lwl-path-route__progress-fill::after {
	display: none !important;
}

/* Also kill the track-level outer halo (r10.4 :has() rule) on locked. */
.lwl-path-route--locked .lwl-path-route__progress {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* =========================================================================
   2026-05-01 r10.6 — Base bar already glows, tiers add only celebration
   --------------------------------------------------------------------------
   Liam's screenshot after r10.5 still showed a faint bar even though all
   the rounds were deployed. Two possible causes:
     1) The MutationObserver isn't catching the routes-screen injection
        path on staging (timing or the path the stage shell uses)
     2) The CSS specificity around tier classes loses to something earlier
        in the cascade

   Without live DOM inspection (Chrome offline), the safe fix is to stop
   depending on JS firing the tier class. Bump the BASE rule itself to be
   already-visible: the same 14+26px multi-layer glow, an always-on slow
   shimmer, and a brighter gradient. Tier classes then ADD only the
   celebratory differentiation (faster shimmer at high tiers, pulse at
   100%, hotter gradient at blaze/perfect) — but the bar looks beautiful
   whether or not any tier class lands.

   This is the most robust fix: visual outcome is decoupled from JS
   timing. Ships at the highest specificity in the file (later in source
   order than r10.1 and r10.4) so it wins the cascade.
   ========================================================================= */

/* ---- Track: keep r10.4's overflow-visible so glow can escape ---------- */
.lwl-path-route__progress {
	overflow: visible !important;
}

/* ---- BASE fill: already pops without any tier class ------------------- */
.lwl-path-route__progress-fill {
	/* Brighter, richer multi-stop gradient */
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 70%, #2b1006) 0%,
		var(--lwl-path-route-tint, #f59e0b) 50%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 50%, #fff5d6) 100%);
	/* Three-layer glow: rim-light + close cast + far ambient bloom */
	box-shadow:
		0 0 0 1px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.45)) inset,
		0 0 14px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.55)),
		0 0 32px -4px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.35));
	border-radius: inherit;
	overflow: hidden;          /* clip the shimmer ::after to fill bounds  */
	position: relative;
}

/* ---- Always-on slow shimmer (no tier class needed) -------------------- */
.lwl-path-route__progress-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg,
		transparent 38%,
		rgba(255, 255, 240, 0.50) 50%,
		transparent 62%);
	transform: translateX(-100%);
	opacity: 0.65 !important;       /* visible at base, no tier needed */
	animation: lwl-path-progress-shimmer 4.2s linear infinite !important;
	pointer-events: none;
}

/* ---- Track outer halo, also from base (not tier-dependent) ----------- */
.lwl-path-route__progress {
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.45),
		0 0 16px -2px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.30));
}

/* ---- Tier escalation — these now ADD on top of an already-bright base.
   is-spark is now slightly DIMMER than base (early progress feels muted),
   is-warm/is-bright stay at base, is-blaze hotter, is-perfect celebrates. */

.lwl-path-route__progress-fill.is-spark {
	box-shadow:
		0 0 0 1px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.30)) inset,
		0 0 8px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.40));
}
.lwl-path-route__progress-fill.is-spark::after {
	opacity: 0.40 !important;
}

.lwl-path-route__progress-fill.is-blaze {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 55%, #2b1006) 0%,
		var(--lwl-path-route-tint, #f59e0b) 40%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 30%, #fff5d6) 100%);
	box-shadow:
		0 0 0 1px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.55)) inset,
		0 0 18px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.70)),
		0 0 44px -6px var(--lwl-path-route-tint-soft, rgba(245, 158, 11, 0.50));
}
.lwl-path-route__progress-fill.is-blaze::after {
	animation-duration: 2.8s !important;
	opacity: 0.85 !important;
}

.lwl-path-route__progress-fill.is-perfect {
	background: linear-gradient(90deg,
		var(--lwl-path-route-tint, #f59e0b) 0%,
		color-mix(in srgb, var(--lwl-path-route-tint, #f59e0b) 50%, #fff5d6) 50%,
		#fff5d6 100%);
	animation: lwl-path-progress-pulse 3s ease-in-out infinite;
}
.lwl-path-route__progress-fill.is-perfect::after {
	animation-duration: 2.2s !important;
	opacity: 1 !important;
}

/* ---- Locked: collapse all of the above into the muted look ---------- */
.lwl-path-route--locked .lwl-path-route__progress {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
.lwl-path-route--locked .lwl-path-route__progress-fill,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-spark,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-warm,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-bright,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-blaze,
.lwl-path-route--locked .lwl-path-route__progress-fill.is-perfect {
	background: rgba(255, 255, 255, 0.10) !important;
	box-shadow: none !important;
	animation: none !important;
}
.lwl-path-route--locked .lwl-path-route__progress-fill::after {
	display: none !important;
	animation: none !important;
}

/* ---- Reduced motion: keep the static glow but stop animations ------- */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-route__progress-fill::after {
		animation: none !important;
	}
	.lwl-path-route__progress-fill.is-perfect {
		animation: none !important;
	}
}

/* =========================================================================
   2026-05-01 r10.7 — Kill the legacy fill-glow animation (additive)
   --------------------------------------------------------------------------
   THE actual root cause for "bars look faint" — finally diagnosed via
   live Chrome DOM inspection on 2026-05-01:

   Line 4043 (legacy):
       .lwl-path-route--in-progress .lwl-path-route__progress-fill {
           animation: lwl-path-route-fill-glow 4.2s ease-in-out infinite;
       }
       @keyframes lwl-path-route-fill-glow {
           0%, 100% { box-shadow: 0 0 8px rgba(252, 211, 77, 0.45); }
           50%      { box-shadow: 0 0 14px rgba(252, 211, 77, 0.7); }
       }

   This animation runs on every in-progress route. CSS animations OVERRIDE
   static rules — including inline styles — unless !important. So r10.6's
   multi-layer 14+32px glow + tier-class escalation never had a chance:
   the animation was constantly overwriting box-shadow with a faint
   8-14px gold flash.

   Fix: kill the legacy animation. r10.6's static box-shadow + tier
   escalation now lands correctly. Browser-verified via getComputedStyle()
   showing the cascade: 5 rules matched, latest had multi-layer shadow,
   but computed value was always animation's keyframe value.
   ========================================================================= */

.lwl-path-route--in-progress .lwl-path-route__progress-fill {
	animation: none !important;
}

/* =========================================================================
   2026-05-01 r10.9 — More vertical separation between inner content cards
   --------------------------------------------------------------------------
   Source: live student feedback during a Liam Zoom lesson on 2026-05-01 —
   the inner cards (stage cards, callouts, sections, tables) sit too close
   together, hurting readability when scanning a long lesson body. Most
   pronounced on dense pages like the Writing Atelier — Essay Task with
   the Traffic Light table + Booster + Spanish callout + Suggested
   Structure + Exam Conditions + Submission Checklist all stacked.

   Three knobs:
     1) outer card-to-card gap (.lwl-lesson-body > * + *) 22px → 36px
     2) inside-section block gap (.lwl-section > * + *) 12px → 18px
     3) callouts that follow tables / cards get +6px to feel like a beat,
        not a continuation

   Applies to all 361 B2+C1 path lessons (every lesson rendered through
   .lwl-path-lesson__content). No HTML or JSON change needed.

   MIGRATION NOTE — when promoting lwl-path to prod, this rule (along with
   the rest of r10.x) needs to ship as part of the prod lwl-path.css.
   The negative-lookahead regex fix in lwl-path.php (r10.8) is REQUIRED
   for any of this CSS to have visible effect on the new component-vocab
   lessons. Order: deploy lwl-path.php first, then lwl-path.css, then
   lwl-path.js. See findings/PROGRESS_BAR_R10_DIAGNOSTIC_JOURNEY.md and
   the r10.8 backup at lwl-path.php.bak.20260501-r10.8-pre.
   ========================================================================= */

/* 1) Outer card-to-card breathing room */
.lwl-path-lesson__content .lwl-lesson-body > * + * {
	margin-top: 36px !important;
}

/* Rule (.lwl-rule) is a thin gradient divider — keep its surrounding
   spacing slightly tighter so it doesn't look orphaned. */
.lwl-path-lesson__content .lwl-lesson-body > .lwl-rule + *,
.lwl-path-lesson__content .lwl-lesson-body > * + .lwl-rule {
	margin-top: 22px !important;
}

/* 2) Inside-section block gap */
.lwl-path-lesson__content .lwl-section > * + * {
	margin-top: 18px !important;
}

/* 3) Callouts following a table/card feel like a separate beat */
.lwl-path-lesson__content .lwl-table + .lwl-callout,
.lwl-path-lesson__content .lwl-stage-card + .lwl-callout,
.lwl-path-lesson__content .lwl-callout + .lwl-callout {
	margin-top: 42px !important;
}

/* 4) Closing card sits a touch lower, like a finale */
.lwl-path-lesson__content .lwl-closing-card,
.lwl-path-lesson__content .lwl-lesson-body > .lwl-closing-card {
	margin-top: 48px !important;
}

/* 5) Quote card at the top of a lesson breathes before the first section */
.lwl-path-lesson__content .lwl-lesson-body > .lwl-quote-card + * {
	margin-top: 40px !important;
}

/* 6) Stage-card grid (multiple side-by-side stage cards) — keep cards
   clear of each other on narrow viewports where the grid wraps */
.lwl-path-lesson__content .lwl-stage-grid {
	gap: 22px;
}

/* =====================================================================
   2026-05-04 r11 — Quiz Icon Grid
   Post-submit question collapse + revisit attempt accordion.
   ===================================================================== */

/* ---- Icon grid container (CSS grid, 5 cols, detail panels span full width) ---- */
.lwl-quiz-icon-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px 10px;
	margin: 20px 0 0;
	padding: 0;
}

/* ---- Individual icon button ---- */
.lwl-quiz-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 42px;
	max-height: 64px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	font-family: var(--lwl-path-font-display, 'Playfair Display', Georgia, serif);
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.35);
	overflow: visible; /* allow specs to float outside */
	transition:
		opacity 200ms ease,
		transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
		border-color 280ms ease,
		background 280ms ease,
		box-shadow 280ms ease,
		color 200ms ease;
	padding: 0;
}
.lwl-quiz-icon__num {
	position: relative;
	z-index: 2;
	line-height: 1;
	pointer-events: none;
}

/* Pending — invisible until JS animates it in */
.lwl-quiz-icon[data-state="pending"] {
	opacity: 0;
	transform: scale(0.55);
	pointer-events: none;
}
/* Arriving — snap to natural scale, then state class takes over */
.lwl-quiz-icon[data-state="arriving"] {
	opacity: 1;
	transform: scale(1.08);
}

/* Correct */
.lwl-quiz-icon[data-state="correct"] {
	border-color: rgba(74, 222, 128, 0.55);
	background: rgba(74, 222, 128, 0.09);
	color: #4ade80;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.22);
}
/* Incorrect */
.lwl-quiz-icon[data-state="incorrect"] {
	border-color: rgba(252, 165, 165, 0.5);
	background: rgba(252, 165, 165, 0.07);
	color: #fca5a5;
	box-shadow: 0 0 10px rgba(252, 165, 165, 0.18);
}
/* Unanswered */
.lwl-quiz-icon[data-state="unanswered"] {
	border-color: rgba(148, 163, 184, 0.25);
	color: rgba(148, 163, 184, 0.5);
}
/* Submitted (open-ended) */
.lwl-quiz-icon[data-state="submitted"] {
	border-color: rgba(96, 165, 250, 0.38);
	background: rgba(96, 165, 250, 0.07);
	color: #60a5fa;
}

/* Selected — golden glow, slight scale-up, continuous pulse */
.lwl-quiz-icon[data-selected="1"] {
	border-color: rgba(252, 211, 77, 0.85) !important;
	background: rgba(252, 211, 77, 0.14) !important;
	color: var(--lwl-path-gold, #fcd34d) !important;
	transform: scale(1.14);
	z-index: 3;
	box-shadow:
		0 0 14px rgba(252, 211, 77, 0.55),
		0 0 28px rgba(252, 211, 77, 0.28),
		0 0 48px rgba(252, 211, 77, 0.12) !important;
	animation: lwl-icon-selected-pulse 2.2s ease-in-out infinite;
}
@keyframes lwl-icon-selected-pulse {
	0%, 100% {
		box-shadow:
			0 0 14px rgba(252, 211, 77, 0.55),
			0 0 28px rgba(252, 211, 77, 0.28);
	}
	50% {
		box-shadow:
			0 0 20px rgba(252, 211, 77, 0.72),
			0 0 40px rgba(252, 211, 77, 0.38),
			0 0 64px rgba(252, 211, 77, 0.16);
	}
}

/* Hover — subtle lift on un-selected icons */
.lwl-quiz-icon:not([data-state="pending"]):not([data-selected="1"]):hover {
	transform: scale(1.06);
	border-color: rgba(252, 211, 77, 0.3);
}

/* ---- Floating gold spec particles ---- */
.lwl-quiz-icon__spec {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fcd34d;
	pointer-events: none;
	z-index: 10;
	left: 50%;
	top: 50%;
	animation: lwl-spec-float var(--lwl-spec-dur, 1s) ease-out forwards;
}
@keyframes lwl-spec-float {
	0%   { opacity: 0.9; transform: translate(-50%, -50%) translate(0, 0) scale(1.2); }
	100% { opacity: 0;   transform: translate(-50%, -50%) translate(var(--lwl-spec-dx, 0px), var(--lwl-spec-dy, 0px)) scale(0.2); }
}

/* ---- Detail panel — spans all 5 columns, expands on selection ---- */
.lwl-quiz-icon-detail {
	grid-column: 1 / -1;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	background: rgba(252, 211, 77, 0.035);
	border: 1px solid transparent;
	border-radius: 14px;
	transition:
		max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 280ms ease,
		border-color 280ms ease,
		padding 320ms ease;
	padding: 0 20px;
}
.lwl-quiz-icon-detail[data-open="1"] {
	max-height: 680px;
	opacity: 1;
	border-color: rgba(252, 211, 77, 0.18);
	padding: 18px 20px;
}

.lwl-quiz-icon-detail__qstem {
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 13px;
	font-weight: 500;
}
.lwl-quiz-icon-detail__answer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 10px;
}
.lwl-quiz-icon-detail__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
}
.lwl-quiz-icon-detail__chip--correct {
	background: rgba(74, 222, 128, 0.12);
	border-color: rgba(74, 222, 128, 0.38);
	color: #4ade80;
}
.lwl-quiz-icon-detail__chip--wrong {
	background: rgba(252, 165, 165, 0.09);
	border-color: rgba(252, 165, 165, 0.32);
	color: #fca5a5;
	text-decoration: line-through;
}
.lwl-quiz-icon-detail__chip--answer {
	background: rgba(252, 211, 77, 0.09);
	border-color: rgba(252, 211, 77, 0.32);
	color: var(--lwl-path-gold, #fcd34d);
}
.lwl-quiz-icon-detail__note {
	font-size: 13px;
	margin: 0 0 8px;
}
.lwl-quiz-icon-detail__note--blue  { color: rgba(96, 165, 250, 0.9); }
.lwl-quiz-icon-detail__note--dim   { color: rgba(148, 163, 184, 0.75); }
.lwl-quiz-icon-detail__explanation {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lwl-quiz-icon-detail__explanation-eyebrow {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lwl-path-gold, #fcd34d);
	margin-bottom: 6px;
	font-weight: 600;
}
.lwl-quiz-icon-detail__explanation-body {
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	font-style: italic;
}
.lwl-quiz-icon-detail__explanation-body p:last-child { margin-bottom: 0; }
.lwl-quiz-icon-detail__empty {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
}

/* ---- Revisit accordion: attempt pills now expand ---- */
/* Override the old pill hover so it feels clickable */
.lwl-path-quiz__revisit-pills .lwl-attempt-pill {
	cursor: pointer;
	user-select: none;
}
.lwl-path-quiz__revisit-pills .lwl-attempt-pill[data-expanded="1"] {
	border-color: rgba(252, 211, 77, 0.42) !important;
	background: rgba(252, 211, 77, 0.06) !important;
}

/* Icon grid wrapper hidden inside each pill */
.lwl-attempt-pill__icon-grid-wrap {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 300ms ease,
		padding 320ms ease;
	padding: 0;
}
.lwl-attempt-pill[data-expanded="1"] .lwl-attempt-pill__icon-grid-wrap {
	max-height: 1200px;
	opacity: 1;
	padding-top: 16px;
}

/* The icon grid inside a pill is slightly more compact */
.lwl-attempt-pill__icon-grid-wrap .lwl-quiz-icon-grid {
	margin-top: 0;
	gap: 7px 8px;
}
.lwl-attempt-pill__icon-grid-wrap .lwl-quiz-icon {
	min-height: 36px;
	font-size: 11.5px;
}

/* ---- Expand indicator on attempt pill header ---- */
.lwl-attempt-pill__main::after {
	content: '›';
	margin-left: auto;
	color: rgba(255, 255, 255, 0.3);
	font-size: 16px;
	line-height: 1;
	transition: transform 280ms ease, color 240ms ease;
	padding-left: 8px;
}
.lwl-attempt-pill[data-expanded="1"] .lwl-attempt-pill__main::after {
	transform: rotate(90deg);
	color: rgba(252, 211, 77, 0.7);
}
/* Suppress expand arrow on pills without per-question data */
.lwl-attempt-pill--no-expand {
	cursor: default !important;
}
.lwl-attempt-pill--no-expand .lwl-attempt-pill__main::after {
	display: none;
}

/* ---- prefers-reduced-motion additions for r11 ---- */
@media (prefers-reduced-motion: reduce) {
	.lwl-quiz-icon,
	.lwl-quiz-icon-detail,
	.lwl-attempt-pill__icon-grid-wrap,
	.lwl-attempt-pill__main::after {
		transition: none !important;
		animation: none !important;
	}
	.lwl-quiz-icon[data-state="pending"] {
		opacity: 1 !important;
		transform: none !important;
	}
	.lwl-quiz-icon__spec { display: none; }
}

/* =====================================================================
   2026-05-05 r12 — Quiz Submit Hero + Refined Icon Medallions (additive)
   - Fix r11 ovals (icons stretched horizontally on wide grid cells)
   - Refine medallion look: radial gradient, Playfair number, gold rim
   - New .lwl-path-quiz__submit-hero block (eyebrow + animated count-up
     percentage + tier badge + message + meta) — mirrors the Memory of
     the Path hero so post-submit celebrates the score with the same
     visual vocabulary as revisit.
   ===================================================================== */

/* ---- r12 icon medallion fix + glow-up ---- */
.lwl-quiz-icon-grid {
	gap: 14px 16px !important;
	padding: 6px 4px 4px;
	justify-items: center;
}
.lwl-quiz-icon {
	max-width: 56px !important;
	max-height: 56px !important;
	min-height: 48px !important;
	justify-self: center;
	border-width: 1.5px !important;
	background:
		radial-gradient(120% 120% at 50% 35%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 60%, rgba(0, 0, 0, 0.18) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		inset 0 -10px 18px rgba(0, 0, 0, 0.28),
		0 2px 6px rgba(0, 0, 0, 0.3);
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.lwl-quiz-icon__num {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Correct medallion — gold radial + soft halo */
.lwl-quiz-icon[data-state="correct"] {
	border-color: rgba(252, 211, 77, 0.55) !important;
	background:
		radial-gradient(120% 120% at 50% 35%,
			rgba(252, 211, 77, 0.22) 0%,
			rgba(252, 211, 77, 0.10) 50%,
			rgba(252, 211, 77, 0.04) 100%) !important;
	color: #fcd34d !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 235, 180, 0.22),
		inset 0 -10px 22px rgba(120, 70, 0, 0.38),
		0 0 14px rgba(252, 211, 77, 0.28),
		0 2px 6px rgba(0, 0, 0, 0.32) !important;
}
.lwl-quiz-icon[data-state="correct"] .lwl-quiz-icon__num {
	text-shadow: 0 0 8px rgba(252, 211, 77, 0.4), 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Incorrect medallion — ember red */
.lwl-quiz-icon[data-state="incorrect"] {
	border-color: rgba(252, 165, 165, 0.55) !important;
	background:
		radial-gradient(120% 120% at 50% 35%,
			rgba(252, 165, 165, 0.18) 0%,
			rgba(252, 165, 165, 0.07) 55%,
			rgba(252, 165, 165, 0.03) 100%) !important;
	color: #fca5a5 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 220, 220, 0.18),
		inset 0 -10px 22px rgba(120, 30, 30, 0.36),
		0 0 14px rgba(248, 113, 113, 0.22),
		0 2px 6px rgba(0, 0, 0, 0.32) !important;
}
.lwl-quiz-icon[data-state="incorrect"] .lwl-quiz-icon__num {
	text-shadow: 0 0 8px rgba(252, 165, 165, 0.32), 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Unanswered — quieter slate, no halo */
.lwl-quiz-icon[data-state="unanswered"] {
	background:
		radial-gradient(120% 120% at 50% 35%,
			rgba(148, 163, 184, 0.10) 0%,
			rgba(148, 163, 184, 0.04) 60%,
			rgba(0, 0, 0, 0.18) 100%) !important;
	color: rgba(203, 213, 225, 0.6) !important;
	border-color: rgba(148, 163, 184, 0.35) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		inset 0 -10px 18px rgba(0, 0, 0, 0.32),
		0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Submitted (open-ended) — soft blue medallion */
.lwl-quiz-icon[data-state="submitted"] {
	background:
		radial-gradient(120% 120% at 50% 35%,
			rgba(96, 165, 250, 0.18) 0%,
			rgba(96, 165, 250, 0.07) 55%,
			rgba(96, 165, 250, 0.03) 100%) !important;
	color: #60a5fa !important;
	border-color: rgba(96, 165, 250, 0.5) !important;
	box-shadow:
		inset 0 1px 0 rgba(220, 235, 255, 0.18),
		inset 0 -10px 22px rgba(20, 60, 120, 0.32),
		0 0 14px rgba(96, 165, 250, 0.18),
		0 2px 6px rgba(0, 0, 0, 0.32) !important;
}

/* Selected medallion — keep r11 golden-pulse but lift it slightly more */
.lwl-quiz-icon[data-selected="1"] {
	background:
		radial-gradient(120% 120% at 50% 35%,
			rgba(252, 211, 77, 0.32) 0%,
			rgba(252, 211, 77, 0.16) 55%,
			rgba(252, 211, 77, 0.06) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 245, 200, 0.32),
		inset 0 -8px 18px rgba(160, 100, 0, 0.32),
		0 0 18px rgba(252, 211, 77, 0.62),
		0 0 36px rgba(252, 211, 77, 0.32),
		0 0 56px rgba(252, 211, 77, 0.14) !important;
}
@keyframes lwl-icon-selected-pulse {
	0%, 100% {
		box-shadow:
			inset 0 1px 0 rgba(255, 245, 200, 0.32),
			inset 0 -8px 18px rgba(160, 100, 0, 0.32),
			0 0 18px rgba(252, 211, 77, 0.62),
			0 0 36px rgba(252, 211, 77, 0.32);
	}
	50% {
		box-shadow:
			inset 0 1px 0 rgba(255, 245, 200, 0.4),
			inset 0 -8px 18px rgba(160, 100, 0, 0.36),
			0 0 24px rgba(252, 211, 77, 0.78),
			0 0 48px rgba(252, 211, 77, 0.42),
			0 0 72px rgba(252, 211, 77, 0.18);
	}
}

/* ---- Submit hero block (post-submit celebration) ---- */
.lwl-path-quiz__submit-hero {
	position: relative;
	margin: 22px 0 12px;
	padding: 22px 26px 18px;
	border-radius: 16px;
	background: linear-gradient(180deg,
		rgba(252, 211, 77, 0.08) 0%,
		rgba(255, 200, 100, 0.04) 60%,
		rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(252, 211, 77, 0.22);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(255, 235, 180, 0.05);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 480ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}
.lwl-path-quiz__submit-hero[data-tier="practice"] {
	background: linear-gradient(180deg,
		rgba(248, 113, 113, 0.07) 0%,
		rgba(248, 113, 113, 0.03) 60%,
		rgba(255, 255, 255, 0.02) 100%);
	border-color: rgba(248, 113, 113, 0.28);
}
.lwl-path-quiz__submit-hero--show {
	opacity: 1;
	transform: translateY(0);
}
.lwl-path-quiz__submit-hero-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lwl-path-gold, #fcd34d);
	font-weight: 600;
	margin: 0 0 6px;
}
.lwl-path-quiz__submit-hero[data-tier="practice"] .lwl-path-quiz__submit-hero-eyebrow {
	color: #fca5a5;
}
.lwl-path-quiz__submit-hero-title {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 4px 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: -0.01em;
	flex-wrap: wrap;
}
.lwl-path-quiz__submit-hero-pct {
	font-size: 64px;
	line-height: 1;
	font-feature-settings: "tnum";
	color: var(--lwl-path-gold, #fcd34d);
	text-shadow: 0 0 24px rgba(252, 211, 77, 0.35);
}
.lwl-path-quiz__submit-hero[data-tier="practice"] .lwl-path-quiz__submit-hero-pct {
	color: #fca5a5;
	text-shadow: 0 0 24px rgba(248, 113, 113, 0.32);
}
.lwl-path-quiz__submit-hero-pct-sym {
	font-size: 32px;
	opacity: 0.85;
	margin-left: 2px;
}
.lwl-path-quiz__submit-hero-divider {
	display: inline-block;
	width: 1px;
	height: 48px;
	background: linear-gradient(180deg, transparent 0%, rgba(252, 211, 77, 0.4) 50%, transparent 100%);
}
.lwl-path-quiz__submit-hero[data-tier="practice"] .lwl-path-quiz__submit-hero-divider {
	background: linear-gradient(180deg, transparent 0%, rgba(248, 113, 113, 0.4) 50%, transparent 100%);
}
.lwl-path-quiz__submit-hero-tier {
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-family: inherit;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(252, 211, 77, 0.15);
	color: var(--lwl-path-gold, #fcd34d);
	border: 1px solid rgba(252, 211, 77, 0.32);
}
.lwl-path-quiz__submit-hero[data-tier="strong"] .lwl-path-quiz__submit-hero-tier {
	background: rgba(245, 158, 11, 0.14);
	color: #fbbf24;
	border-color: rgba(245, 158, 11, 0.3);
}
.lwl-path-quiz__submit-hero[data-tier="practice"] .lwl-path-quiz__submit-hero-tier {
	background: rgba(248, 113, 113, 0.14);
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.3);
}
.lwl-path-quiz__submit-hero-msg {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.84);
	font-style: italic;
	margin: 4px 0 8px;
}
.lwl-path-quiz__submit-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	letter-spacing: 0.04em;
}
.lwl-path-quiz__submit-hero-meta strong {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 700;
}

/* Decorative concentric rings, echoing Memory of the Path orb */
.lwl-path-quiz__submit-hero::before,
.lwl-path-quiz__submit-hero::after {
	content: "";
	position: absolute;
	right: -60px;
	top: 50%;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	border: 1px solid rgba(252, 211, 77, 0.14);
	transform: translateY(-50%);
	pointer-events: none;
}
.lwl-path-quiz__submit-hero::after {
	width: 140px;
	height: 140px;
	right: 0;
	border-color: rgba(252, 211, 77, 0.22);
}
.lwl-path-quiz__submit-hero[data-tier="practice"]::before {
	border-color: rgba(248, 113, 113, 0.16);
}
.lwl-path-quiz__submit-hero[data-tier="practice"]::after {
	border-color: rgba(248, 113, 113, 0.22);
}

/* When submit hero is present, hide the legacy score card's pct/msg
   (we already showed them in the hero) — but keep the action buttons. */
.lwl-path-quiz__form[data-has-submit-hero="1"] .lwl-path-quiz__score-num,
.lwl-path-quiz__form[data-has-submit-hero="1"] .lwl-path-quiz__score-pct,
.lwl-path-quiz__form[data-has-submit-hero="1"] .lwl-path-quiz__score-msg {
	display: none;
}
.lwl-path-quiz__form[data-has-submit-hero="1"] .lwl-path-quiz__score {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 8px 0 0;
}

/* Mobile / narrower viewports */
@media (max-width: 720px) {
	.lwl-path-quiz__submit-hero { padding: 18px 18px 14px; }
	.lwl-path-quiz__submit-hero-pct { font-size: 48px; }
	.lwl-path-quiz__submit-hero-divider { height: 36px; }
	.lwl-path-quiz__submit-hero::before,
	.lwl-path-quiz__submit-hero::after { display: none; }
	.lwl-quiz-icon-grid { gap: 10px 10px !important; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-quiz__submit-hero {
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   2026-05-05 r12.1 — Crafted glyph SVG + engraved medallion finish
   Adds an inline SVG glyph above the number (laurel for correct, ember
   for incorrect, waning crescent for unanswered, quill for submitted).
   Layers an inner engraving ring + sheen on each medallion for a
   "stamped coin" feel.
   ===================================================================== */

/* Restack medallion content vertically: glyph on top, number below */
.lwl-quiz-icon {
	flex-direction: column !important;
	gap: 1px;
	padding: 6px 0 4px !important;
}

/* Slightly smaller number to make room for glyph */
.lwl-quiz-icon__num {
	font-size: 14px;
	line-height: 1;
}

/* Glyph SVG — sized inside the medallion, currentColor inherits tier color */
.lwl-quiz-icon__glyph {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: inherit;
	overflow: visible;
	transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease;
	transform-origin: 50% 60%;
	pointer-events: none;
	z-index: 2;
	filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.45));
}

/* Hide all glyph groups by default; reveal only the matching state */
.lwl-quiz-icon__glyph > g { display: none; }
.lwl-quiz-icon[data-state="correct"]    .lwl-glyph--correct    { display: inline; }
.lwl-quiz-icon[data-state="incorrect"]  .lwl-glyph--incorrect  { display: inline; }
.lwl-quiz-icon[data-state="unanswered"] .lwl-glyph--unanswered { display: inline; }
.lwl-quiz-icon[data-state="submitted"]  .lwl-glyph--submitted  { display: inline; }
/* Pending: hide glyph entirely (medallion is invisible anyway) */
.lwl-quiz-icon[data-state="pending"] .lwl-quiz-icon__glyph { opacity: 0; transform: scale(0.4); }

/* Engraved inner ring — thin border just inside the rim, like a coin's reeded edge */
.lwl-quiz-icon::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	border: 0.5px solid rgba(255, 255, 255, 0.05);
	pointer-events: none;
	z-index: 1;
	transition: border-color 280ms ease, box-shadow 280ms ease;
}
.lwl-quiz-icon[data-state="correct"]::before {
	border-color: rgba(252, 211, 77, 0.28);
	box-shadow: inset 0 0 6px rgba(252, 211, 77, 0.18);
}
.lwl-quiz-icon[data-state="incorrect"]::before {
	border-color: rgba(252, 165, 165, 0.28);
	box-shadow: inset 0 0 6px rgba(248, 113, 113, 0.14);
}
.lwl-quiz-icon[data-state="unanswered"]::before {
	border-color: rgba(148, 163, 184, 0.18);
}
.lwl-quiz-icon[data-state="submitted"]::before {
	border-color: rgba(96, 165, 250, 0.28);
	box-shadow: inset 0 0 6px rgba(96, 165, 250, 0.14);
}
.lwl-quiz-icon[data-selected="1"]::before {
	border-color: rgba(252, 211, 77, 0.6);
	box-shadow: inset 0 0 8px rgba(252, 211, 77, 0.32);
}

/* Glyph entry animation — gentle fade-in + lift when state lands */
.lwl-quiz-icon[data-state="correct"]    .lwl-quiz-icon__glyph,
.lwl-quiz-icon[data-state="incorrect"]  .lwl-quiz-icon__glyph,
.lwl-quiz-icon[data-state="unanswered"] .lwl-quiz-icon__glyph,
.lwl-quiz-icon[data-state="submitted"]  .lwl-quiz-icon__glyph {
	animation: lwl-glyph-bloom 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lwl-glyph-bloom {
	0%   { opacity: 0; transform: scale(0.4) translateY(2px); }
	60%  { opacity: 1; transform: scale(1.12) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Selected hover/click — glyph nudges up, number stays put for stability */
.lwl-quiz-icon[data-selected="1"] .lwl-quiz-icon__glyph {
	transform: scale(1.16) translateY(-1px);
	filter: drop-shadow(0 1px 1px rgba(252, 211, 77, 0.5)) drop-shadow(0 0 4px rgba(252, 211, 77, 0.32));
}

/* Hover (not selected) — gentle glyph lift */
.lwl-quiz-icon:not([data-state="pending"]):not([data-selected="1"]):hover .lwl-quiz-icon__glyph {
	transform: scale(1.08) translateY(-0.5px);
}

/* Reduce motion: drop the bloom animation but keep the glyph visible */
@media (prefers-reduced-motion: reduce) {
	.lwl-quiz-icon__glyph {
		animation: none !important;
		transition: none !important;
	}
}

/* Mobile: glyphs slightly smaller to keep layout tight */
@media (max-width: 720px) {
	.lwl-quiz-icon__glyph { width: 15px; height: 15px; }
	.lwl-quiz-icon__num   { font-size: 12px; }
	.lwl-quiz-icon { padding: 4px 0 3px !important; }
}

/* =====================================================================
   2026-05-05 (r9.4) — Sticky route-console-header (the ← Routes pill).
   When viewing a long lesson, the header sticks to the top of the
   viewport so the Routes button is always reachable. The dark
   backdrop prevents lesson content from showing through.
   ===================================================================== */
.lwl-path-console-header.lwl-path-console-header--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	/* 2026-06-02 — single row: [Stepping stones] · gold progress bar (fills the
	   middle, replacing the old text label) · [Routes]. */
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12px 28px;
	gap: 16px;
	background: linear-gradient(180deg, rgba(2, 3, 10, 0.94) 0%, rgba(2, 3, 10, 0.86) 70%, rgba(2, 3, 10, 0) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* the gold progress bar now sits in the header row between the two pills and
   STRETCHES to fill all the space between them (was capped at 820px + centered,
   which left it too narrow to read/click). Its own surface/segments are kept. */
.lwl-path-console-header .lwl-path-progress-bar {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
	min-width: 0;
}

/* =====================================================================
   2026-05-05 (r10) — Stepping Stones header trigger
   The "Stepping Stones ▾" pill button that sits in the sticky route
   header on the left, mirroring the ← ROUTES pill on the right.
   Click toggles .is-menu-open on .lwl-path-console.
   ===================================================================== */
.lwl-path-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(15, 23, 42, 0.6);
	color: var(--lwl-path-ink-2, rgba(244,236,220,0.86));
	border: 1px solid rgba(252, 211, 77, 0.18);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.lwl-path-menu-trigger:hover,
.lwl-path-menu-trigger:focus-visible {
	background: rgba(15, 23, 42, 0.92);
	border-color: rgba(252, 211, 77, 0.42);
	color: var(--lwl-path-gold, #fcd34d);
	outline: none;
}
.lwl-path-menu-trigger[aria-expanded="true"] {
	background: rgba(15, 23, 42, 0.96);
	border-color: rgba(252, 211, 77, 0.55);
	color: var(--lwl-path-gold, #fcd34d);
}
.lwl-path-menu-trigger__icon,
.lwl-path-menu-trigger__chev {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lwl-path-menu-trigger[aria-expanded="true"] .lwl-path-menu-trigger__chev {
	transform: rotate(180deg);
}

/* The header label (B2 Journey · Route I) sits between trigger and routes */
.lwl-path-console-header__label {
	flex: 1 1 auto;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--lwl-path-route-tint);
	font-weight: 600;
}

/* ── Route landing — stepping-stone cards (2026-05-10) ──────────────── */
.lwl-path-route-landing--cards {
	padding: 24px 16px 64px;
	max-width: 880px;
	margin: 0 auto;
}
.lwl-path-stone-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Card */
.lwl-path-stone-card {
	background: linear-gradient(180deg, rgba(255, 252, 247, 0.05) 0%, rgba(252, 211, 77, 0.04) 100%);
	border: 1px solid rgba(252, 211, 77, 0.18);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 28px rgba(0, 0, 0, 0.22);
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.lwl-path-stone-card.is-current {
	border-color: rgba(252, 60, 48, 0.42);
	box-shadow: 0 0 0 1px rgba(252, 60, 48, 0.18), 0 18px 36px rgba(0, 0, 0, 0.30);
}
.lwl-path-stone-card.is-done {
	border-color: rgba(63, 111, 74, 0.36);
	background: linear-gradient(180deg, rgba(63, 111, 74, 0.06) 0%, rgba(63, 111, 74, 0.02) 100%);
}
.lwl-path-stone-card.is-locked {
	opacity: 0.62;
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.12);
}

/* Card head (the clickable button) */
.lwl-path-stone-card__head {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 24px;
	align-items: center;
	gap: 24px;
	padding: 22px 24px;
	background: transparent;
	border: 0;
	color: var(--lwl-path-ink, #f7f1e8);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: background 200ms ease;
}
.lwl-path-stone-card__head:hover:not([disabled]) {
	background: rgba(252, 211, 77, 0.04);
}
.lwl-path-stone-card__head:focus-visible {
	outline: 2px solid var(--lwl-path-gold, #fcd34d);
	outline-offset: -2px;
}
.lwl-path-stone-card__head[disabled] {
	cursor: not-allowed;
}

.lwl-path-stone-card__head-text {
	min-width: 0;
}
.lwl-path-stone-card__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lwl-path-ink-2, #b6ada3);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.lwl-path-stone-card__tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.14em;
}
.lwl-path-stone-card__tag--current {
	background: rgba(252, 60, 48, 0.18);
	color: var(--lwl-path-coral, #FC3C30);
}
.lwl-path-stone-card__tag--done {
	background: rgba(63, 111, 74, 0.20);
	color: #6E9F4A;
}
.lwl-path-stone-card__tag--locked {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.55);
}
.lwl-path-stone-card__title {
	font-family: var(--lwl-path-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--lwl-path-ink, #f7f1e8);
	margin: 0;
}
.lwl-path-stone-card__lock-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--lwl-path-ink-2, #b6ada3);
	font-style: italic;
}

/* Rolling percentage display */
.lwl-path-stone-card__progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 100px;
}
.lwl-path-stone-card__ring {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	line-height: 1;
	background:
		conic-gradient(
			var(--lwl-path-gold, #fcd34d) calc(var(--ratio, 0) * 1%),
			rgba(255, 255, 255, 0.10) 0
		);
	box-shadow: 0 0 12px rgba(252, 211, 77, 0.18);
	transition: background 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms ease;
}
.lwl-path-stone-card.is-done .lwl-path-stone-card__ring {
	background: conic-gradient(#6E9F4A 100%, rgba(255, 255, 255, 0.10) 0);
	box-shadow: 0 0 14px rgba(110, 159, 74, 0.32);
}
.lwl-path-stone-card__ring::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: linear-gradient(180deg, #1a1d2a 0%, #0e1018 100%);
}
.lwl-path-stone-card__ring-num,
.lwl-path-stone-card__ring-pct {
	position: relative;
	z-index: 1;
	display: inline-block;
	line-height: 1;
}
.lwl-path-stone-card__ring-num {
	font-family: var(--lwl-path-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 17px;
	color: var(--lwl-path-ink, #f7f1e8);
	font-variant-numeric: tabular-nums;
}
.lwl-path-stone-card__ring-pct {
	font-size: 10px;
	color: var(--lwl-path-ink-2, #b6ada3);
	letter-spacing: 0.04em;
	transform: translateY(-1px);
}
.lwl-path-stone-card__progress-caption {
	font-family: var(--lwl-path-display, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: 12px;
	color: var(--lwl-path-ink-2, #b6ada3);
	margin: 0;
	opacity: 0.85;
	text-align: center;
	max-width: 140px;
	line-height: 1.3;
}
.lwl-path-stone-card.is-locked .lwl-path-stone-card__progress-caption {
	font-style: normal;
}

/* Chevron */
.lwl-path-stone-card__chev {
	width: 18px;
	height: 18px;
	color: var(--lwl-path-ink-2, #b6ada3);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lwl-path-stone-card__head[aria-expanded="true"] .lwl-path-stone-card__chev {
	transform: rotate(90deg);
	color: var(--lwl-path-gold, #fcd34d);
}
.lwl-path-stone-card.is-locked .lwl-path-stone-card__chev {
	opacity: 0.3;
}

/* Expand panel */
.lwl-path-stone-card__panel {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 8px 10px 14px;
	background: rgba(0, 0, 0, 0.18);
}
.lwl-path-stone-card__panel[hidden] { display: none; }
.lwl-path-stone-card__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lwl-path-stone-card__item {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	color: var(--lwl-path-ink, #f7f1e8);
	text-decoration: none;
	font-size: 14px;
	transition: background 180ms ease;
}
.lwl-path-stone-card__item:hover,
.lwl-path-stone-card__item:focus-visible {
	background: rgba(252, 211, 77, 0.08);
	outline: none;
}
.lwl-path-stone-card__item-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}
.lwl-path-stone-card__item.is-done .lwl-path-stone-card__item-dot {
	background: #6E9F4A;
}
.lwl-path-stone-card__item.is-current .lwl-path-stone-card__item-dot {
	background: var(--lwl-path-coral, #FC3C30);
	box-shadow: 0 0 0 4px rgba(252, 60, 48, 0.14);
}
.lwl-path-stone-card__item.is-current .lwl-path-stone-card__item-title {
	color: var(--lwl-path-coral, #FC3C30);
}
.lwl-path-stone-card__item-title {
	font-weight: 500;
}
.lwl-path-stone-card__item-check {
	color: #6E9F4A;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.lwl-path-stone-card__ring,
	.lwl-path-stone-card__chev { transition: none; }
}

/* ── No-aside console layout (2026-05-10) ────────────────────────────
   When the dropdown is gone, the viewport takes the full width of the
   console container. .lwl-path-back-stones is the new header pill that
   replaces the dropdown trigger when the student is inside a stone or
   lesson — same shape as the existing pill-link, just with a chevron. */
.lwl-path-console--no-aside {
	display: block;
}
.lwl-path-console--no-aside .lwl-path-viewport {
	max-width: none;
	margin: 0 auto;
	padding: 0;
}
.lwl-path-back-stones {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lwl-path-header-spacer {
	display: inline-block;
	min-width: 1px;
}

/* 2026-06-02 — sticky progress bar within the scrolling .lwl-path-viewport. */
.lwl-path-viewport > .lwl-path-progress-bar {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* =========================================================================
   2026-06-03 — MOBILE TAP-BLOCKER FIX (additive; append only)
   --------------------------------------------------------------------------
   Symptom (reported by Liam, iPhone, prod): on the routes / stepping-stone
   view the whole path is unbrowsable, and the atelier "Your trial begins"
   writing form is greyed out — both have a translucent layer in front that
   swallows every tap.

   Root cause: the ≤1024px drawer-backdrop scrim
     .lwl-path-console:not(.is-collapsed)::before { position:fixed; inset:80px 0 0 0;
       background:rgba(0,0,0,.4); z-index:65; }  (defined ~L4325)
   was authored for the LEGACY left-drawer menu. That drawer was removed on
   2026-05-10 — every console now renders as .lwl-path-console--no-aside with
   no .lwl-path-menu and no .lwl-path-menu__toggle. The collapse JS only adds
   .is-collapsed at ≥761px, so on phones the --no-aside console is *never*
   .is-collapsed → the scrim paints a fixed full-viewport 40%-black layer over
   ALL content (routes, stones, lesson, atelier) and, lacking pointer-events:
   none, intercepts every tap. Same scrim, two reported surfaces.

   Fix: `.lwl-path-menu` is rendered NOWHERE, so this tablet drawer backdrop is
   dead code for EVERY console variant — not just `--no-aside` (route/stone/
   lesson) but also the 20+ plain `.lwl-path-console` surfaces and the Sensei
   writing quest `.lwl-sensei-quest-stage.lwl-path-console` (which stayed greyed
   out and untappable after the first, --no-aside-only pass). Neutralise the
   generated box for every console, and make it non-interactive. The separate
   `.is-menu-open` backdrop is left intact (higher specificity + the :not()
   guard) so a real drawer, if it ever returns, keeps its click-to-close layer. */
@media (max-width: 1024px) {
	.lwl-path-console:not(.is-collapsed)::before { content: none !important; }
	.lwl-path-console:not(.is-menu-open)::before { pointer-events: none !important; }
}

/* =========================================================================
   2026-06-03 — STICKY PREV/NEXT ARROWS ON MOBILE / iPad (additive)
   --------------------------------------------------------------------------
   The floating sumi-e prev/next arrows were `display:none` at ≤768px
   ("keyboard / menu nav only on phones"), so once the menu-drawer was retired
   a phone/iPad student had no way to move between lessons without returning to
   the stepping-stones list each time. Re-enable them ≤1024px, but move them
   from the vertical-centre edges (where they'd sit on top of full-width body
   text) down to the bottom corners as compact sticky pills with a legible
   backdrop + safe-area inset. They still only appear when a neighbour exists
   (.is-active); landings keep them hidden (.is-hidden). The prev/next chain is
   flat across the whole route, so this browses lesson→lesson across stones. */
@media (max-width: 1024px) {
	.lwl-path-arrow {
		display: grid !important;          /* override the ≤768 display:none */
		position: fixed;
		top: auto;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 54px;
		height: 54px;
		z-index: 90;
		background: rgba(20, 14, 6, 0.74);
		border-radius: 50%;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(252, 211, 77, 0.38);
		transform: none;
	}
	.lwl-path-arrow svg { width: 34px; height: 34px; }
	.lwl-path-arrow--prev { left: 14px; right: auto; transform: none; }
	.lwl-path-arrow--next { right: 14px; left: auto; transform: none; }
	.lwl-path-arrow.is-active { opacity: 1; pointer-events: auto; transform: none; }
	.lwl-path-arrow.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.85); }
	.lwl-path-arrow:hover,
	.lwl-path-arrow:active { transform: none; }
	/* Compact: arrow glyph only — drop the hover hint label on touch. */
	.lwl-path-arrow__hint { display: none; }
}

/* =========================================================================
   2026-06-14 — Path Quiz Card Stepper (.lwl-pqs)
   Dark-palette card stepper for scroll-all quizzes inside the Stage shell.
   All rules scoped to .lwl-pqs* and .lwl-pqs-- modifiers.
   ========================================================================= */

/* Card mode: hide all questions; show only the active one */
.lwl-path-quiz__questions.lwl-pqs--card-mode { display: block; }
.lwl-path-quiz__questions.lwl-pqs--card-mode .lwl-path-quiz__question {
	display: none !important;
}
.lwl-path-quiz__questions.lwl-pqs--card-mode .lwl-path-quiz__question.lwl-pqs__card-active {
	display: block !important;
}

/* Hide native submit actions while stepper is active */
.lwl-path-quiz__actions.lwl-pqs__actions-hidden { display: none !important; }

/* Card enter animations */
@keyframes lwl-pqs-enter-right {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes lwl-pqs-enter-left {
	from { opacity: 0; transform: translateX(-24px); }
	to   { opacity: 1; transform: translateX(0); }
}
.lwl-path-quiz__question.lwl-pqs__enter-right { animation: lwl-pqs-enter-right 0.28s ease both; }
.lwl-path-quiz__question.lwl-pqs__enter-left  { animation: lwl-pqs-enter-left  0.28s ease both; }

/* Shell: dots + counter */
.lwl-pqs {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 0 18px;
	max-width: 820px;
}
.lwl-pqs__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.lwl-pqs__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.3);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: transform 0.18s, background 0.18s, border-color 0.18s;
	flex-shrink: 0;
}
.lwl-pqs__dot--active {
	background: #c8633a;
	border-color: #c8633a;
	transform: scale(1.45);
}
.lwl-pqs__dot--answered {
	background: rgba(255,255,255,0.55);
	border-color: rgba(255,255,255,0.55);
}
.lwl-pqs__dot--answered.lwl-pqs__dot--active {
	background: #c8633a;
	border-color: #c8633a;
}
.lwl-pqs__counter {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.5);
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

/* Nav bar */
.lwl-pqs__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0 0;
	max-width: 820px;
}
.lwl-pqs__prev,
.lwl-pqs__next {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 8px;
	padding: 10px 22px;
	min-height: 44px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.15s;
}
.lwl-pqs__prev {
	background: transparent;
	border: 2px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.75);
}
.lwl-pqs__prev:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.lwl-pqs__prev:disabled { opacity: 0.3; cursor: default; }
.lwl-pqs__next {
	background: #c8633a;
	border: 2px solid #c8633a;
	color: #fff;
}
.lwl-pqs__next:hover { background: #b5572f; border-color: #b5572f; }
.lwl-pqs__next:disabled { opacity: 0.4; cursor: default; }

/* Review card */
.lwl-pqs__review {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 24px 28px;
	max-width: 820px;
	margin-bottom: 4px;
}
.lwl-pqs__review[hidden] { display: none; }
.lwl-pqs__review-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: #c8633a;
	margin: 0 0 8px;
	font-weight: 700;
}
.lwl-pqs__review-title {
	font-size: 1.15rem;
	color: rgba(255,255,255,0.9);
	margin: 0 0 16px;
	font-weight: 600;
}
.lwl-pqs__review-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lwl-pqs__review-item {
	font-size: 0.85rem;
	padding: 8px 12px;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.15s;
	color: rgba(255,255,255,0.75);
	border: 1px solid rgba(255,255,255,0.08);
}
.lwl-pqs__review-item:hover { background: rgba(255,255,255,0.07); }
.lwl-pqs__review-item--ok::before {
	content: '✓ ';
	color: #6abf69;
	font-weight: 700;
}
.lwl-pqs__review-item--todo {
	color: rgba(255,255,255,0.45);
}
.lwl-pqs__review-item--todo::before {
	content: '○ ';
}
.lwl-pqs__review-submit {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #c8633a;
	border: none;
	border-radius: 8px;
	color: #fff;
	padding: 12px 28px;
	min-height: 48px;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s;
}
.lwl-pqs__review-submit:hover { background: #b5572f; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lwl-path-quiz__question.lwl-pqs__enter-right,
	.lwl-path-quiz__question.lwl-pqs__enter-left { animation: none; }
	.lwl-pqs__dot { transition: none; }
}

/* Mobile */
@media (max-width: 640px) {
	.lwl-pqs { gap: 8px; padding-bottom: 14px; }
	.lwl-pqs__prev, .lwl-pqs__next { flex: 1; padding: 10px 14px; font-size: 0.85rem; }
	.lwl-pqs__review { padding: 18px 16px; }
}

/* [hidden] override — author flex/block rules beat UA [hidden]{display:none} */
.lwl-pqs[hidden], .lwl-pqs__nav[hidden], .lwl-pqs__review[hidden] { display: none !important; }

/* =====================================================================
   Roadmap [14] — Vertical Duolingo-style route path (.lwl-vpath)
   Shipped dark behind vertical_path_enabled() (uid allow-list). All rules
   are scoped under .lwl-vpath so the accordion render is untouched.
   Backdrop themed per route via [data-theme]; JS adds parallax drift.
   ===================================================================== */
.lwl-vpath{
	--vp-sky-top:#cfe8f3; --vp-sky-bot:#eaf6f0;
	--vp-far:#9fb8c4; --vp-mid:#7aa07f; --vp-near:#5f7d52;
	--vp-accent:#E0654A; --vp-accent-deep:#C44E36; --vp-gold:#D9A441;
	position:relative; overflow:hidden; border-radius:18px;
	background:linear-gradient(180deg,var(--vp-sky-top),var(--vp-sky-bot));
	min-height:60vh; isolation:isolate;
}
/* per-route palettes — meadow -> forest -> highland dusk -> summit */
.lwl-vpath[data-theme="compass-dawn"]{ --vp-sky-top:#d4ecf5; --vp-sky-bot:#f3f7e9; --vp-far:#a9c4cf; --vp-mid:#8bb083; --vp-near:#5f7d52; }
.lwl-vpath[data-theme="verdant"]{ --vp-sky-top:#bfe3cf; --vp-sky-bot:#eaf4e1; --vp-far:#86b39a; --vp-mid:#5f9468; --vp-near:#3f7049; }
.lwl-vpath[data-theme="violet-arcane"]{ --vp-sky-top:#e7d6f0; --vp-sky-bot:#f6ddd0; --vp-far:#b59cc8; --vp-mid:#9a7fb0; --vp-near:#7a5f93; }
.lwl-vpath[data-theme="summit-gold"]{ --vp-sky-top:#f6e2b0; --vp-sky-bot:#cfd2e6; --vp-far:#b7a98f; --vp-mid:#8f93b3; --vp-near:#5f6585; }

/* ---- sticky parallax backdrop ---- */
.lwl-vpath__bg{ position:sticky; top:0; height:0; z-index:0; overflow:visible; }
.lwl-vpath__bg-inner{ position:absolute; top:0; left:0; right:0; height:100vh; overflow:hidden; pointer-events:none; }
.lwl-vpath__layer{ position:absolute; left:-12%; right:-12%; will-change:transform; }
.lwl-vpath__layer--far{  bottom:24%; height:200px; background:var(--vp-far);  opacity:.55; border-radius:50% 50% 0 0 / 180px 180px 0 0; }
.lwl-vpath__layer--mid{  bottom:8%;  height:230px; background:var(--vp-mid);  opacity:.7;  border-radius:50% 50% 0 0 / 200px 200px 0 0; }
.lwl-vpath__layer--near{ bottom:-4%; height:240px; background:var(--vp-near); opacity:.9;  border-radius:50% 50% 0 0 / 150px 150px 0 0; }

/* ---- winding track ---- */
.lwl-vpath__track{ position:relative; z-index:1; list-style:none; margin:0; padding:0; }
.lwl-vpath__wire{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.lwl-vpath__wire path{ fill:none; stroke:#ffffff; stroke-width:12; stroke-linecap:round; opacity:.5; }
.lwl-vpath__wire path.is-done{ stroke:var(--vp-accent); opacity:.85; }

/* ---- nodes ---- */
.lwl-vpath__node{ position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; width:120px; opacity:0; transition:opacity .45s ease, transform .45s ease; }
.lwl-vpath__node.is-revealed{ opacity:1; }
.lwl-vpath__disc{ position:relative; width:72px; height:72px; border-radius:50%; border:3px solid rgba(255,255,255,.85); cursor:pointer; display:flex; align-items:center; justify-content:center; font:700 26px/1 inherit; padding:0; transition:transform .12s ease; }
.lwl-vpath__disc:active{ transform:scale(.93); }
.lwl-vpath__disc-glyph{ pointer-events:none; }
.lwl-vpath__node.is-done .lwl-vpath__disc{ background:radial-gradient(circle at 50% 35%,#ef8264,var(--vp-accent)); color:#fff; box-shadow:0 7px 0 var(--vp-accent-deep),0 12px 18px rgba(0,0,0,.22); }
.lwl-vpath__node.is-available .lwl-vpath__disc{ background:radial-gradient(circle at 50% 35%,#fffdf9,#efe4d2); color:var(--vp-accent-deep); box-shadow:0 7px 0 #cdbfa6,0 12px 18px rgba(0,0,0,.18); }
.lwl-vpath__node.is-current .lwl-vpath__disc{ background:radial-gradient(circle at 50% 35%,#ffe39a,var(--vp-gold)); color:#5b4300; box-shadow:0 7px 0 #b3801f,0 12px 22px rgba(0,0,0,.25); }
.lwl-vpath__node.is-current .lwl-vpath__disc::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:3px solid var(--vp-gold); opacity:.6; animation:lwlVpPulse 1.8s ease-out infinite; }
@keyframes lwlVpPulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(1.5); opacity:0 } }
.lwl-vpath__start{ position:absolute; top:-34px; left:50%; transform:translateX(-50%); background:var(--vp-gold); color:#5b4300; font:700 11px/1 inherit; letter-spacing:.08em; padding:5px 11px; border-radius:9px; white-space:nowrap; box-shadow:0 4px 0 #b3801f; }
.lwl-vpath__start::after{ content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--vp-gold); }
.lwl-vpath__label{ margin-top:10px; font-size:13px; font-weight:600; text-align:center; color:#2c3a47; background:rgba(255,253,249,.86); padding:3px 10px; border-radius:9px; max-width:130px; line-height:1.25; box-shadow:0 2px 8px rgba(44,58,71,.12); }
.lwl-vpath__lessons{ display:none; }

/* ---- bottom sheet ---- */
.lwl-vpath__sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:rgba(20,24,28,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.lwl-vpath__sheet.is-open{ opacity:1; pointer-events:auto; }
.lwl-vpath__sheet-card{ width:100%; max-width:560px; background:#F7F2EA; border-radius:22px 22px 0 0; padding:22px 22px calc(26px + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.25); position:relative; }
.lwl-vpath__sheet.is-open .lwl-vpath__sheet-card{ transform:translateY(0); }
.lwl-vpath__sheet-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:#8b8579; cursor:pointer; }
.lwl-vpath__sheet-eyebrow{ font:700 11px/1 inherit; letter-spacing:.14em; text-transform:uppercase; color:var(--lwl-path-accent,#C44E36); margin:2px 0 4px; }
.lwl-vpath__sheet-title{ font-size:22px; margin:0 0 14px; color:#2c3a47; }
.lwl-vpath__sheet-body .lwl-vpath__lesson{ display:flex; align-items:center; gap:10px; padding:13px 14px; margin-bottom:8px; border-radius:13px; background:#fffdf9; border:1px solid #e6dccd; text-decoration:none; color:#23211e; font-size:15px; font-weight:600; }
.lwl-vpath__sheet-body .lwl-vpath__lesson:active{ transform:translateY(1px); }
.lwl-vpath__sheet-body .lwl-vpath__lesson-dot{ width:9px; height:9px; border-radius:50%; background:#cdbfa6; flex:none; }
.lwl-vpath__sheet-body .lwl-vpath__lesson.is-done .lwl-vpath__lesson-dot{ background:var(--vp-accent,#E0654A); }
.lwl-vpath__sheet-body .lwl-vpath__lesson.is-current .lwl-vpath__lesson-dot{ background:var(--vp-gold,#D9A441); }
.lwl-vpath__sheet-body .lwl-vpath__lesson-title{ flex:1; }
.lwl-vpath__sheet-body .lwl-vpath__lesson-check{ color:var(--vp-accent,#E0654A); font-weight:700; }
.lwl-vpath__empty{ color:#8b8579; font-size:14px; margin:4px 0 8px; }

/* ---- reduce-fx / reduced-motion: static base, no drift, no pulse ---- */
html.lwl-reduce-fx .lwl-vpath__layer{ transform:none !important; }
html.lwl-reduce-fx .lwl-vpath__node.is-current .lwl-vpath__disc::after{ animation:none; opacity:.4; }
html.lwl-reduce-fx .lwl-vpath *{ transition:none !important; }
@media (prefers-reduced-motion: reduce){
	.lwl-vpath__layer{ transform:none !important; }
	.lwl-vpath__node.is-current .lwl-vpath__disc::after{ animation:none; opacity:.4; }
	.lwl-vpath__node{ transition:none; }
}

/* [14] Fullscreen — break the vertical path out of the centered viewport card.
   Host classes are added by wireVerticalPath() so we don't depend on :has(). */
.lwl-path-viewport.lwl-vpath-host{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; overflow-x:hidden; }
.lwl-path-console.lwl-vpath-host{ max-width:none !important; width:100% !important; }
.lwl-vpath{ border-radius:0; min-height:calc(100vh - 64px); width:100%; }
.lwl-vpath__bg-inner{ height:calc(100vh - 64px); }

/* [14] fullscreen v2 — neutralize ALL capping ancestors (gated by :has so the
   class auto-reverts when the path is gone; persistent shell/journey-screen
   ancestors aren't re-rendered on soft-nav). Drop the overflow clip that was
   cutting node 0's START bubble; the parallax layers are still clipped by
   .lwl-vpath__bg-inner's own overflow:hidden. */
.lwl-vpath-host:has(.lwl-vpath){ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
.lwl-vpath{ overflow:visible !important; border-radius:0 !important; min-height:calc(100vh - 120px) !important; }

/* [14] fullscreen v3 — the dark gutter comes from the lwl-mind STAGE SHELL
   (.lwl-stage__shell max-width/padding/dark card) wrapping .lwl-stage__viewport
   (rounded, min-height:60vh, dark bg). Strip that chrome whenever the stage is
   showing the vertical path so it's truly edge-to-edge. Gated by :has(.lwl-vpath)
   so it auto-reverts for every other view (these ancestors persist across soft-nav).
   Height is filled by JS (root min-height). */
.lwl-stage__shell.lwl-vpath-host:has(.lwl-vpath),
.lwl-stage__viewport.lwl-vpath-host:has(.lwl-vpath),
.lwl-journey-screen.lwl-vpath-host:has(.lwl-vpath),
.lwl-journey-screen-inner.lwl-vpath-host:has(.lwl-vpath){
	max-width:none !important; width:100% !important;
	margin:0 !important; padding:0 !important;
	border:0 !important; border-radius:0 !important;
	background:transparent !important; min-height:0 !important;
}
.lwl-stage__viewport.lwl-vpath-host:has(.lwl-vpath){ overflow:visible !important; }

/* [14] Unified journey path — route "gate" checkpoints between routes + locked stones */
.lwl-vpath__gate{ position:absolute; transform:translate(-50%,-50%); z-index:2; width:240px; max-width:76vw;
	opacity:0; transition:opacity .5s ease; display:flex; align-items:center; gap:12px; padding:11px 15px;
	border-radius:16px; background:rgba(255,253,249,.94); box-shadow:0 7px 24px rgba(44,58,71,.20); border:1px solid rgba(0,0,0,.06); }
.lwl-vpath__gate.is-revealed{ opacity:1; }
.lwl-vpath__gate-gem{ width:48px; height:48px; flex:none; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 2px 9px rgba(0,0,0,.28); }
.lwl-vpath__gate-text{ display:flex; flex-direction:column; line-height:1.22; min-width:0; }
.lwl-vpath__gate-route{ font:700 10px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--vp-accent-deep,#C44E36); }
.lwl-vpath__gate-title{ font:600 13px 'Fraunces',serif; color:#2c3a47; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lwl-vpath__gate-state{ font:600 11px 'Inter',sans-serif; color:#7a7264; }
.lwl-vpath__gate.is-cleared{ box-shadow:0 7px 24px rgba(91,138,107,.32); border-color:rgba(91,138,107,.4); }
.lwl-vpath__gate.is-cleared .lwl-vpath__gate-state{ color:#5b8a6b; }
.lwl-vpath__gate.is-current{ box-shadow:0 7px 26px rgba(217,164,65,.4); border-color:rgba(217,164,65,.5); }
.lwl-vpath__gate.is-locked{ opacity:0; }
.lwl-vpath__gate.is-locked.is-revealed{ opacity:.62; }
.lwl-vpath__gate.is-locked .lwl-vpath__gate-gem{ filter:grayscale(0.8); }

/* locked stones */
.lwl-vpath__node.is-locked .lwl-vpath__disc{ background:radial-gradient(circle at 50% 35%,#d8d2c7,#bcb5a8); color:#8b8579; box-shadow:0 6px 0 #9d9689,0 10px 14px rgba(0,0,0,.15); cursor:default; }
.lwl-vpath__node.is-locked .lwl-vpath__disc-glyph{ font-size:24px; }
.lwl-vpath__node.is-locked .lwl-vpath__label{ opacity:.7; }

/* [14] stone-advance: "just cleared" flourish on the finished stone */
.lwl-vpath__node--celebrate .lwl-vpath__disc{ animation:lwlVpCelebrate 1.1s cubic-bezier(.2,.8,.2,1) both; }
.lwl-vpath__node--celebrate .lwl-vpath__disc::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:3px solid var(--vp-gold,#D9A441); opacity:.9; animation:lwlVpBurst 1s ease-out both; }
@keyframes lwlVpCelebrate{ 0%{ transform:scale(1) } 30%{ transform:scale(1.22) rotate(-4deg) } 60%{ transform:scale(.96) } 100%{ transform:scale(1) } }
@keyframes lwlVpBurst{ 0%{ transform:scale(.7); opacity:.9 } 100%{ transform:scale(1.9); opacity:0 } }
html.lwl-reduce-fx .lwl-vpath__node--celebrate .lwl-vpath__disc{ animation:none; }
html.lwl-reduce-fx .lwl-vpath__node--celebrate .lwl-vpath__disc::before{ animation:none; opacity:0; }

/* [14] richer journey backdrop — depth on hills, light bloom, grounded grass.
   Colours come from --vp-* which JS morphs per route (meadow->summit). */
.lwl-vpath__bg-inner::before{ content:""; position:absolute; left:50%; top:5%; width:42vw; max-width:520px; height:42vw; max-height:520px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,251,235,.5), rgba(255,251,235,0) 68%); pointer-events:none; z-index:0; }
.lwl-vpath__layer{ box-shadow: inset 0 26px 44px -26px rgba(255,255,255,.42); }
.lwl-vpath__layer--far{ filter:saturate(.92); opacity:.5; }
.lwl-vpath__layer--mid{ opacity:.78; }
.lwl-vpath__layer--near{ height:320px; bottom:-7%; opacity:1; box-shadow: inset 0 34px 56px -34px rgba(255,255,255,.32), 0 -10px 34px rgba(0,0,0,.06); }
/* a soft grounding shade at the very bottom so the path feels planted */
.lwl-vpath__bg-inner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(180deg, rgba(20,30,20,0), rgba(20,30,20,.12)); pointer-events:none; z-index:1; }

/* [14] full-width layered hills + realistic grass.
   clip-path domes span the ENTIRE width (no side gaps); backdrop is pinned
   (position:fixed via JS) so nothing drifts on scroll. */
.lwl-vpath__layer{ left:0 !important; right:0 !important; width:100% !important; border-radius:0 !important; box-shadow:none !important; }
.lwl-vpath__layer--far{ bottom:0; height:48%; background:var(--vp-far); opacity:.5; clip-path:ellipse(150% 100% at 50% 100%); filter:saturate(.92); }
.lwl-vpath__layer--mid{ bottom:0; height:36%; background:var(--vp-mid); opacity:.85; clip-path:ellipse(140% 100% at 50% 100%); }
.lwl-vpath__layer--near{ bottom:0; height:27%; opacity:1; background:var(--vp-near); clip-path:ellipse(135% 100% at 50% 100%); overflow:hidden; }
/* sunlit top, shaded base for depth */
.lwl-vpath__layer--near::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 28%, rgba(0,0,0,.12) 100%); pointer-events:none; }
/* faint grass-blade texture fading down from the crest */
.lwl-vpath__layer--near::after{ content:""; position:absolute; left:0; right:0; top:0; height:54px; opacity:.16; pointer-events:none;
	background-image:repeating-linear-gradient(91deg, rgba(255,255,255,.55) 0 1px, transparent 1px 8px);
	-webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }


/* =========================================================================
   .lwl-trial — progress-safe in-lesson interactive "Quick Trial"
   Native <details>/<summary>. No JS. Append to lwl-path/assets/lwl-path.css.
   Authored 2026-06-26 for roadmap [3] lesson refactor (PATH_CONTENT_SPEC.md §4.5).
   Usage inside a lesson post_content:
     <details class="lwl-trial">
       <summary><span class="lwl-trial__tag">Quick trial</span> Prompt text…</summary>
       <div class="lwl-trial__body">
         <p>question…</p>
         <p class="lwl-trial__answer">→ answer…</p>
       </div>
     </details>
   ========================================================================= */
.lwl-path-lesson__content .lwl-trial{border:1px solid rgba(52,211,153,0.32);border-radius:14px;background:linear-gradient(180deg,rgba(52,211,153,0.09) 0%,rgba(52,211,153,0.02) 100%);padding:0;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.25);}
.lwl-path-lesson__content .lwl-trial>summary{list-style:none;cursor:pointer;user-select:none;padding:15px 20px;font-size:16.5px;line-height:1.5;color:#dffdf1;font-weight:500;display:flex;align-items:center;gap:12px;transition:background .2s ease;}
.lwl-path-lesson__content .lwl-trial>summary::-webkit-details-marker{display:none;}
.lwl-path-lesson__content .lwl-trial>summary:hover{background:rgba(52,211,153,0.07);}
.lwl-path-lesson__content .lwl-trial>summary::after{content:"Reveal \2193";margin-left:auto;flex:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#34d399;border:1px solid rgba(52,211,153,0.45);padding:5px 11px;border-radius:999px;transition:all .2s ease;}
.lwl-path-lesson__content .lwl-trial[open]>summary::after{content:"Hide \2191";background:rgba(52,211,153,0.14);}
.lwl-path-lesson__content .lwl-trial__tag{flex:none;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#03130d;background:#34d399;padding:3px 9px;border-radius:999px;}
.lwl-path-lesson__content .lwl-trial__body{padding:4px 20px 18px;border-top:1px solid rgba(52,211,153,0.18);}
.lwl-path-lesson__content .lwl-trial__body>*+*{margin-top:8px;}
.lwl-path-lesson__content .lwl-trial__body p{font-size:16.5px;line-height:1.6;color:rgba(244,236,220,0.9);margin:0;}
.lwl-path-lesson__content .lwl-trial__answer{color:#9ff0d2 !important;font-weight:500;padding-left:6px;}
.lwl-path-lesson__content .lwl-trial__answer strong{color:#dffdf1;}