/* =====================================================================
 * REZUMKA V2 — РЕДАКЦИОННЫЕ БЛОКИ
 *
 * Перенос 34 блоков на фиолетовую палитру.
 *
 * КАК ЭТО СДЕЛАНО И ПОЧЕМУ ИМЕННО ТАК
 *
 * Я собирался переписывать блоки по одному и уже составил документ
 * с приоритетами. Но перед началом посмотрел, чем они вообще
 * окрашены, — и оказалось, что почти все построены на переменных
 * старой темы: --stamp, --line, --paper, --ink и ещё нескольких.
 *
 * Значит переписывать нечего. Достаточно подменить сами переменные
 * внутри новой темы — и все 34 блока переедут разом, включая те,
 * что я мог бы пропустить при ручном переносе.
 *
 * Это же снимает главный риск: разметка в 820 материалах не меняется
 * ни на символ, старые страницы работают как работали.
 *
 * ГДЕ ЗЕЛЁНЫЙ ОСТАЁТСЯ
 *
 * Он перестаёт быть фирменным, но остаётся семантикой успеха —
 * там, где означает «сделано, верно, безопасно»:
 *   • галочки в чек-листе с отметками,
 *   • врезка «так правильно»,
 *   • хорошая колонка в сравнении двух вариантов,
 *   • подтверждения в интерактивных блоках.
 * Это перечислено в ARTICLE-BLOCK-MIGRATION.md и здесь исполнено.
 * =================================================================== */

/* ---------------------------------------------- подмена переменных */
.v2 {
	/*
	 * Фирменный цвет старой темы становится фиолетовым.
	 * Отсюда переезжают: вывод статьи, «если читать некогда», шаги,
	 * готовая фраза, было→стало, крупное число, лестница уровней,
	 * лента сроков, плитки, подсказка, призыв, термин, полосы,
	 * кольцевая диаграмма и все интерактивные блоки.
	 */
	--stamp:       var(--v2-brand);
	--stamp-mid:   #8B84FF;
	--stamp-soft:  var(--v2-brand-dim);
	--stamp-pale:  var(--v2-brand-line);
	--stamp-dark:  var(--v2-brand-hover);
	--stamp-blot:  rgba(255, 255, 255, .32);
	--focus:       var(--v2-brand);

	/* Поверхности, текст и линии — из новой палитры */
	--paper:       var(--v2-surface);
	--paper-dim:   var(--v2-bg);
	--ink:         var(--v2-text);
	--ink-soft:    var(--v2-text-2);
	--line:        var(--v2-line);
	--radius:      var(--v2-r-card);
	--container:   var(--v2-container);

	/* Тень плоская, как во всей новой теме */
	--shadow-sheet: var(--v2-sh-card);
}

/* =====================================================================
 * ТЁМНАЯ ТЕМА
 *
 * Здесь важен вес селектора, а не только значения.
 *
 * Старая тема задаёт свои тёмные цвета правилом «html[data-theme=dark]
 * body». Оно весит больше, чем просто «.v2», — и хотя оба указывают
 * на один и тот же элемент, побеждало старое. В светлой теме всё было
 * фиолетовым, а стоило переключиться в тёмную, как блоки, конструктор
 * и письмо возвращались к зелёному.
 *
 * Поэтому здесь тот же вес плюс класс: «html[data-theme=dark] body.v2».
 * Значения берутся из переменных новой темы, объявленных в v2-core
 * для тёмного режима, — дублировать цвета в двух местах нельзя,
 * они разойдутся.
 *
 * Страниц с одной лишь новой оболочкой это не касается: там этот файл
 * не подключается вовсе, и содержимое остаётся прежним и в тёмной теме.
 * =================================================================== */
html[data-theme="dark"] body.v2,
html[data-theme="auto"] body.v2 {
	--stamp:       var(--v2-brand);
	--stamp-mid:   #9A93FF;
	--stamp-soft:  var(--v2-brand-dim);
	--stamp-pale:  var(--v2-brand-line);
	--stamp-dark:  var(--v2-brand-hover);
	--stamp-blot:  rgba(0, 0, 0, .28);
	--focus:       var(--v2-brand);

	--paper:       var(--v2-surface);
	--paper-dim:   var(--v2-bg);
	--ink:         var(--v2-text);
	--ink-soft:    var(--v2-text-2);
	--line:        var(--v2-line);
}

/*
 * Лист резюме остаётся светлым в любой теме — так было и раньше,
 * и это правильно: документ печатают на белой бумаге, и смотреть
 * на него нужно таким, каким он выйдет из принтера.
 */
html[data-theme="dark"] body.v2 .rz-sheet,
html[data-theme="auto"] body.v2 .rz-sheet {
	--paper:     #ffffff;
	--ink:       #17181C;
	--ink-soft:  #4b5563;
	--line:      #e3e6ee;

	/*
	 * ФИРМЕННЫЙ ЦВЕТ ТОЖЕ ЗАКРЕПЛЯЕМ СВЕТЛЫМ ВАРИАНТОМ.
	 *
	 * В тёмной теме фирменный светлеет — так и надо на тёмном фоне.
	 * Но лист остаётся белым в любой теме, и светлый фиолетовый
	 * на белом почти не читается: заголовки разделов и должность
	 * под именем бледнели до неразличимости.
	 *
	 * Лист — это документ, он всегда светлый, и цвета в нём должны
	 * быть теми же, что на бумаге.
	 */
	--stamp:      #635BFF;
	--stamp-dark: #574FF2;
	--stamp-mid:  #8B84FF;
	--stamp-soft: #C8C5FF;
	--stamp-pale: #D8D5FF;

	background:  #ffffff;
	color:       #17181C;
}

