/* Лицо клиента: снимок или буква имени в кружке.

   Вынесено из client.css, когда тот перерос двести строк. Строка списка
   и лицо в ней — разные вещи: лицо показывают ещё и в карточке клиента,
   и в шторке поиска, а строку — только в списке. */

.face {
  flex: none;
  display: grid;
  place-items: center;
  width: 11.5cqw;
  height: 11.5cqw;
  border-radius: 50%;
  background: var(--surface-2) center / cover no-repeat;
  color: var(--text-dim);
  font-size: var(--fs-md);
  font-weight: 700;
}

.face--blank { border: 1px solid var(--line); }

/* Тон кружка: фон приглушён, буква насыщенная. Рамки у цветного нет —
   цвет и так отделяет его от строки, а рамка поверх цвета читается
   как обводка ярлыка. */
.face--tone-1 { background: var(--tone-1-bg); color: var(--tone-1-ink); border-color: transparent; }
.face--tone-2 { background: var(--tone-2-bg); color: var(--tone-2-ink); border-color: transparent; }
.face--tone-3 { background: var(--tone-3-bg); color: var(--tone-3-ink); border-color: transparent; }
.face--tone-4 { background: var(--tone-4-bg); color: var(--tone-4-ink); border-color: transparent; }
.face--tone-5 { background: var(--tone-5-bg); color: var(--tone-5-ink); border-color: transparent; }
.face--tone-6 { background: var(--tone-6-bg); color: var(--tone-6-ink); border-color: transparent; }
.face--tone-7 { background: var(--tone-7-bg); color: var(--tone-7-ink); border-color: transparent; }
.face--tone-8 { background: var(--tone-8-bg); color: var(--tone-8-ink); border-color: transparent; }

.face--blank .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.face--big {
  width: 20.5cqw;
  height: 20.5cqw;
  font-size: var(--fs-xl);
}

.face--big .icon {
  width: var(--fs-xl);
  height: var(--fs-xl);
}