/* Small connection notice, away from the learner's Next button. */
.connection-notice { position: fixed; z-index: 110; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border: 1px solid #b6cfca; border-radius: 12px; background: #f4faf7; color: #0f3d3e; box-shadow: 0 4px 18px #0f3d3e18; font: 500 .85rem/1.4 system-ui, sans-serif; pointer-events: none; }
.home-stage { --static-map-top: 0px; --static-map-bottom: 0px; }
.home-map #hero-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5vh 3vw; }
/* Keep fixed labels clear of the heading and entry controls on larger screens. */
@media (min-width: 701px) {
  .home-stage { --static-map-top: 170px; --static-map-bottom: 190px; }
  .home-v2 .home-map { top: var(--static-map-top); bottom: var(--static-map-bottom); }
  .home-front { place-items: end center; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .home-map #hero-static { padding: 12px 3vw; }
}
.home-map #hero-canvas { visibility: hidden; }
.home-map-ready:not(.low-data) .home-map #hero-static { display: none; }
.home-map-ready:not(.low-data) .home-map #hero-canvas { visibility: visible; }
.low-data .pm-svg *, .low-data .pm-enter, .low-data .plan-fab, .low-data .view-in, .low-data .step-in, .low-data .type-text .ch::after { animation: none !important; transition: none !important; }
.low-data .pm-route, .low-data .pm-arc { stroke-dashoffset: 0 !important; }
.load-retry { padding: 32px 0; }
.plan-static-placeholder { display: block; width: 100%; height: auto; border-radius: 16px; background: #0e2d31; }
@media print { .connection-notice { display: none; } }