/* 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;
}

/* Transparent WebGL canvas (the Three.js 3D arrow) over the camera feed. */
#ar-overlay .ar-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* Direction arrow: a CSS triangle centred on screen, rotated by ar.js (renderArrow)
   to the destination's relative bearing. transform-origin near the base so it pivots
   like a compass needle. */
.ar-arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-inline: 26px solid transparent;
  border-block-end: 72px solid var(--color-accent);
  translate: -50% -60%;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 50%));
}

/* 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%);
}