/* ============================================================================
   Статьи-тренажёры ([el_trainer] + разметка build-article.php).
   Контракт разметки — навык interactive-article (SKILL.md §3).
   Только токены tokens.css; размеры в rem; обе темы; мобайл ≥356px.
   ========================================================================== */

/* ---------- Обложка и вводная (режим статьи) ------------------------------ */
.el-art-cover { float: left; width: min(22.5rem, 42%); margin: .25rem 1.5rem 1rem 0; }
.el-art-cover img { width: 100%; height: auto; border-radius: var(--r-card, 20px); box-shadow: var(--shadow-soft); }
.el-art-lead { font-size: 1.1875rem; line-height: 1.55; }
.el-art-note { clear: both; background: var(--band); border: 1px solid var(--hairline); border-radius: var(--r-card, 20px); padding: 1rem 1.25rem; margin: 1.25rem 0; }
.el-art-note p { margin: 0; }

/* Демо-ролик работы тренажёра: воспроизводится как gif (autoplay muted loop,
   без элементов управления). По центру страницы; кнопка «Открыть тренажёр» —
   по центру поверх видео. aspect-ratio держит место до загрузки метаданных. */
.el-art-demo { position: relative; clear: both; width: 100%; max-width: 34rem; margin: 1.5rem auto; }
.el-art-demo video { display: block; width: 100%; aspect-ratio: 1048 / 560; height: auto;
	border-radius: var(--r-card, 20px); border: 1px solid var(--hairline); box-shadow: var(--shadow); background: var(--band); }
.el-art-demo-cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	box-shadow: 0 8px 24px rgba(20, 14, 6, .5); }
.el-art-demo-cta:hover { transform: translate(-50%, -50%) scale(1.03); }
@media (max-width: 560px) {
	.el-art-cover { float: none; width: 100%; margin: 0 0 1rem; }
}

/* ---------- Содержание ----------------------------------------------------- */
.el-art-toc { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft); border-radius: var(--r-card, 20px); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.el-art-toc h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.el-art-toc ol { columns: 3; gap: 2rem; margin: 0; padding-left: 1.25rem; }
.el-art-toc li { margin: 0 0 .35rem; break-inside: avoid; font-size: .9375rem; }
.el-art-toc a { color: var(--body); text-decoration: none; }
.el-art-toc a:hover { color: var(--orange-deep); }
@media (max-width: 860px) { .el-art-toc ol { columns: 2; } }
@media (max-width: 560px) { .el-art-toc ol { columns: 1; } }

/* ---------- Секции тем и таблицы слов -------------------------------------- */
.el-vt { margin: 2.25rem 0; }
/* Отступ при переходе по якорю: цель — сама секция (id на .el-vt), а панель
   [el-tr-bar] липкая на десктопе и перекрывала бы заголовок. На мобилке панель
   статична (position:static ниже), overlay нет — отступ минимальный. */
.el-vt, .el-art-howto, .el-art-faq, .el-art-sources, .el-art-toc h2 { scroll-margin-top: 6rem; }
.el-vt-lead { color: var(--muted); margin: .25rem 0 1rem; }
.el-vt-img { margin: 0 0 1rem; }
.el-vt-img img { border-radius: var(--r-card, 20px); max-width: 100%; height: auto; box-shadow: var(--shadow-soft); }

.el-vt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card, 20px); border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--shadow-soft); }
.el-vt-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 1.0625rem; }
.el-vt-table thead th { text-align: left; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--band); padding: .65rem .9rem; border-bottom: 1px solid var(--hairline); }
.el-vt-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.el-vt-table tbody tr:last-child td { border-bottom: 0; }
.el-vt-table td:first-child { font-weight: 700; white-space: nowrap; }
.el-vt-table a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--orange); }
.el-vt-table a:hover { color: var(--orange-deep); }

.el-vt-acc { font-family: 'JetBrains Mono', monospace; font-size: .75rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem; }
.el-vt-t { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--body); white-space: nowrap; }

/* Кнопка озвучки: lucide volume-2 через mask, круг ≥44px тап-таргета */
.el-vt-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; margin: 0 .35rem; padding: 0; position: relative;
	border: 1px solid var(--hairline); border-radius: 50%;
	background: var(--band); cursor: pointer; vertical-align: middle;
	transition: background .15s, border-color .15s; }
