/* VANO MAPS V206 — lightweight route-planning and navigation polish */
:root{--vano-glass:rgba(255,255,255,.94);--vano-line:rgba(50,43,37,.09);--vano-shadow:0 12px 34px rgba(39,32,27,.10)}
html[data-rairo-theme="black"]{--vano-glass:rgba(17,19,24,.94);--vano-line:rgba(255,255,255,.08);--vano-shadow:0 16px 38px rgba(0,0,0,.28)}
/* Keep the map clean: reporting stays out of the primary map controls. */
#quickAlertBtn,#navDrawerAlert,.nav-report-fab,[data-action="report"],[data-nav-action="report"]{display:none!important}
/* Above the map HUD, keep the speedometer as the only persistent driving readout. */
body.body-nav .map-tools>#quickAlertBtn,body.body-nav #quickAlertBtn,body.body-nav .nav-report-fab{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* Route studio after destination confirmation: denser hierarchy, fewer competing surfaces. */
#routeState.vienna-route-studio{padding-bottom:max(16px,env(safe-area-inset-bottom));contain:layout paint}
#routeState .vr-hero{margin-bottom:10px!important}
#routeState .route-head{align-items:center!important;gap:12px!important}
#routeState .vr-copy h2{letter-spacing:-.035em;line-height:1.05}
#routeState .route-time{min-width:84px;text-align:right}
#routeState .vr-customize{display:grid;gap:10px!important}
#routeState .vr-control-block{border:1px solid var(--vano-line)!important;box-shadow:none!important;background:var(--vano-glass)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#routeState .route-variants{gap:8px!important}
#routeState .route-card{border:1px solid var(--vano-line)!important;box-shadow:none!important}
#routeState .start-trip-cta{min-height:58px!important;border-radius:18px!important;box-shadow:0 10px 24px rgba(217,112,63,.18)!important;transform:translateZ(0)}
#routeState .preview-actions{gap:7px!important}
#routeState .sub-action{min-height:42px!important;border-radius:14px!important}
/* Navigation map: avoid expensive decorative filters over the WebGL surface. */
.body-nav .map-vignette,.body-nav .ambient-halo,.body-nav .map-mood-fade{filter:none!important;animation:none!important;transition:opacity .2s ease!important;will-change:auto!important}
.body-nav #map{transform:translateZ(0);backface-visibility:hidden}
.body-nav .mapboxgl-canvas{outline:none;image-rendering:auto}
/* HUD movement should feel immediate without continuous compositor churn. */
.body-nav .nav-maneuver-top,.body-nav .nav-street-chip,.body-nav .nav-panel,.body-nav .floating-speedo,.body-nav .nav-controls-stack{will-change:auto!important;transition:opacity .16s ease,transform .18s ease!important}
.body-nav .traffic-radar{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
/* Puck emphasis without an always-running pulse animation. */
.body-nav .user-marker .pulse{animation:none!important;opacity:.20!important;transform:scale(1.08)!important}
.body-nav.nav-drive-turn .user-marker .pulse,.body-nav.nav-drive-junction .user-marker .pulse,.body-nav.nav-drive-roundabout .user-marker .pulse{opacity:.32!important;transform:scale(1.18)!important}
/* The active route is the visual priority. */
.body-nav .mapboxgl-marker.route-marker.alert-marker{opacity:.86;transform-origin:center bottom}
.body-nav.nav-drive-fast .mapboxgl-marker.route-marker.alert-marker{opacity:.68}
@media(max-width:640px){#routeState .vr-customize{gap:8px!important}#routeState .vr-control-block{border-radius:16px!important}#routeState .start-trip-cta{min-height:56px!important;border-radius:17px!important}.body-nav .traffic-radar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){#routeState *, .body-nav *{scroll-behavior:auto!important;animation:none!important}}

/* V206 camera polish: stable puck, route-first launch, no decorative movement competing with WebGL. */
body.body-nav .floating-speedo{z-index:64!important;transform:translateZ(0)}
body.body-nav .user-marker{will-change:transform;backface-visibility:hidden}
body.body-nav.nav-drive-cruise .user-marker,body.body-nav.nav-drive-fast .user-marker{transition:none!important}


/* V208 — closer driver camera + lightweight recalibration feedback */
body.body-nav #navDrawerRecenter,body.body-nav #recenterBtn{transform:translateZ(0);will-change:auto}
body.body-nav #navDrawerRecenter.calibrating,body.body-nav #recenterBtn.calibrating{box-shadow:0 0 0 5px rgba(224,120,65,.13),0 8px 22px rgba(33,27,23,.13)!important}
body.body-nav #navDrawerRecenter.calibrating i,body.body-nav #recenterBtn.calibrating i{animation:vano-calibrate-v208 1.22s cubic-bezier(.22,.72,.18,1) both;transform-origin:50% 50%}
@keyframes vano-calibrate-v208{0%{transform:rotate(0deg) scale(1)}38%{transform:rotate(155deg) scale(.90)}72%{transform:rotate(325deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){body.body-nav #navDrawerRecenter.calibrating i,body.body-nav #recenterBtn.calibrating i{animation:none!important}}


/* V210 — automotive speedometer + lighter navigation HUD/map */
/* Reporting must never occupy the driving HUD. Keep safety available from the dedicated drawer only. */
#quickAlertBtn,#navDrawerAlert,.nav-report-fab,.report-fab,.quick-report-btn,.quick-alert-btn,
body.body-nav button[aria-label*="denúncia" i],body.body-nav button[title*="denúncia" i],
body.body-nav button[aria-label*="report" i],body.body-nav button[title*="report" i],
body.body-nav [data-action="report"],body.body-nav [data-nav-action="report"]{
  display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important
}

/* Compact automotive dial: strong red rim, readable at a glance, no continuous animation. */
body.body-nav .floating-speedo{
  --speed-red:#e53935;
  --speed-red-dark:#b91c1c;
  width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important;
  padding:0!important;border-radius:50%!important;overflow:visible!important;
  display:grid!important;place-items:center!important;align-content:center!important;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.99) 0 54%,rgba(248,248,249,.98) 72%,rgba(236,237,239,.98) 100%)!important;
  border:3px solid var(--speed-red)!important;
  box-shadow:0 5px 14px rgba(20,20,24,.14),inset 0 0 0 2px rgba(255,255,255,.78)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:transform .16s ease,box-shadow .16s ease!important
}
body.body-nav .floating-speedo::before{
  content:"";position:absolute;inset:5px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -132deg,rgba(43,43,48,.56) 0 1deg,transparent 1deg 13deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  opacity:.48
}
body.body-nav .floating-speedo::after{
  content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--speed-red);bottom:12px;left:50%;transform:translateX(-50%);opacity:.9
}
body.body-nav .floating-speedo .speedo-label{
  position:absolute!important;top:15px!important;left:0!important;right:0!important;margin:0!important;
  font-size:7px!important;line-height:1!important;letter-spacing:.11em!important;font-weight:800!important;color:#68686f!important;text-align:center!important
}
body.body-nav .floating-speedo #floatingSpeedValue{
  display:block!important;margin:2px 0 0!important;font-size:31px!important;line-height:.86!important;letter-spacing:-.065em!important;font-weight:850!important;color:#151519!important;font-variant-numeric:tabular-nums!important
}
body.body-nav .floating-speedo .speedo-unit{
  display:block!important;margin-top:4px!important;font-size:8px!important;line-height:1!important;letter-spacing:.02em!important;font-weight:750!important;color:#66666d!important
}
body.body-nav .floating-speedo .speedo-limit{
  position:absolute!important;right:-7px!important;bottom:-5px!important;width:29px!important;height:29px!important;
  display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border-radius:50%!important;
  background:#fff!important;border:3px solid var(--speed-red)!important;color:#17171a!important;
  font-size:11px!important;line-height:1!important;font-style:normal!important;font-weight:900!important;
  box-shadow:0 2px 7px rgba(0,0,0,.13)!important
}
body.body-nav .floating-speedo.active{transform:translateZ(0) scale(1)!important}
body.body-nav .floating-speedo.near-limit{box-shadow:0 5px 15px rgba(20,20,24,.14),0 0 0 3px rgba(229,57,53,.08)!important}
body.body-nav .floating-speedo.over-limit{border-color:var(--speed-red-dark)!important;box-shadow:0 5px 15px rgba(20,20,24,.14),0 0 0 4px rgba(185,28,28,.11)!important}
body.body-nav .floating-speedo.over-limit #floatingSpeedValue{color:var(--speed-red-dark)!important}
html[data-rairo-theme="black"] body.body-nav .floating-speedo{
  background:radial-gradient(circle at 50% 42%,rgba(31,32,37,.99) 0 55%,rgba(22,23,27,.99) 100%)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.05)!important
}
html[data-rairo-theme="black"] body.body-nav .floating-speedo #floatingSpeedValue{color:#f7f7f8!important}
html[data-rairo-theme="black"] body.body-nav .floating-speedo .speedo-label,
html[data-rairo-theme="black"] body.body-nav .floating-speedo .speedo-unit{color:#a9a9b1!important}
html[data-rairo-theme="black"] body.body-nav .floating-speedo::before{background:repeating-conic-gradient(from -132deg,rgba(255,255,255,.42) 0 1deg,transparent 1deg 13deg)}
html[data-rairo-theme="black"] body.body-nav .floating-speedo .speedo-limit{background:#17181c!important;color:#fff!important}

/* Navigation compositor budget: remove ornamental blur and pulsing layers over WebGL. */
body.body-nav .traffic-radar,body.body-nav .nav-panel,body.body-nav .nav-maneuver-top,body.body-nav .nav-street-chip{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
body.body-nav .mapboxgl-marker.route-marker.alert-marker{filter:none!important;box-shadow:none!important}
@media(max-width:420px){body.body-nav .floating-speedo{width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important}body.body-nav .floating-speedo #floatingSpeedValue{font-size:29px!important}}


/* V211 — definitive navigation HUD cleanup */
/* This was the white shield visible above the speedometer. It is not a report FAB. */
#safetyToolsBtn,
body.body-nav #safetyToolsBtn,
body.body-nav .map-tools #safetyToolsBtn{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Make the speedometer unmistakably automotive even if legacy map CSS is present. */
body.body-nav #floatingSpeedo.floating-speedo{
  --vano-speed-red:#ef3f43;
  position:fixed!important;
  width:92px!important;
  height:92px!important;
  min-width:92px!important;
  min-height:92px!important;
  padding:0!important;
  border:4px solid var(--vano-speed-red)!important;
  border-radius:50%!important;
  background:#171719!important;
  color:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  overflow:visible!important;
  box-shadow:0 7px 18px rgba(0,0,0,.20),inset 0 0 0 2px rgba(255,255,255,.08)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.body-nav #floatingSpeedo.floating-speedo::before{
  content:""!important;
  position:absolute!important;
  inset:6px!important;
  border-radius:50%!important;
  background:repeating-conic-gradient(from 218deg,rgba(255,255,255,.62) 0 1.2deg,transparent 1.2deg 13deg)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))!important;
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))!important;
  opacity:.42!important;
  pointer-events:none!important;
}
body.body-nav #floatingSpeedo.floating-speedo::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  width:18px!important;
  height:3px!important;
  border-radius:999px!important;
  background:var(--vano-speed-red)!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
}
body.body-nav #floatingSpeedo .speedo-label{
  display:none!important;
}
body.body-nav #floatingSpeedo #floatingSpeedValue{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  margin:-2px 0 0!important;
  padding:0!important;
  color:#fff!important;
  font-size:38px!important;
  line-height:.92!important;
  font-weight:900!important;
  letter-spacing:-.055em!important;
  font-variant-numeric:tabular-nums!important;
  text-shadow:none!important;
}
body.body-nav #floatingSpeedo .speedo-unit{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
body.body-nav #floatingSpeedo .speedo-limit{
  position:absolute!important;
  z-index:3!important;
  right:-7px!important;
  bottom:-5px!important;
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:3px solid var(--vano-speed-red)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#151517!important;
  font-size:11px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:950!important;
  box-shadow:0 3px 8px rgba(0,0,0,.20)!important;
}
body.body-nav #floatingSpeedo.over-limit{
  border-color:#ff292f!important;
  box-shadow:0 7px 18px rgba(0,0,0,.20),0 0 0 4px rgba(255,41,47,.13)!important;
}
body.body-nav #floatingSpeedo.over-limit #floatingSpeedValue{color:#ff6b6f!important}
@media(max-width:420px){
  body.body-nav #floatingSpeedo.floating-speedo{width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important}
  body.body-nav #floatingSpeedo #floatingSpeedValue{font-size:36px!important}
}