/*
 * Mappi Yapps v1
 * User-facing presentation only. The existing text-story API, privacy boundary,
 * ownership, reporting, blocking, and moderation contracts remain unchanged.
 */

/* One small, friendly place-with-a-voice mark, shared by the composer,
   reader and place actions. Vector artwork stays crisp without a font glyph. */
html body img.mappi-yapp-icon {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  flex: 0 0 auto;
}

html body :is(.our-map-story-mark, .our-map-stories-mark) {
  position: relative !important;
  overflow: visible !important;
  border: 1px solid rgba(254, 225, 163, 0.34) !important;
  color: #fff8e8 !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(50, 210, 167, 0.34), transparent 38%),
    linear-gradient(145deg, #063f50, #062d42) !important;
  box-shadow:
    0 9px 20px rgba(2, 38, 53, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.06em !important;
}

html body :is(.our-map-story-mark, .our-map-stories-mark)::after {
  content: none;
}

/* A Yapp is an invitation from the community, never an alert. */
html body .our-map-story-stack-count {
  position: relative !important;
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 36px !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 3px 0 8px !important;
  padding: 4px 10px 4px 5px !important;
  overflow: visible !important;
  border: 1px solid rgba(12, 142, 122, 0.22) !important;
  border-radius: 999px !important;
  color: #075e5d !important;
  background: linear-gradient(145deg, #edfcf7, #dff8f0) !important;
  box-shadow:
    0 7px 16px rgba(4, 92, 87, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
}

html body .our-map-story-stack-count::before {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  content: "";
}

html body .our-map-story-stack-count:is(:hover, :focus-visible) {
  border-color: rgba(6, 132, 117, 0.38) !important;
  color: #034e50 !important;
  background: linear-gradient(145deg, #f5fffb, #d1f5e9) !important;
  box-shadow:
    0 9px 20px rgba(4, 92, 87, 0.14),
    0 0 0 3px rgba(33, 190, 158, 0.1),
    inset 0 1px 0 #ffffff !important;
  outline: 0 !important;
}

html body .our-map-story-stack-mark {
  position: relative !important;
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  place-items: center !important;
  border-radius: 9px !important;
  color: #fff8e8 !important;
  background: linear-gradient(145deg, #086f70, #074958) !important;
  box-shadow: 0 4px 10px rgba(3, 69, 78, 0.16) !important;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
}

html body .our-map-story-stack-mark::after {
  content: none;
}

html body .our-map-story-stack-arrow {
  color: #0b8d7f !important;
  font-size: 0.78rem !important;
  transition: transform 160ms ease !important;
}

html body .our-map-story-stack-count:is(:hover, :focus-visible) .our-map-story-stack-arrow {
  transform: translateX(2px) !important;
}

html body .our-map-stories-panel {
  background:
    radial-gradient(circle at 6% 0%, rgba(65, 216, 177, 0.2), transparent 32%),
    radial-gradient(circle at 100% 72%, rgba(244, 177, 109, 0.1), transparent 35%),
    #fbfffd !important;
}

html body .our-map-stories-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, calc(100% - 28px)) !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 2px 28px 8px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-padding-inline: 2px !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body .our-map-stories-list::-webkit-scrollbar {
  display: none !important;
}

html body .our-map-public-story-card {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(3.7em, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 210px !important;
  gap: 9px !important;
  padding: 15px !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 113, 105, 0.17) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 98% 0%, rgba(42, 199, 158, 0.13), transparent 42%),
    linear-gradient(150deg, #ffffff 0%, #f8fffc 68%, #eefaf6 100%) !important;
  box-shadow:
    0 12px 28px rgba(5, 59, 64, 0.09),
    inset 0 1px 0 #ffffff !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

html body .our-map-public-story-card::after {
  position: absolute;
  z-index: -1;
  top: 40px;
  right: 12px;
  color: rgba(10, 128, 116, 0.055);
  content: "“";
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  pointer-events: none;
}

html body .our-map-public-story-card:focus-visible {
  outline: 3px solid rgba(18, 171, 146, 0.36) !important;
  outline-offset: -2px !important;
}

html body .our-map-yapp-card-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #0a8176 !important;
  font-size: 0.54rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

html body .our-map-yapp-card-kicker b {
  position: relative !important;
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  place-items: center !important;
  border-radius: 9px !important;
  color: #fff8e8 !important;
  background: linear-gradient(145deg, #075363, #073a4c) !important;
  box-shadow: 0 5px 12px rgba(2, 56, 68, 0.15) !important;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: -0.04em !important;
}

html body .our-map-yapp-card-kicker b::after {
  content: none;
}

html body .our-map-public-story-card > header {
  padding-bottom: 7px !important;
  border-bottom: 1px solid rgba(16, 118, 107, 0.09) !important;
}

html body .our-map-public-story-card h3 {
  max-width: 92% !important;
  color: #0d3c47 !important;
  font-size: 0.85rem !important;
  line-height: 1.22 !important;
}

html body .our-map-public-story-card p {
  position: relative !important;
  z-index: 1 !important;
  color: #496a6d !important;
  font-size: 0.68rem !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
}

html body .our-map-public-story-card > footer {
  align-self: end !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(16, 118, 107, 0.09) !important;
}

html body .our-map-public-story-card > footer button {
  min-height: 44px !important;
  border-radius: 12px !important;
}

html body :is(.our-map-stories-empty, .our-map-stories-loading) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .our-map-stories-list {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-right: 2px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
}

@media (max-width: 520px) {
  html body .our-map-stories-list {
    grid-auto-columns: minmax(0, calc(100% - 20px)) !important;
    padding-right: 20px !important;
  }

  html body .our-map-public-story-card {
    min-height: 200px !important;
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .our-map-stories-list {
    scroll-behavior: auto !important;
  }
}

/* Next-build polish: a warmer, roomier public-story experience. */
html body :is(.our-map-story-dialog, .our-map-stories-dialog) {
  --mymappi-yapps-ink: #093b47;
  --mymappi-yapps-muted: #557477;
  --mymappi-yapps-teal: #087c72;
}

html body .our-map-story-dialog {
  width: min(540px, calc(100% - 24px)) !important;
  max-width: 540px !important;
}

html body .our-map-story-panel {
  max-height: calc(var(--mymappi-visible-height, 100dvh) - 24px) !important;
  scroll-padding-block: 20px !important;
  overscroll-behavior: contain !important;
}

/* The keyboard must shrink the scrollable composer, not hide its consent or
   actions below the screen. Non-keyboard layouts keep the centered dialog. */
html body.keyboard-open .our-map-story-dialog {
  position: fixed !important;
  top: calc(var(--mymappi-visual-offset-top, 0px) + 12px) !important;
  bottom: auto !important;
  margin-block: 0 !important;
}

html body .our-map-yapp-field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

html body #ourMapYappCharacterCount {
  color: #587374;
  font-size: 0.68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html body #ourMapYappWritingHint {
  color: #647166 !important;
  line-height: 1.5 !important;
}

html body #ourMapStoryBody {
  background: linear-gradient(145deg, #ffffff, #fffdf6) !important;
}

html body #ourMapStoryTitle:focus {
  outline: none;
}

html body .our-map-public-story-card:nth-child(3n + 2) {
  background: linear-gradient(145deg, #ffffff, #eef8fc) !important;
}

html body .our-map-public-story-card:nth-child(3n + 3) {
  background: linear-gradient(145deg, #ffffff, #fffaeb) !important;
}

html body .our-map-stories-dialog {
  width: min(700px, calc(100% - 24px)) !important;
  max-width: 700px !important;
}

html body :is(.our-map-story-panel, .our-map-stories-panel) {
  width: 100% !important;
  border-color: rgba(151, 217, 199, 0.78) !important;
  background:
    radial-gradient(circle at 7% -4%, rgba(81, 222, 181, 0.22), transparent 34%),
    radial-gradient(circle at 102% 68%, rgba(242, 178, 105, 0.12), transparent 36%),
    linear-gradient(160deg, #fdfffe 0%, #f6fdf9 58%, #effaf6 100%) !important;
  box-shadow:
    0 34px 90px rgba(2, 32, 43, 0.34),
    0 12px 30px rgba(5, 84, 79, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

html body .our-map-stories-panel {
  max-height: min(
    860px,
    calc(var(--mymappi-layout-height, 100dvh) - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px)))
  ) !important;
  gap: 14px !important;
  padding: clamp(18px, 3vw, 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 30px !important;
}

html body :is(.our-map-story-panel, .our-map-stories-panel) > header {
  grid-template-columns: 46px minmax(0, 1fr) 44px !important;
  gap: 12px !important;
}

html body :is(.our-map-story-mark, .our-map-stories-mark) {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px 16px 16px 7px !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(76, 224, 183, 0.42), transparent 38%),
    linear-gradient(145deg, #075d66, #062f44) !important;
  box-shadow:
    0 10px 22px rgba(2, 51, 65, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-size: 1.08rem !important;
}

html body :is(.our-map-story-panel, .our-map-stories-panel) > header small {
  color: var(--mymappi-yapps-teal) !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.075em !important;
}

html body :is(.our-map-story-panel, .our-map-stories-panel) h2 {
  margin-top: 3px !important;
  color: var(--mymappi-yapps-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.32rem, 3.4vw, 1.72rem) !important;
  font-weight: 680 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

html body :is(#ourMapStoryClose, #ourMapStoriesClose) {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid rgba(12, 112, 102, 0.1) !important;
  color: #346167 !important;
  background: rgba(235, 248, 243, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body :is(#ourMapStoryClose, #ourMapStoriesClose):focus-visible {
  outline: 3px solid rgba(24, 176, 148, 0.3) !important;
  outline-offset: 2px !important;
}

html body #ourMapStoryIntro,
html body #ourMapStoriesIntro {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 126, 112, 0.1) !important;
  border-radius: 16px !important;
  color: var(--mymappi-yapps-muted) !important;
  background: rgba(244, 252, 248, 0.82) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

html body :is(#ourMapStoryIntro, #ourMapStoriesIntro) strong {
  color: #15545b !important;
  font-weight: 880 !important;
}

html body .our-map-story-panel > label:not(.our-map-story-consent) {
  color: #194e56 !important;
  font-size: 0.74rem !important;
}

html body .our-map-story-panel > label > small {
  font-size: 0.66rem !important;
  line-height: 1.45 !important;
}

html body .our-map-story-panel input[type="text"],
html body .our-map-story-panel textarea {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

html body .our-map-story-panel textarea {
  min-height: 126px !important;
}

html body .our-map-story-place {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  min-height: 62px !important;
  gap: 11px !important;
  padding: 9px 11px !important;
  border-color: rgba(13, 128, 111, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 190, 105, 0.12), transparent 42%),
    linear-gradient(145deg, #f0fbf6, #e6f7f1) !important;
}

html body .our-map-story-place > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

html body .our-map-story-consent {
  min-height: 64px !important;
  padding: 12px !important;
  border-color: rgba(10, 130, 111, 0.17) !important;
  border-radius: 16px !important;
  color: #49696c !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 194, 107, 0.1), transparent 44%),
    linear-gradient(145deg, #f4fcf8, #e9f8f2) !important;
}

html body .our-map-story-consent strong {
  color: #0b5f5c !important;
  font-size: 0.7rem !important;
}

html body .our-map-story-consent small {
  margin-top: 4px !important;
  color: #526f71 !important;
  font-size: 0.62rem !important;
  line-height: 1.45 !important;
}

html body .our-map-story-safety {
  align-items: flex-start !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
  color: #557376 !important;
  background: rgba(239, 248, 245, 0.78) !important;
  font-size: 0.62rem !important;
}

html body .our-map-story-status {
  color: #4f7072 !important;
  font-size: 0.66rem !important;
}

html body .our-map-story-panel > footer button {
  min-height: 48px !important;
  border-radius: 15px !important;
}

html body .our-map-story-stack-count {
  min-height: 44px !important;
  padding: 6px 13px 6px 7px !important;
  gap: 9px !important;
  border-color: rgba(11, 139, 120, 0.24) !important;
  border-radius: 16px 16px 16px 7px !important;
  color: #075b5b !important;
  background:
    radial-gradient(circle at 9% 10%, rgba(93, 225, 186, 0.2), transparent 36%),
    linear-gradient(145deg, #f3fdf9, #dcf7ee) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.005em !important;
}

html body .our-map-story-stack-mark {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 10px 10px 10px 4px !important;
  font-size: 0.76rem !important;
}

html body .our-map-story-stack-arrow {
  font-size: 0.92rem !important;
}

html body .our-map-stories-place {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  min-height: 62px !important;
  gap: 11px !important;
  padding: 9px 11px !important;
  border-color: rgba(13, 128, 111, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 190, 105, 0.12), transparent 42%),
    linear-gradient(145deg, #f0fbf6, #e6f7f1) !important;
}

html body .our-map-stories-place > span:first-child {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

html body .our-map-stories-place small {
  font-size: 0.62rem !important;
}

html body .our-map-stories-place strong {
  font-size: 0.84rem !important;
}

html body .our-map-stories-place > .our-map-yapps-place-rating {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 82px !important;
  min-height: 44px !important;
  align-content: center !important;
  justify-items: end !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(190, 132, 35, 0.17) !important;
  border-radius: 13px !important;
  color: #865a15 !important;
  background: rgba(255, 249, 229, 0.9) !important;
  line-height: 1.05 !important;
}

html body .our-map-stories-place > .our-map-yapps-place-rating > span {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

html body .our-map-stories-place > .our-map-yapps-place-rating small {
  margin-top: 3px !important;
  color: #6d531d !important;
  font-size: 0.52rem !important;
  font-weight: 760 !important;
}

html body .our-map-stories-status {
  min-height: 20px !important;
  color: #527174 !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  line-height: 1.4 !important;
}

html body .our-map-stories-status.is-error {
  padding: 8px 10px !important;
  border-radius: 11px !important;
  color: #914849 !important;
  background: rgba(255, 241, 237, 0.92) !important;
}

html body .our-map-yapps-scroll-hint {
  display: flex !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: -4px 0 0 !important;
  padding: 4px 8px 4px 11px !important;
  border: 1px solid rgba(13, 132, 115, 0.12) !important;
  border-radius: 999px !important;
  color: #34706f !important;
  background: rgba(237, 250, 245, 0.78) !important;
  font-size: 0.63rem !important;
  font-weight: 780 !important;
}

html body .our-map-yapps-scroll-hint[hidden] {
  display: none !important;
}

html body .our-map-yapps-scroll-hint strong {
  min-width: 48px !important;
  color: #08796f !important;
  text-align: right !important;
}

html body .our-map-stories-list {
  gap: 14px !important;
  padding: 3px 46px 12px 3px !important;
  scroll-padding-inline: 3px !important;
  scrollbar-color: rgba(16, 136, 117, 0.24) transparent !important;
}

html body .our-map-stories-list[data-state="ready"] {
  grid-auto-columns: calc(100% - 46px) !important;
}

html body .our-map-stories-list:not([data-state="ready"]) {
  grid-auto-columns: 100% !important;
  padding-right: 3px !important;
  overflow-x: hidden !important;
}

html body .our-map-public-story-card {
  grid-template-rows: auto auto auto minmax(5.2em, 1fr) auto !important;
  min-height: 268px !important;
  gap: 11px !important;
  padding: clamp(17px, 2.5vw, 21px) !important;
  border-color: rgba(13, 115, 105, 0.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 98% 0%, rgba(45, 207, 163, 0.15), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(244, 194, 113, 0.09), transparent 38%),
    linear-gradient(150deg, #ffffff 0%, #fafffd 64%, #eefaf6 100%) !important;
  box-shadow:
    0 16px 34px rgba(5, 59, 64, 0.1),
    0 4px 10px rgba(7, 91, 82, 0.05),
    inset 0 1px 0 #ffffff !important;
}

html body .our-map-public-story-card::after {
  top: 48px !important;
  right: 17px !important;
  color: rgba(10, 128, 116, 0.06) !important;
  font-size: 7.2rem !important;
}

html body .our-map-yapp-card-kicker {
  gap: 9px !important;
  color: #08776e !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.085em !important;
}

html body .our-map-yapp-card-kicker b {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 10px 10px 10px 4px !important;
  font-size: 0.78rem !important;
}

html body .our-map-public-story-card > header {
  min-width: 0 !important;
  padding-bottom: 10px !important;
  border-bottom-color: rgba(13, 118, 106, 0.1) !important;
}

html body .our-map-yapp-author {
  display: inline-grid !important;
  min-width: 0 !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
}

html body .our-map-yapp-author > i {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #16a68f, #087067) !important;
  box-shadow: 0 6px 14px rgba(7, 112, 103, 0.18) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html body .our-map-yapp-author > span {
  min-width: 0 !important;
}

html body .our-map-yapp-author :is(strong, small) {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .our-map-public-story-card > header .our-map-yapp-author strong {
  color: #096e68 !important;
  font-size: 0.76rem !important;
}

html body .our-map-public-story-card > header .our-map-yapp-author small {
  margin-top: 2px !important;
  color: #536f72 !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .our-map-public-story-card > header time {
  flex: 0 0 auto !important;
  color: #536d70 !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
  text-align: right !important;
}

html body .our-map-public-story-card h3 {
  max-width: 88% !important;
  color: #103f49 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.02rem, 2.7vw, 1.2rem) !important;
  font-weight: 680 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.25 !important;
}

html body .our-map-public-story-card p.our-map-yapp-story {
  color: #3f6267 !important;
  font-size: clamp(0.88rem, 2vw, 0.92rem) !important;
  line-height: 1.62 !important;
}

html body .our-map-public-story-card > footer {
  display: flex !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 11px !important;
}

html body .our-map-public-story-card > footer button {
  min-width: 96px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  color: #526f72 !important;
  background: rgba(241, 248, 246, 0.94) !important;
  font-size: 0.66rem !important;
}

html body .our-map-public-story-card > footer button:is(:hover, :focus-visible) {
  border-color: rgba(11, 129, 112, 0.25) !important;
  color: #086d66 !important;
  background: #ebfaf5 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(27, 177, 148, 0.1) !important;
}

html body :is(.our-map-stories-empty, .our-map-stories-loading, .our-map-stories-error) {
  min-height: 194px !important;
  gap: 8px !important;
  padding: 24px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 214, 173, 0.14), transparent 46%),
    linear-gradient(145deg, #f6fdf9, #ecf9f4) !important;
}

html body :is(.our-map-stories-empty, .our-map-stories-loading, .our-map-stories-error) > span {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  border-radius: 16px 16px 16px 7px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #1aa58e, #087168) !important;
  box-shadow: 0 9px 20px rgba(7, 112, 103, 0.17) !important;
  font-size: 1.15rem !important;
}

html body :is(.our-map-stories-empty, .our-map-stories-loading, .our-map-stories-error) strong {
  color: #174d55 !important;
  font-size: 0.9rem !important;
}

html body :is(.our-map-stories-empty, .our-map-stories-loading, .our-map-stories-error) small {
  max-width: 360px !important;
  color: #4b686b !important;
  font-size: 0.74rem !important;
  line-height: 1.5 !important;
}

html body .our-map-stories-loading > span {
  animation: mymappiYappsGather 1.4s ease-in-out infinite !important;
}

html body .our-map-stories-error {
  border-color: rgba(197, 104, 85, 0.2) !important;
  background: linear-gradient(145deg, #fffaf5, #fff1ec) !important;
}

html body .our-map-stories-error > span {
  background: linear-gradient(145deg, #e48468, #c85f5e) !important;
}

html body .our-map-stories-error button {
  min-width: 118px !important;
  min-height: 44px !important;
  margin-top: 3px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(145, 72, 64, 0.16) !important;
  border-radius: 13px !important;
  color: #8d4846 !important;
  background: #ffffff !important;
  box-shadow: 0 7px 16px rgba(123, 57, 50, 0.08) !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

html body .our-map-stories-safety {
  align-items: flex-start !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
  color: #5b7678 !important;
  background: rgba(239, 248, 245, 0.78) !important;
  font-size: 0.64rem !important;
}

@keyframes mymappiYappsGather {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(8deg); }
}

@media (hover: hover) and (pointer: fine) {
  html body .our-map-yapps-scroll-hint {
    display: none !important;
  }

  html body .our-map-stories-list[data-state="ready"] {
    grid-auto-columns: auto !important;
    padding-right: 3px !important;
  }

  html body .our-map-public-story-card {
    min-height: 238px !important;
  }
}

@media (max-width: 720px) {
  html body :is(.our-map-story-dialog, .our-map-stories-dialog) {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  html body :is(.our-map-story-panel, .our-map-stories-panel) {
    padding: 16px !important;
    border-radius: 25px !important;
  }

  html body .our-map-stories-panel {
    gap: 12px !important;
  }

  html body :is(#ourMapStoryIntro, #ourMapStoriesIntro) {
    padding: 10px 11px !important;
    font-size: 0.74rem !important;
  }

  html body .our-map-story-panel input[type="text"],
  html body .our-map-story-panel textarea {
    font-size: 1rem !important;
  }

  html body .our-map-stories-place {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body .our-map-stories-place > .our-map-yapps-place-rating {
    grid-column: 1 / -1 !important;
    grid-template-columns: auto auto !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: space-between !important;
    justify-items: stretch !important;
  }

  html body .our-map-stories-place > .our-map-yapps-place-rating small {
    margin: 0 !important;
    text-align: right !important;
  }

  html body .our-map-stories-list {
    gap: 12px !important;
    padding-right: 25px !important;
  }

  html body .our-map-stories-list[data-state="ready"] {
    grid-auto-columns: calc(100% - 22px) !important;
  }

  html body .our-map-stories-list:not([data-state="ready"]) {
    padding-right: 3px !important;
  }

  html body .our-map-public-story-card {
    min-height: 252px !important;
    padding: 16px !important;
    border-radius: 21px !important;
  }

  html body .our-map-public-story-card > header {
    align-items: flex-start !important;
  }

  html body .our-map-public-story-card > header time {
    max-width: 82px !important;
  }

  html body .our-map-public-story-card > footer button {
    flex: 1 1 120px !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  html body .our-map-stories-panel {
    max-height: calc(
      var(--mymappi-layout-height, 100dvh)
      - max(6px, env(safe-area-inset-top, 0px))
      - max(6px, env(safe-area-inset-bottom, 0px))
    ) !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  html body #ourMapStoriesIntro,
  html body .our-map-stories-safety {
    padding-block: 7px !important;
  }

  html body .our-map-public-story-card {
    min-height: 224px !important;
  }
}

/* Hybrid iPads can expose a fine primary pointer while retaining touch. */
@media (any-pointer: coarse) {
  html body .our-map-yapps-scroll-hint:not([hidden]) {
    display: flex !important;
  }

  html body .our-map-stories-list {
    grid-auto-flow: column !important;
    grid-auto-columns: calc(100% - 46px) !important;
    grid-template-columns: none !important;
    padding-right: 46px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
  }

  html body .our-map-stories-list:not([data-state="ready"]) {
    grid-auto-columns: 100% !important;
    padding-right: 3px !important;
    overflow-x: hidden !important;
  }

  html body .our-map-public-story-card {
    min-height: 268px !important;
  }
}

@media (any-pointer: coarse) and (max-width: 720px) {
  html body .our-map-stories-list[data-state="ready"] {
    grid-auto-columns: calc(100% - 22px) !important;
    padding-right: 25px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .our-map-stories-loading > span {
    animation: none !important;
  }

  html body :is(.our-map-story-stack-arrow, .our-map-public-story-card, .our-map-stories-error button) {
    transition: none !important;
  }
}

/* One story is a complete card, not a carousel with a false empty peek. */
html body .our-map-stories-list[data-state="ready"][data-yapp-count="1"] {
  grid-auto-columns: 100% !important;
  padding-right: 3px !important;
  overflow-x: hidden !important;
}

/* Keep the welcoming Yapp count treatment ahead of later OM release layers. */
html body button.our-map-story-stack-count {
  border-color: rgba(12, 142, 122, 0.22) !important;
}