/* The public Yapp composer should read like one considered sheet, not a stack
   of competing cards. Keep its disclosure and consent visible and usable. */
html body #ourMapStoryDialog {
  box-sizing: border-box !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: 520px !important;
  max-height: calc(
    var(--mymappi-visible-height, 100dvh)
    - max(20px, env(safe-area-inset-top, 0px))
    - max(20px, env(safe-area-inset-bottom, 0px))
    - 16px
  ) !important;
}

html body #ourMapStoryForm {
  box-sizing: border-box !important;
  width: 100% !important;
  max-height: inherit !important;
  gap: 12px !important;
  padding: 0 15px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-block: 84px !important;
  border-radius: 25px !important;
  background: linear-gradient(160deg, #f4f9fb, #f4fbf8) !important;
  scrollbar-color: #8acfc7 transparent;
}

html body #ourMapStoryForm > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  grid-template-columns: 42px minmax(0, 1fr) 44px !important;
  gap: 11px !important;
  min-width: 0 !important;
  margin-inline: -15px !important;
  padding: 12px 15px !important;
  border-radius: 24px 24px 18px 18px !important;
  box-shadow: 0 8px 18px rgba(0, 36, 63, 0.12) !important;
}

html body #ourMapStoryForm .our-map-story-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

html body #ourMapStoryForm > header > div { min-width: 0 !important; }
html body #ourMapStoryForm > header small {
  font-size: 0.59rem !important;
  letter-spacing: 0.07em !important;
  line-height: 1.2 !important;
}
html body #ourMapStoryTitle {
  margin-top: 3px !important;
  font-size: clamp(1.32rem, 4.4vw, 1.56rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

html body #ourMapStoryIntro {
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #4a6871 !important;
  font-size: 0.8rem !important;
  line-height: 1.43 !important;
}
html body #ourMapStoryIntro strong { color: #002f48 !important; }

html body #ourMapStoryForm .our-map-yapp-composer-columns,
html body #ourMapStoryForm :is(.our-map-yapp-composer-context, .our-map-yapp-composer-writing) {
  display: grid !important;
  min-width: 0 !important;
  align-content: start !important;
  gap: 12px !important;
}

html body #ourMapStoryPlace {
  min-height: 58px !important;
  padding: 8px 10px !important;
  border: 1px solid #cbe4e1 !important;
  border-radius: 15px !important;
  background: #e9f5f2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
html body #ourMapStoryPlace > span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}
html body #ourMapStoryPlace > div { min-width: 0 !important; }
html body #ourMapStoryPlace small {
  font-size: 0.66rem !important;
  color: #5c777a !important;
}
html body #ourMapStoryPlace strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

html body #ourMapStoryForm label:not(.our-map-story-consent) {
  display: grid !important;
  gap: 5px !important;
  color: #143f52 !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}
html body #ourMapStoryForm label > small {
  color: #5a7279 !important;
  font-size: 0.69rem !important;
  line-height: 1.35 !important;
}
html body #ourMapStoryForm :is(input[type="text"], textarea) {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border: 1px solid #c9dce0 !important;
  border-radius: 13px !important;
  color: #002f48 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 36, 63, 0.04) !important;
  font-size: 1rem !important; /* Prevents iOS focus zoom. */
  font-weight: 600 !important;
}
html body #ourMapStoryForm :is(input[type="text"], textarea)::placeholder {
  color: #75868d !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
html body #ourMapStoryBody {
  min-height: 106px !important;
  max-height: min(260px, 34dvh) !important;
  resize: vertical !important;
  background: #ffffff !important;
}
html body #ourMapStoryForm :is(input[type="text"], textarea):focus-visible {
  border-color: #147e83 !important;
  box-shadow: 0 0 0 3px rgba(85, 207, 185, 0.25) !important;
}
html body #ourMapYappCharacterCount { font-size: 0.69rem !important; }

