/*
 * MC LearnPress UI — lesson / quiz player
 * Handle: mc-lp-player  (depends on mc-lp-base → mc-lp-tokens; loaded next to
 * mc-lp-curriculum, which styles the accordion tree itself)
 *
 * Figma 3274:15751. One shell, two bodies: the lesson pane
 * (`.mc-player__pane--lesson`) and the quiz pane (`.mc-player__pane--quiz`)
 * differ only inside the main column — header, sidebar and prev/next are shared.
 *
 * DOM this file styles is emitted by:
 *   templates/single-course/content-item/popup-header.php    #popup-header
 *   templates/single-course/content-item/popup-sidebar.php   #popup-sidebar
 *   templates/single-course/content-item/popup-content.php   #popup-content
 *   templates/single-course/content-item/popup-footer.php    #popup-footer
 *   templates/single-course/content-item/nav.php             .mc-player__nav
 *   templates/single-course/content-item.php                 #learn-press-content-item
 *   templates/single-course/content-item-lp_lesson.php       .mc-player__pane--lesson
 *   templates/single-course/content-item-lp_quiz.php         .mc-player__pane--quiz
 * plus the state classes assets/js/player.js toggles (documented in §7).
 *
 * `#popup-course` is LearnPress's own wrapper (`single-course/content-single-item.php`,
 * not overridable from a plugin) and is used here as the grid container.
 *
 * Rules: logical properties only — zero physical `left`/`right`; variables only;
 * breakpoints hard-coded 640 / 768 / 1024 / 1280.
 *
 * Contents
 *   1. Shell grid + LearnPress resets
 *   2. Header & breadcrumb
 *   3. Main column
 *   4. Video frame
 *   5. Description card & lesson actions
 *   6. Prev / next navigation
 *   7. Sidebar card
 *   8. Curriculum overrides (player-specific only)
 *   9. Mobile drawer
 *  10. Quiz — CSS-only restyle of the React app
 *  11. Responsive
 */

:root {
	/* Sidebar column width at ≥1024. Themes may override this one value. */
	--mc-player-aside: 340px;
	/* Drawer width below 1024; also drives the closed off-screen offset so no
	   physical transform is needed to hide it. */
	--mc-player-drawer-width: min(88vw, 380px);
}

/* ==========================================================================
   1. Shell grid + LearnPress resets

   LearnPress ships its own layout for the player wrapper (absolute/fixed
   positioning, full-viewport panes, floats). Those are neutralised first so the
   grid below is predictable regardless of load order.
   ========================================================================== */

.mc-lp #popup-course,
.mc-lp #popup-header,
.mc-lp #popup-sidebar,
.mc-lp #popup-content,
.mc-lp #popup-footer,
.mc-lp #learn-press-content-item,
.mc-lp .content-item-scrollable,
.mc-lp .content-item-wrap {
	position: static;
	float: none;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
	overflow: visible;
}

/* LearnPress prints a bare checkbox toggle for its own sidebar. popup-header.php
   does not call that hook, but a theme might; keep it out of the layout. */
.mc-lp #sidebar-toggle,
.mc-lp .course-item-nav > .lp-icon-arrow-circle-left,
.mc-lp .course-item-nav > .lp-icon-arrow-circle-right {
	display: none !important;
}

.mc-lp #popup-course {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"header"
		"main"
		"footer";
	row-gap: var(--mc-space-5);
	width: 100%;
	max-width: var(--mc-container);
	margin-inline: auto;
	padding-inline: var(--mc-container-gutter);
	padding-block: var(--mc-space-5) var(--mc-space-12);
	background: var(--mc-color-bg);
}

.mc-lp .mc-player__header {
	grid-area: header;
}

.mc-lp .mc-player__main {
	grid-area: main;
	min-width: 0;
}

.mc-lp .mc-player__footer {
	grid-area: footer;
	min-width: 0;
}

/*
 * ≥1024: two columns. In RTL the FIRST grid column resolves to the visually
 * right-hand side, which is exactly where the Figma puts the sidebar — so the
 * aside is column 1 and no direction-specific override exists anywhere.
 */
@media (min-width: 1024px) {
	.mc-lp #popup-course {
		grid-template-columns: var(--mc-player-aside) minmax(0, 1fr);
		grid-template-areas:
			"header header"
			"aside  main"
			"aside  footer";
		align-items: start;
		column-gap: var(--mc-space-6);
		row-gap: var(--mc-space-5);
	}

	.mc-lp .mc-player__aside {
		grid-area: aside;
	}
}

