/* Шторка «Кому продажа»: поиск и список клиентов, из которого
   выбирают одного.

   Строки здесь свои, а не из клиентской базы: там строка — ссылка
   в карточку и рядом с ней «ещё», здесь она целиком одна кнопка,
   и второй цели у нажатия нет. Выглядят они при этом одинаково —
   тот же кружок, то же имя, та же подпись под ним. */

.whopick {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Поле поиска держится наверху шторки, пока список проезжает под ним:
   клиентов бывает сотня, и возвращаться за строкой к началу — лишняя
   дорога. Поля по бокам снимаем: у шторки они свои, и полка внутри
   неё не должна вылезать за скругления. */
.whopick__find {
  margin: 0;
  padding: 0 0 var(--sp-2);
}

.whopick__one {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.whopick__one + .whopick__one { margin-top: var(--sp-2); }

.whopick__one:active {
  background: var(--surface-2);
  border-color: var(--accent-dim);
}

@media (hover: hover) {
  .whopick__one:hover { background: var(--surface-2); }
}

.whopick__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.whopick__name {
  font-size: var(--fs-sm);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись под именем — телефон или почта, со знаком того, что в ней:
   в списке из десятка строк знак говорит, на что смотришь, раньше,
   чем прочтёшь сами цифры. */
.whopick__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.whopick__mark {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.whopick__meta .icon {
  width: var(--fs-xs);
  height: var(--fs-xs);
}

/* Шеврон говорит, что за строкой есть продолжение — форма заказа. */
.whopick__go {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.whopick__go .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

/* Кнопка в пустой шторке отодвинута от строки-объяснения: она здесь
   единственная дорога дальше, и жаться к тексту ей незачем. */
.whopick .empty .btn { margin-top: var(--sp-4); }