html body #ourMapStoryForm .our-map-story-consent {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 11px !important;
  min-height: 0 !important;
  padding: 12px !important;
  border: 1px solid #c7e5dc !important;
  border-radius: 15px !important;
  background: #e9f7f1 !important;
}
html body #ourMapStoryForm .our-map-story-consent input {
  width: 22px !important;
  height: 22px !important;
}
html body #ourMapStoryForm .our-map-story-consent strong {
  color: #123f46 !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
}
html body #ourMapStoryForm .our-map-story-consent small {
  margin-top: 4px !important;
  color: #4e696c !important;
  font-size: 0.67rem !important;
  line-height: 1.4 !important;
}
html body #ourMapStoryForm .our-map-story-consent a {
  color: #005c71 !important;
  font-weight: 750 !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
html body #ourMapStoryForm .our-map-story-consent:focus-within {
  border-color: #62bea9 !important;
  box-shadow: 0 0 0 3px rgba(85, 207, 185, 0.19) !important;
}
html body #ourMapStoryForm .our-map-story-safety {
  padding: 0 2px !important;
  background: transparent !important;
  color: #5b737a !important;
  font-size: 0.65rem !important;
}
html body #ourMapStoryForm > .our-map-story-status:not(:empty) {
  padding: 9px 11px !important;
  border-radius: 11px !important;
  background: #e9f3f5 !important;
}
html body #ourMapStoryForm > .our-map-story-status.is-error {
  background: #fff1ef !important;
}

html body #ourMapStoryForm > footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr) !important;
  gap: 9px !important;
  margin: 1px -15px 0 !important;
  padding: 10px 15px 14px !important;
  border-top: 1px solid rgba(30, 92, 108, 0.12) !important;
  background: #f3faf8 !important;
  box-shadow: 0 -8px 12px rgba(243, 250, 248, 0.95) !important;
}
html body #ourMapStoryForm > footer button {
  min-height: 46px !important;
  border-radius: 13px !important;
  font-size: 0.77rem !important;
}
html body #ourMapStoryForm .our-map-story-publish {
  color: #ffffff !important;
  background: #00243f !important;
  box-shadow: 0 7px 14px rgba(0, 36, 63, 0.16) !important;
}
html body #ourMapStoryForm .our-map-story-cancel {
  color: #335e68 !important;
  background: #ffffff !important;
  border-color: #cbdfe1 !important;
}

/* Short landscape view: let the story lead without forcing a tour of tall
   cards before the writing fields appear. The form itself remains scrollable. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px) {
  html body #ourMapStoryDialog {
    width: min(760px, calc(100vw - max(18px, env(safe-area-inset-left, 0px)) - max(18px, env(safe-area-inset-right, 0px)))) !important;
    max-width: 760px !important;
  }
  html body #ourMapStoryForm {
    gap: 9px !important;
    padding-inline: 12px !important;
  }
  html body #ourMapStoryForm .our-map-yapp-composer-columns {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 15px !important;
  }
  html body #ourMapStoryForm :is(.our-map-yapp-composer-context, .our-map-yapp-composer-writing) {
    gap: 9px !important;
  }
  html body #ourMapStoryForm > header {
    margin-inline: -12px !important;
    padding: 9px 12px !important;
  }
  html body #ourMapStoryIntro { font-size: 0.73rem !important; }
  html body #ourMapStoryBody { min-height: 96px !important; }
  html body #ourMapStoryForm > footer {
    margin-inline: -12px !important;
    padding-inline: 12px !important;
  }
}

html body.keyboard-open #ourMapStoryDialog {
  top: calc(var(--mymappi-visual-offset-top, 0px) + max(12px, env(safe-area-inset-top, 0px))) !important;
  max-height: calc(var(--mymappi-visible-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px)) - 12px) !important;
}
html body.keyboard-open #ourMapStoryForm {
  max-height: inherit !important;
  scroll-padding-bottom: 78px !important;
}

@media (max-width: 370px) {
  html body #ourMapStoryForm > header {
    grid-template-columns: 34px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    padding-inline: 12px !important;
  }
  html body #ourMapStoryForm .our-map-story-mark { width: 34px !important; height: 34px !important; }
  html body #ourMapStoryTitle { font-size: 1.2rem !important; }
  html body #ourMapStoryForm > footer { grid-template-columns: minmax(90px, 0.75fr) minmax(0, 1.25fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body #ourMapStoryForm { scroll-behavior: auto !important; }
}