/**
 * Video library
 *
 * The video library: the index at /videos/, the courses archive, the term
 * archives, and the single video and course pages. The bookshelf and the
 * creative library have their own sheets. Bootstrap, Font Awesome, and base.css
 * come first from partials/head.php - this is only the page layer on top.
 *
 * The index chrome the creative library shares with this one - the page head,
 * the FacetWP filter sidebar, the results bar, the selections, the section
 * headings, the popular band, and the pager - lives in learn.css under
 * FACETED LIBRARY INDEX. What's left here is what only the video library has:
 * the facet rows its own taxonomy hides, the featured video, the cards, and
 * the single video and course pages.
 *
 * @copyright   2026, ON1
 */

/* !- Filter sidebar
 *
 * What the old sidebar hides, hidden here too. The rest of the sidebar's
 * styling is shared with the creative library and lives in learn.css; this is
 * only the part that's about video_library_cats.
 *
 * Read off the live page's computed styles, not off on1.orig/css/video-
 * library.css - the deployed stylesheet is ahead of the repo copy and hides
 * three things it doesn't (topics, and the 2024/2023/edit-explorer children).
 *
 * Courses and Instructors have their own taxonomy pages and sit in the subnav,
 * the bookshelf has its own index, and Popular Categories overlaps Misc. Each
 * group takes its .facetwp-depth with it - Courses alone carries 98 children.
 * Non-Plus is hidden in learn.css, since both libraries carry that term.
 *
 * Keyed on data-value, the term slug, because that's the only stable handle
 * FacetWP puts in the markup. Matched without .visible on the depth, unlike
 * live, so a collapsed group stays hidden too.
 */
#library-filters .facetwp-checkbox[data-value="courses"],
#library-filters .facetwp-checkbox[data-value="courses"] + .facetwp-depth,
#library-filters .facetwp-checkbox[data-value="instructors"],
#library-filters .facetwp-checkbox[data-value="instructors"] + .facetwp-depth,
#library-filters .facetwp-checkbox[data-value="topics"],
#library-filters .facetwp-checkbox[data-value="topics"] + .facetwp-depth,
#library-filters .facetwp-checkbox[data-value="on1-bookshelf"] {
	display: none;
}

/* Individual choices live hides: two retired versions and one stray topic */
#library-filters .facetwp-checkbox[data-value="2023"],
#library-filters .facetwp-checkbox[data-value="2024"],
#library-filters .facetwp-checkbox[data-value="edit-explorer"] {
	display: none;
}

/* !- Featured video */
.featured-video {
	display: grid;
	gap: 1.875rem;
	margin-bottom: 3.25rem;
}

@media (min-width: 768px) {
	.featured-video {
		align-items: center;
		grid-template-columns: 1.3fr 1fr;
	}
}

.featured-video .featured-video-info .eyebrow {
	margin-bottom: 0.75rem;
}

.featured-video .featured-video-title {
	font-size: var(--text-2xl);
	line-height: 1.3;
	margin-bottom: 0.75rem;
}

.featured-video .featured-video-title a {
	color: var(--text-50);
	text-decoration: none;
}

.featured-video .featured-video-title a:hover {
	color: var(--link);
}

