/* ==========================================================================
   PAA Lesson Surface — layout + visual pass for LearnDash lesson pages.
   Session fe8de6db. STAGING ONLY at time of writing.

   EVERY rule is scoped to body.single-sfwd-lessons. The classes touched here
   (.bb-lms-header, .learndash_content_wrap, .ld-course-navigation) are shared
   with courses, topics, quizzes and profiles, so unscoped edits would move
   far more than lesson pages.

   Baseline measured on live at 1920px before any change:
     .bb-lms-header        max-width 1180  -> left 185
     .learndash_content_wrap max-width 960 -> left 295   = 110px rail stagger
     presto-player         960x540, 50% of viewport
     325px dead column between content (1255) and sidebar (1580)
     637px of empty page below Mark Complete (38% of page height)
     h1 32px at EVERY breakpoint, 390 -> 1920
     sidebar links 12px / 27px line-height (2.25 ratio)
   ========================================================================== */

body.single-sfwd-lessons {
	/* Warm neutrals. Baseline was pure #000 + pure #fff under a gold-and-leather
	   brand, which is the main reason the surface reads flat. */
	--paa-ls-surface:  #0b0907;
	--paa-ls-raised:   #141009;
	--paa-ls-line:     #2a2119;
	--paa-ls-text:     #f2ece2;
	--paa-ls-muted:    #a89f90;   /* A1-verified */
	--paa-ls-gold:     #d8bd72;   /* A1-verified */
	/* --paa-ls-rail was removed: the rail is now set by the LearnDash
	   `focus_mode_content_width` setting (see section 2), so a local width token
	   had no consumer left and only invited drift. */
	--paa-ls-gap:      clamp(1.25rem, 0.8rem + 1.4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   0. CHROME: site header + footer off, unified topbar on.

   `.header` and `.footer` are CHILD-theme components (components/header.php,
   components/footer.php), not parent-theme markup, so hiding them here is not
   exposed to a BuddyBoss update. Rendered by paa_surface_topbar() on wp_body_open.
   Identical block in paa-course-surface.css so the two templates cannot drift.

   The theme's Maximize control lives in the header being hidden; paa_surface_topbar()
   MOVES that existing element into .paa-tb-actions rather than reimplementing it, so
   the control keeps its own handler and is not lost.
   -------------------------------------------------------------------------- */
body.single-sfwd-lessons > #page.site > .header,
body.single-sfwd-lessons > #page.site > .footer {
	display: none !important;
}

body.single-sfwd-lessons .paa-surface-topbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.1rem 20px .7rem;
	border-bottom: 1px solid var(--paa-ls-line);
}
body.single-sfwd-lessons .paa-tb-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	font-size: .82rem;
	color: var(--paa-ls-muted);
}
body.single-sfwd-lessons .paa-tb-crumbs a {
	color: var(--paa-ls-text);
	text-decoration: none;
}
body.single-sfwd-lessons .paa-tb-crumbs a:hover { color: var(--paa-ls-gold); }
body.single-sfwd-lessons .paa-tb-logo { display: inline-flex; margin-right: .25rem; }
body.single-sfwd-lessons .paa-tb-logo img { width: 28px; height: 28px; object-fit: contain; }
body.single-sfwd-lessons .paa-tb-sep { color: var(--paa-ls-gold); opacity: .6; }
body.single-sfwd-lessons .paa-tb-now { color: var(--paa-ls-muted); }
body.single-sfwd-lessons .paa-tb-actions { margin-left: auto; }
body.single-sfwd-lessons .paa-tb-actions .header-maximize-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
	color: var(--paa-ls-muted);
}
body.single-sfwd-lessons .paa-tb-actions .header-maximize-link:hover { color: var(--paa-ls-gold); }

/* LearnDash renders its own crumb trail inside .ld-breadcrumbs, which duplicates
   the topbar above. Hide ONLY the segment list — the same bar also carries the
   lesson status chip and the step counter, which stay. */
body.single-sfwd-lessons .ld-breadcrumbs .ld-breadcrumbs-segments {
	display: none;
}


/* ==========================================================================
   THE APPROVED v4 LESSON VIEW
   Ported from mockup-forge-v4.html. This is a LAYOUT, not a skin: the stock
   BuddyBoss lesson body is hidden and paa-lesson-view.php renders these regions
   from live LearnDash / GamiPress data.

   Tokens, spacing and behaviour follow the mockup, including its two recorded
   traps: clamp() math needs whitespace around the operator, and the video is
   height-CLAMPED (never object-fit:cover, which crops).
   ========================================================================== */

