/* Продолжение tip.css: сама подсказка (плашка, появление по наведению)
   описана там, здесь — куда именно она растёт. Файл был бы одним,
   не упрись tip.css в двести строк первым. */

@media (hover: hover) {
  /* Край колонки подсказку обрезает: она шире значка в три-четыре
     раза. Поэтому растёт внутрь — от левых кнопок вправо, от правых
     влево. Лицо компании и её имя стоят у левого края карточки —
     тем же правилом.

     Правым обязателен и left: auto. Кнопки правой группы лежат разом
     в .appbar__side и в .appbar__side--end, оба правила до них
     доходят, — и с двумя краями сразу плашка получала ширину самой
     кнопки: фон в три десятка точек, а текст поверх него наружу
     и за край каркаса. */
  .appbar__side .appbar__slot::after,
  .identity__peek::after,
  .identity__seal::after,
  .offer__face::after,
  .offer__who::after,
  .line__face::after,
  .story-new__close::after,
  .story-new__undo::after,
  .story-new__redo::after,
  .story-new__help::after { left: 0; }

  .appbar__side--end .appbar__slot::after,
  .identity__copy::after,
  .identity__reach::after,
  .identity__grab::after,
  .whois__act::after,
  .field__copy::after,
  .field__act::after,
  .client__more::after,
  .client__go::after,
  .cardkind__go::after,
  .cardkind__more::after,
  .cashclient__more::after,
  .story-new__done::after { right: 0; left: auto; }

  /* Значки календаря и полосы истории растут внутрь тем же правилом:
     левые — вправо, правые — влево. */
  .salecal__head .cal__turn:first-child::after,
  .year__head .cal__turn:first-child::after,
  .salebar__act:first-child::after { left: 0; }

  /* В полосе раздела значков справа бывает двое — календарь
     и порядок, — и внутрь растут оба: правило «последнего» доставало
     только крайнему, а средний выкидывал подсказку за край экрана. */
  .salecal__head .cal__turn:last-child::after,
  .year__head .cal__turn:last-child::after,
  .salebar__act:not(:first-child)::after { right: 0; left: auto; }

  /* Название месяца стоит посреди строки — и подсказка под ним. */
  .salecal__month::after {
    left: 50%;
    transform: translate(-50%, calc(var(--sp-1) * -1));
  }

  .salecal__month:hover::after { transform: translateX(-50%); }

  /* Пока под кнопкой раскрыто меню, подсказки у неё нет: меню уже
     назвало свои дела словами, и плашка «Новый клиент» поверх него
     повторяет сказанное, заслоняя первый пункт. Метку ставит
     ui/menu.js на время, пока меню открыто. */
  [data-open]:hover::after { opacity: 0; transition-delay: 0s; }

  /* Круглая кнопка и ручки предпросмотра стоят в нижнем углу: под ними
     места нет, и подсказка встаёт слева от кнопки. Кнопке при этом
     relative не нужен — она и так absolute у края экрана.

     [aria-label] в селекторе обязателен, а не только класс: у базового
     правила (tip.css) он есть, и без него здесь та же специфичность
     проигрывала бы порядку объявления наоборот — `top` из tip.css
     (плашка «снизу») перебивал бы это `top: 50%», и подсказка внизу
     экрана уезжала под нижний край каркаса, как и вышло с «добавить
     фото»/«добавить текст» (решение №253). */
  .peek__act[aria-label]::after,
  .fab[aria-label]::after,
  .story-new__addtext[aria-label]::after,
  .story-new__add[aria-label]::after {
    top: 50%;
    right: calc(100% + var(--sp-2));
    transform: translate(var(--sp-1), -50%);
  }

  .peek__act:hover::after,
  .fab:hover::after,
  .story-new__addtext:hover::after,
  .story-new__add:hover::after { transform: translateY(-50%); }
}