/* ===================== ПРИЗНАК `hidden` ОБЯЗАН ПРЯТАТЬ =====================
   Это не оформление, а восстановление смысла признака.

   Браузер выполняет `hidden` правилом `[hidden]{display:none}` из своего
   листа, и любое авторское правило `display` его отменяет. В разделе таких
   правил три: `.fnc-vac{display:flex}`, `.field__ask{display:flex}`
   и `.fnc-state{display:flex}`. Из-за них отбор считал верно — счётчик
   «4 вакансии», — а на экране стояли все четырнадцать; ошибка «Выберите
   город из списка.» висела при пустом поле; пустое состояние «По этому
   запросу вакансий нет.» стояло рядом с четырнадцатью карточками.
   Находка восьмого прохода 25.09.2026, пункт 1.

   `!important` здесь оправдан: правило браузера сильнее любого нашего
   по смыслу, и наши правила раскладки не должны его перебивать. Каждое
   новое `display` в разделе иначе заводит ту же ошибку заново. */
[hidden]{display:none !important}

/*
 * Правила верха выдачи (`res-top`, заголовок, счётчик, пояснение, строка
 * условий) и панели «Вы отвечали» живут в одном месте — в файле передачи,
 * под именами `fnc-`. Здесь их больше нет: до 21.09.2026 `res__*` были
 * описаны дважды, и правка одного файла не доезжала до другого.
 */
/* ============================================================
   Fincer — узлы раздела вакансий. Новый стиль.
   Перенесено из `vacancy-nodes.html` передачи дизайна от 18.09.2026.

   Все правила напечатаны с областью `.jobv` — обёрткой раздела. Так
   новый стиль не задевает остальной сайт, а классы остаются такими,
   какими переданы: переименовывать их незачем, а разметку это сохраняет
   один в один.

   Из переданного файла не перенесено служебное: каркас страницы приёмки
   (`.doc`, `.node`, `.sizes`, `.size`), рамки макетов (`.screen*`),
   подписи состояний (`.state-label`) и демонстрационная сетка выдачи
   (`.grid-desktop`, `auto-fit`). Раскладка выдачи берётся с экранов —
   три колонки, как сказано в оглавлении передачи.

   Своих чисел и своих цветов в файле нет: только ссылки на `tokens.css`.
   ============================================================ */

/* ---------- область раздела ---------- */
.jobv{box-sizing:border-box;color:var(--c-text-1);font-family:var(--font-text);
  font-size:var(--fs-body);line-height:var(--lh-body);padding-top:var(--s-24)}
.jobv *,.jobv *::before,.jobv *::after{box-sizing:border-box}
.jobv a{color:var(--c-accent-for-white-text);text-decoration:none}
.jobv a:hover{color:var(--c-accent-for-white-text-active);text-decoration:underline}
.jobv p{margin:0}
/* Заголовки в области раздела своих полей не имеют: расстояния задаёт
   промежуток раскладки, а не поле заголовка. Замер 24.09.2026 на странице
   вакансии: у H1 осталось общесайтовое `margin-bottom: 20px`, и до дохода
   выходило 28 — 20 плюс промежуток 8. Числа 28 в шкале нет, и взяться ему
   неоткуда: оно сложилось из двух источников, спорящих за одно расстояние. */
.jobv h1,.jobv h2,.jobv h3,.jobv h4,.jobv h5,.jobv h6{margin:0}
.jobv code, .jobv .mono{font-family:var(--font-mono);font-size:var(--fs-body-sm)}
.jobv .overline{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-overline);
  line-height:var(--lh-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--c-text-2)}
.jobv .h1{font-family:var(--font-head);font-weight:var(--fw-extrabold);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);margin:0}
.jobv .h2{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);margin:0}
.jobv .h3{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);margin:0}
.jobv .h4{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);margin:0}
.jobv .h5{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5);margin:0}
.jobv .lead{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .small{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;text-wrap:pretty}
.jobv .caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)}
.jobv .btn{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-button);line-height:var(--lh-button);
  border:none;border-radius:var(--r-pill);min-height:var(--btn-h);padding:0 var(--s-24);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);cursor:pointer;
  transition:background var(--dur-base) var(--ease-out)}
.jobv .btn--primary{background:var(--c-accent);color:var(--c-text-1)}
.jobv .btn--primary:hover{background:var(--c-accent-hover)}
.jobv .btn--primary:active{background:var(--c-accent-active)}
.jobv .btn--secondary{background:var(--c-bg-1);color:var(--c-accent-for-white-text);border:var(--bw-15) solid var(--c-accent-for-white-text)}
.jobv .btn--secondary:hover{background:var(--c-accent-bg)}
.jobv .btn--quiet{background:var(--c-bg-1);color:var(--c-text-2);border:var(--bw-1) solid var(--c-border-strong)}
.jobv .btn--second{background:var(--c-second);color:var(--c-text-inverse)}
.jobv .btn--second:hover{background:var(--c-second-hover)}
.jobv .btn--block{width:100%}
/* Правило запертой кнопки снято 19.09.2026: правило 2.2 запрещает
   недоступные кнопки, запертых элементов на восьми страницах раздела ноль,
   и оформление для состояния, которого нет, оставалось мёртвым. Заодно
   оно единственным не проходило по контрасту — 2,94 : 1. */
.jobv .btn:focus, .jobv .link:focus, .jobv .opt:focus-within,
.jobv .field__box:focus-within, .jobv .fchip:focus, .jobv .more__sum:focus,
.jobv .is-focus{outline:var(--bw-2) solid var(--c-border-focus);
  outline-offset:var(--s-2)}
.jobv .link{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-button);line-height:var(--lh-button);
  color:var(--c-accent-for-white-text);min-height:var(--tap-min);display:inline-flex;align-items:center;
  padding:0 var(--s-8);border-radius:var(--r-8)}
