/* ==========================================================================
   Конструктор резюме
   --------------------------------------------------------------------------
   Написано по макету Figma (узел 1:11632), а не перенесено из прототипа.
   Разметку выдаёт js/resume-builder.js — от прототипа взята только логика,
   поэтому здесь описаны именно те классы, которые она генерирует.

   Опорные размеры макета: контейнер 1128, колонки 744 / 360 с зазором 24,
   карточка группы на --c-surface-variant, внутри подкарточки на --c-surface,
   поля M3 56px с плавающей подписью. Брейкпоинты раздела: 960 / 768 / 560.
   ========================================================================== */

/* Иконки: субсет Material Symbols на 33 глифа лежит в теме. Подключать шрифт
   с Google Fonts на странице, где написано «мы ничего не отправляем на
   сервер», было бы нечестно.

   Список лигатур — в константах js/resume-builder.js. Если в макете появился
   глиф, которого в субсете нет, он не отрисуется вовсе: у @font-face стоит
   font-display: block. Пересобирается из MaterialSymbolsOutlined[FILL,GRAD,opsz,wght]
   инстансом FILL 0 / GRAD 0 / opsz 24 / wght 400 — ровно эти значения в макете. */
@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	/* Версия в адресе: файл субсета перезаписывается на месте, а ?ver= на самом
	   CSS шрифта не касается. Без неё у вернувшегося посетителя останется
	   старая копия, и новый глиф не отрисуется — у @font-face font-display: block. */
	src: url('../fonts/material-symbols-outlined.woff2?v=2') format('woff2');
}

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/* Полоса и заголовок
   -------------------------------------------------------------------------- */
.resumes-builder-wrap {
	background: var(--c-on-primary);
	padding: 48px 0;
}

/* На отдельной странице конструктора от низа hero до карточек 64 (узлы
   1:10266 — pb 40 — и 1:10325 — pt 24). Первые 40 уже даёт .resumes-top,
   вторые 24 — сама липкая полоса: её отступ виден и когда она прилипла
   к краю окна. Собственного отступа сверху у секции не остаётся. */
.resumes-builder-page .resumes-builder-wrap {
	padding-top: 0;
}

/* В макете страницы конструктора текстовая колонка hero занята целиком
   (узел 1:10285 — 456px), а не 389, как в каталоге и на странице профессии. */
.resumes-builder-page .resumes-hero__text {
	max-width: 456px;
}

.builder-section {
	--bld-outline: #727785;
	--bld-radius-field: 12px;
	--bld-radius-card: 12px;
	--bld-radius-inner: 8px;

	display: block;
	color: var(--c-on-surface);
	font-family: 'Roboto', Arial, sans-serif;
}

.builder-section-head {
	margin: 0 0 8px;
}

.builder-section .section-title {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	color: var(--c-secondary);
}

.builder-section .section-title span {
	color: var(--c-primary);
}

/* В макете строка набрана body-large одним начертанием: 16/20, tracking 0.5,
   без выделения слова «Конфиденциальность». */
.builder-section .builder-disclaimer {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: var(--c-on-surface-variant);
}

.builder-section-card {
	background: none;
	border: 0;
	padding: 0;
}

/* Полнота профиля и переключатель шаблонов
   --------------------------------------------------------------------------
   В макете (узел 1:11643) это одна карточка: строка «Полнота профиля» +
   индикатор, под ней сегментированный переключатель, зазор 4. */
.builder-section .builder-header {
	margin: 0 0 24px;
}

/* Полоса «Специальность + полнота профиля»
   --------------------------------------------------------------------------
   Отдельная страница конструктора, узел 1:10327: карточка выбора профессии
   450px и карточка полноты на остатке ширины, зазор 24, обе одной высоты.
   Полоса липнет к верху окна — узел 1:10325 (sticky, pt 24). */
.builder-section .builder-header--constructor {
	top: 0;
	z-index: 3;
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding-top: 24px;
	background: var(--c-on-primary);
}

/* Карточка полноты занимает остаток строки: 1128 - 450 - 24 = 654 (узел
   1:10333). Без этого она сжимается по содержимому, заголовок и индикатор
   перестают помещаться в строку и карточка вырастает вдвое. */
.builder-section .builder-header--constructor .builder-completeness-card {
	flex: 1 1 auto;
	min-width: 0;
}

.builder-section .builder-prof-card {
	display: flex;
	flex-direction: column;
	/* Высоту задаёт соседняя карточка (138px). Заголовок прижат к верху,
	   поле — к низу: в макете между ними 22, и это остаток, а не зазор. */
	justify-content: space-between;
	flex: 0 0 450px;
	max-width: 450px;
	padding: 16px 20px;
	/* Как у карточки полноты: обводка в Figma идёт внутрь кадра. */
	box-shadow: inset 0 0 0 1px var(--c-outline-variant);
	border-radius: var(--bld-radius-card);
	background: var(--c-surface);
}

.builder-section .builder-prof-card__title {
	display: block;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--c-on-surface-variant);
}

/* Поле M3 56px — те же размеры, что у селектов формы, но вне .builder-form. */
.builder-section .builder-prof-select {
	width: 100%;
	height: 56px;
	padding: 16px 44px 16px 16px;
	border: 1px solid var(--bld-outline);
	border-radius: var(--bld-radius-field);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='%23424753'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--c-on-surface-variant-2);
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	font-weight: 400;
	box-shadow: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.builder-section .builder-prof-select:focus {
	border-color: var(--c-primary);
	border-width: 2px;
	padding: 15px 43px 15px 15px;
	outline: none;
}

/* Пока данные профессии едут по сети, селект заблокирован. */
.builder-section .builder-prof-card--loading .builder-prof-select {
	opacity: 0.6;
	cursor: progress;
}

/* Без вариантов-примеров (универсальный шаблон) подставлять в форму нечего. */
.builder-section .builder-preset-chip[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.builder-section .builder-preset-chips .builder-preset-chip[disabled]:hover,
.builder-section .builder-preset-chips .builder-preset-chip[disabled]:focus {
	background: none;
	color: var(--c-on-surface);
}

.builder-section .builder-completeness-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	/* В Figma обводка карточки идёт внутрь кадра и высоту не меняет (138px).
	   border добавил бы 2px, поэтому рамка — внутренней тенью. */
	box-shadow: inset 0 0 0 1px var(--c-outline-variant);
	border-radius: var(--bld-radius-card);
	background: var(--c-surface);
}

