/* Shared full-screen plant photo feed: top 1/4, photo 2/4, caption 1/4. */
html.photo-viewer-active, body.photo-viewer-active { overscroll-behavior: none; }
#photoDlg.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0b1710;
  color: #fff;
  box-shadow: none;
}
#photoDlg.photo-viewer::backdrop { background: rgba(3, 12, 7, .97); backdrop-filter: blur(3px); }
#photoDlg.photo-viewer[open] { animation: viewer-open .22s ease-out both; }
@keyframes viewer-open { from { opacity: .72; } to { opacity: 1; } }
#photoDlg .viewer-feed {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}
#photoDlg .viewer-feed::-webkit-scrollbar { display: none; }
#photoDlg .viewer-plant {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: radial-gradient(ellipse at 50% 42%, #1a3022, #0b1710 70%);
  box-sizing: border-box;
}
#photoDlg .viewer-top-space { position: relative; min-height: 0; }
#photoDlg .viewer-counter {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  right: max(18px, env(safe-area-inset-right));
  z-index: 3;
  display: grid;
  min-width: 56px;
  min-height: 32px;
  place-items: center;
  padding: 4px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  background: rgba(13, 28, 19, .8);
  color: #fff;
  font: 600 13px/1.2 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}
#photoDlg .photo-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: max(14px, env(safe-area-inset-left));
  z-index: 10;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(13, 28, 19, .82);
  color: #fff;
  font: 300 29px/1 system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
#photoDlg .viewer-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#photoDlg .viewer-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
#photoDlg .viewer-track::-webkit-scrollbar { display: none; }
#photoDlg .viewer-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
#photoDlg .viewer-slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
#photoDlg .viewer-no-image { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(255,255,255,.55); font-size: clamp(34px, 8vw, 72px); }
#photoDlg .viewer-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: rgba(12, 25, 17, .64);
  color: #fff;
  font: 300 34px/1 system-ui, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(6px);
}
#photoDlg .viewer-arrow.prev { left: max(12px, env(safe-area-inset-left)); }
#photoDlg .viewer-arrow.next { right: max(12px, env(safe-area-inset-right)); }
#photoDlg .viewer-caption {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  margin: 8px clamp(10px, 3vw, 34px) calc(8px + env(safe-area-inset-bottom));
  padding: clamp(10px, 2vw, 18px) clamp(13px, 3vw, 26px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(245, 249, 244, .97);
  color: #1f3327;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  font-family: system-ui, sans-serif;
}
#photoDlg .viewer-caption-title { flex: 0 0 auto; overflow: hidden; color: #183a28; font-size: clamp(15px, 2.4vw, 20px); font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#photoDlg .viewer-caption-subtitle { flex: 0 0 auto; overflow: hidden; color: #577060; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
#photoDlg .viewer-caption-meta { flex: 0 0 auto; overflow: hidden; color: #44614e; font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
#photoDlg .viewer-caption-description { flex: 1 1 auto; min-height: 0; overflow: hidden; display: -webkit-box; color: #2e4034; font-size: clamp(12px, 1.8vw, 14px); line-height: 1.42; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#photoDlg .viewer-expand { align-self: flex-start; flex: 0 0 auto; min-height: 28px; padding: 3px 10px; border: 1px solid #c5d7c8; border-radius: 99px; background: #e9f2e8; color: #235b3b; font: 650 11.5px/1.2 system-ui, sans-serif; cursor: pointer; }
#photoDlg .viewer-caption.expanded .viewer-caption-description { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-line-clamp: unset; }
#photoDlg .viewer-scroll-hint {
  position: absolute;
  z-index: 5;
  bottom: calc(25dvh + env(safe-area-inset-bottom) + 7px);
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 99px;
  background: rgba(12, 25, 17, .78);
  color: #fff;
  font: 600 12px/1.2 system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: viewer-hint 2.8s ease-in-out both;
  backdrop-filter: blur(8px);
}
#photoDlg .viewer-scroll-hint.finished { opacity: 0; visibility: hidden; }
@keyframes viewer-hint { 0% { opacity: 0; transform: translate(-50%, 8px); } 16% { opacity: 1; transform: translate(-50%, 0); } 54% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: .9; transform: translate(-50%, 5px); } 100% { opacity: 0; transform: translate(-50%, -3px); } }
@media (max-width: 600px) {
  #photoDlg .viewer-caption { margin-right: 8px; margin-left: 8px; padding: 9px 11px calc(8px + env(safe-area-inset-bottom)); border-radius: 14px; }
  #photoDlg .viewer-caption-meta { font-size: 10.5px; }
  #photoDlg .viewer-arrow { width: 38px; height: 38px; font-size: 29px; }
  #photoDlg .photo-close { width: 38px; height: 38px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #photoDlg.photo-viewer[open], #photoDlg .viewer-scroll-hint { animation: none; }
}