@media (min-width: 1280px) {
	:root {
		--mc-player-aside: 360px;
	}
}

/* ==========================================================================
   2. Header & breadcrumb
   ========================================================================== */

.mc-lp .mc-player__header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-4);
	flex-wrap: wrap;
	min-height: var(--mc-tap-target);
}

.mc-lp .mc-player__breadcrumb {
	min-width: 0;
	flex: 1 1 auto;
}

.mc-lp .mc-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mc-space-1-5);
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	color: var(--mc-color-text-muted);
}

.mc-lp .mc-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	min-width: 0;
}

.mc-lp .mc-breadcrumb__link {
	color: var(--mc-color-text-muted);
	font-weight: var(--mc-font-weight-medium);
}

.mc-lp .mc-breadcrumb__link:hover,
.mc-lp .mc-breadcrumb__link:focus-visible {
	color: var(--mc-color-primary);
	text-decoration: underline;
}

.mc-lp .mc-breadcrumb__current {
	display: inline-block;
	max-width: 42ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-breadcrumb__sep {
	display: inline-flex;
	color: var(--mc-color-text-subtle);
}

.mc-lp .mc-player__crumb-sep {
	width: var(--mc-icon-size-sm);
	height: var(--mc-icon-size-sm);
}

/* The drawer trigger only exists below the two-column breakpoint. */
.mc-lp .mc-player__drawer-toggle {
	flex: none;
}

@media (min-width: 1024px) {
	.mc-lp .mc-player__drawer-toggle {
		display: none;
	}
}

/* ==========================================================================
   3. Main column
   ========================================================================== */

.mc-lp .mc-player__item,
.mc-lp .mc-player__item-scroll,
.mc-lp .mc-player__item-wrap {
	display: block;
	min-width: 0;
}

/* Figma 3274:15799 — 32px between the video and the description card. */
.mc-lp .mc-player__pane {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-8);
	min-width: 0;
}

.mc-lp .mc-player__pane-actions:empty {
	display: none;
}

.mc-lp .mc-player__pane-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mc-space-3);
	margin-block-start: var(--mc-space-6);
}

/* ==========================================================================
   4. Video frame

   `.mc-media--video` (base.css) already supplies `aspect-ratio: 16 / 9` and
   absolutely fills iframe/video children, so no fixed heights are introduced
   here — only the overlay title and the phone full-bleed treatment.
   ========================================================================== */

.mc-lp .mc-player__video {
	position: relative;
	min-width: 0;
}

.mc-lp .mc-player__video-frame {
	background: var(--mc-color-dark-blue-600);
	box-shadow: var(--mc-shadow-md);
}

/* player.js adds `.is-ended` when a self-hosted lesson video finishes. */
.mc-lp .mc-player__video-frame.is-ended {
	box-shadow: var(--mc-shadow-md), 0 0 0 2px var(--mc-color-primary);
}

.mc-lp .mc-player__video-title {
	position: absolute;
	inset-block-start: var(--mc-space-4);
	inset-inline-start: var(--mc-space-4);
	z-index: 2;
	max-width: calc(100% - var(--mc-space-8));
	margin: 0;
	padding-block: var(--mc-space-1-5);
	padding-inline: var(--mc-space-3-5);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-dark-blue-600);
	background: color-mix(in srgb, var(--mc-color-dark-blue-600) 72%, transparent);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Never intercept clicks meant for the player controls. */
	pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {
	.mc-lp .mc-player__video-title {
		backdrop-filter: blur(var(--mc-blur-xl));
	}
}

/* ==========================================================================
   5. Description card & lesson actions

   `content-lesson/content.php` is loaded through `Template::get_frontend_template()`
   and therefore cannot be overridden from a plugin — its
   `.content-item-description` / `.lesson-description` markup is restyled here
   rather than replaced.
   ========================================================================== */

/*
 * Figma 3705:13867 — the card is 16px top / 32px inline / 32px bottom, and the
 * title sits only 8px above its paragraph.
 */
.mc-lp .mc-player__description {
	gap: var(--mc-space-2);
	padding: var(--mc-space-4) var(--mc-space-8) var(--mc-space-8);
}

.mc-lp .mc-player__description .course-item-title,
.mc-lp .mc-player__description .lesson-title {
	margin: 0;
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-lg);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-dark-blue-600);
}

.mc-lp .mc-player__description .content-item-description,
.mc-lp .mc-player__description .lesson-description {
	color: var(--mc-color-slate-600);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
}