.jobv .link--back{gap:var(--s-8);color:var(--c-text-2)}
/* ---------- узел 1: карточка вакансии ---------- */
/*
 * Правил карточки здесь больше нет: они живут в одном месте —
 * `vacancy-section.css`, блок карточки из итоговой передачи, под именами
 * `fnc-`. Разметка узла печатает те же имена, и второго описания карточки
 * в разделе не существует.
 *
 * До 21.09.2026 карточка была описана дважды: наши `.jobv .vac*` и
 * переданные `.fnc-vac*`. Шестнадцать объектов, двадцать пять правил у нас
 * и двадцать четыре в передаче — правка одного файла молча не доезжала
 * до другого. Правило 7в.1: одно имя — один компонент.
 *
 * Ниже остаётся только то, чего в передаче нет вовсе.
 */

/*
 * «Обратите внимание» — наш блок, в передаче его нет. Появился живыми
 * проходами: в нём стоят расхождения с ответами и фразы требований, без
 * которых человек не понимает, почему вакансия ниже других. Имя своё,
 * чтобы не столкнуться с `fnc-vac__note` передачи — там это строка про
 * замену у недоступной вакансии, другой объект.
 */
.jobv .fnc-vac__care{background:var(--c-bg-3);border-radius:var(--r-12);padding:var(--s-12);
  display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .fnc-vac__care-t{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);
  line-height:var(--lh-body-sm);color:var(--c-text-2)}
.jobv .fnc-vac__care-list{margin:0;padding-left:var(--s-20);display:flex;flex-direction:column;gap:var(--s-4);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)}
.jobv .fnc-vac--on .fnc-vac__care,
.jobv .fnc-vac--gone .fnc-vac__care{background:var(--c-bg-1)}

/*
 * Просмотренная карточка и строка про предел выбора — тоже наши: в передаче
 * состояние «уже переходили» несёт только плашка, а предел объясняется
 * в прилипающей панели.
 */
.jobv .fnc-vac--viewed{border-color:var(--c-border-2)}
.jobv .fnc-vac__limit{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)}
/* ---------- узел 2: группа результата ---------- */
.jobv .group{display:flex;flex-direction:column;gap:var(--s-12)}
.jobv .group+.group{border-top:var(--bw-1) solid var(--c-border-2);padding-top:var(--s-24);margin-top:var(--s-8)}
.jobv .group__head{display:flex;align-items:baseline;gap:var(--s-8);flex-wrap:wrap}
.jobv .group__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);margin:0}
.jobv .group__count{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-3)}
.jobv .group--empty .group__title{color:var(--c-text-3)}
.jobv .group__empty{border:var(--bw-1) dashed var(--c-border-strong);border-radius:var(--r-12);padding:var(--s-16);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3)}
/* ---------- узел 3: полоса шагов ---------- */
.jobv .steps{display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .steps__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.jobv .steps__label{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.jobv .steps__track{height:var(--s-8);background:var(--c-border-1);border-radius:var(--r-pill);overflow:hidden;display:flex;gap:var(--s-4)}
.jobv .steps__seg{flex:var(--fw-regular) var(--fw-regular) var(--s-2);background:var(--c-border-1);border-radius:var(--r-pill)}
.jobv .steps__seg--done{background:var(--c-border-strong)}
.jobv .steps__seg--now{background:var(--c-accent)}
.jobv .steps__dots{display:flex;align-items:center;gap:var(--s-12)}
.jobv .steps__dot{display:flex;align-items:center;gap:var(--s-8);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);white-space:nowrap}
.jobv .steps__num{width:var(--control-box);height:var(--control-box);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--fw-bold);
  font-size:var(--fs-caption);background:var(--c-bg-3);color:var(--c-text-2)}
.jobv .steps__dot--done .steps__num{background:var(--c-neutral-bg);color:var(--c-neutral)}
.jobv .steps__dot--done{color:var(--c-text-2)}
.jobv .steps__dot--now .steps__num{background:var(--c-accent);color:var(--c-text-1)}
.jobv .steps__dot--now{color:var(--c-text-1);font-weight:var(--fw-bold)}
.jobv .steps__rule{flex:var(--fw-medium) var(--fw-medium) var(--s-32);height:0;border-top:var(--bw-1) solid var(--c-border-2)}
/* ---------- узел 4: экран вопроса ---------- */
.jobv .q{display:flex;flex-direction:column;gap:var(--s-20)}
.jobv .q__head{display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .q__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);margin:0}
.jobv .q__sub{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;text-wrap:pretty}
/* Просьба заполнить по правилу 2.2 — класс `.ask` с экранов уточнений. */
.jobv .ask{display:flex;gap:var(--s-8);align-items:flex-start;background:var(--c-error-bg);border-radius:var(--r-12);
  padding:var(--s-12);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-error);margin:0;
  max-width:var(--vac-card-max)}
.jobv .q__opts{display:flex;flex-direction:column;gap:var(--s-8);margin:0;padding:0;border:none}
.jobv .q__opts--fold{max-height:calc((var(--option-h) + var(--s-8)) * var(--opt-visible));overflow-y:auto}
.jobv .opt{display:flex;align-items:center;gap:var(--s-12);min-height:var(--option-h);background:var(--c-bg-1);
  border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-12);padding:var(--s-12) var(--s-16);cursor:pointer}
.jobv .opt:hover{border-color:var(--c-accent-for-white-text)}
.jobv .opt input{position:absolute;opacity:var(--z-base);width:var(--s-2);height:var(--s-2);margin:0}
.jobv .opt__mark{width:var(--control-box);height:var(--control-box);flex:0 0 auto;border:var(--bw-2) solid var(--c-border-strong);
  background:var(--c-bg-1);display:flex;align-items:center;justify-content:center}
.jobv .opt__mark--radio{border-radius:var(--r-pill)}
.jobv .opt__mark--check{border-radius:var(--r-4)}
.jobv .opt__text{font-size:var(--fs-body);line-height:var(--lh-body)}
.jobv .opt__glyph{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption)}

