/* PWA surfaces — the install invite and the welcome-back resume card.
   Two small fixed cards that share one base. They sit above page content
   (z-index 150) but below modals (200) and full-screen editors (1000), so they
   never cover a paywall or an open editor; they wait for a calm moment instead.
   Entrance reuses the house `kpRise` keyframe + the rise easing curve; the exit
   is a short fade-down. Both are covered by the global reduced-motion gate in
   main.css, and js/pwa.js also checks prefersReducedMotion before the exit. */

.pf-pwa-card {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 16px 16px 14px;
  animation: kpRise .32s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-theme="dark"] .pf-pwa-card {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.pf-pwa-card.pf-card-leaving {
  animation: pwaCardOut .2s ease-in forwards;
  pointer-events: none;
}
@keyframes pwaCardOut {
  to { opacity: 0; transform: translateY(10px); }
}

.pf-pwa-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.pf-pwa-card-head svg {
  flex: 0 0 auto;
  color: var(--primary);
}
/* Offline-setup status card: the loading spinner sits where the icon would, tinted
   to match the brand icons; it swaps to the ready check when the engines finish. */
.pf-offline-card .spinner {
  flex: 0 0 auto;
  color: var(--primary);
}
.pf-pwa-card-title {
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.pf-pwa-card p {
  margin: 0 0 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.pf-pwa-card p .pf-pwa-file {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
  word-break: break-word;
}

.pf-pwa-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* Buttons reuse the global .btn / .btn-ghost / .btn-primary system. */
.pf-pwa-card-actions .btn {
  padding: 7px 14px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .pf-pwa-card {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}