#map{position:fixed;inset:0;z-index:0;isolation:isolate;background:var(--void);
  transform:scale(var(--map-render-scale,1.05));
  transform-origin:50% 50%}

.maplibregl-canvas{
  filter:brightness(.94) saturate(.30) contrast(1.04);
  transform:scale(var(--tile-render-scale,1.05));
  transform-origin:50% 50%;
}

:root[data-theme="light"] .maplibregl-canvas{filter:saturate(.55) contrast(.98)}

.maplibregl-map{
  touch-action:none;
  -ms-touch-action:none;
  -webkit-user-select:none;user-select:none;
  background:var(--void)
}
.maplibregl-canvas-container,.maplibregl-canvas,.maplibregl-marker{touch-action:none}
.maplibregl-marker{cursor:pointer}
.maplibregl-marker{will-change:transform}

.nv-marker{line-height:0}
.nv-marker>*{transform-origin:center}


#flow{pointer-events:none}

:root[data-rotating] #topbar{opacity:0;pointer-events:none}
:root[data-rotating] #topbar .bar-btn{pointer-events:none}

#topbar{position:fixed;top:0;inset-inline:0;z-index:600;
  transition:opacity .16s ease;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) 22px 34px;
  background:linear-gradient(180deg,var(--veil-a) 0%,
    color-mix(in srgb,var(--veil-a) 72%,transparent) 45%,var(--veil-b) 100%);
  pointer-events:none}
.brand-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.bar-right{display:flex;align-items:center;gap:10px}
.bar-btn{pointer-events:auto;flex:0 0 auto;
  background:var(--float);color:var(--ink);
  position:relative;
  background-image:var(--face);
  box-shadow:var(--depth-1)}
#topbar .bar-btn{transition:background-color .16s ease,color .16s ease}
#topbar .bar-btn:active{background:var(--float-press);transform:scale(.955)}

.bar-dot{
  position:absolute;top:-3px;inset-inline-end:-3px;
  width:10px;height:10px;border-radius:50%;
  background:var(--heavy);
  box-shadow:0 0 0 2px var(--float);
  pointer-events:none
}
.bar-dot[hidden]{display:none}

.bar-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;
  animation:navorPulse 2.6s ease-out 3
}
.brand{font-family:var(--f-head);font-weight:500;letter-spacing:.22em;font-size:19px;
  line-height:1}
.brand span{color:var(--sodium)}
.status{display:flex;align-items:center;gap:6px;
  color:color-mix(in srgb,var(--ink) 58%,transparent);
  font-family:var(--f-head);text-transform:uppercase;
  min-width:0;
  font-size:clamp(10px, 2.6vw, 11px);
  letter-spacing:.06em}

#statusText{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0}

.place-name{color:var(--ink);font-weight:500;
  flex:0 0 auto;
  white-space:nowrap}
.place-name:empty{display:none}
.place-name:not(:empty) + #statusText::before{
  content:"· ";color:var(--mute);font-weight:400}
:root[lang="ar"] .status{text-transform:none;letter-spacing:0;font-size:12px}

.net-state{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:3px 10px 3px 8px;border-radius:999px;
  background:var(--float,rgba(30,32,46,.86));color:var(--ink,#e9e9ed);
  box-shadow:var(--depth-1,0 1px 3px rgba(0,0,0,.3));
  font-family:var(--f-head,Inter,system-ui,sans-serif);
  font-size:clamp(10px, 2.6vw, 11px);font-weight:600;letter-spacing:.04em;line-height:1.4;
  pointer-events:none;
  animation:netIn .22s ease-out}
.net-state[hidden]{display:none}
.net-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;
  background:var(--heavy,#e0655f)}
@keyframes netIn{from{opacity:0}to{opacity:1}}

.dot{position:relative;width:6px;height:6px;border-radius:50%;
  background:var(--mute);flex:0 0 6px}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;animation:navorPulse 2.6s ease-out infinite}
@keyframes navorPulse{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(2.6);opacity:0}
}
.dot[data-level="free"]{background:var(--free)}
.dot[data-level="busy"]{background:var(--sodium)}
.dot[data-level="heavy"]{background:var(--heavy)}
.dot[data-level="idle"]::after{animation:none;opacity:0}


.pin{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-sm);
  font-size:11px;font-weight:500;font-family:var(--f-head);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  line-height:1;border:1px solid;background:var(--pin-bg);
  box-shadow:var(--depth-1)}
.pin.free{border-color:var(--free);color:var(--free)}
.pin.paid{border-color:var(--sodium);color:var(--sodium)}
.pin.unknown{border-color:var(--pin-unknown);color:var(--mute)}
.pin.maybe{border-color:var(--maybe);color:var(--maybe);border-style:dashed;opacity:.92}
.pin.permit{border-color:var(--accent-soft);color:var(--accent-soft);border-style:dashed}
.pin.garage{border-color:var(--free);color:var(--free)}
.pin.kerb{border-radius:5px}
.pin.permit{border-style:dashed}

