/* Build 749: canonical OM pin language — category and source at a glance. */

html body .our-map-pin-key-button {
  box-sizing: border-box !important;
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas: "lock key" "privacy key" !important;
  min-width: 116px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 5px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(16, 128, 112, 0.15) !important;
  border-radius: 14px !important;
  color: #315e61 !important;
  background: rgba(231, 247, 241, 0.84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  cursor: pointer !important;
}

html body .our-map-pin-key-button > span:first-child {
  grid-area: lock !important;
  align-self: end !important;
  font-size: 0.56rem !important;
}

html body .our-map-pin-key-button > span:nth-child(2) {
  grid-area: privacy !important;
  align-self: start !important;
  color: #62807e !important;
  font-size: 0.46rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .our-map-pin-key-button > b {
  grid-area: key !important;
  color: #0c756c !important;
  font-size: 0.58rem !important;
  font-weight: 920 !important;
  white-space: nowrap !important;
}

html body .our-map-pin-key-button:focus-visible {
  outline: 2px solid #078478 !important;
  outline-offset: 2px !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin {
  isolation: isolate !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin::after {
  position: absolute !important;
  z-index: 7 !important;
  inset: -3px -4px 0 !important;
  content: "" !important;
  pointer-events: none !important;
  border: 2px solid transparent !important;
  border-radius: 48% 48% 50% 50% !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin.source-mappi::after {
  border-color: rgba(238, 191, 92, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(255, 249, 221, 0.72), 0 4px 12px rgba(154, 105, 17, 0.2) !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin.source-community::after {
  border-color: rgba(19, 176, 154, 0.96) !important;
  border-style: dashed !important;
  box-shadow: 0 0 0 2px rgba(224, 255, 246, 0.7) !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-pin-label {
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.52rem !important;
  letter-spacing: 0 !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin.source-mappi .our-map-pin-label {
  color: #604209 !important;
  background: linear-gradient(145deg, #fff6bf, #efbd55) !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin.source-community .our-map-pin-label {
  color: #ffffff !important;
  background: linear-gradient(145deg, #1fc7a8, #087f76) !important;
}

html body main.app-shell section.map-stage.map-focus .our-map-place-pin.source-provider .our-map-pin-label {
  color: #0a4e5b !important;
  background: linear-gradient(145deg, #e7fbff, #92dce3) !important;
}

html body .our-map-trust-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 1px 0 3px !important;
}

html body .our-map-trust-chip {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(30, 107, 102, 0.14) !important;
  border-radius: 999px !important;
  color: #345d60 !important;
  background: #edf8f4 !important;
  font-size: 0.54rem !important;
  font-weight: 850 !important;
}

html body .our-map-trust-chip.is-mappi {
  border-color: rgba(193, 143, 39, 0.24) !important;
  color: #705015 !important;
  background: #fff7d9 !important;
}

html body .our-map-trust-chip.is-community {
  border-color: rgba(12, 144, 126, 0.24) !important;
  color: #087166 !important;
  background: #e3faf3 !important;
}

html body .our-map-trust-chip.is-time {
  border-color: rgba(110, 64, 178, 0.22) !important;
  color: #64419a !important;
  background: #f3ecff !important;
}

html body .our-map-story-stack-count {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 26px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 1px solid rgba(226, 83, 75, 0.18) !important;
  border-radius: 10px !important;
  color: #9d413d !important;
  background: #fff2ed !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
}

html body .our-map-first-story-credit {
  display: block !important;
  margin-top: -2px !important;
  color: #6b7d7f !important;
  font-size: 0.54rem !important;
  font-weight: 700 !important;
}

html body .our-map-pin-key-dialog {
  width: min(438px, calc(100vw - 24px)) !important;
  max-width: 438px !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 25px !important;
  color: #123f46 !important;
  background: transparent !important;
}

html body .our-map-pin-key-dialog::backdrop {
  background: rgba(2, 24, 34, 0.58) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

html body .our-map-pin-key-panel {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 15px !important;
  padding: 20px !important;
  border: 1px solid rgba(175, 224, 211, 0.76) !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(98, 226, 190, 0.22), transparent 34%),
    #fbfffd !important;
  box-shadow: 0 28px 70px rgba(0, 27, 39, 0.34), inset 0 1px 0 #ffffff !important;
}

html body .our-map-pin-key-panel > header {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 44px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .our-map-pin-key-mark {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border-radius: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #0b8277, #24bfa2) !important;
  box-shadow: 0 8px 18px rgba(5, 111, 101, 0.22) !important;
  font-size: 1.08rem !important;
}

html body .our-map-pin-key-panel header small {
  display: block !important;
  color: #0a8678 !important;
  font-size: 0.57rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body .our-map-pin-key-panel h2 {
  margin: 2px 0 0 !important;
  color: #0c3942 !important;
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
}

html body #ourMapPinKeyClose {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #42686a !important;
  background: #eaf6f1 !important;
}

html body #ourMapPinKeyIntro {
  margin: 0 !important;
  color: #627679 !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

html body .our-map-pin-key-list {
  display: grid !important;
  gap: 8px !important;
}

html body .our-map-pin-key-list > section {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid rgba(21, 106, 101, 0.09) !important;
  border-radius: 15px !important;
  background: rgba(239, 249, 245, 0.75) !important;
}

html body .our-map-pin-key-list strong,
html body .our-map-pin-key-list small {
  display: block !important;
}

html body .our-map-pin-key-list strong {
  color: #174950 !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

html body .our-map-pin-key-list small {
  margin-top: 2px !important;
  color: #667e80 !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
}

html body .our-map-key-swatch {
  position: relative !important;
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 15px 15px 19px 19px !important;
  background: #0f8b7f !important;
  box-shadow: 0 5px 12px rgba(5, 71, 74, 0.18) !important;
}

html body .our-map-key-swatch i {
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

html body .our-map-key-swatch.is-mappi {
  box-shadow: 0 0 0 2px #eec35f, 0 5px 12px rgba(90, 65, 12, 0.18) !important;
}

html body .our-map-key-swatch.is-community {
  border-style: dashed !important;
  box-shadow: 0 0 0 2px #16ad96, 0 5px 12px rgba(5, 71, 74, 0.18) !important;
}

html body .our-map-key-swatch.is-stories {
  box-shadow: 0 0 0 3px #f16d59, 0 0 0 6px #ffffff, 0 5px 12px rgba(90, 28, 22, 0.2) !important;
}

html body .our-map-key-swatch.is-happening {
  border-radius: 12px !important;
  background: linear-gradient(145deg, #8e57d8, #6134ab) !important;
}

html body .our-map-key-swatch.is-happening i {
  font-size: 0.53rem !important;
}

html body .our-map-pin-key-private {
  display: flex !important;
  gap: 9px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(16, 128, 112, 0.12) !important;
  border-radius: 14px !important;
  color: #587374 !important;
  background: #edf8f4 !important;
  font-size: 0.65rem !important;
  line-height: 1.4 !important;
}

html body .our-map-pin-key-private strong {
  color: #0f625c !important;
}

html body .our-map-pin-key-done {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 15px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #087d72, #18aa93) !important;
  box-shadow: 0 9px 20px rgba(5, 94, 87, 0.2) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
}

@media (max-width: 720px) {
  html body .our-map-pin-key-button {
    min-width: 104px !important;
    padding-inline: 7px !important;
  }

  html body .our-map-pin-key-panel {
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    padding: 17px !important;
  }
}

@media (max-width: 370px) {
  html body .our-map-pin-key-button {
    min-width: 44px !important;
    width: 44px !important;
    grid-template-areas: "lock" !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }

  html body .our-map-pin-key-button > :not(:first-child) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .our-map-pin-key-dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}