/* 2hives as a phone app (static/pwa.js, web_templates/_pwa.html). */

/* Install prompt: a small card above the bottom edge, dismissible. */
.pwa-prompt { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100vw - 32px));
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: center;
  padding: 12px 14px; margin: 0; box-shadow: var(--shadow-3); }
.pwa-prompt[hidden] { display: none; }
.pwa-prompt img { border-radius: 11px; }
.pwa-prompt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pwa-prompt-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pwa-prompt-actions .btn { min-height: 44px; }

/* iPhone "Add to Home Screen" sheet */
.pwa-ios { max-width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); padding: 20px; }
.pwa-ios::backdrop { background: rgb(15 20 32 / 0.55); }
.pwa-ios h2 { margin-top: 0; font-size: var(--text-lg); }
.pwa-ios-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.pwa-ios-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.pwa-ios-ill { width: 48px; height: 48px; color: var(--accent-ink); border-radius: 11px; }
.pwa-ios form { display: flex; justify-content: flex-end; }
.pwa-ios .btn { min-height: 44px; }

/* Library: Save for offline */
.pwa-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.pwa-offline[hidden], .pwa-offline [hidden] { display: none; }
.pwa-offline .btn { min-height: 44px; }
.pwa-offline progress { width: 140px; }
.pwa-install-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pwa-install-link[hidden] { display: none; }
.pwa-install-link .btn { min-height: 44px; }

/* Offline page */
.pwa-offline-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.pwa-offline-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.pwa-offline-list li > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: break-word; }
.pwa-offline-list .btn { min-height: 44px; }

/* Standalone (installed) window: the status bar is translucent (apple-mobile-web-app-status-bar-style),
   so the sticky header carries the top inset itself, and the bottom clears the home indicator. */
@media (display-mode: standalone) {
  .site-header { top: 0; padding-top: env(safe-area-inset-top, 0px); }
  main { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
html.pwa-standalone .site-header { top: 0; padding-top: env(safe-area-inset-top, 0px); }