/* Каталог вакансий на ките: только хаб /vakansii/.
   Внутренние страницы каталога (профессии, города, компании и сами
   вакансии — почти пять тысяч штук) остались на jobs.css, поэтому
   правила здесь не должны пересекаться с ним по смыслу: этот файл
   подключается только на кит-странице. */

/* ── направления ──────────────────────────────────────────────── */
.kit .jb-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 22px; }
@media (max-width: 1000px) { .kit .jb-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kit .jb-dirs { grid-template-columns: 1fr; } }
.kit a.jb-dir { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.kit a.jb-dir:hover { border-color: #C7CEFA; box-shadow: var(--sh-2);
  transform: translateY(-2px); text-decoration: none; }
.kit .jb-dir b { font-size: 16px; font-weight: 600; color: var(--ink); }
.kit .jb-dir span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.kit .jb-dir .jb-cnt { margin-top: auto; padding-top: 6px; font-size: 12.5px;
  font-weight: 600; color: var(--brand-ink); font-variant-numeric: var(--num); }

/* ── ссылки-подборки (города, деньги, удалёнка, без опыта) ────── */
.kit .jb-hublinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 22px; }
@media (max-width: 900px) { .kit .jb-hublinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit .jb-hublinks { grid-template-columns: 1fr; } }
.kit .jb-hublinks a { display: block; padding: 12px 15px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2); color: var(--muted);
  font-size: 13px; line-height: 1.45; text-decoration: none;
  transition: border-color .15s, background .15s; }
.kit .jb-hublinks a:hover { border-color: #C7CEFA; background: var(--surface);
  text-decoration: none; }
.kit .jb-hublinks a b { display: block; margin-bottom: 2px; font-size: 15px;
  font-weight: 600; color: var(--ink); }
.kit .jb-hublinks a br { display: none; }

/* ── карточка вакансии ────────────────────────────────────────── */
.kit .jb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 22px; }
@media (max-width: 860px) { .kit .jb-list { grid-template-columns: 1fr; } }
.kit .jb-card { display: flex; gap: 14px; padding: 18px 20px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .15s, box-shadow .15s; }
.kit .jb-card:hover { border-color: #C7CEFA; box-shadow: var(--sh-2); }
.kit .jb-logo { width: 46px; height: 46px; border-radius: 10px; flex: none;
  object-fit: contain; background: #fff; border: 1px solid var(--border); }
.kit .jb-t { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.kit .jb-t a { color: var(--ink); text-decoration: none; }
.kit .jb-t a:hover { color: var(--brand); }
.kit .jb-sal { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: var(--num); }
.kit .jb-dev { padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px;
  font-weight: 600; background: var(--surface-2); color: var(--muted); }
.kit .jb-dev--up { background: var(--ok-bg); color: var(--ok-ink); }
.kit .jb-dev--down { background: var(--bad-bg); color: var(--bad-ink); }
.kit .jb-emp { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.kit .jb-emp a { color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border); }
.kit .jb-emp a:hover { color: var(--brand); border-color: var(--brand); }
.kit .jb-snip { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.kit .jb-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px;
  color: var(--muted); }
.kit .jb-tag { display: inline-flex; align-items: center; min-height: 24px;
  padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); font-size: 12px; }
.kit .jb-tag--hot { background: var(--warn-bg); border-color: #E8C68C; color: var(--warn-ink); }

/* ── компании ─────────────────────────────────────────────────── */
.kit .jb-emps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 22px; }
@media (max-width: 900px) { .kit .jb-emps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit .jb-emps { grid-template-columns: 1fr; } }
.kit a.jb-empc { display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s; }
.kit a.jb-empc:hover { border-color: #C7CEFA; background: var(--surface-2);
  text-decoration: none; }
.kit .jb-empc img { width: 40px; height: 40px; border-radius: 9px; flex: none;
  object-fit: contain; background: #fff; border: 1px solid var(--border); }
.kit .jb-empc b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.kit .jb-empc span { font-size: 12.5px; color: var(--muted); }

/* ── таблица зарплат ──────────────────────────────────────────── */
.kit .jb-tbl { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 22px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.kit .jb-tbl th { text-align: left; padding: 13px 16px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.kit .jb-tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); font-variant-numeric: var(--num); }
.kit .jb-tbl tr:last-child td { border-bottom: 0; }
.kit .jb-tbl td a { color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--border); }
.kit .jb-tbl td a:hover { color: var(--brand); border-color: var(--brand); }

/* ── призыв и вопросы ─────────────────────────────────────────── */
.jb-cta { padding: 22px 24px; border: 1px solid #D6DDFB; border-radius: var(--r-lg);
  background: var(--brand-bg); }
.kit .jb-cta b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--ink); }
.kit .jb-cta p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.jb-faq { margin-top: 22px; display: grid; gap: 8px; }
.kit .jb-faq .toggle { border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; margin: 0; }
.kit .jb-faq summary { list-style: none; cursor: pointer; padding: 14px 18px;
  font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink); }
