/**
 * pwa-install.css — styling for partials/pwa-install.html.
 *
 * Ships with the partial, not with a layout: the whole point of the extraction is
 * that a bespoke theme gets the piece complete. Styling it from the default
 * theme's <style> block — where it used to live — is how it got lost in the first
 * place.
 *
 * Design-system tokens with fallbacks, so it takes the host theme's colours where
 * they exist (the vertical is near-black; the core's default is slate) and still
 * looks deliberate where they do not. The container is hidden by the `hidden`
 * attribute until the script decides there is something to offer.
 */
.pwa-install {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    /* Tokenised because this sheet is injected WITH the partial, i.e. at the foot
       of the document — after every theme stylesheet, so on equal specificity the
       core wins and a theme could not re-space it even from its own CSS. A token
       is the way in; the alternative is a theme reaching for `!important`, which
       is where a design system starts to die. */
    margin: var(--pwa-install-margin, 0 auto 1rem);
    text-align: center;
}

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

.pwa-install__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: var(--app-surface-2, #1e293b);
    color: var(--app-text-muted, #94a3b8);
    border: 1px solid var(--app-border, #334155);
    border-radius: var(--app-radius, 0);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.pwa-install__btn:hover {
    background: var(--app-accent, #6366f1);
    color: var(--app-on-accent, #fff);
    border-color: var(--app-accent, #6366f1);
}

.pwa-install__btn:focus-visible {
    outline: 2px solid var(--app-accent, #6366f1);
    outline-offset: 2px;
}

.pwa-install__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The iOS gesture. Stays on the page while the person hunts for the browser's
   share button — a modal would cover the very control it is pointing at. */
.pwa-install__ios {
    max-width: 34ch;
    margin: 0;
    color: var(--app-text-muted, #94a3b8);
    font-size: .78rem;
    line-height: 1.45;
}

.pwa-install__ios[hidden] { display: none; }