/*
 * Visual-only frontend marker. The pseudo-element sits above the existing row,
 * consumes no layout space and never receives pointer events.
 */
.nstm-frontend-lesson-row {
	position: relative;
}

.nstm-frontend-lesson-row::before {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-start: 0;
	width: 8px;
	border-radius: 0 3px 3px 0;
	background: var(--nstm-frontend-resource-color);
	content: "";
	pointer-events: none;
}

.nstm-frontend-type-article {
	--nstm-frontend-resource-color: #2563eb;
}

.nstm-frontend-type-activity {
	--nstm-frontend-resource-color: #15803d;
}

.nstm-frontend-type-quiz {
	--nstm-frontend-resource-color: #d97706;
}

[dir="rtl"] .nstm-frontend-lesson-row::before {
	border-radius: 3px 0 0 3px;
}

/*
 * Keep ordered and unordered lists visually inside the lesson text column.
 * The logical padding also gives nested lists a consistent extra level.
 */
#masteriyo-interactive-course .masteriyo-interactive-description ul,
#masteriyo-interactive-course .masteriyo-interactive-description ol {
	box-sizing: border-box !important;
	margin-inline-start: clamp(0.75rem, 2vw, 1.5rem) !important;
	margin-inline-end: 0 !important;
	padding-inline-start: 1.5rem !important;
	padding-inline-end: 0 !important;
	list-style-position: outside !important;
}

#masteriyo-interactive-course .masteriyo-interactive-description li {
	padding-inline-start: 0.2em !important;
}

/*
 * Masteriyo uses three answer columns at desktop widths while the Learn
 * sidebar is open. Keep the grid balanced: two with the sidebar open and four
 * with it closed. Small screens retain a single readable column.
 */
@media (min-width: 768px) {
	#masteriyo-interactive-course .nstm-quiz-answer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1280px) {
	#masteriyo-interactive-course .nstm-quiz-answer-grid:not(.nstm-quiz-answer-grid-sidebar-open) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/*
 * Chapter covers in Masteriyo's Learn sidebar. The existing accordion button
 * remains the click target; only its visual background and proportions change.
 */
#masteriyo-interactive-course .nstm-frontend-chapter-cover {
	position: relative !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	padding: 18px 20px !important;
	border-radius: 0 !important;
	background-color: #263244 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
		var(--nstm-chapter-image, none) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	color: #fff !important;
	text-align: start !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

#masteriyo-interactive-course .nstm-frontend-chapter-cover,
#masteriyo-interactive-course .nstm-frontend-chapter-cover * {
	color: #fff !important;
}

#masteriyo-interactive-course .nstm-frontend-chapter-cover > :first-child {
	font-size: 26px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
}

#masteriyo-interactive-course .nstm-frontend-chapter-cover svg {
	color: #fff !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

#masteriyo-interactive-course .nstm-frontend-chapter-cover:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: -5px !important;
}

/* Course search in the Learn sidebar. */
#masteriyo-interactive-course .nstm-course-search-toggle {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: currentColor;
	cursor: pointer;
}

#masteriyo-interactive-course .nstm-course-search-toggle:hover,
#masteriyo-interactive-course .nstm-course-search-toggle.nstm-search-active {
	background: rgba(15, 23, 42, 0.08);
}

#masteriyo-interactive-course .nstm-course-search-toggle:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

#masteriyo-interactive-course .nstm-course-search-toggle svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 767px) {
	#masteriyo-interactive-course .nstm-course-search-toggle {
		/* Leave room for Masteriyo's separately positioned mobile X button. */
		margin-inline-end: 36px;
	}
}

#masteriyo-interactive-course .nstm-course-search-panel {
	box-sizing: border-box;
	max-height: 0;
	overflow: hidden;
	padding: 0 16px;
	border-block-end: 0 solid #e2e8f0;
	background: #fff;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		max-height 260ms ease,
		padding 220ms ease,
		opacity 180ms ease,
		transform 220ms ease,
		border-width 220ms ease;
}

#masteriyo-interactive-course .nstm-course-search-panel.nstm-search-open {
	max-height: min(70vh, 640px);
	overflow: hidden;
	padding: 14px 16px 16px;
	border-block-end-width: 1px;
	opacity: 1;
	transform: translateY(0);
}

#masteriyo-interactive-course .nstm-course-search-form {
	position: relative;
}

#masteriyo-interactive-course .nstm-course-search-form label {
	display: block;
}

