/* Build 658: centered fresh-account storytelling, one refined illustration
   family, a truly centered Today Relive control, and a stronger no-photo Mappi. */

/* Empty section previews share one calm reading order, including the
   one-memory state where Today has the spotlight but Echo and Chapters are
   still waiting:
   illustration, cue, promise, supporting line, then the unlock cue. */
html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-feature-card.is-empty,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-feature-card.is-empty {
  display: grid !important;
  grid-template-areas:
    "art"
    "kicker"
    "copy"
    "footer" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 8px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-body,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-body {
  display: contents !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-orbit,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-orbit {
  grid-area: art !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin: 0 auto 2px !important;
  filter: drop-shadow(0 13px 20px rgba(8, 70, 77, 0.12)) !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-reason-stack,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-reason-stack {
  grid-area: kicker !important;
  justify-self: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  min-width: 0 !important;
  max-width: 590px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 5px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-unlock,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-unlock {
  grid-area: footer !important;
  justify-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 3px auto 0 !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty.premium-empty-preview,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty.premium-empty-preview {
  display: grid !important;
  grid-template-areas:
    "book"
    "copy"
    "cue" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 10px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-starter-book,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-starter-book {
  grid-area: book !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  align-self: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 0 auto 2px !important;
  filter: drop-shadow(0 13px 20px rgba(8, 70, 77, 0.12)) !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-book-tabs,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-book-tabs {
  right: 5px !important;
  bottom: 7px !important;
  gap: 2px !important;
  max-width: 40% !important;
  opacity: 0.76 !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-book-tabs em,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-book-tabs em {
  padding: 1px 4px !important;
  border-radius: 5px !important;
  font-size: 0.34rem !important;
  letter-spacing: 0.01em !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  min-width: 0 !important;
  max-width: 590px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 5px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-cue,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-cue {
  grid-area: cue !important;
  justify-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 2px auto 0 !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview {
  display: grid !important;
  grid-template-areas:
    "timeline"
    "copy" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 11px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
  grid-area: timeline !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 0 auto 2px !important;
  filter: drop-shadow(0 13px 20px rgba(8, 70, 77, 0.12)) saturate(1.06) !important;
  transform: none !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  min-width: 0 !important;
  max-width: 590px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 5px !important;
  text-align: center !important;
}

/* Every cue and line of supporting copy is optically centered beneath its
   section title. Populated Echo and Chapters use different state classes, so
   their saved-content layouts remain untouched. */
html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-reason,
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > span,
html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > small,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-reason,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > span,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > small {
  justify-self: center !important;
  width: auto !important;
  max-width: 30ch !important;
  margin: 0 auto 3px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main > strong,
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > strong,
html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > strong,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main > strong,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > strong,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > strong {
  justify-self: center !important;
  width: auto !important;
  max-width: 32ch !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main > small,
html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > small,
html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > em,
html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main > small,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy > small,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > em {
  justify-self: center !important;
  width: auto !important;
  max-width: 46ch !important;
  margin: 5px auto 0 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* Today Relive: named elements, balanced outer tracks, and centered grid
   content prevent the word or arrow from sitting high or drifting sideways. */
@media (min-width: 761px) {
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:hover,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:focus-visible,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:active,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button.is-relive-launching,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:hover,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:focus-visible,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:active,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button.is-relive-launching {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    grid-template-rows: 28px !important;
    place-content: center !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 8px !important;
    gap: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    translate: none !important;
    transform: translateY(-50%) !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-label,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-label {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-icon,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-icon {
    grid-column: 3 !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(225, 255, 249, 0.14) !important;
    border-radius: 50% !important;
    color: inherit !important;
    background: rgba(238, 255, 251, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:hover,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:focus-visible,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:active,
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button.is-relive-launching,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:hover,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:focus-visible,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button:active,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button.is-relive-launching {
    display: grid !important;
    grid-template-columns: 20px !important;
    grid-template-rows: 20px !important;
    place-content: center !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    translate: none !important;
    transform: translateY(-50%) !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-label,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-label {
    display: none !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-icon,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button > .today-memory-relive-icon {
    grid-column: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.08rem !important;
    line-height: 1 !important;
    transform: none !important;
  }
}

/* The source mascot is a square transparent canvas, so the image element must
   be noticeably larger for the visible character to read as the hero. */
html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-text-fallback-mappi,
html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-text-fallback-mappi {
  width: clamp(176px, 20vw, 228px) !important;
  max-width: 228px !important;
  max-height: 228px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-text-fallback-mappi,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-text-fallback-mappi {
    width: clamp(146px, 42vw, 174px) !important;
    max-width: 174px !important;
    max-height: 174px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-feature-card.is-empty,
  html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-feature-card.is-empty,
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty.premium-empty-preview,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty.premium-empty-preview,
  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview {
    min-height: 210px !important;
    padding: 20px 18px !important;
    border-radius: 22px !important;
    gap: 7px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-orbit,
  html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-empty-orbit {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-starter-book,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-starter-book,
  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main,
  html body main.app-shell section.map-stage.home-focus #homeDashboard #homeOnThisDay.is-empty .memory-echo-copy-main,
  html body .app-shell .map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-empty-copy,
  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-relive-button {
    transition: none !important;
  }
}