#map {
  border: 1px solid silver;
  border-radius: 3px;
  height: 340px;
}

.leaflet-div-icon {
  border: 3px solid darkorange;
  border-radius: 50%;
  min-height: 1rem;
  min-width: 1rem;
}

:focus-visible {
  border-radius: 2px;
  outline: 4px solid currentColor;
  outline-offset: .25rem;
  transition: outline 300ms;
}

@media (prefers-reduced-motion: reduce) {
  :focus-visible {
    transition: none;
  }
}

.leaflet-skip-link-plugin a {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;

  &:focus {
    background-color: #fff;
    border: 1px solid silver;
    height: auto;
    width: auto;
    padding: .2rem;
    z-index: 9999;
  }
}

/*
https://developer.chrome.com/blog/anchor-positioning-api
*/
.leaflet-popover-marker {
  display: inline-block;

  [popover] {
    border-color: gray;
    border-radius: .5rem;
    font-size: .9rem;
    padding: 1rem;
  }
}

.leaflet-popover-marker.anchor-popover {
  /* X_anchor-name: --anchor-el; */

  /* & > input {
    anchor-name: --anchor-el;
  } */

  [popover] {
    /* position-anchor: --anchor-el; */
    position-area: top center;
    X_top: anchor(bottom);
    X_left: anchor(left);

    margin: 0;
    X_inset: unset;
    X_position: absolute;
  }
}

.lang-nav {
  background-color: #f4f4f4;
  border: 1px solid silver;
  border-radius: 3px;
  max-width: 25rem;
  margin: 1.5rem 0;

  summary {
    padding: .7rem;
  }
}

#ua {
  font-size: .9rem;
}

p,
ul {
  line-height: 1.6;
}

body {
  color: #222;
  font-family: sans-serif;
  margin: 1rem;
}

* {
  text-underline-offset: .18rem;
}