.kit .jb-faq summary::-webkit-details-marker { display: none; }
.kit .jb-faq summary:hover { color: var(--brand); }
.kit .jb-faq .toggle[open] summary { border-bottom: 1px solid var(--border); }
.kit .jb-faq .toggle > div { padding: 14px 18px; }
.kit .jb-faq .toggle p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text); }

/* ── города с гербами ─────────────────────────────────────────── */
.kit .jb-cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; margin-top: 22px; }
@media (max-width: 1000px) { .kit .jb-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kit .jb-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit a.jb-city { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s; }
.kit a.jb-city:hover { border-color: #C7CEFA; background: var(--surface-2);
  transform: translateY(-2px); text-decoration: none; }
.kit .jb-gerb { width: 34px; height: 34px; flex: none; object-fit: contain; }
.kit .jb-city span { display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: var(--num); }
.kit .jb-city b { font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── страницы направлений и срезов ────────────────────────────── */
.kit .kit-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text);
  max-width: var(--measure); margin: 0 0 10px; }
.kit .jb-lbl { margin: 18px 0 0; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.kit .jb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kit a.jb-tag, .kit .jb-filters .jb-tag { display: inline-flex; align-items: center;
  min-height: 30px; padding: 3px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 13.5px; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s; }
.kit a.jb-tag:hover { border-color: var(--brand); color: var(--brand);
  background: var(--brand-bg); text-decoration: none; }

/* факты о направлении */
.kit .jb-facts, .kit .jb-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .kit .jb-facts, .kit .jb-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit .jb-fact { padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2); }
.kit .jb-fact dt { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.kit .jb-fact dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink);
  font-variant-numeric: var(--num); }

/* навыки */
.kit .jb-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* блок отклика */
.kit .callout { padding: 20px 22px; border: 1px solid #D6DDFB; border-radius: var(--r-lg);
  background: var(--brand-bg); margin: 0; }
.kit .callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.kit .callout p b { color: var(--ink); }

/* кнопка «показать ещё» и постраничная навигация списка */
.kit .jb-more, .kit .jb-pager { display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 26px; }
.kit .jb-more a, .kit .jb-pager a, .kit .jb-more button {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 22px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text); font-size: 15px; font-family: var(--font); cursor: pointer;
  text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.kit .jb-more a:hover, .kit .jb-pager a:hover, .kit .jb-more button:hover {
  border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }

/* ⚠️ Ряд кнопок на светлой секции. Класс .kit-cat-cta для этого не годится:
   его вторичная кнопка рассчитана на тёмную полосу героя и залита
   полупрозрачным белым — на белом фоне получается белое по белому. */
.jb-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ⚠️ Фильтр прячет карточки атрибутом hidden, а он всего лишь UA-правило
   display:none — любой авторский display его перебивает. Из-за
   `.jb-card { display:flex }` фильтры молча перестали работать: кнопки
   нажимались, счётчик считал, а карточки оставались на месте. */
.kit .jb-card[hidden], .kit .jb-card.jb-hid { display: none; }
.kit .jb-count { margin: 14px 0 0; font-size: 14px; color: var(--muted);
  font-variant-numeric: var(--num); }
.kit .jb-f { display: inline-flex; align-items: center; min-height: 34px;
  padding: 4px 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.kit .jb-f:hover { border-color: var(--brand); color: var(--brand); }
.kit .jb-f[aria-pressed="true"] { background: var(--ink); border-color: var(--ink);
  color: #fff; }

/* ── где больше всего вакансий ────────────────────────────────── */
.kit .jb-geos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 22px; }
@media (max-width: 760px) { .kit .jb-geos { grid-template-columns: 1fr; } }
.kit .jb-geo { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) 1fr;
  align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); color: var(--text);
  text-decoration: none; transition: border-color .15s, background .15s; }
.kit a.jb-geo:hover { border-color: #C7CEFA; background: var(--surface-2);
  text-decoration: none; }