/* Hide the stock body only when the replacement actually rendered. The :has()
   twin avoids a flash of the old layout before the class lands. */
body.paa-lv-on.single-sfwd-lessons #content,
body.single-sfwd-lessons:has(.paa-lv) #content {
	display: none !important;
}

body.single-sfwd-lessons .paa-lv {
	--void:#08070a; --black:#0e0c0b; --pitch:#131010; --raise:#191512; --line:#2b2118;
	--brass:#d8bd72; --brass-dim:#8d7c4c; --brass-glow:#f0dda0;
	--parch:#f2ece2; --ash:#a89f90; --ash-dim:#8a8175; --verd:#6fa279; --ember:#d2643a;
	--display:'Cinzel',"Trajan Pro",Georgia,serif;
	--stage:min(1600px, 100% - 3rem);
	--rail:320px;
	--ease:cubic-bezier(.22,1,.36,1);
	color: var(--parch);
}
/* THE BLACK BAR. Painting the gradient on <body> alone is not enough here: <html> is
   rgb(0,0,0) and #page.site is rgb(0,0,0) and only as tall as the viewport, so below
   #page the page fell back to those blacks and the gradient stopped. The base colour
   goes on <html> so it covers the full scroll height, the gradient goes on body, and
   #page is made transparent so it stops painting over both. */
html:has(body.single-sfwd-lessons.paa-lv-on) {
	background-color: #08070a;
}
body.single-sfwd-lessons.paa-lv-on {
	background:
		radial-gradient(1400px 700px at 50% -12%, #191310 0, transparent 62%),
		radial-gradient(900px 500px at 88% 108%, #15100d 0, transparent 55%),
		#08070a;
	background-attachment: fixed, fixed, scroll;
}
body.single-sfwd-lessons.paa-lv-on > #page.site {
	background: transparent !important;
	min-height: 0;
}
body.single-sfwd-lessons .paa-lv a { color: inherit; text-decoration: none; }
body.single-sfwd-lessons .paa-lv :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
body.single-sfwd-lessons .paa-lv-kicker {
	font-family: var(--display); font-size: .64rem; letter-spacing: .22em;
	text-transform: uppercase; color: var(--brass-dim);
}

/* Head */
body.single-sfwd-lessons .paa-lv-head { width: var(--stage); margin: 0 auto; padding: .25rem 0 1.15rem; }
body.single-sfwd-lessons .paa-lv-head-row {
	display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .3rem;
}
body.single-sfwd-lessons .paa-lv-no {
	font-family: var(--display); font-size: .72rem; letter-spacing: .24em; color: var(--brass-dim);
	text-transform: uppercase;
}
body.single-sfwd-lessons .paa-lv-state {
	font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ember); border: 1px solid rgb(184 69 31 / .35); padding: .1rem .45rem;
}
body.single-sfwd-lessons .paa-lv-state.done { color: var(--verd); border-color: rgb(95 143 104 / .45); }
body.single-sfwd-lessons .paa-lv-date { font-size: .74rem; color: var(--ash-dim); }
/* clamp() math needs whitespace around the operator; a spaceless form silently drops. */
body.single-sfwd-lessons .paa-lv-title {
	font-family: var(--display); font-weight: 600;
	font-size: clamp(1.6rem, 1rem + 1.5vw, 2.65rem);
	line-height: 1.1; margin: 0; color: #fbf6ec; text-wrap: balance;
}

