/* PWA: tombol ikon topbar (lonceng, tema), banner ajakan pasang aplikasi, isi modal notifikasi & cara pasang.
   Dimuat paling akhir. Warna hanya lewat token tokens.css (terang & gelap). */

/* ---------- tombol ikon topbar ---------- */
.tb-pwa { display: flex; align-items: center; gap: var(--space-1); }
.tb-ic { --btn-bd: transparent; position: relative; color: var(--c-muted); }
.tb-ic:hover { color: var(--c-ink); }
.tb-ic[data-state="on"] { color: var(--c-accent-text); }
.tb-ic[data-state="on"]::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-win); box-shadow: 0 0 0 2px var(--c-paper-2);
}
.tb-ic[data-state="denied"] { color: var(--c-faint); }

/* kanan atas muat di 320px walau LIVE + Admin tampil bersamaan */
@media (max-width: 420px) {
  .topbar__in { gap: var(--space-2); }
  .brand img { height: 15px; }
  .topbar__right .live-pill { padding: 5px 8px; letter-spacing: 0.08em; }
  .topbar__right .tb-admin { width: 38px; padding: 0; }
  .topbar__right .tb-admin span { display: none; }
}
@media (max-width: 359px) {
  .topbar__right { gap: var(--space-1); }
  .topbar__right .btn { width: 34px; min-height: 34px; }
}

/* ---------- banner pasang aplikasi ---------- */
.pwa-banner {
  position: fixed; z-index: 45; left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-3));
  width: min(440px, calc(100% - 2 * var(--space-3)));
  transform: translateX(-50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  column-gap: var(--space-3); row-gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--c-paper-2); color: var(--c-ink);
  border: 1px solid var(--c-rule); border-radius: var(--r-lg);
  box-shadow: var(--c-shadow-card), var(--shadow-lift);
  animation: pwaIn var(--dur-long) var(--ease-out) both;
}
.pwa-banner::before {   /* garis brand tipis di atas */
  content: ""; position: absolute; top: -1px; left: var(--space-5); right: var(--space-5); height: 3px;
  border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--c-accent);
}
.pwa-banner.is-out { opacity: 0; transform: translate(-50%, 12px); transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in); }
@keyframes pwaIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
body[data-route^="/admin"] .pwa-banner { bottom: calc(env(safe-area-inset-bottom) + var(--space-3)); }
@media (min-width: 768px) { .pwa-banner, body[data-route^="/admin"] .pwa-banner { bottom: var(--space-5); } }
body.tv .pwa-banner, body.is-scoring .pwa-banner { display: none; }

.pwa-banner__icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--r-md); }
.pwa-banner__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.pwa-banner__txt strong {
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm);
  letter-spacing: 0.02em; line-height: 1.2;
}
.pwa-banner__txt span { font-size: var(--text-xs); color: var(--c-muted); line-height: 1.45; }
.pwa-banner__x { --btn-bd: transparent; width: 32px; min-height: 32px; margin: -4px -4px 0 0; color: var(--c-muted); }
.pwa-banner__act { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* toast tidak menumpuk di atas banner */
body.has-pwa-banner .toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-5) + var(--pwa-banner-h, 0px)); }
body.has-pwa-banner[data-route^="/admin"] .toasts { bottom: calc(env(safe-area-inset-bottom) + var(--space-5) + var(--pwa-banner-h, 0px)); }
@media (min-width: 768px) { body.has-pwa-banner .toasts, body.has-pwa-banner[data-route^="/admin"] .toasts { bottom: calc(var(--space-5) + var(--space-2) + var(--pwa-banner-h, 0px)); } }

/* ikon kecil di tengah kalimat (Bagikan, lonceng) */
.ic.pwa-inl { width: 1.15em; height: 1.15em; vertical-align: -0.22em; color: var(--c-pal-2); }

/* ---------- isi modal notifikasi / cara pasang ---------- */
.pwa-modal { display: flex; flex-direction: column; gap: var(--space-4); }
.pwa-lead { color: var(--c-ink); }
.pwa-note { font-size: var(--text-xs); color: var(--c-muted); }

.pwa-status {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper-3);
}
.pwa-status__ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--c-win); background: color-mix(in oklab, var(--c-win) 16%, transparent);
}
.pwa-status[data-state="denied"] .pwa-status__ic { color: var(--c-loss); background: color-mix(in oklab, var(--c-loss) 14%, transparent); }
.pwa-status__txt { display: flex; flex-direction: column; min-width: 0; }
.pwa-status__txt strong { font-weight: 700; }
.pwa-status__txt span { font-size: var(--text-sm); color: var(--c-muted); }

.pwa-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pwa-perks li {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper-2);
  font-size: var(--text-sm); font-weight: 600;
}
.pwa-perks__ic {
  --pk: var(--c-pal-1);
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--pk); background: color-mix(in oklab, var(--pk) 14%, transparent);
}
.pwa-perks li[data-n="2"] .pwa-perks__ic { --pk: var(--c-accent-text); }
.pwa-perks li[data-n="3"] .pwa-perks__ic { --pk: var(--c-pal-3); }
.pwa-perks li[data-n="4"] .pwa-perks__ic { --pk: var(--c-pal-4); }

.pwa-steps { counter-reset: pwastep; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pwa-steps li {
  counter-increment: pwastep; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3);
  align-items: start; font-size: var(--text-sm); line-height: 1.55;
}
.pwa-steps li::before {
  content: counter(pwastep); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs);
}
.pwa-steps li > span { padding-top: 3px; }

.pwa-install-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border: 1px dashed var(--c-rule-2); border-radius: var(--r-md); font-size: var(--text-sm);
}
.pwa-install-row > span { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .pwa-banner { animation: none; }
  .pwa-banner.is-out { transition: none; }
}

/* tombol mengambang khusus admin (app.js renderAdminFab): langsung ke papan skor */
.admin-fab {
  position: fixed; z-index: 45; right: var(--space-4);
  bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-accent-ink); text-decoration: none;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--c-accent-line);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.admin-fab:hover { background: var(--c-accent-2); transform: translateY(-2px); }
.admin-fab:active { transform: scale(0.97); }
.admin-fab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
body.has-pwa-banner .admin-fab { bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom) + var(--pwa-banner-h, 0px)); }
body[data-route^="/admin"] .admin-fab { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .admin-fab, body.has-pwa-banner .admin-fab { bottom: calc(var(--space-6) + var(--pwa-banner-h, 0px)); } }
body.tv .admin-fab, body.is-scoring .admin-fab { display: none; }
.live-view__act { gap: var(--space-2); flex-wrap: nowrap; }
@media (prefers-reduced-motion: reduce) { .admin-fab:hover, .admin-fab:active { transform: none; } }