.el-vt-play::before { content: ""; width: 1rem; height: 1rem; background: var(--orange-deep);
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.el-vt-play::after { content: ""; position: absolute; inset: -0.4rem; } /* тап-таргет ≥44px */
.el-vt-play:hover { background: var(--p-yellow); border-color: var(--orange); }
.el-vt-play:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.el-vt-play.is-playing { background: var(--orange); border-color: var(--orange); }
.el-vt-play.is-playing::before { background: #fff; }

/* ---------- FAQ и источники ------------------------------------------------ */
.el-faq { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; margin: 0 0 .6rem; box-shadow: var(--shadow-soft); }
.el-faq summary { cursor: pointer; font-weight: 700; padding: .85rem 1.1rem; list-style: none; position: relative; }
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--orange-deep); font-weight: 800; }
.el-faq[open] summary::after { content: "–"; }
.el-faq-a { padding: 0 1.1rem .9rem; color: var(--body); }
.el-art-sources ul { padding-left: 1.25rem; }
.el-art-sources a { color: var(--orange-deep); }

/* ---------- Мета-панель (шорткод) ------------------------------------------ */
.el-tr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
	background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft);
	border-radius: var(--r-card, 20px); padding: .75rem 1.1rem; margin: 0 0 1.5rem;
	position: sticky; top: .5rem; z-index: 20; }
.el-tr-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.el-tr-stat { font-size: .875rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.el-tr-switch { display: flex; background: var(--band); border: 1px solid var(--hairline); border-radius: var(--r-pill, 999px); padding: .2rem; }
.el-tr-mode { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .9375rem; font-weight: 700;
	padding: .45rem .9rem; border-radius: var(--r-pill, 999px); cursor: pointer; min-height: 2.4rem;
	transition: background .15s, color .15s; }
.el-tr-mode.is-on { background: var(--orange); color: #fff; }
/* фон на hover/focus задаём явно — иначе на светлой теме протекает тёмный
   button:hover из GeneratePress (та же нейтрализация, что у .tt/.burger в base.css) */
.el-tr-mode:not(.is-on):hover, .el-tr-mode:not(.is-on):focus { color: var(--ink); background: var(--band); }
.el-tr-mode:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Режим «Тренажёр» ------------------------------------------------ */
/* Скрываем контент статьи, кроме заголовка, даты, панели и тренажёра */
body.el-tr-on article > *:not(h1):not(.el-updated):not(.el-tr-bar):not(#el-trainer) { display: none; }
body.el-tr-on #el-trainer { display: block; }

/* Сетка карточек тем */
.el-tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; margin: .5rem 0 2rem; }
.el-tc { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--card-border);
	background: var(--surface); border-radius: var(--r-card, 20px); box-shadow: var(--shadow-soft);
	padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
	transition: box-shadow .15s, border-color .15s; }
.el-tc:hover { box-shadow: var(--shadow); border-color: var(--hairline); }
.el-tc:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.el-tc-img { aspect-ratio: 16 / 9; background: var(--band); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; overflow: hidden; }
.el-tc-img img { width: 100%; height: 100%; object-fit: cover; }
.el-tc-body { padding: .8rem .95rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
/* Заголовок карточки темы: родительская тема разрешает рвать слова
   (word-wrap: break-word), и на узком экране «Вопросительные» ломалось как
   «Вопросительны/е». Запрещаем разрыв посреди слова, но разрешаем перенос по
   слогам — <html lang="ru-RU"> уже стоит, браузер расставит дефисы сам. */
.el-tc-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
	overflow-wrap: normal; word-break: normal; hyphens: auto; }
.el-tc-sub { font-size: .8125rem; color: var(--muted); margin-top: auto; }
/* Бейдж поверх картинки карточки. Непройденные темы бейджа не имеют (п.4, trainer.js).
   Насыщенный фон + белый текст + тень — чтобы не сливаться со светлой картинкой
   (пастельные пары сливались на светлой теме). --orange/--orange-deep/--success
   не переопределяются в тёмной теме, поэтому одинаково читаемы в обеих. */
.el-tc-badge { position: absolute; top: .6rem; right: .6rem; font-size: .75rem; font-weight: 700;
	padding: .28rem .62rem; border-radius: var(--r-pill, 999px); color: #fff;
	box-shadow: 0 2px 8px rgba(20, 14, 6, .35); }
.el-tc-badge.done { background: var(--success); }
.el-tc-badge.due { background: var(--orange); }
.el-tc-badge.progress { background: var(--orange-deep); }

/* Экран темы */
.el-tt-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; flex-wrap: wrap; }
.el-tt-back { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 700;
	border-radius: var(--r-pill, 999px); padding: .5rem 1rem; cursor: pointer; min-height: 2.75rem; transition: background .15s; }
/* color обязателен: у GeneratePress button:hover красит текст в белый, и на светлом
   фоне --band надпись «← Все темы» пропадала (та же нейтрализация, что у .tt/.burger). */
