/* Home keeps its centered section order when rotated; the surrounding
   controls adapt to the shorter viewport without stretching the content.
   No memory data, photo focal points or orientation permissions change. */
/* An empty archive needs a compact invitation, not a desktop-size card
   cropped by the phone's short reading area. Keep the toolbar above it and
   let expanded recovery / larger text grow naturally in the same scroller. */
html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(#memoryList > .memory-lane-empty) {
  scrollbar-gutter: stable both-edges !important;
}
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList:has(> .memory-lane-empty) {
    min-height: calc(var(--mymappi-layout-height, 100dvh) - 70px - env(safe-area-inset-top) - var(--landscape-dock-clearance) - 16px) !important;
    align-content: center !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList > .memory-lane-empty {
    box-sizing: border-box !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    height: max-content !important;
    min-height: 0 !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    padding: 12px 16px !important;
    gap: 8px 16px !important;
    text-align: left !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-art {
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
    justify-self: center !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-copy {
    height: max-content !important;
    min-height: 0 !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 5px !important;
    text-align: left !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-copy > strong {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-copy > p {
    max-width: none !important;
    margin: 0 !important;
    font-size: .875rem !important;
    line-height: 1.4 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* Intrinsic rows prevent the portrait grid's spare height stretching the
       controls during a native rotation. Larger text can still add lines. */
    grid-auto-rows: max-content !important;
    height: max-content !important;
    min-height: 0 !important;
    align-content: start !important;
    align-self: start !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 5px !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-actions > button {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    align-self: start !important;
    padding: 8px !important;
    overflow-wrap: anywhere;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-recovery {
    padding-top: 0 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-recovery > summary {
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 12px 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}
/* Small landscape phones need two action rows, not three squeezed columns. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 640px) {
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-empty-actions > .primary-button {
    grid-column: 1 / -1 !important;
  }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse),
       (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    position: fixed !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(960px, calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right)))) !important;
    max-width: 960px !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    translate: none !important;
    transform: translateX(-50%) !important;
  }

  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard {
    width: min(980px, calc(100% - 2 * max(24px, env(safe-area-inset-left), env(safe-area-inset-right)))) !important;
    max-width: 980px !important;
    margin-inline: auto !important;
  }

}
/* Short viewports need less chrome, not smaller tap targets. The same compact
   layout must survive attaching a trackpad or using a narrow desktop window;
   screen geometry, not pointer detection, owns this breakpoint. */
@media (orientation: landscape) and (max-height: 520px) {
  html body, html body main.app-shell, html body main.app-shell section.map-stage {
    --bottom-nav-height: 60px;
  }

  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    box-sizing: border-box !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    border-radius: 24px !important;
  }
  html body main.app-shell .bottom-nav .bottom-nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    height: auto !important;
    gap: 8px !important;
    padding: 6px !important;
    font-size: .75rem !important;
    border-radius: 17px !important;
  }
  html body main.app-shell .bottom-nav .add-memory-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    transform: none !important;
  }
  html body main.app-shell .bottom-nav .add-memory-button svg {
    width: 24px !important;
    height: 24px !important;
  }
  html body main.app-shell section.map-stage .bottom-nav #accountMenuButton .account-nav-status {
    top: 4px !important;
    right: 8px !important;
    left: auto !important;
  }

  html body main.app-shell section.map-stage.home-focus {
    padding-top: calc(70px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    scroll-padding-block: 70px 80px;
  }
  html body main.app-shell section.map-stage.home-focus > .hero-copy {
    margin-top: 0 !important;
  }

}
/* On the shortest sideways phones, put the secondary map controls beside
   their switches instead of stacking down into the navigation gadget. */
@media (orientation: landscape) and (max-height: 360px) and (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.map-focus #mappiIntelligenceButton {
    top: calc(var(--mymappi-explore-header-top) + var(--mymappi-explore-instrument-height) + var(--mymappi-explore-stack-gap)) !important;
    right: calc(var(--mymappi-explore-right-edge) + var(--mymappi-explore-instrument-width) + 8px) !important;
    min-height: var(--mymappi-explore-instrument-height) !important;
  }
  html body main.app-shell section.map-stage.map-focus #mapScopeCaption {
    top: calc(var(--mymappi-explore-header-top) + var(--mymappi-explore-instrument-height) + var(--mymappi-explore-stack-gap)) !important;
    left: calc(var(--mymappi-explore-left-edge) + var(--mymappi-explore-instrument-width) + 8px) !important;
    min-height: var(--mymappi-explore-instrument-height) !important;
  }
}

/* Keep the fixed dock inside Home's full-height scrolling ancestor. iPhone
   WKWebView can clip its composited layer when it sits below that ancestor.
   Reserve reading clearance with scroll padding/content padding instead of
   shortening the stage. Map/capsule/editor geometry remains independent. */
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage {
    --landscape-dock-clearance: calc(76px + max(8px, env(safe-area-inset-bottom)));
    --landscape-content-gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  html body main.app-shell:has(> section.map-stage.home-focus) {
    background: #fbfaf6 !important;
  }
  html body main.app-shell section.map-stage.memories-focus {
    background: #edf5fa !important;
  }
  html body main.app-shell section.map-stage.memories-focus::before,
  html body main.app-shell section.map-stage.memories-focus::after {
    display: none !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) {
    height: var(--mymappi-layout-height, 100dvh) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: var(--landscape-dock-clearance) !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) {
    padding-bottom: var(--landscape-dock-clearance) !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .memories-focus) #appTopbar.topbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin-inline: 0 !important;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .memories-focus) #appTopbar.topbar > #brandHomeButton {
    transform: translateX(calc((max(12px, env(safe-area-inset-right)) - max(12px, env(safe-area-inset-left))) / 2)) !important;
  }

  /* Use the wide screen, with each section centered on one shared rail.
     Keep summary above memory/shelves and all heights intrinsic. */
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: calc(70px + env(safe-area-inset-top)) !important;
    padding-inline: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    flex: 0 0 auto !important;
    width: min(960px, calc(100% - 2 * var(--landscape-content-gutter))) !important;
    max-width: 960px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 10px !important;
    text-align: center !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 auto !important;
    padding: 6px 14px !important;
    min-height: 0 !important;
    font-size: 1.375rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > .home-hero-tagline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-calm-status {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) :is(.home-calm-status, .home-sync-confidence) {
    margin-block: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: min(960px, calc(100% - 2 * var(--landscape-content-gutter))) !important;
    max-width: 960px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 12px auto 0 !important;
    padding: 0 0 var(--landscape-dock-clearance) !important;
    gap: 22px !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-card {
    grid-template-columns: minmax(160px, .72fr) minmax(0, 1.6fr) !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-visual {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    aspect-ratio: auto !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-visual.has-photo > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !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-visual.has-photo {
    height: auto !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-card .home-living-copy {
    padding: 10px 22px !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    row-gap: 5px !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-card .home-living-copy h2 {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeMemoryOfDay .home-living-card .home-living-meta {
    margin-block: 0 !important;
    padding-block: 0 !important;
  }


  html body main.app-shell section.map-stage.memories-focus #memoryLanePage.memory-database-page.side-panel {
    top: calc(70px + env(safe-area-inset-top)) !important;
    bottom: var(--landscape-dock-clearance) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 var(--landscape-content-gutter) 16px !important;
    scroll-padding-block: 8px 16px !important;
    overflow-y: auto !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage .memory-lane-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 58px 0 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage .memory-hub-heading {
    margin: 0 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #closeMemoriesButton {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage .memory-hub-title h2 {
    font-size: 1.375rem !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage .memory-lane-view-tabs {
    margin-bottom: 8px !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-cover {
    aspect-ratio: 2.8 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-card .memory-lane-flashcard-copy {
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 6px !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-card .memory-lane-flashcard-main {
    grid-template-rows: auto 1fr auto !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-card .memory-lane-action-dock {
    padding: 0 14px 12px !important;
  }
}

/* Browse views and filters share one row on a short, wide phone. Keep the
   archive tools in flow and give the actual memories room below the controls.
   Empty accounts retain their independently centered first-memory invitation. */
@media (orientation: landscape) and (min-width: 740px) and (max-height: 520px) {
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) {
    display: grid !important;
    grid-template-columns: minmax(0, .48fr) minmax(0, .52fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    gap: 8px 14px !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) > :is(.memory-lane-toolbar, .drawer-view) {
    grid-column: 1 / -1 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) > :is(.memory-lane-toolbar, .memory-lane-view-tabs, .memory-lane-browse) {
    margin-block: 0 !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) .memory-hub-title p { display: none !important; }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) .memory-lane-browse { align-self: center !important; }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) .memory-lane-filter-chips {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-block: 3px !important;
    scroll-padding-inline: 4px;
    scrollbar-width: thin;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage:has(.memory-lane-overview) .memory-lane-filter-chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-overview {
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }
  html body main.app-shell section.map-stage.memories-focus #memoryLanePage #memoryList .memory-lane-overview-footer { padding: 0 !important; }
}

/* Keep the sideways overview compact without reducing action hit targets. */
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) {
    padding-top: calc(78px + env(safe-area-inset-top)) !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) #homeJourney .life-chapter-cover {
    aspect-ratio: 2.8 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy {
    gap: 4px 18px !important;
    grid-template-rows: auto auto auto !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > h2 {
    font-size: clamp(1.125rem, 2.25vw, 1.375rem) !important;
    padding: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > .home-hero-tagline {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: .8125rem !important;
    line-height: 1.35 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse {
    min-height: 0 !important;
    padding: 8px 12px !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse > .home-stat {
    min-height: 0 !important;
    padding-block: 0 !important;
    gap: 2px !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse strong {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse :is(small, .home-stat-label) {
    font-size: .625rem !important;
    line-height: 1.2 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) {
    margin-top: 16px !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) {
    --bottom-nav-height: max(60px, 3.75rem);
    --landscape-dock-clearance: calc(max(76px, 4.75rem) + max(8px, env(safe-area-inset-bottom)));
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    height: max(60px, 3.75rem) !important;
    min-height: max(60px, 3.75rem) !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav .bottom-nav-item {
    min-height: max(44px, 2.75rem) !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    row-gap: 2px !important;
  }
}

/* On shorter phones keep the first Home action clear of the persistent dock.
   This trims only section spacing, never content or touch-target size. */
@media (orientation: landscape) and (max-height: 400px) {
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) {
    margin-top: 8px !important;
  }
}

/* Landscape finish: typography carries the introduction; the statistics are
   the single raised surface. Keep all content and backup status readable. */
@media (orientation: landscape) {
  /* The wordmark is a graphic built from text inside fixed header chrome;
     cap that artwork only, not the user's content or navigation labels. */
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) #appTopbar.topbar #brandHomeButton h1.mymappi-wordmark {
    font-size: min(1.48rem, 3.2vw, 24px) !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > :is(h2, .home-hero-tagline),
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-calm-status {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-calm-status {
    padding: 2px 8px !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse {
    box-shadow: 0 6px 20px #00243f08, inset 0 1px 0 #ffffffb3 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse .home-stat-label {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    border-color: #d2f4ed24 !important;
    box-shadow: 0 4px 12px #00243f14, inset 0 1px 0 #ffffff0d !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav .bottom-nav-item.active {
    background: var(--mymappi-color-mint) !important;
    color: #00243f !important;
    border-color: rgba(181, 246, 222, .6) !important;
    box-shadow: none !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav #addMemoryButton.add-memory-button {
    box-shadow: inset 0 1px 0 #ffffff14 !important;
  }
}

/* Tablets have room for a relaxed version of the same two-column summary.
   Use intrinsic rows so larger text grows instead of being clipped. */
@media (orientation: landscape) and (min-height: 521px) and (min-width: 900px) {
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) #appTopbar.topbar {
    top: max(10px, calc(env(safe-area-inset-top) + 8px)) !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) {
    --landscape-content-gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right));
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: calc(104px + env(safe-area-inset-top)) !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    justify-items: center !important;
    flex: 0 0 auto !important;
    width: min(980px, calc(100% - 2 * var(--landscape-content-gutter))) !important;
    max-width: 980px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 6px 32px !important;
    text-align: center !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > h2 {
    grid-area: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) > .hero-copy > .home-hero-tagline {
    grid-area: 2 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-calm-status {
    grid-area: 3 / 1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard.home-dashboard:not(.is-empty-home)) .home-memory-pulse {
    grid-area: 1 / 2 / 4 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 18px 24px !important;
    margin: 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) {
    flex: 0 0 auto !important;
    width: min(980px, calc(100% - 2 * var(--landscape-content-gutter))) !important;
    max-width: 980px !important;
    margin: 28px auto 0 !important;
  }
  html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard:not(.is-empty-home) > #homeMemoryOfDay.memory-of-day-card {
    width: 100% !important;
    max-width: none !important;
  }
  html body main.app-shell section.map-stage:is(.home-focus, .map-focus, .memories-focus) > .bottom-nav {
    width: min(1040px, calc(100% - 2 * max(24px, env(safe-area-inset-left), env(safe-area-inset-right)))) !important;
    max-width: 1040px !important;
  }
}