/* ============================================================================
 * WFD Academy — Lesson Player Academic Layout (v1.5.14)
 * ----------------------------------------------------------------------------
 * - v1.5.14 (2026-05-17): Diagnostic finding from a live-page audit revealed
 *   the brown Daniel kept seeing on the chapter rail was NOT coming from the
 *   active-row rule (which was already correctly pinned to var(--wfd-black)
 *   !important in v1.5.12). It was coming from the RAIL ASIDE container
 *   itself — `.wfd-player__rail { background: var(--wfd-black); }` had no
 *   !important guard, and the previously-cached v1.5.1 file at the same URL
 *   query string had `background: var(--wfd-stone-900)` (#2A251E warm brown)
 *   bleeding through wherever an active row was even fractionally narrower
 *   than the rail. Locked the rail aside background with !important so the
 *   stone-900 brown can never re-enter the cascade, regardless of which
 *   cached file version a browser loads. Bumped WFD_CHILD_VERSION to 1.5.14
 *   to bust the stale `?ver=1.5.4` / `?ver=1.5.13` URLs in client and edge
 *   caches.
 * - v1.5.12 (2026-05-17): Two regressions from the v1.5.11 three-color sweep.
 *   (A) PREV / NEXT nav cards at the bottom of every chapter had ZERO CSS in
 *       v1.5.11 — the template emits .wfd-player__nav-card / --prev / --next
 *       but no rules existed anywhere in the theme, so the cards rendered as
 *       bare underlined inline anchors on cream. Added full chrome: 1px
 *       stone-100 border on white, ~18px padding, uppercase tracked eyebrow,
 *       bold serif title, dark-stone text. Cards anchor to columns 1 and 3
 *       of the inline-footer grid; the mark-complete row sits in column 2.
 *       Footer max-width relaxed from 80ch to none so cards have room.
 *   (B) Active row in the chapter rail still rendered with a muddy dark-on-
 *       dark look because the v1.5.11 active-row rule did not force the
 *       inherited title-line / tick colors, and Kadence's anchor cascade was
 *       pulling them stone-dark. Locked the active-row chain with !important
 *       across bg, color, title-line, tick — the only active signal is now
 *       the gold left rail + bold weight on a pure black bg (#0A0A0A).
 * - v1.5.10 (2026-05-17): REVERT v1.5.9 colour inversion. Bundle ground truth
 *   (bundle CSS lines 543-598) paints the figure body NEAR-WHITE
 *   (linear-gradient #FFF -> #FAFBFD) with two tan insets stacked on top:
 *   scenario blockquote = #F4EAD1 + gold-deep left rail (10px border-radius),
 *   what-this-shows callout = #F4EAD1 + gold (lighter) left rail (6px radius).
 *   v1.5.9 had painted the BODY the warm tan #F8F5EE which collapsed the body
 *   vs inset contrast. All other v1.5.9 properties (border-shape, padding,
 *   margin, box-shadow, inline uppercase header, rail-text cream) preserved.
 * ----------------------------------------------------------------------------
 * - Masthead STAYS (no display:none). It scrolls away naturally; slim bar
 *   sticks to top:0 once the masthead has scrolled out.
 * - Slim bar = position: sticky (NOT fixed). Stays where the user expects.
 * - Shell + content fill the viewport — no max-width caps.
 * - Rail widened to 280px. Tick is a CIRCLE.
 * - Rail item text colour = gold (same as numbers) + bold. Current chapter
 *   keeps the black-bg + cream-text highlight.
 * - v1.5.7 (2026-05-17): Worked-example container fix. The figure card
 *   now uses a near-solid white-to-faint-grey gradient (bundle pattern
 *   from .worked-example) so it is visually distinct against the cream
 *   page background and visually contains its body. Scenario styling
 *   moved from "first <p> in body" (which mis-targeted Step 1) to the
 *   actual <blockquote> child of __body — matches the rendered HTML.
 *   Body prose (steps / intro paragraphs) now serif EB Garamond 1.0625rem
 *   matching the bundle's 17px content body. What-this-shows last-<p>
 *   styling preserved from v1.5.4.
 * - v1.5.6 (2026-05-17): Bundle-parity fix. Rail background --wfd-stone-900
 *   -> --wfd-black (#0A0A0A) to match the bundle .sidebar var(--navy) token.
 *   Worked-example __title split off from __eyebrow: now sentence-case
 *   1.2rem bold serif headline in --wfd-black, no upper-case, no ' — '
 *   prefix. Eyebrow stays uppercase gold lozenge. Header now flex-wrap so
 *   title drops to its own line.
 * ============================================================================ */





/* Drop any overflow constraints on parent wrappers so position:sticky works
 * on the slim bar. */
body.wfd-player-active .wfd-page,
body.wfd-player-active #wfd-page,
body.wfd-player-active .site,
body.wfd-player-active .content-area,
body.wfd-player-active main#main {
	overflow: visible !important;
	max-width: none !important;
}

/* -- The academic player wrapper -- */
.wfd-player--academic {
	display: block;
	background: var(--wfd-cream);
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone on cream */
	min-height: 100vh;
}

/* -- Slim bar: STICKY at the masthead's bottom edge. Both masthead and bar
 *    stay visible at all times (stacked at top of viewport).
 *    --wfd-masthead-h is set dynamically by wfd-nav.js on load + resize;
 *    falls back to 130px if JS doesn't run. -- */
.wfd-player__slim-header {
	position: sticky;
	top: var(--wfd-masthead-h, 130px);
	z-index: 50;
	background: var(--wfd-black);
	color: #FFFFFF;                      /* v1.5.11 — white on dark slim bar */
	border-bottom: 2px solid var(--wfd-gold);
	min-height: 60px;
}