.el-tt-back:hover, .el-tt-back:focus { background: var(--band); color: var(--ink); }
.el-tt-back:focus-visible, .el-tt-ctl :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.el-tt-title { font-size: 1.375rem; font-weight: 800; margin: 0; }

.el-tt-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: var(--band);
	border: 1px solid var(--hairline); border-radius: var(--r-card, 20px); padding: .7rem .9rem; margin: 0 0 1rem;
	position: sticky; top: 4.4rem; z-index: 15; }
.el-tt-play { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: var(--orange); color: #fff;
	font: inherit; font-size: .9375rem; font-weight: 700; border-radius: var(--r-pill, 999px);
	padding: .55rem 1.1rem; min-height: 2.75rem; cursor: pointer; transition: background .15s; }
.el-tt-play:hover, .el-tt-play:focus { background: var(--orange-deep); }
.el-tt-chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 700; color: var(--body);
	cursor: pointer; min-height: 2.75rem; padding: 0 .25rem; }
.el-tt-chk input { accent-color: var(--orange); width: 1.05rem; height: 1.05rem; }
.el-tt-bar { flex-basis: 100%; height: .375rem; border-radius: var(--r-pill, 999px); background: var(--hairline); overflow: hidden; }
.el-tt-bar i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: inherit; transition: width .2s; }

/* Регулятор громкости озвучки (иконка-мьют + ползунок). Заливка ползунка —
   через inline --vol (проценты), чтобы не перерисовывать разметку на каждый шаг. */
.el-tt-vol { display: inline-flex; align-items: center; gap: .4rem; }
.el-tt-vol-ic { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
	border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--muted);
	cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.el-tt-vol-ic svg { width: 1.05rem; height: 1.05rem; display: block; }
.el-tt-vol-ic:hover, .el-tt-vol-ic:focus { color: var(--orange-deep); border-color: var(--orange); background: var(--band); }
.el-tt-vol-ic:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.el-tt-vol-range { -webkit-appearance: none; appearance: none; width: 6rem; height: .375rem; border-radius: var(--r-pill, 999px);
	background: linear-gradient(to right, var(--orange) var(--vol, 100%), var(--hairline) var(--vol, 100%));
	cursor: pointer; margin: 0; }
.el-tt-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--orange); border: 2px solid var(--surface); box-shadow: var(--shadow-soft); cursor: pointer; }
.el-tt-vol-range::-moz-range-thumb { width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--orange); border: 2px solid var(--surface); box-shadow: var(--shadow-soft); cursor: pointer; }
.el-tt-vol-range::-moz-range-track { background: transparent; }
.el-tt-vol-range:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Строки слов в тренажёре — та же таблица, плюс состояния */
#el-trainer .el-vt-wrap { margin-bottom: 1.25rem; }
#el-trainer tr.is-current td { background: var(--p-yellow); }
#el-trainer tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

/* Скрытие для active recall (режимы-радио: Всё | Скрыть перевод | Скрыть слова).
   Тап по строке (или завершение озвучки в автоплее) открывает её — tr.is-open.
   «Скрыть слова» прячет и транскрипцию (она подсказывает слово), но кнопки
   озвучки остаются доступными. */
#el-trainer.hide-ru tbody tr:not(.is-open) td:nth-child(3),
#el-trainer.hide-en tbody tr:not(.is-open) td:first-child,
#el-trainer.hide-en tbody tr:not(.is-open) .el-vt-t,
#el-trainer.hide-en tbody tr:not(.is-open) .el-vt-acc { filter: blur(.4rem); opacity: .5; cursor: pointer; transition: filter .15s, opacity .15s; }

/* Сегмент-контролы экрана темы (режим заучивания, акцент US/GB) */
.el-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill, 999px); padding: .15rem; }
.el-seg-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8125rem; font-weight: 700;
	padding: .35rem .7rem; border-radius: var(--r-pill, 999px); cursor: pointer; min-height: 2.1rem; transition: background .15s, color .15s; }
.el-seg-btn.is-on { background: var(--orange); color: #fff; }
.el-seg-btn:not(.is-on):hover, .el-seg-btn:not(.is-on):focus { color: var(--ink); background: var(--band); }
.el-seg-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Кнопка-подсказка «?» и поповер про акценты */
.el-tt-help { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface);
	color: var(--muted); font-weight: 800; font-size: .9375rem; line-height: 1; cursor: pointer; position: relative; }
.el-tt-help::after { content: ""; position: absolute; inset: -0.4rem; } /* тап-таргет ≥44px */
.el-tt-help:hover, .el-tt-help:focus { color: var(--orange-deep); border-color: var(--orange); background: var(--band); }
.el-tt-pop { flex-basis: 100%; font-size: .875rem; color: var(--body); background: var(--surface);
	border: 1px solid var(--hairline); border-radius: 12px; padding: .6rem .8rem; }

