/*
 * Learning area: lesson, quiz and assignment screens (Figma "Course Content").
 * Measurements are from the Figma export at 1440px; content sits in a 1200px container
 * (x 120-1320): left column 391px, 40px gap, main column 769px.
 * Every rule is scoped to body.fdi-learning-area (added by inc/lesson.php).
 * Markup: Tutor 4.0.9 learning area + the child overrides in tutor/learning-area/.
 */

/* ------------------------------------------------------------- Tokens */
body.fdi-learning-area {
	--fdi-la-left: 391px;   /* Figma: left column 35-425 */
	--fdi-la-gap: 40px;     /* Figma: 426-465 */
	--fdi-la-panel: rgba(237, 237, 237, 0.4); /* Figma: #5e88a5 over #004675 */
	--fdi-la-rule: rgba(255, 255, 255, 0.25); /* Figma: #407497 over #004675 */
	--fdi-la-shadow: 0 0 16px rgba(0, 0, 0, 0.14);
	--fdi-la-video: #151515;
}

/* ------------------------------------------------------------ Icons */
body.fdi-learning-area .fdi-la-icon {
	display: inline-block;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--fdi-la-mask) center / contain no-repeat;
	mask: var(--fdi-la-mask) center / contain no-repeat;
}

body.fdi-learning-area .fdi-la-icon--back { --fdi-la-mask: url("../icons/arrow-course-content.svg"); width: 28px; height: 28px; }
/* Tick circle: the client's "Tick Course Content" circle and stroke, with the tick centred as in
   Figma (the exported SVG places the tick at the top of the circle). */
body.fdi-learning-area .fdi-la-icon--tick,
body.fdi-learning-area .fdi-la-icon--done { --fdi-la-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M20 10l-8 9-3-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.fdi-learning-area .fdi-la-icon--tick { width: 28px; height: 28px; }
body.fdi-learning-area .fdi-la-icon--cross {
	--fdi-la-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M9.5 9.5l9 9M18.5 9.5l-9 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	width: 28px;
	height: 28px;
}
body.fdi-learning-area .fdi-la-icon--prev { --fdi-la-mask: url("../icons/previous-static.svg"); width: 28px; height: 28px; }
body.fdi-learning-area .fdi-la-icon--next { --fdi-la-mask: url("../icons/next-static.svg"); width: 28px; height: 28px; }
body.fdi-learning-area .fdi-la-icon--info { --fdi-la-mask: url("../icons/info-static.svg"); width: 20px; height: 20px; }
body.fdi-learning-area .fdi-la-icon--play { --fdi-la-mask: url("../icons/play-static.svg"); width: 22px; height: 16px; }
body.fdi-learning-area .fdi-la-icon--done { width: 20px; height: 20px; }

/* Eye in a 20px circle (Figma lesson row). */
body.fdi-learning-area .fdi-la-icon--eye {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	-webkit-mask: none;
	mask: none;
}

body.fdi-learning-area .fdi-la-icon--eye::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 9px;
	background: currentColor;
	-webkit-mask: url("../icons/eye-static.svg") center / contain no-repeat;
	mask: url("../icons/eye-static.svg") center / contain no-repeat;
	transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------- Band */
/* Navy band with the client's logo-pattern watermark (Figma: pattern at 1:1,
   x -4px, its top 116px above the band; tile = one 1400px repeat).
   Only the screens with the header bar get the band: Tutor's quiz-attempt
   and attempt-details screens keep their own full-screen layout. */
body.fdi-learning-area .tutor-learning-area:has(> .fdi-la-head) {
	--fdi-la-gutter: max(16px, calc((100% - 1200px) / 2));
	position: relative;
	display: grid;
	grid-template-columns: var(--fdi-la-left) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--fdi-la-gap);
	min-height: 0; /* Tutor: 100vh (100vh - 32px with the admin bar, see below) */
	padding: 36px var(--fdi-la-gutter) 0;
	overflow-x: clip;
	background: var(--fdi-navy) url("../img/lesson-band-pattern.svg") calc(50% - 2px) -116px / 1444px 1400px repeat-y;
	color: var(--fdi-white);
	font-family: var(--fdi-font-body);
}

/* Tutor: body:has(#wpadminbar) .tutor-learning-area { min-height: calc(100vh - 32px) } (1,1,1). */
body.fdi-learning-area:has(#wpadminbar) .tutor-learning-area:has(> .fdi-la-head) {
	min-height: 0;
}

body.fdi-learning-area .tutor-learning-area .tutor-learning-area-body,
body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .tutor-learning-area-body {
	display: contents;
	padding: 0;
}

/* --------------------------------------------------------- Header bar */
body.fdi-learning-area .tutor-learning-area .fdi-la-head,
body.fdi-learning-area .tutor-has-site-shell .fdi-la-head {
	position: relative;
	top: auto;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	width: auto;
	padding: 0;
	background: none;
	container: fdi-la-head / inline-size;
}

