/* THE INSTALL BANNER (Owner, 2026-09-21: "just like on CulinEire"). Ported
   from CulinEire's own pwa.css, in the site's own night and blue rather than
   CulinEire's cream and brown. Hidden by default; install-app.js is the
   only thing that ever shows it. */

.pwa-install-banner {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 9100;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgb(0 0 0 / 35%);
    padding-block: .75rem;
    padding-inline: 1rem;
    animation: pwa-slide-up .28s ease both;
}
@keyframes pwa-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .pwa-install-banner { animation: none; } }

.pwa-install-banner__content {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: var(--page-width, 1385px);
    margin-inline: auto;
    min-width: 0;
}
.pwa-install-banner__content[hidden] { display: none !important; }

.pwa-install-banner__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: .6rem; overflow: hidden; }
.pwa-install-banner__icon img { width: 100%; height: 100%; object-fit: cover; }

.pwa-install-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pwa-install-banner__text strong { display: block; font-size: .9rem; font-weight: 700; color: var(--ice); line-height: 1.2; }
.pwa-install-banner__text span { font-size: .78rem; color: var(--muted); line-height: 1.3; }

.pwa-install-banner__action { flex-shrink: 0; min-height: 2.75rem; padding-inline: 1.1rem; font-size: .82rem; white-space: nowrap; }

.pwa-install-banner__dismiss {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; background: none; padding: 0; margin-inline-start: .1rem;
    color: var(--muted); border-radius: .6rem; cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.pwa-install-banner__dismiss:hover { color: var(--ice); background: rgb(85 167 255 / 10%); }
.pwa-install-banner__dismiss:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

@media (max-width: 540px) {
    .pwa-install-banner { padding: .75rem max(.85rem, env(safe-area-inset-left)) calc(.85rem + env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-right)); }
    .pwa-install-banner__content { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: .65rem; align-items: center; width: 100%; }
    .pwa-install-banner__text span { display: none; }
    .pwa-install-banner__icon { display: none; }
    .pwa-install-banner__action { flex: 0 0 auto; width: auto; min-width: 86px; max-width: 38vw; }
}