/* =====================================================================
 * REZUMKA V2 — ОСНОВА
 *
 * Токены, сетка, типографика, кнопки, шапка, подвал.
 * Всё по ТЗ: палитра, отступы, радиусы, тени взяты оттуда дословно.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА style.css
 *
 * В style.css лежат стили 34 редакционных блоков, каталога, статей
 * и всего остального — 1800 правил, на которых держатся 820 материалов.
 * Переписать всё разом означает сломать сайт целиком и чинить вслепую.
 *
 * Поэтому новая тема въезжает по частям. Этот файл задаёт новый язык
 * и покрывает шапку, подвал и главную. Старые страницы пока живут
 * на прежних стилях: они не ломаются, потому что новые правила
 * ограничены своими классами с приставкой v2.
 *
 * Порядок дальше: блоки статей → статья → образец → каталог →
 * инструменты. По одному куску за выпуск, с проверкой.
 * =================================================================== */

/* ---------------------------------------------------------- токены */
:root {
	/* Фирменный цвет и его оттенки */
	--v2-brand:        #635BFF;
	--v2-brand-2:      #6C63FF;
	--v2-brand-hover:  #574FF2;
	--v2-brand-active: #4941E6;
	--v2-brand-soft:   #F0EFFF;
	--v2-brand-line:   #D8D5FF;
	--v2-brand-dim:    #C8C5FF;

	/* Поверхности и текст */
	--v2-bg:        #F7F8FC;
	--v2-surface:   #FFFFFF;
	--v2-text:      #17181C;
	--v2-text-2:    #6B7280;
	--v2-text-3:    #9CA3AF;
	--v2-line:      #E6E8F0;
	--v2-line-hover:#D4D0FF;

	/*
	 * Зелёный — не фирменный цвет.
	 * Только успех, галочки, подтверждения. В ТЗ это сказано дважды,
	 * и это же главное отличие от старой темы, где зелёный был всем.
	 */
	--v2-ok:        #16A36A;
	--v2-ok-soft:   #EAF8F1;
	--v2-warn:      #F59E0B;
	--v2-err:       #E5484D;

	/* Отступы — шкала из ТЗ, без промежуточных значений */
	--v2-s1:  4px;  --v2-s2:  8px;  --v2-s3: 12px; --v2-s4: 16px;
	--v2-s5: 24px;  --v2-s6: 32px;  --v2-s7: 40px; --v2-s8: 48px;
	--v2-s9: 64px;  --v2-s10:80px;  --v2-s11:96px;

	/* Радиусы */
	--v2-r-ctl:  8px;
	--v2-r-btn:  10px;
	--v2-r-card: 14px;
	--v2-r-lg:   18px;
	--v2-r-xl:   22px;

	/* Тени: лёгкие, без тяжёлого материала */
	--v2-sh-card:  0 1px 2px rgba(17, 24, 39, .03), 0 8px 24px rgba(17, 24, 39, .05);
	--v2-sh-float: 0 12px 32px rgba(31, 35, 48, .12);

	--v2-container: 1240px;
	--v2-gap: 24px;
}

/*
 * Тёмная тема.
 *
 * Значения из ТЗ. Главное правило оттуда: тёмная не должна
 * превращаться в зелёную, бренд остаётся фиолетовым.
 */
html[data-theme="dark"] {
	--v2-bg:        #10121A;
	--v2-surface:   #171A23;
	--v2-text:      #F5F7FB;
	--v2-text-2:    #A8AFBF;
	--v2-text-3:    #7C8494;
	--v2-line:      #2A2E3B;
	--v2-line-hover:#3A3F52;

	--v2-brand:        #756DFF;
	--v2-brand-hover:  #817AFF;
	--v2-brand-active: #635BFF;
	--v2-brand-soft:   #24213E;
	--v2-brand-line:   #3B3563;

	--v2-ok-soft:   #10241B;
	--v2-sh-card:   0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .28);
	--v2-sh-float:  0 12px 32px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------- шрифт */
/*
 * Inter, переменное начертание, только локально.
 *
 * Никаких сторонних загрузок: подключение через чужой домен — это
 * лишний запрос к чужому серверу на каждой странице и передача ему
 * данных о посетителе. Файл лежит в теме.
 *
 * Два набора: кириллица 19 КБ и латиница 48 КБ. Браузер скачает
 * только тот, который понадобится, — за это отвечает unicode-range.
 * Лицензия SIL Open Font License, файл лежит рядом со шрифтом.
 */
@font-face {
	font-family: "Inter v2";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Inter v2";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

/* ------------------------------------------------------- типографика */
/*
 * Оболочка на непеределанных страницах.
 *
 * Там тело помечено классом v2-shell: шапка, подвал и советчик
 * в новом виде, а содержимое остаётся прежним. Поэтому шрифт
 * и цвета задаются самим элементам оболочки, а не всей странице.
 */
.v2-shell .v2-header,
.v2-shell .v2-footer,
.v2-shell .rz-fab,
.v2-shell .rz-tips,
.v2-shell .ckbar {
	font-family: "Inter v2", Inter, Arial, sans-serif;
}

.v2 {
	font-family: "Inter v2", Inter, Arial, sans-serif;
	color: var(--v2-text);
	background: var(--v2-bg);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/*
 * Заголовки страницы. Лист резюме исключён намеренно.
 *
 * Лист — это документ внутри страницы, и его заголовки принадлежат
 * ему, а не нам. Когда правило красило и их, в тёмной теме они
 * становились светлыми — на белом листе получалось белое по белому.
 *
 * Исключение записано здесь, а не перекрыто в другом файле:
 * так видно сразу, что случай особый.
 */
.v2 h1:not(.rz-sheet h1), .v2 h2:not(.rz-sheet h2),
.v2 h3:not(.rz-sheet h3), .v2 h4:not(.rz-sheet h4) {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--v2-text);
}
.v2 h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.v2 h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.v2 h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.v2 p  { margin: 0; }

.v2-lead { font-size: 1.06rem; color: var(--v2-text-2); }
.v2-muted { color: var(--v2-text-2); }
.v2-brand-text { color: var(--v2-brand); }

/* ------------------------------------------------------------ сетка */
.v2-container {
	max-width: var(--v2-container);
	margin: 0 auto;
	padding-left: var(--v2-s5);
	padding-right: var(--v2-s5);
}
.v2-section { padding-block: var(--v2-s10); }
.v2-section--tight { padding-block: var(--v2-s8); }

.v2-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--v2-s7);
}
.v2-head p { margin-top: var(--v2-s3); }

