/* pages/cabinet-lectures.css — читалка курсов (/lichnyy-kabinet/lectures/).
 *
 * Каркас экрана (сетка, сайдбар, шапка, прокрутка) — общий с «Аудиторией»,
 * см. components/cabinet-workspace.css. Текст лекции оформляет
 * components/cabinet-prose.css (.cb-prose), здесь только выбор курса,
 * колонка чтения и переход между лекциями.
 */

/* —— Выбор курса —— */
.lec-course-picker {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-bottom: 0.9rem;
	border-bottom: var( --aud-rule );
}

.lec-course-picker__label {
	color: var( --ink );
	font-size: 0.8rem;
	font-weight: 700;
}

.reclaim-lectures .lec-course-picker__select {
	width: 100%;
	min-height: 2.35rem;
	margin: 0;
	padding: 0.4rem 0.7rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	color: var( --ink );
	font: inherit;
	font-size: 0.92rem;
}

.reclaim-lectures .lec-course-picker__select:focus,
.reclaim-lectures .lec-course-picker__select:focus-visible {
	border-color: var( --settings-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --settings-accent ) 22%, transparent );
	outline: none;
}

/* Номер лекции вместо даты беседы в общем .aud-chat-item. */
.lec-lecture-list .aud-chat-item {
	align-items: flex-start;
	gap: 0.6rem;
}

.lec-lecture-list .aud-chat-item__name {
	white-space: normal;
}

.lec-lecture-list .aud-chat-item__number {
	flex: 0 0 auto;
	min-width: 1.2rem;
	color: var( --muted );
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lec-lecture-list .aud-chat-item.is-active .aud-chat-item__number {
	color: var( --settings-accent-strong );
}

/* —— Шапка читалки —— */
.lec-counter {
	flex: 0 0 auto;
	color: var( --muted );
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* —— Колонка чтения —— */
.lec-scroll {
	padding-bottom: 1.5rem;
}

.lec-article,
.lec-placeholder {
	width: min( 100%, var( --aud-col ) );
	margin-inline: 0 auto;
}

.lec-placeholder {
	max-width: 28rem;
	margin-top: clamp( 1.5rem, 9vh, 4.5rem );
}

.lec-article__head {
	margin-bottom: 1.4rem;
	padding-bottom: 1.1rem;
	border-bottom: var( --aud-rule );
}

.lec-article__meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.45rem;
}

.lec-article__eyebrow {
	margin: 0;
	color: var( --muted );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* —— Кнопка озвучки лекции —— */
.lec-audio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.28rem 0.75rem;
	border: 1px solid var( --line );
	border-radius: 9999px;
	background: var( --surface );
	color: var( --ink );
	font: inherit;
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, background-color 140ms ease;
	user-select: none;
}

.lec-audio-btn:hover:not( :disabled ),
.lec-audio-btn:focus-visible:not( :disabled ) {
	border-color: var( --settings-accent );
	color: var( --settings-accent-strong );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --settings-accent ) 20%, transparent );
	outline: none;
}

.lec-audio-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.lec-audio-btn__svg {
	width: 100%;
	height: 100%;
}

.lec-audio-btn__time {
	color: var( --muted );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 550;
}

.lec-audio-btn.is-loading {
	opacity: 0.75;
	cursor: wait;
}

.lec-audio-btn.is-loading .lec-audio-btn__icon {
	animation: lec-audio-pulse 1s ease-in-out infinite alternate;
}

.lec-audio-btn.is-playing {
	border-color: var( --settings-accent );
	background: color-mix( in srgb, var( --settings-accent ) 10%, var( --surface ) );
	color: var( --settings-accent-strong );
}

.lec-audio-btn.is-playing .lec-audio-btn__wave--1 {
	animation: lec-wave-fade 1.2s ease-in-out infinite;
}

.lec-audio-btn.is-playing .lec-audio-btn__wave--2 {
	animation: lec-wave-fade 1.2s ease-in-out 0.3s infinite;
}

.lec-audio-btn.is-paused {
	border-color: var( --line );
}

