/**
 * HairColorGPT Academy V2 frontend styles.
 *
 * Scope: .hcgpt-scope .hcgpt-academy-app
 */

:where(.hcgpt-scope) .hcgpt-academy-app {
	--academy-bg: var(--hcgpt-app-bg, #0f1012);
	--academy-surface: var(--hcgpt-surface, #17181b);
	--academy-surface-2: var(--hcgpt-color-surface-2, #202228);
	--academy-surface-3: #2e2e2e;
	--academy-border: var(--hcgpt-color-border, #30333b);
	--academy-text: var(--hcgpt-color-text, #f4f4f5);
	--academy-muted: var(--hcgpt-color-text-muted, #a1a1aa);
	--academy-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
	--academy-radius: 28px;
	--academy-radius-sm: 16px;
	--academy-gap: 20px;
	--academy-gap-lg: 32px;
	--academy-pad: clamp(18px, 2vw, 28px);
	--academy-font-headings: "Neuton", Georgia, serif;
	--academy-font-body: "Open Sans", system-ui, sans-serif;

	/* Brand v2 (2026-05-06) — Academy palette aligned with the
	 * site-wide HCGPT brand v2 used by hcgpt-membership. Replaces
	 * the legacy purple→pink (#a855f7→#ec4899) gradient that lived
	 * in this file. Light/dark themes share these values — brand
	 * colours are invariant across themes. */
	--academy-brand-1: #6e3aff;
	--academy-brand-2: #ff3a8c;
	--academy-brand-3: #ff8a3a;
	--academy-brand-gradient: linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%);
	--academy-brand-gradient-hover: linear-gradient(135deg, #5a2ed8 0%, #e02e7a 50%, #e87024 100%);
	--academy-brand-shadow: 0 4px 20px rgba(110, 58, 255, 0.35);
}

:where(.hcgpt-scope[data-hcgpt-theme="light"]) .hcgpt-academy-app {
	--academy-bg: var(--hcgpt-app-bg, #f6f4ef);
	--academy-surface: #fffdfa;
	--academy-surface-2: #f1ece4;
	--academy-surface-3: #e8dfd3;
	--academy-border: #d8cbb8;
	--academy-text: #1f1a14;
	--academy-muted: #6b6256;
	--academy-shadow: 0 12px 32px rgba(31, 26, 20, 0.08);
}

.hcgpt-academy-app {
	position: relative;
	min-height: 100%;
	background:
		radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
		var(--academy-bg);
	color: var(--academy-text);
	padding: var(--academy-pad);
	font-family: var(--academy-font-body);
}

.hcgpt-academy-app [hidden] {
	display: none !important;
}

.academy-loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	gap: 14px;
	background: rgba(15, 16, 18, 0.68);
	backdrop-filter: blur(6px);
	z-index: 20;
}

.academy-loading[hidden] {
	display: none !important;
	pointer-events: none;
}

:where(.hcgpt-scope[data-hcgpt-theme="light"]) .academy-loading {
	background: rgba(246, 244, 239, 0.82);
}

.academy-loading-spinner {
	width: 42px;
	height: 42px;
	border: 3px solid color-mix(in srgb, var(--academy-border) 70%, transparent);
	border-top-color: var(--academy-text);
	border-radius: 50%;
	animation: academy-spin 0.9s linear infinite;
}

@keyframes academy-spin {
	to {
		transform: rotate(360deg);
	}
}

.academy-screen {
	display: none;
	gap: var(--academy-gap-lg);
}

.academy-screen--active {
	display: grid;
	/* Force top-alignment so the dashboard/welcome/lesson card never gets
	   stretched or visually pushed down into the panel. Without these the
	   default `align-content: stretch` was producing a huge empty gap
	   between the topbar and the first content card on every screen. */
	align-content: start;
	align-items: start;
	justify-items: stretch;
}

.academy-screen-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--academy-gap);
	padding: clamp(22px, 3vw, 34px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--academy-surface) 92%, transparent), color-mix(in srgb, var(--academy-surface-2) 76%, transparent));
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
}

.academy-screen-header h2 {
	margin: 6px 0 10px;
	font-family: var(--academy-font-headings);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 0.95;
}

.academy-screen-header p {
	margin: 0;
	max-width: 62ch;
	color: var(--academy-muted);
}

.academy-kicker,
.academy-card-kicker {
	margin: 0;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--academy-muted);
}

.academy-summary-strip,
.academy-progress-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	width: min(520px, 100%);
}

.academy-summary-card,
.academy-next-target,
.academy-program-card,
.academy-outline-card,
.academy-activity-card,
.academy-assessment-box,
.academy-question-card,
.academy-empty-state,
.academy-module-intro,
.academy-assessment-result {
	background: color-mix(in srgb, var(--academy-surface) 94%, transparent);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	box-shadow: var(--academy-shadow);
}

.academy-summary-card {
	padding: 18px;
	display: grid;
	gap: 4px;
}

.academy-summary-value {
	font-family: var(--academy-font-headings);
	font-size: 2rem;
	line-height: 1;
}

.academy-summary-label {
	color: var(--academy-muted);
	font-size: 0.85rem;
}

.academy-programs-grid,
.academy-outline-grid,
.academy-activities {
	display: grid;
	gap: var(--academy-gap);
}

.academy-programs-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.academy-program-card,
.academy-outline-card,
.academy-activity-card,
.academy-question-card,
.academy-next-target,
.academy-assessment-box,
.academy-module-intro,
.academy-assessment-result,
.academy-empty-state {
	padding: 22px;
}

.academy-card-description {
	margin: 8px 0 0;
	color: var(--academy-muted);
}

.academy-program-course-list,
.academy-outline-lessons,
.academy-assessment-questions {
	display: grid;
	gap: 12px;
	margin-top: 18px;
}

.academy-course-row,
.academy-outline-lesson,
.academy-inline-action,
.academy-link-button,
.academy-primary-button,
.academy-primary-button--small,
.academy-choice {
	font: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
	text-transform: none;
}

.academy-course-row,
.academy-outline-lesson,
.academy-inline-action,
.academy-link-button,
.academy-primary-button {
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: var(--academy-surface-2);
	color: var(--academy-text);
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.academy-course-row:hover,
.academy-outline-lesson:hover,
.academy-inline-action:hover,
.academy-link-button:hover,
.academy-primary-button:hover {
	transform: translateY(-1px);
	background: var(--academy-surface-3);
}

.academy-course-row:disabled,
.academy-outline-lesson:disabled,
.academy-inline-action:disabled,
.academy-primary-button:disabled {
	opacity: 0.48;
	cursor: not-allowed;
	transform: none;
}

.academy-course-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 16px;
	padding: 16px 18px;
	text-align: left;
}

.academy-course-row__title,
.academy-outline-lesson__title {
	font-weight: 700;
}

.academy-course-row__meta,
.academy-outline-lesson__meta,
.academy-sidebar-module__title {
	font-size: 0.82rem;
	color: var(--academy-muted);
}

.academy-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-surface-3) 88%, transparent);
	border: 1px solid var(--academy-border);
	font-size: 0.78rem;
}

.academy-pill--done {
	background: #333;
	color: #fff;
	border-color: #333;
}

