/* The common LMS (component.js). Mounted inline, so every rule is scoped to .common-lms. Low fidelity on purpose: plain boxes, stand-in lines. */

.common-lms {
	border: 1px solid var(--stroke-primary);
	background: var(--color-stone-50);
	color: var(--color-stone-900);
	font-family: system-ui, sans-serif;
	font-size: 0.9375rem;

	/* The page's type voices reach in here (it mounts inline); the demo speaks one plain sans throughout. */
	p,
	h3,
	ol,
	li {
		margin: 0;
		max-width: none;
		font: inherit;
	}

	ol {
		padding: 0;
		list-style: none;
	}

	.bar,
	.foot {
		padding: 0.6em 1em;
		background: var(--color-stone-100);
		font-weight: 600;
	}

	.bar {
		border-bottom: 1px solid var(--stroke-primary);
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1.5em;
		border-top: 1px solid var(--stroke-primary);
	}

	.autoplay,
	.speed {
		display: flex;
		align-items: center;
		gap: 0.4em;
		font-weight: 400;
		cursor: pointer;
	}

	.screen {
		position: relative;
		overflow: hidden;
		height: 520px;
	}

	.player {
		display: grid;
		grid-template-columns: 1fr 240px;
		height: 100%;
	}

	.main {
		display: grid;
		align-content: start;
		gap: 1em;
		min-height: 0;
		padding: 1.5em;
		overflow-y: auto;
		transition: opacity 250ms ease;

		&.is-leaving {
			opacity: 0.25;
		}
	}

	.video-frame {
		position: relative;
		max-width: 560px;

		&:has(video[data-started]) .video-title {
			display: none;
		}
	}

	/* A dark title card until it plays, the way course videos open. */
	.video-title {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		gap: 0.75em;
		border: 0;
		background: var(--color-stone-900);
		color: var(--color-stone-50);
		font: inherit;
		font-size: 1.25em;
		font-weight: 600;
		cursor: pointer;
	}

	.video {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		background: var(--color-stone-900);
	}

	.now-playing {
		font-size: 1.125em;
		font-weight: 600;
	}

	.blurb {
		display: grid;
		gap: 6px;
		max-width: 560px;
	}

	.text-line {
		height: 8px;
		background: var(--color-stone-200);
	}

	/* Gray while the video plays, blue once it has played to the end (component.js, finishVideo). */
	.complete {
		justify-self: start;
		padding: 0.5em 1em;
		border: 1px solid var(--color-stone-400);
		background: var(--color-stone-100);
		color: var(--color-stone-600);
		font: inherit;
		cursor: pointer;
		transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;

		&.is-ready {
			border-color: var(--color-stone-900);
			background: var(--color-blue-100);
			color: var(--color-stone-900);
		}
	}

	.finished {
		align-content: center;
		justify-items: center;
		text-align: center;
	}

	.finished-title {
		font-size: 1.5em;
		font-weight: 600;
	}

	.lessons {
		min-height: 0;
		padding-bottom: 4em;
		overflow-y: auto;
		border-left: 1px solid var(--stroke-primary);
		background: var(--color-stone-100);
		font-size: 0.875em;

		h3 {
			padding: 1em;
			border-bottom: 1px solid var(--color-stone-200);
			font-size: 1em;
		}
	}

	.module-head {
		padding: 1em;
		border-bottom: 1px solid var(--color-stone-200);
		background: var(--color-stone-50);
	}

	.module-name {
		font-weight: 600;
	}

	.module-count {
		color: var(--color-stone-500);
	}

	.lesson {
		display: flex;
		align-items: start;
		gap: 8px;
		padding: 0.75em 1em;
		border-bottom: 1px solid var(--color-stone-200);

		&.is-current {
			background: var(--color-stone-200);
			font-weight: 600;
		}
	}

	.lesson-open {
		display: grid;
		gap: 4px;
		flex: 1;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.lesson-type {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--color-stone-500);
		font-size: 0.75em;
		font-weight: 400;
	}

	.type-line {
		width: 28px;
		height: 6px;
		background: var(--color-stone-200);
	}

	.check {
		flex: none;
		display: grid;
		place-items: center;
		width: 16px;
		height: 16px;
		padding: 0;
		border: 1px solid var(--color-stone-900);
		background: var(--color-stone-50);
		font: inherit;
		font-size: 0.75em;
		line-height: 1;
		cursor: pointer;
	}

	.foot button {
		padding: 0.35em 1em;
		border: 1px solid var(--color-stone-900);
		background: var(--color-stone-50);
		font: inherit;
		cursor: pointer;
	}

	/* Confetti - the reward the pattern offers */
	.confetti {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.confetti-piece {
		position: absolute;
		top: -12px;
		width: 8px;
		height: 12px;
		background: var(--color-blue-400);
		animation: common-lms-fall 1100ms ease-in forwards;

		&:nth-child(5n + 1) {
			background: var(--color-blue-200);
		}

		&:nth-child(5n + 2) {
			background: var(--color-green-200);
		}

		&:nth-child(5n + 3) {
			background: var(--color-yellow-200);
		}

		&:nth-child(5n + 4) {
			background: var(--color-stone-900);
		}
	}

	/* Narrow: the lesson list moves under the player */
	@media (width < 640px) {
		.screen {
			height: auto;
		}

		.player {
			grid-template-columns: 1fr;
		}

		.lessons {
			max-height: 320px;
			border-top: 1px solid var(--stroke-primary);
			border-left: 0;
		}
	}
}

@keyframes common-lms-fall {
	to {
		transform: translateY(560px) rotate(540deg);
		opacity: 0;
	}
}