/**
 * Ридер: встроенный блок и приложение-читалка.
 *
 * Цветовые токены заданы отдельно для каждой темы чтения: основной текст
 * держит контраст ≥ 7:1, вторичный — ≥ 4.5:1 (D3 дорожной карты v3).
 * Переносы по умолчанию выключены; включаются кнопкой «Переносы».
 */

.elsa-reader-pane,
.elsa-app {
	--rd-bg: #fbfaf7;
	--rd-fg: #22201d;
	--rd-muted: #6b655c;
	--rd-accent: var(--wp--preset--color--accent, #176bc7);
	--rd-font: 19px;
	--rd-line: 1.75;
	--rd-width: 42rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Темы чтения */
.elsa-app[data-theme="light"],
.elsa-reader-pane[data-theme="light"],
.elsa-app[data-theme="site"] { --rd-bg: #fbfaf7; --rd-fg: #22201d; --rd-muted: #6b655c; }
.elsa-app[data-theme="sepia"],
.elsa-reader-pane[data-theme="sepia"] { --rd-bg: #f4ecd8; --rd-fg: #3a3226; --rd-muted: #6b5f4a; }
.elsa-app[data-theme="dark"],
.elsa-reader-pane[data-theme="dark"] { --rd-bg: #16181c; --rd-fg: #e6e6e6; --rd-muted: #a8aeb6; }

/* ---------- Встроенный блок ---------- */
.elsa-reader-pane {
	border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	border-radius: 12px;
	overflow: hidden;
	background: var(--rd-bg);
	color: var(--rd-fg);
	margin: 1.5rem 0;
}

.elsa-reader__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.elsa-reader__title { display: flex; flex-direction: column; gap: 0.1rem; }
.elsa-reader__sub { font-size: 0.8em; color: var(--rd-muted); }
.elsa-reader__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.elsa-reader__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
	text-decoration: none;
}

.elsa-reader__btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.elsa-reader__btn--wide { min-width: 6rem; }

.elsa-reader__counter { font-size: 0.85em; color: var(--rd-muted); white-space: nowrap; }

.elsa-reader__toc { position: relative; }
.elsa-reader__toc summary { cursor: pointer; padding: 0.35rem 0.6rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 8px; font-size: 0.9em; }
.elsa-reader__toc ol {
	position: absolute;
	z-index: 20;
	right: 0;
	top: 2.4rem;
	max-height: 24rem;
	overflow: auto;
	min-width: 16rem;
	margin: 0;
	padding: 0.6rem 0.6rem 0.6rem 1.6rem;
	background: var(--rd-bg);
	color: var(--rd-fg);
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 22%);
}

.elsa-reader__viewport {
	position: relative;
	height: min(70vh, 760px);
	overflow: auto;
	padding: 1.5rem 1.25rem;
	background: var(--rd-bg);
}

.elsa-reader__viewport--app { height: calc(100vh - 9.5rem); }

.elsa-reader__content {
	max-width: var(--rd-width);
	margin: 0 auto;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: var(--rd-font);
	line-height: var(--rd-line);
	text-align: justify;
	hyphens: manual;
}

/* Переносы включает читатель кнопкой «Переносы». На узких экранах по умолчанию выкл. */
.elsa-reader__content[data-hyphens="on"] {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}

.elsa-reader__content p { margin: 0 0 0.95em; }
.elsa-reader__content p:first-of-type::first-letter { font-size: 1.6em; line-height: 1; }
.elsa-reader__loading { color: var(--rd-muted); text-align: center; font-family: system-ui, sans-serif; font-size: 1rem; }

.elsa-reader__watermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background-repeat: repeat;
	opacity: 0.055;
}

.elsa-reader__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.elsa-reader__notice {
	margin: 0;
	padding: 0.5rem 0.9rem;
	font-size: 0.78em;
	color: var(--rd-muted);
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* ---------- Приложение ---------- */
html:has(.elsa-app) { background: #111; }

.elsa-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--rd-bg);
	color: var(--rd-fg);
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.elsa-app__header,
.elsa-app__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 1rem;
	background: color-mix(in srgb, var(--rd-fg) 6%, var(--rd-bg));
	border-bottom: 1px solid color-mix(in srgb, var(--rd-fg) 14%, transparent);
}

.elsa-app__footer { border-bottom: 0; border-top: 1px solid color-mix(in srgb, var(--rd-fg) 14%, transparent); margin-top: auto; position: relative; }

.elsa-app__identity { display: flex; flex-direction: column; }
.elsa-app__title { font-weight: 600; }
.elsa-app__meta { font-size: 0.8em; color: var(--rd-muted); }
.elsa-app__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.elsa-app__toc {
	position: fixed;
	z-index: 40;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(22rem, 86vw);
	padding: 1.25rem;
	overflow: auto;
	background: var(--rd-bg);
	color: var(--rd-fg);
	box-shadow: 0 0 48px rgb(0 0 0 / 45%);
}

.elsa-app__toc h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.elsa-app__toc ol { margin: 0; padding-left: 1.2rem; }
.elsa-app__toc li { margin-bottom: 0.4rem; }
.elsa-app__toc a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.elsa-app__toc-note { font-size: 0.78em; color: var(--rd-muted); margin-top: 1.25rem; }
.elsa-app__toc .elsa-toc--l2 { padding-left: 1rem; }
.elsa-app__toc .elsa-toc--l3 { padding-left: 2rem; }
.elsa-app__toc .elsa-toc--l4 { padding-left: 3rem; }
.elsa-app__toc .elsa-toc--l5 { padding-left: 4rem; }
.elsa-app__toc .elsa-toc--l6 { padding-left: 5rem; }

.elsa-app__main { flex: 1 1 auto; }
.elsa-app__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--rd-fg) 12%, transparent); }
.elsa-app__progress span { display: block; height: 100%; width: 0; background: var(--rd-accent); transition: width 0.2s ease; }

