/* Opt-in customization effects on the current Home Chapter and Memory Capsule.
   Specificity intentionally outranks the legacy !important surface locks.
   The default editorial / clean presentation, photo crops, scroll owners,
   action sizes, and map-provider surfaces are not changed by this layer. */

/* A chosen accent follows the Chapter on Home and in its open viewer. */
html[data-mymappi-chapter-accent-mode="custom"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card {
  --chapter-accent: var(--mymappi-chapter-accent, #159879) !important;
}
html[data-mymappi-chapter-accent-mode="custom"] body main.app-shell #lifeChapterViewer #lifeChapterViewerContent .life-chapter-viewer-content {
  --chapter-view-accent: var(--mymappi-chapter-accent, #159879) !important;
}
html[data-mymappi-chapter-accent-mode="custom"] body main.app-shell #lifeChapterViewer #lifeChapterViewerContent .life-chapter-viewer-eyebrow {
  border-color: color-mix(in srgb, var(--chapter-view-accent) 40%, #dce8e6) !important;
  color: color-mix(in srgb, var(--chapter-view-accent) 48%, #00243f) !important;
  background: color-mix(in srgb, var(--chapter-view-accent) 10%, #fffef8) !important;
}

/* Postcard keeps the intrinsic rail geometry and adds a warm paper frame. */
html[data-mymappi-chapter-style="postcard"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card {
  border-color: #d9cfb9 !important;
  border-radius: 14px !important;
  background: #fffaf0 !important;
  box-shadow: 0 10px 22px rgba(68, 55, 34, .12), inset 0 1px 0 #fffdf8 !important;
}
html[data-mymappi-chapter-style="postcard"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px 13px 0 0 !important;
}
html[data-mymappi-chapter-style="postcard"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 7px solid #fffaf0 !important;
  border-bottom-width: 10px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-mymappi-chapter-style="postcard"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-copy {
  background: #fffaf0 !important;
}
html[data-mymappi-chapter-style="postcard"] body main.app-shell #lifeChapterViewer #lifeChapterViewerContent .life-chapter-viewer-note {
  border-color: #d9cfb9 !important;
  border-radius: 12px !important;
  background: #fffaf0 !important;
}

/* Film is a dark photographic frame, not an image filter or a new crop. */
html[data-mymappi-chapter-style="film"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card {
  border-color: #163b49 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 25px rgba(0, 36, 63, .18) !important;
}
html[data-mymappi-chapter-style="film"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 15px 15px 0 0 !important;
  background: #102f37 !important;
}
html[data-mymappi-chapter-style="film"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 7px solid #102f37 !important;
  border-inline-width: 11px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-mymappi-chapter-style="film"] body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-copy {
  background: #f0f6f6 !important;
}
html[data-mymappi-chapter-style="film"] body main.app-shell #lifeChapterViewer #lifeChapterViewerContent .life-chapter-viewer-gallery-section {
  border: 1px solid #173b47 !important;
  border-radius: 16px !important;
  background: #edf3f3 !important;
}

/* Keep the useful accent stripe; put the chosen decorative symbol on the
   previously unused after layer. It never takes a pointer or keyboard hit. */
html:is([data-mymappi-chapter-symbol="heart"], [data-mymappi-chapter-symbol="compass"], [data-mymappi-chapter-symbol="sun"], [data-mymappi-chapter-style="postcard"], [data-mymappi-chapter-style="film"]) body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-card::after {
  content: var(--mymappi-chapter-symbol, "✦") !important;
  position: absolute !important;
  inset: 13px 13px auto auto !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--chapter-accent, #159879) 42%, #00243f) !important;
  box-shadow: 0 3px 9px rgba(0, 36, 63, .18) !important;
  font-family: system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Capsule skins only decorate the existing full-capsule content column.
   In particular, no photo child, media rail, close button, or action dock
   gets a new size, position, touch action, or overflow rule. */
html[data-mymappi-capsule-style="postcard"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule {
  background: #fffaf0 !important;
}
html[data-mymappi-capsule-style="postcard"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-visual {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 14px rgba(70, 53, 30, .1) !important;
}
html[data-mymappi-capsule-style="postcard"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 8px solid #fffaf0 !important;
  border-bottom-width: 12px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-mymappi-capsule-style="postcard"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-body {
  background: #fffaf0 !important;
}
html[data-mymappi-capsule-style="postcard"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-inside-card {
  border: 1px solid #ded4bf !important;
  border-radius: 10px !important;
  background: #fffdf8 !important;
  box-shadow: 0 3px 8px rgba(70, 53, 30, .05) !important;
}

html[data-mymappi-capsule-style="scrapbook"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule {
  background: #f6f0e4 !important;
}
html[data-mymappi-capsule-style="scrapbook"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-body {
  background: radial-gradient(circle at 12% 8%, #f4bc6719, transparent 30%), #f6f0e4 !important;
}
html[data-mymappi-capsule-style="scrapbook"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-inside-card {
  border: 1px dashed color-mix(in srgb, var(--sheet-accent, #159879) 34%, #a79c82) !important;
  border-radius: 7px 16px 9px 15px !important;
  background: #fffdf7 !important;
  box-shadow: 3px 4px 0 #b89f6f17 !important;
}
html[data-mymappi-capsule-style="scrapbook"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-story {
  border-color: #d6c9ad !important;
}

html[data-mymappi-capsule-style="journal"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule {
  background: #fffdf6 !important;
}
html[data-mymappi-capsule-style="journal"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-body {
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(31, 110, 111, .065) 27px 28px), #fffdf6 !important;
}
html[data-mymappi-capsule-style="journal"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule :is(.memory-capsule-title-block h2, .memory-capsule-inside-heading h3, .memory-capsule-story p, blockquote) {
  font-family: Georgia, "Times New Roman", serif !important;
}
html[data-mymappi-capsule-style="journal"] body main.app-shell #memoryBottomSheet .memory-sheet-card.memory-capsule-card.full-memory-capsule .memory-capsule-inside-card {
  border-color: #ddd8c8 !important;
  border-radius: 8px !important;
  background: #fffef9 !important;
  box-shadow: none !important;
}