/* Keep Explore's right-side controls on one intentional mobile rail. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.map-focus,
  html body .app-shell section.map-stage.map-focus {
    --mymappi-explore-right-rail: max(12px, env(safe-area-inset-right));
  }

  html body main.app-shell section.map-stage.map-focus header.topbar,
  html body .app-shell section.map-stage.map-focus header.topbar,
  html body main.app-shell section.map-stage.map-focus .map-depth-switch,
  html body .app-shell section.map-stage.map-focus .map-depth-switch,
  html body main.app-shell section.map-stage.map-focus .map-navigation-gadget,
  html body .app-shell section.map-stage.map-focus .map-navigation-gadget {
    right: var(--mymappi-explore-right-rail) !important;
  }

  /* Keep Mappi's location request beside 2D/3D with an 8px visual gap. */
  html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]),
  html body .app-shell section.map-stage.map-focus #locationBanner.location-banner:not([hidden]) {
    right: calc(var(--mymappi-explore-right-rail) + 96px) !important;
  }
}

@media (max-width: 350px) {
  html body main.app-shell section.map-stage.map-focus,
  html body .app-shell section.map-stage.map-focus {
    --mymappi-explore-right-rail: max(12px, env(safe-area-inset-right));
  }

  html body main.app-shell section.map-stage.map-focus header.topbar,
  html body .app-shell section.map-stage.map-focus header.topbar {
    grid-template-columns: 82px minmax(0, 1fr) 82px !important;
    justify-content: stretch !important;
  }

  html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left,
  html body .app-shell section.map-stage.map-focus header.topbar > .topbar-left,
  html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions,
  html body .app-shell section.map-stage.map-focus header.topbar > .topbar-actions {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }
}

/* Today's feeling belongs beneath the place and date, not beside them. */
html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-copy .today-memory-meta-row > small,
html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-copy .today-memory-meta-row > small {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}

html body .app-shell .map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-place-date,
html body main.app-shell section.map-stage.home-focus #homeMemoryOfDay .today-memory-card.has-today-memory .today-memory-place-date {
  display: block !important;
  max-width: 100% !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: center !important;
  margin-top: 1px !important;
}