/*
 * Block learn page. Colours come from Academy's tokens, so light and dark mode
 * and the Customize screen's palette apply without extra rules.
 */

body.academy-learn-body:not(.academy-learn-body--theme) {
	margin: 0;
	background: var(--academy-body-background-color, #f6f7f8);
}

/* With the theme's header and footer around it, the page sits between them at
   full width. */
body.academy-learn-body--theme .academy-learn {
	max-width: none;
	margin-block: 0;
}

.academy-learn {
	--academy-learn-topbar: 64px;
	--academy-learn-footer: 72px;
	--academy-learn-top: var(--wp-admin--admin-bar--height, 0px);
	--academy-learn-measure: 880px;

	position: relative;
	display: grid;
	grid-template-columns: var(--academy-learn-sidebar, 340px) minmax(0, 1fr);
	grid-template-rows: var(--academy-learn-topbar) minmax(0, 1fr) auto;
	grid-template-areas:
		"top top"
		"side main"
		"side foot";
	min-height: calc(100vh - var(--academy-learn-top));
	box-sizing: border-box;
	background: var(--academy-learn-content-color, var(--academy-body-background-color, #f6f7f8));
	color: var(--academy-text-color, #131d2b);
	font-size: 15px;
	line-height: 1.6;
	transition: grid-template-columns 0.2s ease;
}

.academy-learn *,
.academy-learn *::before,
.academy-learn *::after {
	box-sizing: border-box;
}

.academy-learn[data-sidebar="right"] {
	grid-template-columns: minmax(0, 1fr) var(--academy-learn-sidebar, 340px);
	grid-template-areas:
		"top top"
		"main side"
		"foot side";
}

.academy-learn:not(.is-sidebar-open) {
	grid-template-columns: 0 minmax(0, 1fr);
}

.academy-learn[data-sidebar="right"]:not(.is-sidebar-open) {
	grid-template-columns: minmax(0, 1fr) 0;
}

.academy-learn[data-width="wide"] {
	--academy-learn-measure: 1200px;
}

.academy-learn[data-width="focused"] {
	--academy-learn-measure: 720px;
}

.academy-learn__skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.academy-learn__skip:focus {
	position: fixed;
	top: calc(var(--academy-learn-top) + 8px);
	left: 16px;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 8px 12px;
	clip: auto;
	border-radius: 6px;
	background: var(--academy-primary-color);
	color: #fff;
}

/* A thin bar while the next topic loads. */
.academy-learn__loading {
	position: fixed;
	top: var(--academy-learn-top);
	left: 0;
	z-index: 80;
	width: 100%;
	height: 3px;
	background: var(--academy-primary-color);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	pointer-events: none;
}

.academy-learn__loading.is-active {
	opacity: 1;
	animation: academy-learn-loading 1.2s ease-out forwards;
}

@keyframes academy-learn-loading {

	from {
		transform: scaleX(0.05);
	}

	to {
		transform: scaleX(0.85);
	}
}

/* Buttons that are only an icon. */
.academy-learn-icon-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--academy-description-color, #575e6c);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.academy-learn-icon-button .academy-icon::before {
	color: currentColor;
	font-size: 18px;
}

.academy-learn-icon-button:hover,
.academy-learn-icon-button[aria-expanded="true"],
.academy-learn-icon-button[aria-pressed="true"] {
	background: var(--academy-gray-color, #f6f7f8);
	color: var(--academy-heading-color, #131d2b);
}

.academy-learn :focus-visible {
	outline: 2px solid var(--academy-primary-color);
	outline-offset: 2px;
}

/* Top bar */
.academy-learn-topbar {
	position: sticky;
	top: var(--academy-learn-top);
	z-index: 40;
	grid-area: top;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--academy-learn-topbar);
	padding: 0 16px;
	border-bottom: 1px solid var(--academy-border-color, #e5e7eb);
	background: var(--academy-learn-topbar-color, var(--academy-surface-color, #fff));
}

.academy-learn-topbar__start,
.academy-learn-topbar__end {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* Back to course: chevron + course title as one link. */
.academy-learn-topbar__start {
	gap: 8px;
}

.academy-learn-topbar__divider {
	flex: none;
	width: 1px;
	height: 22px;
	background: var(--academy-border-color, #e5e7eb);
}

.academy-learn-topbar__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 38px;
	padding: 0 12px 0 8px;
	border-radius: 8px;
	color: var(--academy-heading-color, #131d2b);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Screen-reader-only label, whatever the theme ships. */
.academy-learn-topbar__back .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.academy-learn-topbar__back-icon {
	flex: none;
	color: var(--academy-description-color, #575e6c);
	transition: transform 0.15s ease, color 0.15s ease;
}

.academy-learn-topbar__back:hover {
	background: var(--academy-gray-color, #f6f7f8);
	color: var(--academy-primary-color);
}

.academy-learn-topbar__back:hover .academy-learn-topbar__back-icon {
	color: var(--academy-primary-color);
	transform: translateX(-2px);
}

.academy-learn-topbar__title {
	overflow: hidden;
	min-width: 0;
	max-width: 42vw;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Collapse icon: the chevron points in while the panel is open (collapse), out while it's closed (expand). */
.academy-learn-topbar__toggle-chevron {
	transition: transform 0.2s ease;
	transform-origin: 14px 12px;
}

.academy-learn:not(.is-sidebar-open) .academy-learn-topbar__toggle-chevron {
	transform: scaleX(-1);
}

/* Panel on the right: mirror the whole icon. */
.academy-learn[data-sidebar="right"] .academy-learn-topbar__toggle-icon {
	transform: scaleX(-1);
}

.academy-learn-progress {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 6px;
	padding: 2px 10px 2px 2px;
}

.academy-learn-progress svg {
	transform: rotate(-90deg);
}

.academy-learn-progress circle {
	fill: none;
	stroke-width: 4;
}

.academy-learn-progress__track {
	stroke: var(--academy-border-color, #e5e7eb);
}

.academy-learn-progress__fill {
	stroke: var(--academy-primary-color);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.4s ease;
}

.academy-learn-progress__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.academy-learn-progress__text b {
	font-size: 14px;
	color: var(--academy-heading-color, #131d2b);
}

.academy-learn-progress__text small {
	font-size: 12px;
	color: var(--academy-description-color, #575e6c);
	white-space: nowrap;
}

.academy-learn-theme-icon--sun,
.academy-learn[data-academy-user-theme="dark"] .academy-learn-theme-icon--moon {
	display: none;
}

.academy-learn[data-academy-user-theme="dark"] .academy-learn-theme-icon--sun {
	display: block;
}

.academy-learn-menu {
	position: relative;
}

.academy-learn-menu__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 220px;
	padding: 6px;
	border: 1px solid var(--academy-border-color, #e5e7eb);
	border-radius: 10px;
	background: var(--academy-surface-color, #fff);
	box-shadow: var(--academy-shadow-hard, 0 4px 8px rgba(20, 26, 36, 0.1));
}

.academy-learn-menu.is-open .academy-learn-menu__list {
	display: flex;
}

.academy-learn-menu__item,
.academy-learn-menu__item--share > * {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--academy-heading-color, #131d2b);
	font: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.academy-learn-menu__item--share {
	padding: 0;
}

.academy-learn-menu__item:hover {
	background: var(--academy-gray-color, #f6f7f8);
}

.academy-learn-menu__item .academy-icon::before {
	font-size: 15px;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-menu__item .academy-icon--star::before {
	color: var(--academy-warning-color, #f59e0b);
}

/* Curriculum */
.academy-learn-curriculum {
	position: sticky;
	top: calc(var(--academy-learn-top) + var(--academy-learn-topbar));
	grid-area: side;
	align-self: start;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--academy-learn-top) - var(--academy-learn-topbar));
	overflow: hidden;
	border-right: 1px solid var(--academy-border-color, #e5e7eb);
	background: var(--academy-learn-sidebar-color, var(--academy-surface-color, #fff));
}

.academy-learn[data-sidebar="right"] .academy-learn-curriculum {
	border-right: 0;
	border-left: 1px solid var(--academy-border-color, #e5e7eb);
}

.academy-learn:not(.is-sidebar-open) .academy-learn-curriculum {
	visibility: hidden;
	border: 0;
}

.academy-learn-curriculum__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 4px 20px;
}

.academy-learn-curriculum__head b {
	font-size: 15px;
	color: var(--academy-heading-color, #131d2b);
}

.academy-learn-curriculum__close {
	display: none;
}

.academy-learn-curriculum__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 20px 14px;
	border-bottom: 1px solid var(--academy-divider-color, #e5e7eb);
}

.academy-learn-bar {
	display: block;
	overflow: hidden;
	height: 6px;
	border-radius: 3px;
	background: var(--academy-gray-color, #f6f7f8);
}

.academy-learn-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--academy-primary-color);
	transition: width 0.4s ease;
}

.academy-learn-curriculum__count {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-curriculum__count b {
	color: var(--academy-heading-color, #131d2b);
	font-weight: 600;
}

.academy-learn-curriculum__sections {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 0 24px;
}

.academy-learn-curriculum__empty {
	margin: 16px 20px;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-section + .academy-learn-section {
	border-top: 1px solid var(--academy-divider-color, #e5e7eb);
}

.academy-learn-section__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 16px 12px 20px;
	border: 0;
	background: transparent;
	color: var(--academy-heading-color, #131d2b);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.academy-learn-section__toggle:hover {
	background: var(--academy-gray-color, #f6f7f8);
}

.academy-learn-section__title {
	flex: 1 1 auto;
	min-width: 0;
}

.academy-learn-section__count {
	font-size: 12px;
	font-weight: 500;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-section__caret::before {
	font-size: 16px;
	color: var(--academy-icon-inactive-color, #9ca3af);
	transition: transform 0.2s ease;
}

.academy-learn-section.is-open .academy-learn-section__caret::before {
	display: inline-block;
	transform: rotate(180deg);
}

.academy-learn-section__topics {
	display: none;
	margin: 0;
	padding: 0 8px 10px;
	list-style: none;
}

.academy-learn-section.is-open .academy-learn-section__topics {
	display: block;
}

.academy-learn-group {
	margin: 6px 0 2px;
	list-style: none;
}

.academy-learn-group__title {
	display: block;
	padding: 6px 12px 4px 44px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--academy-description-color, #575e6c);
	text-transform: uppercase;
}

.academy-learn-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.academy-learn-topic {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 1px 0;
	padding-left: 8px;
	border-radius: 8px;
	list-style: none;
}

.academy-learn-topic:hover {
	background: var(--academy-gray-color, #f6f7f8);
}

.academy-learn-topic.is-current {
	background: var(--academy-learn-current-color, var(--academy-primary-light-color, #f2f0fd));
}

.academy-learn-topic.is-current::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--academy-primary-color);
}

.academy-learn-topic__check {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 4px 0 0;
	padding: 0;
	border: 1.5px solid var(--academy-icon-inactive-color, #9ca3af);
	border-radius: 50%;
	background: var(--academy-surface-color, #fff);
	color: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

span.academy-learn-topic__check {
	border-style: dashed;
	cursor: default;
}

.academy-learn-topic__check .academy-icon::before {
	font-size: 11px;
	color: var(--academy-icon-inactive-color, #9ca3af);
}

button.academy-learn-topic__check:hover {
	border-color: var(--academy-primary-color);
}

.academy-learn-topic.is-completed .academy-learn-topic__check {
	border-color: var(--academy-success-color, #059669);
	background: var(--academy-success-color, #059669);
	color: #fff;
}

.academy-learn-topic__link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 9px 10px 9px 4px;
	color: var(--academy-text-color, #131d2b);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.academy-learn-topic.is-current .academy-learn-topic__link {
	color: var(--academy-primary-color);
	font-weight: 600;
}

.academy-learn-topic.is-locked .academy-learn-topic__link {
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-topic__icon::before {
	font-size: 16px;
	color: var(--academy-icon-inactive-color, #9ca3af);
}

.academy-learn-topic.is-current .academy-learn-topic__icon::before {
	color: var(--academy-primary-color);
}

.academy-learn-topic__title {
	flex: 1 1 auto;
	min-width: 0;
}

.academy-learn-topic__meta {
	flex: none;
	font-size: 12px;
	font-weight: 400;
	color: var(--academy-description-color, #575e6c);
	font-variant-numeric: tabular-nums;
}

/* Content */
.academy-learn-content {
	grid-area: main;
	min-width: 0;
	padding: 32px 24px 48px;
	outline: 0;
}

.academy-learn-content__inner {
	width: 100%;
	max-width: var(--academy-learn-measure);
	margin: 0 auto;
	transition: max-width 0.2s ease;
}

.academy-learn-content__header {
	margin-bottom: 24px;
}

.academy-learn-content__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-content__eyebrow .academy-icon::before {
	font-size: 14px;
	color: var(--academy-primary-color);
}

.academy-learn-content__title {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--academy-heading-color, #131d2b);
	text-wrap: balance;
}

.academy-learn-content__body {
	min-height: 240px;
}

.academy-learn .academy-learn-content__body.academy-lessons-content {
	padding: 0;
	width: auto;
	max-width: none;
}

.academy-learn-gate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 24px;
	border: 1px solid var(--academy-border-color, #e5e7eb);
	border-radius: 12px;
	background: var(--academy-surface-color, #fff);
	text-align: center;
}

.academy-learn-gate__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--academy-primary-light-color, #f2f0fd);
}

.academy-learn-gate__icon .academy-icon::before {
	font-size: 20px;
	color: var(--academy-primary-color);
}

.academy-learn-gate__title {
	margin: 8px 0 0;
	font-size: 20px;
	color: var(--academy-heading-color, #131d2b);
}

.academy-learn-gate__text {
	max-width: 46ch;
	margin: 0;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.academy-learn-gate--inline {
	flex-direction: row;
	gap: 12px;
	margin-bottom: 20px;
	padding: 12px 16px;
	text-align: left;
}

.academy-learn-gate--inline .academy-learn-gate__text {
	flex: 1 1 auto;
	max-width: none;
}

/* Lesson discussion */
.academy-learn-comments {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--academy-divider-color, #e5e7eb);
}

.academy-learn-comments__title {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--academy-heading-color, #131d2b);
}

/* Footer */
.academy-learn-footer {
	position: sticky;
	bottom: 0;
	z-index: 30;
	grid-area: foot;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: var(--academy-learn-footer);
	padding: 10px 24px;
	border-top: 1px solid var(--academy-border-color, #e5e7eb);
	background: var(--academy-learn-footer-color, var(--academy-surface-color, #fff));
}

.academy-learn-footer__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 6px 10px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

a.academy-learn-footer__nav:hover {
	background: var(--academy-gray-color, #f6f7f8);
}

.academy-learn-footer__nav--next {
	justify-content: flex-end;
	text-align: right;
}

.academy-learn-footer__nav.is-disabled {
	opacity: 0.45;
}

.academy-learn-footer__nav .academy-icon::before {
	font-size: 16px;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-footer__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.academy-learn-footer__text small {
	font-size: 12px;
	color: var(--academy-description-color, #575e6c);
}

.academy-learn-footer__text b {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: var(--academy-heading-color, #131d2b);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.academy-learn-footer__complete {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--academy-primary-color);
	border-radius: 999px;
	background: var(--academy-primary-color);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.academy-learn-footer__complete:hover {
	filter: brightness(0.94);
}

.academy-learn-footer__complete.is-completed {
	border-color: color-mix(in srgb, var(--academy-success-color, #059669) 35%, transparent);
	background: color-mix(in srgb, var(--academy-success-color, #059669) 12%, var(--academy-surface-color, #fff));
	color: var(--academy-success-color, #059669);
}

.academy-learn-footer__complete:disabled {
	cursor: progress;
}

/* Side panels: announcements, questions */
.academy-learn__scrim {
	position: fixed;
	inset: var(--academy-learn-top) 0 0;
	z-index: 50;
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 26, 36, 0.4);
	cursor: default;
}

.academy-learn.has-drawer .academy-learn__scrim {
	display: block;
}

.academy-learn-panel {
	position: fixed;
	top: var(--academy-learn-top);
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: min(440px, 100vw);
	border-left: 1px solid var(--academy-border-color, #e5e7eb);
	background: var(--academy-surface-color, #fff);
	box-shadow: var(--academy-shadow-hard, 0 4px 8px rgba(20, 26, 36, 0.1));
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s;
}

.academy-learn-panel.is-open {
	transform: none;
	visibility: visible;
}

.academy-learn-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 14px 20px;
	border-bottom: 1px solid var(--academy-divider-color, #e5e7eb);
}

.academy-learn-panel__titles {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.academy-learn-panel__titles b {
	font-size: 16px;
	color: var(--academy-heading-color, #131d2b);
}

.academy-learn-panel__titles small {
	overflow: hidden;
	font-size: 12px;
	color: var(--academy-description-color, #575e6c);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.academy-learn-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 20px 24px;
}

.academy-learn__notice {
	position: fixed;
	bottom: calc(var(--academy-learn-footer) + 16px);
	left: 50%;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(520px, calc(100vw - 32px));
	padding: 8px 8px 8px 16px;
	border-radius: 10px;
	background: var(--academy-heading-color, #131d2b);
	color: var(--academy-surface-color, #fff);
	font-size: 14px;
	box-shadow: var(--academy-shadow-hard, 0 4px 8px rgba(20, 26, 36, 0.1));
	transform: translate(-50%, 16px);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}

.academy-learn__notice.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
}

.academy-learn__notice .academy-learn-icon-button {
	width: 30px;
	height: 30px;
	color: inherit;
}

.academy-learn__notice .academy-learn-icon-button:hover {
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
}

/* Small screens: the curriculum slides over the lesson. */
@media (max-width: 1023px) {

	.academy-learn,
	.academy-learn[data-sidebar="right"],
	.academy-learn:not(.is-sidebar-open),
	.academy-learn[data-sidebar="right"]:not(.is-sidebar-open) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top"
			"main"
			"foot";
	}

	.academy-learn-curriculum {
		position: fixed;
		top: var(--academy-learn-top);
		bottom: 0;
		left: 0;
		z-index: 60;
		width: min(360px, 88vw);
		height: auto;
		box-shadow: var(--academy-shadow-hard, 0 4px 8px rgba(20, 26, 36, 0.1));
		transform: translateX(-100%);
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.academy-learn[data-sidebar="right"] .academy-learn-curriculum {
		right: 0;
		left: auto;
		transform: translateX(100%);
	}

	.academy-learn.is-sidebar-open .academy-learn-curriculum {
		visibility: visible;
		transform: none;
	}

	.academy-learn.is-sidebar-open .academy-learn__scrim {
		display: block;
	}

	.academy-learn-curriculum__close {
		display: inline-flex;
	}

	.academy-learn-topbar__title {
		max-width: 38vw;
	}

	.academy-learn-topbar__start {
		gap: 4px;
	}

	.academy-learn-topbar__divider {
		display: none;
	}

	.academy-learn-topbar__back {
		padding: 0 8px 0 4px;
	}

	.academy-learn-progress__text,
	.academy-learn-topbar__width {
		display: none;
	}

	.academy-learn-content {
		padding: 20px 16px 32px;
	}

	.academy-learn-footer {
		padding: 8px 12px;
	}

	.academy-learn-footer__text b {
		display: none;
	}
}

@media (max-width: 600px) {

	.academy-learn-footer__complete span {
		display: none;
	}

	.academy-learn-footer__complete {
		width: 42px;
		padding: 0;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.academy-learn,
	.academy-learn *,
	.academy-learn *::before {
		transition: none !important;
	}
}

/*
 * Colour and Typography set on a learn page block.
 *
 * The rules above fix the parts of the top bar, the curriculum and the lesson
 * in px and in Academy's own palette variables, so a colour or a size set on
 * the block only ever reached its wrapper: the course title changed (nothing
 * sets its colour) while every icon, the progress text and the topic list
 * stayed as they were.
 *
 * These only apply once the block actually carries the setting — WordPress
 * adds `has-text-color` for a colour, and a font size arrives as a preset
 * class or an inline `font-size:` — so a site that has set neither keeps the
 * look above unchanged.
 *
 * Sizes are `em`, not `inherit`, so the parts keep their proportions to each
 * other instead of collapsing to one size. The ratios are the px values above
 * over the 15px the blocks are drawn at.
 */

/* Top bar: colour. `:where()` keeps these at the specificity of the rules they
   replace, so the `is-current`/hover accents still win. */
.wp-block-academy-learn-topbar.has-text-color :where(
	.academy-learn-icon-button,
	.academy-learn-topbar__back,
	.academy-learn-topbar__back-icon,
	.academy-learn-topbar__title,
	.academy-learn-progress__text b,
	.academy-learn-progress__text small
) {
	color: inherit;
}

/* Top bar: size. */
.wp-block-academy-learn-topbar:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-topbar__title) {
	font-size: 1em;
}

.wp-block-academy-learn-topbar:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-progress__text b) {
	font-size: 0.93em;
}

.wp-block-academy-learn-topbar:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-progress__text small) {
	font-size: 0.8em;
}

.wp-block-academy-learn-topbar:is([class*="-font-size"], [style*="font-size:"]) .academy-learn-icon-button .academy-icon::before {
	font-size: 1.2em;
}

/* Curriculum: colour. The current topic keeps the accent colour. */
.wp-block-academy-learn-curriculum.has-text-color :where(
	.academy-learn-icon-button,
	.academy-learn-curriculum__head b,
	.academy-learn-curriculum__count,
	.academy-learn-curriculum__count b,
	.academy-learn-curriculum__empty,
	.academy-learn-section__toggle,
	.academy-learn-section__count,
	.academy-learn-topic__link,
	.academy-learn-topic__meta
) {
	color: inherit;
}

/* Curriculum: size. */
.wp-block-academy-learn-curriculum:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-curriculum__head b) {
	font-size: 1em;
}

.wp-block-academy-learn-curriculum:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-section__toggle, .academy-learn-topic__link) {
	font-size: 0.93em;
}

.wp-block-academy-learn-curriculum:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-learn-curriculum__count, .academy-learn-section__count, .academy-learn-topic__meta) {
	font-size: 0.8em;
}

.wp-block-academy-learn-curriculum:is([class*="-font-size"], [style*="font-size:"]) :is(.academy-learn-section__caret, .academy-learn-topic__icon)::before {
	font-size: 1.07em;
}

/*
 * The lesson itself. Its text comes from the editor, so it carries whatever
 * the theme gives it; these let the block's own Colour and Typography reach it.
 */
.wp-block-academy-learn-content.has-text-color :where(.academy-lessons-content__text, .academy-lessons-content__text :is(p, li, span, strong, em, b, td, th, dt, dd)) {
	color: inherit;
}

.wp-block-academy-learn-content:is([class*="-font-size"], [style*="font-size:"]) :where(.academy-lessons-content__text, .academy-lessons-content__text :is(p, li, span, strong, em, b, td, th, dt, dd)) {
	font-size: inherit;
}

.wp-block-academy-learn-content[style*="line-height:"] :where(.academy-lessons-content__text, .academy-lessons-content__text :is(p, li, span, td, th, dt, dd)) {
	line-height: inherit;
}