/* Diary photo presentation is intentionally loaded last.
   It must not inherit the generic horizontal media grid. */
#diaryList .diary-media-fold {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 11px 0 9px !important;
}

#diaryList .diary-media-fold > .diary-media:not(.single) {
  position: relative !important;
  display: block !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #eeeeeb !important;
  box-shadow: 4px 4px 0 #e4e4e1, 8px 8px 0 #efefec, 0 5px 13px rgba(25,25,23,.06) !important;
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  isolation: isolate;
}

#diaryList .diary-media-fold > .diary-media:not(.single) > button[data-photo-index] {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 112px !important;
  min-height: 112px !important;
  max-height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #eeeeeb !important;
  scroll-snap-align: none !important;
  will-change: transform;
}

#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-active,
#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-behind,
#diaryList .diary-media-fold > .diary-media:not(.single):not(.is-ready) > button:first-of-type {
  display: block !important;
}

#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-active { z-index: 2 !important; }
#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-behind { z-index: 1 !important; transform: scale(.94); }
#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-dragging { transition: none !important; }
#diaryList .diary-media-fold > .diary-media:not(.single) > button.is-settling { transition: transform .2s cubic-bezier(.22,.75,.28,1) !important; }

#diaryList .diary-media-fold > .diary-media:not(.single) > button > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 112px !important;
  height: 112px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none;
}

#diaryList .diary-media-fold > .diary-media-toggle {
  flex: 0 0 auto !important;
  min-width: 30px !important;
  height: 32px !important;
  padding: 0 3px !important;
  border: 0 !important;
  background: transparent !important;
  color: #a4a4a0 !important;
  font: 400 9px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  letter-spacing: .08em !important;
}

/* Expanded mode: ordinary, compact square thumbnails. */
#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) {
  display: grid !important;
  grid-template-columns: repeat(3, 72px) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  width: 228px !important;
  min-width: 228px !important;
  max-width: 228px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 6px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  touch-action: auto !important;
}

#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) > button[data-photo-index] {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  transform: none !important;
  border-radius: 9px !important;
}

#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) > button > img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 9px !important;
}

#diaryList .diary-media.is-expanded .diary-media-count { display: none !important; }