/* Grid */
body.single-sfwd-lessons .paa-lv-wrap {
	width: var(--stage); margin: 0 auto; display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rail);
	gap: 2.5rem; align-items: start; padding-bottom: 4rem;
}
@media (max-width: 1160px) {
	body.single-sfwd-lessons .paa-lv-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* Plate + screen */
body.single-sfwd-lessons .paa-lv-plate {
	position: relative;
	box-shadow: 0 0 0 1px var(--line), 0 2px 0 rgb(216 189 114 / .09), 0 30px 80px -22px rgb(0 0 0 / .95);
}
body.single-sfwd-lessons .paa-lv-plate::before,
body.single-sfwd-lessons .paa-lv-plate::after {
	content: ""; position: absolute; width: 13px; height: 13px;
	border: 1px solid var(--brass-dim); opacity: .45; z-index: 3;
}
body.single-sfwd-lessons .paa-lv-plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
body.single-sfwd-lessons .paa-lv-plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* Height-CLAMP, not crop: sizing a 16:9 video by width alone pushes it and its
   controls below the fold once chrome is added. 280px = chrome above plus the
   station bar below, so video and controls both land above the fold. */
body.single-sfwd-lessons .paa-lv-screen {
	position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
	max-height: calc(100vh - 280px); margin-inline: auto;
}
body.single-sfwd-lessons .paa-lv-plate.is-empty .paa-lv-screen { display: none; }
body.single-sfwd-lessons .paa-lv-screen > *,
body.single-sfwd-lessons .paa-lv-screen presto-player,
body.single-sfwd-lessons .paa-lv-screen iframe,
body.single-sfwd-lessons .paa-lv-screen video,
body.single-sfwd-lessons .paa-lv-screen img {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; display: block;
}
body.single-sfwd-lessons .paa-lv-screen img { object-fit: contain; }

/* Station */
body.single-sfwd-lessons .paa-lv-station {
	display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
	padding: 1rem 1.2rem; background: var(--black);
	border: 1px solid var(--line); border-top: 0;
}
body.single-sfwd-lessons .paa-lv-spacer { flex: 1; }
/* The LearnDash Mark Complete form, restyled in place. The stock primary action
   was 12.6px, too small for a workshop screen. */
body.single-sfwd-lessons .paa-lv-mark form,
body.single-sfwd-lessons .paa-lv-mark .sfwd-mark-complete { margin: 0; }
body.single-sfwd-lessons .paa-lv-mark input[type=submit],
body.single-sfwd-lessons .paa-lv-mark #learndash_mark_complete_button,
body.single-sfwd-lessons .paa-lv-mark .learndash_mark_complete_button {
	font-family: var(--display); font-size: .95rem; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 700;
	color: #20180d !important;
	background: linear-gradient(180deg, var(--brass-glow), var(--brass) 45%, #b99f57) !important;
	border: 0; border-radius: 0; padding: .78rem 1.55rem; cursor: pointer; margin: 0;
	box-shadow: 0 1px 0 rgb(255 255 255 / .28) inset, 0 -1px 0 rgb(0 0 0 / .3) inset,
	            0 6px 18px -6px rgb(216 189 114 / .38);
	transition: transform .35s var(--ease), filter .35s var(--ease);
	animation: none !important;
}
body.single-sfwd-lessons .paa-lv-mark input[type=submit]:hover {
	transform: translateY(-1px); filter: brightness(1.06);
}
body.single-sfwd-lessons .paa-lv-earn {
	display: flex; align-items: baseline; gap: .4rem; font-size: .8rem; color: var(--ash);
}
body.single-sfwd-lessons .paa-lv-earn b {
	font-family: var(--display); font-size: 1rem; color: var(--brass); font-variant-numeric: tabular-nums;
}
body.single-sfwd-lessons .paa-lv-pager { display: flex; align-items: center; gap: .5rem; }
body.single-sfwd-lessons .paa-lv-step {
	display: inline-grid; grid-auto-flow: column; place-items: center; height: 38px;
	padding: 0 .8rem; gap: .5rem; border: 1px solid var(--line);
	color: var(--ash) !important; background: var(--pitch); font-size: .76rem;
	transition: all .3s var(--ease);
}
body.single-sfwd-lessons .paa-lv-step:hover { border-color: var(--brass-dim); color: var(--brass) !important; }

/* Reading copy */
body.single-sfwd-lessons .paa-lv-read { margin: 2.4rem 0 0; max-width: 70ch; }
body.single-sfwd-lessons .paa-lv-read p { margin: 0 0 1.05rem; color: #ddd5c9; font-size: 1.02rem; line-height: 1.65; }
body.single-sfwd-lessons .paa-lv-mark-row { display: flex; align-items: center; gap: .85rem; margin: 2.5rem 0 1.05rem; }
body.single-sfwd-lessons .paa-lv-skills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
body.single-sfwd-lessons .paa-lv-skills li {
	font-size: .79rem; color: #e7dfd2; padding: .36rem .78rem;
	border: 1px solid rgb(216 189 114 / .24); background: rgb(216 189 114 / .045);
}

/* Rail */
body.single-sfwd-lessons .paa-lv-rail { position: sticky; top: 1.25rem; display: grid; gap: 1.25rem; }
body.single-sfwd-lessons .paa-lv-panel {
	border: 1px solid var(--line); background: linear-gradient(180deg, var(--black), var(--void));
}
body.single-sfwd-lessons .paa-lv-panel-head { padding: 1rem 1.1rem .8rem; }
body.single-sfwd-lessons .paa-lv-panel-head h2 {
	font-family: var(--display); font-size: 1.06rem; margin: 0; color: #f6efe3;
}
body.single-sfwd-lessons .paa-lv-back {
	display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem;
	color: var(--ash-dim) !important; padding: 0 1.1rem .55rem;
}
body.single-sfwd-lessons .paa-lv-back:hover { color: var(--brass) !important; }
body.single-sfwd-lessons .paa-lv-prog { padding: 0 1.1rem .9rem; }
body.single-sfwd-lessons .paa-lv-prog-top {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: .72rem; color: var(--ash-dim);
}
body.single-sfwd-lessons .paa-lv-prog-top b { color: var(--brass); font-family: var(--display); font-size: .86rem; }
body.single-sfwd-lessons .paa-lv-prog-track { margin: .45rem 0 .35rem; height: 3px; background: #1d1814; overflow: hidden; }
body.single-sfwd-lessons .paa-lv-prog-fill {
	display: block; height: 100%; background: linear-gradient(90deg, var(--brass-dim), var(--brass-glow));
	transition: width .55s var(--ease);
}
body.single-sfwd-lessons .paa-lv-prog-last { font-size: .69rem; color: var(--ash-dim); opacity: .8; }

/* A 20-lesson course makes the rail taller than the viewport, and sticky goes inert
   once that happens, dropping standing and participants below the fold. Cap and
   scroll the list instead. 560px reserves the panel head, progress, standing, people. */
body.single-sfwd-lessons .paa-lv-track {
	list-style: none; margin: 0; padding: .3rem 0 .55rem;
	max-height: calc(100vh - 560px); overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.single-sfwd-lessons .paa-lv-ti { position: relative; }
body.single-sfwd-lessons .paa-lv-ti > a {
	display: flex; gap: .8rem; align-items: flex-start; width: 100%;
	padding: .6rem 1.1rem; transition: background .3s var(--ease);
}
body.single-sfwd-lessons .paa-lv-ti > a:hover { background: rgb(216 189 114 / .045); }
body.single-sfwd-lessons .paa-lv-node {
	position: relative; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .26rem;
	border-radius: 50%; border: 1px solid var(--line); background: var(--pitch);
	transition: all .3s var(--ease);
}
body.single-sfwd-lessons .paa-lv-ti:not(:last-child) .paa-lv-node::after {
	content: ""; position: absolute; left: 50%; top: 14px; translate: -50% 0;
	width: 1px; height: calc(100% + 1.2rem); background: var(--line);
}
body.single-sfwd-lessons .paa-lv-ti.done .paa-lv-node { border-color: var(--verd); background: var(--verd); }
body.single-sfwd-lessons .paa-lv-ti.here .paa-lv-node {
	border-color: var(--brass); background: var(--black); box-shadow: 0 0 0 3px rgb(216 189 114 / .16);
}
body.single-sfwd-lessons .paa-lv-ti.here .paa-lv-node::before {
	content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px;
	border-radius: 50%; background: var(--brass);
}
body.single-sfwd-lessons .paa-lv-ti-t { font-size: .9rem; line-height: 1.4; color: var(--ash); }
body.single-sfwd-lessons .paa-lv-ti.here .paa-lv-ti-t { color: #f7f1e6; font-weight: 600; }
body.single-sfwd-lessons .paa-lv-ti.done .paa-lv-ti-t { color: var(--ash-dim); }

/* Standing */
body.single-sfwd-lessons .paa-lv-standing {
	padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--line); background: rgb(0 0 0 / .3);
}
body.single-sfwd-lessons .paa-lv-st-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-top: .45rem;
}
body.single-sfwd-lessons .paa-lv-rank { font-family: var(--display); font-size: 1rem; color: var(--brass); }
body.single-sfwd-lessons .paa-lv-rank-xp { font-size: .74rem; color: var(--ash-dim); font-variant-numeric: tabular-nums; }
body.single-sfwd-lessons .paa-lv-st-track { margin: .55rem 0 .4rem; height: 3px; background: #1b1613; overflow: hidden; }
body.single-sfwd-lessons .paa-lv-st-fill {
	display: block; height: 100%; background: linear-gradient(90deg, var(--brass-dim), var(--brass-glow));
	transition: width .55s var(--ease);
}
body.single-sfwd-lessons .paa-lv-st-next { font-size: .72rem; color: var(--ash-dim); }
body.single-sfwd-lessons .paa-lv-st-next b { color: var(--ash); font-weight: 600; }

/* People. Presence only: not links, no names, not focusable. */
body.single-sfwd-lessons .paa-lv-people { padding: 1rem 1.1rem 1.15rem; }
body.single-sfwd-lessons .paa-lv-people-line { margin: .5rem 0 .7rem; font-size: .82rem; color: var(--ash); line-height: 1.45; }
body.single-sfwd-lessons .paa-lv-people-line b {
	font-family: var(--display); color: var(--brass); font-size: 1rem; font-variant-numeric: tabular-nums;
}
body.single-sfwd-lessons .paa-lv-faces { display: flex; flex-wrap: wrap; gap: .35rem; }
body.single-sfwd-lessons .paa-lv-face {
	width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
	border: 1px solid var(--line); background: var(--raise); flex: 0 0 auto;
}
body.single-sfwd-lessons .paa-lv-face img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Maximize */
body.single-sfwd-lessons.paa-lv-max .paa-lv-rail { display: none; }
body.single-sfwd-lessons.paa-lv-max .paa-lv { --stage: min(1860px, 100% - 2rem); }
body.single-sfwd-lessons.paa-lv-max .paa-lv-wrap { grid-template-columns: minmax(0, 1fr); }
body.single-sfwd-lessons.paa-lv-max .paa-lv-read { max-width: 78ch; }

body.single-sfwd-lessons .paa-surface-topbar { max-width: none; width: min(1600px, 100% - 3rem); }

@media (prefers-reduced-motion: reduce) {
	body.single-sfwd-lessons .paa-lv * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   COMPLETION STATES + INSTANT FEEDBACK
   The station reports two different things and must not confuse them:
     before  "+150 XP on completion"   a promise
     after   "150 XP awarded"          a receipt
   The awarded state is also what the AJAX path switches to without a reload.
   -------------------------------------------------------------------------- */
body.single-sfwd-lessons .paa-lv-earn.is-awarded { color: var(--verd); }
body.single-sfwd-lessons .paa-lv-earn.is-awarded b { color: var(--verd); }

/* Completed action reads as a finished state, not a button begging to be pressed. */
body.single-sfwd-lessons .paa-lv-done {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--display); font-size: .95rem; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 700;
	color: var(--verd); background: none; border: 1px solid var(--verd);
	padding: .78rem 1.55rem; cursor: default;
}
body.single-sfwd-lessons .paa-lv-done::before { content: "\2713"; font-size: 1rem; line-height: 1; }

/* Mid-flight: the click is acknowledged before the server answers. */
body.single-sfwd-lessons .paa-lv-mark.is-busy input[type=submit] {
	opacity: .6; pointer-events: none; filter: saturate(.6);
}

/* Both bars animate to their new width rather than jumping, so the reward is
   visible as movement. Honoured only when the user allows motion. */
body.single-sfwd-lessons .paa-lv-prog-fill,
body.single-sfwd-lessons .paa-lv-st-fill { transition: width .9s var(--ease); }

body.single-sfwd-lessons .paa-lv-ti.just-done .paa-lv-node {
	animation: paaLvNodePop .7s var(--ease) 1;
}
@keyframes paaLvNodePop {
	0%   { box-shadow: 0 0 0 0 rgb(111 162 121 / .55); }
	60%  { box-shadow: 0 0 0 8px rgb(111 162 121 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(111 162 121 / 0); }
}

/* The XP figure counts up; give it a moment of emphasis when it lands. */
body.single-sfwd-lessons .paa-lv-rank-xp.is-bumped,
body.single-sfwd-lessons .paa-lv-earn.is-awarded b { animation: paaLvBump .6s var(--ease) 1; }
@keyframes paaLvBump {
	0%   { transform: none; }
	40%  { transform: translateY(-2px) scale(1.06); }
	100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	body.single-sfwd-lessons .paa-lv-prog-fill,
	body.single-sfwd-lessons .paa-lv-st-fill { transition: none; }
	body.single-sfwd-lessons .paa-lv-ti.just-done .paa-lv-node,
	body.single-sfwd-lessons .paa-lv-rank-xp.is-bumped,
	body.single-sfwd-lessons .paa-lv-earn.is-awarded b { animation: none; }
}

/* A lesson finished in this session is BOTH the current step and a completed one.
   Completion is the more useful signal, so the done ring wins over the here ring
   while the brass centre dot stays to say "you are here". */
body.single-sfwd-lessons .paa-lv-ti.here.done .paa-lv-node {
	border-color: var(--verd);
	background: var(--verd);
}
body.single-sfwd-lessons .paa-lv-ti.here.done .paa-lv-node::before { background: #0f1a12; }

/* --------------------------------------------------------------------------
   SHADOW FALLOFF
   The mockup used a single `0 30px 80px -22px rgb(0 0 0 / .95)`. On a near-black
   page a single near-opaque blur has no visible falloff: it reads as a flat grey
   rectangle around the plate rather than depth. Replaced with a three-stop stack
   (tight, mid, wide) at decreasing opacity, which is what actually produces a
   gradient edge on a dark surface.
   -------------------------------------------------------------------------- */
body.single-sfwd-lessons .paa-lv-plate {
	box-shadow:
		0 0 0 1px var(--line),
		0 2px 0 rgb(216 189 114 / .09),
		0 4px 10px -4px rgb(0 0 0 / .55),
		0 14px 34px -14px rgb(0 0 0 / .45),
		0 38px 90px -30px rgb(0 0 0 / .32);
}

/* --------------------------------------------------------------------------
   HOVER COLOUR
   Light gold is the canonical hover. The theme sets several link hovers to the
   brand red, which leaked into the view wherever a rule did not override it, so
   the same page had two different hover languages. One rule, all of them.
   -------------------------------------------------------------------------- */
body.single-sfwd-lessons .paa-lv a:hover,
body.single-sfwd-lessons .paa-lv a:focus-visible,
body.single-sfwd-lessons .paa-lv-ti > a:hover .paa-lv-ti-t,
body.single-sfwd-lessons .paa-lv-back:hover,
body.single-sfwd-lessons .paa-lv-step:hover,
body.single-sfwd-lessons .paa-surface-topbar a:hover,
body.single-sfwd-lessons .paa-tb-crumbs a:hover {
	color: var(--brass-glow, #f0dda0) !important;
}

/* --------------------------------------------------------------------------
   WORKSHOP NOTES
   Description, materials/tools and the written guide, below the video. Each row
   renders only when its source has a value, so a lesson with none of them shows
   no block at all rather than an empty shell.
   -------------------------------------------------------------------------- */
body.single-sfwd-lessons .paa-lv-notes {
	margin: 1.6rem 0 0;
	border: 1px solid var(--line);
	background: linear-gradient(180deg, var(--black), var(--void));
}
body.single-sfwd-lessons .paa-lv-note {
	padding: 1.1rem 1.35rem;
	border-top: 1px solid var(--line);
}
body.single-sfwd-lessons .paa-lv-note:first-child { border-top: 0; }
body.single-sfwd-lessons .paa-lv-note > .paa-lv-kicker { display: block; margin-bottom: .5rem; }
body.single-sfwd-lessons .paa-lv-note p {
	margin: 0 0 .8rem; color: #ddd5c9; font-size: .97rem; line-height: 1.65; max-width: 72ch;
}
body.single-sfwd-lessons .paa-lv-note p:last-child { margin-bottom: 0; }
body.single-sfwd-lessons .paa-lv-note ul,
body.single-sfwd-lessons .paa-lv-note ol { margin: 0; padding-left: 1.15rem; color: #ddd5c9; }
body.single-sfwd-lessons .paa-lv-note li { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.55; }

body.single-sfwd-lessons .paa-lv-guide {
	display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem;
	color: var(--brass) !important;
	border-bottom: 1px solid rgb(216 189 114 / .35);
	padding-bottom: .15rem;
	transition: color .3s var(--ease), border-color .3s var(--ease);
}
body.single-sfwd-lessons .paa-lv-guide:hover {
	color: var(--brass-glow) !important; border-bottom-color: var(--brass);
}