/* PWA install banner (see static/js/pwa-install.js) */
.pwa-install-banner {
    position: fixed;
    z-index: 10050;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
    max-width: 28rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    animation: pwa-install-slide-up 0.35s ease;
}

@keyframes pwa-install-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-install-banner__close {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: 2rem;
    height: 2rem;
    margin: -0.25rem -0.25rem 0 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.pwa-install-banner__close:hover,
.pwa-install-banner__close:focus-visible {
    color: var(--color-text);
    background: var(--color-bg-surface-hover);
    outline: none;
}

.pwa-install-banner__copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

.pwa-install-banner__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}

.pwa-install-banner__text {
    margin: 0;
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.pwa-install-banner__actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.pwa-install-banner__btn {
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pwa-install-banner__btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary-dark);
}

.pwa-install-banner__btn--primary:hover,
.pwa-install-banner__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    outline: none;
}

.pwa-install-banner__btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.pwa-install-banner__btn--ghost:hover,
.pwa-install-banner__btn--ghost:focus-visible {
    background: var(--color-bg-surface-hover);
    outline: none;
}

@media (min-width: 640px) {
    .pwa-install-banner {
        left: auto;
        right: var(--space-6);
        margin: 0;
    }

    .pwa-install-banner__actions {
        flex-direction: row;
    }
}

@media (max-width: 480px) {
    .pwa-install-banner {
        grid-template-columns: 1fr;
    }

    .pwa-install-banner__close {
        grid-column: 1;
        grid-row: 1;
    }

    .pwa-install-banner__copy {
        grid-row: 2;
        padding-right: var(--space-6);
    }

    .pwa-install-banner__actions {
        grid-column: 1;
        grid-row: 3;
        flex-direction: row;
        flex-wrap: wrap;
    }
}