/* ==========================================================================
   HWS Language Library: public lesson pages
   /academics/LanguageLibrary/_assets/library.css
   Everything is scoped to .ll-app. Text uses div/span, not p: the global
   stylesheet overrides p aggressively.
   ========================================================================== */

.ll-app {
	--ll-purple: #510C76;
	--ll-purple-soft: #6E3A99;
	--ll-ink: #2E2A38;
	--ll-muted: #655F73;
	--ll-line: #DEDAE6;
	--ll-tint: #F6F4F9;
	--ll-focus: #F26724;
	color: var(--ll-ink);
	font-family: CeraPro, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	/* The template's main-content area has no padding or width of its own,
	   so the app supplies its own centered column. */
	display: block;
	width: 100%;
	max-width: 880px;
	margin: 32px auto 56px;
	padding: 0 24px;
}
.ll-app, .ll-app *, .ll-app *::before, .ll-app *::after { box-sizing: border-box; }

.ll-app .ll-svg { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* reset site button styles inside the app */
.ll-app button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	width: auto;
	height: auto;
	min-width: 0;
	line-height: inherit;
}
.ll-app button:focus-visible,
.ll-app a:focus-visible,
.ll-app input:focus-visible {
	outline: 3px solid var(--ll-focus);
	outline-offset: 2px;
}

.ll-app .ll-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ll-app .ll-message,
.ll-app .ll-intro,
.ll-app .ll-hint { margin: 0 0 20px; }
.ll-app .ll-hint { color: var(--ll-muted); font-size: 15px; }
.ll-app .ll-message { color: var(--ll-muted); }

/* Keep the site's heading font and case, but set the sizes so the lesson
   title stays larger than the group headings. */
.ll-app h2.ll-heading {
	font-size: 40px !important;
	line-height: 1.1 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}
.ll-app h3.ll-group-title {
	font-size: 24px !important;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

/* ---------- lesson list ---------- */

.ll-app .ll-lessons {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.ll-app .ll-lesson { margin: 0; padding: 0; }
.ll-app .ll-lesson-link { height: 100%; }
.ll-app .ll-lesson::before { content: none; }
.ll-app .ll-lesson-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--ll-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ll-ink);
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.ll-app .ll-lesson-link:hover { border-color: var(--ll-purple-soft); background: var(--ll-tint); }
.ll-app .ll-lesson-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ll-app .ll-lesson-title { font-weight: 600; font-size: 18px; color: var(--ll-purple); }
.ll-app .ll-lesson-meta { font-size: 14px; color: var(--ll-muted); }
.ll-app .ll-chev { color: var(--ll-purple-soft); }

/* ---------- lesson page ---------- */

.ll-app .ll-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--ll-purple-soft);
	text-decoration: none;
}
.ll-app .ll-back:hover { text-decoration: underline; }
.ll-app .ll-back .ll-svg { width: 18px; height: 18px; }

.ll-app .ll-group { margin: 36px 0 0; }

.ll-app .ll-clips { list-style: none; margin: 0; padding: 0; }
.ll-app .ll-clip {
	margin: 0 0 10px;
	padding: 0;
	border: 1px solid var(--ll-line);
	border-radius: 8px;
	background: #fff;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ll-app .ll-clip::before { content: none; }

/* audio clip */
.ll-app .ll-play {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 16px;
	text-align: left;
	border-radius: 8px;
}
.ll-app .ll-play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ll-purple);
	color: #fff;
	transition: background-color .15s;
}
.ll-app .ll-play:hover .ll-play-icon { background: var(--ll-purple-soft); }
.ll-app .ll-label { font-size: 18px; line-height: 1.35; }
.ll-app .ll-clip:hover { border-color: var(--ll-purple-soft); }

.ll-app .ll-note {
	padding: 0 16px 12px 70px;
	font-size: 15px;
	color: var(--ll-muted);
	white-space: pre-line;
}