.v2-grid { display: grid; gap: var(--v2-gap); }
.v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v2-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------------------------------------------------------- карточки */
.v2-card {
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	padding: var(--v2-s5);
	box-shadow: var(--v2-sh-card);
}
.v2-card--lg { border-radius: var(--v2-r-lg); padding: var(--v2-s6); }
.v2-card--link { display: block; text-decoration: none; color: inherit; transition: border-color .16s ease, transform .16s ease; }
.v2-card--link:hover { border-color: var(--v2-line-hover); transform: translateY(-2px); }

/* ----------------------------------------------------------- кнопки */
.v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--v2-s2);
	min-height: 48px;
	padding: 0 var(--v2-s5);
	border: 1px solid transparent;
	border-radius: var(--v2-r-btn);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, transform .06s ease;
}
.v2-btn--primary { background: var(--v2-brand); color: #fff; }
.v2-btn--primary:hover { background: var(--v2-brand-hover); }
.v2-btn--primary:active { background: var(--v2-brand-active); transform: translateY(1px); }
.v2-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(99, 91, 255, .18); }
.v2-btn--primary[disabled] { background: var(--v2-brand-dim); color: rgba(255, 255, 255, .85); cursor: default; }

.v2-btn--outline {
	background: var(--v2-surface);
	border-color: var(--v2-brand-line);
	color: var(--v2-brand);
}
.v2-btn--outline:hover { background: #F5F4FF; border-color: var(--v2-brand); }
.v2-btn--outline:active { background: #ECEAFF; }
html[data-theme="dark"] .v2-btn--outline:hover { background: var(--v2-brand-soft); }

.v2-btn--sm { min-height: 40px; padding: 0 var(--v2-s4); font-size: .94rem; }

/* Ссылка со стрелкой: стрелка уезжает вправо при наведении */
.v2-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--v2-brand);
	text-decoration: none;
	font-weight: 600;
}
.v2-arrow svg { transition: transform .16s ease; }
.v2-arrow:hover { color: var(--v2-brand-hover); }
.v2-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------ шапка */
.v2-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--v2-line);
}
html[data-theme="dark"] .v2-header { background: rgba(16, 18, 26, .94); }

.v2-header__in {
	display: flex;
	align-items: center;
	gap: var(--v2-s5);
	min-height: 74px;
}
.v2-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
/*
 * Логотип: 42 точки в шапке.
 *
 * Было 34 — на широком экране знак терялся среди пунктов меню.
 * Верхний предел здесь — высота шапки минус поля, поэтому 42
 * это максимум, при котором ничего не жмётся.
 */
.v2-logo img { height: 52px; width: auto; display: block; }
@media (max-width: 900px) {
	.v2-logo img { height: 44px; }
}

.v2-nav { display: flex; align-items: center; gap: var(--v2-s5); margin-left: auto; }
.v2-nav a {
	color: var(--v2-text);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	white-space: nowrap;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.v2-nav a:hover { color: var(--v2-brand); }
.v2-nav a[aria-current="page"] { color: var(--v2-brand); border-bottom-color: var(--v2-brand); }

.v2-header__side { display: flex; align-items: center; gap: var(--v2-s3); flex: 0 0 auto; }

/* Переключатель темы: три положения, как в ТЗ */
.v2-theme {
	display: inline-flex;
	background: var(--v2-brand-soft);
	border-radius: 9999px;
	padding: 3px;
}
.v2-theme button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--v2-text-2);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}
.v2-theme button:hover { color: var(--v2-brand); }
.v2-theme button[aria-pressed="true"] { background: var(--v2-surface); color: var(--v2-brand); box-shadow: var(--v2-sh-card); }
.v2-theme svg { width: 17px; height: 17px; }

/* Кнопка меню на телефоне */
.v2-burger {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-ctl);
	background: var(--v2-surface);
	color: var(--v2-text);
	cursor: pointer;
}

