/* Карточка человека: кнопки и прежний вид.

   Вынесено из identity.css по длине: сама карточка (раскладка, имя,
   роль, номер) описана там, здесь — то, что к ней приложено.
   Печать верификации стоит у имени, «связаться» — в углу карточки. */

/* ── Прежний вид: кружок с буквой и подпись под ним ──────────── */

.who {
  margin-top: var(--sp-4);
  text-align: center;
}

.who__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}

.who__since {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* Наведение только там, где есть мышь: на телефоне hover залипает
   после касания и оставляет кнопку подсвеченной. */
@media (hover: hover) {
  .identity__copy:hover {
    background: var(--surface-2);
    color: var(--accent-text);
  }
}

/* Печать верификации стоит вплотную к имени — она его часть, а не
   отдельный значок в строке. Размер по строчной букве: крупнее она
   спорит с именем, мельче читается как пятно. */
.identity__seal {
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--verified);
}

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

/* «Связаться» — в правом верхнем углу карточки: кнопка стоит в углу,
   а не в потоке, иначе она отняла бы ширину у имени. Позиционирующей
   карточка объявлена выше, вместе с остальной раскладкой. */
.identity__reach {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: grid;
  place-items: center;
  width: 9.2cqw;
  height: 9.2cqw;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent-text);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

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

.identity__reach:active { background: var(--surface); }

@media (hover: hover) {
  .identity__reach:hover {
    background: var(--surface);
    border-color: var(--accent-dim);
  }
}

/* Место под кнопку: без него длинное имя уезжает ей под низ. */
.identity__body { padding-right: 11cqw; }

/* Глаз слева вверху — «посмотреть чужими глазами». Стоит зеркально
   кнопке «связаться»: слева смотрят, справа действуют. */
.identity__peek {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: grid;
  place-items: center;
  width: 9.2cqw;
  height: 9.2cqw;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-faint);
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

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

.identity__peek:active { background: var(--surface); }

@media (hover: hover) {
  .identity__peek:hover {
    background: var(--surface);
    border-color: var(--accent-dim);
    color: var(--accent-text);
  }
}