body.fdi-learning-area .fdi-la-head .fdi-la-head__inner {
	display: flex;
	align-items: center;
	min-height: 126px; /* Figma: 152-277 */
	padding: 0 24px 0 19px;
	border-radius: 20px;
	background: var(--fdi-teal);
	overflow: visible;
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-head__lead {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	padding: 16px 0;
}

body.fdi-learning-area .fdi-la-head .fdi-la-head__back {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-head .fdi-la-head__back:hover,
body.fdi-learning-area .fdi-la-head .fdi-la-head__back:focus-visible {
	color: var(--fdi-navy);
}

/* Figma: PT Serif 700 24px, 26px line pitch, baselines 48 / 74 / 100px below the bar top
   (the block sits 2px below centre, hence the 4px top padding). At most three lines here:
   longer titles get the stacked bar (.fdi-la-head--stack); the clamp is only a safety net. */
body.fdi-learning-area .fdi-la-head .fdi-la-head__title {
	display: -webkit-box;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 0 -3px 17px; /* the bottom padding only makes room for descenders */
	padding: 4px 0 3px;
	overflow: hidden;
	font: 700 24px/26px var(--fdi-font-heading);
	letter-spacing: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
	color: var(--fdi-white);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Divider | Completed Lessons | divider */
body.fdi-learning-area .fdi-la-head__stats {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	min-height: 78px; /* Figma divider: 175-252 */
	margin-left: 19px;
	padding: 0 18px;
	border-left: 2px solid var(--fdi-white);
	white-space: nowrap;
}

body.fdi-learning-area .fdi-la-head__label {
	font: 500 17px/23px var(--fdi-font-body);
}

body.fdi-learning-area .fdi-la-head__count {
	font: 700 29px/39px var(--fdi-font-body);
}

body.fdi-learning-area .fdi-la-head__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	min-height: 78px;
	padding-left: 24px;
	border-left: 2px solid var(--fdi-white);
}

body.fdi-learning-area .fdi-la-head__stats + .fdi-la-head__actions {
	margin-left: 0;
}

body.fdi-learning-area .fdi-la-head__lead + .fdi-la-head__actions {
	margin-left: 19px;
}

body.fdi-learning-area .fdi-la-head .fdi-la-complete {
	margin: 0;
}

/* "Mark as Complete" white outline pill with tick + cross circles (Figma 280x42). */
body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.fdi-la-complete__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 42px;
	margin: 0;
	padding: 0 5px 0 21px;
	border: 2px solid var(--fdi-white);
	border-radius: var(--fdi-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--fdi-white);
	font: 700 20px/1 var(--fdi-font-heading);
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.fdi-learning-area .fdi-la-complete__label {
	width: auto;
	margin-right: 14px;
	text-align: left;
}

body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.fdi-la-complete__btn:hover:not(:disabled),
body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.fdi-la-complete__btn:focus-visible:not(:disabled) {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.fdi-la-complete__btn.completed {
	background: var(--fdi-white);
	color: var(--fdi-teal);
	cursor: default;
	opacity: 1;
}

/* Not completed but locked by Tutor (video watch requirement not met yet): dimmed outline. */
body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.fdi-la-complete__btn:disabled:not(.completed) {
	background: transparent;
	color: var(--fdi-white);
	cursor: not-allowed;
	opacity: 0.55;
}

body.fdi-learning-area .tutor-learning-area .fdi-la-head .tutor-mark-as-complete-button.tutor-btn-loading {
	opacity: 0.7;
}

/* Tutor's "Retake this Course" (only after the course is complete). */
body.fdi-learning-area .fdi-la-head__actions .tutor-btn {
	height: 42px;
	padding: 0 22px;
	border: 2px solid var(--fdi-white);
	border-radius: var(--fdi-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--fdi-white);
	font: 700 18px/1 var(--fdi-font-heading);
}

body.fdi-learning-area .fdi-la-head__actions .tutor-btn:hover,
body.fdi-learning-area .fdi-la-head__actions .tutor-btn:focus-visible {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

/* Mobile sidebar toggle (shown at 1024 and below). */
body.fdi-learning-area .fdi-la-head .fdi-la-head__toggle {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	margin-left: 12px;
}

body.fdi-learning-area .fdi-la-head__toggle .tutor-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid var(--fdi-white);
	border-radius: 50%;
	background: transparent;
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-head__toggle .tutor-btn:hover,
body.fdi-learning-area .fdi-la-head__toggle .tutor-btn:focus-visible {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

/* Stacked header bar: title row, then stats + action.
   - .fdi-la-head--stack: a course title longer than Figma's three lines (set in components/header.php).
   - Narrower than the 769px bar of the 1200 container (windows below 1232px, tablets, phones). */
body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__inner {
	flex-wrap: wrap;
	column-gap: 16px;
	padding: 18px 19px 20px;
}

body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__lead {
	flex: 1 1 calc(100% - 56px);
	order: 1;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--fdi-white);
}

body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__title {
	display: block;
	margin-bottom: 0;
	padding: 0;
	overflow: visible;
	-webkit-line-clamp: none;
	line-clamp: none;
}

body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__toggle {
	order: 2;
	margin: 0 0 14px;
}

body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__stats {
	order: 3;
	min-height: 0;
	margin: 14px auto 0 0;
	padding: 0;
	border: 0;
}

body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__actions,
body.fdi-learning-area .fdi-la-head--stack .fdi-la-head__lead + .fdi-la-head__actions {
	order: 4;
	min-height: 0;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
}

@container fdi-la-head (max-width: 768px) {
	body.fdi-learning-area .fdi-la-head .fdi-la-head__inner {
		flex-wrap: wrap;
		column-gap: 16px;
		padding: 18px 19px 20px;
	}

	body.fdi-learning-area .fdi-la-head__lead {
		flex: 1 1 calc(100% - 56px);
		order: 1;
		padding: 0 0 14px;
		border-bottom: 2px solid var(--fdi-white);
	}

	body.fdi-learning-area .fdi-la-head .fdi-la-head__title {
		display: block;
		margin-bottom: 0;
		padding: 0;
		overflow: visible;
		-webkit-line-clamp: none;
		line-clamp: none;
	}

	body.fdi-learning-area .fdi-la-head .fdi-la-head__toggle {
		order: 2;
		margin: 0 0 14px;
	}

	body.fdi-learning-area .fdi-la-head__stats {
		order: 3;
		min-height: 0;
		margin: 14px auto 0 0;
		padding: 0;
		border: 0;
	}

	body.fdi-learning-area .fdi-la-head__actions,
	body.fdi-learning-area .fdi-la-head__lead + .fdi-la-head__actions {
		order: 4;
		min-height: 0;
		margin: 14px 0 0;
		padding: 0;
		border: 0;
	}
}

/* ------------------------------------------------------------ Sidebar */
body.fdi-learning-area .tutor-learning-area .fdi-la-side,
body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .fdi-la-side {
	position: relative;
	top: auto;
	z-index: auto;
	display: flex;
	flex-direction: column;
	grid-column: 1;
	grid-row: 1 / span 2;
	gap: 0;
	width: auto;
	height: auto;
	padding: 0;
	overflow: visible;
	transform: none;
	background: none;
	color: var(--fdi-navy);
}

/* Teal "COURSE CONTENT" box (Figma 391x126, PT Serif 700 35px, uppercase). */
body.fdi-learning-area .fdi-la-side__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 126px;
	padding: 0 28px 2px 20px; /* Figma: text 35px from the left, 42px from the right */
	border-radius: 20px;
	background: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-side__title {
	margin: 0;
	font: 700 35px/1 var(--fdi-font-heading);
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-side__close {
	display: none;
	position: absolute;
	top: 50%;
	right: 16px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--fdi-white);
	border-radius: 50%;
	background: transparent;
	color: var(--fdi-white);
	cursor: pointer;
}

body.fdi-learning-area .fdi-la-side__close:hover,
body.fdi-learning-area .fdi-la-side__close:focus-visible {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

/* Translucent panel running down the band (Figma: 21px below the box, square at the bottom). */
body.fdi-learning-area .fdi-la-side__panel {
	flex: 1 0 auto;
	margin-top: 21px;
	padding: 20px 23px 22px 21px;
	border-radius: 20px 20px 0 0;
	background: var(--fdi-la-panel);
}

body.fdi-learning-area .fdi-la-side .fdi-la-topics {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma (crisp edges at x=200): closed rows 72px, 20px apart */
	min-height: 0;
	padding: 0;
	overflow: visible;
}

body.fdi-learning-area .fdi-la-topic {
	display: block;
	border-radius: 10px;
	background: var(--fdi-white);
}

/* Topic row: navy Open Sans 700 title, (i) and "done/total". */
body.fdi-learning-area .fdi-la-side .fdi-la-topic__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 72px;
	padding: 16px 38px 12px 20px; /* Figma: the title sits 2px below centre, the (i) and count are centred */
	border-radius: 10px;
	background: var(--fdi-white);
	color: var(--fdi-navy);
	cursor: pointer;
	transition: color 0.2s ease;
}

body.fdi-learning-area .fdi-la-side .fdi-la-topic__head:hover,
body.fdi-learning-area .fdi-la-side .fdi-la-topic__head:focus-visible {
	color: var(--fdi-teal);
	outline: none;
}

body.fdi-learning-area .fdi-la-side .fdi-la-topic__head:focus-visible {
	box-shadow: 0 0 0 2px var(--fdi-white), 0 0 0 4px var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-topic__title {
	flex: 1 1 auto;
	min-width: 0;
	font: 700 17px/22px var(--fdi-font-body);
	overflow-wrap: anywhere;
}

body.fdi-learning-area .fdi-la-topic__meta {
	position: relative;
	top: -2px; /* back to the row's centre (the padding sets the title 2px low) */
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
}

body.fdi-learning-area .fdi-la-topic__info,
body.fdi-learning-area .fdi-la-topic__info .tutor-tooltip-wrap {
	display: flex;
	align-items: center;
}

/* Figma: closed rows Open Sans 600 17px (lighter than the title, "0/2" 26px wide);
   the open topic 400 16px. Right-aligned in a 26px slot so the (i) keeps its place. */
body.fdi-learning-area .fdi-la-topic__count {
	min-width: 26px;
	text-align: right;
	font: 600 17px/22px var(--fdi-font-body);
	white-space: nowrap;
}

/* Open topic: navy header, white text, lessons below. */
body.fdi-learning-area .fdi-la-side .fdi-la-topic.expanded .fdi-la-topic__head {
	min-height: 71px; /* Figma: open topic header 71px */
	padding-bottom: 11px;
	border-radius: 10px 10px 0 0;
	background: var(--fdi-navy);
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-side .fdi-la-topic.expanded .fdi-la-topic__count {
	font-weight: 400;
	font-size: 16px;
}

body.fdi-learning-area .fdi-la-side .fdi-la-topic__body {
	padding: 0;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}

body.fdi-learning-area .fdi-la-side .fdi-la-topic__body::before {
	content: none;
}

/* Lesson / quiz / assignment row. */
body.fdi-learning-area .fdi-la-side .fdi-la-item {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 57px; /* Figma: lesson rows 57px */
	margin: 0;
	padding: 10px 15px 7px 20px; /* Figma: the title sits 2px below centre, the icons are centred */
	border-radius: 0;
	background: var(--fdi-white);
	color: var(--fdi-navy);
	font: 700 17px/20px var(--fdi-font-body);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.fdi-learning-area .fdi-la-side .fdi-la-item + .fdi-la-item {
	border-top: 1px solid var(--fdi-rule);
}

body.fdi-learning-area .fdi-la-side .fdi-la-item:last-child {
	border-radius: 0 0 10px 10px;
}

body.fdi-learning-area .fdi-la-side .fdi-la-item::before {
	content: none;
}

body.fdi-learning-area .fdi-la-side .fdi-la-item:hover,
body.fdi-learning-area .fdi-la-side .fdi-la-item:focus-visible,
body.fdi-learning-area .fdi-la-side .fdi-la-item.active {
	background: var(--fdi-white);
	color: var(--fdi-teal);
	outline: none;
}

body.fdi-learning-area .fdi-la-side .fdi-la-item:focus-visible {
	box-shadow: inset 0 0 0 2px var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-item__type,
body.fdi-learning-area .fdi-la-item__meta {
	position: relative;
	top: -1px; /* centred on the row (the padding sets the title 2px low) */
}

body.fdi-learning-area .fdi-la-item__type {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-side .fdi-la-item svg {
	margin: 0;
	color: currentColor;
}

body.fdi-learning-area .fdi-la-item__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

body.fdi-learning-area .fdi-la-item__meta {
	display: flex;
	flex: none;
	align-items: center;
	gap: 5px; /* Figma: "10:00" ink ends 6px before the eye */
	margin-left: 8px;
}

body.fdi-learning-area .fdi-la-item__time {
	font: 700 17px/20px var(--fdi-font-body);
	white-space: nowrap;
}

body.fdi-learning-area .fdi-la-item__status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

body.fdi-learning-area .fdi-la-item.is-done .fdi-la-item__status,
body.fdi-learning-area .fdi-la-item.is-done:hover .fdi-la-item__status {
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-item.is-locked {
	color: var(--fdi-grey);
}

/* "More" (Tutor's sub-pages: Course Info, Q&A, Reviews, Resources ...). */
body.fdi-learning-area .fdi-la-side .fdi-la-pages,
body.fdi-learning-area .fdi-la-side .fdi-la-pages.expanded {
	margin: 21px 0 0;
	padding: 0;
	border-radius: 10px;
	background: none;
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages {
	gap: 0;
	overflow: visible;
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .fdi-la-pages__more,
body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-nav {
	border-radius: 10px;
	background: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-item {
	gap: 10px;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 10px;
	color: var(--fdi-navy);
	font: 700 16px/22px var(--fdi-font-body);
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-item svg {
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-item:hover,
body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-item:focus-visible,
body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-learning-pages-item.active {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-popover {
	width: min(347px, calc(100vw - 32px)); /* the row width */
	max-width: none;
	padding: 8px 0;
	border: 0;
	border-radius: 10px;
	box-shadow: var(--fdi-la-shadow);
}

body.fdi-learning-area .fdi-la-side .fdi-la-pages .tutor-popover .tutor-learning-pages-item {
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 0;
	font-weight: 600;
}

/* ------------------------------------------------------------ Content */
body.fdi-learning-area .tutor-learning-area .tutor-learning-area-content,
body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .tutor-learning-area-content {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding: 39px 0 0; /* Figma: header bar bottom 277 -> video 317 */
}

body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.fdi-learning-area .tutor-learning-area .tutor-lesson-content {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	margin: 0; /* Tutor: 8px top, -16px sides on phones */
}

/* Figma: the video, tabs, title and content start 3px inside the header bar's left edge
   (bar x 466, content x 469) and end at its right edge. */
body.fdi-learning-area .tutor-learning-area .tutor-lesson-content-tab {
	margin-bottom: 108px; /* Figma: last content 3601 -> bar 3709 */
	margin-left: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

/* Video: black 16:9 box, 20px radius (Figma 902x507). */
body.fdi-learning-area .tutor-lesson-video-wrapper,
body.fdi-learning-area .tutor-lesson-image-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--fdi-la-video);
}

body.fdi-learning-area .tutor-lesson-video-wrapper > *,
body.fdi-learning-area .tutor-lesson-video-wrapper .tutor-video-player,
body.fdi-learning-area .tutor-lesson-video-wrapper .plyr,
body.fdi-learning-area .tutor-lesson-video-wrapper video,
body.fdi-learning-area .tutor-lesson-video-wrapper iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
}

body.fdi-learning-area .tutor-lesson-video-wrapper .tutor-video-player,
body.fdi-learning-area .tutor-lesson-video-wrapper .plyr {
	aspect-ratio: auto;
	background: var(--fdi-la-video);
}

body.fdi-learning-area .tutor-lesson-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tabs: Overview / Exercise Files / Notes ... Take Note (Figma: white Open Sans 700 17px,
   4px white underline on the active tab, 2px translucent rule ending 61px short). */
body.fdi-learning-area .tutor-lesson-content-tab > .tutor-tabs-nav {
	display: flex;
	align-items: flex-end;
	gap: 0;
	margin: 0 62px 0 0; /* Figma: the rule ends 62px before the bar's right edge */
	padding: 0;
	border: 0;
	border-bottom: 2px solid var(--fdi-la-rule);
	background: none;
	overflow: visible;
}

body.fdi-learning-area .tutor-lesson-video-wrapper + .tutor-tabs-nav,
body.fdi-learning-area .tutor-lesson-image-wrapper + .tutor-tabs-nav {
	margin-top: 26px;
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	height: auto;
	margin: 0 31px 0 0; /* Figma: Notes icon 367px from the content edge */
	padding: 0 25px 11px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--fdi-white);
	font: 700 17px/22px var(--fdi-font-body);
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:first-of-type {
	margin-right: 45px; /* Figma: Exercise Files icon 173px from the content edge */
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:hover,
body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:focus-visible {
	background: none;
	color: var(--fdi-teal);
	outline: none;
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab.tutor-tabs-tab-active {
	background: none;
	color: var(--fdi-white);
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab.tutor-tabs-tab-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 4px;
	background: var(--fdi-white);
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab .tutor-icon {
	position: relative;
	top: 1px;
	display: block;
	width: var(--fdi-la-tab-w, 20px);
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--fdi-la-tab-icon, none) center / contain no-repeat;
	mask: var(--fdi-la-tab-icon, none) center / contain no-repeat;
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab[data-fdi-tab] .tutor-icon svg {
	display: none;
}

body.fdi-learning-area .tutor-tabs-nav [data-fdi-tab="overview"] { --fdi-la-tab-icon: url("../icons/course-delivery-overview-static.svg"); --fdi-la-tab-w: 15px; gap: 8px; }
body.fdi-learning-area .tutor-tabs-nav [data-fdi-tab="exercise_files"] { --fdi-la-tab-icon: url("../icons/course-delivery-exercise-files-static.svg"); --fdi-la-tab-w: 19px; gap: 6px; }
body.fdi-learning-area .tutor-tabs-nav [data-fdi-tab="notes"] { --fdi-la-tab-icon: url("../icons/course-delivery-notes-active.svg"); --fdi-la-tab-w: 16.6px; gap: 13px; }

/* Tabs Tutor adds that have no client icon keep Tutor's glyph. */
body.fdi-learning-area .tutor-tabs-nav [data-fdi-tab="comments"] .tutor-icon,
body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:not([data-fdi-tab]) .tutor-icon {
	width: 20px;
	background: none;
	-webkit-mask: none;
	mask: none;
}

body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab[data-fdi-tab="comments"] .tutor-icon,
body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab[data-fdi-tab="comments"] .tutor-icon svg {
	display: block;
	color: inherit; /* white like the other tab icons */
}

/* "Take Note" (Tutor Pro), right end of the tab row. */
body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn {
	position: static; /* Tutor: absolute, top 16px */
	display: inline-flex;
	min-height: 0;
	align-items: center;
	gap: 4px;
	height: auto;
	margin: 0 0 0 auto;
	padding: 0 0 11px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--fdi-white);
	font: 700 17px/22px var(--fdi-font-body);
	white-space: nowrap;
}

body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn.tutor-d-none {
	display: none;
}

body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn::before {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("../icons/course-delivery-take-note-static.svg") center / contain no-repeat;
	mask: url("../icons/course-delivery-take-note-static.svg") center / contain no-repeat;
}

body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn > svg {
	display: none;
}

body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn > span {
	display: inline;
}

body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn:hover,
body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn:focus-visible {
	background: none;
	color: var(--fdi-teal);
}

/* Tab panels */
body.fdi-learning-area .tutor-lesson-content-tab .tutor-tabs-content {
	border: 0;
	background: none;
}

body.fdi-learning-area .tutor-lesson-content-tab .tutor-tab-panel {
	padding: 0;
	color: var(--fdi-white);
}

/* Overview: lesson title + content (Figma: PT Serif 700 31px; intro Open Sans 600 20px). */
body.fdi-learning-area .fdi-la-title {
	margin: 64px 0 0;
	font: 700 31px/37px var(--fdi-font-heading);
	letter-spacing: 0;
	text-transform: capitalize;
	color: var(--fdi-white);
}

body.fdi-learning-area .tutor-lesson-wrapper {
	margin-top: 7px;
	color: var(--fdi-white);
	font: 600 20px/27px var(--fdi-font-body);
	overflow-wrap: break-word;
}

body.fdi-learning-area .tutor-lesson-wrapper > :first-child {
	margin-top: 0;
}

body.fdi-learning-area .tutor-lesson-wrapper > :last-child {
	margin-bottom: 0;
}

body.fdi-learning-area .tutor-lesson-wrapper p,
body.fdi-learning-area .tutor-lesson-wrapper ul,
body.fdi-learning-area .tutor-lesson-wrapper ol {
	margin: 0 0 20px;
	color: inherit;
	font: inherit;
}

body.fdi-learning-area .tutor-lesson-wrapper ul,
body.fdi-learning-area .tutor-lesson-wrapper ol {
	padding-left: 28px;
}

body.fdi-learning-area .tutor-lesson-wrapper li {
	margin: 0 0 6px;
}

body.fdi-learning-area .tutor-lesson-wrapper h2,
body.fdi-learning-area .tutor-lesson-wrapper h3,
body.fdi-learning-area .tutor-lesson-wrapper h4 {
	margin: 36px 0 12px;
	font-family: var(--fdi-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--fdi-white);
}

body.fdi-learning-area .tutor-lesson-wrapper h2 { font-size: 28px; }
body.fdi-learning-area .tutor-lesson-wrapper h3 { font-size: 24px; }
body.fdi-learning-area .tutor-lesson-wrapper h4 { font-size: 20px; }

body.fdi-learning-area .tutor-lesson-wrapper a {
	color: var(--fdi-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.fdi-learning-area .tutor-lesson-wrapper a:hover,
body.fdi-learning-area .tutor-lesson-wrapper a:focus-visible {
	color: var(--fdi-teal);
}

body.fdi-learning-area .tutor-lesson-wrapper pre,
body.fdi-learning-area .tutor-lesson-wrapper code {
	color: var(--fdi-navy);
	background: var(--fdi-white);
}

body.fdi-learning-area .tutor-lesson-wrapper pre {
	margin: 0 0 20px;
	padding: 18px 22px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.5;
	white-space: pre-wrap;
}

body.fdi-learning-area .tutor-lesson-wrapper img {
	max-width: 100%;
	height: auto;
}

body.fdi-learning-area .tutor-lesson-wrapper figure {
	margin: 30px 0 0;
}

/* Embedded document viewers: white boxes with a soft shadow (Figma 906px wide, 62px apart). */
body.fdi-learning-area .tutor-lesson-wrapper figure.fdi-pdf-view {
	background: var(--fdi-white);
	box-shadow: var(--fdi-la-shadow);
}

body.fdi-learning-area .tutor-lesson-wrapper figure + figure {
	margin-top: 62px;
}

/* Figma lesson: 62px above the 2nd viewer, 69px above the 3rd (demo content class). */
body.fdi-learning-area .tutor-lesson-wrapper figure + figure.fdi-pdf-view--gap-lg {
	margin-top: 69px;
}

body.fdi-learning-area .tutor-lesson-wrapper figure.fdi-pdf-view img {
	display: block;
	width: 100%;
	height: auto;
}

body.fdi-learning-area .tutor-lesson-wrapper iframe,
body.fdi-learning-area .tutor-lesson-wrapper embed,
body.fdi-learning-area .tutor-lesson-wrapper object {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	background: var(--fdi-white);
	box-shadow: var(--fdi-la-shadow);
}

/* Exercise Files */
body.fdi-learning-area .fdi-la-files {
	padding: 0;
}

body.fdi-learning-area .fdi-la-files__title {
	margin: 62px 0 24px;
	font: 700 31px/37px var(--fdi-font-heading);
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-files__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fdi-learning-area .fdi-la-files__item {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 84px;
	padding: 14px 22px;
	border-radius: 20px;
	background: var(--fdi-white);
	color: var(--fdi-navy);
}

body.fdi-learning-area .fdi-la-files__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 56px;
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-files__item--pdf .fdi-la-files__icon {
	background: url("../icons/pdf-icon.svg") center / contain no-repeat;
}

body.fdi-learning-area .fdi-la-files__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

body.fdi-learning-area .fdi-la-files__name {
	font: 700 18px/24px var(--fdi-font-body);
	overflow-wrap: anywhere;
}

body.fdi-learning-area .fdi-la-files__meta {
	font: 400 14px/20px var(--fdi-font-body);
	color: var(--fdi-meta, #4c595d);
}

body.fdi-learning-area .fdi-la-files__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 36px;
	padding: 0 18px;
	border: 2px solid var(--fdi-teal);
	border-radius: var(--fdi-radius-pill);
	color: var(--fdi-teal);
	font: 700 16px/1 var(--fdi-font-heading);
	text-decoration: none;
	white-space: nowrap;
}

body.fdi-learning-area .fdi-la-files__btn:hover,
body.fdi-learning-area .fdi-la-files__btn:focus-visible {
	background: var(--fdi-teal);
	color: var(--fdi-white);
}

/* Notes (Tutor Pro) and Comments: white cards on the band. */
body.fdi-learning-area .tutor-learning-area-notes,
body.fdi-learning-area .tutor-lesson-content-tab .tutor-tab-panel[x-show*="comments"] {
	margin-top: 40px;
	border-radius: 20px;
	background: var(--fdi-white);
	color: var(--fdi-text);
	overflow: hidden;
}

body.fdi-learning-area .tutor-learning-area-notes .tutor-input,
body.fdi-learning-area .tutor-lesson-note-form-wrapper .tutor-input {
	border-radius: 20px;
}

body.fdi-learning-area .tutor-lesson-note-form-wrapper {
	border-radius: 20px;
	background: var(--fdi-white);
	color: var(--fdi-text);
	box-shadow: var(--fdi-la-shadow);
}

body.fdi-learning-area .tutor-learning-area-notes .tutor-btn,
body.fdi-learning-area .tutor-lesson-note-form-wrapper .tutor-btn {
	border-radius: var(--fdi-radius-pill);
}

/* ----------------------------------------------- Quiz, assignment, sub-pages */
/* White content cards on the band (no Figma for these screens). */
body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) {
	margin-bottom: 108px;
	padding: 32px;
	border-radius: 20px;
	background: var(--fdi-white);
	color: var(--fdi-text);
}

/* Tutor gives the assignment a top margin (8px); the content starts 39px under the header bar. */
body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container > .tutor-assignment {
	margin-top: 0;
}

/* The quiz intro is already a card in Tutor: make it the FDI card. */
body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container > div.tutor-quiz {
	padding: 0;
	background: none;
}

body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container > div.tutor-quiz .tutor-quiz-intro {
	margin: 0;
	padding: 32px;
	border: 0;
	border-radius: 20px;
	background: var(--fdi-white);
}

body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) h1,
body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) h2,
body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) h3,
body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) .tutor-quiz-intro-title {
	font-family: var(--fdi-font-heading);
	font-weight: 700;
	color: var(--fdi-navy);
}

body.fdi-learning-area .tutor-quiz-intro-title {
	font-size: 31px;
	line-height: 37px;
}

body.fdi-learning-area .tutor-learning-area-container .tutor-btn {
	border-radius: var(--fdi-radius-pill);
}

body.fdi-learning-area .tutor-learning-area-container .tutor-btn:not(.tutor-btn-link):not(.tutor-btn-icon) {
	font-family: var(--fdi-font-heading);
	font-weight: 700;
}

/* The quiz intro's Skip / Start buttons stay in the card. */
body.fdi-learning-area .tutor-quiz .tutor-learning-area-footer,
body.fdi-learning-area .tutor-has-site-shell .tutor-quiz .tutor-learning-area-footer {
	position: static;
	margin-top: 24px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* --------------------------------------------------- Previous / Next bar */
/* Figma: teal bar 79px tall from the left column's edge to the window edge;
   "Previous" white outline pill, "Next" white pill with teal text (166x42). */
body.fdi-learning-area .fdi-la-nav {
	position: relative;
	z-index: 20; /* above the floating Take Note button on phones (19) */
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	min-height: 79px;
	margin: auto 0 0 calc(-1 * var(--fdi-la-gap));
	padding: 19px 18px 18px 85px;
}

body.fdi-learning-area .fdi-la-nav::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: -100vw;
	bottom: 0;
	left: 0;
	background: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-nav__btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	width: 166px;
	height: 42px;
	border: 2px solid var(--fdi-white);
	border-radius: var(--fdi-radius-pill);
	font: 700 20px/1 var(--fdi-font-heading);
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Figma: label baseline 1px above the pill's centre line. */
body.fdi-learning-area .fdi-la-nav__label {
	position: relative;
	top: -1px;
}

body.fdi-learning-area .fdi-la-nav__btn--prev {
	gap: 16px;
	padding: 0 12px 0 5px;
	background: transparent;
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-nav__btn--next {
	justify-content: flex-end;
	gap: 26px;
	margin-left: auto;
	padding: 0 5px 0 12px;
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-nav__btn--prev:hover,
body.fdi-learning-area .fdi-la-nav__btn--prev:focus-visible {
	background: var(--fdi-white);
	color: var(--fdi-teal);
}

body.fdi-learning-area .fdi-la-nav__btn--next:hover,
body.fdi-learning-area .fdi-la-nav__btn--next:focus-visible {
	border-color: var(--fdi-navy);
	background: var(--fdi-navy);
	color: var(--fdi-white);
}

body.fdi-learning-area .fdi-la-nav__btn:focus-visible {
	outline: 2px solid var(--fdi-white);
	outline-offset: 2px;
}

body.fdi-learning-area .fdi-la-nav__btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* ----------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
	body.fdi-learning-area .tutor-learning-area:has(> .fdi-la-head) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		padding-top: 24px;
	}

	body.fdi-learning-area .tutor-learning-area .fdi-la-head,
	body.fdi-learning-area .tutor-has-site-shell .fdi-la-head,
	body.fdi-learning-area .tutor-learning-area .tutor-learning-area-content,
	body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .tutor-learning-area-content {
		grid-column: 1;
	}

	body.fdi-learning-area .tutor-learning-area .tutor-learning-area-content,
	body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .tutor-learning-area-content {
		padding-top: 32px;
	}

	body.fdi-learning-area .tutor-learning-area .tutor-lesson-content-tab {
		margin-left: 0;
	}

	body.fdi-learning-area .fdi-la-head .fdi-la-head__toggle {
		display: block;
	}

	/* Tutor's mobile pattern: the course content slides in from the right. */
	body.fdi-learning-area .tutor-learning-area .fdi-la-side,
	body.fdi-learning-area .tutor-learning-area.tutor-has-site-shell .fdi-la-side {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 99999;
		width: min(440px, 100%);
		height: 100dvh;
		padding: 16px 16px 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--fdi-navy) url("../img/lesson-band-pattern.svg") 0 0 / 1444px 1400px repeat-y;
		box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	body.fdi-learning-area .tutor-learning-area .fdi-la-side.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s;
	}

	body.admin-bar.fdi-learning-area .tutor-learning-area .fdi-la-side {
		top: var(--wp-admin--admin-bar--height, 46px);
		height: auto;
	}

	body.fdi-learning-area .fdi-la-side__head {
		height: 96px;
		justify-content: flex-start;
		padding: 0 72px 0 24px;
	}

	body.fdi-learning-area .fdi-la-side__title {
		font-size: 28px;
	}

	body.fdi-learning-area .fdi-la-side__close {
		display: flex;
	}

	body.fdi-learning-area .fdi-la-side__panel {
		margin-top: 16px;
		padding: 16px 16px 24px;
	}

	body.fdi-learning-area .fdi-la-nav {
		margin-left: 0;
		padding: 18px 0;
	}

	body.fdi-learning-area .fdi-la-nav::before {
		left: -100vw;
	}
}

@media (max-width: 767px) {
	body.fdi-learning-area .fdi-la-head .fdi-la-head__title {
		font-size: 21px;
		line-height: 24px;
	}

	body.fdi-learning-area .fdi-la-head__count {
		font-size: 24px;
		line-height: 32px;
	}

	/* One scrollable row, so the active underline stays on the rule. The rule is drawn
	   inside the padding box (not as a border) so the scroller does not clip the underline. */
	body.fdi-learning-area .tutor-lesson-content-tab > .tutor-tabs-nav {
		flex-wrap: nowrap;
		margin-right: 0;
		padding-bottom: 2px;
		border-bottom: 0;
		background: linear-gradient(var(--fdi-la-rule), var(--fdi-la-rule)) left bottom / 100% 2px no-repeat;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	body.fdi-learning-area .tutor-lesson-content-tab > .tutor-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab.tutor-tabs-tab-active::after {
		bottom: -1px;
	}

	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn {
		padding-left: 12px;
	}

	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab,
	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:first-of-type {
		margin-right: 20px;
		padding-right: 8px;
	}

	body.fdi-learning-area .fdi-la-title,
	body.fdi-learning-area .fdi-la-files__title {
		margin-top: 40px;
		font-size: 26px;
		line-height: 31px;
	}

	body.fdi-learning-area .tutor-lesson-wrapper {
		font-size: 18px;
		line-height: 25px;
	}

	body.fdi-learning-area .tutor-lesson-wrapper figure + figure {
		margin-top: 40px;
	}

	body.fdi-learning-area .tutor-learning-area .tutor-lesson-content-tab,
	body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) {
		margin-bottom: 64px;
	}

	body.fdi-learning-area .tutor-learning-area-container > :not(.tutor-lesson-content):not(.fdi-la-nav) {
		padding: 22px 18px;
	}

	body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container > div.tutor-quiz {
		padding: 0;
	}

	body.fdi-learning-area .tutor-learning-area .tutor-learning-area-container > div.tutor-quiz .tutor-quiz-intro {
		padding: 22px 18px;
	}

	body.fdi-learning-area .fdi-la-files__item {
		flex-wrap: wrap;
		padding: 14px 16px;
	}

	body.fdi-learning-area .fdi-la-files__btn {
		margin-left: 60px;
	}
}

/* Phones: Tutor's pattern turns "Take Note" into a floating round button (fixed, bottom right,
   89px up so it clears the Previous / Next bar) with its .tutor-sm-hidden label hidden; here in
   FDI colours, the label kept as the accessible name. The three tabs then fit one row. */
@media (max-width: 576px) {
	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn {
		position: fixed;
		top: auto;
		right: 16px;
		bottom: 89px;
		inset-inline-end: 16px;
		z-index: 19;
		justify-content: center;
		width: 52px;
		min-width: 52px;
		height: 52px;
		min-height: 52px;
		margin: 0;
		padding: 0;
		border: 2px solid var(--fdi-white);
		border-radius: 50%;
		background: var(--fdi-teal);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
		color: var(--fdi-white);
	}

	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn::before {
		width: 20px;
		height: 20px;
	}

	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn:hover,
	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn:focus-visible {
		background: var(--fdi-navy);
		color: var(--fdi-white);
	}

	body.fdi-learning-area .tutor-tabs-nav #tutor-lesson-nav-take-note-btn > .tutor-sm-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab,
	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab:first-of-type {
		gap: 6px;
		margin-right: 0;
		padding-right: 4px;
	}

	body.fdi-learning-area .tutor-tabs-nav .tutor-tabs-tab + .tutor-tabs-tab {
		margin-left: 14px;
	}
}

@media (max-width: 480px) {
	body.fdi-learning-area .fdi-la-nav__btn {
		width: auto;
		min-width: 136px;
	}

	body.fdi-learning-area .fdi-la-nav__btn--prev {
		padding-right: 18px;
	}

	body.fdi-learning-area .fdi-la-nav__btn--next {
		gap: 16px;
		padding-left: 18px;
	}

}

@media (prefers-reduced-motion: reduce) {
	body.fdi-learning-area .tutor-learning-area .fdi-la-side,
	body.fdi-learning-area .fdi-la-nav__btn,
	body.fdi-learning-area .fdi-la-side .fdi-la-item,
	body.fdi-learning-area .fdi-la-side .fdi-la-topic__head {
		transition: none;
	}
}

/* ===================================================================== PDF Embedder viewer
 * Free "PDF Embedder" plugin (wordpress.org slug pdf-embedder, 5.0.2), shortcode
 * [pdf-embedder url="..." title="..."] used by the imported Q10 lessons. Plugin settings:
 * width/height "max", toolbar "bottom", toolbar fixed "on" (always visible).
 * Matches the Figma lesson viewer (Course Content, 469-1375 x 1051-1602 at 1440): white page at the
 * full column width, 40px grey (#808080) toolbar under it with a light top rule, 36px square
 * buttons 5px apart, "Page x / N" 15px after the arrows, zoom - / + further right; the same soft
 * shadow as figure.fdi-pdf-view. Free 5.0.2 has no "Page Width" select and no full-screen button
 * (Premium only), so its "Zoom 100%" read-out takes the select's place.
 * The script sizes the viewer from its wrapper's width and reads the toolbar height with
 * jQuery .height(), so the toolbar gets no vertical padding or border (the rule is an inset shadow).
 * Markup: div.wp-block-pdfemb-pdf-embedder-viewer > a.pdfemb-viewer (server), which pdfemb.min.js
 *         replaces with div.pdfemb-viewer > div.pdfemb-pagescontainer + div.pdfemb-toolbar.pdfemb-toolbar-fixed.pdfemb-toolbar-bottom.
 */
body.fdi-learning-area .wp-block-pdfemb-pdf-embedder-viewer {
	margin: 30px 0;
	max-width: 100%;
}

/* Figma: 62px between two viewers; a heading directly above a viewer keeps its own 12px. */
body.fdi-learning-area .wp-block-pdfemb-pdf-embedder-viewer + .wp-block-pdfemb-pdf-embedder-viewer {
	margin-top: 62px;
}

body.fdi-learning-area h2 + .wp-block-pdfemb-pdf-embedder-viewer,
body.fdi-learning-area h3 + .wp-block-pdfemb-pdf-embedder-viewer,
body.fdi-learning-area h4 + .wp-block-pdfemb-pdf-embedder-viewer {
	margin-top: 12px;
}

body.fdi-learning-area .wp-block-pdfemb-pdf-embedder-viewer .pdfemb-viewer {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	border: 0;
	background: var(--fdi-white);
	box-shadow: var(--fdi-la-shadow);
	color: var(--fdi-navy);
	text-decoration: none;
}

/* Page area: white page; the light grey only shows in the gap between pages while scrolling. */
body.fdi-learning-area .pdfemb-viewer .pdfemb-pagescontainer {
	margin-left: 0; /* the plugin's Safari-only 1px nudge also matches Chrome and clips the page edge */
	background-color: var(--fdi-rule);
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-pagescontainer .pdfemb-inner-div {
	background-color: var(--fdi-white);
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-loadingmsg {
	padding: 24px;
	font: 400 15px/1.4 var(--fdi-font-body);
	color: var(--fdi-navy);
	background: var(--fdi-white);
}

body.fdi-learning-area .pdfemb-viewer div.pdfemb-errormsg {
	padding: 16px 20px;
	font: 400 15px/1.4 var(--fdi-font-body);
	color: var(--fdi-text);
}

/* Toolbar */
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar {
	display: flex;
	align-items: center;
	gap: 5px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 4px;
	background-color: #808080;
	box-shadow: inset 0 1px 0 #dfdfdf;
	font-family: var(--fdi-font-body);
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar.pdfemb-toolbar-hover {
	display: none; /* only used if "toolbar fixed" is ever switched off: the script shows it on hover */
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar div {
	float: none;
	flex: none;
	margin: 0;
	padding: 0;
	font: 400 15px/36px var(--fdi-font-body);
	color: #ededed;
	text-align: left;
	white-space: nowrap;
}

/* "Page x / N": Figma starts it 15px after the second arrow and puts zoom - at 318px from the left. */
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar .pdfemb-page-area {
	flex: 0 0 auto;
	min-width: 207px;
	margin: 0 10px;
}

/* "Zoom 100%" read-out in the place (and light fill) of Figma's "Page Width" select. */
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar div:not(.pdfemb-page-area) {
	margin-left: 4px;
	padding: 0 17px;
	background: rgba(255, 255, 255, 0.05);
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button,
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button[disabled] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	min-width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	float: none;
	border: 1px solid rgba(0, 0, 0, 0.38);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.09) linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #d5d5d5;
	cursor: pointer;
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button:first-child {
	margin-left: 0;
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button:hover,
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button:focus-visible {
	background-color: rgba(0, 0, 0, 0.2);
	border-color: rgba(0, 0, 0, 0.45);
	outline: none;
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button:focus-visible {
	box-shadow: 0 0 0 2px var(--fdi-white);
}

/* First / last page: Figma keeps the button box; only the arrow is dimmed. */
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-btndisabled,
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button[disabled] {
	background-color: rgba(0, 0, 0, 0.09);
	cursor: default;
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-btndisabled::before,
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button[disabled]::before {
	opacity: 0.45;
}

/* Thin line icons as in Figma (the plugin's own are chunky 16px PNGs). */
body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button::before {
	content: "";
	display: block;
	width: 18px;
	height: 21px;
	background: center / contain no-repeat;
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-prev::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 21'%3E%3Cpath d='M9 20.5V2M1 9.5l8-8 8 8' fill='none' stroke='%23d5d5d5' stroke-width='2'/%3E%3C/svg%3E");
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-next::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 21'%3E%3Cpath d='M9 .5V19M1 11.5l8 8 8-8' fill='none' stroke='%23d5d5d5' stroke-width='2'/%3E%3C/svg%3E");
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-zoomout::before {
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1 9h16' fill='none' stroke='%23d5d5d5' stroke-width='2.5'/%3E%3C/svg%3E");
}

body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar button.pdfemb-zoomin::before {
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1 9h16M9 1v16' fill='none' stroke='%23d5d5d5' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* Phones and narrow columns: arrows + page count left, zoom right; the read-out is dropped. */
@media (max-width: 767px) {
	body.fdi-learning-area .wp-block-pdfemb-pdf-embedder-viewer + .wp-block-pdfemb-pdf-embedder-viewer {
		margin-top: 40px;
	}

	body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar .pdfemb-page-area {
		min-width: 0;
		margin-right: auto;
		font-size: 14px;
	}

	body.fdi-learning-area .pdfemb-viewer .pdfemb-toolbar div:not(.pdfemb-page-area) {
		display: none;
	}
}

/*
 * Viewer in a hidden lesson tab (e.g. the lesson opened with ?tab=notes): the script sizes the viewer
 * from its wrapper's width once the PDF has loaded. While Alpine's x-show keeps the Overview panel at
 * display:none that width is 0, so it fell back to the PDF's own width (720px) and kept it after the
 * learner opened Overview (46px short of the 766px column). Such a panel stays laid out at full width
 * instead, with no height and invisible (also to screen readers), so the viewer gets its real width.
 * Only panels that hold a viewer; Alpine still shows and hides them as before.
 */
body.fdi-learning-area .tutor-tab-panel[style*="display: none"]:has(.wp-block-pdfemb-pdf-embedder-viewer) {
	display: block !important;
	height: 0 !important;
	min-height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}
/* ================================================================= end PDF Embedder viewer */

/* Phones and tablets: Tutor pulls the video box out to the screen edges (margin -16px);
   keep it in the column like the slides viewer, with its rounded corners. */
@media (max-width: 1024px) {
	body.fdi-learning-area .tutor-lesson-content .tutor-lesson-content-tab .tutor-lesson-video-wrapper,
	body.fdi-learning-area .tutor-lesson-content .tutor-lesson-content-tab .tutor-lesson-image-wrapper {
		margin-inline: 0;
	}
}

/* Tutor 4.1.1 adds a "Enter fullscreen" button at the end of the learning
   area; with the theme's button styles it showed as an empty white bar under
   the lesson (client, 11 Oct). Not in Figma: the sidebar has its own close. */
body.fdi-learning-area .tutor-learning-area-body > .tutor-expand-btn {
	display: none;
}

/* Quiz summary: Tutor breaks the question list in the sidebar mid-word (word-break: break-all). */
.tutor-quiz-summary-page .tutor-quiz-summary-sidebar .tutor-quiz-sidebar-questions .tutor-quiz-sidebar-question-item .tutor-question-content {
	word-break: normal;
	overflow-wrap: anywhere;
}

/* Certificate page: the learner's choice between the two designs (inc/certificate.php). */
.fdi-cert-design {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 14px 16px;
	border: 1px solid var(--fdi-rule);
	border-radius: 16px;
	background: var(--fdi-white);
}
.fdi-cert-design__label {
	margin: 0;
	font: 700 18px/1.3 var(--fdi-font-heading);
	color: var(--fdi-navy);
}
.fdi-cert-design__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.fdi-cert-design .fdi-cert-design__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 6px 14px 6px 6px;
	border: 2px solid var(--fdi-rule);
	border-radius: 12px;
	background: var(--fdi-white);
	color: var(--fdi-text);
	font: 600 15px/1.2 var(--fdi-font-body);
	text-transform: none;
	cursor: pointer;
}
.fdi-cert-design .fdi-cert-design__option img {
	display: block;
	width: auto;
	height: 56px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--fdi-rule);
}
.fdi-cert-design .fdi-cert-design__option:hover,
.fdi-cert-design .fdi-cert-design__option:focus-visible {
	border-color: var(--fdi-teal);
	background: var(--fdi-white);
	color: var(--fdi-text);
}
.fdi-cert-design .fdi-cert-design__option[aria-checked="true"] {
	border-color: var(--fdi-teal);
	background: rgba(0, 177, 168, 0.1);
	cursor: default;
}
.fdi-cert-design.is-busy .fdi-cert-design__option {
	opacity: 0.6;
	cursor: wait;
}