/* =========================================================================
   Spotify AI Analytics — the install layer (lane L1)
   =========================================================================
   Two surfaces and two shell utilities.  Everything here is a *token*
   consumer: this file states no colour literal and no px/rem/em literal, so
   the B-1 ad-hoc-CSS ratchet (tests/test_design_tokens.py) is untouched.

   Placement.  The install card lives at the top of the viewport, one step
   under the sticky app header, and not at the bottom: the bottom band already
   belongs to the mini player (`player.css` puts it directly above the tab
   bar), and two floating bars chasing one inset is how a phone ends up with
   its player under its install card.  The card is a region, not a modal — it
   never blocks the page, and it goes away for good on "Not now".

   Safe areas.  Both surfaces add `env(safe-area-inset-*)` to their inset, so a
   home-screen launch on a notched phone paints the card inside the cutout and
   clear of the home indicator.  `viewport-fit=cover` in base.html is what
   makes those insets non-zero.

   Motion.  One entrance transition, and it collapses to nothing under
   `prefers-reduced-motion: reduce` — the card still appears, it just does not
   slide.
   ========================================================================= */

/* ── the mount point ──────────────────────────────────────────────────── */

.pwa-install-slot {
  position: fixed;
  inset-inline: var(--nav-float-inset);
  inset-block-start: calc(
    var(--header-height) + var(--space-sm) + env(safe-area-inset-top, 0)
  );
  z-index: calc(var(--z-sticky) + 2);
  /* The slot is a transparent tray: only the card inside it takes clicks, so
     an empty or dismissed slot can never eat a tap meant for the page. */
  pointer-events: none;
}

/* ── the install card ─────────────────────────────────────────────────── */

.pwa-install-card,
.pwa-install-hint {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg-strong);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  color: var(--color-text);
  /* 100vh fallback first, dvh second: on a phone the URL bar collapsing must
     not push the card's buttons under the fold. */
  max-block-size: calc(100vh - var(--header-height) - var(--space-2xl));
  max-block-size: calc(100dvh - var(--header-height) - var(--space-2xl));
  overflow: auto;
  animation: pwa-install-in var(--transition-slow) var(--transition-ease-out) both;
}

.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-inline-size: 0;
}

.pwa-install-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.pwa-install-body,
.pwa-install-hint-text {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* The two controls are the only things this lane asks a thumb to hit, so they
   inherit the shell's tap minimum rather than the button's padding. */
.pwa-install-accept,
.pwa-install-dismiss {
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  white-space: nowrap;
}

/* The iOS line is a sentence plus one dismiss button: no primary action, since
   there is no prompt to call. */
.pwa-install-hint {
  gap: var(--space-xs);
}

.pwa-install-hint .pwa-install-hint-text {
  color: var(--color-text);
  font-size: var(--font-size-xs);
}

@keyframes pwa-install-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-2xs) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── desktop: keep clear of the sidebar ───────────────────────────────── */

@media (min-width: 768px) {
  .pwa-install-slot {
    inset-inline-start: calc(var(--sidebar-width) + var(--space-xl));
    inset-inline-end: var(--space-xl);
  }

  .pwa-install-card {
    margin-inline-end: auto;
    max-inline-size: calc(var(--space-3xl) * 8);
  }
}

/* ── landscape phone: the card is a bar, not a tower ──────────────────── */

@media (orientation: landscape) and (max-height: 520px) {
  .pwa-install-slot {
    inset-block-start: calc(var(--space-xs) + env(safe-area-inset-top, 0));
    inset-inline-start: max(var(--nav-float-inset), env(safe-area-inset-left, 0));
    inset-inline-end: max(var(--nav-float-inset), env(safe-area-inset-right, 0));
  }

  .pwa-install-card,
  .pwa-install-hint {
    padding: var(--space-2xs) var(--space-sm);
    /* Landscape leaves no vertical room to spare: the message is one line and
       the buttons stay at the tap minimum. */
    max-block-size: calc(100dvh - var(--space-3xl));
  }

  .pwa-install-body {
    display: none;
  }
}

/* ── reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pwa-install-card,
  .pwa-install-hint {
    animation: none;
  }
}

/* ── shell utilities this lane owns ────────────────────────────────────
   `100dvh` is the honest height on a phone: `100vh` is the *largest* viewport,
   so a full-height panel built on it sits under the URL bar until the user
   scrolls.  These are opt-in classes for the surfaces this lane adds — no
   other lane's selector is overridden from here. */

.pwa-viewport-fill {
  min-block-size: 100vh;
}

@supports (height: 100dvh) {
  .pwa-viewport-fill {
    min-block-size: 100dvh;
  }
}

/* A full-height scroller whose last row is reachable above the tab bar and the
   home indicator. */
.pwa-scroll-fill {
  max-block-size: 100vh;
  overflow-y: auto;
  padding-block-end: calc(
    var(--tabbar-height) + var(--space-lg) + env(safe-area-inset-bottom, 0)
  );
}

@supports (height: 100dvh) {
  .pwa-scroll-fill {
    max-block-size: 100dvh;
  }
}