/* MCQ blocks: site and editor. Theme colours when available (light and
   dark mode), with fallbacks for any other theme. */
.snt-mcq {
	--snt-ok: #137a3a;
	--snt-ok-soft: #ecfdf3;
	--snt-bad: var(--sn-danger, #b42318);
	--snt-bad-soft: var(--sn-danger-soft, #fef3f2);
	margin: 1.6em 0;
	padding: 20px 22px;
	border: 1px solid var(--sn-border, #e3e8f1);
	border-radius: var(--sn-radius-lg, 16px);
	background: var(--sn-card, #fff);
	box-shadow: var(--sn-shadow-sm, 0 1px 2px rgba(6, 53, 116, 0.06));
}

[data-theme="dark"] .snt-mcq {
	--snt-ok: #6ce9a6;
	--snt-ok-soft: #0f2e22;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .snt-mcq {
		--snt-ok: #6ce9a6;
		--snt-ok-soft: #0f2e22;
	}
}

.snt-mcq__question {
	margin: 0 0 14px;
	color: var(--sn-text, #0d1b33);
	font-weight: 600;
	line-height: 1.6;
}

.snt-mcq__question p {
	margin: 0;
}

.snt-mcq .snt-mcq__options {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snt-mcq .snt-mcq__options li {
	margin: 0;
}

.snt-mcq .snt-mcq__options li::marker {
	content: none;
}

.snt-mcq__option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1.5px solid var(--sn-border, #e3e8f1);
	border-radius: var(--sn-radius, 12px);
	background: var(--sn-surface, #f5f7fb);
	color: var(--sn-text, #0d1b33);
	font: inherit;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.snt-mcq.is-ready .snt-mcq__option:not(:disabled):hover {
	border-color: var(--sn-primary, #063574);
	background: var(--sn-primary-soft, #e6edf8);
}

.snt-mcq__option:focus-visible {
	outline: 2px solid var(--sn-primary, #063574);
	outline-offset: 2px;
}

.snt-mcq__option:disabled {
	cursor: default;
	opacity: 1;
}

.snt-mcq__letter {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sn-card, #fff);
	color: var(--sn-primary, #063574);
	font-weight: 800;
	font-size: 0.875rem;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.snt-mcq__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Answered. */
.snt-mcq__option.is-correct {
	border-color: var(--snt-ok);
	background: var(--snt-ok-soft);
}

.snt-mcq__option.is-correct .snt-mcq__letter {
	background: var(--snt-ok);
	color: var(--sn-card, #fff);
	box-shadow: none;
}

.snt-mcq__option.is-chosen:not(.is-correct) {
	border-color: var(--snt-bad);
	background: var(--snt-bad-soft);
}

.snt-mcq__option.is-chosen:not(.is-correct) .snt-mcq__letter {
	background: var(--snt-bad);
	color: var(--sn-card, #fff);
	box-shadow: none;
}

.snt-mcq.is-answered .snt-mcq__option:not(.is-correct, .is-chosen) {
	opacity: 0.6;
}

.snt-mcq__feedback {
	margin: 12px 0 0;
	font-weight: 700;
}

.snt-mcq__feedback:empty {
	display: none;
}

.snt-mcq__feedback.is-right {
	color: var(--snt-ok);
}

.snt-mcq__feedback.is-wrong {
	color: var(--snt-bad);
}

.snt-mcq__answer {
	margin-top: 12px;
	color: var(--sn-text-soft, #33415c);
	font-size: 0.9375rem;
}

.snt-mcq__answer summary {
	width: fit-content;
	color: var(--sn-link, var(--sn-primary, #063574));
	font-weight: 600;
	cursor: pointer;
}

.snt-mcq.is-answered .snt-mcq__answer summary {
	display: none;
}

.snt-mcq__correct,
.snt-mcq__answer .snt-mcq__explanation {
	margin: 8px 0 0;
}

.snt-mcq.is-answered .snt-mcq__correct {
	display: none; /* The coloured options already show it. */
}

.snt-mcq__explanation p {
	margin: 0.4em 0 0;
}

/* Set: title and score. */
.snt-mcq-set {
	margin: 2em 0;
}

.snt-mcq-set__title {
	margin: 0 0 4px;
	color: var(--sn-text, #0d1b33);
	font-family: var(--sn-font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 800;
}

.snt-mcq-set .snt-mcq {
	margin: 14px 0;
}

.snt-mcq-set__score {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-radius: var(--sn-radius-lg, 16px);
	background: var(--sn-primary-soft, #e6edf8);
}

.snt-mcq-set__score.is-shown {
	display: flex;
}

.snt-mcq-set__result {
	margin: 0;
	color: var(--sn-text, #0d1b33);
	font-weight: 800;
	font-size: 1.0625rem;
}

.snt-mcq-set__reset {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--sn-primary, #063574);
	color: var(--sn-on-primary, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.snt-mcq-set__reset:focus-visible {
	outline: 2px solid var(--sn-primary, #063574);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.snt-mcq {
		padding: 16px;
	}

	.snt-mcq__option {
		padding: 10px 12px;
	}
}

/* Editor. */
.snt-mcq--editing {
	position: relative;
}

.snt-mcq__badge {
	position: absolute;
	top: -10px;
	left: 16px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--sn-primary, #063574);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.snt-mcq__edit-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border: 1.5px solid var(--sn-border, #e3e8f1);
	border-radius: 12px;
}

.snt-mcq__edit-option.is-correct {
	border-color: #137a3a;
	background: #ecfdf3;
}

.snt-mcq__edit-option .snt-mcq__text {
	flex: 1;
}

.snt-mcq__mark {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border: 1.5px solid #063574;
	border-radius: 50%;
	background: #fff;
	color: #063574;
	font-weight: 800;
	cursor: pointer;
}

.snt-mcq__mark[aria-pressed="true"] {
	border-color: #137a3a;
	background: #137a3a;
	color: #fff;
}

.snt-mcq__edit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0;
}

.snt-mcq__hint {
	color: #50575e;
	font-size: 13px;
}

.snt-mcq__hint.is-warning {
	color: #b32d2e;
	font-weight: 600;
}

.snt-mcq--editing .snt-mcq__explanation {
	padding: 8px 10px;
	border: 1px dashed var(--sn-border, #c3c4c7);
	border-radius: 10px;
	font-size: 0.9375rem;
}