/* Ayni library 0.2.0, installed apps: the session and update bars, the install dialog. Plain CSS, no build step, evergreen browsers 2024+.
   Optional: load it after ayni-base.css. */

/* Top "your session expired" bar (Ayni.pwa.sessionExpired).
 * Sits above the page's own layers and .coach-overlay (300). A dialog open
 * when the 401 arrives is in the top layer, over it: the bar shows once it
 * closes. */
.session-bar             { position: fixed; top: 0; left: 0; right: 0; z-index: 400;
                           display: flex; align-items: center; justify-content: center;
                           flex-wrap: wrap; gap: 12px; padding: 10px 16px;
                           font-size: 0.9rem; color: var(--text);
                           background: var(--card2); border-bottom: 1px solid var(--line); }
.session-bar-btn         { font: inherit; cursor: pointer; padding: 6px 14px;
                           border: none; border-radius: var(--radius-s);
                           background: var(--accent); color: var(--on-accent); }
.session-bar-btn:hover   { filter: brightness(1.13); }
.session-bar-btn:active  { filter: brightness(0.92); }

.install-ico
{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}
.install-ico svg     { width: 18px; height: 18px; display: block; }

.install-logo
{
    display: block;
    width: 64px;
    height: 64px;
    margin: 2px auto 10px;
    border-radius: var(--radius-l);
    box-shadow: var(--elev-card);
}
.install-title { text-align: center; }
.install-lead  { text-align: center; }

.install-h     { margin-top: 16px; }

/* The three iOS steps: a counter bubble, the real glyph, then the sentence. */
.install-steps
{
    counter-reset: install-step;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.install-steps li
{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 2px;
    font-size: 0.86rem;
    line-height: 1.35;
}
.install-steps li + li { border-top: 1px solid var(--line); }
.install-steps li::before
{
    counter-increment: install-step;
    content: counter(install-step);
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card2);
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 600;
}
.install-steps b { font-weight: 600; color: var(--text); }

.install-note
{
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-dim);
}

/* Stacked full-width actions: Instalar / Ahora no / No mostrar más. */
.install-actions
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.install-btn
{
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--card2);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color var(--tr-fast), background var(--tr-fast);
}
.install-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--card2)); }
.install-btn.primary
{
    border-color: transparent;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.95rem;
    font-weight: 600;
}
.install-btn.primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.06); }
.install-never { border-color: transparent; background: none; font-size: 0.8rem; min-height: 36px; }
.install-never:hover { background: none; color: var(--text); text-decoration: underline; }