.featured-video .featured-video-blurb {
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

.featured-video .featured-video-meta {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-bottom: 1.5rem;
}

.featured-video .featured-video-meta .list-inline-item:not(:last-child) {
	margin-right: 1.25rem;
}

/* !- Video grid
 *
 * Four across, and every listing that fills it is a multiple of four - the
 * curated sections ask for 4, Most Viewed for 4, a page of filtered results for
 * 24 - so no row is ever left with one card hanging off the end. Fixed column
 * counts rather than auto-fill for the same reason: auto-fill picks its own
 * column count from the available width, which is what left six items sitting
 * 4 + 2.
 */
.video-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* !- Video cards */
.video-card .video-thumb {
	aspect-ratio: 16 / 9;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	margin-bottom: 0.75rem;
	overflow: hidden;
	position: relative;
}

.featured-video .video-thumb {
	aspect-ratio: 16 / 10;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	position: relative;
}

.video-card .video-thumb img,
.featured-video .video-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.video-card .play-badge,
.featured-video .play-badge,
.up-next-thumb .play-badge {
	align-items: center;
	background: color-mix(in srgb, var(--black) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	font-size: var(--text-mini);
	height: 2.5rem;
	justify-content: center;
	left: 50%;
	padding-left: 0.1875rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background 0.15s;
	width: 2.5rem;
}

.featured-video .play-badge {
	font-size: var(--text-xl);
	height: 4rem;
	width: 4rem;
}

.video-card .video-thumb:hover .play-badge,
.featured-video .video-thumb:hover .play-badge {
	background: var(--blue-500);
	border-color: var(--blue-500);
}

.video-card .runtime-badge,
.featured-video .runtime-badge {
	background: color-mix(in srgb, var(--black) 75%, transparent);
	border-radius: var(--border-radius);
	bottom: 0.5rem;
	color: var(--white);
	font-size: var(--text-micro);
	font-weight: 600;
	padding: 0.1875rem 0.5rem;
	position: absolute;
	right: 0.5rem;
}

.video-card .plus-badge {
	background: var(--orange-500);
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-micro);
	font-weight: 700;
	left: 0.5rem;
	letter-spacing: 0.04em;
	padding: 0.1875rem 0.5rem;
	position: absolute;
	text-transform: uppercase;
	top: 0.5rem;
}

.video-card .video-title {
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0;
}

.video-card .video-title a {
	color: var(--text-100);
	text-decoration: none;
}

.video-card .video-title a:hover {
	color: var(--link);
}

/* !- Small screens */
@media (max-width: 767.98px) {
	.featured-video .featured-video-title {
		font-size: var(--text-xl);
	}

}

/*==============================================================================
 * SINGLE VIDEO
 =============================================================================*/

/* !- Breadcrumb */
#video-breadcrumb {
	padding-top: 1.25rem;
}

#video-breadcrumb .breadcrumb-list {
	color: var(--text-500);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 0.5rem;
	margin-bottom: 0;
}

#video-breadcrumb .breadcrumb-list li:not(:last-child)::after {
	color: var(--bg-500);
	content: '\203a';
	margin-left: 0.5rem;
}

#video-breadcrumb .breadcrumb-list a {
	color: var(--text-500);
	text-decoration: none;
}

#video-breadcrumb .breadcrumb-list a:hover {
	color: var(--text-100);
}

#video-breadcrumb .breadcrumb-list li[aria-current] {
	color: var(--text-300);
}

/* !- Body */
#video-body {
	padding-bottom: 5rem;
	padding-top: 1.5rem;
}

/* !- Player */
.video-stage {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.video-stage iframe {
	border: 0;
}

.video-missing {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	color: var(--text-400);
	font-size: var(--text-sm);
	padding: 2.5rem;
	text-align: center;
}

/* !- Title and byline */
.video-head {
	margin-top: 1.875rem;
}

.video-head h1 {
	font-size: var(--text-3xl);
	line-height: 1.3;
	margin-bottom: 1rem;
}

.video-head .preview-badge {
	background: var(--green-500);
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.5rem;
	position: relative;
	text-transform: uppercase;
	top: -0.375rem;
	white-space: nowrap;
}

.byline-row {
	align-items: center;
	border-bottom: 1px solid var(--bg-700);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding-bottom: 1.25rem;
}

.byline {
	align-items: center;
	display: flex;
	gap: 0.875rem;
}

.byline-avatar,
.instructor-avatar {
	align-items: center;
	background: linear-gradient(-40deg, var(--blue-500), var(--purple-500));
	border-radius: 50%;
	color: var(--white);
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-xs);
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.byline-name {
	font-size: var(--text-xs);
	font-weight: 700;
}

.byline-name a {
	color: var(--text-100);
	text-decoration: none;
}

.byline-name a:hover {
	color: var(--link);
}

.byline-meta {
	color: var(--text-500);
	font-size: var(--text-micro);
}

.byline-meta .list-inline-item:not(:last-child)::after {
	content: '\2022';
	margin-left: 0.375rem;
}

/* !- Favourite and share */
.action-row {
	align-items: center;
	display: flex;
	gap: 0.625rem;
}

.action-row .icon-btn,
.video-favorite .simplefavorite-button {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-sm);
	height: 2.75rem;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0 0.75rem;
}