.wfd-player__slim-header-inner {
	max-width: none;
	margin: 0;
	padding: 0.85rem clamp(1rem, 3vw, 1.75rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.wfd-player__slim-breadcrumb {
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	font-family: var(--wfd-font-body);
	font-size: var(--wfd-text-sm);
	color: #FFFFFF;                      /* v1.5.11 — white on dark slim bar */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

.wfd-player__slim-wordmark {
	font-family: var(--wfd-font-display);
	font-size: 1rem;
	font-weight: 500;
	color: #FFFFFF;                      /* v1.5.11 — white on dark (was gold) */
	letter-spacing: var(--wfd-tracking-snug);
}

.wfd-player__slim-sep {
	color: #FFFFFF;                      /* v1.5.11 — white on dark */
	opacity: 0.6;
}

.wfd-player__slim-course,
.wfd-player__slim-lesson {
	color: #FFFFFF;                      /* v1.5.11 — white on dark slim bar */
	overflow: hidden;
	text-overflow: ellipsis;
}

.wfd-player__slim-lesson { color: #FFFFFF; }  /* v1.5.11 — white on dark slim bar */

.wfd-player__slim-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.wfd-player__slim-progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wfd-font-body);
	font-size: var(--wfd-text-xs);
	color: #FFFFFF;                      /* v1.5.11 — white on dark slim bar */
}

.wfd-player__slim-progress-track {
	width: 120px;
	height: 4px;
	background: var(--wfd-stone-600);
	overflow: hidden;
	display: block;
}

.wfd-player__slim-progress-fill {
	height: 100%;
	background: var(--wfd-gold);
	display: block;
}

.wfd-player__slim-progress-label {
	font-variant-numeric: tabular-nums;
	color: #FFFFFF;                      /* v1.5.11 — white on dark slim bar (was gold) */
	font-weight: 500;
}

.wfd-player__slim-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	color: #FFFFFF !important;            /* v1.5.11 — white on dark slim bar */
	border: 1px solid var(--wfd-stone-600);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
	transition: border-color var(--wfd-duration-fast) var(--wfd-easing), background var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__slim-close:hover {
	border-color: var(--wfd-gold);
	background: rgba(197, 165, 114, 0.08);
}

/* -- Two-column shell — FILLS THE VIEWPORT (no max-width cap) -- */
.wfd-player__shell {
	max-width: none;
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: 296px minmax(0, 1fr);
	gap: 0;
	min-height: calc(100vh - 60px);
}

@media (max-width: 900px) {
	.wfd-player__shell {
		grid-template-columns: 1fr;
	}
	.wfd-player__rail {
		max-height: 320px;
		overflow-y: auto;
		border-right: none !important;
		border-bottom: 1px solid var(--wfd-stone-600);
		position: relative !important;
		top: auto !important;
	}
}

/* -- LEFT: chapter rail (DEEP BLACK background, WHITE text per v1.5.11 three-color rule)
 * v1.5.14 — Background pinned with !important. Previous cached versions of
 * THIS file had `background: var(--wfd-stone-900)` (warm brown #2A251E) here,
 * and the v1.5.12 active-row fix did nothing about it because the active row
 * was already correctly black — the surrounding rail aside was the brown
 * surface Daniel was seeing. !important forecloses any future regression. */
.wfd-player__rail {
	background: var(--wfd-black) !important;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail (was gold) */
	border-right: 1px solid var(--wfd-stone-600);
	padding: 1.5rem 0 2rem;
	position: sticky;
	top: calc(var(--wfd-masthead-h, 130px) + 60px);
	max-height: calc(100vh - var(--wfd-masthead-h, 130px) - 60px);
	overflow-y: auto;
	align-self: start;
}

.wfd-player__rail-title {
	font-family: var(--wfd-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--wfd-tracking-caps);
	color: #FFFFFF;                      /* v1.5.11 — white on black rail (was gold). "CHAPTERS" / "PRACTICE" headers. */
	font-weight: 500;
	margin: 0 0 1rem;
	padding: 0 1.5rem;
}

.wfd-player__rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* RAIL ITEM — v1.5.11 three-color text rule: rail bg is black so all text is white.
 * Active-state contrast is now carried by the gold border-left rail and bold weight,
 * not by a text-color swap. */
.wfd-player__rail-item {
	display: grid;
	grid-template-columns: 18px 28px 1fr;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.85rem 1.5rem;
	font-family: var(--wfd-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail (was gold) */
	text-decoration: none;
	line-height: 1.35;
	border-left: 3px solid transparent;
	transition:
		background var(--wfd-duration-fast) var(--wfd-easing),
		border-left-color var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__rail-item:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #FFFFFF;                      /* v1.5.11 — stays white on hover */
}

.wfd-player__rail-item.is-current {
	/* v1.5.15 — Brown-to-black GRADIENT active-row highlight (Daniel-approved direction reversal).
	 * v1.5.6 -> v1.5.10 had solid stone-900 (brown); v1.5.11 -> v1.5.14 forced pure black with !important.
	 * Both were wrong. The correct treatment is a horizontal gradient radiating outward FROM the
	 * gold indicator on the left: warm stone-900 (#2A251E) at 0%, pure black (#0A0A0A) at 100%.
	 * This is the ONLY rule that should govern .is-current background; no other CSS file sets it. */
	background: linear-gradient(90deg, var(--wfd-stone-900) 0%, var(--wfd-black) 100%) !important;
	border-left-color: var(--wfd-gold) !important;
	color: #FFFFFF !important;            /* v1.5.15 — white text retained on gradient row */
	font-weight: 700 !important;
}

.wfd-player__rail-item.is-current .wfd-player__rail-num {
	color: #FFFFFF !important;            /* v1.5.12 — white number on active row */
}

/* v1.5.12 — force the active-row title-line + tick to white so the Kadence
 * anchor cascade cannot pull them dark. This is the rule that was missing
 * in v1.5.11 and caused the muddy "dark on dark" look Daniel reported. */
.wfd-player__rail-item.is-current .wfd-player__rail-title-line {
	color: #FFFFFF !important;
}

.wfd-player__rail-item.is-current .wfd-player__rail-tick {
	border-color: #FFFFFF !important;
	background: transparent !important;
}

.wfd-player__rail-item.is-current.is-done .wfd-player__rail-tick {
	background: var(--wfd-cream) !important;
	border-color: var(--wfd-cream) !important;
}

.wfd-player__rail-item.is-locked {
	color: #FFFFFF;                      /* v1.5.11 — white on black; opacity drift from tick border conveys locked state */
	pointer-events: none;
	font-weight: 500;
}

.wfd-player__rail-num {
	font-family: var(--wfd-font-body);
	font-size: 0.875rem;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail (was gold) */
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}

.wfd-player__rail-item.is-locked .wfd-player__rail-num {
	color: #FFFFFF;                      /* v1.5.11 — white on black rail */
}

.wfd-player__rail-title-line {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.35;
	/* v1.5.8 — Chapter title text is pure white (Daniel-approved bundle parity).
	 * Section headings + chapter numbers + tick markers stay gold. */
	color: #FFFFFF;
}

/* v1.5.11 — Locked-chapter title-line stays white per three-color rule
 * (lock state now signalled by tick + opacity, not muted text). */
.wfd-player__rail-item.is-locked .wfd-player__rail-title-line {
	color: #FFFFFF;
}

/* Tick is a CIRCLE. Empty by default, fills CREAM (white) with dark check inside on done. */
.wfd-player__rail-tick {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--wfd-stone-300);
	background: transparent;
	border-radius: 50%;
	position: relative;
	flex-shrink: 0;
	box-sizing: border-box;
}

.wfd-player__rail-item.is-done .wfd-player__rail-tick {
	background: var(--wfd-cream);
	border-color: var(--wfd-cream);
}

.wfd-player__rail-item.is-done .wfd-player__rail-tick::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 6px; height: 3px;
	border-left: 2px solid var(--wfd-black);
	border-bottom: 2px solid var(--wfd-black);
	transform: translate(-50%, -65%) rotate(-45deg);
}

.wfd-player__rail-item.is-locked .wfd-player__rail-tick {
	border-color: var(--wfd-stone-600);
}

/* Final Assessment row — distinct from numbered chapters. v1.5.11 — white text on black rail. */
.wfd-player__rail-final {
	display: grid;
	grid-template-columns: 18px 28px 1fr;
	gap: 0.7rem;
	align-items: center;
	padding: 0.9rem 1.5rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--wfd-stone-600);
	font-family: var(--wfd-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail */
	text-decoration: none;
	line-height: 1.3;
	letter-spacing: 0.01em;
	border-left: 3px solid transparent;
	transition: background var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__rail-final:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #FFFFFF;                      /* v1.5.11 — stays white on hover */
}

.wfd-player__rail-final-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 14px;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail */
}

