/*
 * SSK Academy front end. Calm, theme-friendly, no external assets.
 * Override any --ssk-* variable in your theme to restyle.
 */
:root {
	--ssk-accent: #2f6b4f;
	--ssk-accent-ink: #ffffff;
	--ssk-accent-soft: color-mix(in srgb, var(--ssk-accent) 12%, transparent);
	--ssk-good: #2f6b4f;
	--ssk-warm: #8a5a1f;
	--ssk-ink: currentColor;
	--ssk-surface: color-mix(in srgb, currentColor 4%, transparent);
	--ssk-surface-2: color-mix(in srgb, currentColor 7%, transparent);
	--ssk-border: color-mix(in srgb, currentColor 16%, transparent);
	--ssk-muted: color-mix(in srgb, currentColor 66%, transparent);
	--ssk-radius: 10px;
	--ssk-gap: 1rem;
	--ssk-font-small: 0.875em;
}

.ssk {
	line-height: 1.6;
	overflow-wrap: break-word;
}
.ssk *,
.ssk *::before,
.ssk *::after {
	box-sizing: border-box;
}
.ssk-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: none;
	fill: currentColor;
}
.ssk-h {
	font-size: 1.15em;
	margin: 1.75rem 0 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ssk-muted {
	color: var(--ssk-muted);
}
.ssk-eyebrow {
	display: block;
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ssk-muted);
	margin: 0 0 0.35rem;
}

/* Cards, notices */
.ssk-card {
	background: var(--ssk-surface);
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	padding: 1.1rem 1.25rem;
	margin: 1.25rem 0;
}
.ssk-card > :first-child {
	margin-top: 0;
}
.ssk-card > :last-child {
	margin-bottom: 0;
}
.ssk-notice,
.ssk-note {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.75rem 1rem;
	border-radius: var(--ssk-radius);
	background: var(--ssk-surface-2);
	margin: 1rem 0;
}
.ssk-notice .ssk-icon,
.ssk-note .ssk-icon {
	margin-top: 0.3em;
}
.ssk-notice--good {
	background: var(--ssk-accent-soft);
}

/* Buttons */
.ssk-button,
.ssk .ssk-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--ssk-accent);
	background: var(--ssk-accent);
	color: var(--ssk-accent-ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	max-width: 100%;
}
.ssk-button:hover,
.ssk-button:focus-visible {
	filter: brightness(1.08);
	color: var(--ssk-accent-ink);
}
.ssk-button:focus-visible,
.ssk a:focus-visible,
.ssk summary:focus-visible,
.ssk textarea:focus-visible,
.ssk input:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--ssk-accent) 55%, transparent);
	outline-offset: 2px;
}
.ssk-button--quiet,
.ssk .ssk-button--quiet {
	background: transparent;
	color: inherit;
	border-color: var(--ssk-border);
}
.ssk-button--quiet:hover {
	background: var(--ssk-surface-2);
	color: inherit;
}
.ssk-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.ssk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}
.ssk-inline-form {
	display: inline-block;
	margin: 0;
}

/* Tags */
.ssk-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78em;
	font-weight: 600;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--ssk-surface-2);
	white-space: nowrap;
}
.ssk-tag--good {
	background: var(--ssk-accent-soft);
	color: var(--ssk-good);
}

/* Progress bar */
.ssk-bar {
	height: 0.55rem;
	border-radius: 999px;
	background: var(--ssk-surface-2);
	overflow: hidden;
	margin: 0.5rem 0;
}
.ssk-bar > span {
	display: block;
	height: 100%;
	background: var(--ssk-accent);
	border-radius: inherit;
	min-width: 0.55rem;
}

