/* ============================================================================
   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 ─────────────────────────────────────────────────────────── */
.lp-user-profile,
.lp-profile-content,
#profile-content,
.lp-profile-nav {
	background-color: transparent !important;
	color: var(--vr-contrast, #F8FAFC) !important;
}
.lp-user-profile .lp-profile-nav-tabs li a { color: var(--vr-body, #CBD5E1) !important; }
.lp-user-profile .lp-profile-nav-tabs li.active a,
.lp-user-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 !important;
}
body #popup-course:not(.vr-sb-collapsed) #popup-content,
body #popup-course:not(.vr-sb-collapsed) #popup-footer {
	margin-left: 320px !important;
}
#popup-content {
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
body #popup-course.vr-sb-collapsed #popup-content,
body #popup-course.vr-sb-collapsed #popup-footer {
	margin-left: 0 !important;
}
@media (max-width: 782px) {
	#popup-sidebar { z-index: 55 !important; }
	#popup-content, #popup-footer { margin-left: 0 !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; }