/* ------------------------------------------------------------ подвал */
.v2-footer {
	background: var(--v2-surface);
	border-top: 1px solid var(--v2-line);
	padding-block: var(--v2-s10) var(--v2-s6);
	margin-top: var(--v2-s11);
}
.v2-footer__top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--v2-s7);
}
.v2-footer__about .v2-logo img { height: 40px; }
.v2-footer__about p { color: var(--v2-text-2); font-size: .93rem; margin-top: var(--v2-s3); }
.v2-footer h4 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3); margin-bottom: var(--v2-s3); }
.v2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-s2); }
.v2-footer a { color: var(--v2-text-2); text-decoration: none; font-size: .93rem; }
.v2-footer a:hover { color: var(--v2-brand); }
.v2-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	/*
	 * Пункты идут подряд с обычным промежутком, а не расталкиваются
	 * по всей ширине: строка из трёх коротких надписей, растянутая
	 * на 1240 точек, читается как три оторванных куска.
	 */
	gap: var(--v2-s2) var(--v2-s5);
	align-items: center;
	margin-top: var(--v2-s8);
	padding-top: var(--v2-s5);
	border-top: 1px solid var(--v2-line);
	color: var(--v2-text-3);
	font-size: .88rem;
}
.v2-social { display: flex; gap: var(--v2-s2); }
.v2-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
}
.v2-social a:hover { background: var(--v2-brand); color: #fff; }
.v2-social svg { width: 18px; height: 18px; }

/* ------------------------------------------------------- отзывчивость */
@media (max-width: 1100px) {
	.v2-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v2-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-footer__top { grid-template-columns: 1fr 1fr; gap: var(--v2-s6); }

	/*
	 * Призыв в одну колонку: в 340 точек справа лист перестаёт
	 * помещаться рядом с заголовком, и текст ломается на слоги.
	 */
	.v2-final--art { grid-template-columns: 1fr; text-align: center; }
	.v2-final__art { justify-self: center; }
}
@media (max-width: 900px) {
	.v2-nav { display: none; }
	.v2-burger { display: grid; place-items: center; }
	.v2-section { padding-block: var(--v2-s8); }
}
@media (max-width: 620px) {
	.v2-grid--2, .v2-grid--3, .v2-grid--4, .v2-grid--5, .v2-grid--6 { grid-template-columns: 1fr; }
	.v2-footer__top { grid-template-columns: 1fr; }
	.v2-container { padding-left: var(--v2-s4); padding-right: var(--v2-s4); }
	.v2-btn { width: 100%; }
	.v2-btn--inline { width: auto; }

	/* Лист в призыве по ширине экрана, а не в жёстких 340 точках */
	.v2-final__art { width: min(340px, 100%); }
}

/* =====================================================================
 * ПЕРЕКРЫТИЕ ГЛОБАЛЬНЫХ ПРАВИЛ СТАРОЙ ТЕМЫ
 *
 * style.css задаёт цвет ссылок, обводку фокуса и размер шрифта
 * на уровне всей страницы — через переменные прежней зелёной темы.
 * На страницах v2 они дотягиваются до всего, что не покрыто нашими
 * классами: ссылок в тексте, кнопок в чужих блоках, обводки при
 * переходе по клавише.
 *
 * Здесь эти правила переопределяются, но только внутри .v2 —
 * старые страницы остаются как были.
 * =================================================================== */
.v2 a { color: var(--v2-brand); text-underline-offset: 3px; }
.v2 a:hover { color: var(--v2-brand-hover); }

/* Ссылки, которые ссылками не выглядят, цвет не наследуют */
.v2 a.v2-card--link,
.v2 a.v2-tpl,
.v2 a.v2-tool,
.v2 a.v2-post,
.v2 a.v2-case,
.v2 a.v2-pill,
.v2 a.v2-logo { color: inherit; }
.v2 a.v2-btn--primary { color: #fff; }
.v2 a.v2-btn--outline { color: var(--v2-brand); }
/*
 * Плитка «все профессии» — исключение из исключения.
 *
 * Правило выше гасит цвет у плиток, чтобы заголовки внутри карточек
 * не синели. Но эта плитка как раз должна выглядеть ссылкой, и вес
 * у неё должен быть не меньше, иначе цвет не доедет.
 */
.v2 a.v2-pill--all { color: var(--v2-brand); }
.v2 a.v2-pill--all:hover { color: #fff; }

/* Обводка при переходе по клавише — фирменная, а не зелёная */
.v2 :focus-visible {
	outline: 3px solid var(--v2-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * Размер шрифта.
 *
 * body в старой теме задаёт 17 точек и свою гарнитуру. Наши правила
 * висят на .v2, а это тот же элемент, что и body, — но у селектора
 * с классом вес больше, поэтому наше значение побеждает. Оставляю
 * это замечание, чтобы через полгода не искать заново.
 */


/* =====================================================================
 * ОБЩИЕ ЭЛЕМЕНТЫ ДЛЯ ВСЕХ СТРАНИЦ
 *
 * Плитки и бейдж лежали в стилях главной, а нужны и на образце
 * профессии. Стили главной там не грузятся — на странице образца
 * плитки выглядели голыми ссылками.
 *
 * Правило простое: то, что встречается больше чем на одной странице,
 * живёт в основе. Проверка сверяет классы шаблона с загружаемыми
 * файлами и ловит такие расхождения до сборки.
 * =================================================================== */
.v2-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--v2-s2);
	background: var(--v2-surface);
	border: 1px solid var(--v2-brand-line);
	border-radius: 9999px;
	padding: 7px 15px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--v2-brand);
}
.v2-badge svg { width: 15px; height: 15px; }
.v2-pills { display: flex; flex-wrap: wrap; gap: var(--v2-s2); margin-top: var(--v2-s4); }
.v2-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	padding: 7px 14px;
	background: var(--v2-surface);
	color: var(--v2-text);
	text-decoration: none;
	font-size: .9rem;
}
.v2-pill {
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.v2-pill:hover { border-color: var(--v2-brand); color: var(--v2-brand); }
.v2-pill:hover { transform: translateY(-2px); }
.v2-pill:active { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }
.v2-pills--center { justify-content: center; gap: var(--v2-s3); }
.v2-pill--all {
	border-color: var(--v2-brand);
	color: var(--v2-brand);
	font-weight: 600;
}
.v2-pill--all:hover { background: var(--v2-brand); color: #fff; }
.v2-pill--ico { padding: 9px 16px 9px 12px; gap: 8px; font-weight: 500; }
.v2-pill--ico svg { width: 17px; height: 17px; color: var(--v2-brand); flex: 0 0 auto; }
.v2-pill--ico:hover { background: var(--v2-brand-soft); border-color: var(--v2-brand-line); }
.v2-pill--ico:hover svg { color: var(--v2-brand-hover); }


/* -------------------------------------------------- хлебные крошки
   Нужны на образце, в каталоге и в статье — значит место им в основе.
   Лежали в стилях образца, и на статье строка была бы без оформления. */
.v2-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v2-s2);
	padding-top: var(--v2-s5);
	font-size: .88rem;
	color: var(--v2-text-3);
}
.v2-crumbs a { color: var(--v2-text-2); text-decoration: none; }
.v2-crumbs a:hover { color: var(--v2-brand); }


/* ------------------------------------------------ финальный призыв
   Стоит на главной, в каталоге и на образце — значит общий.
   Лежал в стилях главной, и в каталоге блок был бы без оформления. */
.v2-final {
	border-radius: var(--v2-r-xl);
	background: linear-gradient(135deg, #635BFF, #756DFF);
	color: #fff;
	padding: var(--v2-s9) var(--v2-s8);
	text-align: center;
}
.v2-final { padding: var(--v2-s7) var(--v2-s5); }
.v2-final h2 { color: #fff; }
.v2-final p { color: rgba(255, 255, 255, .85); margin-top: var(--v2-s3); }
.v2-final .v2-btn { margin-top: var(--v2-s6); background: #fff; color: var(--v2-brand); }
.v2-final .v2-btn:hover { background: #F2F1FF; }
.v2-final__note { margin-top: var(--v2-s4); font-size: .88rem; color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------- вопросы
 *
 * Переехали сюда из файла главной: тот же блок теперь стоит
 * и на страницах отраслей. Правило про два места и общий файл
 * писано кровью — оставь его в v2-home.css, и на отрасли
 * приехала бы голая гармошка без оформления.
 *
 * Гармошкой, а не открытым списком. Содержимое остаётся в разметке
 * и доступно по нажатию, поэтому разметке вопросов это не мешает:
 * запрещено прятать ответ так, чтобы его вовсе не было на странице.
 */
/* --------------------------------------------------------- вопросы */
.v2-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-s3) var(--v2-gap); }
.v2-faq details {
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	padding: var(--v2-s4) var(--v2-s5);
}
.v2-faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v2-s4);
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after {
	content: "+";
	color: var(--v2-brand);
	font-size: 1.3rem;
	line-height: 1;
	flex: 0 0 auto;
}
.v2-faq details[open] summary::after { content: "−"; }
.v2-faq p { color: var(--v2-text-2); margin-top: var(--v2-s3); }


/* ---------------------------------------------- призыв с картинкой
   Отдельный вид: тот же блок стоит в ленте и в каталоге профессий,
   и правка без пометки поехала бы во все три страницы. */
.v2-final--art {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--v2-s7);
	align-items: center;
	text-align: left;
}
.v2-final__art {
	width: 340px;
	height: auto;
	/* Лист на прозрачном фоне: вписываем целиком, не подкладывая белое */
	object-fit: contain;
	justify-self: end;
}
/* Обёртка текста: своих правил не требует, но объявлена, чтобы проверка
   видела её на месте и не считала потерянной. */
.v2-final__text { min-width: 0; }



/* ------------------------------------------------ подсказки в поиске
   Живой поиск есть и в каталоге, и на главной — значит место общее. */
.v2-cat-hints {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: grid;
	padding: 6px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
	box-shadow: var(--v2-sh-float);
}
.v2-cat-hints[hidden] { display: none; }
.v2-cat-hint {
	display: flex;
	align-items: center;
	gap: var(--v2-s3);
	padding: 9px 11px;
	border: 0;
	border-radius: var(--v2-r-ctl);
	background: transparent;
	color: var(--v2-text);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.v2-cat-hint:hover,
.v2-cat-hint.is-cur { background: var(--v2-brand-soft); }
.v2-cat-hint b { font-weight: 600; font-size: .95rem; }
.v2-cat-hint mark { background: transparent; color: var(--v2-brand); font-weight: 700; padding: 0; }
.v2-cat-hint span { color: var(--v2-text-3); font-size: .82rem; margin-left: auto; white-space: nowrap; }


/* ------------------------------------------------- поле поиска
   Используется в каталоге, на карте сайта, в поиске и на 404 —
   значит место ему в основе. Лежало в стилях каталога, и на карте
   поле оставалось без оформления. */
.v2-cat-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 620px;
	margin-top: var(--v2-s6);
}
.v2-cat-search { position: relative; }
.v2-cat-search svg {
	position: absolute;
	left: 16px;
	width: 19px;
	height: 19px;
	color: var(--v2-text-3);
	pointer-events: none;
}
.v2-cat-search input {
	width: 100%;
	min-height: 54px;
	padding: 0 46px 0 46px;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-btn);
	background: var(--v2-surface);
	color: var(--v2-text);
	font: inherit;
	font-size: 1rem;
	box-shadow: var(--v2-sh-card);
}
.v2-cat-search input { min-height: 50px; }
.v2-cat-search input:focus {
	outline: none;
	border-color: var(--v2-brand);
	box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}
.v2-cat-search__clear {
	position: absolute;
	right: 8px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--v2-text-3);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.v2-cat-search__clear:hover { background: var(--v2-brand-soft); color: var(--v2-brand); }

/* ------------------------------------------- крестик в поле поиска
 *
 * Браузер рисует у поля типа «поиск» свой крестик для очистки.
 * Там, где мы рисуем собственный, их получается два подряд —
 * и человек не понимает, чем они отличаются. Гасим родной.
 *
 * Только там, где свой действительно есть: на странице поиска
 * и на 404 своего крестика нет, и убрать родной значило бы
 * отнять единственный способ стереть набранное.
 */
.v2 .v2-cat-search--own input[type="search"]::-webkit-search-cancel-button,
.v2 .v2-cat-search--own input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}


