/* Installed app: notch-safe layout, install offer, update notice. */

/* A phone in landscape puts its camera cut-out over the page gutters. */
@supports (padding: env(safe-area-inset-left)) {
    .container,
    .container-fluid {
        padding-left: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), env(safe-area-inset-left));
        padding-right: max(calc(var(--bs-gutter-x, 1.5rem) * 0.5), env(safe-area-inset-right));
    }
}

/* The footer clearing the home indicator is declared once, in app.css, beside
   the rule that makes the footer reach the bottom edge in the first place. */

.pwa-offer,
.pwa-update {
    display: none;
}

.pwa-offer:not([hidden]),
.pwa-update:not([hidden]) {
    display: flex;
}

.pwa-offer {
    position: fixed;
    z-index: 1045;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    max-width: 32rem;
    margin: 0 auto;
    gap: 0.9rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(18, 21, 30, 0.08);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgba(18, 21, 30, 0.18);
}

.pwa-offer__icon {
    flex: 0 0 auto;
    border-radius: 0.75rem;
}

.pwa-offer__text {
    flex: 1 1 12rem;
}

.pwa-offer__title {
    margin: 0;
    font-weight: 600;
}

.pwa-offer__body {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: #4a4f5c;
}

.pwa-offer__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.pwa-update {
    position: fixed;
    z-index: 1046;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 999px;
    background: #12151e;
    color: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(18, 21, 30, 0.25);
}

/* Both are fixed to the edge the tab bar occupies on a phone, and would open
   across it. The clearance already counts the home indicator, so it replaces the
   inset here rather than adding to it. Above lg there is no tab bar and the
   inset on its own is the whole of what has to be cleared. */
@media (max-width: 991.98px) {
    .pwa-offer,
    .pwa-update {
        bottom: calc(0.75rem + var(--app-tabbar-clearance));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pwa-offer:not([hidden]) {
        animation: pwa-rise 220ms ease-out;
    }

    /* The notice is centred by a transform, so it may only fade. */
    .pwa-update:not([hidden]) {
        animation: pwa-fade 220ms ease-out;
    }
}

@keyframes pwa-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@keyframes pwa-fade {
    from {
        opacity: 0;
    }
}