/* ---------- вид отмеченного варианта: от самого поля ----------
   Переписано 19.09.2026 по находке живого прохода. Прежде вид отмеченного
   давал только класс `opt--on`, который ставит сервер: до отправки формы
   нажатие ничего не меняло, человек жал второй раз и снимал свой же выбор,
   а вариант «Неважно» продолжал выглядеть выбранным после снятия.

   Правила класса `opt--on` сняты целиком: состояние обязано следовать
   за самим полем, иначе у него два источника и они расходятся. Сервер
   по-прежнему печатает у выбранного `checked`, поэтому после ответа вид
   верный и без этого класса.

   Знак отметки печатается всегда и скрыт прозрачностью — так его
   появление ничего не двигает в раскладке. Плавности здесь нет намеренно:
   состояние должно меняться сразу, а не через долю секунды.

   Клетка и кружок меняются соседним правилом: работает во всех браузерах.
   Рамка и фон всего варианта — через `:has()`. Где его нет, остаётся знак
   отметки и закрашенная клетка, а это и есть главный признак. */
.jobv .opt__glyph{opacity:var(--z-base)}
.jobv .opt input:checked + .opt__mark{border-color:var(--c-accent-for-white-text);
  background:var(--c-accent-for-white-text);color:var(--c-text-inverse)}
.jobv .opt input:checked + .opt__mark .opt__glyph{opacity:1}
.jobv .opt:has(input:checked){border-color:var(--c-accent-for-white-text);border-width:var(--bw-2);
  background:var(--c-accent-bg);outline:none}
.jobv .opt:has(input:checked) .opt__text{font-weight:var(--fw-semibold)}
.jobv .q__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap}
.jobv .sticky{position:absolute;left:var(--z-base);right:var(--z-base);bottom:var(--z-base);
  background:var(--c-bg-1);border-top:var(--bw-1) solid var(--c-border-1);box-shadow:var(--sh-4);
  padding:var(--s-12) var(--s-16);display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);
  flex-wrap:nowrap;z-index:var(--z-sticky)}
.jobv .sticky__info{min-width:var(--z-base)}
.jobv .sticky>.btn{flex:0 0 auto}
.jobv .sticky__info{display:flex;flex-direction:column;gap:var(--s-2)}
.jobv .sticky__count{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5)}
.jobv .sticky__hint{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3);text-wrap:pretty}
.jobv .sticky__ghost{border:var(--bw-1) dashed var(--c-border-strong);border-radius:var(--r-12);padding:var(--s-16);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);text-align:center}
/* ---------- узел 6: карточка работодателя ---------- */
.jobv .emp{background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);
  box-shadow:var(--sh-2);padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-16);
  max-width:var(--vac-card-max)}
.jobv .emp__top{display:flex;gap:var(--s-12);align-items:flex-start}
.jobv .emp__logo{width:var(--logo-box);height:var(--logo-box);flex:0 0 auto;border-radius:var(--r-12);
  background-color:var(--c-bg-3);background-image:repeating-linear-gradient(135deg,var(--c-border-2) 0 var(--s-4),transparent var(--s-4) var(--s-8));
  display:flex;align-items:center;justify-content:center}
.jobv .emp__names{display:flex;flex-direction:column;gap:var(--s-2)}
.jobv .emp__legal{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)}
.jobv .emp__check{display:inline-flex;align-items:center;gap:var(--s-8);align-self:flex-start;background:var(--c-neutral-bg);
  color:var(--c-neutral);border-radius:var(--r-pill);padding:var(--s-4) var(--s-12);
  font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.jobv .emp__rows{display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .emp__row{display:flex;gap:var(--s-8);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.jobv .emp__row dt{color:var(--c-text-3);min-width:var(--s-64);margin:0}
.jobv .emp__row dd{margin:0;color:var(--c-text-2)}
.jobv .emp__row a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:var(--s-8) var(--s-4);
  margin:calc(var(--s-8) * -1) calc(var(--s-4) * -1);border-radius:var(--r-pill)}

/* ---------- узел 7: «Ничего не подошло» ---------- */
.jobv .miss{background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);
  box-shadow:var(--sh-2);padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-16);
  max-width:var(--vac-card-max)}
.jobv .chips{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0;padding:0;border:none}
.jobv .chip{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:var(--s-8) var(--s-16);
  border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-pill);background:var(--c-bg-1);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);cursor:pointer}
.jobv .chip:hover{border-color:var(--c-accent-for-white-text)}
.jobv .chip input{position:absolute;opacity:var(--z-base);width:var(--s-2);height:var(--s-2);margin:0}
.jobv .chip--on{background:var(--c-accent-bg);border-color:var(--c-accent-for-white-text);border-width:var(--bw-15);
  color:var(--c-text-1);font-weight:var(--fw-semibold)}

/* ---------- узел 8: пустые и особые состояния ---------- */
.jobv .state{background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);
  box-shadow:var(--sh-2);padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-12);
  max-width:var(--vac-card-max)}
.jobv .state__icon{width:var(--logo-box);height:var(--logo-box);border-radius:var(--r-pill);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-weight:var(--fw-extrabold);font-size:var(--fs-h4)}
.jobv .state__icon--neutral{background:var(--c-neutral-bg);color:var(--c-neutral)}
.jobv .state__icon--error{background:var(--c-error-bg);color:var(--c-error)}
.jobv .state__icon--warning{background:var(--c-warning-bg);color:var(--c-warning)}
.jobv .state__actions{display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:center}
.jobv .alt-head{display:flex;flex-direction:column;gap:var(--s-4)}

/* ============================================================
   ЭКРАНЫ: вход, три вопроса, уточнения (часть 2)

   Перенесено из `screen-entry.html`, `screen-question-1…3.html`
   и `screen-clarifications.html`. Служебное оттуда не бралось: заглушки
   оболочки (`.shell*`), пунктирные границы области (`.edge*`), подписи
   и заметки страниц приёмки (`.notes`, `.measure`, `.block`).

   Не перенесено и то, что требует скриптов: подсказка городов
   (`.sugg*`), крестик очистки поля и его открытое состояние. Воронка
   работает без единой строки скриптов, город выбирается списком.
   ============================================================ */