/* Course outline */
.ssk-module {
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	margin: 0.75rem 0;
	background: var(--ssk-surface);
}
.ssk-module > summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem;
	cursor: pointer;
	list-style: none;
}
.ssk-module > summary::-webkit-details-marker,
.ssk-attempt > summary::-webkit-details-marker {
	display: none;
}
.ssk-module-title {
	flex: 1;
	min-width: 0;
}
.ssk-module-title .ssk-eyebrow {
	margin: 0;
}
.ssk-module-state {
	color: var(--ssk-accent);
	font-size: 1.15em;
	display: flex;
}
.ssk-module.is-locked .ssk-module-state {
	color: var(--ssk-muted);
}
.ssk-module-count {
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
}
.ssk-chevron {
	display: flex;
	transition: transform 0.2s ease;
}
details[open] > summary .ssk-chevron {
	transform: rotate(180deg);
}
.ssk-module-body {
	padding: 0 1.1rem 1rem;
}
.ssk-lesson-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ssk-lesson-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--ssk-border);
}
.ssk-lesson-row:first-child {
	border-top: 0;
}
.ssk-lesson-row .ssk-state {
	display: flex;
	color: var(--ssk-muted);
}
.ssk-lesson-row.is-done .ssk-state {
	color: var(--ssk-good);
}
.ssk-lesson-row .ssk-type {
	display: flex;
	color: var(--ssk-muted);
}
.ssk-lesson-name {
	flex: 1;
	min-width: 0;
}
.ssk-lesson-row.is-locked .ssk-lesson-name {
	color: var(--ssk-muted);
}
.ssk-lesson-meta {
	display: block;
	font-size: 0.8em;
	color: var(--ssk-muted);
}
p.ssk-lesson-meta {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

/* Lesson */
.ssk-crumbs {
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.5rem;
}
.ssk-crumbs a {
	color: inherit;
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
}
.ssk-type-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
	margin: 0 0 1rem;
}
.ssk-video {
	margin: 0 0 1.5rem;
}
.ssk-video iframe,
.ssk-video video {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--ssk-radius);
}
.ssk-locked {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.ssk-locked > .ssk-icon {
	font-size: 1.6em;
	color: var(--ssk-muted);
	margin-top: 0.2rem;
}
.ssk-locked h3 {
	margin: 0 0 0.35rem;
	font-size: 1.1em;
}

/* A locked lesson's teaser: real opening and outline, then made-up text under a blur */
.ssk-teaser__intro {
	font-size: 1.08em;
	line-height: 1.65;
}
.ssk-teaser__outline {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--ssk-accent, currentColor);
	background: var(--ssk-surface);
	border-radius: var(--ssk-radius);
}
.ssk-teaser__outline ul {
	margin: 0.4rem 0 0;
	padding-left: 1.2rem;
}
.ssk-teaser__outline li {
	margin: 0.2rem 0;
}
.ssk-teaser__veil {
	max-height: 15em;
	overflow: hidden;
	filter: blur(5px);
	opacity: 0.75;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
	mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
}
.ssk-teaser__veil p {
	line-height: 1.65;
}
.ssk-locked--paid {
	margin-top: 0.25rem;
	border-color: var(--ssk-accent);
}
.ssk-buy .ssk-price del {
	opacity: 0.55;
	font-weight: 400;
}
.ssk-thanks {
	margin: 1.5rem 0;
}
.ssk-complete.is-done p {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--ssk-good);
	font-weight: 600;
}
.ssk-facts {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: var(--ssk-font-small);
}
.ssk-facts li {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}
.ssk-status:empty {
	display: none;
}