.wfd-player__rail-final-num {
	font-family: var(--wfd-font-body);
	font-size: 0.7rem;
	color: #FFFFFF;                      /* v1.5.11 — white on black rail */
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -- CENTRE: prose column — FILLS the column width (no narrow cap) -- */
.wfd-player__column {
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.75rem);
	background: var(--wfd-cream);
	max-width: none;
}

.wfd-content--academic {
	max-width: none;
	margin: 0;
	font-family: var(--wfd-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone on cream content */
}

/* Constrain prose paragraphs to ~80ch for reading comfort, but tables /
 * callouts / examples break out to the full column width. */
.wfd-content--academic > p,
.wfd-content--academic > ul,
.wfd-content--academic > ol,
.wfd-content--academic > h2,
.wfd-content--academic > h3,
.wfd-content--academic > h4,
.wfd-content--academic > blockquote {
	max-width: 80ch;
}

.wfd-content--academic > .wfd-example,
.wfd-content--academic > .wfd-summary,
.wfd-content--academic > .wfd-lo,
.wfd-content--academic > .wfd-keyterms,
.wfd-content--academic > .wfd-callout,
.wfd-content--academic > table,
.wfd-content--academic > figure {
	max-width: none;
}

.wfd-player__lesson-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wfd-stone-300);
	max-width: 80ch;
}

.wfd-player__lesson-eyebrow {
	font-family: var(--wfd-font-body);
	font-size: var(--wfd-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--wfd-tracking-caps);
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone on cream content */
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.wfd-player__lesson-title {
	font-family: var(--wfd-font-display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--wfd-tracking-tight);
	margin: 0;
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone on cream */
}

/* Inline footer
 * v1.5.12 — widened max-width from 80ch (~640px) to none so the prev/next
 * nav cards have room to breathe at desktop widths. Grid columns:
 *   1fr  | auto  | 1fr
 *  [prev]|[mark] |[next]
 * Children are placed via grid-column on .wfd-player__inline-mark-row
 * (column 2) and on the nav-card --prev / --next modifiers below. */
.wfd-player__inline-footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wfd-stone-300);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
	max-width: none;
}

/* Mark-complete row anchors in the center column so prev / next can sit on
 * either side regardless of DOM order. */
.wfd-player__inline-mark-row {
	grid-column: 2 / 3;
	justify-self: center;
	text-align: center;
}

.wfd-player__inline-nav {
	display: flex;
	align-items: center;
}

.wfd-player__inline-nav--right { justify-content: flex-end; }

.wfd-player__inline-mark {
	display: flex;
	justify-content: center;
}

.wfd-player__inline-mark .learndash_mark_complete_button,
.wfd-player__inline-mark input[type="submit"] {
	font-family: var(--wfd-font-body) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	background: var(--wfd-gold-deep) !important;
	color: #FFFFFF !important;            /* v1.5.11 — white on gold-deep btn */
	border: 1px solid var(--wfd-gold-deep) !important;
	padding: 0.75rem 1.75rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	border-radius: 0 !important;
	transition: background var(--wfd-duration-fast) var(--wfd-easing) !important;
}

.wfd-player__inline-mark .learndash_mark_complete_button:hover,
.wfd-player__inline-mark input[type="submit"]:hover {
	background: var(--wfd-black) !important;
	border-color: var(--wfd-black) !important;
}

.wfd-player__nav-link {
	font-family: var(--wfd-font-body);
	font-size: 0.875rem;
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone on cream content */
	text-decoration: none;
	padding: 0.5rem 0;
	border-bottom: 1px solid transparent;
	transition: color var(--wfd-duration-fast) var(--wfd-easing), border-bottom-color var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__nav-link:hover {
	color: var(--wfd-stone-900);         /* v1.5.11 — stays dark stone (underline carries hover signal) */
	border-bottom-color: var(--wfd-gold-deep);
}

.wfd-player__mark-complete--done {
	font-family: var(--wfd-font-body);
	font-size: 0.9rem;
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone (was green #1F6B3A) */
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid #1F6B3A;
	background: rgba(31, 107, 58, 0.05);
}

.wfd-player__mark-complete--done::before {
	content: '\2713';
	font-weight: 700;
}

/* Reset v1.4.2 .wfd-player rules so they don't conflict */
.wfd-player--academic .wfd-player__topbar,
.wfd-player--academic .wfd-player__sidebar,
.wfd-player--academic .wfd-player__content,
.wfd-player--academic .wfd-player__footer {
	all: unset;
	display: revert;
}

/* -- Course detail page in academic register -- */
.wfd-course__sidebar--academic .wfd-tutor-card {
	padding: 1.5rem 1.5rem 1.75rem;
}

.wfd-tutor-card__divider {
	margin: 1rem 0;
	border: none;
	border-top: 1px solid var(--wfd-stone-100);
}

.wfd-tutor-card__sub-eyebrow {
	font-family: var(--wfd-font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: var(--wfd-tracking-caps);
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone */
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.wfd-tutor-card__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--wfd-font-body);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wfd-stone-900);
}

.wfd-tutor-card__list li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--wfd-stone-100);
}

.wfd-tutor-card__list li:last-child { border-bottom: none; }

.wfd-tutor-card__price {
	font-family: var(--wfd-font-body);
	font-size: 0.875rem;
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone */
	margin: 0 0 0.85rem;
}