.academy-pill--locked {
	background: color-mix(in srgb, #5c4b2f 34%, var(--academy-surface-2));
}

.academy-hero-stack,
.academy-lesson-stack,
.academy-assessment-stack {
	display: grid;
	gap: 12px;
}

.academy-hero-stack h3,
.academy-lesson-stack h3,
.academy-assessment-stack h3,
.academy-next-target h3,
.academy-question-card h4,
.academy-assessment-box h4,
.academy-module-intro h4 {
	margin: 0;
	font-family: var(--academy-font-headings);
	font-size: clamp(1.6rem, 2vw, 2.3rem);
	line-height: 1;
}

.academy-hero-meta,
.academy-activity-actions,
.academy-assessment-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.academy-inline-action,
.academy-link-button,
.academy-primary-button,
.academy-primary-button--small {
	padding: 12px 18px;
}

.academy-link-button {
	background: transparent;
}

.academy-primary-button {
	background: linear-gradient(180deg, color-mix(in srgb, var(--academy-surface-3) 92%, transparent), var(--academy-surface-2));
}

.academy-primary-button--small {
	background: linear-gradient(180deg, color-mix(in srgb, var(--academy-surface-3) 92%, transparent), var(--academy-surface-2));
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	color: var(--academy-text);
	padding: 10px 14px;
}

.academy-lesson-shell,
.academy-assessment-shell {
	display: grid;
	gap: var(--academy-gap);
}

.academy-html-block > *:first-child {
	margin-top: 0;
}

.academy-html-block > *:last-child {
	margin-bottom: 0;
}

.academy-html-block table {
	width: 100%;
	border-collapse: collapse;
}

.academy-html-block th,
.academy-html-block td {
	padding: 8px 10px;
	border: 1px solid var(--academy-border);
}

/* ── WOW + normal graphics: responsive override ──────────────────────────────
 * The mockup CSS uses @media (max-width: 680px) on VIEWPORT width.
 * In the Academy the content panel is ~640px wide even on large viewports,
 * so the media query never fires. We force the responsive layout here with
 * !important so it wins over both the inline style="max-width:640px" and
 * the <style> block injected via innerHTML (same-origin, later in cascade).
 * ──────────────────────────────────────────────────────────────────────── */

/* Outer wrapper: full width, no border/shadow/bg, clean slate */
.hcgpt-wow-graphic,
.hcgpt-graphic-interactive,
.hcgpt-graphic-svg {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.hcgpt-graphic-dark-v,
.hcgpt-graphic-light-v {
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Universal reset for ALL interactive graphic inner wrappers.
 * Covers fixed/normal graphics (hcs-wrap, phs-wrap, ptt-wrap, etc.)
 * Removes card borders and shadows from the outermost container. */
.hcgpt-graphic-interactive > div {
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Center ALL titles inside interactive graphics (both WOW and fixed).
 * Targets h2 regardless of parent class (wow-header, hcs-title, phs-title, etc.) */
.hcgpt-graphic-interactive h2 {
	text-align: center !important;
}

/* Center subtitle text */
.hcgpt-graphic-interactive h2 + p {
	text-align: center !important;
}

/* Inner container: full width, no overflow clip, no fixed max-width */
.hcgpt-wow-graphic .wow-container,
.hcgpt-graphic-interactive .wow-container {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
}

/* wow-body: vertical stack layout + padding.
 * The CSS prefixer strips .wow-body rules from the bundle <style> block
 * (it matches "body" as a global selector), so ALL wow-body styling lives here.
 * flex-direction:column ensures SVG area and info/labels panels stack vertically. */
.hcgpt-wow-graphic .wow-body,
.hcgpt-graphic-interactive .wow-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	padding: 0 28px !important;
}
@media (max-width: 600px) {
	.hcgpt-wow-graphic .wow-body,
	.hcgpt-graphic-interactive .wow-body {
		padding: 0 16px !important;
	}
}

/* SVG area: full width, stacks above side panels */
.hcgpt-wow-graphic .svg-area,
.hcgpt-graphic-interactive .svg-area {
	width: 100% !important;
	min-width: 0;
}

/* ALL side panels: full width below SVG area.
 * Covers: .info-panel, .side-panel, .labels-panel, .bonds-panel, .tiers-panel */
.hcgpt-wow-graphic .labels-panel,
.hcgpt-graphic-interactive .labels-panel,
.hcgpt-wow-graphic .info-panel,
.hcgpt-graphic-interactive .info-panel,
.hcgpt-wow-graphic .side-panel,
.hcgpt-graphic-interactive .side-panel,
.hcgpt-wow-graphic .bonds-panel,
.hcgpt-graphic-interactive .bonds-panel,
.hcgpt-wow-graphic .tiers-panel,
.hcgpt-graphic-interactive .tiers-panel {
	width: 100% !important;
	min-width: 0;
	flex-shrink: unset !important;
}

/* Containers that use side-by-side flex independently of wow-body:
 * .scale-container (Level Scale graphic in P05) */
.hcgpt-wow-graphic .scale-container,
.hcgpt-graphic-interactive .scale-container {
	flex-direction: column !important;
}

/* Main diagram SVG (inside .svg-area): fluid, respect viewBox.
 * overflow:visible allows SVG text/labels that extend beyond viewBox edges
 * (e.g. "CUTICLE" at x=355 in a 400px viewBox) to render fully. */
.hcgpt-wow-graphic .svg-area > svg,
.hcgpt-graphic-interactive .svg-area > svg,
.hcgpt-graphic-svg > svg {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Static SVG mockups often carry labels outside the viewBox; keep those labels visible. */
.hcgpt-graphic-svg,
.hcgpt-graphic-svg > div,
.hcgpt-graphic-svg svg,
.hcgpt-graphic-interactive svg {
	overflow: visible;
}

/* Small icon SVGs (in header h2, label-card h4, etc.): preserve original size.
 * Excludes .wow-icon-circle SVGs which are 64px decorative icons. */
.hcgpt-wow-graphic .wow-header h2 svg,
.hcgpt-wow-graphic .label-card svg,
.hcgpt-graphic-interactive .wow-header h2 svg,
.hcgpt-graphic-interactive .label-card svg {
	width: 16px !important;
	height: 16px !important;
	display: inline-block !important;
	vertical-align: middle;
	flex-shrink: 0;
}

/* WOW icon circle (welcome-page style): 96px circle with 64px SVG icon */
.hcgpt-wow-graphic .wow-icon-circle,
.hcgpt-graphic-interactive .wow-icon-circle {
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 10px !important;
	background: #2a2a2a !important;
}
.hcgpt-graphic-light-v .wow-icon-circle {
	background: #f0f0f0 !important;
}
.hcgpt-wow-graphic .wow-icon-circle svg,
.hcgpt-graphic-interactive .wow-icon-circle svg {
	width: 64px !important;
	height: 64px !important;
	display: block !important;
}

/* WOW header: centered layout, reduced padding */
.hcgpt-wow-graphic .wow-header,
.hcgpt-graphic-interactive .wow-header {
	text-align: center !important;
	padding: 0 0 12px !important;
}

/* WOW container: no background, no shadow, no border */
.hcgpt-wow-graphic .wow-container,
.hcgpt-graphic-interactive .wow-container {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
}

/* Label cards: wrap text, no overflow */
.hcgpt-wow-graphic .label-card,
.hcgpt-graphic-interactive .label-card {
	word-break: break-word;
	overflow-wrap: break-word;
}

.academy-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: var(--academy-surface-2);
}

.academy-choice :is(input[type="radio"], input[type="checkbox"]) {
	-webkit-appearance: auto;
	appearance: auto;
	accent-color: var(--academy-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	flex-shrink: 0;
	height: 18px;
	margin: 3px 0 0;
	min-height: 18px;
	min-width: 18px;
	padding: 0;
	width: 18px;
}

.academy-text-answer {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: var(--academy-surface-2);
	box-shadow: none;
	color: var(--academy-text);
	font: inherit;
	letter-spacing: normal;
	line-height: 1.5;
	margin: 0;
	outline: 2px solid transparent;
	resize: vertical;
	text-transform: none;
}

.academy-empty-state {
	display: grid;
	gap: 10px;
}

.academy-empty-state h3,
.academy-empty-state p {
	margin: 0;
}

.academy-assessment-result {
	display: grid;
	gap: 8px;
}

.academy-assessment-result h4,
.academy-assessment-result p {
	margin: 0;
}

.academy-assessment-result__summary {
	display: grid;
	gap: 8px;
}

.academy-assessment-result__summary.is-fail {
	border-left: 4px solid #9c4b4b;
	padding-left: 14px;
}

.academy-assessment-result__summary.is-success {
	border-left: 4px solid #3d6a50;
	padding-left: 14px;
}

.academy-assessment-result__meta {
	color: var(--academy-text);
	font-weight: 600;
}

.academy-assessment-result__hint {
	color: var(--academy-muted);
}

.academy-question-card {
	position: relative;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.academy-question-card.is-wrong {
	border-color: #9c4b4b;
	box-shadow: 0 0 0 1px rgba(156, 75, 75, 0.22);
}

.academy-question-card.is-correct {
	border-color: #3d6a50;
	box-shadow: 0 0 0 1px rgba(61, 106, 80, 0.18);
}

.academy-question-card.is-wrong .academy-text-answer,
.academy-question-card.is-wrong .academy-choice {
	border-color: rgba(156, 75, 75, 0.55);
}

.academy-question-card.is-correct .academy-text-answer,
.academy-question-card.is-correct .academy-choice.is-selected {
	border-color: rgba(61, 106, 80, 0.55);
}

.academy-choice {
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.academy-choice.is-selected {
	background: color-mix(in srgb, var(--academy-surface-3) 92%, transparent);
}

.academy-choice.is-answer-error {
	background: color-mix(in srgb, #5d2d2d 20%, var(--academy-surface-2));
}

.academy-choice.is-answer-correct {
	background: color-mix(in srgb, #2e4e3a 22%, var(--academy-surface-2));
}

.academy-question-feedback {
	display: grid;
	gap: 6px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--academy-border) 80%, transparent);
}

.academy-question-feedback__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 5px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, #5d2d2d 20%, var(--academy-surface-2));
	border: 1px solid rgba(156, 75, 75, 0.35);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.academy-question-feedback__text {
	color: var(--academy-muted);
	line-height: 1.5;
}

.academy-text-answer[aria-invalid="true"] {
	border-color: rgba(156, 75, 75, 0.55);
	box-shadow: 0 0 0 1px rgba(156, 75, 75, 0.16);
}

.academy-sidebar-module {
	display: grid;
	gap: 6px;
	margin-bottom: 14px;
}

.academy-sidebar-module__title {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.academy-sidebar-lesson-label {
	flex: 1 1 auto;
}

.academy-sidebar-assessment-link {
	margin-top: 6px;
}

.academy-pomodoro-panel {
	position: fixed;
	right: 24px;
	top: calc(var(--academy-fixed-top-offset) + 10px);
	bottom: auto;
	width: min(360px, calc(100vw - 32px));
	padding: 22px;
	display: grid;
	gap: 18px;
	border: 1px solid var(--academy-border);
	border-radius: 24px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
	z-index: 41;
}

.academy-pomodoro-panel__header,
.academy-pomodoro-panel__body,
.academy-pomodoro-actions,
.academy-pomodoro-meta {
	display: flex;
}

.academy-pomodoro-panel__header,
.academy-pomodoro-meta {
	align-items: center;
	justify-content: space-between;
}

.academy-pomodoro-panel__body {
	flex-direction: column;
	gap: 14px;
}

.academy-pomodoro-panel__header h3,
.academy-pomodoro-panel__header p,
.academy-pomodoro-today {
	margin: 0;
}

.academy-pomodoro-close {
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--academy-text);
	cursor: pointer;
}

.academy-pomodoro-time {
	font-family: var(--academy-font-headings);
	font-size: clamp(2.6rem, 6vw, 4rem);
	line-height: 1;
}

.academy-pomodoro-meta {
	color: var(--academy-muted);
}

.academy-pomodoro-actions {
	flex-wrap: wrap;
	gap: 10px;
}

.academy-pomodoro-today {
	color: var(--academy-muted);
	font-size: 0.92rem;
}

@media (max-width: 900px) {
	.academy-screen-header {
		grid-template-columns: 1fr;
		display: grid;
	}

	.academy-summary-strip,
	.academy-progress-grid {
		width: 100%;
	}

	.academy-pomodoro-panel {
		right: 16px;
		left: 16px;
		top: calc(var(--academy-fixed-top-offset) + 10px);
		bottom: auto;
		width: auto;
	}
}

/* -------------------------------------------------------------------------
   Historical frontend shell restore
   Keeps V2 data/runtime but restores the pre-redesign Academy look and flow.
   ------------------------------------------------------------------------- */

:where(.hcgpt-scope) .hcgpt-academy-app {
	--academy-bg: var(--hcgpt-app-bg, #f9f9fb);
	--academy-surface: var(--hcgpt-surface, #ffffff);
	--academy-surface-2: var(--hcgpt-color-surface-2, #f3f4f6);
	--academy-surface-3: var(--hcgpt-color-surface-3, #e5e7eb);
	--academy-border: var(--hcgpt-color-border, #e5e7eb);
	--academy-border-strong: var(--hcgpt-color-border-strong, #d1d5db);
	--academy-text: var(--hcgpt-color-text, #111827);
	--academy-muted: var(--hcgpt-color-text-muted, #6b7280);
	--academy-primary: var(--academy-text);
	--academy-accent: var(--academy-text);
	--academy-success: #22c55e;
	--academy-danger: #ef4444;
	--academy-warning: #f59e0b;
	--academy-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
	--academy-radius: 24px;
	--academy-radius-sm: 12px;
	--academy-radius-lg: 18px;
	--academy-gap: 24px;
	--academy-gap-lg: 32px;
	--academy-pad: 0;
	--academy-sp-xs: 8px;
	--academy-sp-sm: 12px;
	--academy-sp-md: 16px;
	--academy-sp-lg: 24px;
	--academy-sp-xl: 32px;
	--academy-sp-2xl: 48px;
	--academy-sp-3xl: 64px;
	--academy-fixed-top-offset: calc(var(--hcgpt-topbar-row-min-h, 52px) + env(safe-area-inset-top, 0px));
	--academy-chat-panel-w: clamp(280px, 24vw, 320px);
	--academy-hover-bg: #edeef0;
	--academy-hover-bg-strong: #e2e3e5;
	--academy-grid-line: #e0e0e0;
	--academy-muted-strong: color-mix(in srgb, var(--academy-text) 72%, var(--academy-muted));
	--academy-focus: 0 0 0 3px color-mix(in srgb, var(--academy-text) 18%, transparent);
	--academy-font-headings: "Neuton", Georgia, serif;
	--academy-font-body: "Open Sans", system-ui, sans-serif;
	background: var(--academy-bg);
	color: var(--academy-text);
	padding: 0;
	min-height: 100%;
	height: 100%;
	line-height: 1.6;
	overflow: hidden;
}

:where(.hcgpt-scope:is([data-hcgpt-theme="dark"], [data-hcgpt-resolved-theme="dark"])) .hcgpt-academy-app {
	--academy-bg: #000000;
	--academy-surface: #1c1c1e;
	--academy-surface-2: #2c2c2e;
	--academy-surface-3: #3a3a3c;
	--academy-border: #48484a;
	--academy-border-strong: #636366;
	--academy-text: #f2f2f7;
	--academy-muted: #a1a1a6;
	--academy-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
	--academy-hover-bg: #2a2a2c;
	--academy-hover-bg-strong: #3a3a3c;
	--academy-grid-line: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-academy-app {
		--academy-bg: #000000;
		--academy-surface: #1c1c1e;
		--academy-surface-2: #2c2c2e;
		--academy-surface-3: #3a3a3c;
		--academy-border: #48484a;
		--academy-border-strong: #636366;
		--academy-text: #f2f2f7;
		--academy-muted: #a1a1a6;
		--academy-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
		--academy-hover-bg: #2a2a2c;
		--academy-hover-bg-strong: #3a3a3c;
		--academy-grid-line: rgba(255, 255, 255, 0.08);
	}
}

html.admin-bar :where(.hcgpt-scope) .hcgpt-academy-app {
	/* Admin bar height (32px) is already absorbed by the parent <html> top
	   margin in WP, so we do NOT need to add it again here. Keeping a tiny +8
	   buffer to breathe under the topbar divider. */
	--academy-fixed-top-offset: calc(8px + var(--hcgpt-topbar-row-min-h, 52px) + env(safe-area-inset-top, 0px));
}

@media screen and (max-width: 782px) {
	html.admin-bar :where(.hcgpt-scope) .hcgpt-academy-app {
		/* Mobile admin bar is 46px but, again, already accounted for at the html level. */
		--academy-fixed-top-offset: calc(8px + var(--hcgpt-topbar-row-min-h, 52px) + env(safe-area-inset-top, 0px));
	}
}

/* -------------------------------------------------------------------------
   Coming Soon screen
   Uses the same Academy visual language when the live app shell is gated.
   ------------------------------------------------------------------------- */

:where(.hcgpt-scope) .hcgpt-academy-coming-soon {
	--academy-bg: var(--hcgpt-app-bg, #f9f9fb);
	--academy-surface: var(--hcgpt-surface, #ffffff);
	--academy-surface-2: var(--hcgpt-color-surface-2, #f3f4f6);
	--academy-border: var(--hcgpt-color-border, #e5e7eb);
	--academy-border-strong: var(--hcgpt-color-border-strong, #d1d5db);
	--academy-text: var(--hcgpt-color-text, #111827);
	--academy-muted: var(--hcgpt-color-text-muted, #6b7280);
	--academy-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
	--academy-radius: 24px;
	--academy-radius-sm: 12px;
	--academy-sp-xs: 8px;
	--academy-sp-sm: 12px;
	--academy-sp-md: 16px;
	--academy-sp-lg: 24px;
	--academy-sp-xl: 32px;
	--academy-sp-2xl: 48px;
	--academy-sp-3xl: 64px;
	--academy-focus: 0 0 0 3px color-mix(in srgb, var(--academy-text) 18%, transparent);
	--academy-font-headings: "Neuton", Georgia, serif;
	--academy-font-body: "Open Sans", system-ui, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100%;
	width: 100%;
	padding: var(--academy-sp-2xl) var(--academy-sp-md);
	overflow-y: auto;
	background:
		linear-gradient(to right, transparent 31px, rgba(224, 224, 224, 0.65) 31px, rgba(224, 224, 224, 0.65) 32px, transparent 32px),
		linear-gradient(to bottom, transparent 31px, rgba(224, 224, 224, 0.65) 31px, rgba(224, 224, 224, 0.65) 32px, transparent 32px);
	background-color: var(--academy-bg);
	background-size: 40px 40px;
	color: var(--academy-text);
	font-family: var(--academy-font-body);
	line-height: 1.6;
	text-align: center;
}

:where(.hcgpt-scope:is([data-hcgpt-theme="dark"], [data-hcgpt-resolved-theme="dark"])) .hcgpt-academy-coming-soon {
	--academy-bg: #000000;
	--academy-surface: #1c1c1e;
	--academy-surface-2: #2c2c2e;
	--academy-border: #48484a;
	--academy-border-strong: #636366;
	--academy-text: #f2f2f7;
	--academy-muted: #a1a1a6;
	--academy-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
	background:
		linear-gradient(to right, transparent 31px, rgba(255, 255, 255, 0.08) 31px, rgba(255, 255, 255, 0.08) 32px, transparent 32px),
		linear-gradient(to bottom, transparent 31px, rgba(255, 255, 255, 0.08) 31px, rgba(255, 255, 255, 0.08) 32px, transparent 32px);
	background-color: var(--academy-bg);
	background-size: 32px 32px;
}

@media (prefers-color-scheme: dark) {
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-academy-coming-soon {
		--academy-bg: #000000;
		--academy-surface: #1c1c1e;
		--academy-surface-2: #2c2c2e;
		--academy-border: #48484a;
		--academy-border-strong: #636366;
		--academy-text: #f2f2f7;
		--academy-muted: #a1a1a6;
		--academy-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
		background:
			linear-gradient(to right, transparent 31px, rgba(255, 255, 255, 0.08) 31px, rgba(255, 255, 255, 0.08) 32px, transparent 32px),
			linear-gradient(to bottom, transparent 31px, rgba(255, 255, 255, 0.08) 31px, rgba(255, 255, 255, 0.08) 32px, transparent 32px);
		background-color: var(--academy-bg);
		background-size: 32px 32px;
	}
}

.hcgpt-academy-cs-hero {
	max-width: 760px;
	margin: 0 auto var(--academy-sp-xl);
}

.hcgpt-academy-cs-title {
	margin: 0 0 var(--academy-sp-sm);
	color: var(--academy-text);
	font-family: var(--academy-font-headings);
	font-size: clamp(2rem, 4vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
}

.hcgpt-academy-cs-subtitle {
	max-width: 36rem;
	margin: 0 auto;
	color: var(--academy-muted);
	font-size: clamp(1rem, 2vw, 1.18rem);
}

.hcgpt-academy-cs-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--academy-sp-md);
	width: min(100%, 760px);
	margin: 0 auto var(--academy-sp-xl);
}

.hcgpt-academy-cs-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 184px;
	padding: var(--academy-sp-lg);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
	text-align: center;
}

.hcgpt-academy-cs-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--academy-sp-md);
	background: var(--academy-surface-2);
	border: 1px solid var(--academy-border);
	border-radius: 50%;
	color: var(--academy-text);
}

.hcgpt-academy-cs-card-icon svg {
	width: 32px;
	height: 32px;
}

.hcgpt-academy-cs-card-title {
	margin: 0 0 var(--academy-sp-xs);
	color: var(--academy-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
}

.hcgpt-academy-cs-card-desc {
	margin: 0;
	color: var(--academy-muted);
	font-size: 0.94rem;
	line-height: 1.55;
}

.hcgpt-academy-cs-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--academy-sp-sm);
	max-width: 760px;
	margin: 0 auto;
}

.hcgpt-academy-cs-notify-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--academy-sp-sm) var(--academy-sp-xl);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border-strong);
	border-radius: var(--academy-radius-sm);
	box-shadow: var(--academy-shadow);
	color: var(--academy-text);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hcgpt-academy-cs-notify-btn:hover {
	background: var(--academy-surface-2);
	border-color: var(--academy-text);
}

.hcgpt-academy-cs-notify-btn:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--academy-focus);
}

.hcgpt-academy-cs-notify-btn:active {
	transform: scale(0.98);
}

.hcgpt-academy-cs-notify-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.hcgpt-academy-cs-cta-hint,
.hcgpt-academy-cs-feedback {
	margin: 0;
	color: var(--academy-muted);
	font-size: 0.94rem;
}

.hcgpt-academy-cs-feedback {
	min-height: 1.5em;
}

.hcgpt-academy-cs-feedback[data-state="success"] {
	color: var(--academy-success, #22c55e);
}

.hcgpt-academy-cs-feedback[data-state="error"] {
	color: var(--academy-danger, #ef4444);
}

@media (max-width: 720px) {
	:where(.hcgpt-scope) .hcgpt-academy-coming-soon {
		justify-content: flex-start;
		padding: var(--academy-sp-xl) var(--academy-sp-md);
	}

	.hcgpt-academy-cs-features {
		grid-template-columns: 1fr;
	}
}

.hcgpt-academy-app [hidden] {
	display: none !important;
}

@media (min-width: 1024px) {
	.hcgpt-academy-app {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.hcgpt-academy-app[data-screen="learn"],
	.hcgpt-academy-app[data-screen="assessments"],
	.hcgpt-academy-app[data-screen="quiz"] {
		grid-template-columns: var(--academy-chat-panel-w) 1fr;
	}

	.hcgpt-academy-app[data-chat="collapsed"][data-screen="learn"],
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="assessments"],
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="quiz"] {
		grid-template-columns: 32px 1fr;
	}

		.hcgpt-academy-app[data-zen="true"] {
			grid-template-columns: 1fr;
		}
	}

.academy-chat-panel {
	display: none;
	min-height: 0;
	overflow: hidden;
	position: relative;
	background: var(--academy-bg);
	border-right: 1px solid var(--academy-border);
}

.academy-chat-panel-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.academy-chat-collapse-btn {
	display: none;
}

@media (min-width: 1024px) {
	.hcgpt-academy-app[data-screen="learn"] > .academy-chat-panel,
	.hcgpt-academy-app[data-screen="assessments"] > .academy-chat-panel,
	.hcgpt-academy-app[data-screen="quiz"] > .academy-chat-panel {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding-top: var(--hcgpt-topbar-row-min-h, 56px);
	}

	/* Collapsed-chat skin must apply ONLY on lesson screens — otherwise
	   on Progress/Programs/Courses/Welcome the panel is forced to
	   display:block, takes full grid-column width (since the app has
	   `grid-template-columns: 1fr` outside lesson context), and pushes
	   the content-panel down by ~263px. That's the source of the
	   "huge empty space" reported above the roadmap on /progress. */
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="learn"] .academy-chat-panel,
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="assessments"] .academy-chat-panel,
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="quiz"] .academy-chat-panel {
		display: block;
		border-right: none;
	}

	.hcgpt-academy-app[data-chat="collapsed"][data-screen="learn"] .academy-chat-panel-inner,
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="assessments"] .academy-chat-panel-inner,
	.hcgpt-academy-app[data-chat="collapsed"][data-screen="quiz"] .academy-chat-panel-inner {
		display: none !important;
	}

	.hcgpt-academy-app[data-chat="collapsed"] .academy-chat-collapse-btn {
		display: flex;
		align-items: center;
		gap: 4px;
		writing-mode: vertical-lr;
		text-orientation: mixed;
		padding: 8px 6px;
		background: var(--academy-surface);
		border: 0;
		border-right: 1px solid var(--academy-border);
		border-bottom: 1px solid var(--academy-border);
		border-radius: 0 0 6px 0;
		color: var(--academy-muted);
		cursor: pointer;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		width: 32px;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.hcgpt-academy-app[data-chat="collapsed"] .academy-chat-collapse-btn:hover {
		background: var(--academy-hover-bg);
		color: var(--academy-text);
	}

	.hcgpt-academy-app[data-zen="true"] .academy-chat-panel,
	.hcgpt-academy-app[data-zen="true"] .academy-chat-collapse-btn {
		display: none !important;
	}
}

.academy-content-panel {
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	/* General rule: a small constant buffer (12px) under the topbar so
	   the first card never feels "glued" to it — but small enough that
	   we don't recreate the old "huge empty space" problem. */
	padding-top: calc(var(--academy-fixed-top-offset) + 12px);
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 32px;
	/* Grid background: cell size MUST match the line offsets (39px..40px),
	   otherwise the lines fall outside the cell and the pattern disappears. */
	background:
		linear-gradient(to right, transparent 39px, color-mix(in srgb, var(--academy-grid-line) 42%, transparent) 39px, color-mix(in srgb, var(--academy-grid-line) 42%, transparent) 40px, transparent 40px),
		linear-gradient(to bottom, transparent 39px, color-mix(in srgb, var(--academy-grid-line) 42%, transparent) 39px, color-mix(in srgb, var(--academy-grid-line) 42%, transparent) 40px, transparent 40px);
	background-size: 40px 40px;
	background-color: var(--academy-bg);
}

.academy-inline-outline {
	width: min(960px, 100%);
	margin: 0 auto var(--academy-sp-md);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-inline-outline__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--academy-sp-sm);
	padding: 14px 16px;
	color: var(--academy-text);
	cursor: pointer;
	list-style: none;
}

.academy-inline-outline__summary::-webkit-details-marker {
	display: none;
}

.academy-inline-outline__summary::after {
	content: "›";
	color: var(--academy-muted-strong);
	font-size: 1.1rem;
	transform: rotate(90deg);
	transition: transform 0.16s ease;
}

.academy-inline-outline[open] .academy-inline-outline__summary::after {
	transform: rotate(270deg);
}

.academy-inline-outline__label {
	font-weight: 700;
}

.academy-inline-outline__hint {
	margin-left: auto;
	color: var(--academy-muted-strong);
	font-size: 0.8125rem;
}

.academy-inline-outline__body {
	display: grid;
	gap: var(--academy-sp-sm);
	padding: 0 16px 16px;
}

.hcgpt-academy-app *:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--academy-focus);
	border-radius: var(--academy-radius-sm);
}

.academy-screen-header--legacy {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: var(--academy-sp-lg);
}

.academy-screen-header--legacy h2,
.academy-screen-header--legacy p,
.academy-screen-header--legacy .academy-kicker {
	max-width: 54rem;
}

.academy-screen-header--legacy h2 {
	margin: 6px 0 10px;
	font-family: var(--academy-font-headings);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1;
}

.academy-screen-header--legacy p {
	color: var(--academy-muted);
}

.academy-dashboard,
.academy-gamification--progress {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	/* Tight top, normal sides+bottom: no useless breathing room above the
	   first card — the panel padding-top already provides the topbar gap. */
	padding: 0 var(--academy-sp-md) var(--academy-sp-lg);
}

.academy-summary-card.is-success {
	border-color: color-mix(in srgb, var(--academy-success) 45%, var(--academy-border));
}

.academy-summary-card.is-warning {
	border-color: color-mix(in srgb, var(--academy-warning) 42%, var(--academy-border));
}

.academy-summary-card.is-neutral {
	border-color: var(--academy-border);
}

.academy-welcome,
.academy-onboarding {
	max-width: 760px;
	margin: 0 auto;
	/* Tight top: the welcome icon sits right under the topbar, the screen's
	   own internal margins provide visual rhythm. */
	padding: var(--academy-sp-md) var(--academy-sp-md) var(--academy-sp-2xl);
	text-align: center;
}

.academy-welcome-hero {
	margin-bottom: var(--academy-sp-xl);
}

.academy-welcome-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 auto var(--academy-sp-lg);
	border-radius: 50%;
	background: var(--academy-surface-2);
	color: var(--academy-text);
}

.academy-welcome-title {
	font-size: clamp(1.75rem, 4vw, 2.35rem);
	font-weight: 800;
	margin: 0 0 var(--academy-sp-sm);
	color: var(--academy-text);
}

.academy-welcome-subtitle {
	margin: 0 auto;
	max-width: 32rem;
	font-size: 1.0625rem;
	color: var(--academy-muted);
}

.academy-welcome-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--academy-sp-md);
	width: min(100%, 420px);
	margin: 0 auto var(--academy-sp-xl);
}

.academy-stat-card,
.academy-program-card,
.academy-outline-card,
.academy-course-hero,
.academy-module-intro,
.academy-next-target,
.academy-assessment-box,
.academy-question-card,
.academy-assessment-result,
.academy-empty-state,
.academy-assessment-callout,
.academy-lesson-header,
.academy-assessment-header {
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
}

.academy-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--academy-sp-md);
}

.academy-stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--academy-text);
}