/* the clip that is playing (or paused mid-way) */
.ll-app .ll-clip.ll-active {
	border-color: var(--ll-purple);
	background: var(--ll-tint);
	box-shadow: inset 4px 0 0 var(--ll-purple);
}
.ll-app .ll-clip.ll-active .ll-label { font-weight: 600; color: var(--ll-purple); }

.ll-app .ll-controls { padding: 0 16px 14px 70px; }
.ll-app .ll-seek {
	display: block;
	width: 100%;
	margin: 2px 0 6px;
	accent-color: var(--ll-purple);
	cursor: pointer;
}
.ll-app .ll-controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.ll-app .ll-time { font-size: 14px; color: var(--ll-muted); font-variant-numeric: tabular-nums; }
.ll-app .ll-controls-buttons { display: flex; gap: 8px; }
.ll-app .ll-small {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--ll-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	color: var(--ll-purple);
}
.ll-app .ll-small:hover { border-color: var(--ll-purple-soft); }
.ll-app .ll-small .ll-svg { width: 16px; height: 16px; }

.ll-app .ll-error-text { padding: 0 16px 12px 70px; font-size: 15px; color: #b00020; }

/* video clip */
.ll-app .ll-video { padding: 14px 16px 16px; }
.ll-app .ll-video-label { font-size: 18px; margin: 0 0 4px; }
.ll-app .ll-video .ll-note { padding: 0 0 8px; }
.ll-app .ll-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 8px;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
}
.ll-app .ll-video-frame iframe,
.ll-app .ll-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.ll-app .ll-video-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.ll-app .ll-video-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--ll-purple);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .15s;
}
.ll-app .ll-video-badge .ll-svg { width: 30px; height: 30px; }
.ll-app .ll-video-poster:hover .ll-video-badge { transform: scale(1.08); }

/* previous / next */
.ll-app .ll-pager {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 32px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ll-line);
}
.ll-app .ll-prev, .ll-app .ll-next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ll-purple-soft);
	text-decoration: none;
	font-size: 16px;
}
.ll-app .ll-next { margin-left: auto; }
.ll-app .ll-prev:hover, .ll-app .ll-next:hover { text-decoration: underline; }

/* credits ("Special Thanks") */
.ll-app .ll-credits { margin: 40px 0 0; }
.ll-app .ll-credits-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 12px;
	border: 1px solid var(--ll-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ll-ink);
}
.ll-app .ll-credits-toggle:hover { border-color: var(--ll-purple-soft); }
.ll-app .ll-credits-logo { display: block; width: auto; height: 40px; margin: 0; }
.ll-app .ll-credits-label { font-weight: 600; font-size: 16px; }
.ll-app .ll-credits-chev { width: 18px; height: 18px; color: var(--ll-purple-soft); transform: rotate(90deg); transition: transform .15s; }
.ll-app .ll-credits-toggle[aria-expanded="true"] .ll-credits-chev { transform: rotate(-90deg); }
.ll-app .ll-credits-panel { margin: 12px 0 0; padding: 16px 18px; border-radius: 8px; background: var(--ll-tint); }
.ll-app .ll-credits-panel[hidden] { display: none; }
.ll-app .ll-credits-heading { font-size: 15px; color: var(--ll-muted); margin: 0 0 8px; }
.ll-app .ll-credits-names {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 24px;
}
.ll-app .ll-credits-names li { margin: 0 0 4px; padding: 0; font-size: 16px; }
.ll-app .ll-credits-names li::before { content: none; }

@media (max-width: 480px) {
	.ll-app { padding: 0 16px; margin-top: 20px; }
	.ll-app h2.ll-heading { font-size: 32px !important; }
	.ll-app h3.ll-group-title { font-size: 21px !important; }
	.ll-app .ll-note,
	.ll-app .ll-controls,
	.ll-app .ll-error-text { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ll-app * { transition: none !important; }
}