/**
 * DESIGN-SYSTEM-001E — Native Course Player visual layer.
 * Every rule is isolated to the Player-owned container.
 */

.ecademis-course-player.ec-design-system {
	--player-bg: var(--ec-color-surface-subtle);
	--player-header-bg: var(--ec-color-surface);
	--player-sidebar-bg: var(--ec-color-surface);
	--player-main-bg: var(--ec-color-surface-subtle);
	--player-card-bg: var(--ec-color-surface);
	--player-subtle-bg: color-mix(in srgb, var(--ec-color-brand-primary) 6%, var(--ec-color-surface));
	--player-border: var(--ec-color-border);
	--player-text: var(--ec-color-text);
	--player-text-muted: var(--ec-color-text-muted);
	--player-title: var(--ec-color-text);
	--player-module-header-bg: var(--ec-color-surface-subtle);
	--player-module-header-text: var(--ec-color-text);
	--player-lesson-text: var(--ec-color-text-muted);
	--player-lesson-hover-bg: color-mix(in srgb, var(--ec-color-brand-primary) 7%, transparent);
	--player-lesson-active-bg: color-mix(in srgb, var(--ec-color-brand-primary) 12%, transparent);
	--player-lesson-active-text: var(--ec-color-brand-action);
	--player-empty-card-bg: var(--ec-color-surface);
	font-family: var(--ec-font-functional);
	font-size: var(--ec-text-body-size);
	line-height: var(--ec-text-body-line);
	accent-color: var(--ec-color-brand-action);
	isolation: isolate;
}

.ecademis-course-player.ec-design-system[data-theme="dark"] {
	--player-bg: color-mix(in srgb, var(--ec-brand-ink) 90%, black);
	--player-header-bg: color-mix(in srgb, var(--ec-brand-ink) 82%, black);
	--player-sidebar-bg: color-mix(in srgb, var(--ec-brand-ink) 84%, black);
	--player-main-bg: color-mix(in srgb, var(--ec-brand-ink) 90%, black);
	--player-card-bg: color-mix(in srgb, var(--ec-brand-ink) 78%, black);
	--player-subtle-bg: color-mix(in srgb, var(--ec-brand-ink) 70%, black);
	--player-border: color-mix(in srgb, var(--ec-color-surface) 20%, transparent);
	--player-text: color-mix(in srgb, var(--ec-color-surface) 94%, transparent);
	--player-text-muted: color-mix(in srgb, var(--ec-color-surface) 68%, transparent);
	--player-title: var(--ec-color-surface);
	--player-module-header-bg: color-mix(in srgb, var(--ec-brand-ink) 72%, black);
	--player-module-header-text: color-mix(in srgb, var(--ec-color-surface) 82%, transparent);
	--player-lesson-text: color-mix(in srgb, var(--ec-color-surface) 76%, transparent);
	--player-lesson-hover-bg: color-mix(in srgb, var(--ec-color-surface) 8%, transparent);
	--player-lesson-active-bg: color-mix(in srgb, var(--ec-color-brand-primary) 34%, transparent);
	--player-lesson-active-text: var(--ec-color-surface);
	--player-empty-card-bg: color-mix(in srgb, var(--ec-brand-ink) 78%, black);
}

.ecademis-course-player.ec-design-system,
.ecademis-course-player.ec-design-system * {
	box-sizing: border-box;
}

.ecademis-course-player.ec-design-system .ec-player-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ecademis-course-player.ec-design-system .player-header {
	min-height: 64px;
	height: auto;
	padding: var(--ec-space-2) var(--ec-space-3);
	gap: var(--ec-space-3);
	box-shadow: var(--ec-shadow-sm);
}

.ecademis-course-player.ec-design-system .player-header-left,
.ecademis-course-player.ec-design-system .player-header-right {
	gap: var(--ec-space-2);
	min-width: 0;
}

.ecademis-course-player.ec-design-system .player-header-left {
	flex: 1 1 auto;
}

.ecademis-course-player.ec-design-system .player-header-right {
	flex: 0 1 auto;
}

.ecademis-course-player.ec-design-system .ec-player-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 40px;
	height: 40px;
	padding: var(--ec-space-1) var(--ec-space-2);
	border: 1px solid var(--player-border);
	border-radius: var(--ec-radius-control);
	background: var(--ec-color-surface);
	overflow: hidden;
}

.ecademis-course-player.ec-design-system .ec-player-brand__logo {
	display: block;
	width: auto;
	max-width: 116px;
	height: 28px;
	object-fit: contain;
}

.ecademis-course-player.ec-design-system .ec-player-brand__initial {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ec-radius-control);
	background: var(--ec-color-brand-primary);
	color: var(--ec-color-brand-primary-contrast);
	font-weight: var(--ec-font-weight-medium);
}

