/* Подсказка под значком — только там, где есть мышь.

   Кнопка без подписи понятна не всем и не сразу: пальцем по ней
   попадают и разбираются на месте, а мышью наводят и ждут ответа.
   Подпись у нас уже написана — в `aria-label`, для тех, кто слушает
   страницу голосом; подсказка показывает её же. Второго текста
   в разметке нет, и разойтись им негде.

   Пальцу это не нужно вовсе: на телефоне наведение залипает после
   касания, и подсказка висела бы поверх страницы до следующего
   нажатия. Поэтому весь файл живёт под `hover: hover`. */

@media (hover: hover) {

  /* Точку отсчёта подсказке даёт сама кнопка. Ставим её только тем,
     кто стоит в потоке: «связаться» и глаз на карточке уже прижаты
     к её углу через absolute, и relative выбил бы их оттуда —
     кнопка уехала бы в поток и легла поверх имени. */
  .appbar__slot[aria-label],
  .peek__act[aria-label],
  .identity__copy[aria-label],
  .field__copy[aria-label] { position: relative; }

  .appbar__slot[aria-label]::after,
  .peek__act[aria-label]::after,
  .identity__copy[aria-label]::after,
  .identity__peek[aria-label]::after,
  .identity__reach[aria-label]::after,
  .field__copy[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--sp-2));
    padding: var(--sp-1) var(--sp-3);
    border-radius: 100px;
    background: var(--tip-bg);
    color: var(--tip-text);
    box-shadow: 0 4px 14px var(--peek-shadow);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.8;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(calc(var(--sp-1) * -1));
    pointer-events: none;
    transition: opacity var(--base) var(--ease),
                transform var(--base) var(--ease);
  }

  /* Появляется не мгновенно: подсказка, выскакивающая от любого
     движения мыши через шапку, мешает больше, чем помогает. Уходит
     сразу — ждать её исчезновения незачем. */
  .appbar__slot:hover::after,
  .peek__act:hover::after,
  .identity__copy:hover::after,
  .identity__peek:hover::after,
  .identity__reach:hover::after,
  .field__copy:hover::after {
    opacity: 1;
    transform: none;
    transition-delay: var(--slow);
  }

  /* Край колонки подсказку обрезает: она шире значка в три-четыре
     раза. Поэтому растёт внутрь — от левых кнопок вправо,
     от правых влево. */
  .appbar__side .appbar__slot::after,
  .identity__peek::after { left: 0; }

  .appbar__side--end .appbar__slot::after,
  .identity__copy::after,
  .identity__reach::after,
  .field__copy::after { right: 0; }

  /* Ручки предпросмотра стоят в нижнем углу: под ними места нет,
     и подсказка встаёт слева от кнопки. */
  .peek__act::after {
    top: 50%;
    right: calc(100% + var(--sp-2));
    transform: translate(var(--sp-1), -50%);
  }

  .peek__act:hover::after { transform: translateY(-50%); }
}