.builder-section .builder-completeness-panel {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.builder-section .builder-completeness-panel__title {
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--c-on-surface-variant);
}

.builder-section .builder-completeness-panel__meter {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0;
	flex: 0 1 303px;
	max-width: 303px;
}

.builder-section .builder-completeness__label {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	text-align: right;
	color: var(--c-on-surface-variant);
}

/* Linear determinate progress indicator: заполненная часть и остаток —
   отдельные скруглённые полосы 8px с разрывом 8px, у правого края остатка
   точка-ограничитель. */
.builder-section .builder-completeness__track {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 12px;
	margin-left: 4px;
}

.builder-section .builder-completeness__track--nogap {
	gap: 0;
}

.builder-section .builder-completeness__fill {
	flex: 0 0 auto;
	height: 8px;
	border-radius: 4px;
	background: var(--c-primary);
	transition: width 0.25s ease;
}

.builder-section .builder-completeness__rest {
	position: relative;
	flex: 1 1 auto;
	height: 8px;
	border-radius: 4px;
	background: var(--c-secondary-container);
}

.builder-section .builder-completeness__rest::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 2px;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 3px;
	background: var(--c-primary);
}

/* Пресеты — сегментированный переключатель
   --------------------------------------------------------------------------
   Строка 48px, сама «таблетка» 40px по центру: в макете у сегмента вертикальный
   отступ 4, а рамка — у вложенного контейнера. */
.builder-section .builder-preset-toolbar {
	margin: 0 0 16px;
}

.builder-section .builder-preset-chips {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
}

.builder-section .builder-preset-chip {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--bld-outline);
	border-right-width: 0;
	background: none;
	color: var(--c-on-surface);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.builder-section .builder-preset-chip:first-child {
	border-radius: 100px 0 0 100px;
}

.builder-section .builder-preset-chip:last-child {
	border-right-width: 1px;
	border-radius: 0 100px 100px 0;
}

.builder-section .builder-preset-chip--active {
	background: var(--c-secondary-container);
	color: var(--c-on-secondary-container);
}

.builder-section .builder-preset-chips .builder-preset-chip:hover,
.builder-section .builder-preset-chips .builder-preset-chip:focus {
	background: var(--c-surface-container-low);
	border-color: var(--bld-outline);
	color: var(--c-on-surface);
}

.builder-section .builder-preset-chips .builder-preset-chip--active:hover,
.builder-section .builder-preset-chips .builder-preset-chip--active:focus {
	background: var(--c-secondary-container);
	color: var(--c-on-secondary-container);
}

/* Галочка есть только у выбранного сегмента. */
.builder-section .builder-preset-chip__check {
	display: none;
	flex-shrink: 0;
}

.builder-section .builder-preset-chip--active .builder-preset-chip__check {
	display: inline-flex;
}

.builder-section .builder-preset-chip__title {
	white-space: nowrap;
}

/* Скрытые <select> дублируют пресеты для скринридера */
.builder-section .builder-select--preset-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Две колонки
   -------------------------------------------------------------------------- */
.builder-section .builder-layout {
	display: grid;
	grid-template-columns: minmax(0, 744fr) minmax(0, 360fr);
	align-items: start;
	gap: 24px;
}

.builder-section .builder-form-col,
.builder-section .builder-preview-col {
	min-width: 0;
}

/* Группа и подкарточка
   -------------------------------------------------------------------------- */
.builder-section .builder-group {
	background: var(--c-surface-variant);
	border: 0;
	border-radius: var(--bld-radius-card);
	padding: 20px;
	margin: 0 0 16px;
}

.builder-section .builder-group:last-child {
	margin-bottom: 0;
}

.builder-section .builder-group__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	background: none;
	border: 0;
}

/* В макете у заголовков групп иконок и счётчиков нет */
.builder-section .builder-group__icon,
.builder-section .builder-group__badge {
	display: none;
}

.builder-section .builder-group__title {
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--c-on-surface-variant);
}

.builder-section .builder-group__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.builder-section .builder-subblock {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 20px;
	border: 0;
	border-radius: var(--bld-radius-inner);
	background: var(--c-surface);
}

.builder-section .builder-subblock__title {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	color: var(--c-secondary);
	text-transform: none;
}

/* Подкарточка, внутри которой несколько подписанных блоков («Контакты» +
   «Профили и ссылки», «Дата рождения» + «Пол» + …): в макете между ними 24. */
.builder-section .builder-subblock--groups {
	gap: 24px;
}

.builder-section .builder-field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.builder-section .builder-field-group--loose {
	gap: 16px;
}

/* Между контролом и подсказкой в макете 12. */
.builder-section .builder-field-group--tip {
	gap: 12px;
}

/* Подпись подкарточки и счётчик символов в одной строке, по нижнему краю. */
.builder-section .builder-subblock__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}

.builder-section .builder-field-row--gender {
	max-width: 279px;
}

/* Поля «Образования»: в макете это однострочные поля высотой 36, а не
   многострочные на 96. */
.builder-section .builder-form .builder-edu-field textarea {
	height: 36px;
	min-height: 36px;
}

/* Поля — M3 outlined с плавающей подписью
   --------------------------------------------------------------------------
   Подпись лежит внутри поля, пока оно пустое и не в фокусе, и уезжает в вырез
   верхней рамки при фокусе или заполнении. В разметке подпись идёт ПОСЛЕ
   контрола — иначе соседний селектор не построить. Абсолютно позиционируются
   только подписи, стоящие сразу за контролом: групповые подписи (например,
   «Дата рождения» над тремя списками) остаются в потоке. */
.builder-section .builder-form__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Подпись позиционируется абсолютно, поэтому на flex-поток не влияет:
   gap разводит контрол и то, что идёт следом (подсказку, счётчик символов). */
.builder-section .builder-form__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.builder-section .builder-form input[type='text'],
.builder-section .builder-form input[type='tel'],
.builder-section .builder-form input[type='email'],
.builder-section .builder-form input[type='url'],
.builder-section .builder-form input[type='number'],
.builder-section .builder-form input[type='search'],
.builder-section .builder-form select,
.builder-section .builder-form textarea {
	width: 100%;
	height: 56px;
	padding: 16px;
	border: 1px solid var(--bld-outline);
	border-radius: var(--bld-radius-field);
	background: transparent;
	color: var(--c-on-surface-variant-2);
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	font-weight: 400;
	box-shadow: none;
	appearance: none;
	transition: border-color 0.15s ease;
}

