/* Круглая кнопка поверх списка. */

.fab {
  position: absolute;
  /* Справа: там её ищет большой палец, и там она никому не мешает —
     ручки предпросмотра живут только на витрине, а в кабинете угол
     свободен. Пробовали слева, но кнопка вставала над «Профилем»
     и читалась как его продолжение.

     Над нижней полосой с запасом: под полосой кнопки меню во всю
     ширину, и кружок, севший им на угол, воровал бы нажатия. Прижатый
     вплотную, он к тому же выглядит приклеенным к полосе, а не
     лежащим поверх списка. */
  right: var(--sp-4);
  bottom: calc(var(--bar-h) + var(--sp-6) + env(safe-area-inset-bottom));
  z-index: 38;

  display: grid;
  place-items: center;
  width: var(--sp-14);
  height: var(--sp-14);
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 4px 18px var(--fab-shadow);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
}

.fab:active {
  transform: scale(.94);
  box-shadow: 0 2px 10px var(--fab-shadow);
}

.fab .icon {
  width: var(--sp-6);
  height: var(--sp-6);
  stroke-width: 2.2;
}

@media (hover: hover) {
  .fab:hover { background: var(--accent-hi); }
}