/* Phase-one release polish: first-run home, account entry, capture flow, and Today. */

/* Account entry keeps the deep brand panel, with a warmer and quieter page field. */
html body .auth-gate {
  background:
    radial-gradient(circle at 12% 10%, rgba(89, 215, 181, 0.19), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(91, 183, 224, 0.16), transparent 36%),
    linear-gradient(180deg, #f4f8f3 0%, #f8f6ef 58%, #fbfaf5 100%) !important;
}

html body .auth-gate::after {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.4), transparent 58%) !important;
}

html body .auth-mappi,
html body .auth-card.signup-mode .auth-mappi,
html body .auth-card.verify-mode .auth-mappi {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 22px rgba(0, 28, 36, 0.24)) !important;
}

html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-brand {
  transform: none !important;
}

html body #authForgotPasswordButton[aria-busy="true"] {
  color: #456f72 !important;
  cursor: wait !important;
  opacity: 0.82 !important;
}

html body .auth-card > .account-auth-message:not(:empty) {
  min-height: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(12, 123, 105, 0.11) !important;
  border-radius: 12px !important;
  color: #37686b !important;
  background: rgba(231, 248, 241, 0.68) !important;
}

html body .auth-card > .account-auth-message.error:not(:empty) {
  border-color: rgba(188, 62, 48, 0.12) !important;
  color: #a63d34 !important;
  background: rgba(255, 240, 237, 0.82) !important;
}

