/* The install offer. One owner, one prefix — nothing else in the app declares
   .install-*, so this file is the whole story for it.

   It sits above the floating tab bar rather than over it, using the same width,
   blur and border so it reads as part of that furniture instead of as an
   interstitial. It is phone-only by construction (the module never unhides it
   above 860px), so the sizing here only ever has a phone to fit. */
.install-offer{position:fixed;z-index:39;left:14px;right:14px;
 bottom:calc(max(18px,env(safe-area-inset-bottom)) + 76px);
 display:flex;align-items:center;gap:12px;padding:12px 14px;
 border-radius:var(--r-lg);border:1px solid var(--edge-2);background:var(--tabbar-bg);
 backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--fg)}
.install-offer[hidden]{display:none}

.install-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.install-copy strong{font-family:var(--font-display);font-weight:800;font-size:calc(14px*var(--scale));letter-spacing:-.3px}
.install-line{font-size:calc(11.5px*var(--scale));line-height:1.35;color:var(--fg-muted)}

.install-actions{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.install-offer button{min-height:36px;padding:0 14px;border-radius:var(--r-pill);
 font-size:calc(12px*var(--scale));font-weight:700;white-space:nowrap;
 display:inline-flex;align-items:center;justify-content:center;gap:6px}
.install-go{background:var(--accent);color:var(--accent-ink)}
.install-go[hidden]{display:none}
.install-dismiss{background:transparent;color:var(--fg-muted);font-weight:600}
.install-dismiss:hover{color:var(--fg)}

/* Below ~380px the two-column row runs the copy to three or four lines, so the
   buttons go under it and stop competing for the width. */
@media(max-width:380px){
 .install-offer{flex-direction:column;align-items:stretch;gap:10px}
 .install-actions{flex-direction:row;justify-content:flex-end}
 .install-go{flex:1 1 auto}
}

@media(prefers-reduced-motion:no-preference){
 .install-offer{animation:install-rise .32s ease both}
 @keyframes install-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* The Settings entry. It shares .settings-row's shape; only the steps line,
   which has to stay readable at two lines, is its own. */
.install-setting small{display:block;line-height:1.4}
.install-setting .install-done{color:var(--accent-text);font-weight:600}

/* The banner floats, so the scroll area has to end above it or the bottom of
   the page — the Open button, most of the time — sits underneath. The height is
   published by the module because the copy wraps differently at each width. */
@media(max-width:860px){
 :root[data-install-offer] .screen{padding-bottom:calc(100px + var(--install-offer-height,0px) + 12px)}
}