.academy-stat-label {
	font-size: 0.75rem;
	color: var(--academy-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Action groups — consistent right-aligned direction */
.academy-welcome-actions,
.academy-assessment-actions,
.academy-pomodoro-actions,
.academy-modal-actions,
.academy-quiz-results-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--academy-sp-sm);
}

/* Exception: welcome + onboarding actions stay centered (landing pages) */
.academy-welcome-actions {
	justify-content: center;
}

.academy-welcome-actions {
	margin-top: var(--academy-sp-lg);
}

/* Global: action groups + standalone CTA buttons get breathing room */
.academy-assessment-actions,
.academy-quiz-nav,
.academy-quiz-results-actions,
.academy-modal-actions,
.academy-activity-actions,
.academy-activity-nav {
	margin-top: var(--academy-sp-md);
}

.academy-btn-primary,
.academy-btn-secondary,
.academy-btn-secondary--quiet,
.academy-primary-button,
.academy-primary-button--small,
.academy-inline-action,
.academy-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--academy-sp-xs);
	min-height: 48px;
	min-width: 48px;
	padding: var(--academy-sp-sm) var(--academy-sp-xl);
	border-radius: var(--academy-radius);
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

.academy-btn-primary,
.academy-primary-button,
.academy-primary-button--small {
	border: 1px solid transparent;
	background: var(--academy-brand-gradient);
	color: #fff;
	box-shadow: var(--academy-shadow);
}

.academy-btn-primary:hover,
.academy-primary-button:hover,
.academy-primary-button--small:hover {
	background: var(--academy-brand-gradient-hover);
	color: #fff;
	box-shadow: var(--academy-brand-shadow);
}

.academy-btn-secondary,
.academy-btn-secondary--quiet,
.academy-inline-action,
.academy-link-button {
	border: 1px solid var(--academy-border);
	background: var(--academy-surface);
	color: var(--academy-text);
	box-shadow: none;
}

.academy-btn-secondary:hover,
.academy-btn-secondary--quiet:hover,
.academy-inline-action:hover,
.academy-link-button:hover {
	background: var(--academy-hover-bg-strong);
	border-color: transparent;
	color: var(--academy-text);
	background-image: linear-gradient(var(--academy-hover-bg-strong), var(--academy-hover-bg-strong)), var(--academy-brand-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.academy-btn-secondary--quiet {
	padding-inline: var(--academy-sp-lg);
}

.academy-btn-primary:active,
.academy-btn-secondary:active,
.academy-btn-secondary--quiet:active,
.academy-primary-button:active,
.academy-primary-button--small:active {
	opacity: 0.85;
}

.academy-btn-primary:disabled,
.academy-btn-secondary:disabled,
.academy-btn-secondary--quiet:disabled,
.academy-primary-button:disabled,
.academy-primary-button--small:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

.academy-programs-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-content: start;
	gap: var(--academy-sp-md);
}

.academy-level-filter {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	background: color-mix(in srgb, var(--academy-surface) 94%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-level-filter__label {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--academy-muted-strong);
}

.academy-level-filter__button {
	font: inherit;
	padding: 7px 10px;
	border: 1px solid var(--academy-border);
	border-radius: 999px;
	background: var(--academy-surface);
	color: var(--academy-text);
	cursor: pointer;
}

.academy-level-filter__button:hover,
.academy-level-filter__button.is-active {
	border-color: var(--academy-brand-1);
	background: color-mix(in srgb, var(--academy-brand-1) 10%, var(--academy-surface));
}

.academy-level-filter__hint {
	flex: 1 1 280px;
	color: var(--academy-muted-strong);
	font-size: 0.8125rem;
}

.academy-outline-grid,
.academy-progress-grid,
.academy-course-hero,
.academy-lesson-shell,
.academy-assessment-shell {
	display: grid;
	gap: var(--academy-sp-md);
}

.academy-program-card,
.academy-outline-card,
.academy-course-hero,
.academy-module-intro,
.academy-empty-state,
.academy-assessment-callout,
.academy-lesson-header,
.academy-assessment-header,
.academy-assessment-result,
.academy-next-target {
	padding: var(--academy-sp-lg);
}

.academy-program-card {
	grid-column: 1 / -1;
	padding-block: 16px;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.academy-program-card:hover,
.academy-assessment-box--list:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--academy-brand-1) 55%, var(--academy-border));
	box-shadow: 0 12px 34px rgba(17, 24, 39, 0.12);
}

.academy-card-kicker,
.academy-kicker,
.academy-sidebar-module__title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--academy-muted);
}

.academy-card-description,
.academy-course-row__meta,
.academy-outline-lesson__meta,
.academy-lesson-subtitle,
.academy-assessment-subtitle,
.academy-empty-state p,
.academy-profile-level-sub {
	color: var(--academy-muted);
}

.academy-program-card h3,
.academy-outline-card h3,
.academy-course-hero h3,
.academy-lesson-header h3,
.academy-assessment-header h3,
.academy-next-target h3 {
	margin: 0 0 var(--academy-sp-xs);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-program-course-list,
.academy-outline-lessons,
.academy-assessment-questions,
.academy-activities {
	display: grid;
	gap: var(--academy-sp-sm);
	margin-top: var(--academy-sp-md);
}

/* Guardrail: Programs desktop must show course rows in multiple columns.
   A previous regression left all courses in one vertical file on wide viewports. */
.academy-program-course-list {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: stretch;
}

.academy-course-row,
.academy-outline-lesson {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 16px;
	padding: 14px 16px;
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	background: var(--academy-surface);
	color: var(--academy-text);
	text-align: left;
}

.academy-course-row:hover,
.academy-outline-lesson:hover {
	/* Use a surface step that's distinctly lighter than the page background
	   in dark mode (and slightly darker than the surface in light mode), so
	   the hover state is visible regardless of theme. */
	background: var(--academy-surface-2);
	border-color: var(--academy-brand-1);
	box-shadow: 0 0 0 1px var(--academy-brand-1);
	transform: translateY(-1px);
}

.academy-course-row:disabled,
.academy-outline-lesson:disabled {
	opacity: 0.48;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.academy-course-row__title,
.academy-outline-lesson__title {
	font-weight: 700;
}

.academy-course-row__meta,
.academy-outline-lesson__meta {
	color: var(--academy-muted-strong);
}

.academy-course-row__progress,
.academy-summary-progress {
	grid-column: 1 / -1;
	width: 100%;
	height: 5px;
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-border) 80%, transparent);
	overflow: hidden;
}

.academy-course-row__progress::-webkit-progress-bar,
.academy-summary-progress::-webkit-progress-bar {
	background: color-mix(in srgb, var(--academy-border) 80%, transparent);
	border-radius: 999px;
}

.academy-course-row__progress::-webkit-progress-value,
.academy-summary-progress::-webkit-progress-value {
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}

.academy-course-row__progress::-moz-progress-bar,
.academy-summary-progress::-moz-progress-bar {
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}

.academy-complete-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--academy-success) 45%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-success) 12%, var(--academy-surface));
	color: color-mix(in srgb, var(--academy-success) 70%, var(--academy-text));
	font-size: 0.78rem;
	font-weight: 800;
}

.academy-lesson,
.academy-quiz {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: var(--academy-sp-lg) var(--academy-sp-md);
}

.academy-quiz {
	background: var(--academy-surface);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
}

.academy-assessment-shell[hidden],
.academy-lesson-shell[hidden] {
	display: none !important;
}

.academy-assessment-callout:empty {
	display: none;
}

.academy-activity-card {
	padding: var(--academy-sp-lg);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
}

.academy-activity-card h4,
.academy-assessment-box h4,
.academy-question-card h4 {
	margin: 0 0 var(--academy-sp-sm);
	font-size: 1rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-progress-next {
	display: grid;
	gap: var(--academy-sp-md);
	margin-top: var(--academy-sp-lg);
}

.academy-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--academy-sp-2xl) var(--academy-sp-lg);
}

.academy-empty-state h3 {
	margin: 0 0 var(--academy-sp-xs);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-onboarding {
	max-width: 640px;
}

.academy-onboarding-hero {
	margin-bottom: var(--academy-sp-xl);
	text-align: center;
}

.academy-onboarding-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, color-mix(in srgb, var(--academy-brand-1) 12%, var(--academy-surface)), color-mix(in srgb, var(--academy-brand-2) 12%, var(--academy-surface)));
	margin-bottom: var(--academy-sp-md);
}

.academy-onboarding-hero h2 {
	margin: 0 0 var(--academy-sp-sm);
	font-family: var(--academy-font-headings);
	font-size: clamp(1.6rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--academy-text);
}

.academy-onboarding-hero p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--academy-muted);
	line-height: 1.5;
}

.academy-onboarding-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--academy-sp-md);
	margin-bottom: var(--academy-sp-lg);
}

.academy-onboarding-card {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-sm);
	padding: var(--academy-sp-lg);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	background: var(--academy-surface);
	color: var(--academy-text);
	text-align: center;
	transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}

.academy-onboarding-card:hover {
	border-color: var(--academy-border-strong);
	background: var(--academy-hover-bg);
	transform: translateY(-2px);
}

.academy-onboarding-card {
	position: relative;
	align-items: center;
	text-align: center;
	padding: var(--academy-sp-xl) var(--academy-sp-lg);
}

.academy-onboarding-card-icon {
	font-size: 2rem;
	color: var(--academy-muted);
	margin-bottom: var(--academy-sp-xs);
}

.academy-onboarding-card-title {
	font-size: 1rem;
	font-weight: 600;
}

.academy-onboarding-card-desc {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--academy-muted);
}

/* AI card — premium gradient look (solid colors, no transparency) */
.academy-onboarding-card--ai {
	background: linear-gradient(135deg, color-mix(in srgb, var(--academy-brand-1) 10%, var(--academy-surface)), color-mix(in srgb, var(--academy-brand-2) 8%, var(--academy-surface)));
	border-color: color-mix(in srgb, var(--academy-brand-1) 25%, var(--academy-border));
}

.academy-onboarding-card--ai:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--academy-brand-1) 18%, var(--academy-surface)), color-mix(in srgb, var(--academy-brand-2) 14%, var(--academy-surface))) !important;
	border-color: color-mix(in srgb, var(--academy-brand-1) 45%, var(--academy-border)) !important;
}

.academy-onboarding-card--ai .academy-onboarding-card-icon {
	color: var(--academy-brand-1);
}

.academy-onboarding-card-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--academy-brand-gradient);
	color: #fff;
}

.academy-onboarding-card-teaser {
	font-size: 0.72rem;
	font-style: italic;
	color: var(--academy-muted);
	margin-bottom: -2px;
}

/* Manual card — neutral/subtle */
.academy-onboarding-card--manual {
	background: var(--academy-surface);
}

.academy-onboarding-card--manual:hover {
	background: var(--academy-surface-2) !important;
}

/* Stats footer */
.academy-onboarding-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.75rem;
	color: var(--academy-muted);
	opacity: 0.7;
	padding-top: var(--academy-sp-md);
}

.academy-onboarding-stats__sep {
	opacity: 0.4;
}

.academy-onboarding-feedback {
	margin: var(--academy-sp-md) auto 0;
	max-width: 42rem;
	padding: var(--academy-sp-sm) var(--academy-sp-md);
	border: 1px solid var(--academy-border);
	border-radius: 999px;
	background: var(--academy-surface);
	color: var(--academy-muted);
	text-align: center;
}

.academy-level-select,
.academy-analysis-result,
.academy-chat-reader {
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-lg);
}

.academy-level-select h3,
.academy-level-select legend,
.academy-analysis-result h3,
.academy-chat-reader-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--academy-text);
	text-align: center;
}

.academy-level-options {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-sm);
	margin-bottom: var(--academy-sp-lg);
}

.academy-level-option {
	display: flex;
	align-items: flex-start;
	gap: var(--academy-sp-sm);
	padding: var(--academy-sp-md);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	background: var(--academy-surface);
	cursor: pointer;
}

.academy-level-option:hover {
	border-color: var(--academy-border-strong);
}

.academy-level-option input[type="radio"] {
	margin-top: 4px;
	accent-color: var(--academy-text);
}

.academy-level-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.academy-level-label small {
	font-size: 0.8125rem;
	color: var(--academy-muted);
}

.academy-profile-card {
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	padding: var(--academy-sp-lg);
	margin-bottom: var(--academy-sp-lg);
	box-shadow: var(--academy-shadow);
}

.academy-profile-level {
	margin-bottom: var(--academy-sp-md);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	color: var(--academy-text);
}

.academy-profile-summary {
	margin-bottom: var(--academy-sp-md);
	color: var(--academy-text);
}

.academy-profile-card h4,
.academy-skill-title,
.academy-why-label {
	margin: var(--academy-sp-md) 0 var(--academy-sp-xs);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--academy-muted);
}

.academy-profile-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.academy-profile-card li {
	padding: 4px 0;
	font-size: 0.875rem;
	color: var(--academy-text);
}

.academy-profile-card li::before {
	content: '•';
	margin-right: 8px;
	color: var(--academy-text);
}

.academy-chat-reader {
	text-align: center;
}

.academy-chat-reader-list {
	margin-bottom: var(--academy-sp-lg);
	min-height: 80px;
	text-align: left;
}

.academy-chat-reader-item {
	display: flex;
	align-items: center;
	gap: var(--academy-sp-sm);
	padding: var(--academy-sp-sm) var(--academy-sp-md);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: 12px;
	margin-bottom: var(--academy-sp-xs);
}

.academy-chat-reader-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
}

.academy-chat-reader-info {
	flex: 1;
	min-width: 0;
}

.academy-chat-reader-item-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--academy-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.academy-chat-reader-item-meta {
	font-size: 0.75rem;
	color: var(--academy-muted);
}

.academy-chat-reader-check {
	font-size: 1rem;
	color: #34d399;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.academy-chat-reader-check.visible {
	opacity: 1;
	transform: scale(1);
}

.academy-chat-reader-progress,
.academy-progress-bar {
	height: 6px;
	background: var(--academy-surface-2);
	border-radius: 999px;
	overflow: hidden;
}

.academy-chat-reader-progress {
	margin-bottom: var(--academy-sp-md);
}

.academy-chat-reader-progress-fill,
.academy-progress-fill {
	height: 100%;
	width: 0;
	background: var(--academy-brand-gradient);
	border-radius: 999px;
	transition: width 0.25s ease;
}

.academy-chat-reader-steps {
	display: flex;
	justify-content: center;
	gap: var(--academy-sp-lg);
}

.academy-chat-reader-step {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--academy-muted);
}

.academy-chat-reader-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--academy-border);
}

.academy-chat-reader-step.active .academy-chat-reader-dot {
	background: var(--academy-text);
}

.academy-chat-reader-step.done .academy-chat-reader-dot {
	background: #34d399;
}

.academy-chat-reader-summary {
	margin-top: var(--academy-sp-lg);
	margin-bottom: var(--academy-sp-md);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--academy-muted);
}

.academy-why-box {
	margin-bottom: var(--academy-sp-lg);
	padding: var(--academy-sp-md);
	border-radius: 12px;
	background: color-mix(in srgb, var(--academy-text) 6%, var(--academy-surface));
}

