/* Safe areas matter when the app runs without browser chrome on iOS. */
body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}
.pwa-connection { padding: .65rem 1rem; background: #fff1c2; color: #493700; text-align: center; }
.pwa-dialog { width: min(52rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: clamp(1rem, 4vw, 2rem); border: 1px solid #cbd8ce; border-radius: 1.25rem; background: #f7f9f5; color: #173f38; overscroll-behavior: contain; }
.pwa-dialog::backdrop { background: rgb(12 32 24 / 65%); }
.pwa-page { max-width: 52rem; margin: .5rem auto; }
.pwa-close-row { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.pwa-close { border: 1px solid #92ab9a; border-radius: .5rem; background: #fff; color: #173f38; padding: .5rem 1rem; min-height: 44px; }
.pwa-nav-button { width: 100%; border: 0; background: transparent; text-align: left; }
.pwa-intro { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.pwa-intro img { border-radius: 1.25rem; width: 80px; height: 80px; }
.pwa-intro h1 { margin-bottom: .5rem; }
.pwa-intro p { margin: 0; }
.pwa-actions { margin-bottom: 1rem; }
.pwa-guide { border: 1px solid #cbd8ce; border-radius: .75rem; margin: .75rem 0; background: #fff; }
.pwa-guide summary { cursor: pointer; padding: 1rem; font-weight: 650; }
.pwa-guide summary:focus-visible { outline: 3px solid #26724e; outline-offset: 2px; }
.pwa-guide ol, .pwa-guide p { margin: 0 1.25rem 1rem; }
.pwa-guide li { padding: .25rem 0; }
.pwa-note { padding: 1rem; border-radius: .75rem; background: #edf4ed; margin-top: 1.25rem; }
.pwa-note p:last-child { margin-bottom: 0; }
.pwa-page [hidden], [data-pwa-offline][hidden] { display: none !important; }
.pwa-install-link { color: inherit; background: transparent; border: 0; padding: .5rem 0; min-height: 44px; font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: .2em; }
.pwa-banner { position: fixed; z-index: 1040; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); width: min(36rem, calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: start; gap: 1rem; padding: 1.25rem; border: 1px solid #dce5de; border-radius: 1rem; background: #fff; color: #173f38; box-shadow: 0 8px 32px rgb(12 32 24 / 18%); }
.pwa-banner [hidden], .pwa-banner[hidden] { display: none !important; }
.pwa-banner-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: .9rem; background: #173f38; color: #fff; }
.pwa-banner-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-banner h2 { margin: .1rem 0 .4rem; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.pwa-banner p { margin: 0; color: #53695b; font-size: .95rem; line-height: 1.5; }
.pwa-banner button { font: inherit; cursor: pointer; }
.pwa-banner-dismiss { display: grid; place-items: center; width: 36px; height: 44px; margin-top: -.3rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: #53695b; }
.pwa-banner-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: .6rem; }
.pwa-banner-actions button { min-height: 44px; padding: .65rem .9rem; border: 0; border-radius: .6rem; font-size: .95rem; font-weight: 650; }
.pwa-banner-never { margin-right: auto; background: transparent; color: #53695b; }
.pwa-banner-later { background: #edf2ee; color: #173f38; }
.pwa-banner-add { background: #173f38; color: #fff; }
.pwa-banner button:focus-visible { outline: 3px solid #b77900; outline-offset: 3px; }
.pwa-banner-dismiss:hover, .pwa-banner-never:hover { background: #edf2ee; }
.pwa-banner-add:hover { background: #245d4f; }
@media (max-width: 479px) {
    .pwa-banner { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: .65rem; padding: 1rem; }
    .pwa-banner-icon { width: 44px; height: 44px; border-radius: .7rem; }
    .pwa-banner-icon svg { width: 27px; height: 27px; }
    .pwa-banner-dismiss { width: 32px; }
    .pwa-banner-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .pwa-banner-actions .pwa-banner-never { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 575px) {
    .pwa-intro { align-items: flex-start; }
    .pwa-intro img { width: 56px; height: 56px; border-radius: .8rem; }
    .home-utilities { flex-wrap: wrap; justify-content: flex-end; }
    .guest-site-utilities { flex-wrap: wrap; justify-content: flex-end; }
}