/*
  AVLOX · предложение поставить ярлык (ADR-111).

  Общий файл для всех приложений: предложение выглядит одинаково в кабинете
  заказчика, в консоли и у водителя, потому что это одно и то же предложение.
  Правило то же, что везде: ни одного литерального цвета и ни одного размера
  вне токенов — проверяется тестом.

  ОНО ВНИЗУ И ОНО НЕ ПЕРЕКРЫВАЕТ РАБОТУ. Полоса поперёк экрана поверх
  содержимого — это то, из-за чего баннеры закрывают не читая. Здесь карточка
  у нижнего края, шириной с колонку текста, с воздухом под безопасную зону
  телефона; всё, что под ней, остаётся видимым и работающим.
*/
.install {
  position: fixed; z-index: 30;
  left: var(--geometry-sp-3); right: var(--geometry-sp-3);
  bottom: calc(var(--geometry-sp-3) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-width: var(--layout-panel-max);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--geometry-sp-3);
  align-items: start;
  padding: var(--geometry-sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--geometry-r-dialog);
  box-shadow: var(--elevation-float);
  animation: install-in var(--motion-panel) var(--ease-out);
}
/* Выезжает снизу — оттуда же, где остаётся. Появление на месте читается как
   сбой отрисовки, а не как обращение. */
@keyframes install-in {
  from { opacity: 0; transform: translateY(var(--geometry-sp-4)); }
  to   { opacity: 1; transform: none; }
}

.install__icon {
  width: var(--geometry-sp-12); height: var(--geometry-sp-12);
  border-radius: var(--geometry-r-panel); display: block;
}
.install__body { min-width: 0; }
.install__title { font-weight: 600; letter-spacing: -.01em; }
.install__why {
  margin: var(--geometry-sp-1) 0 0; color: var(--text-2);
  font-size: var(--text-meta); line-height: 1.5;
}
/* Значок «Поделиться» стоит ВНУТРИ фразы, на своём месте по базовой линии:
   человек ищет глазами картинку, которую увидит внизу экрана, а не слово. */
.install__share {
  width: 1.15em; height: 1.15em; vertical-align: -.25em;
  margin: 0 .15em; color: var(--info);
}
.install__acts {
  grid-column: 2; display: flex; gap: var(--geometry-sp-2);
  align-items: center; margin-top: var(--geometry-sp-3);
}

/* На узком экране кнопки занимают всю ширину: «Установить» на телефоне
   нажимают большим пальцем, и промах здесь стоит закрытого предложения. */
@media (max-width: 720px) {
  .install { grid-template-columns: auto minmax(0, 1fr); }
  .install__acts { flex-wrap: wrap; }
  .install__acts .btn--primary { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .install { animation-duration: 1ms; }
}