.academy-why-text,
.academy-cta-message {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--academy-text);
}

.academy-cta-section {
	text-align: center;
	margin-top: var(--academy-sp-lg);
	padding-top: var(--academy-sp-md);
}

.academy-skill-section {
	margin-bottom: var(--academy-sp-md);
}

.academy-skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--academy-sp-xs);
}

.academy-skill-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8125rem;
}

.academy-skill-tag--strength {
	background: color-mix(in srgb, #34d399 15%, transparent);
	color: #16a34a;
}

.academy-skill-tag--gap {
	background: color-mix(in srgb, #fb923c 15%, transparent);
	color: #ea580c;
}

.academy-insight-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--academy-sp-md) var(--academy-sp-lg);
	margin-top: var(--academy-sp-md);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	text-align: center;
}

.academy-insight-divider {
	border: none;
	border-top: 1px solid var(--academy-border);
	margin: var(--academy-sp-xs) 0;
}

.academy-insight-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--academy-muted);
}

.academy-insight-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--academy-text);
}

.academy-quiz {
	max-width: 720px;
}

.academy-quiz-header {
	margin-bottom: var(--academy-sp-xl);
}

.academy-quiz-title {
	margin: 0 0 var(--academy-sp-sm);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-quiz-timer {
	display: inline-block;
	margin-bottom: var(--academy-sp-sm);
	padding: 4px 12px;
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	background: var(--academy-surface);
	color: var(--academy-text);
	font-size: 1.05rem;
	font-weight: 700;
}

.academy-quiz-progress {
	display: flex;
	align-items: center;
	gap: var(--academy-sp-sm);
	font-size: 0.8125rem;
	color: var(--academy-muted);
}

.academy-quiz-question-text {
	margin: 0 0 var(--academy-sp-lg);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--academy-text);
}

.academy-quiz-options {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-sm);
	margin-bottom: var(--academy-sp-xl);
}

.academy-quiz-option {
	display: block;
	width: 100%;
	padding: var(--academy-sp-md) var(--academy-sp-lg);
	border: 2px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	background: var(--academy-surface);
	color: var(--academy-text);
	font: inherit;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.academy-quiz-option:hover {
	border-color: var(--academy-border-strong);
	background: var(--academy-hover-bg);
}

.academy-quiz-option.selected {
	border-image: var(--academy-brand-gradient) 1;
	background: var(--academy-surface-2);
}

/* Quiz nav — always right-aligned, forward direction */
.academy-quiz-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--academy-sp-sm);
}

.academy-quiz-results {
	text-align: center;
}

.academy-quiz-score-circle {
	width: 120px;
	height: 120px;
	margin: 0 auto var(--academy-sp-md);
	border: 4px solid;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.academy-quiz-score-circle.passed {
	border-color: #059669;
	background: rgba(5, 150, 105, 0.06);
}

.academy-quiz-score-circle.failed {
	border-color: #dc2626;
	background: rgba(220, 38, 38, 0.06);
}

.score-pct {
	font-size: 1.75rem;
	font-weight: 800;
}

.score-label {
	margin: 0 0 var(--academy-sp-xs);
	font-size: 1.25rem;
	font-weight: 700;
}

.score-detail {
	margin: 0 0 var(--academy-sp-xl);
	font-size: 0.9375rem;
	color: var(--academy-muted);
}

.academy-quiz-assessment-summary {
	margin: 0 0 var(--academy-sp-lg);
	padding: var(--academy-sp-md);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-lg);
	background: var(--academy-surface);
	text-align: left;
}

.academy-quiz-assessment-title,
.academy-quiz-assessment-label {
	margin: 0 0 var(--academy-sp-xs);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--academy-muted);
}

.academy-quiz-assessment-level {
	margin: 0 0 var(--academy-sp-md);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-quiz-assessment-list {
	margin: 0;
	padding-left: 1.125rem;
	color: var(--academy-text);
}

.academy-quiz-result-item {
	display: flex;
	align-items: flex-start;
	gap: var(--academy-sp-sm);
	padding: var(--academy-sp-sm) 0;
	border-bottom: 1px solid var(--academy-border);
	text-align: left;
}

.academy-tutor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid var(--academy-border);
	background: var(--academy-surface);
	flex-shrink: 0;
	min-height: 48px;
}

.academy-tutor-identity {
	display: flex;
	align-items: center;
	gap: 8px;
}

.academy-tutor-avatar,
.academy-tutor-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	object-fit: cover;
	font-size: 1rem;
	color: var(--academy-muted);
	background: color-mix(in srgb, var(--academy-surface-2) 80%, transparent);
}

.academy-tutor-avatar {
	border-radius: var(--hcgpt-photo-shape-left-sm, 12px 0 0 12px);
}

.academy-tutor-avatar-placeholder {
	border-radius: 50%;
}

.academy-tutor-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--academy-text);
}

.academy-tutor-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.academy-credits-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--academy-surface-2) 88%, transparent);
	font-size: 0.6875rem;
	color: var(--academy-muted);
}

.academy-credits-badge:empty {
	display: none;
}

.academy-chat-panel-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--academy-muted);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.academy-chat-panel-close:hover {
	background: var(--academy-hover-bg) !important;
	color: var(--academy-text) !important;
}

.academy-tutor-messages {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--academy-bg);
}

.academy-tutor-msg {
	display: flex;
	gap: 8px;
	max-width: 78%;
}

.academy-tutor-msg--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.academy-tutor-msg--assistant {
	align-self: flex-start;
	max-width: 100%;
}

.academy-tutor-msg--system {
	align-self: center;
	max-width: 80%;
}

.academy-tutor-msg-bubble {
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 0.9375rem;
	line-height: 1.5;
	word-break: break-word;
}

.academy-tutor-msg--user .academy-tutor-msg-bubble {
	background: var(--academy-surface-2);
	color: var(--academy-text);
	border: 1px solid var(--academy-border);
	border-bottom-right-radius: 4px;
}

.academy-tutor-msg--assistant .academy-tutor-msg-bubble {
	padding-left: 0;
	background: transparent;
	color: var(--academy-text);
	border: 1px solid transparent;
	border-bottom-left-radius: 4px;
}

.academy-tutor-msg--system .academy-tutor-msg-bubble {
	background: transparent;
	color: var(--academy-muted);
	font-size: 0.8125rem;
	font-style: italic;
	text-align: center;
}

.academy-tutor-typing {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 16px;
	font-size: 0.8125rem;
	color: var(--academy-muted);
}

.academy-typing-dots {
	display: flex;
	gap: 3px;
}

.academy-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--academy-muted);
	animation: academy-typing-bounce 1.2s infinite;
}

.academy-typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.academy-typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes academy-typing-bounce {
	0%,
	60%,
	100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-4px);
	}
}

.hcgpt-academy-app .academy-tutor-composer {
	flex-shrink: 0;
	width: 100%;
	padding: 8px 0 16px;
	margin: 0;
	background: transparent;
}

.hcgpt-academy-app .academy-tutor-input-wrap {
	position: relative;
	padding: 0 16px;
}

.hcgpt-academy-app .academy-tutor-input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 20px;
	margin: 0;
	padding: 10px 48px 10px 16px;
	border: 1px solid var(--academy-border);
	border-radius: 24px;
	background: var(--academy-surface);
	color: var(--academy-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.7;
	outline: 2px solid transparent;
	resize: none;
	box-shadow: none;
}

.hcgpt-academy-app .academy-tutor-input::placeholder {
	color: var(--academy-muted);
	opacity: 0.5;
}

.hcgpt-academy-app .academy-tutor-input:focus {
	border-color: var(--academy-border-strong);
	outline: 2px solid transparent;
	box-shadow: var(--academy-focus);
}

.hcgpt-academy-app .academy-tutor-send {
	position: absolute;
	right: 20px;
	bottom: 4px;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: var(--academy-surface);
	color: var(--academy-text);
	cursor: pointer;
	box-shadow: none;
}

.hcgpt-academy-app .academy-tutor-send svg {
	width: 18px;
	height: 18px;
	display: block;
	color: currentColor;
}

.hcgpt-academy-app .academy-tutor-send:hover {
	background: var(--academy-hover-bg-strong);
}

.academy-modal-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--academy-sp-md);
	background: rgba(0, 0, 0, 0.6);
	z-index: 2000;
}

.academy-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: var(--academy-sp-xl);
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
}

.academy-modal h3 {
	margin: 0 0 var(--academy-sp-md);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--academy-text);
}

.academy-modal-body {
	margin-bottom: var(--academy-sp-lg);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--academy-muted);
}

.academy-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--academy-border);
	border-radius: 50%;
	background: var(--academy-surface-2);
	color: var(--academy-text);
	cursor: pointer;
}

.academy-modal-close:hover {
	background: var(--academy-surface-3);
}

.academy-modal-actions--split {
	justify-content: space-between;
	flex-wrap: wrap;
}

.academy-modal--success {
	max-width: 560px;
	overflow: hidden;
}

.academy-modal-overlay--success.is-celebrating {
	background: rgba(0, 0, 0, 0.72);
}

.academy-assessment-success__celebration {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.academy-assessment-success__particle {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 22px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(-12px) rotate(0deg);
	background: color-mix(in srgb, var(--academy-text) 70%, #7f5f35);
}

.academy-modal-overlay--success.is-celebrating .academy-assessment-success__particle {
	animation: academy-confetti-drop 0.95s ease-out forwards;
}

.academy-assessment-success__particle--1 { left: 12%; animation-delay: 0.02s; }
.academy-assessment-success__particle--2 { left: 28%; animation-delay: 0.08s; }
.academy-assessment-success__particle--3 { left: 42%; animation-delay: 0.14s; }
.academy-assessment-success__particle--4 { left: 58%; animation-delay: 0.04s; }
.academy-assessment-success__particle--5 { left: 74%; animation-delay: 0.11s; }
.academy-assessment-success__particle--6 { left: 88%; animation-delay: 0.18s; }

.academy-assessment-success__seal {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 0 18px;
	border-radius: 50%;
	border: 1px solid rgba(61, 106, 80, 0.45);
	background: color-mix(in srgb, #2e4e3a 24%, var(--academy-surface));
	font-size: 2rem;
	font-weight: 800;
	color: #d9f2e2;
}

.academy-modal-overlay--success.is-celebrating .academy-assessment-success__seal {
	animation: academy-success-pop 0.6s ease-out;
}

.academy-assessment-success__score {
	margin: 0 0 var(--academy-sp-lg);
	font-size: 1rem;
	font-weight: 700;
	color: var(--academy-text);
}

@keyframes academy-confetti-drop {
	0% {
		opacity: 0;
		transform: translateY(-18px) rotate(0deg);
	}
	15% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		transform: translateY(220px) rotate(28deg);
	}
}

@keyframes academy-success-pop {
	0% {
		transform: scale(0.78);
	}
	65% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

.academy-modal-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--academy-sp-sm);
	margin-bottom: var(--academy-sp-lg);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--academy-text);
}

.academy-modal-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin-top: 2px;
	accent-color: var(--academy-text);
}

.academy-tutor-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--academy-text);
	color: var(--academy-bg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.academy-tutor-fab:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	background: var(--academy-text) !important;
	color: var(--academy-bg) !important;
	border-color: transparent !important;
}

.academy-tutor-fab:active {
	transform: scale(0.95);
}

.academy-tutor-fab {
	position: fixed;
	right: 16px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 1000;
	display: none;
}

.academy-tutor-fab svg {
	width: 24px;
	height: 24px;
}

.academy-pomodoro-panel {
	right: 16px;
	left: auto;
	top: calc(var(--academy-fixed-top-offset) + 10px);
	bottom: auto;
	width: min(360px, calc(100vw - 32px));
	padding: 22px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	border: 1px solid var(--academy-border);
	border-radius: 24px;
	box-shadow: var(--academy-shadow);
}

.academy-pomodoro-panel__header h3 {
	font-family: var(--academy-font-headings);
	font-size: 1.6rem;
	line-height: 1;
}

.academy-pomodoro-panel__header p,
.academy-pomodoro-today,
.academy-pomodoro-meta {
	color: var(--academy-muted);
}

.academy-loading {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--academy-bg) 88%, transparent);
	z-index: 200;
}

.academy-loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--academy-border);
	border-top-color: var(--academy-text);
	border-radius: 50%;
}

.academy-xp-toast {
	position: fixed;
	top: calc(var(--academy-fixed-top-offset) + var(--academy-sp-sm));
	left: 50%;
	transform: translateX(-50%);
	z-index: 300;
	pointer-events: none;
}

.academy-xp-toast-text {
	display: inline-block;
	padding: var(--academy-sp-xs) var(--academy-sp-lg);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	background: var(--academy-surface);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--academy-text);
	box-shadow: var(--academy-shadow);
}

.hcgpt-academy-app[data-zen="true"] {
	position: fixed;
	inset: 0;
	z-index: 10020;
	padding: 0;
	background: var(--academy-bg);
}

.hcgpt-academy-app[data-zen="true"] .academy-content-panel {
	grid-column: 1 / -1;
	width: 100%;
}

.hcgpt-app-shell[data-zen="true"] > .hcgpt-chat-sidebar,
.hcgpt-app-shell[data-zen="true"] .hcgpt-app-topbar {
	display: none !important;
}

.hcgpt-app-shell[data-zen="true"] > main {
	margin-left: 0 !important;
	padding-top: 0 !important;
}

@media (max-width: 1023px) {
	.hcgpt-academy-app {
		display: block;
	}

	.academy-content-panel {
		padding-top: calc(var(--academy-fixed-top-offset) + 12px);
		padding-left: 12px;
		padding-right: 12px;
	}

	.academy-welcome,
	.academy-onboarding,
	.academy-dashboard,
	.academy-lesson,
	.academy-quiz,
	.academy-gamification--progress {
		padding-left: 0;
		padding-right: 0;
	}

	.academy-onboarding-choices,
	.academy-welcome-stats {
		grid-template-columns: 1fr;
	}

	.academy-quiz {
		border: 1px solid var(--academy-border);
		border-radius: var(--academy-radius);
		box-shadow: none;
		margin-bottom: 32px;
	}

	.academy-lesson {
		margin-bottom: 32px;
	}

	.hcgpt-academy-app[data-screen="learn"] .academy-tutor-fab,
	.hcgpt-academy-app[data-screen="assessments"] .academy-tutor-fab,
	.hcgpt-academy-app[data-screen="quiz"] .academy-tutor-fab {
		display: flex !important;
	}

	.hcgpt-academy-app[data-screen] .academy-chat-panel.is-mobile-modal {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		background: var(--academy-bg);
		z-index: 10000;
	}

	.admin-bar .hcgpt-academy-app[data-screen] .academy-chat-panel.is-mobile-modal {
		top: var(--wp-admin--admin-bar--height, 0px);
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}

	.hcgpt-academy-app .academy-chat-panel.is-mobile-modal > .academy-chat-panel-inner {
		display: flex !important;
		flex-direction: column;
		height: 100%;
	}

	.hcgpt-academy-app .academy-chat-panel.is-mobile-modal > .academy-chat-collapse-btn {
		display: none !important;
	}

	.hcgpt-academy-app:has(.academy-chat-panel.is-mobile-modal) .academy-tutor-fab {
		display: none !important;
	}

	.academy-pomodoro-panel {
		right: 16px;
		left: 16px;
		top: calc(var(--academy-fixed-top-offset) + 10px);
		bottom: auto;
		width: auto;
	}
}

/* -------------------------------------------------------------------------
   P1 — Flatten card nesting (max 2 visual depth levels)
   P2 — Standardise padding to design tokens
   ------------------------------------------------------------------------- */

/* Outline cards (modules inside course view): transparent, no card chrome */
.hcgpt-academy-app .academy-outline-card {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin-top: var(--academy-sp-lg);
}

/* Add a subtle top border separator between modules instead of card */
.hcgpt-academy-app .academy-outline-card + .academy-outline-card {
	border-top: 1px solid var(--academy-border);
	padding-top: var(--academy-sp-lg);
}

.hcgpt-academy-app .academy-outline-card--route-target {
	border-top-color: color-mix(in srgb, #9d7a31 72%, var(--academy-border));
	box-shadow: inset 4px 0 0 color-mix(in srgb, #9d7a31 84%, transparent);
	background: color-mix(in srgb, #9d7a31 10%, transparent);
	scroll-margin-top: 96px;
}

/* Course/lesson rows: visible card chrome for active lessons */
.hcgpt-academy-app .academy-course-row,
.hcgpt-academy-app .academy-outline-lesson {
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	box-shadow: none;
}

/* Locked/disabled lessons: much more muted */
.hcgpt-academy-app .academy-outline-lesson:disabled {
	background: color-mix(in srgb, var(--academy-surface-2) 30%, transparent);
	border-color: color-mix(in srgb, var(--academy-border) 30%, transparent);
	opacity: 0.35;
}

/* Activity cards in learn view: card chrome restored (header & nav live outside) */
.hcgpt-academy-app .academy-activity-card {
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius);
	box-shadow: var(--academy-shadow);
	padding: var(--academy-sp-lg);
}

/* Assessment box (Lesson Checkpoint): flatten — separator only */
.hcgpt-academy-app .academy-assessment-box {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	border-top: 1px solid color-mix(in srgb, var(--academy-border) 50%, transparent);
	padding: var(--academy-sp-md) 0;
}

.hcgpt-academy-app .academy-assessment-box--list {
	background: var(--academy-surface);
	border: 1px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	box-shadow: var(--academy-shadow);
	padding: var(--academy-sp-lg);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.academy-pill--status.is-available {
	border-color: color-mix(in srgb, var(--academy-brand-1) 42%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-brand-1) 10%, var(--academy-surface));
}

.academy-pill--status.is-passed {
	border-color: color-mix(in srgb, var(--academy-success) 48%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-success) 12%, var(--academy-surface));
	color: color-mix(in srgb, var(--academy-success) 70%, var(--academy-text));
}

.academy-pill--status.is-retake {
	border-color: color-mix(in srgb, var(--academy-warning) 52%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-warning) 14%, var(--academy-surface));
	color: color-mix(in srgb, var(--academy-warning) 70%, var(--academy-text));
}