.ecademis-course-player.ec-design-system .course-title {
	font-size: var(--ec-text-secondary-size);
	line-height: var(--ec-text-secondary-line);
	font-weight: var(--ec-font-weight-medium);
}

.ecademis-course-player.ec-design-system .btn-back,
.ecademis-course-player.ec-design-system .btn-nav,
.ecademis-course-player.ec-design-system .btn-sidebar-toggle,
.ecademis-course-player.ec-design-system .btn-theme-toggle,
.ecademis-course-player.ec-design-system .btn-icon-sidebar,
.ecademis-course-player.ec-design-system #ecademisHeaderHelpBtn,
.ecademis-course-player.ec-design-system .player-header-right > a {
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--ec-radius-control) !important;
	font-family: var(--ec-font-functional);
	font-weight: var(--ec-font-weight-medium) !important;
	transition: background-color var(--ec-motion-fast) var(--ec-motion-easing),
		border-color var(--ec-motion-fast) var(--ec-motion-easing),
		color var(--ec-motion-fast) var(--ec-motion-easing),
		transform var(--ec-motion-fast) var(--ec-motion-easing);
}

.ecademis-course-player.ec-design-system .player-header-right > a {
	display: inline-flex;
	align-items: center;
	color: var(--ec-color-error) !important;
	background: var(--ec-color-error-bg) !important;
	border-color: var(--ec-color-error-border) !important;
}

.ecademis-course-player.ec-design-system .progress-pill {
	min-height: 40px;
	padding: var(--ec-space-2) var(--ec-space-3);
	border: 1px solid var(--player-border);
	border-radius: var(--ec-radius-full);
	background: var(--player-subtle-bg);
	color: var(--player-text);
	font-size: var(--ec-text-secondary-size);
	line-height: var(--ec-text-secondary-line);
	font-weight: var(--ec-font-weight-medium);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ecademis-course-player.ec-design-system .progress-pill::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: var(--ec-course-progress, 0%);
	background: color-mix(in srgb, var(--ec-color-brand-action) 22%, transparent);
	transition: width var(--ec-motion-confirmation) var(--ec-motion-easing);
}

.ecademis-course-player.ec-design-system .progress-pill > * {
	position: relative;
	z-index: 1;
}

.ecademis-course-player.ec-design-system .player-sidebar {
	border-color: var(--player-border);
	box-shadow: var(--ec-shadow-sm);
}

.ecademis-course-player.ec-design-system .sidebar-icon-rail {
	background: var(--player-header-bg);
	border-color: var(--player-border);
}

.ecademis-course-player.ec-design-system .module-header {
	min-height: 44px;
	padding: var(--ec-space-2) var(--ec-space-3);
	border-radius: var(--ec-radius-control);
	font-weight: var(--ec-font-weight-medium);
}

.ecademis-course-player.ec-design-system .module-header:hover {
	background: var(--player-lesson-hover-bg);
}

.ecademis-course-player.ec-design-system .lesson-item a {
	min-height: 44px;
	border-left-width: 3px;
	border-radius: 0 var(--ec-radius-control) var(--ec-radius-control) 0;
	transition: background-color var(--ec-motion-fast) var(--ec-motion-easing),
		color var(--ec-motion-fast) var(--ec-motion-easing);
}

.ecademis-course-player.ec-design-system .lesson-item.is-active a {
	border-left-color: var(--ec-color-brand-action);
}

.ecademis-course-player.ec-design-system .lesson-item.is-completed .lesson-status-icon {
	background: var(--ec-color-success);
	border-color: var(--ec-color-success);
}