/* Отступ 8/16 в макете отмеряется от внешнего края кадра, а обводка нарисована
   внутрь него. В CSS рамка занимает место, поэтому паддинг на неё уменьшен:
   иначе на четыре строки по 20px остаётся 78px и textarea даёт скролл. */
.builder-section .builder-form textarea {
	height: 96px;
	min-height: 96px;
	padding: 7px 15px;
	resize: vertical;
	/* Поле высотой в четыре строки, и системная полоса прокрутки съедает
	   заметную часть его ширины. Прячем её: колесом, клавишами и перетаскиванием
	   поле прокручивается по-прежнему, а высоту можно потянуть за уголок. */
	scrollbar-width: none;
}

/* Safari и Chrome до 121 не знают scrollbar-width. */
.builder-section .builder-form textarea::-webkit-scrollbar {
	display: none;
}

/* Стрелка — глиф keyboard_arrow_down из макета (узел 1:10411, Trailing icon):
   24px заливкой, а не обводкой. Позиция right 12px даёт те же 24px от края
   поля, что слот 48px в макете. */
.builder-section .builder-form select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='%23424753'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}

/* Типы перечислены так же, как в правиле выше: утолщение рамки с компенсацией
   паддинга — про текстовые поля. Общий input:focus захватывал ещё и чекбоксы,
   и квадрат 18px разрастался до 34px при клике. */
.builder-section .builder-form input[type='text']:focus,
.builder-section .builder-form input[type='tel']:focus,
.builder-section .builder-form input[type='email']:focus,
.builder-section .builder-form input[type='url']:focus,
.builder-section .builder-form input[type='number']:focus,
.builder-section .builder-form input[type='search']:focus,
.builder-section .builder-form select:focus,
.builder-section .builder-form textarea:focus {
	border-color: var(--c-primary);
	border-width: 2px;
	padding: 15px;
	outline: none;
}

.builder-section .builder-form select:focus {
	padding-right: 43px;
}

/* В фокусе рамка удваивается — паддинг уменьшается ещё на 1, высота контента
   остаётся прежней. */
.builder-section .builder-form textarea:focus {
	padding: 6px 14px;
}

/* Плейсхолдер показывается только в фокусе — вне фокуса его место занимает подпись */
.builder-section .builder-form input::placeholder,
.builder-section .builder-form textarea::placeholder {
	color: transparent;
}

.builder-section .builder-form input:focus::placeholder,
.builder-section .builder-form textarea:focus::placeholder {
	color: var(--c-on-surface-variant);
	opacity: 1;
}

/* У полей без плавающей подписи (подписаны заголовком сверху) плейсхолдер
   виден всегда — иначе пустое поле остаётся безымянным. */
.builder-section .builder-form__field--plain input::placeholder,
.builder-section .builder-form__field--plain textarea::placeholder {
	color: var(--c-on-surface-variant);
	opacity: 1;
}

.builder-section .builder-form__field > input + label,
.builder-section .builder-form__field > select + label,
.builder-section .builder-form__field > textarea + label {
	position: absolute;
	left: 12px;
	top: 18px;
	z-index: 1;
	max-width: calc(100% - 32px);
	padding: 0 4px;
	background: var(--c-surface);
	color: var(--c-on-surface-variant-2);
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.builder-section .builder-form__field > input:focus + label,
.builder-section .builder-form__field > input:not(:placeholder-shown) + label,
.builder-section .builder-form__field > textarea:focus + label,
.builder-section .builder-form__field > textarea:not(:placeholder-shown) + label,
.builder-section .builder-form__field > select + label {
	top: -8px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
}

.builder-section .builder-form__field > input:focus + label,
.builder-section .builder-form__field > textarea:focus + label,
.builder-section .builder-form__field > select:focus + label {
	color: var(--c-primary);
}

/* Подписи, которые относятся к группе контролов, а не к одному полю */
.builder-section .builder-form__label-standalone,
.builder-section .builder-form__field > label:first-child,
.builder-section .builder-exp-field-label,
.builder-section .builder-exp-period-label,
.builder-section .current-job-label {
	position: static;
	display: block;
	margin: 0 0 8px;
	padding: 0;
	background: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	color: var(--c-secondary);
	white-space: normal;
}

.builder-section .builder-optional {
	color: var(--c-on-surface-variant);
	font-weight: 400;
	font-size: 14px;
}

.builder-section .builder-req {
	color: var(--c-on-surface-variant-2);
}

/* Счётчик стоит в строке с подписью над полем — body-medium, как в макете. */
.builder-section .char-counter {
	flex-shrink: 0;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	font-weight: 400;
	color: var(--c-on-surface-variant);
}

/* Подсказки
   -------------------------------------------------------------------------- */
.builder-section .builder-tip,
.builder-section .builder-form__hint,
.builder-section .builder-salary-hint {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	color: var(--c-on-surface-variant);
}

/* Подсказка без текста прячется целиком: display:flex выше перебил бы
   стандартное поведение атрибута hidden, и от блока остался бы один значок.
   Пустой текст бывает штатно — у части профессий подсказки к языкам нет. */
.builder-section .builder-tip[hidden] {
	display: none;
}

.builder-section .builder-tip .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 20px;
	color: var(--c-on-surface-variant);
}

/* Нейтрализация состояний родительской темы
   --------------------------------------------------------------------------
   На любой <button> навешаны два чужих правила:

       blogus/style.css          button:hover, button:focus
                                 { box-shadow: 0 4px 20px -5px rgba(0,0,0,.5) }
       blogfull/css/colors/default.css
                                 button:hover, [type=button]:hover,
                                 button:focus, [type=button]:focus
                                 { background:#0F1012; color:#fff; border-color:#0F1012 }

   Второе — та же ловушка, что описана в css/resumes.css для .resumes-btn:
   «[type=button]:hover» даёт специфичность (0,2,0), ровно как «.builder-section
   .что-нибудь», а файл подключается позже и выигрывает ничью. Поэтому цвет и
   рамку каждое состояние переопределяет селектором из трёх классов, а тень
   гасится здесь один раз: «.builder-section button:hover» — это (0,2,1), то
   есть выше обоих чужих правил.

   Перекрывать нужно именно :focus, а не :focus-visible: правило темы
   срабатывает на любом фокусе, включая программный. */
