/* The "how to install" guide on /install (installs/show.html.erb, install_guide_controller.js).
   The pretend phone's screen is 200×416 px; the finger's --x/--y per step are in that space.
   Layers, bottom to top: page, browser bars, menu or share sheet, scrim, dialog, home, finger. */

.install-how{align-self:flex-start;margin-top:2px;font-weight:700;color:var(--coral-2);text-decoration:none}
.install-how:hover{text-decoration:underline}
.install-help a{display:inline-flex;align-items:center;gap:6px}
@media (display-mode:standalone){.install-help,.install-how{display:none}}

.install-guide{display:flex;flex-direction:column;gap:16px;background:var(--paper);border-radius:30px;box-shadow:var(--sh-lift);padding:18px 16px 20px}
.guide-done{margin:0;padding:12px 16px;border-radius:18px;background:#DDF5E8;color:var(--grass-2);font-weight:700;text-align:center}
.guide-tabs{display:flex;gap:6px;padding:5px;margin:0 auto;border-radius:999px;background:var(--ground)}
.guide-tab{border:0;border-radius:999px;padding:9px 18px;background:none;font:600 1rem/1 var(--display);color:var(--ink-2);cursor:pointer}
.guide-tab[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:var(--sh-sm)}
.guide-body{display:flex;flex-direction:column;align-items:center;gap:18px}
.guide-side{width:100%;display:flex;flex-direction:column;gap:10px}
@media (min-width:620px){.guide-body{flex-direction:row;align-items:center}.guide-side{flex:1}}

.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.step{width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;border:0;border-radius:18px;padding:8px 10px;background:none;color:var(--ink);font:inherit;cursor:pointer;transition:background .25s}
.step .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ground);font:700 .95rem/1 var(--display);color:var(--ink-2);transition:background .25s,color .25s,transform .25s}
.step b{display:block;font-weight:700;line-height:1.25}
.step .hi{display:block;font-size:.9rem}
.step[aria-current=step]{background:var(--hl)}
.step[aria-current=step] .n{background:linear-gradient(180deg,#FF9DB6,var(--coral-2));color:#fff;transform:scale(1.1)}
.guide-note{margin:0;font-size:.9rem;font-weight:600;color:var(--ink-2)}
.guide-toggle{align-self:flex-start}
.install-guide .steps-ios,.install-guide .m-ios{display:none}
.install-guide[data-platform=ios] .steps-ios,.install-guide[data-platform=ios] .m-ios{display:block}
.install-guide[data-platform=ios] .steps-android,.install-guide[data-platform=ios] .m-android{display:none}
.install-guide[data-platform=ios] ol.steps-ios{display:flex}

.guide-tips h2{margin:4px 0 0;font:700 1.2rem/1.2 var(--display)}
.guide-tips p,.guide-tips li{margin:0;line-height:1.4}
.guide-tips .hi{display:block;font-size:.92rem}
.guide-tips ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* --- the pretend phone --- */
.phone{flex:0 0 auto;width:216px;height:432px;padding:8px;box-sizing:border-box;border-radius:38px;background:#2B2840;box-shadow:var(--sh-lift)}
.phone .screen{position:relative;width:200px;height:416px;border-radius:30px;overflow:hidden;background:var(--ground);font:500 10px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#222}
.phone .screen *{box-sizing:border-box}
.phone .screen img{display:block}
.phone .sb{position:absolute;inset:0 0 auto;height:22px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;z-index:7}
.phone .sb-icons{display:flex;gap:3px;align-items:center}
.phone .sb-icons i{width:9px;height:6px;border-radius:1px;background:#222}
.phone .sb-icons .batt{width:14px}
.install-guide[data-scene="5"] .phone .sb{color:#fff}
.install-guide[data-scene="5"] .phone .sb-icons i{background:#fff}

.phone .pg{position:absolute;left:0;right:0;top:62px;bottom:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(circle at 0 0,#FFF1C7 0,transparent 45%),var(--ground)}
.install-guide[data-platform=ios] .phone .pg{top:22px;bottom:66px}
.phone .pg-top{display:flex;align-items:center;gap:6px;font:700 13px/1 var(--display);color:var(--ink)}
.phone .pg-top .chiku{width:26px}
.phone .pg-top .chiku-body{animation:none}
.phone .pg-card{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:#fff;box-shadow:var(--sh-sm)}
.phone .pg-card i{height:7px;border-radius:4px;background:var(--line)}
.phone .pg-card i.short{width:60%}
.phone .pg-btn{height:28px;border-radius:999px;background:linear-gradient(180deg,#FF9DB6,var(--coral-2))}

.phone .url{display:flex;align-items:center;justify-content:center;border-radius:9px;background:#ECECF1;color:#444;font-weight:600}

/* Android: Chrome's bar and ⋮ menu, then the install dialog */
.phone .cbar{position:absolute;left:0;right:0;top:22px;height:40px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;background:#fff;border-bottom:1px solid #eee;z-index:2}
.phone .cbar-home{font-size:14px}
.phone .cbar .url{flex:1;height:26px;border-radius:999px}
.phone .ig-dots{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:16px;font-weight:700}
.phone .amenu{position:absolute;top:26px;right:6px;width:148px;padding-bottom:6px;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.22);transform-origin:top right;transform:scale(.4);opacity:0;transition:transform .3s,opacity .3s;z-index:3}
.phone .amenu-icons{height:34px;display:flex;align-items:center;justify-content:space-around;border-bottom:1px solid #eee;font-size:12px}
.phone .amenu > div:not(.amenu-icons){height:30px;padding:0 14px;display:flex;align-items:center;font-size:11px}
.phone .scrim{position:absolute;inset:0;background:rgba(20,16,40,.4);opacity:0;transition:opacity .3s;z-index:4;pointer-events:none}
.phone .adlg{position:absolute;left:18px;right:18px;top:140px;height:146px;padding:16px;border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:10px;transform:scale(.85);opacity:0;transition:transform .3s,opacity .3s;z-index:5}
.phone .adlg > b{font-size:13px;height:20px}
.phone .adlg-app,.phone .ios-sheet-head,.phone .ios-add-card{display:flex;align-items:center;gap:8px}
.phone .adlg-app{height:44px}
.phone .adlg-app img,.phone .ios-sheet-head img,.phone .ios-add-card img{width:36px;height:36px;border-radius:9px}
.phone .adlg-app span,.phone .ios-sheet-head span,.phone .ios-add-card span{display:flex;flex-direction:column;gap:2px}
.phone .adlg-app b,.phone .ios-sheet-head b,.phone .ios-add-card b{font-size:11px}
.phone .adlg-app small,.phone .ios-sheet-head small,.phone .ios-add-card small{font-size:9px;color:#777}
.phone .adlg-btns{height:36px;display:flex;justify-content:flex-end;align-items:center;gap:18px;font-weight:700;color:#1A73E8}
.phone .adlg-btns .hl{padding:7px 12px;border-radius:999px;background:#1A73E8;color:#fff}
.install-guide[data-scene="3"] .phone .amenu{transform:none;opacity:1}
.install-guide[data-scene="4"] .phone .scrim{opacity:1}
.install-guide[data-scene="4"] .phone .adlg{transform:none;opacity:1}

/* iPhone: Safari's bottom bar and share sheet, then "Add to Home Screen" */
.phone .sbar{position:absolute;left:0;right:0;bottom:0;height:66px;padding:6px 10px 0;background:rgba(248,248,250,.97);border-top:1px solid #ddd;z-index:2}
.phone .sbar .url{height:24px}
.phone .sbar-icons{height:30px;display:flex;align-items:center;justify-content:space-around;color:#2F7BF6;font-size:15px}
.phone .share-btn{width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.phone .share-btn svg{width:17px;height:17px}
.phone .ios-sheet{position:absolute;left:0;right:0;bottom:0;height:236px;border-radius:16px 16px 0 0;background:#F2F2F7;box-shadow:0 -6px 20px rgba(0,0,0,.15);transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.3,1);z-index:3}
.phone .ios-sheet-head{height:52px;padding:0 14px;border-bottom:1px solid #e3e3e8;background:#fff;border-radius:16px 16px 0 0}
.phone .ios-rows{margin:8px 10px 0;border-radius:11px;overflow:hidden;background:#fff}
.phone .ios-rows > div{height:34px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;font-size:11px}
.phone .ios-rows > div:last-child{border-bottom:0}
.phone .ios-add{position:absolute;inset:0;padding-top:22px;background:#F2F2F7;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.9,.3,1);z-index:5}
.phone .ios-add-bar{height:36px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#2F7BF6;font-size:11px}
.phone .ios-add-bar b{color:#222;font-size:10px}
.phone .ios-add-bar .hl{font-weight:700}
.phone .ios-add-card{margin:10px;padding:12px;border-radius:12px;background:#fff}
.install-guide[data-scene="3"] .phone .ios-sheet{transform:none}
.install-guide[data-scene="4"] .phone .ios-add{transform:none}

/* What the finger is about to tap glows. */
.phone .screen .hl{background:#FFF4CF;font-weight:700}
.phone .screen .adlg-btns .hl{background:#1A73E8}
.phone .screen .ios-add-bar .hl{background:none}
.install-guide[data-step="2"] .phone .ig-dots,.install-guide[data-step="2"] .phone .share-btn{animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{background:#FFE08A;box-shadow:0 0 0 4px rgba(255,201,77,.35)}}

/* Home screen, and the new icon popping in */
.phone .ig-home{position:absolute;inset:0;padding:44px 18px 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:54px;gap:8px 10px;align-content:start;justify-items:center;background:linear-gradient(165deg,#7FB8F0,#B7A6F2 60%,#F3B7D0);opacity:0;transition:opacity .45s;z-index:6}
.phone .ig-home .ig-app{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.45)}
.phone .app-ek{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;font-size:8px;font-weight:600;white-space:nowrap;position:relative}
.phone .app-ek img{width:34px;height:34px;border-radius:9px;box-shadow:0 3px 8px rgba(0,0,0,.2);transform:scale(0)}
.install-guide[data-scene="5"] .phone .ig-home{opacity:1}
.install-guide[data-scene="5"] .phone .app-ek img{animation:pop .7s .35s cubic-bezier(.3,1.7,.5,1) both}
.install-guide[data-scene="5"] .phone .app-ek::after{content:"✨";position:absolute;top:-10px;right:-12px;font-size:13px;animation:sparkle 1.4s .8s ease-out both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes sparkle{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.8) translateY(-6px)}}

/* The finger: a touch dot with a hand, gliding to each target, then tapping. */
.phone .tap{position:absolute;left:0;top:0;width:0;height:0;transform:translate(var(--x,100px),var(--y,260px));transition:transform .75s cubic-bezier(.5,0,.25,1),opacity .3s;z-index:10;pointer-events:none}
.phone .tip{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(63,58,90,.45);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.phone .tip::before{content:"👆";position:absolute;left:5px;top:12px;font-size:26px;line-height:1}
.phone .tip::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:3px solid var(--coral);opacity:0}
.install-guide.tapping .phone .tip{animation:press .35s .85s ease-in-out}
.install-guide.tapping .phone .tip::after{animation:ripple .5s .95s ease-out}
@keyframes press{50%{transform:scale(.82)}}
@keyframes ripple{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}

.install-guide[data-platform=android][data-step="1"] .phone .tap{--x:110px;--y:250px}
.install-guide[data-platform=android][data-step="2"] .phone .tap{--x:186px;--y:42px}
.install-guide[data-platform=android][data-step="3"] .phone .tap{--x:168px;--y:165px}
.install-guide[data-platform=android][data-step="4"] .phone .tap{--x:150px;--y:268px}
.install-guide[data-platform=ios][data-step="1"] .phone .tap{--x:110px;--y:230px}
.install-guide[data-platform=ios][data-step="2"] .phone .tap{--x:100px;--y:395px}
.install-guide[data-platform=ios][data-step="3"] .phone .tap{--x:170px;--y:359px}
.install-guide[data-platform=ios][data-step="4"] .phone .tap{--x:180px;--y:40px}
.install-guide[data-step="5"] .phone .tap{opacity:0}

@media (prefers-reduced-motion:reduce){
  .install-guide *,.install-guide *::before,.install-guide *::after{transition:none!important;animation:none!important}
  .install-guide[data-scene="5"] .app-ek img{transform:none}
}