.risep-player {
	--risep-border: #dcdfe4;
	--risep-bar: #f7f8fa;
	--risep-text: #1d2327;
	--risep-muted: #646970;
	--risep-ok: #1a7f37;
	--risep-err: #b32d2e;
	border: 1px solid var(--risep-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	margin: 1.5em 0;
}
.risep-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--risep-bar);
	border-bottom: 1px solid var(--risep-border);
	font-size: 14px;
	line-height: 1.3;
	color: var(--risep-text);
}
.risep-title { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risep-status { margin-left: auto; color: var(--risep-muted); font-size: 13px; white-space: nowrap; }
.risep-status--ok { color: var(--risep-ok); }
.risep-status--error { color: var(--risep-err); }
.risep-player {
	/* Full-screen button colours – override these in your theme's CSS to match your brand. */
	--risep-fs-bg: #1d4ed8;
	--risep-fs-exit-bg: #dc2626;
	--risep-fs-bar: #111827;
}
.risep-bar { padding: 10px 14px; gap: 14px; }
.risep-fs {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--risep-fs-bg);
	color: #fff;
	font: 700 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(29, 78, 216, .35);
	transition: filter .15s ease, transform .15s ease;
}
.risep-fs:hover { filter: brightness(1.1); }
.risep-fs:active { transform: scale(.97); }
.risep-fs:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.risep-fs-exit { display: none; }
.risep-fs--exit { background: var(--risep-fs-exit-bg); box-shadow: 0 2px 8px rgba(220, 38, 38, .45); font-size: 16px; padding: 11px 20px; }
.risep-fs--exit .risep-fs-enter { display: none; }
.risep-fs--exit .risep-fs-exit { display: inline; }
.risep-esc { color: #9ca3af; font-size: 13px; white-space: nowrap; }
.risep-esc[hidden] { display: none; }

/* In full screen: dark bar so the red exit button stands out. */
.risep-player--fs .risep-bar { background: var(--risep-fs-bar); border-bottom-color: var(--risep-fs-bar); }
.risep-player--fs .risep-title { color: #fff; }
.risep-player--fs .risep-status { color: #9ca3af; }
.risep-player--fs .risep-status--ok { color: #4ade80; }
.risep-player--fs .risep-status--error { color: #f87171; }
.risep-frame-wrap { position: relative; min-height: 420px; }
/* Never taller than the visible screen minus the bar, so a course's bottom buttons can always
   be reached on a phone (Safari's toolbars cover part of "100vh"). */
.risep-player:not(.risep-player--max):not(.risep-player--overlay):not(.risep-player--fs) .risep-frame-wrap {
	max-height: calc(var(--risep-view-h, 100vh) - 64px);
	min-height: min(420px, calc(var(--risep-view-h, 100vh) - 64px));
}
.risep-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.risep-loading {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	padding: 24px; text-align: center; color: var(--risep-muted); font-size: 15px;
}
.risep-loading--error { color: var(--risep-err); flex-direction: column; }
.risep-loading--error br { display: none; }

.risep-player:fullscreen { border-radius: 0; border: 0; display: flex; flex-direction: column; }
.risep-player:fullscreen .risep-frame-wrap { flex: 1; height: auto !important; }
/* Fallback full screen (iPhone has no element fullscreen). !important beats theme layout widths. */
.risep-player.risep-player--max { position: fixed !important; inset: 0 !important; z-index: 99999; margin: 0 !important; max-width: none !important; width: auto !important; border-radius: 0; border: 0; display: flex; flex-direction: column; }
html.risep-noscroll, html.risep-noscroll body { overflow: hidden !important; }

/* Phones/tablets: the course becomes the page (everything else hidden), so the browser's
   own scrolling can always bring its bottom up past Safari's toolbars. */
html.risep-flow, html.risep-flow body { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #0f172a !important; }
html.risep-flow .risep-keep > :not(.risep-keep):not(.risep-takeover) { display: none !important; }
html.risep-flow .risep-keep { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; transform: none !important; filter: none !important; overflow: visible !important; }
html.risep-flow .risep-takeover { position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; z-index: 1 !important; margin: 0 !important; width: auto !important; max-width: none !important; border-radius: 0 !important; height: var(--risep-view-h, 100vh) !important; min-height: 320px; animation: none !important; transform: none !important; }
/* The course fills the visible screen exactly: nothing to scroll past, no bounce revealing the page behind. */
html.risep-flow, html.risep-flow body, html.risep-noscroll, html.risep-noscroll body { overscroll-behavior: none !important; }
/* A swipe that starts on the course's top bar mustn't move the page either (taps still work). */
html.risep-flow .risep-takeover .risep-bar, .risep-player--max .risep-bar { touch-action: none; }
.risep-player--max .risep-frame-wrap { flex: 1; height: auto !important; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
.risep-player.risep-player--max { bottom: auto !important; height: 100vh; height: 100dvh; height: var(--risep-view-h, 100dvh); }

@media (max-width: 600px) {
	.risep-title { display: none; }
	.risep-status { margin-left: 0; flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.risep-status--error { white-space: normal; }
	.risep-fs { padding: 9px 14px; font-size: 14px; }
	.risep-fs--exit { padding: 10px 16px; font-size: 15px; }
	.risep-esc { display: none; }
}

.risep-login {
	border: 1px solid #dcdfe4; border-radius: 8px; padding: 24px; margin: 1.5em 0; text-align: center; background: #f7f8fa;
}
.risep-btn {
	display: inline-block; padding: 10px 18px; border-radius: 6px; background: #2271b1; color: #fff !important;
	text-decoration: none !important; font-weight: 600; margin: 4px;
}
.risep-btn--ghost { background: transparent; color: #2271b1 !important; border: 1px solid #2271b1; }
.risep-notice { padding: 10px 14px; border-left: 4px solid #dba617; background: #fcf9e8; }

.risep-my-courses { width: 100%; border-collapse: collapse; }
.risep-my-courses th, .risep-my-courses td { padding: 10px 8px; border-bottom: 1px solid #e2e4e7; text-align: left; }
.risep-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f2; color: #3c434a; }
.risep-badge--incomplete { background: #fcf0d4; color: #7a5800; }
.risep-badge--completed, .risep-badge--passed { background: #dcf3e2; color: #135e26; }
.risep-badge--failed { background: #fbe1e1; color: #8a1f1f; }

/* Same safety net for the course player when its shortcode is wrapped in code formatting. */
.risep-player, .risep-login { white-space: normal; }
.risep-player code, .risep-player kbd, .risep-player samp, .risep-player tt,
.risep-login code, .risep-login kbd, .risep-login samp, .risep-login tt { all: unset; }

/* "← All courses" – back to the course hub (course pages and courses opened from the hub). */
.risep-back {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 9px 15px 9px 11px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid #cbd5e1;
	color: #0f172a !important;
	font: 700 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease;
}
.risep-back:hover { background: #f1f5f9; border-color: #94a3b8; }
.risep-back:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.risep-player--fs .risep-back { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff !important; }
/* Course finished: the way back turns green and gently pulses. */
.risep-player--done .risep-back { background: #16a34a; border-color: #16a34a; color: #fff !important; animation: risep-pulse 1.6s ease-in-out 3; }
@keyframes risep-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
@media (max-width: 600px) { .risep-back { padding: 8px 12px 8px 9px; font-size: 14px; } }
.risep-retry { margin-top: 10px; font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 6px; border: 0; background: #2a78d6; color: #fff; cursor: pointer; }
.risep-retry:hover { background: #1c5cab; }