.builder-section button:hover,
.builder-section button:focus {
	box-shadow: none;
}

/* Кнопки
   -------------------------------------------------------------------------- */
.builder-section .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--bld-radius-field);
	background: none;
	color: var(--c-on-surface-variant);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.builder-section .btn--primary {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-on-primary);
}

.builder-section .btn.btn--primary:hover,
.builder-section .btn.btn--primary:focus {
	background: var(--c-primary-hover);
	border-color: var(--c-primary-hover);
	color: var(--c-on-primary);
}

.builder-section .btn--ghost,
.builder-section .btn--tonal {
	border-color: var(--c-outline-variant);
	background: none;
}

.builder-section .btn.btn--ghost:hover,
.builder-section .btn.btn--ghost:focus,
.builder-section .btn.btn--tonal:hover,
.builder-section .btn.btn--tonal:focus {
	background: var(--c-surface-container-low);
	border-color: var(--c-outline-variant);
	color: var(--c-on-surface-variant);
}

.builder-section .btn--register {
	border-color: transparent;
	background: none;
	padding-left: 0;
	padding-right: 0;
}

.builder-section .btn--sm {
	height: 40px;
}

.builder-section .btn .material-symbols-outlined {
	font-size: 20px;
	flex-shrink: 0;
}

/* Чекбоксы
   -------------------------------------------------------------------------- */
.builder-section .builder-workpermit-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}


/* Чекбокс M3: квадрат 18px живёт в области нажатия 48×48, поэтому у него
   поля 15 слева и 11 справа — с ними ширина пункта совпадает с макетом. */
.builder-section .builder-wp-check,
.builder-section .current-job-label,
.builder-section .builder-skill-mode {
	display: inline-flex;
	align-items: center;
	height: 48px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: var(--c-on-surface-variant);
	cursor: pointer;
}


.builder-section .builder-form input[type='checkbox'] {
	appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 2px solid var(--bld-outline);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
}

.builder-section .builder-form .builder-wp-check input[type='checkbox'],
.builder-section .builder-form .current-job-label input[type='checkbox'],
.builder-section .builder-form .builder-skill-mode input[type='checkbox'] {
	margin: 0 11px 0 15px;
}

/* Галка — глиф check_small (узел 1:10452): 24px заливкой поверх контейнера 18px. */
.builder-section .builder-form input[type='checkbox']:checked {
	border-color: var(--c-primary);
	background: var(--c-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Блок места работы
   -------------------------------------------------------------------------- */

/* Расстояние между местами работы. У остальных повторяющихся подкарточек
   раздела (навыки, языки) его даёт flex-колонка с gap 16 в родителе, а этот
   контейнер остался обычным блоком — второе «Место работы» прилипало к
   первому. */
.builder-section .builder-exp-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.builder-section .builder-exp-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 20px 20px;
	border: 0;
	border-radius: var(--bld-radius-inner);
	background: var(--c-surface);
}

.builder-section .builder-exp-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.builder-section .builder-exp-block__label {
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--c-secondary);
}

.builder-section .builder-exp-remove,
.builder-section .lang-remove,
.builder-section .social-link-remove,
.builder-section .builder-skill-category-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: none;
	color: var(--c-on-surface-variant);
	cursor: pointer;
	transition: background 0.15s ease;
}

.builder-section .builder-form .builder-exp-remove:hover,
.builder-section .builder-form .builder-exp-remove:focus,
.builder-section .builder-form .lang-remove:hover,
.builder-section .builder-form .lang-remove:focus,
.builder-section .builder-form .social-link-remove:hover,
.builder-section .builder-form .social-link-remove:focus,
.builder-section .builder-form .builder-skill-category-remove:hover,
.builder-section .builder-form .builder-skill-category-remove:focus {
	background: var(--c-surface-container);
	border-color: transparent;
	color: var(--c-on-surface-variant);
}

.builder-section .builder-exp-periods {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Ширина колонки периода задана макетом: 332 из 664. */
.builder-section .builder-exp-period {
	width: 332px;
	max-width: 100%;
}

.builder-section .builder-exp-period-end {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}

.builder-section .builder-exp-period-end .current-job-label {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
}

/* Поля окончания гаснут, когда отмечено «текущее место». */
.builder-section .builder-form .period-sel:disabled {
	border-color: rgba(29, 27, 32, 0.12);
	color: rgba(25, 28, 34, 0.38);
	cursor: default;
}

.builder-section .period-selects {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.builder-section .builder-exp-tasks-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Дата рождения — три списка в ряд */
.builder-section .dob-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Навыки
   -------------------------------------------------------------------------- */

.builder-section .builder-skill-groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.builder-section .builder-skill-category {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border-radius: var(--bld-radius-inner);
	background: var(--c-surface);
}

/* До круглой кнопки удаления в макете 2, а не 8. */
.builder-section .builder-skill-category__head {
	display: flex;
	align-items: center;
	gap: 2px;
}

.builder-section .builder-skill-category__field {
	flex: 1 1 0;
	min-width: 0;
}

.builder-section .skill-chips,
.builder-section .builder-skill-category__chips,
.builder-section .builder-skill-suggest__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Подсказки отделены от полей линией: в макете по 20 сверху и снизу от неё. */
.builder-section .builder-skill-suggest {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	padding-top: 20px;
	border-top: 1px solid var(--c-outline-variant);
}

.builder-section .builder-skill-suggest:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

.builder-section .builder-skill-suggest-label {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	color: var(--c-secondary);
}

.builder-section .skill-chip,
.builder-section .builder-skill-suggest-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 6px 12px;
	border: 1px solid var(--c-outline-variant);
	border-radius: var(--bld-radius-inner);
	background: none;
	color: var(--c-on-surface-variant-2);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: default;
}

/* Справа от подписи стоит крестик, поэтому отступ там меньше. */
.builder-section .skill-chip {
	padding-right: 8px;
}

.builder-section .builder-skill-suggest-chip {
	cursor: pointer;
}

.builder-section .builder-form .builder-skill-suggest-chip:hover,
.builder-section .builder-form .builder-skill-suggest-chip:focus {
	background: var(--c-surface-container-low);
	border-color: var(--c-outline-variant);
	color: var(--c-on-surface-variant-2);
}

.builder-section .builder-form .skill-chip__remove:hover,
.builder-section .builder-form .skill-chip__remove:focus {
	background: none;
	border-color: transparent;
	color: var(--c-on-surface-variant);
}

.builder-section .skill-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-on-surface-variant);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.builder-section .skill-chips-placeholder {
	font-size: 14px;
	line-height: 18px;
	color: var(--c-on-surface-variant);
}