.mc-lp .mc-player__description .content-item-description > :last-child {
	margin-block-end: 0;
}

.mc-lp .mc-player__description img,
.mc-lp .mc-player__description iframe {
	border-radius: var(--mc-radius-md);
}

/* Materials list + "Complete" / "Finish course" buttons. */
.mc-lp .mc-player__pane-actions .lp-button,
.mc-lp .mc-player__pane-actions button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mc-space-10);
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-8);
	border: 1px solid transparent;
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-medium);
	cursor: pointer;
}

.mc-lp .mc-player__pane-actions .lp-button:hover,
.mc-lp .mc-player__pane-actions button[type="submit"]:hover {
	background: var(--mc-color-primary-hover);
}

.mc-lp .mc-player__pane-actions .lp-material-title,
.mc-lp .mc-player__pane-actions .course-material-table {
	width: 100%;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

/* ==========================================================================
   6. Prev / next navigation      Figma 3705:13875 (prev) · 3705:13874 (next)

   DOM order is prev → next (nav.php). With `space-between` and no `order`
   declarations, prev lands on the inline start and next on the inline end —
   which in an RTL page renders prev on the visual right and next on the visual
   left, matching the Figma. If a site needs them swapped, the whole change is:
   `.mc-player__nav { flex-direction: row-reverse; }`

   Measured from the Figma buttons:
     height 40 · radius full · gap 4 · icon 24 · label 14/24 medium
     padding-inline 28 on the chevron side, 32 on the label side
     prev = outline  (1px #0f3176 border, #0f3176 label, transparent fill)
     next = filled   (#0f3176 fill, white label)

   Both colour pairs are ALREADY correct in base.css as `.mc-btn--secondary` and
   `.mc-btn`. Nothing here picks a different colour — §6.1 stops LearnPress from
   repainting them and §6.3 restores them where a bare-element rule outranks the
   primitive. Sizing (40px pill) is genuinely nav-specific and is set in §6.2.
   ========================================================================== */

/* --- 6.1 Undo LearnPress -------------------------------------------------
   `learnpress/assets/css/learnpress.css` styles this row through `#popup-footer`,
   so every rule below outranks a plain-class selector of ours (1 id + 1–2
   classes vs our 2 classes). Left alone it:

     · hides the lesson title outright     `.course-item-nav__name { display: none }`
     · injects a grey "lp-icon" triangle   `.prev::before  { content: "\f0d9" }`
                                           `.next::before  { content: "\f0da" }`
     · reverses the next button            `.next { flex-direction: row-reverse }`
     · inflates both to 3.125em line-height
     · repaints the labels #666 / #999

   which is precisely the "bad icon and no text" the buttons shipped with. Each
   counter-rule below is prefixed with `.mc-lp` (a body class) so it wins on
   specificity rather than on load order. Remove this block and the regression
   comes straight back.
   ------------------------------------------------------------------------ */

.mc-lp #popup-footer .course-item-nav .prev,
.mc-lp #popup-footer .course-item-nav .next {
	display: inline-flex;
	flex-direction: row;
	line-height: var(--mc-leading-base);
	text-align: center;
}

.mc-lp #popup-footer .course-item-nav .prev::before,
.mc-lp #popup-footer .course-item-nav .next::before {
	content: none;
}

/* The lesson title — the whole point of the button. */
.mc-lp #popup-footer .course-item-nav__name {
	position: static;
	display: block;
	width: auto;
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* --- 6.2 The buttons ------------------------------------------------------ */

.mc-lp .mc-player__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-4);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.mc-lp .mc-player__nav-link {
	gap: var(--mc-space-1);
	max-width: 46%;
	/* Every button in this design is 40px tall; `--mc-btn-height` is still 48. */
	min-height: var(--mc-space-10);
	padding-block: var(--mc-space-2);
	border-radius: var(--mc-radius-full);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-medium);
}

/*
 * 28px on the chevron side, 32px on the label side. The chevron is at the
 * inline START for prev and the inline END for next (nav.php DOM order), so the
 * two declarations are mirror images and neither needs a `[dir]` override.
 */
.mc-lp .mc-player__nav-link--prev {
	padding-inline: calc(var(--mc-space-8) - var(--mc-space-1)) var(--mc-space-8);
}

.mc-lp .mc-player__nav-link--next {
	padding-inline: var(--mc-space-8) calc(var(--mc-space-8) - var(--mc-space-1));
}