#masteriyo-interactive-course .nstm-course-search-input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 46px 0 14px;
	border: 1px solid #94a3b8;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	font: inherit;
	font-size: 16px;
}

/* Safari/WebKit adds its own X to type="search"; the plugin supplies one accessible button. */
#masteriyo-interactive-course .nstm-course-search-input::-webkit-search-cancel-button,
#masteriyo-interactive-course .nstm-course-search-input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

#masteriyo-interactive-course .nstm-course-search-input::-ms-clear,
#masteriyo-interactive-course .nstm-course-search-input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

#masteriyo-interactive-course .nstm-course-search-input:focus {
	border-color: #2563eb;
	outline: 3px solid rgba(37, 99, 235, 0.20);
	outline-offset: 0;
}

#masteriyo-interactive-course .nstm-course-search-clear {
	position: absolute;
	inset-block-start: 3px;
	inset-inline-end: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #475569;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	transition: color 140ms ease, opacity 140ms ease;
}

#masteriyo-interactive-course .nstm-course-search-clear:hover {
	background: transparent;
	color: #0f172a;
}

#masteriyo-interactive-course .nstm-course-search-clear:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -4px;
}

#masteriyo-interactive-course .nstm-course-search-input:placeholder-shown + .nstm-course-search-clear {
	opacity: 0;
	pointer-events: none;
}

#masteriyo-interactive-course .nstm-course-search-status {
	margin: 9px 2px 8px;
	color: #475569;
	font-size: 13px;
	line-height: 1.4;
}

#masteriyo-interactive-course .nstm-course-search-results {
	max-height: min(44vh, 390px);
	margin: 0;
	overflow: auto;
	padding: 0;
	list-style: none;
	overscroll-behavior: contain;
}

#masteriyo-interactive-course .nstm-course-search-result + .nstm-course-search-result {
	margin-block-start: 8px;
}

#masteriyo-interactive-course .nstm-course-search-result-link {
	display: block;
	padding: 11px 12px;
	border: 1px solid #e2e8f0;
	border-inline-start: 5px solid #64748b;
	border-radius: 7px;
	background: #fff;
	color: #0f172a;
	text-decoration: none;
}

#masteriyo-interactive-course .nstm-course-search-result-link:hover {
	border-color: #94a3b8;
	background: #f8fafc;
}

#masteriyo-interactive-course .nstm-course-search-result-link:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: -1px;
}

#masteriyo-interactive-course .nstm-search-result-type-article {
	border-inline-start-color: #2563eb;
}

#masteriyo-interactive-course .nstm-search-result-type-activity {
	border-inline-start-color: #15803d;
}

#masteriyo-interactive-course .nstm-search-result-type-quiz {
	border-inline-start-color: #d97706;
}

#masteriyo-interactive-course .nstm-course-search-result-chapter,
#masteriyo-interactive-course .nstm-course-search-result-title,
#masteriyo-interactive-course .nstm-course-search-result-excerpt {
	display: block;
}

#masteriyo-interactive-course .nstm-course-search-result-chapter {
	margin-block-end: 3px;
	color: #64748b;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

#masteriyo-interactive-course .nstm-course-search-result-title {
	font-size: 16px;
	line-height: 1.3;
}

#masteriyo-interactive-course .nstm-course-search-result-excerpt {
	display: -webkit-box;
	margin-block-start: 5px;
	overflow: hidden;
	color: #475569;
	font-size: 13px;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#masteriyo-interactive-course .nstm-course-search-more {
	padding: 12px 4px 2px;
	color: #475569;
	font-size: 13px;
}

#masteriyo-interactive-course .nstm-screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
	#masteriyo-interactive-course .nstm-course-search-panel {
		transition: none;
	}
}

@media (forced-colors: active) {
	.nstm-frontend-lesson-row::before {
		background: Highlight;
	}

	#masteriyo-interactive-course .nstm-frontend-chapter-cover {
		border: 2px solid ButtonText !important;
		background: Canvas !important;
		color: ButtonText !important;
		text-shadow: none;
	}

	#masteriyo-interactive-course .nstm-frontend-chapter-cover,
	#masteriyo-interactive-course .nstm-frontend-chapter-cover * {
		color: ButtonText !important;
	}

	#masteriyo-interactive-course .nstm-course-search-toggle,
	#masteriyo-interactive-course .nstm-course-search-input,
	#masteriyo-interactive-course .nstm-course-search-result-link {
		border: 1px solid ButtonText;
	}
}