/* The installed app and notifications (Features/Push): «الإشعارات» (.pwa-push) on /me, /parent and /admin/push, and
   «نزّل التطبيق» (.pwa-install) on /me and the home page. */

.pwa-push { scroll-margin-top: 12px; display: grid; gap: var(--space-3); }
.pwa-push h2 { margin: 0; }
.pwa-alert { margin: 0; }
.pwa-device { display: grid; gap: var(--space-2); }
.pwa-device > div { display: grid; gap: var(--space-2); justify-items: start; }
.pwa-device > div > .btn-block { justify-self: stretch; }
.pwa-device p { margin: 0; }
.pwa-on { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 600; }
.pwa-steps { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 4px; }
.pwa-share { vertical-align: -3px; }

.pwa-kinds { margin: 0; border-top: 1px dashed var(--border); padding-top: var(--space-3); }
.pwa-kinds fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pwa-kinds legend { padding: 0; margin-bottom: var(--space-1); font-weight: 600; }
.pwa-kinds .field.check { margin: 0; }
.pwa-kinds .hint { margin: var(--space-2) 0 var(--space-3); }

.pwa-install { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pwa-install[hidden] { display: none; }
.pwa-install-icon { flex: none; }
.pwa-install-icon img { display: block; border-radius: var(--radius-sm); }
.pwa-install-text { flex: 1 1 140px; min-width: 0; display: grid; gap: 2px; }
.pwa-install-text .muted { font-size: var(--fs-sm); }
.pwa-install .btn-accent { flex: none; }
/* The home card: a small row, the ✕ in the top end corner (so it never takes a row of its own on a phone). */
.pwa-install-card { position: relative; padding-block: var(--space-3); padding-inline-end: 56px; }
.pwa-install-close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; min-width: 44px; min-height: 44px; padding: 0; color: var(--text-muted); }

.pwa-test { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.pwa-test h2, .pwa-test p { margin: 0; }
.pwa-test form { justify-self: start; }

@media (max-width: 480px) {
    .pwa-install .btn-accent { flex: 1 1 100%; }
}