/* Post-build 749 release polish: keep the OM place sheet clear and tappable. */

/* Keep discovery behind the place sheet even when its later ID-scoped layout
   rules are loaded. Closing the sheet restores the normal discovery state. */
html body main.app-shell section.map-stage.map-focus.our-map-mode:has(.mymappi-our-map-popup-shell) #ourMapDiscoveryBar:not([hidden]) {
  display: none !important;
}

/* One quiet surface, with consistent reading edges instead of nested banners. */
html body #map .mymappi-our-map-popup-shell .maplibregl-popup-content {
  background: #f9fcfc !important;
  border: 1px solid #cddfe3 !important;
  box-shadow: 0 12px 32px #00243f1a !important;
}

html body #map .mymappi-our-map-popup-shell .our-map-popup {
  text-align: left !important;
}

html body #map .mymappi-our-map-popup-shell .our-map-popup > h3 {
  margin: 8px 0 !important;
  font-size: 1.3rem !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere;
}

html body #map .mymappi-our-map-popup-shell .our-map-popup > .popup-meta {
  margin: 8px 0 !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
}

html body #map .our-map-popup > .our-map-popup-why {
  margin: 10px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: .8125rem !important;
  line-height: 1.5 !important;
}

html body #map .our-map-popup > .our-map-popup-why strong {
  font-size: .6875rem !important;
  margin-bottom: 4px !important;
}

html body main.app-shell section.map-stage.map-focus.our-map-mode
  .maplibregl-popup.mymappi-our-map-popup-shell
  .our-map-popup :is(.popup-route, .popup-edit) {
  min-height: 44px !important;
}

/* Wide, fine-pointer layouts position the floating nav 20px higher than touch layouts. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html body main.app-shell section.map-stage.map-focus.our-map-mode
    .maplibregl-popup.mymappi-our-map-popup-shell {
    bottom: calc(
      var(--bottom-nav-height, 78px) +
      env(safe-area-inset-bottom, 0px) +
      36px
    ) !important;
  }
}

/* Public stories lead discovery; private saving remains a separate, clearly
   labelled lane. These remain the existing private/public actions. */
html body #map .our-map-popup > .our-map-popup-action-lane {
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 13px !important;
  border-radius: 19px !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr);
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-private {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-color: rgba(22, 111, 120, 0.18) !important;
  background: #f4f8fa !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-private > :is(span, small) {
  grid-column: 1 / -1 !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane > span {
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane > small {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  color: #4f7074 !important;
}

html body #map .our-map-popup .our-map-popup-action-lane :is(.our-map-save-later-action, .popup-edit, .our-map-public-story-action) {
  box-sizing: border-box !important;
  display: flex !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 60px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(7, 94, 99, 0.18) !important;
  border-radius: 14px !important;
  font-size: 0.8rem !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: normal !important;
  cursor: pointer !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

html body #map .our-map-popup .our-map-popup-action-lane .our-map-save-later-action {
  color: #ffffff !important;
  background: linear-gradient(120deg, #063e52, #087e72) !important;
  box-shadow: 0 6px 14px rgba(7, 94, 99, 0.14) !important;
}

html body #map .our-map-popup .our-map-popup-action-lane .popup-edit {
  color: #134e60 !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html body #map .our-map-popup .our-map-popup-action-lane :is(.our-map-save-later-action, .popup-edit)::before {
  content: "";
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  background: currentColor;
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17l-6-4-6 4Z'/%3E%3C/svg%3E");
}

html body #map .our-map-popup .our-map-popup-action-lane .popup-edit::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public {
  border-color: rgba(18, 143, 109, 0.22) !important;
  background: linear-gradient(145deg, #effbf7, #e8f7f3) !important;
}

html body .our-map-yapps-invitation {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  min-width: 0;
}

html body .our-map-yapps-invitation > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

html body .our-map-yapps-invitation > span:first-child {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: #075563;
}

html body .our-map-yapps-invitation :is(strong, small) {
  display: block;
  white-space: normal;
}

html body .our-map-yapps-invitation strong {
  color: #164e52;
  font-size: 0.92rem;
  font-weight: 850;
}

html body .our-map-yapps-invitation small {
  margin-top: 2px;
  color: #536f69;
  font-size: 0.75rem;
  line-height: 1.4;
}

html body .our-map-yapps-public-label {
  padding: 5px 8px;
  border: 1px solid #c4e4d6;
  border-radius: 999px;
  color: #296a56;
  background: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
}

html body #map .our-map-popup .our-map-popup-action-lane .our-map-public-story-action {
  min-height: 48px !important;
  color: #075c51 !important;
  background: #d8f5e8 !important;
  box-shadow: inset 0 1px 0 #f6fffb !important;
}

