/* v1.18 §3.40a to §3.40c: the install experience. Its own file, linked from the menu bar's partial
   (src/views/partials/appbutton.ejs), so it is on every page. */

/* "Get the app" in the black menu bar, beside the menu button: on phones and tablets, below 900 px, exactly where
   the menu button shows (styles.css hides that button from 900 px). Never inside the installed app. */
.appbtn { display: none; }
@media (max-width: 899px) {
  .appbtn {
    display: inline-flex; align-items: center; margin-left: auto; min-height: 40px; padding: 0 14px;
    border: 2px solid var(--gold); border-radius: 999px; color: var(--gold); background: none;
    font-family: var(--display); font-size: 1rem; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  }
  .appbtn:hover, .appbtn:focus-visible { background: rgba(210,172,42,.14); color: var(--gold); }
}
.in-app .appbtn, .appbtn[hidden] { display: none; }
@media (display-mode: standalone) { .appbtn { display: none; } }

/* The steps on /app: large words, one step per screen on iPhone and iPad (public/install.js), every step at once
   without JavaScript, and the Android picture steps all together. */
.walksteps { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.walkstep { margin: 0 0 var(--s5); }
.walkcount { margin: 0 0 var(--s1); font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.walktext { margin: 0 0 var(--s3); font-size: 1.35rem; line-height: 1.4; }
.walkpic { display: block; width: 100%; max-width: 380px; height: auto; border-radius: 18px; border: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.walk.is-stepping .walkstep { display: none; }
.walk.is-stepping .walkstep.is-current { display: block; }
.walknav { display: flex; gap: var(--s3); margin: 0 0 var(--s4); }
.walkbtn { min-height: 56px; min-width: 120px; padding: 0 28px; font-size: 1.25rem; }
.walknav .walkbtn[hidden] { display: none; }
.walkshare { font-size: 1.05rem; color: var(--muted); }
.installoffer .walkbtn { width: 100%; max-width: 380px; }