/* =====================================================================
 * СКВОЗНЫЕ ЭЛЕМЕНТЫ
 *
 * Советчик, плашка о cookie, карточка зарплат и выделение текста
 * встречаются на всех страницах — значит и место им в основе.
 *
 * Лежали они в файле главной, а он подключается только на витрине.
 * Поэтому на странице безопасности, в тарифах и во всех инструментах
 * советчик оставался зелёным, а выделение текста в подвале и в меню —
 * от старой темы.
 *
 * Это уже пятый случай той же ошибки. Правило простое и повторю его
 * ещё раз: что встречается больше чем на одной странице — живёт
 * в основе, и проверка это сверяет.
 * =================================================================== */
/* =====================================================================
 * СОВЕТЧИК И «НАВЕРХ»
 *
 * Механика уже есть в скрипте темы и работает: кнопки собираются сами
 * и добавляются в конец страницы. Переписывать её ради новой темы
 * незачем — меняем только вид, и только на страницах с классом v2.
 * =================================================================== */
.v2 .rz-fab { right: 24px; bottom: 24px; gap: 12px; }
.v2 .rz-fab__btn {
	width: 48px;
	height: 48px;
	border: 1px solid var(--v2-line);
	background: var(--v2-surface);
	color: var(--v2-text-2);
	box-shadow: var(--v2-sh-float);
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.v2 .rz-fab__btn:hover { border-color: var(--v2-brand); color: var(--v2-brand); }
/* Кнопка советов — фирменная и крупнее, как в ТЗ */
.v2 .rz-fab__btn--tips {
	width: 56px;
	height: 56px;
	background: var(--v2-brand);
	border-color: var(--v2-brand);
	color: #fff;
}
.v2 .rz-fab__btn--tips:hover { background: var(--v2-brand-hover); border-color: var(--v2-brand-hover); color: #fff; }
.v2 .rz-tips {
	width: min(350px, calc(100vw - 40px));
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	box-shadow: var(--v2-sh-float);
}
.v2 .rz-tips__head b {
	color: var(--v2-brand);
	font-family: inherit;
	letter-spacing: .08em;
	font-size: .74rem;
}
.v2 .rz-tips__text { color: var(--v2-text); }
.v2 .rz-tips__more {
	border-color: var(--v2-brand-line);
	color: var(--v2-brand);
	border-radius: var(--v2-r-ctl);
	font-weight: 600;
}
.v2 .rz-tips__more:hover { background: var(--v2-brand-soft); }
.v2 .rz-tips__close { color: var(--v2-text-3); }
.v2 .rz-tips__close:hover { color: var(--v2-text); }
/* =====================================================================
 * ПЕРЕКРАСКА ЧУЖИХ БЛОКОВ ПОД НОВУЮ ТЕМУ
 *
 * Советчик, плашка о cookie и карточка зарплат живут в плагинах
 * и рисуются своим кодом. Переписывать их ради оформления нельзя:
 * они работают и на старых страницах, которые пока на прежних стилях.
 *
 * Поэтому здесь только вид, и только там, где включена новая тема, —
 * все правила начинаются с .v2.
 * =================================================================== */

/* Выделение текста мышью: было зелёное, стало фирменное */
.v2 ::selection { background: var(--v2-brand); color: #fff; }
.v2 ::-moz-selection { background: var(--v2-brand); color: #fff; }
/* Ссылки внутри советчика */
.v2 .rz-tips a {
	color: var(--v2-brand);
	text-decoration-color: var(--v2-brand-line);
	text-underline-offset: 2px;
}
.v2 .rz-tips a:hover { color: var(--v2-brand-hover); }
/* --------------------------------------------------- плашка о cookie */
.v2 .ckbar {
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	box-shadow: var(--v2-sh-float);
	color: var(--v2-text);
	padding: var(--v2-s4) var(--v2-s5);
	gap: var(--v2-s4);
}
.v2 .ckbar__text { color: var(--v2-text-2); font-size: .92rem; line-height: 1.55; }
.v2 .ckbar__text a { color: var(--v2-brand); text-underline-offset: 2px; }
.v2 .ckbar__text a:hover { color: var(--v2-brand-hover); }
.v2 .ckbar__ok {
	background: var(--v2-brand);
	border: 1px solid var(--v2-brand);
	border-radius: var(--v2-r-btn);
	color: #fff;
	font-weight: 600;
	min-height: 42px;
	padding: 0 var(--v2-s5);
	cursor: pointer;
	white-space: nowrap;
}
.v2 .ckbar__ok:hover { background: var(--v2-brand-hover); border-color: var(--v2-brand-hover); }
/* ------------------------------------------------- карточка зарплат */
/*
 * У неё была зелёная полоса слева и зелёные ссылки — фирменный цвет
 * прежней темы. Полоса остаётся как приём, но фиолетовой.
 */
.v2 .rzpay {
	border-color: var(--v2-line);
	border-left-color: var(--v2-brand);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
}
.v2 .rzpay__title { color: var(--v2-text); font-weight: 600; }
.v2 .rzpay__cap { color: var(--v2-text-2); }
.v2 .rzpay__nums b,
.v2 .rzpay__nums strong { color: var(--v2-text); }
.v2 .rzpay a { color: var(--v2-brand); }
.v2 .rzpay a:hover { color: var(--v2-brand-hover); }
.v2 .rzpay input,
.v2 .rzpay select {
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-ctl);
	background: var(--v2-surface);
	color: var(--v2-text);
	min-height: 46px;
	font: inherit;
}
.v2 .rzpay input:focus,
.v2 .rzpay select:focus {
	outline: none;
	border-color: var(--v2-brand);
	box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}
.v2 .rzpay__hits button:hover,
.v2 .rzpay__hits [role="option"]:hover { background: var(--v2-brand-soft); color: var(--v2-brand); }
/*
 * Ссылки в остальном содержимом плагинов на новых страницах.
 * Точечно, чтобы не задеть кнопки и плитки, у которых свой цвет.
 */
.v2 .rz-tips__text a,
.v2 .ckbar a,
.v2 .rzpay a { text-decoration: underline; }
/* Полоса диапазона зарплат в новой теме */
.v2 .rzpay__track { background: var(--v2-brand-soft); }
.v2 .rzpay__band { background: var(--v2-brand); }
.v2 .rzpay__mark i { background: var(--v2-text); }
.v2 .rzpay__ends,
.v2 .rzpay__hint { color: var(--v2-text-2); }
/* =====================================================================
 * ТЕ ЖЕ ПРАВИЛА ДЛЯ НЕПЕРЕДЕЛАННЫХ СТРАНИЦ
 *
 * Советчик, плашка о cookie и карточка зарплат должны выглядеть
 * одинаково на всём сайте: они сквозные. А вот ссылки и выделение
 * текста здесь намеренно не трогаются — на старых страницах
 * ещё зелёные редакционные блоки, и фиолетовые ссылки посреди них
 * выглядели бы поломкой, а не переходом.
 * =================================================================== */
.v2-shell .rz-fab { right: 24px; bottom: 24px; gap: 12px; }
.v2-shell .rz-fab__btn {
	width: 48px;
	height: 48px;
	border: 1px solid var(--v2-line);
	background: var(--v2-surface);
	color: var(--v2-text-2);
	box-shadow: var(--v2-sh-float);
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.v2-shell .rz-fab__btn:hover { border-color: var(--v2-brand); color: var(--v2-brand); }
.v2-shell .rz-fab__btn--tips {
	width: 56px;
	height: 56px;
	background: var(--v2-brand);
	border-color: var(--v2-brand);
	color: #fff;
}
.v2-shell .rz-fab__btn--tips:hover { background: var(--v2-brand-hover); border-color: var(--v2-brand-hover); color: #fff; }
.v2-shell .rz-tips {
	width: min(350px, calc(100vw - 40px));
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	box-shadow: var(--v2-sh-float);
}
.v2-shell .rz-tips__head b {
	color: var(--v2-brand);
	font-family: inherit;
	letter-spacing: .08em;
	font-size: .74rem;
}
.v2-shell .rz-tips__text { color: var(--v2-text); }
.v2-shell .rz-tips__more {
	border-color: var(--v2-brand-line);
	color: var(--v2-brand);
	border-radius: var(--v2-r-ctl);
	font-weight: 600;
}
.v2-shell .rz-tips__more:hover { background: var(--v2-brand-soft); }
.v2-shell .rz-tips__close { color: var(--v2-text-3); }
.v2-shell .rz-tips__close:hover { color: var(--v2-text); }
.v2-shell .rz-tips a {
	color: var(--v2-brand);
	text-decoration-color: var(--v2-brand-line);
	text-underline-offset: 2px;
}
.v2-shell .rz-tips a:hover { color: var(--v2-brand-hover); }
.v2-shell .ckbar {
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	box-shadow: var(--v2-sh-float);
	color: var(--v2-text);
	padding: var(--v2-s4) var(--v2-s5);
	gap: var(--v2-s4);
}
.v2-shell .ckbar__text { color: var(--v2-text-2); font-size: .92rem; line-height: 1.55; }
.v2-shell .ckbar__text a { color: var(--v2-brand); text-underline-offset: 2px; }
.v2-shell .ckbar__text a:hover { color: var(--v2-brand-hover); }
.v2-shell .ckbar__ok {
	background: var(--v2-brand);
	border: 1px solid var(--v2-brand);
	border-radius: var(--v2-r-btn);
	color: #fff;
	font-weight: 600;
	min-height: 42px;
	padding: 0 var(--v2-s5);
	cursor: pointer;
	white-space: nowrap;
}
.v2-shell .ckbar__ok:hover { background: var(--v2-brand-hover); border-color: var(--v2-brand-hover); }
.v2-shell .rzpay {
	border-color: var(--v2-line);
	border-left-color: var(--v2-brand);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
}
.v2-shell .rzpay__title { color: var(--v2-text); font-weight: 600; }
.v2-shell .rzpay__cap { color: var(--v2-text-2); }
.v2-shell .rzpay__nums strong { color: var(--v2-text); }
.v2-shell .rzpay a { color: var(--v2-brand); }
.v2-shell .rzpay a:hover { color: var(--v2-brand-hover); }
.v2-shell .rzpay select {
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-ctl);
	background: var(--v2-surface);
	color: var(--v2-text);
	min-height: 46px;
	font: inherit;
}
.v2-shell .rzpay select:focus {
	outline: none;
	border-color: var(--v2-brand);
	box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}
.v2-shell .rzpay__hits [role="option"]:hover { background: var(--v2-brand-soft); color: var(--v2-brand); }
.v2-shell .rzpay a { text-decoration: underline; }
.v2-shell .rzpay__track { background: var(--v2-brand-soft); }
.v2-shell .rzpay__band { background: var(--v2-brand); }
.v2-shell .rzpay__mark i { background: var(--v2-text); }
.v2-shell .rzpay__hint { color: var(--v2-text-2); }


/* ------------------------------------------- движения живой кнопки
   Объявлены в основе, а не в стилях главной: тем же приёмом
   оживает кнопка скачивания в конструкторе, а туда файл главной
   не подключается — и кнопка осталась бы неподвижной. */
@keyframes v2-btn-breathe {
	0%, 100% { box-shadow: 0 6px 18px rgba(99, 91, 255, .22); }
	50%      { box-shadow: 0 10px 26px rgba(99, 91, 255, .38); }
}

@keyframes v2-btn-shine {
	0%   { left: -60%; }
	28%  { left: 130%; }
	100% { left: 130%; }
}

/* Кому мешает движение — движения нет */
@media (prefers-reduced-motion: reduce) {
	.v2 *, .v2 *::before, .v2 *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------ ссылка «к содержимому» */
.v2-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--v2-brand);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--v2-r-ctl) 0;
}
.v2-skip:focus { left: 0; }

/* ------------------------------------------------------- меню профиля */
.v2-acc { position: relative; }
.v2-acc__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	background: var(--v2-surface);
	padding: 3px 10px 3px 3px;
	cursor: pointer;
	color: var(--v2-text-2);
}
.v2-acc__btn:hover { border-color: var(--v2-line-hover); }
.v2-acc__ava { border-radius: 9999px; display: block; }
.v2-acc__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 210px;
	display: grid;
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	box-shadow: var(--v2-sh-float);
	padding: 6px;
	z-index: 70;
}
.v2-acc__menu[hidden] { display: none; }
.v2-acc__menu a {
	padding: 9px 12px;
	border-radius: var(--v2-r-ctl);
	color: var(--v2-text);
	text-decoration: none;
	font-size: .94rem;
}
.v2-acc__menu a:hover { background: var(--v2-brand-soft); color: var(--v2-brand); }

