/* Project map controls and list. Homepage only, loaded after style.css.

   The map panel, its dots and their pulse are in style.css and are untouched.
   Everything here is added around them, or applies only once a visitor has
   chosen a project or a filter, so the map looks the same until it is used. */

.pm-explorer [hidden] {
  display: none !important;
}

/* The panel clipped any tooltip that rose past its top edge, which on a phone is
   most of them. Its background still stops at the rounded corners without this. */
.pm-explorer .pm-frame {
  overflow: visible;
}

/* Filters ---------------------------------------------------------------- */
.pm-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: 1040px;
  margin: 0 auto 20px;
}

.pm-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-filter {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--heading-color-3);
  border-radius: 999px;
  background: transparent;
  color: var(--heading-color-3);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}

.pm-filter span {
  margin-left: 4px;
  font-weight: 400;
}

.pm-filter:hover {
  background: rgba(5, 50, 58, .08);
}

.pm-filter[aria-pressed="true"] {
  background: var(--heading-color-3);
  color: #fff;
}

.pm-filter:focus-visible,
.pm-row:focus-visible {
  outline: 2px solid var(--green-on-light);
  outline-offset: 2px;
}

/* States ------------------------------------------------------------------
   A state stays lit while one of its projects is chosen, which is how a project
   with no coordinates answers on the map. Three selectors deep so it holds while
   the pointer is over the panel. */
.pm-frame .pm-land.is-preview {
  fill: rgba(110, 180, 80, .18);
}

.pm-frame .pm-land.is-active {
  fill: rgba(110, 180, 80, .3);
  stroke: var(--heading-color-1);
}

/* Dots -------------------------------------------------------------------- */

/* The dots are 13px, and 10px on a phone. This reaches further without drawing
   anything, so they stay the same size and are easier to press. */
.pm-dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

/* A chosen dot looks the way a hovered one does, and keeps its tooltip. A tap on
   a phone does not always focus a button, so this cannot rely on :focus. */
.pm-dot.is-active,
.pm-dot.is-preview {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 0 5px rgba(110, 180, 80, .3),
    0 0 22px 5px rgba(110, 180, 80, .75);
  z-index: 3;
}

.pm-dot.is-active::before,
.pm-dot.is-preview::before {
  animation-play-state: paused;
  opacity: 0;
}

.pm-dot.is-active .pm-tip,
.pm-dot.is-preview .pm-tip {
  opacity: 1;
  visibility: visible;
}

/* Dots near either side open their tooltip inwards, to stay on the screen. */
.pm-dot--start .pm-tip {
  left: -8px;
  transform: none;
}

.pm-dot--start .pm-tip::after {
  left: 14px;
  transform: none;
}

.pm-dot--end .pm-tip {
  left: auto;
  right: -8px;
  transform: none;
}

.pm-dot--end .pm-tip::after {
  left: auto;
  right: 14px;
  transform: none;
}

/* A site with two projects lists both. */
.pm-tip strong:not(:first-child) {
  margin-top: 8px;
}

/* List -------------------------------------------------------------------- */
.pm-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  max-width: 1040px;
  margin: 24px auto 0;
  padding: 0;
  list-style: none;
}

.pm-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(5, 50, 58, .14);
  border-radius: 12px;
  background: #fff;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.pm-row:hover {
  border-color: var(--green-on-light);
}

.pm-row span {
  display: block;
}

.pm-row-name {
  margin-bottom: 2px;
  color: var(--heading-color-3);
  font-size: 16px;
  font-weight: 600;
}

.pm-row[aria-pressed="true"] {
  border-color: var(--heading-color-3);
  background: var(--heading-color-3);
  color: var(--text-color-1);
}

.pm-row[aria-pressed="true"] .pm-row-name {
  color: #fff;
}

.pm-show-all {
  display: block;
  margin: 16px auto 0;
}

@media (prefers-reduced-motion: reduce) {
  .pm-filter,
  .pm-row {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .pm-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-filters {
    margin-bottom: 16px;
  }
}