/* VW_PERSISTENT_HEADING_WEATHER_DOCK_R9D */
/* VW_P0W1B_R5H_COMPASS_WEATHER_SINGLE_DOCK_20260801 */
:root {
  --vw-r9d-dock-top:
    env(safe-area-inset-top, 14px);
  --vw-r9d-dock-left:
    max(12px, env(safe-area-inset-left, 0px));
  --vw-r9d-compass-size: 72px;
  --vw-r9d-weather-height: 58px;
  --vw-r9d-weather-gap: 10px;
}

#vwPersistentHeadingWeatherDock {
  position: fixed !important;
  top: var(--vw-r9d-dock-top) !important;
  left: var(--vw-r9d-dock-left) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483000 !important;

  display: flex !important;
  align-items: center !important;
  gap: var(--vw-r9d-weather-gap) !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: calc(100vw - var(--vw-r9d-dock-left) - 12px) !important;
  overflow: visible !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
  contain: layout style !important;
}

#vwPersistentHeadingWeatherDock,
#vwPersistentHeadingWeatherDock * {
  box-sizing: border-box !important;
}

#vwVelvetCompassR9D {
  position: relative !important;
  flex: 0 0 var(--vw-r9d-compass-size) !important;
  width: var(--vw-r9d-compass-size) !important;
  height: var(--vw-r9d-compass-size) !important;
  border: 1px solid rgba(195, 92, 255, 0.64) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(84, 29, 128, 0.45) 0%,
      rgba(20, 14, 31, 0.96) 48%,
      rgba(8, 8, 14, 0.98) 100%
    ) !important;

  box-shadow:
    0 0 0 2px rgba(92, 30, 142, 0.28),
    0 0 17px rgba(181, 70, 255, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -8px 18px rgba(0,0,0,0.35) !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

#vwVelvetCompassR9D::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.82) 0deg 0.7deg,
      transparent 0.7deg 10deg
    ) !important;
  opacity: 0.62 !important;
  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 100%
    ) !important;
  mask:
    radial-gradient(
      circle,
      transparent 0 73%,
      #000 74% 100%
    ) !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-r9d-compass-face {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-p0w1b-compass-ring {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-p0w1b-direction {
  position: absolute !important;
  min-width: 14px !important;
  padding: 1px 2px !important;
  border-radius: 999px !important;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 5.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  color: rgba(255,255,255,0.62) !important;
  background: rgba(5,5,10,0.28) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.92) !important;
  transition:
    left 170ms cubic-bezier(.2,.75,.2,1),
    top 170ms cubic-bezier(.2,.75,.2,1),
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease !important;
  will-change: left, top !important;
  pointer-events: none !important;
}

#vwVelvetCompassR9D .vw-p0w1b-direction.is-active {
  color: #f0c4ff !important;
  background: rgba(168,85,247,0.76) !important;
  box-shadow:
    0 0 9px rgba(168,85,247,0.94),
    inset 0 0 0 1px rgba(255,255,255,0.22) !important;
}

#vwVelvetCompassR9D .vw-r9d-heading {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 5 !important;
  transform: translate(-50%, -50%) !important;
  min-width: 28px !important;
  padding: 3px 4px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 10, 0.88) !important;
  color: #ffffff !important;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 0 8px rgba(168,85,247,0.34) !important;
  pointer-events: none !important;
}

.vw-p0w1b-r2-settings-retired {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vw-r9d-weather-source {
  /*
    Preserve the existing weather widget's native appearance.
    R9E changes only fixed placement and visibility.
  */
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  z-index: 2147483000 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}


/* R5H: the legacy independent weather anchor is retired. */
#vwInc365WeatherAnchor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vw-r9d-original-compass-source {
  position: fixed !important;
  top: 0 !important;
  left: -10000px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

.vw-r9e-settings-removed,
.vw-p0w1b-settings-restored,
.vw-p0w1b-r2-settings-retired {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/*
  The dock is intentionally outside the collapsible HUD groups.
  These broad state selectors make the persistence contract explicit.
*/
body.controls-hidden #vwPersistentHeadingWeatherDock,
body.vw-controls-hidden #vwPersistentHeadingWeatherDock,
body.vw-ui-hidden #vwPersistentHeadingWeatherDock,
body.vw-minimal-ui #vwPersistentHeadingWeatherDock,
body.vw-driving-ui-minimal #vwPersistentHeadingWeatherDock,
body.ar-active #vwPersistentHeadingWeatherDock,
body.vw-ar-active #vwPersistentHeadingWeatherDock,
html[data-vw-ui-hidden="true"] #vwPersistentHeadingWeatherDock {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

body.controls-hidden .vw-r9d-weather-source,
body.vw-controls-hidden .vw-r9d-weather-source,
body.vw-ui-hidden .vw-r9d-weather-source,
body.vw-minimal-ui .vw-r9d-weather-source,
body.vw-driving-ui-minimal .vw-r9d-weather-source,
body.ar-active .vw-r9d-weather-source,
body.vw-ar-active .vw-r9d-weather-source,
html[data-vw-ui-hidden="true"] .vw-r9d-weather-source {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (max-width: 420px) {
  :root {
    --vw-r9d-compass-size: 72px;
    --vw-r9d-weather-height: 54px;
  }

  #vwPersistentHeadingWeatherDock {
    gap: var(--vw-r9d-weather-gap) !important;
    width: max-content !important;
    max-width: calc(100vw - var(--vw-r9d-dock-left) - 10px) !important;
  }

  .vw-r9d-weather-source {
    position: relative !important;
    inset: auto !important;
    max-width: calc(100vw - var(--vw-r9d-dock-left) - var(--vw-r9d-compass-size) - var(--vw-r9d-weather-gap) - 10px) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --vw-r9d-compass-size: 62px;
    --vw-r9d-weather-height: 48px;
  }

  #vwPersistentHeadingWeatherDock {
    top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
  }
}