/* ==========================================================================
   Haulity LMS — Frontend Design System
   Uses the same CSS variable names as hledu-admin.css so the design
   stays visually consistent across admin and frontend.
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (mirrors admin tokens)
   -------------------------------------------------------------------------- */
:root {
	--hledu-primary: #2563eb;
	--hledu-primary-hover: #1d4ed8;
	--hledu-primary-light: #eff6ff;
	--hledu-secondary: #7c3aed;
	--hledu-secondary-light: #f5f3ff;
	--hledu-success: #16a34a;
	--hledu-success-light: #f0fdf4;
	--hledu-warning: #d97706;
	--hledu-warning-light: #fffbeb;
	--hledu-danger: #dc2626;
	--hledu-danger-light: #fef2f2;
	--hledu-info: #0891b2;
	--hledu-info-light: #ecfeff;
	--hledu-text: #1f2937;
	--hledu-text-muted: #6b7280;
	--hledu-text-light: #9ca3af;
	--hledu-bg: #f9fafb;
	--hledu-bg-card: #ffffff;
	--hledu-border: #e5e7eb;
	--hledu-border-light: #f3f4f6;
	--hledu-radius-sm: 4px;
	--hledu-radius: 8px;
	--hledu-radius-lg: 12px;
	--hledu-radius-xl: 20px;
	--hledu-radius-full: 9999px;
	--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
	--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
	--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
	--hledu-transition: 150ms ease;
	--hledu-transition-slow: 300ms ease;
	--hledu-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--hledu-container: 1200px;

	/* Bento/Glass — surfaces */
	--hledu-surface: #ffffff;
	--hledu-surface-glass: rgb(255 255 255 / 0.6);
	--hledu-blur: 16px;

	/* Bento/Glass — gradient + glow */
	--hledu-gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed, #2563eb);
	--hledu-glow-primary: 0 0 0 3px rgb(37 99 235 / 0.18), 0 0 18px rgb(37 99 235 / 0.22);

	/* Bento/Glass — elevation */
	--hledu-shadow-glass: 0 8px 32px rgb(15 23 42 / 0.10);

	/* Responsive scale — spacing (4px steps). New and reworked responsive
	   rules use these instead of one-off px values. */
	--hledu-space-1: 4px;
	--hledu-space-2: 8px;
	--hledu-space-3: 12px;
	--hledu-space-4: 16px;
	--hledu-space-5: 20px;
	--hledu-space-6: 24px;
	--hledu-space-8: 32px;

	/* Page gutter: 16px on phones growing to 24px on desktop. */
	--hledu-gutter: clamp(16px, 2.5vw, 24px);

	/* Fluid heading sizes — the max is the current desktop size, so desktop
	   is unchanged; phones get a proportionally smaller heading. */
	--hledu-fs-h1: clamp(20px, 1.2rem + 1vw, 26px);
	--hledu-fs-h2: clamp(18px, 1.05rem + 0.6vw, 22px);
	--hledu-fs-h3: clamp(16px, 0.95rem + 0.3vw, 18px);

	/* Minimum comfortable touch target (WCAG 2.5.5 / Apple HIG). */
	--hledu-touch: 44px;
}

/* --------------------------------------------------------------------------
   1b. Dark theme — same variable names, new values. Components never need
   a dark-mode-specific class; only these tokens change.
   -------------------------------------------------------------------------- */
[data-hledu-theme="dark"] {
	--hledu-primary: #3b82f6;
	--hledu-primary-hover: #60a5fa;
	--hledu-primary-light: rgb(59 130 246 / 0.16);
	--hledu-secondary: #a78bfa;
	--hledu-secondary-light: rgb(167 139 250 / 0.16);

	--hledu-success: #22c55e;
	--hledu-success-light: rgb(34 197 94 / 0.16);
	--hledu-warning: #f59e0b;
	--hledu-warning-light: rgb(245 158 11 / 0.16);
	--hledu-danger: #f87171;
	--hledu-danger-light: rgb(248 113 113 / 0.16);
	--hledu-info: #22d3ee;
	--hledu-info-light: rgb(34 211 238 / 0.16);

	--hledu-text: #e5e7eb;
	--hledu-text-muted: #9ca3af;
	--hledu-text-light: #6b7280;
	--hledu-bg: #0f1420;
	--hledu-bg-card: #171d2e;
	--hledu-border: #2a3348;
	--hledu-border-light: #212840;

	--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
	--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
	--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
	--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);

	--hledu-surface: #171d2e;
	--hledu-surface-glass: rgb(30 38 58 / 0.55);
	--hledu-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
	--hledu-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
	--hledu-shadow-glass: 0 8px 32px rgb(0 0 0 / 0.45);
}

/* When the user has never chosen a theme, follow the OS preference. */
@media (prefers-color-scheme: dark) {
	:root:not([data-hledu-theme="light"]):not([data-hledu-theme="dark"]) {
		--hledu-primary: #3b82f6;
		--hledu-primary-hover: #60a5fa;
		--hledu-primary-light: rgb(59 130 246 / 0.16);
		--hledu-secondary: #a78bfa;
		--hledu-secondary-light: rgb(167 139 250 / 0.16);
		--hledu-success: #22c55e;
		--hledu-success-light: rgb(34 197 94 / 0.16);
		--hledu-warning: #f59e0b;
		--hledu-warning-light: rgb(245 158 11 / 0.16);
		--hledu-danger: #f87171;
		--hledu-danger-light: rgb(248 113 113 / 0.16);
		--hledu-info: #22d3ee;
		--hledu-info-light: rgb(34 211 238 / 0.16);
		--hledu-text: #e5e7eb;
		--hledu-text-muted: #9ca3af;
		--hledu-text-light: #6b7280;
		--hledu-bg: #0f1420;
		--hledu-bg-card: #171d2e;
		--hledu-border: #2a3348;
		--hledu-border-light: #212840;
		--hledu-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
		--hledu-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
		--hledu-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
		--hledu-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
		--hledu-surface: #171d2e;
		--hledu-surface-glass: rgb(30 38 58 / 0.55);
		--hledu-gradient-primary: linear-gradient(135deg, #3b82f6, #a78bfa, #3b82f6);
		--hledu-glow-primary: 0 0 0 3px rgb(59 130 246 / 0.28), 0 0 18px rgb(59 130 246 / 0.3);
		--hledu-shadow-glass: 0 8px 32px rgb(0 0 0 / 0.45);
	}
}

html {
	transition: background-color var(--hledu-transition-slow), color var(--hledu-transition-slow) !important;
}

/* --------------------------------------------------------------------------
   2. Scope wrapper — all frontend output is inside .hledu-frontend
   -------------------------------------------------------------------------- */
.hledu-frontend {
	font-family: inherit;
	color: var(--hledu-text) !important;
	line-height: 1.6 !important;
	/* No overflow clipping on this wrapper (QC: "turn off the display
	   overflow function across the entire plugin"): it used to clip content
	   that didn't fit at the page edge, which hid layout problems instead of
	   showing them. Components are now sized to fit on their own (verified
	   per page at 320–1920px); anything that still overflowed would show as
	   a visible horizontal scroll rather than silently cut-off content.
	   Long unbreakable strings (emails, URLs) wrap instead of overflowing. */
	overflow-wrap: break-word !important;
}

.hledu-frontend *,
.hledu-frontend *::before,
.hledu-frontend *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. Button (.hledu-btn)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-btn {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	padding: 11px 24px !important;
	background: var(--hledu-primary) !important;
	background-image: var(--hledu-gradient-primary) !important;
	background-size: 200% 100% !important;
	background-position: 0 0 !important;
	color: #fff !important;
	border: 1px solid transparent !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: background-position var(--hledu-transition-slow), box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
	line-height: 1.4 !important;
}

.hledu-frontend .hledu-btn:hover {
	background-position: 100% 0 !important;
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-1px) !important;
}

