html,
body.hoodie-map-page{
  width:100%;
  height:100vh;
  height:var(--hoodie-map-viewport-height, 100vh);
  overflow:hidden;
  overscroll-behavior:none;
  background:#fff;
}

.hoodie-map-page .hoodie-map-add[hidden]{
  display:none;
}

@supports (height: 100dvh){
  html,
  body.hoodie-map-page{
    height:var(--hoodie-map-viewport-height, 100dvh);
  }
}

.hoodie-map-page .hoodie-map-shell{
  position:fixed;
  inset:0;
  width:100%;
  height:var(--hoodie-map-viewport-height, 100vh);
  min-height:0;
  display:flex;
  flex-direction:column;
  border:0;
  box-shadow:none;
}

@supports (height: 100dvh){
  .hoodie-map-page .hoodie-map-shell{
    height:var(--hoodie-map-viewport-height, 100dvh);
  }
}

.hoodie-map-page .hoodie-map-bar{
  height:62px;
  min-height:62px;
  flex:0 0 62px;
}

.hoodie-map-home{
  flex:0 0 auto;
  padding:.6rem 1rem;
  color:#000;
  border:2px solid #000;
  font-size:.86rem;
  font-weight:700;
  line-height:1;
  transition:background .15s ease, color .15s ease;
}

.hoodie-map-home:hover{
  color:var(--green);
  background:#000;
}

.hoodie-map-page .hoodie-map-stage{
  height:auto;
  min-height:0;
  flex:1 1 auto;
}

.hoodie-map-page .leaflet-gl-layer{
  z-index:2;
}

.hoodie-map-page .hoodie-map-dialog{
  max-height:calc(var(--hoodie-map-viewport-height, 100vh) - 2rem);
}

.hoodie-map-page .hoodie-map-dialog__head{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) 34px;
}

.hoodie-map-page .hoodie-map-dialog__head::before{
  content:"";
  width:34px;
}

.hoodie-map-page .hoodie-map-dialog__head h1{
  color:#111;
  font-family:var(--font-body);
  font-size:1.3rem;
  line-height:1.2;
  text-align:center;
}

.hoodie-map-page .hoodie-map-status{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hoodie-map-page .hoodie-map-status[hidden]{
  display:none;
}

.hoodie-map-page .hoodie-map-more{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:2;
  margin:0;
  padding:.28rem .5rem;
  color:#000;
  background:var(--green);
  border:1px solid #000;
  border-radius:0;
  box-shadow:none;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
  transform:translateX(-50%);
}

.hoodie-map-page .hoodie-map-more:hover{
  color:var(--green);
  background:#000;
}

.hoodie-map-page .hoodie-map-more[hidden]{
  display:none;
}

.hoodie-map-page .hoodie-map-dialog .btn::before{
  display:none;
}

.hoodie-map-page .hoodie-map-dialog .btn[hidden]{
  display:none;
}

.hoodie-map-page .hoodie-map-dialog .btn[aria-busy="true"]{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  opacity:1;
}

.hoodie-map-page .hoodie-map-dialog .btn[aria-busy="true"]::after{
  content:"";
  width:.8rem;
  height:.8rem;
  flex:0 0 auto;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:hoodie-map-spin .65s linear infinite;
}

.hoodie-map-page .hoodie-map-step__complete{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#000;
  background:var(--green);
  border:2px solid #000;
  border-radius:50%;
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
}

.hoodie-map-page .hoodie-map-step__complete[hidden]{
  display:none;
}

@keyframes hoodie-map-spin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .hoodie-map-page .hoodie-map-dialog .btn[aria-busy="true"]::after{
    animation-duration:1.5s;
  }
}

@media (max-width: 600px){
  .hoodie-map-page .hoodie-map-bar{
    height:58px;
    min-height:58px;
    flex-basis:58px;
  }

  .hoodie-map-page .hoodie-map-stage{
    height:auto;
    min-height:0;
  }

  .hoodie-map-home{
    padding:.5rem .65rem;
    font-size:.72rem;
  }

  .hoodie-map-page .hoodie-map-add{
    right:18px;
    bottom:28px;
    bottom:max(18px, env(safe-area-inset-bottom));
  }

  .hoodie-map-page .hoodie-map-dialog{
    width:calc(100vw - 1rem);
    max-height:calc(var(--hoodie-map-viewport-height, 100vh) - 1rem);
  }
}