/* Intrinsic-height chapter shelf, equal sibling cards and editor. */
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .home-section-heading.life-chapter-section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .home-section-heading.life-chapter-section-heading::before,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .home-section-heading.life-chapter-section-heading::after {
  display: none !important;
  content: none !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-section-heading > .home-section-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeJourney .life-chapter-section-subtitle {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #527581 !important;
  font-size: .76rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  text-align: center !important;
}
/* Keep the rail and its cards content-sized across orientation changes.
   A wide cover can make a landscape grid row tall; never stretch the copy
   into that old row height when WebKit lays out the narrower cover again. */
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  justify-content: flex-start !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney > :is(.life-chapter-shelf, .life-chapter-import-row, .life-chapter-section-heading) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-row {
  /* A wrapping-free flex rail has no cross-axis grid track to retain from
     the old orientation. Keep the existing horizontal scrolling/snap owner. */
  --chapter-rail-card-width: 310px;
  display: flex !important;
  flex-wrap: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: max-content !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: stretch !important;
  /* The final card stops at the same inset as the first, without the old
     tablet 10vw trailing spacer. Keep just enough room for card borders. */
  padding-inline: 2px !important;
  scroll-padding-inline: 2px !important;
}
@media (min-width: 721px) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-row {
    --chapter-rail-card-width: min(42vw, 300px);
  }
}
@media (max-width: 720px) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-row {
    --chapter-rail-card-width: 100%;
  }
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card {
  container-type: inline-size;
  container-name: life-chapter-card;
  /* The cover keeps its own ratio. Siblings share the tallest intrinsic card,
     while the copy grows only enough to align their action footers. */
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: var(--chapter-rail-card-width) !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  grid-template-rows: auto auto !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1.72 !important;
}
/* The image's object-fit box must equal the actual cover frame. A natural-
   height image clipped by its parent cannot honor a saved focal point. */
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover > .life-chapter-cover-image,
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card:hover .life-chapter-cover > .life-chapter-cover-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--home-photo-position, center center) !important;
  transform: none !important;
  transition: none !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-copy {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  align-content: start !important;
  padding: 16px !important;
  gap: 10px !important;
  grid-template-rows: auto auto auto !important;
}
@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-row {
    --chapter-rail-card-width: min(360px, 100%);
    grid-auto-columns: min(360px, 100%) !important;
  }
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card-heading {
  padding-right: 0 !important;
  gap: 6px !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card-heading > strong {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  height: 2.5em !important;
  min-height: 2.5em !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden !important;
  overflow-wrap: anywhere;
  color: var(--mymappi-action-navy, #00243f) !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card-heading > small {
  font-size: .72rem !important;
  line-height: 1.4 !important;
  height: 2.8em !important;
  overflow: hidden;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-facts {
  gap: 7px !important;
  flex-wrap: wrap !important;
  min-height: 24px !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-facts > span {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  gap: 4px !important;
  color: #416471 !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-facts > span::before {
  display: none !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-facts > span + span::before {
  display: inline !important;
  content: "·" !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
  position: static !important;
  margin-right: 3px;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-facts :is(strong, small) {
  font-size: .72rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: inherit !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions {
  /* The tallest sibling determines this row's natural height. Push every
     footer to that baseline, including cards without a personal note/badge. */
  margin-top: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-personal-detail {
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4 !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions .life-chapter-edit {
  grid-column: 1 !important;
  position: static !important;
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  max-height: none !important;
  padding: 8px !important;
  gap: 6px !important;
  border: 1px solid #c9dedd !important;
  background: #f5fbf9 !important;
  box-shadow: none !important;
  color: #244d5c !important;
  min-height: 46px !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions .life-chapter-edit::before {
  display: none !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions .life-chapter-edit > span:last-child {
  display: inline !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions .life-chapter-relive {
  grid-column: 2 !important;
  min-height: 46px !important;
  background: #e8f5f0 !important;
  color: var(--mymappi-action-navy, #00243f) !important;
  border: 1px solid #d0e6de !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
/* Cards can be narrow on a large portrait iPad. Size actions by their card,
   not the screen breakpoint, so labels never collide before rotation. */
@container life-chapter-card (max-width: 280px) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-actions :is(.life-chapter-edit, .life-chapter-relive) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}
html body .app-shell #lifeChapterEditorDialog {
  position: fixed !important;
  top: var(--chapter-editor-top, 12px) !important;
  bottom: auto !important;
  margin: 0 auto !important;
  width: min(620px, calc(100vw - 24px)) !important;
  max-height: var(--chapter-editor-height, calc(100dvh - 24px)) !important;
  overflow: hidden !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-editor-panel {
  max-height: var(--chapter-editor-height, calc(100dvh - 24px)) !important;
  background: linear-gradient(145deg, #e8f4fc, #e4f5ec) !important;
  gap: 18px !important;
}
html body .app-shell #lifeChapterEditorDialog :is(input, textarea) {
  font-size: 16px !important;
  background: #fff !important;
  color: #00243f !important;
  box-shadow: none !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-field {
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-selection {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 350px) !important;
  justify-self: center !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-selection-media {
  aspect-ratio: 1.72 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #00243f !important;
  color: #fff;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-selection-copy {
  padding: 14px 16px !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-selection-copy > strong {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  color: #00243f !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-picker {
  display: flex !important;
  overflow-x: auto !important;
  max-height: 100px !important;
  padding: 4px 2px 10px !important;
  scrollbar-width: thin;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-option {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
}
html body .app-shell #lifeChapterEditorDialog [data-life-chapter-editor-status] {
  font-size: .75rem !important;
  line-height: 1.4;
  color: #416471 !important;
}
html body .app-shell #lifeChapterEditorDialog [data-life-chapter-editor-status][data-state="error"] {
  color: #92383f !important;
}
html body .app-shell #lifeChapterEditorDialog footer {
  position: sticky !important;
  bottom: -22px !important;
  background: #edf7f4 !important;
  backdrop-filter: none !important;
  z-index: 3;
  padding: 14px 22px !important;
  border-top: 1px solid #c9dedb !important;
}
html body .app-shell #lifeChapterEditorDialog footer button {
  min-height: 44px !important;
}
html body .app-shell #lifeChapterEditorDialog .life-chapter-editor-save {
  background: var(--mymappi-action-navy, #00243f) !important;
  color: #fff !important;
}
@media (max-width: 480px) {
  html body .app-shell #lifeChapterEditorDialog .life-chapter-editor-panel { padding: 16px !important; }
  html body .app-shell #lifeChapterEditorDialog .life-chapter-cover-field-heading { flex-wrap: wrap !important; }
  html body .app-shell #lifeChapterEditorDialog footer { bottom: -16px !important; gap: 8px !important; padding: 12px 16px !important; }
  html body .app-shell #lifeChapterEditorDialog footer > span { display: flex; gap: 8px; }
}