.action-row .icon-btn:hover,
.video-favorite .simplefavorite-button:hover {
	border-color: var(--bg-500);
	color: var(--text-50);
}

/* Filled, not just an outline - the outline alone read as no feedback at all */
.action-row .icon-btn.copied {
	background: var(--green-500);
	border-color: var(--green-500);
	color: var(--white);
}

.action-row .icon-btn.copy-failed {
	background: color-mix(in srgb, var(--red-500) 15%, transparent);
	border-color: var(--red-500);
	color: var(--red-400);
}

/* The favorites plugin flips this class on when the post is saved */
.video-favorite .simplefavorite-button.active {
	background: color-mix(in srgb, var(--red-500) 12%, transparent);
	border-color: var(--red-500);
	color: var(--red-400);
}

/* !- Info badges */
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 0;
	margin-top: 1.25rem;
}

.info-badge {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: flex;
	font-size: var(--text-mini);
	font-weight: 600;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
}

.info-badge i {
	color: var(--blue-400);
}

/* !- Description */
.video-desc {
	margin-top: 1.5rem;
}

/* !- Tag groups */
.tag-groups {
	margin-top: 1.75rem;
}

.tag-group {
	margin-bottom: 0.875rem;
}

.tag-group .tag-group-label {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

.tag-pill {
	border-radius: 1rem;
	display: inline-block;
	font-size: var(--text-mini);
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
}

.tag-pill-apps {
	background: color-mix(in srgb, var(--blue-500) 15%, transparent);
	color: var(--accent-blue);
}

.tag-pill-skill-level {
	background: color-mix(in srgb, var(--gold-500) 15%, transparent);
	color: var(--gold-300);
}

.tag-pill-topics {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	color: var(--text-300);
	font-weight: 600;
	text-transform: none;
}

.tag-pill:hover {
	color: var(--text-50);
}

/* !- Comments */
#video-comments {
	border-top: 1px solid var(--bg-700);
	margin-top: 2.75rem;
	padding-top: 1.875rem;
}

/* !- Rail
 *
 * The page's light band. A two-column detail page has no full-width section to
 * hand that job to, so theme-inverted is scoped to this column and the cards
 * inside read from the inverted tokens without needing their own colors.
 */
#video-rail {
	background: none;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.rail-card {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.5rem;
}

.rail-card .rail-title {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.rail-link {
	align-items: center;
	color: var(--link-alt);
	display: flex;
	font-size: var(--text-mini);
	font-weight: 600;
	margin-top: 1rem;
	text-decoration: none;
}

.rail-link:hover {
	text-decoration: underline;
}

/* !- Downloads */
.download-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0;
}

.download-item {
	align-items: center;
	color: var(--text-100);
	display: flex;
	gap: 0.875rem;
	text-decoration: none;
}