.pin.group{border-radius:50%;font-size:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.pin.group:active{transform:scale(.93)}

.pin.focus{width:34px;height:34px;font-size:13px;border-width:2px;
  animation:pin-land .34s cubic-bezier(.2,1.3,.4,1)}
.pin.focus.free{box-shadow:0 0 0 5px color-mix(in srgb, var(--free) 26%, transparent)}
.pin.focus.paid{box-shadow:0 0 0 5px color-mix(in srgb, var(--sodium) 26%, transparent)}
.pin.focus.unknown{box-shadow:0 0 0 5px color-mix(in srgb, var(--pin-unknown) 26%, transparent)}
.pin.focus.maybe{box-shadow:0 0 0 5px color-mix(in srgb, var(--maybe) 22%, transparent);opacity:1}
@keyframes pin-land{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.cluster{display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid;
  font-family:var(--f-head);font-weight:500;font-size:13px;
  font-variant-numeric:tabular-nums;
  line-height:1;background:var(--pin-bg);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:transform .14s ease}
.cluster:active{transform:scale(.92)}
.cluster.free{border-color:var(--free);color:var(--free);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--free) 16%, transparent)}
.cluster.paid{border-color:var(--sodium);color:var(--sodium);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sodium) 16%, transparent)}
.cluster.unknown{border-color:var(--pin-unknown);color:var(--mute);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pin-unknown) 14%, transparent)}

.zone{pointer-events:none}
.zone,.kerb-line{vector-effect:non-scaling-stroke}


.kerb-line{pointer-events:none}
.kerb-line{stroke-linecap:round}


:root[data-theme="light"] .zone{fill-opacity:.16}

.me{width:15px;height:15px;border-radius:50%;background:var(--sodium);
  border:2px solid var(--me-ring);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--sodium) 18%,transparent)}

.maplibregl-ctrl-attrib{direction:ltr;background:var(--veil-a)!important;
  color:var(--mute)!important;font-size:9px!important;
  font-family:var(--f-head)!important}
.maplibregl-ctrl-attrib a{color:var(--mute)!important}


.nv-attrib{
  position:fixed;
  z-index:601;

  right:var(--dock-inset,22px);
  bottom:calc(var(--dock-bottom,22px) + var(--dock-h,60px) + 10px);

  width:auto;height:auto;line-height:0;
  background:none;border:0;box-shadow:none;border-radius:0
}

