/* The first-visit install screen for iPhone. See includes/_ios_install.html.

   It covers the page rather than floating over it: a half-height sheet competing with the
   page behind it is harder to read on a small screen than a page that simply is the
   instructions, and there is exactly one thing to do here. */

.iosw {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #0B0B0F;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(59, 130, 255, .30), transparent 62%),
        radial-gradient(90% 55% at 100% 105%, rgba(0, 148, 255, .16), transparent 60%),
        #0B0B0F;
    color: #F5F6FA;
    /* the fixed element is the scroller, so the safe areas belong on it */
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.15rem
             calc(env(safe-area-inset-bottom, 0px) + 1.15rem);
    animation: iosw-in .3s ease both;
}

.iosw[hidden] { display: none !important; }

@keyframes iosw-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .iosw { animation: none; } }

.iosw-in {
    width: 100%;
    max-width: 430px;
    margin: auto;              /* centres it vertically when it is shorter than the screen */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Always reachable, even before reading a word of it. */
.iosw-skip {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + .75rem);
    right: .9rem;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    font: 600 .8rem/1 -apple-system, system-ui, sans-serif;
    padding: .6rem 1rem;
    min-height: 38px;
    border-radius: 50px;
    -webkit-tap-highlight-color: transparent;
}
.iosw-skip:active { background: rgba(255, 255, 255, .18); }

.iosw-head { text-align: center; }

.iosw-icon {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    margin-bottom: 1.1rem;
}

.iosw-head h1 {
    font-size: 1.62rem;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.022em;
    margin: 0 0 .6rem;
}

.iosw-head p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(245, 246, 250, .72);
}

.iosw-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.iosw-steps li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 17px;
    padding: .95rem 1.05rem;
}

.iosw-steps .n {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0500FF, #0094FF);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iosw-steps .t {
    font-size: .91rem;
    line-height: 1.55;
    min-width: 0;
}

/* A pill that looks like the control being described, so the eye can match it against
   what is actually on the screen instead of parsing a sentence. */
.iosw-steps .k {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255, 255, 255, .14);
    border-radius: 7px;
    padding: .12rem .45rem;
    white-space: nowrap;
    font-weight: 700;
}
.iosw-steps .k svg { flex: 0 0 auto; }

.iosw-point {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-size: .82rem;
    color: rgba(245, 246, 250, .62);
    margin-top: -.4rem;
}
.iosw-point[hidden] { display: none !important; }
.iosw-point i { animation: iosw-nudge 1.5s ease-in-out infinite; }

@keyframes iosw-nudge {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .iosw-point i { animation: none; } }

.iosw-foot { display: grid; gap: .55rem; }

.iosw-got {
    width: 100%;
    min-height: 54px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #0500FF, #0094FF);
    color: #fff;
    font: 800 1rem/1 -apple-system, system-ui, sans-serif;
    box-shadow: 0 12px 30px rgba(59, 130, 255, .36);
    -webkit-tap-highlight-color: transparent;
}
.iosw-got:active { transform: scale(.99); }

.iosw-later {
    width: 100%;
    min-height: 46px;
    border: none;
    background: transparent;
    color: rgba(245, 246, 250, .58);
    font: 600 .86rem/1 -apple-system, system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.iosw-later:active { color: rgba(245, 246, 250, .9); }

.iosw-inapp {
    background: rgba(251, 191, 36, .12);
    border: 1px solid rgba(251, 191, 36, .3);
    border-radius: 17px;
    padding: 1rem 1.1rem;
    font-size: .88rem;
    line-height: 1.6;
}
.iosw-inapp[hidden] { display: none !important; }
.iosw-inapp p { margin: 0 0 .6rem; }
.iosw-inapp p:last-child { margin: 0; }

/* A short phone in landscape has no room for the full layout, so it tightens up rather
   than trapping the buttons below the fold. */
@media (max-height: 680px) {
    .iosw-icon { width: 58px; height: 58px; margin-bottom: .75rem; }
    .iosw-head h1 { font-size: 1.35rem; }
    .iosw-head p { font-size: .84rem; }
    .iosw-in { gap: 1.1rem; }
    .iosw-steps li { padding: .75rem .9rem; }
}