.download-icon {
	align-items: center;
	background: color-mix(in srgb, var(--blue-500) 15%, transparent);
	border-radius: var(--border-radius);
	color: var(--blue-500);
	display: flex;
	flex-shrink: 0;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.download-name {
	font-size: var(--text-xs);
	font-weight: 700;
	word-break: break-word;
}

.download-item:hover .download-name {
	color: var(--link);
}

/* !- Instructor */
.instructor-row {
	align-items: center;
	display: flex;
	gap: 0.875rem;
	margin-bottom: 0.875rem;
}

.instructor-row .instructor-avatar {
	font-size: var(--text-base);
	height: 3.25rem;
	width: 3.25rem;
}

.instructor-name {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 700;
}

.instructor-title {
	color: var(--text-400);
	font-size: var(--text-micro);
}

.instructor-bio {
	font-size: var(--text-mini);
	line-height: 1.6;
}

/* !- Up next */
.up-next {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

.up-next li:not(:last-child) {
	border-bottom: 1px solid var(--bg-700);
}

.up-next-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.625rem 0;
	text-decoration: none;
}

.up-next-thumb {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	flex-shrink: 0;
	height: 4rem;
	overflow: hidden;
	position: relative;
	width: 6.25rem;
}

.up-next-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.up-next-thumb .play-badge {
	font-size: var(--text-tiny);
	height: 1.5rem;
	width: 1.5rem;
}

.up-next-title {
	color: var(--text-50);
	display: block;
	font-size: var(--text-mini);
	font-weight: 600;
	line-height: 1.4;
}

.up-next-item:hover .up-next-title {
	color: var(--link);
}

.up-next-meta {
	color: var(--text-400);
	display: block;
	font-size: var(--text-tiny);
	font-weight: 600;
	margin-top: 0.375rem;
}

/* !- Small screens */
@media (max-width: 767.98px) {
	.video-head h1 {
		font-size: var(--text-2xl);
	}

	.up-next-thumb {
		height: 3.25rem;
		width: 5rem;
	}
}

/*==============================================================================
 * COURSES ARCHIVE
 =============================================================================*/

/* !- Page head */
#courses-head {
	padding-bottom: 2.5rem;
	padding-top: 3rem;
}

#courses-head h1 {
	margin-bottom: 0.75rem;
}

#courses-head .courses-intro {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 1.75rem;
}

#courses-head .library-search input {
	background: none;
	border: none;
	color: var(--text-100);
	font-size: var(--text-sm);
	min-width: 0;
	padding: 0.625rem 0.75rem 0.625rem 0;
	width: 100%;
}

#courses-head .library-search input:focus {
	box-shadow: none;
	outline: none;
}

#courses-head .library-search input::placeholder {
	color: var(--text-500);
}

.courses-count {
	color: var(--text-500);
	font-size: var(--text-mini);
}

/* !- Body */
#courses-body {
	padding-bottom: 5rem;
	padding-top: 2rem;
}

/* !- Featured course */
.featured-course {
	display: grid;
	gap: 1.875rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.featured-course {
		align-items: center;
		grid-template-columns: 1.3fr 1fr;
	}
}

.featured-course .video-thumb {
	aspect-ratio: 16 / 10;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	position: relative;
}

.featured-course .video-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.featured-course .play-badge {
	font-size: var(--text-xl);
	height: 4rem;
	width: 4rem;
}

.featured-course .featured-course-title {
	font-size: var(--text-2xl);
	line-height: 1.3;
	margin-bottom: 0.75rem;
}

.featured-course .featured-course-title a {
	color: var(--text-50);
	text-decoration: none;
}

.featured-course .featured-course-title a:hover {
	color: var(--link);
}

.featured-course .featured-course-blurb {
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

.featured-course .featured-course-meta {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-bottom: 1.5rem;
}

.featured-course .featured-course-meta .list-inline-item:not(:last-child) {
	margin-right: 1.25rem;
}

/* !- Jump to app */
#course-jump {
	margin-bottom: 2.5rem;
}

#course-jump .jump-label {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.625rem;
	text-transform: uppercase;
}

.jump-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

.jump-chip {
	border: 1px solid var(--bg-700);
	border-radius: 1rem;
	color: var(--text-400);
	display: inline-block;
	font-size: var(--text-mini);
	font-weight: 600;
	padding: 0.4375rem 0.875rem;
	text-decoration: none;
}

