/* A first-screen mobile entry to the installation guide, shared with the cabinet. */
.mobile-install-banner {
  display: none;
}

@media (max-width: 800px) {
  .auth-install-link {
    display: none;
  }

  /* The cabinet keeps its navigation fixed while its pages scroll. */
  .install-banner-app {
    --mobile-install-offset: 45px;
    padding-top: var(--mobile-install-offset);
  }

  .install-banner-app > .mobile-install-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .install-banner-app .topbar {
    top: var(--mobile-install-offset);
  }

  .mobile-install-banner {
    display: block;
    position: relative;
    z-index: 1;
    background: #e6f2ef;
    border-bottom: 1px solid #c6ded9;
  }

  .mobile-install-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 16px;
    color: #095b62;
    font: 750 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    text-decoration: none;
  }

  .mobile-install-link svg {
    width: 19px;
    height: 22px;
    flex: 0 0 auto;
  }

  .mobile-install-caption {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
  }

  .mobile-install-arrow {
    margin-left: auto;
  }

  .mobile-install-caption + .mobile-install-arrow {
    margin-left: 0;
  }

  .mobile-install-link:focus-visible {
    outline: 2px solid #095b62;
    outline-offset: 2px;
  }

  /* Let the notice sit above the header without covering navigation or content. */
  .has-install-banner .site-header {
    position: sticky;
    top: 0;
  }

  .has-install-banner .hero-inner {
    padding-top: 2rem;
  }

  .has-install-banner .race-catalog-page,
  .has-install-banner .race-detail-page {
    padding-top: 0;
  }
}

@media (max-width: 380px) {
  .mobile-install-caption {
    display: none;
  }

  .mobile-install-caption + .mobile-install-arrow {
    margin-left: auto;
  }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  .install-banner-app {
    --mobile-install-offset: 0px;
  }

  .mobile-install-banner {
    display: none;
  }
}

.pwa-standalone .mobile-install-banner {
  display: none;
}

.pwa-standalone .install-banner-app {
  --mobile-install-offset: 0px;
}