.academy-pill--status.is-locked {
	opacity: 0.68;
}

/* More spacing between activity cards for readability */
.hcgpt-academy-app .academy-activities {
	gap: var(--academy-sp-sm);
}

/* Description elements rendered via descEl() — no double margin */
.hcgpt-academy-app .academy-card-description {
	margin: var(--academy-sp-xs) 0 0;
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   P3 — Step-by-step activity navigation
   ------------------------------------------------------------------------- */

/* Progress bar */
.academy-activity-progress {
	display: flex;
	align-items: center;
	gap: var(--academy-sp-sm);
	margin-top: var(--academy-sp-xs);
}

.academy-activity-progress__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--academy-muted);
	white-space: nowrap;
	min-width: 120px;
}

.academy-activity-progress__bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--academy-border) 60%, transparent);
	overflow: hidden;
}

.academy-activity-progress__fill {
	height: 100%;
	border-radius: 2px;
	background: var(--academy-brand-gradient);
	transition: width 0.3s ease;
}

/* Step navigation (Prev / Next) — always right-aligned, forward direction */
.academy-activity-nav {
	display: flex;
	justify-content: flex-end;
	align-items: stretch; /* both buttons fill the same height */
	gap: var(--academy-sp-md);
	margin-top: var(--academy-sp-2xl);
	padding: var(--academy-sp-md) 0 0;
}

.academy-activity-nav .academy-btn-primary,
.academy-activity-nav .academy-btn-secondary {
	/* Lock both buttons to identical box geometry so Previous (secondary
	   1px-border + transparent shadow) and Next (primary gradient with
	   `var(--academy-shadow)`) line up pixel-perfect — without this the
	   shadow on .btn-primary caused the visual baseline to drift. */
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	padding: 0 var(--academy-sp-lg);
	border-radius: var(--academy-radius-sm);
	font-weight: 600;
	line-height: 1; /* kill inherited line-height that varied between primary/secondary */
}

.academy-activity-nav .academy-btn-secondary:hover {
	background: var(--academy-hover-bg-strong);
	border-color: transparent;
	background-image: linear-gradient(var(--academy-hover-bg-strong), var(--academy-hover-bg-strong)), var(--academy-brand-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/* Muted note for placeholder / unavailable content */
.academy-muted-note {
	color: var(--academy-muted);
	font-style: italic;
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   P5 — Chat Companion empty state
   ------------------------------------------------------------------------- */

.academy-tutor-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--academy-sp-xl) var(--academy-sp-lg);
	height: 100%;
	min-height: 200px;
	opacity: 0.6;
}

.academy-tutor-empty-title {
	font-weight: 700;
	font-size: 0.95rem;
	margin: var(--academy-sp-sm) 0 var(--academy-sp-xs);
	color: var(--academy-text);
}

.academy-tutor-empty-desc {
	font-size: 0.82rem;
	color: var(--academy-muted);
	max-width: 240px;
	line-height: 1.5;
	margin: 0;
}

/* Hide empty state when chat has messages */
.academy-tutor-messages:not(:empty) > .academy-tutor-empty-state {
	/* Empty state is always present; hide when siblings exist */
}

.academy-tutor-empty-state:not(:only-child) {
	display: none;
}

/* ── Checkpoint milestone card ──────────────────────────────────────── */

.academy-checkpoint-card {
	border-left: 4px solid var(--academy-brand-1);
}

.academy-checkpoint-card .academy-card-kicker {
	margin-bottom: 4px;
}

.academy-checkpoint-card__desc {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--academy-muted);
	margin: 0 0 8px;
}

.academy-checkpoint-card__meta {
	font-size: 0.78rem;
	color: var(--academy-muted);
	opacity: 0.8;
	margin: 0 0 14px;
}

/* ── Compact lesson header ──────────────────────────────────────────── */

.academy-lesson-header-compact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.academy-lesson-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.academy-lesson-toprow .academy-card-kicker {
	margin: 0;
	font-size: 0.68rem;
}

.academy-lesson-title-compact {
	margin: 0;
	font-family: var(--academy-font-headings);
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	line-height: 1.2;
	font-weight: 700;
}

.academy-pill--sm {
	font-size: 0.65rem;
	padding: 2px 8px;
}

.academy-lesson-header-compact .academy-activity-progress {
	margin-top: 2px;
}

.academy-lesson-header-compact .academy-activity-progress__label {
	min-width: auto;
	font-size: 0.72rem;
}

/* Nav buttons sitting on page bg, outside the activity card */
.academy-lesson .academy-activity-nav {
	margin-top: var(--academy-sp-md);
	padding: var(--academy-sp-md) 0 0;
}

/* ── Accessibility ──────────────────────────────────────────────────── */

.academy-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.academy-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 9999;
	padding: 8px 16px;
	background: var(--academy-surface);
	color: var(--academy-text);
	border: 2px solid var(--academy-border);
	border-radius: var(--academy-radius-sm);
	font-size: 14px;
	text-decoration: none;
}

.academy-skip-link:focus {
	position: fixed;
	left: 16px;
	top: 16px;
}

/* ── Fieldset/legend reset (assessment + onboarding) ─────────────── */

.hcgpt-academy-app fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.hcgpt-academy-app fieldset legend {
	font-size: 1rem;
	font-weight: 600;
	color: var(--academy-text);
	padding: 0;
	margin-bottom: 12px;
}

.academy-question-fieldset legend {
	font-size: 1.05rem;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */

.academy-breadcrumb-container {
	min-height: 0;
}

.academy-breadcrumb-container--topbar {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.academy-breadcrumb-container--topbar:not(:empty)::before {
	content: "›";
	display: block;
	align-self: center;
	margin: 0 8px 0 4px;
	color: var(--academy-text, var(--hcgpt-color-text));
	opacity: 0.78;
	flex-shrink: 0;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-1px);
	padding-bottom: 4px;
}

/* On narrow screens the breadcrumb wraps to its own line under the title
   (see frontend.css), so the "›" separator after the title is dropped. */
@media (max-width: 767.98px) {
	.hcgpt-academy-topbar__left .academy-breadcrumb-container--topbar:not(:empty)::before {
		content: none;
		display: none;
	}
}

.academy-breadcrumb-container--topbar .academy-breadcrumb {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 0;
}

.academy-breadcrumb {
	min-width: 0;
	max-width: 100%;
	padding: 0 0 8px;
}

.academy-breadcrumb ol {
	list-style: none;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.82rem;
	color: var(--academy-muted);
}

.academy-breadcrumb li {
	display: flex;
	align-items: center;
	min-width: 0;
}

.academy-breadcrumb li:last-child {
	flex: 1 1 auto;
	overflow: hidden;
}

.academy-breadcrumb li + li::before {
	content: "›";
	margin: 0 6px;
	color: var(--academy-text, var(--hcgpt-color-text));
	opacity: 0.78;
	font-weight: 700;
}

.academy-breadcrumb button,
.hcgpt-academy-app .academy-breadcrumb button {
	all: unset;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--academy-muted-strong, var(--hcgpt-color-muted, #8a8a8a)) !important;
	font-size: inherit;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
	border-radius: 6px;
	padding: 2px 4px !important;
	margin: -2px -4px !important;
	box-shadow: none !important;
	outline: none !important;
}

.academy-breadcrumb button:hover,
.hcgpt-academy-app .academy-breadcrumb button:hover,
.academy-breadcrumb button:focus,
.hcgpt-academy-app .academy-breadcrumb button:focus {
	color: var(--academy-text) !important;
	text-decoration: none !important;
	background: var(--academy-brand-gradient) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--academy-brand-1, var(--hcgpt-color-accent, #6e3aff)) 48%, transparent) !important;
}

.academy-breadcrumb button:focus-visible {
	outline: 2px solid transparent !important;
	box-shadow: var(--academy-focus) !important;
	-webkit-text-fill-color: var(--academy-text) !important;
	background: none !important;
	background-clip: unset !important;
}

.academy-breadcrumb [aria-current="page"],
.hcgpt-academy-app .academy-breadcrumb [aria-current="page"] {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--academy-text) !important;
	font-weight: 500;
}

/* ── Activity dot indicators ────────────────────────────────────────── */

.academy-activity-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0 4px;
}

.academy-activity-dot {
	all: unset;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--academy-border);
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
	flex-shrink: 0;
}

.academy-activity-dot:hover {
	background: var(--academy-muted);
	transform: scale(1.2);
}

.academy-activity-dot:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--academy-focus);
}

.academy-activity-dot.is-current {
	background: var(--academy-text);
	transform: scale(1.3);
}

.academy-activity-dot.is-done,
.academy-activity-dot.is-visited {
	background: #34d399;
}

.academy-activity-dot.is-done.is-current,
.academy-activity-dot.is-visited.is-current {
	background: #34d399;
	box-shadow: 0 0 0 2px var(--academy-bg), 0 0 0 4px #34d399;
}

/* ── Icons ──────────────────────────────────────────────────────────── */

.academy-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--academy-muted);
}

.academy-icon svg {
	width: 100%;
	height: 100%;
}

.academy-icon--sidebar {
	width: 14px;
	height: 14px;
}

.academy-icon--activity {
	color: var(--academy-text);
}

.academy-icon--difficulty {
	width: 16px;
	height: 16px;
	color: var(--academy-muted);
}

.is-complete .academy-icon--activity,
.is-done .academy-icon--sidebar {
	color: #34d399;
}

.is-locked .academy-icon {
	opacity: 0.35;
}

.academy-card-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
}

.academy-course-row__title {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ── WOW graphic dark/light variants ───────────────────────────────── */

/* Default: show dark, hide light */
.hcgpt-wow-light-v { display: none; }
.hcgpt-wow-dark-v  { display: block; }

/* Light theme: hide dark, show light */
:where(.hcgpt-scope[data-hcgpt-theme="light"]) .hcgpt-wow-dark-v  { display: none; }
:where(.hcgpt-scope[data-hcgpt-theme="light"]) .hcgpt-wow-light-v { display: block; }

/* System: follow OS preference */
@media (prefers-color-scheme: light) {
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-wow-dark-v  { display: none; }
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-wow-light-v { display: block; }
}

/* ── Grafiche dark/light variants ──────────────────────────────────── */

/* Default: show dark, hide light */
.hcgpt-graphic-light-v { display: none; }
.hcgpt-graphic-dark-v  { display: block; }

/* Light theme: hide dark, show light */
:where(.hcgpt-scope[data-hcgpt-theme="light"]) .hcgpt-graphic-dark-v  { display: none; }
:where(.hcgpt-scope[data-hcgpt-theme="light"]) .hcgpt-graphic-light-v { display: block; }

/* System: follow OS preference */
@media (prefers-color-scheme: light) {
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-graphic-dark-v  { display: none; }
	:where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-graphic-light-v { display: block; }
}

/* Readability guards for generated Academy bundle mockups. These selectors stay
   scoped to graphic variants because bundle <style> blocks are injected later. */
.hcgpt-graphic-light-v .wow-header p,
.hcgpt-graphic-light-v .wow-footer,
.hcgpt-graphic-light-v .click-hint {
	color: #555555 !important;
}

.hcgpt-graphic-dark-v .wow-footer {
	color: #bdbdbd !important;
}

.hcgpt-graphic-light-v .tl-dot,
.hcgpt-graphic-light-v .tl-card-head .timing {
	color: #f0f0f0 !important;
}

.hcgpt-graphic-light-v .tl-icon,
.hcgpt-graphic-light-v .tl-brief {
	color: #555555 !important;
}

.hcgpt-graphic-light-v .tl-card.active,
.hcgpt-graphic-light-v .tl-card.active .tl-icon,
.hcgpt-graphic-light-v .tl-card.active .tl-card-head h4,
.hcgpt-graphic-light-v .tl-card.active .tl-brief {
	color: #f0f0f0 !important;
}

.hcgpt-graphic-dark-v #lfs .lfs-lvl:nth-child(n+8) .lfs-lvl-num {
	color: #1a1a1a !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.35) !important;
}

.hcgpt-graphic-dark-v .best-for {
	color: #f0f0f0 !important;
}

.hcgpt-graphic-dark-v .best-for strong {
	color: #ffffff !important;
}

.hcgpt-graphic-light-v .best-for {
	color: #333333 !important;
}

.hcgpt-graphic-light-v .best-for strong {
	color: #1a1a1a !important;
}

.hcgpt-graphic-light-v .tcard-double .expand-inner,
.hcgpt-graphic-light-v .tcard-double .expand-inner strong,
.hcgpt-graphic-light-v .tcard-double .method-tag {
	color: #f0f0f0 !important;
}

.hcgpt-graphic-light-v .tcard-multi .expand-inner,
.hcgpt-graphic-light-v .tcard-multi .expand-inner strong,
.hcgpt-graphic-light-v .tcard-multi .method-tag {
	color: #4a1028 !important;
}

.hcgpt-graphic-light-v .tcard-glaze .expand-inner,
.hcgpt-graphic-light-v .tcard-glaze .expand-inner strong,
.hcgpt-graphic-light-v .tcard-glaze .method-tag {
	color: #0f3d2e !important;
}

.hcgpt-graphic-dark-v .detail-box .steps,
.hcgpt-graphic-dark-v .detail-box .steps li,
.hcgpt-graphic-dark-v .detail-box .session-steps,
.hcgpt-graphic-dark-v .detail-box .session-steps li,
.hcgpt-graphic-dark-v .detail-box .dc-item {
	color: #444444 !important;
}

.hcgpt-graphic-dark-v .detail-box .steps strong,
.hcgpt-graphic-dark-v .detail-box .session-steps strong,
.hcgpt-graphic-dark-v .detail-box .dc-label {
	color: #1a1a1a !important;
}

.hcgpt-graphic-light-v .node-sub,
.hcgpt-graphic-light-v .node-week {
	color: #555555 !important;
}

.hcgpt-graphic-dark-v .session-node .node-circle,
.hcgpt-graphic-light-v .session-node .node-circle {
	color: #000000 !important;
}

.hcgpt-graphic-light-v .sc-dark {
	background-color: #1a1a1a !important;
}

.hcgpt-graphic-light-v .sc-green {
	background-color: #047857 !important;
}

