/* LWL Listening — one unified, living console.
   Scene (cast + background) and the interactive quiz live inside a single framed
   console with a continuous gradient. The questions are lwl-path-quiz markup, so
   here we RESTYLE path's quiz/stepper within .lwl-listening scope to blend them
   into the console and keep the whole thing inside the viewport. */

.lwl-listening {
	--lwll-gold:  #e3ad57;
	--lwll-gold2: #c98a34;
	--lwll-ink:   #f4eee2;
	--lwll-mut:   #b3ab9c;
	--lwll-panel: #12161f;
	--lwll-panel2:#0e1119;
	--lwll-line:  rgba(227,173,87,.16);
	max-width: none;
	margin: 0 auto;
	opacity: 1; /* NEVER start hidden — a soft-nav enter animation can freeze an
	   opacity transition on this node and leave the whole console invisible. */
}
.lwl-listening * { box-sizing: border-box; }
/* NO opacity entrance animation on the console — the path soft-nav freezes opacity
   transitions/animations on this subtree, which left the whole thing invisible.
   Render instantly; robustness beats a fade here. */
.lwl-listening__console { opacity: 1; }

/* hide the bare path lesson header — the console marquee is the title now */
.lwl-path-lesson:has(.lwl-listening) .lwl-path-lesson__type,
.lwl-path-lesson:has(.lwl-listening) .lwl-path-lesson__title { display: none !important; }

/* ===== FULL-BLEED IMMERSIVE LAYOUT (listening only) =====
   Nav arrows move to the top bar (arrow rules further down), so the console owns
   the whole area below the header. Top-align + kill the dead space above it. */
/* full-bleed: neutralise every width cap / horizontal padding on the ancestor
   chain. The SOFT-NAV STAGE wraps content in .lwl-stage__shell / .lwl-stage__viewport
   (a max-width + padding + dark card) that the hard-loaded page doesn't have —
   THAT is what capped the console in-stage. Strip it (mirrors how the vertical
   path escapes the same shell). Scoped to listening via :has(). */
