/* ---- [PWA install] (owner, 2026-10-19) ----
   "Get the Niguro app": a small floating notice at the top centre, under the site header, that slides down when it
   appears and back up when it is closed or the app is installed (a fade with prefers-reduced-motion). One compact row:
   the brand icon (38px tile), the title / subtitle (one line each, ellipsis), a small primary pill "Install" (the
   chip sizes, --ng-chip-*) and a 28px round × (.ng-iconbtn). It never covers the bottom pill nav or the cookie card
   (both at the bottom). Markup: _footer.tpl; behaviour: includes/assets/js/core/niguro-pwa.js.
   The iOS sheet (.ng-pwa-ios): how to add to the Home Screen in Safari (Share → Add to Home Screen), a bottom sheet
   on phones (the theme's ng-sheet-up / ng-sheet-down) and a centred card from 576px. */
.ng-pwa {
  position: fixed; z-index: 1045; left: 0; right: 0; margin-inline: auto;
  top: max(calc(var(--ng-header-h, 56px) + 22px), calc(env(safe-area-inset-top, 0px) + 8px)); /* (owner) clear of the header's 13px cloud puffs, ~9px below them */
  width: calc(100% - 24px); max-width: 420px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 10px;
  border: 1px solid var(--ng-line); border-radius: 16px; background: var(--ng-card); color: var(--ng-ink);
  box-shadow: var(--ng-pop-shadow, 0 8px 24px hsl(0 0% 0% / .16));
  transform: translateY(calc(-100% - var(--ng-header-h, 56px) - 24px)); opacity: 0; visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s linear .32s;
  touch-action: pan-x;
}
.ng-pwa[hidden] { display: none !important; }
.ng-pwa.is-in { transform: none; opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s; }
.ng-pwa.is-dragging { transition: none; }
@media (min-width: 576px) { .ng-pwa { width: calc(100% - 32px); } }
@media (prefers-reduced-motion: reduce) {
  .ng-pwa, .ng-pwa.is-in { transform: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  .ng-pwa.is-in { transition: opacity .2s ease, visibility 0s; }
}
.ng-pwa__ico { flex: none; display: block; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.ng-pwa__txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ng-pwa__title, .ng-pwa__sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ng-pwa__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ng-ink-strong, var(--ng-ink)); }
.ng-pwa__sub { margin-top: 1px; font-size: 12.5px; color: var(--ng-sub); }
/* Install: the small chip pill (--ng-chip-*) in the primary colours */
.ng-pwa__go.ng-pbtn {
  flex: none; height: 30px; padding: 0 var(--ng-chip-px, 12px); gap: 0; border-radius: 999px;
  font-size: var(--ng-chip-fs, 13px); font-weight: 600;
}
.ng-pwa__x.ng-iconbtn { flex: none; width: 28px; height: 28px; margin-left: -2px; }
.ng-pwa__x .ng-ico { width: 18px; height: 18px; }
.ng-pwa__go:focus-visible, .ng-pwa__x:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

/* the iOS "Add to Home Screen" sheet */
.ng-pwa-ios { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; }
.ng-pwa-ios[hidden] { display: none !important; }
.ng-pwa-ios__dim { position: absolute; inset: 0; background: hsl(0 0% 0% / .45); animation: ng-pwa-fade .2s ease both; }
.ng-pwa-ios.is-closing .ng-pwa-ios__dim { animation: ng-pwa-fade .2s ease reverse both; }
.ng-pwa-ios__card {
  position: relative; width: 100%; max-width: 440px; box-sizing: border-box;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
  background: var(--ng-card); color: var(--ng-ink); box-shadow: var(--ng-pop-shadow);
  animation: ng-sheet-up .28s cubic-bezier(.2, .8, .2, 1) both;
}
.ng-pwa-ios__card:focus { outline: none; }
.ng-pwa-ios__card::before { content: ""; display: block; width: 40px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--ng-line); }
.ng-pwa-ios.is-closing .ng-pwa-ios__card { animation: ng-sheet-down .26s cubic-bezier(.4, 0, .6, 1) both; }
@media (min-width: 576px) {
  .ng-pwa-ios { align-items: center; }
  .ng-pwa-ios__card { padding-bottom: 20px; border-radius: 20px; animation-name: ng-pwa-pop; }
  .ng-pwa-ios__card::before { visibility: hidden; }
  .ng-pwa-ios.is-closing .ng-pwa-ios__card { animation: ng-pwa-fade .18s ease reverse both; }
}
@keyframes ng-pwa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ng-pwa-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ng-pwa-ios__card, .ng-pwa-ios.is-closing .ng-pwa-ios__card { animation: ng-pwa-fade .18s ease both; }
  .ng-pwa-ios.is-closing .ng-pwa-ios__card { animation-direction: reverse; }
}
.ng-pwa-ios__head { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; }
.ng-pwa-ios__head .ng-pwa__ico { width: 44px; height: 44px; border-radius: 12px; }
.ng-pwa-ios__head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; color: var(--ng-ink-strong, var(--ng-ink)); }
.ng-pwa-ios__head p { margin: 2px 0 0; font-size: 13px; color: var(--ng-sub); }
.ng-pwa-ios__head .ng-iconbtn { width: 36px; height: 36px; align-self: flex-start; }
.ng-pwa-ios__head .ng-iconbtn .ng-ico { width: 20px; height: 20px; }
.ng-pwa-ios__steps { margin: 0; padding: 0; list-style: none; counter-reset: ngpwa; border-top: 1px solid var(--ng-line); }
.ng-pwa-ios__steps li {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--ng-line);
  font-size: 14px; line-height: 1.35; counter-increment: ngpwa;
}
.ng-pwa-ios__steps li::before {
  content: counter(ngpwa); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ng-fill); color: var(--ng-sub); font-size: 12px; font-weight: 600;
}
.ng-pwa-ios__steps li > span { flex: 1 1 auto; min-width: 0; }
.ng-pwa-ios__steps b { font-weight: 600; color: var(--ng-ink-strong, var(--ng-ink)); }
.ng-pwa-ios__glyph { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ng-tile); color: var(--ng-brand); }
.ng-pwa-ios__glyph .ng-ico { width: 20px; height: 20px; }
.ng-pwa-ios__ok.ng-pbtn { width: 100%; margin-top: 16px; border-radius: 999px; }
/* ---- [/PWA install] ---- */