/* ── install ──
 * The install banner and its drop animation.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Install banner ──────────────────────────────────────────────────────── */
/* Drops from the top edge rather than floating over the note: it is an aside,
   and it gives the page back as soon as it is dismissed. Pointer-events stay on
   the bar itself so the rest of the app is never blocked by it. */
#install-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;                        /* over the app, under the confirm dialog (130) */
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 16px;
  background: color-mix(in srgb, var(--bg-raised) 97%, transparent);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  font-size: 12.5px;
  color: var(--fg);
  animation: install-drop 0.28s var(--ease);
}

#install-banner.hidden { display: none; }

#install-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#install-banner .btn.primary { padding: 4px 12px; font-size: 12px; }
#install-go.hidden { display: none; }   /* Safari has no button, only the sentence */

.ib-x {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
}
.ib-x:hover { color: var(--fg); background: var(--bg-code); }

@keyframes install-drop {
  from { opacity: 0; transform: translate(-50%, -100%); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Narrow screens: span the width instead of shrinking to the text's own width,
   which left a 3-line sliver sitting on top of the wordmark. Centering by inset
   rather than by transform here, so the drop animation gets its own keyframes —
   the centred one translates -50% on X and would drag the bar off-centre. */
@media (max-width: 560px) {
  #install-banner {
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
    gap: 10px;
    padding-left: 12px;
    font-size: 12px;
    animation-name: install-drop-flat;
  }
  #install-text { white-space: normal; flex: 1; }
}

@keyframes install-drop-flat {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}