/* ar.css — camera-overlay AR (the MediaStream fallback rendered by ar.js). */
#ar-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
}

/* Full-bleed rear-camera feed behind the guidance overlay. */
#ar-overlay video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Direction arrow — a clean 2D SVG chevron (blue fill + white outline), matching the
   reference Live View. Centred on screen and rotated by ar.js to the eased travel bearing.
   Vector, so it stays crisp at any size; the drop shadow gives it the Google-Maps depth.
   No CSS transition here — the rotation is eased per-frame in JS (a transition would fight
   that and re-introduce lag/wobble). */
.ar-arrow {
  position: absolute;
  inset-block-start: 46%; /* slight upward bias, matching the reference arrow placement */
  inset-inline-start: 50%;
  inline-size: 120px;
  block-size: 120px;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 50%));
}
.ar-arrow__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Remaining-distance badge. */
.ar-badge {
  position: absolute;
  inset-block-end: 32px;
  inset-inline: 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

/* Close (✕) button — always visible so AR can be exited. Top-right, clear of notches. */
/* "Map" button — the labeled way back to the map view (AR ⇄ Map toggle). */
.ar-close {
  position: absolute;
  inset-block-start: calc(12px + env(safe-area-inset-top, 0px));
  inset-inline-end: 12px;
  z-index: 2;
  min-block-size: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(2px);
}
.ar-close:active {
  background: rgb(0 0 0 / 75%);
}

/* ── Turn-by-turn maneuver banner (Google-Maps-style next instruction), ported from the
   reference Live View. Top of the overlay, above the arrow. ─────────────────────────── */
.ar-maneuver {
  position: absolute;
  inset-block-start: calc(12px + env(safe-area-inset-top, 0px));
  inset-inline: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgb(26 115 232 / 95%);
  box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
  color: #fff;
  z-index: 3;
}
.ar-man-icon {
  font-size: 30px;
  line-height: 1;
}
.ar-man-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ar-man-primary {
  font-size: 18px;
  font-weight: 800;
}
.ar-man-sub {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

/* GPS / weak-signal chip (top-left, clear of the maneuver banner). */
.ar-signal {
  position: absolute;
  inset-block-start: calc(76px + env(safe-area-inset-top, 0px));
  inset-inline-start: 16px;
  padding: 6px 12px;
  border-radius: 18px;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  z-index: 3;
}
.ar-signal.ar-weak {
  color: #ffcc66;
}

/* Off-route warning chip (below the maneuver banner). */
.ar-offroute {
  position: absolute;
  inset-block-start: calc(78px + env(safe-area-inset-top, 0px));
  inset-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgb(217 48 37 / 95%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  z-index: 3;
}

/* "Turn around" pill under the arrow (shown when facing away from the route). */
.ar-turnaround {
  position: absolute;
  inset-block-start: calc(50% + 70px);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
}

/* Calibration / movement hint (above the distance badge). */
.ar-hint {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 84px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgb(0 0 0 / 60%);
  color: #ffd479;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  z-index: 3;
}

/* Arrival overlay — check + "You've arrived" + name, auto-closes back to the map. */
.ar-arrival {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  z-index: 4;
}
.ar-check {
  font-size: 68px;
  line-height: 1;
  color: #34a853;
  animation: ar-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ar-arrival-title {
  font-size: 22px;
  font-weight: 800;
}
.ar-arrival-name {
  font-size: 16px;
  opacity: 0.9;
}
.ar-arrival-sub {
  margin-block-start: 10px;
  font-size: 13px;
  opacity: 0.75;
}
@keyframes ar-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}