/* То же для листа письма: он такой же документ */
html[data-theme="dark"] body.v2 .rzl-sheet,
html[data-theme="auto"] body.v2 .rzl-sheet {
	--paper:      #ffffff;
	--ink:        #17181C;
	--ink-soft:   #4b5563;
	--line:       #e3e6ee;
	--stamp:      #635BFF;
	--stamp-dark: #574FF2;
	background:   #ffffff;
	color:        #17181C;
}

/* =====================================================================
 * ИСКЛЮЧЕНИЯ: ГДЕ ЗЕЛЁНЫЙ ОСТАЁТСЯ
 * =================================================================== */

/*
 * Чек-лист с отметками.
 *
 * Галочка означает «сделано» — это подтверждение, а не украшение.
 * Обычный чек-лист (без модификатора) остаётся перечнем и потому
 * получает фиолетовый маркер.
 */
.v2 .checklist--do li::before,
.v2 .checklist--do li::marker { color: var(--v2-ok); }
.v2 .checklist--do li::before { border-color: var(--v2-ok); }

/*
 * Врезка «так правильно».
 *
 * Единственный блок, который целиком остаётся зелёным: он и означает
 * «верно». Рядом с фиолетовым призывом смотрится не пёстро, а понятно.
 */
.v2 .ok {
	border-left-color: var(--v2-ok);
	background: var(--v2-ok-soft);
}
.v2 .ok strong,
.v2 .ok b { color: var(--v2-ok); }

/* Хорошая колонка в сравнении двух вариантов */
.v2 .vs__col--good { border-color: #B9E5CE; }
.v2 .vs__col--good .vs__t { color: var(--v2-ok); }
html[data-theme="dark"] .v2 .vs__col--good { border-color: #1E5C3F; }

/* Плохая колонка — янтарная: это предупреждение, а не ошибка */
.v2 .vs__col--bad { border-color: #F0D9A8; }
.v2 .vs__col--bad .vs__t { color: #B8862B; }
html[data-theme="dark"] .v2 .vs__col--bad { border-color: #5C4A1E; }

/*
 * Предупреждение остаётся янтарным.
 * Оно и было не зелёным: цвет там нёс смысл с самого начала.
 */
.v2 .warn { border-left-color: var(--v2-warn); }

/* =====================================================================
 * ТОЧЕЧНЫЕ ПРАВКИ ПОД НОВУЮ ТИПОГРАФИКУ
 *
 * Подмены переменных хватает для цвета, но у части блоков остались
 * приёмы старой темы: моноширинный шрифт в подписях и жирные рамки.
 * Здесь они приводятся к новому виду.
 * =================================================================== */

/* Подписи-ярлыки: тот же шрифт, что и везде, но разрядкой */
.v2 .tldr__t,
.v2 .phrase__label,
.v2 .stat__b,
.v2 .rz-scale__title {
	font-family: inherit;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .74rem;
	font-weight: 700;
	color: var(--v2-brand);
}

/* Вывод статьи: полоса слева тоньше и мягче */
.v2 .takeaway {
	border-left-width: 3px;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Карточки блоков — общая рамка и скругление новой темы */
.v2 .tldr,
.v2 .phrase,
.v2 .stat,
.v2 .tiles > *,
.v2 .talk,
.v2 .tip,
.v2 .rz-scale,
.v2 .tline {
	border-radius: var(--v2-r-card);
	border-color: var(--v2-line);
}

/* Таблицы: шапка на светлом фирменном, а не на сером */
.v2 .tbl-fig thead th,
.v2 .prose table thead th {
	background: var(--v2-brand-soft);
	color: var(--v2-text);
	border-color: var(--v2-line);
}
.v2 .tbl-fig figcaption { color: var(--v2-text-2); }

/* Призыв к действию — как на главной */
.v2 .cta-box {
	background: var(--v2-brand-soft);
	border: 1px solid var(--v2-brand-line);
	border-radius: var(--v2-r-lg);
	color: var(--v2-text);
}
.v2 .cta-box__title { color: var(--v2-text); }
.v2 .cta-box__text { color: var(--v2-text-2); }
.v2 .cta-box .btn--primary {
	background: var(--v2-brand);
	border-color: var(--v2-brand);
	color: #fff;
	border-radius: var(--v2-r-btn);
}
.v2 .cta-box .btn--primary:hover { background: var(--v2-brand-hover); }

/* Пояснение термина: подчёркивание фирменным, карточка тёмная в обеих темах */
.v2 .term { text-decoration-color: var(--v2-brand-line); }
.v2 .term__note { background: #17181C; color: #fff; border-radius: var(--v2-r-ctl); }

/* =====================================================================
 * ПЕЧАТЬ
 *
 * Цветные фоны в печати превращаются в серые пятна, а на чёрно-белом
 * принтере ещё и съедают текст. Оставляем рамки и убираем заливку.
 * =================================================================== */
@media print {
	.v2 .tldr,
	.v2 .ok,
	.v2 .warn,
	.v2 .cta-box,
	.v2 .phrase,
	.v2 .stat,
	.v2 .tbl-fig thead th {
		background: #fff !important;
		box-shadow: none !important;
	}
	.v2 .cta-box,
	.v2 .tiles,
	.v2 .rz-fab { display: none !important; }
}