/* Home-screen app layer: safe areas, standalone polish, iOS install hint */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html { -webkit-tap-highlight-color: transparent; }
body { padding-left: var(--sal); padding-right: var(--sar); }
.rail { top: calc(18px + var(--sat)); }
@media (max-width: 860px) { .rail { top: calc(10px + var(--sat)); } }
#scroll-progress { top: var(--sat); }
.detail { top: calc(12px + var(--sat)); bottom: calc(12px + var(--sab)); }
@media (max-width: 560px) { .detail { top: calc(8px + var(--sat)); bottom: calc(8px + var(--sab)); } }
.map-plate.is-fullscreen { inset: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
.map-plate.is-fullscreen .map-stage { height: calc(100vh - 104px - var(--sat) - var(--sab)); }
.footer { padding-bottom: calc(var(--sab) + 24px); }
.masthead { padding-top: calc(var(--sat) + 18px); }

/* launched from the home screen */
html.is-standalone body { overscroll-behavior-y: none; }
html.is-standalone .rail__link, html.is-standalone .nav-cta, html.is-standalone .btn, html.is-standalone button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* iOS install hint */
.a2hs { position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--sab)); z-index: 300; display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 14px; border-radius: 20px; background: rgba(6,56,60,.97); color: #fff; box-shadow: 0 24px 70px rgba(2,34,37,.35);
  font: 500 14px/1.4 Manrope, system-ui, sans-serif; transform: translateY(calc(100% + 40px)); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.a2hs.is-in { transform: none; }
.a2hs img { width: 52px; height: 52px; border-radius: 12px; display: block; }
.a2hs b { display: block; font: 400 19px/1.1 'DM Serif Display', Georgia, serif; margin-bottom: 4px; }
.a2hs span { color: #bee7e7; }
.a2hs strong { color: #fff; font-weight: 700; }
.a2hs svg { width: 17px; height: 17px; vertical-align: -3px; margin: 0 2px; }
.a2hs__close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
/* pointer toward Safari's share button (bottom bar on iPhone, top bar on iPad) */
.a2hs::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; margin-left: -8px; background: rgba(6,56,60,.97); transform: rotate(45deg); border-radius: 3px; }
@media (min-width: 768px) {
  .a2hs { left: auto; right: 18px; bottom: auto; top: calc(18px + var(--sat)); width: 390px; transform: translateY(calc(-100% - 40px)); }
  .a2hs.is-in { transform: none; }
  .a2hs::after { left: auto; right: 70px; bottom: auto; top: -7px; }
}