/* "Install App" nav entry + install modal.

   The VISIBILITY GATE is deliberately CSS-only: whether to offer an
   install is a property of the device and of whether the app is already
   installed, and both are things CSS can answer. Doing it in JS would
   mean the item flashes on desktop before script runs. */

.nav-install-item {
    display: none;
}

/* A real touch device — `pointer: coarse` is what separates a phone from
   a desktop browser someone happened to narrow. Width alone shows the
   item to anyone with a small window, which is not who it is for. */
@media (max-width: 991px) and (pointer: coarse) {
    .nav-install-item {
        display: block;
    }
}

/* Already installed: never offer it from INSIDE the app. Supported by
   iOS 16.4+, which is the same floor as manifest support, so anything
   that could install this can also hide it. `.is-standalone` is the
   belt-and-braces path for older iOS, set from install.js via the
   legacy `navigator.standalone` flag. */
@media (display-mode: standalone) {
    .nav-install-item {
        display: none !important;
    }
}

.is-standalone .nav-install-item {
    display: none !important;
}

/* ── Modal body ──────────────────────────────────────────────────────── */

.install-steps {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.install-steps > li {
    margin-bottom: 0.75rem;
}

.install-steps > li:last-child {
    margin-bottom: 0;
}

/* Screenshots are an ENHANCEMENT — the steps read fine without them, and
   each <img> carries an inline `onerror` that drops its whole <figure>
   (`_install_modal.html`), so the modal is correct before the artwork
   exists. The handler is inline BECAUSE it must survive an image that
   fails before any script runs. */
.install-shot {
    margin: 0.5rem 0 0;
}

/* The screenshots are 500x530 phone mockups and there are FOUR of them,
   so they are capped and centred rather than run to the full width of the
   dialog: on a phone that is near enough full width anyway, and on a
   desktop it stops four half-page images from turning a short list of
   steps into a scroll marathon. The modal is `modal-dialog-scrollable`,
   which is what makes the remaining scroll behave. */
.install-shot img {
    display: block;
    max-width: min(100%, 320px);
    height: auto;
    margin-inline: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}