.jump-chip:hover {
	border-color: var(--blue-500);
	color: var(--blue-400);
}

/* !- Course groups */
.course-group {
	margin-bottom: 3rem;
	scroll-margin-top: 6rem;
}

.course-group .section-head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 0.375rem;
}

.course-group .section-title {
	font-size: var(--text-xl);
	margin-bottom: 0;
}

.course-group .section-count {
	color: var(--text-500);
	font-size: var(--text-mini);
	white-space: nowrap;
}

.course-group .section-blurb {
	color: var(--text-500);
	font-size: var(--text-mini);
	margin-bottom: 1.25rem;
}

/*
 * The Foundational group is the page's light band, so it gets padding and a
 * surface of its own rather than sitting flush like the groups above it.
 */
.course-group.theme-inverted {
	border-radius: var(--border-radius);
	padding: 1.875rem;
}

.course-group.theme-inverted .section-title {
	color: var(--text-100);
}

/* !- Course cards */
.course-card .course-card-meta {
	color: var(--text-500);
	font-size: var(--text-tiny);
	font-weight: 600;
	margin-top: 0.375rem;
}

/* !- Empty state */
#courses-empty {
	color: var(--text-400);
	font-size: var(--text-sm);
}

/* !- Small screens */
@media (max-width: 767.98px) {
	.featured-course .featured-course-title {
		font-size: var(--text-xl);
	}

	.course-group.theme-inverted {
		padding: 1.25rem;
	}
}

/*==============================================================================
 * COURSE PAGE
 *
 * Serves both heads: the overview's cover-art hero and a lesson's player. What
 * differs is above #course-body; everything below is shared.
 =============================================================================*/

/* !- Head section */
#course-head-section {
	padding-top: 1.25rem;
}

/* !- Overview hero
 *
 * The mockup's hero is bespoke split artwork that doesn't exist yet, so the
 * video thumbnail stands in behind a scrim heavy enough for white type.
 */
.course-hero {
	background: var(--bg-850);
	border-radius: var(--border-radius);
	overflow: hidden;
	position: relative;
}

.course-hero img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 768px) {
	.course-hero {
		aspect-ratio: 21 / 9;
	}
}

@media (max-width: 767.98px) {
	.course-hero {
		aspect-ratio: 16 / 9;
	}
}

.course-hero::after {
	background: linear-gradient(to top, color-mix(in srgb, var(--black) 85%, transparent) 0%, color-mix(in srgb, var(--black) 35%, transparent) 55%, transparent 100%);
	content: '';
	inset: 0;
	position: absolute;
}

.course-hero-copy {
	bottom: 2.5rem;
	left: 2.5rem;
	position: absolute;
	right: 2.5rem;
	z-index: 1;
}

.course-hero-copy .eyebrow {
	color: var(--blue-300);
}

.course-hero .course-hero-title {
	color: var(--white);
	font-size: var(--text-5xl);
	font-weight: 900;
	line-height: 1.05;
	margin-bottom: 0;
	text-transform: uppercase;
}

.course-hero-play {
	align-items: center;
	background: color-mix(in srgb, var(--black) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
	border-radius: var(--border-radius);
	color: var(--white);
	cursor: pointer;
	display: flex;
	font-size: var(--text-mini);
	font-weight: 700;
	gap: 0.625rem;
	padding: 0.75rem 1.125rem;
	position: absolute;
	right: 1.25rem;
	top: 1.25rem;
	z-index: 1;
}

.course-hero-play:hover {
	background: var(--blue-500);
	border-color: var(--blue-500);
}

@media (max-width: 767.98px) {
	.course-hero-copy {
		bottom: 1.25rem;
		left: 1.25rem;
		right: 1.25rem;
	}

	.course-hero .course-hero-title {
		font-size: var(--text-2xl);
	}
}

/* !- Body */
#course-body {
	padding-bottom: 5rem;
	padding-top: 1.875rem;
}