/* --- 6.3 Restore the primitive's colours on anchor buttons ----------------
   These four rules do NOT choose colours — they re-state the exact values
   `.mc-btn` and `.mc-btn--secondary` already declare in base.css, because a
   bare-element rule outranks the primitive:

     .mc-lp a   { color: var(--mc-color-primary) }   → (0,1,1)
     .mc-btn    { color: var(--mc-color-text-invert) } → (0,1,0)   ← loses

   The nav buttons are `<a>`, so the FILLED next button was painting
   `--mc-color-primary` text on its `--mc-color-primary` fill: dark blue on dark
   blue, i.e. an invisible label. Same tie on `:hover`.

   The real fix belongs in base.css — bump `.mc-btn` to `.mc-lp .mc-btn` (0,2,0)
   or add `.mc-lp a.mc-btn`. Once that lands, this block is redundant and can be
   deleted wholesale; it will not conflict in the meantime.
   ------------------------------------------------------------------------ */

.mc-lp a.mc-player__nav-link,
.mc-lp a.mc-player__nav-link:hover,
.mc-lp a.mc-player__nav-link:focus-visible {
	color: var(--mc-color-text-invert);
}

.mc-lp a.mc-player__nav-link--prev {
	color: var(--mc-color-primary);
}

.mc-lp a.mc-player__nav-link--prev:hover,
.mc-lp a.mc-player__nav-link--prev:focus-visible {
	color: var(--mc-color-primary-hover);
}

.mc-lp .mc-player__nav-name {
	display: block;
	max-width: 22ch;
	min-width: 0;
}

.mc-lp .mc-player__nav-icon {
	width: var(--mc-icon-size-lg);
	height: var(--mc-icon-size-lg);
	flex: none;
}

/* Keeps the single remaining button pinned to its own edge. */
.mc-lp .mc-player__nav-spacer {
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: 1px;
}

/* ==========================================================================
   7. Sidebar card
   ========================================================================== */

.mc-lp .mc-player__aside {
	min-width: 0;
}

.mc-lp .mc-player__aside-inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.mc-lp .mc-player__card {
	min-height: 0;
	/* .mc-card is already flex-column with overflow hidden. */
}

/* Figma 3657:15596 — 16px padding, 16px between title / progress / stats. */
.mc-lp .mc-player__card-head {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-4);
	flex: none;
	padding: var(--mc-space-4);
	border-block-end: 1px solid var(--mc-color-border);
}

.mc-lp .mc-player__course-title {
	margin: 0;
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
	text-align: center;
	color: var(--mc-color-text);
}

.mc-lp .mc-player__course-title a {
	color: inherit;
}

.mc-lp .mc-player__course-title a:hover,
.mc-lp .mc-player__course-title a:focus-visible {
	color: var(--mc-color-primary);
}

/* Figma 3657:15608 — 6px between the "12% نسبه اكتمال الدوره" line and the bar. */
.mc-lp .mc-player__progress {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1-5);
}

.mc-lp .mc-player__progress-label {
	display: flex;
	align-items: baseline;
	gap: var(--mc-space-1-5);
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	color: var(--mc-color-slate-600);
}

.mc-lp .mc-player__progress-value {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-primary);
}

/*
 * Figma 3657:15598 — the three counters spread across the full card width, at
 * 14px. They were 12px and left-packed, which read as a cramped afterthought.
 */
.mc-lp .mc-player__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-2);
	margin: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	color: var(--mc-color-slate-600);
}

.mc-lp .mc-player__stat {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1);
}

.mc-lp .mc-player__stat-label {
	font-weight: var(--mc-font-weight-semibold);
	color: var(--mc-color-dark-blue-600);
}

.mc-lp .mc-player__stat-label::after {
	content: ":";
}

