/* Справочник видов деятельности: поле на экране и окно под ним.

   Окно, а не шторка снизу: справочник ищут с клавиатуры, а клавиатура
   выезжает снизу и закрывает ровно то место, где шторка живёт.

   Строка списка — кнопка во всю ширину: это выбор, а не ссылка,
   и попадать в неё надо пальцем, а не в подчёркнутое слово. */

/* ── Поле на экране ──────────────────────────────────────────── */

/* Кнопка, притворяющаяся полем ввода: рядом с настоящими полями
   она обязана выглядеть их ровесницей, иначе форма рассыпается. */
.chooser {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.chooser__name {
  min-width: 0;
  font-size: max(16px, var(--fs-md));
  font-weight: 500;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}

/* Пока не выбрано — приглушено, как подсказка. Выбрали — становится
   значением и по цвету не отличается от набранного руками. */
.chooser.is-set .chooser__name { color: var(--text); }

.chooser .icon:last-child {
  flex: none;
  width: var(--fs-md);
  height: var(--fs-md);
  color: var(--text-faint);
  transform: rotate(90deg);
}

/* ── Поле поиска на месте кнопки ─────────────────────────────── */

/* Обёртка нужна ради общего угла: от него скрипт считает, где
   поставить окно. Своей высоты у неё нет. */
.combo { scroll-margin-top: var(--sp-4); }

/* Ввод выглядит ровно как выбранное значение: поле не должно менять
   вид под пальцем, меняется только то, что в нём написано.
   16px снизу обязательны — на меньшем шрифте iOS приближает экран. */
.combo__input {
  font-family: var(--font);
  font-size: max(16px, var(--fs-md));
  font-weight: 500;
  letter-spacing: normal;
}

/* Браузерный крестик убираем: он есть не везде, не красится темой
   и о нажатии наружу не сообщает. Свой стоит рядом. */
.combo__input::-webkit-search-cancel-button { display: none; }

/* ── Окно со списком ─────────────────────────────────────────── */

/* Место и высоту задаёт скрипт: окно живёт в каркасе, а не в экране,
   и знать о поле заранее не может. */
.combo__drop {
  position: absolute;
  z-index: 30;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px var(--sheet-shadow);
  animation: drop-in var(--fast) var(--ease);
}

.combo__drop::-webkit-scrollbar { display: none; }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.picker__list { padding: var(--sp-2) var(--sp-3); }

.picker__group + .picker__group { margin-top: var(--sp-4); }

/* Заголовок группы липнет к верху окна: во всём справочнике через
   два экрана уже не помнишь, в какой ты группе. Фон непрозрачный —
   иначе строки просвечивают сквозь него. */
.picker__title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-2) 0;
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Строка ростом не ниже 44 пикселей: ниже палец начинает мазать
   мимо. Разделители между строками, а не рамка вокруг каждой:
   список читается сплошным, а не рябит. */