/* The install gate (reels/install-gate.js, docs/app/WEB_FEED.md "Install gate"): it covers the feed in a browser tab once
   the first-run guide is over. Above the feed and its bars, under the login screen (z 40) and the guide; Settings opens
   over it (a modal dialog in the top layer). Brand tokens: hobbi-brand.css. */
.install-gate{position:fixed;inset:0;z-index:39;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
 padding:calc(var(--sa-safe-top,0px) + 24px) 20px calc(var(--sa-safe-bottom,0px) + 24px);overflow:auto;text-align:center;
 background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--hb-accent,#3faff3) 22%,transparent),transparent 60%),rgba(8,10,18,.94);
 color:var(--d-ink,#eef1f7);font-family:var(--hb-font-ui,system-ui,sans-serif);animation:ig-in .32s var(--sa-ease-out,ease-out) both}
.install-gate>*{max-width:400px;width:100%}
.ig-mark{width:72px;height:72px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.45);margin-bottom:14px}
.install-gate h2{margin:0 0 8px;font:800 28px/1.1 var(--hb-font-display,inherit);letter-spacing:-.01em}
.ig-lead{margin:0 0 18px;font-size:16px;line-height:1.45;color:rgba(238,241,247,.82)}
.ig-note{margin:12px 0 0;font-size:13px;color:rgba(238,241,247,.6)}
.ig-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left}
.ig-steps li{display:grid;grid-template-columns:26px 48px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:20px;
 background:var(--d-paper,#151924);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ig-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--hb-accent,#3faff3);color:var(--hb-on-accent,#0a0c12);font:800 14px/1 var(--hb-font-display,inherit)}
.ig-tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.ig-tile svg{width:28px;height:28px;fill:none;stroke:var(--hb-accent,#3faff3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ig-tile svg circle{fill:var(--hb-accent,#3faff3);stroke:none}
.ig-tile img{width:30px;height:30px;border-radius:8px}
.ig-say{font-size:16px;line-height:1.35}.ig-say small{display:block;margin-top:2px;font-size:12.5px;color:rgba(238,241,247,.6)}
.ig-go{width:100%;height:60px;border:0;border-radius:99px;background:var(--hb-accent,#3faff3);color:var(--d-key-ink,var(--hb-on-accent,#0a0c12));
 font:800 22px/1 var(--hb-font-display,inherit);box-shadow:0 6px 0 var(--hb-accent-shade,#296b95),inset 0 2px 0 var(--hb-accent-gloss,rgba(255,255,255,.4));cursor:pointer}
.ig-go:active{transform:translateY(3px);box-shadow:0 3px 0 var(--hb-accent-shade,#296b95)}
.ig-qr{width:min(260px,70vw);margin:4px auto 10px;padding:12px;border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.ig-qr svg{display:block;width:100%;height:auto}
/* The feed styles icons broadly (svg/path fill and stroke); the code must stay exactly black on white to scan. */
.install-gate .ig-qr svg rect{fill:#fff!important;stroke:none!important}.install-gate .ig-qr svg path{fill:#000!important;stroke:none!important}
.ig-url{margin:0;font-size:13px;color:rgba(238,241,247,.6);word-break:break-all;user-select:all}
.ig-row{margin-top:14px}
.ig-link{min-height:44px;padding:0 18px;border:0;background:none;color:rgba(238,241,247,.72);font:600 15px/1 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.install-gate button:focus-visible{outline:3px solid var(--hb-accent,#3faff3);outline-offset:3px}
.install-gated .install-hint{display:none}
/* The phone gate (install-gate-early.js) is the whole page from the first paint: nothing else shows, nothing animates in. */
html.install-gated body>:not(#installGate){display:none!important}
.install-gate.early{z-index:2147483000;animation:none;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--hb-accent,#3faff3) 22%,transparent),transparent 60%),#080a12}
@keyframes ig-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.install-gate{animation:none}}