html body #map .our-map-popup .our-map-popup-action-lane .our-map-public-story-action::after {
  content: "↗";
  font-size: 1.1rem;
}

html body #map .our-map-popup .our-map-popup-action-lane .our-map-story-stack-count {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

html body #map .our-map-popup .our-map-story-stack-arrow {
  margin-left: auto;
}

/* Reading leads the community section. No extra step or automatic story load. */
html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count {
  min-height: 52px !important;
  padding: 9px 13px !important;
  border-radius: 14px !important;
  border-color: #00243f !important;
  background: #00243f !important;
  color: #f5fafc !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
  box-shadow: 0 5px 12px #00243f14 !important;
  min-width: 0 !important;
}

/* This action already has a generous target; an expanded pseudo-target would
   spill outside its border and create horizontal overflow at larger text. */
html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count::before {
  content: none;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count:is(:hover, :focus-visible) {
  background: #063a53 !important;
  color: #ffffff !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count:active {
  background: #064b5a !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count > span:nth-child(2) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-arrow {
  color: #75d9c3 !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-public-story-action {
  min-height: 44px !important;
  background: transparent !important;
  color: #315e64 !important;
  border-color: #b9d9d6 !important;
  box-shadow: none !important;
  font-size: .75rem !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-public-story-action::after {
  content: none;
}

html body #map .our-map-popup > .popup-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

html body #map .our-map-popup > .popup-actions:has(.popup-route.subtle):has(.our-map-provider-link) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body #map .our-map-popup > .popup-actions:has(.popup-route.subtle):has(.our-map-provider-link.is-event-details) {
  grid-template-columns: 1fr 1fr 1.3fr !important;
}

html body #map .our-map-popup > .popup-actions :is(.popup-route, .our-map-provider-link) {
  box-sizing: border-box !important;
  display: flex !important;
  grid-column: auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #d1e3e2 !important;
  border-radius: 12px !important;
  color: #315e64 !important;
  background: #f5faf9 !important;
  box-shadow: none !important;
  font-size: 0.73rem !important;
  font-weight: 760 !important;
  white-space: normal !important;
  text-align: center !important;
}

html body #map .our-map-popup :is(button, a):focus-visible {
  outline: 3px solid #087b78 !important;
  outline-offset: 2px !important;
}

@media (max-width: 560px) {
  html body #map .our-map-popup > .our-map-popup-action-lane.is-private {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #map .our-map-popup .our-map-popup-action-lane :is(.our-map-save-later-action, .popup-edit) {
    min-height: 50px !important;
  }
}

@media (max-width: 360px) {
  html body main.app-shell section.map-stage.map-focus.our-map-mode:has(.mymappi-our-map-popup-shell) #mappiIntelligenceButton {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body #map .our-map-yapps-invitation {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px 9px;
  }
  html body #map .our-map-yapps-invitation > span:first-child {
    width: 32px;
    height: 32px;
  }
  html body #map .our-map-yapps-public-label {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #map .our-map-popup .our-map-popup-action-lane button {
    transition: none !important;
  }
}