.mc-lp .mc-player__stat-value {
	font-weight: var(--mc-font-weight-medium);
	color: var(--mc-color-slate-600);
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-player__curriculum {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

@media (min-width: 1024px) {
	/*
	 * Sticky column: the card fills the viewport and the curriculum — not the
	 * page — is what scrolls. `.mc-sticky` (base.css) supplies the stickiness
	 * and lives on `.mc-player__aside`, the GRID ITEM — see the note in
	 * popup-sidebar.php. Putting it on `-inner` gives it a containing block
	 * sized to its own content (the grid is `align-items: start`), i.e. zero
	 * travel, and it silently never sticks.
	 *
	 * The viewport budget subtracts the same header offset `.mc-sticky` adds,
	 * so the card is never taller than the space it can actually occupy.
	 */
	.mc-lp .mc-player__aside-inner {
		max-height: calc(100vh - var(--mc-lp-header-height, 0px) - (var(--mc-sticky-top) * 2));
	}

	.mc-lp .mc-player__card {
		max-height: 100%;
	}
}

/* ==========================================================================
   8. Curriculum overrides — player-specific only

   curriculum.css owns the accordion structure and the four item states in both
   placements. Only the handful of things that depend on living inside the
   sidebar card belong here.
   ========================================================================== */

.mc-lp .mc-player__curriculum .mc-curriculum {
	/* The card supplies the frame; the tree sits flush inside it. */
	border: 0;
}

.mc-lp .mc-player__curriculum .mc-curriculum__footer {
	margin-block: var(--mc-space-3);
	padding-inline: var(--mc-space-4);
}

/* The viewed row has to stay findable while scrolling a long tree. */
.mc-lp .mc-player__curriculum .mc-curriculum__item.is-current {
	position: relative;
	scroll-margin-block: var(--mc-space-8);
}

.mc-lp .mc-player__curriculum .mc-curriculum__item.is-locked .mc-curriculum__link {
	pointer-events: none;
}

/* ==========================================================================
   9. Mobile drawer  (<1024)

   State owned by assets/js/player.js:
     · `.is-open`                on `[data-mc-player-sidebar]` (= .mc-player__aside)
     · `hidden` attribute        on `[data-mc-player-drawer-backdrop]`
     · `.mc-player-drawer-open`  on <html>  (scroll lock — the one rule in this
                                             plugin not scoped under `.mc-lp`,
                                             because it lands on the root element)
     · `role`/`aria-modal`       set on open, removed on close

   Hiding uses `inset-inline-start`, not a transform: there is no logical
   transform, and a `translateX` would need a physical `[dir="rtl"]` override.
   ========================================================================== */

.mc-lp .mc-player__drawer-head {
	display: none;
}

.mc-lp .mc-player__drawer-backdrop {
	display: none;
}

@media (max-width: 1023px) {
	.mc-lp .mc-player__aside {
		position: fixed;
		inset-block: 0;
		inset-inline-start: calc(var(--mc-player-drawer-width) * -1);
		z-index: 1000;
		width: var(--mc-player-drawer-width);
		max-width: 100%;
		background: var(--mc-color-bg);
		box-shadow: var(--mc-shadow-lg);
		visibility: hidden;
		transition: inset-inline-start var(--mc-transition), visibility var(--mc-transition);
	}

	.mc-lp .mc-player__aside.is-open {
		inset-inline-start: 0;
		visibility: visible;
	}

	.mc-lp .mc-player__aside-inner {
		height: 100%;
		max-height: 100%;
	}

	.mc-lp .mc-player__card {
		height: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.mc-lp .mc-player__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mc-space-3);
		flex: none;
		padding-block: var(--mc-space-3);
		padding-inline: var(--mc-space-4);
		border-block-end: 1px solid var(--mc-color-border);
	}

	.mc-lp .mc-player__drawer-title {
		margin: 0;
		font-size: var(--mc-font-size-base);
		line-height: var(--mc-leading-base);
		font-weight: var(--mc-font-weight-bold);
	}

	.mc-lp .mc-player__drawer-close {
		flex: none;
		min-height: var(--mc-tap-target);
	}

	.mc-lp .mc-player__drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: var(--mc-color-dark-blue-600);
		background: color-mix(in srgb, var(--mc-color-dark-blue-600) 55%, transparent);
		opacity: 0.55;
	}

	@supports (background: color-mix(in srgb, red 50%, transparent)) {
		.mc-lp .mc-player__drawer-backdrop {
			opacity: 1;
		}
	}

	.mc-lp .mc-player__drawer-backdrop[hidden] {
		display: none;
	}
}

/* Scroll lock. Deliberately unscoped: player.js sets the class on <html>. */
.mc-player-drawer-open,
.mc-player-drawer-open body {
	overflow: hidden;
	touch-action: none;
}

/* ==========================================================================
   10. Quiz — CSS-only restyle of the React app

   `content-quiz/js.php` mounts LearnPress's React quiz on
   `#learn-press-quiz-app`; none of its markup is template-controllable, so
   everything below is scoped under the pane class this plugin does own and
   works purely on LearnPress's class names.

   Out of reach by design: third-party question-type add-ons, the icon-font
   glyphs, and the result circle's animated `stroke-dashoffset` (set inline by
   JS — only its colour and width are styled here).
   ========================================================================== */

