/* Contextual help stays in a bounded dialog or in its panel's normal flow. */
html body #mappiGuideDialog {
  box-sizing: border-box; width: min(440px, calc(100% - 32px));
  max-height: calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto; padding: 0; overflow: auto; border: 1px solid #c5d8e2;
  border-radius: 24px; background: #f9fcfd; color: #00243f;
  box-shadow: 0 24px 64px #00243f33;
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
#mappiGuideDialog::backdrop { background: #00243f70; }
html body .mappi-context-card { box-sizing: border-box; min-width: 0; padding: 20px; text-align: left; color: #00243f; background: #f9fcfd; overflow-wrap: anywhere; }
html body .mappi-context-card h2 { margin: 12px 0 10px; font: inherit; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; color: #00243f; }
html body .mappi-context-card small { color: #486375; font-weight: 700; letter-spacing: .025em; }
html body .mappi-context-card p { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: #486375; }
html body .mappi-context-card .mappi-context-note { padding: 10px 12px; border-radius: 12px; background: #e4f5f1; color: #00243f; font-size: .8rem; line-height: 1.45; }
html body .mappi-context-card button { box-sizing: border-box; min-height: 44px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid #366079; color: #fff; background: #00243f; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
html body .mappi-context-card button:focus-visible { outline: 3px solid #287ba4; outline-offset: 2px; }
html body .mappi-context-card .mappi-context-quiet { background: transparent; color: #486375; border-color: transparent; }
.mappi-context-actions, .mappi-guide-topics { display: grid; gap: 8px; }
html body .mappi-context-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .mappi-context-card .mappi-context-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 44px; }
html body .mappi-context-heading > small { font-size: .72rem; line-height: 1.4; }
html body .mappi-context-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #00243f; background: #e4f5f1; }
html body .mappi-context-mark svg { width: 20px; height: 20px; }
html body .mappi-context-card button.mappi-context-close { width: 44px; height: 44px; padding: 0; font-size: 1.55rem; font-weight: 400; line-height: 1; color: #486375; background: transparent; border-color: transparent; }
html body .mappi-context-card .mappi-context-replay { display: block; margin-top: 12px; text-align: center; font-size: .68rem; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
html body .mappi-guide-topics { margin-block: 16px 8px; }
html body .mappi-guide-topics > button { display: grid; grid-template-columns: 36px minmax(0, 1fr) 12px; align-items: center; gap: 12px; padding: 12px; min-height: 64px; text-align: left; background: #fff; color: #00243f; border-color: #c5d8e2; }
html body .mappi-guide-topic-copy { min-width: 0; display: grid; gap: 4px; }
html body .mappi-guide-topic-copy strong { font-size: .86rem; line-height: 1.3; }
html body .mappi-guide-topic-copy small { font-size: .72rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
html body .mappi-guide-arrow { font-size: 1.4rem; color: #486375; }
html body .mappi-context-card.is-inline { margin: 0 0 12px; border: 1px solid #c5d8e2; border-radius: 18px; padding: 12px 14px; }
html body .mappi-context-card.is-inline .mappi-context-heading { grid-template-columns: 24px minmax(0, 1fr) 44px; gap: 8px; }
html body .mappi-context-card.is-inline .mappi-context-mark { width: 24px; height: 24px; border-radius: 7px; }
html body .mappi-context-card.is-inline .mappi-context-mark svg { width: 16px; height: 16px; }
html body .mappi-context-card.is-inline h2 { font-size: 1.05rem; margin: 2px 0 6px; }
html body .mappi-context-card.is-inline p { font-size: .82rem; line-height: 1.4; margin-bottom: 8px; }
html body .mappi-context-card.is-inline .mappi-context-actions button { font-size: .8rem; padding: 8px; }
@media (max-width: 360px) {
  html body .mappi-context-card { padding: 16px; }
  html body .mappi-context-card .mappi-context-actions button { font-size: .8rem; padding-inline: 8px; }
  html body .mappi-context-card.is-inline { padding: 10px 12px; }
}
/* Manual guide: one stable, warm editorial frame. Only its reading area scrolls;
   automatic/inline introductions above keep their compact presentation. */
html body #mappiGuideDialog[data-guide-mode="manual"] {
  width: min(560px, calc(100% - 32px - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
  height: min(700px, calc(100svh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  max-height: calc(100svh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden; scrollbar-gutter: auto; background: #fbfcf8;
  border: 1px solid #cbdedc; border-radius: 24px; color: #00243f;
}
html body .mappi-guide-page {
  display: grid; grid-template-rows: max-content minmax(0, 1fr) max-content;
  height: 100%; min-height: 0; min-width: 0; text-align: left;
  background: #fbfcf8; color: #00243f; overflow-wrap: anywhere;
}
html body .mappi-guide-page button {
  box-sizing: border-box; min-height: 44px; min-width: 0; margin: 0;
  padding: 10px 16px; border: 1px solid transparent; border-radius: 14px;
  font: inherit; font-size: .9rem; line-height: 1.3; font-weight: 700;
  color: #00243f; background: transparent; box-shadow: none; cursor: pointer;
}
html body .mappi-guide-page button:focus-visible { outline: 3px solid #287ba4; outline-offset: 2px; }
html body .mappi-guide-page button:disabled { opacity: .45; cursor: default; }
html body .mappi-guide-header {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content 44px;
  align-items: center; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid #dce7e3; background: #f1f7f3;
}
html body .mappi-guide-brand {
  grid-column: span 2; display: flex; align-items: center; gap: 10px;
  color: #345863; font-size: .85rem; font-weight: 700;
}
html body .mappi-guide-header button.mappi-context-close {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  font-size: 1.6rem; font-weight: 400; line-height: 1; color: #345863;
  background: #e4efea;
}
html body .mappi-guide-header .mappi-guide-back {
  width: fit-content; max-width: 100%; padding-inline: 4px 10px; text-align: left;
  display: flex; align-items: center; gap: 8px; font-size: .85rem;
}
html body .mappi-guide-back::before { content: "‹"; font-size: 1.5rem; font-weight: 400; }
html body .mappi-guide-progress { white-space: nowrap; color: #486375; font-size: .75rem; font-variant-numeric: tabular-nums; }
html body .mappi-guide-body {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px; scrollbar-gutter: stable both-edges; scroll-padding-block: 16px;
}
html body .mappi-guide-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
html body .mappi-guide-identity .mappi-context-mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: #ddf1e9; }
html body .mappi-guide-identity small { color: #42616a; font-size: .75rem; line-height: 1.4; font-weight: 700; }
html body .mappi-guide-intro h2 {
  margin: 0 0 10px; font-size: 1.65rem; font-weight: 800; line-height: 1.18;
  letter-spacing: -.035em; color: #00243f; text-wrap: balance;
}
html body .mappi-guide-intro h2:focus { outline: none; }
html body .mappi-guide-intro > p { margin: 0; font-size: .95rem; line-height: 1.5; color: #486375; }
html body .mappi-guide-lesson { margin-top: 24px; }
html body .mappi-guide-steps { list-style: none; counter-reset: guide-step; margin: 0; padding: 0; display: grid; gap: 20px; }
html body .mappi-guide-steps li { position: relative; padding-left: 40px; counter-increment: guide-step; }
html body .mappi-guide-steps li::before {
  content: counter(guide-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-size: .75rem; line-height: 1.8; font-weight: 700; color: #2b7065;
}
html body .mappi-guide-steps strong { display: block; font-size: .95rem; line-height: 1.4; color: #00243f; }
html body .mappi-guide-steps p { margin: 4px 0 0; font-size: .875rem; line-height: 1.5; color: #486375; }
html body .mappi-guide-note { margin: 22px 0 0; padding: 12px 0 0; border-top: 1px solid #d5e5df; color: #42616a; font-size: .8rem; line-height: 1.5; }
html body .mappi-guide-example { margin: 20px 0 0; padding: 14px 16px; border: 0; border-left: 3px solid #6dd8c4; border-radius: 0 12px 12px 0; background: #edf7f1; }
html body .mappi-guide-example small { color: #486375; font-size: .75rem; font-weight: 700; }
html body .mappi-guide-example p { margin: 6px 0 0; font-size: 1.1rem; line-height: 1.4; font-weight: 700; color: #00243f; }
html body .mappi-guide-footer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  padding: 12px 24px 16px; border-top: 1px solid #dce7e3; background: #f1f7f3;
}
html body .mappi-guide-footer button { width: 100%; min-height: 48px; }
html body .mappi-guide-footer .mappi-guide-primary { color: #00243f; background: #74d9c5; border-color: #69caba; }
html body .mappi-guide-footer .mappi-guide-secondary { border-color: #c9dbd5; }
html body .mappi-guide-page.is-guide-index .mappi-guide-footer { grid-template-columns: minmax(0, 1fr); }
html body .mappi-guide-page.is-guide-index .mappi-guide-identity .mappi-context-mark { display: none; }
html body .mappi-guide-page.is-guide-index .mappi-guide-identity { margin-bottom: 8px; }
html body .mappi-guide-page .mappi-guide-topics { margin: 20px 0; gap: 0; }
html body .mappi-guide-page .mappi-guide-topics > button {
  width: 100%; min-height: 68px; padding: 12px 0; gap: 12px;
  border: 0; border-bottom: 1px solid #dce7e3; border-radius: 0; background: transparent;
}
html body .mappi-guide-page .mappi-guide-topics > button:last-child { border-bottom: 0; }
html body .mappi-guide-page .mappi-guide-topic-copy strong { font-size: .95rem; }
html body .mappi-guide-page .mappi-guide-topic-copy small { font-size: .8rem; line-height: 1.4; color: #486375; }
html body .mappi-guide-page .mappi-guide-topics > button:focus-visible { border-radius: 10px; }
html body .mappi-guide-setting { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 16px; align-items: center; padding-top: 16px; border-top: 1px solid #dce7e3; }
html body .mappi-guide-setting strong { display: block; font-size: .85rem; line-height: 1.4; }
html body .mappi-guide-setting small { display: block; margin-top: 4px; color: #486375; font-size: .75rem; line-height: 1.4; }
html body .mappi-guide-page button.mappi-guide-switch { position: relative; width: 52px; height: 44px; padding: 0; }
html body .mappi-guide-switch::before { content: ""; position: absolute; inset: 8px 0; border: 1px solid #66847d; border-radius: 28px; background: #d4e0db; }
html body .mappi-guide-switch::after { content: ""; position: absolute; top: 11px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #00243f33; }
html body .mappi-guide-switch[aria-checked="true"]::before { background: #287d6e; border-color: #287d6e; }
html body .mappi-guide-switch[aria-checked="true"]::after { left: 26px; }
@media (max-width: 360px) {
  html body .mappi-guide-header { padding-inline: 14px; }
  html body .mappi-guide-body { padding: 18px 14px; }
  html body .mappi-guide-footer { padding-inline: 14px; }
  html body .mappi-guide-intro h2 { font-size: 1.4rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  html body #mappiGuideDialog[data-guide-mode="manual"] { width: min(760px, calc(100% - 32px - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))); border-radius: 20px; }
  html body .mappi-guide-header { padding-block: 6px; }
  html body .mappi-guide-body { padding: 16px 20px; }
  html body .mappi-guide-footer { padding-block: 8px; }
  html body .mappi-guide-footer button { min-height: 44px; }
  html body .mappi-guide-intro h2 { font-size: 1.4rem; }
  html body .mappi-guide-identity { margin-bottom: 10px; }
  html body .mappi-guide-identity .mappi-context-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  html body .mappi-guide-example { margin-top: 12px; padding: 10px 12px; }
  html body .mappi-guide-example p { margin-top: 4px; font-size: 1rem; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 740px) {
  html body .mappi-guide-page:not(.is-guide-index) .mappi-guide-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
  html body .mappi-guide-lesson { margin-top: 0; }
  html body .mappi-guide-steps { gap: 12px; }
  html body .mappi-guide-note { margin-top: 14px; }
  html body .mappi-guide-page.is-guide-index .mappi-guide-body { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px 20px; padding-block: 12px; align-content: start; }
  html body .mappi-guide-page.is-guide-index .mappi-guide-intro h2 { font-size: 1.25rem; }
  html body .mappi-guide-page.is-guide-index .mappi-guide-intro > p { font-size: .875rem; }
  html body .mappi-guide-page.is-guide-index .mappi-guide-topics { grid-column: 2; grid-row: 1 / 3; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  html body .mappi-guide-page.is-guide-index .mappi-guide-setting { grid-column: 1; align-self: start; }
  html body .mappi-guide-page .mappi-guide-topics > button { min-height: 64px; padding-block: 6px; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  html body .mappi-guide-page .mappi-guide-topics .mappi-context-mark { width: 28px; height: 28px; border-radius: 9px; }
  html body .mappi-guide-page .mappi-guide-topics .mappi-guide-arrow { display: none; }
}
html body #authWelcome { box-sizing: border-box; min-width: 0; padding: 22px; text-align: center; }
html body #authWelcome[hidden] { display: none !important; }
html body #authWelcome h2 { color: #00243f; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.15; margin: 0 0 12px; }
html body #authWelcome p { color: #486375; line-height: 1.5; margin: 0 0 20px; }
html body #authWelcome button { width: 100%; min-height: 48px; margin: 4px 0; }
html body #authWelcome .auth-welcome-privacy { display: block; margin-top: 12px; color: #486375; font-size: .75rem; line-height: 1.4; }
/* First memory: a concise place/title/date group; richer fields stay optional. */
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .editor-promise,
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .first-memory-inspiration :is(p, small) { display: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .first-memory-inspiration { padding: 0 !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .first-memory-inspiration strong { font-size: 1rem !important; line-height: 1.35; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-flow-place { padding: 16px !important; gap: 12px !important; }
/* One field column at every viewport size; date must not inherit the old
   narrower, left-anchored focus width after moving into the first step. */
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding :is(.first-memory-inspiration, .memory-place-finder, .memory-title-field, .memory-date-row, .photo-metadata-suggestion),
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryPhotoStart {
  width: min(100%, 560px) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
}
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding :is(.memory-place-finder > label, .memory-title-field, .memory-date-row > label:not(.memory-people-select)) { text-align: left !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #memoryDate { text-align: left !important; text-align-last: left !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-finder { gap: 6px !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-search-row { grid-template-columns: minmax(0, 1fr) 44px !important; padding: 4px !important; gap: 4px !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-search-row > svg { display: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-search-button { grid-column: auto !important; width: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 8px !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-search-button > span:last-child { display: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-place-search-button svg { width: 20px !important; height: 20px !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .editor-header { padding-block: 8px !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryLocationConsent:not([hidden]) { display: flex !important; width: 100% !important; justify-content: center; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryLocationConsent:not(.is-waiting):not(.is-error) .first-memory-location-consent-copy,
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryLocationConsent:not(.is-waiting):not(.is-error) #firstMemoryLocationSkip { display: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryLocationConsent:is(.is-waiting,.is-error) { flex-direction: column; align-items: stretch; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .first-memory-location-consent-actions { display: flex !important; width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding #firstMemoryLocationAllow { width: auto !important; padding: 6px 8px !important; min-height: 44px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #00243f !important; text-align: center; text-decoration: underline; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding:not(.details-open) .memory-flow-story { display: none !important; }
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .memory-title-field { margin-top: 8px !important; }
html body #firstMemoryPhotoStart { min-height: 44px; width: 100%; margin: 0; border: 1px solid #c5d8e2; border-radius: 12px; color: #00243f; background: #e4f5f1; font: inherit; font-weight: 700; }
html body #firstMemoryPhotoStart[hidden] { display: none !important; }
/* Keep correction next to the field, not in a floating notice below the editor. */
html body main.app-shell #memoryForm#memoryForm .memory-field-error {
  display: block; min-width: 0; margin: 6px 0 0; padding: 10px 12px;
  color: #8b3042; background: #fff3f5; border: 1px solid #ebc1ca;
  border-radius: 10px; font-size: .875rem; line-height: 1.45;
  text-align: left; overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm [aria-invalid="true"] { border-color: #8b3042 !important; }
/* First-time savers need the distinction between private MM and public OM.
   The live draft status above remains a separate, factual storage message. */
html body main.app-shell #memoryForm#memoryForm.is-first-memory-onboarding .editor-actions > .save-memory-note:not(.is-error) {
  display: block !important; width: 100%; margin: 0; padding: 0;
  color: #486375; font-size: .8rem; line-height: 1.45;
  text-align: center; overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm:not(:has([data-memory-field-error])) .editor-actions > .save-memory-note.is-error {
  display: block !important; width: 100%; box-sizing: border-box;
  margin: 0; padding: 10px 12px; color: #8b3042 !important; background: #fff3f5;
  border: 1px solid #ebc1ca; border-radius: 10px;
  font-size: .875rem !important; line-height: 1.45 !important; text-align: left !important; overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm #memoryEditorChangeCoverButton {
  box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
  max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere;
}
html body main.app-shell #memoryForm#memoryForm #memoryMediaDropZone {
  grid-template-columns: minmax(0, 1fr) !important;
}
/* The intrinsic-height chapter rail must not re-enable the empty shelf during
   the first-keepsake state. Real chapters retain their normal layout. */
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeJourney.is-empty-chapter-section { display: none !important; }
html body main.app-shell #homeDashboard.home-dashboard.is-first-keepsake :is(#homeOnThisDay, #homeTimelineStrip) { display: none !important; }

/* After the first save, keep the person's memory and its Relive action in the
   first view. Marketing copy and inherited hero spacing must not push it down. */
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  padding-top: calc(76px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(var(--bottom-nav-height, 78px) + max(8px, env(safe-area-inset-bottom)) + 12px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
}
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) > .hero-copy {
  flex: 0 0 auto !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  min-height: 0 !important;
  gap: 8px !important;
  animation: none !important;
  transform: none !important;
}
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) > .hero-copy h2 {
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 6px 14px !important;
  font-size: clamp(1.15rem, 3.5vw, 1.6rem) !important;
  line-height: 1.2 !important;
}
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) .home-hero-tagline {
  display: none !important;
}
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) .home-memory-pulse {
  margin-top: 0 !important;
}
html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) :is(.home-calm-status, .home-sync-confidence) {
  margin-block: 0 !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake {
  /* Keep the first saved moment connected to its save status. Spare screen
     height belongs below the card, not between the person and their memory. */
  flex: 0 0 auto !important;
  min-height: 0 !important;
  align-content: start !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding-block: 0 !important;
  animation: none !important;
  transform: none !important;
}
html body main.app-shell #homeDashboard.home-dashboard.is-first-keepsake > .home-section {
  animation: none !important;
  transform: none !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .home-living-meta {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay :is(.home-living-action, .home-living-kicker, .home-living-private) {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .home-living-action {
  height: auto !important;
  padding-block: 12px !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .home-living-action > span:first-child {
  min-width: 0;
}
@media (max-width: 720px) and (orientation: portrait) {
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) .home-memory-pulse .home-stat {
    min-height: 62px !important;
    padding-block: 5px !important;
    grid-template-rows: 16px auto auto !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) .home-stat-icon.mappi-glyph {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .home-living-card.is-first-keepsake:has(.has-photo) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake .home-living-visual.has-photo {
    width: 100% !important;
    height: clamp(128px, 22svh, 192px) !important;
    min-height: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake .home-living-visual.has-photo > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake:has(.has-photo) .home-living-copy {
    padding: 18px 20px !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake .home-living-copy h2 {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 360px) {
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.is-first-keepsake) {
    padding-top: calc(68px + env(safe-area-inset-top)) !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .home-living-card.is-first-keepsake:not(:has(.has-photo)) {
    min-height: 0 !important;
  }
}

/* First-save guidance must actually be readable, including local-only status.
   Keep the shared notice lane; don't turn the milestone into another modal. */
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(4, auto) !important;
  gap: 8px !important;
  height: auto !important;
  max-height: calc(100svh - 150px) !important;
  overflow-y: auto !important;
  padding: 12px !important;
}
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > :is(span, svg) {
  display: none !important;
}
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > :is(strong, small, em, .memory-confirmation-actions) {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > strong { display: block !important; grid-row: 1 !important; line-height: 1.35 !important; }
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > small { display: block !important; grid-row: 2 !important; font-size: .78rem !important; line-height: 1.4 !important; }
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > em {
  display: block !important; grid-row: 3 !important; margin: 0 !important; padding: 0 !important;
  color: #c7dae4 !important; background: transparent !important; border: 0 !important;
  font-size: .72rem !important; line-height: 1.4 !important; font-style: normal !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important;
  box-shadow: none !important; outline: none !important;
}
html body main.app-shell #memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation#memorySaveConfirmation[data-variant="first-memory"] > .memory-confirmation-actions { grid-row: 4 !important; }

/* A next-memory invitation belongs beside the first keepsake, not in a modal.
   It never steals focus and disappears when the first-memory card gives way. */
html body main.app-shell #homeMemoryOfDay .first-keepsake-next {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #d2e2e9;
  text-align: center;
}
html body main.app-shell #homeMemoryOfDay .first-keepsake-next > span {
  max-width: 34ch;
  font-size: .78rem;
  line-height: 1.45;
  color: #486375;
  text-wrap: balance;
}
html body main.app-shell #homeMemoryOfDay [data-first-keepsake-next] {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  color: #00243f;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: .85rem;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
html body main.app-shell #homeMemoryOfDay [data-first-keepsake-next]:focus-visible {
  outline: 3px solid #287ba4;
  outline-offset: 2px;
}
html body main.app-shell #memoryForm#memoryForm[data-capture-stage="next"] .first-memory-inspiration p {
  display: block !important;
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.45;
}
@media (max-width: 720px) and (orientation: portrait) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake:has([data-first-keepsake-next]) .home-living-visual.has-photo {
    height: clamp(128px, 17svh, 156px) !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard.is-first-keepsake #homeMemoryOfDay .is-first-keepsake:has([data-first-keepsake-next]) .home-living-copy {
    gap: 6px !important;
    padding: 14px 18px !important;
  }
}

/* Empty Home: one warm invitation. Scope the composition to new-map so an
   active trip or a saved place keeps its own message and action hierarchy. */
html body main.app-shell section.map-stage.home-focus > #memoryForm.memory-editor:not(.open) {
  display: none !important;
}
/* The oversized decorative map wash must not create a scrollable blank tail. */
html body main.app-shell section.map-stage.home-focus::after {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  animation: none !important;
  transform: none !important;
}
/* Saving a first draft changes the copy, not the invitation's geometry.
   Both states keep the same centered actions and grouped privacy footer. */
html body main.app-shell section.map-stage.home-focus.has-empty-home:has(#homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"])) {
  box-sizing: border-box !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  padding-block: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
}
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating):has(> #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"])) {
  box-sizing: border-box !important;
  min-height: 100% !important;
  max-height: none !important;
  place-items: center !important;
  align-content: stretch !important;
  /* Balance the invitation within the usable lane between header and dock.
     Equal flexible tracks collapse safely when larger text needs scrolling. */
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  row-gap: 0 !important;
  padding-top: calc(71px + max(8px, env(safe-area-inset-top))) !important;
  padding-bottom: calc(var(--bottom-nav-height, 78px) + 8px + env(safe-area-inset-bottom) + 22px) !important;
}
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating) > #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) {
  grid-row: 2 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 24px clamp(18px, 4vw, 40px) !important;
  gap: 16px !important;
  align-content: start !important;
}
@media (min-width: 1367px) {
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating):has(> #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"])) {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + max(22px, env(safe-area-inset-bottom)) + 22px) !important;
  }
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]),
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) :is(.home-starter-visual, .home-starter-visual img),
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
html body main.app-shell #homeStarter .home-starter-eyebrow[hidden] { display: none !important; }
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual {
  width: 76px !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px #e4f5f180 !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual img {
  width: 66px !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual::after {
  inset: -12px !important;
  opacity: .45 !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-copy {
  gap: 12px !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) h2 {
  max-width: 18ch !important;
  font-size: clamp(1.65rem, 4.6vw, 2.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-copy > p {
  max-width: 34ch !important;
  font-size: .95rem !important;
  line-height: 1.5 !important;
  text-wrap: balance;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-actions {
  width: min(100%, 320px) !important;
  gap: 4px !important;
  margin-top: 4px !important;
}
html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-primary {
  width: 100% !important;
  min-height: 54px !important;
  background: var(--mymappi-action-navy, #00243f) !important;
  color: #fff !important;
}
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-secondary {
  display: inline-flex !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: .85rem !important;
  font-weight: 650 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-assurance {
  display: grid !important;
  justify-items: center !important;
  width: min(100%, 320px) !important;
  max-width: 100% !important;
  gap: 4px !important;
  margin: 2px 0 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #dce9e6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #526d76 !important;
  font-size: .75rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
html body main.app-shell #homeStarter .home-starter-assurance-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
html body main.app-shell #homeStarter .home-starter-assurance-title strong {
  font-size: inherit;
  font-weight: 650;
  color: #345666;
}
html body main.app-shell #homeStarter .home-starter-assurance-title svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex-shrink: 0;
  margin: 0 !important;
  color: var(--mymappi-color-muted, #486375);
}
html body main.app-shell #homeStarter .home-starter-assurance-note {
  max-width: 30ch;
  font-weight: 450;
  text-wrap: balance;
}
@media (max-width: 390px), (max-height: 700px) {
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating) > #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) {
    padding-block: 18px !important;
    gap: 12px !important;
  }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual { width: 64px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual img { width: 56px !important; }
}
@media (max-width: 390px) and (max-height: 640px) {
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating) > #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) { padding-block: 14px !important; gap: 10px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual { width: 56px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual img { width: 48px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-copy { gap: 8px !important; }
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-assurance { padding-top: 8px !important; gap: 2px !important; }
}
@media (max-width: 390px) and (max-height: 640px) {
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating):has(> #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"])) {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + 8px + env(safe-area-inset-bottom) + 16px) !important;
  }
}
/* The same first-memory invitation has a compact sideways composition.
   Keep both actions, the mascot and privacy note; larger text can still scroll. */
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating):has(> #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"])) {
    padding-bottom: calc(var(--bottom-nav-height, 60px) + max(8px, env(safe-area-inset-bottom)) + 22px) !important;
  }
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeDashboard.home-dashboard.is-empty-home:not(.is-hydrating) > #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) {
    padding-block: 8px !important;
    gap: 6px !important;
  }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual { width: 32px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual img { width: 28px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-visual::after { inset: -4px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-copy { width: 100% !important; gap: 6px !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) h2 { max-width: none !important; font-size: 1.25rem !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-copy > p { max-width: none !important; font-size: .875rem !important; line-height: 1.4 !important; }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-actions {
    width: min(100%, 560px) !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }
  html body main.app-shell #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-primary { min-height: 44px !important; padding-block: 8px !important; }
  html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter:is([data-starter-context="new-map"], [data-starter-context="draft"]) .home-starter-assurance {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 8px !important;
    gap: 4px 12px !important;
  }
}