/**
 * Install badge, and the iOS instructions it unfolds.
 *
 * Loaded on the website as well as inside the app, so it stays independent from the theme
 * stylesheet. Colors come from the same custom properties as the app shell and can be overridden
 * from the child theme (see css/_style.scss).
 */

:root {
    --bss-pwa-accent: #1d4ed8;
    /* background of the filled buttons: the accent, deepened if needed to carry white text */
    --bss-pwa-accent-solid: #1d4ed8;
    --bss-pwa-accent-contrast: #ffffff;
    --bss-pwa-surface: #ffffff;
    --bss-pwa-text: #16181d;
    --bss-pwa-muted: #656b76;
    --bss-pwa-border: rgba(0, 0, 0, .08);
    --bss-pwa-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --bss-pwa-install-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bss-pwa-surface: #1a1d23;
        --bss-pwa-text: #f2f3f5;
        --bss-pwa-muted: #9aa1ad;
        --bss-pwa-border: rgba(255, 255, 255, .1);
        --bss-pwa-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

.bss-pwa-install[hidden],
.bss-pwa-install__steps[hidden] {
    display: none;
}

/* the app loads no theme reset, this block cannot rely on a global box-sizing */
.bss-pwa-install,
.bss-pwa-install * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- badge */

.bss-pwa-install {
    position: fixed;
    z-index: 9998;
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    max-width: 24rem;
    /* pinned to the left, never centered on a phone: a page that overflows horizontally widens
       the android layout viewport, and a centered fixed element would slide off screen */
    margin-right: auto;
    padding: .75rem .875rem;
    background: var(--bss-pwa-surface);
    color: var(--bss-pwa-text);
    border: 1px solid var(--bss-pwa-border);
    border-radius: 14px;
    box-shadow: var(--bss-pwa-shadow);
    font-family: var(--bss-pwa-install-font);
    font-size: 14px;
    line-height: 1.35;
    animation: bss-pwa-slide-up .35s ease-out both;
}

/* the app has its own bottom navigation, the badge must sit above it */
.bss-pwa-app .bss-pwa-install {
    bottom: calc(var(--bss-pwa-nav-height, 3.75rem) + env(safe-area-inset-bottom) + .75rem);
}

/* enough room to center it once the screen is comfortably wider than the badge */
@media (min-width: 40em) {
    .bss-pwa-install {
        margin-inline: auto;
    }
}

@keyframes bss-pwa-slide-up {
    from {
        transform: translateY(120%);
        opacity: 0;
    }
}

.bss-pwa-install__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 10px;
}

.bss-pwa-install__body {
    display: flex;
    flex-direction: column;
    /* a basis rather than the content width: the button then wraps to a second line instead of
       pushing the badge past the edge of the screen */
    flex: 1 1 7rem;
    min-width: 0;
}

.bss-pwa-install__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    /* the hook is a sentence, not an app name: it wraps, two lines at most */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.bss-pwa-install__text {
    color: var(--bss-pwa-muted);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.bss-pwa-install__action {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--bss-pwa-accent-solid);
    color: var(--bss-pwa-accent-contrast);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bss-pwa-install__close {
    position: absolute;
    top: -.375rem;
    right: -.375rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bss-pwa-border);
    border-radius: 50%;
    background: var(--bss-pwa-surface);
    color: var(--bss-pwa-muted);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* ---------------------------------------------------------------- iOS instructions */

/*
 * iOS has no install api: the badge unfolds these three steps in place, so the visitor keeps the
 * page they were reading in sight while they go through the share menu.
 */

.bss-pwa-install__steps {
    /* a full-width row of the badge, under the title and the button */
    flex: 1 1 100%;
    margin: 0;
    padding: .625rem 0 0 1.25rem;
    border-top: 1px solid var(--bss-pwa-border);
    color: var(--bss-pwa-text);
    font-size: 13px;
    /* it takes the focus when it opens, for the screen readers only */
    outline: none;
}

.bss-pwa-install__steps li + li {
    margin-top: .375rem;
}

.bss-pwa-install__share {
    display: inline-block;
    width: .8em;
    height: 1em;
    vertical-align: -.15em;
    margin: 0 .15em;
    color: #007aff;
}

/* the badge grew, the slide-up would replay from an outdated height */
.bss-pwa-install--expanded {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .bss-pwa-install {
        animation: none;
    }
}