/* --------------------------------------------------- меню на телефоне */
.v2-mobile {
	border-top: 1px solid var(--v2-line);
	background: var(--v2-surface);
	padding-block: var(--v2-s4) var(--v2-s5);
}
.v2-mobile[hidden] { display: none; }
.v2-mobile .v2-container { display: grid; gap: 2px; }
.v2-mobile a {
	padding: 12px 4px;
	color: var(--v2-text);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid var(--v2-line);
}
.v2-mobile a:last-of-type { border-bottom: 0; }

/* Заголовок группы в мобильном меню */
.v2-mobile__cap {
	display: block;
	padding: 14px 4px 6px;
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--v2-text-3);
	font-weight: 700;
}
.v2-mobile__cap:first-child { padding-top: 4px; }
/* Пункт верхнего уровня без группы — крупнее остальных */
.v2-mobile__top { font-weight: 600; }
.v2-mobile .v2-btn { margin-top: var(--v2-s4); border-bottom: 0; color: #fff; }

@media (min-width: 901px) {
	/* На широком экране мобильное меню не нужно ни при каких условиях */
	.v2-mobile { display: none !important; }
}
@media (max-width: 560px) {
	/* Кнопки в шапке уступают место логотипу и бургеру */
	.v2-hide-sm { display: none; }
}

/* =====================================================================
 * ВЫПАДАЮЩЕЕ МЕНЮ
 *
 * Открывается по наведению и по нажатию. Только наведения мало:
 * с клавиатуры и с сенсорного экрана его не бывает.
 * =================================================================== */
.v2-drop { position: relative; }
.v2-drop__top {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}
.v2-drop__top svg { transition: transform .18s ease; }
.v2-drop.is-open .v2-drop__top svg { transform: rotate(180deg); }

.v2-drop__menu {
	position: absolute;
	left: 50%;
	top: calc(100% + 14px);
	transform: translateX(-50%) translateY(-6px);
	min-width: 290px;
	display: grid;
	gap: 2px;
	padding: 8px;
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	box-shadow: var(--v2-sh-float);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 70;
}
/*
 * Мостик между кнопкой и списком: без него меню закрывается,
 * пока курсор идёт по пустому промежутку.
 */
.v2-drop__menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
.v2-drop:hover .v2-drop__menu,
.v2-drop.is-open .v2-drop__menu,
.v2-drop:focus-within .v2-drop__menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.v2-drop__menu a {
	display: grid;
	/* Значок слева, название и пояснение справа одной колонкой */
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: start;
	gap: 2px 10px;
	padding: 10px 13px;
	border-radius: var(--v2-r-ctl);
	border-bottom: 0;
	color: var(--v2-text);
	text-decoration: none;
}
/*
 * Значок в кружке фирменного цвета.
 *
 * Пункт без значка не должен ехать влево — иначе список
 * разъедется по двум левым краям. Поэтому текст всегда во второй
 * колонке, а первая просто пустует.
 */
.v2-drop__ico {
	grid-column: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
}
.v2-drop__ico svg { width: 17px; height: 17px; }
.v2-drop__text { grid-column: 2; display: grid; gap: 2px; min-width: 0; }
.v2-drop__menu a:hover .v2-drop__ico { background: var(--v2-brand); color: #fff; }
.v2-drop__menu a:hover { background: var(--v2-brand-soft); }
.v2-drop__menu b { font-weight: 600; font-size: .95rem; }
.v2-drop__menu a:hover b { color: var(--v2-brand); }
.v2-drop__menu span { color: var(--v2-text-2); font-size: .84rem; line-height: 1.4; }
/*
 * Обёртка текста — тоже span, и правило выше красит её серым
 * вместе с названием внутри. Возвращаем ей обычный цвет:
 * название задаёт себе свой сам.
 */
.v2-drop__text { color: var(--v2-text); font-size: 1rem; }

/* Почта и номер выпуска в подвале */
.v2-footer__bottom a { color: var(--v2-text-2); }
.v2-footer__bottom a:hover { color: var(--v2-brand); }
.v2-ver {
	font-variant-numeric: tabular-nums;
	padding: 3px 9px;
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	font-size: .82rem;
}

/* Значки соцсетей из набора темы */
.v2-social svg { width: 19px; height: 19px; }

/* =====================================================================
 * ПЕЧАТЬ
 *
 * Статьи и образцы печатают чаще, чем кажется: распечатку берут
 * с собой на собеседование или отдают знакомому, у которого нет
 * интернета под рукой.
 *
 * Из бумаги убираем всё, что на ней бессмысленно: шапку, подвал,
 * советчик, кнопки, боковые колонки, призывы. Остаётся текст.
 * =================================================================== */
@media print {
	.v2-header,
	.v2-footer,
	.v2-mobile,
	.v2-skip,
	.rz-fab,
	.rz-tips,
	.ckbar,
	.v2-final,
	.v2-page__cta,
	.v2-art__side,
	.v2-art__next,
	.v2-art__toc-inline,
	.v2-crumbs,
	.v2-cat-search,
	.v2-cat-filters,
	.v2-map__abc,
	.v2-carousel__nav { display: none !important; }

	/*
	 * Колонки схлопываются: на бумаге нет ни закреплённых блоков,
	 * ни второй колонки — лист один и узкий.
	 */
	.v2-art__grid,
	.v2-prof__grid,
	.v2-map__grid,
	.v2-seo-wrap { display: block !important; }

	.v2, .v2-container {
		max-width: none !important;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
		color: #000 !important;
	}

	/* Тени и заливки на бумаге превращаются в серые пятна */
	.v2 .v2-card,
	.v2 .v2-cat-card {
		box-shadow: none !important;
		background: #fff !important;
		border-color: #ccc !important;
		break-inside: avoid;
	}

	/*
	 * Адрес ссылки печатаем рядом с текстом: на бумаге ссылка
	 * без адреса — просто подчёркнутое слово.
	 *
	 * Только для ссылок внутри текста статьи: печатать адреса
	 * у каждой плитки каталога значит утопить страницу в скобках.
	 */
	.v2 .prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .82em;
		color: #555;
		word-break: break-all;
	}

	.v2 h1, .v2 h2, .v2 h3 { break-after: avoid; }
	.v2 p, .v2 li { orphans: 3; widows: 3; }
}

/* =====================================================================
 * ВЫДЕЛЕНИЕ ТЕКСТА В ШАПКЕ И ПОДВАЛЕ
 *
 * Они рисуются вне основного содержимого, и правило для страницы
 * до них не доходило: выделение оставалось зелёным от старой темы.
 * =================================================================== */
.v2-header ::selection,
.v2-footer ::selection,
.v2-mobile ::selection,
.rz-fab ::selection,
.rz-tips ::selection { background: var(--v2-brand); color: #fff; }

.v2-header ::-moz-selection,
.v2-footer ::-moz-selection,
.v2-mobile ::-moz-selection { background: var(--v2-brand); color: #fff; }

/* =====================================================================
 * ФОРМЫ: ВЫПАДАЮЩИЕ СПИСКИ И ОБЯЗАТЕЛЬНАЯ ГАЛОЧКА
 * =================================================================== */

/*
 * Подсветка выбранной строки в выпадающем списке.
 *
 * Список рисует сам браузер, и достучаться до него можно только
 * через accent-color — остальное он делает по-своему. Раньше
 * подсветка бралась системная или зелёная от старой темы.
 */
.v2 select,
.v2 input[type="checkbox"],
.v2 input[type="radio"],
.v2 input[type="range"],
.v2 progress { accent-color: var(--v2-brand); }

/*
 * ПУНКТЫ СПИСКА НЕ КРАСИМ. Здесь была моя ошибка.
 *
 * Я поставил им фон, чтобы подсветка была фирменной, — и в старых
 * стилях этого сайта прямо написано, почему так делать нельзя:
 * любой фон или цвет у пункта переводит Chrome с системной отрисовки
 * раскрытого списка на собственную. В ней список выглядит чужеродно,
 * а прокрутка колесом ломается — до пунктов ниже видимых не добраться.
 *
 * Предупреждение было написано в коде, я его не прочитал и наступил
 * ровно туда. Подсветку рисует сам браузер, и она уже фирменная:
 * цвет берётся из accent-color выше.
 */

/*
 * Обязательная галочка согласия.
 *
 * Пока её не поставили, форма не отправляется — но человек этого
 * не видит: браузер молча отказывает или показывает подсказку,
 * которую легко пропустить. Подсвечиваем саму строку.
 *
 * Через :user-invalid, а не :invalid: второе срабатывает сразу
 * при загрузке страницы, и незаполненная форма встречала бы человека
 * красной ещё до того, как он к ней притронулся.
 */
.v2 .rzf__consent { border-radius: var(--v2-r-ctl); padding: 4px 6px; margin-inline: -6px; transition: background-color .16s ease; }
.v2 .rzf__consent:has(input:user-invalid) { background: #FEF2F2; }
.v2 .rzf__consent:has(input:user-invalid) span { color: var(--v2-err); }
.v2 .rzf__consent input:user-invalid { outline: 2px solid var(--v2-err); outline-offset: 2px; border-radius: 3px; }

/*
 * Запасной путь для браузеров, где нет :has или :user-invalid.
 * Класс ставит скрипт при попытке отправить форму.
 */
.v2 .rzf__consent.is-error { background: #FEF2F2; }
.v2 .rzf__consent.is-error span { color: var(--v2-err); }
.v2 .rzf__consent.is-error input { outline: 2px solid var(--v2-err); outline-offset: 2px; border-radius: 3px; }

/* Почта в подвале — та же ссылка, но с ровными цифрами адреса */
.v2-mail { font-variant-numeric: tabular-nums; }

/* =====================================================================
 * СОВЕТЧИК: ПЕРЕКРАСКА БЕЗ ОГЛЯДКИ НА КЛАСС ТЕЛА
 *
 * Правила выше висят на .v2 и .v2-shell — то есть зависят от того,
 * поставлен ли классу тела нужный признак. Если раздел выключен
 * или страница выпала из наших ветвлений, советчик остаётся зелёным.
 *
 * Советчик — сквозной: он одинаков на всех страницах и не связан
 * с содержимым. Поэтому красим его прямо, без условий. Этот файл
 * подключается только при включённой новой оболочке, так что
 * на прежнюю тему правила всё равно не попадут.
 * =================================================================== */
.rz-fab__btn {
	border-color: var(--v2-line);
	background: var(--v2-surface);
	color: var(--v2-text-2);
}
.rz-fab__btn:hover { border-color: var(--v2-brand); color: var(--v2-brand); }

.rz-fab__btn--tips,
.rz-fab--open .rz-fab__btn--tips {
	background: var(--v2-brand);
	border-color: var(--v2-brand);
	color: #fff;
}
.rz-fab__btn--tips:hover,
.rz-fab--open .rz-fab__btn--tips:hover {
	background: var(--v2-brand-hover);
	border-color: var(--v2-brand-hover);
	color: #fff;
}

.rz-tips {
	background: var(--v2-surface);
	border-color: var(--v2-line);
	border-radius: var(--v2-r-lg);
}
.rz-tips__head b { color: var(--v2-brand); font-family: inherit; }
.rz-tips__text { color: var(--v2-text); }
.rz-tips a { color: var(--v2-brand); }
.rz-tips a:hover { color: var(--v2-brand-hover); }
.rz-tips__more { border-color: var(--v2-brand-line); color: var(--v2-brand); }
.rz-tips__more:hover { background: var(--v2-brand-soft); }

/* =====================================================================
 * УКОРОЧЕННАЯ ШАПКА НА РАБОЧЕМ ЭКРАНЕ
 *
 * В конструкторе и в письме меню сайта убрано: человек пришёл
 * заполнять, а разделы уводят с полдороги. Остаётся логотип,
 * оформление и вход — чтобы было видно, где ты, и куда выйти.
 * =================================================================== */
.v2-header--bare .v2-nav[hidden],
.v2-header--bare .v2-burger[hidden] { display: none; }
.v2-header--bare .v2-header__in { min-height: 62px; }
.v2-header--bare .v2-header__side { margin-left: auto; }
/* Логотип на рабочем экране скромнее: он тут указатель, а не витрина */
.v2-header--bare .v2-logo img { height: 40px; }

/* =====================================================================
 * СТРОКА ПРИЛОЖЕНИЯ В ШАПКЕ
 *
 * На рабочем экране в шапку переезжают название резюме, отметка
 * о сохранении и кнопки скачивания. Две полосы подряд съедали высоту
 * первого экрана, на котором должна быть анкета.
 * =================================================================== */
.v2-appbar {
	display: flex;
	align-items: center;
	gap: var(--v2-s5);
	flex: 1 1 auto;
	min-width: 0;
	margin-left: var(--v2-s5);
}
/*
 * Название и отметка о сохранении — одной строкой с разделителем,
 * как в макете. В два ряда они распирали шапку по высоте,
 * а слов там на одну строку.
 */
.v2-appbar .rz-top__name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex-wrap: wrap;
}
.v2-appbar .rz-top__saved::before {
	/* Разделитель вместо точки состояния: точка была лишним значком */
	content: "·";
	width: auto;
	height: auto;
	background: none;
	color: var(--v2-text-3);
	font-weight: 700;
}
.v2-appbar .rz-top__acts { display: flex; flex-wrap: nowrap; gap: 8px; margin-left: auto; }

@media (max-width: 620px) {
	/*
	 * Название прячем только на телефоне.
	 *
	 * Раньше оно исчезало уже при 900 точках, хотя на планшете
	 * в шапке места полно: меню там убрано. Человек не видел,
	 * как называется резюме, и не мог его переименовать.
	 */
	.v2-appbar .rz-top__name { display: none; }
	.v2-appbar { margin-left: var(--v2-s3); }
}
@media (max-width: 620px) {
	/* Совсем узко — оставляем одну кнопку скачивания */
	.v2-appbar .rz-top__acts .rz-btn:not(.rz-btn--primary) { display: none; }
}

/* =====================================================================
 * ЖИВАЯ КНОПКА СКАЧИВАНИЯ
 *
 * Тот же приём, что у главной кнопки на витрине: раз в несколько
 * секунд проходит блик, и она едва заметно дышит тенью.
 *
 * Здесь это уместнее, чем где-либо ещё: кнопка появляется только
 * на последнем шаге, когда резюме готово, — и человек, дошедший
 * до конца, должен её заметить сразу, а не искать глазами.
 *
 * При наведении движение прекращается: нашёл — дальше не мешаем.
 * =================================================================== */
.v2-appbar .rz-btn--primary {
	position: relative;
	overflow: hidden;
	animation: v2-btn-breathe 3.6s ease-in-out infinite;
}
.v2-appbar .rz-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	animation: v2-btn-shine 3.6s ease-in-out infinite;
}
.v2-appbar .rz-btn--primary:hover { animation: none; }
.v2-appbar .rz-btn--primary:hover::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.v2-appbar .rz-btn--primary { animation: none; }
	.v2-appbar .rz-btn--primary::after { display: none; }
}