/* The install / open-in-app bar and the end-of-article card.
 *
 * The bar is fixed to the bottom of the screen, not inserted into the page.
 * The first version sat under the header and was added after load, which
 * shifted the whole page down by its own height -- on the pages that load
 * live train data, which is exactly where a layout shift does the most harm.
 * Fixed, it moves nothing, and body padding is added only at the bottom so the
 * footer is never covered. It is slim on purpose: a full-screen "get our app"
 * interstitial is something Google penalises on mobile, and rightly. */

.appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem clamp(.85rem, 4vw, 1.25rem);
  padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: var(--white, #fff);
  border-top: 1px solid var(--slate-200, #E2E8F0);
  box-shadow: 0 -10px 30px -18px rgba(11, 27, 51, .35);
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.22, .8, .24, 1);
}
.appbar.is-in { transform: none; }
.has-appbar { padding-bottom: 5.2rem; }

.appbar__mark { width: 2.4rem; height: 2.4rem; border-radius: .7rem; flex: none; }
.appbar__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.appbar__text strong { font-size: .95rem; color: var(--ink, #0B1B33); }
.appbar__text span {
  font-size: .78rem; color: var(--slate-600, #475569);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar__go {
  flex: none; text-decoration: none; font-weight: 700; font-size: .88rem;
  color: #fff; background: var(--blue-600, #1E5FE0);
  border-radius: 999px; padding: .55rem 1.15rem;
}
.appbar__x {
  flex: none; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--slate-500, #64748B);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.appbar__x:hover { background: var(--slate-100, #F1F5F9); }

/* End of an article: an invitation, not an interruption. */
.appcard {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 2.2rem 0 .5rem; padding: 1.15rem 1.3rem;
  border: 1px solid var(--blue-100, #DCE8FF); border-radius: 1.1rem;
  background: linear-gradient(135deg, var(--blue-50, #EEF4FF), #fff 70%);
}
.appcard__mark { width: 3rem; height: 3rem; border-radius: .9rem; flex: none; }
.appcard__text { flex: 1; min-width: 14rem; }
.appcard__text strong { display: block; font-size: 1.02rem; color: var(--ink, #0B1B33); margin-bottom: .15rem; }
.appcard__text span { font-size: .9rem; color: var(--slate-600, #475569); line-height: 1.5; }
.appcard__go {
  text-decoration: none; font-weight: 700; font-size: .92rem; color: #fff;
  background: var(--blue-600, #1E5FE0); border-radius: 999px; padding: .65rem 1.3rem;
}

@media (prefers-reduced-motion: reduce) { .appbar { transition: none; } }

/* Article link rules (colour, underline) would otherwise win inside the card. */
.article__content .appcard { text-decoration: none; }
.article__content a.appcard__go,
.article__content a.appcard__go:hover { color: #fff; text-decoration: none; border-bottom: 0; background: var(--blue-600, #1E5FE0); }
.article__content .appcard__text strong { margin-top: 0; font-size: 1.02rem; }