.kit .jb-geo--off { opacity: .75; }
.kit .jb-geo .jb-gerb { width: 30px; height: 30px; }
.jb-geo-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit .jb-geo-m b { font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit .jb-geo-m i { font-style: normal; font-size: 12px; color: var(--muted);
  font-variant-numeric: var(--num); }
.jb-geo-bar { display: block; height: 8px; border-radius: 999px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.jb-geo-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* ── портрет спроса ───────────────────────────────────────────── */
.kit .jb-facts--wide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 22px; }
@media (max-width: 900px) { .kit .jb-facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kit .jb-facts--wide { grid-template-columns: 1fr; } }
.kit .jb-facts--wide .jb-fact { padding: 16px 18px; }
.kit .jb-facts--wide .jb-fact dd { font-size: 22px; }
.kit .jb-facts--wide .jb-fact p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

.kit .jb-exps { margin-top: 14px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); display: grid; gap: 11px; }
.jb-exp { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto;
  align-items: center; gap: 14px; }
.jb-exp-t { font-size: 14.5px; color: var(--ink); }
.jb-exp-bar { display: block; height: 10px; border-radius: 999px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.jb-exp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.jb-exp-v { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  font-variant-numeric: var(--num); }
.jb-exp-v i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .kit .jb-exps { padding: 16px 14px; }
  .jb-exp { grid-template-columns: 1fr auto; row-gap: 5px; }
  .jb-exp-bar { grid-column: 1 / -1; }
}

/* ── «смотреть также»: срезы направления ──────────────────────── */
.kit .jb-alsos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-top: 22px; }
@media (max-width: 1000px) { .kit .jb-alsos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kit .jb-alsos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kit .jb-alsos { grid-template-columns: 1fr; } }
.kit a.jb-also { display: flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--text); font-size: 13.5px; line-height: 1.35; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s; }
.kit a.jb-also:hover { border-color: var(--brand); background: var(--brand-bg);
  color: var(--brand-ink); text-decoration: none; }

/* ── страница вакансии ────────────────────────────────────────── */
.jb-vhero { padding: 26px 28px; border: 1px solid #D6DDFB; border-radius: var(--r-lg);
  background: var(--brand-bg); }
@media (max-width: 620px) { .jb-vhero { padding: 20px 18px; } }
.jb-vhero-top { display: flex; gap: 16px; align-items: flex-start; }
.kit .jb-vhero .jb-logo { width: 56px; height: 56px; border-radius: 12px; flex: none;
  object-fit: contain; background: #fff; border: 1px solid var(--border); }
.jb-vhero-m { min-width: 0; flex: 1; }
.kit .jb-vhero h1 { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; }
.kit .jb-vemp { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.kit .jb-vsal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  font-size: 21px; font-weight: 700; color: var(--ink); font-variant-numeric: var(--num); }
.kit .jb-vhero .jb-btns { margin-top: 20px; }
.kit .jb-sigs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.kit .jb-sig { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text); }
.kit .jb-sig--top { background: var(--ok-bg); border-color: #A9D7C0; color: var(--ok-ink);
  font-weight: 600; }

/* описание вакансии — текст работодателя, приводим к типографике сайта */
.kit .jb-desc { margin-top: 22px; font-size: var(--fs-body); line-height: 1.7;
  color: var(--text); max-width: var(--measure); }
.kit .jb-desc p { margin: 0 0 14px; }
.kit .jb-desc ul, .kit .jb-desc ol { margin: 0 0 14px; padding-left: 22px; }
.kit .jb-desc li { margin: 0 0 7px; }
.kit .jb-desc b, .kit .jb-desc strong { color: var(--ink); }
.kit .jb-checked { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--muted); }

/* карточка компании на странице вакансии */
.jb-comp { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px;
  padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); }