.builder-section .skill-input-row,
.builder-section .social-add-row,
/* Сеть подписывает поле плавающей подписью в вырезе рамки — тем же способом,
   что и остальные поля формы (узлы 1:10391 и 1:10389 — один компонент M3
   «Text field», Outlined). Раньше название сети стояло отдельным серым
   текстом слева от поля, и это расходилось с макетом.
   Зазор между полем и крестиком в макете — 2 (узел 1:10393). */
.builder-section .social-link-row {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.builder-section .social-link-row .builder-form__field {
	flex: 1;
	min-width: 0;
}

.builder-section .skill-input-row .builder-skill-item-input {
	flex: 1;
	min-width: 0;
}

.builder-section .social-add-hint {
	font-size: 14px;
	line-height: 20px;
	color: var(--c-on-surface-variant);
}

.builder-section .social-links-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Языки
   -------------------------------------------------------------------------- */
/* Карточка со списком языков; пока языков нет, пустая белая плашка не нужна. */
.builder-section .builder-lang-card {
	gap: 16px;
	padding: 20px;
}

.builder-section .builder-lang-card:empty {
	display: none;
}

.builder-section .lang-block {
	display: flex;
	align-items: center;
	gap: 16px;
}

.builder-section .lang-block .lang-name {
	flex: 1 1 0;
	min-width: 0;
}

/* Крестик стоит вплотную к списку уровня — в макете между ними 2. */
.builder-section .lang-level-group {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.builder-section .lang-level-field {
	width: 239px;
}

/* Зарплата
   -------------------------------------------------------------------------- */
.builder-section .builder-salary-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.builder-section .builder-salary {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.builder-section .builder-salary-type {
	flex: 0 0 329px;
	max-width: 100%;
}

/* Пара сумм с тире: в макете между ними 4, а не 16, как до селекта. */
.builder-section .builder-salary-inputs {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 240px;
	min-width: 0;
}

.builder-section .builder-salary-sum-field {
	flex: 1 1 0;
	min-width: 0;
}

.builder-section .builder-salary-sep,
.builder-section .builder-salary-currency {
	font-size: 16px;
	line-height: 20px;
	color: var(--c-on-surface-variant);
}

/* Фото
   -------------------------------------------------------------------------- */
/* В макете подсказка стоит под превью и кнопкой, а подпись о форматах —
   по центру под кнопкой. */
.builder-section .builder-photo {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.builder-section .builder-photo__row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.builder-section .builder-photo__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.builder-section .builder-photo__buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.builder-section .builder-photo__note {
	margin: 0;
	padding: 0 12px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	color: var(--c-on-surface-variant);
}

.builder-section .photo-preview {
	position: relative;
	width: 112px;
	height: 112px;
	flex-shrink: 0;
	border: 1px solid var(--bld-outline);
	border-radius: var(--bld-radius-inner);
	background: var(--c-surface-container-lowest);
	overflow: hidden;
}

.builder-section .photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Силуэт вписан в рамку теми же долями, что и в макете. */
.builder-section .photo-preview__placeholder {
	position: absolute;
	top: 4.56%;
	right: 2.2%;
	bottom: 0.03%;
	left: 2.2%;
	width: auto;
	height: auto;
	object-fit: fill;
}

/* Панель действий
   -------------------------------------------------------------------------- */
/* По макету слева текстовая кнопка «Разместить на Praca.by», справа —
   «Копировать текст» и «Скачать». В разметке они идут в обратном порядке,
   поэтому переставляем через order, не трогая логику. */
.builder-section .builder-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 12px 0 20px;
	border-top: 1px solid var(--c-outline-variant);
}

.builder-section .builder-actions .btn--register {
	order: -1;
	margin-right: auto;
}

.builder-section .builder-actions .btn--ghost {
	order: 1;
}

.builder-section .builder-actions .btn--primary {
	order: 2;
}

/* Предпросмотр
   -------------------------------------------------------------------------- */
.builder-section .builder-preview {
	border-radius: var(--bld-radius-card);
	/* Обводка внутрь, как в макете: высоту шапки она менять не должна. */
	box-shadow: inset 0 0 0 1px var(--c-outline-variant);
	overflow: hidden;
}

/* Шапка — отдельный кадр с обводкой по всем сторонам и скруглением только
   сверху (узел 1:12003). Рамку нельзя оставить на карточке: собственный фон
   шапки перекрывает её внутреннюю тень, и боковые линии пропадают.

   Обводка в макете идёт внутрь кадра, поэтому отступы уменьшены на её
   толщину — высота остаётся ровно 56, а текст стоит в 16px от края. */
.builder-section .builder-preview__header {
	padding: 15px 15px 11px;
	border: 1px solid var(--c-outline-variant);
	border-radius: var(--bld-radius-card) var(--bld-radius-card) 0 0;
	background: var(--c-surface);
	color: var(--c-on-surface-variant);
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
}

.builder-section .builder-preview__scroll {
	max-height: 1500px;
	overflow-y: auto;
}

.builder-section .builder-preview__content {
	padding: 24px 16px 32px;
}

/* Предпросмотр едет вместе со страницей
   --------------------------------------------------------------------------
   Форма выше 4000px, а карточка предпросмотра — около 1000px, поэтому при
   заполнении нижних блоков результат уезжает за пределы экрана. Колонка
   липнет к верху окна, а содержимое карточки прокручивается внутри неё.

   Только на десктопе: ниже 960px колонки складываются в одну (см. «Адаптив»),
   и липкая карточка закрывала бы форму. */
@media (min-width: 961px) {
	.builder-section .builder-preview-col {
		position: sticky;
		/* Липкой шапки у сайта нет, 24px — только зазор до края окна. */
		top: 24px;
	}

	.builder-section .builder-preview {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 48px);
	}

	.builder-section .builder-preview__scroll {
		/* Высоту задаёт окно, а не фиксированные 1500px. min-height нужен,
		   чтобы flex-элемент разрешил сжать себя ниже высоты содержимого. */
		flex: 1 1 auto;
		max-height: none;
		min-height: 0;
	}

	/* Полоса прокрутки: 4px вместо системных 15–17px. */
	.builder-section .builder-preview__scroll::-webkit-scrollbar {
		width: 4px;
	}

	.builder-section .builder-preview__scroll::-webkit-scrollbar-track {
		background: transparent;
	}

	.builder-section .builder-preview__scroll::-webkit-scrollbar-thumb {
		background: var(--c-outline-variant);
		border-radius: 4px;
	}

	/* Firefox правил выше не знает и остался бы с системной полосой. В Chrome
	   же scrollbar-width отменяет ::-webkit-scrollbar и делает полосу толще
	   4px, поэтому свойство задаётся только там, где webkit-правил нет. */
	@supports not selector(::-webkit-scrollbar) {
		.builder-section .builder-preview__scroll {
			scrollbar-width: thin;
			scrollbar-color: var(--c-outline-variant) transparent;
		}
	}
}

.builder-section .lprev-empty {
	padding: 40px 16px;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	color: var(--c-on-surface-variant);
}

/* Документ резюме в предпросмотре
   --------------------------------------------------------------------------
   Расстояния между разделами задаёт сам заголовок (12 до линии, 12 после неё,
   8 до текста). Общего gap у контейнера быть не должно — он складывался бы с
   этими отступами и давал 28–44 вместо 12. */
.builder-section .resume-doc {
	display: flex;
	flex-direction: column;
	/* Длинная строка без пробелов (ссылка, набор символов) иначе растягивает
	   документ шире карточки и даёт ей горизонтальную прокрутку. Свойство
	   наследуется, поэтому достаточно задать его здесь. */
	overflow-wrap: break-word;
}

/* Шапка документа: фото, ниже блок текста. Внутри него имя, пара
   «должность + зарплата» и списки контактов и данных (узел 1:12010). */
.builder-section .resume-doc__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.builder-section .resume-doc__head-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.builder-section .resume-doc__title-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.builder-section .resume-doc__portrait-wrap {
	width: 112px;
	height: 112px;
	border: 1px solid var(--c-outline-variant);
	border-radius: var(--bld-radius-inner);
	overflow: hidden;
}

.builder-section .resume-doc__portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.builder-section .resume-doc__name {
	margin: 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--c-on-surface-variant);
}

.builder-section .resume-doc__position {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	color: var(--c-primary);
}

.builder-section .resume-doc__salary {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.15px;
	color: var(--c-on-surface-variant);
}

.builder-section .resume-doc__contact,
.builder-section .resume-doc__meta {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	color: var(--c-on-surface-variant);
}

.builder-section .resume-doc__contact p,
.builder-section .resume-doc__meta p {
	margin: 0;
}

/* Разделы отбиты линией: в макете по 12 сверху и снизу от неё, до текста 8. */
.builder-section .resume-doc__section-title {
	margin: 12px 0 8px;
	padding: 12px 0 0;
	border-top: 1px solid var(--c-outline-variant);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.15px;
	text-transform: none;
	color: var(--c-secondary);
}

/* Подзаголовки внутри раздела «Образование». */
.builder-section .resume-doc__edu {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.builder-section .resume-doc__sub-title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.1px;
	color: var(--c-on-surface-variant);
}

.builder-section .resume-doc__text,
.builder-section .resume-doc__tasks,
.builder-section .resume-doc__tasks li,
.builder-section .resume-doc__skill,
.builder-section .resume-doc__skill-row {
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	color: var(--c-on-surface-variant);
}

/* Абзацам темы отступы не нужны — ритм задают заголовки разделов. */
.builder-section .resume-doc__text {
	margin: 0;
}

.builder-section .resume-doc__tasks {
	margin: 0;
	padding-left: 21px;
	list-style: disc;
}

.builder-section .resume-doc__exp-header,
.builder-section .resume-doc__skill-block-title {
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: 0.25px;
	color: var(--c-on-surface-variant);
}

/* Внутри места работы 4, между местами 12. */
.builder-section .resume-doc__exp {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.builder-section .resume-doc__exp + .resume-doc__exp {
	margin-top: 12px;
}

.builder-section .resume-doc__exp-header {
	margin: 0;
}

/* Навыки в предпросмотре — сплошной перечень, запятые рисует CSS */
.builder-section .resume-doc__skills-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.builder-section .resume-doc__skill-block-title {
	margin-bottom: 2px;
}

.builder-section .resume-doc__skill-row {
	display: block;
}

.builder-section .resume-doc__skill:not(:last-child)::after {
	content: ', ';
	white-space: pre;
}


/* Модалка выбора формата выгрузки
   --------------------------------------------------------------------------
   Собрана по макетам Figma: 1:13844 (десктоп, карточка 600, две колонки с
   вертикальным разделителем) и 1:11364 (мобильный, строки с горизонтальным
   разделителем и скрытыми подсказками).

   Разметку выдаёт renderExportModal() в js/resume-builder.js — одна и та же
   для модалки в карточке примера и в конструкторе.

   Окно монтируется в document.body, то есть вне .resumes-shell, поэтому
   .resumes-export-overlay добавлен в список селекторов, где объявляются
   токены --c-* (css/resumes.css). Селекторы кнопок начинаются с этого же
   класса: в css/colors/default.css родительской темы есть правило
   button, [type="button"] { background: ... } той же специфичности.
   -------------------------------------------------------------------------- */
.resumes-export-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(25, 28, 34, 0.45);
}

.resumes-export-overlay[hidden] {
	display: none !important;
}

.resumes-export {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px 32px 32px;
	border-radius: 24px;
	background: var(--c-surface-container-low);
	color: var(--c-on-surface-variant);
	font-family: 'Roboto', Arial, sans-serif;
}

/* Шапка
   -------------------------------------------------------------------------- */
.resumes-export__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.resumes-export__head-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.resumes-export__title {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
	color: var(--c-on-surface-variant);
}

/* Standard icon button по M3: контейнер 40px, иконка 24px, подсветка —
   state layer поверх прозрачного фона (hover 8%, focus 10% от цвета иконки),
   а не заливка контейнера. Цвет иконки — M3/sys/light/on-surface-variant
   (#424753), это --c-on-surface-variant-2; у текста в этом окне другой токен,
   Schemes/On Surface Variant (#49454f), и их легко перепутать. */
.resumes-export-overlay .resumes-export__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -4px -8px -4px 0;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: var(--c-on-surface-variant-2);
	cursor: pointer;
}