@keyframes lec-audio-pulse {
	from { transform: scale( 0.92 ); opacity: 0.7; }
	to { transform: scale( 1.08 ); opacity: 1; }
}

@keyframes lec-wave-fade {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* —— Караоке-подсветка читаемых слов —— */
.lec-word {
	border-radius: 0.35em;
	padding: 0.06em 0.14em;
	margin: -0.06em -0.14em;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.lec-reader.has-audio .lec-word {
	cursor: pointer;
}

.lec-reader.has-audio .lec-word:hover {
	background-color: color-mix( in srgb, #9b7ef0 14%, transparent );
}

.lec-word.is-active-word {
	background:
		linear-gradient(
			135deg,
			color-mix( in srgb, #c4b0ff 55%, transparent ),
			color-mix( in srgb, #9b7ef0 42%, transparent )
		) !important;
	color: color-mix( in srgb, #4315ab 78%, var( --ink ) ) !important;
	font-weight: 650;
	box-shadow:
		0 0 0 1.5px color-mix( in srgb, #9b7ef0 45%, transparent ),
		0 0 14px color-mix( in srgb, #b69cff 38%, transparent ),
		0 2px 6px color-mix( in srgb, #5742b9 12%, transparent );
	animation: lec-word-lilac 520ms ease-out;
}

@keyframes lec-word-lilac {
	0% {
		transform: scale( 1 );
		box-shadow:
			0 0 0 0 color-mix( in srgb, #9b7ef0 0%, transparent ),
			0 0 0 color-mix( in srgb, #b69cff 0%, transparent );
	}
	40% {
		transform: scale( 1.035 );
		box-shadow:
			0 0 0 2px color-mix( in srgb, #9b7ef0 50%, transparent ),
			0 0 18px color-mix( in srgb, #b69cff 48%, transparent );
	}
	100% {
		transform: scale( 1 );
		box-shadow:
			0 0 0 1.5px color-mix( in srgb, #9b7ef0 45%, transparent ),
			0 0 14px color-mix( in srgb, #b69cff 38%, transparent ),
			0 2px 6px color-mix( in srgb, #5742b9 12%, transparent );
	}
}

:root[data-theme="dark"] .lec-word.is-active-word {
	background:
		linear-gradient(
			135deg,
			color-mix( in srgb, #9b7ef0 48%, transparent ),
			color-mix( in srgb, #7c5cde 36%, transparent )
		) !important;
	color: #efe8ff !important;
	box-shadow:
		0 0 0 1.5px color-mix( in srgb, #b69cff 40%, transparent ),
		0 0 16px color-mix( in srgb, #9b7ef0 42%, transparent );
}

.lec-article__title {
	margin: 0;
	font-family: var( --font-display );
	font-size: clamp( 1.35rem, 3vw, 1.75rem );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-wrap: balance;
}

/* Лекция — длинный текст, а не реплика: крупнее и просторнее чата. */
.lec-body {
	font-size: 1rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

.lec-quiz-btn {
	width: auto;
	margin-top: 1.5rem;
}

/* —— Переход между лекциями —— */
.lec-pager {
	display: flex;
	justify-content: space-between;
	gap: 0.85rem;
	width: min( 100%, var( --aud-col ) );
	margin-inline: 0 auto;
	padding: 0.85rem var( --aud-pad ) max( 0.85rem, env( safe-area-inset-bottom, 0px ) );
	border-top: var( --aud-rule );
}

.reclaim-lectures .lec-pager__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.35rem;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid var( --line );
	border-radius: 8px;
	background: var( --surface );
	color: var( --ink );
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 650;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.reclaim-lectures .lec-pager__btn:hover:not( :disabled ),
.reclaim-lectures .lec-pager__btn:focus-visible:not( :disabled ) {
	border-color: var( --settings-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --settings-accent ) 22%, transparent );
	outline: none;
}

.reclaim-lectures .lec-pager__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* «Обсудить в Аудитории» — ссылка рядом с кнопкой мини-теста. */
.lec-audience-link {
	width: auto;
	margin-top: 1rem;
	margin-right: 0.6rem;
	text-decoration: none;
	display: inline-flex;
}