/* !- Head row */
.course-head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.course-head .course-title {
	font-size: var(--text-3xl);
	line-height: 1.25;
	margin-bottom: 0.625rem;
}

.course-head .course-parent {
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.course-head .course-parent a {
	color: var(--link-alt);
	text-decoration: none;
}

.course-head .course-parent a:hover {
	text-decoration: underline;
}

.course-meta-line {
	color: var(--text-500);
	font-size: var(--text-mini);
}

.course-meta-line .list-inline-item:not(:last-child)::after {
	content: '\2022';
	margin-left: 0.5rem;
}

.course-meta-line a {
	color: var(--text-300);
	text-decoration: none;
}

.course-meta-line a:hover {
	color: var(--link);
}

.course-continue {
	font-size: var(--text-xs);
	padding: 0.625rem 1.125rem;
}

/* !- Stat bar */
.stat-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 1.25rem;
}

/* !- Progress */
.progress-card {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	margin-bottom: 1.875rem;
	padding: 1.5rem;
}

.progress-card .progress-label {
	color: var(--text-50);
	font-size: var(--text-xs);
	font-weight: 700;
	margin-bottom: 0.625rem;
}

.progress-card .progress {
	background: var(--bg-700);
	border-radius: var(--border-radius);
	height: 0.5rem;
}

.progress-card .progress-bar {
	background: var(--blue-500);
	border-radius: var(--border-radius);
}

.progress-card .progress-sub {
	color: var(--text-500);
	font-size: var(--text-micro);
	margin-top: 0.5rem;
}

.progress-card .progress-sub a {
	color: var(--link);
	text-decoration: none;
}

.progress-card .progress-sub a:hover {
	text-decoration: underline;
}

/* !- Section links
 *
 * Drawn as tabs but they're anchors: the mockup shows every section in one
 * scroll, and Course Discussion is an external forum link.
 */
.course-tabs {
	border-bottom: 1px solid var(--bg-700);
	column-gap: 2rem;
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 1.75rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.course-tabs::-webkit-scrollbar {
	display: none;
}

.course-tabs a {
	border-bottom: 2px solid transparent;
	color: var(--text-400);
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	padding: 0.75rem 0;
	text-decoration: none;
	white-space: nowrap;
}

.course-tabs a:hover {
	color: var(--text-50);
}

.course-tabs a.active {
	border-bottom-color: var(--blue-500);
	color: var(--text-50);
}

/* !- Curriculum */
.course-curriculum-head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
	margin-top: 2.25rem;
	scroll-margin-top: 6rem;
}

.course-curriculum-head .section-title {
	font-size: var(--text-lg);
	margin-bottom: 0;
}

.course-curriculum-head .section-count {
	color: var(--text-500);
	font-size: var(--text-mini);
	white-space: nowrap;
}

.course-lessons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0;
}

.course-lesson {
	align-items: center;
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1.125rem;
	padding: 1rem;
	position: relative;
}

.course-lesson:hover {
	border-color: var(--bg-500);
}

.course-lesson.is-current {
	background: color-mix(in srgb, var(--green-500) 8%, transparent);
	border-color: var(--green-500);
}

.course-lesson.is-locked {
	opacity: 0.75;
}