.ecademis-course-player.ec-design-system .player-content-area {
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

.ecademis-course-player.ec-design-system .content-wrapper {
	max-width: 960px;
	padding: var(--ec-space-5);
}

.ecademis-course-player.ec-design-system .lesson-title,
.ecademis-course-player.ec-design-system .lesson-hero-title {
	max-width: 32ch;
	font-size: var(--ec-text-h1-size);
	line-height: var(--ec-text-h1-line);
	font-weight: var(--ec-font-weight-medium);
	margin-bottom: var(--ec-space-4);
}

.ecademis-course-player.ec-design-system .lesson-body {
	font-size: var(--ec-text-body-size);
	line-height: var(--ec-text-body-line);
}

.ecademis-course-player.ec-design-system .lesson-body > * {
	max-width: 72ch;
}

.ecademis-course-player.ec-design-system .lesson-body img,
.ecademis-course-player.ec-design-system .lesson-body video,
.ecademis-course-player.ec-design-system .lesson-body iframe,
.ecademis-course-player.ec-design-system .lesson-body embed,
.ecademis-course-player.ec-design-system .lesson-body object {
	max-width: 100%;
}

.ecademis-course-player.ec-design-system .lesson-body iframe {
	width: 100%;
	border: 0;
	border-radius: var(--ec-radius-card);
}

.ecademis-course-player.ec-design-system .content-wrapper > form,
.ecademis-course-player.ec-design-system .lesson-body form,
.ecademis-course-player.ec-design-system .resource-card,
.ecademis-course-player.ec-design-system .task-card,
.ecademis-course-player.ec-design-system .assessment-card {
	border-radius: var(--ec-radius-card);
	box-shadow: var(--ec-shadow-sm);
}

.ecademis-course-player.ec-design-system .player-footer {
	gap: var(--ec-space-2);
	padding: var(--ec-space-3) var(--ec-space-4);
}

.ecademis-course-player.ec-design-system .btn-complete,
.ecademis-course-player.ec-design-system button[type="submit"] {
	min-height: 44px;
	border-radius: var(--ec-radius-control);
	background: var(--ec-color-brand-action);
	color: var(--ec-color-brand-action-contrast);
	font-family: var(--ec-font-functional);
	font-weight: var(--ec-font-weight-medium);
}

.ecademis-course-player.ec-design-system form[aria-busy="true"] {
	opacity: .72;
	cursor: wait;
}

.ecademis-course-player.ec-design-system form[aria-busy="true"] button[type="submit"] {
	pointer-events: none;
}

.ecademis-course-player.ec-design-system :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--ec-color-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ec-color-focus-ring);
}

.ecademis-course-player.ec-design-system .ec-player-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 998;
	border: 0;
	background: color-mix(in srgb, black 52%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ec-motion-standard) var(--ec-motion-easing);
}

.ecademis-course-player.ec-design-system .ec-player-drawer-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.ecademis-course-player.ec-design-system .ec-player-motion-status {
	display: inline-flex;
	align-items: center;
	gap: var(--ec-space-2);
	padding: var(--ec-space-1) var(--ec-space-2);
	color: var(--player-text-muted);
	font-size: var(--ec-text-label-size);
	line-height: var(--ec-text-label-line);
}

@media (max-width: 900px) {
	.ecademis-course-player.ec-design-system .player-header {
		flex-wrap: wrap;
	}

	.ecademis-course-player.ec-design-system .player-header-left,
	.ecademis-course-player.ec-design-system .player-header-right {
		width: 100%;
	}

	.ecademis-course-player.ec-design-system .player-header-right {
		justify-content: flex-end;
	}
}

@media (max-width: 768px) {
	.ecademis-course-player.ec-design-system {
		min-width: 0;
		width: 100%;
		overflow: hidden;
	}

	.ecademis-course-player.ec-design-system .player-header {
		padding: var(--ec-space-2);
	}

	.ecademis-course-player.ec-design-system .ec-player-brand__logo {
		max-width: 88px;
	}

	.ecademis-course-player.ec-design-system .course-title-wrapper {
		flex: 1 1 120px;
		min-width: 0;
	}

	.ecademis-course-player.ec-design-system .course-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ecademis-course-player.ec-design-system .progress-pill {
		order: -1;
		margin-right: auto;
	}

	.ecademis-course-player.ec-design-system .player-sidebar {
		z-index: 999;
		width: min(92vw, 360px);
		max-width: 100%;
	}

	.ecademis-course-player.ec-design-system .content-wrapper {
		padding: var(--ec-space-4) var(--ec-space-3);
	}

	.ecademis-course-player.ec-design-system .lesson-title {
		font-size: var(--ec-text-h2-size);
		line-height: var(--ec-text-h2-line);
	}

	.ecademis-course-player.ec-design-system input,
	.ecademis-course-player.ec-design-system select,
	.ecademis-course-player.ec-design-system textarea {
		font-size: 16px;
	}

	.ecademis-course-player.ec-design-system .player-footer {
		padding: var(--ec-space-2);
		flex-wrap: wrap;
	}

	.ecademis-course-player.ec-design-system .player-footer > * {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 390px) {
	.ecademis-course-player.ec-design-system .player-header-right {
		display: grid;
		grid-template-columns: repeat(4, minmax(44px, 1fr));
		width: 100%;
	}

	.ecademis-course-player.ec-design-system .progress-pill {
		grid-column: 1 / -1;
	}

	.ecademis-course-player.ec-design-system #ecademisHeaderHelpBtn {
		display: none;
	}

	.ecademis-course-player.ec-design-system .content-wrapper {
		padding: var(--ec-space-3) var(--ec-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecademis-course-player.ec-design-system,
	.ecademis-course-player.ec-design-system *,
	.ecademis-course-player.ec-design-system *::before,
	.ecademis-course-player.ec-design-system *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}