/* Compact radar shared by the itinerary header and public day-map buttons. */
@media screen {
  #btn-map.it-map-radar,
  .day-focus-btn.it-map-radar {
    --radar-bg: linear-gradient(105deg, #e4f5eb, #eef7f2 52%, #fffdf8);
    --radar-ink: #204b3c;
    --radar-border: rgba(39, 112, 87, .52);
    --radar-ring: rgba(42, 137, 93, .25);
    --radar-point: #299563;
    --radar-beam: rgba(36, 151, 94, .55);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 42px;
    padding: 8px 14px 8px 48px;
    border-color: var(--radar-border);
    background: var(--radar-bg);
    color: var(--radar-ink);
    box-shadow: 0 2px 0 rgba(27, 104, 76, .10), 0 5px 13px rgba(23, 63, 57, .09);
  }

  #btn-map.it-map-radar:hover,
  .day-focus-btn.it-map-radar:hover {
    border-color: #277957;
    background: var(--radar-bg);
    color: var(--radar-ink);
    box-shadow: 0 2px 0 rgba(27, 104, 76, .12), 0 7px 17px rgba(23, 63, 57, .15);
  }

  #btn-map.it-map-radar:focus-visible,
  .day-focus-btn.it-map-radar:focus-visible {
    outline: 3px solid #479b71;
    outline-offset: 3px;
  }

  html[data-theme="dark"] #btn-map.it-map-radar,
  html[data-theme="dark"] .day-focus-btn.it-map-radar {
    --radar-bg: linear-gradient(105deg, #244b39, #2a372a 54%, #25342d);
    --radar-ink: #dceee8;
    --radar-border: #67bd8b;
    --radar-ring: rgba(198, 255, 218, .30);
    --radar-point: #a1e8ba;
    --radar-beam: rgba(127, 247, 170, .48);
  }

  #btn-map.it-map-radar.active,
  .day-focus-btn.it-map-radar.active {
    --radar-bg: #204b3c;
    --radar-ink: #fff;
    --radar-border: #69bd8b;
    --radar-ring: rgba(198, 255, 218, .38);
    --radar-point: #c6ffda;
    --radar-beam: rgba(127, 247, 170, .67);
  }
  html[data-theme="dark"] #btn-map.it-map-radar.active,
  html[data-theme="dark"] .day-focus-btn.it-map-radar.active {
    --radar-bg: #145438;
    --radar-ink: #fff;
    --radar-border: #a1e8ba;
    --radar-ring: rgba(198, 255, 218, .38);
    --radar-point: #c6ffda;
    --radar-beam: rgba(127, 247, 170, .67);
  }

  .it-map-radar .it-map-radar-dial {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -4px;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 1px solid var(--radar-ring);
    border-radius: 50%;
    pointer-events: none;
    background: repeating-radial-gradient(circle at center, transparent 0 6px,
      var(--radar-ring) 7px 8px, transparent 9px 13px);
  }

  .it-map-radar .it-map-radar-dial::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from -38deg, var(--radar-beam) 0deg 48deg, transparent 70deg 360deg);
    animation: itineraryRadarSweep 5.8s linear infinite;
  }

  .it-map-radar .it-map-radar-blip {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--radar-point);
    box-shadow: 0 0 5px var(--radar-point);
  }
  .it-map-radar-blip:nth-child(1) { left: 30%; top: 18%; }
  .it-map-radar-blip:nth-child(2) { left: 77%; top: 39%; }
  .it-map-radar-blip:nth-child(3) { left: 60%; top: 77%; }

  #btn-map.it-map-radar > svg {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
  .it-map-radar > .btn-label,
  .it-map-radar > .it-map-radar-label { position: relative; z-index: 1; }

  /* Heritage has its own mobile colors with !important. Keep the state legible. */
  html[data-it-heritage] #btn-map.it-map-radar {
    background: var(--radar-bg) !important;
    color: var(--radar-ink) !important;
    border-color: var(--radar-border) !important;
  }

  @keyframes itineraryRadarSweep {
    to { transform: rotate(360deg); }
  }
}

@media screen and (max-width: 480px) {
  #btn-map.it-map-radar { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  #btn-map.it-map-radar .it-map-radar-dial { left: 50%; transform: translate(-50%, -50%); }
  #btn-map.it-map-radar > svg { left: 50%; transform: translate(-50%, -50%); }
}

@media screen and (max-width: 640px) {
  html[data-it-heritage] #btn-map.it-map-radar .it-map-radar-dial { left: 50%; transform: translate(-50%, -50%); }
  html[data-it-heritage] #btn-map.it-map-radar > svg { left: 50%; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .it-map-radar .it-map-radar-dial::before { animation: none; }
}

@media print {
  .it-map-radar .it-map-radar-dial { display: none; }
}