/* PWA module extras (owner: pwa): offline sync banner, push prompt card,
   first-run explainer, offline fallback page. Included on every page via
   templates/partials/pwa_head.html; firstrun.html also links it directly. */

/* "N slips waiting to sync" banner (offline.js inserts #sync-banner) */
.sync-banner {
  padding: 12px 14px; border-radius: var(--radius-sm, 9px);
  background: color-mix(in srgb, var(--s4, #eda100) 16%, var(--card, #fff));
  font-size: 14px; font-weight: 550;
}
.sync-banner .warn {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 500; color: var(--bad, #d03b3b);
}

/* one-time push prompt card (offline.js) */
.push-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.push-card h2 { margin: 0 0 2px; font-size: 15px; }

/* ---------- first-run explainer ---------- */
.fr-hero { text-align: center; padding: 20px 0 6px; }
.fr-hero img { width: 84px; height: 84px; border-radius: 20px; }
.fr-hero h1 { margin: 14px 0 4px; }
.fr-hero p { margin: 0; }

.fr-step { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; }
.fr-step + .fr-step { border-top: 1px solid var(--border); }
.fr-step svg { width: 30px; height: 30px; flex: none; margin-top: 1px; color: var(--accent); }
.fr-step h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.fr-step p { margin: 0; font-size: 14px; color: var(--ink2); }

/* iOS Add-to-Home-Screen visuals */
.fr-a2hs { margin: 12px 0 0; padding: 0; list-style: none; }
.fr-a2hs li { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; }
.fr-a2hs svg { width: 26px; height: 26px; flex: none; color: var(--accent); }

/* push settings row on /firstrun */
.fr-push { display: flex; align-items: center; gap: 12px; }
.fr-push h2 { margin: 0 0 2px; font-size: 15px; }
.fr-push p { margin: 0; }
.fr-push .btn { flex: none; }

/* ---------- offline fallback page (served at /offline, precached) ---------- */
.offline-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px calc(16px + env(safe-area-inset-right)) 24px calc(16px + env(safe-area-inset-left));
  text-align: center;
}