/* ==========================================
   PWA install + update UI (Soft Scanner)
   Theme-aware via the tokens in tokens.css (--card, --ink, --dim, --line,
   --sage, --r, --shadow); safe-area-aware where fixed to a screen edge.
   Toggled elements start hidden and are revealed by pwa.js via the app-wide
   `.hidden` class (defined in styles.css as display:none !important).
   ========================================== */

/* ---- Update toast --------------------------------------------------------
   Rendered inside #toast-container (fixed, positioned by styles.css). The
   container sets pointer-events:none, so the toast re-enables them. */
.pwa-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sage);
    border-radius: var(--r);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    pointer-events: auto;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

.pwa-toast-msg {
    flex: 1 1 auto;
    font-weight: 600;
}

.pwa-toast-action {
    flex: 0 0 auto;
    background: var(--sage);
    color: #fffdf9;
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.pwa-toast-action:hover {
    background: var(--sage-deep);
}

.pwa-toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--dim);
    font-size: 1.2rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.pwa-toast-close:hover {
    color: var(--ink);
}

/* ---- One-time install banner (index.html) -------------------------------- */
#pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--sage-soft);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

#pwa-install-banner .pwa-banner-text {
    flex: 1 1 auto;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: 1.35;
}

#pwa-install-banner .pwa-banner-text strong {
    display: block;
    font-weight: 700;
}

#pwa-install-banner .pwa-banner-text span {
    color: var(--dim);
    font-size: 0.82rem;
}

#pwa-banner-install {
    flex: 0 0 auto;
    /* --bar-bg/--bar-fg, not white-on-sage: this id rule outranks the .btn
       class the button also carries, so it was quietly keeping the 2.5:1-in-dark
       pair that the .btn repoint replaced everywhere else. */
    background: var(--bar-bg);
    color: var(--bar-fg);
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* opacity, not a --sage-deep background: in dark mode --sage-deep is a light
   tint (#a9c8b5), which would put near-white --bar-fg on near-white. Same
   reasoning as .btn-primary:hover in styles.css. */
#pwa-banner-install:hover {
    opacity: 0.9;
}

#pwa-banner-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--dim);
    font-size: 1.3rem;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

#pwa-banner-dismiss:hover {
    color: var(--ink);
}

/* ---- Install card (account.html) ----------------------------------------- */
#pwa-install-card .pwa-install-lead {
    margin-top: 0;
    font-size: 0.9em;
    color: var(--dim);
}

#pwa-ios-instructions {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--sage-soft);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink);
}

#pwa-ios-instructions .pwa-ios-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#pwa-ios-instructions svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--sage);
}

#pwa-installed-note {
    margin: 8px 0 0;
    font-weight: 600;
    color: var(--sage);
}

/* Give fixed/edge-anchored elements breathing room from device safe areas.
   The install banner scrolls with content so it needs no inset, but honour a
   left/right inset on the toast container's contents on notched devices. */
@supports (padding: env(safe-area-inset-bottom)) {
    .pwa-toast {
        margin-right: env(safe-area-inset-right);
    }
    #pwa-install-banner {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }
}