/* Exam */
.ssk-questions {
	padding: 0;
	margin: 1rem 0;
	list-style: none;
}
.ssk-question fieldset {
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
	min-width: 0;
}
.ssk-question legend {
	font-weight: 600;
	padding: 0 0.35rem;
	max-width: 100%;
}
.ssk-question-num {
	display: block;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ssk-muted);
	font-weight: 500;
}
.ssk-scenario {
	background: var(--ssk-surface-2);
	border-left: 3px solid var(--ssk-accent);
	padding: 0.6rem 0.9rem;
	border-radius: 0 var(--ssk-radius) var(--ssk-radius) 0;
	margin: 0.5rem 0 0.75rem;
}
.ssk-scenario > :first-child {
	margin-top: 0;
}
.ssk-scenario > :last-child {
	margin-bottom: 0;
}
.ssk-hint {
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
	margin: 0 0 0.4rem;
}
.ssk-option {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	cursor: pointer;
}
.ssk-option:hover {
	background: var(--ssk-surface-2);
}
.ssk-option input {
	margin-top: 0.35em;
	accent-color: var(--ssk-accent);
	width: 1.05em;
	height: 1.05em;
	flex: none;
}
.ssk-timer {
	position: sticky;
	top: 0.5rem;
	z-index: 5;
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--ssk-surface-2);
	backdrop-filter: blur(6px);
}
.ssk-result {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	border-radius: var(--ssk-radius);
	background: var(--ssk-surface-2);
	margin: 0 0 1rem;
}
.ssk-result > .ssk-icon {
	font-size: 1.8em;
	margin-top: 0.15rem;
}
.ssk-result--pass {
	background: var(--ssk-accent-soft);
}
.ssk-result--pass > .ssk-icon {
	color: var(--ssk-good);
}
.ssk-result h3 {
	margin: 0 0 0.25rem;
	font-size: 1.1em;
}
.ssk-result p {
	margin: 0.25rem 0;
}
.ssk-review-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.ssk-review-item {
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	padding: 0.9rem 1.1rem;
	margin: 0 0 0.75rem;
}
.ssk-review-q {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0 0 0.5rem;
}
.ssk-review-q .ssk-icon {
	margin-top: 0.3em;
}
.ssk-review-item.is-right .ssk-review-q .ssk-icon {
	color: var(--ssk-good);
}
.ssk-review-item.is-wrong .ssk-review-q .ssk-icon {
	color: var(--ssk-warm);
}
.ssk-review-options {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ssk-review-option {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	margin: 0.25rem 0;
}
.ssk-review-option.is-answer {
	background: var(--ssk-accent-soft);
}
.ssk-review-option.is-chosen:not(.is-answer) {
	background: color-mix(in srgb, var(--ssk-warm) 12%, transparent);
}
.ssk-explanation {
	display: block;
	flex-basis: 100%;
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
}
p.ssk-explanation {
	display: flex;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
}

/* Tables */
.ssk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ssk-font-small);
	margin: 0.5rem 0 1rem;
}
.ssk-table th,
.ssk-table td {
	text-align: left;
	padding: 0.5rem 0.4rem;
	border-bottom: 1px solid var(--ssk-border);
	vertical-align: middle;
}
.ssk-table th {
	font-weight: 600;
	color: var(--ssk-muted);
	white-space: nowrap;
}
.ssk-table td:last-child a {
	white-space: nowrap;
}

/* Practical results */
.ssk-attempt {
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	margin: 0.6rem 0;
}
.ssk-attempt > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.7rem 1rem;
	cursor: pointer;
	list-style: none;
}
.ssk-attempt > summary > span:first-child {
	flex: 1;
	min-width: 10rem;
}
.ssk-field-result {
	padding: 0 1rem 1rem;
}
.ssk-objectives {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 1rem;
}
.ssk-objectives li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.4rem 0;
	border-top: 1px solid var(--ssk-border);
}
.ssk-objectives li:first-child {
	border-top: 0;
}
.ssk-objectives .ssk-icon {
	margin-top: 0.3em;
}
.ssk-objectives .is-done .ssk-icon {
	color: var(--ssk-good);
}
.ssk-objectives .is-missed .ssk-icon {
	color: var(--ssk-muted);
}
.ssk-objective-label {
	flex: 1;
}
.ssk-points {
	font-size: var(--ssk-font-small);
	color: var(--ssk-muted);
	white-space: nowrap;
}
.ssk-debrief {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 0.75rem;
}
.ssk-debrief-card {
	background: var(--ssk-surface-2);
	border-radius: var(--ssk-radius);
	padding: 0.8rem 0.95rem;
}
.ssk-debrief-card h4 {
	margin: 0 0 0.4rem;
	font-size: 1em;
}
.ssk-debrief-card p {
	display: flex;
	gap: 0.45rem;
	margin: 0.3rem 0;
	font-size: var(--ssk-font-small);
}
.ssk-debrief-card .ssk-icon {
	margin-top: 0.3em;
}
.ssk-debrief-card p > span {
	flex: 1;
	min-width: 0;
}
.ssk-good .ssk-icon {
	color: var(--ssk-good);
}
.ssk-improve .ssk-icon {
	color: var(--ssk-warm);
}

/* Journal */
.ssk-journal h3 {
	margin-top: 0;
}
.ssk-journal textarea {
	width: 100%;
	min-height: 8rem;
	font: inherit;
	line-height: 1.5;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ssk-border);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	resize: vertical;
}
.ssk-journal .ssk-status {
	font-size: 0.8em;
	margin: 0.4rem 0 0;
	min-height: 1.2em;
}

