/* ============================================================================
   LearnPress page chrome — Nexus dark overrides
   Loaded only on LearnPress views (after deep-space-lab.css). Targets the
   single-course / profile / checkout *template* surfaces that LearnPress (and
   its block templates) render with light backgrounds, which would otherwise
   hide our light text. The lesson body itself (#grit-lesson-wrapper) styles
   itself and wins via higher specificity — these rules don't touch it.
   ========================================================================== */

/* ── Light container surfaces → dark ──────────────────────────────────────── */
.single-lp_course .wp-block-group.has-background,
.learnpress-page  .wp-block-group.has-background {
	background-color: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
.course-section-header {
	background-color: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
}
.content-widget-social-share,
.wp-block-learnpress-course-image {
	background-color: var(--vr-surface, #0F172A) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
}
/* Dim LearnPress's light "no image" placeholder so it blends into the dark card
   instead of showing as a bright rectangle. */
.wp-block-learnpress-course-image img[src*="no-image"],
.course-image img[src*="no-image"],
img[src*="learnpress/assets/images/no-image"] {
	opacity: 0.12 !important;
	filter: grayscale(1) !important;
}

/* No-class inline light backgrounds inside the course/profile content
   (overview & description cards). Match background declarations only. */
.single-lp_course [style*="background-color: #f8fafc"],
.single-lp_course [style*="background-color:#f8fafc"],
.single-lp_course [style*="background: #f8fafc"],
.single-lp_course [style*="background-color: #ffffff"],
.single-lp_course [style*="background-color:#ffffff"],
.single-lp_course [style*="background: #ffffff"],
.single-lp_course [style*="background-color: #fff;"],
.single-lp_course [style*="background-color:#fff;"],
.single-lp_course [style*="background: #fff;"],
.single-lp_course [style*="background:#fff;"],
.single-lp_course [style*="background-color: #f1f2f8"],
.single-lp_course [style*="background-color:#f1f2f8"],
.single-lp_course [style*="background-color: #f3f4f6"],
.single-lp_course [style*="background:#f3f4f6"] {
	background-color: var(--vr-surface, #0F172A) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}

/* ── Readable text across the course/profile chrome ───────────────────────── */
.single-lp_course :where(h1, h2, h3, h4, h5, h6) { color: var(--vr-contrast, #F8FAFC) !important; }
.single-lp_course :where(p, li, span, dd, dt, strong, em, label, td, figcaption) {
	color: var(--vr-body, #CBD5E1) !important;
}
.single-lp_course a:not(.lp-button):not(.button):not(.wp-block-button__link):not([class*="button"]) {
	color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Curriculum list ──────────────────────────────────────────────────────── */
.course-curriculum .course-item,
.lp-course-curriculum .course-item {
	background-color: transparent !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.10)) !important;
}
.course-curriculum .course-item:hover { background-color: rgba(0,242,255,0.06) !important; }
.course-curriculum .course-item a,
.course-item .course-item__title,
.course-item .item-name { color: var(--vr-body, #CBD5E1) !important; }
.course-curriculum .course-item.has-status.completed .course-item__title { color: var(--vr-emerald, #34D399) !important; }

/* Section meta / counts */
.course-curriculum .section-desc,
.course-curriculum .section-meta,
.course-item .course-item-meta { color: var(--vr-muted, #94A3B8) !important; }

/* ── Enroll / meta sidebar icons → cyan (were LP default gold) ────────────── */
.course-summary-sidebar i,
.lp-course-buttons i,
.course-meta i,
.wp-block-learnpress-course-info i { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Profile page ─────────────────────────────────────────────────────────── */
body.learnpress-profile,
.lp-profile-content,
#profile-content,
.lp-profile-nav {
	background-color: transparent !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li a { color: var(--vr-body, #CBD5E1) !important; }
body.learnpress-profile .lp-profile-nav-tabs li.active a,
body.learnpress-profile .lp-profile-nav-tabs li a:hover { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Lesson popup layout fix (scroll + header overlap + footer column) ───────
   The course-item popup left the page locked (body overflow hidden) with no
   working scroll container, a fixed header overlapping the title, and the
   prev/next footer laid out as a tall flex column beside the content (which
   collapsed the content when the sidebar opened). Restore a sane model:
   window scrolls; header sticks in-flow; footer wraps to its own full row. */
body.viewing-course-item,
body.lp-body.viewing-course-item {
	overflow-y: auto !important;
	overflow-x: hidden !important;   /* kill the stray horizontal scrollbar */
	height: auto !important;
}
/* Immersive reader: hide the site header inside the lesson popup so the LP
   popup-header (close ✕ + sidebar toggle) is the only top bar. */
body.viewing-course-item > header,
body.viewing-course-item header.wp-block-template-part,
body.viewing-course-item .wp-site-blocks > header {
	display: none !important;
}
/* popup-course as BLOCK — the flex-row/flex-wrap layout kept collapsing the
   content and sidebar to width 0. Block flow + a FIXED left sidebar + a content
   margin is robust and gives a true side-by-side reader. */
#popup-course {
	display: block !important;
	position: relative !important;
	min-height: 0 !important;
}
/* Header: full-width sticky bar at the top. */
#popup-header {
	position: sticky !important;
	top: 32px !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	z-index: 50 !important;
}
body:not(.admin-bar) #popup-header { top: 0 !important; }
@media screen and (max-width: 782px) { #popup-header { top: 46px !important; } }
/* Sidebar: fixed left panel below the admin bar + sticky header. Slides out
   when collapsed (.vr-sb-collapsed set by lesson.js via #sidebar-toggle). */
#popup-sidebar {
	position: fixed !important;
	left: 0 !important;
	top: 106px !important;            /* admin bar (32) + header (~74) */
	bottom: 0 !important;
	width: 320px !important;
	max-width: 85vw !important;
	overflow-y: auto !important;
	z-index: 45 !important;
	background: var(--vr-base, #020617) !important;
	border-right: 1px solid var(--vr-border, rgba(0,242,255,0.14)) !important;
	transition: transform .3s ease !important;
}
body:not(.admin-bar) #popup-sidebar { top: 74px !important; }
/* Override LP's stuck `body.lp-sidebar-toggle__close` rules (which slide the
   sidebar off-screen + zero the content margin) — these (2,1,0) beat LP's (1,1,0). */
body #popup-course:not(.vr-sb-collapsed) #popup-sidebar { transform: none !important; }
body #popup-course.vr-sb-collapsed #popup-sidebar { transform: translateX(-100%) !important; }
#popup-content,
#popup-footer {
	width: auto !important;
	float: none !important;
	transition: margin-left .3s ease, max-width .3s ease !important;
	box-sizing: border-box !important;
}
/* Sidebar open: shift content right AND cap its width so nothing bleeds past the
   viewport edge. overflow-x:hidden clips any block that still calculates at 100vw. */
body #popup-course:not(.vr-sb-collapsed) #popup-content,
body #popup-course:not(.vr-sb-collapsed) #popup-footer {
	margin-left: 320px !important;
	max-width: calc(100vw - 320px) !important;
	overflow-x: hidden !important;
}
body #popup-course.vr-sb-collapsed #popup-content,
body #popup-course.vr-sb-collapsed #popup-footer {
	margin-left: 0 !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
}
#popup-content {
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
}
/* Ensure alignwide/alignfull blocks inside the lesson content area don't escape
   the clipped container — use 100% width rather than 100vw. */
#popup-content .alignfull,
#popup-content .alignwide,
#popup-content .wp-block-group.alignfull,
#popup-content .wp-block-group.alignwide {
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 782px) {
	#popup-sidebar { z-index: 55 !important; }
	#popup-content, #popup-footer {
		margin-left: 0 !important;
		max-width: 100vw !important;
	}
}
/* ── The sidebar toggle = an obvious left-edge handle ─────────────────────────
   The previous design (38×46 dark-surface tile, low-contrast border, faint ◀)
   was too easy to miss inside the popup header — students struggled to find
   where to open/close the curriculum. This version is the visual focal point:
   wider + taller, solid cyan brand background (high contrast on the dark
   header), dark icon, an Orbitron "MENU" caption, soft glow, and a 3-pulse
   attention animation only while the panel is COLLAPSED. */
#sidebar-toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 50px !important;
	height: 60px !important;
	margin: 0 !important;
	cursor: pointer !important;
	background: var(--vr-cyan, #00F2FF) !important;
	border: none !important;
	border-radius: 0 12px 12px 0 !important;
	box-shadow: 0 4px 14px rgba(0,242,255,0.35), 0 0 0 1px rgba(0,242,255,0.5) inset !important;
	position: relative !important;
	z-index: 60 !important;
	color: var(--vr-void, #020617) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* Icon: chevron ◀ when sidebar is OPEN (= "collapse" affordance) */
#sidebar-toggle::before {
	content: "\25C0";
	position: absolute; left: 0; right: 0; top: 9px;
	text-align: center;
	color: var(--vr-void, #020617) !important;
	font-size: 1.35rem !important;
	line-height: 1 !important;
	font-weight: 900 !important;
}
/* When sidebar is COLLAPSED switch to a hamburger ≡ (universal "open menu") */
#popup-course.vr-sb-collapsed #sidebar-toggle::before { content: "\2630" !important; font-size: 1.5rem !important; }
/* "MENU" caption beneath the icon — Orbitron for brand fit */
#sidebar-toggle::after {
	content: "MENU";
	position: absolute; left: 0; right: 0; bottom: 7px;
	text-align: center;
	color: var(--vr-void, #020617) !important;
	font-family: 'Orbitron', system-ui, sans-serif !important;
	font-size: 0.6rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
}
#sidebar-toggle:hover {
	background: #66F5FF !important;
	transform: translateX(2px) !important;
	box-shadow: 0 6px 20px rgba(0,242,255,0.55), 0 0 0 1px rgba(0,242,255,0.6) inset !important;
}
#sidebar-toggle:focus-visible {
	outline: 3px solid var(--vr-violet, #A78BFA) !important;
	outline-offset: 3px !important;
}
@keyframes sls-sb-toggle-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0,242,255,0.35), 0 0 0 1px rgba(0,242,255,0.5) inset; }
	50%      { box-shadow: 0 6px 26px rgba(0,242,255,0.75), 0 0 0 8px rgba(0,242,255,0.18), 0 0 0 1px rgba(0,242,255,0.6) inset; }
}
#popup-course.vr-sb-collapsed #sidebar-toggle {
	animation: sls-sb-toggle-pulse 2s ease-in-out 3 !important;
}

/* ── Curriculum item titles wrap inside the sidebar ──────────────────────────
   The fundamental issue: LP renders each lesson row as a flex/grid container
   (status icon + content column). Flex/grid items default to `min-width: auto`,
   which means they REFUSE to shrink below their intrinsic content width —
   so long titles overflow the sidebar's 320px regardless of any
   overflow-wrap/word-break setting (no shrink → no wrap point reached).
   The classic CSS fix is `min-width: 0` (+ `box-sizing: border-box`) on
   every descendant, which lets the content column shrink and then the
   overflow-wrap rules take effect.
   We also force overflow-x: hidden on the sidebar itself as a belt-and-
   braces guard against any single character that can't be broken. */
#popup-sidebar { overflow-x: hidden !important; }
#popup-sidebar,
#popup-sidebar *,
#popup-sidebar *::before,
#popup-sidebar *::after {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	text-overflow: clip !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
	min-width: 0 !important;        /* allow flex/grid children to shrink */
	max-width: 100% !important;     /* cap every descendant to its parent */
	box-sizing: border-box !important;
}
/* LP's curriculum wraps its own container element (typically wider than our
   320px sidebar). Force every common container class to fill, no more. */
#popup-sidebar > *,
#popup-sidebar .course-curriculum,
#popup-sidebar .lp-course-curriculum,
#popup-sidebar #learn-press-course-curriculum,
#popup-sidebar [class*="curriculum"],
#popup-sidebar [class*="course-content"],
#popup-sidebar .section-content,
#popup-sidebar .section-content ul,
#popup-sidebar ul,
#popup-sidebar ol {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}
#popup-sidebar a,
#popup-sidebar li,
#popup-sidebar .course-item,
#popup-sidebar .course-item__link,
#popup-sidebar .course-item__title,
#popup-sidebar .course-item-title,
#popup-sidebar .course-item-name,
#popup-sidebar .item-name,
#popup-sidebar .section-title {
	overflow: visible !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	flex-shrink: 1 !important;      /* be explicitly shrinkable */
	flex-basis: auto !important;    /* start from content, then shrink */
}
/* If LP makes the link a flex row (status icon + title), top-align so a
   wrapped multi-line title doesn't push the icon off-center. */
#popup-sidebar .course-item__link {
	align-items: flex-start !important;
	padding: 0.65rem 0.9rem !important;
}
/* (Footer layout is handled in the block layout above: #popup-footer gets
   margin-left to align with content; full-width when the sidebar is collapsed.) */

/* ── Lesson interior: tame per-lesson embedded <style> ────────────────────────
   Some lessons bake their own design system into post content (Playfair Display
   / Montserrat headings, off-brand accents) with !important. The doubled-ID
   selector (2 IDs) outranks those embedded element-level !important rules, so we
   can enforce the Nexus display font universally without editing content. */
#grit-lesson-wrapper#grit-lesson-wrapper h1,
#grit-lesson-wrapper#grit-lesson-wrapper h2,
#grit-lesson-wrapper#grit-lesson-wrapper h3,
#grit-lesson-wrapper#grit-lesson-wrapper h4,
#grit-lesson-wrapper#grit-lesson-wrapper h5,
#grit-lesson-wrapper#grit-lesson-wrapper h6,
#grit-lesson-wrapper#grit-lesson-wrapper .serif-italic {
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-style: normal !important;
}

/* ── Tabs (Overview / Curriculum / Instructor / FAQs) ─────────────────────── */
.course-tabs .course-nav,
.learn-press-nav-tabs .course-nav { background-color: transparent !important; }
.course-tabs .course-nav__item,
.learn-press-nav-tabs li a { color: var(--vr-body, #CBD5E1) !important; }
.course-tabs .course-nav__item.active,
.course-tabs .course-nav__item:hover,
.learn-press-nav-tabs li.active a {
	color: var(--vr-cyan, #00F2FF) !important;
	border-bottom-color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Quiz submit button — legible dark text on the cyan gradient (was white) ─ */
#grit-lesson-wrapper .quiz-submit {
	color: var(--vr-base, #020617) !important;
	text-shadow: none !important;
}

/* ── Try This / "Your Turn" — full self-contained interactive component ──────
   IMPORTANT: the generated markup (#sls-try-this) renders OUTSIDE
   #grit-lesson-wrapper (it lives in .content-item-summary). The previous rules
   were scoped to #grit-lesson-wrapper so they never matched — the choices fell
   back to a plain block list and the editor area collapsed to zero height
   (making the WYSIWYG look "not implemented"). The component's original styling
   lived in an embedded <style> that was stripped during the Nexus regen.
   Rebuilt here, scoped to .sls-try-this, in the Nexus palette
   (cyan #00F2FF / violet #A78BFA / emerald #34D399). The choice-selection and
   editor behaviour is wired by assets/js/lesson.js via document-level
   delegation, so it works regardless of where the block sits in the DOM. */
.sls-try-this { position: relative; margin: 3rem 0 0; font-family: 'Inter', sans-serif; }
.sls-try-this .sls-tt-angle-top {
	width: 100%; height: 56px; background: #0F172A;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.sls-try-this .sls-tt-body {
	background: #0F172A; position: relative; padding-bottom: 4rem;
	overflow: hidden; border-radius: 0 0 22px 22px;
}
.sls-try-this .sls-tt-dots {
	position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 28px 28px;
}
.sls-try-this .sls-tt-deco { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.sls-try-this .sls-tt-deco-1 { width: 500px; height: 400px; background: rgba(0,242,255,0.10); top: -120px; right: -120px; }
.sls-try-this .sls-tt-deco-2 { width: 350px; height: 350px; background: rgba(167,139,250,0.10); bottom: -60px; left: -80px; }
.sls-try-this .sls-tt-deco-3 { width: 260px; height: 260px; background: rgba(52,211,153,0.12); top: 40%; left: 28%; }
.sls-try-this .sls-tt-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 3.5rem 3rem 0; }

/* Header */
.sls-try-this .sls-tt-header { display: flex; align-items: flex-start; gap: 2.5rem; margin-bottom: 3rem; }
.sls-try-this .sls-tt-tag {
	flex-shrink: 0; writing-mode: vertical-rl; transform: rotate(180deg);
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
	color: rgba(255,255,255,0.35); border-right: 2px solid rgba(255,255,255,0.12);
	padding-right: 0.7rem; align-self: stretch;
}
.sls-try-this .sls-tt-titles { flex: 1; }
.sls-try-this .sls-tt-eyebrow {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
	color: #00F2FF; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.75rem;
}
.sls-try-this .sls-tt-eyebrow::after { content: ''; width: 56px; height: 2px; background: #00F2FF; border-radius: 2px; flex-shrink: 0; }
.sls-try-this .sls-tt-headline {
	font-family: 'Orbitron', sans-serif !important; font-weight: 800 !important;
	font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1;
	color: #ffffff !important; margin: 0 0 0.65rem !important;
}
.sls-try-this .sls-tt-headline em { color: #A78BFA; font-style: italic; }
.sls-try-this .sls-tt-subline { font-size: 1.05rem; font-style: italic; color: rgba(255,255,255,0.55); line-height: 1.55; max-width: 480px; margin: 0; }

/* Choice cards */
.sls-try-this .sls-tt-choices-label {
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(255,255,255,0.45); margin-bottom: 1.1rem;
}
.sls-try-this .sls-tt-choices {
	display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
	gap: 1rem !important; margin-bottom: 2.5rem !important;
}
.sls-try-this .sls-tt-choice {
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
	border-radius: 16px; padding: 1.6rem 1.4rem; cursor: pointer; position: relative; overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sls-try-this .sls-tt-choice::after { content: ''; position: absolute; inset: 0; border-radius: 16px; opacity: 0; transition: opacity 0.3s; }
.sls-try-this .sls-tt-choice-1::after { background: radial-gradient(circle at 30% 30%, rgba(0,242,255,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice-2::after { background: radial-gradient(circle at 30% 30%, rgba(167,139,250,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice-3::after { background: radial-gradient(circle at 30% 30%, rgba(52,211,153,0.20), transparent 70%); }
.sls-try-this .sls-tt-choice:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.25); }
.sls-try-this .sls-tt-choice:hover::after,
.sls-try-this .sls-tt-choice.sls-tt-selected::after { opacity: 1; }
.sls-try-this .sls-tt-choice.sls-tt-selected { border-width: 2px; transform: translateY(-2px); }
.sls-try-this .sls-tt-choice-1.sls-tt-selected { border-color: rgba(0,242,255,0.6); }
.sls-try-this .sls-tt-choice-2.sls-tt-selected { border-color: rgba(167,139,250,0.6); }
.sls-try-this .sls-tt-choice-3.sls-tt-selected { border-color: rgba(52,211,153,0.6); }
.sls-try-this .sls-tt-choice-icon { font-size: 1.9rem; margin-bottom: 0.9rem; display: block; position: relative; z-index: 1; }
.sls-try-this .sls-tt-choice-type { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.45rem; position: relative; z-index: 1; }
.sls-try-this .sls-tt-choice-1 .sls-tt-choice-type { color: #00F2FF; }
.sls-try-this .sls-tt-choice-2 .sls-tt-choice-type { color: #A78BFA; }
.sls-try-this .sls-tt-choice-3 .sls-tt-choice-type { color: #34D399; }
.sls-try-this .sls-tt-choice h4 {
	font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important;
	font-size: 1.05rem; color: #ffffff !important; margin: 0 0 0.4rem !important;
	line-height: 1.25; position: relative; z-index: 1;
}
.sls-try-this .sls-tt-choice p { font-size: 0.85rem; color: rgba(255,255,255,0.55) !important; line-height: 1.55; margin: 0; position: relative; z-index: 1; }

/* Core prompt */
.sls-try-this .sls-tt-prompt {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px; padding: 2rem 2.5rem; margin-bottom: 2.5rem; position: relative;
}
.sls-try-this .sls-tt-prompt::before {
	content: '\201C'; font-family: 'Orbitron', sans-serif; font-size: 7rem; color: rgba(255,255,255,0.05);
	position: absolute; top: -1.5rem; left: 1.5rem; line-height: 1; pointer-events: none;
}
.sls-try-this .sls-tt-prompt p { font-size: 1.15rem; color: rgba(255,255,255,0.88) !important; line-height: 1.7; position: relative; z-index: 1; margin: 0; }
.sls-try-this .sls-tt-prompt strong { color: #A78BFA; }

/* Editor section */
.sls-try-this .sls-tt-editor-section { margin-bottom: 2.5rem; }
.sls-try-this .sls-tt-editor-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.75rem; }
.sls-try-this .sls-tt-writing-prompt { font-size: 0.92rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.25rem; font-style: italic; max-width: 700px; }

/* WYSIWYG editor */
.sls-try-this .sls-editor-wrap { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; transition: border-color 0.25s; }
.sls-try-this .sls-editor-wrap:focus-within { border-color: rgba(167,139,250,0.5); box-shadow: 0 0 0 3px rgba(167,139,250,0.10); }
.sls-try-this .sls-editor-toolbar { display: flex !important; align-items: center; gap: 0.25rem; padding: 0.6rem 0.85rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
.sls-try-this .sls-ed-btn {
	background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.10) !important;
	color: rgba(255,255,255,0.7) !important; border-radius: 6px !important; padding: 0.3rem 0.65rem !important;
	cursor: pointer; font-size: 0.85rem; line-height: 1.4; font-family: inherit; min-width: 32px;
	text-align: center; box-shadow: none !important; text-shadow: none !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sls-try-this .sls-ed-btn:hover { background: rgba(255,255,255,0.14) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.25) !important; }
.sls-try-this .sls-ed-btn.sls-ed-active { background: rgba(167,139,250,0.18) !important; border-color: rgba(167,139,250,0.4) !important; color: #A78BFA !important; }
.sls-try-this .sls-ed-clear { color: rgba(255,120,120,0.75) !important; }
.sls-try-this .sls-ed-clear:hover { color: #ff6b6b !important; background: rgba(255,100,100,0.12) !important; border-color: rgba(255,100,100,0.3) !important; }
.sls-try-this .sls-ed-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.10); margin: 0 0.25rem; flex-shrink: 0; }
.sls-try-this .sls-editor-area {
	min-height: 200px !important; padding: 1.25rem 1.5rem !important; background: transparent !important;
	color: rgba(255,255,255,0.9) !important; font-size: 1rem; line-height: 1.7; outline: none;
	caret-color: #A78BFA; font-family: 'Inter', sans-serif;
}
.sls-try-this .sls-editor-area:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,0.3); pointer-events: none; font-style: italic; }
.sls-try-this .sls-editor-area ul, .sls-try-this .sls-editor-area ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.sls-try-this .sls-editor-area li { margin-bottom: 0.25rem; }
.sls-try-this .sls-editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.07); gap: 1rem; flex-wrap: wrap; }
.sls-try-this .sls-word-count { font-size: 0.7rem; font-family: 'JetBrains Mono','Courier New',monospace; color: rgba(255,255,255,0.4); transition: color 0.3s; letter-spacing: 0.05em; }
.sls-try-this .sls-word-count.sls-wc-good { color: #34D399; }
.sls-try-this .sls-word-count.sls-wc-great { color: #A78BFA; }
.sls-try-this .sls-word-min { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-style: italic; }

/* Submit button (injected by lesson.js — the stored markup ships without one) */
.sls-try-this .sls-tt-submit,
.sls-try-this .sls-submit-btn {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem;
	background: linear-gradient(90deg, #7000FF, #A78BFA) !important; color: #ffffff !important;
	font-family: 'Orbitron', sans-serif !important; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem;
	padding: 0.85rem 2rem !important; border-radius: 100px !important;
	border: none !important; cursor: pointer; text-decoration: none !important;
	box-shadow: 0 4px 18px rgba(167,139,250,0.3); text-shadow: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
}
.sls-try-this .sls-tt-submit:hover,
.sls-try-this .sls-submit-btn:hover {
	transform: translateY(-2px); color: #ffffff !important;
	box-shadow: 0 8px 26px rgba(167,139,250,0.5);
}
.sls-try-this .sls-tt-submit.sls-submitted,
.sls-try-this .sls-submit-btn.sls-submitted {
	background: linear-gradient(90deg, #059669, #34D399) !important; color: #042f2e !important;
	box-shadow: none; cursor: default; transform: none;
}

/* Bottom: reflection + open-ended badge */
.sls-try-this .sls-tt-bottom { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding-top: 0.5rem; }
.sls-try-this .sls-tt-reflect { display: flex; align-items: flex-start; gap: 1rem; }
.sls-try-this .sls-tt-reflect-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 0.2rem; }
.sls-try-this .sls-tt-reflect-text .sls-tt-reflect-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.45rem; }
.sls-try-this .sls-tt-reflect-text p { font-size: 0.95rem; font-style: italic; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
.sls-try-this .sls-tt-open-badge { flex-shrink: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 50px; padding: 0.55rem 1.3rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* Responsive */
@media (max-width: 782px) {
	.sls-try-this .sls-tt-choices { grid-template-columns: 1fr !important; }
	.sls-try-this .sls-tt-header { flex-direction: column; gap: 1.25rem; }
	.sls-try-this .sls-tt-tag { writing-mode: horizontal-tb; transform: none; border-right: none; border-bottom: 2px solid rgba(255,255,255,0.12); padding: 0 0 0.5rem; }
	.sls-try-this .sls-tt-inner { padding: 2rem 1.25rem 0; }
	.sls-try-this .sls-tt-prompt { padding: 1.5rem 1.25rem; }
	.sls-try-this .sls-tt-bottom { grid-template-columns: 1fr; gap: 1rem; }
	.sls-try-this .sls-tt-open-badge { justify-self: start; }
}

/* ── End-of-lesson "Continue" CTA — prominent, clearly separated from the
   Try This block above. Like .sls-try-this, #sls-next-bar renders OUTSIDE
   #grit-lesson-wrapper (in .content-item-description), so these rules are
   scoped to .sls-next-bar directly. Generous top margin + padding + a divider
   give it breathing room so it no longer butts against Try This. ──────────── */
.sls-next-bar {
	margin: 5rem 0 2.5rem !important;
	padding: 3rem 1.5rem 0 !important;
	border-top: 1px solid rgba(0, 242, 255, 0.18) !important;
	display: flex !important;
	justify-content: center !important;
	background: transparent !important;
}
.sls-next-inner {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	max-width: 640px;
}
.sls-next-left { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.sls-next-headline {
	display: block !important;
	font-family: 'Orbitron', sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.sls-next-left p, .sls-next-sub {
	color: var(--vr-muted, #94A3B8);
	font-size: 0.95rem;
	margin: 0;
}
.sls-next-btn {
	display: inline-flex !important; align-items: center; gap: .6rem;
	background: linear-gradient(90deg, #7000FF, #00F2FF) !important;
	color: #020617 !important;
	font-family: 'Orbitron', sans-serif !important; font-weight: 800;
	text-transform: uppercase; letter-spacing: .05em; font-size: 1rem;
	padding: 1.1rem 2.75rem !important; border-radius: 100px !important;
	border: none !important; cursor: pointer; text-decoration: none !important;
	box-shadow: 0 6px 28px rgba(0, 242, 255, 0.30);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sls-next-btn:hover {
	transform: translateY(-3px); color: #020617 !important;
	box-shadow: 0 10px 38px rgba(0, 242, 255, 0.5);
}
@media (max-width: 640px) {
	.sls-next-inner { width: 100%; }
	.sls-next-btn { width: 100% !important; justify-content: center; }
}

/* ── Flashcard — Active Recall flip card ─────────────────────────────────────
   Front (cue) / back (answer) 3D flip. Click or keyboard toggles .sls-fc-flipped
   on .sls-flashcard; assets/js/lesson.js emits one `experienced` xAPI statement
   on the first reveal. Scoped to the class (not #grit-lesson-wrapper) so it works
   wherever LearnPress renders the lesson body. Nexus palette: cyan / violet. */
.sls-flashcard {
	display: block; perspective: 1400px; margin: 1.25rem 0;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	font-family: 'Inter', sans-serif;
}
.sls-flashcard .sls-fc-inner {
	position: relative; width: 100%; min-height: 220px;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.sls-flashcard.sls-fc-flipped .sls-fc-inner { transform: rotateY(180deg); }
.sls-flashcard .sls-fc-front,
.sls-flashcard .sls-fc-back {
	position: absolute; inset: 0;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	text-align: center; gap: 0.9rem;
	padding: 2.25rem 2rem; border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.sls-flashcard .sls-fc-front {
	background: linear-gradient(150deg, #0F172A, #0B1220);
	border-top: 3px solid #00F2FF;
}
.sls-flashcard .sls-fc-back {
	background: linear-gradient(150deg, #161033, #0E0A24);
	border-top: 3px solid #A78BFA;
	transform: rotateY(180deg);
}
.sls-flashcard .sls-fc-tag {
	font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
}
.sls-flashcard .sls-fc-front .sls-fc-tag { color: #00F2FF; }
.sls-flashcard .sls-fc-back  .sls-fc-tag { color: #A78BFA; }
.sls-flashcard .sls-fc-cue {
	font-family: 'Orbitron', sans-serif; font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.3;
	color: #ffffff !important; margin: 0 !important;
}
.sls-flashcard .sls-fc-answer {
	font-size: 1.02rem; line-height: 1.6;
	color: rgba(255, 255, 255, 0.82) !important; margin: 0 !important;
}
.sls-flashcard .sls-fc-hint {
	font-size: 0.72rem; letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.45);
}
.sls-flashcard:hover .sls-fc-front,
.sls-flashcard:hover .sls-fc-back { border-color: rgba(255, 255, 255, 0.22); }
.sls-flashcard:focus-visible { outline: 2px solid #00F2FF; outline-offset: 4px; border-radius: 22px; }
@media (prefers-reduced-motion: reduce) {
	.sls-flashcard .sls-fc-inner { transition: none; }
}

/* ── Lesson video player — HLS player injected above the opener ──────────────
   functions.php splices <div class="sls-lesson-video">[sls_stream]</div> just
   before .big-question. The mu-plugin ships inline styles (max-width:900px on
   the wrap, width:100% on the <video>), but in the lesson layout the video was
   only filling part of its box. We force a responsive, full-width 16:9 player
   capped to the lesson content column (820px) and centered. !important is
   required to beat the plugin's inline styles. */
#grit-lesson-wrapper .sls-lesson-video {
	width: 100%;
	max-width: 820px;
	margin: 0 auto 2.5rem;
}
#grit-lesson-wrapper .sls-lesson-video .sls-video-wrap {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
#grit-lesson-wrapper .sls-lesson-video .sls-video-wrap video {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	display: block !important;
	object-fit: contain;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 242, 255, 0.18);
}

/* ── Phase-1 interaction widgets (true/false, cloze, predict, confidence) ──────
   Wired by assets/js/lesson.js; ids stamped by the generator. Nexus palette. */

/* True/False — "Myth or Fact?" */
#grit-lesson-wrapper .sls-truefalse { background: #0B1322; border: 1px solid rgba(0,242,255,.18); border-radius: 18px; padding: 1.75rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-tf-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #00F2FF; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-tf-statement { font-size: 1.1rem; font-weight: 700; color: #f1f5f9 !important; margin: .25rem 0 1.25rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-tf-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
#grit-lesson-wrapper .sls-tf-btn { background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12); color: #e2e8f0; padding: .85rem 1rem; border-radius: 12px; font-weight: 700; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-tf-btn:hover:not(:disabled) { border-color: #00F2FF; transform: translateY(-2px); }
#grit-lesson-wrapper .sls-tf-btn:disabled { opacity: .65; cursor: default; }
#grit-lesson-wrapper .sls-tf-btn.sls-tf-correct { background: rgba(52,211,153,.18); border-color: #34D399; color: #A7F3D0; }
#grit-lesson-wrapper .sls-tf-btn.sls-tf-wrong { background: rgba(248,113,113,.15); border-color: #f87171; color: #fecaca; }
#grit-lesson-wrapper .sls-tf-result { display: none; margin-top: 1rem; font-weight: 700; color: #e2e8f0 !important; }
#grit-lesson-wrapper .sls-tf-explain { margin-top: .75rem; color: #cbd5e1 !important; font-size: .95rem; line-height: 1.6; border-left: 3px solid #00F2FF; padding-left: 1rem; }

/* Fill-in-the-blank (cloze) */
#grit-lesson-wrapper .sls-cloze { background: #0B1322; border: 1px solid rgba(167,139,250,.22); border-left: 4px solid #A78BFA; border-radius: 16px; padding: 1.6rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-cloze-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #A78BFA; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-cloze-text { font-size: 1.05rem; line-height: 2.2; color: #e2e8f0 !important; }
#grit-lesson-wrapper .sls-blank { background: rgba(255,255,255,.06); border: none; border-bottom: 2px solid #A78BFA; color: #fff; font-size: 1rem; padding: .2rem .5rem; margin: 0 .2rem; border-radius: 6px 6px 0 0; font-family: 'Inter', sans-serif; min-width: 8ch; }
#grit-lesson-wrapper .sls-blank:focus { outline: none; background: rgba(167,139,250,.15); }
#grit-lesson-wrapper .sls-blank.sls-blank-correct { border-bottom-color: #34D399; color: #A7F3D0; }
#grit-lesson-wrapper .sls-blank.sls-blank-wrong { border-bottom-color: #f87171; color: #fecaca; }
#grit-lesson-wrapper .sls-cloze-check { margin-top: 1.25rem; background: #A78BFA; color: #0B1322; border: none; padding: .7rem 1.75rem; border-radius: 100px; font-weight: 800; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; }
#grit-lesson-wrapper .sls-cloze-check:hover:not(:disabled) { background: #c4b5fd; }
#grit-lesson-wrapper .sls-cloze-result { display: none; margin-top: 1rem; font-weight: 700; color: #e2e8f0 !important; }

/* Predict & Reveal */
#grit-lesson-wrapper .sls-predict { background: linear-gradient(135deg,#0E1F36,#081628); border: 1px solid rgba(34,211,238,.25); border-radius: 18px; padding: 1.75rem 2rem; margin: 2.5rem 0; }
#grit-lesson-wrapper .sls-predict-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #22D3EE; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-predict-q { font-size: 1.1rem; font-weight: 700; color: #fff !important; margin: .25rem 0 1.25rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-predict-options { display: flex; flex-direction: column; gap: .6rem; }
#grit-lesson-wrapper .sls-predict-opt { text-align: left; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12); color: #e2e8f0; padding: .85rem 1.1rem; border-radius: 12px; cursor: pointer; min-height: 44px; font-family: 'Inter', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-predict-opt:hover:not(:disabled) { border-color: #22D3EE; transform: translateX(4px); }
#grit-lesson-wrapper .sls-predict-opt:disabled { opacity: .6; cursor: default; }
#grit-lesson-wrapper .sls-predict-opt.sls-predict-chosen { border-color: #22D3EE; background: rgba(34,211,238,.15); color: #a8edfa; opacity: 1; }
#grit-lesson-wrapper .sls-predict-reveal { margin-top: 1.1rem; color: #D4EEFF !important; font-size: .98rem; line-height: 1.6; border-left: 3px solid #22D3EE; padding-left: 1rem; }

/* Confidence check (1–5 self-rating) */
#grit-lesson-wrapper .sls-confidence { background: #0B1322; border: 1px solid rgba(52,211,153,.22); border-radius: 16px; padding: 1.6rem 2rem; margin: 2.5rem 0; text-align: center; }
#grit-lesson-wrapper .sls-conf-tag { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #34D399; margin-bottom: .6rem; }
#grit-lesson-wrapper .sls-conf-q { font-size: 1.05rem; font-weight: 700; color: #f1f5f9 !important; margin: .25rem 0 1.1rem !important; line-height: 1.5; }
#grit-lesson-wrapper .sls-conf-scale { display: inline-flex; gap: .5rem; }
#grit-lesson-wrapper .sls-conf-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.15); color: #e2e8f0; font-weight: 800; font-size: 1.05rem; cursor: pointer; font-family: 'Orbitron', sans-serif; transition: background .15s, border-color .15s, transform .12s; }
#grit-lesson-wrapper .sls-conf-btn:hover:not(:disabled) { border-color: #34D399; transform: translateY(-2px); }
#grit-lesson-wrapper .sls-conf-btn:disabled { cursor: default; }
#grit-lesson-wrapper .sls-conf-btn.sls-conf-picked { background: #34D399; border-color: #34D399; color: #04231a; }
#grit-lesson-wrapper .sls-conf-labels { display: flex; justify-content: space-between; max-width: 280px; margin: .6rem auto 0; font-size: .72rem; color: #94a3b8; }
#grit-lesson-wrapper .sls-conf-ack { margin-top: .9rem; color: #A7F3D0 !important; font-weight: 700; font-size: .95rem; }


/* ════════════════════════════════════════════════════════════════════════
   LP PROFILE PAGE CHROME — full coverage of /lp-profile/ when logged in.
   The basic body.learnpress-profile / .lp-profile-content / .lp-profile-nav-tabs
   block earlier in this file sets the transparent dark canvas + light body
   text + cyan-active tab labels. The block below covers the header banner,
   avatar/cover edit buttons, sidebar columns, sub-nav, the LP message bar,
   the generic LP button, the My-Courses progress widgets, the loading
   skeleton, and the LP/LP-filters surfaces. Scoped to body.learnpress-profile so
   it cannot leak out of the profile page.
   ════════════════════════════════════════════════════════════════════════ */

/* Profile header banner (cover image area) */
body.learnpress-profile .wrapper-profile-header,
body.learnpress-profile .wrapper-profile-header.wrap-fullwidth {
	background: var(--vr-surface, #0F172A) !important;
	border-bottom: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-profile .lp-user-cover-image_background { background: transparent !important; }

/* Edit-avatar + edit-cover buttons (cyan pills) */
body.learnpress-profile .lp-btn-to-edit-cover-image,
body.learnpress-profile .lp-btn-to-edit-avatar {
	background: var(--vr-cyan, #00F2FF) !important;
	color: var(--vr-base, #020617) !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	padding: 0.35rem 0.75rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
body.learnpress-profile .lp-btn-to-edit-cover-image:hover,
body.learnpress-profile .lp-btn-to-edit-avatar:hover {
	background: var(--vr-contrast, #F8FAFC) !important;
}

/* Profile main content area + grid */
body.learnpress-profile .lp-content-area,
body.learnpress-profile .lp-profile-content-area {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* Sidebar columns */
body.learnpress-profile .lp-profile-left,
body.learnpress-profile .lp-profile-right,
body.learnpress-profile .user-avatar { background: transparent !important; }
body.learnpress-profile .lp-profile-username {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 800 !important;
}

/* Nav-tab list items (rows) — themed row dividers + active marker */
body.learnpress-profile .lp-profile-nav-tabs li {
	background: transparent !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	transition: background 0.18s ease, border-color 0.18s ease;
}
body.learnpress-profile .lp-profile-nav-tabs li:hover,
body.learnpress-profile .lp-profile-nav-tabs li.active {
	background: rgba(0,242,255,0.06) !important;
	border-left: 3px solid var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li a {
	display: block;
	padding: 0.55rem 0.85rem !important;
	text-decoration: none !important;
}
body.learnpress-profile .lp-profile-nav-tabs li [class^="lp-icon-"],
body.learnpress-profile .lp-profile-nav-tabs li [class*=" lp-icon-"] { color: inherit; }

/* Settings sub-nav (.profile-tab-sections — under .lp-profile-nav-tabs li.has-child) */
body.learnpress-profile .lp-profile-nav-tabs .profile-tab-sections {
	background: var(--vr-surface-2, #1E293B) !important;
	border-left: 3px solid var(--vr-cyan, #00F2FF) !important;
	border-radius: 0 6px 6px 0 !important;
	margin: 0 0 0 0.25rem !important;
}
body.learnpress-profile .lp-profile-nav-tabs .profile-tab-sections li {
	border-bottom: 0 !important;
	border-left: 0 !important;
}

/* Profile content article — themed card surface */
body.learnpress-profile #profile-content,
body.learnpress-profile .lp-profile-content {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 12px !important;
	padding: 1.5rem !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile #profile-content :where(h2, h3, h4) { color: var(--vr-contrast, #F8FAFC) !important; }

/* LP message bar (success/error above content) */
.learnpress .learn-press-message,
body.learnpress-profile .learn-press-message {
	background: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-left: 4px solid var(--vr-cyan, #00F2FF) !important;
	border-radius: 8px !important;
	padding: 0.85rem 1.1rem !important;
	margin: 0 0 1rem !important;
}
.learnpress .learn-press-message.success { border-left-color: var(--vr-emerald, #34D399) !important; }
.learnpress .learn-press-message.error,
.learnpress .learn-press-message.warning { border-left-color: #f87171 !important; }

/* Generic LP button (.lp-button) */
.learnpress .lp-button,
a.lp-button,
button.lp-button {
	background: var(--vr-cyan, #00F2FF) !important;
	color: var(--vr-base, #020617) !important;
	border: 1px solid transparent !important;
	border-radius: 4px !important;
	padding: 0.55rem 1.1rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block;
}
.learnpress .lp-button:hover,
a.lp-button:hover,
button.lp-button:hover { background: var(--vr-contrast, #F8FAFC) !important; }

/* LP tabs container (filters bar above the course/quiz/order lists in profile) */
body.learnpress-profile .learn-press-tabs,
body.learnpress-profile .learn-press-course-tab__filter__content {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .learn-press-filters,
body.learnpress-profile .learn-press-course-tab-filters {
	background: var(--vr-surface-2, #1E293B) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 8px !important;
	padding: 0.6rem 0.75rem !important;
	margin-bottom: 0.75rem;
}

/* Per-course progress widget (My Courses tab) */
body.learnpress-profile .learn-press-profile-course__tab,
body.learnpress-profile .learn-press-profile-course__progress,
body.learnpress-profile .learn-press-profile-course__statistic {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 8px !important;
	color: var(--vr-body, #CBD5E1) !important;
	padding: 0.65rem 0.85rem !important;
}
body.learnpress-profile .lp-ux-progress-fill {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399)) !important;
}

/* LP skeleton loader (when a tab is fetching) */
body.learnpress-profile .lp-skeleton-animation {
	background: linear-gradient(
		90deg,
		var(--vr-surface, #0F172A) 0%,
		var(--vr-surface-2, #1E293B) 50%,
		var(--vr-surface, #0F172A) 100%
	) !important;
	background-size: 200% 100% !important;
	border-radius: 6px !important;
}

/* Enrolled-students toolbar (instructor/admin view) */
.lp-enrolled-students-form,
.lp-enrolled-students-table-toolbar,
.lp-enrolled-students-table-toolbar__field,
.lp-enrolled-students-table-toolbar__input,
.lp-enrolled-search-input {
	background: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border-color: var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-radius: 6px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PMPro page-chrome additions — supplements the .pmpro_card / .pmpro_btn /
   .pmpro_table rules in nexus.css with the section / list / heading
   classes that show up on /membership-account/ and friends.
   ════════════════════════════════════════════════════════════════════════ */

.pmpro_section,
.pmpro_section_content {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 10px !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 1rem !important;
}
.pmpro_section_title {
	color: var(--vr-cyan, #00F2FF) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	margin-bottom: 0.75rem !important;
}
.pmpro_heading-with-avatar {
	color: var(--vr-contrast, #F8FAFC) !important;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	padding-bottom: 0.75rem !important;
	margin-bottom: 1rem !important;
}
.pmpro_card_action_separator { background: var(--vr-border, rgba(0,242,255,0.12)) !important; }
.pmpro_card_actions a:not(.pmpro_btn):not([class*="pmpro_btn"]) {
	color: var(--vr-cyan, #00F2FF) !important;
}
.pmpro_list,
.pmpro_list-plain {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}
.pmpro_list_item {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
.pmpro_list_item:last-child { border-bottom: 0; }
.pmpro_font-large,
.pmpro_font-x-large { color: var(--vr-contrast, #F8FAFC) !important; }


/* ════════════════════════════════════════════════════════════════════════
   LP PROFILE — body backdrop, block-theme transparency, watermark + cards
   Body class on /lp-profile/ is `learnpress-profile` (not `lp-user-profile`).
   The earlier rules now key on that. This block adds what was missing:
   1) Dark backdrop at body level so the block-theme white wrapper goes away
   2) Forces .entry-content / .wp-block-post-content to transparent on
      profile pages so the LP shortcode renders on the navy canvas
   3) Colors the giant "PROFILE" header watermark (::before) to faint cyan
   4) Sidebar nav: extra specificity to beat LP default orange/yellow active
   5) Course-statistic stat cards (cover both LP3 and LP4 class patterns)
   ════════════════════════════════════════════════════════════════════════ */

body.learnpress-profile {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* TT5 block-theme wrappers — transparent so the body backdrop shows through */
body.learnpress-profile .entry-content,
body.learnpress-profile .wp-block-post-content,
body.learnpress-profile .wp-block-group,
body.learnpress-profile main.wp-block-group,
body.learnpress-profile .is-layout-constrained,
body.learnpress-profile article.post,
body.learnpress-profile article.page {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}

/* The huge faded "PROFILE" header watermark (LP renders it as ::before
   pseudo on .wrapper-profile-header). Default color is dark on dark and
   was invisible on UW + reading as "barely there" on vrschool. Re-color
   to a faint cyan glow that reads as decorative on the navy canvas. */
body.learnpress-profile .wrapper-profile-header::before,
body.learnpress-profile .wrapper-profile-header::after {
	color: rgba(0, 242, 255, 0.18) !important;
	-webkit-text-fill-color: rgba(0, 242, 255, 0.18) !important;
	text-shadow: 0 0 24px rgba(0, 242, 255, 0.25) !important;
}

/* Username on the cover — make sure it reads on the dark banner */
body.learnpress-profile .lp-profile-username,
body.learnpress-profile .lp-profile-username a {
	color: var(--vr-contrast, #F8FAFC) !important;
	text-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
}

/* Sidebar nav: defeat LP default orange/yellow active background.
   Specificity is bumped via the body class + an extra .lp-profile-nav-tabs
   chain — beats LP's own `.lp-profile-nav-tabs li.active { background: ... }`
   without resorting to !important on every property. */
body.learnpress-profile .lp-profile-nav-tabs li,
body.learnpress-profile .lp-profile-nav-tabs li.courses,
body.learnpress-profile .lp-profile-nav-tabs li.my-courses,
body.learnpress-profile .lp-profile-nav-tabs li.quizzes,
body.learnpress-profile .lp-profile-nav-tabs li.orders,
body.learnpress-profile .lp-profile-nav-tabs li.settings,
body.learnpress-profile .lp-profile-nav-tabs li.enrolled-students {
	background: transparent !important;
	border-left: 3px solid transparent !important;
}
body.learnpress-profile .lp-profile-nav-tabs li.active,
body.learnpress-profile .lp-profile-nav-tabs li:hover {
	background: rgba(0, 242, 255, 0.08) !important;
	border-left-color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li > a {
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li.active > a,
body.learnpress-profile .lp-profile-nav-tabs li:hover > a {
	color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .lp-profile-nav-tabs li > a i,
body.learnpress-profile .lp-profile-nav-tabs li > a [class^="lp-icon-"],
body.learnpress-profile .lp-profile-nav-tabs li > a [class*=" lp-icon-"] {
	color: inherit !important;
}

/* LP dashboard statistic stat cards — actual classes from the template:
   #dashboard-statistic > .dashboard-statistic__row > .statistic-box {
       .statistic-box__icon > span (round chip — per-icon pastel keeps its
                                    semantic color: green=passed, red=failed)
       .statistic-box__text > label + .statistic-box__text__number
   }
*/
body.learnpress-profile #dashboard-statistic { margin: 0 0 1.25rem; }
body.learnpress-profile .dashboard-statistic__row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 0.85rem !important;
}
body.learnpress-profile .dashboard-statistic__row .statistic-box {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 10px !important;
	padding: 1rem 1.1rem !important;
	color: var(--vr-body, #CBD5E1) !important;
	width: auto !important;
	transition: border-color 0.18s ease;
}
body.learnpress-profile .dashboard-statistic__row .statistic-box:hover {
	border-color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .statistic-box__text { color: var(--vr-body, #CBD5E1) !important; }
body.learnpress-profile .statistic-box__text label {
	color: var(--vr-muted, #94A3B8) !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}
body.learnpress-profile .statistic-box__text__number {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-family: 'Orbitron', 'Inter', sans-serif !important;
	font-weight: 800 !important;
	font-size: 1.7em !important;
}
/* Per-icon chip backgrounds — bump their alpha so they show on the dark
   card. Color tokens stay LP-semantic (green=passed, red=failed, etc.). */
body.learnpress-profile .statistic-box__icon span {
	background: rgba(0, 199, 190, 0.18) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-in_progress_course,
body.learnpress-profile .statistic-box__icon .lp-icon-student_in_progress {
	background: rgba(175, 82, 222, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-finished_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-published_course {
	background: rgba(88, 86, 214, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-passed_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-student_completed {
	background: rgba(52, 199, 89, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-failed_courses,
body.learnpress-profile .statistic-box__icon .lp-icon-pending_course {
	background: rgba(255, 59, 48, 0.22) !important;
}
body.learnpress-profile .statistic-box__icon .lp-icon-total_student {
	background: rgba(0, 122, 255, 0.22) !important;
}

/* LP filter-tab strip (All / In Progress / Finished / Passed / Failed)
   LP defaults to --lp-primary-color #ffb606 (gold). Remap to cyan inside
   profile context so the underline + active label sit in the Nexus palette. */
body.learnpress-profile {
	--lp-primary-color: var(--vr-cyan, #00F2FF);
	--lp-color-base: var(--vr-body, #CBD5E1);
	--lp-white-grey: var(--vr-surface, #0F172A);
	--lp-border-color: var(--vr-border, rgba(0,242,255,0.12));
}
body.learnpress-profile .learn-press-filters,
body.learnpress-profile .learn-press-tabs {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.12));
}
body.learnpress-profile .learn-press-filters li a,
body.learnpress-profile .learn-press-filters li span {
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-profile .learn-press-filters li a.active,
body.learnpress-profile .learn-press-filters li a:hover,
body.learnpress-profile .learn-press-filters li span.active,
body.learnpress-profile .learn-press-filters li span:hover,
body.learnpress-profile .learn-press-filters li.active a,
body.learnpress-profile .learn-press-filters li.active span {
	color: var(--vr-cyan, #00F2FF) !important;
}
body.learnpress-profile .learn-press-filters li a.active::after,
body.learnpress-profile .learn-press-filters li a:hover::after,
body.learnpress-profile .learn-press-filters li.active a::after,
body.learnpress-profile .learn-press-filters li.active span::after {
	background: var(--vr-cyan, #00F2FF) !important;
}

/* LP profile sub-page sub-grids (My Courses cards, Quizzes results, Orders) */
body.learnpress-profile .lp-list-table,
body.learnpress-profile .lp-archive-courses,
body.learnpress-profile .learn-press-course-tab__filter__content > * {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PMPro — body backdrop for all PMPro pages
   PMPro adds `pmpro-account` / `pmpro-billing` / `pmpro-levels` / etc.
   body classes on the corresponding pages, plus a generic
   `pmpro-body-page-N`. Catch all of them.
   ════════════════════════════════════════════════════════════════════════ */

body.pmpro-account,
body.pmpro-billing,
body.pmpro-cancel,
body.pmpro-checkout,
body.pmpro-confirmation,
body.pmpro-invoice,
body.pmpro-levels,
body.pmpro-login,
body.pmpro-member-profile-edit,
body[class*="pmpro-body-page-"] {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.pmpro-account .entry-content,
body.pmpro-billing .entry-content,
body.pmpro-cancel .entry-content,
body.pmpro-checkout .entry-content,
body.pmpro-confirmation .entry-content,
body.pmpro-invoice .entry-content,
body.pmpro-levels .entry-content,
body.pmpro-login .entry-content,
body.pmpro-member-profile-edit .entry-content,
body[class*="pmpro-body-page-"] .entry-content,
body.pmpro-account .wp-block-post-content,
body.pmpro-billing .wp-block-post-content,
body.pmpro-cancel .wp-block-post-content,
body.pmpro-checkout .wp-block-post-content,
body.pmpro-confirmation .wp-block-post-content,
body.pmpro-invoice .wp-block-post-content,
body.pmpro-levels .wp-block-post-content,
body.pmpro-login .wp-block-post-content,
body.pmpro-member-profile-edit .wp-block-post-content,
body[class*="pmpro-body-page-"] .wp-block-post-content {
	background: transparent !important;
	color: var(--vr-body, #CBD5E1) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   WP Program Dashboard (wp-program-dashboard plugin)
   Renders at #wppd-dashboard either via the lp-profile override
   (Settings::lp_profile_override_enabled === true) or via the staging
   [program_dashboard] shortcode on /dashboard/. Either way the same
   wppd-* class tree appears, and these rules carry the Nexus surfaces /
   text tokens / cyan accents.

   Specificity: anchored on body + #wppd-dashboard so we beat the
   plugin's .wppd-* class-level rules in dashboard.css without needing
   !important on every property.

   Status semantic colors are preserved (completed=green, in-progress
   /enrolled=blue→cyan, locked/not-started=muted, cert=amber, unenroll
   =red) but card surfaces, borders, and text colors come from the
   --vr-* token palette so the panel reads as Nexus on first sight.
   ════════════════════════════════════════════════════════════════════════ */

/* Body backdrop for staging /dashboard/ page (parallels the LP-profile
   body backdrop rule earlier in this file). Once the lp-profile
   override is enabled, the existing body.learnpress-profile rule takes
   over instead. */
body.page #wppd-dashboard {
	color: var(--vr-body, #CBD5E1);
}

/* Outer container */
#wppd-dashboard.wppd-dashboard {
	font-family: 'Inter', sans-serif;
	max-width: 960px;
	padding: 2rem 1rem 3rem;
	margin: 0 auto;
}

/* ── Learner header ─────────────────────────────────────────────── */
#wppd-dashboard .wppd-learner-header {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(0,242,255,0.04) inset;
}
#wppd-dashboard .wppd-avatar {
	background: rgba(0, 242, 255, 0.12);
}
#wppd-dashboard .wppd-avatar__initials {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
#wppd-dashboard .wppd-learner-name {
	color: var(--vr-contrast, #F8FAFC);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
}
#wppd-dashboard .wppd-learner-meta {
	color: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-overall-pct__label {
	color: var(--vr-muted, #94A3B8);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
#wppd-dashboard .wppd-overall-pct__value {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(0, 242, 255, 0.35);
}

/* ── Stats row (3 boxes) ────────────────────────────────────────── */
#wppd-dashboard .wppd-stat {
	background: var(--vr-surface-2, #1E293B);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	transition: border-color 0.18s ease;
}
#wppd-dashboard .wppd-stat:hover {
	border-color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-stat__value {
	color: var(--vr-contrast, #F8FAFC);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 800;
}
#wppd-dashboard .wppd-stat__label {
	color: var(--vr-muted, #94A3B8);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* ── Section label ──────────────────────────────────────────────── */
#wppd-dashboard .wppd-section-label {
	color: var(--vr-muted, #94A3B8);
	font-family: 'Orbitron', 'Inter', sans-serif;
}

/* ── Program cards ──────────────────────────────────────────────── */
#wppd-dashboard .wppd-program-card {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
	transition: border-color 0.18s ease;
}
#wppd-dashboard .wppd-program-card:hover {
	border-color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-program-header:hover {
	background: rgba(0, 242, 255, 0.05);
}
#wppd-dashboard .wppd-program-icon {
	background: rgba(0, 242, 255, 0.12);
	color: var(--vr-cyan, #00F2FF);
}
#wppd-dashboard .wppd-program-title {
	color: var(--vr-contrast, #F8FAFC);
	font-weight: 700;
}
#wppd-dashboard .wppd-program-sub {
	color: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-program-pct {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
#wppd-dashboard .wppd-expand-icon::before,
#wppd-dashboard .wppd-expand-icon::after {
	background: var(--vr-muted, #94A3B8);
}
#wppd-dashboard .wppd-program-header.is-open .wppd-expand-icon::before,
#wppd-dashboard .wppd-program-header.is-open .wppd-expand-icon::after {
	background: var(--vr-cyan, #00F2FF);
}

/* Progress bar (program-level, green→cyan/emerald gradient) */
#wppd-dashboard .wppd-prog-bar-track {
	background: rgba(255, 255, 255, 0.06);
}
#wppd-dashboard .wppd-prog-bar {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399));
}

/* ── Course rows ────────────────────────────────────────────────── */
#wppd-dashboard .wppd-course-row {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
#wppd-dashboard .wppd-course-row:last-child {
	border-bottom: none;
}

/* Step indicator pills */
#wppd-dashboard .wppd-step--completed   { background: rgba(52,199,89,0.18);  color: #6EE7B7; }
#wppd-dashboard .wppd-step--in-progress { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-step--enrolled    { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-step--not-started { background: rgba(148,163,184,0.18); color: var(--vr-muted, #94A3B8); }

/* Course name + detail */
#wppd-dashboard .wppd-course-name {
	color: var(--vr-contrast, #F8FAFC);
}
#wppd-dashboard .wppd-course-name:hover {
	color: var(--vr-cyan, #00F2FF);
	text-decoration: none;
}
#wppd-dashboard .wppd-course-name--locked {
	color: rgba(148, 163, 184, 0.6);
}
#wppd-dashboard .wppd-course-detail {
	color: var(--vr-muted, #94A3B8);
}

/* Mini progress bar (per-course) */
#wppd-dashboard .wppd-mini-bar-track {
	background: rgba(255, 255, 255, 0.08);
}
#wppd-dashboard .wppd-mini-bar {
	background: var(--vr-cyan, #00F2FF);
}

/* Status badges */
#wppd-dashboard .wppd-badge--completed   { background: rgba(52,199,89,0.18);  color: #6EE7B7; }
#wppd-dashboard .wppd-badge--in-progress { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-badge--enrolled    { background: rgba(0,242,255,0.15);  color: var(--vr-cyan, #00F2FF); }
#wppd-dashboard .wppd-badge--not-started { background: rgba(148,163,184,0.18); color: var(--vr-muted, #94A3B8); }

/* CTA button — Nexus cyan pill */
#wppd-dashboard .wppd-cta-btn {
	background: var(--vr-cyan, #00F2FF);
	color: var(--vr-base, #020617);
	font-weight: 700;
}
#wppd-dashboard .wppd-cta-btn:hover {
	background: var(--vr-contrast, #F8FAFC);
	color: var(--vr-base, #020617);
}

/* ── Certificates ───────────────────────────────────────────────── */
#wppd-dashboard .wppd-cert-row {
	background: rgba(251, 191, 36, 0.10);
	border: 1px solid rgba(251, 191, 36, 0.25);
}
#wppd-dashboard .wppd-cert-icon {
	color: #F59E0B;
}
#wppd-dashboard .wppd-cert-name {
	color: #FBBF24;
	font-weight: 700;
}
#wppd-dashboard .wppd-cert-meta {
	color: #D97706;
}

/* ── Empty state ────────────────────────────────────────────────── */
#wppd-dashboard .wppd-empty-state {
	color: var(--vr-muted, #94A3B8);
	background: var(--vr-surface, #0F172A);
	border: 1px dashed var(--vr-border, rgba(0,242,255,0.12));
	border-radius: 10px;
}


/* ════════════════════════════════════════════════════════════════════════
   WP Program Dashboard — PMPro account-page injection (.wppd-account-*)
   These rules fire on /membership-account/ once
   Settings::account_integration_enabled === true. Until then they're
   inert (the classes never appear). They mirror the dashboard palette.
   ════════════════════════════════════════════════════════════════════════ */

.wppd-account-program {
	color: var(--vr-body, #CBD5E1);
}
.wppd-account-program .wppd-acct-bar-track {
	background: rgba(255, 255, 255, 0.06);
}
.wppd-account-program .wppd-acct-bar {
	background: linear-gradient(90deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399));
}
.wppd-account-program .wppd-acct-progress {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
.wppd-account-program .wppd-acct-expiry {
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-courses {
	background: var(--vr-surface, #0F172A);
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12));
}
.wppd-account-program .wppd-acct-course {
	border-bottom: 1px solid var(--vr-border, rgba(0,242,255,0.08));
}
.wppd-account-program .wppd-acct-course:last-child {
	border-bottom: none;
}
.wppd-account-program .wppd-acct-thumb--placeholder {
	background: rgba(0, 242, 255, 0.12);
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-thumb--locked {
	background: rgba(148, 163, 184, 0.15);
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-course-name {
	color: var(--vr-contrast, #F8FAFC);
}
.wppd-account-program .wppd-acct-course-name:hover {
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-course-name--locked {
	color: rgba(148, 163, 184, 0.6);
}
.wppd-account-program .wppd-acct-course-detail {
	color: var(--vr-muted, #94A3B8);
}
.wppd-account-program .wppd-acct-status--completed {
	color: #6EE7B7;
}
.wppd-account-program .wppd-acct-status--in-progress {
	color: var(--vr-cyan, #00F2FF);
}
.wppd-account-program .wppd-acct-pct {
	color: var(--vr-cyan, #00F2FF);
	font-family: 'Orbitron', 'Inter', sans-serif;
	font-weight: 700;
}
.wppd-account-program .wppd-unenroll-btn {
	color: #FCA5A5;
}
.wppd-account-program .wppd-unenroll-btn:hover {
	color: #F87171;
}
.wppd-account-program .wppd-acct-dashboard-link {
	color: var(--vr-cyan, #00F2FF);
}

/* Unenroll confirmation panel */
.wppd-account-program .wppd-unenroll-confirm {
	background: rgba(248, 113, 113, 0.10);
	border: 1px solid rgba(248, 113, 113, 0.30);
}
.wppd-account-program .wppd-unenroll-confirm__msg {
	color: #FCA5A5;
}
.wppd-account-program .wppd-unenroll-confirm__yes {
	background: #DC2626;
	color: #F8FAFC;
	font-weight: 700;
}
.wppd-account-program .wppd-unenroll-confirm__yes:hover {
	background: #B91C1C;
	color: #F8FAFC;
}
.wppd-account-program .wppd-unenroll-confirm__no {
	color: #FCA5A5;
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 — COURSE CATALOG GRID  (UX overhaul 2026-06-14)
   ────────────────────────────────────────────────────────────────────────
   The /courses/ archive (and the "Related Course" block on single courses)
   render via the LearnPress Gutenberg block `learnpress/list-courses`.
   Live DOM:
     ul.learn-press-courses.lp-list-courses-no-css.wp-block-learn-press-courses
        [data-layout="grid"] [style="--columns:N"]
       > li.course
         > .wp-block-learnpress-course-item-template
           > .wp-block-group.has-border-color   ← inline border #e2e0db + white surface
             > .wp-block-learnpress-course-image
             > .wp-block-group (padding-30)
               h3.wp-block-learnpress-course-title > a.course-permalink > span.course-title
               .course-count-item.lp_lesson / .course-count-student
               .course-item-price (> span.free) + div.course-button-read-more > button
   `lp-list-courses-no-css` = LearnPress ships NO grid/card CSS, so we own the
   whole look. Inline styles on the card require !important to beat.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Grid container — consume LP's --columns var, gap, kill list chrome ───── */
ul.learn-press-courses[data-layout="grid"],
.wp-block-learnpress-list-courses ul.learn-press-courses[data-layout="grid"] {
	display: grid !important;
	grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)) !important;
	gap: 1.75rem !important;
	list-style: none !important;
	margin: 2rem 0 0 !important;
	padding: 0 !important;
	align-items: stretch !important;
}
ul.learn-press-courses[data-layout="grid"] > li.course {
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
}
@media (max-width: 1024px) {
	ul.learn-press-courses[data-layout="grid"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	ul.learn-press-courses[data-layout="grid"] {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
	}
}

/* ── The card box (.has-border-color wrapper) — dark surface, equal height ── */
ul.learn-press-courses > li.course > .wp-block-learnpress-course-item-template {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}
.wp-block-learnpress-course-item-template > .wp-block-group.has-border-color,
ul.learn-press-courses .wp-block-learnpress-course-item-template > .wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: linear-gradient(180deg, var(--vr-surface, #0F172A) 0%, #0B1322 100%) !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-color: var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
ul.learn-press-courses > li.course:hover > .wp-block-learnpress-course-item-template > .wp-block-group.has-border-color {
	transform: translateY(-4px) !important;
	border-color: var(--vr-cyan, #00F2FF) !important;
	box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 24px rgba(0,242,255,0.18) !important;
}

/* ── Thumbnail — fill the card top edge-to-edge, fixed aspect ─────────────── */
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-image {
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	background: #05080F !important;
	aspect-ratio: 16 / 9;
}
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-image a,
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform 0.4s ease;
}
ul.learn-press-courses > li.course:hover .wp-block-learnpress-course-image img {
	transform: scale(1.05);
}

/* ── Content column — pad, let the price/CTA row sink to the bottom ───────── */
.wp-block-learnpress-course-item-template > .wp-block-group.has-border-color > .wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	gap: 0.55rem !important;
	padding: 1.35rem 1.4rem 1.45rem !important;
}
/* Title */
.wp-block-learnpress-course-item-template h3.wp-block-learnpress-course-title {
	margin: 0 0 0.15rem !important;
	font-size: 1.12rem !important;
	line-height: 1.32 !important;
	font-weight: 800 !important;
}
.wp-block-learnpress-course-item-template h3.wp-block-learnpress-course-title a.course-permalink,
.wp-block-learnpress-course-item-template span.course-title {
	color: var(--vr-contrast, #F8FAFC) !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
}
.wp-block-learnpress-course-item-template:hover h3.wp-block-learnpress-course-title a.course-permalink,
.wp-block-learnpress-course-item-template h3.wp-block-learnpress-course-title a.course-permalink:hover,
.wp-block-learnpress-course-item-template:hover span.course-title {
	color: var(--vr-cyan, #00F2FF) !important;
}
/* Instructor + categories — muted secondary line */
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-instructor,
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-instructor *,
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-categories,
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-categories * {
	color: var(--vr-muted, #94A3B8) !important;
	font-size: 0.82rem !important;
}
.wp-block-learnpress-course-item-template .wp-block-learnpress-course-categories a:hover {
	color: var(--vr-cyan, #00F2FF) !important;
}
/* Meta counts (lessons / students) */
.wp-block-learnpress-course-item-template .course-count-item,
.wp-block-learnpress-course-item-template .course-count-student {
	color: var(--vr-body, #CBD5E1) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
}
.wp-block-learnpress-course-item-template .course-count-item i,
.wp-block-learnpress-course-item-template .course-count-student i,
.wp-block-learnpress-course-item-template [class*="course-count"] svg {
	color: var(--vr-cyan, #00F2FF) !important;
	fill: var(--vr-cyan, #00F2FF) !important;
}
/* Price + CTA row pinned to bottom */
.wp-block-learnpress-course-item-template > .wp-block-group.has-border-color > .wp-block-group > .wp-block-group:last-child {
	margin-top: auto !important;
	padding-top: 0.4rem !important;
}
.wp-block-learnpress-course-item-template .course-item-price,
.wp-block-learnpress-course-item-template .course-item-price * {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-weight: 800 !important;
}
.wp-block-learnpress-course-item-template .course-item-price .free {
	color: var(--vr-emerald, #34D399) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	font-size: 0.85rem !important;
}
/* "Enroll Now" / read-more CTA — full-width gradient pill */
.wp-block-learnpress-course-item-template .course-button-read-more {
	width: 100% !important;
}
.wp-block-learnpress-course-item-template .course-button-read-more button,
.wp-block-learnpress-course-item-template button.wp-block-learnpress-course-button-read-more {
	width: 100% !important;
	background: linear-gradient(135deg, var(--vr-cyan, #00F2FF), #34D399) !important;
	color: var(--vr-base, #020617) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 0.7rem 1rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	cursor: pointer !important;
	transition: opacity 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease !important;
}
.wp-block-learnpress-course-item-template .course-button-read-more button:hover,
.wp-block-learnpress-course-item-template button.wp-block-learnpress-course-button-read-more:hover {
	opacity: 0.92 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0,242,255,0.25) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 3 — SINGLE COURSE LANDING  (UX overhaul 2026-06-14)
   ────────────────────────────────────────────────────────────────────────
   body.single-lp_course. Gutenberg-composed: breadcrumb, h1 course-title,
   instructor, description, curriculum accordion, + a sidebar of meta blocks
   (image / price / student / duration / lesson / quiz / level) and the
   enroll form (form.enroll-course > button.lp-button.button-enroll-course).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb bar ───────────────────────────────────────────────────────── */
.single-lp_course .wp-block-learnpress-breadcrumb {
	font-size: 0.8rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--vr-muted, #94A3B8) !important;
	margin-bottom: 1rem !important;
}
.single-lp_course .wp-block-learnpress-breadcrumb a { color: var(--vr-muted, #94A3B8) !important; }
.single-lp_course .wp-block-learnpress-breadcrumb a:hover { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Hero title ───────────────────────────────────────────────────────────── */
.single-lp_course h1.wp-block-learnpress-course-title {
	font-family: var(--wp--preset--font-family--orbitron, "Orbitron", sans-serif) !important;
	font-size: clamp(1.9rem, 4vw, 3rem) !important;
	line-height: 1.12 !important;
	font-weight: 900 !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 0.6rem !important;
	text-shadow: 0 0 30px rgba(0,242,255,0.18);
}
.single-lp_course .wp-block-learnpress-course-instructor,
.single-lp_course .wp-block-learnpress-course-instructor * {
	color: var(--vr-muted, #94A3B8) !important;
}
.single-lp_course .wp-block-learnpress-course-instructor a { color: var(--vr-cyan, #00F2FF) !important; }

/* ── Course image (sidebar) — framed dark card ───────────────────────────── */
.single-lp_course .wp-block-learnpress-course-image {
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
	margin-bottom: 1.25rem !important;
}
.single-lp_course .wp-block-learnpress-course-image img { display: block; width: 100%; height: auto; }

/* ── Sidebar meta blocks (price / student / duration / lesson / quiz / level) */
.single-lp_course .wp-block-learnpress-course-price,
.single-lp_course .wp-block-learnpress-course-student,
.single-lp_course .wp-block-learnpress-course-duration,
.single-lp_course .wp-block-learnpress-course-lesson,
.single-lp_course .wp-block-learnpress-course-quiz,
.single-lp_course .wp-block-learnpress-course-level {
	color: var(--vr-body, #CBD5E1) !important;
}
.single-lp_course .wp-block-learnpress-course-price,
.single-lp_course .wp-block-learnpress-course-price * {
	color: var(--vr-contrast, #F8FAFC) !important;
	font-weight: 800 !important;
}
.single-lp_course .wp-block-learnpress-course-price .free { color: var(--vr-emerald, #34D399) !important; }
.single-lp_course [class*="wp-block-learnpress-course-"] i,
.single-lp_course [class*="wp-block-learnpress-course-"] svg {
	color: var(--vr-cyan, #00F2FF) !important;
	fill: var(--vr-cyan, #00F2FF) !important;
}

/* ── Enroll CTA — the conversion button ──────────────────────────────────── */
.single-lp_course form.enroll-course button.button-enroll-course,
.single-lp_course button.wp-block-learnpress-course-button.button-enroll-course,
.single-lp_course .wp-block-learnpress-course-button.lp-button {
	width: 100% !important;
	background: linear-gradient(135deg, var(--vr-cyan, #00F2FF), #34D399) !important;
	color: var(--vr-base, #020617) !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 1rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--orbitron, sans-serif) !important;
	font-size: 1.02rem !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	cursor: pointer !important;
	box-shadow: 0 6px 26px rgba(0,242,255,0.22) !important;
	transition: opacity 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease !important;
}
.single-lp_course form.enroll-course button.button-enroll-course:hover,
.single-lp_course .wp-block-learnpress-course-button.lp-button:hover {
	opacity: 0.93 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 34px rgba(0,242,255,0.3) !important;
}

/* ── Curriculum accordion — section headers as dark bars ──────────────────── */
.single-lp_course .lp-course-curriculum .course-curriculum-info {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 12px !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 1rem !important;
}
.single-lp_course .lp-course-curriculum .course-curriculum-info * { color: var(--vr-body, #CBD5E1) !important; }
.single-lp_course .course-curriculum .section-header,
.single-lp_course .course-curriculum .course-section__title {
	background: var(--vr-surface-2, #1E293B) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border-radius: 10px !important;
	padding: 0.85rem 1.15rem !important;
}
.single-lp_course .course-curriculum .section-title,
.single-lp_course .course-curriculum .course-section__title { font-weight: 700 !important; }

/* ── Mobile: stack the course layout, keep CTA reachable ─────────────────── */
@media (max-width: 900px) {
	.single-lp_course .lp-single-course .course-summary-sidebar,
	.single-lp_course .lp-single-course-sidebar {
		position: static !important;
		width: 100% !important;
		margin-top: 1.5rem !important;
	}
	.single-lp_course h1.wp-block-learnpress-course-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PROFILE NAV SECTIONS  (UX overhaul 2026-06-15)
   ────────────────────────────────────────────────────────────────────────
   The /my-sls-profile/ left menu is grouped into "Admin Center" (instructor)
   and "My Studies" (learner) via functions.php (learn-press/get-profile-tabs).
   The labelled headers + separator lines are drawn here as ::before. "Admin
   Center" sits on the FIRST nav item (My Catalog for instructors, My Settings
   for learners — everyone gets the section); "My Studies" on the Programs tab.
   Logout gets a top rule. Tab <li> classes are the slug, unchanged by rename.
   ════════════════════════════════════════════════════════════════════════ */
body.learnpress-profile .lp-profile-nav-tabs li:first-child::before,
body.learnpress-profile .lp-profile-nav-tabs li.programs::before {
	display: block;
	content: "";
	padding: 0.7rem 1.25rem 0.6rem;
	margin: 0.35rem 0 0.2rem;
	border-top: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25));
	border-bottom: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25));
	color: var(--vr-muted, #94A3B8);
	font-family: var(--wp--preset--font-family--orbitron, "Orbitron", sans-serif);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
body.learnpress-profile .lp-profile-nav-tabs li:first-child::before { content: "Admin Center"; }
body.learnpress-profile .lp-profile-nav-tabs li.programs::before     { content: "My Studies"; }
body.learnpress-profile .lp-profile-nav-tabs li.logout {
	border-top: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25));
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

/* ════════════════════════════════════════════════════════════════════════
   PROFILE COURSE LISTS — COMPACT MANAGEMENT ROWS  (UX overhaul 2026-06-15)
   ────────────────────────────────────────────────────────────────────────
   Profile "My Catalog" (instructor) + learner "Courses" tabs use this DOM:
     ul.profile-courses-list.learn-press-courses[data-layout="grid"][data-size="3"]
       > li.course > div.course-item[data-id]
         > div.course-thumbnail (a > div.course-img > img)
         > div.course-content
             h3.wap-course-title > a.course-permalink > span.course-title
             div.course-instructor-category  <- hidden
             div.course-wrap-meta > div.meta-item.meta-item-{duration|level|lesson|quiz|student}
             p.course-short-description      <- hidden
             div.course-info
               span.course-price > span.course-item-price > span.free
               div.course-readmore > a       <- hidden
               div.lp-wrap-btn-view-course-students > button.lp-btn-view-students
   `ul.profile-courses-list` is ONLY on the profile — Phase 2 grid rules
   (targeting .wp-block-learnpress-course-item-template) do NOT match here.
   Public archive + related-courses unaffected.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cancel Phase 2 grid for the profile list, switch to flat rows ─────── */
body.learnpress-profile ul.learn-press-courses[data-layout="grid"],
ul.profile-courses-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	list-style: none !important;
	margin: 0.5rem 0 0 !important;
	padding: 0 !important;
}
ul.profile-courses-list > li.course {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Row card ────────────────────────────────────────────────────────────── */
ul.profile-courses-list .course-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 7px 10px !important;
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 7px !important;
	min-width: 0 !important;
	transition: border-color 0.18s ease;
}
ul.profile-courses-list .course-item:hover {
	border-color: var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
}

/* ── Thumbnail — 72x52 fixed ─────────────────────────────────────────────── */
ul.profile-courses-list .course-thumbnail {
	flex: 0 0 72px !important;
	width: 72px !important;
	height: 52px !important;
	overflow: hidden !important;
	border-radius: 4px !important;
	background: rgba(0,0,0,0.3) !important;
}
ul.profile-courses-list .course-thumbnail a,
ul.profile-courses-list .course-img {
	display: block !important;
	width: 72px !important;
	height: 52px !important;
	overflow: hidden !important;
	border-radius: 4px !important;
}
ul.profile-courses-list .course-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 4px !important;
	opacity: 0.45 !important;
	filter: none !important;
}
ul.profile-courses-list .course-thumbnail img:not([src*="no-image"]) {
	opacity: 1 !important;
}

/* ── Content: grid [title + meta col 1] / [price + action col 2] ─────────── */
ul.profile-courses-list .course-content {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	grid-template-rows: auto auto !important;
	column-gap: 10px !important;
	row-gap: 1px !important;
	align-items: center !important;
}

/* Title — col 1 row 1, single-line ellipsis */
ul.profile-courses-list .wap-course-title {
	grid-column: 1 !important;
	grid-row: 1 !important;
	margin: 0 !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	min-width: 0 !important;
}
ul.profile-courses-list .wap-course-title a { color: var(--vr-contrast, #F8FAFC) !important; text-decoration: none !important; }
ul.profile-courses-list .wap-course-title a:hover { color: var(--vr-cyan, #00F2FF) !important; }
ul.profile-courses-list .wap-course-title .course-title { color: inherit !important; font-size: inherit !important; }

/* Meta — col 1 row 2, inline chips */
ul.profile-courses-list .course-wrap-meta {
	grid-column: 1 !important;
	grid-row: 2 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 2px 8px !important;
	margin: 0 !important;
	min-width: 0 !important;
	align-items: center !important;
}
ul.profile-courses-list .meta-item { display: inline-flex !important; align-items: center !important; gap: 2px !important; }
ul.profile-courses-list .course-count-item,
ul.profile-courses-list .course-count-student,
ul.profile-courses-list .course-duration,
ul.profile-courses-list .course-level {
	font-size: 0.67rem !important;
	color: var(--vr-muted, #94A3B8) !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}

/* Info — col 2 spanning both rows, right-aligned */
ul.profile-courses-list .course-info {
	grid-column: 2 !important;
	grid-row: 1 / 3 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 4px !important;
}
ul.profile-courses-list .course-price,
ul.profile-courses-list .course-item-price,
ul.profile-courses-list .course-item-price .free {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	color: var(--vr-emerald, #34D399) !important;
	white-space: nowrap !important;
}

/* "View List Students" — ghost pill; overrides global .lp-button cyan fill */
ul.profile-courses-list .lp-wrap-btn-view-course-students { display: block !important; }
ul.profile-courses-list .lp-btn-view-students {
	display: inline-block !important;
	font-size: 0.62rem !important;
	padding: 2px 7px !important;
	background: transparent !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	color: var(--vr-cyan, #00F2FF) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	font-family: inherit !important;
	line-height: 1.6 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 0.15s ease;
}
ul.profile-courses-list .lp-btn-view-students:hover {
	background: rgba(0,242,255,0.08) !important;
	color: var(--vr-cyan, #00F2FF) !important;
}

/* ── Hide marketing cruft ────────────────────────────────────────────────── */
ul.profile-courses-list .course-short-description,
ul.profile-courses-list .course-readmore,
ul.profile-courses-list .course-instructor-category { display: none !important; }

/* ── Course Builder link in the filter bar — small gradient pill ─────────── */
body.learnpress-profile .learn-press-course-builder-link {
	display: inline-block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	padding: 4px 12px !important;
	background: linear-gradient(135deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399)) !important;
	color: var(--vr-base, #020617) !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	transition: opacity 0.18s ease;
}
body.learnpress-profile .learn-press-course-builder-link:hover { opacity: 0.85 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   COURSE CARD REDESIGN — dual price + dual CTA + PMPro program attribution
   Prototype on blog 6 (vrschool.online); wired to real PMPro data in phase 2.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide student count block entirely */
.wp-block-learnpress-course-student { display: none !important; }

/* ── PMPro attribution line ──────────────────────────────────────────────── */
.sls-course-program {
	font-size: 0.7rem;
	color: var(--vr-muted, #94A3B8);
	border-left: 2px solid rgba(0,242,255,0.28);
	padding: 4px 8px;
	line-height: 1.5;
	background: rgba(0,242,255,0.04);
	border-radius: 0 3px 3px 0;
	margin-bottom: 2px;
}
.sls-course-program a {
	color: var(--vr-cyan, #00F2FF);
	text-decoration: none;
	font-weight: 600;
}
.sls-course-program a:hover { text-decoration: underline; }
.sls-prog-sep { color: var(--vr-muted, #94A3B8); margin: 0 3px; }

/* ── Dual price row ──────────────────────────────────────────────────────── */
.sls-course-prices {
	display: flex;
	background: rgba(255,255,255,0.04);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 2px;
}
.sls-price-item {
	flex: 1;
	text-align: center;
	padding: 7px 8px;
}
.sls-price-item + .sls-price-item {
	border-left: 1px solid rgba(255,255,255,0.07);
}
.sls-price-label {
	display: block;
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vr-muted, #94A3B8);
	margin-bottom: 2px;
}
.sls-price-val {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
}
.sls-price-course .sls-price-val { color: var(--vr-emerald, #34D399); }
.sls-price-prog   .sls-price-val { color: var(--vr-cyan,    #00F2FF); }
.sls-price-val small {
	font-size: 0.62em;
	font-weight: 400;
	color: var(--vr-muted, #94A3B8);
}

/* ── Dual action buttons ─────────────────────────────────────────────────── */
.sls-card-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sls-btn {
	display: block;
	text-align: center;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	transition: opacity 0.18s;
	cursor: pointer;
	line-height: 1.2;
}
.sls-btn:hover { opacity: 0.84; }
.sls-btn-program {
	background: linear-gradient(135deg, var(--vr-cyan, #00F2FF), var(--vr-emerald, #34D399));
	color: #020617 !important;
}
.sls-btn-course {
	background: transparent;
	border: 1px solid rgba(52,211,153,0.35);
	color: var(--vr-emerald, #34D399) !important;
}
.sls-btn-course:hover { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.6); }

/* PMPro group filter dropdown on /courses/ */
.sls-group-filter-wrap {
	display: inline-flex;
	align-items: center;
}
.sls-group-filter {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--lp-border-color, rgba(0,242,255,0.12));
	border-radius: var(--lp-border-radius, 5px);
	padding: 8px 32px 8px 16px;
	font-size: inherit;
	line-height: 1.1;
	box-shadow: none;
	background-color: var(--vr-surface, #0F172A);
	color: var(--vr-body, #CBD5E1);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='18px' height='10px' viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1,1)' stroke='%2300F2FF' stroke-width='2'%3E%3Cpolyline points='0 0 8 8 16 0'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 0.8em;
}
.sls-group-filter:focus {
	border-color: var(--lp-primary-color, #00F2FF);
	outline: 0;
}
.sls-group-filter option {
	background: var(--vr-navy, #050E1B);
	color: var(--vr-body, #CBD5E1);
}

/* ── Courses page: sticky right sidebar ─────────────────────────────────────── */
.wp-block-columns.alignwide > .wp-block-column:last-child {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + 20px);
	align-self: flex-start;
}

/* Category filter list: scrollable, height matched to course grid by JS */
.lp-course-filter-category {
	overflow-y: auto;
	max-height: 480px; /* fallback before JS measurement */
	padding-right: 4px;
	scroll-behavior: smooth;
}

/* Thin teal scrollbar */
.lp-course-filter-category::-webkit-scrollbar       { width: 4px; }
.lp-course-filter-category::-webkit-scrollbar-track { background: var(--vr-navy, #050E1B); }
.lp-course-filter-category::-webkit-scrollbar-thumb {
	background: rgba(0, 242, 255, 0.45);
	border-radius: 2px;
}
.lp-course-filter-category::-webkit-scrollbar-thumb:hover {
	background: var(--lp-primary-color, #00F2FF);
}

/* ── Single-course right panel: hide unwanted meta rows ─────────────────── */
/* LP4 block-based sidebar — these target the Gutenberg block wrappers and
   the legacy meta selectors as a belt-and-suspenders fallback. */
.wp-block-learnpress-course-quiz  { display: none !important; }   /* Quiz: row */
.wp-block-learnpress-course-level { display: none !important; }   /* Level: row + icon */
.meta-item.meta-item-level        { display: none !important; }   /* LP3 legacy */
.course-count-item.lp_quiz        { display: none !important; }   /* LP3 legacy */

/* Strip "Lesson:" label — keep only the count ("8 Lessons").
   Hides the icon + label span; the .info-meta-right count stays visible. */
.wp-block-learnpress-course-lesson .info-meta-left { display: none !important; }

/* "Purchase Program" membership pill — stretch to full width, matching "Buy Now" */
.btn-buy-via-member-ship             { display: block !important; width: 100% !important; }
.btn-buy-via-member-ship .lp-button  { width: 100% !important; text-align: center !important; }

/* ════════════════════════════════════════════════════════════════════════
   LearnPress single-course CHECKOUT (/lp-checkout/, body.learnpress-checkout)
   Added 2026-06-15 — the LP checkout page now loads via vrschool_dsl_is_app_view().
   Deep-space dark theming for the buy-just-this-course flow.
   ════════════════════════════════════════════════════════════════════════ */
body.learnpress-checkout {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-body, #CBD5E1) !important;
}
body.learnpress-checkout .lp-content-area { max-width: 1080px; margin: 2.5rem auto; padding: 0 1.25rem; }
body.learnpress-checkout h1,
body.learnpress-checkout h2,
body.learnpress-checkout h3,
body.learnpress-checkout h4 { color: var(--vr-contrast, #F8FAFC) !important; }

/* Cards / blocks */
body.learnpress-checkout .lp-checkout-block,
body.learnpress-checkout #checkout-order,
body.learnpress-checkout #checkout-payment,
body.learnpress-checkout .lp-checkout-user-form,
body.learnpress-checkout .learn-press-checkout-user-form {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 14px !important;
	padding: 1.5rem 1.75rem !important;
	margin-bottom: 1.5rem !important;
}

/* Two-column form/order on wide screens */
@media (min-width: 900px) {
	body.learnpress-checkout .lp-checkout-form { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.75rem; align-items: start; }
	body.learnpress-checkout .lp-checkout-form > #checkout-order,
	body.learnpress-checkout .lp-checkout-form > #checkout-payment { grid-column: 2; }
}

/* Form fields */
body.learnpress-checkout label { color: var(--vr-body, #CBD5E1) !important; font-weight: 600; }
body.learnpress-checkout input[type=text],
body.learnpress-checkout input[type=email],
body.learnpress-checkout input[type=password],
body.learnpress-checkout input[type=tel],
body.learnpress-checkout textarea,
body.learnpress-checkout select {
	background: var(--vr-base, #020617) !important;
	color: var(--vr-contrast, #F8FAFC) !important;
	border: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important;
	border-radius: 8px !important;
	padding: 0.7rem 0.9rem !important;
	width: 100%;
}
body.learnpress-checkout input:focus,
body.learnpress-checkout textarea:focus,
body.learnpress-checkout select:focus {
	outline: none !important;
	border-color: var(--vr-cyan, #00F2FF) !important;
	box-shadow: 0 0 0 3px rgba(0,242,255,0.15) !important;
}
body.learnpress-checkout ::placeholder { color: #64748b !important; }

/* Order review table */
body.learnpress-checkout .lp-checkout-order table,
body.learnpress-checkout #checkout-order table { width: 100%; border-collapse: collapse; }
body.learnpress-checkout .lp-checkout-order th,
body.learnpress-checkout .lp-checkout-order td,
body.learnpress-checkout #checkout-order th,
body.learnpress-checkout #checkout-order td {
	color: var(--vr-body, #CBD5E1) !important;
	border-bottom: 1px solid rgba(255,255,255,0.07) !important;
	padding: 0.7rem 0.4rem !important; text-align: left;
}
body.learnpress-checkout .order-total td,
body.learnpress-checkout .order-total th { color: var(--vr-contrast, #F8FAFC) !important; font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--vr-border-mid, rgba(0,242,255,0.25)) !important; }

/* Payment methods */
body.learnpress-checkout .lp-payment-method,
body.learnpress-checkout .payment-methods li {
	list-style: none; background: var(--vr-base, #020617) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 10px !important; padding: 0.9rem 1.1rem !important; margin-bottom: 0.75rem !important;
}
body.learnpress-checkout .lp-payment-method.selected,
body.learnpress-checkout .lp-payment-method:has(input:checked) { border-color: var(--vr-cyan, #00F2FF) !important; background: rgba(0,242,255,0.05) !important; }

/* Place-order button + LP buttons + links */
body.learnpress-checkout #learn-press-checkout-place-order,
body.learnpress-checkout .lp-button,
body.learnpress-checkout button[name='checkout-place-order'] {
	background: var(--vr-cyan, #00F2FF) !important; color: #04121A !important;
	border: none !important; border-radius: 100px !important;
	padding: 0.9rem 2rem !important; font-weight: 800 !important; cursor: pointer;
	transition: filter .15s, transform .12s;
}
body.learnpress-checkout #learn-press-checkout-place-order:hover,
body.learnpress-checkout .lp-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.learnpress-checkout a { color: var(--vr-cyan, #00F2FF) !important; }
body.learnpress-checkout .lp-guest-checkout-notice,
body.learnpress-checkout .lp-terms-and-conditions { color: var(--vr-muted, #94A3B8) !important; }

/* Checkout payment gateway inner box (Stripe) — addon ships it white with
   near-invisible light text. Force dark + legible. (2026-06-15) */
body.learnpress-checkout .lp-payment-method label,
body.learnpress-checkout .lp-payment-method .payment-method-form {
	background: var(--vr-surface-2, #1E293B) !important;
}
body.learnpress-checkout .lp-payment-method label,
body.learnpress-checkout .lp-payment-method .payment-method-form,
body.learnpress-checkout .lp-payment-method .payment-method-form p,
body.learnpress-checkout .lp-payment-method .payment-method-form span,
body.learnpress-checkout .lp-payment-method .payment-method-form strong,
body.learnpress-checkout .lp-payment-method .payment-method-form li,
body.learnpress-checkout .lp-payment-method .payment-method-form a {
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-checkout .lp-payment-method .payment-method-form {
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	border-radius: 8px !important;
	padding: 0.9rem 1.1rem !important;
	margin-top: 0.6rem !important;
}
/* keep the Stripe brand/logo link readable on the dark header */
body.learnpress-checkout .lp-payment-method label a { color: var(--vr-cyan, #00F2FF) !important; }

/* Order-received ('Thank you') details table — was light labels + white zebra
   rows (illegible). Force dark + legible. (2026-06-15) */
body.learnpress-checkout .order_details {
	width: 100%; border-collapse: collapse; margin-top: 1.25rem; background: transparent !important;
}
body.learnpress-checkout .order_details tr,
body.learnpress-checkout .order_details th,
body.learnpress-checkout .order_details td {
	background: var(--vr-surface, #0F172A) !important;
	border: 1px solid var(--vr-border, rgba(0,242,255,0.12)) !important;
	padding: 0.85rem 1.1rem !important;
	vertical-align: middle;
}
body.learnpress-checkout .order_details th {
	color: var(--vr-muted, #94A3B8) !important;
	font-weight: 600 !important; text-align: left; width: 32%;
}
body.learnpress-checkout .order_details td,
body.learnpress-checkout .order_details td * {
	color: var(--vr-contrast, #F8FAFC) !important;
}
body.learnpress-checkout .order_details a { color: var(--vr-cyan, #00F2FF) !important; }
/* keep the cyan CONTINUE pill text dark */
body.learnpress-checkout .order_details .lp-button,
body.learnpress-checkout .order_details a.button { color: #04121A !important; }