/* public/css/install.css
 *
 * The install nudge banner. Slides up from the bottom of the frame, above the
 * map surface but UNDER every task sheet -- an offer must never cover work.
 *
 * THE layer ladder -- this comment is the one authoritative copy (card.css and
 * wallet.css point here; see card.css for the history of why it matters):
 *   overlay-root 50, map controls 600, INSTALL BANNER 700, rating 900/901,
 *   topbar 1000, detail 1200, wallet 1250, rate 1300, NAME 1350, card 1400.
 * The banner takes 700: above the map's own controls, below everything a
 * traveler actually opened. An explicit z-index, not DOM order -- DOM order
 * only breaks ties between EQUAL z-indexes.
 */

#install-root {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  /* The root's box spans the full strip including the banner's transparent
     gutters and bottom margin -- CSS hit-testing is box-based, so arming the
     ROOT would swallow taps beside/below the banner. Only the banner itself
     is interactive; everything else falls through to the list. */
  pointer-events: none;
}

.in-banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  animation: in-rise 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .in-banner {
    animation: none;
  }
}

@keyframes in-rise {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.in-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.in-title {
  /* h4 sits outside base.css's h1,h2,h3,p margin reset */
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.in-sub {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-dim);
}

.in-sub .ti {
  font-size: 13px;
  vertical-align: -1px;
}

.in-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.in-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.in-btn-go {
  background: var(--brand);
  color: var(--brand-ink);
}

.in-btn-quiet {
  background: var(--surface-2);
  color: var(--text-dim);
}

/* While the banner floats over the list's bottom edge, give the scroller
   enough clearance that the LAST station row can rise above it -- without
   this the row is permanently covered and its tap intercepted. install.js
   toggles the body class alongside the banner. */
body.install-banner-open .ps-list-scroll {
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}