/* Light-mode click-card grafiche: bundle mockups contain inline <style> blocks
   that paint detail panels dark while keeping dark text. Keep this override in
   the Academy owner CSS so it also repairs already-synced DB content. */
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box {
	--academy-graphic-detail-accent: #ef4444;
	background: #f4f4f4 !important;
	color: #262626 !important;
	border: 1px solid #dedede !important;
	border-left: 4px solid var(--academy-graphic-detail-accent) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box strong,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box li {
	color: #1f1f1f !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box .warn,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box .prepig,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box .hair-note,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box .example,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-expand .example {
	background: #fff2b8 !important;
	color: #704300 !important;
	border: 1px solid #f0d36d !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .detail-box .formula-tip {
	background: #dcfce7 !important;
	color: #14532d !important;
	border: 1px solid #86efac !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tone-pill {
	background: #e5e7eb !important;
	color: #374151 !important;
	border: 1px solid #d1d5db !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .wow-body:has(.vol-10.active) .detail-box {
	--academy-graphic-detail-accent: #16a34a;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .wow-body:has(.vol-20.active) .detail-box {
	--academy-graphic-detail-accent: #6b7280;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .wow-body:has(.vol-30.active) .detail-box {
	--academy-graphic-detail-accent: #ea580c;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .wow-body:has(.vol-40.active) .detail-box {
	--academy-graphic-detail-accent: #dc2626;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .part-level,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .question-node,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tn-blue {
	background: #eeeeee !important;
	color: #262626 !important;
	border-color: #d4d4d4 !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20 .vol-num,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20 .vol-lift,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20 .vol-label,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20 .vol-h2o2,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .vol-20 .vol-use {
	color: #444444 !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .question-node h4,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .question-node p,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tn-blue h4,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tn-blue p {
	color: #262626 !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active {
	background: #f4f4f4 !important;
	color: #262626 !important;
	border-color: #d4d4d4 !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active .step-content h4,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active .brief,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active .step-expand,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active .step-expand strong,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active .tl-card-head h4,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active .tl-brief,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active .tl-expand,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active .tl-expand strong {
	color: #262626 !important;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .step-card.active .step-expand,
.hcgpt-academy-app .hcgpt-graphic-light-v .hcgpt-graphic-interactive .tl-card.active .tl-expand {
	background: #f2f2f2 !important;
	border: 1px solid #dedede !important;
	border-left: 4px solid #ef4444 !important;
	border-radius: 8px !important;
	padding: 12px !important;
}

/* ── Light-v interactive grafiche: restore dark text ───────────────────
   Block 2 (dark-v interactive CSS) uses unscoped #id selectors that apply
   globally, bleeding light colors (#e8e8e8 / #fff) into light-v elements.
   Block 4 (light-v interactive CSS) was emptied in beta.75 to prevent the
   reverse bleed. These rules restore dark text for light-v using higher
   specificity (.hcgpt-graphic-light-v #id .class = 1,2,0 vs block2's
   #id .class = 1,1,0) + !important to beat cascade position disadvantage.
   Info-panel elements (.hcs-info etc.) are intentionally excluded — they
   have their own direct color rules in block 2 which win over inherited values. */

/* p01-m01-l01-a03 — #hcs Hair Anatomy */
.hcgpt-graphic-light-v #hcs,
.hcgpt-graphic-light-v #hcs .hcs-title h2,
.hcgpt-graphic-light-v #hcs .hcs-title p,
.hcgpt-graphic-light-v #hcs .hcs-ph-label,
.hcgpt-graphic-light-v #hcs .hcs-label,
.hcgpt-graphic-light-v #hcs .hcs-label.lit,
.hcgpt-graphic-light-v #hcs .hcs-hint,
.hcgpt-graphic-light-v #hcs .hcs-btn,
.hcgpt-graphic-light-v #hcs .hcs-mode-btn,
.hcgpt-graphic-light-v #hcs .hcs-mode-btn:hover,
.hcgpt-graphic-light-v #hcs .hcs-mode-btn.on { color: #1a1a1a !important; }

/* p02-m01-l01-a03 — #phs pH Scale */
.hcgpt-graphic-light-v #phs,
.hcgpt-graphic-light-v #phs .phs-title h2,
.hcgpt-graphic-light-v #phs .phs-title p,
.hcgpt-graphic-light-v #phs .phs-tick,
.hcgpt-graphic-light-v #phs .phs-zone-acid,
.hcgpt-graphic-light-v #phs .phs-orb,
.hcgpt-graphic-light-v #phs .phs-cuticle-label,
.hcgpt-graphic-light-v #phs .phs-cuticle-state,
.hcgpt-graphic-light-v #phs .phs-hint { color: #1a1a1a !important; }

/* p03-m01-l01-a03 — #ptt Patch Test Timer */
.hcgpt-graphic-light-v #ptt,
.hcgpt-graphic-light-v #ptt .ptt-title h2,
.hcgpt-graphic-light-v #ptt .ptt-title p,
.hcgpt-graphic-light-v #ptt .ptt-dot.alert,
.hcgpt-graphic-light-v #ptt .ptt-dot-label,
.hcgpt-graphic-light-v #ptt .ptt-dot-label.lit,
.hcgpt-graphic-light-v #ptt .ptt-time,
.hcgpt-graphic-light-v #ptt .ptt-time-label,
.hcgpt-graphic-light-v #ptt .ptt-result.fail,
.hcgpt-graphic-light-v #ptt .ptt-btn { color: #1a1a1a !important; }

/* p04-m02-l01-a03 — #sua Skin Undertone Analyser */
.hcgpt-graphic-light-v #sua,
.hcgpt-graphic-light-v #sua .sua-title h2,
.hcgpt-graphic-light-v #sua .sua-title p,
.hcgpt-graphic-light-v #sua .sua-tone-label,
.hcgpt-graphic-light-v #sua .sua-shade,
.hcgpt-graphic-light-v #sua .sua-details .sua-trait,
.hcgpt-graphic-light-v #sua .sua-details p,
.hcgpt-graphic-light-v #sua .sua-hint { color: #1a1a1a !important; }

/* p06-m03-l01-a03 — #fmb Formula Builder */
.hcgpt-graphic-light-v #fmb,
.hcgpt-graphic-light-v #fmb .fmb-title h2,
.hcgpt-graphic-light-v #fmb .fmb-title p,
.hcgpt-graphic-light-v #fmb .fmb-step-dot,
.hcgpt-graphic-light-v #fmb .fmb-step-dot.active,
.hcgpt-graphic-light-v #fmb .fmb-content h3,
.hcgpt-graphic-light-v #fmb .fmb-content .fmb-sub,
.hcgpt-graphic-light-v #fmb .fmb-slider-label,
.hcgpt-graphic-light-v #fmb .fmb-result-card .fmb-rc-label,
.hcgpt-graphic-light-v #fmb .fmb-result-card .fmb-rc-note,
.hcgpt-graphic-light-v #fmb .fmb-btn-next,
.hcgpt-graphic-light-v #fmb .fmb-pigment-chip,
.hcgpt-graphic-light-v #fmb .fmb-formula-line,
.hcgpt-graphic-light-v #fmb .fmb-formula-note { color: #1a1a1a !important; }

/* p07-m01-l01-a03 — #lfs Lightening Stages */
.hcgpt-graphic-light-v #lfs,
.hcgpt-graphic-light-v #lfs .lfs-title h2,
.hcgpt-graphic-light-v #lfs .lfs-title p,
.hcgpt-graphic-light-v #lfs .lfs-strand-label,
.hcgpt-graphic-light-v #lfs .lfs-lvl.active,
.hcgpt-graphic-light-v #lfs .lfs-lvl-num,
.hcgpt-graphic-light-v #lfs .lfs-hint { color: #1a1a1a !important; }

/* p08-m01-l01-a03 — #hlm Highlight Map */
.hcgpt-graphic-light-v #hlm,
.hcgpt-graphic-light-v #hlm .hlm-title h2,
.hcgpt-graphic-light-v #hlm .hlm-title p,
.hcgpt-graphic-light-v #hlm .hlm-mode,
.hcgpt-graphic-light-v #hlm .hlm-mode.active,
.hcgpt-graphic-light-v #hlm .hlm-zone:hover,
.hcgpt-graphic-light-v #hlm .hlm-zone.active,
.hcgpt-graphic-light-v #hlm .hlm-zone-label,
.hcgpt-graphic-light-v #hlm .hlm-hint { color: #1a1a1a !important; }

/* p09-m01-l01-a02 — #tnm Toner Map */
.hcgpt-graphic-light-v #tnm,
.hcgpt-graphic-light-v #tnm .tnm-title h2,
.hcgpt-graphic-light-v #tnm .tnm-title p,
.hcgpt-graphic-light-v #tnm .tnm-orb-label,
.hcgpt-graphic-light-v #tnm .tnm-result p,
.hcgpt-graphic-light-v #tnm .tnm-hint { color: #1a1a1a !important; }

/* p10-m02-l01-a03 — #grs Grey Coverage */
.hcgpt-graphic-light-v #grs,
.hcgpt-graphic-light-v #grs .grs-title h2,
.hcgpt-graphic-light-v #grs .grs-title p,
.hcgpt-graphic-light-v #grs .grs-slider-row span,
.hcgpt-graphic-light-v #grs .grs-f-label,
.hcgpt-graphic-light-v #grs .grs-alert-pre { color: #1a1a1a !important; }

/* p11-m03-l01-a03 — #cse Colour Selector */
.hcgpt-graphic-light-v #cse,
.hcgpt-graphic-light-v #cse .cse-title h2,
.hcgpt-graphic-light-v #cse .cse-title p,
.hcgpt-graphic-light-v #cse .cse-orb.active,
.hcgpt-graphic-light-v #cse .cse-orb-name,
.hcgpt-graphic-light-v #cse .cse-ver-sub,
.hcgpt-graphic-light-v #cse .cse-lift-label,
.hcgpt-graphic-light-v #cse .cse-lift-text,
.hcgpt-graphic-light-v #cse .cse-hint { color: #1a1a1a !important; }

/* p12-m02-l01-a03 — #esm Exposure Stages Map */
.hcgpt-graphic-light-v #esm,
.hcgpt-graphic-light-v #esm .esm-title h2,
.hcgpt-graphic-light-v #esm .esm-title p,
.hcgpt-graphic-light-v #esm .esm-row-label,
.hcgpt-graphic-light-v #esm .esm-l2,
.hcgpt-graphic-light-v #esm .esm-l2.active,
.hcgpt-graphic-light-v #esm .esm-l2 .esm-lv-num,
.hcgpt-graphic-light-v #esm .esm-l2 .esm-lv-name,
.hcgpt-graphic-light-v #esm .esm-l2 .esm-lv-tag,
.hcgpt-graphic-light-v #esm .esm-l2 .esm-row-value,
.hcgpt-graphic-light-v #esm .esm-l3,
.hcgpt-graphic-light-v #esm .esm-l3.active,
.hcgpt-graphic-light-v #esm .esm-l3 .esm-lv-num,
.hcgpt-graphic-light-v #esm .esm-l3 .esm-lv-name,
.hcgpt-graphic-light-v #esm .esm-l3 .esm-lv-tag,
.hcgpt-graphic-light-v #esm .esm-l3 .esm-row-value,
.hcgpt-graphic-light-v #esm .esm-hint { color: #1a1a1a !important; }

/* p13-m01-l01-a03 — #pmb Porosity Map Builder */
.hcgpt-graphic-light-v #pmb,
.hcgpt-graphic-light-v #pmb .pmb-title h2,
.hcgpt-graphic-light-v #pmb .pmb-title p,
.hcgpt-graphic-light-v #pmb .pmb-label-l,
.hcgpt-graphic-light-v #pmb .pmb-slider-row span,
.hcgpt-graphic-light-v #pmb .pmb-status-sub { color: #1a1a1a !important; }

/* ── Editorial Spacing (activity content flow) ────────────────────── */
/* Headings, paragraphs, lists, and graphic blocks inside lesson
   activities get "editorial" vertical rhythm so content breathes. */

.academy-activity-card h2 {
	margin: var(--academy-sp-2xl, 48px) 0 var(--academy-sp-md, 16px);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--academy-text);
}

.academy-activity-card h3 {
	margin: var(--academy-sp-xl, 32px) 0 var(--academy-sp-sm, 12px);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--academy-text);
}

/* First heading at top of card: no extra top margin */
.academy-activity-card > h2:first-child,
.academy-activity-card > h3:first-child {
	margin-top: 0;
}

.academy-activity-card p {
	margin: 0 0 var(--academy-sp-md, 16px);
	line-height: 1.65;
}

.academy-activity-card ol,
.academy-activity-card ul {
	margin: 0 0 var(--academy-sp-md, 16px);
	padding-left: 1.5em;
	line-height: 1.65;
}

.academy-activity-card li {
	margin-bottom: var(--academy-sp-xs, 8px);
}

.academy-activity-card li:last-child {
	margin-bottom: 0;
}

/* Graphic blocks: generous breathing room above and below */
.academy-activity-card .hcgpt-graphic-dark-v,
.academy-activity-card .hcgpt-graphic-light-v {
	margin: var(--academy-sp-xl, 32px) 0;
}

/* First/last graphic in card: reduce outer margin */
.academy-activity-card > .hcgpt-graphic-dark-v:first-child,
.academy-activity-card > .hcgpt-graphic-light-v:first-child {
	margin-top: 0;
}

.academy-activity-card > .hcgpt-graphic-dark-v:last-child,
.academy-activity-card > .hcgpt-graphic-light-v:last-child {
	margin-bottom: 0;
}

/* Emphasis / blockquote callouts */
.academy-activity-card blockquote {
	margin: var(--academy-sp-lg, 24px) 0;
	padding: var(--academy-sp-md, 16px) var(--academy-sp-lg, 24px);
	border-left: 3px solid var(--academy-accent, #f59e0b);
	background: rgba(255,255,255,0.02);
	border-radius: 0 8px 8px 0;
}

/* ── Table Illustration SVGs (Options C + B) ──────────────────────── */

/* Option C Magazine: hair shaft / thematic illustration in left panel */
.academy-activity-card .mag-hair-shaft {
	width: 100px;
	height: 140px;
	display: block;
	margin: 12px auto 0;
}

@media (max-width: 640px) {
	.academy-activity-card .mag-hair-shaft {
		width: 140px;
		height: 196px;
		margin: 8px auto 0;
	}
}

@media (min-width: 641px) and (max-width: 800px) {
	.academy-activity-card .mag-hair-shaft {
		width: 72px;
		height: 100px;
	}
}

/* Option B Timeline: illustration strip above detail-grid */
.academy-activity-card .shaft-illustration {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.academy-activity-card .shaft-svg {
	flex-shrink: 0;
	display: block;
	color: var(--node-color, var(--academy-muted, #666));
}

/* Timeline bundle SVGs store geometry with stroke-width only; the owner CSS
   must supply the visible stroke so synced DB content keeps rendering. */
.academy-activity-card .timeline-row .shaft-svg :is(rect, circle, path, line, ellipse, polyline, polygon) {
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.academy-activity-card .timeline-row .shaft-illustration {
	min-height: 56px;
}

.academy-activity-card .shaft-caption {
	font-size: 11px;
	color: var(--academy-muted, #666);
}

.hcgpt-academy-app .hcgpt-graphic-dark-v .timeline-row .shaft-caption {
	color: var(--node-color, #bdbdbd);
	opacity: 0.78;
}

.hcgpt-academy-app .hcgpt-graphic-light-v .timeline-row .shaft-caption {
	color: var(--node-color, #666);
	opacity: 0.82;
}

/* ── academy-graphic-intro ─────────────────────────────────────────── */

.academy-graphic-intro {
	display: block;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--hcgpt-text-muted, #a0a0a0);
	margin-bottom: 1rem;
	padding: 0;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hcgpt-academy-app,
	.hcgpt-academy-app * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Sidebar Academy section labels (visual hierarchy) ───────────────── */

.hcgpt-sidebar-academy-section-label {
	margin: 14px 12px 6px;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--academy-muted, #9aa1ad);
	line-height: 1.2;
}

.hcgpt-sidebar-academy-section-label--course {
	margin-top: 18px;
	border-top: 1px solid var(--academy-border, rgba(255, 255, 255, 0.08));
	padding-top: 14px;
}

.hcgpt-sidebar-academy-outline-title {
	margin: 0 12px 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--academy-text, #f0f0f0);
	line-height: 1.3;
}

/* ── Activity X of Y counter (explicit label above activity dots) ────── */

.academy-activity-dots__counter {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--academy-muted, #9aa1ad);
	margin-right: 8px;
	white-space: nowrap;
}

/* ── Empty state CTA buttons (sit below the empty-state copy) ────────── */

.academy-empty-state .academy-btn-primary {
	margin-top: 16px;
}

/* ── Top-alignment guard (kill the empty gap above content) ──────────── */
/* Force every Academy screen + their first containers to top-align.
   The grid container default is `align-content: stretch`, which combined
   with `height: 100%` on the content panel was producing a large empty
   band above the first card. These overrides keep cards anchored to the
   top regardless of how short the content is. */
.hcgpt-academy-app .academy-screen,
.hcgpt-academy-app .academy-screen--active {
	align-content: start !important;
	align-items: start !important;
}

.hcgpt-academy-app .academy-content-panel > * {
	align-self: start;
}

.hcgpt-academy-app .academy-dashboard,
.hcgpt-academy-app .academy-gamification--progress,
.hcgpt-academy-app .academy-welcome,
.hcgpt-academy-app .academy-onboarding,
.hcgpt-academy-app .academy-lesson,
.hcgpt-academy-app .academy-quiz {
	margin-top: 0 !important;
}

/* Top edge of the very first card under the topbar should hug the panel
   padding-top, not get pushed down by accidental vertical centering. */
.hcgpt-academy-app .academy-screen--active > :first-child,
.hcgpt-academy-app .academy-dashboard > :first-child,
.hcgpt-academy-app .academy-welcome > :first-child,
.hcgpt-academy-app .academy-onboarding > :first-child,
.hcgpt-academy-app .academy-lesson > :first-child {
	margin-top: 0 !important;
}

/* =================================================================
   ACADEMY PROGRAMS — EDITORIAL DASHBOARD (proposal #5: 1 + 4)
   ─────────────────────────────────────────────────────────────────
   Layout in 3 strati: KPI strip + Continue-learning hero (dashboard)
   + per-program editorial list (numbered TOC).
   Triggered automatically by renderPrograms() — no flag needed.
   ================================================================= */

/* The programs grid was using `display: grid` with `auto-fit minmax(280px, 1fr)`,
   which would have crushed every Editorial section into a 280px column —
   text would wrap character-by-character. Force a single-column flex layout
   so KPI strip, hero, and per-program sections each occupy the full width. */
.academy-screen[data-screen="programs"] .academy-programs-grid {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-lg);
	grid-template-columns: none;
}

/* The level filter chip bar must stay visible (not pushed sideways);
   give it a sensible top margin and full width inside the flex column. */
.academy-screen[data-screen="programs"] .academy-level-filter {
	width: 100%;
	margin: 0;
}

/* Empty-state titles: kill any external text-transform: capitalize that
   sneaks in from the host shell (e.g. .hcgpt-card__title rules, theme css)
   and produces "Pick A Course To Start" instead of "Pick a course to start". */
.hcgpt-academy-app .academy-empty-state h3,
.hcgpt-academy-app .academy-empty-state p {
	text-transform: none;
}

/* ── KPI strip (top of the page) ─────────────────────────────────── */
.academy-editorial-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}
.academy-editorial-kpi {
	padding: 14px 18px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: var(--academy-surface);
}
.academy-editorial-kpi__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--academy-muted);
}
.academy-editorial-kpi__value {
	display: block;
	font-family: "Neuton", Georgia, serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	margin-top: 6px;
	color: var(--academy-text);
}
.academy-editorial-kpi.is-success .academy-editorial-kpi__value { color: #34d399; }
.academy-editorial-kpi.is-progress .academy-editorial-kpi__value { color: var(--academy-brand-2); }

@media (max-width: 720px) {
	.academy-editorial-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Continue learning hero ──────────────────────────────────────── */
.academy-editorial-hero {
	position: relative;
	margin: 0 0 28px;
	padding: 24px 26px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 36%, transparent);
	border-radius: 18px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--academy-brand-2) 10%, transparent), transparent 65%),
		var(--academy-surface);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--academy-brand-1) 18%, transparent);
}
.academy-editorial-hero__kicker {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--academy-brand-2);
	margin: 0 0 6px;
}
.academy-editorial-hero__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 6px;
	color: var(--academy-text);
}
.academy-editorial-hero__meta {
	color: var(--academy-muted);
	font-size: 13px;
	margin: 0;
}
.academy-editorial-hero__bar {
	margin: 14px 0 8px;
	height: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	overflow: hidden;
}
.academy-editorial-hero__bar > span {
	display: block;
	height: 100%;
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}
.academy-editorial-hero__cta {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 0;
	background: var(--academy-brand-gradient);
	color: white;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}