.nv-attrib-btn{
  -webkit-appearance:none;appearance:none;
  margin:0;padding:0;font:inherit;

  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  box-sizing:border-box;

  border:0;
  background:none;
  color:var(--mute,#9397ab);
  cursor:pointer
}
.nv-attrib-btn::before{
  content:"";position:absolute;inset:12px;
  border:1px solid var(--edge,rgba(233,233,237,.28));
  border-radius:50%;background:var(--veil-a,rgba(18,19,28,.96));
  box-shadow:0 1px 6px rgba(0,0,0,.4)
}

.nv-attrib-btn svg{
  position:relative;width:18px;height:18px;display:block;
  shape-rendering:geometricPrecision
}

.nv-attrib-btn:hover,
.nv-attrib-btn:focus-visible,
.nv-attrib.is-open .nv-attrib-btn{color:var(--ink,#e9e9ed)}
.nv-attrib-btn:focus-visible{outline:2px solid var(--edge,rgba(233,233,237,.28));
  outline-offset:2px}

.nv-attrib-notice{
  position:fixed;right:max(var(--dock-inset,22px),env(safe-area-inset-right));
  bottom:calc(env(safe-area-inset-bottom) + 1px);
  width:max-content;
  max-width:calc(100vw - max(var(--dock-inset,22px),env(safe-area-inset-left)) - max(var(--dock-inset,22px),env(safe-area-inset-right)));
  padding:0 4px;border-radius:4px;
  background:color-mix(in srgb,var(--veil-a,rgba(18,19,28,.96)) 85%,transparent);
  color:var(--mute,#9397ab);
  font:10px/1 var(--f-head,Inter,system-ui,sans-serif);
  text-align:end
}
.nv-attrib-notice a{color:inherit;text-decoration:underline;
  text-underline-offset:2px}
.nv-attrib-bag{display:block}
.nv-attrib-notice .nv-attrib-osm{display:block;max-height:40px;overflow:hidden;
  color:var(--ink,#e9e9ed);opacity:1;
  transition:max-height .28s ease,opacity .28s ease}
.nv-attrib-notice.is-collapsed .nv-attrib-osm{max-height:0;opacity:0;pointer-events:none}
.nv-attrib-osm[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .nv-attrib-notice .nv-attrib-osm{transition:none}
}

.nv-attrib-panel{
  position:absolute;
  right:0;bottom:48px;
  width:min(76vw,320px);
  max-height:min(52vh,420px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 13px;
  border:1px solid var(--edge,rgba(233,233,237,.28));
  border-radius:12px;
  background:var(--veil-a,rgba(18,19,28,.96));
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  text-align:start;
  line-height:normal
}
.nv-attrib-panel[hidden]{display:none}

.nv-attrib-copy{margin:0;font-family:var(--f-head,Inter,system-ui,sans-serif);
  font-size:11px;line-height:1.55;color:var(--mute,#9397ab)}
.nv-attrib-copy+.nv-attrib-copy{margin-top:8px;padding-top:8px;
  border-top:1px solid var(--edge,rgba(233,233,237,.28))}
.nv-attrib-copy b{color:var(--ink,#e9e9ed);font-weight:600}
.nv-attrib-copy a{color:var(--ink,#e9e9ed);text-decoration:underline;
  text-underline-offset:2px}

@media (min-width:900px) and (pointer:fine){
  .nv-attrib{right:22px;bottom:22px}
  .nv-attrib-panel{width:min(38vw,420px);max-height:min(56vh,520px);
    padding:14px 16px;border-radius:14px}
  .nv-attrib-copy{font-size:12px;line-height:1.6}
}

#crosshair{position:fixed;inset:0;z-index:550;pointer-events:none;display:grid;place-items:center}
#crosshair[hidden]{display:none}
#crosshair span{position:absolute;background:var(--sodium);opacity:.9}
#crosshair span:first-child{width:1px;height:44px;box-shadow:0 0 8px var(--sodium)}
#crosshair span:last-child{width:44px;height:1px;box-shadow:0 0 8px var(--sodium)}
#crosshair::after{content:"";width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--sodium);position:absolute}


.pin.group.maybe{border-color:var(--maybe);color:var(--maybe);border-style:dashed}
.pin.group.permit{border-color:var(--accent-soft);color:var(--accent-soft)}
.pin.group.garage{border-color:var(--free);color:var(--free)}
.pin.focus.permit{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-soft) 26%,transparent)}
.pin.focus.garage{box-shadow:0 0 0 5px color-mix(in srgb,var(--free) 26%,transparent)}


.marker-cluster,.marker-cluster div{background:none!important;border:none!important;
  box-shadow:none!important;width:auto!important;height:auto!important;
  margin:0!important;border-radius:0!important;font:inherit!important}

.nv-cluster{display:block;width:100%;height:100%;overflow:visible;
  transition:opacity .3s ease}
.nv-cluster-bg{
  fill:var(--pin-bg);stroke-width:1.4;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.32));
  transition:transform .2s ease;transform-origin:18px 18px}
.nv-cluster-label{
  font-family:var(--f-head);font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;pointer-events:none}

.nv-cluster{filter:drop-shadow(0 1px 1px rgba(0,0,0,.34))
                   drop-shadow(0 3px 7px rgba(0,0,0,.30))}
:root[data-theme="light"] .nv-cluster{
  filter:drop-shadow(0 1px 2px rgba(41,43,49,.14))
         drop-shadow(0 5px 12px rgba(41,43,49,.12))}
.nv-cluster .nv-cluster-bg{stroke:var(--sodium)}
.nv-cluster .nv-cluster-label{fill:var(--accent-soft)}


.pin{scale:var(--pin-scale,1);transform-origin:center;
  transition:transform .18s cubic-bezier(.2,.9,.3,1)}

#map.cluster-animating .pin,
#map.cluster-animating .nv-cluster{transition:none}


.nv-zones-pane{opacity:0;transition:opacity .25s ease}
.nv-zones-pane.on{opacity:1}

@keyframes nv-pin-in{
  from{opacity:0;transform:scale(.55)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes nv-cluster-in{
  from{opacity:0;transform:scale(.62)}
  to  {opacity:1;transform:scale(1)}
}
#map.markers-intro .pin{
  animation:nv-pin-in .38s cubic-bezier(.2,1,.3,1) both;
  animation-delay:var(--d,0ms)
}
#map.markers-intro .nv-cluster{
  transform-origin:center;
  animation:nv-cluster-in .38s cubic-bezier(.2,1,.3,1) both;
  animation-delay:var(--d,0ms)
}
#map.cluster-animating .pin,
#map.cluster-animating .nv-cluster{animation:none}


@media (prefers-reduced-motion:reduce){
  .pin,.nv-cluster{transition:none;animation:none}
  #map.markers-intro .pin,
  #map.markers-intro .nv-cluster{animation:none;opacity:1}
  .nv-zones-pane{transition:none;opacity:1}
}