/* ==========================================================================
   pwa.css — installed-app polish + Add to Home Screen hint.
   Behavioural rules are scoped to standalone mode so the normal
   website is untouched. Safe to delete this file to remove phase 2.
   ========================================================================== */

/* ── Installed app only ─────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overscroll-behavior-y: contain; }
  a, button, input, select, textarea, label,
  .mp-btn, .mp-save-b { -webkit-tap-highlight-color: transparent; }
  button, .mp-btn, .mp-save-b, .pkx-chip, .apx-pill {
    -webkit-user-select: none; user-select: none;
  }
  /* nothing that is not already inset-aware gets pinned to the very bottom */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Same rules again via a class, for engines where display-mode is unreliable
   (older iOS reports only navigator.standalone). */
html.is-standalone { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-standalone body { overscroll-behavior-y: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
html.is-standalone a,
html.is-standalone button,
html.is-standalone input,
html.is-standalone select,
html.is-standalone textarea,
html.is-standalone label { -webkit-tap-highlight-color: transparent; }
html.is-standalone button { -webkit-user-select: none; user-select: none; }

/* The hint is never shown inside the installed app. */
html.is-standalone #a2hs { display: none !important; }

/* ── Add to Home Screen hint ─────────────────────────────────────────────── */
#a2hs {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(108,110,247,.17), rgba(108,110,247,.06));
  border-bottom: 1px solid rgba(108,110,247,.26);
  font-size: 12px; line-height: 1.45; color: var(--text-3);
}
#a2hs[hidden] { display: none !important; }   /* display:flex would override [hidden] */
#a2hs .a2hs-i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#a2hs .a2hs-t { flex: 1 1 auto; min-width: 0; }
#a2hs .a2hs-t b {
  display: block; color: var(--text); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 1px;
}
#a2hs .a2hs-share {
  display: inline-block; vertical-align: -2px; width: 11px; height: 13px;
  margin: 0 1px;
}
#a2hs .a2hs-x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--text-4); font-size: 15px; line-height: 1; padding: 8px;
  min-width: 34px; min-height: 34px;
}
#a2hs .a2hs-x:active { color: var(--text-2); }
@media (max-width: 420px) {
  #a2hs { padding: 9px 12px; gap: 10px; font-size: 11.5px; }
  #a2hs .a2hs-i { width: 28px; height: 28px; }
}

/* ── nb-panel-safe-area ──────────────────────────────────────────────────────
   The notifications sheet is fixed to bottom:0 on mobile (app.css 2769/3665).
   Its base rule sets no padding, so this is purely additive. Outside the
   installed app the inset resolves to 0px and nothing changes. */
@media (display-mode: standalone) {
  .nb-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
html.is-standalone .nb-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── pushbar ─────────────────────────────────────────────────────────────── */
#pushbar {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(16,217,126,.15), rgba(16,217,126,.05));
  border-bottom: 1px solid rgba(16,217,126,.26);
  font-size: 12px; line-height: 1.45; color: var(--text-3);
}
#pushbar[hidden] { display: none !important; }
#pushbar .pushbar-i { flex: 0 0 auto; font-size: 19px; line-height: 1 }
#pushbar .pushbar-t { flex: 1 1 auto; min-width: 0 }
#pushbar .pushbar-t b {
  display: block; color: var(--text); font-size: 13px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 1px;
}
#pushbar .pushbar-go {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--emerald); color: #08221a;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  padding: 8px 15px; border-radius: 8px; min-height: 34px;
}
#pushbar .pushbar-go:disabled { opacity: .7 }
#pushbar .pushbar-x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--text-4); font-size: 14px; line-height: 1;
  padding: 8px; min-width: 32px; min-height: 32px;
}
@media (max-width: 420px) {
  #pushbar { padding: 9px 12px; gap: 9px; font-size: 11.5px }
  #pushbar .pushbar-go { padding: 7px 12px; font-size: 12px }
}

/* ── avatar-flash ────────────────────────────────────────────────────────────
   app.css puts .navbar-avatar-fb at inset:0 with no z-index, under the image
   (z-index:1). The initial therefore shows through until the image paints,
   on every navigation. Hiding it while .has-img is set removes the flash;
   the img's onerror strips .has-img, so a broken image still falls back. */
.navbar-avatar.has-img .navbar-avatar-fb { display: none; }
.navbar-avatar.has-img .navbar-avatar-img { background: var(--surface-3); }

/* ── a2hs-install-button ─────────────────────────────────────────────────── */
#a2hs .a2hs-go {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--indigo); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  padding: 8px 15px; border-radius: 8px; min-height: 34px;
}
#a2hs .a2hs-go:active  { background: var(--indigo-3); }
#a2hs .a2hs-go:disabled { opacity: .65; cursor: default; }
#a2hs .a2hs-go[hidden] { display: none !important; }
@media (max-width: 420px) {
  #a2hs .a2hs-go { padding: 7px 12px; font-size: 12px; }
}

/* ===== install-ui v3 ===== */
/* The install card on Settings → Profile, and the drawer item that leads to
   it. The banner (pwa.css, #a2hs) is a one-time nudge; these two are the
   permanent way in, so dismissing the banner costs a player nothing. */
/* .ac-btn declares display:inline-flex, which BEATS the user-agent's
   [hidden] { display: none }. Without these the Install button shows on an
   iPhone, where nothing can install it — you press it and nothing happens.
   pwa.css already carries the same note for #a2hs. */
#insCard[hidden]        { display: none !important; }
#umInstall[hidden]      { display: none !important; }
.ins-act .ac-btn[hidden]{ display: none !important; }
#insGo[hidden], #insCopy[hidden] { display: none !important; }

.ac-card.ins .ac-p { margin-bottom: 16px; }

.ins-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ins-act .ac-hint { flex: 1 1 100%; }

.ins-why { margin-bottom: 0; }

.ins-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
}
.ins-steps[hidden] { display: none !important; }
.ins-steps li::marker {
  color: var(--indigo-2);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
/* The steps ARE the instruction on iPhone, where no button can install, so
   they are set as content rather than as a footnote under a button. */
.ins-steps li { padding-left: 2px; }

/* On a phone the two buttons share the row rather than stacking awkwardly */
@media (max-width: 480px) {
  .ins-act { gap: 8px; }
  .ins-act .ac-btn { flex: 1 1 auto; }
}
/* ===== end install-ui v3 ===== */

/* ===== push-ui v1 ===== */
/* The per-device notification control in Settings -> Notifications. Kept
   independent of the install-ui block: rolling one back must not strip the
   layout out from under the other.

   .ac-btn declares display:inline-flex, which BEATS the user agent's
   [hidden]{display:none}. Without these overrides a dead button paints —
   the same fault that made the iPhone Install button appear and do nothing. */
#pnCard[hidden]         { display: none !important; }
.pn-act .ac-btn[hidden] { display: none !important; }
#pnGo[hidden], #pnOff[hidden], #pnApp[hidden] { display: none !important; }

.pn-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pn-act .ac-hint { flex: 1 1 100%; }

@media (max-width: 480px) {
  .pn-act { gap: 8px; }
  .pn-act .ac-btn { flex: 1 1 auto; }
}
/* ===== end push-ui v1 ===== */