/* ---------- вход в подбор ---------- */
.jobv .hero{display:flex;flex-direction:column;gap:var(--s-20);max-width:var(--vac-card-max)}
/* На телефоне заголовок входа набран размером H2, на десктопе H1.
   В макетах это два класса — `hero__title` и `hero__title--compact`, —
   но в продукте разметка одна на оба размера, поэтому меньший размер
   стоит по умолчанию, а больший приходит медиазапросом. */
.jobv .hero__title{font-family:var(--font-head);font-weight:var(--fw-extrabold);font-size:var(--fs-h2);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2);margin:0;text-wrap:pretty}
.jobv .hero__lead{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .hero__cta{display:flex;flex-direction:column;gap:var(--s-8);align-items:stretch}
.jobv .hero__cta .btn{width:100%}
.jobv .hero__legal{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;
  padding-top:var(--s-16);border-top:var(--bw-1) solid var(--c-border-1);text-wrap:pretty}

/* ---------- поле города ---------- */
.jobv .field{display:flex;flex-direction:column;gap:var(--s-8);position:relative;max-width:var(--field-max)}
.jobv .field__label{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);
  line-height:var(--lh-body-sm);color:var(--c-text-2)}
.jobv .field__box{display:flex;align-items:center;gap:var(--s-12);min-height:var(--field-h);background:var(--c-bg-1);
  border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-12);padding:0 var(--s-16);box-shadow:var(--sh-1)}
.jobv .field__box--ask{border-color:var(--c-error);border-width:var(--bw-2)}
/* Список подходящих городов при неоднозначном вводе: плашки в строку,
   вид от фильтров витрины — своего оформления не заводим. */
.jobv .field__choices{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-8)}
.jobv .field__hint{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0}
.jobv .field__ask{display:flex;gap:var(--s-8);align-items:flex-start;background:var(--c-error-bg);border-radius:var(--r-12);
  padding:var(--s-12);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-error);margin:0}
.jobv .field__ask-mark,
.jobv .ask__mark{font-family:var(--font-head);font-weight:var(--fw-bold);flex:0 0 auto}

/* Поле ввода внутри переданной коробки. В макете значение — просто текст,
   потому что подсказка там нарисована своей разметкой; у нас это настоящее
   поле с `datalist`, и его рамку и заливку снимаем: рамку рисует коробка. */
.jobv .field__box input,
.jobv .field__box select{flex:1 1 auto;min-width:var(--z-base);min-height:var(--field-h);border:none;background:none;
  color:var(--c-text-1);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);
  padding:0;margin:0}
.jobv .field__box input::placeholder{color:var(--c-text-3)}
.jobv .field__box input:focus,
.jobv .field__box select:focus{outline:none}

/* Открытое состояние поля. В макете оно приходило классом `field__box--open`
   и срезало нижние скругления, потому что список был нарисован своей
   разметкой и приклеен к полю. Подсказку рисует браузер, приклеить к ней
   ничего нельзя, поэтому от открытого состояния берём видимую часть —
   рамку цвета фокуса. Скругления не срезаем: срезать их под список,
   которого в нашей разметке нет, значило бы обещать несуществующее. */
.jobv .field__box:focus-within{border-color:var(--c-border-focus);border-width:var(--bw-2)}

/* Крестик очистки: у нас это кнопка отправки — поле чистит сервер. */
.jobv .field__clear{margin-left:auto;min-width:var(--tap-min);min-height:var(--tap-min);border:none;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-text-3);
  font-family:var(--font-head);font-size:var(--fs-h5);line-height:var(--lh-h5);border-radius:var(--r-pill)}
.jobv .field__clear:hover{color:var(--c-text-1)}

/* ---------- заголовок экрана вместо полосы шагов ---------- */
.jobv .head{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--vac-card-max)}
.jobv .head__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);margin:0;text-wrap:pretty}
.jobv .head__sub{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;text-wrap:pretty}

/* ---------- одно уточнение ---------- */
.jobv .cl{display:flex;flex-direction:column;gap:var(--s-16);max-width:var(--vac-card-max)}
.jobv .cl--wide{max-width:var(--content-max)}
.jobv .cl__title{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h5);line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);margin:0}
.jobv .cl__note{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;text-wrap:pretty}
.jobv .cl--ask .cl__opts .opt{border-color:var(--c-error)}
.jobv .cl__opts{border:none;margin:0;padding:0;display:grid;gap:var(--s-12);
  grid-template-columns:repeat(1,minmax(0,1fr))}
.jobv .cl__opts--compact{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- подвал экрана ---------- */
.jobv .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);flex-wrap:wrap;
  padding-top:var(--s-8);border-top:var(--bw-1) solid var(--c-border-1);max-width:var(--content-max)}
.jobv .foot--stack{flex-direction:column-reverse;align-items:stretch;gap:var(--s-12);max-width:var(--vac-card-max)}
.jobv .foot--stack .link{align-self:flex-start}

/* ---------- варианты ответа: «Неважно» стоит отдельно ---------- */
.jobv .opt--apart{grid-column:1 / -1;margin-top:var(--s-16)}
.jobv .opt__group{grid-column:1 / -1;margin-top:var(--s-16);display:flex;flex-direction:column;gap:var(--s-4)}
.jobv .opt__group .opt--apart{margin-top:0}
.jobv .opt__warn{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;padding-left:var(--s-16)}

/* ---------- широкий вопрос, подвал в столбик ---------- */
.jobv .q--wide{max-width:var(--content-max)}
.jobv .q__foot--stack{flex-direction:column-reverse;align-items:stretch;gap:var(--s-12)}
.jobv .q__foot--stack .link{align-self:flex-start}

/* Кружки шагов с названиями — только на десктопе: в 375 точках три
   названия не помещаются, не теряя читаемости. На телефоне остаётся
   подпись «Шаг N из M» и полоса. Решение из разбора первого вопроса. */
.jobv .steps__dots{display:none}