/* Same card metrics as the lesson description, so the two panes line up. */
.mc-lp .mc-player__quiz {
	gap: var(--mc-space-6);
	padding: var(--mc-space-4) var(--mc-space-8) var(--mc-space-8);
}

.mc-lp .mc-player__pane--quiz .course-item-title,
.mc-lp .mc-player__pane--quiz .quiz-title {
	margin: 0;
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-lg);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-dark-blue-600);
}

.mc-lp .mc-player__pane--quiz #learn-press-quiz-app {
	color: var(--mc-color-text);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-body);
}

/* --- 10.1 Intro / meta ---------------------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-intro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp .mc-player__pane--quiz .quiz-intro-item {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1);
	flex: 1 1 160px;
	padding: var(--mc-space-3-5);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-surface-alt);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .quiz-intro-item__title {
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
}

.mc-lp .mc-player__pane--quiz .quiz-intro-item__content {
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

/* --- 10.2 Status bar & timer ---------------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-3);
	padding: var(--mc-space-3);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-surface);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .questions-index,
.mc-lp .mc-player__pane--quiz .current-point {
	font-weight: var(--mc-font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-player__pane--quiz .countdown {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-1-5);
	padding-block: var(--mc-space-1);
	padding-inline: var(--mc-space-3);
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-bg);
	color: var(--mc-color-text);
	font-weight: var(--mc-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

/* --- 10.3 Questions ------------------------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-questions {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp .mc-player__pane--quiz .question {
	padding: var(--mc-space-5);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-xl);
	background: var(--mc-color-bg);
}

.mc-lp .mc-player__pane--quiz .question-title {
	display: flex;
	align-items: baseline;
	gap: var(--mc-space-2);
	margin: 0 0 var(--mc-space-4);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-player__pane--quiz .question-index {
	flex: none;
	color: var(--mc-color-text-subtle);
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-player__pane--quiz .question-content {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-body);
	color: var(--mc-color-text-muted);
}

.mc-lp .mc-player__pane--quiz .edit-link {
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
}

/* --- 10.4 Answers --------------------------------------------------------- */

.mc-lp .mc-player__pane--quiz .question-answers,
.mc-lp .mc-player__pane--quiz .answer-options {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp .mc-player__pane--quiz .answer-option {
	display: flex;
	align-items: flex-start;
	gap: var(--mc-space-3);
	min-height: var(--mc-space-10);
	padding: var(--mc-space-3) var(--mc-space-4);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-bg);
	cursor: pointer;
	transition: border-color var(--mc-transition-fast), background-color var(--mc-transition-fast);
}

.mc-lp .mc-player__pane--quiz .answer-option:hover {
	border-color: var(--mc-color-primary);
	background: var(--mc-color-surface-alt);
}

.mc-lp .mc-player__pane--quiz .option-check {
	flex: none;
	margin-block-start: var(--mc-space-1);
	accent-color: var(--mc-color-primary);
}

.mc-lp .mc-player__pane--quiz .option-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .option-title .point {
	margin-inline-start: var(--mc-space-2);
	color: var(--mc-color-text-subtle);
	font-size: var(--mc-font-size-xs);
}

/* Instant-check / graded feedback. */
.mc-lp .mc-player__pane--quiz .answered.correct,
.mc-lp .mc-player__pane--quiz .question-response.correct {
	border-color: var(--mc-color-primary);
	background: var(--mc-color-surface-alt);
}

.mc-lp .mc-player__pane--quiz .answered.wrong,
.mc-lp .mc-player__pane--quiz .question-response.wrong {
	border-color: var(--mc-color-danger);
}

.mc-lp .mc-player__pane--quiz .lp-fib-content {
	display: inline-block;
	min-width: 8ch;
	padding-block: var(--mc-space-1);
	padding-inline: var(--mc-space-2);
	border-block-end: 2px solid var(--mc-color-border-strong);
}

.mc-lp .mc-player__pane--quiz .lp-fib-note {
	color: var(--mc-color-text-subtle);
	font-size: var(--mc-font-size-xs);
	line-height: var(--mc-leading-xs);
}

/* --- 10.5 Hint & explanation --------------------------------------------- */

.mc-lp .mc-player__pane--quiz .question-hint-content,
.mc-lp .mc-player__pane--quiz .question-explanation-content {
	margin-block-start: var(--mc-space-3);
	padding: var(--mc-space-3);
	border-radius: var(--mc-radius-md);
	border-inline-start: 3px solid var(--mc-color-accent);
	background: var(--mc-color-surface);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-body);
}