/* Счётчик «Прослушано X из Y» и текстовые кнопки */
.el-tt-count { font-size: .875rem; font-weight: 700; color: var(--muted); }
.el-tt-count.is-done { color: var(--success); }
.el-tt-link { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .875rem; font-weight: 700;
	cursor: pointer; text-decoration: underline dashed; text-underline-offset: 3px; padding: .35rem .25rem; min-height: 2.1rem; }
.el-tt-link:hover, .el-tt-link:focus { color: var(--orange-deep); background: transparent; }
.el-tt-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Шапка тренажёра: общий прогресс (зелёный — отличается от прогресса тем) */
.el-tg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
	background: var(--band); border: 1px solid var(--hairline); border-radius: var(--r-card, 20px);
	padding: .7rem .9rem; margin: 0 0 1rem; }
.el-tg-progress { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 16rem; }
.el-tg-plabel { font-size: .875rem; font-weight: 700; color: var(--body); }
.el-tg-bar { flex-basis: auto; }
.el-tg-bar i { background: var(--success); }
.el-tg-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Инструкция «как пользоваться» (в статье и клоном в тренажёре) */
.el-art-howto { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft);
	border-radius: var(--r-card, 20px); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.el-art-howto h2 { margin-top: 0; }
.el-art-howto ol { padding-left: 1.4rem; }
.el-art-howto li { margin-bottom: .5rem; }
#trener-howto { margin-top: 2rem; }

/* Кнопка-CTA «Открыть тренажёр» — самостоятельный класс (используется как оверлей
   поверх демо-видео, .el-art-demo-cta; ранее была заскоплена на .el-art-cta). */
.el-art-cta { margin: 1rem 0 1.5rem; }
.btn-trener { display: inline-flex; align-items: center; gap: .5rem; background: var(--orange); color: #fff;
	font-weight: 700; font-size: 1.0625rem; border-radius: var(--r-pill, 999px); padding: .8rem 1.5rem;
	text-decoration: none; transition: background .15s, transform .15s; min-height: 2.75rem; }
.btn-trener:hover { background: var(--orange-deep); color: #fff; }

@media (max-width: 560px) {
	.el-tr-bar { position: static; }
	.el-vt, .el-art-howto, .el-art-faq, .el-art-sources, .el-art-toc h2 { scroll-margin-top: 1rem; }
	.el-tt-ctl { top: .5rem; }
	.el-art-toc { padding: 1rem; }
	.el-vt-table { font-size: 1rem; }
	.el-vt-table td { padding: .5rem .45rem; }
	.el-vt-table thead th { padding: .5rem .45rem; }
	/* Узкий экран: таблица слов раскрывается на всю ширину экрана (минус поля
	   контентной колонки), us/gb идут в столбик, слово и транскрипция могут
	   переноситься. Без этого на 390 px таблице нужно 405 px против 356 px
	   контейнера — колонка «Перевод» уезжала за правый край, и прочитать
	   перевод можно было только горизонтальным свайпом по каждой строке.
	   Замерено в мобильной эмуляции: стало 390/390, обрезанных строк нет.
	   Скролл у .el-vt-wrap остаётся запасом для совсем узких экранов. */
	.el-vt-wrap { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: 0; border-right: 0; }
	.el-vt-g { display: block; }
	.el-vt-t { white-space: normal; }
	.el-vt-table td:first-child { white-space: normal; }
	.el-tg { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; }
	.el-tc-img { aspect-ratio: 16 / 10; }

	/* В тренажёре строка — стеком (слово + перевод слева, озвучка справа):
	   горизонтальный скролл убивает механику «скрыть перевод». В режиме статьи
	   таблица остаётся классической со скроллом. */
	#el-trainer thead { display: none; }
	#el-trainer .el-vt-table, #el-trainer tbody { display: block; }
	#el-trainer tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .7rem; align-items: center; padding: .55rem .8rem; border-bottom: 1px solid var(--hairline); }
	#el-trainer tbody tr:last-child { border-bottom: 0; }
	#el-trainer tbody td { display: block; border: 0; padding: 0; }
	#el-trainer td:first-child { grid-column: 1; grid-row: 1; white-space: normal; }
	#el-trainer td.el-vt-tr { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
	#el-trainer td:last-child { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .9375rem; }
	#el-trainer tr.is-current { background: var(--p-yellow); }
	#el-trainer tr.is-current td { background: none; box-shadow: none; }
}