/* Prev / next */
.ssk-prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 2rem 0 1rem;
}
.ssk-prevnext a,
.ssk-prevnext .is-locked {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.ssk-prevnext a:hover {
	background: var(--ssk-surface-2);
}
.ssk-prevnext small {
	display: block;
	font-size: 0.75em;
	color: var(--ssk-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.ssk-prevnext .ssk-next {
	justify-content: flex-end;
	text-align: right;
	grid-column: 2;
}
.ssk-prevnext .is-locked {
	color: var(--ssk-muted);
}

/* Dashboard and catalogue */
.ssk-greeting {
	font-size: 1.05em;
}
.ssk-dash-course h3 {
	margin: 0 0 0.5rem;
}
.ssk-dash-modules {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 1rem;
	font-size: var(--ssk-font-small);
}
.ssk-dash-modules li {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.2rem 0;
}
.ssk-dash-modules li > .ssk-icon {
	color: var(--ssk-accent);
}
.ssk-dash-modules li.is-locked {
	color: var(--ssk-muted);
}
.ssk-dash-modules li.is-locked > .ssk-icon {
	color: inherit;
}
.ssk-cert-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ssk-cert-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0;
}
.ssk-cert-list li > span {
	flex: 1;
}
.ssk-cert-list li > .ssk-icon {
	font-size: 1.4em;
	color: var(--ssk-accent);
}
.ssk-catalogue {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
}
.ssk-course-card {
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ssk-course-card .ssk-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.ssk-course-card-body {
	padding: 1rem 1.15rem 1.15rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ssk-course-card-body > :last-child {
	margin-top: auto;
	margin-bottom: 0;
}
.ssk-course-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.15em;
}
.ssk-course-status .ssk-done-line {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-weight: 600;
	color: var(--ssk-good);
}

/* Verify page */
.ssk-shell-main {
	max-width: 46rem;
	margin: 2rem auto;
	padding: 0 16px;
}
.ssk-verify-head {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 1.2em;
	font-weight: 600;
}
.ssk-verify-head .ssk-icon {
	color: var(--ssk-accent);
}
.ssk-verify-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
}
.ssk-verify-list dt {
	color: var(--ssk-muted);
}
.ssk-verify-list dd {
	margin: 0;
	font-weight: 600;
}
.ssk-verify-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.ssk-verify-form input {
	flex: 1;
	min-width: 10rem;
	font: inherit;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--ssk-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.ssk-card {
		padding: 0.95rem 1rem;
	}
	.ssk-prevnext {
		grid-template-columns: 1fr;
	}
	.ssk-prevnext .ssk-next {
		grid-column: 1;
	}
	.ssk-verify-list {
		grid-template-columns: 1fr;
	}
	.ssk-verify-list dd {
		margin-bottom: 0.5rem;
	}
	.ssk-table--dash th:nth-child(2),
	.ssk-table--dash td:nth-child(2) {
		display: none;
	}
	.ssk-table th,
	.ssk-table td {
		padding: 0.45rem 0.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssk-chevron {
		transition: none;
	}
}

/* Paid courses (before a payment gateway exists) */
.ssk-price {
	font-size: 1.4em;
	font-weight: 700;
	margin: 0.25rem 0;
}
.ssk-paid .ssk-note {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Lesson content written as files (course/): boxes, figures, cards    */
/* ------------------------------------------------------------------ */
.ssk-content h2 {
	margin-top: 2.2em;
}
.ssk-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--ssk-font-small);
}
.ssk-content th,
.ssk-content td {
	border: 1px solid var(--ssk-border);
	padding: 0.4rem 0.6rem;
	text-align: left;
	vertical-align: top;
}
.ssk-box {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--ssk-border);
	border-left: 4px solid var(--ssk-box-edge, var(--ssk-accent));
	border-radius: var(--ssk-radius);
	background: var(--ssk-surface);
}
.ssk-box > :last-child {
	margin-bottom: 0;
}
.ssk-box__label {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: var(--ssk-font-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ssk-box-edge, var(--ssk-accent));
}
.ssk-box--safety { --ssk-box-edge: #b3261e; }
.ssk-box--law { --ssk-box-edge: #3b5b8a; }
.ssk-box--myth { --ssk-box-edge: #8a5a1f; }
.ssk-box--judgement { --ssk-box-edge: #6b4f8a; }
.ssk-box--task { --ssk-box-edge: var(--ssk-good); }
.ssk-figure--todo {
	margin: 1.5rem 0;
	padding: 1.2rem;
	border: 1px dashed var(--ssk-border);
	border-radius: var(--ssk-radius);
	color: var(--ssk-muted);
	font-size: var(--ssk-font-small);
	text-align: center;
}
.ssk-figure--todo::before {
	content: attr(data-kind);
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.ssk-media-card {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	margin: 1.5rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ssk-border);
	border-radius: var(--ssk-radius);
	background: var(--ssk-accent-soft);
}
.ssk-media-card > svg {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.15rem;
	color: var(--ssk-accent);
}
.ssk-media-card p {
	margin: 0 0 0.35rem;
}
.ssk-media-card > div > :last-child {
	margin-bottom: 0;
}
.ssk-media-card__kind {
	font-size: var(--ssk-font-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ssk-accent);
}
.ssk-media-card__title {
	font-weight: 700;
	font-size: 1.1em;
}
.ssk-media-card__where,
.ssk-media-card__note {
	color: var(--ssk-muted);
	font-size: var(--ssk-font-small);
}

/* ------------------------------------------------------------------ */
/* Image-led course and lesson pages (Design; themes with              */
/* ssk-academy-canvas support). Colours and type follow the theme.     */
/* ------------------------------------------------------------------ */
.sx {
	--sx-ink: var(--ink, #1b2a35);
	--sx-paper: var(--paper, #f5f0e6);
	--sx-stone: var(--stone, #e6dfd2);
	--sx-ochre: var(--ochre, #d9a24a);
	--sx-fell: var(--fell, #a4552a);
	--sx-pine: var(--pine, #1f3a2d);
	--sx-display: var(--display, "Barlow Semi Condensed", "Arial Narrow", sans-serif);
	--sx-head: var(--head-h, 76px);
	--sx-shadow: 0 1px 0 rgba(27, 42, 53, 0.05), 0 14px 34px -20px rgba(27, 42, 53, 0.45);
	--sx-muted: #4f5a62;
}
.sx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sx-wrap--narrow { max-width: 760px; }
.sx-kicker { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-family: var(--sx-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sx-fell); }
.sx-h2 { font-family: var(--sx-display); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.02; margin: 0 0 1.75rem; max-width: 22ch; }
.sx-lead { font-size: 1.2rem; max-width: 62ch; margin: -0.5rem 0 2.25rem; }
.sx-band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* the course hero */
.sx-hero { position: relative; display: flex; align-items: flex-end; min-height: min(100vh, 920px); overflow: hidden; color: #fff; background: var(--sx-ink); }
.sx-hero__img, .sx-lhero__img, .sx-final__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 24, 0.6) 0%, rgba(10, 18, 24, 0.05) 28%, rgba(10, 18, 24, 0.3) 55%, rgba(10, 18, 24, 0.92) 100%); }
.sx-hero__in { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: calc(var(--sx-head) + 5rem) 16px clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.sx-hero .sx-kicker, .sx-lhero .sx-kicker, .sx-final .sx-kicker, .sx-lands .sx-kicker { color: var(--sx-ochre); }
.sx-hero__title { font-family: var(--sx-display); font-weight: 800; font-size: clamp(3.2rem, 10vw, 7rem); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 1.1rem; color: #fff; }
.sx-hero__lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; max-width: 48ch; margin: 0 0 2rem; color: rgba(255, 255, 255, 0.92); }
.sx-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.sx-stats li { display: flex; flex-direction: column; gap: 0.2rem; }
.sx-stats strong { font-family: var(--sx-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: #fff; }
.sx-stats span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.sx-hero__panel { padding: 1.5rem 1.6rem; border-radius: 14px; background: rgba(14, 24, 31, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; --ssk-border: rgba(255, 255, 255, 0.25); --ssk-muted: rgba(255, 255, 255, 0.78); }
.sx-hero__panel .ssk-eyebrow { color: var(--sx-ochre); font-family: var(--sx-display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; margin: 0 0 0.6rem; }
.sx-hero__panel p { margin: 0 0 0.9rem; font-size: 1.02rem; }
.sx-hero__panel > :last-child, .sx-hero__panel form:last-child { margin-bottom: 0; }
.sx-hero__panel .ssk-button { background: var(--sx-ochre); color: var(--sx-ink); border-color: var(--sx-ochre); }
.sx-hero__panel .ssk-button--quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.sx-hero__panel .ssk-note, .sx-hero__panel .ssk-muted { color: rgba(255, 255, 255, 0.8); }
.sx-hero__panel a:not(.ssk-button) { color: #fff; }

/* how it works */
.sx-how { background: var(--sx-paper); }
.sx-how__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
.sx-how__list li { position: relative; padding: 1.5rem 1.3rem 1.6rem; border-radius: 14px; background: #fff; box-shadow: var(--sx-shadow); }
.sx-how__icon { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1rem; border-radius: 50%; background: var(--sx-pine); color: var(--sx-ochre); font-size: 1.3rem; }
.sx-how__n { position: absolute; top: 0.9rem; right: 1.1rem; font-family: var(--sx-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: rgba(27, 42, 53, 0.1); }
.sx-how h3 { font-family: var(--sx-display); font-size: 1.35rem; line-height: 1.1; margin: 0 0 0.45rem; }
.sx-how p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--sx-muted); }

/* the modules as picture cards */
.sx-mods { background: var(--sx-stone); }
.sx-mods__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sx-mod { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; color: var(--sx-ink); text-decoration: none; box-shadow: var(--sx-shadow); transition: transform 0.25s, box-shadow 0.25s; }
.sx-mod:hover, .sx-mod:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 1px 0 rgba(27, 42, 53, 0.05), 0 24px 44px -22px rgba(27, 42, 53, 0.6); color: var(--sx-ink); }
.sx-mod__img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sx-ink); }
.sx-mod__img::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10, 18, 24, 0.7)); }
.sx-mod__pic { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sx-mod:hover .sx-mod__pic { transform: scale(1.06); }
.sx-mod__n { position: absolute; left: 1.1rem; bottom: 0.55rem; z-index: 1; font-family: var(--sx-display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: #fff; }
.sx-mod__body { display: flex; flex: 1; flex-direction: column; gap: 0.55rem; padding: 1.15rem 1.3rem 1.35rem; }
.sx-mod__title { font-family: var(--sx-display); font-weight: 700; font-size: 1.5rem; line-height: 1.08; }
.sx-mod__sum { flex: 1; font-size: 1rem; line-height: 1.5; color: var(--sx-muted); }
.sx-mod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.92rem; font-weight: 600; color: var(--sx-fell); }
.sx-mod .ssk-bar { margin-top: 0.3rem; }

/* the real landscapes */
.sx-lands { background: var(--sx-ink); color: #fff; }
.sx-lands .sx-h2 { color: #fff; }
.sx-lands .sx-lead { color: rgba(255, 255, 255, 0.85); }
.sx-lands__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sx-land { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: #0e171d; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (hover: hover) { .sx-land:hover { transform: scale(1.03); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7); z-index: 1; } }
@media (prefers-reduced-motion: reduce) { .sx-land, .sx-mod { transition: none; } .sx-land:hover { transform: none; } }
.sx-land__pic { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.7s ease; }
.sx-land:hover .sx-land__pic { transform: scale(1.05); }
.sx-land::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(8, 14, 19, 0.92)); }
.sx-land figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.2rem 1.2rem; }
.sx-land strong { font-family: var(--sx-display); font-size: 1.7rem; line-height: 1.05; }
.sx-land span { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }
.sx-land .sx-land__go { display: flex; gap: 1rem; margin-top: 0.55rem; }
.sx-land__go a { font-family: var(--sx-display); font-weight: 700; letter-spacing: 0.04em; color: var(--sx-ochre); text-decoration: none; }
.sx-land__go a:hover { color: #fff; }
.sx-land__fly { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(14, 24, 31, 0.55); color: #fff; font: 700 0.9rem/1 var(--sx-display); letter-spacing: 0.04em; cursor: pointer; }
.sx-land__fly:hover { border-color: var(--sx-ochre); color: var(--sx-ochre); }
.sx-land__fly .ssk-icon { width: 1.1em; height: 1.1em; }
.sx-fly { padding: 0; border: 0; background: transparent; max-width: min(1100px, 96vw); width: 96vw; }
.sx-fly::backdrop { background: rgba(8, 12, 16, 0.86); }
.sx-fly__in { position: relative; }
.sx-fly__title { margin: 0 0 0.5rem; color: #fff; font: 700 1.2rem/1.2 var(--sx-display); letter-spacing: 0.03em; }
.sx-fly video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.sx-fly__close { position: absolute; top: -0.4rem; right: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(14, 24, 31, 0.8); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* every lesson */
.sx-outline { background: var(--sx-paper); }
.sx-acc { display: grid; gap: 0.8rem; }
.sx-acc__mod { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--sx-shadow); scroll-margin-top: calc(var(--sx-head) + 16px); }
.sx-acc__mod > summary { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 0.75rem 1.2rem 0.75rem 0.75rem; cursor: pointer; list-style: none; }
.sx-acc__mod > summary::-webkit-details-marker { display: none; }
.sx-acc__mod > summary:hover .sx-acc__head strong { color: var(--sx-fell); }
.sx-acc__thumb { display: block; width: 104px; height: 74px; overflow: hidden; border-radius: 9px; background: var(--sx-ink); }
.sx-acc__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-acc__head { display: flex; flex-direction: column; gap: 0.1rem; }
.sx-acc__n { font-family: var(--sx-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-fell); }
.sx-acc__head strong { font-family: var(--sx-display); font-size: 1.4rem; line-height: 1.12; transition: color 0.15s; }
.sx-acc__meta { font-size: 0.92rem; color: #66706f; }
.sx-acc__chev { font-size: 1.25rem; transition: transform 0.2s; }
.sx-acc__mod[open] .sx-acc__chev { transform: rotate(180deg); }
.sx-acc__body { padding: 0 1.4rem 1.4rem; border-top: 1px solid rgba(27, 42, 53, 0.08); }
.sx-acc__sum { margin: 1rem 0 0.75rem; color: var(--sx-muted); }
.sx-rows { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.sx-row { display: grid; grid-template-columns: 1.3rem 2.6rem minmax(0, 1fr) auto; gap: 0.45rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid rgba(27, 42, 53, 0.07); break-inside: avoid; font-size: 1rem; line-height: 1.35; }
.sx-row__state { color: #a0a8aa; font-size: 0.95rem; }
.sx-row.is-done .sx-row__state { color: var(--ssk-good, #3f6f3a); }
.sx-row__num { font-family: var(--sx-display); font-weight: 700; color: var(--sx-fell); }
.sx-row__name a { color: var(--sx-ink); text-decoration: none; }
.sx-row__name a:hover { color: var(--sx-fell); text-decoration: underline; }
.sx-row.is-exam .sx-row__name, .sx-row.is-practical .sx-row__name { font-weight: 700; }
.sx-row__meta { white-space: nowrap; font-size: 0.85rem; color: #7a8384; }

/* the final test */
.sx-final { position: relative; overflow: hidden; color: #fff; background: var(--sx-ink); scroll-margin-top: var(--sx-head); }
.sx-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 18, 24, 0.92) 0%, rgba(10, 18, 24, 0.6) 55%, rgba(10, 18, 24, 0.35) 100%); }
.sx-final__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 3rem; align-items: end; padding-top: clamp(4.5rem, 10vw, 8.5rem); padding-bottom: clamp(4.5rem, 10vw, 8.5rem); }
.sx-final .sx-h2 { color: #fff; }
.sx-final p { font-size: 1.15rem; max-width: 52ch; }
.sx-final__cert { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--sx-ochre); }
.sx-final__steps { display: grid; gap: 0.7rem; margin: 0; padding: 1.4rem 1.5rem; list-style: none; border-radius: 14px; background: rgba(14, 24, 31, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); }
.sx-final__steps li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sx-display); font-size: 1.2rem; font-weight: 700; }
.sx-final__steps svg { color: var(--sx-ochre); }
.sx-final__steps a { color: #fff; }

/* the lesson hero */
.sx-lhero { position: relative; display: flex; align-items: flex-end; min-height: min(64vh, 600px); overflow: hidden; color: #fff; background: var(--sx-ink); }
.sx-lhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 24, 0.65) 0%, rgba(10, 18, 24, 0.2) 35%, rgba(10, 18, 24, 0.88) 100%); }
.sx-lhero__in { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--sx-head) + 3.5rem); padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sx-crumbs { margin: 0 0 1.4rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); }
.sx-crumbs a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.sx-lhero__title { max-width: 22ch; margin: 0 0 1rem; font-family: var(--sx-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 0.98; color: #fff; }
.sx-lhero__lead { max-width: 54ch; margin: 0 0 1.1rem; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.sx-lhero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.sx-lhero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* the lesson beside its contents */
.sx-lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-top: clamp(2.2rem, 5vw, 3.6rem); padding-bottom: 4.5rem; }
.sx-main { min-width: 0; max-width: 46rem; }
.sx .ssk-content { font-size: 1.15rem; line-height: 1.72; }
.sx .ssk-content > p:first-child { font-size: 1.32rem; line-height: 1.55; }
.sx .ssk-content h2 { margin: 2.4em 0 0.6em; font-family: var(--sx-display); font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.08; scroll-margin-top: calc(var(--sx-head) + 18px); }
.sx .ssk-content h3 { margin: 1.8em 0 0.5em; font-size: 1.35rem; }
.sx .ssk-content li + li { margin-top: 0.35em; }
.sx .ssk-box { background: #fff; box-shadow: var(--sx-shadow); border-color: transparent; border-left-width: 5px; }
.sx .ssk-media-card { box-shadow: var(--sx-shadow); border: 0; background: #fff; }
.sx-side { position: sticky; top: calc(var(--sx-head) + 22px); display: grid; gap: 1.2rem; max-height: calc(100vh - var(--sx-head) - 44px); overflow: auto; }
.sx-side__box { padding: 1.15rem 1.25rem; border-radius: 14px; background: #fff; box-shadow: var(--sx-shadow); }
.sx-side__h { margin: 0 0 0.6rem; font-family: var(--sx-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-fell); }
.sx-toc ol, .sx-modnav ol { list-style: none; margin: 0; padding: 0; display: grid; font-size: 0.97rem; line-height: 1.35; }
.sx-toc a { display: block; padding: 0.32rem 0 0.32rem 0.8rem; border-left: 2px solid rgba(27, 42, 53, 0.12); color: #3b4650; text-decoration: none; }
.sx-toc a:hover, .sx-toc a.is-on { border-left-color: var(--sx-ochre); color: var(--sx-ink); }
.sx-toc a.is-on { font-weight: 700; }
.sx-modnav__t { margin: -0.3rem 0 0.7rem; font-family: var(--sx-display); font-weight: 700; font-size: 1.2rem; line-height: 1.12; }
.sx-modnav li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.45rem; align-items: baseline; padding: 0.28rem 0; }
.sx-modnav li svg { color: #a0a8aa; }
.sx-modnav li.is-done svg { color: var(--ssk-good, #3f6f3a); }
.sx-modnav li.is-here span { font-weight: 700; color: var(--sx-ink); }
.sx-modnav a { color: #3b4650; text-decoration: none; }
.sx-modnav a:hover { color: var(--sx-fell); text-decoration: underline; }

/* field event cards with the landscape's picture */
.ssk-media-card--field.has-img { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.ssk-media-card--field.has-img > img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.ssk-media-card--field.has-img > div { padding: 1.1rem 1.25rem; }

@media (max-width: 1100px) {
	.sx-how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-mods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-lands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
	.sx-lgrid { grid-template-columns: minmax(0, 1fr); }
	.sx-side { position: static; max-height: none; order: -1; }
	.sx-modnav { display: none; }
}
@media (max-width: 900px) {
	.sx-hero__in, .sx-final__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.sx-how__list, .sx-mods__grid { grid-template-columns: minmax(0, 1fr); }
	.sx-rows { columns: 1; }
	.sx-acc__mod > summary { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 0.85rem; }
	.sx-acc__thumb { width: 68px; height: 52px; }
	.sx-land { aspect-ratio: 4 / 5; }
	.ssk-media-card--field.has-img { grid-template-columns: minmax(0, 1fr); }
	.ssk-media-card--field.has-img > img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-mod, .sx-mod__pic, .sx-land__pic, .sx-acc__chev { transition: none; }
}
.sx-hero__text, .sx-lhero__in { text-shadow: 0 1px 14px rgba(8, 14, 19, 0.45); }
.ssk-figure--img { margin: 2rem 0; }
.ssk-figure--img img { display: block; width: 100%; height: auto; border-radius: var(--ssk-radius); }
.ssk-figure--img figcaption { margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ssk-muted); }
.sx-mod__n.is-label { font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; background: var(--sx-ochre); color: var(--sx-ink); padding: .2rem .55rem; border-radius: 6px; bottom: .8rem; }