/* Calm photo entry and a native, optional in-flow review. No modal or inner scroll. */
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: min(100%, 560px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 12px !important;
  gap: 10px 12px !important;
  border: 1px solid #d0e3df !important;
  border-radius: 16px !important;
  color: #00243f !important;
  background: #f0f9f5 !important;
  box-shadow: none !important;
  text-align: left !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart.has-photo {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 2px 8px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStartTitle {
  margin: 0 !important;
  font-size: .9375rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStartHelp {
  margin: 0 !important;
  font-size: .8125rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #486375 !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-optional {
  color: #486375 !important;
  font-size: .6875rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart.has-photo .memory-photo-start-optional {
  display: none !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-actions {
  display: flex !important;
  grid-column: auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 8px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart.has-photo .memory-photo-start-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  align-items: stretch !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart :is(#firstMemoryPhotoStart, #memoryPhotoStartCover) {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #b8dcd3 !important;
  border-radius: 12px !important;
  background: #d9f3e9 !important;
  color: #00243f !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart.has-photo :is(#firstMemoryPhotoStart, #memoryPhotoStartCover) {
  flex: 1 1 80px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart #memoryPhotoStartCover {
  border-color: #d0e3df !important;
  background: #fffdf8 !important;
  text-decoration: none !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStartPreview {
  width: 48px !important;
  height: 48px !important;
  min-height: 0 !important;
  border-radius: 11px !important;
  align-self: center !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 560px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid #d0e3df !important;
  border-radius: 16px !important;
  color: #00243f !important;
  background: #f9fcfa !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: visible !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  list-style: none !important;
  cursor: pointer;
  border-radius: 15px;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion > summary::-webkit-details-marker { display: none; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin: -4px 3px 0 0;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion[open] > summary { border-bottom: 1px solid #dce9e4; border-radius: 15px 15px 0 0; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-review-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion:not([open]) > .photo-metadata-review-body { display: none !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion p {
  margin: 0 !important;
  font-size: .8125rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  color: #486375 !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-source {
  display: block !important;
  margin: -4px 0 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #486375 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion label.photo-metadata-option {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 44px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid #d0e3df !important;
  border-radius: 12px !important;
  background: #fff !important;
  text-align: left !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-option-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  text-align: left !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-option-copy strong { font-size: .8125rem !important; line-height: 1.35 !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-option-copy small { font-size: .75rem !important; line-height: 1.4 !important; color: #486375 !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-location-compare {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-current-pin {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #edf5f2 !important;
  box-shadow: none !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-location-source {
  margin: 0 !important;
  font-size: .6875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #486375 !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-current-pin strong { font-size: .8125rem !important; line-height: 1.4 !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-current-pin small { font-size: .75rem !important; line-height: 1.4 !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-location-summary {
  padding: 0 2px !important;
  border-radius: 0 !important;
  background: none !important;
  color: #486375 !important;
  font-size: .75rem !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-actions button {
  min-width: 0 !important;
  min-height: 44px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  color: #fff !important;
  background: #00243f !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion .photo-metadata-actions button:last-child { color: #00243f !important; background: #fffdf8 !important; border-color: #d0e3df !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion label:has(input:checked) { border-color: #277569 !important; background: #e8f7f0 !important; box-shadow: 0 0 0 1px #73dfc8 !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm :is(#memoryPhotoStart, #memoryPhotoMetadataSuggestion) :is(button, input, summary):focus-visible { outline: 3px solid #267999 !important; outline-offset: 3px !important; }
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[hidden],
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart [hidden],
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoMetadataSuggestion [hidden] { display: none !important; }
@media (max-width: 359px) {
  html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart:not(.has-photo) { grid-template-columns: minmax(0, 1fr) !important; }
  html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart:not(.has-photo) .memory-photo-start-actions { grid-column: 1 / -1 !important; }
  html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart:not(.has-photo) #firstMemoryPhotoStart { width: 100% !important; }
}

/* Center the actual first-memory heading, not a right-padded text column.
   Existing section cards and their left-aligned field labels stay unchanged. */
html body main.app-shell #memoryForm#memoryForm#memoryForm[data-capture-mode="memory"]:not(.is-editing-memory) > .editor-header #editorTitle {
  font-weight: 800 !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm[data-capture-mode="memory"]:not(.is-editing-memory) > .editor-header {
  padding-inline: 56px !important;
  justify-content: center !important;
  text-align: center !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm[data-capture-mode="memory"]:not(.is-editing-memory) > .editor-header > div {
  width: 100% !important;
  min-width: 0 !important;
  justify-items: center !important;
  text-align: center !important;
}

/* A pre-existing, empty live region: no toast, extra card, or false save claim. */
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoDetailsOutcome {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #28685f !important;
  font-size: .8125rem !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoDetailsOutcome:not(:empty) {
  margin: 0 2px 12px !important;
}

/* Use the already-isolated exit button, not a second floating title. The
   44px target sits in the existing brand lane ABOVE the 48/68px form edge. */
html body main.app-shell section.map-stage.memory-editor-active:has(> #memoryForm.open[data-capture-mode="memory"]:not(.is-editing-memory)) > #closeEditorWhileScrolling:not([hidden]) {
  position: fixed !important;
  top: calc(var(--mymappi-visual-offset-top, 0px) + env(safe-area-inset-top, 0px) + 2px) !important;
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  z-index: 1850 !important;
}
@media (min-width: 721px) {
  html body main.app-shell section.map-stage.memory-editor-active:has(> #memoryForm.open[data-capture-mode="memory"]:not(.is-editing-memory)) > #closeEditorWhileScrolling:not([hidden]) {
    top: calc(var(--mymappi-visual-offset-top, 0px) + env(safe-area-inset-top, 0px) + 12px) !important;
    right: max(24px, calc((100vw - 680px) / 2 + 18px), calc(env(safe-area-inset-right, 0px) + 12px)) !important;
  }
}

/* Keep the optional qualifier with its title, not detached beside the action. */
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-heading {
  justify-content: flex-start !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart .memory-photo-start-optional {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Selection is distinct from a resolved cover: hide Optional without showing
   an empty thumbnail or changing the original preview layout. */
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart.has-selected-photos .memory-photo-start-optional,
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"] .memory-photo-start-optional {
  display: none !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"] #firstMemoryPhotoStart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"] #firstMemoryPhotoStart::before {
  content: "";
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mappi-photo-entry-busy 1s linear infinite;
}
@keyframes mappi-photo-entry-busy { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"] #firstMemoryPhotoStart::before {
    animation: none !important;
  }
}

/* Let text size, not only viewport width, decide when progress needs its own
   row. Resolved-cover and normal empty/selected layouts stay unchanged. */
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"]:not(.has-photo) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"]:not(.has-photo) .memory-photo-start-copy {
  flex: 1 1 8rem !important;
}
html body main.app-shell #memoryForm#memoryForm#memoryForm #memoryPhotoStart[aria-busy="true"]:not(.has-photo) .memory-photo-start-actions {
  flex: 0 1 auto !important;
}