.wfd-tutor-card__cta {
	display: block;
	background: var(--wfd-gold-deep);
	color: #FFFFFF !important;            /* v1.5.11 — white on gold-deep btn */
	font-family: var(--wfd-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	padding: 0.75rem 1rem;
	text-decoration: none;
	transition: background var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-tutor-card__cta:hover { background: var(--wfd-black); color: #FFFFFF !important; }  /* v1.5.11 — stays white on hover */

/* ============================================================================
 * v1.5.1 — hide LearnDash default action bar + Kadence related posts
 * ============================================================================
 * LearnDash injects its own .ld-content-actions bar AFTER my custom
 * .wfd-player__inline-footer, which duplicates Prev/Next/Mark-complete
 * with the blue default styling and adds a "Back to course" link.
 * Kadence adds a "Related posts" block at the bottom of single-post views.
 * Daniel asked for both removed on lesson pages.
 * ---------------------------------------------------------------------------- */
body.wfd-player-active .ld-content-actions,
body.wfd-player-active .learndash-wrapper .ld-content-actions,
body.wfd-player-active .ld-content-action,
body.wfd-player-active .ld-section-heading,
body.wfd-player-active .ld-tabs-navigation,
body.wfd-player-active .ld-status,
body.wfd-player-active .ld-status-icon,
body.wfd-player-active .ld-status-complete,
body.wfd-player-active .ld-status-in_progress,
body.wfd-player-active .ld-back-to-course-link,
body.wfd-player-active .ld-button.ld-button__back,
body.wfd-player-active .ld-alert,
body.wfd-player-active .ld-alert-success,
body.wfd-player-active .ld-alert-warning,
body.wfd-player-active .ld-alert-icon,
body.wfd-player-active .ld-alert-content,
body.wfd-player-active .learndash-completion-message,
body.wfd-player-active .ld-breadcrumbs,
body.wfd-player-active .ld-lesson-breadcrumbs,
body.wfd-player-active .learndash-wrapper .ld-alert,
body.wfd-player-active .related-posts,
body.wfd-player-active .related-posts-content,
body.wfd-player-active .kadence-related-posts,
body.wfd-player-active .related-articles,
body.wfd-player-active .kadence-author-box,
body.wfd-player-active .entry-author,
body.wfd-player-active .entry-footer-meta,
body.wfd-player-active .post-navigation,
body.wfd-player-active .nav-links,
body.wfd-player-active .single-related-wrap,
body.wfd-player-active .related-section,
body.wfd-player-active .jp-relatedposts,
body.wfd-player-active .jp-relatedposts-items,
body.wfd-player-active div[class*="jp-relatedposts"],
body.wfd-player-active div[class*="related-posts"],
body.wfd-player-active section[class*="related"],
body.wfd-player-active aside[class*="related"],
body.wfd-player-active .wp-block-latest-posts__list,
body.wfd-player-active .kadence-similar-posts {
	display: none !important;
}

/* Mark-incomplete form styling */
.wfd-player__mark-incomplete-form {
	display: inline;
	margin-left: 0.75rem;
}

.wfd-player__mark-incomplete-btn {
	font-family: var(--wfd-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: #FFFFFF;                      /* v1.5.11 — white on black btn */
	background: var(--wfd-black);
	border: 1px solid var(--wfd-black);
	padding: 0.75rem 1.75rem;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	border-radius: 0;
	transition: background var(--wfd-duration-fast) var(--wfd-easing),
	            border-color var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__mark-incomplete-btn:hover {
	background: var(--wfd-gold-deep);
	border-color: var(--wfd-gold-deep);
	color: #FFFFFF;                      /* v1.5.11 — stays white on gold-deep hover */
}

/* Container around "Chapter complete" + "Mark incomplete" — stack on small screens */
.wfd-player__inline-mark-done {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* ============================================================================
 * v1.5.1 — Chapter hero card (lift from WFD_IFRS17_Course bundle .quiz-header)
 * ----------------------------------------------------------------------------
 * Sits at the top of every chapter. Navy gradient surface, cream serif title,
 * gold eyebrow, optional metadata strip below.
 * ============================================================================ */
.wfd-player__hero {
	background: linear-gradient(135deg, var(--wfd-black) 0%, var(--wfd-stone-900) 100%);
	color: #FFFFFF;                      /* v1.5.11 — white on dark hero */
	padding: 2.25rem 2.5rem 2rem;
	margin-bottom: 2.5rem;
	border-left: 4px solid var(--wfd-gold);
}

.wfd-player__hero-inner {
	max-width: none;
}

.wfd-player__hero-eyebrow {
	font-family: var(--wfd-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: #FFFFFF;                      /* v1.5.11 — white on dark hero (was gold) */
	margin: 0 0 0.65rem;
}

.wfd-player__hero-title,
.wfd-player__hero h1.wfd-player__hero-title,
.wfd-player__hero .wfd-player__hero-title {
	font-family: var(--wfd-font-display) !important;
	font-size: clamp(1.875rem, 3.2vw, 2.375rem) !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: var(--wfd-tracking-tight) !important;
	color: #FFFFFF !important;            /* v1.5.11 — white on dark hero */
	margin: 0 0 0.85rem !important;
}

.wfd-player__hero-subtitle {
	font-family: var(--wfd-font-display);
	font-size: 1.125rem;
	line-height: 1.5;
	color: #FFFFFF;                      /* v1.5.11 — white on dark hero */
	margin: 0 0 1.25rem;
	max-width: 65ch;
	font-style: italic;
}

.wfd-player__hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin-top: 1rem;
}

.wfd-player__hero-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wfd-player__hero-meta-value {
	font-family: var(--wfd-font-body);
	font-size: 1.375rem;
	font-weight: 700;
	color: #FFFFFF;                      /* v1.5.11 — white on dark hero (was gold) */
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.wfd-player__hero-meta-label {
	font-family: var(--wfd-font-body);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #FFFFFF;                      /* v1.5.11 — white on dark hero */
	font-weight: 500;
}

/* ============================================================================
 * v1.5.4 — Bundle parity: h2 gold underline, blockquote, lo, keyterms,
 * worked-example chevron, misunderstanding pattern, qb-link black solid.
 * Daniel wants these to look exactly like WFD_IFRS17_Course.html.
 * Loads LAST so it wins.
 * ============================================================================ */

/* --- Section headings (h2) with thin gold underline (bundle pattern). v1.5.4: descendant not direct-child. --- */
.wfd-content--academic h2,
.wfd-content--academic h2.wp-block-heading,
.wfd-content--academic .wp-block-heading.h2 {
	font-family: var(--wfd-font-display) !important;
	font-size: 1.65rem !important;
	font-weight: 600 !important;
	color: var(--wfd-ink) !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
	margin: 2.5rem 0 0.85rem !important;
	padding: 0 0 0.6rem !important;
	border-top: none !important;
	border-bottom: 1px solid rgba(197, 165, 114, 0.4) !important;
}

.wfd-content--academic h3,
.wfd-content--academic h3.wp-block-heading {
	font-family: var(--wfd-font-body) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--wfd-ink) !important;
	margin: 1.75rem 0 0.65rem !important;
	letter-spacing: 0 !important;
}

/* --- Blockquote — cream-tan bg with thick gold left border, italic serif --- */
.wfd-content--academic blockquote {
	background: rgba(197, 165, 114, 0.16) !important;
	border-left: 4px solid var(--wfd-gold-deep) !important;
	padding: 1.5rem 1.75rem !important;
	margin: 1.75rem 0 !important;
	font-family: var(--wfd-font-display) !important;
	font-style: italic !important;
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was --wfd-black) */
	font-size: 1.1875rem !important;
	line-height: 1.6 !important;
}

.wfd-content--academic blockquote p:last-child {
	margin-bottom: 0 !important;
}

/* --- Learning Objectives — serif numbered list, gold numbers --- */
.wfd-content--academic .wfd-lo {
	background: var(--wfd-white) !important;
	border: none !important;
	border-top: none !important;
	border-left: 4px solid var(--wfd-gold-deep) !important;
	padding: 1.5rem 1.75rem !important;
	margin: 1.5rem 0 !important;
	box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04);
}

.wfd-content--academic .wfd-lo__title {
	font-family: var(--wfd-font-body) !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was gold-deep) */
	font-weight: 700 !important;
	margin: 0 0 1rem !important;
}

.wfd-content--academic .wfd-lo__list {
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.65 !important;
	color: var(--wfd-stone-900) !important;
	padding-left: 1.5rem !important;
	margin: 0 !important;
}

.wfd-content--academic .wfd-lo__list li {
	margin-bottom: 0.65rem !important;
}

.wfd-content--academic .wfd-lo__list li::marker {
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone marker */
	font-weight: 700 !important;
}

/* --- Key terms — sans-bold term names, serif definitions --- */
.wfd-content--academic .wfd-keyterms {
	background: var(--wfd-white) !important;
	border: none !important;
	border-left: 4px solid var(--wfd-gold-deep) !important;
	padding: 1.5rem 1.75rem !important;
	margin: 1.5rem 0 !important;
	box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04);
}

.wfd-content--academic .wfd-keyterms__title {
	font-family: var(--wfd-font-body) !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone */
	font-weight: 700 !important;
	margin: 0 0 1.25rem !important;
}

.wfd-content--academic .wfd-keyterms__term {
	padding: 0.5rem 0 0.85rem !important;
	border-bottom: none !important;
}

.wfd-content--academic .wfd-keyterms__term-name {
	font-family: var(--wfd-font-body) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	color: var(--wfd-ink) !important;
	margin-bottom: 0.25rem !important;
}

.wfd-content--academic .wfd-keyterms__term-def {
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var(--wfd-stone-900) !important;
	margin: 0 !important;
}

/* --- Worked example — chevron header + scenario blockquote + steps --- */
.wfd-content--academic .wfd-example {
	/* v1.5.10 — REVERT v1.5.9. Bundle ground truth (bundle CSS lines 543-598):
	 * .content .worked-example { background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
	 *   border: 1px solid #EFEAE0; border-left: 4px solid #C5A572; ... }
	 * The figure body is NEAR-WHITE, NOT warm cream. The two tan insets
	 * (scenario blockquote + what-this-shows callout) sit on top of the
	 * near-white card to create body-vs-inset contrast. v1.5.9 inverted this
	 * by painting the body itself the same warm tan family as the insets,
	 * killing the hierarchy. Reverted to bundle near-white gradient.
	 * Token reference (bundle):
	 *   figure body   = #FFFFFF -> #FAFBFD gradient  (this rule)
	 *   inset boxes   = #F4EAD1  (--wfd-gold-tint, no token in theme — literal hex)
	 *   card border   = #EFEAE0  (--wfd-stone-100)
	 *   card left bar = #C5A572  (--wfd-gold) */
	background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%) !important;
	border: 1px solid var(--wfd-stone-100) !important;
	border-left: 4px solid var(--wfd-gold) !important;
	border-radius: 0 8px 8px 0 !important;
	margin: 2.25rem 0 !important;
	padding: 1.5rem 1.75rem 1.25rem !important;
	box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06) !important;
	display: block !important;
	overflow: hidden !important;
}