/* ============================================================
   ЭКРАНЫ: результаты, выбранные, «Ничего не подошло» (часть 3)

   Перенесено из `screen-results.html`, `screen-selected.html`
   и `screen-miss.html`. Служебное не бралось: заглушки оболочки,
   границы области, подписи макетов.
   ============================================================ */

/* ---------- верх результатов ---------- */
.jobv .link--sm{font-size:var(--fs-body-sm);min-height:var(--tap-min)}
.jobv .res__cards{display:grid;gap:var(--s-16);grid-template-columns:minmax(0,1fr)}

/* ---------- сообщение о пересборе ---------- */
.jobv .updated{display:flex;gap:var(--s-8);align-items:center;background:var(--c-success-bg);color:var(--c-success);
  border-radius:var(--r-12);padding:var(--s-12) var(--s-16);font-family:var(--font-head);font-weight:var(--fw-semibold);
  font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--vac-card-max)}
.jobv .updated__mark{font-weight:var(--fw-bold)}

/* ---------- блок «Ничего не подошло» ---------- */
.jobv .miss__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);margin:0}
.jobv .miss__sub{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .follow{display:flex;flex-direction:column;gap:var(--s-12);background:var(--c-bg-2);border-radius:var(--r-12);
  padding:var(--s-16)}
.jobv .follow__q{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h5);line-height:var(--lh-h5);margin:0}
.jobv .follow__hint{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0}
.jobv .field__value{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.jobv .field__unit{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin-left:auto}
.jobv .opts{border:none;margin:0;padding:0;display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1fr)}

/* ---------- экран выбранных ---------- */
.jobv .sel__head{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--vac-card-max)}
.jobv .sel__h{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);margin:0}
.jobv .sel__lead{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .sel__list{display:flex;flex-direction:column;gap:var(--s-16)}
.jobv .sel{background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);box-shadow:var(--sh-2);
  padding:var(--s-20);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-12) var(--s-16);align-items:start}
.jobv .sel__num{width:var(--control-box);height:var(--control-box);border-radius:var(--r-pill);background:var(--c-bg-3);
  color:var(--c-text-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.jobv .sel__body{display:flex;flex-direction:column;gap:var(--s-12);min-width:var(--z-base)}
.jobv .sel__top{display:flex;flex-direction:column;gap:var(--s-4)}
.jobv .sel__emp{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)}
.jobv .sel__title{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);margin:0}
.jobv .sel__facts{margin:0;display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24)}
.jobv .sel__fact{display:flex;gap:var(--s-8);align-items:baseline}
.jobv .sel__fact dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3);margin:0}
.jobv .sel__fact dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.jobv .sel__income{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5)}
.jobv .sel__repl{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0}
.jobv .sel__side{grid-column:2;display:flex;flex-direction:column;gap:var(--s-8);align-items:flex-start}
/* Снятие из подборки: наше дополнение 19.09.2026, кнопка контурная
   и стоит под действием перехода. Своих чисел нет. */
.jobv .sel__drop{margin-top:var(--s-8)}
.jobv .sel__status{font-size:var(--fs-caption);line-height:var(--lh-caption);border-radius:var(--r-pill);
  padding:var(--s-4) var(--s-12);font-family:var(--font-head);font-weight:var(--fw-semibold)}
.jobv .sel__status--wait{background:var(--c-bg-3);color:var(--c-text-2)}
.jobv .sel__status--done{background:var(--c-neutral-bg);color:var(--c-neutral)}
.jobv .sel__status--gone{background:var(--c-neutral);color:var(--c-text-inverse)}
.jobv .sel__status--warn{background:var(--c-warning-bg);color:var(--c-warning);text-wrap:pretty}
.jobv .sel--done{border-color:var(--c-border-2);background:var(--c-bg-2)}
.jobv .sel--gone{background:var(--c-neutral-bg);box-shadow:var(--sh-1)}
.jobv .sel--gone .sel__title{color:var(--c-text-2)}
.jobv .sel__foot{padding-top:var(--s-8);border-top:var(--bw-1) solid var(--c-border-1)}

/* ---------- прошли всех работодателей ---------- */
.jobv .fin{background:var(--c-bg-2);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);
  padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-12);max-width:var(--vac-card-max)}
.jobv .fin__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);margin:0}
.jobv .fin__text{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .fin__links{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24)}

/* ============================================================
   СТРАНИЦА ВАКАНСИИ, СОСТОЯНИЯ ОШИБОК, СОХРАНЁННАЯ ССЫЛКА (часть 4)

   Перенесено из `screen-vacancy.html`, `screen-errors.html`
   и `screen-saved.html`. Служебное не бралось.
   ============================================================ */

/* ---------- страница вакансии ---------- */
.jobv .vacpage{display:flex;flex-direction:column;gap:var(--s-32);max-width:var(--vac-card-max)}
.jobv .vac__hero{display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .vac__act{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24);align-items:center;padding-top:var(--s-8)}
.jobv .sec{display:flex;flex-direction:column;gap:var(--s-12);padding-top:var(--s-24);
  border-top:var(--bw-1) solid var(--c-border-1)}
.jobv .sec__title{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h5);
  line-height:var(--lh-h5);letter-spacing:var(--ls-h5);margin:0}
.jobv .list,
.jobv .steps-list{margin:0;padding-left:var(--s-20);display:flex;flex-direction:column;gap:var(--s-8);
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2)}
.jobv .pairs{margin:0;display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .pair{display:flex;gap:var(--s-8);flex-wrap:wrap}
.jobv .pair dt{font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--c-text-3);
  min-width:var(--s-120);margin:0}
.jobv .pair dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-medium)}
.jobv .hint{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0;text-wrap:pretty}
.jobv .hint--full{background:var(--c-success-bg);color:var(--c-success);border-radius:var(--r-12);padding:var(--s-12)}
.jobv .external{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;
  background:var(--c-bg-3);border-radius:var(--r-12);padding:var(--s-12);text-wrap:pretty}