/* ---------- Защита ---------- */
@media print {
	.elsa-reader__content,
	.elsa-reader__viewport,
	.elsa-app__main { display: none !important; }

	body::after {
		content: 'Печать этого материала отключена.';
		display: block;
		padding: 3rem;
		text-align: center;
		font-size: 1.2rem;
	}
}

.elsa-reader--paused .elsa-reader__content {
	filter: blur(9px);
}

@media (max-width: 782px) {
	.elsa-reader-pane {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-inline: 0;
		border-radius: 8px;
		box-sizing: border-box;
	}
	.elsa-reader-pane *,
	.elsa-app * { box-sizing: border-box; }
	.elsa-reader__bar { gap: 0.55rem; padding: 0.65rem; }
	.elsa-reader__title { min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; }
	.elsa-reader__tools { width: 100%; gap: 0.3rem; }
	.elsa-reader__tools .elsa-reader__btn,
	.elsa-reader__tools .elsa-reader__toc summary { min-height: 2.5rem; padding: 0.45rem 0.55rem; }
	.elsa-reader__toc { max-width: 100%; }
	.elsa-reader__toc ol { left: 0; right: auto; min-width: min(18rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
	.elsa-reader__viewport { height: min(62svh, 34rem); min-height: 18rem; padding: 1rem 0.85rem; }
	.elsa-reader__content { width: 100%; max-width: 100%; font-size: var(--rd-font); line-height: 1.65; text-align: left; overflow-wrap: anywhere; }
	.elsa-reader__foot { gap: 0.45rem; padding: 0.55rem; }
	.elsa-reader__foot .elsa-reader__btn--wide { min-width: 0; flex: 1 1 0; padding-inline: 0.35rem; }
	.elsa-reader__counter { flex: 0 0 auto; font-size: 0.8rem; }
	.elsa-reader__notice { padding: 0.55rem 0.7rem; line-height: 1.45; }
	.elsa-app { min-height: 100vh; min-height: 100dvh; height: 100dvh; overflow: hidden; }
	.elsa-app__header { align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.65rem; }
	.elsa-app__identity { min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; }
	.elsa-app__title { font-size: 0.95rem; line-height: 1.3; }
	.elsa-app__meta { font-size: 0.75rem; overflow-wrap: anywhere; }
	.elsa-app__tools { width: 100%; gap: 0.3rem; }
	.elsa-app__tools .elsa-reader__btn { min-width: 2.5rem; min-height: 2.5rem; padding: 0.35rem 0.5rem; }
	.elsa-app__main { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; }
	.elsa-reader__viewport--app { width: 100%; height: auto; min-height: 0; flex: 1 1 auto; padding: 1rem 0.85rem; }
	.elsa-app__footer { gap: 0.45rem; padding: 0.55rem 0.65rem max(0.75rem, env(safe-area-inset-bottom)); }
	.elsa-app__footer .elsa-reader__btn--wide { min-width: 0; flex: 1 1 0; min-height: 2.6rem; }
	.elsa-app__footer .elsa-reader__counter { min-width: 3.4rem; text-align: center; }
}

@media (max-width: 380px) {
	.elsa-reader__tools .elsa-reader__btn,
	.elsa-app__tools .elsa-reader__btn { font-size: 0.82rem; }
	.elsa-reader__foot .elsa-reader__btn--wide { font-size: 0.8rem; }
	.elsa-reader__viewport { padding-inline: 0.7rem; }
}


/* -------------------------------------------------------------------------
 * Поэзия: строки и строфы автора сохраняются как есть.
 * Убираем абзацный отступ и буквицу, добавляем воздух между строками и
 * строфами — так стихотворение читается, а не слипается в абзац.
 * ---------------------------------------------------------------------- */

.elsa-reader__content--verse {
	text-align: left;
}

.elsa-reader__content--verse p {
	text-indent: 0;
}

.elsa-reader__content--verse p:first-of-type::first-letter {
	font-size: inherit;
	line-height: inherit;
}

.elsa-reader__stanza {
	margin: 0 0 1.7em;
}

.elsa-reader__stanza:last-child {
	margin-bottom: 0;
}

.elsa-reader__line {
	display: block;
	line-height: 1.9;
	text-align: left;
	hyphens: none;
	overflow-wrap: break-word;
}

@media (max-width: 560px) {
	.elsa-reader__line { line-height: 1.8; }
	.elsa-reader__stanza { margin-bottom: 1.4em; }
}

/* -------------------------------------------------------------------------
 * Телефон: встроенный блок не показываем, чтобы не было прокрутки внутри
 * прокрутки. Основная кнопка «Читать» ведёт в полноэкранную читалку,
 * встроенный вариант остаётся для десктопа («Читать на странице»).
 * ---------------------------------------------------------------------- */

.elsa-read-mobile { display: none; }

@media (max-width: 600px) {
	.elsa-reader-pane { display: none !important; }
	.elsa-read-mobile { display: inline-flex; align-items: center; justify-content: center; }
	.elsa-read-desktop,
	.elsa-read-inline { display: none !important; }
}

/* Кнопки панели: текстовая подпись рядом со значком, чтобы назначение было
   понятно без наведения. */
.elsa-reader__btn--labeled { gap: 0.3em; white-space: nowrap; }

/* Основные кнопки на странице книги: тёмный текст на золоте (8.8:1).
   Белый на золоте давал 2.07:1 и не проходил WCAG AA. */
.elsa-actions .elsa-button:not(.elsa-button--ghost) {
	background: #e3aa45;
	border-color: #e3aa45;
	color: #171512;
}

.elsa-actions .elsa-button:not(.elsa-button--ghost):hover,
.elsa-actions .elsa-button:not(.elsa-button--ghost):focus-visible {
	background: #f0bb5c;
	border-color: #f0bb5c;
	color: #171512;
}