/*
 * Memory Lane premium cards, v3.
 * Final override layer: load after the existing Memory Lane styles.
 */

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel {
  --memory-card-v3-ink: #123b43;
  --memory-card-v3-muted: #5c7478;
  --memory-card-v3-line: rgba(10, 74, 73, 0.12);
  --memory-card-v3-ivory: #fffdf7;
  --memory-card-v3-teal: #0a726d;
  --memory-card-v3-deep: #075361;
}

/*
 * Stable row sizing keeps every card action dock on the same baseline.
 * Cards must stay content-sized here: percentage heights inside this
 * auto-height grid can form a feedback loop in WebKit while its scrollport
 * changes, making every later card progressively taller.
 */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList .pin-database-list.memory-journal-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--memory-card-v3-line) !important;
  border-radius: 20px !important;
  color: var(--memory-card-v3-ink) !important;
  background: var(--memory-card-v3-ivory) !important;
  box-shadow: 0 14px 34px rgba(7, 52, 55, 0.08) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card:has(details.memory-lane-card-menu[open]) {
  z-index: 30 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-flashcard-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(152px, 1fr) auto !important;
  grid-template-areas:
    "media"
    "body"
    "actions" !important;
  align-content: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: inherit !important;
  background: var(--memory-card-v3-ivory) !important;
}