.wfd-content--academic .wfd-example__header {
	background: transparent !important;
	border-bottom: none !important;
	padding: 0 0 0.85rem !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 0.35rem !important;
	margin: 0 0 0.5rem !important;
}

.wfd-content--academic .wfd-example__header::before {
	content: '\25B8\00a0';
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone chevron (was gold-deep) */
	font-size: 0.85rem;
	line-height: 1;
	flex-shrink: 0;
}

/* v1.5.11 — Eyebrow uses dark stone, NOT gold. Three-color text rule. */
.wfd-content--academic .wfd-example__eyebrow {
	display: inline !important;
	font-family: var(--wfd-font-body) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was gold-deep) */
	margin: 0 !important;
}

/* v1.5.11 — Title now renders as dark-stone uppercase header line, NOT gold.
 * Composition stays the same: ▸ WORKED EXAMPLE 2.1 — THE SIGNIFICANCE TEST.
 * H4 stays inline; em-dash separator injected via ::before. */
.wfd-content--academic .wfd-example__title {
	display: inline !important;
	font-family: var(--wfd-font-body) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-size: 0.78rem !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was gold-deep) */
	margin: 0 !important;
	padding: 0 !important;
	flex-basis: auto !important;
}

.wfd-content--academic .wfd-example__title::before {
	content: '\00a0\2014\00a0';
	color: var(--wfd-stone-900);         /* v1.5.11 — dark stone em-dash (was gold-deep) */
	font-weight: 700;
}

.wfd-content--academic .wfd-example__body {
	padding: 0 !important;
}

/* v1.5.7 — All direct body paragraphs (Step 1, Step 2, etc.) render in
 * serif EB Garamond at the bundle's 17px scale for comfortable read.
 * Bold leadins (Step 1 — ...) stay bold because <strong> is inline. */
.wfd-content--academic .wfd-example__body > p {
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.7 !important;
	color: var(--wfd-stone-900) !important;
	margin: 0.85rem 0 !important;
}

.wfd-content--academic .wfd-example__body > p strong {
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was --wfd-black) */
}

/* v1.5.7 — Scenario is rendered as <blockquote> inside __body. Style it
 * as a tan-tinted inset with a gold-deep left rail (bundle .content
 * blockquote pattern). Replaces the broken
 * .wfd-example__body > p:first-child selector which had been catching
 * Step 1 by accident. */
.wfd-content--academic .wfd-example__body > blockquote:not(:empty) {
	/* v1.5.10 — Tan scenario inset on the near-white card. Bundle:
	 * .content blockquote { background:#F4EAD1; border-left:4px solid #6F5418;
	 *   border-radius:0 10px 10px 0; padding:16px 20px; ... }
	 * No --wfd-gold-tint token exists in the theme — using literal #F4EAD1. */
	background: #F4EAD1 !important;
	border-left: 4px solid var(--wfd-gold-deep) !important;
	border-radius: 0 10px 10px 0 !important;
	padding: 1rem 1.25rem !important;
	margin: 0 0 1.25rem !important;
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var(--wfd-stone-900) !important;
}

.wfd-content--academic .wfd-example__body > blockquote > p {
	margin: 0.35rem 0 !important;
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var(--wfd-stone-900) !important;
}

.wfd-content--academic .wfd-example__body > blockquote > p:first-child {
	margin-top: 0 !important;
}

.wfd-content--academic .wfd-example__body > blockquote > p:last-child {
	margin-bottom: 0 !important;
}

.wfd-content--academic .wfd-example__body > blockquote strong {
	color: var(--wfd-stone-900) !important;  /* v1.5.11 — dark stone (was --wfd-black) */
}

/* v1.5.10 — "What this shows" callout. Last paragraph in the figure body,
 * rendered as a tan inset with a lighter gold left rail and tighter radius
 * to differentiate from the scenario blockquote (10px) above. Bundle pairs
 * the two insets on top of the near-white card to create body-vs-inset
 * contrast. The :not(:empty) guard avoids painting empty trailing nodes. */
.wfd-content--academic .wfd-example__body > p:last-child:not(:empty) {
	background: #F4EAD1 !important;
	border-left: 4px solid var(--wfd-gold) !important;
	border-radius: 0 6px 6px 0 !important;
	padding: 0.75rem 1rem !important;
	color: var(--wfd-stone-900) !important;
}

/* Sibling guard: when a figure has a single trailing paragraph that is both
 * first and last child (no preceding steps), keep the same tan callout look
 * so it does not fall back to a plain body paragraph. */