/* Number bubble: gold on the lesson you're on, green once it's done */
.course-lesson .lesson-number {
	align-items: center;
	background: var(--bg-700);
	border-radius: 50%;
	color: var(--text-400);
	display: flex;
	flex-shrink: 0;
	font-size: var(--text-mini);
	font-weight: 800;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.course-lesson.is-current .lesson-number {
	background: var(--gold-500);
	color: var(--black);
}

.course-lesson.is-watched .lesson-number {
	background: var(--green-500);
	color: var(--white);
}

.course-lesson .lesson-thumb {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	flex-shrink: 0;
	height: 4.625rem;
	overflow: hidden;
	position: relative;
	width: 8.125rem;
}

.course-lesson .lesson-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.course-lesson .play-badge {
	font-size: var(--text-tiny);
	height: 1.625rem;
	width: 1.625rem;
}

.lesson-state {
	align-items: center;
	border-radius: 50%;
	color: var(--white);
	display: flex;
	font-size: var(--text-mini);
	height: 1.625rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.625rem;
}

.lesson-state-watched {
	background: var(--green-500);
}

.lesson-state-locked {
	background: var(--orange-500);
}

.course-lesson.is-watched .lesson-thumb::after {
	background: color-mix(in srgb, var(--green-500) 30%, transparent);
	content: '';
	inset: 0;
	position: absolute;
}

.course-lesson .lesson-info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.25rem;
	min-width: 0;
}

.course-lesson .lesson-title {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.4;
}

.course-lesson .lesson-title a {
	color: inherit;
	text-decoration: none;
}

.course-lesson:hover .lesson-title a {
	color: var(--link);
}

.course-lesson .lesson-excerpt {
	color: var(--text-500);
	font-size: var(--text-mini);
	line-height: 1.5;
}

.course-lesson .lesson-aside {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 0.25rem;
}

.course-lesson .lesson-dur {
	color: var(--text-500);
	font-size: var(--text-micro);
	font-weight: 600;
	white-space: nowrap;
}

.course-lesson .lesson-now {
	color: var(--green-400);
	font-size: var(--text-tiny);
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

/* !- Course downloads */
.course-downloads-intro {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

.download-list .download-item {
	background: var(--bg-850);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 0.875rem 1rem;
}

.download-list .download-item:hover {
	border-color: var(--bg-500);
}

.download-item.is-locked .download-icon {
	background: color-mix(in srgb, var(--orange-500) 15%, transparent);
	color: var(--orange-500);
}

/* !- Watched toggle */
.watched-toggle {
	align-items: center;
	background: color-mix(in srgb, var(--green-500) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--green-500) 40%, transparent);
	border-radius: var(--border-radius);
	color: var(--green-400);
	cursor: pointer;
	display: flex;
	font-size: var(--text-xs);
	font-weight: 600;
	gap: 0.5rem;
	height: 2.75rem;
	padding: 0 1rem;
	white-space: nowrap;
}

.watched-toggle:hover {
	border-color: var(--green-500);
	color: var(--green-300);
}

.watched-toggle:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Unwatched greys the tick rather than dropping it, so the width holds */
.watched-toggle:not(.is-watched) {
	background: var(--bg-850);
	border-color: var(--bg-700);
	color: var(--text-400);
}

.watched-toggle:not(.is-watched) i {
	opacity: 0.5;
}

/* !- Free preview upsell */
.course-preview-note {
	background: var(--bg-850);
	border-left: 3px solid var(--orange-500);
	border-radius: var(--border-radius);
	margin-top: 2rem;
	padding: 1.5rem;
}

.course-preview-note .course-preview-title {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.course-preview-note .course-preview-blurb {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 1.25rem;
}

.course-preview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

/* !- Course info table */
.course-info li {
	display: flex;
	font-size: var(--text-mini);
	gap: 1rem;
	justify-content: space-between;
	padding: 0.5rem 0;
}

.course-info li:not(:last-child) {
	border-bottom: 1px solid var(--bg-700);
}

.course-info li span:first-child {
	color: var(--text-400);
}

.course-info li span:last-child {
	color: var(--text-50);
	font-weight: 600;
	text-align: right;
}

/* !- Rail blurb */
.rail-card .rail-blurb {
	font-size: var(--text-mini);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- Small screens */
@media (max-width: 575.98px) {
	.course-lesson {
		flex-wrap: wrap;
	}

	.course-lesson .lesson-thumb {
		height: 3.5rem;
		width: 6rem;
	}

	.course-lesson .lesson-excerpt {
		display: none;
	}

	.course-head .course-title {
		font-size: var(--text-2xl);
	}
}