/* A single frame and focal-position rule is shared by desktop, iPad, and phone. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover {
  grid-area: media !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 19px 19px 0 0 !important;
  background: #e8f4ef !important;
  isolation: isolate !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-image,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover picture,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover picture > img,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: var(--memory-photo-position, var(--home-photo-position, var(--photo-position, 50% 38%))) !important;
  border-radius: inherit !important;
  background: #e8f4ef !important;
  transform: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card:hover .memory-lane-cover-image {
  transform: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel .memory-lane-compact-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--memory-photo-position, var(--home-photo-position, var(--photo-position, 50% 38%))) !important;
}

/* Branded, useful fallback for both today's markup and the planned Mappi variant. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background-color: #edf7f2 !important;
  background-image:
    url("./mymappi-mascot-wave-v4.png"),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.92), transparent 34%),
    linear-gradient(145deg, #fffaf0 0%, #eaf6ef 54%, #d9eee9 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center 46%, center, center !important;
  background-size: clamp(88px, 31%, 126px) auto, auto, auto !important;
  box-shadow: inset 0 0 0 1px rgba(10, 93, 88, 0.07) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) > span:not([class]),
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) > .memory-lane-no-photo-emoji {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(10, 91, 86, 0.1) !important;
  border-radius: 999px !important;
  color: #0a625e !important;
  background: rgba(255, 253, 247, 0.78) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  backdrop-filter: blur(8px) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) > strong,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) > .memory-lane-no-photo-label,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-cover-empty, .memory-lane-no-photo, .memory-lane-mappi-placeholder) > .memory-lane-no-photo-copy {
  position: absolute !important;
  right: 14px !important;
  bottom: 13px !important;
  left: 14px !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #34645f !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-no-photo-art, .memory-lane-mappi-mark) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: clamp(88px, 31%, 126px) !important;
  max-height: 62% !important;
  object-fit: contain !important;
  transform: translate(-50%, -54%) !important;
}

/* Keep the media surface quiet: compact glass badges, never more than two. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-meta {
  display: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-badges {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: calc(100% - 20px) !important;
  pointer-events: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-badges:empty,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-badges > :nth-child(n + 3) {
  display: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-badges > *,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-favorite-badge,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-photo-count,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-video-badge,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-video-badge,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-media-badge.is-video {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  color: #fffdf7 !important;
  background: rgba(6, 50, 53, 0.66) !important;
  box-shadow: 0 4px 12px rgba(3, 35, 38, 0.1) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-favorite-badge {
  width: 29px !important;
  min-width: 29px !important;
  padding: 0 !important;
  color: #fff7e9 !important;
  background: rgba(7, 63, 63, 0.68) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-photo-count {
  width: auto !important;
  min-width: 29px !important;
  padding: 0 9px !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-video-badge, .memory-video-badge, .memory-lane-media-badge.is-video) svg,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card :is(.memory-lane-video-badge, .memory-video-badge, .memory-lane-media-badge.is-video) [data-icon] {
  width: 13px !important;
  height: 13px !important;
  fill: currentColor !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover > :is(.memory-lane-video-badge, .memory-video-badge) {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover:has(> :is(.memory-lane-video-badge, .memory-video-badge)) .memory-lane-cover-badges > :nth-child(n + 2) {
  display: none !important;
}

/* Calm hierarchy: title, context, mood, and note remain easy to scan. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-flashcard-copy {
  grid-area: body !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  gap: 0 !important;
  min-width: 0 !important;
  min-height: 152px !important;
  padding: 16px 16px 12px !important;
  text-align: left !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-title {
  display: -webkit-box !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--memory-card-v3-ink) !important;
  font-size: 1.06rem !important;
  font-weight: 860 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.012em !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-meta {
  display: -webkit-box !important;
  width: 100% !important;
  margin: 5px 0 0 !important;
  overflow: hidden !important;
  color: var(--memory-card-v3-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 620 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-feeling {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: fit-content !important;
  min-height: 20px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #496b6f !important;
  background: transparent !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-feeling i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: var(--mood-color, var(--memory-accent, #168e72)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mood-color, var(--memory-accent, #168e72)) 13%, transparent) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-note-preview {
  display: -webkit-box !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  overflow: hidden !important;
  color: #5c7275 !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 520 !important;
  line-height: 1.52 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-saved-label.needs-backup,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-saved-label.is-pending,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-warning {
  margin-top: 8px !important;
  color: #855231 !important;
  font-size: 0.74rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

/* The action dock is a true final grid row, so it cannot drift with body copy. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-action-dock {
  grid-area: actions !important;
  align-self: end !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 16px 16px !important;
  border: 0 !important;
  background: transparent !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px !important;
  grid-template-areas:
    "support support"
    "relive menu" !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-card-actions > .memory-card-action.needs-location,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-card-actions > .memory-lane-card-warning {
  grid-area: support !important;
  justify-self: start !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-card-actions > .memory-card-action.needs-location {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: fit-content !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(172, 102, 53, 0.16) !important;
  border-radius: 11px !important;
  color: #855231 !important;
  background: #fff8ee !important;
  box-shadow: none !important;
  font-size: 0.74rem !important;
  font-weight: 740 !important;
  line-height: 1.25 !important;
}

/* Relive uses one centered flex group. No optical translations or press movement. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action {
  grid-area: relive !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--memory-card-v3-deep), #0b7b76 58%, #168b6d) !important;
  box-shadow: 0 8px 18px rgba(8, 92, 87, 0.16) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  transform: none !important;
  translate: none !important;
  touch-action: manipulation !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action:is(:hover, :active, :focus-visible) {
  transform: none !important;
  translate: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action > .memory-relive-content,
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action > .memory-relive-content > * {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action > .memory-relive-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 8px !important;
  color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action > .memory-relive-content > :is(svg, [data-icon]) {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card button.relive-memory-action > .memory-relive-content > .memory-action-label {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
}

/* Menu trigger and every menu row meet comfortable touch-target sizing. */
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card details.memory-lane-card-menu {
  grid-area: menu !important;
  position: relative !important;
  display: block !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card details.memory-lane-card-menu > summary {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--memory-card-v3-line) !important;
  border-radius: 13px !important;
  color: #315f63 !important;
  background: #f2f7f3 !important;
  box-shadow: none !important;
  list-style: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card details.memory-lane-card-menu > summary::-webkit-details-marker {
  display: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-menu-panel {
  right: 0 !important;
  bottom: calc(100% + 9px) !important;
  z-index: 90 !important;
  width: min(204px, calc(100vw - 32px)) !important;
  padding: 7px !important;
  border: 1px solid var(--memory-card-v3-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 253, 247, 0.98) !important;
  box-shadow: 0 18px 40px rgba(5, 42, 46, 0.18) !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-menu-panel > :is(.memory-card-action, .edit-memory-action, .delete-memory-action, [role="menuitem"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #28575c !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-card-menu-panel > .delete-memory-action {
  color: #9a4750 !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel .memory-lane-compact-relive {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  transform: none !important;
  translate: none !important;
}

html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel .memory-lane-compact-relive:is(:hover, :active, :focus-visible),
html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel .memory-lane-compact-relive > * {
  transform: none !important;
  translate: none !important;
}

@media (min-width: 1180px) {
  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList .pin-database-list.memory-journal-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/*
 * iPad portrait safeguard.
 * Older tablet rules use a compact 112px cover. Lock the real journal-card
 * markup back to the photo-first frame so Safari cannot leave a thumbnail in
 * the upper-left corner of an otherwise full-size card.
 */
@media (min-width: 720px) and (max-width: 1100px) {
  html body .map-stage.memories-focus .memory-database-page #memoryList .pin-database-list.memory-journal-list > article.memory-lane-card > .memory-lane-flashcard-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(152px, 1fr) auto !important;
    grid-template-areas:
      "media"
      "body"
      "actions" !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html body .map-stage.memories-focus .memory-database-page #memoryList .pin-database-list.memory-journal-list > article.memory-lane-card > .memory-lane-flashcard-main > .memory-lane-cover {
    grid-area: media !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    border-radius: 19px 19px 0 0 !important;
  }

  html body .map-stage.memories-focus .memory-database-page #memoryList .pin-database-list.memory-journal-list > article.memory-lane-card > .memory-lane-flashcard-main > .memory-lane-cover > :is(.memory-lane-cover-image, picture, video) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

@media (max-width: 719px) {
  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList .pin-database-list.memory-journal-list {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 14px !important;
  }

  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-flashcard-main {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-flashcard-copy {
    min-height: 0 !important;
    padding: 14px 14px 11px !important;
  }

  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-action-dock {
    padding: 0 14px 14px !important;
  }

  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card .memory-lane-cover-badges {
    top: 9px !important;
    right: 9px !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card,
  html body main.app-shell section.map-stage.memories-focus section.memory-database-page.side-panel #memoryList article.memory-lane-card * {
    transition: none !important;
    animation: none !important;
  }
}