/* ============================================================================
   Вкладка «Найм на hh.ru» (/search/hh). Отдельный файл по образцу calendar.css:
   классы нужны одной странице, и держать их в общих компонентах значило бы
   расширять словарь дизайн-системы ради одного экрана.

   Всё, что можно было взять готовым, взято: .card, .table, .filters, .pill,
   .btn, .facts, .tabs. Здесь только то, чему в системе места нет.
   ============================================================================ */

/* --------------------------------------------------------- состояние прогона
   Пять фактов в ряд плюс кнопка справа. На узком экране факты переносятся, а
   кнопка уезжает под них: она не должна выдавливать цифры за край. */
.hh-run {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.hh-run__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-6);
  flex: 1 1 480px;
}

.hh-run__side {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Счётчик на вкладке. Без него о вкладке забывают: заходить приходится по
   привычке, а не по ссылке из письма. */
.tabs__count {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------ что изменилось */
.hh-delta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-soft);
}

.hh-delta b {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
  color: var(--fg);
}

/* ---------------------------------------------------------------- фильтры
   Переключатели отдельной строкой под порогами: они меняют не «каких
   показать», а «показывать ли вообще», и в одном ряду с числовыми полями
   читались бы как ещё один порог. */
.hh-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line);
  grid-column: 1 / -1;
}

.hh-toggles .check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-soft);
  cursor: pointer;
}

.hh-toggles .check input {
  accent-color: var(--accent);
}

/* ------------------------------------------------------------------ таблица */
.hh-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Отвергнутая строка видна приглушённой, а не спрятана: тихо исчезнувшая
   компания через месяц породит вопрос «а почему её нет», на который никто
   не ответит. */
.hh-table tr.is-dimmed {
  opacity: 0.55;
}

.hh-table td {
  vertical-align: top;
}