/* ---------- недоступная вакансия ---------- */
.jobv .gone{display:flex;flex-direction:column;gap:var(--s-8);align-items:flex-start;background:var(--c-neutral-bg);
  border-radius:var(--r-12);padding:var(--s-12)}
.jobv .gone__badge{background:var(--c-neutral);color:var(--c-text-inverse);border-radius:var(--r-pill);
  padding:var(--s-4) var(--s-12);font-family:var(--font-head);font-weight:var(--fw-bold);
  font-size:var(--fs-caption);line-height:var(--lh-caption)}
.jobv .gone__text{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)}
.jobv .vacpage--gone .vak__title,
.jobv .vacpage--gone .vak__income{color:var(--c-text-2)}

/* ---------- состояния ошибок ---------- */
.jobv .state__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);
  line-height:var(--lh-h5);letter-spacing:var(--ls-h5);margin:0;text-wrap:pretty}
.jobv .state__text{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .state__act{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24);align-items:center;padding-top:var(--s-4)}
.jobv .vac__diff{margin:0;display:flex;align-items:center;gap:var(--s-8);font-size:var(--fs-body-sm);
  line-height:var(--lh-body-sm);color:var(--c-text-2);background:var(--c-bg-3);border-radius:var(--r-8);
  padding:var(--s-8) var(--s-12);align-self:flex-start}
.jobv .vac__diff::before{content:"≠";font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--c-text-3)}

/* ---------- сохранённая ссылка ---------- */
.jobv .saved__actual{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);
  background:var(--c-bg-3);border-radius:var(--r-12);padding:var(--s-12) var(--s-16);max-width:var(--vac-card-max)}
.jobv .save{display:flex;flex-direction:column;gap:var(--s-8);align-items:flex-start;
  border-top:var(--bw-1) solid var(--c-border-1);padding-top:var(--s-20);max-width:var(--vac-card-max)}
.jobv .save--done{flex-direction:column}
.jobv .save__done{display:inline-flex;align-items:center;gap:var(--s-8);background:var(--c-neutral-bg);
  color:var(--c-neutral);border-radius:var(--r-pill);padding:var(--s-8) var(--s-16);
  font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
/* Адрес подборки переносится: он одно слово из 78 знаков, и без переноса
   растягивал страницу — замер 19.09.2026 дал 245 точек прокрутки вбок
   на узком экране. Разрываем по любому знаку: адрес читают глазами
   и копируют целиком, красота переноса здесь не важна. */
.jobv .save code, .jobv [data-job-link]{overflow-wrap:anywhere;word-break:break-all;
  font-family:var(--font-mono);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.jobv .save__note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3);margin:0}

/* Ряд действий отправки. В передаче его нет — отправка в мессенджеры
   пришла решением владельца 18.09, — поэтому правило собственное,
   но числа и цвета по-прежнему только из переменных. */
.jobv .save__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-16)}
.jobv .save__label{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3)}

/* ============================================================
   ВИТРИНА: отбор плашками со счётчиками (часть 6)

   Перенесено из `screen-showcase.html` итоговой передачи от 18.09.2026.
   Новых переменных не понадобилось — так сказано и в её сводке.
   ============================================================ */

.jobv .sh__head{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--vac-card-max)}
.jobv .sh__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3);margin:0}
.jobv .sh__lead{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2);margin:0;text-wrap:pretty}
.jobv .sh__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-24);padding-top:var(--s-4)}
.jobv .sh__found{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  line-height:var(--lh-body)}
.jobv .sh__note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3);margin:0}

/* ---------- сам отбор ---------- */
.jobv .filter{display:flex;flex-direction:column;gap:var(--s-16);background:var(--c-bg-2);
  border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);padding:var(--s-16)}
.jobv .facet{display:flex;flex-direction:column;gap:var(--s-8)}
.jobv .facet__name{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-caption);
  line-height:var(--lh-caption);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--c-text-3)}
.jobv .facet__row{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.jobv .facet__row--more{padding-top:var(--s-8)}
.jobv .facet__note{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)}

/* ---------- плашка значения ---------- */
.jobv .fchip{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min);
  padding:var(--s-8) var(--s-16);background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-2);
  border-radius:var(--r-pill);color:var(--c-text-1);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  transition:border-color var(--dur-fast) var(--ease-out)}
.jobv .fchip:hover{border-color:var(--c-border-strong);text-decoration:none;color:var(--c-text-1)}
.jobv .fchip__n{font-family:var(--font-mono);font-size:var(--fs-caption);line-height:var(--lh-caption);
  color:var(--c-text-3)}
.jobv .fchip--on{background:var(--c-accent-bg);border-color:var(--c-accent-for-white-text);
  border-width:var(--bw-15);font-weight:var(--fw-semibold)}
.jobv .fchip--on .fchip__n{color:var(--c-text-2)}
.jobv .fchip__x{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--c-text-2)}

/* ---------- «Ещё N»: без скриптов, элементом `details` ---------- */
.jobv .more{align-self:flex-start}
.jobv .more__sum{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);
  line-height:var(--lh-body-sm);color:var(--c-accent-for-white-text);cursor:pointer;min-height:var(--tap-min);
  display:flex;align-items:center;padding:0 var(--s-4)}
.jobv .more__sum:hover{color:var(--c-accent-for-white-text-active)}

/* ---------- строка «Отобрано» ---------- */
.jobv .applied{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12)}
.jobv .applied__t{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3)}
.jobv .achip{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min);
  padding:var(--s-4) var(--s-16);background:var(--c-accent-bg);
  border:var(--bw-15) solid var(--c-accent-for-white-text);border-radius:var(--r-pill);color:var(--c-text-1);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-semibold)}
.jobv .achip:hover{text-decoration:none;color:var(--c-text-1);background:var(--c-bg-3)}
.jobv .achip__x{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--c-text-2)}

/* ---------- выдача витрины и страницы ---------- */
.jobv .paging{display:flex;flex-direction:column;gap:var(--s-8);align-items:flex-start;
  border-top:var(--bw-1) solid var(--c-border-1);padding-top:var(--s-20)}
.jobv .paging__pos{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)}