.mc-lp .mc-player__pane--quiz .hint-title,
.mc-lp .mc-player__pane--quiz .explanation-title {
	margin: 0 0 var(--mc-space-1);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-color-text);
}

.mc-lp .mc-player__pane--quiz .instant-check {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-space-2);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .instant-check__icon {
	flex: none;
}

/* --- 10.6 Buttons & pagination -------------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-4);
	flex-wrap: wrap;
	margin-block-start: var(--mc-space-6);
}

/*
 * `.button-left` / `.button-right` are LearnPress's own class names, not CSS
 * directions — the float reset is what matters, position comes from the flex
 * row above.
 */
.mc-lp .mc-player__pane--quiz .button-left,
.mc-lp .mc-player__pane--quiz .button-right {
	display: flex;
	align-items: center;
	gap: var(--mc-space-2);
	float: none;
	flex-wrap: wrap;
}

.mc-lp .mc-player__pane--quiz .lp-button,
.mc-lp .mc-player__pane--quiz #button-submit-quiz,
.mc-lp .mc-player__pane--quiz .submit-quiz,
.mc-lp .mc-player__pane--quiz .back-quiz,
.mc-lp .mc-player__pane--quiz .review-quiz,
.mc-lp .mc-player__pane--quiz .btn-show-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-1);
	/* Matches the 40px pill every button in the Figma uses. */
	min-height: var(--mc-space-10);
	padding-block: var(--mc-space-2);
	padding-inline: var(--mc-space-8);
	border: 1px solid var(--mc-color-primary);
	border-radius: var(--mc-radius-full);
	background: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-medium);
	cursor: pointer;
	transition: background-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

.mc-lp .mc-player__pane--quiz .lp-button:hover,
.mc-lp .mc-player__pane--quiz #button-submit-quiz:hover,
.mc-lp .mc-player__pane--quiz .submit-quiz:hover {
	background: var(--mc-color-primary-hover);
	border-color: var(--mc-color-primary-hover);
	color: var(--mc-color-text-invert);
}

.mc-lp .mc-player__pane--quiz .back-quiz,
.mc-lp .mc-player__pane--quiz .review-quiz,
.mc-lp .mc-player__pane--quiz .btn-show-hint {
	background: transparent;
	color: var(--mc-color-primary);
}

.mc-lp .mc-player__pane--quiz .back-quiz:hover,
.mc-lp .mc-player__pane--quiz .review-quiz:hover,
.mc-lp .mc-player__pane--quiz .btn-show-hint:hover {
	background: var(--mc-color-surface-alt);
	color: var(--mc-color-primary-hover);
}

.mc-lp .mc-player__pane--quiz .questions-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-2);
	margin-block-start: var(--mc-space-4);
}

.mc-lp .mc-player__pane--quiz .questions-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mc-btn-height-sm);
	min-height: var(--mc-btn-height-sm);
	padding-inline: var(--mc-space-2);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-bg);
	color: var(--mc-color-text);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
	font-variant-numeric: tabular-nums;
}

.mc-lp .mc-player__pane--quiz .questions-pagination .page-numbers:hover {
	border-color: var(--mc-color-primary);
	color: var(--mc-color-primary);
}

.mc-lp .mc-player__pane--quiz .questions-pagination .page-numbers.current {
	background: var(--mc-color-primary);
	border-color: var(--mc-color-primary);
	color: var(--mc-color-text-invert);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-player__pane--quiz .questions-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--mc-color-text-subtle);
}

/* --- 10.7 Result ---------------------------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mc-space-4);
	padding: var(--mc-space-5);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-surface-alt);
	text-align: center;
}

.mc-lp .mc-player__pane--quiz .result-heading {
	margin: 0;
	font-size: var(--mc-font-size-lg);
	line-height: var(--mc-leading-lg);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-player__pane--quiz .circle-progress-bar {
	width: 140px;
	height: 140px;
	max-width: 100%;
}

/* Stroke colour is the only part of the dial CSS can own — the sweep itself is
   an inline `stroke-dashoffset` written by LearnPress's JS. */
.mc-lp .mc-player__pane--quiz .circle-progress-bar__circle {
	stroke: var(--mc-color-primary);
	stroke-width: 8;
	stroke-linecap: round;
}