.academy-editorial-hero__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--academy-brand-2) 40%, transparent);
}

/* ── Per-program editorial section ───────────────────────────────── */
.academy-editorial-program {
	margin: 24px 0 0;
}
.academy-editorial-program__head {
	padding: 18px 0 18px;
	border-top: 2px solid var(--academy-text);
	border-bottom: 1px solid var(--academy-border);
}
.academy-editorial-program__kicker {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--academy-muted);
	margin: 0 0 6px;
}
.academy-editorial-program__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 10px;
	color: var(--academy-text);
}
.academy-editorial-program__intro {
	font-family: "Neuton", Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.45;
	color: var(--academy-muted);
	margin: 0;
	max-width: 60ch;
}

/* ── Numbered course list (TOC look) ─────────────────────────────── */
.academy-editorial-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.academy-editorial-row {
	display: grid;
	grid-template-columns: 56px 1fr 200px 28px;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 20px 8px;
	border: 0;
	border-bottom: 1px solid var(--academy-border);
	border-radius: 0;
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, padding-left 0.18s;
}
.academy-editorial-row:hover {
	background: rgba(255, 255, 255, 0.02);
	padding-left: 16px;
}
.academy-editorial-row__num {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 14px;
	font-weight: 700;
	color: color-mix(in srgb, var(--academy-muted) 60%, transparent);
}
.academy-editorial-row__main { min-width: 0; }
.academy-editorial-row__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 4px;
	color: var(--academy-text);
}
.academy-editorial-row__meta {
	margin: 0;
	font-size: 12px;
	color: var(--academy-muted);
}
.academy-editorial-row__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.academy-editorial-row__progress-label {
	display: flex;
	justify-content: space-between;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--academy-muted);
}
.academy-editorial-row__bar {
	height: 2px;
	background: var(--academy-border);
	border-radius: 2px;
	overflow: hidden;
}
.academy-editorial-row__bar > span {
	display: block;
	height: 100%;
	background: var(--academy-brand-gradient);
}
.academy-editorial-row__trail {
	color: color-mix(in srgb, var(--academy-muted) 60%, transparent);
	font-size: 18px;
	text-align: right;
}
.academy-editorial-row.is-done .academy-editorial-row__num,
.academy-editorial-row.is-done .academy-editorial-row__trail { color: #34d399; }
.academy-editorial-row.is-done .academy-editorial-row__bar > span { background: #34d399; }
.academy-editorial-row.is-current {
	border-left: 3px solid var(--academy-brand-2);
	padding-left: 5px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--academy-brand-2) 6%, transparent), transparent 70%);
}
.academy-editorial-row.is-current .academy-editorial-row__num,
.academy-editorial-row.is-current .academy-editorial-row__trail { color: var(--academy-brand-2); }
.academy-editorial-row.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
}
.academy-editorial-row.is-locked:hover { background: transparent; padding-left: 8px; }

@media (max-width: 720px) {
	.academy-editorial-row {
		grid-template-columns: 40px 1fr 24px;
	}
	.academy-editorial-row__progress { display: none; }
	.academy-editorial-program__title { font-size: 24px; }
	.academy-editorial-hero__title { font-size: 22px; }
}

/* ── Program Hero + Stack (proposal #2) ─────────────────────────── */
.academy-program-stack {
	display: grid;
	gap: var(--academy-sp-lg);
}

.academy-program-stack + .academy-program-stack {
	margin-top: var(--academy-sp-md);
}

.academy-program-stack-hero {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) minmax(140px, 220px);
	align-items: center;
	gap: 24px;
	padding: 28px;
	border: 1px solid var(--academy-border);
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--academy-brand-1) 20%, transparent), transparent 55%),
		radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--academy-brand-3) 14%, transparent), transparent 55%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-program-stack-hero__avatar {
	width: 88px;
	height: 88px;
	display: grid;
	place-items: center;
	border-radius: 22px;
	background: var(--academy-brand-gradient);
	color: #fff;
	font-family: "Neuton", Georgia, serif;
	font-size: 32px;
	font-weight: 800;
	box-shadow: 0 14px 32px color-mix(in srgb, var(--academy-brand-2) 35%, transparent);
}

.academy-program-stack-hero__body {
	min-width: 0;
}

.academy-program-stack-hero__kicker {
	margin: 0 0 4px;
	color: var(--academy-brand-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.academy-program-stack-hero__title {
	margin: 0 0 6px;
	font-family: "Neuton", Georgia, serif;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--academy-text);
}

.academy-program-stack-hero__intro {
	max-width: 54ch;
	margin: 0;
	color: var(--academy-muted);
	font-size: 14px;
	line-height: 1.5;
}

.academy-program-stack-hero__stat {
	text-align: right;
}

.academy-program-stack-hero__stat-value {
	font-family: "Neuton", Georgia, serif;
	font-size: clamp(34px, 5vw, 44px);
	font-weight: 800;
	line-height: 1;
	color: var(--academy-text);
}

.academy-program-stack-hero__stat-label {
	margin-top: 5px;
	color: var(--academy-muted);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.academy-program-stack-hero__bar {
	grid-column: 1 / -1;
	height: 6px;
	margin-top: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-text) 8%, transparent);
}

.academy-program-stack-hero__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--academy-brand-gradient);
}

.academy-program-stack-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.academy-program-stack-item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) minmax(150px, 180px) 28px;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 18px 22px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	color: var(--academy-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.academy-program-stack-item:hover:not(:disabled) {
	border-color: var(--academy-border-strong, color-mix(in srgb, var(--academy-text) 28%, var(--academy-border)));
	transform: translateY(-2px);
	box-shadow: 0 12px 28px color-mix(in srgb, #000 22%, transparent);
}

.academy-program-stack-item__num {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--academy-text) 7%, transparent);
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
	font-weight: 700;
}

.academy-program-stack-item__main {
	min-width: 0;
}

.academy-program-stack-item__title {
	margin: 0 0 3px;
	font-family: "Neuton", Georgia, serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--academy-text);
}

.academy-program-stack-item__meta {
	margin: 0;
	font-size: 12px;
	color: var(--academy-muted);
}

.academy-program-stack-item__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.academy-program-stack-item__progress-bar {
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-text) 8%, transparent);
}

.academy-program-stack-item__progress-bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--academy-brand-gradient);
}

.academy-program-stack-item__progress-label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--academy-muted);
}

.academy-program-stack-item__progress-label strong {
	color: var(--academy-text);
	font-weight: 700;
}

.academy-program-stack-item__trail {
	color: var(--academy-muted);
	font-size: 18px;
	text-align: center;
}

.academy-program-stack-item.is-current {
	border-color: color-mix(in srgb, var(--academy-brand-2) 45%, var(--academy-border));
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--academy-brand-2) 7%, transparent), transparent 70%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
}

.academy-program-stack-item.is-current .academy-program-stack-item__num {
	background: var(--academy-brand-gradient);
	color: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--academy-brand-2) 18%, transparent);
}

.academy-program-stack-item.is-current .academy-program-stack-item__trail {
	color: var(--academy-brand-2);
}

.academy-program-stack-item.is-done .academy-program-stack-item__num {
	background: color-mix(in srgb, var(--academy-success, #22c55e) 18%, transparent);
	color: var(--academy-success, #22c55e);
}

.academy-program-stack-item.is-done .academy-program-stack-item__trail {
	color: var(--academy-success, #22c55e);
	font-size: 22px;
}

.academy-program-stack-item.is-done .academy-program-stack-item__progress-bar > span {
	background: var(--academy-success, #22c55e);
}

.academy-program-stack-item.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
}

.academy-program-stack-item.is-locked:hover {
	box-shadow: none;
	transform: none;
}

@media (max-width: 720px) {
	.academy-program-stack-hero {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 16px;
		padding: 18px;
	}

	.academy-program-stack-hero__avatar {
		width: 64px;
		height: 64px;
		border-radius: 18px;
		font-size: 26px;
	}

	.academy-program-stack-hero__stat {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
	}

	.academy-program-stack-hero__bar {
		margin-top: 0;
	}

	.academy-program-stack-item {
		grid-template-columns: 40px minmax(0, 1fr) 24px;
		gap: 12px;
		padding: 15px 14px;
	}

	.academy-program-stack-item__num {
		width: 36px;
		height: 36px;
	}

	.academy-program-stack-item__progress {
		grid-column: 2 / -1;
	}

	.academy-program-stack-item__title {
		font-size: 18px;
	}
}

/* =================================================================
   ACADEMY COURSE DETAIL — EDITORIAL
   ─────────────────────────────────────────────────────────────────
   Aligns the course detail page (#academy/course/<key>) with the
   Editorial Dashboard scelta per la pagina Programs:
   serif XL hero, monospace kicker, real progress bar, numbered
   modules (01.. NN) and lessons (1.1, 1.2, ...) with done/current
   states. No more uppercase TRADITIONAL HIGHLIGHTS / BALAYAGE rows.
   ================================================================= */

/* Force the course detail screen to use a single-column flex layout
   too — same fix as the Programs page: the parent grid was crushing
   sections into 280-300px columns. */
.academy-screen[data-screen="courses"] .academy-outline-grid {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-lg);
	grid-template-columns: none;
	/* Extra breathing room between the course-hero card (ends with the
	   gradient progress bar) and the first module's white border-top
	   separator line. Without this margin, the two visually collide. */
	margin-top: 24px;
}

/* ── Hero (no card — pure typography on the page background) ─────── */
.academy-editorial-course-hero {
	position: relative;
	margin: 0 0 24px;
	padding: 4px 0 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.academy-editorial-course-hero.is-progress,
.academy-editorial-course-hero.is-done {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* ── Assessments page: drop the outer header card, keep individual
   assessment cards below it ──────────────────────────────────────── */
.hcgpt-academy-app .academy-assessment-header {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* ── Course detail empty state cleanup ────────────────────────────
   When the user lands on #academy/courses without an active course,
   the rendered DOM still contains an empty `.academy-course-hero`
   and `.academy-outline-grid` that inherit the legacy "card"
   background from the shared rule (line 1485). The result was a
   ghost grey rectangle floating above the empty-state CTA card.
   - Hide those nodes when they have no children.
   - Keep the empty state top-aligned (no more huge vertical gap).
*/
.hcgpt-academy-app .academy-course-hero:empty,
.hcgpt-academy-app .academy-outline-grid:empty {
	display: none !important;
}

.hcgpt-academy-app .academy-screen[data-screen="courses"] .academy-empty-state,
.hcgpt-academy-app .academy-screen[data-screen="learn"] .academy-empty-state,
.hcgpt-academy-app .academy-screen[data-screen="assessments"] .academy-empty-state {
	justify-content: flex-start;
	margin-top: 0;
}

/* ── Assessments screen wrapper: drop the outer card background.
   `.academy-quiz` carries `background + box-shadow` from the legacy
   quiz-card design (line 1865). Inside the assessments empty state,
   that produced a "double card" effect (outer wrapper grey + inner
   empty-state grey). Scoped to the --assessment modifier so the
   real quiz screen keeps its original card. */
.hcgpt-academy-app .academy-quiz--assessment {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* ── Course-hero card: generous vertical padding ─────────────────────
   The visible grey card that wraps the editorial hero (kicker / title
   / chips / progress bar) was using only `var(--academy-sp-lg)` (24px)
   all around. Title felt squished against the top, progress bar
   hugged the bottom. Bump vertical padding to 36px so the card
   breathes; keep the horizontal padding at 24px. */
.hcgpt-academy-app .academy-screen[data-screen="courses"] .academy-course-hero {
	padding-block: 36px;
}
.academy-editorial-course-hero__kicker {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--academy-muted);
	margin: 0 0 6px;
}
.academy-editorial-course-hero.is-progress .academy-editorial-course-hero__kicker { color: var(--academy-brand-2); }
.academy-editorial-course-hero.is-done .academy-editorial-course-hero__kicker { color: #34d399; }

.academy-editorial-course-hero__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 8px;
	color: var(--academy-text);
	text-transform: none;
}

.academy-editorial-course-hero__intro {
	font-family: "Neuton", Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.45;
	color: var(--academy-muted);
	margin: 0 0 14px;
	max-width: 60ch;
}

.academy-editorial-course-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.academy-editorial-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--academy-border);
	color: var(--academy-text);
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.academy-editorial-pill.is-success {
	background: rgba(52, 211, 153, 0.12);
	border-color: rgba(52, 211, 153, 0.4);
	color: #34d399;
}

.academy-editorial-course-hero__bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
	margin-bottom: 4px;
}
.academy-editorial-course-hero__bar > span {
	display: block;
	height: 100%;
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}
.academy-editorial-course-hero.is-done .academy-editorial-course-hero__bar > span { background: #34d399; }

.academy-editorial-course-hero__exam-btn {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--academy-border);
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.academy-editorial-course-hero__exam-btn:hover:not(:disabled) {
	border-color: var(--academy-brand-2);
	color: var(--academy-brand-2);
}
.academy-editorial-course-hero__exam-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Module section (numbered 01.. NN) ───────────────────────────── */
.academy-editorial-course-module {
	padding: 16px 0;
	border-top: 2px solid var(--academy-text);
	border-bottom: 1px solid var(--academy-border);
	background: transparent;
	box-shadow: none;
}
.academy-editorial-course-module:nth-child(n+2) { border-top: 1px solid var(--academy-border); }
.academy-editorial-course-module.is-locked { opacity: 0.5; }

.academy-editorial-course-module__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}
.academy-editorial-course-module__num {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--academy-muted);
	flex: 0 0 auto;
}
.academy-editorial-course-module__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
	color: var(--academy-text);
	text-transform: none;
	letter-spacing: 0;
}
.academy-editorial-course-module__intro {
	font-family: "Neuton", Georgia, serif;
	font-style: italic;
	font-size: 15px;
	line-height: 1.45;
	color: var(--academy-muted);
	margin: 6px 0 12px;
	max-width: 60ch;
}

/* ── Lessons list (1.1, 1.2, ...) ────────────────────────────────── */
.academy-editorial-course-lessons {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.academy-editorial-course-lesson {
	display: grid;
	grid-template-columns: 56px 1fr 28px;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 8px;
	border: 0;
	border-bottom: 1px solid var(--academy-border);
	border-radius: 0;
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, padding-left 0.18s;
}
.academy-editorial-course-lesson:last-child { border-bottom: 0; }
.academy-editorial-course-lesson:hover {
	background: rgba(255, 255, 255, 0.02);
	padding-left: 14px;
}
.academy-editorial-course-lesson__num {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	color: color-mix(in srgb, var(--academy-muted) 70%, transparent);
}
.academy-editorial-course-lesson__main { min-width: 0; }
.academy-editorial-course-lesson__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 2px;
	color: var(--academy-text);
	text-transform: none;
}
.academy-editorial-course-lesson__meta {
	font-size: 11px;
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.04em;
}
.academy-editorial-course-lesson__trail {
	color: color-mix(in srgb, var(--academy-muted) 70%, transparent);
	font-size: 18px;
	text-align: right;
}
.academy-editorial-course-lesson.is-done .academy-editorial-course-lesson__num,
.academy-editorial-course-lesson.is-done .academy-editorial-course-lesson__trail { color: #34d399; }
.academy-editorial-course-lesson.is-current {
	border-left: 3px solid var(--academy-brand-2);
	padding-left: 5px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--academy-brand-2) 6%, transparent), transparent 70%);
}
.academy-editorial-course-lesson.is-current .academy-editorial-course-lesson__num,
.academy-editorial-course-lesson.is-current .academy-editorial-course-lesson__trail { color: var(--academy-brand-2); }
.academy-editorial-course-lesson.is-locked { opacity: 0.45; cursor: not-allowed; }
.academy-editorial-course-lesson.is-locked:hover { background: transparent; padding-left: 8px; }

/* ── Module exam button ──────────────────────────────────────────── */
.academy-editorial-course-module__exam {
	margin: 12px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--academy-border);
	border-radius: 999px;
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.academy-editorial-course-module__exam:hover:not(:disabled) {
	border-color: var(--academy-brand-2);
	color: var(--academy-brand-2);
}
.academy-editorial-course-module__exam:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 720px) {
	.academy-editorial-course-hero__title { font-size: 24px; }
	.academy-editorial-course-module__title { font-size: 18px; }
	.academy-editorial-course-lesson { grid-template-columns: 44px 1fr 24px; }
}