.hledu-frontend .hledu-btn:active {
	transform: translateY(0) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-frontend .hledu-btn:focus-visible {
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-frontend .hledu-btn--full {
	width: 100% !important;
}

.hledu-frontend .hledu-btn--sm {
	padding: 7px 14px !important;
	font-size: 13px !important;
}

.hledu-frontend .hledu-btn--lg {
	padding: 13px 28px !important;
	font-size: 15px !important;
}

.hledu-frontend .hledu-btn--secondary {
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	border-color: var(--hledu-border) !important;
}

.hledu-frontend .hledu-btn--secondary:hover {
	background: var(--hledu-bg) !important;
}

.hledu-frontend .hledu-btn--success {
	background: var(--hledu-success) !important;
}

.hledu-frontend .hledu-btn--success:hover {
	background: #15803d !important;
}

.hledu-frontend .hledu-btn--danger {
	background: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-btn--danger:hover {
	background: #b91c1c !important;
}

/* --------------------------------------------------------------------------
   4. Badge (.hledu-badge)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-badge {
	display: inline-flex;
	align-items: center !important;
	padding: 2px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	text-transform: capitalize !important;
}

.hledu-frontend .hledu-badge--primary {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-frontend .hledu-badge--success {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-badge--warning {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-badge--danger {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-badge--free {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

/* --------------------------------------------------------------------------
   5. Alert / notice (.hledu-alert)
   -------------------------------------------------------------------------- */
.hledu-frontend .hledu-alert {
	padding: 13px 16px !important;
	border-radius: var(--hledu-radius-sm) !important;
	border-left: 4px solid !important;
	margin-bottom: 16px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

.hledu-alert--autodismiss {
	transition: opacity 400ms ease !important;
}

.hledu-alert--autodismiss.hledu-alert--dismissing {
	opacity: 0;
}

.hledu-frontend .hledu-alert--success {
	background: var(--hledu-success-light) !important;
	border-color: var(--hledu-success) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-alert--error {
	background: var(--hledu-danger-light) !important;
	border-color: var(--hledu-danger) !important;
	color: var(--hledu-danger) !important;
}

.hledu-frontend .hledu-alert--warning {
	background: var(--hledu-warning-light) !important;
	border-color: var(--hledu-warning) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-alert--info {
	background: var(--hledu-info-light) !important;
	border-color: var(--hledu-info) !important;
	color: var(--hledu-info) !important;
}

.hledu-frontend .hledu-fe-notice--flush {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   6. Course grid
   -------------------------------------------------------------------------- */
.hledu-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 24px !important;
	margin: 24px 0 !important;
}

/* --------------------------------------------------------------------------
   7. Course card
   -------------------------------------------------------------------------- */
.hledu-course-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	overflow: hidden !important;
	display: flex;
	flex-direction: column !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
}

.hledu-course-card:hover {
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.hledu-course-card__thumb {
	position: relative !important;
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
	background: var(--hledu-border-light) !important;
}

.hledu-course-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.hledu-course-card__badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	padding: 3px 10px !important;
	background: var(--hledu-primary) !important;
	color: #fff !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hledu-course-card__badge--free {
	background: var(--hledu-success) !important;
}

.hledu-course-card__badge--level {
	background: var(--hledu-secondary) !important;
}

.hledu-course-card__body {
	padding: 16px !important;
	flex: 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

.hledu-course-card__category {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--hledu-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}

.hledu-course-card__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.hledu-course-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.hledu-course-card__title a:hover {
	color: var(--hledu-primary) !important;
}

.hledu-course-card__instructor {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-card__meta {
	display: flex;
	gap: 12px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	flex-wrap: wrap !important;
	margin-top: 4px !important;
}

.hledu-course-card__meta-item {
	display: flex;
	align-items: center !important;
	gap: 4px !important;
}

.hledu-course-card__footer {
	padding: 12px 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
}

.hledu-course-card__price {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-card__price--free {
	color: var(--hledu-success) !important;
	font-size: 15px !important;
}

/* Employee dashboard's "My Courses"/"Top Courses" grid (Module 15) — the
   progress bar sits above a full-width Continue/Start button instead of
   the public catalog's price row, so the footer stacks instead of the
   base rule's single space-between row. */
.hledu-course-card__footer--stacked {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
}

.hledu-course-card__progress-row {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Company card (Platform Staff's Companies list, Card layout) ─────────── */
.hledu-company-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-company-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	padding: 20px !important;
	display: flex;
	flex-direction: column !important;
	gap: 16px !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition) !important;
}

.hledu-company-card:hover {
	box-shadow: var(--hledu-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.hledu-company-card__header {
	display: flex;
	align-items: flex-start !important;
	gap: 12px !important;
}

.hledu-company-card__avatar {
	width: 44px !important;
	height: 44px !important;
	font-size: 16px !important;
}

.hledu-company-card__title-wrap {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-company-card__name {
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.hledu-company-card__name a {
	color: var(--hledu-text) !important;
	text-decoration: none !important;
}

.hledu-company-card__name a:hover {
	color: var(--hledu-primary) !important;
}

.hledu-company-card__email {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-company-card__stats {
	display: flex;
	gap: 20px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-company-card__stats strong {
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-right: 4px !important;
}

.hledu-company-card__footer {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-company-card__phone {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

/* Phone glyph shown in Dashicons' own orientation (QC asked to reverse
   the earlier scaleX(-1) mirroring). */
.hledu-company-card__phone .dashicons-phone {
	transform: none !important;
}

/* --------------------------------------------------------------------------
   7b. Certificate card — Learner dashboard's Certificates page
   -------------------------------------------------------------------------- */
.hledu-certificate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-certificate-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	display: flex;
	flex-direction: column !important;
	padding: 14px !important;
	transition: box-shadow var(--hledu-transition), transform var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-certificate-card:hover {
	box-shadow: var(--hledu-shadow-lg) !important;
	transform: translateY(-3px) !important;
	border-color: var(--hledu-warning) !important;
}

.hledu-certificate-card__thumb {
	position: relative !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg) !important;
}

.hledu-certificate-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
	transition: transform var(--hledu-transition-slow) !important;
}

.hledu-certificate-card:hover .hledu-certificate-card__thumb img {
	transform: scale(1.05) !important;
}

.hledu-certificate-card__badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 10px 4px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: rgb(15 23 42 / 0.72) !important;
	color: #fbbf24 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.6 !important;
}

.hledu-certificate-card__badge .dashicons {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-certificate-card__body {
	padding: 14px 2px 10px !important;
	flex: 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
}

.hledu-certificate-card__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.hledu-certificate-card__meta-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
}

.hledu-certificate-card__meta {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-certificate-card__meta .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-certificate-card__id {
	flex-shrink: 0 !important;
	font-size: 10.5px !important;
	font-family: monospace;
	color: var(--hledu-text-light) !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	padding: 2px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	white-space: nowrap !important;
}

.hledu-certificate-card__footer {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6px !important;
	padding: 10px 2px 0 !important;
	margin-top: 2px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-certificate-card__footer .hledu-btn:not(.hledu-icon-btn) {
	white-space: nowrap !important;
	padding: 7px 10px !important;
	gap: 4px !important;
}

/* ── Certificate "⋮" share menu — decorative only, no real sharing yet ──── */
.hledu-cert-share-wrap {
	margin-left: auto !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

/* Employee Dashboard's Certificates page has only 2 other actions (no
   Revoke), so pushing "⋮" to the far right of the cell/card leaves an
   ugly gap — keep it flush next to View/Download instead.
   Compound selector (not just the modifier alone): on the standalone
   /employee-dashboard/ page hledu-admin.css loads AFTER this file, and its
   own .hledu-cert-share-wrap base rule (same margin-left:auto) has equal
   specificity to a single-class ".hledu-cert-share-wrap--inline" selector,
   so source order let it win there and reopened the gap. The extra class
   here gives this reset higher specificity than either base rule,
   regardless of which stylesheet loads last. */
.hledu-cert-share-wrap.hledu-cert-share-wrap--inline {
	margin-left: 0 !important;
}

.hledu-cert-share-toggle svg {
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu {
	display: none;
	position: absolute !important;
	bottom: calc(100% + 8px) !important;
	right: 0 !important;
	z-index: 20 !important;
	width: 250px !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	padding: 8px !important;
}

.hledu-cert-share-wrap.is-open .hledu-cert-share-menu {
	display: block;
}

.hledu-cert-share-menu__title {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	color: var(--hledu-text-muted) !important;
	padding: 6px 10px !important;
}

.hledu-cert-share-menu__item {
	display: flex;
	width: 100% !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border: none !important;
	background: none !important;
	border-radius: var(--hledu-radius) !important;
	color: inherit !important;
	font-family: inherit;
	text-align: left !important;
	cursor: pointer !important;
}

.hledu-cert-share-menu__item:hover {
	background: var(--hledu-bg) !important;
}

.hledu-cert-share-menu__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-cert-share-menu__icon svg {
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu__icon .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.hledu-cert-share-menu__item--email .hledu-cert-share-menu__icon {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-cert-share-menu__text {
	display: flex;
	flex-direction: column !important;
	gap: 1px !important;
}

.hledu-cert-share-menu__text strong {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-share-menu__text small {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Platform Staff's Certificates management screen — dummy data. Reuses
   the shared .hledu-modal box for the View preview, but its own overlay/
   close-button classes (not .hledu-modal-overlay/.hledu-modal-close) —
   hledu-admin.js binds a document-level handler to those two classes that
   removes the modal element from the DOM on close, which would leave this
   always-present, server-rendered modal unable to ever reopen. ─────────── */
.hledu-cert-preview-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.hledu-cert-preview-overlay.hledu-modal--open {
	display: flex;
}

.hledu-cert-preview-close-btn {
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: var(--hledu-text-light) !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 22px !important;
	transition: color var(--hledu-transition) !important;
}

.hledu-cert-preview-close-btn:hover {
	color: var(--hledu-danger) !important;
}

.hledu-cert-preview-sub {
	margin: 0 0 12px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

.hledu-cert-preview-img {
	width: 100% !important;
	border-radius: var(--hledu-radius) !important;
	display: block;
}

/* --------------------------------------------------------------------------
   7c. Course learning page — /course-learn/, a Learner's own lesson player.
   Curriculum (modules/lessons) is real; the player, progress, and
   completion state are a client-side-only visual preview.
   -------------------------------------------------------------------------- */
.hledu-fe-form-main>.hledu-fe-card {
	position: relative !important;
	overflow: hidden !important;
}

.hledu-fe-form-main>.hledu-fe-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: var(--hledu-gradient-primary) !important;
}

.hledu-course-learn__crumb {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.hledu-course-learn__crumb-left {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	min-width: 0 !important;
}

.hledu-course-learn__crumb-left a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	/* "← My courses" wrapped to two lines on phones beside the title. */
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__crumb-left a svg {
	width: 14px !important;
	height: 14px !important;
}

.hledu-course-learn__crumb-left a:hover {
	text-decoration: underline !important;
}

.hledu-course-learn__crumb-sep {
	color: var(--hledu-text-light) !important;
}

.hledu-course-learn__crumb-current {
	color: var(--hledu-text-muted) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__crumb-actions {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__header-row {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.hledu-course-learn__header-actions {
	display: flex;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 8px !important;
}

/* Mark Lesson Complete / Completed always matches the Previous+Next row's
   own width, whichever of the two is naturally wider — this stretch, plus
   .hledu-course-learn__quick-nav-btn's flex: 1 below, is what keeps them in
   sync even though the button's text (and so its natural width) changes
   between the two states. */
#hledu-learn-status {
	width: 100% !important;
}

.hledu-course-learn__quick-nav {
	display: flex;
	gap: 6px !important;
}

/* Same height as .hledu-course-learn__type-badge, so Mark Lesson Complete
   and the Previous/Next buttons all line up with it. Selectors need to match
   .hledu-frontend .hledu-btn's own specificity (two classes) to win over it. */
#hledu-learn-status,
.hledu-frontend .hledu-course-learn__quick-nav-btn {
	padding: 4px 12px !important;
	font-size: 13px !important;
}

.hledu-course-learn__quick-nav-btn {
	flex: 1 !important;
}

.hledu-course-learn__quick-nav-btn svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__title-group {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-course-learn__title-icon.hledu-stat-icon-circle {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__header-row h1 {
	font-size: 22px !important;
	margin: 0 0 4px !important;
}

#hledu-learn-status-icon {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-course-learn__position {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}


/* ── Tabs (Overview / Materials / Notes / Discussion) ────────────────────── */
.hledu-dashboard-nav button {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	background: none !important;
	border: none !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
	white-space: nowrap !important;
	transition: color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-dashboard-nav button .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.hledu-dashboard-nav button:hover,
.hledu-dashboard-nav button.active {
	color: var(--hledu-primary) !important;
	border-bottom-color: var(--hledu-primary) !important;
}

.hledu-course-learn__tab-panel {
	min-height: 280px !important;
}

.hledu-course-learn__tab-panel[hidden] {
	display: none;
}

/* ── "What you'll learn" checklist ───────────────────────────────────────── */
.hledu-course-learn__checklist {
	list-style: none !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
}

.hledu-course-learn__checklist li {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__checklist svg {
	width: 16px !important;
	height: 16px !important;
	color: var(--hledu-success) !important;
	flex-shrink: 0 !important;
}

/* ── Previous/Next neighbor row ───────────────────────────────────────────── */
.hledu-course-learn__neighbor-row {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 20px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-course-learn__neighbor-label[hidden] {
	display: none;
}

.hledu-course-learn__neighbor-label {
	display: inline-flex;
	align-items: center !important;
	gap: 5px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	max-width: 45% !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font-family: inherit;
	cursor: pointer !important;
	transition: color var(--hledu-transition) !important;
}

.hledu-course-learn__neighbor-label:hover {
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__neighbor-label svg {
	width: 13px !important;
	height: 13px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__neighbor-label span {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__neighbor-label:last-child {
	text-align: right !important;
	margin-left: auto !important;
}

/* ── Circular course-progress ring ────────────────────────────────────────── */
.hledu-course-learn__ring-wrap {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}

.hledu-course-learn__ring {
	--pct: 0;
	width: 84px !important;
	height: 84px !important;
	border-radius: 50% !important;
	background: conic-gradient(var(--hledu-success) calc(var(--pct) * 1%), var(--hledu-border) 0) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__ring::before {
	content: "" !important;
	position: absolute !important;
	inset: 8px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
}

.hledu-course-learn__ring-value {
	position: relative !important;
	z-index: 1 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__ring-info {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

/* ── My Notes ─────────────────────────────────────────────────────────────── */
.hledu-course-learn__notes-textarea {
	width: 100% !important;
	min-height: 90px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg) !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	font-family: inherit;
	color: var(--hledu-text) !important;
	resize: vertical !important;
	transition: border-color var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-course-learn__notes-textarea:focus {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: 0 0 0 3px var(--hledu-primary-light) !important;
}

/* ── Instructor card ──────────────────────────────────────────────────────── */
.hledu-course-learn__instructor {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
}

.hledu-course-learn__instructor-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__instructor-meta {
	min-width: 0 !important;
}

.hledu-course-learn__instructor-name {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 2px !important;
}

.hledu-course-learn__instructor-title {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-course-learn__instructor-bio {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 14px !important;
	line-height: 1.5 !important;
}

.hledu-course-learn__instructor-btn {
	width: 100% !important;
	justify-content: center !important;
}

/* ── Need Help card ───────────────────────────────────────────────────────── */
.hledu-course-learn__help-card {
	display: flex;
	gap: 10px !important;
	padding: 16px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-primary-light) !important;
}

.hledu-course-learn__help-card .dashicons {
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__help-card h3 {
	font-size: 13px !important;
	font-weight: 700 !important;
	margin: 0 0 4px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__help-card p {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 10px !important;
}

/* ── Distraction-free mode — this page's own toggle, independent of the
   Module 16 .hledu-focus-mode scaffold elsewhere in this file. The crumb
   (and its own toggle button) hides along with the sidebar, so the
   floating exit button below is the only way back in. ──────────────────── */
.hledu-course-learn--fullscreen .hledu-course-learn__crumb,
.hledu-course-learn--fullscreen .hledu-fe-form-sidebar {
	display: none;
}

.hledu-course-learn--fullscreen .hledu-fe-form-layout {
	grid-template-columns: 1fr !important;
}

/* ID selectors (not just the class) so this reliably wins over the base
   .hledu-frontend .hledu-btn rule's own `display: inline-flex`, which
   otherwise outranks a single-class `display: none` here regardless of
   stylesheet order. */
#hledu-learn-exit-fullscreen {
	display: none;
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	z-index: 100 !important;
	box-shadow: var(--hledu-shadow-lg) !important;
}

.hledu-course-learn--fullscreen #hledu-learn-exit-fullscreen {
	display: inline-flex;
}

/* ── Course Content — height-capped with a "View Full List" reveal so a
   long curriculum doesn't tower over the rest of the sidebar. The ID
   selector guarantees this wins over the base .hledu-curriculum rule's
   own `overflow: hidden` regardless of stylesheet order. ───────────────── */
#hledu-learn-curriculum {
	max-height: 360px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

#hledu-learn-curriculum.hledu-course-learn__curriculum--expanded {
	max-height: none !important;
	overflow: visible !important;
}

.hledu-course-learn__expand-btn {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin-top: 12px !important;
	padding: 10px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-learn__expand-btn:hover {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
}

.hledu-course-learn__expand-chevron {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-course-learn__expand-btn--open .hledu-course-learn__expand-chevron {
	transform: rotate(180deg) !important;
}

.hledu-course-learn__media {
	aspect-ratio: 16 / 9 !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: linear-gradient(135deg, var(--hledu-bg), var(--hledu-border-light)) !important;
	border-radius: var(--hledu-radius-lg) var(--hledu-radius-lg) 0 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	overflow: hidden !important;
}

.hledu-course-learn__media--video {
	position: relative !important;
	padding: 0 !important;
	background: #000 !important;
}

.hledu-course-learn__media--video iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block;
}

.hledu-course-learn__video-poster {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.hledu-course-learn__media--video::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(0deg, rgb(0 0 0 / 0.35), transparent 55%) !important;
	pointer-events: none !important;
}

.hledu-course-learn__play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1 !important;
	width: 76px !important;
	height: 76px !important;
	border-radius: 50% !important;
	background: var(--hledu-gradient-primary) !important;
	border: 3px solid rgb(255 255 255 / 0.9) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.4) !important;
	transition: transform var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-course-learn__play-btn:hover {
	transform: translate(-50%, -50%) scale(1.08) !important;
	box-shadow: 0 10px 32px rgb(0 0 0 / 0.5) !important;
}

.hledu-course-learn__play-btn svg {
	width: 28px !important;
	height: 28px !important;
	margin-left: 3px !important;
}

.hledu-course-learn__media-icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-bg-card) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-course-learn__media-icon svg {
	width: 22px !important;
	height: 22px !important;
}

/* ── Sample quiz — plays inline inside the video/media area itself (not a
   popup); reuses the real quiz player's .hledu-quiz-question/
   .hledu-quiz-answer-option/.hledu-quiz-nav classes so this dummy preview
   matches the LMS's actual quiz design. ──────────────────────────────────── */
.hledu-course-learn__media--quiz {
	aspect-ratio: auto !important;
	height: 560px !important;
	overflow: hidden !important;
	padding: 28px 40px !important;
	text-align: center !important;
}

/* Added once the real [hledu_quiz_player] markup is loaded in (see
   course-learn.php's "Start Quiz" handler). Keeps the SAME fixed height as
   the intro screen above (no growing/shrinking as the quiz progresses) —
   quiz-player.php's own JS hides the title/description/meta-list intro
   card once a question is showing, so only one question (or the result
   card) needs to fit here at a time; overflow-y:auto is only a safety net
   for an unusually long question, not the normal case. The quiz/result
   cards are centered in this box, same reasoning .hledu-quiz-confirm-box
   below has for not depending on admin.css's .hledu-modal — content is
   left-aligned within its own centered card for readability. */
.hledu-course-learn__media--quiz.hledu-course-learn__media--quiz-active {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	text-align: left !important;
}

.hledu-course-learn__media--quiz-active #hledu-quiz-player,
.hledu-course-learn__media--quiz-active #hledu-quiz-result {
	width: 100% !important;
	max-width: 480px !important;
}

/* Phones: the fixed 560px box (a deliberate desktop choice, so the area
   doesn't jump between questions) made a question scroll inside a box
   inside the page, and 40px side padding left the answers ~220px wide.
   Here the box simply grows with its content and uses the page gutter;
   the content starts at the top instead of being vertically centred
   (centring + overflow clips the top of a tall question). */
@media (max-width: 600px) {

	.hledu-course-learn__media--quiz,
	.hledu-course-learn__media--quiz.hledu-course-learn__media--quiz-active {
		height: auto !important;
		min-height: 320px !important;
		padding: 16px !important;
		overflow: visible !important;
		justify-content: flex-start !important;
	}

	.hledu-course-learn__media--quiz-active #hledu-quiz-player,
	.hledu-course-learn__media--quiz-active #hledu-quiz-result {
		max-width: none !important;
	}
}

/* [hidden] must outrank the flex display below (same specificity as the
   browser's default [hidden] rule, so without this the intro never
   actually disappears when the quiz starts). */
.hledu-course-learn__quiz-intro[hidden] {
	display: none;
}

.hledu-course-learn__quiz-intro {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-course-learn__quiz-intro p {
	margin: 0 !important;
	max-width: 420px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
}

.hledu-course-learn__quiz-intro .hledu-course-learn__quiz-meta {
	justify-content: center !important;
	margin: 0 !important;
}

.hledu-course-learn__quiz-player {
	width: 100% !important;
	text-align: left !important;
}

.hledu-course-learn__quiz-progress {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 4px !important;
}

/* Static for now — will count down against a real per-quiz time limit
   once quizzes are wired to actual data. */
.hledu-course-learn__quiz-timer {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-weight: 600 !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__quiz-timer .dashicons {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
}

.hledu-course-learn__quiz-timer-value {
	color: var(--hledu-text) !important;
	font-variant-numeric: tabular-nums !important;
}

/* .hledu-quiz-result-body (Module 08's real quiz result screen) sets its
   own `display: flex` — same specificity as the browser's default
   `[hidden] { display: none }`, so without this it stays visible even
   while hidden. Combining our own class with [hidden] outranks it. */
.hledu-course-learn__quiz-complete[hidden] {
	display: none;
}

.hledu-course-learn__quiz-complete {
	padding: 20px 10px !important;
}

.hledu-course-learn__quiz-complete h3 {
	margin: 0 !important;
	font-size: 16px !important;
	color: var(--hledu-text) !important;
}

.hledu-course-learn__quiz-complete p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-learn__tabs-row {
	flex-wrap: wrap !important;
}

.hledu-course-learn__type-badge {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	padding: 5px 12px !important;
	margin-left: auto !important;
	margin-top: 6px !important;
	margin-bottom: 6px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	flex-shrink: 0 !important;
}

.hledu-course-learn__type-badge .dashicons {
	font-size: 12px !important;
	width: 12px !important;
	height: 12px !important;
}

/* Phones: the four lesson tabs wrapped unevenly over two rows with the
   VIDEO/QUIZ badge squeezed in between. Now: badge on its own line, tabs
   as an even 2×2 grid of 44px buttons; the active tab gets a filled
   highlight (an underline would float between the two rows). */
@media (max-width: 600px) {
	.hledu-course-learn__tabs-row.hledu-dashboard-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
		padding-bottom: 12px !important;
		overflow: visible !important;
	}

	.hledu-course-learn__tabs-row .hledu-course-learn__type-badge {
		grid-column: 1 / -1 !important;
		order: -1 !important;
		justify-self: start !important;
		margin: 0 0 4px !important;
	}

	.hledu-course-learn__tabs-row.hledu-dashboard-nav button {
		justify-content: center !important;
		min-height: var(--hledu-touch) !important;
		margin: 0 !important;
		padding: 8px !important;
		border: 1px solid var(--hledu-border) !important;
		border-radius: var(--hledu-radius) !important;
		white-space: normal !important;
		text-align: center !important;
	}

	.hledu-course-learn__tabs-row.hledu-dashboard-nav button.active,
	.hledu-course-learn__tabs-row.hledu-dashboard-nav button:hover {
		background: var(--hledu-primary-light) !important;
		border-color: var(--hledu-primary) !important;
	}

	/* Mark complete / Previous / Next: full width and finger-sized; labels
	   may wrap and buttons may shrink (nowrap labels ran 9px past the card
	   at 320px). */
	.hledu-course-learn__header-actions {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.hledu-course-learn__header-row>* {
		min-width: 0 !important;
	}

	#hledu-learn-status,
	.hledu-frontend .hledu-course-learn__quick-nav-btn {
		min-height: var(--hledu-touch) !important;
		min-width: 0 !important;
		font-size: 14px !important;
		white-space: normal !important;
	}
}

.hledu-course-learn__quiz-meta {
	display: flex;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 12px 0 !important;
}

.hledu-course-learn__quiz-meta span {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius) !important;
	padding: 6px 12px !important;
}

.hledu-course-learn__resources {
	margin-top: 20px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-course-learn__resources h3 {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 10px !important;
}

.hledu-course-learn__resource {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	background: var(--hledu-bg) !important;
	border: 1px solid var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius) !important;
	margin-bottom: 8px !important;
}

.hledu-course-learn__resource:last-child {
	margin-bottom: 0 !important;
}

.hledu-course-learn__resource-icon {
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
	display: flex;
}

.hledu-course-learn__resource-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.hledu-course-learn__resource-name {
	flex: 1 !important;
	min-width: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__resource-size {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
}

/* The icon-only Download button's default .hledu-icon-btn color
   (var(--hledu-text-muted)) is too light here — darken it to match body text.
   Its :hover background (var(--hledu-bg)) is also the exact same color as
   this row's own background, so on hover it visually vanished — give it a
   distinct hover tint too. */
.hledu-course-learn__resource .hledu-icon-btn {
	color: var(--hledu-text) !important;
}

.hledu-course-learn__resource .hledu-icon-btn:hover {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-learn__lesson-header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 8px !important;
}

.hledu-course-learn__lesson-header h2 {
	font-size: 17px !important;
	margin: 0 !important;
}

.hledu-lesson-item__link {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 !important;
	min-width: 0 !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	text-align: left !important;
	cursor: pointer !important;
}

.hledu-lesson-item__link span:not(.hledu-lesson-item__icon) {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item {
	border-left: 3px solid transparent !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item:hover {
	background: var(--hledu-bg) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item--active {
	background: var(--hledu-primary-light) !important;
	border-left-color: var(--hledu-primary) !important;
}

.hledu-course-learn__curriculum .hledu-lesson-item--active .hledu-lesson-item__icon {
	color: var(--hledu-primary) !important;
}

/* Dimmed-until-completed only applies to this page's curriculum — the
   public course-single preview uses the same icon for its own locked/free
   states and must not be affected. */
.hledu-course-learn__curriculum .hledu-lesson-item__icon {
	opacity: 0.35;
}

.hledu-course-learn__curriculum .hledu-lesson-item--completed .hledu-lesson-item__icon {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Rating stars
   -------------------------------------------------------------------------- */
.hledu-stars {
	display: inline-flex;
	gap: 1px !important;
	color: #f59e0b !important;
	font-size: 14px !important;
}

.hledu-stars--sm {
	font-size: 11px !important;
}

.hledu-stars--lg {
	font-size: 18px !important;
}

/* --------------------------------------------------------------------------
   9. Progress bar
   -------------------------------------------------------------------------- */
.hledu-progress {
	background: var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	height: 8px !important;
	overflow: hidden !important;
}

.hledu-progress__fill {
	height: 100% !important;
	background: var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-full) !important;
	transition: width 0.4s ease !important;
}

.hledu-progress__fill--success {
	background: var(--hledu-success) !important;
}

.hledu-progress__fill--warning {
	background: var(--hledu-warning) !important;
}

/* --------------------------------------------------------------------------
   10. Curriculum / lesson list
   -------------------------------------------------------------------------- */
.hledu-curriculum {
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}

.hledu-section {
	border-bottom: 1px solid var(--hledu-border) !important;
}

.hledu-section:last-child {
	border-bottom: none !important;
}

.hledu-section__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 16px !important;
	background: var(--hledu-bg) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	gap: 12px !important;
	user-select: none !important;
}

.hledu-section__title {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.hledu-section__index {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

.hledu-section__chevron {
	flex-shrink: 0 !important;
	color: var(--hledu-text-light) !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-section__header--open .hledu-section__chevron {
	transform: rotate(-180deg) !important;
}

/* When every lesson in a module is complete, swap the chevron for a
   checkmark — the header keeps toggling the accordion exactly the same,
   only the icon it shows changes. */
.hledu-section__check {
	display: none !important;
	flex-shrink: 0 !important;
	color: var(--hledu-success) !important;
}

.hledu-section--complete .hledu-section__chevron {
	display: none;
}

.hledu-section--complete .hledu-section__check {
	display: inline-flex !important;
}

/* Title takes the free space and the lesson count sits in a fixed,
   right-aligned slot next to the chevron, so the counts line up in one
   column (QC: with space-between each "N lektioner" sat at a different x
   depending on its module title's length). */
.hledu-section__header>.hledu-section__title {
	flex: 1 1 auto !important;
}

.hledu-section__meta {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	min-width: 80px !important;
	text-align: right !important;
}

.hledu-lesson-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hledu-lesson-item {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 16px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-lesson-item a {
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
	flex: 1 !important;
}

.hledu-lesson-item a:hover {
	text-decoration: underline !important;
}

.hledu-lesson-item__icon {
	color: var(--hledu-text-light) !important;
	flex-shrink: 0 !important;
	display: inline-flex;
}

.hledu-lesson-item__icon .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
}

/* Both the type icon and the completed checkmark stay in the DOM — CSS
   swaps which one shows, so toggling --completed on/off never needs to
   overwrite/restore innerHTML. */
.hledu-lesson-item__icon-done {
	display: none !important;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon-default {
	display: none;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon-done {
	display: inline-flex !important;
}

.hledu-lesson-item__duration {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	margin-left: auto !important;
	white-space: nowrap !important;
}

.hledu-lesson-item--completed .hledu-lesson-item__icon {
	color: var(--hledu-success) !important;
}

/* A quiz item stays --active (its media panel is what's on screen) at the
   moment it's marked --completed — unlike a lesson, which advances to the
   next item instead. .hledu-course-learn__curriculum .hledu-lesson-item--active
   .hledu-lesson-item__icon above is one class more specific than the plain
   .hledu-lesson-item--completed rule, so without this override the active
   (blue) color always won and the checkmark never actually looked green. */
.hledu-course-learn__curriculum .hledu-lesson-item--active.hledu-lesson-item--completed .hledu-lesson-item__icon {
	color: var(--hledu-success) !important;
}

.hledu-lesson-item--locked .hledu-lesson-item__icon {
	color: var(--hledu-border) !important;
}

/* --------------------------------------------------------------------------
   11. Enroll card (sidebar)
   -------------------------------------------------------------------------- */
.hledu-enroll-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	padding: 24px !important;
	position: sticky !important;
	top: 24px !important;
}

.hledu-enroll-card__price {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.hledu-enroll-card__price--free {
	color: var(--hledu-success) !important;
	font-size: 22px !important;
}

.hledu-enroll-card__features {
	list-style: none !important;
	padding: 0 !important;
	margin: 16px 0 !important;
}

.hledu-enroll-card__features li {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 0 !important;
	font-size: 13px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-enroll-card__features li:last-child {
	border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   12. Student dashboard nav
   -------------------------------------------------------------------------- */
.hledu-dashboard-nav {
	display: flex;
	gap: 0 !important;
	border-bottom: 2px solid var(--hledu-border) !important;
	margin-bottom: 24px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}

.hledu-dashboard-nav::-webkit-scrollbar {
	display: none;
}

.hledu-dashboard-nav a {
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
	white-space: nowrap !important;
	transition: color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-dashboard-nav a:hover,
.hledu-dashboard-nav a.active {
	color: var(--hledu-primary) !important;
	border-bottom-color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   13. Course hero (single course page) — full-width within the theme page
   -------------------------------------------------------------------------- */

/* Hides the active block theme's own "Page" template title block (the
   large "Single course" header + its padding, rendered above the_content)
   — added via body_class() only on this page, see
   Hledu_Frontend_Course::add_single_course_body_class(). Leaves every
   other page's title untouched. */
body.hledu-course-single-page main>div:first-child:not(.entry-content) {
	display: none;
}

/* The theme's own block-spacing margin/padding around the content area —
   removed so the hero sits flush against the site header (no leftover gap)
   and the page can actually reach full width (the theme's global left/right
   padding otherwise eats into it even with .hledu-course-page's own
   max-width overridden below). */
body.hledu-course-single-page main,
body.hledu-course-single-page .entry-content {
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Same treatment for the [hledu_course_list] page — hides the theme's
   title block and reclaims the theme's global padding, see
   Hledu_Frontend_Course::add_single_course_body_class(). */
body.hledu-course-list-page main>div:first-child:not(.entry-content) {
	display: none;
}

body.hledu-course-list-page main,
body.hledu-course-list-page .entry-content {
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The theme's block-editor "constrained" layout caps its direct children
   (this div included) at its own narrow content width — override it so
   .hledu-course-page__inner's own 1280px max-width actually has room to
   apply, both inside the hero and in the content below it. */
.hledu-course-page {
	max-width: none !important;
}

.hledu-course-page__inner {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
}

.hledu-course-page .hledu-fe-form-layout {
	margin-top: 40px !important;
}

.hledu-course-hero {
	background: #111827 !important;
	color: #fff !important;
	padding: 48px 0 !important;
	/* Breaks out of the theme's normal (padded/constrained) content column
	   so the hero still spans the full browser width, keeping the theme's
	   own header/footer intact above and below. Actual left/right margins
	   are set by JS (measured from the real layout) — 100vw-based CSS alone
	   overshoots by the scrollbar's width and causes horizontal overflow. */
}

.hledu-course-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr !important;
	gap: 48px !important;
	align-items: center !important;
}

.hledu-course-hero__breadcrumb {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	margin-bottom: 16px !important;
}

.hledu-course-hero__breadcrumb a {
	color: var(--hledu-text-light) !important;
	text-decoration: none !important;
}

.hledu-course-hero__breadcrumb a:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

.hledu-course-hero__badge {
	margin-bottom: 12px !important;
}

.hledu-course-hero__title {
	font-size: 34px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	margin: 0 0 14px !important;
	/* The active theme's own block-editor heading color styles otherwise
	   win the cascade here — force white so the title reads on the dark hero. */
	color: #fff !important;
}

.hledu-course-hero__desc {
	font-size: 15px !important;
	color: var(--hledu-text-light) !important;
	margin-bottom: 24px !important;
	max-width: 520px !important;
}

.hledu-course-hero__stats {
	display: flex;
	flex-wrap: wrap !important;
	gap: 28px !important;
}

.hledu-course-hero__stat {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-course-hero__stat .dashicons {
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
	color: var(--hledu-primary-light) !important;
	flex-shrink: 0 !important;
}

.hledu-course-hero__stat div {
	display: flex;
	flex-direction: column !important;
	line-height: 1.3 !important;
}

.hledu-course-hero__stat strong {
	font-size: 14px !important;
	font-weight: 700 !important;
}

.hledu-course-hero__stat span {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-course-hero__media-frame {
	position: relative !important;
	aspect-ratio: 16 / 9 !important;
	border-radius: var(--hledu-radius-lg) !important;
	overflow: hidden !important;
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.35) !important;
	background: rgb(255 255 255 / 0.06) !important;
}

.hledu-course-hero__media-frame img,
.hledu-course-hero__media-frame iframe {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover !important;
	border: none !important;
}

.hledu-course-hero__media-caption {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--hledu-text-light) !important;
	margin: 12px 0 0 !important;
}

.hledu-course-single-about {
	max-height: 8.4em !important;
	overflow: hidden !important;
}

.hledu-course-single-about--expanded {
	max-height: none !important;
}

.hledu-course-single-about :first-child {
	margin-top: 0 !important;
}

.hledu-course-single-about :last-child {
	margin-bottom: 0 !important;
}

.hledu-course-single-about__toggle {
	display: flex;
	align-items: center !important;
	gap: 4px !important;
	margin-top: 12px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hledu-primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-course-single-about__toggle .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-course-single-about__toggle--open .dashicons {
	transform: rotate(180deg) !important;
}

.hledu-course-single-curriculum-header-actions {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
}

.hledu-course-single-expand-all {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hledu-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-course-single-expand-all:hover {
	text-decoration: underline !important;
}

.hledu-enroll-card>.hledu-btn {
	margin-bottom: 20px !important;
}

.hledu-enroll-card__includes-label {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 4px 0 !important;
}

.hledu-enroll-card__features li .dashicons {
	font-size: 15px !important;
	width: 15px !important;
	height: 15px !important;
	color: var(--hledu-text-light) !important;
}

.hledu-enroll-card__share {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin-top: 16px !important;
	padding: 10px !important;
	background: none !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-enroll-card__share:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-single-more {
	margin-top: 24px !important;
}

.hledu-course-single-more__item {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
	text-decoration: none !important;
	color: inherit !important;
}

.hledu-course-single-more__item:last-child {
	border-bottom: none !important;
}

.hledu-course-single-more__thumb {
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--hledu-radius-sm) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

.hledu-course-single-more__thumb--fallback {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
}

.hledu-course-single-more__info {
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
}

.hledu-course-single-more__title {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

.hledu-course-single-more__item:hover .hledu-course-single-more__title {
	color: var(--hledu-primary) !important;
}

.hledu-course-single-more__price {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-cta-banner {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
	background: var(--hledu-primary-light) !important;
	border-radius: var(--hledu-radius-lg) !important;
	padding: 28px 32px !important;
	margin: 8px 0 40px !important;
}

.hledu-course-cta-banner__icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-course-cta-banner__icon .dashicons {
	font-size: 26px !important;
	width: 26px !important;
	height: 26px !important;
	color: var(--hledu-primary) !important;
}

.hledu-course-cta-banner__text {
	flex: 1 !important;
	min-width: 200px !important;
}

.hledu-course-cta-banner__text h2 {
	margin: 0 0 4px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-course-cta-banner__text p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-course-cta-banner .hledu-btn .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

/* --------------------------------------------------------------------------
   14. Quiz / form
   -------------------------------------------------------------------------- */
.hledu-quiz-question {
	margin-bottom: 28px !important;
}

.hledu-quiz-question__text {
	font-size: 15px !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	line-height: 1.5 !important;
}

.hledu-quiz-option {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-quiz-option:hover {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
}

.hledu-quiz-option input {
	flex-shrink: 0 !important;
}

.hledu-quiz-option--correct {
	border-color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
}

.hledu-quiz-option--wrong {
	border-color: var(--hledu-danger) !important;
	background: var(--hledu-danger-light) !important;
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hledu-course-page__inner {
		padding: 0 20px !important;
	}

	.hledu-course-hero {
		padding: 32px 0 !important;
	}

	.hledu-course-hero__grid {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	.hledu-course-hero__desc {
		max-width: none !important;
	}

	.hledu-course-cta-banner {
		flex-wrap: wrap !important;
		padding: 24px !important;
	}
}

@media (max-width: 768px) {
	.hledu-course-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.hledu-course-hero__title {
		font-size: 24px !important;
	}
}

@media (max-width: 480px) {
	.hledu-course-grid {
		grid-template-columns: 1fr !important;
	}

	.hledu-certificate-grid {
		grid-template-columns: 1fr !important;
	}

	/* Full-text labels don't fit 3-across on a phone-width card — shrink to
	   icon-only (title attr still gives the label on hover/long-press) so
	   View Details / Download Certificate / ⋮ stay on one row. */
	.hledu-certificate-card__footer .hledu-btn:not(.hledu-icon-btn) {
		padding: 7px !important;
		gap: 0 !important;
	}

	.hledu-certificate-card__footer-label {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   16. Course list — full-width page, toolbar, grid, search & pagination
   -------------------------------------------------------------------------- */

/* Vertical breathing room in place of the theme's title block (hidden via
   the body.hledu-course-list-page rules above) — this page has no colored
   hero band, so plain padding is enough; no JS full-bleed breakout needed. */
/* Course detail, single column (≤900px): the enroll/price card is the
   page's primary action but sat after About + Curriculum, about two
   screens down on a phone. display:contents lets the sidebar's two cards
   join the layout grid, so the enroll card can be ordered right under the
   hero and "You might also like" last. Visual order only — the DOM (and so
   screen-reader/keyboard order) is unchanged; sticky is dropped since the
   card is no longer beside the content. */
@media (max-width: 900px) {
	.hledu-course-page .hledu-fe-form-layout>.hledu-fe-form-sidebar {
		display: contents;
	}

	.hledu-course-page .hledu-fe-form-layout .hledu-enroll-card {
		order: -1 !important;
		position: static !important;
	}

	.hledu-course-page .hledu-fe-form-layout .hledu-course-single-more {
		order: 2 !important;
	}

	.hledu-course-page .hledu-fe-form-layout>.hledu-fe-form-main {
		order: 1 !important;
	}
}

/* Top/bottom only: the same element is also .hledu-course-page__inner,
   whose side padding (40px, 20px ≤900px) the old "padding: 40px 0 64px"
   shorthand silently reset to 0 — cards touched the screen edges. */
.hledu-course-list-page-content {
	padding-top: 40px !important;
	padding-bottom: 64px !important;
}

.hledu-course-list__toolbar {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-bottom: 28px !important;
}

/* Fixed at 3 per row (unlike the auto-fill .hledu-course-grid used
   elsewhere), per explicit request. Compound selector so it wins over
   .hledu-course-grid's own responsive breakpoints regardless of source
   order. */
.hledu-course-grid.hledu-course-list-grid {
	grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1100px) {
	.hledu-course-grid.hledu-course-list-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 700px) {
	.hledu-course-grid.hledu-course-list-grid {
		grid-template-columns: 1fr !important;
	}
}

.hledu-course-list__search {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	max-width: 420px !important;
	width: 100% !important;
	position: relative !important;
}

.hledu-course-list__search .dashicons-search {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--hledu-text-light) !important;
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	pointer-events: none !important;
}

/* min-width:0 so the field shrinks and the Search button stays on screen
   (an input's intrinsic width otherwise pushed it off at 320px). */
.hledu-course-list__search-input {
	flex: 1 !important;
	min-width: 0 !important;
	padding: 10px 14px 10px 40px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 999px !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-family: inherit;
}

.hledu-course-list__search-input:focus-visible {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-course-list__pagination {
	display: flex;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 24px !important;
}

.hledu-course-list__pagination-link {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 10px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-bg-card) !important;
	color: var(--hledu-text) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-course-list__pagination-link:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

.hledu-course-list__pagination-link--active {
	background: var(--hledu-primary) !important;
	border-color: var(--hledu-primary) !important;
	color: #fff !important;
}

/* ==========================================================================
   Employee Frontend Dashboard  — Module 04
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.hledu-emp-dashboard {
	max-width: var(--hledu-container) !important;
	margin: 0 auto !important;
	padding: 32px 16px !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hledu-emp-header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-emp-header h1 {
	margin: 0 0 4px !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.2 !important;
}

.hledu-emp-header__role {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hledu-btn {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 18px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), color var(--hledu-transition) !important;
	border: none !important;
	line-height: 1 !important;
}

.hledu-btn--primary {
	background: var(--hledu-primary) !important;
	color: #fff !important;
}

.hledu-btn--primary:hover {
	background: var(--hledu-primary-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ── Notice ──────────────────────────────────────────────────────────────── */
.hledu-fe-notice {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-notice--error {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	border: 1px solid var(--hledu-danger) !important;
}

.hledu-fe-notice--success {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
	border: 1px solid var(--hledu-success) !important;
}

.hledu-fe-notice--info {
	background: var(--hledu-info-light) !important;
	color: var(--hledu-info) !important;
	border: 1px solid var(--hledu-info) !important;
}

/* ── Error / permission-mismatch page — centered glass card shown on
   standalone dashboard pages when a logged-in user's role doesn't match
   the page (e.g. Platform Staff visiting /employee-dashboard/), with a
   Back to Home button to that user's own dashboard. ── */
.hledu-error-page {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh !important;
	padding: 24px !important;
}

.hledu-error-page__card {
	max-width: 420px !important;
	width: 100% !important;
	text-align: center !important;
	padding: 48px 32px !important;
	border-radius: var(--hledu-radius-xl) !important;
}

.hledu-error-page__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 20px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-error-page__icon .dashicons {
	font-size: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

.hledu-error-page__code {
	margin: 0 0 8px !important;
	font-size: 56px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-error-page__message {
	margin: 0 0 28px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.hledu-fe-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow) !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}

.hledu-fe-card__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 20px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-fe-card__header h2 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-card__body {
	padding: 0 !important;
}

/* Card headers that carry a title plus a whole toolbar next to it (e.g. the
   Courses list's title+badge, layout toggle, status filter, search and
   "Skapa kurs" button) don't fit on one line on phones/tablets. The toolbar
   (.hledu-fe-card__header-actions) already wraps internally, but the header
   itself didn't, so it was squeezed onto the same row as the title instead
   of dropping to its own — collapsing the search input down to its icon and
   crowding every button together. */
@media (max-width: 700px) {
	.hledu-frontend .hledu-fe-card__header {
		flex-wrap: wrap !important;
	}
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
/* nowrap: a two-line pill ("Not / started") in a narrow table column reads
   as two badges; the column grows a little instead. */
.hledu-fe-badge {
	display: inline-block;
	padding: 2px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.hledu-fe-badge--neutral {
	background: var(--hledu-border-light) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-badge--publish,
.hledu-fe-badge--active {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-fe-badge--draft {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-fe-badge--inactive,
.hledu-fe-badge--suspended {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

/* An employee's own course-progress status (Module 15) — distinct from a
   course's publish-status badge above, so it gets its own modifiers rather
   than reusing --draft/--active/--inactive under a confusing name. */
.hledu-fe-badge--not-started {
	background: var(--hledu-border-light) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-badge--in-progress {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-fe-badge--completed {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.hledu-fe-table-wrap {
	overflow-x: auto !important;
}

/* Certificates table only — the share "⋮" menu (.hledu-cert-share-menu)
   opens as an absolutely-positioned popover above its row; overflow-x:auto
   above also computes overflow-y to auto (not visible), which would clip
   it, so this table opts back out. It's not wide enough to need the
   horizontal scroll the base rule exists for. */
.hledu-fe-table-wrap.hledu-cert-table-wrap {
	overflow: visible !important;
}

/* ...except on phones: at that width the table (Course/Certificate ID/
   Issued/Status/Actions) no longer fits, and the enclosing .hledu-fe-card's
   own overflow:hidden was silently clipping the Status/Actions columns
   with no way to reach them. Scrolling wins over the share popover here —
   losing whole columns of data is worse than the popover being clipped if
   opened while the table happens to be scrolled. */
@media (max-width: 600px) {
	.hledu-fe-table-wrap.hledu-cert-table-wrap {
		overflow-x: auto !important;
	}
}

.hledu-fe-table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
}

.hledu-fe-table th,
.hledu-fe-table td {
	text-align: left !important;
	padding: 12px 20px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

/* On phones these tables (Managers/Employees/Courses/etc.) are already
   horizontally scrollable (.hledu-fe-table-wrap), but the full 20px side
   padding on every cell exaggerates the gap around short values (a single
   digit count, a status badge) — tightening it here shows more of the next
   column before the user has to scroll for it. */
@media (max-width: 480px) {

	.hledu-frontend .hledu-fe-table th,
	.hledu-frontend .hledu-fe-table td {
		padding: 10px 12px !important;
	}
}

/* Tablets/small laptops: 20px side padding on 5–7 columns is 200–280px of
   pure padding, enough on its own to push a table past its card. */
@media (min-width: 481px) and (max-width: 1280px) {

	.hledu-frontend .hledu-fe-table th,
	.hledu-frontend .hledu-fe-table td {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Large phones / small tablets (just above the ≤600px card-view default):
   the last ~30px needed for a 5-column course table to fit its card. */
@media (min-width: 481px) and (max-width: 700px) {

	.hledu-frontend .hledu-fe-table th,
	.hledu-frontend .hledu-fe-table td {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.hledu-frontend .hledu-course-row-progress .hledu-progress {
		width: 44px !important;
	}
}

.hledu-fe-table th {
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	background: var(--hledu-bg) !important;
}

.hledu-fe-table tbody tr:hover {
	background: var(--hledu-bg) !important;
}

.hledu-fe-table tbody tr:last-child td {
	border-bottom: none !important;
}

.hledu-fe-action-link {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

.hledu-fe-action-link:hover {
	text-decoration: underline !important;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.hledu-fe-empty {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 48px 24px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-fe-empty svg {
	opacity: 0.35;
}

.hledu-fe-empty p {
	margin: 0 !important;
	font-size: 15px !important;
}

.hledu-fe-empty__note {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.hledu-emp-header {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* ── Employee header actions (logout + create) ───────────────────────────── */
.hledu-emp-header__actions {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.hledu-btn--logout {
	background: transparent !important;
	color: var(--hledu-danger) !important;
	border: 1px solid var(--hledu-danger) !important;
}

.hledu-btn--logout:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	text-decoration: none !important;
}

/* ── Super admin preview bar ─────────────────────────────────────────────── */
.hledu-emp-superadmin-bar {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	background: #1e1b4b !important;
	color: #c7d2fe !important;
	padding: 10px 20px !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-bottom: 20px !important;
}

.hledu-emp-superadmin-bar__actions {
	display: flex;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.hledu-btn--switch {
	background: #3730a3 !important;
	color: #e0e7ff !important;
	border: 1px solid #4338ca !important;
}

.hledu-btn--switch:hover {
	background: #4338ca !important;
	color: #fff !important;
	text-decoration: none !important;
}

.hledu-btn--back-admin {
	background: transparent !important;
	color: #a5b4fc !important;
	border: 1px solid #4338ca !important;
}

.hledu-btn--back-admin:hover {
	background: #312e81 !important;
	color: #fff !important;
	text-decoration: none !important;
}

.hledu-btn--sm {
	padding: 6px 12px !important;
	font-size: 13px !important;
}

/* ── Manager Learner Mode toggle (Manager dashboard header) ─────────────── */
.hledu-learner-toggle {
	display: inline-flex;
	align-items: center !important;
	gap: 10px !important;
}

.hledu-learner-toggle__label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-learner-toggle__switch {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	width: 42px !important;
	height: 24px !important;
	padding: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 999px !important;
	background: var(--hledu-bg-card) !important;
	cursor: pointer !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-learner-toggle__switch::before {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: var(--hledu-text-muted) !important;
	transition: transform var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-learner-toggle__switch:hover {
	border-color: var(--hledu-primary) !important;
}

.hledu-learner-toggle__switch--on {
	background: var(--hledu-primary) !important;
	border-color: var(--hledu-primary) !important;
}

.hledu-learner-toggle__switch--on::before {
	transform: translateX(18px) !important;
	background: #fff !important;
}

/* ==========================================================================
   Company Account Frontend Dashboard — Module 11
   ========================================================================== */

/* Every standalone dashboard shell (Company, Company Manager, Company
   Employee, Platform Owner, Platform Staff, Course Learn) relies on the
   theme's own body background matching --hledu-bg — true by coincidence in
   light mode, but with no dark-mode override this left the page background
   stuck light while the sidebar/cards correctly went dark. */
body.hledu-standalone-page {
	background: var(--hledu-bg) !important;
}

.hledu-company-dashboard {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 32px 16px !important;
}

/* Some components on this page reuse admin CSS (form inputs, buttons, the
   header-user dropdown), which sets its own font-family directly on those
   elements — inheriting on the wrapper alone doesn't reach them. The extra
   "body" type selector guarantees this wins over those rules regardless of
   stylesheet load order, without touching admin.css itself. .mce-ico is
   also excluded, same as .dashicons — those are the Description editor's
   toolbar button icons, which need TinyMCE's own icon font to render at
   all instead of showing every button as the same fallback glyph. */
body .hledu-company-dashboard,
body .hledu-company-dashboard *:not(.dashicons):not(.mce-ico) {
	font-family: inherit;
}

/* The dashboard renders its own header — hide the theme's auto-generated
   page title and featured image on this page only. Targets the title/image
   blocks directly (not a shared ancestor wrapper): several default block
   themes, including Twenty Twenty-Five, nest post-title and post-content
   inside the SAME wp-block-group, so hiding that wrapper hid the dashboard
   itself. The theme's own site header/nav and the actual page content are
   untouched. */
body.hledu-company-dashboard-page .wp-block-post-title,
body.hledu-company-dashboard-page .wp-block-post-featured-image,
body.hledu-company-dashboard-page .entry-title,
body.hledu-company-dashboard-page .page-title {
	display: none;
}

/* ── Demo data disclosure banner ─────────────────────────────────────────── */
.hledu-frontend .hledu-demo-banner {
	display: flex;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	margin-bottom: 24px !important;
	background: var(--hledu-warning-light) !important;
	border: 1px solid var(--hledu-warning) !important;
	border-radius: var(--hledu-radius-lg) !important;
	color: var(--hledu-text) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.hledu-frontend .hledu-demo-banner .dashicons {
	color: var(--hledu-warning) !important;
	flex-shrink: 0 !important;
}

.hledu-frontend .hledu-demo-tag {
	display: inline-flex;
	align-items: center !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	padding: 2px 8px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
	white-space: nowrap !important;
}

/* ── App shell: sticky sidebar + main content ────────────────────────────── */
.hledu-company-app {
	display: grid;
	grid-template-columns: 260px 1fr !important;
	gap: 24px !important;
	align-items: start !important;
}

@media (max-width: 900px) {
	.hledu-company-app {
		grid-template-columns: 1fr !important;
	}
}

/* Grid items default to min-width:auto, which floors their track at the
   content's own min-content size — without this, .hledu-company-main's
   bento grid/topbar refuse to shrink below their desktop min-content width
   even after the 900px breakpoint above switches the app shell to a single
   column, forcing the whole page to overflow horizontally on phones. */
.hledu-company-app>* {
	min-width: 0 !important;
}

.hledu-company-sidebar {
	position: sticky !important;
	top: 20px !important;
	display: flex;
	flex-direction: column !important;
	gap: 16px !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	padding: 20px 16px !important;
}

.hledu-company-sidebar__brand {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 4px 12px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-company-sidebar__brand-logo {
	height: 34px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.hledu-company-nav {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-company-nav__item {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 12px !important;
	border-radius: var(--hledu-radius) !important;
	color: var(--hledu-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), color var(--hledu-transition) !important;
}

.hledu-company-nav__item svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
}

.hledu-company-nav__item:hover:not(.hledu-company-nav__item--disabled) {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-company-nav__item--active {
	color: var(--hledu-primary) !important;
}

.hledu-company-nav__item--disabled {
	opacity: 0.5;
	cursor: default !important;
	pointer-events: none !important;
}

.hledu-company-nav__soon {
	margin-left: auto !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	padding: 2px 6px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-border) !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-company-sidebar__help {
	margin-top: auto !important;
	padding: 28px 20px 22px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-primary-light) !important;
	text-align: left !important;
}

.hledu-company-sidebar__help-icon {
	width: 76px !important;
	height: 76px !important;
	margin: 0 0 18px !important;
	border-radius: 50% !important;
	background: var(--hledu-surface) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-company-sidebar__help-icon svg {
	color: var(--hledu-primary) !important;
	width: 32px !important;
	height: 32px !important;
}

.hledu-company-sidebar__help h3 {
	margin: 0 0 8px !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-company-sidebar__help p {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 18px !important;
	line-height: 1.5 !important;
}

.hledu-company-sidebar__help .hledu-btn--primary {
	display: flex;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border-radius: var(--hledu-radius-lg) !important;
	font-size: 14px !important;
}

.hledu-company-sidebar__help-btn-icon {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: rgb(255 255 255 / 0.2) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-company-sidebar__help-btn-icon svg {
	width: 14px !important;
	height: 14px !important;
	color: #fff !important;
}

/* ── Sidebar → compact top bar (481px–768px) ─────────────────────────────────
   Below the 900px breakpoint the sidebar already stacks above the main
   column; at 768px it's compacted further into a single short strip: the
   logo stays put on the left, the nav (previously a column of links) moves
   into one row to its right, and the Need Help card collapses onto its own
   row below (icon | text | button) instead of the tall stacked/centered
   card. Because .hledu-company-sidebar keeps its existing position:sticky;
   top:20px (unchanged), this whole now-short strip — nav row AND the help
   bar — stays reachable while scrolling the page below it; the z-index just
   keeps it visually on top of the bento cards it then overlaps.
   Bounded to a min-width so it doesn't reach the ≤480px phone sizes already
   tuned separately (5 nav items in one row need real width) — phones are a
   deliberately separate pass. */
@media (min-width: 481px) and (max-width: 768px) {
	.hledu-frontend .hledu-company-sidebar {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 10px 16px !important;
		z-index: 10 !important;
	}

	.hledu-frontend .hledu-company-sidebar__brand {
		padding: 0 12px 0 0 !important;
		border-bottom: none !important;
		border-right: 1px solid var(--hledu-border) !important;
		flex-shrink: 0 !important;
	}

	.hledu-frontend .hledu-company-nav {
		flex: 1 !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
		gap: 2px !important;
	}

	.hledu-frontend .hledu-company-nav__item {
		padding: 6px 8px !important;
		gap: 6px !important;
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-company-nav__item svg {
		width: 15px !important;
		height: 15px !important;
	}

	/* Forces the help card onto its own row below the brand+nav row above,
	   inside the same wrapping flex sidebar. */
	.hledu-frontend .hledu-company-sidebar__help {
		flex-basis: 100% !important;
		margin-top: 0 !important;
		display: grid !important;
		grid-template-columns: auto 1fr auto !important;
		grid-template-rows: auto auto !important;
		align-items: center !important;
		column-gap: 12px !important;
		row-gap: 0 !important;
		padding: 12px 16px !important;
		text-align: left !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon svg {
		width: 20px !important;
		height: 20px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help h3 {
		grid-column: 2 !important;
		grid-row: 1 !important;
		margin: 0 !important;
		font-size: 14px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help p {
		grid-column: 2 !important;
		grid-row: 2 !important;
		margin: 0 !important;
		font-size: 11px !important;
	}

	.hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary {
		grid-column: 3 !important;
		grid-row: 1 / span 2 !important;
		width: auto !important;
		justify-content: center !important;
		padding: 8px 14px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}
}

/* ── Sidebar → floating icon rail (≤915px) ───────────────────────────────────
   Supersedes the 481–768px compact top-bar treatment above for the whole
   ≤915px range (placed after it in source order so it wins the overlap):
   the sidebar card is removed entirely — logo, nav labels, the "Need Help?"
   panel text, AND any container background/border/shadow — leaving bare
   icons attached directly to the left edge of the viewport, vertically
   centered. Each icon expands via a `max-width` transition (not `width`,
   which doesn't interpolate reliably to/from `auto`) on `:hover` ONLY
   (no `:focus-visible` — a click must not leave the label expanded) to
   reveal just that one icon's label, with no background/card behind it;
   moving to another icon collapses the previous one back down. Clicking
   behaves exactly as before — same <a href> elements, just restyled. The
   "Need Help?" card's existing button becomes the last icon (Contact
   Support), restyled to match the nav icons instead of keeping its
   gradient CTA look, since here it's one item in a uniform icon list, not
   a standalone call-to-action. */
@media (max-width: 915px) {
	.hledu-frontend .hledu-company-app {
		grid-template-columns: 1fr !important;
	}

	.hledu-frontend .hledu-company-sidebar {
		position: fixed !important;
		top: 50% !important;
		left: 6px !important;
		transform: translateY(-50%) !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		width: auto !important;
		gap: 6px !important;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		z-index: 50 !important;
		/* Safety net for pages with a longer nav list (e.g. Platform Staff's
		   11 items + Contact Support): on a short viewport, centering alone
		   can push the top icon(s) above y=0 with no way to reach them —
		   the rail has no scroll of its own otherwise. Inert everywhere the
		   list already fits (the common case, including Employee Dashboard's
		   shorter list) since nothing needs to scroll there. */
		max-height: calc(100vh - 16px) !important;
		overflow-y: auto !important;
		scrollbar-width: thin !important;
	}

	.hledu-frontend .hledu-company-sidebar__brand {
		display: none !important;
	}

	/* The 481–768px block above also matches this range and sets flex:1,
	   flex-direction:row, flex-wrap:wrap and justify-content:flex-end for
	   its row layout — explicitly reset here so this column rail doesn't
	   inherit any of that at those widths too. */
	.hledu-frontend .hledu-company-nav {
		flex: initial !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 8px !important;
	}

	/* Same reason — the 481–768px block also sets padding/gap/font-size/svg
	   size for a denser row layout; restated here so every icon in the rail
	   (including at those widths) matches the same size. */
	.hledu-frontend .hledu-company-nav__item {
		box-sizing: border-box !important;
		flex-shrink: 0 !important;
		/* Exactly padding-left(11) + icon width(18) — leaving zero content
		   width for the label's flex gap/text, so no sliver of its first
		   character peeks past the icon while collapsed (was 40px, which
		   left ~1px of the label visible as a stray "spot" next to every
		   icon). :hover below still expands to the full 220px label width. */
		max-width: 29px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		gap: 10px !important;
		font-size: 14px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		transition: max-width 0.25s ease, color var(--hledu-transition) !important;
	}

	.hledu-frontend .hledu-company-nav__item svg {
		width: 18px !important;
		height: 18px !important;
	}

	/* Gated on body.hledu-hover-ready (see hledu-frontend.js
	   bindHoverReadyGuard()) — without it, landing on this page from a
	   click with the cursor still over the same icon would show its
	   label as "stuck open" from a stale :hover match, not a real hover. */
	body.hledu-hover-ready .hledu-frontend .hledu-company-nav__item:hover {
		max-width: 220px !important;
		padding: 0 16px 0 11px !important;
		background: transparent !important;
	}

	/* Strips the big standalone panel look — this is now just a layout
	   wrapper around one more icon in the rail. Also resets flex-basis/
	   display:grid from the 481–768px block above (that range's row
	   layout put the help button in a grid column), so this wrapper is a
	   plain block around the button at every width in this rail. */
	.hledu-frontend .hledu-company-sidebar__help {
		flex-basis: auto !important;
		margin-top: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border-radius: 0 !important;
		display: block !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-icon,
	.hledu-frontend .hledu-company-sidebar__help h3,
	.hledu-frontend .hledu-company-sidebar__help p {
		display: none !important;
	}

	.hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: auto !important;
		flex-shrink: 0 !important;
		/* Same fix as .hledu-company-nav__item above — was 40px, leaving a
		   sliver of the "Kontakta support" label visible as a stray spot. */
		max-width: 29px !important;
		height: 40px !important;
		padding: 0 0 0 11px !important;
		margin: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--hledu-text) !important;
		box-shadow: none !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		transition: max-width 0.25s ease, color var(--hledu-transition) !important;
	}

	body.hledu-hover-ready .hledu-frontend .hledu-company-sidebar__help .hledu-btn--primary:hover {
		max-width: 220px !important;
		padding: 0 16px 0 11px !important;
		background: transparent !important;
		color: var(--hledu-primary) !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-btn-icon {
		width: 18px !important;
		height: 18px !important;
		background: transparent !important;
	}

	.hledu-frontend .hledu-company-sidebar__help-btn-icon svg {
		width: 18px !important;
		height: 18px !important;
		color: inherit !important;
	}

	/* Leaves room so main content doesn't sit under the floating rail. */
	.hledu-frontend .hledu-company-main {
		padding-left: 56px !important;
	}
}

/* ── Sidebar → off-canvas drawer (≤915px, JS-enhanced) ──────────────────────
   Replaces the hover-only icon rail above whenever hledu-admin.js has added
   .hledu-has-drawer to the shell (see bindMobileDrawer()); without JS the
   rail above still applies. The rail could only reveal its labels on mouse
   hover, so on phones/tablets the navigation was a column of unlabeled
   icons that also took ~56px of an already narrow screen.
   Here the sidebar keeps its full desktop content (logo, labelled nav, help
   card) and slides in from the left over a backdrop when ☰ is tapped.
   Selectors are prefixed with "body … .hledu-company-app.hledu-has-drawer"
   so they outrank the rail's rules (including its body.hledu-hover-ready
   :hover rules) on specificity — every rule in this file is !important, so
   source order alone can't settle it. The drawer slides in from the LEFT on
   purpose: content positioned off-screen to the left never widens a mobile
   layout viewport (off-screen to the right can). */
.hledu-drawer-bar,
.hledu-drawer-close,
.hledu-drawer-backdrop {
	display: none;
}

@media (max-width: 915px) {
	html.hledu-drawer-scroll-lock {
		overflow: hidden !important;
	}

	/* The wrapper's page fade-in (hledu-fade-slide-in) animates transform;
	   while any transform is applied, the wrapper — not the screen — is the
	   containing block for the position:fixed drawer, which then becomes
	   page-tall and shifted off-screen. Normally the 220ms animation is long
	   over before ☰ is tapped, but it can be paused (background tab) or
	   still running; stopping it while the drawer is open makes the drawer
	   always position against the screen. */
	.hledu-frontend:has(.hledu-drawer-open) {
		animation: none !important;
		transform: none !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer>.hledu-company-sidebar {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		transform: translateX(-105%) !important;
		width: min(300px, 86vw) !important;
		max-height: none !important;
		height: 100% !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 16px !important;
		padding: 16px !important;
		background: var(--hledu-surface) !important;
		border: none !important;
		border-right: 1px solid var(--hledu-border) !important;
		border-radius: 0 !important;
		box-shadow: var(--hledu-shadow-lg) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		z-index: 1001 !important;
		visibility: hidden !important;
		transition: transform 0.25s ease, visibility 0s linear 0.25s !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer.hledu-drawer-open>.hledu-company-sidebar {
		transform: translateX(0) !important;
		visibility: visible !important;
		transition: transform 0.25s ease, visibility 0s linear 0s !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-backdrop {
		display: block;
		position: fixed !important;
		inset: 0 !important;
		background: rgb(15 23 42 / 0.45) !important;
		z-index: 1000 !important;
		visibility: hidden !important;
		opacity: 0;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer.hledu-drawer-open .hledu-drawer-backdrop {
		visibility: visible !important;
		opacity: 1;
		transition: opacity 0.25s ease, visibility 0s linear 0s !important;
	}

	/* ✕ — top-right corner of the drawer, beside the logo row. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-close {
		display: inline-flex;
		align-self: flex-end !important;
		align-items: center !important;
		justify-content: center !important;
		width: var(--hledu-touch) !important;
		height: var(--hledu-touch) !important;
		margin: -8px -8px -52px 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: var(--hledu-radius-full) !important;
		background: transparent !important;
		color: var(--hledu-text-muted) !important;
		cursor: pointer !important;
		position: relative !important;
		z-index: 1 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-close:hover {
		background: var(--hledu-bg) !important;
		color: var(--hledu-text) !important;
	}

	/* !important display: the rail above hides the logo with display:none
	   !important; nothing toggles this element from JS. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__brand {
		display: flex !important;
		padding: 0 52px 12px 4px !important;
		min-height: var(--hledu-touch) !important;
		border-right: none !important;
		border-bottom: 1px solid var(--hledu-border) !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-nav {
		flex: initial !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-nav__item {
		max-width: none !important;
		height: auto !important;
		min-height: var(--hledu-touch) !important;
		padding: 10px 12px !important;
		gap: 12px !important;
		font-size: 15px !important;
		overflow: visible !important;
		white-space: normal !important;
		transition: background var(--hledu-transition), color var(--hledu-transition) !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-nav__item--active {
		background: var(--hledu-primary-light) !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-nav__item:hover:not(.hledu-company-nav__item--disabled) {
		max-width: none !important;
		padding: 10px 12px !important;
		background: var(--hledu-primary-light) !important;
	}

	/* Help card: the desktop card, slightly more compact. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help {
		display: block !important;
		flex-basis: auto !important;
		margin-top: auto !important;
		padding: 20px 16px 16px !important;
		border-radius: var(--hledu-radius-lg) !important;
		background: var(--hledu-primary-light) !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help-icon {
		display: flex !important;
		width: 48px !important;
		height: 48px !important;
		margin: 0 0 12px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help-icon svg {
		width: 24px !important;
		height: 24px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help h3,
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help p {
		display: block !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help h3 {
		font-size: 16px !important;
		margin: 0 0 4px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help p {
		margin: 0 0 12px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help .hledu-btn--primary,
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help .hledu-btn--primary:hover {
		display: flex !important;
		justify-content: center !important;
		max-width: none !important;
		width: 100% !important;
		height: auto !important;
		min-height: var(--hledu-touch) !important;
		padding: 10px 16px !important;
		border-radius: var(--hledu-radius-lg) !important;
		background: var(--hledu-primary) !important;
		background-image: var(--hledu-gradient-primary) !important;
		background-size: 200% 100% !important;
		color: #fff !important;
		overflow: visible !important;
		white-space: normal !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help-btn-icon {
		background: rgb(255 255 255 / 0.2) !important;
		width: 24px !important;
		height: 24px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-sidebar__help-btn-icon svg {
		width: 14px !important;
		height: 14px !important;
		color: #fff !important;
	}

	/* No rail any more → no left padding to make room for it. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-main {
		padding-left: 0 !important;
	}

	/* ☰ + logo row: first row of the top bar, full width. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-bar {
		display: flex;
		align-items: center !important;
		gap: 8px !important;
		flex: 0 0 auto !important;
		order: -2 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-toggle {
		display: inline-flex;
		align-items: center !important;
		justify-content: center !important;
		width: var(--hledu-touch) !important;
		height: var(--hledu-touch) !important;
		padding: 0 !important;
		margin-left: -6px !important;
		border: 1px solid var(--hledu-border) !important;
		border-radius: var(--hledu-radius) !important;
		background: var(--hledu-surface) !important;
		color: var(--hledu-text) !important;
		cursor: pointer !important;
		flex-shrink: 0 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-bar__brand {
		display: inline-flex;
		align-items: center !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-bar__brand img {
		height: 28px !important;
		width: auto !important;
		max-width: 140px !important;
		object-fit: contain !important;
	}

	/* Top bar rows: [☰ logo ……… bell avatar] / [greeting] / [search].
	   display:contents lifts the actions wrapper's children (search, bell,
	   user menu, any extra buttons) into the top bar's own flex row so they
	   can share row 1 with ☰ while the search drops below the greeting. */
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar {
		flex-wrap: wrap !important;
		align-items: center !important;
		row-gap: 12px !important;
		column-gap: 8px !important;
		margin-bottom: 20px !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar__actions {
		display: contents;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar__actions>* {
		order: -1 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-bar {
		margin-right: auto !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar__greeting {
		order: 0 !important;
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar__greeting h1 {
		font-size: var(--hledu-fs-h1) !important;
		line-height: 1.25 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar__actions>.hledu-header-search {
		order: 1 !important;
		flex: 1 1 100% !important;
	}
}

/* Phones: keep row 1 to one line. "Admin view" shows only its icon (the
   link keeps its aria-label, so its name is still announced), the avatar
   pill drops its decorative chevron, and when the header carries extra
   controls (Admin view / dark-mode toggle) the logo copy in the bar is
   dropped below 400px — the drawer itself still shows the logo. Without
   this the bell and avatar wrapped onto an orphaned second line. */
@media (max-width: 600px) {
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-header-frontend-btn {
		width: var(--hledu-touch) !important;
		height: var(--hledu-touch) !important;
		padding: 0 !important;
		justify-content: center !important;
		gap: 0 !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-header-frontend-btn span {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
	}
}

/* Phones: the notification panel (up to 340px) was anchored to the bell's
   own right edge; with the bell no longer at the far right it opened partly
   off the left side of the screen (Owner/Staff had no JS clamp; Employee's
   inline-JS clamp is superseded here). Instead it spans the top bar's full
   width just under row 1. Still position:absolute — a JS/dynamically shown
   position:fixed panel is known to widen the mobile layout viewport. The
   !important left/width intentionally win over the Employee clamp's inline
   values, which it resets itself on close. */
@media (max-width: 600px) {
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar {
		position: relative !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-notif-wrap {
		position: static !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-notif-dropdown {
		top: calc(var(--hledu-touch) + 8px) !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* Manager dashboard: the "Student mode" switch keeps its visible label (an
   unlabelled switch would be ambiguous), so the logo copy in the bar gives
   way to it on phones instead — otherwise the avatar wrapped onto its own
   line. The drawer still shows the logo. */
@media (max-width: 480px) {
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar:has(.hledu-learner-toggle) .hledu-drawer-bar__brand {
		display: none !important;
	}
}

@media (max-width: 400px) {
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-header-user__chevron {
		display: none !important;
	}

	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-company-topbar:has(.hledu-header-frontend-btn, .hledu-theme-toggle) .hledu-drawer-bar__brand {
		display: none !important;
	}
}

/* No transition while the drawer is first set up (see hledu-admin.js). */
body .hledu-frontend .hledu-company-app.hledu-drawer-init>.hledu-company-sidebar,
body .hledu-frontend .hledu-company-app.hledu-drawer-init .hledu-drawer-backdrop {
	transition: none !important;
}

@media (max-width: 915px) and (prefers-reduced-motion: reduce) {

	body .hledu-frontend .hledu-company-app.hledu-has-drawer>.hledu-company-sidebar,
	body .hledu-frontend .hledu-company-app.hledu-has-drawer .hledu-drawer-backdrop {
		transition: none !important;
	}
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.hledu-company-topbar {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.hledu-company-topbar__greeting h1 {
	margin: 0 0 4px !important;
	font-size: 24px !important;
}

.hledu-company-topbar__greeting p {
	margin: 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
}

/* Below ~900px the greeting (title/subtitle) and the actions cluster (search,
   Adminvy, bell, user menu) no longer fit on one row — wrap the actions onto
   their own full-width row instead of letting them squeeze the greeting text
   (which was forcing "Välkommen tillbaka, X" to break mid-word) and cramping
   the search input down to nothing. admin/css/hledu-admin.css also hides
   .hledu-header-search entirely below 900px for its own (wp-admin) layout —
   that rule bleeds into this shared component, so it's restored visible here. */
@media (max-width: 900px) {
	.hledu-frontend .hledu-company-topbar {
		flex-wrap: wrap !important;
	}

	.hledu-frontend .hledu-company-topbar__greeting {
		flex: 1 1 100% !important;
	}

	.hledu-frontend .hledu-company-topbar__actions {
		flex: 1 1 100% !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
	}

	.hledu-frontend .hledu-header-search {
		display: flex !important;
		order: -1 !important;
		flex: 1 1 100% !important;
	}

	.hledu-frontend .hledu-header-search__input {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.hledu-frontend .hledu-company-topbar__greeting h1 {
		font-size: 19px !important;
	}
}

.hledu-company-topbar__actions {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
	flex-shrink: 0 !important;
}

/* 916–1280px with the sidebar showing: the Owner/Staff top bar (search,
   Admin view, bell, user menu) is wider than the space next to the
   greeting and ran ~70px off the right edge. The bar may now wrap: the
   actions drop to their own right-aligned row only when they don't fit. */
@media (min-width: 901px) and (max-width: 1280px) {
	.hledu-frontend .hledu-company-topbar {
		flex-wrap: wrap !important;
	}

	.hledu-frontend .hledu-company-topbar__greeting {
		flex: 1 1 260px !important;
		min-width: 0 !important;
	}

	.hledu-frontend .hledu-company-topbar__actions {
		flex: 0 1 auto !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
		min-width: 0 !important;
		margin-left: auto !important;
	}
}

.hledu-company-topbar__bell {
	position: relative !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	color: var(--hledu-text) !important;
	font: inherit !important;
	padding: 0 !important;
	cursor: pointer !important;
}

/* On phones, the header-user button's name/role text (admin.css's
   .hledu-header-user__meta, reused on every standalone dashboard topbar —
   Company/Manager/Employee/Platform Owner/Staff) doesn't shrink
   (flex-shrink:0) and was overflowing the page next to the search/bell
   icons. Dropping just the text keeps the avatar+chevron tappable and
   still opens the same dropdown (Log Out, etc.). */
@media (max-width: 600px) {
	.hledu-frontend .hledu-header-user__meta {
		display: none !important;
	}

	.hledu-frontend .hledu-header-user {
		gap: 0 !important;
		padding: 4px !important;
	}
}

/* ── Notifications dropdown (Platform Owner topbar bell) ─────────────────── */
.hledu-notif-wrap {
	position: relative !important;
	flex-shrink: 0 !important;
}

.hledu-notif-dropdown {
	display: none;
	position: absolute !important;
	top: calc(100% + 8px) !important;
	right: 0 !important;
	width: 340px !important;
	max-width: calc(100vw - 32px) !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-md) !important;
	z-index: 1000 !important;
	overflow: hidden !important;
}

.hledu-notif-wrap.is-open .hledu-notif-dropdown {
	display: block;
}

.hledu-notif-dropdown__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-notif-clear-all {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.hledu-notif-clear-all:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-notif-dropdown__body {
	max-height: 360px !important;
	overflow-y: auto !important;
}

.hledu-notif-dropdown__body .hledu-fe-empty {
	padding: 32px 16px !important;
}

/* Read/unread states + row interactions — mirrors the same semantics as the
   wp-admin dashboard's own Recent Activity table (admin/css/hledu-admin.css). */
.hledu-notif-dropdown .hledu-activity-feed__row {
	cursor: pointer !important;
	position: relative !important;
	padding-right: 24px !important;
	padding-top: 10px !important;
	padding-left: 10px !important;
	transition: background 0.12s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--unread {
	background: var(--hledu-bg) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--unread .hledu-activity-feed__text {
	font-weight: 600 !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--read .hledu-activity-feed__text {
	color: var(--hledu-text-muted) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row:hover {
	background: var(--hledu-border-light) !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row--removing {
	pointer-events: none !important;
}

.hledu-notif-dropdown .hledu-activity-feed__title-link {
	color: inherit !important;
	text-decoration: underline !important;
	text-decoration-color: transparent !important;
	transition: text-decoration-color 0.15s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__title-link:hover {
	text-decoration-color: currentColor !important;
}

.hledu-notif-close {
	position: absolute !important;
	top: 6px !important;
	right: 2px !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s, color 0.15s !important;
}

.hledu-notif-dropdown .hledu-activity-feed__row:hover .hledu-notif-close {
	opacity: 1;
}

.hledu-notif-close:hover {
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
}

.hledu-company-topbar__bell-badge {
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-danger) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Subscription banner — 4 equal-width columns: plan / seats / renewal / manage ── */
/* minmax(0, 1fr) + a 2×2 layout at 701–1200px: four 1fr columns were
   floored at their content width and pushed the Manage button past the
   screen edge at ~920px (sidebar showing). */
.hledu-subscription-banner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	align-items: center !important;
	gap: 20px !important;
	padding: 20px 24px !important;
	margin-bottom: 24px !important;
	background: var(--hledu-primary-light) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
}

@media (min-width: 701px) and (max-width: 1200px) {
	.hledu-subscription-banner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Second column of each row: no divider on its right edge. */
	.hledu-subscription-banner__seats {
		border-right: none !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 700px) {
	.hledu-subscription-banner {
		grid-template-columns: 1fr !important;
	}

	.hledu-subscription-banner__plan,
	.hledu-subscription-banner__seats,
	.hledu-subscription-banner__renewal {
		border-right: none !important;
		padding-right: 0 !important;
	}
}

.hledu-subscription-banner__plan {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
}

.hledu-subscription-banner__icon {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: var(--hledu-gradient-primary) !important;
	color: #fff !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-subscription-banner__plan-text strong {
	display: block;
	font-size: 15px !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__plan-text span {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__seats {
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
}

.hledu-subscription-banner__seats-value {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__seats-value small {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__seats-label {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-bottom: 6px !important;
}

.hledu-subscription-banner__renewal {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	border-right: 1px solid var(--hledu-border) !important;
	padding-right: 20px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__renewal-text span {
	display: block;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-subscription-banner__renewal-text strong {
	display: block;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-subscription-banner__manage {
	display: flex;
	justify-content: flex-end !important;
}

.hledu-subscription-banner__manage .hledu-btn {
	white-space: nowrap !important;
}

/* ── Stat cards with icon + trend (mirrors admin's .hledu-stat-card) ─────── */
.hledu-frontend .hledu-stat-card {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
	padding: 18px !important;
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

/* .hledu-bento-card sets flex-direction: column further down this file and
   would otherwise silently override the icon/value row layout above (equal
   specificity, later rule wins) — same fix as admin/css/hledu-admin.css. */
.hledu-frontend .hledu-stat-card.hledu-bento-card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-frontend .hledu-stat-icon-circle {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.hledu-frontend .hledu-stat-icon-circle .dashicons {
	font-size: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

.hledu-frontend .hledu-stat-card--students .hledu-stat-icon-circle {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-frontend .hledu-stat-card--active .hledu-stat-icon-circle {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-stat-card--employees .hledu-stat-icon-circle {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

.hledu-frontend .hledu-stat-card--courses .hledu-stat-icon-circle {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-frontend .hledu-stat-body {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-frontend .hledu-stat-value {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	line-height: 1 !important;
}

/* Wraps at word boundaries instead of admin.css's nowrap + ellipsis:
   "ENROLLED COUR…" / "CERTIFICATES EA…" hid what the number meant at
   laptop widths. */
.hledu-frontend .hledu-stat-label {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	white-space: normal !important;
	overflow: visible !important;
	overflow-wrap: normal !important;
	line-height: 1.3 !important;
}

.hledu-frontend .hledu-stat-trend {
	font-size: 11px !important;
	font-weight: 700 !important;
	margin-top: 2px !important;
}

.hledu-frontend .hledu-stat-trend--up {
	color: var(--hledu-success) !important;
}

.hledu-frontend .hledu-stat-trend--flat {
	color: var(--hledu-text-light) !important;
}

.hledu-frontend .hledu-stat-trend--down {
	color: var(--hledu-danger) !important;
}

/* ── Learning progress + quick actions row ───────────────────────────────── */
.hledu-company-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

@media (max-width: 900px) {
	.hledu-company-row-2 {
		grid-template-columns: 1fr !important;
	}
}

/* Reports page's Course Completion Rates / Top Performers row — 2:1
   (Course Completion Rates 2/3, Top Performers 1/3), instead of the base
   class's 3 equal columns. */
/* Bounded to >900px: unbounded, this two-class rule beat the one-class
   ≤900px single-column rule above at every width (same trap as the Owner
   dashboard's 2:1 row), squeezing Top Performers into a ~100px column on
   phones. */
@media (min-width: 901px) {
	.hledu-company-row-2.hledu-report-row-2 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
	}
}

/* Scoped to just this card (not the shared .hledu-fe-card/.hledu-fe-card__body
   classes used elsewhere) so its content fills the row's stretched height
   instead of sitting top-anchored with empty space below. */
.hledu-progress-card {
	display: flex;
	flex-direction: column !important;
}

.hledu-progress-card .hledu-fe-card__body {
	flex: 1 !important;
	display: flex;
}

.hledu-progress-highlight {
	display: flex;
	align-items: center !important;
	flex: 1 !important;
	gap: 20px !important;
	padding-left: 20px !important;
	position: relative !important;
	overflow: hidden !important;
}

/* The padding above never applied: admin.css's ".hledu-fe-card__body
   { padding: 0 }" has the same specificity and loads after this file on
   the dashboards, so the "Average completion rate" caption sat 1px from
   the card edge (QC: increase padding). Two classes win. */
.hledu-fe-card__body.hledu-progress-highlight {
	padding: 16px 20px !important;
}

.hledu-progress-highlight .hledu-ring-track,
.hledu-progress-highlight .hledu-ring-fill {
	stroke-width: 8 !important;
}

.hledu-progress-highlight p {
	margin: 8px 0 4px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

.hledu-progress-ring-wrap {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	position: relative !important;
	z-index: 1 !important;
	margin: auto 0 !important;
}

/* 8px gap under the ring (QC: the caption touched / overlapped the
   ring — admin.css had -4px, which wins on the dashboards). */
.hledu-progress-ring-caption {
	margin-top: 8px !important;
	font-size: 10px !important;
	color: var(--hledu-text-muted) !important;
	text-align: center !important;
}

.hledu-progress-highlight__text {
	position: relative !important;
	z-index: 1 !important;
	margin: auto 0 !important;
}

.hledu-progress-highlight__trend {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hledu-success) !important;
}

.hledu-progress-highlight__trend--down {
	color: var(--hledu-danger) !important;
}

.hledu-progress-highlight__trend--flat {
	color: var(--hledu-text-muted) !important;
}

.hledu-progress-highlight__trend .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
}

.hledu-progress-highlight__trend-note {
	font-weight: 500 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-progress-highlight__deco {
	position: absolute !important;
	right: 8px !important;
	bottom: 0 !important;
	color: var(--hledu-primary-light) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

/* ── Quick actions ────────────────────────────────────────────────────────── */
/* minmax(0, 1fr): plain 1fr tracks are floored at their label's
   min-content width, which pushed the third tile past the card at 1024px. */
/* Up to 3 columns, fewer when the card itself is narrow: each column is at
   least a third of the row or 72px, whichever is larger — so a full-width
   card keeps 3 tiles, while the Owner dashboard's one-third-width card at
   ~920px (145px inside) drops to fewer columns instead of overflowing. */
.hledu-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(72px, calc((100% - 24px) / 3)), 1fr)) !important;
	gap: 12px !important;
}

.hledu-quick-action__label {
	overflow-wrap: anywhere !important;
	min-width: 0 !important;
}

.hledu-quick-action {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 14px 8px !important;
	border-radius: var(--hledu-radius-lg) !important;
	color: var(--hledu-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: transform var(--hledu-transition), box-shadow var(--hledu-transition) !important;
}

.hledu-quick-action:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--hledu-shadow-md) !important;
}

.hledu-quick-action__icon {
	width: 44px !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-quick-action--purple {
	background: var(--hledu-secondary-light) !important;
}

.hledu-quick-action--purple .hledu-quick-action__icon {
	color: var(--hledu-secondary) !important;
}

.hledu-quick-action--green {
	background: var(--hledu-success-light) !important;
}

.hledu-quick-action--green .hledu-quick-action__icon {
	color: var(--hledu-success) !important;
}

.hledu-quick-action--blue {
	background: var(--hledu-primary-light) !important;
}

.hledu-quick-action--blue .hledu-quick-action__icon {
	color: var(--hledu-primary) !important;
}

.hledu-quick-action--orange {
	background: var(--hledu-warning-light) !important;
}

.hledu-quick-action--orange .hledu-quick-action__icon {
	color: var(--hledu-warning) !important;
}

.hledu-quick-action--teal {
	background: var(--hledu-info-light) !important;
}

.hledu-quick-action--teal .hledu-quick-action__icon {
	color: var(--hledu-info) !important;
}

.hledu-quick-action--pink {
	background: var(--hledu-danger-light) !important;
}

.hledu-quick-action--pink .hledu-quick-action__icon {
	color: var(--hledu-danger) !important;
}

/* ── Three-column row: top courses / students by manager / activity ─────── */
.hledu-company-row-3 {
	display: grid;
	grid-template-columns: 3fr 7fr !important;
	align-items: stretch !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

.hledu-company-row-3>.hledu-fe-card {
	display: flex;
	flex-direction: column !important;
	height: 100% !important;
}

@media (max-width: 1100px) {
	.hledu-company-row-3 {
		grid-template-columns: 1fr !important;
	}
}

.hledu-course-mini-icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--hledu-radius-sm) !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-right: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.hledu-course-row-title {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
}

a.hledu-course-row-title {
	color: inherit !important;
	text-decoration: none !important;
}

a.hledu-course-row-title:hover .hledu-course-row-title__text {
	color: var(--hledu-primary) !important;
	text-decoration: underline !important;
}

/* Wraps (up to 2 lines, then an ellipsis) instead of nowrap: in an
   auto-layout table a nowrap ellipsis never actually truncates — the
   column just grows to the full title, which made every course table
   ~1000px wide and scroll sideways on anything narrower than ~1440px. */
.hledu-course-row-title__text {
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--hledu-text) !important;
	min-width: 12ch !important;
	overflow: hidden !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
}

.hledu-course-mini-thumb {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--hledu-radius-sm) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

/* Employee Dashboard's "Continue Learning" / "Latest Quiz" bento cards,
   above Top Courses — reuse .hledu-fe-badge/.hledu-progress/.hledu-btn
   above, just need their own row/column layout wrappers. */
.hledu-bento-card__header-actions {
	display: flex;
	align-items: center !important;
	gap: 12px !important;
}

.hledu-fe-view-all {
	display: inline-flex;
	align-items: center !important;
	gap: 2px !important;
}

.hledu-fe-view-all__chevron {
	flex-shrink: 0 !important;
}

.hledu-latest-course {
	display: flex;
	align-items: center !important;
	gap: 14px !important;
}

.hledu-latest-course__avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

.hledu-latest-course__avatar--img {
	object-fit: cover !important;
}

.hledu-latest-course__body {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

/* Up to two lines, then an ellipsis — one line cut most course titles to
   their first few words at every width. */
.hledu-latest-course__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	line-height: 1.35 !important;
	overflow: hidden !important;
	display: -webkit-box;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

.hledu-latest-course__percent {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-latest-course__cta {
	flex-shrink: 0 !important;
}

.hledu-latest-course__meta {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

.hledu-latest-course__status {
	white-space: nowrap !important;
}

/* Narrow card: thumbnail + title/progress share the first row, the call to
   action gets its own full-width row below — side by side, the button
   squeezed the title down to "AI Automatio…" and wrapped the status pill.
   A container query, not a media query: the card is narrow both on phones
   and in the 4-column tablet bento (where it spans 2 of 4 columns), so the
   card's own width is what matters. Only cards that hold this component
   become containers (via :has), so no other card's absolutely/fixed-
   positioned popovers are affected by the containment. */
.hledu-frontend .hledu-bento-card:has(> .hledu-latest-course) {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.hledu-latest-course {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}

	.hledu-frontend .hledu-latest-course__cta {
		flex: 1 1 100% !important;
		min-height: var(--hledu-touch) !important;
	}
}

.hledu-latest-quiz {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
}

.hledu-latest-quiz__body {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 6px !important;
}

.hledu-latest-quiz__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-latest-quiz__course {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-latest-quiz__meta {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-top: 4px !important;
}

.hledu-latest-quiz__score {
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-latest-quiz__dot {
	color: var(--hledu-text-light) !important;
}

.hledu-latest-quiz__icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.hledu-course-row-progress {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
}

.hledu-course-row-progress .hledu-progress {
	width: 70px !important;
}

.hledu-course-row-progress span {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	white-space: nowrap !important;
}

/* Employee-progress status badge, stacked under the bar+percent row above
   it in the same "Progress" table cell (Module 15). */
.hledu-course-row-progress+.hledu-fe-badge {
	margin-top: 6px !important;
}

/* ── Mini list (Students by Manager) ─────────────────────────────────────── */
.hledu-mini-list {
	display: flex;
	flex-direction: column !important;
}

.hledu-mini-list__row {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 4px !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-mini-list__row:last-child {
	border-bottom: none !important;
}

.hledu-mini-list__avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	flex-shrink: 0 !important;
}

/* min-width:0 + wrapping so a long name (double-barrelled surnames) wraps
   instead of pushing the count badge out of the card; the row wraps so
   the badge drops under the name when there is no room beside it. */
.hledu-mini-list__row {
	flex-wrap: wrap !important;
}

.hledu-mini-list__name {
	flex: 1 1 120px !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-mini-list__count-badge {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
	padding: 4px 10px !important;
	border-radius: var(--hledu-radius-full) !important;
	white-space: nowrap !important;
}

.hledu-fe-view-all {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
}

.hledu-switch-link {
	display: inline-flex;
	align-items: center !important;
	gap: 4px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-primary) !important;
}

.hledu-switch-link svg {
	flex-shrink: 0 !important;
}

.hledu-fe-view-all--disabled {
	color: var(--hledu-text-light) !important;
	cursor: default !important;
}

/* ── Students panel — header filter/search, avatar+subtitle cell, action-buttons row ── */
.hledu-fe-card__header-actions {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* flex-wrap: two filters + a search box didn't fit beside the card title
   on phones; without wrapping the last control ran off the card edge. */
.hledu-students-toolbar {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	min-width: 0 !important;
}

/* Narrow: the toolbar takes the header's full second row; filters share a
   row (each at least ~140px), search gets its own full-width row. */
@media (max-width: 700px) {
	.hledu-frontend .hledu-fe-card__header-actions {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.hledu-frontend .hledu-students-toolbar {
		flex: 1 1 100% !important;
	}

	.hledu-frontend .hledu-students-toolbar .hledu-select,
	.hledu-frontend .hledu-fe-card__header .hledu-students-toolbar .hledu-select {
		flex: 1 1 140px !important;
		max-width: none !important;
	}

	.hledu-frontend .hledu-students-toolbar .hledu-search-wrap {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.hledu-frontend .hledu-students-toolbar .hledu-search-input {
		width: 100% !important;
		max-width: none !important;
	}
}

/* Match the search box's border radius to the status select's — they
   otherwise inherit different radii (pill vs standard) from the shared
   admin classes reused here. */
.hledu-students-toolbar .hledu-search-input {
	border-radius: var(--hledu-radius) !important;
}

.hledu-user-cell__info {
	display: flex;
	flex-direction: column !important;
	gap: 2px !important;
}

.hledu-user-cell__sub {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-user-cell__link {
	color: inherit !important;
	text-decoration: none !important;
}

.hledu-user-cell__link:hover {
	color: var(--hledu-primary) !important;
	text-decoration: underline !important;
}

.hledu-fe-actions-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.hledu-fe-actions-row__group {
	display: flex;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* Shared grid template for both the header row and every course row, so
   "Student Number" / "Progress" / "All Course" line up exactly with the
   data cells beneath them. */
.hledu-top-courses-row,
.hledu-fe-card__header.hledu-top-courses-row--head {
	display: grid;
	grid-template-columns: 3fr 80px 140px 100px !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Platform Owner/Staff dashboards' own Top Courses card: the 3rd column
   holds a plain Company count instead of a progress bar, so it needs the
   same narrow width as the Employees column — scoped to this modifier so
   the Company/Company Manager dashboards' own Progress column (still a bar)
   keeps its wider column. */
.hledu-top-courses-row--company-col {
	grid-template-columns: 3fr 80px 80px 100px !important;
}

/* The header row carries this modifier too, but the two-class header rule
   above outranked the one-class modifier, so the header kept the 140px
   column while the rows used 80px — "Employees"/"Company" sat 60px left
   of their values (QC). Three classes win over both files' two-class
   rules; the ≤480px phone rule below still overrides it (same specificity,
   later in the file). */
.hledu-fe-card__header.hledu-top-courses-row--head.hledu-top-courses-row--company-col {
	grid-template-columns: 3fr 80px 80px 100px !important;
}

/* On phones the 80/80/100px fixed columns (plus gaps) left almost nothing
   for the course title, which wrapped word-by-word into a tall, cramped
   column — this row is inside the Platform Owner dashboard's Bästa
   kurser card, still only ~350px wide even after that card goes full-width
   below (see .hledu-owner-row-2-1's 1100px breakpoint above). */
/* Phones (QC): the 4-column row (title | 34px | 34px | actions) broke the
   header labels letter by letter ("EMPL / OYEE / S") and overlapped the
   numbers with long titles. A two-row layout with the column labels only
   in the card header was still hard to read (bare "25  0" far below
   "EMPLOYEES  COMPANY"), so each row now carries its own labels: title +
   actions on row 1, "EMPLOYEES 25 · COMPANY 0" (or the progress bar)
   under the title on row 2. The labels come from each value's data-label attribute (same
   translated strings as the header); the header keeps only the card
   title and "All courses". */
@media (max-width: 560px) {

	/* Actions stay on the title row so the label line gets the full row
	   width (Staff rows have three action buttons). */
	.hledu-frontend .hledu-top-courses-row,
	.hledu-frontend .hledu-top-courses-row--company-col {
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		grid-template-areas: "t t a" "e c c" !important;
		gap: 4px 14px !important;
	}

	.hledu-frontend .hledu-fe-card__header.hledu-top-courses-row--head,
	.hledu-frontend .hledu-fe-card__header.hledu-top-courses-row--head.hledu-top-courses-row--company-col {
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas: "t a" !important;
	}

	.hledu-frontend .hledu-fe-card__header.hledu-top-courses-row--head>span {
		display: none;
	}

	.hledu-frontend .hledu-top-courses-row> :nth-child(1) {
		grid-area: t !important;
	}

	.hledu-frontend .hledu-top-courses-row> :nth-child(2) {
		grid-area: e !important;
		/* Lines up under the title text (32px icon + its 8px margin + 8px gap). */
		padding-left: 48px !important;
	}

	.hledu-frontend .hledu-top-courses-row> :nth-child(3) {
		grid-area: c !important;
	}

	.hledu-frontend .hledu-top-courses-row> :nth-child(4) {
		grid-area: a !important;
		justify-self: end !important;
		align-self: center !important;
	}

	.hledu-frontend .hledu-top-courses-row>[data-label] {
		display: inline-flex;
		align-items: center !important;
		gap: 6px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: var(--hledu-text) !important;
		white-space: nowrap !important;
	}

	.hledu-frontend .hledu-top-courses-row>[data-label]::before {
		content: attr(data-label) !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
		color: var(--hledu-text-muted) !important;
	}

	/* Company/Manager variant (count + progress bar): too wide for an
	   indented line, so it starts at the row's left edge and the bar flexes. */
	.hledu-frontend .hledu-top-courses-row:has(> .hledu-course-row-progress)> :nth-child(2) {
		padding-left: 0 !important;
	}

	.hledu-frontend .hledu-top-courses-row>.hledu-course-row-progress .hledu-progress {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 32px !important;
		max-width: 100px !important;
	}

	.hledu-frontend .hledu-top-courses-row__action .hledu-fe-action-link {
		white-space: nowrap !important;
		font-size: 12px !important;
	}
}

.hledu-top-courses-row--head span {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-top-courses-row--head .hledu-fe-view-all {
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: right !important;
}

.hledu-top-courses-row__action {
	text-align: right !important;
}

.hledu-top-courses-row__action.hledu-row-actions {
	justify-content: flex-end !important;
}

.hledu-top-courses-row:not(.hledu-top-courses-row--head) {
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-top-courses-row:not(.hledu-top-courses-row--head):last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* Platform Owner Dashboard — Top Courses card body: no extra top breathing
   room above the first row (it already touches the header divider), but the
   bottom padding from .hledu-fe-card__body--pad stays so the last row's
   content doesn't hug the card's bottom edge/border. */
.hledu-fe-card__body--pad.hledu-top-courses-body {
	padding-top: 0 !important;
}

/* ── Activity feed (Recent Activity) ──────────────────────────────────────── */
.hledu-activity-feed {
	display: flex;
	flex-direction: column !important;
}

.hledu-activity-feed__row {
	display: flex;
	gap: 10px !important;
	padding: 4px 0 16px !important;
	position: relative !important;
}

.hledu-activity-feed__icon {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	z-index: 1 !important;
}

.hledu-activity-feed__icon .dashicons {
	font-size: 15px !important;
	width: 15px !important;
	height: 15px !important;
}

.hledu-activity-feed__icon--completed {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-activity-feed__icon--added {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-activity-feed__icon--certificate {
	background: var(--hledu-warning-light) !important;
	color: var(--hledu-warning) !important;
}

/* flex: 1 + min-width: 0 so long activity text wraps inside the row
   instead of extending it past the card. */
.hledu-activity-feed__text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	line-height: 1.4 !important;
	overflow-wrap: anywhere !important;
}

.hledu-activity-feed__time {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
}

/* Platform Staff dashboard only — icon moves from the left of the stat card
   to a small badge bottom-right, freeing the full card width for the
   value/label/trend text. Scoped to this modifier only (three-class
   compound selector, matching .hledu-frontend .hledu-stat-card.hledu-bento-card's
   own specificity) so the Company/Employee dashboards' stat cards are
   untouched. */
.hledu-frontend .hledu-stat-card.hledu-bento-card.hledu-stat-card--icon-corner {
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	position: relative !important;
	padding: 15px !important;
}

/* Shared admin decorative corner glow (.hledu-stat-card::after) is tuned
   for the standard 130px card — shrink it to fit this page's smaller,
   icon-corner cards. Scoped to this page only via .hledu-frontend, so the
   Super Admin dashboard's own stat cards keep their original glow size. */
.hledu-frontend .hledu-stat-card--icon-corner::after {
	width: 100px !important;
	height: 100px !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-value {
	font-size: 28px !important;
	line-height: 1 !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle {
	position: absolute !important;
	right: 12px !important;
	bottom: 6px !important;
	width: 40px !important;
	height: 40px !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle .dashicons {
	font-size: 19px !important;
	width: 19px !important;
	height: 19px !important;
}

/* Platform-Wide Completion — a dedicated vertical layout (ring, then text,
   then trend, all centered) instead of reusing the shared horizontal
   .hledu-progress-highlight row: that row centers its content within
   whatever height the grid row stretches it to, which looked disconnected
   once it sat beside the taller Platform Growth chart. Stacking vertically
   keeps the whole block centered together regardless of card height. */
.hledu-platform-completion {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	flex: 1 !important;
	gap: 6px !important;
	padding: 12px !important;
}

/* Wraps Platform-Wide Completion + Certification Pass Rate so the two
   split the grid row's height evenly (matching Platform Growth beside
   them) instead of one lone ring card looking mismatched next to a
   taller chart card. */
.hledu-platform-completion-col {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	height: 100% !important;
}

.hledu-platform-completion-col .hledu-fe-card {
	flex: 1 !important;
	min-height: 0 !important;
	margin-bottom: 0 !important;
}

/* Card-header selects (e.g. the Platform Growth range filter) inherit
   .hledu-select's width:100%/max-width:500px, which — unconstrained inside a
   flex header — stretches into an oversized dropdown next to the card
   title. Cap it to a compact, right-aligned control instead. */
.hledu-fe-card__header .hledu-select {
	width: auto !important;
	/* Was 150px — too tight for "Senaste 12 månaderna", clipping the option
	   text against the dropdown arrow with no breathing room either side. */
	max-width: 190px !important;
	padding: 6px 30px 6px 10px !important;
	font-size: 12px !important;
	text-overflow: ellipsis !important;
}

/* ── 60/40 row: Top Courses (main) / Recent Activity (compact) ──────────── */
.hledu-company-row-60-40 {
	display: grid;
	grid-template-columns: 6fr 4fr !important;
	gap: 20px !important;
	margin-bottom: 24px !important;
}

@media (max-width: 1100px) {
	.hledu-company-row-60-40 {
		grid-template-columns: 1fr !important;
	}

	/* .hledu-owner-row-2-1 below sets a 2:1 split with the same specificity
	   as the base 60/40 rule (both two classes) but no media query of its
	   own, so it was winning on specificity at every width and this stack
	   never actually applied to the Platform Owner dashboard's Top Courses /
	   Recent Activity row — leaving Bästa kurser's 4-column mini-table
	   squeezed into ~66% of a phone/tablet width and its content wrapping
	   letter-by-letter. */
	.hledu-company-row-60-40.hledu-owner-row-2-1 {
		grid-template-columns: 1fr !important;
	}
}

/* Platform Owner dashboard's Top Courses / Recent Activity row — 2:1 instead
   of the base class's 6:4, so the columns line up with the 3-equal-column
   row above it (.hledu-company-row-2). */
/* Bounded to >1100px: unbounded, this rule came after the ≤1100px stacking
   rule above with the same specificity and won at every width — on a phone
   the Recent Activity card was squeezed into an 89px-wide column. */
@media (min-width: 1101px) {
	.hledu-company-row-60-40.hledu-owner-row-2-1 {
		grid-template-columns: 2fr 1fr !important;
	}
}

/* ── Platform Growth chart — hand-drawn SVG line chart, sample data.
   Re-rendered client-side when the range select changes (see inline script
   in dashboard-platform-staff.php) — still no server round-trip. ───────── */
.hledu-growth-chart__svg {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.hledu-growth-chart__grid {
	stroke: var(--hledu-border) !important;
	stroke-width: 1 !important;
}

.hledu-growth-chart__axis-label,
.hledu-growth-chart__month-label {
	font-size: 11px !important;
	fill: var(--hledu-text-muted) !important;
}

/* Right-hand axis (New Companies) is tinted to match its line, since it
   shares the same gridlines as the left axis but a different scale. */
.hledu-growth-chart__axis-label--companies {
	fill: var(--hledu-secondary) !important;
}

.hledu-growth-chart__line {
	fill: none !important;
	stroke-width: 2.5 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.hledu-growth-chart__line--employees {
	stroke: var(--hledu-primary) !important;
}

.hledu-growth-chart__line--companies {
	stroke: var(--hledu-secondary) !important;
}

.hledu-growth-chart__line--logins {
	stroke: var(--hledu-info) !important;
}

.hledu-growth-chart__point--employees {
	fill: var(--hledu-primary) !important;
}

.hledu-growth-chart__point--companies {
	fill: var(--hledu-secondary) !important;
}

.hledu-growth-chart__point--logins {
	fill: var(--hledu-info) !important;
}

/* Wraps so the three legend items never run past the card on a narrow
   phone (17px over at 320px). */
.hledu-growth-chart__legend {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px 20px !important;
	margin-top: 12px !important;
}

.hledu-growth-chart__legend-item {
	display: flex;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-growth-chart__legend-swatch {
	width: 14px !important;
	height: 3px !important;
	border-radius: 2px !important;
	display: inline-block;
}

.hledu-growth-chart__legend-swatch--employees {
	background: var(--hledu-primary) !important;
}

.hledu-growth-chart__legend-swatch--logins {
	background: var(--hledu-info) !important;
}

/* ── Layout toggle (List/Card) — My Courses ──────────────────────────────── */
.hledu-layout-toggle {
	display: inline-flex;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	overflow: hidden !important;
}

.hledu-layout-toggle__btn {
	display: inline-flex;
	align-items: center !important;
	gap: 5px !important;
	padding: 7px 12px !important;
	border: none !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.hledu-layout-toggle__btn svg {
	width: 14px !important;
	height: 14px !important;
}

.hledu-layout-toggle__btn+.hledu-layout-toggle__btn {
	border-left: 1.5px solid var(--hledu-border) !important;
}

.hledu-layout-toggle__btn:hover {
	background: var(--hledu-bg) !important;
}

.hledu-layout-toggle__btn.hledu-layout-toggle__btn--active {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

/* Fallback thumbnail (no course image) for the Card layout — a big
   initial-letter tile filling the same 16:9 area a real thumbnail would. */
.hledu-course-card__thumb--fallback {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
	font-size: 32px !important;
	font-weight: 800 !important;
}

.hledu-course-card__enrolled {
	color: var(--hledu-text-light) !important;
}

/* Platform Owner's Courses page — Card layout, fixed at 4 per row (unlike
   the auto-fill .hledu-course-grid used elsewhere) per explicit request. */
.hledu-owner-course-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
}

/* Card layout only — list layout's .hledu-course-card__body padding is
   untouched. */
.hledu-owner-course-grid .hledu-course-card__body {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

@media (max-width: 1100px) {
	.hledu-owner-course-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.hledu-owner-course-grid {
		grid-template-columns: 1fr !important;
	}
}

.hledu-growth-chart__legend-swatch--companies {
	background: var(--hledu-secondary) !important;
}

/* ==========================================================================
   Course Form — Frontend
   ========================================================================== */

/* ── Layout ── */
.hledu-fe-course-form {
	max-width: var(--hledu-container) !important;
	margin: 0 auto !important;
}

.hledu-fe-course-form__nav {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

/* Phones: back link + page title + (on detail pages) action buttons wrap
   instead of running past the screen edge. */
@media (max-width: 600px) {
	.hledu-fe-course-form__nav {
		flex-wrap: wrap !important;
		row-gap: 8px !important;
	}
}

.hledu-fe-course-form__nav h1 {
	margin: 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-back-link {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	color: var(--hledu-text-muted) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
}

.hledu-fe-back-link:hover {
	color: var(--hledu-primary) !important;
	text-decoration: none !important;
}

/* minmax(0, 1fr) rather than plain 1fr: a 1fr track is floored at its
   content's min-content width, so one wide child (a nowrap button row, a long
   word) made the main column wider than the phone screen and the excess was
   silently clipped by .hledu-frontend's overflow guard. */
.hledu-fe-form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px !important;
	gap: 24px !important;
	align-items: start !important;
}

@media (max-width: 900px) {
	.hledu-fe-form-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.hledu-fe-form-main,
.hledu-fe-form-sidebar {
	display: flex;
	flex-direction: column !important;
	gap: 20px !important;
	min-width: 0 !important;
}

/* ── Card ── */
.hledu-fe-card {
	background: var(--hledu-bg-card) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	overflow: hidden !important;
}

.hledu-fe-card__header {
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
}

.hledu-fe-card__header h2 {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-card__body--pad {
	padding: 20px !important;
}

/* Students table bleeds to the card edges — its cells already carry their
   own 20px horizontal padding, so this cancels the card body's padding for
   the table only; other content in the same card (alerts, pagination) keeps it. */
.hledu-fe-card__body--pad .hledu-fe-table-wrap {
	margin: 0 -20px !important;
}

/* Students list card only — top and bottom padding removed, left/right kept. */
.hledu-students-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Managers list card only — mirrors .hledu-students-list-body. */
.hledu-managers-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Platform Owner's Courses list card only — mirrors .hledu-students-list-body. */
.hledu-courses-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Students by Manager / Top Student cards only. */
.hledu-mini-list-body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Students list pagination — info text left, page numbers right, one row. */
.hledu-students-pagination-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.hledu-students-pagination-row .hledu-pagination-info {
	text-align: left !important;
	margin: 0 !important;
}

/* Add/Edit Student card only — .hledu-fe-card's overflow:hidden would clip
   the course-assign tag-picker's dropdown, same reason the admin panel uses
   .hledu-card--overflow-visible around this same picker. Also covers the
   Company edit form's merged Assignment card (company-form.php), same
   .hledu-tag-picker component, same clipping issue. */
#hledu-student-form-card,
#hledu-course-manage-card,
#hledu-course-assignment-card,
#hledu-company-assignment-card {
	overflow: visible !important;
}

/* First Name / Last Name / Department / Status row — 30%, 30%, 20%, 20%.
   The row's 16px gap × 3 gaps (48px) is subtracted evenly across all four
   columns so they still sum to the row's full width instead of overflowing. */
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--first-name,
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--last-name {
	flex: 0 0 calc(30% - 12px) !important;
	min-width: 0 !important;
}

.hledu-name-dept-row>.hledu-form-group.hledu-form-group--department,
.hledu-name-dept-row>.hledu-form-group.hledu-form-group--status {
	flex: 0 0 calc(20% - 12px) !important;
	min-width: 0 !important;
}

/* Assign Courses / Manager row — courses 80%, manager 20%. */
.hledu-course-manager-row>.hledu-form-group.hledu-form-group--courses {
	flex: 0 0 70% !important;
}

.hledu-course-manager-row>.hledu-form-group.hledu-form-group--manager {
	flex: 0 0 30% !important;
	min-width: 0 !important;
	padding-right: 16px !important;
}

.hledu-form-group--manager .hledu-tag-picker {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Employee Capabilities section (Add/Edit Employee form) — grouped-card
   layout: "Company Access" / "Student Management" / "Employee Management",
   each its own bordered card with a group icon, title+description, and its
   capability checkboxes. Reuses the admin Users page's checkmark input skin
   (.hledu-cap-item's checkbox rule) as-is. The "All" toggle lives in
   .hledu-caps-header, next to the section label. */
.hledu-caps-row {
	border-top: 1px solid var(--hledu-border-light) !important;
	padding-top: 20px !important;
}

/* Header — "Capabilities" title + description on the left, "All" toggle on
   the right, same row. */
.hledu-caps-header {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin-bottom: 16px !important;
}

.hledu-caps-header__text label {
	margin-bottom: 4px !important;
}

.hledu-caps-header__desc {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-caps-header .hledu-cap-item--all {
	flex-shrink: 0 !important;
}

/* Group cards stack vertically with a gap between them. */
.hledu-caps-groups {
	display: flex;
	flex-direction: column !important;
	gap: 12px !important;
}

.hledu-caps-group {
	display: flex;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 8px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
}

/* Student Management / Employee Management share one row — both have fewer
   items than Company Access, so they fit comfortably side by side. */
.hledu-caps-groups-row {
	display: flex;
	gap: 12px !important;
}

.hledu-caps-groups-row>.hledu-caps-group {
	flex: 1 !important;
	min-width: 0 !important;
}

.hledu-caps-group__icon {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--hledu-radius-lg) !important;
	flex-shrink: 0 !important;
}

.hledu-caps-group__icon--blue {
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
}

.hledu-caps-group__icon--purple {
	background: var(--hledu-secondary-light) !important;
	color: var(--hledu-secondary) !important;
}

.hledu-caps-group__icon--green {
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-caps-group__info {
	flex: 0 0 185px !important;
	padding-top: 3px !important;
}

.hledu-caps-group__info h3 {
	margin: 0 0 2px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-caps-group__info p {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-caps-group__items {
	display: flex;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 20px !important;
	flex: 1 !important;
	min-width: 0 !important;
	padding-top: 6px !important;
}

/* .hledu-form-group label{display:block} (higher specificity than
   .hledu-cap-item's own display:flex, since these rows live inside a
   .hledu-form-group) was silently blockifying each row and leaving the
   checkbox sitting at the text's baseline instead of vertically centered —
   re-assert flex+center here at matching specificity to win the cascade. */
.hledu-form-group .hledu-caps-header .hledu-cap-item,
.hledu-form-group .hledu-caps-group__items .hledu-cap-item {
	display: flex;
	align-items: center !important;
	margin-bottom: 0 !important;
	background: none !important;
	border: none !important;
	padding: 4px 0 !important;
}

/* Same font size/weight as the "Capabilities" label — covers "All
   Permission" and every capability item's text (All Students, Create,
   Edit, Delete, etc). */
.hledu-caps-header .hledu-cap-item__label,
.hledu-caps-group__items .hledu-cap-item__label {
	font-size: 13px !important;
	font-weight: 600 !important;
}

.hledu-caps-header .hledu-cap-item:hover,
.hledu-caps-group__items .hledu-cap-item:hover {
	border-color: transparent !important;
}

/* Checkbox is now first in the markup (checkmark, then label) — the base
   rule's margin-left:auto was only there to push it to the right when it was
   last, so it's neutralized here. outline is removed since the existing
   :focus-visible box-shadow glow (inherited from .hledu-cap-item's own rule)
   already gives an accessible, non-black focus indicator. */
.hledu-caps-header .hledu-cap-item input[type="checkbox"],
.hledu-caps-group__items .hledu-cap-item input[type="checkbox"] {
	margin-left: 0 !important;
	outline: none !important;
}

@media (max-width: 900px) {
	.hledu-caps-group {
		flex-wrap: wrap !important;
	}

	/* flex-grow was 1 here, which only makes sense once .hledu-caps-group
	   above has actually wrapped onto two lines (icon+info on their own
	   row). Below ~900px the group is often still one row (just narrower),
	   so growth:1 made this compete for space with .hledu-caps-group__items
	   right next to it — e.g. Företagsåtkomst's 6 checkboxes were left with
	   only ~200px and stacked one per line while .hledu-caps-group__info sat
	   at ~390px, far wider than its own text needed. flex-grow:0 lets it
	   size to its content either way and leaves items free to claim the
	   rest of the row. */
	.hledu-caps-group__info {
		flex: 0 1 auto !important;
	}

	.hledu-caps-groups-row {
		flex-direction: column !important;
	}

}

/* Up to 1280px (tablets, and laptops where the dashboard sidebar narrows
   the form): checkboxes on their own full-width row under the icon +
   title, indented to line up with the title. Beside the title they were
   squeezed into a narrow column — one per line with the longer Swedish
   labels on tablets (QC), and clipped by up to 11px at 1024px. */
@media (max-width: 1280px) {
	.hledu-frontend .hledu-caps-group {
		flex-wrap: wrap !important;
	}

	.hledu-frontend .hledu-caps-group__info {
		flex: 1 1 auto !important;
	}

	.hledu-frontend .hledu-caps-group__items {
		flex: 1 1 100% !important;
		padding-left: 60px !important;
		gap: 4px 20px !important;
	}
}

/* At phone widths, even the flex-wrap above still leaves the icon+info on
   the same line as .hledu-caps-group__items (both keep shrinking to fit
   rather than actually wrapping, since items has no minimum size to force
   the break) — the smaller groups (e.g. Hantering av chefer's 3 checkboxes)
   were left with only ~90px and their labels ran past the card edge. Below
   ~480px, stack icon/info/items as full-width blocks instead so items
   always gets the whole card width for its own internal wrapping. */
@media (max-width: 480px) {
	.hledu-frontend .hledu-caps-group {
		flex-direction: column !important;
	}

	.hledu-frontend .hledu-caps-group__items {
		flex-basis: 100% !important;
		padding-left: 0 !important;
	}
}

/* Company edit/create form's two-column layout (.hledu-form-main +
   .hledu-form-sidebar, admin/css/hledu-admin.css) never dropped to one
   column on narrow screens — below ~900px .hledu-form-main was left with a
   sliver of its normal width (or less, once the fixed 300px sidebar column
   didn't fit either), squeezing the Assigned Courses tag picker down to
   almost nothing and wrapping its chip labels one character per line. */
@media (max-width: 900px) {
	.hledu-frontend .hledu-form-layout {
		grid-template-columns: 1fr !important;
	}
}

/* Same 3-equal-column .hledu-form-row (admin/css/hledu-admin.css) used by
   the Add/Edit Employee/Manager forms and the Invite User modal never
   stacked on phones either, leaving each field only a third of an already
   narrow card — labels/values were clipping or, in the Invite modal's
   3-way channel picker, overlapping the neighbouring segment. */
@media (max-width: 600px) {

	/* row-gap 0: once fields stack, each .hledu-form-group's own 20px
	   bottom margin is the spacing; the row's 16px gap on top of it made
	   the gaps uneven (36px inside a row vs 20px between rows — QC). */
	.hledu-frontend .hledu-form-row {
		flex-wrap: wrap !important;
		row-gap: 0 !important;
	}

	.hledu-frontend .hledu-form-row>.hledu-form-group {
		flex: 1 1 100% !important;
	}
}

/* Username field in Edit mode — .hledu-input sets its own color/background,
   which otherwise hides the browser's default disabled look entirely. */
#hledu_stu_username:disabled {
	opacity: 0.6;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
	cursor: not-allowed !important;
}

/* ── Fields ── */
.hledu-fe-field {
	margin-bottom: 14px !important;
}

.hledu-fe-field:last-child {
	margin-bottom: 0 !important;
}

.hledu-fe-field label {
	display: block;
	margin-bottom: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-fe-required {
	color: var(--hledu-danger) !important;
	margin-left: 2px !important;
}

.hledu-fe-input,
.hledu-fe-select,
.hledu-fe-textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1.5px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	font-size: 14px !important;
	color: var(--hledu-text) !important;
	background: var(--hledu-surface) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}

.hledu-fe-input:hover,
.hledu-fe-select:hover,
.hledu-fe-textarea:hover {
	border-color: var(--hledu-text-light) !important;
}

.hledu-fe-input:focus,
.hledu-fe-select:focus,
.hledu-fe-textarea:focus {
	outline: none !important;
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-fe-textarea {
	resize: vertical !important;
	min-height: 200px !important;
	font-family: inherit;
}

/* ── Form actions row ── */
.hledu-fe-form-actions {
	display: flex;
	gap: 10px !important;
	padding-bottom: 16px !important;
}

.hledu-fe-form-actions>.hledu-btn {
	flex: 1 !important;
}

.hledu-btn--full {
	width: 100% !important;
	justify-content: center !important;
}

/* ── Hint text ── */
.hledu-fe-hint {
	margin: 10px 0 0 !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

/* ── Alert ── */
.hledu-alert--error {
	background: var(--hledu-danger-light) !important;
	border: 1px solid var(--hledu-danger) !important;
	color: var(--hledu-danger) !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	margin-bottom: 20px !important;
	font-size: 14px !important;
}

/* ── Media picker (shared with admin, but needed on frontend too) ── */
.hledu-media-tabs {
	display: flex;
	gap: 6px !important;
	margin-bottom: 14px !important;
}

.hledu-media-tab {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: 6px !important;
	background: var(--hledu-bg) !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: border-color 0.15s, color 0.15s !important;
}

.hledu-media-tab:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

/* admin/css/hledu-admin.css's own .hledu-media-tab:hover (also loaded on
   this page, for the ported media-picker JS) sets the same colors, but its
   .hledu-media-tab--active rule sets color with !important — which beats
   any non-important hover rule regardless of specificity, so the "Upload /
   Select" tab (active by default) kept its resting text color on hover
   instead of turning primary-colored. !important here is the only way to
   actually win against that. */
.hledu-frontend .hledu-media-tab:hover {
	color: var(--hledu-primary) !important;
}

.hledu-media-tab--active {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
}

.hledu-thumbnail-preview {
	display: block;
	width: 100% !important;
	max-height: 180px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	margin-bottom: 10px !important;
	border: 1px solid var(--hledu-border) !important;
}

.hledu-thumbnail-actions {
	display: flex;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

/* Wraps the primary media preview so its remove icon can float on top,
   top-right, instead of a separate "Remove" button below the image. */
.hledu-primary-preview-wrap {
	position: relative !important;
	display: block;
	margin-bottom: 4px !important;
}

.hledu-primary-media-remove {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s !important;
}

.hledu-primary-preview-wrap:hover .hledu-primary-media-remove {
	opacity: 1;
}

.hledu-primary-media-remove:hover {
	background: var(--hledu-danger) !important;
}

.hledu-form-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 10px !important;
}

/* admin/css/hledu-admin.css's own .hledu-form-label (also loaded on this
   page, for the ported quiz/media JS) sets text-transform: uppercase —
   override it back to normal capitalization for the frontend course form. */
.hledu-frontend .hledu-form-label {
	text-transform: none !important;
}

/* Separates Media Gallery from Primary Media within the merged Course
   Media card — spacing only, no divider line. */
.hledu-fe-card__subsection {
	margin-top: 20px !important;
	padding-top: 20px !important;
}

/* ── Price / Free toggle ── */
.hledu-price-row {
	display: flex;
	gap: 8px !important;
	align-items: stretch !important;
}

.hledu-price-row .hledu-fe-input {
	flex: 1 !important;
}

.hledu-price-free-btn {
	flex-shrink: 0 !important;
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
}

.hledu-price-free-btn__check {
	display: none !important;
	color: var(--hledu-success) !important;
}

.hledu-price-free-btn--active {
	background: var(--hledu-primary-light) !important;
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-price-free-btn--active .hledu-price-free-btn__check {
	display: inline-block !important;
}

/* ── Gallery grid ── */
.hledu-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
}

.hledu-gallery-item {
	position: relative !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	aspect-ratio: 1 !important;
	border: 1px solid var(--hledu-border) !important;
}

.hledu-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

.hledu-gallery-remove {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	border: none !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.hledu-gallery-remove:hover {
	background: var(--hledu-danger) !important;
}

/* ── Utility ── */
.hledu-hidden {
	display: none !important;
}

/* ==========================================================================
   Bento/Glass design system — Module 06B
   ========================================================================== */

/* ── Bento grid ──────────────────────────────────────────────────────────── */
.hledu-frontend .hledu-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	grid-auto-rows: minmax(120px, auto) !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

/* Five equal columns in one row — used where a wider stat row needs to fit
   without wrapping, same pattern as admin's .hledu-bento--cols-5. Shorter
   row height too, since its icon-corner cards need less vertical room than
   the standard left-icon stat card. */
.hledu-frontend .hledu-bento--cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
	grid-auto-rows: minmax(64px, auto) !important;
}

.hledu-frontend .hledu-bento-card {
	grid-column: span 1 !important;
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 20px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	/* Same min-width:auto trap as .hledu-company-app's grid items — without
	   this, a wide child (e.g. a .hledu-fe-table-wrap table) stops this
	   card, and the bento grid track containing it, from ever shrinking
	   below the table's full unscrolled width, overflowing the page on
	   narrow screens instead of letting .hledu-fe-table-wrap's own
	   overflow-x:auto scroll it in place. */
	min-width: 0 !important;
}

.hledu-frontend .hledu-bento-card--wide {
	grid-column: span 2 !important;
}

.hledu-frontend .hledu-bento-card--tall {
	grid-row: span 2 !important;
}

.hledu-frontend .hledu-bento-card--large {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

.hledu-frontend .hledu-bento-card--notice {
	grid-column: 1 / -1 !important;
	display: flex;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.hledu-frontend .hledu-bento-card--notice .hledu-bento-card__header {
	padding: 16px 20px !important;
	border-bottom: 1px solid var(--hledu-border) !important;
}

.hledu-frontend .hledu-bento-card__header {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
}

.hledu-frontend .hledu-bento-card__header h2,
.hledu-frontend .hledu-bento-card__header h3 {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hledu-frontend .hledu-bento-card__value {
	font-size: 28px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	line-height: 1 !important;
}

.hledu-frontend .hledu-bento-card__label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
}

/* ── Glass modifier — bento dashboard cards + modals only ───────────────── */
.hledu-frontend .hledu-card--glass {
	background: var(--hledu-surface-glass) !important;
	backdrop-filter: blur(var(--hledu-blur)) !important;
	-webkit-backdrop-filter: blur(var(--hledu-blur)) !important;
	border: 1px solid rgb(255 255 255 / 0.18) !important;
	box-shadow: var(--hledu-shadow-glass) !important;
}

[data-hledu-theme="dark"] .hledu-frontend .hledu-card--glass {
	border-color: rgb(255 255 255 / 0.08) !important;
}

/* ── Gradient primary button ─────────────────────────────────────────────── */
.hledu-frontend .hledu-btn-primary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 22px !important;
	border: none !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit;
	color: #fff !important;
	cursor: pointer !important;
	text-decoration: none !important;
	background-image: var(--hledu-gradient-primary) !important;
	background-size: 200% 100% !important;
	background-position: 0 0 !important;
	transition: background-position var(--hledu-transition-slow), box-shadow var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-primary:hover,
.hledu-frontend .hledu-btn-primary:focus-visible {
	background-position: 100% 0 !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-frontend .hledu-btn-secondary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 22px !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-secondary:hover {
	background: var(--hledu-bg) !important;
	border-color: var(--hledu-text-muted) !important;
}

.hledu-frontend .hledu-btn-tertiary {
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 16px !important;
	background: transparent !important;
	color: var(--hledu-primary) !important;
	border: 1px solid transparent !important;
	border-radius: var(--hledu-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background var(--hledu-transition) !important;
}

.hledu-frontend .hledu-btn-tertiary:hover {
	background: var(--hledu-primary-light) !important;
}

/* ── Floating label form pattern ─────────────────────────────────────────── */
/* Scoped to .hledu-fe-field--floating only (the Status field) — NOT
   .hledu-form-group--floating, which the Content section's module/lesson/
   quiz/question inline-form templates (shared with admin/lesson-editor.php
   and templates/admin/course-form.php) also use. That class must keep
   admin/css/hledu-admin.css's own geometry so those fields render the same
   as the wp-admin course editor; scoping it here too made its label sit at
   the wrong height against the shared .hledu-input's actual size, looking
   overlapped/not standalone instead of a clean label above the field. */
.hledu-frontend .hledu-fe-field--floating {
	position: relative !important;
	padding-top: 20px !important;
}

/* The label always sits in its "floated" caption position above the field,
   from first render — see the matching fix on .hledu-form-group--floating
   in admin/css/hledu-admin.css for why (it no longer waits for focus/value). */
.hledu-frontend .hledu-fe-field--floating label {
	position: absolute !important;
	left: 2px !important;
	top: 8px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--hledu-primary) !important;
	background: var(--hledu-surface) !important;
	pointer-events: none !important;
}

/* ── Glow — the one active/selected/focus affordance ─────────────────────── */
.hledu-frontend .hledu-glow,
.hledu-frontend .hledu-dashboard-nav a.active,
.hledu-frontend .hledu-tab--active,
.hledu-frontend .hledu-tab.active,
.hledu-frontend .hledu-media-tab--active {
	box-shadow: var(--hledu-glow-primary) !important;
}

/* ── Motion — fade/slide entrance ─────────────────────────────────────────── */
@keyframes hledu-fade-slide-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hledu-fade-slide-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

.hledu-frontend.hledu-fade-slide-in,
.hledu-fade-slide-in {
	animation: hledu-fade-slide-in 220ms ease-out !important;
}

.hledu-fade-slide-out {
	animation: hledu-fade-slide-out 220ms ease-out !important;
}

.hledu-frontend {
	animation: hledu-fade-slide-in 220ms ease-out !important;
}

/* ── Distraction-Free Mode (scaffolded here, wired in Module 16) ─────────── */
.hledu-focus-mode .hledu-dashboard-nav,
.hledu-focus-mode .hledu-emp-header,
.hledu-focus-mode .hledu-emp-superadmin-bar {
	display: none !important;
}

/* ── Skeleton loading shimmer ─────────────────────────────────────────────── */
.hledu-frontend .hledu-skeleton {
	position: relative !important;
	overflow: hidden !important;
	background: var(--hledu-border-light) !important;
	border-radius: var(--hledu-radius-sm) !important;
	color: transparent !important;
}

.hledu-frontend .hledu-skeleton::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	transform: translateX(-100%) !important;
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent) !important;
	animation: hledu-skeleton-shimmer 1.4s ease-in-out infinite !important;
}

[data-hledu-theme="dark"] .hledu-frontend .hledu-skeleton::after {
	background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent) !important;
}

@keyframes hledu-skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

/* ── Progress ring — output of hledu_render_progress_ring() ──────────────── */
.hledu-frontend .hledu-ring {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

.hledu-frontend .hledu-ring svg {
	transform: rotate(-90deg) !important;
}

.hledu-frontend .hledu-ring-track {
	stroke: var(--hledu-border) !important;
	fill: none !important;
}

.hledu-frontend .hledu-ring-fill {
	stroke: var(--hledu-primary) !important;
	fill: none !important;
	stroke-linecap: round !important;
	transition: stroke-dashoffset var(--hledu-transition-slow) !important;
}

.hledu-frontend .hledu-ring__label {
	position: absolute !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
}

/* ── Quiz player (Module 08) ──────────────────────────────────────────────── */
.hledu-quiz-meta-list {
	list-style: none !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px 20px !important;
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
}

.hledu-quiz-answers {
	display: flex;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 12px !important;
}

.hledu-quiz-answer-option {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: border-color var(--hledu-transition), background var(--hledu-transition) !important;
}

.hledu-quiz-answer-option:hover {
	border-color: var(--hledu-primary) !important;
}

/* Selected answer: previously only the 13px radio/checkbox dot changed,
   easy to miss on a phone. The whole option now gets the primary border +
   tint (colour) and a thicker border (non-colour cue), plus a visible
   focus ring for keyboard users. min-height keeps every option a
   comfortable tap target. */
.hledu-quiz-answer-option {
	min-height: var(--hledu-touch) !important;
}

.hledu-quiz-answer-option:has(input:checked) {
	border-color: var(--hledu-primary) !important;
	background: var(--hledu-primary-light) !important;
	box-shadow: inset 0 0 0 1px var(--hledu-primary) !important;
}

.hledu-quiz-answer-option:has(input:focus-visible) {
	outline: 2px solid var(--hledu-primary) !important;
	outline-offset: 2px !important;
}

.hledu-quiz-answer-option input {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	accent-color: var(--hledu-primary);
}

.hledu-quiz-nav {
	display: flex;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

/* .hledu-btn's own `display: inline-flex` is the same specificity as the
   browser's default [hidden] rule, so without this the Previous button
   stays visible even once JS sets it hidden on the last/complete step. */
.hledu-quiz-nav .hledu-btn[hidden] {
	display: none;
}

/* On the complete screen only Retake Quiz remains — center it instead of
   letting space-between pin a single item to the left. */
.hledu-quiz-nav--single {
	justify-content: center !important;
}

.hledu-quiz-result-body {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	text-align: center !important;
}

.hledu-quiz-review-item {
	width: 100% !important;
	text-align: left !important;
	margin-bottom: 16px !important;
}

.hledu-frontend .hledu-answer-review-list {
	list-style: none !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-frontend .hledu-answer-review-list li {
	padding: 8px 12px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-frontend .hledu-answer-review-list__item--correct {
	border-color: var(--hledu-success) !important;
	background: var(--hledu-success-light) !important;
	color: var(--hledu-success) !important;
}

.hledu-quiz-review-position {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text-muted) !important;
	align-self: center !important;
}

/* ── "Submit with unanswered questions?" popup — replaces window.confirm().
   Self-contained (not admin.css's .hledu-modal) since quiz-player.php also
   renders standalone on /take-quiz/, which never loads admin.css. ──────── */
.hledu-quiz-confirm-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgb(0 0 0 / 0.45) !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
}

.hledu-quiz-confirm-box {
	width: 100% !important;
	max-width: 380px !important;
	padding: 24px !important;
	text-align: center !important;
}

.hledu-quiz-confirm-box p {
	margin: 0 0 20px !important;
	font-size: 14px !important;
	color: var(--hledu-text) !important;
	line-height: 1.5 !important;
}

.hledu-quiz-confirm-actions {
	display: flex;
	gap: 10px !important;
	justify-content: center !important;
}

/* ── Reduced motion — disable animation, keep the instant end state ──────── */
@media (prefers-reduced-motion: reduce) {

	.hledu-frontend,
	.hledu-fade-slide-in,
	.hledu-fade-slide-out,
	.hledu-frontend .hledu-skeleton::after {
		animation: none !important;
	}

	html,
	.hledu-frontend .hledu-btn-primary,
	.hledu-frontend .hledu-ring-fill {
		transition: none !important;
	}
}

/* ── Bento responsive ──────────────────────────────────────────────────────── */
/* At 1024px the 4 stat cards (and the two "wide" span-2 cards next to them,
   e.g. Recently Learning / Latest Quiz) used to drop from 4 columns to 2,
   stacking what should be one row into two. Keeping 4 columns here (still
   correctly overridden back down to 1 column by the existing ≤480px rule
   below, for phones) and shrinking padding/icon/font sizes in the
   481–1024px range keeps everything in a single row and still comfortably
   readable, without changing the already-tuned ≤480px phone layout — that's
   a separate pass. */
@media (max-width: 1024px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (min-width: 481px) and (max-width: 1024px) {
	.hledu-frontend .hledu-bento-card {
		padding: 12px !important;
		gap: 8px !important;
	}

	.hledu-frontend .hledu-stat-card.hledu-bento-card {
		gap: 8px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle {
		width: 36px !important;
		height: 36px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle .dashicons {
		font-size: 16px !important;
		width: 16px !important;
		height: 16px !important;
	}

	.hledu-frontend .hledu-stat-value {
		font-size: 17px !important;
	}

	.hledu-frontend .hledu-stat-label {
		font-size: 10px !important;
		/* Base rule is white-space:nowrap + ellipsis — at this card width
		   "Completed Courses"/"Certificates Earned" would just truncate to
		   "Completed C…"; wrapping to two lines reads better than that. */
		white-space: normal !important;
		line-height: 1.25 !important;
	}

	.hledu-frontend .hledu-bento-card__header h2,
	.hledu-frontend .hledu-bento-card__header h3 {
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-latest-course,
	.hledu-frontend .hledu-latest-quiz {
		gap: 8px !important;
	}

	.hledu-frontend .hledu-latest-course__avatar {
		width: 36px !important;
		height: 36px !important;
		font-size: 14px !important;
	}

	.hledu-frontend .hledu-latest-quiz__icon {
		width: 40px !important;
		height: 40px !important;
	}

	.hledu-frontend .hledu-latest-course__title,
	.hledu-frontend .hledu-latest-quiz__title {
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-latest-course__percent,
	.hledu-frontend .hledu-latest-quiz__course,
	.hledu-frontend .hledu-latest-quiz__meta {
		font-size: 11px !important;
	}

	.hledu-frontend .hledu-latest-course__body,
	.hledu-frontend .hledu-latest-quiz__body {
		gap: 4px !important;
	}
}

/* 481–880px: the 4 stat cards squeezed into one row of 4 (per the block
   above) read too small/cramped at this width — 2 per row instead reads
   much better. Since Recently Learning / Latest Quiz (.hledu-bento-card
   --wide) already span 2 of the grid's columns, dropping to a 2-column
   grid also makes each of them take the full row width instead of being
   squeezed to a quarter-width card each — fixing their cramped internal
   layout (avatar + title + button all fighting for space) as a direct
   result, not a separate override. */
@media (min-width: 481px) and (max-width: 880px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* The dashboard's "Top Courses" card-view grid (#hledu-courses-card-view
	   is this page's id for it) reads better as one column at this width
	   too — scoped by id so the shared .hledu-course-grid component (also
	   used on the standalone course-list page, with its own breakpoints)
	   is untouched everywhere else. */
	#hledu-courses-card-view .hledu-course-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Phones: stat cards (a number + a short label) pair up two per row — one
   per row made each one a tall, mostly empty band and pushed the actual
   content (Recently Learning, tables) far below the fold. Every other bento
   card (content-heavy: lists, tables, notices) still takes the full row. */
@media (max-width: 480px) {
	.hledu-frontend .hledu-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-rows: auto !important;
		gap: 12px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* An odd last stat card (5th of 5) spans the row instead of leaving an
	   empty half beside it. */
	.hledu-frontend .hledu-bento>.hledu-stat-card:last-child:nth-child(odd),
	.hledu-frontend .hledu-bento>.hledu-bento-card:not(.hledu-stat-card),
	.hledu-frontend .hledu-bento-card--wide,
	.hledu-frontend .hledu-bento-card--large {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}


	/* The 5 stat cards above only shrink their font/icon sizes in the
	   481–1024px range (see that block above) — below 481px they were still
	   using the full desktop 26px/12px sizes inside a now-half-width card,
	   reading oversized and cramped. */
	.hledu-frontend .hledu-bento--cols-5 .hledu-stat-icon-circle {
		width: 40px !important;
		height: 40px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 .hledu-stat-icon-circle .dashicons {
		font-size: 18px !important;
		width: 18px !important;
		height: 18px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 .hledu-stat-value {
		font-size: 19px !important;
	}

	.hledu-frontend .hledu-bento--cols-5 .hledu-stat-label {
		font-size: 10px !important;
		white-space: normal !important;
		line-height: 1.25 !important;
	}
}

/* Narrow stat grid → stacked stat cards (icon on top, number and label
   below) so the label gets the card's full width instead of what's left
   beside the icon — side by side, labels broke mid-word ("CERTIFICATE / S
   EARNED") in the 4-up row at ~920px with the sidebar showing, and were
   cramped in the 2-up phone grid. Queried on the grid's own width, so it
   applies wherever the grid is narrow (phones, and small laptops with the
   sidebar) rather than at one viewport size. Only stat-only grids become
   containers (:has), so no other bento content is affected by the
   containment; the five-column owner grid keeps its own icon-corner cards. */
.hledu-frontend .hledu-bento:not(.hledu-bento--cols-5):has(> .hledu-stat-card) {
	container: hledu-stats / inline-size;
}

@container hledu-stats (max-width: 640px) {
	.hledu-frontend .hledu-stat-card.hledu-bento-card {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		padding: 14px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle {
		width: 40px !important;
		height: 40px !important;
	}

	.hledu-frontend .hledu-stat-icon-circle svg,
	.hledu-frontend .hledu-stat-icon-circle .dashicons {
		width: 20px !important;
		height: 20px !important;
		font-size: 20px !important;
	}

	.hledu-frontend .hledu-stat-value {
		font-size: 22px !important;
	}

	.hledu-frontend .hledu-stat-label {
		font-size: 11px !important;
		white-space: normal !important;
		overflow: visible !important;
		overflow-wrap: normal !important;
		line-height: 1.3 !important;
	}
}

/* ── Theme toggle switch (injected by hledu-frontend.js) ──────────────────── */
.hledu-theme-toggle {
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-surface) !important;
	color: var(--hledu-text-muted) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background var(--hledu-transition), color var(--hledu-transition), border-color var(--hledu-transition) !important;
}

.hledu-theme-toggle:hover {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-theme-toggle svg {
	width: 18px !important;
	height: 18px !important;
}

.hledu-theme-toggle .hledu-theme-toggle__sun {
	display: block !important;
}

.hledu-theme-toggle .hledu-theme-toggle__moon {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__sun {
	display: none !important;
}

[data-hledu-theme="dark"] .hledu-theme-toggle .hledu-theme-toggle__moon {
	display: block !important;
}

/* --------------------------------------------------------------------------
   Module 12 — Invite self-registration page (site root + ?hledu_invite=TOKEN)
   -------------------------------------------------------------------------- */
.hledu-fe-auth-wrap {
	display: flex;
	justify-content: center !important;
	padding: 48px 16px !important;
}

.hledu-fe-auth-card {
	width: 100% !important;
	max-width: 480px !important;
}

/* --------------------------------------------------------------------------
   Module 15 — Standalone login page (/haulity-login/)
   -------------------------------------------------------------------------- */
.hledu-login-body {
	margin: 0 !important;
	background: var(--hledu-bg) !important;
}

/* Full-bleed 50/50 split, no card chrome — each half fills its grid cell
   completely (Grid's default align/justify-items: stretch does this with
   no extra sizing rules needed). Single column below 900px so the form
   takes the full width there instead of leaving the hidden image's column
   as blank space. */
/* minmax(100vh, auto): at least one screen tall, but the row grows with a
   form taller than the screen (signup on a phone) instead of letting it
   spill out of a fixed 100vh row. dvh (visible viewport on mobile) where
   supported, vh as the fallback. */
.hledu-auth-page {
	display: grid;
	grid-template-columns: 1fr !important;
	grid-template-rows: minmax(100vh, auto) !important;
	grid-template-rows: minmax(100dvh, auto) !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

@media (min-width: 900px) {
	.hledu-auth-page {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* .hledu-card gave this a border/shadow/radius/background — all stripped
   here since this style has no card chrome, just two full-height panels.
   The compound selector's specificity beats the plain .hledu-card rule
   regardless of stylesheet order. */
.hledu-card.hledu-auth-card {
	margin-bottom: 0 !important;
	background: var(--hledu-surface) !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.hledu-auth-card {
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 48px !important;
}

/* Every direct child (brand block, heading, form, switch/secure notes)
   shares one centered content column, instead of stretching edge to edge
   across the half-screen panel. */
.hledu-auth-card>* {
	width: 100% !important;
	max-width: 400px !important;
}

@media (max-width: 480px) {
	.hledu-auth-card {
		padding: 32px 24px !important;
	}
}

/* Right half — just the transport photo dropped into
   assets/images/login-image.jpg, filling its panel edge to edge. Hidden
   below 900px (see .hledu-auth-page above) so mobile shows only the form. */
.hledu-auth-card--placeholder {
	display: none;
	padding: 0 !important;
}

.hledu-auth-card--placeholder>* {
	max-width: none !important;
}

.hledu-auth-card--placeholder img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 900px) {
	.hledu-auth-card--placeholder {
		display: block;
	}
}

.hledu-auth-card__brand {
	display: flex;
	align-items: center !important;
	gap: 10px !important;
	margin-bottom: 28px !important;
}

.hledu-auth-card__brand-logo {
	height: 40px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

.hledu-auth-card h1 {
	font-size: 24px !important;
	font-weight: 800 !important;
	margin: 0 0 6px !important;
	color: var(--hledu-text) !important;
}

.hledu-auth-card__subtitle {
	color: var(--hledu-text-muted) !important;
	font-size: 14px !important;
	margin: 0 0 24px !important;
}

.hledu-auth-row {
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: -4px 0 20px !important;
	font-size: 13px !important;
}

.hledu-auth-remember {
	display: flex;
	align-items: center !important;
	gap: 8px !important;
	color: var(--hledu-text-muted) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.hledu-auth-row a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.hledu-auth-row a:hover {
	text-decoration: underline !important;
}

.hledu-auth-card .hledu-btn--full {
	justify-content: center !important;
}

.hledu-auth-switch {
	margin: 20px 0 0 !important;
	font-size: 13px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-auth-switch a {
	color: var(--hledu-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 4px !important;
}

.hledu-auth-switch a:hover {
	text-decoration: underline !important;
}

.hledu-auth-secure {
	display: flex;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 28px 0 0 !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-auth-secure .dashicons {
	color: var(--hledu-success) !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   Settings — toggle switch + settings row (Platform Staff Settings mockup)
   -------------------------------------------------------------------------- */
.hledu-fe-toggle {
	position: relative !important;
	display: inline-flex;
	align-items: center !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
}

.hledu-fe-toggle input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

.hledu-fe-toggle__track {
	position: relative !important;
	width: 40px !important;
	height: 22px !important;
	border-radius: var(--hledu-radius-full) !important;
	background: var(--hledu-border) !important;
	transition: background var(--hledu-transition) !important;
}

.hledu-fe-toggle__track::after {
	content: '' !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: var(--hledu-shadow-xs) !important;
	transition: transform var(--hledu-transition) !important;
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track {
	background: var(--hledu-primary) !important;
}

.hledu-fe-toggle input:checked+.hledu-fe-toggle__track::after {
	transform: translateX(18px) !important;
}

.hledu-fe-toggle input:focus-visible+.hledu-fe-toggle__track {
	box-shadow: var(--hledu-glow-primary) !important;
}

/* flex-wrap + min-width:0 children: on phones the control side (a file
   picker, the Import form whose inline style is display:flex) was wider
   than the screen beside the label; now it drops under the label and its
   own contents wrap. */
.hledu-settings-row {
	display: flex;
	align-items: flex-start !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--hledu-border-light) !important;
}

.hledu-settings-row>*,
.hledu-settings-logo-picker>* {
	min-width: 0 !important;
}

.hledu-settings-row>form {
	flex-wrap: wrap !important;
	max-width: 100% !important;
}

.hledu-settings-row:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.hledu-settings-row:first-child {
	padding-top: 0 !important;
}

.hledu-settings-row__title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 3px !important;
}

.hledu-settings-row__desc {
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-settings-swatch-row {
	display: flex;
	gap: 10px !important;
	margin-top: 6px !important;
}

.hledu-settings-swatch {
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	box-shadow: var(--hledu-shadow-xs) !important;
}

.hledu-settings-swatch--active {
	border-color: var(--hledu-text) !important;
}

.hledu-settings-logo-picker {
	display: flex;
	align-items: center !important;
	gap: 16px !important;
}

.hledu-settings-logo-picker__preview {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: var(--hledu-radius-lg) !important;
	background-image: var(--hledu-gradient-primary) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   My Profile — header row (avatar, name/title/badge, Edit Photo)
   -------------------------------------------------------------------------- */
.hledu-profile-header {
	display: flex;
	align-items: center !important;
	gap: 20px !important;
}

.hledu-profile-header img {
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

.hledu-profile-header__meta {
	flex: 1 !important;
	min-width: 0 !important;
}

.hledu-profile-header__name {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--hledu-text) !important;
	margin: 0 0 4px !important;
}

.hledu-profile-header__title {
	font-size: 13px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 0 8px !important;
}

@media (max-width: 480px) {
	.hledu-profile-header {
		flex-wrap: wrap !important;
	}
}

/* --------------------------------------------------------------------------
   Company Details profile page — Platform Staff's read-only view of a
   single company, reached by clicking its name on the Companies list.
   -------------------------------------------------------------------------- */
.hledu-company-detail__header-actions {
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-left: auto !important;
	min-width: 0 !important;
}

/* Phones: the action buttons (up to ~180px) ran off the right edge beside
   the company name; they take their own full-width row instead. */
@media (max-width: 600px) {
	.hledu-company-detail__header-actions {
		flex: 1 1 100% !important;
		margin-left: 0 !important;
	}
}

.hledu-company-detail__avatar {
	width: 88px !important;
	height: 88px !important;
	font-size: 28px !important;
}

.hledu-company-detail__description {
	margin: 16px 0 0 !important;
	color: var(--hledu-text-muted) !important;
	line-height: 1.6 !important;
}

.hledu-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 20px !important;
}

.hledu-detail-grid__label {
	display: block;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
	margin-bottom: 4px !important;
}

.hledu-detail-grid__value {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

/* --------------------------------------------------------------------------
   Certificate view (Module 22) — standalone print/verification page.
   -------------------------------------------------------------------------- */
.hledu-certificate-view {
	max-width: 900px !important;
	margin: 40px auto !important;
	padding: 0 20px !important;
	font-family: var(--hledu-font) !important;
}

.hledu-certificate-view__toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-certificate-view__revoked-banner {
	margin-right: auto !important;
	padding: 10px 16px !important;
	border-radius: var(--hledu-radius) !important;
	background: var(--hledu-danger-light) !important;
	color: var(--hledu-danger) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

.hledu-certificate-view__paper {
	/* Defaults double as the "classic" design's tokens — every template
	   below overrides just what it needs on its own modifier class, so
	   the shared element rules underneath only ever read var(--cert-*). */
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: var(--hledu-surface);
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
	background: var(--cert-bg) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	padding: 12px !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-certificate-view__paper--revoked {
	opacity: 0.7 !important;
}

.hledu-certificate-view__border {
	position: relative !important;
	overflow: hidden !important;
	border: var(--cert-border) !important;
	border-radius: var(--hledu-radius) !important;
	padding: 64px 48px !important;
	text-align: center !important;
}

.hledu-certificate-view__icon {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 auto 12px !important;
	color: var(--cert-accent) !important;
}

.hledu-certificate-view__eyebrow {
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--cert-accent-secondary) !important;
	margin: 0 0 24px !important;
}

.hledu-certificate-view__presented {
	font-size: 15px !important;
	color: var(--hledu-text-muted) !important;
	margin: 0 !important;
}

.hledu-certificate-view__name {
	font-family: var(--cert-name-font) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: var(--hledu-text) !important;
	margin: 12px 0 20px !important;
}

.hledu-certificate-view__body {
	font-size: 16px !important;
	color: var(--hledu-text) !important;
	max-width: 560px !important;
	margin: 0 auto 32px !important;
	line-height: 1.6 !important;
}

.hledu-certificate-view__meta {
	display: flex !important;
	justify-content: center !important;
	gap: 64px !important;
	margin-bottom: 32px !important;
}

.hledu-certificate-view__meta-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-certificate-view__meta-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-certificate-view__meta-value {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-certificate-view__uid {
	font-size: 12px !important;
	color: var(--hledu-text-light) !important;
	letter-spacing: 0.04em !important;
	margin: 0 !important;
}

/* ── Certificate templates — 5 selectable built-in designs ────────────────
   Each modifier class only sets the --cert-* custom properties (and any
   design-specific decoration); every element rule above already reads
   from those properties, so no element rule needs repeating per design. */

.hledu-certificate-view__paper--classic {
	--cert-accent: #1e3a5f;
	--cert-accent-secondary: #b8860b;
	--cert-bg: #ffffff;
	--cert-border: 3px double #1e3a5f;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.hledu-certificate-view__paper--classic .hledu-certificate-view__eyebrow::after {
	content: '' !important;
	display: block !important;
	width: 60px !important;
	height: 2px !important;
	background: var(--cert-accent-secondary) !important;
	margin: 10px auto 0 !important;
}

.hledu-certificate-view__paper--nordic {
	--cert-accent: #006AA7;
	--cert-accent-secondary: #c99400;
	--cert-bg: #ffffff;
	--cert-border: 2px solid #006AA7;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--nordic .hledu-certificate-view__border::after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 6px !important;
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 50%, #FECC02 50%, #FECC02 100%) !important;
}

.hledu-certificate-view__paper--transport {
	--cert-accent: #d35400;
	--cert-accent-secondary: #2c3e50;
	--cert-bg: #fdfdfb;
	--cert-border: 3px dashed #2c3e50;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--modern {
	--cert-accent: #0f766e;
	--cert-accent-secondary: #0f766e;
	--cert-bg: #ffffff;
	--cert-border: none;
	--cert-name-font: var(--hledu-font);
}

.hledu-certificate-view__paper--modern .hledu-certificate-view__border {
	padding-top: 88px !important;
}

.hledu-certificate-view__paper--modern .hledu-certificate-view__border::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 8px !important;
	background: var(--cert-accent) !important;
}

.hledu-certificate-view__paper--gold {
	--cert-accent: #a67c00;
	--cert-accent-secondary: #a67c00;
	--cert-bg: #fdf8ec;
	--cert-border: 4px double #a67c00;
	--cert-name-font: Georgia, 'Times New Roman', serif;
}

.hledu-certificate-view__paper--appreciation {
	--cert-accent: #b5121b;
	--cert-accent-secondary: #c9a227;
	--cert-bg: #fffdf7;
	--cert-border: 2px solid #c9a227;
	--cert-name-font: 'Brush Script MT', 'Segoe Script', cursive;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__eyebrow {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--cert-name-font) !important;
	font-size: 44px !important;
	color: var(--cert-accent) !important;
	margin-bottom: 4px !important;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__name {
	font-family: var(--cert-name-font) !important;
}

.hledu-certificate-view__paper--appreciation .hledu-certificate-view__border {
	padding-top: 40px !important;
	padding-bottom: 56px !important;
}

.hledu-certificate-view__ribbon {
	position: relative !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
	margin: 0 auto 24px !important;
	padding: 8px 32px !important;
	background: #1f2937 !important;
	clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%) !important;
}

.hledu-certificate-view__ribbon-line1 {
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.hledu-certificate-view__ribbon-line2 {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--cert-accent-secondary) !important;
}

.hledu-certificate-view__corner {
	position: absolute !important;
	width: 56px !important;
	height: 56px !important;
	border: 2px solid var(--cert-accent-secondary) !important;
	opacity: 0.55 !important;
}

.hledu-certificate-view__corner--tl {
	top: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-bottom: none !important;
}

.hledu-certificate-view__corner--tr {
	top: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-bottom: none !important;
}

.hledu-certificate-view__corner--bl {
	bottom: 8px !important;
	left: 8px !important;
	border-right: none !important;
	border-top: none !important;
}

.hledu-certificate-view__corner--br {
	bottom: 8px !important;
	right: 8px !important;
	border-left: none !important;
	border-top: none !important;
}

.hledu-certificate-view__seal {
	display: block !important;
	width: 44px !important;
	height: 52px !important;
	margin: 16px auto 0 !important;
	color: var(--cert-accent) !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-cert-template-swatch--appreciation {
	background: #fffdf7 !important;
	border: 2px solid #c9a227 !important;
	position: relative !important;
}

.hledu-cert-template-swatch--appreciation::after {
	content: '' !important;
	position: absolute !important;
	inset: 4px !important;
	border: 1px solid #b5121b !important;
	opacity: 0.6 !important;
}

.hledu-certificate-view__file {
	background: var(--hledu-surface) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	padding: 16px !important;
	text-align: center !important;
}

.hledu-certificate-view__embed {
	width: 100% !important;
	height: 80vh !important;
	border: none !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-certificate-view__file-fallback {
	margin: 12px 0 0 !important;
}

@media print {
	.hledu-certificate-view {
		margin: 0 !important;
		max-width: none !important;
	}

	.hledu-certificate-view__toolbar,
	.hledu-theme-toggle,
	#wpadminbar {
		display: none !important;
	}

	.hledu-certificate-view__paper {
		box-shadow: none !important;
	}
}

/* ── Certificate template picker — certificate-issue-form.php /
   certificate-create-form.php's "choose a design" grid. ────────────────── */
.hledu-cert-template-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-cert-template-option {
	position: relative !important;
}

.hledu-cert-template-option input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.hledu-cert-template-option label {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	height: 100% !important;
	padding: 12px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-template-option input:checked+label {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-template-option input:focus-visible+label {
	outline: 2px solid var(--hledu-primary) !important;
	outline-offset: 2px !important;
}

.hledu-cert-template-swatch {
	display: block !important;
	height: 48px !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-cert-template-swatch--classic {
	background: linear-gradient(135deg, #1e3a5f, #2c5282) !important;
	border: 2px double #b8860b !important;
}

.hledu-cert-template-swatch--nordic {
	background: linear-gradient(90deg, #006AA7 0%, #006AA7 70%, #FECC02 70%, #FECC02 100%) !important;
}

.hledu-cert-template-swatch--transport {
	background: repeating-linear-gradient(90deg, #2c3e50, #2c3e50 8px, #d35400 8px, #d35400 16px) !important;
}

.hledu-cert-template-swatch--modern {
	background: #ffffff !important;
	border: 1px solid var(--hledu-border) !important;
	border-top: 8px solid #0f766e !important;
}

.hledu-cert-template-swatch--gold {
	background: #fdf8ec !important;
	border: 3px double #a67c00 !important;
}

.hledu-cert-template-option label strong {
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-template-option label small {
	font-size: 11px !important;
	color: var(--hledu-text-muted) !important;
	line-height: 1.4 !important;
}

/* ── Course certificate rule form (certificate-create-form.php) — upload
   vs. built-in-design toggle, live preview, and the draggable overlay-field
   editor for uploaded PDFs/images. ────────────────────────────────────────── */
.hledu-cert-source-toggle {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.hledu-cert-source-toggle__option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 16px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-source-toggle__option:has(input:checked) {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-cert-source-panel {
	margin-bottom: 20px !important;
}

.hledu-cert-preview {
	margin-bottom: 12px !important;
}

.hledu-cert-preview-box {
	position: relative !important;
	width: 100% !important;
	max-width: 640px !important;
	aspect-ratio: 1.414 / 1 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	background: var(--hledu-surface) !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-lg) !important;
	box-shadow: var(--hledu-shadow-lg) !important;
}

.hledu-cert-preview-box--view {
	margin: 0 auto !important;
}

.hledu-cert-preview-box__bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border: none !important;
}

.hledu-cert-preview-box__placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
	text-align: center !important;
	padding: 20px !important;
}

.hledu-cert-field-chip {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	padding: 4px 10px !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px dashed var(--hledu-primary) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: grab !important;
	touch-action: none !important;
	user-select: none !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.hledu-cert-field-chip.is-dragging {
	cursor: grabbing !important;
	box-shadow: var(--hledu-shadow-lg) !important;
	z-index: 2 !important;
}

.hledu-cert-field-controls {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.hledu-cert-field-controls__row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 8px 12px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius-sm) !important;
}

.hledu-cert-field-controls__label {
	flex: 1 1 140px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-field-controls__item {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-field-controls__item .hledu-cert-field-size {
	width: 60px !important;
}

.hledu-cert-field-controls__item .hledu-cert-field-color {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-criteria-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	margin-bottom: 12px !important;
}

.hledu-cert-criteria-row__item {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	white-space: nowrap !important;
}

/* A flex item's default min-width is auto (its content's own minimum size),
   not 0 — for a span of wrappable text that minimum is just its longest
   word, so without this the two spans below shrink to ~30px and wrap
   word-by-word instead of reading as one line. These are short, fixed
   phrases, so nowrap is correct rather than allowing wrap at all. */
.hledu-cert-criteria-row__item span {
	white-space: nowrap !important;
}

/* Compound selector, not just .hledu-input--narrow alone — admin/css/hledu-admin.css's
   .hledu-input{width:100% !important} is also loaded on this page and, being
   enqueued after this stylesheet, wins any single-class !important tie by
   source order. A compound selector always outranks it regardless of
   enqueue order — this was the actual cause of the Certificate Criteria
   row looking broken (the "narrow" input rendered at ~450px, not 70px,
   throwing off everything laid out after it). */
.hledu-input.hledu-input--narrow {
	width: 70px !important;
	max-width: 70px !important;
	flex: none !important;
}

.hledu-checkbox-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
	cursor: pointer !important;
}

.hledu-fe-empty-hint {
	padding: 24px !important;
	text-align: center !important;
	color: var(--hledu-text-muted) !important;
	font-size: 13px !important;
}

/* Final-render overlay fields (certificate-view.php) — same coordinate
   system as the editor's .hledu-cert-field-chip above, but static and
   print-safe instead of draggable. */
.hledu-certificate-view__field {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* ── Certificate canvas builder (certificate-create-form.php +
   hledu-cert-designer.js) — Canva-style free-form design editor. ────────── */
.hledu-cert-designer {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.hledu-cert-designer__main {
	flex: 1 1 480px !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Left-hand template rail — small real preview cards, like a Canva template
   list, instead of a row of plain text buttons. */
.hledu-cert-designer__presets {
	flex: 0 0 120px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	max-height: 640px !important;
	overflow-y: auto !important;
}

.hledu-cert-preset-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	padding: 6px !important;
	background: var(--hledu-surface) !important;
	border: 2px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius) !important;
	cursor: pointer !important;
	transition: var(--hledu-transition) !important;
}

.hledu-cert-preset-card:hover {
	border-color: var(--hledu-primary) !important;
}

.hledu-cert-preset-card.is-active {
	border-color: var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-preset-thumb {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1.414 / 1 !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border-radius: var(--hledu-radius-sm) !important;
	pointer-events: none !important;
}

.hledu-cert-preset-thumb__inner {
	width: 640px !important;
	transform-origin: top left !important;
}

/* The 'blank' preset has no rendered thumb HTML (empty design) — show a
   plain "+" placeholder instead. */
.hledu-cert-preset-card[data-preset="blank"] .hledu-cert-preset-thumb {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px dashed var(--hledu-border) !important;
	font-size: 24px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-preset-card[data-preset="blank"] .hledu-cert-preset-thumb::before {
	content: '+' !important;
}

.hledu-cert-preset-card__label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--hledu-text) !important;
	text-align: center !important;
}

.hledu-cert-designer__toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-cert-designer__toolbar-divider {
	width: 1px !important;
	align-self: stretch !important;
	background: var(--hledu-border) !important;
}

.hledu-cert-designer__toolbar .hledu-select {
	width: auto !important;
	min-width: 160px !important;
}

.hledu-cert-designer__bg-color {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-designer__bg-color input[type="color"] {
	width: 32px !important;
	height: 28px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-designer__body {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

.hledu-cert-designer__body .hledu-cert-preview-box {
	flex: 1 1 480px !important;
	position: relative !important;
	overflow: hidden !important;
}

.hledu-cert-el {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	cursor: move !important;
	outline: 1px dashed transparent !important;
	padding: 2px !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	user-select: none !important;
	touch-action: none !important;
}

.hledu-cert-el:hover {
	outline-color: var(--hledu-border) !important;
}

.hledu-cert-el--dynamic {
	font-style: italic !important;
}

.hledu-cert-el--image {
	object-fit: contain !important;
	padding: 0 !important;
}

.hledu-cert-el.is-selected {
	outline: 2px solid var(--hledu-primary) !important;
	box-shadow: var(--hledu-glow-primary) !important;
}

.hledu-cert-el__handle {
	position: absolute !important;
	right: -6px !important;
	bottom: -6px !important;
	width: 12px !important;
	height: 12px !important;
	background: var(--hledu-primary) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	cursor: nwse-resize !important;
	touch-action: none !important;
}

/* Elements inside the designer force their own `display` value (flex/
   inline-flex via .hledu-btn etc.), which otherwise beats the browser's
   native [hidden]{display:none} rule since !important always wins over an
   unmarked UA rule regardless of specificity — this restores it. */
.hledu-cert-designer [hidden] {
	display: none !important;
}

/* The designer canvas is a size container so its elements' font sizes
   (cqw, set by hledu-cert-designer.js) scale with the canvas width. */
#hledu-cert-canvas {
	container-type: inline-size;
}

/* Phones/small tablets: the template rail beside the canvas left the
   canvas ~180px wide. Stacked instead: templates as a grid of fixed-size
   cards on top (their thumbnails are pre-scaled for a 120px card), then
   toolbar, canvas and properties at full width. The criteria row's
   "nowrap" items may wrap so they no longer run off the card. */
@media (max-width: 700px) {
	.hledu-cert-designer {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.hledu-cert-designer__presets {
		flex: none !important;
		display: grid !important;
		grid-template-columns: repeat(auto-fill, 120px) !important;
		justify-content: center !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* Props needs the extra class: its base rule comes later in this file. */
	.hledu-cert-designer__main,
	.hledu-cert-designer__body .hledu-cert-preview-box,
	.hledu-cert-designer .hledu-cert-designer__props {
		flex: 1 1 100% !important;
	}

	.hledu-cert-designer__toolbar .hledu-select {
		min-width: 0 !important;
		flex: 1 1 140px !important;
	}

	.hledu-cert-criteria-row__item {
		flex: 1 1 100% !important;
		flex-wrap: wrap !important;
		white-space: normal !important;
		min-width: 0 !important;
	}
}

.hledu-cert-designer__props {
	flex: 0 0 240px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 14px !important;
	background: var(--hledu-bg) !important;
	border-radius: var(--hledu-radius) !important;
}

.hledu-cert-designer__props h4 {
	margin: 0 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-designer__props-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	font-size: 12px !important;
	color: var(--hledu-text) !important;
}

.hledu-cert-designer__props-row textarea,
.hledu-cert-designer__props-row select,
.hledu-cert-designer__props-row input[type="number"] {
	width: 100% !important;
	box-sizing: border-box !important;
}

.hledu-cert-designer__props-row input[type="color"] {
	width: 100% !important;
	height: 30px !important;
	padding: 2px !important;
	border: 1px solid var(--hledu-border) !important;
	border-radius: var(--hledu-radius-sm) !important;
	cursor: pointer !important;
}

.hledu-cert-designer__props-row--inline {
	flex-direction: row !important;
	align-items: center !important;
}

.hledu-cert-designer__props-row--split {
	flex-direction: row !important;
	gap: 8px !important;
}

.hledu-cert-designer__props-row--split label {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.hledu-cert-designer__align-group {
	display: flex !important;
	gap: 6px !important;
}

.hledu-cert-designer__align-group .hledu-btn {
	padding: 4px 8px !important;
	font-size: 11px !important;
}

.hledu-cert-designer__align-group .hledu-btn.is-active {
	border-color: var(--hledu-primary) !important;
	color: var(--hledu-primary) !important;
}

.hledu-cert-designer__props-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 6px !important;
}

/* Final-render elements from the canvas design (hledu_render_certificate_design())
   — static, print-safe, no editor chrome. */
.hledu-cert-design-element {
	position: absolute !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	line-height: 1.3 !important;
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

.hledu-cert-design-element--image {
	object-fit: contain !important;
}

.hledu-cert-design-element--shape {
	print-color-adjust: exact !important;
	-webkit-print-color-adjust: exact !important;
}

/* Editor-side shape element — same idea as .hledu-cert-el--image, just a
   plain colored rectangle with no text child. */
.hledu-cert-el--shape {
	padding: 0 !important;
}

/* Page size / orientation — compound selectors (base class + modifier) so
   these always beat .hledu-cert-preview-box's own default 1.414:1 ratio
   regardless of source order, and only apply when a design actually sets a
   non-default page config; a design with none keeps today's exact default,
   so older saved designs are unaffected. */
.hledu-cert-preview-box.hledu-cert-page--a4-portrait {
	aspect-ratio: 1 / 1.4142 !important;
}

.hledu-cert-preview-box.hledu-cert-page--letter-landscape {
	aspect-ratio: 1.294 / 1 !important;
}

.hledu-cert-preview-box.hledu-cert-page--letter-portrait {
	aspect-ratio: 1 / 1.294 !important;
}

.hledu-cert-preview-box.hledu-cert-page--square {
	aspect-ratio: 1 / 1 !important;
}

/* ── Certificate verification search (Module 23) ─────────────────────────── */
.hledu-cert-verify__inner {
	max-width: 480px !important;
	margin: 40px auto !important;
	padding: 0 16px !important;
}

.hledu-cert-verify__intro {
	margin: 0 0 18px !important;
	font-size: 14px !important;
	color: var(--hledu-text-muted) !important;
}

.hledu-cert-verify__form .hledu-btn {
	margin-top: 4px !important;
}

.hledu-cert-verify__result {
	margin-top: 20px !important;
}

.hledu-cert-verify__result-card {
	display: flex;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 16px !important;
	border-radius: var(--hledu-radius) !important;
	border: 1px solid var(--hledu-border) !important;
}

.hledu-cert-verify__result-card--valid {
	background: var(--hledu-success-light) !important;
	border-color: var(--hledu-success) !important;
}

.hledu-cert-verify__result-card--revoked {
	background: var(--hledu-danger-light) !important;
	border-color: var(--hledu-danger) !important;
}

.hledu-cert-verify__result-card--not_found,
.hledu-cert-verify__result-card--rate_limited,
.hledu-cert-verify__result-card--error {
	background: var(--hledu-bg) !important;
}

.hledu-cert-verify__result-card .hledu-fe-badge {
	align-self: flex-start !important;
}

.hledu-cert-verify__result-row {
	display: flex;
	justify-content: space-between !important;
	gap: 12px !important;
	font-size: 14px !important;
	padding-top: 8px !important;
	border-top: 1px solid var(--hledu-border-light) !important;
}

.hledu-cert-verify__result-row:first-of-type {
	border-top: none !important;
	padding-top: 0 !important;
}

.hledu-cert-verify__result-label {
	color: var(--hledu-text-muted) !important;
	font-weight: 600 !important;
}

.hledu-cert-verify__result-value {
	color: var(--hledu-text) !important;
	text-align: right !important;
}

/* ==========================================================================
   Responsive foundation (responsive overhaul, Stage A)
   Shared, page-independent rules. Desktop/mouse rendering is unchanged:
   everything is gated on a touch pointer, a no-hover device or a narrow
   viewport. Page-specific responsive rules stay next to their component.
   ========================================================================== */

/* Touch devices: every text-entry control inside plugin markup gets 16px
   text, which stops iOS Safari from zooming the page in on focus. :is()
   keeps one rule for every plugin root (dashboards, auth page, modals
   cloned onto <body>); the :not() list leaves checkboxes, radios, ranges,
   file pickers and buttons alone.
   iOS only (-webkit-touch-callout is supported by iOS WebKit alone): on
   other touch devices it made every field and placeholder 16px on phones,
   oversized next to the 11–13px labels (QC); they keep the normal sizes and
   the ≤600px compact field sizes in hledu-admin.css. */
@supports (-webkit-touch-callout: none) {
	@media (pointer: coarse) {

		:is(.hledu-frontend, .hledu-auth-page, .hledu-modal-overlay) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="hidden"]),
		:is(.hledu-frontend, .hledu-auth-page, .hledu-modal-overlay) select,
		:is(.hledu-frontend, .hledu-auth-page, .hledu-modal-overlay) textarea {
			font-size: 16px !important;
		}
	}
}

@media (pointer: coarse) {

	.hledu-theme-toggle {
		width: 44px !important;
		height: 44px !important;
	}

	/* Fixed-size icon button: enlarge the box itself (side padding on a
	   fixed 26px width squeezed the trash icon down to a dot). */
	.hledu-notif-clear-all {
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
	}

	/* Course-learn lesson list rows (42px) and "View full list" (38px). */
	.hledu-lesson-item,
	.hledu-course-learn__expand-btn {
		min-height: var(--hledu-touch) !important;
	}

	/* The 22px close icon keeps its size and position; an invisible
	   pseudo-element extends its tappable area to 44×44. */
	.hledu-notif-close::after {
		content: "" !important;
		position: absolute !important;
		inset: -11px !important;
	}
}

/* Devices without hover (phones, tablets): controls that are only revealed
   on :hover would otherwise never appear at all. */
@media (hover: none) {
	.hledu-notif-close {
		opacity: 1;
	}
}


/* ==========================================================================
   QC round 2 — small-phone polish (320–480px), all dashboards
   Shared components only; desktop/tablet layouts are untouched (everything
   below is inside a phone media query or only constrains on small cards).
   ========================================================================== */

/* Stat cards with the icon in the bottom-right corner (Owner/Staff): the
   trend text ("+2 this month") ran underneath the icon on half-width phone
   cards. It now stays clear of the icon and wraps if needed.
   The body stretches to the card width and reserves the icon's column on
   the right — a percentage max-width on the trend resolved against the
   shrink-wrapped body (~90px) and wrapped "+1 this month" onto three lines
   even on wide tablet cards (QC). */
.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-body {
	align-self: stretch !important;
	min-width: 0 !important;
	padding-right: 46px !important;
}

.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-trend {
	display: block;
	line-height: 1.35 !important;
}

/* Arrow stays inline with its text when the line wraps. */
.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-trend>* {
	display: inline-block;
	vertical-align: -2px !important;
	margin-right: 2px !important;
}

/* Half-width phone cards: the corner icon moves to the top-right (beside
   the number, smaller) so the trend line gets the card's full width —
   beside a bottom-right icon it wrapped to three short lines. */
@media (max-width: 480px) {
	/* top/bottom were never set here, so the icon stayed bottom-right and
	   covered the end of the trend line ("+1 denna mån…") — Swedish check. */
	.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle {
		top: 10px !important;
		bottom: auto !important;
		right: 10px !important;
		width: 28px !important;
		height: 28px !important;
	}

	/* A little more room for long one-word Swedish labels
	   ("PLATTFORMSPERSONAL") in the half-width cards. */
	.hledu-frontend .hledu-stat-card.hledu-bento-card.hledu-stat-card--icon-corner {
		padding: 12px !important;
	}

	.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-label {
		letter-spacing: 0 !important;
		overflow-wrap: anywhere !important;
	}

	.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-icon-circle .dashicons {
		font-size: 15px !important;
		width: 15px !important;
		height: 15px !important;
	}

	.hledu-frontend .hledu-stat-card--icon-corner .hledu-stat-body {
		padding-right: 0 !important;
	}
}

/* Narrowest phones (320–359px): a half-width card is ~110px inside, too
   narrow for long Swedish labels — the five Owner/Staff stat cards stack
   one per row there. */
@media (max-width: 359px) {
	.hledu-frontend .hledu-bento.hledu-bento--cols-5 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 700px) {

	/* Card headers wrap on phones — keep a gap between the title row and
	   the controls row (Platform growth title/filter, "All courses" /
	   toggle, etc. touched each other). */
	.hledu-frontend .hledu-fe-card__header {
		row-gap: 12px !important;
	}
}

@media (max-width: 600px) {

	/* Card header controls (layout toggle, status filter, search, create
	   button): one full-width control per row, all the same width and
	   height, instead of a mix of sizes. */
	.hledu-frontend .hledu-fe-card__header-actions {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	/* flex: 0 0 auto — these containers are columns, where a 100% flex
	   basis would set the height (it stretched the status select to
	   ~160px). Width is set explicitly instead. */
	.hledu-frontend .hledu-fe-card__header-actions>*,
	.hledu-frontend .hledu-fe-card__header-actions .hledu-students-toolbar>* {
		width: 100% !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	.hledu-frontend .hledu-fe-card__header-actions .hledu-students-toolbar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	/* Outranks the ≤700px "flex: 1 1 140px" toolbar rule above, whose
	   140px basis turns into a 140px HEIGHT in this column layout. */
	.hledu-frontend .hledu-fe-card__header .hledu-fe-card__header-actions .hledu-students-toolbar .hledu-select,
	.hledu-frontend .hledu-fe-card__header .hledu-fe-card__header-actions .hledu-students-toolbar .hledu-search-wrap {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	.hledu-frontend .hledu-fe-card__header-actions .hledu-layout-toggle {
		display: flex;
	}

	.hledu-frontend .hledu-fe-card__header-actions .hledu-layout-toggle__btn {
		flex: 1 1 0 !important;
		justify-content: center !important;
	}

	.hledu-frontend .hledu-fe-card__header-actions .hledu-select,
	.hledu-frontend .hledu-fe-card__header-actions .hledu-search-input,
	.hledu-frontend .hledu-fe-card__header-actions .hledu-btn {
		min-height: 40px !important;
	}

	/* 37px + the toggle's 1.5px top/bottom border = the same 40px. */
	.hledu-frontend .hledu-fe-card__header-actions .hledu-layout-toggle__btn {
		min-height: 37px !important;
	}

	.hledu-frontend .hledu-fe-card__header-actions .hledu-btn {
		justify-content: center !important;
	}

	/* Page action buttons above the list (Add / Invite / Bulk import /
	   Export CSV): one full-width button per row, matching the full-width
	   search box above them. */
	.hledu-frontend .hledu-fe-actions-row,
	.hledu-frontend .hledu-fe-actions-row__group {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.hledu-frontend .hledu-fe-actions-row__group,
	.hledu-frontend .hledu-fe-actions-row>.hledu-btn,
	.hledu-frontend .hledu-fe-actions-row__group>.hledu-btn {
		width: 100% !important;
	}

	.hledu-frontend .hledu-fe-actions-row .hledu-btn {
		justify-content: center !important;
		min-height: 40px !important;
	}
}

@media (max-width: 480px) {

	/* Pagination: the "21 companies — page 1 of 2" line on its own row and
	   slightly smaller page buttons, so the page buttons fit one row. */
	.hledu-frontend .hledu-students-pagination-row {
		flex-direction: column !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.hledu-frontend .hledu-students-pagination-row .hledu-pagination-info {
		text-align: center !important;
	}

	.hledu-frontend .hledu-pagination {
		gap: 4px !important;
		padding: 0 !important;
	}

	.hledu-frontend .hledu-pagination a,
	.hledu-frontend .hledu-pagination span {
		min-width: 30px !important;
		height: 30px !important;
		padding: 0 4px !important;
		font-size: 12px !important;
	}

	/* Profile header (Owner/Staff profile, company detail): avatar and
	   name/role side by side, "Edit profile" on its own full-width row —
	   squeezed between avatar and button the name wrapped one letter per
	   line. */
	.hledu-frontend .hledu-profile-header {
		flex-wrap: wrap !important;
		gap: 12px 16px !important;
	}

	.hledu-frontend .hledu-profile-header img {
		width: 64px !important;
		height: 64px !important;
	}

	.hledu-frontend .hledu-profile-header__meta {
		flex: 1 1 140px !important;
	}

	.hledu-frontend .hledu-profile-header>.hledu-btn {
		flex: 1 1 100% !important;
		justify-content: center !important;
	}
}

@media (max-width: 700px) {

	/* Subscription banner (Company/Manager), single column on phones: the
	   desktop vertical dividers were still drawn on the right of each
	   stacked section (the ≤700px reset sits before the base rules in this
	   file and lost to them). Replaced by light horizontal separators; the
	   "Manage subscription" button spans the width. */
	.hledu-frontend .hledu-subscription-banner .hledu-subscription-banner__plan,
	.hledu-frontend .hledu-subscription-banner .hledu-subscription-banner__seats,
	.hledu-frontend .hledu-subscription-banner .hledu-subscription-banner__renewal {
		border-right: none !important;
		padding-right: 0 !important;
		padding-bottom: 16px !important;
		border-bottom: 1px solid var(--hledu-border) !important;
	}

	.hledu-frontend .hledu-subscription-banner {
		gap: 16px !important;
	}

	.hledu-frontend .hledu-subscription-banner__manage .hledu-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

@media (max-width: 480px) {

	/* "Total Learning Progress" card (Company/Manager): ring, caption and
	   text stacked and centred — beside the ring the text was squeezed into
	   a narrow, awkwardly wrapping column on phones. */
	.hledu-frontend .hledu-fe-card__body.hledu-progress-highlight {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 12px !important;
	}

	.hledu-frontend .hledu-progress-highlight__text {
		align-items: center !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {

	/* Profile picture picker (all profile forms): the file field drops
	   under the avatar when it can't get ~180px beside it — at 320px the
	   native "No file chosen" text was cut to "No f…sen". */
	.hledu-frontend .hledu-profile-picture-picker {
		flex-wrap: wrap !important;
	}

	.hledu-frontend .hledu-profile-picture-picker__field {
		flex: 1 1 180px !important;
	}
}

/* ==========================================================================
   QC round 3 — tablet density (601–1024px), all dashboards
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1100px) {

	/* Platform-wide completion + Certification pass rate (Owner/Staff):
	   side by side once the dashboard row goes single-column — two
	   full-width cards with a small ring each left a lot of empty space.
	   Phones keep them stacked. */
	.hledu-company-row-3>.hledu-platform-completion-col {
		flex-direction: row !important;
	}

	.hledu-company-row-3>.hledu-platform-completion-col>.hledu-fe-card {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {

	/* Card header (title + layout toggle + status filter + search + create
	   button): everything on the title's row, with slightly smaller
	   controls; the search box takes the remaining space. Wraps to a
	   second row only if it really doesn't fit. Field font sizes are left
	   alone (touch devices need 16px to avoid the iOS focus zoom). */
	.hledu-frontend .hledu-fe-card__header:has(> .hledu-fe-card__header-actions) {
		align-items: center !important;
		gap: 16px !important;
	}

	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		justify-content: flex-end !important;
		align-items: center !important;
		gap: 8px !important;
	}

	/* Count badge ("19 total") under the title instead of beside it. */
	.hledu-frontend .hledu-fe-card__header:has(> .hledu-fe-card__header-actions)>h2 .hledu-fe-badge {
		display: block;
		width: fit-content !important;
		margin: 4px 0 0 !important;
	}

	/* Small basis (select + a 112px search): an "auto" basis used the
	   search box's full natural width and pushed the create button onto
	   a second row although the row had room once things shrink. */
	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions .hledu-students-toolbar {
		flex: 1 1 248px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		gap: 8px !important;
		min-width: 0 !important;
	}

	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions .hledu-students-toolbar .hledu-select {
		flex: 0 0 auto !important;
		width: auto !important;
		height: 32px !important;
		min-height: 32px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions .hledu-students-toolbar .hledu-search-wrap {
		flex: 1 1 150px !important;
		width: auto !important;
		max-width: 260px !important;
		min-width: 100px !important;
	}

	/* All header controls 32px tall (toggle: 30px + its 1px border). */
	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions .hledu-layout-toggle__btn {
		padding: 0 9px !important;
		height: 30px !important;
		font-size: 12px !important;
	}

	/* Fills the (now flexible) search box — some pages give the input a
	   fixed 240px width, which spilled past the card edge (Assessment). */
	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions .hledu-search-input {
		width: 100% !important;
		min-width: 0 !important;
		height: 32px !important;
		min-height: 32px !important;
	}

	.hledu-frontend .hledu-fe-card__header>.hledu-fe-card__header-actions>.hledu-btn {
		padding: 0 12px !important;
		height: 32px !important;
		min-height: 32px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}

	/* Tables: a little less padding and smaller text so rows are less
	   tall and the columns fit (stacked tables keep their own card style). */
	.hledu-frontend .hledu-fe-table:not(.hledu-table--stacked) th {
		padding: 10px !important;
		font-size: 11px !important;
	}

	.hledu-frontend .hledu-fe-table:not(.hledu-table--stacked) td {
		padding: 10px !important;
		font-size: 13px !important;
	}

	.hledu-frontend .hledu-fe-table:not(.hledu-table--stacked) .hledu-course-mini-icon,
	.hledu-frontend .hledu-fe-table:not(.hledu-table--stacked) .hledu-course-mini-thumb {
		width: 28px !important;
		height: 28px !important;
		font-size: 12px !important;
	}

	.hledu-frontend .hledu-fe-table:not(.hledu-table--stacked) .hledu-row-actions {
		gap: 6px !important;
	}
}

/* --------------------------------------------------------------------------
   17. Course page + course player redesign — [hledu_course_single] and
   [hledu_course_learn]. Everything is namespaced `.hv-*` and scoped under a
   `.hv` page root (`.hv.hv-rd` for the player), so it cannot touch any other
   screen. Inter (SIL OFL, subset, assets/fonts/) is applied to these two
   pages only. Reader surfaces (light / warm / dark) are driven by
   [data-theme] on the player root. Section 17b holds the plugin-specific
   additions that sit on top of the design.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../assets/fonts/inter-600.woff2') format('woff2');
}

.hv {
	color-scheme:light!important;
	--ink:#163143;
	--body:#2b404d;
	--muted:#536873;
	--blue:#2457be;
	--hover:#194397;
	--paper:#fff;
	--wash:#edf2f3;
	--tint:#edf3fd;
	--rule:#d9e2e5;
	--green:#27644f;
	--softgreen:#eaf3ed;
	--read:1.125rem;
	--navy:#132f40;
	--progress-accent:#91b9ea;
}

.hv * {
	box-sizing:border-box!important;
}

html:has(.hv) {
	scroll-behavior:smooth!important;
}

body.hv-page {
	margin:0!important;
	background:var(--wash)!important;
	color:var(--body)!important;
	font-weight:400!important;
	font-size:1rem!important;
	line-height:1.6!important;
}

/* Inter is the course pages' own font; the "use theme font" setting (body.hledu-theme-font) hands it back to the theme. */
body.hv-page:not(.hledu-theme-font) {
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

.hv button:not(:where(.hv-quiz-active *)),
.hv input:not(:where(.hv-quiz-active *)),
.hv select:not(:where(.hv-quiz-active *)) {
	font:inherit!important;
}

.hv button:not(:where(.hv-quiz-active *)),
.hv a:not(:where(.hv-quiz-active *)),
.hv summary:not(:where(.hv-quiz-active *)),
.hv select:not(:where(.hv-quiz-active *)) {
	touch-action:manipulation!important;
}

.hv button:not(:where(.hv-quiz-active *)) {
	cursor:pointer!important;
	color:inherit!important;
}

.hv button:disabled:not(:where(.hv-quiz-active *)) {
	cursor:default!important;
}

.hv a:not(:where(.hv-quiz-active *)) {
	color:var(--blue)!important;
	text-underline-offset:4px!important;
}

.hv h1:not(:where(.hv-quiz-active *)),
.hv h2:not(:where(.hv-quiz-active *)),
.hv h3:not(:where(.hv-quiz-active *)),
.hv p:not(:where(.hv-quiz-active *)),
.hv figure:not(:where(.hv-quiz-active *)) {
	margin:0!important;
}

.hv h1:not(:where(.hv-quiz-active *)),
.hv h2:not(:where(.hv-quiz-active *)),
.hv h3:not(:where(.hv-quiz-active *)) {
	color:var(--ink)!important;
	font-weight:600!important;
	line-height:1.25!important;
	letter-spacing:-.035em!important;
}

.hv h2:not(:where(.hv-quiz-active *)) {
	font-size:1.65rem!important;
}

.hv h3:not(:where(.hv-quiz-active *)) {
	font-size:1.0625rem!important;
}

.hv svg:not(:where(.hv-quiz-active *)) {
	display:block;
	width:20px!important;
	height:20px!important;
	fill:none!important;
	stroke:currentColor!important;
	stroke-width:1.7!important;
	stroke-linecap:round!important;
	stroke-linejoin:round!important;
	flex:none!important;
}

.hv button:focus-visible:not(:where(.hv-quiz-active *)),
.hv a:focus-visible:not(:where(.hv-quiz-active *)),
.hv summary:focus-visible:not(:where(.hv-quiz-active *)),
.hv select:focus-visible:not(:where(.hv-quiz-active *)),
.hv input:focus-visible:not(:where(.hv-quiz-active *)) {
	outline:3px solid #5879ba!important;
	outline-offset:4px!important;
}

.hv h1:focus:not(:where(.hv-quiz-active *)),
.hv h2:focus:not(:where(.hv-quiz-active *)) {
	outline:none!important;
}

.hv [hidden] {
	display:none!important;
}

.hv .hv-wrap {
	width:min(1160px,calc(100% - 80px))!important;
	margin-inline:auto!important;
}

.hv .hv-eyebrow,
.hv .hv-section-label {
	font-size:.6875rem!important;
	font-weight:600!important;
	letter-spacing:.1em!important;
	text-transform:uppercase!important;
	color:var(--muted)!important;
}

.hv .hv-eyebrow {
	color:var(--blue)!important;
}

.hv .hv-section-label {
	margin-bottom:10px!important;
}

.hv .hv-skip {
	position:absolute!important;
	top:-100px!important;
	left:16px!important;
	z-index:99!important;
	padding:12px!important;
	background:white!important;
}

.hv .hv-skip:focus {
	top:12px!important;
}

.hv .hv-sr {
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	overflow:hidden!important;
	clip-path:inset(50%)!important;
}

.hv .hv-topbar {
	background:var(--navy)!important;
	color:#e1eaf0!important;
}

.hv .hv-topbar>.hv-wrap {
	height:72px!important;
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
}

.hv .hv-brand {
	display:flex;
	align-items:center!important;
	gap:10px!important;
	border:0!important;
	background:none!important;
	color:#fff!important;
	font-size:1.8rem!important;
	line-height:1!important;
	font-weight:600!important;
	letter-spacing:-.065em!important;
	padding:0!important;
	min-height:44px!important;
}

.hv .hv-brand-mark {
	display:flex;
	gap:3px!important;
	transform:skew(-20deg)!important;
	width:25px!important;
}

.hv .hv-brand-mark i {
	width:6px!important;
	height:24px!important;
	background:#a7c8ed!important;
}

.hv .hv-brand-mark i:last-child {
	height:16px!important;
	align-self:end!important;
}

.hv .hv-topbar-nav {
	display:flex;
	gap:28px!important;
}

.hv .hv-topbar-nav button {
	min-height:44px!important;
	background:none!important;
	border:0!important;
	color:#d8e5ed!important;
	padding:8px 0!important;
	font-size:.875rem!important;
}

.hv .hv-topbar-nav .hv-current {
	color:#fff!important;
}

.hv .hv-help-trigger {
	display:flex;
	align-items:center!important;
	gap:8px!important;
}

.hv .hv-help-trigger svg {
	width:17px!important;
	height:17px!important;
}

.hv .hv-hero {
	background:var(--navy)!important;
	color:#d3e1e9!important;
	padding:10px 0 40px!important;
	position:relative!important;
}

.hv .hv-hero:after {
	content:''!important;
	height:3px!important;
	position:absolute!important;
	bottom:0!important;
	left:0!important;
	right:0!important;
	background:linear-gradient(90deg,#91b9ea 0 28%,#c8daf4 28% 54%,#38586b 54%)!important;
}

.hv .hv-crumb {
	font-size:.75rem!important;
	color:#b4c7d3!important;
	display:flex;
	gap:12px!important;
	margin-bottom:24px!important;
}

.hv .hv-hero-grid {
	display:grid;
	grid-template-columns:1.1fr 1fr!important;
	gap:64px!important;
	align-items:center!important;
}

.hv .hv-hero .hv-eyebrow {
	color:#b7d1ef!important;
	margin-bottom:14px!important;
}

.hv .hv-hero h1 {
	color:#fff!important;
	font-size:clamp(2.125rem,3.8vw,3rem)!important;
	font-weight:600!important;
	line-height:1.16!important;
	letter-spacing:-.045em!important;
}

.hv .hv-hero .hv-lead {
	font-size:1.0625rem!important;
	line-height:1.7!important;
	max-width:510px!important;
	margin:20px 0!important;
}

.hv .hv-facts {
	display:flex;
	flex-wrap:wrap!important;
	gap:12px 20px!important;
	font-size:.875rem!important;
	color:#deebf2!important;
}

.hv .hv-facts>span {
	display:flex;
	gap:7px!important;
	align-items:center!important;
}

.hv .hv-facts svg {
	width:16px!important;
	height:16px!important;
	color:#adcae9!important;
}

.hv .hv-hero-action {
	display:flex;
	align-items:center!important;
	flex-wrap:wrap!important;
	gap:14px 20px!important;
	margin-top:26px!important;
}

.hv .hv-hero-action p {
	font-size:.75rem!important;
	max-width:180px!important;
	color:#bbceda!important;
	line-height:1.6!important;
}

.hv .hv-primary {
	display:inline-flex;
	align-items:center!important;
	justify-content:center!important;
	gap:12px!important;
	background:var(--blue)!important;
	color:#fff!important;
	border:0!important;
	border-radius:6px!important;
	min-height:50px!important;
	padding:12px 20px!important;
	font-size:.9375rem!important;
	font-weight:600!important;
	line-height:1.5!important;
	text-decoration:none!important;
	transition:background .16s!important;
}

.hv .hv-primary:hover {
	background:var(--hover)!important;
}

.hv .hv-primary:disabled {
	opacity:.5;
}

.hv .hv-hero .hv-primary {
	background:#dceaff!important;
	color:#193e68!important;
	min-width:188px!important;
	box-shadow:0 3px 0 #071b2820!important;
}

.hv .hv-hero .hv-primary:hover {
	background:#fff!important;
}

.hv .hv-course-visual {
	position:relative!important;
	height:330px!important;
	overflow:hidden!important;
	border-radius:10px!important;
	background:#5a798c!important;
	isolation:isolate!important;
}

.hv .hv-course-visual img {
	display:block;
	width:100%!important;
	height:100%!important;
	object-fit:cover!important;
	object-position:50% 35%!important;
}

.hv .hv-course-visual:after {
	content:''!important;
	position:absolute!important;
	inset:25% 0 0!important;
	background:linear-gradient(transparent,#102c40e8)!important;
	z-index:1!important;
}

.hv .hv-course-visual figcaption {
	position:absolute!important;
	z-index:2!important;
	bottom:26px!important;
	left:26px!important;
	right:24px!important;
	color:white!important;
	font-size:1.4rem!important;
	font-weight:500!important;
	line-height:1.4!important;
	letter-spacing:-.025em!important;
}

.hv .hv-course-visual figcaption>span {
	display:block;
	font-size:.6875rem!important;
	font-weight:500!important;
	text-transform:uppercase!important;
	letter-spacing:.13em!important;
	color:#d7e5ed!important;
	margin-bottom:8px!important;
}

.hv .hv-has-progress .hv-hero {
	padding:34px 0!important;
}

.hv .hv-resume-panel {
	display:grid;
	grid-template-columns:minmax(0,1fr) 288px!important;
	align-items:center!important;
	gap:64px!important;
}

.hv .hv-resume-panel h1 {
	font-size:2.4rem!important;
}

.hv .hv-resume-copy>p:not(.hv-eyebrow) {
	margin:12px 0 22px!important;
	max-width:650px!important;
	line-height:1.65!important;
}

.hv .hv-resume-status {
	padding-left:28px!important;
	border-left:1px solid #ffffff26!important;
}

.hv .hv-resume-status>.hv-eyebrow {
	display:block;
	margin-bottom:8px!important;
}

.hv .hv-resume-status>#hv-resume-progress-label {
	color:white!important;
	font-size:1.0625rem!important;
	font-weight:500!important;
}

.hv .hv-resume-status .hv-progress-line {
	background:#385464!important;
	margin:16px 0 10px!important;
	height:5px!important;
}

.hv .hv-resume-status .hv-progress-line span {
	background:var(--progress-accent)!important;
}

.hv .hv-resume-note {
	font-size:.8125rem!important;
	color:#bfd0db!important;
}

.hv .hv-link-arrow,
.hv .hv-link-arrow-down {
	width:16px!important;
	height:16px!important;
}

.hv .hv-link-arrow-down {
	transform:rotate(90deg)!important;
}

.hv .hv-resume-link {
	font-size:.8125rem!important;
	color:#d8e7fb!important;
	display:inline-flex;
	align-items:center!important;
	gap:8px!important;
	min-height:44px!important;
	line-height:1.5!important;
	margin-top:5px!important;
}

.hv .hv-overview-layout {
	display:grid;
	grid-template-columns:minmax(0,1fr) 272px!important;
	gap:32px!important;
	padding-block:36px 64px!important;
	align-items:start!important;
}

.hv .hv-main-flow {
	min-width:0!important;
	background:var(--paper)!important;
	padding:36px 38px 30px!important;
	border-radius:10px!important;
}

.hv .hv-section-heading {
	display:flex;
	align-items:flex-end!important;
	justify-content:space-between!important;
	gap:16px!important;
	margin-bottom:18px!important;
}

.hv .hv-section-heading p:not(.hv-section-label) {
	font-size:.875rem!important;
	color:var(--muted)!important;
	margin-top:8px!important;
}

.hv .hv-text-btn {
	background:none!important;
	border:0!important;
	color:var(--blue)!important;
	font-size:.8125rem!important;
	font-weight:500!important;
	line-height:1.5!important;
	min-height:44px!important;
	padding:8px 0!important;
}

.hv .hv-section-heading .hv-text-btn {
	text-align:right!important;
	max-width:105px!important;
}

.hv .hv-curriculum-note {
	display:flex;
	gap:9px!important;
	align-items:flex-start!important;
	font-size:.8125rem!important;
	color:var(--muted)!important;
	line-height:1.65!important;
	margin-bottom:20px!important;
}

.hv .hv-preview-key {
	width:6px!important;
	height:6px!important;
	flex:none!important;
	background:var(--blue)!important;
	border-radius:50%!important;
	margin-top:8px!important;
}

.hv .hv-module {
	border-top:1px solid var(--rule)!important;
}

.hv .hv-module h3 {
	font-size:1rem!important;
	letter-spacing:0!important;
}

.hv .hv-module-toggle {
	display:grid;
	grid-template-columns:28px 1fr 18px!important;
	align-items:start!important;
	gap:12px!important;
	width:100%!important;
	border:0!important;
	background:none!important;
	text-align:left!important;
	padding:22px 0!important;
}

.hv .hv-module-toggle:hover .hv-module-title {
	color:var(--blue)!important;
}

.hv .hv-module-num {
	font-size:.8125rem!important;
	color:var(--muted)!important;
	padding-top:3px!important;
	font-variant-numeric:tabular-nums!important;
}

.hv .hv-module-title {
	display:block;
	font-size:1rem!important;
	font-weight:600!important;
	line-height:1.5!important;
}

.hv .hv-module-meta {
	display:block;
	font-size:.8125rem!important;
	font-weight:400!important;
	color:var(--muted)!important;
	margin-top:4px!important;
	line-height:1.6!important;
}

.hv .hv-module-toggle>svg {
	width:18px!important;
	height:18px!important;
	margin-top:4px!important;
	transition:transform .15s!important;
}

.hv .hv-module-toggle[aria-expanded=true]>svg {
	transform:rotate(180deg)!important;
}

.hv .hv-lessons {
	list-style:none!important;
	margin:0 0 18px 26px!important;
	padding:0!important;
}

.hv .hv-lesson-row {
	display:grid;
	grid-template-columns:17px 1fr auto!important;
	gap:12px!important;
	align-items:start!important;
	width:100%!important;
	background:none!important;
	border:0!important;
	border-radius:5px!important;
	min-height:52px!important;
	padding:13px 12px!important;
	text-align:left!important;
	font-size:.9375rem!important;
	line-height:1.55!important;
}

.hv .hv-lesson-row:not(.hv-is-planned):hover {
	background:var(--tint)!important;
}

.hv .hv-lesson-icon {
	color:var(--muted)!important;
	display:flex;
	margin-top:3px!important;
}

.hv .hv-lesson-icon svg {
	width:16px!important;
	height:16px!important;
}

.hv .hv-lesson-row .hv-time {
	font-size:.8125rem!important;
	white-space:nowrap!important;
	color:var(--muted)!important;
	padding-top:1px!important;
}

.hv .hv-lesson-row .hv-status {
	font-size:.6875rem!important;
	color:var(--green)!important;
	font-weight:500!important;
	display:inline-block;
	margin-left:7px!important;
}

.hv .hv-lesson-row.hv-is-next {
	background:var(--tint)!important;
	color:var(--blue)!important;
}

.hv .hv-lesson-row.hv-is-next .hv-status,
.hv .hv-lesson-row.hv-is-next .hv-lesson-icon {
	color:var(--blue)!important;
}

.hv .hv-lesson-row.hv-is-complete .hv-lesson-icon {
	color:var(--green)!important;
}

.hv .hv-preview-badge {
	display:inline-block;
	font-size:.625rem!important;
	letter-spacing:.025em!important;
	padding:1px 5px!important;
	border-radius:3px!important;
	background:#e5eefb!important;
	color:#315687!important;
	margin-left:7px!important;
	vertical-align:1px!important;
	white-space:nowrap!important;
}

.hv .hv-lesson-row.hv-is-planned {
	color:#5f717c!important;
}

.hv .hv-exam {
	display:flex;
	gap:16px!important;
	border-top:1px solid var(--rule)!important;
	padding-top:24px!important;
}

.hv .hv-exam-icon {
	background:#f0f3f4!important;
	color:#557482!important;
	border-radius:7px!important;
	padding:10px!important;
	display:flex;
	height:40px!important;
}

.hv .hv-exam p {
	font-size:.875rem!important;
	color:var(--muted)!important;
	margin-top:6px!important;
}

.hv .hv-exam small {
	display:block;
	font-size:.8125rem!important;
	color:var(--muted)!important;
	margin-top:9px!important;
	line-height:1.6!important;
}

.hv .hv-enroll {
	background:#dfece6!important;
	color:#355449!important;
	border-radius:10px!important;
	padding:24px!important;
}

.hv .hv-enroll .hv-eyebrow {
	color:#4a6b5d!important;
	margin-bottom:12px!important;
}

.hv .hv-enroll h2 {
	font-size:1.5rem!important;
	line-height:1.3!important;
	margin-bottom:12px!important;
	color:#193f32!important;
}

.hv .hv-enroll>p {
	font-size:.9375rem!important;
}

.hv .hv-enroll .hv-primary {
	width:100%!important;
	background:#254f42!important;
	margin:22px 0 10px!important;
}

.hv .hv-enroll .hv-primary:hover {
	background:#183f32!important;
}

.hv .hv-enroll .hv-fine {
	font-size:.75rem!important;
	color:#486659!important;
}

.hv .hv-side-note {
	padding:26px 6px!important;
}

.hv .hv-side-note h3 {
	font-size:1rem!important;
	margin-bottom:16px!important;
}

.hv .hv-side-note dl {
	margin:0!important;
}

.hv .hv-side-note dl>div {
	display:flex;
	justify-content:space-between!important;
	gap:12px!important;
	font-size:.875rem!important;
	margin-bottom:10px!important;
}

.hv .hv-side-note dt {
	color:var(--muted)!important;
}

.hv .hv-side-note dd {
	margin:0!important;
	color:var(--ink)!important;
	text-align:right!important;
}

.hv .hv-support-note {
	display:flex;
	align-items:flex-start!important;
	gap:10px!important;
	margin:0 6px!important;
	border-top:1px solid var(--rule)!important;
	padding-top:20px!important;
}

.hv .hv-support-note>svg {
	margin-top:4px!important;
	color:#5b7985!important;
}

.hv .hv-support-note strong {
	font-size:.8125rem!important;
	font-weight:500!important;
}

.hv .hv-support-note .hv-text-btn {
	display:inline-flex;
	align-items:center!important;
	gap:8px!important;
	font-size:.75rem!important;
	text-align:left!important;
}

.hv .hv-course-about {
	padding-top:36px!important;
	margin-top:34px!important;
	border-top:1px solid var(--rule)!important;
}

.hv .hv-course-about h2 {
	font-size:1.4rem!important;
}

.hv .hv-course-about>p:not(.hv-section-label) {
	font-size:.9375rem!important;
	line-height:1.7!important;
	margin-top:14px!important;
}

.hv .hv-course-about details {
	margin-top:16px!important;
}

.hv .hv-course-about summary {
	cursor:pointer!important;
	list-style:none!important;
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
	gap:12px!important;
	min-height:48px!important;
	color:var(--blue)!important;
	font-weight:500!important;
	font-size:.875rem!important;
}

.hv .hv-course-about summary::-webkit-details-marker {
	display:none;
}

.hv .hv-course-about details[open] summary svg {
	transform:rotate(180deg)!important;
}

.hv .hv-quality-facts {
	margin:8px 0 16px!important;
	font-size:.875rem!important;
}

.hv .hv-quality-facts>div {
	display:grid;
	grid-template-columns:160px 1fr!important;
	gap:20px!important;
	padding:12px 0!important;
	border-bottom:1px solid var(--rule)!important;
}

.hv .hv-quality-facts dt {
	font-weight:500!important;
	color:var(--ink)!important;
}

.hv .hv-quality-facts dd {
	margin:0!important;
	color:var(--muted)!important;
}

.hv .hv-about-note {
	font-size:.8125rem!important;
	color:var(--muted)!important;
}

.hv .hv-progress-line {
	height:4px!important;
	border-radius:3px!important;
	background:var(--rule)!important;
	overflow:hidden!important;
	margin:14px 0 8px!important;
}

.hv .hv-progress-line span {
	display:block;
	height:100%!important;
	background:var(--blue)!important;
	width:0;
	transition:width .2s!important;
}

.hv .hv-progress-label {
	display:flex;
	justify-content:space-between!important;
	color:var(--muted)!important;
	font-size:.75rem!important;
}

.hv .hv-footer {
	padding:30px 0!important;
	background:var(--navy)!important;
	color:#baccd7!important;
	font-size:.75rem!important;
}

.hv .hv-footer>.hv-wrap {
	display:flex;
	justify-content:space-between!important;
	gap:20px!important;
	align-items:center!important;
}

.hv .hv-footer-brand {
	font-size:1.5rem!important;
	letter-spacing:-.05em!important;
	font-weight:600!important;
	color:white!important;
}

.hv .hv-footer-brand>span {
	display:block;
	font-size:.75rem!important;
	letter-spacing:0!important;
	font-weight:400!important;
	color:#baccd7!important;
	margin-top:3px!important;
}

.hv.hv-rd {
	--paper:#fff;
	--wash:#eff3f4;
	--ink:#163143;
	--body:#2b404d;
	--muted:#536873;
	--blue:#2457be;
	--rule:#d9e2e5;
	--tint:#edf3fd;
	--green:#27644f;
	--softgreen:#eaf3ed;
	--read:1.125rem;
	min-height:100vh!important;
	background:var(--paper)!important;
	color:var(--body)!important;
}

.hv.hv-rd[data-theme=warm] {
	--paper:#faf7ef;
	--wash:#f0eee5;
	--rule:#dedbd2;
	--tint:#eaf0f6;
}

.hv.hv-rd[data-theme=dark] {
	color-scheme:dark!important;
	--paper:#172331;
	--wash:#202f3f;
	--ink:#f4f7fb;
	--body:#d9e3ed;
	--muted:#b2c4d2;
	--rule:#405266;
	--tint:#293f58;
	--blue:#a3c5ff;
	--green:#b8ddc6;
	--softgreen:#234438;
}

.hv .hv-reader-head {
	background:var(--navy)!important;
	color:#d8e6ed!important;
	position:sticky!important;
	top:0!important;
	z-index:20!important;
	box-shadow:0 1px 0 #ffffff10!important;
}

.hv .hv-reader-head .hv-wrap {
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
	min-height:62px!important;
	gap:20px!important;
}

.hv .hv-reader-head button {
	display:flex;
	align-items:center!important;
	gap:9px!important;
	background:none!important;
	border:0!important;
	color:#eff5f8!important;
	min-height:44px!important;
	padding:8px 0!important;
	font-size:.8125rem!important;
}

.hv .hv-head-title {
	font-size:.875rem!important;
	font-weight:600!important;
	color:white!important;
}

.hv .hv-head-title>span {
	font-weight:400!important;
	color:#b7ccd9!important;
	margin-left:12px!important;
}

.hv .hv-reader-workspace {
	width:min(980px,calc(100% - 80px))!important;
	padding-top:22px!important;
}

.hv .hv-reader-toolbar {
	margin-left:310px!important;
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
	gap:12px!important;
	min-height:44px!important;
	margin-bottom:24px!important;
}

.hv .hv-saved {
	font-size:.6875rem!important;
	color:var(--muted)!important;
	line-height:1.5!important;
}

.hv .hv-settings-toggle {
	display:flex;
	align-items:center!important;
	gap:8px!important;
	padding:8px 0!important;
	min-height:44px!important;
	background:none!important;
	border:0!important;
	color:var(--muted)!important;
	font-size:.8125rem!important;
}

.hv .hv-settings-toggle>span {
	font-size:1rem!important;
	font-weight:500!important;
	color:var(--ink)!important;
}

.hv .hv-settings-toggle svg {
	width:14px!important;
	height:14px!important;
}

.hv .hv-settings-toggle[aria-expanded=true] svg {
	transform:rotate(180deg)!important;
}

.hv .hv-reading-settings-panel {
	margin:0 0 24px 310px!important;
	background:var(--wash)!important;
	border-radius:7px!important;
	padding:16px 18px!important;
	display:flex;
	flex-wrap:wrap!important;
	gap:12px 18px!important;
	align-items:center!important;
}

.hv .hv-setting-group {
	display:flex;
	align-items:center!important;
	gap:10px!important;
}

.hv .hv-setting-group label {
	font-size:.8125rem!important;
	color:var(--muted)!important;
}

.hv .hv-reading-settings-panel select {
	background:var(--paper)!important;
	color:var(--body)!important;
	border:1px solid var(--rule)!important;
	border-radius:5px!important;
	min-height:44px!important;
	padding:8px!important;
	font-size:.875rem!important;
}

.hv .hv-reading-settings-panel button {
	min-height:44px!important;
	padding:8px 10px!important;
	border:1px solid var(--rule)!important;
	background:var(--paper)!important;
	border-radius:5px!important;
	color:var(--body)!important;
	font-size:.8125rem!important;
}

.hv .hv-reading-settings-panel button[aria-pressed=true] {
	background:var(--tint)!important;
	border-color:var(--blue)!important;
	color:var(--blue)!important;
}

.hv .hv-reader-layout {
	display:grid;
	grid-template-columns:254px minmax(0,620px)!important;
	gap:56px!important;
	align-items:start!important;
	padding-bottom:72px!important;
}

.hv .hv-reader-nav {
	padding:22px 16px!important;
	background:var(--wash)!important;
	border-radius:8px!important;
}

.hv .hv-reader-nav h2 {
	font-size:1.125rem!important;
}

.hv .hv-reader-nav>.hv-section-label {
	font-size:.625rem!important;
	margin-bottom:6px!important;
}

.hv .hv-nav-progress {
	margin-bottom:24px!important;
}

.hv .hv-reader-nav details {
	margin-top:14px!important;
}

.hv .hv-reader-nav summary {
	font-size:.9375rem!important;
	line-height:1.6!important;
	font-weight:600!important;
	color:var(--ink)!important;
	cursor:pointer!important;
	min-height:44px!important;
	padding-block:7px!important;
}

.hv .hv-reader-nav ol {
	padding:0!important;
	margin:8px 0 16px!important;
	list-style:none!important;
}

.hv .hv-nav-lesson {
	display:flex;
	align-items:flex-start!important;
	gap:9px!important;
	min-height:44px!important;
	padding:10px 8px!important;
	border:0!important;
	background:none!important;
	border-radius:5px!important;
	width:100%!important;
	text-align:left!important;
	font-size:.9375rem!important;
	line-height:1.6!important;
	color:var(--body)!important;
}

.hv .hv-nav-lesson svg {
	width:14px!important;
	height:14px!important;
	margin-top:5px!important;
}

.hv .hv-nav-lesson[aria-current=step] {
	color:var(--blue)!important;
	background:var(--paper)!important;
	font-weight:500!important;
}

.hv .hv-nav-lesson:not(.hv-is-planned):hover {
	background:var(--paper)!important;
}

.hv .hv-nav-lesson.hv-is-planned {
	color:var(--muted)!important;
}

.hv .hv-reader-nav .hv-preview-badge {
	display:none;
}

.hv .hv-reading-area {
	min-width:0!important;
	width:100%!important;
	max-width:620px!important;
}

.hv.hv-rd .hv-eyebrow {
	font-size:.6875rem!important;
	margin-bottom:12px!important;
	letter-spacing:.085em!important;
}

.hv .hv-reader-title {
	font-size:2.25rem!important;
	line-height:1.22!important;
	letter-spacing:-.04em!important;
}

.hv .hv-lesson-intro {
	font-size:.875rem!important;
	color:var(--muted)!important;
	margin:12px 0 24px!important;
	line-height:1.6!important;
}

.hv .hv-learning-goal {
	border-left:3px solid var(--blue)!important;
	padding-left:18px!important;
	margin-bottom:30px!important;
	font-size:var(--read)!important;
	line-height:1.65!important;
}

.hv .hv-learning-goal strong {
	display:block;
	color:var(--ink)!important;
	font-size:.83em!important;
	font-weight:600!important;
	margin-bottom:4px!important;
}

.hv .hv-reading-copy {
	font-size:var(--read)!important;
	line-height:1.65!important;
	max-width:620px!important;
	text-align:left!important;
	overflow-wrap:break-word!important;
}

.hv .hv-reading-copy p {
	margin:0 0 1.35em!important;
}

.hv .hv-reading-copy h2 {
	font-size:1.4em!important;
	line-height:1.35!important;
	margin:1.7em 0 .65em!important;
}

.hv .hv-reading-copy ul {
	padding-left:1.2em!important;
	margin:0 0 1.35em!important;
}

.hv .hv-reading-copy li {
	margin-bottom:.45em!important;
	padding-left:3px!important;
}

.hv .hv-reading-copy strong {
	font-weight:600!important;
}

.hv .hv-reading-copy .hv-eyebrow {
	font-size:.66em!important;
}

.hv .hv-reading-copy .hv-eyebrow+h2 {
	margin-top:0!important;
}

.hv .hv-lesson-end {
	display:flex;
	justify-content:space-between!important;
	align-items:center!important;
	flex-wrap:wrap!important;
	gap:16px!important;
	margin-top:30px!important;
	padding-top:24px!important;
	border-top:1px solid var(--rule)!important;
}

.hv .hv-lesson-end>button:not(.hv-primary) {
	display:inline-flex;
	align-items:center!important;
	justify-content:center!important;
	gap:8px!important;
	line-height:1.5!important;
	background:none!important;
	border:0!important;
	font-size:.875rem!important;
	min-height:44px!important;
	padding:8px 0!important;
	color:var(--muted)!important;
}

.hv .hv-lesson-end p {
	font-size:.8125rem!important;
	color:var(--muted)!important;
	flex-basis:100%!important;
}

.hv.hv-rd[data-theme=dark] .hv-primary {
	background:#a3c5ff!important;
	color:#153044!important;
}

.hv.hv-rd[data-theme=dark] .hv-primary:hover {
	background:#c1d7fb!important;
}

.hv .hv-mobile-course {
	display:none;
}

.hv.hv-rd.hv-large-text {
	--read:1.375rem;
}

.hv.hv-rd.hv-focus-mode .hv-reader-nav {
	display:none;
}

.hv.hv-rd.hv-focus-mode .hv-reader-layout {
	grid-template-columns:minmax(0,620px)!important;
	justify-content:center!important;
}

.hv.hv-rd.hv-focus-mode .hv-reader-toolbar,
.hv.hv-rd.hv-focus-mode .hv-reading-settings-panel {
	margin-left:auto!important;
	margin-right:auto!important;
	max-width:620px!important;
}

.hv .hv-toast {
	position:fixed!important;
	bottom:22px!important;
	left:50%!important;
	transform:translateX(-50%)!important;
	max-width:calc(100% - 32px)!important;
	padding:13px 20px!important;
	border-radius:6px!important;
	background:var(--navy)!important;
	color:#fff!important;
	font-size:.875rem!important;
	z-index:30!important;
	box-shadow:0 4px 20px #132f4020!important;
}

@media(min-width:901px) {
	.hv .hv-overview-aside {
		position:sticky!important;
		top:24px!important;
	}
}

@media(max-width:1100px) {
	.hv .hv-wrap {
		width:calc(100% - 48px)!important;
	}

	.hv .hv-hero-grid {
		gap:36px!important;
	}

	.hv .hv-hero h1 {
		font-size:2.6rem!important;
	}

	.hv .hv-hero-action {
		gap:12px!important;
	}

	.hv .hv-hero-action p {
		max-width:none!important;
	}

	.hv .hv-course-visual {
		height:340px!important;
	}

	.hv .hv-overview-layout {
		grid-template-columns:minmax(0,1fr) 245px!important;
		gap:24px!important;
	}

	.hv .hv-main-flow {
		padding:30px!important;
	}

	.hv .hv-enroll {
		padding:22px!important;
	}

	.hv .hv-reader-workspace {
		width:calc(100% - 48px)!important;
	}

	.hv .hv-reader-layout {
		grid-template-columns:240px minmax(0,620px)!important;
		gap:36px!important;
	}

	.hv .hv-reader-toolbar,
	.hv .hv-reading-settings-panel {
		margin-left:276px!important;
	}
}

@media(max-width:900px) {
	.hv .hv-reader-workspace {
		width:min(668px,calc(100% - 40px))!important;
		padding-top:12px!important;
	}

	.hv .hv-reader-layout {
		display:block;
		padding-bottom:48px!important;
	}

	.hv .hv-reader-toolbar,
	.hv.hv-rd.hv-focus-mode .hv-reader-toolbar {
		margin:0 0 20px!important;
		max-width:none!important;
	}

	.hv .hv-mobile-course {
		display:flex;
		align-items:center!important;
		gap:8px!important;
		min-height:44px!important;
		padding:8px 0!important;
		background:none!important;
		border:0!important;
		color:var(--blue)!important;
		font-size:.8125rem!important;
	}

	.hv .hv-mobile-course svg {
		width:16px!important;
		height:16px!important;
	}

	.hv .hv-reader-toolbar .hv-saved {
		display:none;
	}

	.hv .hv-reader-nav,
	.hv.hv-rd.hv-focus-mode .hv-reader-nav {
		display:none;
		margin-bottom:28px!important;
		padding:20px!important;
	}

	.hv .hv-reader-nav.hv-mobile-open,
	.hv.hv-rd.hv-focus-mode .hv-reader-nav.hv-mobile-open {
		display:block;
	}

	.hv .hv-reader-nav ol {
		display:grid;
		grid-template-columns:1fr 1fr!important;
	}

	.hv .hv-reading-settings-panel,
	.hv.hv-rd.hv-focus-mode .hv-reading-settings-panel {
		margin:0 0 20px!important;
		max-width:none!important;
	}

	.hv .hv-focus-control {
		display:none;
	}

	.hv .hv-reading-area {
		margin-inline:auto!important;
	}

	.hv .hv-head-title>span {
		display:none;
	}

	.hv .hv-hero-grid {
		gap:26px!important;
		grid-template-columns:1.1fr .9fr!important;
	}

	.hv .hv-hero h1 {
		font-size:2.25rem!important;
	}

	.hv .hv-hero .hv-lead {
		font-size:1rem!important;
	}

	.hv .hv-course-visual {
		height:330px!important;
	}

	.hv .hv-course-visual figcaption {
		font-size:1.1rem!important;
		left:20px!important;
	}

	.hv .hv-overview-layout {
		grid-template-columns:minmax(0,1fr) 220px!important;
		gap:22px!important;
	}

	.hv .hv-main-flow {
		padding:26px!important;
	}

	.hv .hv-resume-panel {
		grid-template-columns:minmax(0,1fr) 230px!important;
		gap:30px!important;
	}

	.hv .hv-resume-panel h1 {
		font-size:2rem!important;
	}
}

@media(max-width:760px) {
	.hv .hv-wrap {
		width:calc(100% - 40px)!important;
	}

	.hv .hv-topbar>.hv-wrap {
		height:64px!important;
	}

	.hv .hv-brand {
		font-size:1.6rem!important;
	}

	.hv .hv-topbar-nav {
		gap:20px!important;
	}

	.hv .hv-topbar-nav button {
		font-size:.8125rem!important;
	}

	.hv .hv-hero {
		padding:8px 0 28px!important;
	}

	.hv .hv-crumb {
		font-size:.6875rem!important;
		margin-bottom:20px!important;
	}

	.hv .hv-hero-grid {
		grid-template-columns:1fr!important;
		gap:26px!important;
	}

	.hv .hv-hero h1 {
		font-size:2.5rem!important;
	}

	.hv .hv-hero .hv-eyebrow {
		font-size:.625rem!important;
	}

	.hv .hv-hero .hv-lead {
		margin:16px 0 20px!important;
		max-width:580px!important;
		font-size:1rem!important;
	}

	.hv .hv-hero-action {
		margin-top:22px!important;
		gap:10px!important;
	}

	.hv .hv-hero-action .hv-primary {
		min-width:190px!important;
	}

	.hv .hv-hero-action p {
		font-size:.6875rem!important;
		max-width:170px!important;
	}

	.hv .hv-course-visual {
		height:190px!important;
	}

	.hv .hv-course-visual img {
		object-position:50% 30%!important;
	}

	.hv .hv-course-visual figcaption {
		font-size:1.1rem!important;
		bottom:20px!important;
	}

	.hv .hv-course-visual figcaption br {
		display:none;
	}

	.hv .hv-course-visual figcaption>span {
		font-size:.6875rem!important;
	}

	.hv .hv-overview-layout {
		display:flex;
		flex-direction:column!important;
		gap:30px!important;
		padding-block:24px 40px!important;
	}

	.hv .hv-main-flow {
		width:100%!important;
		padding:26px 24px!important;
	}

	.hv .hv-overview-aside {
		display:grid;
		width:100%!important;
		grid-template-columns:1fr 1fr!important;
		gap:22px!important;
	}

	.hv .hv-overview-aside .hv-enroll {
		display:none;
	}

	.hv .hv-side-note {
		padding:0!important;
	}

	.hv .hv-support-note {
		margin:0!important;
		border:0!important;
		padding:0!important;
	}

	.hv .hv-section-heading {
		align-items:flex-start!important;
	}

	.hv .hv-section-heading h2 {
		font-size:1.4rem!important;
	}

	.hv .hv-section-heading p:not(.hv-section-label) {
		font-size:.8125rem!important;
	}

	.hv .hv-section-heading .hv-text-btn {
		font-size:.75rem!important;
		max-width:85px!important;
	}

	.hv .hv-course-about>p:not(.hv-section-label) {
		font-size:.9375rem!important;
	}

	.hv .hv-resume-panel {
		grid-template-columns:1fr!important;
		gap:22px!important;
	}

	.hv .hv-has-progress .hv-hero {
		padding:26px 0!important;
	}

	.hv .hv-resume-panel h1 {
		font-size:2rem!important;
	}

	.hv .hv-resume-copy>p:not(.hv-eyebrow) {
		font-size:.9375rem!important;
		margin-bottom:18px!important;
	}

	.hv .hv-resume-status {
		padding:20px 0 0!important;
		border-left:0!important;
		border-top:1px solid #ffffff26!important;
	}

	.hv .hv-resume-status>.hv-eyebrow,
	.hv .hv-resume-note {
		display:none;
	}

	.hv .hv-resume-status>#hv-resume-progress-label {
		font-size:.875rem!important;
	}

	.hv .hv-resume-status .hv-progress-line {
		margin:10px 0!important;
	}

	.hv .hv-resume-link {
		margin-top:3px!important;
		font-size:.75rem!important;
	}

	.hv .hv-footer .hv-wrap {
		align-items:flex-start!important;
	}

	.hv .hv-reader-head .hv-wrap {
		min-height:56px!important;
		gap:12px!important;
	}

	.hv .hv-reader-head button {
		font-size:.8125rem!important;
	}

	.hv .hv-reader-head .hv-head-title {
		font-size:.8125rem!important;
	}

	.hv .hv-reader-title {
		font-size:2rem!important;
	}

	.hv.hv-rd .hv-eyebrow {
		font-size:.625rem!important;
		line-height:1.5!important;
		margin-bottom:10px!important;
	}

	.hv .hv-lesson-intro {
		font-size:.8125rem!important;
		margin:12px 0 20px!important;
	}

	.hv .hv-learning-goal {
		padding-left:15px!important;
		margin-bottom:26px!important;
	}

	.hv .hv-quality-facts>div {
		grid-template-columns:1fr!important;
		gap:5px!important;
	}

	.hv .hv-lesson-end .hv-primary {
		margin-left:auto!important;
	}
}

@media(max-width:440px) {
	.hv .hv-wrap,
	.hv .hv-reader-workspace {
		width:calc(100% - 32px)!important;
	}

	.hv .hv-topbar-nav .hv-current {
		display:none;
	}

	.hv .hv-hero h1 {
		font-size:2.125rem!important;
	}

	.hv .hv-hero-action {
		display:block;
	}

	.hv .hv-hero-action .hv-primary {
		width:100%!important;
		min-height:50px!important;
	}

	.hv .hv-hero-action p {
		max-width:none!important;
		margin-top:9px!important;
	}

	.hv .hv-facts {
		font-size:.8125rem!important;
		gap:10px 15px!important;
	}

	.hv .hv-course-visual {
		height:190px!important;
	}

	.hv .hv-course-visual figcaption {
		bottom:16px!important;
		left:18px!important;
		font-size:1rem!important;
	}

	.hv .hv-course-visual figcaption>span {
		font-size:.6875rem!important;
		margin-bottom:5px!important;
	}

	.hv .hv-main-flow {
		padding:24px 18px!important;
	}

	.hv .hv-section-heading {
		gap:12px!important;
	}

	.hv .hv-section-heading h2 {
		font-size:1.25rem!important;
	}

	.hv .hv-section-heading .hv-text-btn {
		max-width:70px!important;
		font-size:.6875rem!important;
	}

	.hv .hv-curriculum-note {
		font-size:.75rem!important;
	}

	.hv .hv-module-toggle {
		grid-template-columns:22px 1fr 16px!important;
		gap:8px!important;
	}

	.hv .hv-module-title {
		font-size:.9375rem!important;
	}

	.hv .hv-module-meta {
		font-size:.75rem!important;
	}

	.hv .hv-lessons {
		margin-left:4px!important;
	}

	.hv .hv-lesson-row {
		padding:12px 8px!important;
		gap:8px!important;
		font-size:.9375rem!important;
		grid-template-columns:15px 1fr auto!important;
	}

	.hv .hv-lesson-row .hv-time {
		font-size:.75rem!important;
	}

	.hv .hv-lesson-row .hv-status {
		margin-left:0!important;
		display:block;
		margin-top:3px!important;
	}

	.hv .hv-preview-badge {
		font-size:.5625rem!important;
		margin-left:4px!important;
	}

	.hv .hv-overview-aside {
		grid-template-columns:1fr!important;
	}

	.hv .hv-support-note {
		border-top:1px solid var(--rule)!important;
		padding-top:20px!important;
	}

	.hv .hv-exam {
		gap:10px!important;
	}

	.hv .hv-exam-icon {
		padding:8px!important;
		height:36px!important;
	}

	.hv .hv-exam p,
	.hv .hv-exam small {
		font-size:.8125rem!important;
	}

	.hv .hv-reader-toolbar {
		margin-bottom:16px!important;
	}

	.hv .hv-settings-toggle {
		font-size:.75rem!important;
		gap:6px!important;
	}

	.hv .hv-settings-toggle>span {
		font-size:.9375rem!important;
	}

	.hv .hv-mobile-course {
		font-size:.75rem!important;
	}

	.hv .hv-reader-title {
		font-size:1.85rem!important;
	}

	.hv .hv-reader-nav ol {
		grid-template-columns:1fr!important;
	}

	.hv .hv-learning-goal {
		line-height:1.6!important;
	}

	.hv .hv-lesson-end .hv-primary {
		width:100%!important;
		font-size:.875rem!important;
		padding-inline:14px!important;
	}

	.hv .hv-lesson-end>button:not(.hv-primary) {
		order:2!important;
	}

	.hv .hv-lesson-end p {
		order:3!important;
	}

	.hv .hv-footer .hv-wrap {
		flex-direction:column!important;
		gap:20px!important;
	}

	.hv .hv-footer-brand {
		font-size:1.3rem!important;
	}
}

@media(prefers-reduced-motion:reduce) {
	html:has(.hv) {
		scroll-behavior:auto!important;
	}

	.hv *,
	.hv *:before,
	.hv *:after {
		transition:none!important;
	}
}

@media print {
	.hv .hv-topbar,
	.hv .hv-reader-head,
	.hv .hv-reader-toolbar,
	.hv .hv-reading-settings-panel,
	.hv .hv-reader-nav,
	.hv .hv-overview-aside,
	.hv .hv-footer,
	.hv .hv-hero-action,
	.hv .hv-lesson-end,
	.hv .hv-toast {
		display:none!important;
	}

	.hv .hv-wrap,
	.hv .hv-reader-workspace {
		width:100%!important;
		padding:0!important;
	}

	.hv .hv-overview-layout,
	.hv .hv-reader-layout {
		display:block;
	}

	.hv.hv-rd,
	.hv .hv-hero {
		background:white!important;
		color:#222!important;
		--paper:#fff;
		--ink:#111;
		--body:#222;
		--wash:#f3f3f3;
	}

	.hv .hv-hero h1,
	.hv .hv-hero .hv-lead,
	.hv .hv-hero .hv-facts {
		color:#111!important;
	}

	.hv .hv-course-visual {
		display:none;
	}

	.hv .hv-main-flow {
		padding:20px 0!important;
	}

	.hv .hv-reading-area {
		margin:auto!important;
	}

	.hv .hv-module ul[hidden] {
		display:block!important;
	}

	.hv .hv-main-flow {
		background:none!important;
	}

	.hv button:not(:where(.hv-quiz-active *)) {
		display:none;
	}
}

.hv #hv-overview {
	background:#f0f3f4!important;
}

.hv .hv-overview-layout {
	grid-template-columns:minmax(0, 1fr) 272px!important;
	gap:28px!important;
	padding-block:36px 64px!important;
}

.hv .hv-main-flow {
	min-width:0!important;
	padding:0!important;
	border-radius:0!important;
	background:none!important;
}

.hv .hv-curriculum-section {
	background:#fff!important;
	border-radius:14px!important;
	box-shadow:0 4px 24px #14314304!important;
	overflow:hidden!important;
}

.hv .hv-curriculum-section .hv-section-heading {
	align-items:center!important;
	gap:20px!important;
	margin:0!important;
	padding:30px 30px 22px!important;
}

.hv .hv-curriculum-section .hv-section-label {
	margin-bottom:8px!important;
	font-size:.6875rem!important;
	color:#55717b!important;
}

.hv .hv-curriculum-section h2 {
	font-size:1.75rem!important;
	line-height:1.25!important;
	letter-spacing:-.035em!important;
}

.hv .hv-curriculum-section .hv-section-heading p:not(.hv-section-label) {
	font-size:.8125rem!important;
	margin-top:9px!important;
	line-height:1.65!important;
}

.hv .hv-course-summary {
	display:flex;
	flex-wrap:wrap!important;
	gap:2px 9px!important;
}

.hv .hv-course-summary span {
	white-space:nowrap!important;
}

.hv .hv-course-duration::before {
	content:"·"!important;
	margin-right:9px!important;
}

.hv #hv-expand-all {
	flex:none!important;
	min-width:74px!important;
	max-width:none!important;
	padding:8px 12px!important;
	font-size:.8125rem!important;
	text-align:center!important;
	background:#f0f4f6!important;
	border-radius:6px!important;
}

.hv #hv-expand-all:hover {
	background:#e5edf2!important;
}

.hv .hv-curriculum-note {
	margin:0 24px 20px!important;
	padding:12px 14px!important;
	border-radius:8px!important;
	background:#eef3fa!important;
	color:#4a627a!important;
	align-items:center!important;
	gap:12px!important;
	font-size:.8125rem!important;
	line-height:1.6!important;
}

.hv .hv-curriculum-note p {
	margin:0!important;
}

.hv .hv-curriculum-note strong {
	font-weight:500!important;
	color:#284c76!important;
}

.hv .hv-curriculum-note .hv-preview-key {
	display:grid;
	place-items:center!important;
	width:28px!important;
	height:28px!important;
	margin:0!important;
	border-radius:50%!important;
	background:#dce7f7!important;
	color:#2457be!important;
}

.hv .hv-preview-key svg {
	width:14px!important;
	height:14px!important;
	stroke-width:2!important;
}

.hv #hv-curriculum {
	padding:0 14px 14px!important;
}

.hv .hv-module {
	border:0!important;
	border-radius:10px!important;
	transition:background .16s!important;
}

.hv .hv-module + .hv-module {
	border-top:1px solid #e5ebed!important;
}

.hv .hv-module.hv-is-open {
	background:#f1f5f7!important;
	border-color:transparent!important;
}

.hv .hv-module.hv-is-open + .hv-module {
	border-top-color:transparent!important;
}

.hv .hv-module-toggle {
	grid-template-columns:34px minmax(0,1fr) 28px!important;
	gap:14px!important;
	align-items:center!important;
	padding:18px 16px!important;
}

.hv .hv-module-num {
	display:grid;
	place-items:center!important;
	width:34px!important;
	height:34px!important;
	padding:0!important;
	border-radius:9px!important;
	background:#edf1f2!important;
	color:#566c78!important;
	font-size:.75rem!important;
	font-weight:600!important;
}

.hv .hv-module.hv-is-open .hv-module-num {
	background:#1b3c4e!important;
	color:#fff!important;
}

.hv .hv-module-title {
	font-size:1.0625rem!important;
	line-height:1.45!important;
	letter-spacing:-.015em!important;
	color:#203b4b!important;
}

.hv .hv-module-meta {
	display:flex;
	flex-wrap:wrap!important;
	gap:4px 10px!important;
	align-items:center!important;
	font-size:.8125rem!important;
	line-height:1.5!important;
	margin-top:5px!important;
}

.hv .hv-module-progress {
	font-size:.75rem!important;
	color:#28705a!important;
	padding-left:10px!important;
	border-left:1px solid #c6d5d6!important;
}

.hv .hv-module-chevron {
	display:grid;
	place-items:center!important;
	width:100%!important;
	aspect-ratio:1!important;
	border-radius:50%!important;
	color:#54707e!important;
}

.hv .hv-module-chevron svg {
	width:16px!important;
	height:16px!important;
	transition:transform .16s!important;
}

.hv .hv-module-toggle[aria-expanded=true] .hv-module-chevron svg {
	transform:rotate(180deg)!important;
}

.hv .hv-module-toggle:hover .hv-module-chevron {
	background:#e2eaef!important;
}

.hv .hv-module-content {
	padding:0 14px 14px!important;
}

.hv .hv-lessons {
	margin:0 0 0 34px!important;
	padding:0!important;
}

.hv .hv-lesson-row {
	display:grid;
	grid-template-columns:32px minmax(0,1fr) 68px!important;
	gap:12px!important;
	min-height:66px!important;
	padding:11px 12px!important;
	align-items:center!important;
	border-radius:7px!important;
	font-size:1rem!important;
	line-height:1.5!important;
}

.hv .hv-lesson-icon {
	width:32px!important;
	height:32px!important;
	margin:0!important;
	display:grid;
	place-items:center!important;
	color:#5f7b8a!important;
}

.hv .hv-lesson-icon svg {
	width:19px!important;
	height:19px!important;
	stroke-width:1.6!important;
}

.hv .hv-lesson-row:not(.hv-is-planned):hover {
	background:#fff!important;
}

.hv .hv-lesson-row.hv-is-next {
	background:#e3edfc!important;
	color:#244fa3!important;
}

.hv .hv-lesson-row.hv-is-next:hover {
	background:#d7e5f9!important;
}

.hv .hv-lesson-row.hv-is-next .hv-lesson-icon {
	background:#2457be!important;
	color:#fff!important;
	border-radius:50%!important;
}

.hv .hv-lesson-row.hv-is-next .hv-lesson-icon svg {
	width:16px!important;
	height:16px!important;
	stroke-width:2!important;
}

.hv .hv-lesson-row.hv-is-complete .hv-lesson-icon {
	color:#28705a!important;
}

.hv .hv-lesson-row.hv-is-complete .hv-lesson-icon svg {
	width:32px!important;
	height:32px!important;
}

.hv .hv-lesson-name {
	display:block;
	color:inherit!important;
	font-size:1rem!important;
	line-height:1.5!important;
	letter-spacing:-.01em!important;
}

.hv .hv-lesson-detail {
	display:block;
	margin-top:2px!important;
	font-size:.75rem!important;
	line-height:1.5!important;
	color:#566c78!important;
}

.hv .hv-lesson-row.hv-is-next .hv-lesson-detail {
	color:#365d9d!important;
}

.hv .hv-lesson-row.hv-is-complete .hv-lesson-detail {
	color:#28705a!important;
	font-weight:500!important;
}

.hv .hv-lesson-row.hv-is-planned {
	color:#566c78!important;
}

.hv .hv-lesson-row.hv-is-planned .hv-lesson-icon {
	color:#84959e!important;
}

.hv .hv-lesson-tail {
	display:flex;
	gap:10px!important;
	justify-content:flex-end!important;
	align-items:center!important;
}

.hv .hv-lesson-tail .hv-time {
	font-size:.75rem!important;
	padding:0!important;
	color:#566c78!important;
}

.hv .hv-lesson-tail > svg {
	width:15px!important;
	height:15px!important;
	color:#4574ae!important;
}

.hv .hv-exam {
	margin:0!important;
	padding:23px 30px 26px!important;
	border:0!important;
	background:#edf2fa!important;
	gap:17px!important;
	align-items:flex-start!important;
}

.hv .hv-exam-icon {
	display:grid;
	place-items:center!important;
	width:44px!important;
	height:44px!important;
	padding:0!important;
	border-radius:11px!important;
	background:#dbe7f7!important;
	color:#355d90!important;
	flex:none!important;
}

.hv .hv-exam-icon svg {
	width:26px!important;
	height:26px!important;
}

.hv .hv-exam .hv-section-label {
	display:block;
	color:#47668b!important;
	margin-bottom:5px!important;
	font-size:.6875rem!important;
}

.hv .hv-exam h3 {
	color:#193e68!important;
	font-size:1.125rem!important;
	letter-spacing:-.02em!important;
}

.hv .hv-exam p {
	color:#455f7c!important;
	font-size:.8125rem!important;
	margin-top:7px!important;
}

.hv .hv-exam small {
	color:#47668b!important;
	font-size:.75rem!important;
	max-width:560px!important;
	margin-top:7px!important;
}

.hv .hv-overview-aside .hv-enroll {
	padding:26px!important;
	background:#183b4d!important;
	color:#c4d6df!important;
	border-radius:12px!important;
}

.hv .hv-enroll .hv-eyebrow {
	color:#b7d1ef!important;
}

.hv .hv-enroll h2 {
	color:#fff!important;
	font-size:1.5rem!important;
}

.hv .hv-enroll .hv-primary {
	background:#dceaff!important;
	color:#193e68!important;
}

.hv .hv-enroll .hv-primary:hover {
	background:#edf4ff!important;
}

.hv .hv-enroll .hv-fine {
	color:#adcad5!important;
	font-size:.6875rem!important;
}

.hv .hv-enroll .hv-progress-line {
	background:#3e6070!important;
}

.hv .hv-enroll .hv-progress-line span {
	background:#91b9ea!important;
}

.hv .hv-enroll .hv-progress-label {
	color:#c7dce5!important;
}

.hv .hv-side-note {
	padding:25px 8px!important;
}

.hv .hv-course-about {
	margin-top:0!important;
	padding:27px 6px 0!important;
	border-top:0!important;
}

@media(max-width:1100px) {
	.hv .hv-overview-layout {
		grid-template-columns:minmax(0,1fr) 245px!important;
		gap:22px!important;
	}

	.hv .hv-curriculum-section .hv-section-heading {
		padding:26px 24px 20px!important;
	}

	.hv .hv-curriculum-note {
		margin-inline:20px!important;
	}

	.hv #hv-curriculum {
		padding-inline:10px!important;
	}

	.hv .hv-module-toggle {
		gap:11px!important;
		padding-inline:12px!important;
	}

	.hv .hv-module-title {
		font-size:1rem!important;
	}

	.hv .hv-module-content {
		padding-inline:8px!important;
	}

	.hv .hv-lessons {
		margin-left:22px!important;
	}

	.hv .hv-lesson-row {
		grid-template-columns:30px minmax(0,1fr) 62px!important;
		gap:9px!important;
		padding-inline:9px!important;
	}

	.hv .hv-lesson-name {
		font-size:1rem!important;
	}

	.hv .hv-exam {
		padding-inline:24px!important;
	}
}

@media(max-width:900px) {
	.hv .hv-overview-layout {
		grid-template-columns:minmax(0,1fr) 220px!important;
	}

	.hv .hv-overview-aside .hv-enroll {
		padding:22px!important;
	}

	.hv .hv-enroll h2 {
		font-size:1.35rem!important;
	}

	.hv .hv-lesson-tail {
		gap:6px!important;
	}

	.hv .hv-module-toggle {
		grid-template-columns:30px minmax(0,1fr) 22px!important;
		gap:10px!important;
	}

	.hv .hv-module-num {
		width:30px!important;
		height:30px!important;
	}

	.hv .hv-lessons {
		margin-left:0!important;
	}
}

@media(max-width:760px) {
	.hv .hv-overview-layout {
		display:flex;
		gap:28px!important;
		padding-block:24px 40px!important;
	}

	.hv .hv-main-flow {
		padding:0!important;
	}

	.hv .hv-overview-aside {
		grid-template-columns:1fr 1fr!important;
	}

	.hv .hv-curriculum-section .hv-section-heading {
		padding:24px 24px 18px!important;
	}

	.hv .hv-curriculum-section h2 {
		font-size:1.6rem!important;
	}

	.hv .hv-curriculum-section .hv-section-heading .hv-text-btn {
		max-width:none!important;
		font-size:.75rem!important;
	}

	.hv .hv-module-title {
		font-size:1.0625rem!important;
	}

	.hv .hv-module-content {
		padding-inline:12px!important;
	}

	.hv .hv-lessons {
		margin-left:26px!important;
	}

	.hv .hv-lesson-name {
		font-size:1rem!important;
	}

	.hv .hv-side-note {
		padding:0!important;
	}
}

@media(max-width:520px) {
	.hv .hv-curriculum-section {
		border-radius:11px!important;
	}

	.hv .hv-curriculum-section .hv-section-heading {
		padding:23px 18px 17px!important;
		gap:10px!important;
		align-items:flex-start!important;
	}

	.hv .hv-curriculum-section .hv-section-label {
		font-size:.6875rem!important;
		max-width:190px!important;
	}

	.hv .hv-curriculum-section h2 {
		font-size:1.5rem!important;
	}

	.hv .hv-curriculum-section .hv-section-heading p:not(.hv-section-label) {
		font-size:.75rem!important;
		max-width:230px!important;
	}

	.hv .hv-course-duration::before {
		content:none!important;
	}

	.hv #hv-expand-all {
		min-width:64px!important;
		margin-top:20px!important;
		padding-inline:8px!important;
	}

	.hv .hv-curriculum-note {
		margin:0 12px 14px!important;
		padding:12px!important;
		gap:10px!important;
		font-size:.75rem!important;
		align-items:flex-start!important;
	}

	.hv .hv-curriculum-note .hv-preview-key {
		width:24px!important;
		height:24px!important;
	}

	.hv .hv-curriculum-note strong {
		display:block;
	}

	.hv #hv-curriculum {
		padding:0 6px 10px!important;
	}

	.hv .hv-module-toggle {
		grid-template-columns:30px minmax(0,1fr) 20px!important;
		gap:10px!important;
		padding:17px 12px!important;
	}

	.hv .hv-module-title {
		font-size:1rem!important;
	}

	.hv .hv-module-meta {
		font-size:.75rem!important;
		gap:4px 7px!important;
	}

	.hv .hv-module-progress {
		flex-basis:100%!important;
		padding-left:0!important;
		border-left:0!important;
		font-size:.75rem!important;
	}

	.hv .hv-module-content {
		padding:0 7px 10px!important;
	}

	.hv .hv-lessons {
		margin-left:0!important;
	}

	.hv .hv-lesson-row {
		grid-template-columns:28px minmax(0,1fr) 38px!important;
		gap:9px!important;
		padding:11px 8px!important;
		min-height:64px!important;
	}

	.hv .hv-lesson-name {
		font-size:1rem!important;
	}

	.hv .hv-lesson-detail {
		font-size:.75rem!important;
	}

	.hv .hv-lesson-icon {
		width:28px!important;
		height:28px!important;
	}

	.hv .hv-lesson-row.hv-is-complete .hv-lesson-icon svg {
		width:28px!important;
		height:28px!important;
	}

	.hv .hv-lesson-row.hv-is-next .hv-lesson-icon svg {
		width:14px!important;
		height:14px!important;
	}

	.hv .hv-lesson-tail {
		flex-direction:column!important;
		align-items:flex-end!important;
		gap:5px!important;
	}

	.hv .hv-lesson-tail .hv-time {
		font-size:.75rem!important;
	}

	.hv .hv-lesson-tail > svg {
		width:14px!important;
		height:14px!important;
	}

	.hv .hv-exam {
		padding:22px 18px!important;
		gap:12px!important;
	}

	.hv .hv-exam-icon {
		width:36px!important;
		height:36px!important;
		border-radius:9px!important;
	}

	.hv .hv-exam-icon svg {
		width:22px!important;
		height:22px!important;
	}

	.hv .hv-exam h3 {
		font-size:1.0625rem!important;
	}

	.hv .hv-exam p,
	.hv .hv-exam small {
		font-size:.75rem!important;
	}

	.hv .hv-overview-aside {
		grid-template-columns:1fr!important;
	}

	.hv .hv-course-about {
		padding-inline:4px!important;
	}
}

@media print {
	.hv .hv-curriculum-section {
		box-shadow:none!important;
	}

	.hv .hv-module-content[hidden] {
		display:block !important;
	}

	.hv .hv-module-toggle {
		display:grid !important;
	}

	.hv #hv-expand-all {
		display:none;
	}
}

.hv.hv-rd {
	--paper:#fbfcfe;
	--wash:#edf2f8;
	--ink:#17364e;
	--body:#2d3d4c;
	--muted:#52677a;
	--rule:#d6e0ec;
	--tint:#e8f0fc;
	--option:#fff;
	--option-hover:#f2f6fd;
	--bad-bg:#fff3e1;
	--bad-ink:#79521b;
	--on-status:#fff;
	--read:1.1875rem;
	--section-space:44px;
	--block-space:32px;
	--panel-inset:24px;
	--measure:640px;
	--nav-width:264px;
	--column-gap:48px;
	font-weight:400!important;
}

.hv.hv-rd[data-theme=warm] {
	--paper:#faf7f1;
	--wash:#f0ece3;
	--ink:#213c4c;
	--body:#393d3e;
	--muted:#5d665f;
	--rule:#dcd7cc;
	--tint:#e8eef8;
	--option:#fdfbf7;
	--option-hover:#f4f0e8;
}

.hv.hv-rd[data-theme=dark] {
	--paper:#172331;
	--wash:#203145;
	--ink:#eff5fb;
	--body:#d5e0eb;
	--muted:#a8bbce;
	--rule:#40566f;
	--blue:#a8caff;
	--tint:#294361;
	--option:#19293b;
	--option-hover:#2a4059;
	--bad-bg:#3d3022;
	--bad-ink:#f2c881;
	--on-status:#163228;
	--completion-check:#163228;
}

.hv.hv-rd.hv-large-text {
	--read:1.375rem;
}

.hv.hv-rd button:focus-visible,
.hv.hv-rd select:focus-visible,
.hv.hv-rd summary:focus-visible,
.hv.hv-rd a:focus-visible {
	outline:3px solid var(--blue)!important;
	outline-offset:4px!important;
}

.hv.hv-rd :is(button,select,summary,a,[data-reading-anchor]) {
	scroll-margin-block:88px 24px!important;
}

.hv .hv-reader-head .hv-wrap {
	display:grid;
	grid-template-columns:1fr minmax(0,2fr) 1fr!important;
	gap:24px!important;
	min-height:66px!important;
}

.hv .hv-reader-head button {
	justify-self:start!important;
	font-size:.875rem!important;
}

.hv .hv-head-title {
	display:grid;
	gap:1px!important;
	text-align:center!important;
	min-width:0!important;
}

.hv .hv-reader-head .hv-head-title > span {
	display:block;
	margin:0!important;
}

.hv .hv-reader-head .hv-reader-course-code {
	color:#b4cbe0!important;
	font-size:.6875rem!important;
	font-weight:500!important;
	letter-spacing:.055em!important;
}

.hv #hv-reader-current-title {
	color:#f4f8fc!important;
	font-size:.875rem!important;
	font-weight:500!important;
	white-space:nowrap!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
}

.hv .hv-reader-workspace {
	width:min(calc(var(--nav-width) + var(--column-gap) + var(--measure)),calc(100% - 64px))!important;
	padding-top:16px!important;
}

.hv .hv-reader-toolbar {
	margin-left:calc(var(--nav-width) + var(--column-gap))!important;
	margin-bottom:20px!important;
	min-height:44px!important;
}

.hv .hv-saved {
	font-size:.75rem!important;
	line-height:1.5!important;
}

.hv .hv-settings-toggle {
	padding:8px 12px!important;
	border-radius:7px!important;
	background:var(--wash)!important;
	font-size:.875rem!important;
	gap:8px!important;
}

.hv .hv-settings-toggle:hover,
.hv .hv-settings-toggle[aria-expanded=true] {
	background:var(--tint)!important;
	color:var(--blue)!important;
}

.hv .hv-settings-toggle > span[aria-hidden] {
	font-size:1rem!important;
}

.hv .hv-settings-toggle .hv-control-label {
	min-width:0!important;
	font:inherit!important;
	color:inherit!important;
}

.hv .hv-reading-settings-panel {
	margin-left:calc(var(--nav-width) + var(--column-gap))!important;
	margin-bottom:28px!important;
	padding:18px!important;
	gap:12px!important;
}

.hv .hv-setting-group label,
.hv .hv-reading-settings-panel button {
	font-size:.875rem!important;
}

.hv .hv-reader-layout {
	grid-template-columns:var(--nav-width) minmax(0,1fr)!important;
	gap:var(--column-gap)!important;
	padding-bottom:72px!important;
}

.hv .hv-reader-nav {
	position:sticky!important;
	top:90px!important;
	max-height:calc(100dvh - 114px)!important;
	overflow-y:auto!important;
	overscroll-behavior:contain!important;
	scrollbar-width:thin!important;
	padding:0 4px 12px!important;
	background:none!important;
	border-radius:0!important;
}

.hv .hv-reader-nav :is(button,summary):focus-visible {
	outline:2px solid var(--blue)!important;
	outline-offset:-3px!important;
}

.hv .hv-nav-course-heading {
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
	gap:12px!important;
	padding:0 10px!important;
}

.hv .hv-reader-nav h2 {
	font-size:1.125rem!important;
	margin:0!important;
}

.hv .hv-nav-course-heading > span {
	font-size:.6875rem!important;
	color:var(--muted)!important;
	white-space:nowrap!important;
}

.hv .hv-reader-nav .hv-nav-progress {
	margin:14px 10px 0!important;
}

.hv .hv-reader-nav .hv-progress-label {
	font-size:.75rem!important;
	margin:0 0 9px!important;
}

.hv .hv-reader-nav .hv-progress-line {
	height:4px!important;
	background:var(--rule)!important;
}

.hv .hv-reader-nav .hv-nav-module {
	margin-top:8px!important;
	padding:0!important;
	border-radius:9px!important;
}

.hv .hv-reader-nav .hv-nav-module[open] {
	background:var(--wash)!important;
	padding-bottom:8px!important;
}

.hv .hv-reader-nav summary {
	display:grid;
	grid-template-columns:26px minmax(0,1fr) 12px!important;
	align-items:start!important;
	gap:10px!important;
	list-style:none!important;
	position:relative!important;
	padding:14px 10px!important;
	font-size:.875rem!important;
	line-height:1.45!important;
	font-weight:500!important;
}

.hv .hv-reader-nav summary::-webkit-details-marker {
	display:none;
}

.hv .hv-reader-nav summary::before {
	display:none;
}

.hv .hv-reader-nav summary:hover .hv-nav-module-title {
	color:var(--blue)!important;
}

.hv .hv-reader-nav summary > svg {
	width:12px!important;
	height:12px!important;
	margin-top:6px!important;
	color:var(--muted)!important;
	transform:rotate(-90deg)!important;
}

.hv .hv-reader-nav details[open] > summary > svg {
	transform:rotate(0)!important;
}

.hv .hv-nav-module-number {
	display:grid;
	place-items:center!important;
	width:26px!important;
	height:26px!important;
	margin-top:1px!important;
	border-radius:6px!important;
	background:var(--wash)!important;
	color:var(--muted)!important;
	font-size:.6875rem!important;
	font-weight:600!important;
}

.hv .hv-is-active-module .hv-nav-module-number {
	background:var(--tint)!important;
	color:var(--blue)!important;
}

.hv .hv-nav-module-copy,
.hv .hv-nav-module-title {
	display:block;
}

.hv .hv-nav-module-title {
	color:var(--body)!important;
}

.hv .hv-is-active-module .hv-nav-module-title {
	color:var(--ink)!important;
	font-weight:600!important;
}

.hv .hv-nav-module-meta {
	display:block;
	margin-top:5px!important;
	color:var(--muted)!important;
	font-size:.75rem!important;
	line-height:1.5!important;
	font-weight:400!important;
}

.hv .hv-reader-nav ol {
	display:block;
	padding:0!important;
	margin:0!important;
	list-style:none!important;
}

.hv .hv-reader-nav .hv-nav-available {
	padding:0 6px!important;
}

.hv .hv-nav-available > li + li {
	margin-top:4px!important;
}

.hv .hv-nav-lesson {
	display:grid;
	grid-template-columns:26px minmax(0,1fr)!important;
	align-items:start!important;
	gap:9px!important;
	min-height:44px!important;
	width:100%!important;
	padding:12px 10px!important;
	border:0!important;
	border-radius:7px!important;
	background:none!important;
	font-size:.875rem!important;
	line-height:1.5!important;
	font-weight:400!important;
	color:var(--body)!important;
	text-align:left!important;
}

.hv .hv-nav-lesson-copy,
.hv .hv-nav-lesson-title {
	display:block;
	min-width:0!important;
}

.hv .hv-nav-lesson-title {
	font-weight:500!important;
}

.hv .hv-nav-lesson-marker {
	display:grid;
	place-items:center!important;
	width:26px!important;
	height:26px!important;
	background:var(--tint)!important;
	border-radius:6px!important;
	color:var(--blue)!important;
	font-size:.75rem!important;
	font-weight:600!important;
}

.hv .hv-nav-lesson-marker svg {
	width:24px!important;
	height:24px!important;
	margin:0!important;
}

.hv .hv-nav-lesson[aria-current=step] {
	background:var(--option)!important;
	box-shadow:0 2px 5px #142e4810!important;
	color:var(--blue)!important;
}

.hv .hv-nav-lesson[aria-current=step] .hv-nav-lesson-title {
	font-weight:600!important;
}

.hv .hv-nav-lesson[aria-current=step]:not(.hv-is-complete) .hv-nav-lesson-marker {
	background:var(--blue)!important;
	color:var(--paper)!important;
}

.hv .hv-nav-lesson:not(.hv-is-planned):hover {
	background:var(--option-hover)!important;
}

.hv .hv-nav-lesson.hv-is-complete .hv-nav-lesson-marker {
	background:none!important;
}

.hv .hv-nav-lesson.hv-is-complete svg {
	width:26px!important;
	height:26px!important;
	color:var(--green)!important;
	margin:0!important;
}

.hv .hv-nav-lesson-status {
	display:flex;
	flex-wrap:wrap!important;
	gap:3px 10px!important;
	margin-top:4px!important;
	font-size:.75rem!important;
	font-weight:400!important;
	color:var(--muted)!important;
}

.hv .hv-nav-location {
	color:var(--blue)!important;
	font-weight:600!important;
}

.hv .hv-nav-completion {
	color:var(--green)!important;
	font-weight:600!important;
}

.hv .hv-nav-lesson.hv-is-planned {
	min-height:0!important;
	grid-template-columns:20px minmax(0,1fr)!important;
	padding:8px 0!important;
	border-radius:0!important;
	font-size:.8125rem!important;
	color:var(--muted)!important;
}

.hv .hv-nav-lesson.hv-is-planned .hv-nav-lesson-title {
	font-weight:400!important;
}

.hv .hv-reading-area {
	max-width:var(--measure)!important;
}

.hv .hv-lesson-heading {
	margin-bottom:24px!important;
}

.hv .hv-lesson-heading .hv-eyebrow {
	font-size:.75rem!important;
	line-height:1.6!important;
	letter-spacing:.06em!important;
	color:var(--muted)!important;
	margin-bottom:12px!important;
}

.hv .hv-reader-title {
	font-size:2.375rem!important;
	line-height:1.2!important;
	letter-spacing:-.035em!important;
	text-wrap:balance!important;
}

.hv .hv-lesson-intro {
	font-size:.875rem!important;
	margin:14px 0 0!important;
}

.hv .hv-learning-goal {
	background:none!important;
	border-left:3px solid var(--blue)!important;
	padding:3px 0 3px 20px!important;
	border-radius:0!important;
	margin:0 0 32px!important;
	font-size:var(--read)!important;
	line-height:1.7!important;
}

.hv .hv-learning-goal strong {
	font-size:.8125em!important;
	line-height:1.5!important;
	margin-bottom:6px!important;
}

.hv .hv-reading-copy {
	max-width:var(--measure)!important;
	font-size:var(--read)!important;
	line-height:1.75!important;
	letter-spacing:0!important;
}

.hv .hv-reading-copy p {
	margin-bottom:1.35em!important;
}

.hv .hv-reading-copy h2 {
	font-size:1.42em!important;
	line-height:1.32!important;
	letter-spacing:-.025em!important;
	margin:var(--section-space) 0 16px!important;
	text-wrap:balance!important;
}

.hv .hv-reading-copy h3 {
	font-size:1.08em!important;
	line-height:1.4!important;
	letter-spacing:-.015em!important;
	margin:1.5em 0 .6em!important;
}

.hv .hv-reading-copy ul,
.hv .hv-reading-copy ol {
	padding-left:1.2em!important;
}

.hv .hv-reading-copy li {
	margin-bottom:.5em!important;
	padding-left:4px!important;
}

.hv .hv-reading-copy .hv-eyebrow {
	font-size:.75rem!important;
	line-height:1.6!important;
	letter-spacing:.075em!important;
	margin:36px 0 12px!important;
}

.hv .hv-reading-copy .hv-eyebrow + h2 {
	margin-top:0!important;
}

.hv #hv-quiz-options {
	display:grid;
	gap:12px!important;
}

.hv .hv-lesson-end {
	display:block;
	margin-top:24px!important;
	padding-top:20px!important;
	border-top:1px solid var(--rule)!important;
}

.hv .hv-next-step-copy h3 {
	font-size:1rem!important;
	line-height:1.5!important;
	margin:0 0 6px!important;
	letter-spacing:-.01em!important;
}

.hv .hv-next-step-copy p {
	font-size:.875rem!important;
	line-height:1.65!important;
	margin:0!important;
}

.hv .hv-lesson-actions {
	display:flex;
	flex-wrap:wrap!important;
	align-items:center!important;
	gap:12px!important;
	margin-top:16px!important;
}

.hv .hv-lesson-actions:has(> button:not([hidden])) {
	min-height:50px!important;
}

.hv .hv-lesson-actions:not(:has(> button:not([hidden]))) {
	display:none;
}

.hv .hv-secondary-action {
	display:inline-flex;
	align-items:center!important;
	justify-content:center!important;
	gap:8px!important;
	min-height:48px!important;
	padding:11px 16px!important;
	border:1px solid var(--blue)!important;
	border-radius:6px!important;
	background:var(--option)!important;
	color:var(--blue)!important;
	font-size:.875rem!important;
	font-weight:500!important;
	line-height:1.5!important;
}

.hv .hv-secondary-action:hover {
	background:var(--tint)!important;
}

.hv .hv-lesson-navigation {
	margin-top:16px!important;
}

.hv .hv-lesson-navigation:has(button[hidden]) {
	display:none;
}

.hv .hv-lesson-navigation .hv-text-btn {
	display:inline-flex;
	align-items:center!important;
	gap:8px!important;
	color:var(--muted)!important;
}

@media(max-width:600px) {
	.hv .hv-lesson-actions > button {
		width:100%!important;
		justify-content:center!important;
	}
}

.hv.hv-rd.hv-focus-mode .hv-reader-workspace {
	width:min(var(--measure),calc(100% - 64px))!important;
}

.hv.hv-rd.hv-focus-mode .hv-reader-layout {
	display:block;
}

.hv.hv-rd.hv-focus-mode .hv-reader-toolbar,
.hv.hv-rd.hv-focus-mode .hv-reading-settings-panel {
	margin-left:0!important;
	max-width:none!important;
}

@media(max-width:1100px) {
	.hv.hv-rd {
		--nav-width:240px;
		--column-gap:24px;
	}
}

@media(max-width:900px) {
	.hv .hv-reader-workspace,
	.hv.hv-rd.hv-focus-mode .hv-reader-workspace {
		width:min(var(--measure),calc(100% - 48px))!important;
		padding-top:16px!important;
	}

	.hv .hv-reader-toolbar {
		margin-left:0!important;
		margin-bottom:26px!important;
	}

	.hv .hv-reader-layout {
		display:block;
	}

	.hv .hv-reader-nav,
	.hv.hv-rd.hv-focus-mode .hv-reader-nav {
		position:static!important;
		max-height:none!important;
		overflow:visible!important;
		margin-bottom:28px!important;
		padding:0 0 20px!important;
	}

	.hv .hv-reader-nav ol {
		display:block;
	}

	.hv .hv-reading-settings-panel {
		margin-left:0!important;
	}

	.hv .hv-mobile-course {
		font-size:.875rem!important;
	}
}

@media(max-width:600px) {
	.hv.hv-rd {
		--read:1.125rem;
		--section-space:36px;
		--block-space:28px;
		--panel-inset:18px;
	}

	.hv.hv-rd.hv-large-text {
		--read:1.375rem;
	}

	.hv .hv-reader-head .hv-wrap {
		width:calc(100% - 40px)!important;
		grid-template-columns:1fr auto 1fr!important;
		gap:12px!important;
		min-height:58px!important;
	}

	.hv .hv-reader-head .hv-reader-course-code {
		white-space:nowrap!important;
		font-size:.75rem!important;
		letter-spacing:0!important;
	}

	.hv .hv-reader-head #hv-reader-current-title,
	.hv .hv-reader-course-name {
		display:none;
	}

	.hv .hv-reader-head button {
		font-size:.8125rem!important;
		gap:7px!important;
	}

	.hv .hv-reader-head button svg {
		width:17px!important;
		height:17px!important;
	}

	.hv .hv-reader-workspace,
	.hv.hv-rd.hv-focus-mode .hv-reader-workspace {
		width:calc(100% - 40px)!important;
		padding-top:14px!important;
	}

	.hv .hv-reader-toolbar {
		gap:10px!important;
		margin-bottom:26px!important;
	}

	.hv .hv-mobile-course {
		line-height:1.4!important;
	}

	.hv .hv-settings-toggle {
		padding:8px 10px!important;
		font-size:.8125rem!important;
		gap:6px!important;
	}

	.hv .hv-mobile-course {
		font-size:.8125rem!important;
	}

	.hv .hv-lesson-heading {
		margin-bottom:24px!important;
	}

	.hv .hv-lesson-heading .hv-eyebrow {
		font-size:.6875rem!important;
		margin-bottom:12px!important;
	}

	.hv .hv-reader-title {
		font-size:1.9375rem!important;
		line-height:1.25!important;
	}

	.hv .hv-lesson-intro {
		font-size:.875rem!important;
		margin-top:12px!important;
	}

	.hv .hv-learning-goal {
		padding:3px 0 3px 16px!important;
		margin-bottom:28px!important;
	}

	.hv .hv-reading-copy {
		line-height:1.72!important;
	}

	.hv .hv-reading-copy h2 {
		font-size:1.36em!important;
		margin-top:var(--section-space)!important;
	}

	.hv .hv-reading-copy .hv-eyebrow + h2 {
		margin-top:0!important;
	}

	.hv .hv-lesson-end .hv-primary {
		width:100%!important;
	}
}

@media(max-width:360px) {
	.hv .hv-reader-workspace,
	.hv.hv-rd.hv-focus-mode .hv-reader-workspace {
		width:calc(100% - 32px)!important;
	}

	.hv .hv-reader-head .hv-wrap {
		width:calc(100% - 32px)!important;
	}

	.hv .hv-settings-toggle {
		padding-inline:8px!important;
	}

	.hv .hv-settings-toggle > span[aria-hidden] {
		display:none;
	}

	.hv .hv-reading-settings-panel {
		padding:14px!important;
	}
}

@media print {
	.hv.hv-rd {
		--paper:#fff;
		--body:#222;
		--ink:#111;
		--wash:#f3f3f3;
		--muted:#444;
	}

	.hv .hv-reader-workspace,
	.hv.hv-rd.hv-focus-mode .hv-reader-workspace {
		width:100%!important;
	}

	.hv .hv-reader-layout {
		display:block;
	}

	.hv .hv-reader-nav {
		position:static!important;
		max-height:none!important;
	}
}

.hv .hv-lesson-map {
	margin:0 0 28px!important;
	padding:18px!important;
	background:var(--wash)!important;
	border-radius:10px!important;
}

.hv .hv-lesson-map-heading {
	margin-bottom:12px!important;
	display:flex;
	align-items:center!important;
	justify-content:space-between!important;
	gap:12px!important;
}

.hv .hv-lesson-map-heading h2 {
	margin:0!important;
	color:var(--ink)!important;
	font-size:1.125rem!important;
	line-height:1.45!important;
	letter-spacing:-.015em!important;
}

.hv .hv-lesson-map-heading > span {
	font-size:.75rem!important;
	color:var(--muted)!important;
	white-space:nowrap!important;
}

.hv .hv-lesson-map-intro {
	color:var(--muted)!important;
	font-size:.8125rem!important;
	line-height:1.6!important;
	margin:5px 0 16px!important;
}

.hv .hv-lesson-map ol,
.hv .hv-lesson-jump-panel ol {
	list-style:none!important;
	margin:0!important;
	padding:0!important;
}

.hv .hv-lesson-map ol {
	display:grid;
	grid-template-columns:1fr!important;
	gap:0!important;
}

.hv .hv-lesson-map li,
.hv .hv-lesson-jump-panel li {
	min-width:0!important;
	position:relative!important;
}

.hv .hv-lesson-map li:not(:last-child)::before,
.hv .hv-lesson-jump-panel li:not(:last-child)::before {
	content:""!important;
	position:absolute!important;
	left:24px!important;
	top:32px!important;
	bottom:-26px!important;
	width:2px!important;
	background:color-mix(in srgb,var(--blue) 30%,var(--wash))!important;
}

.hv .hv-lesson-map a,
.hv .hv-lesson-jump-panel a {
	display:flex;
	align-items:center!important;
	gap:10px!important;
	min-height:44px!important;
	padding:7px 10px!important;
	font-size:.9375rem!important;
	line-height:1.45!important;
	text-decoration:none!important;
	color:var(--body)!important;
	border-radius:7px!important;
}

.hv .hv-lesson-map .hv-section-name {
	flex:1!important;
}

.hv .hv-lesson-map a,
.hv .hv-lesson-jump-panel a {
	position:relative!important;
	z-index:1!important;
}

.hv .hv-lesson-map a:hover,
.hv .hv-lesson-jump-panel a:hover {
	color:var(--blue)!important;
	background:var(--option-hover)!important;
}

.hv .hv-lesson-map a[aria-current],
.hv .hv-lesson-jump-panel a[aria-current] {
	color:var(--blue)!important;
	font-weight:600!important;
}

.hv .hv-lesson-map a[aria-current] {
	background:var(--option)!important;
	box-shadow:0 2px 5px #142e4810!important;
}

.hv .hv-section-number {
	display:grid;
	place-items:center!important;
	color:var(--blue)!important;
	flex:0 0 30px!important;
	height:30px!important;
	border-radius:7px!important;
	background:var(--tint)!important;
	font-size:.8125rem!important;
	font-weight:600!important;
	font-variant-numeric:tabular-nums!important;
}

.hv .hv-lesson-map a[aria-current] .hv-section-number {
	background:var(--blue)!important;
	color:var(--paper)!important;
}

.hv .hv-lesson-map a > svg {
	width:14px!important;
	height:14px!important;
	flex:0 0 14px!important;
	color:var(--muted)!important;
}

.hv .hv-lesson-jump-panel .hv-section-number {
	position:relative!important;
	background:var(--tint)!important;
	flex-basis:26px!important;
	height:26px!important;
	font-size:.75rem!important;
}

.hv .hv-lesson-jump-panel li:not(:last-child)::before {
	left:20px!important;
}

.hv .hv-lesson-jump-panel .hv-section-name {
	flex:1!important;
}

.hv .hv-lesson-jump-panel li a > svg {
	width:13px!important;
	height:13px!important;
	flex:0 0 13px!important;
	color:var(--muted)!important;
}

.hv .hv-lesson-jump {
	justify-self:end!important;
	position:relative!important;
}

.hv .hv-lesson-jump > summary {
	display:flex;
	align-items:center!important;
	gap:8px!important;
	list-style:none!important;
	cursor:pointer!important;
	min-height:44px!important;
	border-radius:7px!important;
	padding:8px 10px!important;
	font-size:.8125rem!important;
	color:#edf5ff!important;
	background:#ffffff0b!important;
}

.hv .hv-lesson-jump > summary::-webkit-details-marker {
	display:none;
}

.hv .hv-lesson-jump > summary:hover,
.hv .hv-lesson-jump[open] > summary {
	background:#ffffff1a!important;
}

.hv .hv-lesson-jump > summary svg {
	width:12px!important;
	height:12px!important;
	transition:transform .15s ease!important;
}

.hv .hv-lesson-jump[open] > summary svg {
	transform:rotate(180deg)!important;
}

.hv #hv-lesson-part-label {
	color:#bacde1!important;
	font-size:.6875rem!important;
	font-variant-numeric:tabular-nums!important;
}

.hv .hv-lesson-jump-panel {
	position:absolute!important;
	right:0!important;
	top:calc(100% + 12px)!important;
	width:min(340px,calc(100vw - 32px))!important;
	padding:15px 20px 20px!important;
	background:var(--paper)!important;
	border:1px solid var(--rule)!important;
	border-radius:10px!important;
	box-shadow:0 14px 40px #0d20332b!important;
	max-height:calc(100dvh - 100px)!important;
	overflow-y:auto!important;
}

.hv .hv-lesson-jump-panel a {
	min-height:46px!important;
	padding:11px 8px!important;
	border-radius:5px!important;
}

.hv .hv-lesson-jump-panel a[aria-current] {
	background:var(--wash)!important;
}

.hv .hv-reading-copy {
	counter-reset:lesson-section!important;
}

.hv .hv-reading-copy > h2[id] {
	counter-increment:lesson-section!important;
	padding-top:0!important;
}

.hv .hv-reading-copy > h2[id]::before {
	content:counter(lesson-section,decimal-leading-zero)!important;
	display:block;
	margin-bottom:8px!important;
	font-size:.75rem!important;
	line-height:1.5!important;
	font-weight:600!important;
	letter-spacing:.05em!important;
	color:var(--blue)!important;
}

.hv .hv-reading-copy > h2[id]:first-child {
	margin-top:0!important;
	padding-top:0!important;
}

.hv .hv-lesson-resources {
	margin-top:30px!important;
	padding-top:22px!important;
	border-top:1px solid var(--rule)!important;
	font-size:.8125rem!important;
	line-height:1.75!important;
	color:var(--muted)!important;
}

.hv .hv-lesson-resources a {
	color:var(--blue)!important;
	text-underline-offset:3px!important;
	overflow-wrap:anywhere!important;
}

@media(max-width:600px) {
	.hv .hv-lesson-map {
		margin-bottom:25px!important;
		padding-bottom:18px!important;
	}

	.hv .hv-lesson-map ol {
		gap:4px!important;
	}

	.hv .hv-lesson-map a {
		font-size:.8125rem!important;
		gap:7px!important;
		min-height:48px!important;
		padding-block:8px!important;
	}

	.hv .hv-lesson-map .hv-section-number {
		flex-basis:12px!important;
	}

	.hv .hv-lesson-jump > summary {
		font-size:.75rem!important;
		gap:6px!important;
		padding-inline:8px!important;
	}

	.hv .hv-lesson-jump > summary svg {
		width:10px!important;
		height:10px!important;
	}

	.hv .hv-reader-head .hv-wrap {
		gap:8px!important;
	}

	.hv .hv-lesson-jump-panel {
		right:-4px!important;
	}
}

@media(max-width:360px) {
	.hv .hv-reader-head .hv-head-title {
		display:none;
	}

	.hv .hv-reader-toolbar {
		gap:8px!important;
	}

	.hv .hv-reader-head .hv-wrap {
		grid-template-columns:1fr 1fr!important;
	}

	.hv .hv-lesson-map ol {
		grid-template-columns:1fr!important;
	}

	.hv .hv-lesson-map a {
		min-height:40px!important;
	}
}

@media print {
	.hv .hv-lesson-map,
	.hv .hv-lesson-jump {
		display:none!important;
	}
}

.hv .hv-reading-copy > h2[id]::before {
	content:counter(lesson-section,decimal-leading-zero) / ""!important;
}

@media(max-width:600px) {
	.hv .hv-lesson-map {
		display:none;
	}
}

@media(max-width:600px) {
	.hv .hv-reading-copy {
		hyphens:auto!important;
		hyphenate-limit-chars:12 5 4!important;
	}
}

/* --------------------------------------------------------------------------
   17b. Plugin-specific additions to the design: links styled as the design's
   buttons, real course media, lesson media/quiz/materials, and the injected
   quiz player re-skinned with the reader's own surface tokens.
   -------------------------------------------------------------------------- */

/* Links that the design draws as buttons/plain text. */
.hv .hv-brand,
.hv .hv-topbar-nav a,
.hv .hv-crumb a,
.hv a.hv-text-btn,
.hv a.hv-resume-link,
.hv .hv-back-link {
	text-decoration: none !important;
}

.hv .hv-brand {
	color: #fff !important;
}

.hv .hv-topbar-nav a {
	display: inline-flex;
	align-items: center !important;
	min-height: 44px !important;
	padding: 8px 0 !important;
	color: #d8e5ed !important;
	font-size: .875rem !important;
}

.hv .hv-topbar-nav a.hv-current {
	color: #fff !important;
}

.hv .hv-topbar-nav a:hover {
	color: #fff !important;
}

.hv .hv-crumb a {
	color: inherit !important;
}

.hv .hv-crumb a:hover {
	text-decoration: underline !important;
}

.hv a.hv-primary {
	text-decoration: none !important;
}

.hv .hv-hero .hv-primary {
	color: #193e68 !important;
}

.hv .hv-enroll .hv-primary {
	color: #193e68 !important;
}

.hv .hv-resume-link {
	color: #d8e7fb !important;
}

.hv a.hv-lesson-row {
	color: inherit !important;
	text-decoration: none !important;
}

.hv div.hv-lesson-row:not(.hv-is-planned):hover {
	background: transparent !important;
}

.hv .hv-lesson-row.hv-is-next,
.hv a.hv-lesson-row.hv-is-next {
	color: #244fa3 !important;
}

.hv .hv-lesson-label {
	min-width: 0 !important;
}

.hv .hv-support-note .hv-text-btn {
	display: flex;
	margin-top: 2px !important;
}

@media (max-width: 760px) {
	.hv .hv-topbar-nav a {
		font-size: .8125rem !important;
	}
}

@media (max-width: 440px) {
	.hv .hv-topbar-nav a.hv-current {
		display: none;
	}
}

/* Course page hero: no-image variant and a real YouTube preview. */
.hv .hv-hero-grid--solo {
	grid-template-columns: minmax(0, 1fr) !important;
}

.hv .hv-course-visual:after {
	display: none;
}

.hv .hv-course-visual iframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

.hv .hv-course-visual--video {
	background: #0d2230 !important;
}

.hv .hv-about-body p {
	margin-top: 14px !important;
	font-size: .9375rem !important;
	line-height: 1.7 !important;
}

.hv .hv-about-body ul,
.hv .hv-about-body ol {
	margin: 14px 0 0 !important;
	padding-left: 1.2em !important;
	font-size: .9375rem !important;
	line-height: 1.7 !important;
}

.hv .hv-about-body img {
	max-width: 100% !important;
	height: auto !important;
}

.hv .hv-curriculum-note p {
	margin: 0 !important;
}

/* Reader header: back link in place of the design's button. */
.hv .hv-back-link {
	display: flex;
	align-items: center !important;
	gap: 9px !important;
	justify-self: start !important;
	min-height: 44px !important;
	padding: 8px 0 !important;
	color: #eff5f8 !important;
	font-size: .875rem !important;
}

.hv .hv-back-link:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

.hv .hv-reader-course-code {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.hv-rd > .hledu-frontend {
	padding: 12px 20px 0 !important;
}

.hv-rd > .hledu-frontend .hledu-emp-superadmin-bar {
	margin-bottom: 0 !important;
}

@media (max-width: 600px) {
	.hv .hv-back-link {
		font-size: .8125rem !important;
		gap: 7px !important;
	}

	.hv .hv-back-link svg {
		width: 17px !important;
		height: 17px !important;
	}
}

/* Lesson content typography beyond what the design's sample lessons use. */
.hv .hv-reading-copy > :first-child {
	margin-top: 0 !important;
}

.hv .hv-reading-copy h2,
.hv .hv-reading-copy h3 {
	scroll-margin-top: 96px !important;
}

.hv .hv-reading-copy img,
.hv .hv-reading-copy video {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
}

.hv .hv-reading-copy iframe {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 8px !important;
}

.hv .hv-reading-copy table {
	display: block;
	max-width: 100% !important;
	overflow-x: auto !important;
	border-collapse: collapse !important;
	margin: 0 0 1.35em !important;
	font-size: .9em !important;
}

.hv .hv-reading-copy th,
.hv .hv-reading-copy td {
	padding: 8px 12px !important;
	border: 1px solid var(--rule) !important;
	text-align: left !important;
}

.hv .hv-reading-copy blockquote {
	margin: 0 0 1.35em !important;
	padding: 2px 0 2px 18px !important;
	border-left: 3px solid var(--rule) !important;
	color: var(--muted) !important;
}

.hv .hv-reading-copy pre,
.hv .hv-reading-copy code {
	font-size: .88em !important;
}

.hv .hv-reading-copy pre {
	max-width: 100% !important;
	overflow-x: auto !important;
	padding: 14px 16px !important;
	border-radius: 8px !important;
	background: var(--wash) !important;
}

.hv .hv-nav-type {
	color: var(--muted) !important;
}

/* Lesson media: video poster, PDF/quiz notes. */
.hv .hv-media {
	position: relative;
	margin: 0 0 var(--block-space, 32px) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #0d2230 !important;
}

.hv .hv-media--video {
	aspect-ratio: 16 / 9 !important;
}

.hv .hv-media--video iframe {
	position: absolute !important;
	inset: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

.hv .hv-video-poster {
	position: absolute !important;
	inset: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.hv .hv-play-btn {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	display: grid;
	place-items: center !important;
	width: 72px !important;
	height: 72px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fffffff2 !important;
	color: #193e68 !important;
	box-shadow: 0 8px 28px #0d223055 !important;
	transform: translate(-50%, -50%) !important;
	transition: transform .16s, background .16s !important;
}

.hv .hv-play-btn:hover {
	background: #fff !important;
	transform: translate(-50%, -50%) scale(1.06) !important;
}

.hv .hv-play-btn svg {
	width: 28px !important;
	height: 28px !important;
	margin-left: 4px !important;
	fill: currentColor !important;
	stroke: none !important;
}

.hv .hv-media--quiz {
	aspect-ratio: auto !important;
	overflow: visible !important;
	padding: var(--panel-inset, 24px) !important;
	background: var(--wash) !important;
}

.hv .hv-quiz-intro {
	display: flex;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px !important;
	font-size: var(--read, 1.125rem);
}

.hv .hv-quiz-intro__icon {
	display: grid;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 11px !important;
	background: var(--tint) !important;
	color: var(--blue) !important;
}

.hv .hv-quiz-intro__icon svg {
	width: 24px !important;
	height: 24px !important;
}

.hv .hv-quiz-intro__text {
	font-size: 1em !important;
	line-height: 1.65 !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
}

.hv .hv-quiz-meta {
	display: flex;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hv .hv-quiz-meta li {
	padding: 5px 11px !important;
	border: 1px solid var(--rule) !important;
	border-radius: 999px !important;
	background: var(--option) !important;
	color: var(--muted) !important;
	font-size: .8125rem !important;
	line-height: 1.5 !important;
}

/* The real quiz player, injected inline: re-skinned via the reader's own
   tokens by remapping the plugin's --hledu-* variables for that subtree, so
   it follows the light / warm / dark reading surface. */
.hv .hv-media--quiz.hv-quiz-active {
	padding: 0 !important;
	background: transparent !important;
	--hledu-text: var(--body);
	--hledu-text-muted: var(--muted);
	--hledu-text-light: var(--muted);
	--hledu-bg: var(--wash);
	--hledu-bg-card: var(--option);
	--hledu-surface: var(--option);
	--hledu-surface-glass: var(--option);
	--hledu-border: var(--rule);
	--hledu-border-light: var(--rule);
	--hledu-primary: var(--quiz-action);
	--hledu-primary-hover: var(--quiz-action-hover);
	--hledu-primary-light: var(--tint);
	--hledu-gradient-primary: linear-gradient(var(--quiz-action), var(--quiz-action));
	--hledu-glow-primary: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent);
	--hledu-success: var(--green);
	--hledu-success-light: var(--softgreen);
	--hledu-danger: var(--bad-ink);
	--hledu-danger-light: var(--bad-bg);
	--hledu-shadow: none;
	--hledu-shadow-md: none;
	--hledu-shadow-lg: none;
	--hledu-shadow-glass: none;
	color: var(--body) !important;
}

.hv.hv-rd {
	--quiz-action: #2457be;
	--quiz-action-hover: #194397;
}

.hv.hv-rd[data-theme=dark] {
	--quiz-action: #3b6fd0;
	--quiz-action-hover: #5083e0;
}

.hv .hv-media--quiz.hv-quiz-active #hledu-quiz-player,
.hv .hv-media--quiz.hv-quiz-active #hledu-quiz-result {
	width: 100% !important;
	max-width: none !important;
}

.hv .hv-media--quiz.hv-quiz-active .hledu-fe-card {
	border-radius: 10px !important;
}

/* Materials. */
.hv .hv-lesson-resources h3 {
	margin: 0 0 10px !important;
	font-size: .9375rem !important;
}

.hv .hv-resource-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hv .hv-resource-list li {
	display: flex;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 4px 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--rule) !important;
}

.hv .hv-resource-list li:last-child {
	border-bottom: 0 !important;
}

.hv .hv-resource-name {
	flex: 1 1 200px !important;
	min-width: 0 !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
	overflow-wrap: anywhere !important;
}

.hv .hv-resource-size {
	color: var(--muted) !important;
}

/* Lesson end. */
.hv .hv-lesson-actions .hv-primary:disabled {
	cursor: not-allowed !important;
}

.hv .hv-lesson-navigation .hv-text-btn {
	padding-inline: 0 !important;
}

@media (max-width: 600px) {
	.hv .hv-media--quiz {
		padding: var(--panel-inset, 18px) !important;
	}

	.hv .hv-play-btn {
		width: 60px !important;
		height: 60px !important;
	}
}

/* Headings must follow the page's Inter, not the active theme's heading font. */
.hv h1,
.hv h2,
.hv h3,
.hv h4,
.hv legend,
.hv summary {
	font-family: inherit !important;
}

/* --------------------------------------------------------------------------
   18. Theme-bleed guard. The plugin styles its own components fully, but base
   HTML elements it doesn't style itself (tables, headings, links, bare
   buttons, inputs, lists, labels, images) used to pick up whatever the active
   theme gives them — grid lines on every table cell, zebra rows, underlined
   headings, uppercase buttons, rounded/shadowed images. These rules put those
   elements back to browser defaults inside the LMS only.

   They are !important (so they beat the theme's ordinary rules) but sit at
   zero specificity via :where(), so every component rule above — all more
   specific — still wins; only what the plugin leaves unstyled is reset.
   WP's own editor/media UI (everything inside .wp-core-ui, .mce-*, .media-modal)
   is left alone.
   -------------------------------------------------------------------------- */

/* Tables: no outer border, no cell grid, no zebra / header fills. */
:where(.hledu-frontend, .hv, .hledu-login-body) table {
	border: 0 !important;
	margin: 0 !important;
	background: none !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) thead,
:where(.hledu-frontend, .hv, .hledu-login-body) tbody,
:where(.hledu-frontend, .hv, .hledu-login-body) tfoot,
:where(.hledu-frontend, .hv, .hledu-login-body) tr {
	border: 0 !important;
	background: none !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) th,
:where(.hledu-frontend, .hv, .hledu-login-body) td {
	border: 0 !important;
	vertical-align: middle !important;
}

/* Headings: no underline/padding/uppercase; browser-default spacing. */
:where(.hledu-frontend, .hv, .hledu-login-body) h1,
:where(.hledu-frontend, .hv, .hledu-login-body) h2,
:where(.hledu-frontend, .hv, .hledu-login-body) h3,
:where(.hledu-frontend, .hv, .hledu-login-body) h4,
:where(.hledu-frontend, .hv, .hledu-login-body) h5,
:where(.hledu-frontend, .hv, .hledu-login-body) h6 {
	border: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) h1 { margin-block: 0.67em !important; margin-inline: 0 !important; }
:where(.hledu-frontend, .hv, .hledu-login-body) h2 { margin-block: 0.83em !important; margin-inline: 0 !important; }
:where(.hledu-frontend, .hv, .hledu-login-body) h3 { margin-block: 1em !important; margin-inline: 0 !important; }
:where(.hledu-frontend, .hv, .hledu-login-body) h4 { margin-block: 1.33em !important; margin-inline: 0 !important; }
:where(.hledu-frontend, .hv, .hledu-login-body) h5 { margin-block: 1.67em !important; margin-inline: 0 !important; }
:where(.hledu-frontend, .hv, .hledu-login-body) h6 { margin-block: 2.33em !important; margin-inline: 0 !important; }

:where(.hledu-frontend, .hv, .hledu-login-body) p {
	margin-block: 1em !important;
	margin-inline: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: inherit !important;
}

/* Links: no border-bottom "underline", shadows or caps. */
:where(.hledu-frontend, .hv, .hledu-login-body) a {
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Bare buttons (those the plugin doesn't style with a class). */
:where(.hledu-frontend, .hv, .hledu-login-body) :where(button:not(.wp-switch-editor):not([class*="mce-"]):not(.media-button):not(.wp-core-ui *):not([class*="mce-"] *):not(.media-modal *)) {
	background-color: ButtonFace !important;
	color: ButtonText !important;
	border: 2px outset ButtonBorder !important;
	padding: 1px 6px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	line-height: normal !important;
	border-radius: 0 !important;
	white-space: normal !important;
}

/* Text inputs, selects, textareas — decorative extras only; their borders and
   padding are left to whatever styles each field has (some are deliberately borderless). */
:where(.hledu-frontend, .hv, .hledu-login-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not(.ed_button):not([class*="mce-"]):not(.wp-core-ui *):not([class*="mce-"] *):not(.media-modal *)),
:where(.hledu-frontend, .hv, .hledu-login-body) :where(select:not([class*="mce-"]):not(.wp-core-ui *):not(.media-modal *)),
:where(.hledu-frontend, .hv, .hledu-login-body) :where(textarea:not([class*="mce-"]):not(.wp-core-ui *):not(.media-modal *)) {
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) :where(input[type="checkbox"], input[type="radio"]) {
	margin: 3px 3px 3px 4px !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Images. */
:where(.hledu-frontend, .hv, .hledu-login-body) img {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Lists. */
:where(.hledu-frontend, .hv, .hledu-login-body) ul,
:where(.hledu-frontend, .hv, .hledu-login-body) ol {
	margin-block: 1em !important;
	margin-inline: 0 !important;
	padding-inline-start: 40px !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) :where(ul, ol) :where(ul, ol) {
	margin-block: 0 !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) li {
	margin: 0 !important;
	padding: 0 !important;
}

/* Labels, emphasis, code. */
:where(.hledu-frontend, .hv, .hledu-login-body) label {
	margin: 0 !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) summary {
	white-space: normal !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) strong,
:where(.hledu-frontend, .hv, .hledu-login-body) b {
	font-weight: bolder !important;
}

:where(.hledu-frontend, .hv, .hledu-login-body) :where(code, kbd, samp) {
	background: none !important;
	padding: 0 !important;
}

/* Table cells: no top/left/right borders and no outer table border, at a
   specificity that also outranks a theme's !important element rules. The
   plugin's own row lines (border-bottom) are untouched. */
.hledu-frontend .hledu-fe-table,
.hledu-frontend .hledu-table {
	border: 0 !important;
}

.hledu-frontend .hledu-fe-table th,
.hledu-frontend .hledu-fe-table td,
.hledu-frontend .hledu-table th,
.hledu-frontend .hledu-table td {
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

/* --------------------------------------------------------------------------
   19. Course page inside the theme page (the site header/footer stay). The
   page no longer renders standalone, so it carries its own font and colours
   instead of relying on <body class="hv-page">, and lifts the block theme's
   "constrained" width cap; course-single.php's script then spans it to the
   full browser width. The host page's title block and padding are already
   handled by the body.hledu-course-single-page rules in section 13.
   -------------------------------------------------------------------------- */
.hv.hv-cs {
	display: block;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	color: var(--body) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
}

body:not(.hledu-theme-font) .hv.hv-cs {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.hledu-theme-font .hv.hv-cs {
	font-family: inherit !important;
}

body.hledu-course-single-page .hv.hv-cs {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hv.hv-cs .hv-hero {
	padding-top: 28px !important;
}

/* --------------------------------------------------------------------------
   20. Course player contents list — lesson and module titles always wrap
   inside the column (a theme that sets white-space: nowrap on buttons made
   them run out of the box), and the column never scrolls sideways.
   -------------------------------------------------------------------------- */
.hv .hv-reader-nav {
	overflow-x: hidden !important;
}

.hv .hv-nav-lesson,
.hv .hv-nav-lesson *,
.hv .hv-nav-module > summary,
.hv .hv-nav-module > summary *,
.hv .hv-module-toggle,
.hv .hv-module-toggle * {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

.hv .hv-nav-lesson-copy,
.hv .hv-nav-module-copy {
	min-width: 0 !important;
}