.mc-lp .mc-player__pane--quiz .quiz-result.failed .circle-progress-bar__circle {
	stroke: var(--mc-color-danger);
}

.mc-lp .mc-player__pane--quiz .result-grade,
.mc-lp .mc-player__pane--quiz #quizResultGrade {
	font-size: var(--mc-font-size-2xl);
	line-height: var(--mc-leading-2xl);
	font-weight: var(--mc-font-weight-extrabold);
	color: var(--mc-color-primary);
}

.mc-lp .mc-player__pane--quiz .quiz-result.failed .result-grade,
.mc-lp .mc-player__pane--quiz .quiz-result.failed #quizResultGrade {
	color: var(--mc-color-danger);
}

.mc-lp .mc-player__pane--quiz .result-achieved,
.mc-lp .mc-player__pane--quiz .result-require,
.mc-lp .mc-player__pane--quiz .result-message {
	margin: 0;
	color: var(--mc-color-text-muted);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .result-statistic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mc-space-3);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp .mc-player__pane--quiz .result-statistic-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-2);
	padding: var(--mc-space-3);
	border-radius: var(--mc-radius-md);
	background: var(--mc-color-bg);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .result-statistic-field .number {
	font-weight: var(--mc-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

/* --- 10.8 Attempts table & messages --------------------------------------- */

.mc-lp .mc-player__pane--quiz .quiz-attempts {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mc-lp .mc-player__pane--quiz .attempts-heading {
	margin: 0 0 var(--mc-space-3);
	font-size: var(--mc-font-size-base);
	line-height: var(--mc-leading-base);
	font-weight: var(--mc-font-weight-bold);
}

.mc-lp .mc-player__pane--quiz .quiz-attempts table {
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .quiz-attempts th,
.mc-lp .mc-player__pane--quiz .quiz-attempts td {
	padding: var(--mc-space-2);
	border-block-end: 1px solid var(--mc-color-border);
	text-align: start;
}

.mc-lp .mc-player__pane--quiz .quiz-attempts th {
	color: var(--mc-color-text-muted);
	font-weight: var(--mc-font-weight-semibold);
}

.mc-lp .mc-player__pane--quiz .learn-press-message {
	margin-block: var(--mc-space-3);
	padding: var(--mc-space-3);
	border-radius: var(--mc-radius-md);
	border-inline-start: 3px solid var(--mc-color-primary);
	background: var(--mc-color-surface);
	font-size: var(--mc-font-size-sm);
	line-height: var(--mc-leading-sm);
}

.mc-lp .mc-player__pane--quiz .learn-press-message.error {
	border-inline-start-color: var(--mc-color-danger);
	color: var(--mc-color-danger);
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 639px) {
	.mc-lp #popup-course {
		padding-block: var(--mc-space-4) var(--mc-space-10);
		row-gap: var(--mc-space-4);
	}

	/* Full-bleed video on phones — the frame breaks the container gutter. */
	.mc-lp .mc-player__video {
		margin-inline: calc(var(--mc-container-gutter) * -1);
	}

	.mc-lp .mc-player__video-frame {
		border-radius: 0;
	}

	.mc-lp .mc-player__video-title {
		inset-block-start: var(--mc-space-2);
		inset-inline-start: var(--mc-space-2);
		font-size: var(--mc-font-size-xs);
		line-height: var(--mc-leading-xs);
	}

	.mc-lp .mc-player__description,
	.mc-lp .mc-player__quiz {
		padding: var(--mc-space-4);
	}

	.mc-lp .mc-breadcrumb__current {
		max-width: 24ch;
	}

	/* Prev/next stack rather than shrink to unreadable stubs. */
	.mc-lp .mc-player__nav-link {
		max-width: none;
		flex: 1 1 100%;
	}

	.mc-lp .mc-player__nav-name {
		max-width: none;
	}

	.mc-lp .mc-player__nav-spacer {
		display: none;
	}

	.mc-lp .mc-player__pane--quiz .result-statistic {
		grid-template-columns: minmax(0, 1fr);
	}

	.mc-lp .mc-player__pane--quiz .quiz-buttons > * {
		flex: 1 1 100%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.mc-lp .mc-player__nav-link {
		max-width: 42%;
	}
}

@media print {
	.mc-lp .mc-player__aside,
	.mc-lp .mc-player__footer,
	.mc-lp .mc-player__drawer-backdrop,
	.mc-lp .mc-player__video {
		display: none !important;
	}

	.mc-lp #popup-course {
		display: block;
		padding: 0;
	}
}