/* "Add to Home Screen" banner (js/install.js).

   Its own file rather than components.css because the LOGIN page needs it too,
   and index.php deliberately loads only tokens/base/animations/login.

   z-index 50 puts it above the bottom nav (30) and the clients FAB (40), but
   under the bottom sheets (70/71), the dialer overlay (80) and toasts (90) -
   an install suggestion must never cover a payment sheet or a live call. */

.a2hs {
  position: fixed;
  left: var(--sp-3); right: var(--sp-3);
  /* Two independent lifts, added rather than overridden. app.php on an iPhone
     carries BOTH --nav and --ios; a plain `bottom` on each would let whichever
     was declared last win, and the banner would sit on top of the bottom nav. */
  --a2hs-nav: 0px;
  --a2hs-arrow: 0px;
  bottom: calc(var(--sp-4) + var(--a2hs-nav) + var(--a2hs-arrow)
               + env(safe-area-inset-bottom));
  z-index: 50;

  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);

  background: var(--card);
  border: 1px solid var(--gray-line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-2);

  opacity: 0; transform: translateY(12px);
  transition: opacity .2s var(--ease-decelerate), transform .2s var(--ease-decelerate);
}

.a2hs--in { opacity: 1; transform: translateY(0); }

/* app.php has a fixed bottom nav; the login page does not. */
.a2hs--nav { --a2hs-nav: var(--bottomnav-h); }

/* Room for the arrow, which protrudes below the card. */
.a2hs--ios { --a2hs-arrow: 12px; }

/* The Android variant puts the Install button at the right-hand end, directly
   under the absolutely-positioned close button. Extra top padding gives the ×
   a band of its own instead of letting it sit on the button's corner. */
.a2hs--android { padding-top: var(--sp-5); }

.a2hs__icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 10px; object-fit: cover;
}

.a2hs__body { flex: 1; min-width: 0; }

.a2hs__title {
  margin: 0 0 2px; font-size: 14px; font-weight: 700;
  color: var(--mini-title);
}

.a2hs__bn, .a2hs__en {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-2);
}
.a2hs__en { margin-top: 2px; }

/* The share glyph sits on the text baseline so "Tap Share [icon]" reads as one
   sentence rather than a line with a picture dropped into it. */
.a2hs__share {
  width: 13px; height: 13px;
  display: inline-block; vertical-align: -2px;
  color: var(--primary);
}

.a2hs__go {
  flex: 0 0 auto;
  padding: 9px var(--sp-4);
  border-radius: var(--btn-radius);
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

.a2hs__x {
  position: absolute; top: 2px; right: 4px;
  width: 28px; height: 28px; padding: 0;
  font-size: 20px; line-height: 1;
  color: var(--text-2);
}

/* Points down at Safari's bottom toolbar, where the Share button is on an
   iPhone. Two stacked triangles so the arrow keeps the card's 1px border. */
.a2hs__arrow, .a2hs__arrow::after {
  position: absolute;
  left: 50%; margin-left: -9px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.a2hs__arrow {
  bottom: -9px;
  border-top: 9px solid var(--gray-line);
}
.a2hs__arrow::after {
  content: ''; bottom: 1px; margin-left: -9px;
  border-top: 9px solid var(--card);
}

/* Nothing to animate into for anyone who asked not to have things move. */
@media (prefers-reduced-motion: reduce) {
  .a2hs { transition: none; opacity: 1; transform: none; }
}