.kit .jb-comp .jb-logo { width: 48px; height: 48px; border-radius: 11px; flex: none;
  object-fit: contain; background: #fff; border: 1px solid var(--border); }
.jb-comp-m { min-width: 0; }
.kit .jb-comp-m b { display: block; font-size: 17px; color: var(--ink); }
.kit .jb-comp-m b a { color: inherit; text-decoration: none; }
.kit .jb-comp-m b a:hover { color: var(--brand); }
.kit .jb-comp-m p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.jb-comp-n { display: block; margin-top: 8px; font-size: 13px; color: var(--muted);
  font-variant-numeric: var(--num); }
.kit .jb-comp .jb-btns { margin-top: 14px; }

/* ⚠️ Подстраховка: если где-то в каталоге останется легаси-кнопка,
   она приедет терракотовой посреди синей страницы. Красим в кит. */
.kit main .btn--brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.kit main .btn--brand:hover { background: var(--brand-ink); color: #fff; }
.kit main .btn--sand { background: var(--brand-bg); color: var(--brand-ink);
  border-color: #D6DDFB; }
.kit main .btn--sand:hover { background: #E2E7FD; color: var(--brand-ink); }

/* ── факты о вакансии: компактная строка, а не сетка плиток ──── */
.kit .jb-facts--row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 20px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; }
.kit .jb-facts--row .jb-fact { flex: 1 1 150px; min-width: 0; padding: 13px 16px;
  border: 0; border-right: 1px solid var(--border); border-radius: 0;
  background: transparent; }
.kit .jb-facts--row .jb-fact:last-child { border-right: 0; }
.kit .jb-facts--row .jb-fact dt { font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.kit .jb-facts--row .jb-fact dd { margin: 0; font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.35; }
@media (max-width: 700px) {
  .kit .jb-facts--row .jb-fact { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
  .kit .jb-facts--row .jb-fact:nth-child(2n) { border-right: 0; }
}

/* ── шкала «где вакансия на рынке» ────────────────────────────── */
.jb-scale { margin-top: 22px; padding: 20px 24px 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.jb-scale svg { display: block; max-width: 720px; margin: 0 auto; }
.jb-scale-l { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; max-width: 720px; margin: 2px auto 0; font-size: 12.5px;
  color: var(--muted); font-variant-numeric: var(--num); }
.jb-scale-l b { font-size: 13px; font-weight: 600; color: var(--text); }

/* герб рядом с названием города в фактах вакансии */
.kit .jb-facts--row .jb-fact dd .jb-gerb { display: inline-block; width: 22px;
  height: 22px; vertical-align: -5px; margin-right: 7px; }
/* лид, метка фильтров и сам список идут одной секцией — задаём ритм внутри */
.kit .kit-lead + p { margin-top: 8px; }
.kit .jb-lbl:first-of-type { margin-top: 24px; }

/* заголовок страницы-списка стоял вплотную к лиду */
.kit main > section > h1 { margin-bottom: 12px; }

/* герб и счётчик внутри чипа фильтра по городу */
.kit .jb-f { gap: 7px; }
.kit .jb-f .jb-gerb { width: 18px; height: 18px; flex: none; }
.kit .jb-f i { font-style: normal; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: var(--num); }
.kit .jb-f[aria-pressed="true"] i { color: #C9D3F7; }

/* Герб в заголовке городской страницы — после текста.
   ⚠️ Последнее слово и картинка связаны неразрывным блоком: иначе у
   длинного заголовка строка уже заполнена, и герб уезжает на вторую
   строку один, без текста. */
.jb-h1-tail { white-space: nowrap; }
/* ⚠️ display:inline-block ОБЯЗАТЕЛЕН. В styles.css есть глобальное
   `img, svg { display: block }`, а блочная картинка всегда встаёт на
   свою строку — никакой nowrap этого не отменяет. Именно из-за него
   герб уезжал под заголовок, а не из-за переноса строки. */
.kit .jb-h1-gerb { display: inline-block; width: 34px; height: 34px; margin-left: 12px;
  vertical-align: -3px; object-fit: contain; }
@media (max-width: 620px) { .kit .jb-h1-gerb { width: 28px; height: 28px;
  margin-left: 9px; vertical-align: -2px; } }

/* ── где платят больше: направления полосами ──────────────────── */
.jb-ranks { margin-top: 22px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); display: grid; gap: 4px; }
.kit .jb-rank { display: grid; grid-template-columns: minmax(150px, 250px) 1fr auto;
  align-items: center; gap: 14px; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; transition: background .15s; }
.kit a.jb-rank:hover { background: var(--brand-bg); text-decoration: none; }
.kit a.jb-rank:hover .jb-rank-t { color: var(--brand-ink); }
.jb-rank-t { font-size: 14.5px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.jb-rank-bar { display: block; height: 10px; border-radius: 999px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.jb-rank-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.jb-rank--low .jb-rank-bar i { background: #A9B0BD; }
.jb-rank-v { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  font-variant-numeric: var(--num); }
.jb-rank--low .jb-rank-v { color: var(--muted); }
.kit .jb-ranks-n { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .jb-ranks { padding: 16px 14px; }
  .kit .jb-rank { grid-template-columns: 1fr auto; row-gap: 5px; }
  .jb-rank-bar { grid-column: 1 / -1; }
}