/* Finish the place sheet as one editorial surface. Public Yapps and private
   memories stay distinct, while the controls keep their 44px touch targets. */
html body #map .mymappi-our-map-popup-shell .our-map-popup-kicker {
  max-width: calc(100% - 52px) !important;
  margin-bottom: 5px !important;
  overflow-wrap: anywhere;
}

html body #map .mymappi-our-map-popup-shell .our-map-popup > h3 {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  margin: 6px 0 7px !important;
  padding-right: 0 !important;
  line-height: 1.13 !important;
}

html body #map .our-map-popup .our-map-place-title-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d8e8e5;
  border-radius: 11px;
  background: #f0f8f5;
  font-size: 1.05rem;
  line-height: 1;
}

html body #map .our-map-popup .our-map-place-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

html body #map .our-map-popup > .our-map-trust-row {
  margin: 0 0 4px !important;
}

html body #map .mymappi-our-map-popup-shell .our-map-popup > .popup-meta {
  margin: 5px 0 8px !important;
  line-height: 1.4 !important;
}

html body #map .our-map-popup > .our-map-popup-why {
  margin: 8px 0 11px !important;
  line-height: 1.45 !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane {
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 11px 12px !important;
  border-radius: 17px !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public {
  background: #edf9f5 !important;
  border-color: #c3e4d9 !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-private {
  background: #f4f8f9 !important;
  border-color: #d4e3e7 !important;
}

html body #map .our-map-popup .our-map-yapps-invitation {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 9px !important;
}

html body #map .our-map-popup .our-map-yapps-invitation > span:first-child {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
}

html body #map .our-map-popup .our-map-yapps-invitation strong {
  font-size: 0.87rem !important;
}

html body #map .our-map-popup .our-map-yapps-invitation small {
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

html body #map .our-map-popup .our-map-yapps-public-label {
  padding: 4px 7px !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) {
  min-height: 48px !important;
  padding: 9px 11px !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-story-stack-count {
  min-height: 52px !important;
}

html body #map .our-map-popup > .our-map-popup-action-lane.is-public .our-map-public-story-action {
  font-size: 0.8rem !important;
}

html body #map .our-map-popup .our-map-popup-action-lane > small {
  line-height: 1.4 !important;
}

html body #map .our-map-popup .our-map-popup-action-lane :is(button, a):active {
  transform: scale(0.992);
}

/* Short landscape: widen the reading column without crossing the map controls
   at either corner. The bounded sheet still scrolls above the bottom nav. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 640px) {
  html body main.app-shell section.map-stage.map-focus.our-map-mode
    .maplibregl-popup.mymappi-our-map-popup-shell {
    width: min(560px, calc(100vw - 280px)) !important;
    max-width: 560px !important;
  }
}

@media (max-width: 360px) {
  html body #map .our-map-popup .our-map-yapps-invitation {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
  html body #map .our-map-popup .our-map-yapps-invitation > span:first-child {
    width: 32px !important;
    height: 32px !important;
  }
  html body #map .our-map-popup .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 :is(button, a):active {
    transform: none;
  }
}