/* One returning memory, on the existing Home rail. Do not repaint the app canvas. */
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.is-simplified {
  --echo-title-size: clamp(1.125rem, 1.6vw, 1.375rem);
  --echo-meta-size: .8125rem;
  --echo-story-size: .875rem;
  grid-template-columns: minmax(0, 544px) auto !important;
  justify-content: center !important;
  grid-template-areas: "reason reason" "body action" !important;
  grid-template-rows: minmax(28px, auto) auto !important;
  padding: 20px 22px !important;
  gap: 16px 24px !important;
  border-radius: 22px !important;
  border-color: #dce7e7 !important;
  background: linear-gradient(135deg, #fffefd, #f5faf8) !important;
  box-shadow: 0 6px 22px rgba(0, 36, 63, .055), inset 0 1px 0 #fff !important;
  transition: opacity 120ms ease !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.has-echo-navigation {
  grid-template-areas: "reason reason" "body action" "navigation navigation" !important;
  grid-template-rows: minmax(28px, auto) auto minmax(44px, auto) !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.is-simplified::before,
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.is-simplified::after {
  content: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-reason-stack {
  justify-content: center !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-reason {
  color: var(--mymappi-color-midnight, #00243f) !important;
  background: #edf9f5 !important;
  border-color: #cee6df !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  font-size: .6875rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-body {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 16px !important;
  min-width: 0 !important;
  /* Reserve one shared body, not empty rows between every sentence. The
     rem-based envelope covers two lines per field and grows with text size. */
  min-height: calc(var(--echo-title-size) * 2.4 + var(--echo-meta-size) * 2.8 + var(--echo-story-size) * 2.8 + 16px) !important;
}

/* Keep photo, copy and action together instead of stretching the action to
   the outer edge of a wide card. The shared Home rail remains full width. */
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .is-simplified .memory-echo-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-self: stretch !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-thumb:not(.memory-echo-empty-orbit) {
  width: 112px !important;
  min-width: 112px !important;
  height: 112px !important;
  min-height: 112px !important;
  border: 3px solid #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px #dce7e7, 0 5px 14px rgba(0, 36, 63, .07) !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .is-simplified .memory-echo-copy-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  align-content: center !important;
  text-align: left !important;
}

/* Editorial title, quiet place/date, then the owner's own words. */
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .is-simplified .memory-echo-copy-main strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--echo-title-size) !important;
  font-weight: 600 !important;
  color: #00243f !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  margin: 0 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  text-wrap: pretty !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .is-simplified .memory-echo-copy-main > :is(.memory-echo-story, .memory-echo-why-now) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  font-size: var(--echo-story-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  max-width: 48ch !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: #45636b !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .is-simplified .memory-echo-copy-main small {
  font-size: var(--echo-meta-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  color: #55747c !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-action-group {
  grid-area: action !important;
  display: grid; gap: 8px; min-width: 0;
  align-self: center; justify-self: stretch;
}
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-action-group .memory-travel-offline-note {
  grid-column: 1 !important; margin: 0 !important;
  max-width: 24ch; justify-self: center; text-align: center; line-height: 1.4;
}
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-relive {
  grid-area: auto !important;
  min-height: 48px !important;
  min-width: 160px !important;
  padding: 11px 16px !important;
  border-radius: 14px !important;
  font-weight: 650 !important;
  box-shadow: 0 4px 12px rgba(0, 36, 63, .09) !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-navigation {
  justify-self: center !important;
  align-self: center !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: 0 2px !important;
  border: 1px solid #e0eae7 !important;
  border-radius: 999px !important;
  background: #f2f7f5 !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-nav-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  color: var(--mymappi-action-navy, #00243f) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: 1.25rem !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-nav-button:hover {
  background: #e1f4ef !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-dot.active {
  background: #21746f !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay :is(.memory-echo-relive, .memory-echo-nav-button, .memory-echo-thumb):focus-visible {
  outline: 2px solid #21746f !important;
  outline-offset: 3px !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay.is-switching-echo .memory-echo-feature-card {
  opacity: 0 !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay.is-arriving-echo .memory-echo-feature-card {
  animation: memory-echo-soft-arrival 200ms ease both !important;
}

@keyframes memory-echo-soft-arrival { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.is-simplified {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "reason" "body" "action" !important;
    grid-template-rows: minmax(28px, auto) auto auto !important;
    padding: 18px !important;
    gap: 14px !important;
    border-radius: 20px !important;
  }
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card.has-echo-navigation {
    grid-template-areas: "reason" "body" "action" "navigation" !important;
    grid-template-rows: minmax(28px, auto) auto auto minmax(44px, auto) !important;
  }
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-body {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-thumb:not(.memory-echo-empty-orbit) {
    width: 96px !important;
    min-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
  }
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-relive {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeOnThisDay .memory-echo-feature-card {
    animation: none !important;
    transition: none !important;
  }
}
