/* Poseidon dia's: slide viewer under the lesson video. Colours inherit, so it also works in the player's dark mode. */
.poseidon-slides {
	margin: 2em 0 1em;
	max-width: 100%;
	clear: both;
}
.poseidon-slides__heading {
	margin: 0 0 .75em;
}
.poseidon-slides img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
	user-drag: none;
}
.poseidon-slides__viewer {
	position: relative;
	outline: none;
}
.poseidon-slides__viewer:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}
.poseidon-slides__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(128, 128, 128, .12);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.poseidon-slides__img {
	display: block;
	width: 100%;
	height: 100% !important; /* beats the inline height:auto that only guards against unstyled rendering */
	max-width: 100%;
	object-fit: contain;
	transition: opacity .15s ease;
}
.poseidon-slides__img.is-loading {
	opacity: .55;
}
/* Transparent layer over the image: blocks dragging and the long-press "save image" menu. */
.poseidon-slides__shield {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: transparent;
	-webkit-touch-callout: none;
}
.poseidon-slides__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: .6em;
}
.poseidon-slides .poseidon-slides__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 .9em;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
}
.poseidon-slides .poseidon-slides__btn:hover:not(:disabled),
.poseidon-slides .poseidon-slides__btn:focus-visible {
	background: rgba(128, 128, 128, .15);
}
.poseidon-slides .poseidon-slides__btn:disabled {
	opacity: .35;
	cursor: default;
}
.poseidon-slides__counter {
	min-width: 7.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.poseidon-slides__error {
	margin: .6em 0 0;
	text-align: center;
	font-weight: 600;
}
.poseidon-slides__error[hidden] {
	display: none;
}
.poseidon-slides__all {
	margin-top: 1em;
}
.poseidon-slides__all > summary {
	display: inline-block;
	padding: .35em .9em;
	border: 1px solid currentColor;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
}
.poseidon-slides__all > summary::-webkit-details-marker {
	display: none;
}
.poseidon-slides__all > summary::before {
	content: "\25B8\FE0E\00A0";
}
.poseidon-slides__all[open] > summary::before {
	content: "\25BE\FE0E\00A0";
}
.poseidon-slides__list {
	display: grid;
	gap: 1em;
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}
.poseidon-slides__item {
	position: relative;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.poseidon-slides__item::before {
	content: none;
}
/* Same protective layer over every image in the list. */
.poseidon-slides__item::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.poseidon-slides__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.poseidon-slides__note {
	margin: 0;
	padding: .8em 1em;
	border-left: 4px solid currentColor;
	background: rgba(128, 128, 128, .12);
}

/* MasterStudy course player, dark mode: the lesson wrapper keeps a dark text colour there,
   so give the viewer its own light colour (everything below inherits / uses currentColor). */
.masterstudy-course-player-content_dark-mode .poseidon-slides {
	color: rgba(255, 255, 255, .8);
}
.masterstudy-course-player-content_dark-mode .poseidon-slides__stage,
.masterstudy-course-player-content_dark-mode .poseidon-slides__note {
	background: rgba(255, 255, 255, .06);
}
.masterstudy-course-player-content_dark-mode .poseidon-slides .poseidon-slides__btn,
.masterstudy-course-player-content_dark-mode .poseidon-slides__all > summary {
	border-color: rgba(255, 255, 255, .45);
}
.masterstudy-course-player-content_dark-mode .poseidon-slides .poseidon-slides__btn:hover:not(:disabled),
.masterstudy-course-player-content_dark-mode .poseidon-slides .poseidon-slides__btn:focus-visible {
	background: rgba(255, 255, 255, .12);
}
.masterstudy-course-player-content_dark-mode .poseidon-slides__img,
.masterstudy-course-player-content_dark-mode .poseidon-slides__item img {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Practice tools ([poseidon_tool]): the tool in an iframe. The tools are light pages, so the
   frame keeps a white background, also in the course player's dark mode. */
.poseidon-tool {
	margin: 2em 0 1em;
	max-width: 100%;
	clear: both;
}
.poseidon-tool__frame {
	display: block;
	width: 100%;
	height: clamp(560px, 82vh, 960px);
	margin: 0;
	border: 1px solid rgba(128, 128, 128, .25);
	border-radius: 6px;
	background: #fff;
}
.poseidon-tool__hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em 1em;
	margin: .6em 0 0;
	font-size: .9em;
}
.poseidon-tool .poseidon-tool__fullscreen {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 0 .9em;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
}
.poseidon-tool .poseidon-tool__fullscreen:hover,
.poseidon-tool .poseidon-tool__fullscreen:focus-visible {
	background: rgba(128, 128, 128, .15);
}
.poseidon-tool .poseidon-tool__fullscreen[hidden] {
	display: none;
}
/* "Open in een nieuw tabblad" (1.5.0): only on phones and tablets (a short screen or touch) and where
   full screen is not available (slides.js then marks the box); it looks like the full-screen button. */
.poseidon-tool .poseidon-tool__newtab {
	display: none;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 0 .9em;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.poseidon-tool.poseidon-tool--nofullscreen .poseidon-tool__newtab {
	display: inline-flex;
}
@media (max-height: 560px), (pointer: coarse) {
	.poseidon-tool .poseidon-tool__newtab {
		display: inline-flex;
	}
}
@media (pointer: coarse) {
	.poseidon-tool .poseidon-tool__newtab {
		min-height: 44px;
	}
}
.poseidon-tool .poseidon-tool__newtab:hover,
.poseidon-tool .poseidon-tool__newtab:focus-visible {
	background: rgba(128, 128, 128, .15);
}
.poseidon-tool__note {
	margin: 0;
	padding: .8em 1em;
	border-left: 4px solid currentColor;
	background: rgba(128, 128, 128, .12);
}
/* Exercises of a tool with their state (slides.js, e.g. the VHF simulator's student mode), between
   the frame and the hint line. ".poseidon-tool" in front: beats the course player's rules for
   headings, paragraphs and lists in lessons (and the list markers above). */
.poseidon-tool__progress {
	margin: .75em 0 0;
	padding: .75em 1em;
	border: 1px solid rgba(128, 128, 128, .25);
	border-radius: 6px;
	background: rgba(128, 128, 128, .06);
}
.poseidon-tool .poseidon-tool__progress-heading {
	margin: 0 0 .35em;
	padding: 0;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
}
.poseidon-tool .poseidon-tool__exercises {
	margin: 0;
	padding: 0;
	list-style: none;
}
.poseidon-tool .poseidon-tool__exercise {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em 1em;
	margin: 0;
	padding: .45em 0;
	border-top: 1px solid rgba(128, 128, 128, .2);
	font-size: .95em;
	line-height: 1.4;
}
.poseidon-tool .poseidon-tool__exercise:first-child {
	border-top: 0;
}
.poseidon-tool .poseidon-tool__exercise::before {
	content: none;
}
.poseidon-tool__exercise-title {
	flex: 1 1 14em;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.poseidon-tool__exercise-meta {
	opacity: .75;
	white-space: nowrap;
}
.poseidon-tool__exercise-status {
	margin-left: auto;
	opacity: .75;
	white-space: nowrap;
}
.poseidon-tool__exercise.is-done .poseidon-tool__exercise-status {
	opacity: 1;
	font-weight: 600;
	color: #1d7a36;
}
.poseidon-tool .poseidon-tool__progress-summary,
.poseidon-tool .poseidon-tool__progress-error {
	margin: .45em 0 0;
	font-size: .9em;
	line-height: 1.4;
}
.poseidon-tool .poseidon-tool__progress-error {
	font-weight: 600;
	color: #b32d2e;
}
.poseidon-tool .poseidon-tool__progress [hidden] {
	display: none;
}
@media (max-width: 600px) {
	.poseidon-tool__frame {
		height: clamp(480px, 78vh, 800px);
	}
}
/* A short screen (a phone lying down, a small window; 1.5.0): the frame is the height of the screen
   minus 48px (at least 280px), also with a height from the shortcode (hence !important). svh (the
   screen without the browser's bars) where the browser knows it. In MasterStudy's course player minus
   100px: its header and its navigation bar (50px each) lie over the lesson. */
@media (max-height: 560px) {
	.poseidon-tool .poseidon-tool__frame {
		height: calc(100vh - 48px) !important;
		height: calc(100svh - 48px) !important;
		min-height: 280px;
	}
	.masterstudy-course-player-content .poseidon-tool .poseidon-tool__frame {
		height: calc(100vh - 100px) !important;
		height: calc(100svh - 100px) !important;
	}
}
.masterstudy-course-player-content_dark-mode .poseidon-tool {
	color: rgba(255, 255, 255, .8);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__fullscreen {
	border-color: rgba(255, 255, 255, .45);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__fullscreen:hover,
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__fullscreen:focus-visible {
	background: rgba(255, 255, 255, .12);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__newtab {
	border-color: rgba(255, 255, 255, .45);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__newtab:hover,
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__newtab:focus-visible {
	background: rgba(255, 255, 255, .12);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool__note {
	background: rgba(255, 255, 255, .06);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool__progress {
	border-color: rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .04);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__exercise {
	border-top-color: rgba(255, 255, 255, .12);
}
.masterstudy-course-player-content_dark-mode .poseidon-tool__exercise.is-done .poseidon-tool__exercise-status {
	color: #7ad694;
}
.masterstudy-course-player-content_dark-mode .poseidon-tool .poseidon-tool__progress-error {
	color: #ff8a80;
}

/* Lists inside lesson content: the course player resets list markers, so the numbered steps
   and bullet lists of the lesson texts would show without numbers/bullets. */
.masterstudy-course-player-lesson ol,
.masterstudy-course-player-lesson ul {
	padding-left: 1.6em;
	margin: 0 0 1em;
}
.masterstudy-course-player-lesson ol {
	list-style: decimal outside;
}
.masterstudy-course-player-lesson ul {
	list-style: disc outside;
}
.masterstudy-course-player-lesson ol li,
.masterstudy-course-player-lesson ul li {
	display: list-item;
	margin: 0 0 .35em;
}