/* A custom category behaves like a real editor field, not a hidden implementation detail. */
html body .memory-editor #customCategoryWrap:not(.hidden-field) {
  display: grid !important;
  padding: 12px 13px !important;
  gap: 7px !important;
  border: 1px solid color-mix(in srgb, var(--editor-accent, #168f82) 20%, transparent) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--editor-accent, #168f82) 5%, #ffffff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html body .memory-editor #customCategoryWrap .custom-category-hint {
  color: rgba(8, 58, 67, 0.56) !important;
  font-size: 0.67rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* A zero-memory account is honest, calm, and intentionally ready to grow. */
html body .map-stage.has-empty-home .home-memory-pulse .home-stat.is-empty > strong {
  min-width: 1ch !important;
  color: #0c5f67 !important;
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body .map-stage.has-empty-home .home-memory-pulse .home-stat.is-empty {
  opacity: 0.86 !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home {
  gap: clamp(24px, 3.5vw, 38px) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading {
  margin-bottom: 10px !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .home-section-heading > strong,
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .home-section-heading > strong,
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .home-section-heading > strong {
  display: none !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-memory-card.is-empty-today {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-memory-card.is-empty-today .empty-memory-invite {
  min-height: 232px !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.94), transparent 31%),
    radial-gradient(circle at 92% 14%, rgba(255, 107, 107, 0.13), transparent 30%),
    radial-gradient(circle at 7% 100%, rgba(47, 158, 205, 0.11), transparent 42%),
    linear-gradient(145deg, #fbfff9 0%, #edf9f2 57%, #e6f4f7 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-empty-preview-card {
  gap: 8px !important;
  padding: 10px !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-empty-preview-card .today-memory-title {
  max-width: 18ch !important;
  font-size: clamp(1.55rem, 4vw, 2.35rem) !important;
  line-height: 1.02 !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-empty-preview-card p {
  max-width: 32ch !important;
  font-size: clamp(0.87rem, 1.4vw, 1rem) !important;
  line-height: 1.4 !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-empty-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  margin-top: 3px !important;
  padding: 9px 15px !important;
  gap: 7px !important;
  border: 1px solid rgba(94, 225, 187, 0.24) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 880 !important;
  background: linear-gradient(135deg, #084c5d, #07837b 58%, #17a472) !important;
  box-shadow: 0 12px 24px rgba(7, 101, 91, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Empty Echo: one future-looking signal, without a second competing creation button. */
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-feature-card.is-empty {
  display: grid !important;
  min-height: 156px !important;
  padding: 17px 18px !important;
  gap: 10px !important;
  border: 1px solid rgba(26, 126, 145, 0.11) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 6% 8%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(145deg, rgba(247, 253, 250, 0.96), rgba(229, 244, 246, 0.84)) !important;
  box-shadow: 0 13px 30px rgba(7, 70, 78, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-reason-stack {
  justify-self: start !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-body {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit {
  position: relative !important;
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  border: 1px solid rgba(29, 137, 157, 0.12) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #eef9f7, #dceef4) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 9px 18px rgba(9, 86, 101, 0.08) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit i {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  display: block !important;
  border: 1px solid rgba(17, 130, 150, 0.3) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit i:nth-child(1) { width: 46px !important; height: 46px !important; }
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit i:nth-child(2) { width: 28px !important; height: 28px !important; }
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit i:nth-child(3) {
  width: 9px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  background: #f36567 !important;
  box-shadow: 0 4px 10px rgba(201, 58, 66, 0.2) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main {
  display: grid !important;
  gap: 4px !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main strong {
  font-size: clamp(0.98rem, 2vw, 1.16rem) !important;
  line-height: 1.12 !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main small {
  max-width: 52ch !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-why-now {
  display: none !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-unlock {
  grid-area: action !important;
  justify-self: center !important;
  color: rgba(8, 76, 84, 0.58) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

/* Empty Chapters: one honest blank storybook, never three duplicate sample photos. */
html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty.premium-empty-preview {
  display: grid !important;
  grid-template-columns: 178px minmax(0, 1fr) !important;
  grid-template-areas: "book copy" "cue cue" !important;
  align-items: center !important;
  min-height: 176px !important;
  padding: 18px 20px !important;
  gap: 12px 22px !important;
  border: 1px solid rgba(20, 122, 104, 0.1) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 253, 247, 0.95), rgba(232, 247, 239, 0.84)) !important;
  box-shadow: 0 13px 30px rgba(7, 70, 68, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  text-align: left !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-starter-book {
  grid-area: book !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 3px 1fr !important;
  width: 172px !important;
  height: 112px !important;
  padding: 9px !important;
  border-radius: 18px 18px 14px 14px !important;
  background: linear-gradient(145deg, #0b716b, #12546b) !important;
  box-shadow: 0 13px 24px rgba(5, 72, 75, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: perspective(360px) rotateX(4deg) !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-page {
  display: grid !important;
  align-content: center !important;
  padding: 9px !important;
  gap: 7px !important;
  background: #fffdf4 !important;
  box-shadow: inset 0 0 12px rgba(17, 91, 82, 0.08) !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .page-left { border-radius: 11px 3px 3px 9px !important; }
html body .map-stage.home-focus #homeDashboard #homeJourney .page-right { border-radius: 3px 11px 9px 3px !important; }
html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-spine { background: rgba(5, 62, 64, 0.34) !important; }

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-page i {
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(17, 104, 93, 0.12) !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-tabs {
  position: absolute !important;
  right: -7px !important;
  bottom: 11px !important;
  display: grid !important;
  gap: 4px !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-tabs em {
  padding: 3px 7px !important;
  border-radius: 0 7px 7px 0 !important;
  color: #6b571f !important;
  font-size: 0.46rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  background: #f6d77f !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-copy {
  grid-area: copy !important;
  display: grid !important;
  justify-items: start !important;
  gap: 5px !important;
  text-align: left !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-copy > * {
  margin: 0 !important;
  text-align: left !important;
}

html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-cue {
  grid-area: cue !important;
  justify-self: center !important;
  color: rgba(8, 76, 68, 0.58) !important;
  font-size: 0.68rem !important;
  font-weight: 770 !important;
}

/* Empty Recent is a timeline cue, visually distinct from Chapters. */
html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 142px !important;
  padding: 18px 20px !important;
  gap: 20px !important;
  border: 1px solid rgba(27, 127, 157, 0.09) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(249, 253, 251, 0.96), rgba(232, 244, 249, 0.82)) !important;
  box-shadow: 0 13px 30px rgba(7, 70, 78, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  text-align: left !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 170px !important;
  height: 76px !important;
  padding-right: 58px !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-line {
  position: absolute !important;
  top: 50% !important;
  right: 56px !important;
  left: 6px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(30, 139, 157, 0.22), rgba(30, 139, 157, 0.08)) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline > i {
  z-index: 1 !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border: 3px solid #edf8f6 !important;
  border-radius: 50% !important;
  background: #2a9bb0 !important;
  box-shadow: 0 0 0 1px rgba(22, 124, 142, 0.16) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-photo-slot {
  position: absolute !important;
  right: 0 !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border: 5px solid #ffffff !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #dff5ef, #dceaf5) !important;
  box-shadow: 0 10px 20px rgba(7, 70, 82, 0.12) !important;
  transform: rotate(4deg) !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-photo-slot b {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(22, 127, 145, 0.22) !important;
  border-radius: 50% !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy {
  display: grid !important;
  justify-items: start !important;
  gap: 4px !important;
  text-align: left !important;
}

html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > * {
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Both dates are rendered so responsive CSS can change length without re-rendering. */
html body #homeMemoryOfDay .today-memory-date-compact { display: none !important; }

@media (max-width: 760px) {
  html body .auth-card:not(.signup-mode):not(.verify-mode):not(.has-auth-message),
  html body .auth-card:not(.signup-mode):not(.verify-mode).has-auth-message,
  html body .auth-card:not(.signup-mode):not(.verify-mode),
  html body .auth-card.signup-mode,
  html body .auth-card.verify-mode {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-areas:
      "mascot brand"
      "form form"
      "message message"
      "legal legal" !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
  }

  html body .auth-card::before,
  html body .auth-card:not(.signup-mode):not(.verify-mode)::before {
    height: 126px !important;
  }

  html body .auth-card .auth-mappi,
  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-mappi,
  html body .auth-card.signup-mode .auth-mappi,
  html body .auth-card.verify-mode .auth-mappi {
    width: 92px !important;
    height: 92px !important;
    margin: 0 !important;
  }

  html body .auth-card .auth-brand,
  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-brand {
    align-self: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  /* The empty Today card already owns the primary creation action. */
  html body .map-stage.home-focus #homeDashboard.is-empty-home .home-action-card.primary {
    display: none !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home .home-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .app-shell .map-stage.home-focus .home-calm-status,
  html body main.app-shell section.map-stage.home-focus .home-calm-status {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .app-shell .map-stage.home-focus .home-calm-status .home-mappi-moment,
  html body main.app-shell section.map-stage.home-focus .home-calm-status .home-mappi-moment {
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
  }

  html body .app-shell .map-stage.home-focus .home-calm-status .home-sync-confidence,
  html body main.app-shell section.map-stage.home-focus .home-calm-status .home-sync-confidence,
  html body .app-shell .map-stage.home-focus .home-calm-status-divider,
  html body main.app-shell section.map-stage.home-focus .home-calm-status-divider {
    flex: 0 0 auto !important;
  }

  html body .app-shell .map-stage.home-focus .home-action-card.primary,
  html body main.app-shell section.map-stage.home-focus .home-action-card.primary {
    grid-template-columns: 34px auto !important;
    grid-template-rows: 1fr !important;
    min-height: 60px !important;
    padding: 9px 14px !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 10px !important;
  }

  html body .app-shell .map-stage.home-focus .home-action-card.primary > .home-action-icon,
  html body main.app-shell section.map-stage.home-focus .home-action-card.primary > .home-action-icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  html body .app-shell .map-stage.home-focus .home-action-card.primary .home-action-copy,
  html body main.app-shell section.map-stage.home-focus .home-action-card.primary .home-action-copy {
    display: block !important;
    width: auto !important;
    max-width: none !important;
  }

  html body .app-shell .map-stage.home-focus .home-action-card.primary .home-action-copy > strong,
  html body main.app-shell section.map-stage.home-focus .home-action-card.primary .home-action-copy > strong {
    width: auto !important;
    font-size: 0.88rem !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home .home-action-section {
    margin: 0 auto !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home {
    gap: 22px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-memory-card.is-empty-today .empty-memory-invite {
    min-height: 210px !important;
    padding: 18px 15px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeMemoryOfDay .today-empty-preview-card .today-memory-title {
    max-width: 16ch !important;
    font-size: clamp(1.4rem, 7vw, 1.82rem) !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-feature-card.is-empty {
    min-height: 146px !important;
    padding: 15px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-body {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty.premium-empty-preview {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    min-height: 152px !important;
    padding: 15px !important;
    gap: 10px 13px !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-starter-book {
    width: 92px !important;
    height: 72px !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-page {
    padding: 5px !important;
    gap: 4px !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-tabs {
    right: -6px !important;
    bottom: 7px !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-book-tabs em {
    padding: 2px 4px !important;
    font-size: 0.36rem !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-copy > strong {
    font-size: 0.92rem !important;
    line-height: 1.18 !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-copy > small {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.67rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 132px !important;
    padding: 15px !important;
    gap: 13px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
    width: 92px !important;
    height: 65px !important;
    padding-right: 40px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-line {
    right: 38px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-photo-slot {
    width: 44px !important;
    height: 44px !important;
    border-width: 4px !important;
    border-radius: 12px !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > strong {
    font-size: 0.92rem !important;
    line-height: 1.18 !important;
  }

  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > em {
    font-size: 0.68rem !important;
    line-height: 1.34 !important;
  }

  /* A phone-sized Today caption keeps the photo visible. */
  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-copy,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-copy {
    bottom: 10px !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "title action" "meta action" !important;
    align-items: center !important;
    justify-items: start !important;
    width: min(330px, calc(100% - 24px)) !important;
    max-width: min(330px, calc(100% - 24px)) !important;
    min-height: 0 !important;
    padding: 7px 8px 7px 11px !important;
    gap: 2px 8px !important;
    border-radius: 15px !important;
    text-align: left !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-title,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-title {
    justify-self: start !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(0.94rem, 4.3vw, 1.08rem) !important;
    text-align: left !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-meta-row,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-meta-row {
    justify-self: start !important;
    width: 100% !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-meta-row > small,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-meta-row > small {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    font-size: 0.61rem !important;
    text-align: left !important;
  }

  html body #homeMemoryOfDay .today-memory-place-date {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body #homeMemoryOfDay .today-memory-place-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #homeMemoryOfDay .today-memory-date-full { display: none !important; }
  html body #homeMemoryOfDay .today-memory-date-compact { display: inline !important; flex: 0 0 auto !important; }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-mood-chip,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-mood-chip {
    align-self: flex-start !important;
    min-height: 17px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 0.54rem !important;
    line-height: 1 !important;
  }

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-note,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-note {
    display: none !important;
  }

  html body .app-shell .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 {
    grid-area: action !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    font-size: 0 !important;
    justify-self: end !important;
  }

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

  html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button > span,
  html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-relive-button > span {
    font-size: 1.08rem !important;
    line-height: 1 !important;
  }

  html body .app-shell .memory-editor .editor-header,
  html body main.app-shell .memory-editor .editor-header {
    min-height: 78px !important;
    padding: 10px 14px 8px !important;
  }

  html body .app-shell .memory-editor .editor-header p,
  html body main.app-shell .memory-editor .editor-header p {
    margin-bottom: 2px !important;
    font-size: 0.61rem !important;
  }

  html body .app-shell .memory-editor .editor-header h2,
  html body main.app-shell .memory-editor .editor-header h2 {
    font-size: clamp(1.24rem, 6vw, 1.42rem) !important;
    line-height: 1.04 !important;
  }

  html body .app-shell .memory-editor .editor-promise,
  html body main.app-shell .memory-editor .editor-promise {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 350px) {
  html body .auth-card:not(.signup-mode):not(.verify-mode):not(.has-auth-message),
  html body .auth-card:not(.signup-mode):not(.verify-mode).has-auth-message,
  html body .auth-card:not(.signup-mode):not(.verify-mode),
  html body .auth-card.signup-mode,
  html body .auth-card.verify-mode {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }

  html body .auth-card .auth-mappi,
  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-mappi,
  html body .auth-card.signup-mode .auth-mappi,
  html body .auth-card.verify-mode .auth-mappi {
    width: 80px !important;
    height: 80px !important;
  }

  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-empty-copy > small,
  html body .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > em {
    -webkit-line-clamp: 2 !important;
  }
}

/* Final mobile layer ownership: navigation and blocking panels never share a lane. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.map-focus .map-empty-state,
  html body .app-shell section.map-stage.map-focus .map-empty-state {
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 116px) !important;
  }

  html body main.app-shell .notification-hub {
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - env(safe-area-inset-bottom) - 164px) !important;
  }

  html body main.app-shell .notification-list {
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - env(safe-area-inset-bottom) - 290px) !important;
  }
}

html body:has(#categoryMenu.open) .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.photo-lightbox-open .app-shell .map-empty-state,
html body.first-time-onboarding-open .app-shell .map-empty-state,
html body:has(dialog[open]) .app-shell .map-empty-state,
html body:has(.memory-bottom-sheet.open) .app-shell .map-empty-state,
html body:has(.memory-editor.open) .app-shell .map-empty-state,
html body:has(.notification-hub.open) .app-shell .map-empty-state,
html body:has(#categoryMenu.open) .app-shell .map-empty-state,
html body:has(.account-menu.open) .app-shell .map-empty-state,
html body:has(.pin-search-panel.open) .app-shell .map-empty-state,
html body:has(.directions-panel.open) .app-shell .map-empty-state,
html body:has(.map-wake-overlay.is-visible) .app-shell .map-empty-state {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .map-stage.home-focus #homeDashboard #homeJourney .life-chapter-starter-book {
    transform: none !important;
  }
}