/* ---------- раскладка в продукте ----------
   Два места, где числа считаются иначе, чем на странице узлов, —
   пункт 5 оглавления передачи. Берём вариант с экранов. */

/* Отвесная раскладка области: узлы и экраны идут столбиком с одним
   расстоянием. На странице узлов эту роль играл служебный `.stack`,
   который в продукт не переносится. */
.jobv__stack{display:flex;flex-direction:column;gap:var(--s-24)}

/* Выдача: три предсказуемые колонки на десктопе, одна на телефоне. */
.jobv__grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--s-16)}

/* Короткие варианты — по два в ряд и на телефоне: список вдвое короче,
   и следующий вопрос попадает в видимую часть. Правило 3.3. */
.jobv .q__opts--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}

/* Прилипающая панель: в продукте она приклеена к окну, а не к блоку.
   В макетах стоит `position:absolute` внизу рамки экрана — так рамка
   изображает телефон. Перенести это как есть нельзя: на длинной выдаче
   панель оказалась бы внизу страницы, а не под рукой. Измерено на выдаче
   из двенадцати карточек: перекрытие с содержимым 1 949 точек. */
/* Панель встаёт над полосой согласия на cookie, а не под ней.
   Второй живой проход 19.09.2026: у нового посетителя полоса накрывала
   панель целиком — он не видел, что выбрал, и не мог идти дальше.
   Слоями спорить нельзя: у полосы 9999, и она обязана лежать выше шапки.
   Поэтому панель поднимается на высоту полосы — её отдаёт переменной
   `--fincer-cookie-h` сама полоса (`fincer-cleanup.php`). Полосы нет —
   переменной нет, и панель стоит по нижнему краю, как прежде.
   Правило было в снятом `vacancy.css` и при переносе дизайна потерялось. */
.jobv .sticky{position:fixed;left:var(--z-base);right:var(--z-base);
  bottom:var(--fincer-cookie-h,var(--z-base))}

/* Обёртка выдачи держит её отвесный ритм — тот же, что у `.jobv__stack`.
   До 24.09.2026 она была блочной и без промежутка вовсе: верх выдачи,
   группы, «Ничего не подошло» и блок сохранения стояли вплотную, ноль
   между ними. Промежуток внутри верха при этом был 16 — то есть блоки
   страницы разделялись хуже, чем строки внутри одного блока.

   Запас снизу под прилипающую панель снят: панели больше нет. Она жила
   на экране выбранных, выбор упразднён версией 2.3, сам блок панели
   удалён из кода 24.09.2026, а запас остался и держал внизу выдачи
   120 точек пустоты — 96 плюс 24. */
.jobv__stickywrap{display:flex;flex-direction:column;gap:var(--s-24);padding-bottom:0}