.lwl-stage__shell:has(.lwl-listening),
.lwl-stage__viewport:has(.lwl-listening),
.lwl-stage__viewport-inner:has(.lwl-listening),
.lwl-journey-screen:has(.lwl-listening),
.lwl-journey-screen-inner:has(.lwl-listening),
.lwl-path-console:has(.lwl-listening),
.lwl-path-viewport:has(.lwl-listening),
.lwl-path-lesson:has(.lwl-listening),
.lwl-path-lesson:has(.lwl-listening) .lwl-path-lesson__content {
	max-width: none !important; width: 100% !important;
	padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
	border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
.lwl-stage__shell:has(.lwl-listening),
.lwl-stage__viewport:has(.lwl-listening),
.lwl-stage__viewport-inner:has(.lwl-listening) { overflow: visible !important; }

/* THE actual cap in the real hub: stage.css sets
   `.lwl-stage-main:has(.lwl-path) .lwl-path-viewport { max-width:1040px !important }`
   (higher specificity than the rule above). Beat it with an equal-context selector
   carrying two :has() so specificity wins, scoped to listening. */
.lwl-stage-main:has(.lwl-path):has(.lwl-listening) .lwl-path-viewport,
.lwl-stage-main:has(.lwl-listening) .lwl-path-console--no-aside .lwl-path-viewport {
	max-width: none !important; width: 100% !important;
}
.lwl-path-viewport:has(.lwl-listening) { padding-top: 6px !important; }
.lwl-path-lesson:has(.lwl-listening),
.lwl-path-lesson:has(.lwl-listening) .lwl-path-lesson__content { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* ===================== the console frame (FULL-BLEED) ===================== */
.lwl-listening__console {
	position: relative;
	/* the ancestor chain (incl. the soft-nav stage shell) is stripped to full width
	   by the :has(.lwl-listening) override above, so a plain 100% fills edge-to-edge. */
	width: 100%; max-width: none; margin: 0;
	display: flex;
	flex-direction: column;
	height: calc(100dvh - 168px);   /* JS overrides with a measured fit */
	max-height: calc(100dvh - 168px);
	border-radius: 0;
	overflow: hidden;
	background: var(--lwll-panel);
	border: 0;
	border-top: 1px solid var(--lwll-line);
}

/* ===================== the stage (scene) ===================== */
.lwl-listening__stage {
	position: relative;
	flex: 1 1 46%;
	min-height: 240px;
	max-height: 50vh;
	background-image: var(--stage-bg);
	background-size: cover;
	background-position: center 38%;
	overflow: hidden;
}
/* the fireside scene fills the stage flush (no inner frame/aspect-ratio fight) */
.lwl-listening__cast { margin: 0; position: absolute; inset: 0; }
.lwl-listening__scene { position: absolute; inset: 0; max-width: none; margin: 0; }
.lwl-listening__scene .fs-stage {
	aspect-ratio: auto !important;
	width: 100% !important; height: 100% !important;
	min-height: 0 !important; max-height: none !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.lwl-listening__scene .fs-bg {
	background-image: var(--fs-bg-img) !important;
	background-size: cover !important; background-position: center 38% !important;
}
/* characters sized to the stage height + anchored to the bottom, so they never
   overflow upward into the marquee. */
/* push the character band down so heads always clear the title bar at the top */
.lwl-listening__scene .fs-chars { top: 16% !important; bottom: 0 !important; height: 84% !important; padding: 0 3.5% !important; align-items: flex-end !important; }
.lwl-listening__scene .fs-char { height: 100%; display: flex !important; flex-direction: column; justify-content: flex-end !important; }
.lwl-listening__scene .fs-art { display: flex; align-items: flex-end; height: 100%; min-height: 0; }
.lwl-listening__scene .fs-art svg { height: 100% !important; width: auto !important; max-width: 24vw; display: block; margin: 0 auto; }
.lwl-listening__scene .fs-char-name {
	font-size: .74rem !important; letter-spacing: .04em; opacity: .92;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* living ambience: warm top light + soft breathing spotlight, richer while playing */
.lwl-listening__stage::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(255,225,170,.20), transparent 60%),
		radial-gradient(90% 70% at 50% 120%, rgba(0,0,0,.55), transparent 55%);
	mix-blend-mode: screen; opacity: .9;
}
.lwl-listening__stage::after {
	content: ""; position: absolute; inset: -20%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(227,173,87,.16), transparent 70%);
	transform: translate(-6%, -4%); opacity: .5;
	animation: lwllDrift 9s ease-in-out infinite alternate;
}
@keyframes lwllDrift { to { transform: translate(8%, 4%); opacity: .78; } }
.lwl-listening__console:has(.lwl-path-audioplayer.is-playing) .lwl-listening__stage::after { opacity: .95; }
.lwl-listening__console:has(.lwl-path-audioplayer.is-playing) .lwl-listening__scene .fs-char.is-active { filter: drop-shadow(0 0 18px rgba(227,173,87,.35)); }

/* gradient veil that melts the scene into the panel below */
.lwl-listening__veil {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 46%;
	background: linear-gradient(to bottom, transparent, var(--lwll-panel) 96%);
	pointer-events: none;
}

/* marquee: elegant title band top-left of the stage */
.lwl-listening__marquee {
	position: absolute; top: 0; left: 0; right: 0; z-index: 20;
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	padding: 12px 18px 30px; text-align: left; pointer-events: none;
	background: linear-gradient(to bottom, rgba(6,8,12,.82) 0%, rgba(6,8,12,.4) 45%, transparent);
}
.lwl-listening__kicker {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.06rem; font-weight: 700; color: #fff; letter-spacing: .01em;
	text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.lwl-listening__kicker-ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.lwl-listening__task {
	font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lwll-gold); text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ===================== the panel (interaction) ===================== */
.lwl-listening__panel {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	padding: 6px clamp(90px, 7vw, 150px) 20px;   /* side room for the flanking arrows */
	background:
		linear-gradient(to bottom, rgba(227,173,87,.05), transparent 120px),
		linear-gradient(to bottom, var(--lwll-panel), var(--lwll-panel2));
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: rgba(227,173,87,.3) transparent;
}
.lwl-listening__panel::-webkit-scrollbar { width: 8px; }
.lwl-listening__panel::-webkit-scrollbar-thumb { background: rgba(227,173,87,.28); border-radius: 8px; }

/* the reused quiz article — strip its own card chrome, it lives in the panel now */
.lwl-listening__quizhost.lwl-path-quiz {
	margin: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; max-width: none !important;
}
.lwl-listening__quizhost .lwl-path-quiz__header { display: none; }

/* ---- HUD: instruction pill + audio, stacked & centred over the scene between
   the two speakers, both matched to the same width (inline left/right edges) ---- */
.lwl-listening__hud {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
	z-index: 5; width: min(640px, 78%);
	display: flex; flex-direction: column; gap: 8px;
}
.lwl-listening__transport {
	width: 100%;
	background: rgba(9,11,17,.58); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
	border: 1px solid rgba(227,173,87,.30); border-radius: 16px;
	padding: 9px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.lwl-listening__transport .lwl-path-audioplayer { width: 100%; }
.lwl-listening .lwl-path-audioplayer.is-locked { opacity: .5; pointer-events: none; }

/* the beautified instruction pill (sits above the audio, same width) */
.lwl-listening__brief {
	display: flex; align-items: center; gap: 11px;
	padding: 8px 15px; border-radius: 14px;
	background: rgba(9,11,17,.58); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
	border: 1px solid rgba(227,173,87,.22); box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.lwl-listening__brief-ico { flex: 0 0 auto; font-size: .95rem; opacity: .85; }
.lwl-listening__rubric {
	flex: 1; margin: 0; color: #ece5d6; font-size: .76rem; line-height: 1.4; text-align: center;
}
.lwl-listening__plays {
	flex: 0 0 auto; font-size: .64rem; color: var(--lwll-gold); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

/* ---- stepper: dots + counter ---- */
.lwl-listening .lwl-pqs {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 2px 0 14px;
}
.lwl-listening .lwl-pqs__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.lwl-listening .lwl-pqs__dot {
	width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.12);
	transition: transform .15s, background .15s, box-shadow .15s;
}
.lwl-listening .lwl-pqs__dot--answered { background: rgba(227,173,87,.55); border-color: transparent; }
.lwl-listening .lwl-pqs__dot--active {
	background: var(--lwll-gold); transform: scale(1.35);
	box-shadow: 0 0 0 4px rgba(227,173,87,.18);
}
.lwl-listening .lwl-pqs__counter { font-size: .82rem; color: var(--lwll-mut); font-weight: 600; white-space: nowrap; }

/* ---- the question card ---- */
.lwl-listening .lwl-path-quiz__questions { list-style: none; margin: 0; padding: 0; }
.lwl-listening .lwl-path-quiz__question {
	list-style: none; margin: 0; padding: 0;
	background: none !important; border: 0 !important; box-shadow: none !important;
	animation: lwllCardIn .32s ease both;
}
@keyframes lwllCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lwl-listening .lwl-path-quiz__qstem { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; }
.lwl-listening .lwl-path-quiz__qnum {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .95rem;
	color: #2a1e08; background: linear-gradient(180deg, var(--lwll-gold), var(--lwll-gold2));
	box-shadow: 0 4px 12px rgba(227,173,87,.28);
}
.lwl-listening .lwl-path-quiz__qtitle { color: var(--lwll-ink); font-size: 1.14rem; font-weight: 700; line-height: 1.4; padding-top: 2px; }
.lwl-listening .lwl-path-quiz__qdesc { color: var(--lwll-mut); margin: -8px 0 14px 42px; font-size: .95rem; }

/* reactive answer grid: single column for a few options, two columns once the
   list gets long (multiple-matching = up to 8) so it never forces a scroll. */
.lwl-listening .lwl-path-quiz__answers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 9px; }
.lwl-listening .lwl-path-quiz__question:has(.lwl-path-quiz__answer:nth-child(5)) .lwl-path-quiz__answers { grid-template-columns: 1fr 1fr; }
.lwl-listening .lwl-path-quiz__answer { list-style: none; margin: 0; }
.lwl-listening .lwl-path-quiz__answer label {
	display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; height: 100%;
	padding: 11px 15px; border-radius: 13px;
	background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.10);
	color: var(--lwll-ink); font-size: 1rem; line-height: 1.35;
	transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.lwl-listening .lwl-path-quiz__answer label:hover { border-color: rgba(227,173,87,.55); background: rgba(227,173,87,.07); }
.lwl-listening .lwl-path-quiz__answer input { position: absolute; opacity: 0; width: 0; height: 0; }
/* custom radio dot */
.lwl-listening .lwl-path-quiz__answer label::before {
	content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35); transition: border-color .15s, box-shadow .15s, background .15s;
}
.lwl-listening .lwl-path-quiz__answer label:has(input:checked) {
	border-color: var(--lwll-gold); background: rgba(227,173,87,.13);
	box-shadow: 0 0 0 3px rgba(227,173,87,.16); transform: translateY(-1px);
}
.lwl-listening .lwl-path-quiz__answer label:has(input:checked)::before {
	border-color: var(--lwll-gold); background: radial-gradient(circle at center, var(--lwll-gold) 0 44%, transparent 48%);
	box-shadow: 0 0 10px rgba(227,173,87,.5);
}
.lwl-listening .lwl-path-quiz__answer-text { flex: 1; text-align: left; }
.lwl-listening .lwl-path-quiz__answer-text strong {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: -6px;
	width: 24px; height: 24px; border-radius: 50%; margin-right: 9px; flex: 0 0 auto;
	background: rgba(227,173,87,.16); border: 1px solid rgba(227,173,87,.42);
	color: var(--lwll-gold); font-size: .76rem; font-weight: 800;
}
.lwl-listening .lwl-path-quiz__answer label:has(input:checked) .lwl-path-quiz__answer-text strong {
	background: var(--lwll-gold); color: #2a1e08; border-color: var(--lwll-gold);
}

/* graded states (path adds these classes) */
.lwl-listening .lwl-path-quiz__answer.is-correct label,
.lwl-listening .lwl-path-quiz__answer.is-missed label {
	border-color: #3fbf7f; background: rgba(63,191,127,.14);
}
.lwl-listening .lwl-path-quiz__answer.is-correct label::before,
.lwl-listening .lwl-path-quiz__answer.is-missed label::before { border-color: #3fbf7f; }
.lwl-listening .lwl-path-quiz__answer.is-incorrect label { border-color: #e0637a; background: rgba(224,99,122,.13); }
.lwl-listening .lwl-path-quiz__answer.is-incorrect label::before { border-color: #e0637a; }

/* gap-fill input */
.lwl-listening .lwl-path-quiz__fill { margin-left: 42px; }
.lwl-listening .lwl-path-quiz__input {
	width: 100%; max-width: 420px; padding: 12px 14px; font-size: 1rem;
	color: var(--lwll-ink); background: rgba(255,255,255,.05);
	border: 1.5px solid rgba(255,255,255,.14); border-radius: 12px;
}
.lwl-listening .lwl-path-quiz__input:focus { outline: none; border-color: var(--lwll-gold); box-shadow: 0 0 0 3px rgba(227,173,87,.16); }
.lwl-listening .lwl-path-quiz__question[data-state="correct"] .lwl-path-quiz__input { border-color: #3fbf7f; background: rgba(63,191,127,.12); }
.lwl-listening .lwl-path-quiz__question[data-state="incorrect"] .lwl-path-quiz__input { border-color: #e0637a; background: rgba(224,99,122,.12); }
.lwl-listening .lwl-path-quiz__feedback { margin: 10px 0 0 42px; color: var(--lwll-mut); font-size: .92rem; }

/* ---- question nav: circular arrows flanking the answers, using the side space ---- */
.lwl-listening .lwl-pqs__nav { position: static; margin: 0; height: 0; }
.lwl-listening .lwl-pqs__prev,
.lwl-listening .lwl-pqs__next {
	position: absolute; top: 64%; transform: translateY(-50%);
	width: 58px; height: 58px; padding: 0; border-radius: 50%; cursor: pointer; z-index: 9;
	display: grid; place-items: center; font-size: 0; color: transparent;
	border: 1.5px solid rgba(227,173,87,.4);
	background: radial-gradient(circle at 32% 26%, rgba(43,49,64,.92), rgba(18,22,30,.92));
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	box-shadow: 0 8px 22px rgba(0,0,0,.4);
	transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease;
}
.lwl-listening .lwl-pqs__prev { left: clamp(14px, 3vw, 48px); }
.lwl-listening .lwl-pqs__next { right: clamp(14px, 3vw, 48px); }
.lwl-listening .lwl-pqs__prev::before,
.lwl-listening .lwl-pqs__next::before {
	font-size: 30px; line-height: 1; color: var(--lwll-gold); font-family: Georgia, serif;
}
.lwl-listening .lwl-pqs__prev::before { content: '\2039'; }
.lwl-listening .lwl-pqs__next::before { content: '\203A'; }
.lwl-listening .lwl-pqs__prev:hover,
.lwl-listening .lwl-pqs__next:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 0 0 3px rgba(227,173,87,.2), 0 10px 26px rgba(0,0,0,.45); background: radial-gradient(circle at 32% 26%, rgba(58,64,80,.95), rgba(24,28,38,.95)); }
.lwl-listening .lwl-pqs__prev[disabled],
.lwl-listening .lwl-pqs__next[disabled] { opacity: .28; pointer-events: none; }

/* ---- review card + submit ---- */
.lwl-listening .lwl-pqs__review {
	text-align: center; padding: 22px; border-radius: 16px; margin-top: 6px;
	background: rgba(227,173,87,.07); border: 1px solid var(--lwll-line);
}
.lwl-listening .lwl-pqs__review-eyebrow { font-size: .7rem; letter-spacing: .16em; color: var(--lwll-gold); font-weight: 700; }
.lwl-listening .lwl-pqs__review-title { color: var(--lwll-ink); margin: 6px 0 14px; font-size: 1.2rem; }
.lwl-listening .lwl-pqs__review-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lwl-listening .lwl-pqs__review-item { font-size: .8rem; padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--lwll-mut); }
.lwl-listening .lwl-pqs__review-item--ok { background: rgba(63,191,127,.16); color: #bfe9d2; }
.lwl-listening .lwl-pqs__review-item--todo { background: rgba(224,99,122,.16); color: #f3c6cf; }
.lwl-listening .lwl-pqs__review-submit,
.lwl-listening .lwl-path-cta--primary {
	background: linear-gradient(180deg, var(--lwll-gold), var(--lwll-gold2)); color: #2a1e08;
	border: 0; border-radius: 24px; padding: 12px 26px; font-weight: 800; font-size: 1rem; cursor: pointer;
	box-shadow: 0 6px 18px rgba(227,173,87,.3);
}
.lwl-listening .lwl-path-cta--ghost { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); color: var(--lwll-ink); border-radius: 24px; padding: 11px 22px; font-weight: 700; cursor: pointer; }

/* results panel (path toggles form[data-state=results]) */
.lwl-listening .lwl-path-quiz__results { margin-top: 14px; }
.lwl-listening .lwl-path-quiz__fillbar-track { height: 10px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.lwl-listening .lwl-path-quiz__fillbar-fill { height: 100%; background: linear-gradient(90deg, var(--lwll-gold2), var(--lwll-gold)); transition: width 1s cubic-bezier(.22,1,.36,1); }
.lwl-listening .lwl-path-quiz__score { text-align: center; margin-top: 14px; }
.lwl-listening .lwl-path-quiz__score-num { font-size: 2rem; font-weight: 800; color: var(--lwll-gold); }
.lwl-listening .lwl-path-quiz__score-pct { color: var(--lwll-mut); }

.lwl-listening--missing { padding: 12px; border: 1px dashed #c33; color: #c33; border-radius: 8px; font-size: .9rem; }

/* mirror fireside's integration: kill the DOUBLED per-stone backdrop + lesson card */
.lwl-path-viewport:has(.lwl-listening)::before,
.lwl-path-viewport:has(.lwl-listening)::after { display: none !important; }
.lwl-path-lesson:has(.lwl-listening) { background: none !important; border: 0 !important; box-shadow: none !important; }
.lwl-path-lesson:has(.lwl-listening) > .lwl-path-lesson__content { background: none !important; }

/* ======================================================================
   PATH-WIDE: relocate the floating prev/next arrows into the TOP bar, so
   they flank the tiles rail and the content below can go full-bleed. Loaded
   on every /journey/ view (lwl-listening enqueues path-wide), so this applies
   to ALL lessons, not just listening. Purely positional — handlers untouched.
   ====================================================================== */
/* Nav lives IN the tiles rail now (JS injects prev/next chips before/after the
   content tiles). Hide the floating arrows path-wide. */
.lwl-path-arrow { display: none !important; }

/* nav chips — sit in the rail track, flanking the content tiles as if part of it */
.lwl-navchip {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; padding: 0;
	display: grid; place-items: center; cursor: pointer; color: var(--lwll-gold, #e3ad57);
	border: 2px solid rgba(227,173,87,.55);
	background: radial-gradient(circle at 32% 26%, #2b3140, #161a23);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.3);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.lwl-navchip svg { width: 22px; height: 22px; }
.lwl-navchip:hover { transform: scale(1.09); box-shadow: 0 0 0 3px rgba(227,173,87,.22), 0 4px 12px rgba(0,0,0,.35); }
.lwl-navchip:active { transform: scale(.96); }
.lwl-navchip.is-disabled { opacity: .22; pointer-events: none; }
.lwl-navchip--prev { margin-right: 8px; }
.lwl-navchip--next { margin-left: 8px; }

/* short-viewport safety: give the questions more room on laptops */
@media (max-height: 820px) {
	.lwl-listening__stage { flex-basis: 42%; max-height: 46vh; }
}
@media (max-width: 640px) {
	.lwl-listening__console { height: auto; max-height: none; border-radius: 16px; width: 100%; }
	.lwl-listening__panel { overflow: visible; padding-left: 16px; padding-right: 16px; }
	.lwl-listening__stage { flex: 0 0 auto; height: clamp(190px, 44vw, 260px); max-height: none; }
	.lwl-listening .lwl-path-quiz__question:has(.lwl-path-quiz__answer:nth-child(5)) .lwl-path-quiz__answers { grid-template-columns: 1fr; }
	/* on mobile drop the question arrows below the options instead of the sides */
	.lwl-listening .lwl-pqs__prev, .lwl-listening .lwl-pqs__next { position: static; transform: none; display: inline-grid; }
	.lwl-listening .lwl-pqs__nav { position: static; height: auto; display: flex; justify-content: space-between; margin-top: 16px; }
}

/* NOTE (2026-07-17): the path-wide TILE polish — larger medallions, completion
   badges, not-seen dimming, mastery fill (rail + map serpentine) and magic-move
   glow — was FOLDED INTO lwl-path.css core (appended at its end). Removed from
   here to avoid duplication. The nav chips + arrow-hide + full-bleed above stay
   here because they're coupled to lwl-listening.js. */