.wfd-content--academic .wfd-example__body > p:last-child:first-child {
	background: #F4EAD1 !important;
	border-left: 4px solid var(--wfd-gold) !important;
	border-radius: 0 6px 6px 0 !important;
	padding: 0.75rem 1rem !important;
	color: var(--wfd-stone-900) !important;
}

/* v1.5.7 — Lists inside example body inherit serif body styling. */
.wfd-content--academic .wfd-example__body > ul,
.wfd-content--academic .wfd-example__body > ol,
.wfd-content--academic .wfd-example__body > blockquote ul,
.wfd-content--academic .wfd-example__body > blockquote ol {
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.7 !important;
	color: var(--wfd-stone-900) !important;
	margin: 0.6rem 0 !important;
	padding-left: 1.5rem !important;
}

/* --- v1.5.17 Common misunderstandings — tan callout cards (academic scope) --- */
.wfd-content--academic .wfd-callout--misunderstanding {
	background: #F4EAD1 !important;
	border-left: 4px solid #6F5418 !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-radius: 0 6px 6px 0 !important;
	padding: 1rem 1.25rem !important;
	margin: 0.875rem 0 !important;
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	font-style: normal !important;
	color: var(--wfd-stone-900) !important;
}

.wfd-content--academic .wfd-callout--misunderstanding strong,
.wfd-content--academic .wfd-callout--misunderstanding b {
	color: var(--wfd-stone-900) !important;
	font-weight: 700 !important;
}

.wfd-content--academic .wfd-callout--misunderstanding em,
.wfd-content--academic .wfd-callout--misunderstanding i {
	font-style: italic !important;
	color: var(--wfd-stone-900) !important;
}

.wfd-content--academic .wfd-callout--misunderstanding .wfd-callout__label {
	display: none !important;
}

/* Hide label on every academic callout type (preserved from prior behaviour) */
.wfd-content--academic .wfd-callout__label {
	display: none !important;
}

/* --- Question bank link — solid black with white text + arrow --- */
.wfd-content--academic .wfd-qb-link,
.wfd-player__margin-card .wfd-qb-link {
	background: var(--wfd-black) !important;
	color: #FFFFFF !important;            /* v1.5.11 — white on black btn */
	border: 1px solid var(--wfd-black) !important;
	font-family: var(--wfd-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	padding: 0.85rem 1.4rem !important;
	text-decoration: none !important;
	display: inline-block !important;
	border-radius: 0 !important;
	margin: 1.25rem 0 !important;
	transition: background var(--wfd-duration-fast) var(--wfd-easing) !important;
}

.wfd-content--academic .wfd-qb-link:hover,
.wfd-player__margin-card .wfd-qb-link:hover {
	background: var(--wfd-gold-deep) !important;
	border-color: var(--wfd-gold-deep) !important;
	color: #FFFFFF !important;            /* v1.5.11 - stays white on gold-deep hover */
}

/* ============================================================================
 * v1.5.11 - GLOBAL TEXT-COLOR REGRESSION GUARD (locked 2026-05-17 by Daniel)
 * ----------------------------------------------------------------------------
 * Every `color:` rule anywhere on wfdacademy.com MUST resolve to one of these
 * three values. There are NO exceptions. Backgrounds, borders, button fills,
 * icon shapes, outlines, and shadows are governed by other rules - this guard
 * applies ONLY to the `color:` (text foreground) property.
 *
 *   ALLOWED TEXT COLORS - the only three. Pick the right one for the bg:
 *     #2A251E   var(--wfd-stone-900)   DARK STONE   on LIGHT backgrounds
 *     #FFFFFF   var(--wfd-white)       WHITE        on DARK backgrounds
 *     #000000   (pure black)           BLACK        sparingly - prefer stone-900
 *
 *   NEVER:
 *     - gold text          var(--wfd-gold)        / #C5A572
 *     - deep-gold text     var(--wfd-gold-deep)   / #6F5418
 *     - cream-on-dark      var(--wfd-cream)       / #F8F5EE   (use white)
 *     - muted brown text   var(--wfd-stone-600)   / #73685A
 *     - pale tan text      var(--wfd-stone-300)   / #C8C0AE
 *     - any rgba(248,245,238,*) - that's the old cream-on-dark pattern
 *     - any tinted link/heading/eyebrow color
 *
 *   The semantic aliases in wfd-brand-tokens.css are pre-collapsed:
 *     var(--wfd-ink), var(--wfd-ink-muted), var(--wfd-accent)   -> stone-900
 *     var(--wfd-ink-inverse), var(--wfd-accent-dark)            -> #FFFFFF
 *     var(--wfd-ink-soft), var(--wfd-ink-strong)                -> stone-900
 *     var(--wfd-text-on-dark), var(--wfd-text-on-dark-muted)    -> #FFFFFF
 *     var(--wfd-btn-primary-fg-light)                           -> #FFFFFF
 *     var(--wfd-btn-primary-fg-dark)                            -> stone-900
 *
 * Before adding a new `color:` rule, ask: is the surface light or dark?
 * Use stone-900 or #FFFFFF accordingly. Anything else is a regression.
 * ============================================================================ */


/* ============================================================================
 * v1.5.12 — PREV / NEXT chapter nav cards
 * ----------------------------------------------------------------------------
 * The single-sfwd-lessons.php template emits two <a> cards inside the inline
 * footer (.wfd-player__nav-card with --prev / --next modifiers, each holding
 * a __nav-card-eyebrow span and a __nav-card-title span). v1.5.11 shipped
 * without matching CSS so the cards rendered as bare underlined inline text.
 *
 * Restored chrome:
 *   - 1px stone-100 border on near-white surface, ~18px padding, no radius
 *   - Eyebrow: uppercase IBM Plex Sans, tracked, dark stone
 *   - Title:  bold EB Garamond, dark stone, body size
 *   - Cards live in the existing footer grid (1fr auto 1fr) — prev anchors
 *     left, next anchors right. The center column is the mark-complete row.
 * ============================================================================ */

.wfd-player__nav-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.25rem;
	background: var(--wfd-white);
	border: 1px solid var(--wfd-stone-100);
	border-radius: 0;
	text-decoration: none;
	color: var(--wfd-stone-900);          /* v1.5.12 — dark stone on near-white card */
	min-height: 64px;
	box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04);
	transition: border-color var(--wfd-duration-fast) var(--wfd-easing),
	            background var(--wfd-duration-fast) var(--wfd-easing),
	            box-shadow var(--wfd-duration-fast) var(--wfd-easing);
}

.wfd-player__nav-card:hover {
	border-color: var(--wfd-gold-deep);
	background: var(--wfd-cream, #FAF7F0);
	box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08);
}

.wfd-player__nav-card-eyebrow {
	font-family: var(--wfd-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wfd-stone-900);          /* v1.5.12 — dark stone eyebrow on near-white */
}

.wfd-player__nav-card-title {
	font-family: var(--wfd-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wfd-stone-900);          /* v1.5.12 — dark stone title on near-white */
	line-height: 1.35;
}