@media (min-width:1024px){
  .jobv{padding-top:var(--s-48)}
  .jobv__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24)}
  .jobv .q__opts--two{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Вопросы на десктопе: варианты строго по два в ряд — раскладка
     не завязана на их число, поэтому новые варианты не потребуют
     переверстки. Решение из разбора первого вопроса. */
  .jobv .q--wide .q__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}
  .jobv .q--wide .q__opts--fold{max-height:none;overflow:visible}
  .jobv .cl__opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jobv .cl__opts--compact{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Кружки шагов появляются на десктопе, подпись «Шаг N из M» остаётся
     справа от них — так в макете. */
  .jobv .steps__dots{display:flex}

  /* Заголовок входа на десктопе — H1, кнопка по содержимому: растянутая
     на широкой колонке читалась бы как полоса, а не как действие. */
  .jobv .hero__title{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
  .jobv .hero__cta{align-items:flex-start}
  .jobv .hero__cta .btn{width:auto}

  /* Подвал в столбик нужен только там, где подпись кнопки длинная
     и не встаёт в строку с возвратом. На десктопе места хватает. */
  .jobv .q__foot--stack,
  .jobv .foot--stack{flex-direction:row;align-items:center;justify-content:space-between}

  /* Выдача: три карточки в ряду. При 1440 колонка выходит 389 точек —
     в неё укладываются все строки карточки без переносов. */
  .jobv .res__cards{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Уточняющие варианты в блоке «Ничего не подошло» — по три в ряд. */
  .jobv .opts{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Выбранные: карточка становится строкой очереди. Сведения слева,
     действие и статус справа — номер, тело, колонка действий. */
  .jobv .sel{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .jobv .sel__side{grid-column:3;align-items:flex-end;text-align:right}
  .jobv .sel__facts{flex-wrap:nowrap}

  /* Страница вакансии: сама страница шириной области, а проза и верх —
     мерой строки. До этой правки строка выходила на 1 180 точек, около
     128 знаков при читаемой норме 60–90. */
  .jobv .vacpage{max-width:var(--content-max)}
  .jobv .vac__hero,
  .jobv .vacpage .sec{max-width:var(--vac-card-max)}

  /* Витрина: отбор просторнее, выдача по три карточки в ряд. */
  .jobv .filter{padding:var(--s-24);gap:var(--s-20)}
}

/* ---------- служебные блоки раннего этапа ----------
   Условия вакансии и карточка работодателя раскрываются по причинам
   «условия непонятны» и «не доверяю работодателю». Разметка их написана
   на раннем этапе служебной, без скриптов, и оформления у неё не было
   ни в снятом `vacancy.css`, ни здесь: в сетке карточек они показывались
   голыми списками. Одеты 19.09.2026 по решению владельца — по образцу
   сведений карточки, своих чисел и цветов нет.

   Плавную прокрутку в разделе отключаем: переход по якорю должен быть
   мгновенным. На остальных страницах сайта она остаётся — решение
   владельца. `:has()` держат те же браузеры, что и вид отметки. */
html:has(.jobv){scroll-behavior:auto}
.jobv .job-conditions, .jobv .job-employer{margin:var(--s-12) 0 0;padding:var(--s-12);
  background:var(--c-bg-3);border-radius:var(--r-12);display:grid;
  grid-template-columns:auto 1fr;gap:var(--s-4) var(--s-12);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.jobv .job-conditions dt, .jobv .job-employer dt{margin:0;color:var(--c-text-3);
  font-size:var(--fs-caption);line-height:var(--lh-caption)}
.jobv .job-conditions dd, .jobv .job-employer dd{margin:0;color:var(--c-text-1);font-weight:var(--fw-medium)}
/* Достоинства вакансии — фразами, списком, на той же подложке, что и пары
   условий: это один блок раскрытых условий, а не два разных. Маркер точкой,
   как в списке «Обратите внимание»: второго вида списка в разделе нет. */
.jobv .job-conditions__plus{margin:var(--s-12) 0 0;padding:var(--s-12) var(--s-12) var(--s-12) var(--s-32);
  background:var(--c-bg-3);border-radius:var(--r-12);list-style:disc;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-1)}
.jobv .job-conditions__plus li{margin:0}
/* Пары условий сразу под достоинствами — без второго верхнего промежутка:
   иначе между ними 24 точки вместо 12. */
.jobv .job-conditions__plus + .job-conditions{margin-top:var(--s-8)}
.jobv .job-conditions__none{margin:var(--s-12) 0 0;padding:var(--s-12);
  background:var(--c-bg-3);border-radius:var(--r-12);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)}

/* ---------- четвёртый уровень живого прохода, 19.09.2026 ----------
   Две мелочи размера, замеренные в браузере на витрине вакансий.

   1. Метки витрины (`.showcase__tag`) пришли из старого оформления
   с высотой 32 точки. Плашки отбора раздела — 44, как требует норма
   касания; метки стояли рядом и были ниже. Поднимаем до `--tap-min`,
   вид не меняем: та же скруглённая рамка, только выше.

   2. Вводный текст витрины. Блок `.entry-content--wide` намеренно
   без ограничения ширины — решение от 18.08.2026, край текста должен
   совпадать с сеткой карточек. Плата за него записана в `content.css`
   и в BACKLOG: полотном такой текст писать нельзя. На окне 1920 строка
   вышла 116 знаков при норме 60–90. Блок оставляем во всю ширину,
   меру ставим самим абзацам: заголовки, списки и сетка держат край
   прежним, читаемой становится только строка. Правило действует
   лишь на страницах с нашим разделом — `:has()` уже применён выше. */
.jobv .showcase__tag{min-height:var(--tap-min);height:auto}
.entry:has(.jobv) .entry-content--wide p{max-width:var(--measure)}

/* Подпись группы — та же мера, что у прочих пояснений раздела. Нужна
   группе «Доход назван не полностью»: без неё группа читается как
   «показали не подходящее». */
.jobv .group__hint{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--c-text-3);margin:0 0 var(--s-12);max-width:var(--measure);text-wrap:pretty}

/* ---------- «Неважно» снимается видимо, в момент нажатия ----------
   Второй живой проход 19.09.2026: сервер снимает общий вариант при
   отправке («конкретный выбор главнее»), но до отправки человек видел
   две отметки сразу и не понимал, что произойдёт.

   Скриптов здесь нет: правило читает состояние самих полей. Пока отмечен
   хотя бы один конкретный вариант, вариант в стороне («Неважно», «Особых
   требований нет») показывается снятым — ровно то, что сделает сервер.
   Обратная сторона правилом не нужна: снять конкретный выбор человек
   может сам, и сервер его не тронет.

   Порядок важен: правила стоят после общего вида отмеченного, иначе
   при равной силе побеждало бы оно. `:has()` держат те же браузеры,
   что и рамку отмеченного варианта; где его нет — остаётся прежнее
   поведение, то есть две отметки до отправки. */
.jobv fieldset:has(.opt:not(.opt--apart) input:checked) .opt--apart input:checked + .opt__mark{
  border-color:var(--c-border-strong);background:var(--c-bg-1);color:var(--c-text-1)}
.jobv fieldset:has(.opt:not(.opt--apart) input:checked) .opt--apart input:checked + .opt__mark .opt__glyph{
  opacity:var(--z-base)}
.jobv fieldset:has(.opt:not(.opt--apart) input:checked) .opt--apart:has(input:checked){
  border-color:var(--c-border-1);border-width:var(--bw-1);background:var(--c-bg-1)}
.jobv fieldset:has(.opt:not(.opt--apart) input:checked) .opt--apart:has(input:checked) .opt__text{
  font-weight:var(--fw-regular)}

/* ---------- верх страницы раздела: фотографии пока нет ---------- */
/*
 * Передача ставит блоку подбора две колонки на десктопе: слева текст,
 * справа фотография. Файла у нас нет — владелец его не сделал, — и пустая
 * половина экрана была бы хуже одной колонки. Пока картинки в разметке нет,
 * колонка одна; появится `.fnc-photo` — раскладка станет двухколонной сама,
 * правило передачи сработает как задумано, и править код не придётся.
 *
 * Селектор сильнее переданного (`.jobv` плюс `:not(:has())`), поэтому
 * порядок подключения листов роли не играет.
 */
@media (min-width:1024px){
  .jobv .fnc-hero:not(:has(.fnc-photo)){grid-template-columns:minmax(0,1fr)}
}

/* Фразы вакансии: требования и достоинства одним списком, и расхождения
   по мягким условиям. Раздел 10.1 версии 3.1: пар «признак — значение»
   на странице нет, достоинства называются фразами и здесь, и в карточке. */
.jobv .frazy{margin:var(--s-12) 0 0;padding:0 0 0 var(--s-20);list-style:disc;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-1)}
.jobv .frazy li{margin:0}
.jobv .vak__mismatch{margin:var(--s-8) 0 0;padding:0;list-style:none;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-error)}
.jobv .vak__mismatch li{margin:0}
/* Заголовок ряда категорий виден на экране, мелким — раздел 15.1 версии 3.1. */
.fnc-tags__title{display:block;padding:0;margin:0 0 var(--s-8);
  font-family:var(--font-head);font-weight:var(--fw-semibold);
  font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2)}