/* SHABAB AZAN - iPhone web app (PWA) only: safe areas (notch / home bar), install card, sound bar, Azan card, compass button. */
:root[data-pwa] { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
:root[data-pwa] body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
:root[data-pwa] .view, :root[data-pwa] .sheet { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
:root[data-pwa] input, :root[data-pwa] select, :root[data-pwa] textarea { font-size: max(16px, 1em); } /* iPhone: no zoom when typing */

.pwa-install { margin: 10px 0 14px; padding: 14px; animation: fadeUp .5s both; }
.pwa-install.in-set { margin: 4px 0 0; box-shadow: none; }
.pwa-install .pi-head { display: flex; gap: 12px; align-items: center; }
.pwa-install .pi-logo { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.pwa-install .pi-head b { display: block; font-size: 16.5px; }
.pwa-install .pi-head small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; line-height: 1.45; }
.pwa-install .pi-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pwa-install .pi-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--card2); border: 1px solid var(--brd); font-size: 14px; line-height: 1.4; }
.pwa-install .pi-steps .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--gold); color: var(--accent-ink); }
.pwa-install .pi-ic { flex: none; width: 26px; height: 26px; color: #2f8cff; }
.pwa-install .pi-ic.img { border-radius: 7px; }
.pwa-install .pi-btns { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.pwa-install .pi-btns:empty { display: none; }
.pwa-install .pi-btns .btn { flex: 1; height: 44px; }

.pwa-sound { display: flex; width: 100%; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--ink); text-align: start; }
.pwa-sound .ps-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--glow-rgb), .25); animation: breathe 2s ease-in-out infinite; }

.pwa-note b { font-weight: 700; line-height: 1.5; color: var(--gold2); }
[data-fx="light"] .pwa-note b, [data-theme="kasavu"] .pwa-note b { color: var(--ink); }
.pwa-ok { font-size: 20px; font-weight: 700; color: var(--ok, #3ddc84); }
.pwa-ok.wait { color: var(--ink3); }

.pwa-cmp { display: grid; gap: 6px; justify-items: center; margin: 8px auto 4px; max-width: 320px; text-align: center; }
.pwa-cmp .btn { width: 100%; flex: none; }
.pwa-cmp small { color: var(--ink2); font-size: 12.5px; }

.pwa-azan { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(var(--sat) + 20px) 24px calc(var(--sab) + 20px);
  background: radial-gradient(circle at 50% 30%, rgba(var(--glow-rgb), .35), transparent 60%), linear-gradient(170deg, var(--bg2), var(--bg1) 60%, var(--bg3)); animation: fadeUp .4s both; }
.pwa-azan .pa-in { display: grid; justify-items: center; gap: 10px; text-align: center; width: 100%; max-width: 360px; }
.pwa-azan .pa-logo { width: 150px; height: 150px; border-radius: 34px; box-shadow: 0 0 40px rgba(var(--glow-rgb), .45); }
.pwa-azan .pa-lbl { font-size: 17px; color: var(--ink2); letter-spacing: .5px; }
.pwa-azan .pa-name { font-size: 46px; font-weight: 700; color: var(--gold2); font-family: var(--f-mlh), var(--f-head), var(--f-ar-ui), sans-serif; line-height: 1.3; }
.pwa-azan .pa-stop { width: 100%; flex: none; margin-top: 18px; height: 54px; font-size: 17px; }

/* SB 24 Oct 2026: iPhone = prayer times only */
html[data-ponly] #tabs, html[data-ponly] #main .tile9, html[data-ponly] #main [data-open-list], html[data-ponly] #main [data-go9], html[data-ponly] #main .nod, html[data-ponly] #main .grid9, html[data-ponly] #main .h9 { display: none !important; }