/* ============================================================================
 * v1.5.18 — Prev / Next / Mark-Complete grid placement repair
 * ----------------------------------------------------------------------------
 * v1.5.12 set up .wfd-player__inline-footer as a 3-column grid
 * (1fr | auto | 1fr) and pinned the mark-complete row to column 2 via
 * .wfd-player__inline-mark-row { grid-column: 2 / 3 }. The prev / next
 * nav-card anchors were intended to occupy columns 1 and 3 respectively,
 * but the file was truncated mid-rule before the column placements were
 * declared, so the cards fell back to DOM-order auto placement and rendered
 * in the wrong cells. v1.5.18 restores explicit placement, alignment, and
 * a single-column mobile stack at <= 640px.
 * ============================================================================ */

.wfd-player__inline-footer > .wfd-player__nav-card--prev {
	grid-column: 1 / 2;
	justify-self: start;
	text-align: left;
	max-width: 26rem;
}

.wfd-player__inline-footer > .wfd-player__nav-card--next {
	grid-column: 3 / 4;
	justify-self: end;
	text-align: right;
	max-width: 26rem;
}

/* Empty placeholders so the grid still reserves the side cells when one
 * neighbour is missing (first / last lesson). */
.wfd-player__inline-footer > .wfd-player__nav-card--placeholder {
	display: block;
	background: transparent;
	border: none;
	box-shadow: none;
	min-height: 1px;
	padding: 0;
}

.wfd-player__inline-footer > .wfd-player__nav-card--placeholder:first-of-type {
	grid-column: 1 / 2;
}

.wfd-player__inline-footer > .wfd-player__nav-card--placeholder:last-of-type {
	grid-column: 3 / 4;
}

/* Belt-and-braces: make sure the mark-complete row stays centered in col 2
 * even if some upstream rule tries to span it. */
.wfd-player__inline-footer > .wfd-player__inline-mark-row {
	grid-column: 2 / 3;
	justify-self: center;
}

/* Mobile reflow: stack Previous / Mark / Next in a single column at narrow
 * widths. Mark-complete sits between the two cards visually. */
@media (max-width: 640px) {
	.wfd-player__inline-footer {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.wfd-player__inline-footer > .wfd-player__nav-card--prev,
	.wfd-player__inline-footer > .wfd-player__nav-card--next,
	.wfd-player__inline-footer > .wfd-player__inline-mark-row,
	.wfd-player__inline-footer > .wfd-player__nav-card--placeholder {
		grid-column: 1 / -1;
		justify-self: stretch;
		text-align: left;
		max-width: none;
	}

	.wfd-player__inline-footer > .wfd-player__nav-card--prev { order: 1; }
	.wfd-player__inline-footer > .wfd-player__inline-mark-row { order: 2; }
	.wfd-player__inline-footer > .wfd-player__nav-card--next  { order: 3; text-align: right; }
}

/* ============================================================================
 * v1.5.18 — Mark Complete button (gold-deep, white text)
 * ----------------------------------------------------------------------------
 * Defence in depth: also style the raw LearnDash button when it renders
 * outside the .wfd-player__inline-mark wrapper (e.g., when the upstream
 * markup changes). Same visual contract as v1.5.11: gold-deep background,
 * white ink, no border, body font.
 * ============================================================================ */

input.learndash_mark_complete_button,
.learndash_mark_complete_button,
.wfd-player__inline-mark-btn {
	background: var(--wfd-gold-deep) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--wfd-gold-deep) !important;
	padding: 0.75rem 1.75rem !important;
	font-family: var(--wfd-font-body) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background var(--wfd-duration-fast) var(--wfd-easing),
	            border-color var(--wfd-duration-fast) var(--wfd-easing) !important;
}

input.learndash_mark_complete_button:hover,
.learndash_mark_complete_button:hover,
.wfd-player__inline-mark-btn:hover {
	background: var(--wfd-black) !important;
	border-color: var(--wfd-black) !important;
	color: #FFFFFF !important;
}

/* ============================================================================
 * v1.5.19 — Bug C: Common misunderstandings rendered as plain <ul><li>
 * ----------------------------------------------------------------------------
 * Chapter content authored by Wayne uses plain HTML for misunderstandings:
 *   <h2>3.8 Common misunderstandings</h2>
 *   <ul>
 *     <li><strong>"…statement…"</strong> No. …explanation…</li>
 *   </ul>
 * NOT [wfd_callout type="misunderstanding"]. Our v1.5.17 .wfd-callout--
 * misunderstanding rule therefore never matches the live markup. Fix is a
 * the_content filter (added in functions.php) that tags the UL with
 * class="wfd-misunderstandings-list" when the preceding heading text contains
 * "Common misunderstandings"; this CSS then styles each LI as a tan card.
 *
 * The list itself loses its bullet markers and column layout; each LI
 * renders as an independent callout card stacked vertically. Spec mirrors
 * the v1.5.17 callout spec (tan background #F4EAD1, 4px gold-deep #6F5418
 * left border, EB Garamond serif body, dark stone text).
 * ============================================================================ */

.wfd-content--academic ul.wfd-misunderstandings-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 1rem 0 !important;
}

.wfd-content--academic ul.wfd-misunderstandings-list > li {
	background: #F4EAD1 !important;
	border-left: 4px solid #6F5418 !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-radius: 0 6px 6px 0 !important;
	padding: 1rem 1.25rem !important;
	margin: 0 0 0.875rem 0 !important;
	font-family: var(--wfd-font-display) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	font-style: normal !important;
	color: var(--wfd-stone-900) !important;
	display: block !important;
	list-style: none !important;
}

.wfd-content--academic ul.wfd-misunderstandings-list > li::marker,
.wfd-content--academic ul.wfd-misunderstandings-list > li::before {
	display: none !important;
	content: none !important;
}

.wfd-content--academic ul.wfd-misunderstandings-list > li:last-child {
	margin-bottom: 0 !important;
}

.wfd-content--academic ul.wfd-misunderstandings-list > li > strong,
.wfd-content--academic ul.wfd-misunderstandings-list > li > b {
	color: var(--wfd-stone-900) !important;
	font-weight: 700 !important;
}

.wfd-content--academic ul.wfd-misunderstandings-list > li em,
.wfd-content--academic ul.wfd-misunderstandings-list > li i {
	font-style: italic !important;
	color: var(--wfd-stone-900) !important;
}

/* Belt-and-braces — also catch the same markup outside the
 * .wfd-content--academic wrapper, in case the lesson template ever
 * renders content into a different wrapper class. */
ul.wfd-misunderstandings-list {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0;
}

ul.wfd-misunderstandings-list > li {
	background: #F4EAD1;
	border-left: 4px solid #6F5418;
	border-radius: 0 6px 6px 0;
	padding: 1rem 1.25rem;
	margin: 0 0 0.875rem 0;
	font-family: var(--wfd-font-display);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wfd-stone-900);
	display: block;
	list-style: none;
}

ul.wfd-misunderstandings-list > li:last-child { margin-bottom: 0; }

/* ============================================================================
 * Wave A (v2.8.0) — single additive enrol CTA on the free-preview lesson.
 * Additive only; the frozen three-column academic player is otherwise
 * unchanged. Three-color text rule: ink on cream, gold fill on the button.
 * ============================================================================ */
