/* Build 680: calm, touch-safe trip and Life Chapter completion. */

html body .app-shell .life-chapter-editor-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

html body .app-shell .life-chapter-editor-panel > footer button {
  min-height: 44px !important;
}

html body .app-shell .life-chapter-completion-steps {
  display: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: -2px 0 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  list-style: none !important;
}

html body .app-shell .life-chapter-editor-dialog[data-mode="completion"] .life-chapter-completion-steps {
  display: grid !important;
}

html body .app-shell .life-chapter-completion-steps > li {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 76px !important;
  padding: 12px 11px 11px 37px !important;
  align-content: start !important;
  gap: 3px !important;
  border: 1px solid rgba(18, 118, 109, 0.12) !important;
  border-radius: 16px !important;
  color: #315f66 !important;
  background: linear-gradient(145deg, rgba(255, 255, 252, 0.9), rgba(232, 247, 241, 0.74)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .app-shell .life-chapter-completion-steps > li::before {
  position: absolute !important;
  top: 11px !important;
  left: 11px !important;
  display: grid !important;
  width: 19px !important;
  height: 19px !important;
  place-items: center !important;
  border: 1px solid rgba(13, 133, 118, 0.2) !important;
  border-radius: 50% !important;
  color: #0d746d !important;
  background: rgba(219, 245, 236, 0.88) !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

html body .app-shell .life-chapter-completion-steps > li:nth-child(1)::before {
  content: "1" !important;
}

html body .app-shell .life-chapter-completion-steps > li:nth-child(2)::before {
  content: "2" !important;
}

html body .app-shell .life-chapter-completion-steps > li:nth-child(3)::before {
  content: "3" !important;
}

html body .app-shell .life-chapter-completion-steps strong {
  color: #134c56 !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
}

html body .app-shell .life-chapter-completion-steps small {
  color: #668186 !important;
  font-size: 0.62rem !important;
  font-weight: 590 !important;
  line-height: 1.35 !important;
}

html body .app-shell .life-chapter-editor-dialog[data-mode="completion"] .life-chapter-private-note {
  min-height: 34px !important;
  margin-top: -2px !important;
  color: #3e6b70 !important;
  background: rgba(228, 247, 240, 0.82) !important;
}

html body .app-shell .life-chapter-editor-dialog[data-mode="completion"] .life-chapter-editor-save {
  background: linear-gradient(135deg, #075666 0%, #0b857a 58%, #19a474 100%) !important;
  box-shadow: 0 11px 24px rgba(7, 108, 98, 0.2) !important;
}

html body .app-shell .life-chapter-editor-dialog[data-mode="completion"] .life-chapter-cover-option.selected {
  border-color: #0e8c7b !important;
  box-shadow: 0 0 0 3px rgba(14, 140, 123, 0.14), 0 9px 20px rgba(8, 65, 70, 0.13) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-completion-status {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 30px !important;
  margin: 0 auto 2px !important;
  padding: 6px 11px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(13, 116, 109, 0.16) !important;
  border-radius: 999px !important;
  color: #315f66 !important;
  background: rgba(239, 249, 245, 0.92) !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-completion-status svg {
  width: 14px !important;
  height: 14px !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-completion-status.is-ready {
  color: #0c716a !important;
  background: rgba(225, 247, 239, 0.94) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-completion-status.is-finished {
  color: #4f6c70 !important;
  background: rgba(247, 248, 242, 0.94) !important;
}

html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-card.is-finished {
  border-color: rgba(17, 121, 111, 0.18) !important;
}

@media (max-width: 640px) {
  html body .app-shell .life-chapter-editor-dialog[data-mode="completion"] .life-chapter-completion-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html body .app-shell .life-chapter-completion-steps > li {
    min-height: 54px !important;
    padding: 10px 10px 9px 37px !important;
  }

  html body .app-shell .life-chapter-completion-steps > li::before {
    top: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .life-chapter-editor-dialog *,
  html body .app-shell .life-chapter-editor-dialog *::before,
  html body .app-shell .life-chapter-editor-dialog *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}