/* Три класса в селекторе — не для красоты. В css/colors/default.css есть
   правило «button:focus, [type=button]:focus { background:#0F1012; color:#fff }»
   специфичности (0,2,0); файл подключается позже, поэтому при ничьей
   выигрывает он и кнопка чернеет. Здесь (0,4,0) — ничьей нет.

   Обязательно перекрываем именно :focus: при открытии окна фокус уходит на
   крестик программно, :focus-visible при этом не ставится, а правило темы
   срабатывает. Вид при таком фокусе — обычный, подсветка только для
   клавиатуры (:focus-visible) и наведения. */
.resumes-export-overlay .resumes-export .resumes-export__close:focus {
	background: transparent;
	color: var(--c-on-surface-variant-2);
}

.resumes-export-overlay .resumes-export .resumes-export__close:hover {
	background: rgba(66, 71, 83, 0.08);
	color: var(--c-on-surface-variant-2);
}

.resumes-export-overlay .resumes-export .resumes-export__close:focus-visible {
	background: rgba(66, 71, 83, 0.1);
	color: var(--c-on-surface-variant-2);
}

.resumes-export__lead {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	color: var(--c-on-surface-variant);
}

/* Две колонки: PDF и Word
   -------------------------------------------------------------------------- */
.resumes-export__body {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.resumes-export__group {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.resumes-export__divider {
	flex: 0 0 1px;
	align-self: stretch;
	background: var(--c-outline-variant);
}

.resumes-export__kind {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.resumes-export__kind-icon {
	display: block;
	width: 48px;
	height: 48px;
}

.resumes-export__kind-label {
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	text-align: center;
	color: var(--c-on-surface-variant);
}

.resumes-export__options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.resumes-export__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.resumes-export-overlay .resumes-export__btn {
	/* По макету кнопка ровно 56px вместе с рамкой, поэтому высоту держит
	   min-height, а вертикальный паддинг маленький: иначе 16 + 24 + 16 + 2px
	   рамки дают 58. Подпись центрируется флексом и может переноситься на
	   узких экранах — тогда кнопка растёт. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	padding: 8px 24px;
	border: 1px solid var(--c-outline-variant);
	border-radius: 16px;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.15px;
	color: var(--c-on-surface-variant);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* Обычный вид при программном фокусе — иначе кнопку зачернит тема. */
.resumes-export-overlay .resumes-export .resumes-export__btn:focus {
	border-color: var(--c-outline-variant);
	color: var(--c-on-surface-variant);
	background: transparent;
}

.resumes-export-overlay .resumes-export .resumes-export__btn:hover,
.resumes-export-overlay .resumes-export .resumes-export__btn:focus-visible {
	border-color: var(--c-primary);
	color: var(--c-primary);
	background: transparent;
}

.resumes-export-overlay .resumes-export__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.resumes-export__hint {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	text-align: center;
	color: var(--c-on-surface-variant);
}

/* Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.builder-section .builder-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Полоса выбора специальности встаёт в колонку, липкость снимается:
	   прилипшие две карточки заняли бы треть экрана. */
	.builder-section .builder-header--constructor {
		position: static;
		flex-direction: column;
		padding-top: 0;
	}

	/* В колонке свободного места не остаётся, и space-between прижимает
	   подпись к полю вплотную. Зазор — те же 16, что у карточки полноты. */
	.builder-section .builder-prof-card {
		flex: 0 0 auto;
		max-width: none;
		gap: 16px;
	}

	/* Липкости нет — те же 24 отдаём отступу секции. */
	.resumes-builder-page .resumes-builder-wrap {
		padding-top: 24px;
	}

	/* Заголовок и индикатор встают друг под друга, и зазор между ними в
	   макете 16, а не 24, как в строку на десктопе (узел 1:12991). */
	.builder-section .builder-completeness-panel {
		gap: 16px;
	}

	.builder-section .builder-completeness-panel__meter {
		flex-basis: 100%;
		max-width: none;
	}

	/* В одну колонку предпросмотр идёт сразу за формой и прокручивается
	   вместе со страницей (узел 1:13375 — 1682px без внутренней полосы).
	   Ограничение в 1500px оставило бы на телефоне скролл внутри скролла. */
	.builder-section .builder-preview__scroll {
		max-height: none;
	}
}

@media (max-width: 768px) {
	/* Переключатель шаблонов
	   ----------------------------------------------------------------------
	   Сегментированная кнопка в строку не влезает, и в мобильном макете на её
	   месте стоит список радиокнопок (узлы 1:12996–1:13005): строка 48,
	   кружок 20 в области нажатия 48×48, подпись body-large в 56 от края.

	   Разметку выдаёт js/resume-builder.js одними и теми же <button>, поэтому
	   кружок рисуется на ::before, а галочка выбранного сегмента гасится. */
	.builder-section .builder-preset-chips {
		flex-direction: column;
		align-items: stretch;
		height: auto;
	}

	.builder-section .builder-preset-chip {
		flex: 0 0 auto;
		justify-content: flex-start;
		gap: 0;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 16px;
		line-height: 20px;
		font-weight: 400;
		letter-spacing: 0.5px;
		color: var(--c-on-surface-variant);
	}

	/* Скруглений и правой рамки у крайних сегментов больше нет: их правила
	   заданы через :first-child / :last-child и сильнее сброса выше. */
	.builder-section .builder-preset-chip:first-child,
	.builder-section .builder-preset-chip:last-child {
		border-width: 0;
		border-radius: 0;
	}

	/* Поля 14 слева и 22 справа: кружок остаётся по центру области нажатия,
	   а подпись встаёт ровно в 56 от края карточки. */
	.builder-section .builder-preset-chip::before {
		content: '';
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin: 0 22px 0 14px;
		border: 2px solid var(--bld-outline);
		border-radius: 100px;
		background: none;
	}

	.builder-section .builder-preset-chip--active {
		background: none;
		color: var(--c-on-surface-variant);
	}

	.builder-section .builder-preset-chip--active::before {
		border-color: var(--c-primary);
		background: radial-gradient(circle at 50% 50%, var(--c-primary) 0 5px, transparent 5px);
	}

	.builder-section .builder-preset-chip__check,
	.builder-section .builder-preset-chip--active .builder-preset-chip__check {
		display: none;
	}

	/* Подсветки сегмента у радиокнопки нет. Селекторы из трёх классов —
	   чтобы перебить правила темы для button:hover (см. выше). */
	.builder-section .builder-preset-chips .builder-preset-chip:hover,
	.builder-section .builder-preset-chips .builder-preset-chip:focus,
	.builder-section .builder-preset-chips .builder-preset-chip--active:hover,
	.builder-section .builder-preset-chips .builder-preset-chip--active:focus {
		background: none;
		color: var(--c-on-surface-variant);
	}

	.builder-section .builder-exp-period-row,
	.builder-section .dob-row,
	.builder-section .period-selects {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Окончание работы: в макете «текущее место» стоит между подписью и
	   списками (узлы 1:13211, 1:13212, 1:13215), а не справа от них.
	   display:contents вынимает подпись и списки из обёртки, чтобы их можно
	   было переставить через order, не трогая разметку. */
	.builder-section .builder-exp-period-end {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.builder-section .builder-exp-period-end .builder-exp-period {
		display: contents;
	}

	.builder-section .builder-exp-period-end .builder-subblock__title {
		order: 1;
	}

	.builder-section .builder-exp-period-end .current-job-label {
		order: 2;
		flex: 0 0 auto;
	}

	.builder-section .builder-exp-period-end .period-selects {
		order: 3;
	}

	/* Язык: поле и крестик в одной строке, уровень — под ними (узел 1:13350).
	   Крестик лежит внутри .lang-level-group, поэтому группа раскрывается
	   через display:contents, и обе её части становятся ячейками сетки. */
	.builder-section .lang-block {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 48px;
		align-items: center;
		gap: 16px;
	}

	.builder-section .lang-block .lang-name {
		grid-column: 1;
		grid-row: 1;
	}

	.builder-section .lang-level-group {
		display: contents;
	}

	.builder-section .lang-remove {
		grid-column: 2;
		grid-row: 1;
	}

	.builder-section .lang-level-field {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 255px;
		max-width: 100%;
	}
}

/* Модалка на телефоне: строки вместо колонок, подсказки под кнопками в макете
   скрыты (узлы 1:11381, 1:11384, 1:11402, 1:11405). */
@media (max-width: 560px) {
	.resumes-export {
		padding: 20px;
		border-radius: 28px;
	}

	.resumes-export__body {
		flex-direction: column;
		gap: 24px;
	}

	.resumes-export__group {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.resumes-export__kind {
		flex: 0 0 auto;
		width: min(138px, 40%);
	}

	.resumes-export__options {
		flex: 1 1 0;
		min-width: 0;
	}

	.resumes-export__divider {
		flex: 0 0 1px;
		width: 100%;
		align-self: auto;
	}

	.resumes-export__hint {
		display: none;
	}

	/* На 320px правая колонка ужимается примерно до 100px — при паддинге 24
	   подпись «Оформленное» обрезалась бы. */
	.resumes-export-overlay .resumes-export__btn {
		padding: 8px 12px;
	}
}

@media (max-width: 560px) {
	.resumes-builder-wrap {
		padding: 32px 0;
	}

	/* Поля карточек на телефоне 12 по бокам: 343 снаружи — 319 внутри группы —
	   295 внутри подкарточки (узлы 1:13025, 1:13027, 1:13178, 1:13300).
	   Вертикальные отступы те же, что на десктопе. */
	.builder-section .builder-group {
		padding: 20px 12px;
	}

	.builder-section .builder-subblock,
	.builder-section .builder-exp-block {
		padding: 16px 12px 20px;
	}

	/* Подкарточки без собственной подписи начинаются с 20 сверху
	   (узлы 1:13300, 1:13347). */
	.builder-section .builder-skill-category,
	.builder-section .builder-lang-card {
		padding: 20px 12px;
	}

	/* Панель действий (узел 1:13435): «Копировать текст» и «Скачать» остаются
	   в одной строке, «Разместить на Praca.by» уходит во всю ширину под них.
	   Между строками 24, внутри строки 12. Разделителя сверху на телефоне нет
	   — в макете он выключен (узел 1:13434). */
	.builder-section .builder-actions {
		justify-content: flex-start;
		column-gap: 12px;
		row-gap: 24px;
		border-top: 0;
	}

	.builder-section .builder-actions .btn--ghost {
		order: 1;
		flex: 0 1 auto;
	}

	.builder-section .builder-actions .btn--primary {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
	}

	.builder-section .builder-actions .btn--register {
		order: 3;
		width: 100%;
		margin-right: 0;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Ошибки полей
   --------------------------------------------------------------------------
   В макете состояний ошибки нет — валидации в конструкторе не было вовсе.
   Оформление собрано по правилам Material 3: рамка и подпись цветом error,
   подпись body-small под полем. Селекторы в три класса — иначе родительская
   тема перебивает цвет рамки (см. комментарий у .resumes-btn). */
.builder-section .builder-form input[aria-invalid='true'],
.builder-section .builder-form select[aria-invalid='true'],
.builder-section .builder-form textarea[aria-invalid='true'] {
	border-color: var(--c-error);
}

.builder-section .builder-form input[aria-invalid='true']:focus,
.builder-section .builder-form select[aria-invalid='true']:focus,
.builder-section .builder-form textarea[aria-invalid='true']:focus {
	border-color: var(--c-error);
}

.builder-section .builder-field-error {
	display: block;
	margin-top: 4px;
	color: var(--c-error);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
}

/* Сообщение у группы чекбоксов и у блоков, где поля нет как такового. */
.builder-section .builder-field-error--block {
	margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.builder-section .builder-completeness__fill,
	.builder-section .builder-form__field > input + label,
	.builder-section .builder-form__field > select + label,
	.builder-section .builder-form__field > textarea + label {
		transition: none;
	}
}