.wfd-player__enrol-cta {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 28px 0 8px;
	padding: 24px 28px;
	background: #F4EAD1;
	border: 1px solid rgba(197, 165, 114, 0.45);
	border-left: 4px solid #6F5418;
	border-radius: 4px;
}
.wfd-player__enrol-eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6F5418;
	margin: 0 0 6px;
}
.wfd-player__enrol-text {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 19px;
	line-height: 1.4;
	color: #2A251E;
	margin: 0;
	max-width: 46ch;
}
.wfd-player__enrol-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	background: #C5A572;
	color: #000;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	border-radius: 4px;
	text-decoration: none;
}
.wfd-player__enrol-btn:hover { background: #6F5418; color: #FFFFFF; text-decoration: none; }
@media (max-width: 640px) {
	.wfd-player__enrol-cta { flex-direction: column; align-items: stretch; text-align: left; }
	.wfd-player__enrol-btn { justify-content: center; }
}

/* ============================================================================
 * WAVE A ROUND 2 (v2.8.1) — Daniel-authorized lesson-page amendments only.
 * L1 top margin, L2 locked-chapter lock icon + popup affordance, L3 final
 * assessment gated the same way. The three-column reading layout is otherwise
 * frozen and untouched.
 * ========================================================================== */

/* L1 — reduce the top margin / first-screen gap above the reading column. */
.wfd-player__column { padding-top: clamp(1rem, 2.2vw, 1.75rem) !important; }
.wfd-player__rail   { padding-top: 1rem; }
.wfd-player__hero   { margin-top: 0; }

/* L2/L3 — locked rows are CLICKABLE (popup), so re-enable pointer events that
 * the base .is-locked rule disabled. The lock affordance replaces the status
 * circle. */
.wfd-player__rail-item.is-locked,
.wfd-player__rail-final.is-locked { pointer-events: auto; cursor: pointer; }
.wfd-player__rail-item[data-wfd-locked] .wfd-player__rail-title-line,
.wfd-player__rail-final.is-locked .wfd-player__rail-title-line { color: rgba(255,255,255,0.62); }

/* Lock glyph in place of the status tick / FA star. */
.wfd-player__rail-item[data-wfd-locked] .wfd-player__rail-tick {
  border: 0 !important; background: transparent !important; border-radius: 0;
}
.wfd-player__rail-item[data-wfd-locked] .wfd-player__rail-tick::before {
  content: ''; display: block; width: 14px; height: 14px; margin-top: 1px;
  background: rgba(255,255,255,0.7);
  -webkit-mask: var(--wfd-lock-mask) center / contain no-repeat;
          mask: var(--wfd-lock-mask) center / contain no-repeat;
}
.wfd-player__rail-final.is-locked .wfd-player__rail-final-icon { font-size: 0; }
.wfd-player__rail-final.is-locked .wfd-player__rail-final-icon::before {
  content: ''; display: block; width: 15px; height: 15px;
  background: rgba(255,255,255,0.7);
  -webkit-mask: var(--wfd-lock-mask) center / contain no-repeat;
          mask: var(--wfd-lock-mask) center / contain no-repeat;
}
.wfd-player__rail { --wfd-lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* --- Enrol-to-unlock modal (shared, lives on <body>) --- */
html.wfd-lock-open { overflow: hidden; }
.wfd-lock-modal[hidden] { display: none; }
.wfd-lock-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.wfd-lock-modal__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.62); }
.wfd-lock-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--wfd-cream, #F8F5EE);
  border: 1px solid rgba(197,165,114,0.5); border-top: 4px solid var(--wfd-gold, #C5A572);
  border-radius: 6px; padding: 36px 32px 32px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.wfd-lock-modal__icon { display: inline-flex; color: var(--wfd-gold-deep, #6F5418); margin-bottom: 12px; }
.wfd-lock-modal__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wfd-gold-deep, #6F5418); margin: 0 0 6px; }
.wfd-lock-modal__title { font-family: 'EB Garamond', Georgia, serif; font-size: 1.7rem; color: var(--wfd-stone-900, #2A251E); margin: 0 0 10px; }
.wfd-lock-modal__text { color: var(--wfd-stone-600, #73685A); font-size: 0.95rem; line-height: 1.6; margin: 0 0 22px; }
.wfd-lock-modal__actions { display: flex; flex-direction: column; gap: 10px; }
.wfd-lock-modal__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 20px; border-radius: 4px; font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
}
.wfd-lock-modal__btn--gold { background: var(--wfd-gold, #C5A572); color: #000; border-color: var(--wfd-gold, #C5A572); }
.wfd-lock-modal__btn--gold:hover { background: var(--wfd-gold-deep, #6F5418); color: #fff; border-color: var(--wfd-gold-deep, #6F5418); }
.wfd-lock-modal__btn--ghost { background: transparent; color: var(--wfd-stone-900, #2A251E); border-color: var(--wfd-stone-300, #C8C0AE); }
.wfd-lock-modal__btn--ghost:hover { border-color: var(--wfd-stone-900, #2A251E); }

/* ============================================================================
 * v2.8.2 (Wave A round 3) — CK1: force brand button text on the lesson lock
 * popup CTA. The popup is appended to <body>, so an inherited link colour
 * (a { color: var(--text-2) } and LearnDash/Kadence link rules) was painting
 * the "Enrol . US$299" CTA blue. Lock the text colour with high specificity.
 * L4: belt-and-braces opaque, full-width sticky lesson header so page content
 * cannot bleed through any sub-pixel seam below the masthead.
 * ============================================================================ */

/* CK1 - gold-fill CTA always renders dark text (white on hover over gold-deep). */
.wfd-lock-modal a.wfd-lock-modal__btn,
.wfd-lock-modal a.wfd-lock-modal__btn:link,
.wfd-lock-modal a.wfd-lock-modal__btn:visited,
.wfd-lock-modal a.wfd-lock-modal__btn--gold,
.wfd-lock-modal a.wfd-lock-modal__btn--gold:link,
.wfd-lock-modal a.wfd-lock-modal__btn--gold:visited {
	color: #000000 !important;
	text-decoration: none !important;
}
.wfd-lock-modal a.wfd-lock-modal__btn--gold:hover,
.wfd-lock-modal a.wfd-lock-modal__btn--gold:focus {
	color: #FFFFFF !important;
}
.wfd-lock-modal a.wfd-lock-modal__btn--ghost,
.wfd-lock-modal a.wfd-lock-modal__btn--ghost:link,
.wfd-lock-modal a.wfd-lock-modal__btn--ghost:visited,
.wfd-lock-modal button.wfd-lock-modal__btn--ghost {
	color: var(--wfd-stone-900, #2A251E) !important;
	text-decoration: none !important;
}

/* L4 - the slim lesson header is fully opaque brand black and full-bleed.
 * Pull it up 1px and pad the top to swallow any transparent seam between the
 * fixed masthead bottom edge and the fixed slim header top edge. The frozen
 * 3-column reading layout below is untouched. */
body.wfd-player-active .wfd-player__slim-header {
	background-color: var(--wfd-black, #0A0A0A) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	margin-top: -2px !important;
	padding-top: 2px !important;
	border-top: 2px solid var(--wfd-black, #0A0A0A) !important;
}