/* ============================================================
   "Add to home screen" install prompt — shared by both installable apps:
   the client weekly check-in (espresso + gold) and the staff admin portal
   (navy + blue, via the .admin modifier).

   Fully self-contained (no dependency on either app's CSS variables) so it can
   be linked from checkin.html and index.html alike. Behaviour lives in
   js/pwa.js; this file is presentation only.
   ============================================================ */

:root {
  --pwa-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pwa-ease: cubic-bezier(.22, 1, .36, 1);
}

.pwa-install {
  position: fixed; z-index: 2147483000;   /* above app chrome + modals */
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  width: min(420px, calc(100vw - 28px));
  box-sizing: border-box;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  background: linear-gradient(150deg, #2e2620, #1c1610);
  border: 1px solid rgba(232, 184, 119, .22);
  border-radius: 20px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .6), 0 4px 14px -8px rgba(0, 0, 0, .5);
  opacity: 0; transition: transform .42s var(--pwa-ease), opacity .42s var(--pwa-ease);
}
.pwa-install.in { transform: translate(-50%, 0); opacity: 1; }

/* app icon badge */
.pwa-badge {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 30%, rgba(244, 150, 60, .26), rgba(244, 150, 60, 0) 70%), #211a13;
  border: 1px solid rgba(232, 184, 119, .28);
}
.pwa-badge svg { width: 26px; height: 20px; }
.pwa-badge path { fill: #f3b64d; filter: drop-shadow(0 1px 3px rgba(244, 150, 60, .5)); }
.pwa-badge.grid svg { width: 24px; height: 24px; }

/* copy */
.pwa-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-copy > strong { font-family: var(--pwa-sans); font-size: 13.5px; font-weight: 700; color: #f3eadd; line-height: 1.25; }
.pwa-copy > span { font-family: var(--pwa-sans); font-size: 12px; font-weight: 500; color: #c9b8a6; line-height: 1.35; }

/* primary "Add" button */
.pwa-add {
  flex: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--pwa-sans); font-size: 13px; font-weight: 700; color: #3a2708;
  padding: 10px 15px; border: none; border-radius: 12px;
  background: linear-gradient(180deg, #ffe38f, #f0b64d);
  box-shadow: 0 6px 16px -6px rgba(240, 182, 77, .7);
  transition: transform .15s var(--pwa-ease), box-shadow .15s var(--pwa-ease);
}
.pwa-add:hover { transform: translateY(-1px); box-shadow: 0 9px 20px -7px rgba(240, 182, 77, .8); }
.pwa-add:active { transform: translateY(0); }
.pwa-add svg { width: 16px; height: 16px; fill: none; stroke: #3a2708; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* iOS variant: no install API, so we render the Share -> Add recipe inline */
.pwa-ios-row { margin-top: 5px; }
.pwa-ios { font-family: var(--pwa-sans); font-size: 12px; font-weight: 500; color: #c9b8a6; line-height: 1.5; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pwa-ios strong { color: #f3eadd; font-weight: 700; }
.pwa-ios svg { width: 15px; height: 15px; vertical-align: -2px; fill: none; stroke: #f3b64d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* dismiss */
.pwa-close {
  flex: none; cursor: pointer;
  width: 28px; height: 28px; align-self: flex-start;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; color: #9c8a78;
  background: none; border: none; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.pwa-close:hover { color: #f3eadd; background: rgba(255, 255, 255, .06); }

/* ---- admin portal skin: navy card, blue button, blue glyph ---- */
.pwa-install.admin {
  background: linear-gradient(150deg, #1b2a3f, #0d1420);
  border-color: rgba(126, 166, 232, .22);
}
.pwa-install.admin .pwa-badge {
  background: radial-gradient(120% 120% at 50% 30%, rgba(58, 110, 197, .32), rgba(58, 110, 197, 0) 70%), #16233a;
  border-color: rgba(126, 166, 232, .3);
}
.pwa-install.admin .pwa-badge path { fill: #a9c6f5; filter: drop-shadow(0 1px 3px rgba(58, 110, 197, .5)); }
.pwa-install.admin .pwa-copy > strong { color: #eef3fb; }
.pwa-install.admin .pwa-copy > span,
.pwa-install.admin .pwa-ios { color: #aab8cc; }
.pwa-install.admin .pwa-ios strong { color: #eef3fb; }
.pwa-install.admin .pwa-ios svg { stroke: #a9c6f5; }
.pwa-install.admin .pwa-add {
  color: #fff; background: linear-gradient(180deg, #5b8ce6, #2458c5);
  box-shadow: 0 6px 16px -6px rgba(36, 88, 197, .7);
}
.pwa-install.admin .pwa-add:hover { box-shadow: 0 9px 20px -7px rgba(36, 88, 197, .85); }
.pwa-install.admin .pwa-add svg { stroke: #fff; }
.pwa-install.admin .pwa-close { color: #7f8ea3; }
.pwa-install.admin .pwa-close:hover { color: #eef3fb; }

/* phone: the admin app grows a fixed bottom tab bar (styles.css ≤700px), so
   the prompt docks above it instead of covering it — and while the prompt is
   up, the local-mode banner (normally just above the bar) climbs over the
   prompt rather than the two stacking on top of each other */
@media (max-width: 700px) {
  .pwa-install.admin { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body:has(.pwa-install.admin.in) .cloud-banner { bottom: calc(206px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install { transition-duration: .001ms; }
}