/* Список видов деятельности внутри окна выбора.

   Отдельно от picker.css: там окно и поле, здесь — строки списка,
   подсветка совпадения и кнопка «показать все». Вместе файл уходил
   за две сотни строк. */

.picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 12cqw;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.picker__row + .picker__row {
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
}

.picker__row:hover  { background: var(--surface-2); }
.picker__row:active { background: var(--surface-2); }

.picker__row.is-on {
  color: var(--accent-text);
  font-weight: 650;
}

.picker__row .icon {
  flex: none;
  width: var(--fs-md);
  height: var(--fs-md);
}

.picker__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Совпавшую часть красим, а не заливаем: жёлтая заливка у браузера
   своя, о теме не знает и в тёмной выглядит маркером на бумаге. */
.picker__hit {
  background: none;
  color: var(--accent-text);
  font-weight: 650;
}

/* «Показать все» и «вписать своё» стоят в том же ряду, что и виды:
   это тоже выбор, и рука ищет их там же. */
.picker__row--more {
  color: var(--text-dim);
  border-top: 1px solid var(--line-soft);
}

.picker__row--more .icon { transform: rotate(90deg); }

/* «Свернуть» стоит первой строкой развёрнутого списка, и стрелка
   у неё смотрит вверх — туда же, куда уедет список. */
.picker__row--less {
  border-top: none;
  border-bottom: 1px solid var(--line-soft);
}

.picker__row--less .icon { transform: rotate(-90deg); }

.picker__row--own {
  justify-content: flex-start;
  color: var(--accent-text);
  border-top: 1px solid var(--line-soft);
}

.picker__empty {
  padding: var(--sp-5) 0 var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* Строка про своё название: не кнопка, а обещание. Кнопкой она
   становится, как только набрано что вписывать. */
.picker__note {
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-faint);
}