/* "Install the app" (includes/app-install.php, js/install.js): a toast at the foot of the
   public pages, a card on the dashboard's overview, and the iPhone steps sheet. Loaded by
   both page shells, so it only leans on auth.css's colours. */

.app-install {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--auth-text, #f3f6f2);
}

.app-install[hidden] {
    display: none;
}

.app-install__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
}

.app-install__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}

.app-install__text strong {
    display: block;
    font-size: 15px;
}

.app-install__text span {
    display: block;
    color: var(--auth-muted, #a9b8ae);
    font-size: 13px;
}

.app-install__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
}

.app-install__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--auth-lime, #b9e660);
    color: #0b1712;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.app-install__button:hover {
    background: #cdf07f;
}

.app-install__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--auth-muted, #a9b8ae);
    cursor: pointer;
}

.app-install__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--auth-text, #f3f6f2);
}

/* Public pages: above the music player and the sticky "Get free picks" bar, which steps
   aside while the toast shows */
.app-install--toast {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 58;
    width: min(420px, calc(100vw - 32px));
    padding: 12px 12px 12px 14px;
    border: 1px solid #1f3c2d;
    border-radius: 16px;
    background: rgba(11, 23, 18, 0.97);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.has-install-bar .site-sticky-cta {
    display: none;
}

/* Dashboard overview */
.app-install--card {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid #1f3c2d;
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(8, 145, 58, 0.16), rgba(16, 36, 27, 0.9));
}

@media (max-width: 480px) {
    .app-install {
        gap: 10px;
    }

    .app-install__icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .app-install__text strong {
        font-size: 14px;
    }

    .app-install__button {
        padding: 0 12px;
    }

    .app-install__close {
        width: 30px;
    }

    .app-install--toast {
        padding: 10px 6px 10px 12px;
    }

    .app-install--card {
        flex-wrap: wrap;
    }

    .app-install--card .app-install__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* The /app/ page's Android steps, scrolled to by its button, clear of the fixed header */
#app-steps-android {
    scroll-margin-top: 96px;
}

/* The iPhone steps */
.app-sheet {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #1f3c2d;
    border-radius: 18px;
    background: #10241b;
    color: var(--auth-text, #f3f6f2);
}

.app-sheet::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.app-sheet__body {
    padding: 22px 22px 20px;
}

.app-sheet h2 {
    margin: 0 0 14px;
    font-size: 20px;
}

.app-sheet__note {
    margin: 14px 0 18px;
    color: var(--auth-muted, #a9b8ae);
    font-size: 13px;
}

.app-sheet .app-install__button {
    width: 100%;
}

.app-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.45;
}

.app-steps .bi {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(185, 230, 96, 0.12);
    color: var(--auth-lime, #b9e660);
    font-size: 18px;
}

/* Connection bar (js/offline.js): a saved copy, or no connection. On phones it sits above
   the sticky "Get free picks" bar and the app's tab bar. */
.net-status {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 59;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    width: calc(100% - 32px);
    max-width: 620px;
    padding: 12px 16px;
    transform: translateX(-50%);
    border: 1px solid #1f3c2d;
    border-radius: 12px;
    background: #10241b;
    color: var(--auth-text, #f3f6f2);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.net-status[hidden] {
    display: none;
}

.net-status.is-offline {
    border-color: var(--auth-lime, #b9e660);
}

.net-status button {
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--auth-lime, #b9e660);
    color: #07120b;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .net-status {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* The /app/ page's Android download button (inside a .site-card, whose paragraphs have no margin) */
.site-card .app-download {
    margin: 4px 0 20px;
}

.app-download .site-button {
    width: 100%;
    padding: 0 12px;
}