/*
 * Разделы урока «Проверь себя: тест по уроку» и «Текстовая версия урока» (assets/js/lesson-blocks.js).
 * Вид — компоненты темы курсов (Sneat: custom-option, alert, btn-label, bg-label, avatar), шрифт и цвета страницы;
 * здесь только то, чего в теме нет, и поправки к reboot из main.css (legend, outline у input, подчёркнутые ссылки).
 */

/* --- тест ------------------------------------------------------------------------------------------------- */

.lesson-quiz .lq-steps {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.lesson-quiz .lq-step {
	flex: 1;
	height: 0.375rem;
	border-radius: 0.25rem;
	background: #eceef1;
}

.lesson-quiz .lq-step.is-current {
	background: #007afe;
}

.lesson-quiz .lq-step.is-correct {
	background: #71dd37;
}

.lesson-quiz .lq-step.is-wrong {
	background: #ff3e1d;
}

.lesson-quiz .lq-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* main.css (reboot) даёт legend 1.5rem; float: left с clear у следующего — как в Bootstrap, одинаково во всех браузерах */
.lesson-quiz .lq-question {
	float: left;
	width: 100%;
	margin-bottom: 1rem;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	color: #566a7f;
}

.lesson-quiz .lq-question + * {
	clear: left;
}

.lesson-quiz .custom-option {
	margin-bottom: 0.75rem;
}

.lesson-quiz .custom-option-basic .custom-option-header {
	gap: 0.75rem;
	padding-bottom: 0;
}

.lesson-quiz .lq-option-text {
	color: #333;
	overflow-wrap: anywhere;
}

.lesson-quiz .custom-option-header .bx {
	flex: none;
	font-size: 1.375rem;
}

/* Верно / неверно: свои классы (см. lesson-blocks.js), селектор сильнее .custom-option.checked темы */
.lesson-quiz .lq-fieldset .custom-option.lq-correct {
	border-color: #71dd37;
	background-color: rgba(113, 221, 55, 0.08);
}

.lesson-quiz .lq-fieldset .custom-option.lq-wrong {
	border-color: #ff3e1d;
	background-color: rgba(255, 62, 29, 0.06);
}

.lesson-quiz .lq-fieldset .lq-correct .form-check-input:checked {
	border-color: #71dd37;
	background-color: #71dd37;
	box-shadow: none;
}

.lesson-quiz .lq-fieldset .lq-wrong .form-check-input:checked {
	border-color: #ff3e1d;
	background-color: #ff3e1d;
	box-shadow: none;
}

.lesson-quiz .custom-option.is-locked .custom-option-content,
.lesson-quiz .custom-option.is-locked .form-check-input {
	cursor: default;
}

.lesson-quiz .lq-fieldset .custom-option.is-locked:not(.lq-correct):not(.lq-wrong) {
	border-color: #d9dee3;
}

.lesson-quiz .form-check-input:disabled {
	opacity: 1;
}

.lesson-quiz .form-check-input:disabled ~ .custom-option-header,
.lesson-quiz .form-check-input:disabled + .custom-option-header {
	opacity: 1;
}

/* main.css: input { outline: none } — фокус с клавиатуры возвращаем */
.lesson-quiz .form-check-input:focus-visible {
	outline: 2px solid #007afe;
	outline-offset: 2px;
}

/* Текст в alert и плашках темы (#71dd37 на #e8fadf и т. п.) читается плохо — темнее, контраст от 4.5:1 */
.lesson-quiz .alert-success,
.lesson-quiz .badge.bg-label-success {
	color: #2e6b0f !important;
}

.lesson-quiz .alert-danger,
.lesson-quiz .badge.bg-label-danger {
	color: #b3260e !important;
}

.lesson-quiz .lq-alert-icon {
	font-size: 1.25rem;
	line-height: 1.3;
}

.lesson-quiz .lq-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.lesson-quiz .lq-score {
	font-size: 1.25rem;
	font-weight: 500;
	color: #566a7f;
}

.lesson-quiz .lq-score:focus {
	outline: none;
}

.lesson-quiz .lq-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
}

.lesson-quiz .lq-cta {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid #d9dee3;
	border-radius: 0.5rem;
}

.lesson-quiz .lq-cta .avatar-initial .bx {
	font-size: 1.375rem;
}

.lesson-quiz .lq-cta-title {
	font-weight: 500;
	color: #566a7f;
}

/* --- транскрипт -------------------------------------------------------------------------------------------- */

.lesson-transcript-text p:last-child {
	margin-bottom: 0;
}

/* Высота свёрнутого текста — CLAMP_PX из lesson-blocks.js */
.lesson-transcript-text.is-clamped {
	max-height: var(--lt-clamp, 240px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

@media (max-width: 575.98px) {
	.lesson-quiz .custom-option-basic .custom-option-content {
		padding: 0.75em 0.75em 0.75em 2.4em;
	}

	/* Колонка урока на телефоне ~230 px: кнопки друг под другом, «Следующий вопрос» сверху */
	.lesson-quiz .lq-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.lesson-quiz .lq-nav .btn {
		width: 100%;
		margin-left: 0 !important;
	}

	.lesson-quiz .lq-cta {
		flex-direction: column;
	}
}