/* ── Course Hero + Stack (proposal #2 completion) ───────────────── */
.hcgpt-academy-app .academy-screen[data-screen="courses"] .academy-course-hero {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.academy-course-stack-hero {
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) minmax(120px, 170px);
	align-items: center;
	gap: 22px;
	padding: 24px;
	border: 1px solid var(--academy-border);
	border-radius: 18px;
	background:
		radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--academy-brand-1) 18%, transparent), transparent 56%),
		radial-gradient(86% 62% at 100% 100%, color-mix(in srgb, var(--academy-brand-3) 12%, transparent), transparent 58%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-course-stack-hero__avatar {
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 20px;
	background: var(--academy-brand-gradient);
	color: #fff;
	font-family: "Neuton", Georgia, serif;
	font-size: 30px;
	font-weight: 800;
	box-shadow: 0 14px 32px color-mix(in srgb, var(--academy-brand-2) 28%, transparent);
}

.academy-course-stack-hero__body {
	min-width: 0;
}

.academy-course-stack-hero__kicker,
.academy-assessment-stack-hero__kicker,
.academy-assessment-stack-card__kicker {
	margin: 0 0 5px;
	color: var(--academy-brand-2);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.academy-course-stack-hero__title,
.academy-assessment-stack-hero__title {
	margin: 0 0 6px;
	font-family: "Neuton", Georgia, serif;
	font-size: clamp(25px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.08;
	color: var(--academy-text);
}

.academy-course-stack-hero__intro,
.academy-assessment-stack-hero__intro {
	max-width: 58ch;
	margin: 0;
	color: var(--academy-muted);
	font-size: 14px;
	line-height: 1.5;
}

.academy-course-stack-hero__stat,
.academy-assessment-stack-hero__stat {
	text-align: right;
}

.academy-course-stack-hero__stat-value,
.academy-assessment-stack-hero__stat strong {
	display: block;
	font-family: "Neuton", Georgia, serif;
	font-size: clamp(32px, 4vw, 42px);
	font-weight: 800;
	line-height: 1;
	color: var(--academy-text);
}

.academy-course-stack-hero__stat-label,
.academy-assessment-stack-hero__stat span {
	display: block;
	margin-top: 5px;
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.academy-course-stack-hero__meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.academy-course-stack-pill {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 12px;
	border: 1px solid var(--academy-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-surface) 88%, transparent);
	color: var(--academy-text);
	font-size: 12px;
	font-weight: 700;
}

.academy-course-stack-pill.is-success {
	border-color: color-mix(in srgb, var(--academy-success, #22c55e) 44%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-success, #22c55e) 13%, transparent);
	color: var(--academy-success, #22c55e);
}

.academy-course-stack-hero__bar {
	grid-column: 1 / -1;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-text) 8%, transparent);
}

.academy-course-stack-hero__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--academy-brand-gradient);
}

.academy-course-stack-hero.is-done .academy-course-stack-hero__bar > span {
	background: var(--academy-success, #22c55e);
}

.academy-course-stack-hero__exam {
	grid-column: 1 / -1;
	justify-self: end;
	padding: 9px 15px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 34%, var(--academy-border));
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-brand-2) 8%, transparent);
	color: var(--academy-text);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.academy-course-stack-hero__exam:hover:not(:disabled) {
	border-color: var(--academy-brand-2);
	color: var(--academy-brand-2);
}

.academy-course-stack-hero__exam:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.academy-course-stack-module {
	display: grid;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--academy-border);
	border-radius: 16px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-course-stack-module + .academy-course-stack-module {
	margin-top: 12px;
}

.academy-course-stack-module.is-locked {
	opacity: 0.48;
}

.academy-course-stack-module__head {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) minmax(84px, auto);
	align-items: start;
	gap: 16px;
}

.academy-course-stack-module__num {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--academy-text) 7%, transparent);
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 800;
}

.academy-course-stack-module__copy {
	min-width: 0;
}

.academy-course-stack-module__title {
	margin: 0 0 4px;
	font-family: "Neuton", Georgia, serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	color: var(--academy-text);
}

.academy-course-stack-module__intro {
	margin: 0;
	color: var(--academy-muted);
	font-size: 13px;
	line-height: 1.45;
}

.academy-course-stack-module__stat {
	text-align: right;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.academy-course-stack-module__stat strong {
	display: block;
	color: var(--academy-text);
	font-size: 14px;
}

.academy-course-stack-module__stat span {
	color: var(--academy-muted);
	font-size: 11px;
}

.academy-course-stack-module__bar {
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-text) 8%, transparent);
}

.academy-course-stack-module__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--academy-brand-gradient);
}

.academy-course-stack-lessons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.academy-course-stack-lesson {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--academy-border) 72%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--academy-surface-2, var(--academy-surface)) 42%, transparent);
	color: var(--academy-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.18s, background 0.18s;
}

.academy-course-stack-lesson:hover:not(:disabled) {
	border-color: var(--academy-border-strong, color-mix(in srgb, var(--academy-text) 28%, var(--academy-border)));
	transform: translateY(-1px);
}

.academy-course-stack-lesson__num {
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 800;
}

.academy-course-stack-lesson__title {
	margin: 0 0 2px;
	font-family: "Neuton", Georgia, serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--academy-text);
}

.academy-course-stack-lesson__meta {
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
}

.academy-course-stack-lesson__trail {
	color: var(--academy-muted);
	font-size: 18px;
	text-align: center;
}

.academy-course-stack-lesson.is-current {
	border-color: color-mix(in srgb, var(--academy-brand-2) 44%, var(--academy-border));
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--academy-brand-2) 7%, transparent), transparent 72%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
}

.academy-course-stack-lesson.is-current .academy-course-stack-lesson__num,
.academy-course-stack-lesson.is-current .academy-course-stack-lesson__trail {
	color: var(--academy-brand-2);
}

.academy-course-stack-lesson.is-done .academy-course-stack-lesson__num,
.academy-course-stack-lesson.is-done .academy-course-stack-lesson__trail {
	color: var(--academy-success, #22c55e);
}

.academy-course-stack-lesson.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
}

.academy-course-stack-module__exam {
	justify-self: start;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 34%, var(--academy-border));
	border-radius: 999px;
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.academy-course-stack-module__exam:hover:not(:disabled) {
	border-color: var(--academy-brand-2);
	color: var(--academy-brand-2);
}

.academy-course-stack-module__exam:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ── Assessments Hero + Stack ───────────────────────────────────── */
.academy-assessment-stack-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--academy-border);
	border-radius: 18px;
	background:
		radial-gradient(100% 70% at 0% 0%, color-mix(in srgb, var(--academy-brand-2) 13%, transparent), transparent 58%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-assessment-stack-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.academy-assessment-stack-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) minmax(150px, auto) auto;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: var(--academy-shadow);
}

.academy-assessment-stack-card__num {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--academy-text) 7%, transparent);
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 800;
}

.academy-assessment-stack-card__body {
	min-width: 0;
}

.academy-assessment-stack-card__title {
	margin: 0 0 3px;
	font-family: "Neuton", Georgia, serif;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--academy-text);
}

.academy-assessment-stack-card__owner {
	margin: 0;
	color: var(--academy-muted);
	font-size: 13px;
}

.academy-assessment-stack-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	min-width: 0;
}

.academy-assessment-stack-card__status,
.academy-assessment-stack-card__score {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
}

.academy-assessment-stack-card__status {
	padding: 5px 10px;
	border: 1px solid var(--academy-border);
	background: color-mix(in srgb, var(--academy-surface-2, var(--academy-surface)) 44%, transparent);
	color: var(--academy-text);
}

.academy-assessment-stack-card__status.is-available {
	border-color: color-mix(in srgb, var(--academy-brand-2) 40%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-brand-2) 10%, transparent);
	color: var(--academy-brand-2);
}

.academy-assessment-stack-card__status.is-passed {
	border-color: color-mix(in srgb, var(--academy-success, #22c55e) 44%, var(--academy-border));
	background: color-mix(in srgb, var(--academy-success, #22c55e) 12%, transparent);
	color: var(--academy-success, #22c55e);
}

.academy-assessment-stack-card__status.is-retake {
	border-color: color-mix(in srgb, var(--academy-warning, #f59e0b) 44%, var(--academy-border));
	color: var(--academy-warning, #f59e0b);
}

.academy-assessment-stack-card__status.is-locked {
	opacity: 0.72;
}

.academy-assessment-stack-card__score {
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.academy-assessment-stack-card__action {
	padding: 9px 14px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 34%, var(--academy-border));
	border-radius: 999px;
	background: transparent;
	color: var(--academy-text);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}

.academy-assessment-stack-card__action:hover:not(:disabled) {
	border-color: var(--academy-brand-2);
	color: var(--academy-brand-2);
}

.academy-assessment-stack-card__action:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.academy-assessment-stack-card.is-passed .academy-assessment-stack-card__num {
	background: color-mix(in srgb, var(--academy-success, #22c55e) 15%, transparent);
	color: var(--academy-success, #22c55e);
}

.academy-assessment-stack-card.is-available .academy-assessment-stack-card__num,
.academy-assessment-stack-card.is-retake .academy-assessment-stack-card__num {
	background: var(--academy-brand-gradient);
	color: #fff;
}

.academy-assessment-stack-card.is-locked {
	opacity: 0.5;
}

@media (max-width: 720px) {
	.academy-course-stack-hero,
	.academy-assessment-stack-hero {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 14px;
		padding: 18px;
	}

	.academy-course-stack-hero__avatar {
		width: 60px;
		height: 60px;
		border-radius: 17px;
		font-size: 25px;
	}

	.academy-course-stack-hero__stat,
	.academy-assessment-stack-hero__stat {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
	}

	.academy-course-stack-hero__exam {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.academy-course-stack-module {
		padding: 16px 14px;
	}

	.academy-course-stack-module__head {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 12px;
	}

	.academy-course-stack-module__stat {
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}

	.academy-course-stack-lesson {
		grid-template-columns: 40px minmax(0, 1fr) 22px;
		padding: 13px 12px;
	}

	.academy-assessment-stack-card {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 12px;
		padding: 16px 14px;
	}

	.academy-assessment-stack-card__meta,
	.academy-assessment-stack-card__action {
		grid-column: 2 / -1;
		align-items: flex-start;
		justify-self: start;
	}
}

/* =================================================================
   ACADEMY PROGRESS — TROPHY (proposal #2)
   ─────────────────────────────────────────────────────────────────
   XP trophy ring, compact metric cards, achievement badges and next step.
   ================================================================= */

/* Force the progress screen to flex column too (same fix as programs/courses
   detail to avoid the legacy auto-fit grid crushing). */
.academy-screen[data-screen="progress"] .academy-progress-grid,
.academy-screen[data-screen="progress"] .academy-progress-next {
	display: flex;
	flex-direction: column;
	gap: var(--academy-sp-lg);
	grid-template-columns: none;
	width: 100%;
}

.academy-trophy-progress {
	display: grid;
	gap: var(--academy-sp-lg);
	width: 100%;
}

.academy-trophy-progress__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--academy-sp-lg);
	align-items: center;
}

.academy-trophy-ring {
	position: relative;
	display: grid; place-items: center;
	min-height: 300px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 24%, var(--academy-border));
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--academy-brand-2) 10%, transparent), transparent 48%),
		color-mix(in srgb, var(--academy-surface) 96%, transparent);
	box-shadow: 0 18px 42px color-mix(in srgb, var(--academy-brand-1) 12%, transparent);
}

.academy-trophy-ring__svg {
	width: min(260px, 74vw);
	height: min(260px, 74vw);
	transform: rotate(-90deg);
}

.academy-trophy-ring__track {
	stroke: color-mix(in srgb, var(--academy-text) 7%, transparent);
}

.academy-trophy-ring__value {
	transition: stroke-dashoffset 0.3s ease;
}

.academy-trophy-ring__inner {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	padding: 48px;
	pointer-events: none;
}

.academy-trophy-ring__level,
.academy-trophy-ring__progress {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.academy-trophy-ring__level {
	color: var(--academy-brand-2);
}

.academy-trophy-ring__xp {
	margin: 8px 0 4px;
	font-family: "Neuton", Georgia, serif;
	font-size: clamp(3rem, 8vw, 4.1rem);
	font-weight: 800;
	line-height: 0.92;
	color: var(--academy-text);
}

.academy-trophy-ring__sub {
	margin: 0;
	color: var(--academy-muted);
	font-size: 13px;
}

.academy-trophy-ring__progress {
	margin-top: 10px;
	color: var(--academy-muted);
	font-size: 10px;
	letter-spacing: 0.08em;
}

.academy-trophy-stats {
	display: grid;
	gap: 12px;
}

.academy-trophy-stat {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
}

.academy-trophy-stat__icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--academy-brand-gradient);
	color: #fff;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--academy-brand-2) 30%, transparent);
}

.academy-trophy-stat__icon .academy-icon {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
}

.academy-trophy-stat.is-done .academy-trophy-stat__icon {
	background: color-mix(in srgb, var(--academy-success, #22c55e) 18%, transparent);
	color: var(--academy-success, #22c55e);
	box-shadow: none;
}

.academy-trophy-stat.is-empty .academy-trophy-stat__icon {
	background: color-mix(in srgb, var(--academy-text) 6%, transparent);
	color: var(--academy-muted);
	box-shadow: none;
}

.academy-trophy-stat__body {
	min-width: 0;
}

.academy-trophy-stat__label {
	margin: 0;
	color: var(--academy-muted);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.academy-trophy-stat__value {
	margin: 4px 0 0;
	font-family: "Neuton", Georgia, serif;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	color: var(--academy-text);
}

.academy-trophy-stat__hint {
	margin: 4px 0 0;
	color: var(--academy-muted);
	font-size: 11px;
}

.academy-trophy-stat__pct {
	color: var(--academy-muted);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
}

.academy-trophy-stat__progress {
	grid-column: 2 / -1;
	width: 100%;
	height: 5px;
	appearance: none;
	border: 0;
	border-radius: 999px;
}

.academy-trophy-stat__progress::-webkit-progress-bar,
.academy-trophy-next__progress::-webkit-progress-bar {
	background: color-mix(in srgb, var(--academy-text) 8%, transparent);
	border-radius: 999px;
}

.academy-trophy-stat__progress::-webkit-progress-value,
.academy-trophy-next__progress::-webkit-progress-value {
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}

.academy-trophy-stat__progress::-moz-progress-bar,
.academy-trophy-next__progress::-moz-progress-bar {
	background: var(--academy-brand-gradient);
	border-radius: 999px;
}

.academy-trophy-achievements {
	padding: 18px;
	border: 1px solid var(--academy-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--academy-surface) 96%, transparent);
}

.academy-trophy-achievements__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.academy-trophy-achievements__title {
	margin: 0;
	font-family: "Neuton", Georgia, serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--academy-text);
}

.academy-trophy-achievements__hint {
	color: var(--academy-muted);
	font-size: 11px;
}

.academy-trophy-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.academy-trophy-badge {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--academy-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--academy-text) 3%, transparent);
	color: var(--academy-text);
	font-size: 12px;
	font-weight: 650;
}

.academy-trophy-badge.is-unlocked {
	border-color: color-mix(in srgb, var(--academy-brand-3) 48%, var(--academy-border));
}

.academy-trophy-badge__icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--academy-brand-gradient);
	color: #fff;
}

.academy-trophy-badge__icon .academy-icon {
	width: 16px;
	height: 16px;
	display: grid;
	place-items: center;
}

.academy-trophy-badge.is-locked {
	color: var(--academy-muted);
}

.academy-trophy-badge.is-locked .academy-trophy-badge__icon {
	background: color-mix(in srgb, var(--academy-text) 6%, transparent);
	color: var(--academy-muted);
}

.academy-trophy-badge__label {
	min-width: 0;
}

/* ── Next milestone card ─────────────────────────────────────────── */
.academy-trophy-next {
	padding: 22px 24px;
	border: 1px solid color-mix(in srgb, var(--academy-brand-2) 36%, transparent);
	border-radius: 16px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--academy-brand-2) 8%, transparent), transparent 65%),
		var(--academy-surface);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--academy-brand-1) 18%, transparent);
}
.academy-trophy-next__kicker {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--academy-brand-2);
	margin: 0;
}
.academy-trophy-next__title {
	font-family: "Neuton", Georgia, serif;
	font-size: 22px;
	font-weight: 800;
	margin: 6px 0 4px;
	line-height: 1.2;
	color: var(--academy-text);
}
.academy-trophy-next__hint {
	color: var(--academy-muted);
	font-size: 13px;
	margin: 0 0 14px;
}

.academy-trophy-next__progress {
	width: 100%;
	height: 6px;
	margin: 10px 0 12px;
	appearance: none;
	border: 0;
	border-radius: 999px;
}

.academy-trophy-next__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--academy-brand-gradient);
	color: white;
	font: inherit;
	font-weight: 700;
	font-size: 13px;
	border: 0;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}
.academy-trophy-next__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--academy-brand-2) 40%, transparent);
}

@media (max-width: 720px) {
	.academy-trophy-progress__top {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.academy-trophy-ring {
		min-height: 250px;
	}

	.academy-trophy-ring__svg {
		width: min(224px, 72vw);
		height: min(224px, 72vw);
	}

	.academy-trophy-ring__xp {
		font-size: clamp(2.55rem, 14vw, 3.25rem);
	}

	.academy-trophy-stat {
		padding: 12px 14px;
	}

	.academy-trophy-achievements__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.academy-trophy-badge {
		max-width: 100%;
	}
}

/* ── Generic button breathing room ───────────────────────────────────── */
/* Buttons should never sit pixel-tight against preceding text/cards.
   Applies broadly across course row, lesson activities, assessment forms,
   etc. The :where() and :not(:first-child) selectors keep specificity low
   and avoid forcing a top gap when a button is the very first child of a
   container that already controls layout.
   Excluded: every horizontal flex action bar, where this margin would
   push the second button vertically down 16px and break alignment with
   the first (welcome CTA row, quiz nav, modal/result/pomodoro actions). */
.hcgpt-academy-app :where(.academy-btn-primary, .academy-btn-secondary):not(:first-child) {
	margin-top: var(--academy-sp-md);
}
.hcgpt-academy-app :where(.academy-activity-nav, .academy-assessment-actions, .academy-welcome-actions, .academy-quiz-nav, .academy-quiz-results-actions, .academy-modal-actions, .academy-pomodoro-actions) :where(.academy-btn-primary, .academy-btn-secondary):not(:first-child) {
	margin-top: 0;
}

.academy-assessment-actions {
	margin-top: var(--academy-sp-2xl);
	display: flex;
	justify-content: flex-end;
	gap: var(--academy-sp-md);
}

/* Quiz / assessment question cards must keep the answer button(s) clearly
   detached from the answer choices above. */
.academy-assessment-question + .academy-assessment-actions,
.academy-assessment-questions ~ .academy-assessment-actions {
	margin-top: var(--academy-sp-2xl);
}