/* Shared offline viewer: the toolbar never belongs to the image scroll area. */
:root {
  --viewer-top: max(8px, env(safe-area-inset-top, 0px));
  --viewer-right: max(8px, env(safe-area-inset-right, 0px));
  --viewer-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  --viewer-left: max(8px, env(safe-area-inset-left, 0px));
}
html.viewer-open { overflow: hidden; }
a[data-zoom] { scroll-margin-top: 110px; }
.fallback-close, .fallback-backdrop { display: none; }

/* One embedded image per slot. The background is a sibling link, never a wrapper. */
@media screen {
  html:has(:is(.photo, .zoomable):target),
  html:has(a[data-zoom]:target) { scroll-behavior: auto; }
  html:has(:is(.photo, .zoomable):target) { overflow: hidden; }
  :is(.photo, .zoomable):target {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    margin: 0 !important;
    padding: var(--viewer-top) var(--viewer-right) var(--viewer-bottom) var(--viewer-left);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  :is(.photo, .zoomable):target > .fallback-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 0;
    background: rgba(0, 0, 0, .94);
    cursor: zoom-out;
  }
  :is(.photo, .zoomable):target > .fallback-close {
    position: relative;
    z-index: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: inline-flex;
  }
  :is(.photo, .zoomable):target > a[data-zoom] {
    display: contents;
    cursor: default;
  }
  :is(.photo, .zoomable):target > a[data-zoom] > img {
    position: relative;
    z-index: 1;
    grid-row: 2;
    place-self: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0;
    filter: none;
  }
  :is(.photo, .zoomable):target > figcaption {
    position: relative;
    z-index: 1;
    grid-row: 3;
    display: block;
    margin: 0;
    padding: 8px;
    max-height: 20vh;
    overflow: auto;
    font-size: .85rem;
    background: #08131e;
    color: #f4f7fa;
  }
  :is(.photo, .zoomable):target .zoom-hint { display: none; }
}

#photo-viewer {
  position: fixed;
  inset: var(--viewer-top) var(--viewer-right) var(--viewer-bottom) var(--viewer-left);
  margin: auto;
  padding: 0;
  width: calc(100% - var(--viewer-left) - var(--viewer-right));
  /* Insets resolve against the visible containing block even when the page is zoomed. */
  height: auto;
  max-width: 1440px;
  max-height: 920px;
  overflow: hidden;
  border: 1px solid #4d6271;
  border-radius: 12px;
  color: var(--ink);
  background: #08131e;
}
#photo-viewer:not([open]) { display: none; }
#photo-viewer[open] { display: flex; flex-direction: column; }
#photo-viewer::backdrop { background: rgba(0, 0, 0, .92); }
.viewer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #08131e;
}
#viewer-title {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  min-width: 0;
  max-height: 3.2em;
  overflow: auto;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
}
#viewer-close { grid-row: 1; grid-column: 2; }
.viewer-actions { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#viewer-scale { min-width: 4.5em; color: #f4f7fa; font-size: .85rem; font-variant-numeric: tabular-nums; }
.fallback-close, .viewer-bar button {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #7591a6;
  border-radius: 8px;
  background: #172c3c;
  color: #fff;
  font-size: .88rem;
  line-height: 1.35;
  font-weight: 650;
  text-decoration: none;
  touch-action: manipulation;
}
.viewer-bar button:active, .fallback-close:active { background: #2d4b61; }
.viewer-bar button[aria-pressed="true"] { background: #c7e1ee; color: #07111b; }
.viewer-stage {
  overflow: auto;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 8px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
.viewer-stage img {
  transform: translate3d(0, var(--dismiss-y, 0px), 0);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}
.js #photo-viewer .viewer-stage:not(.native):not(.browser-zoomed) { touch-action: pan-x pinch-zoom; }
.viewer-stage.dismiss-moving { overflow: hidden; }
.viewer-stage.dismiss-moving img { will-change: transform; }
.viewer-stage.native { display: block; place-items: normal; }
.viewer-stage.native img {
  justify-self: start;
  align-self: start;
  width: var(--zoom-width, var(--natural-width));
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  cursor: grab;
}
.viewer-stage.dragging, .viewer-stage.dragging img { cursor: grabbing; }
.viewer-help {
  flex-shrink: 0;
  max-height: 20vh;
  overflow: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: .73rem;
  line-height: 1.45;
  color: var(--muted);
}
.viewer-touch-help { display: none; }
@media (pointer: coarse) {
  #viewer-image { -webkit-touch-callout: none; }
  .viewer-touch-help { display: inline; }
  .viewer-mouse-help { display: none; }
}
@media (max-width: 560px) {
  .viewer-bar { padding: 6px 8px; gap: 4px 8px; }
  #viewer-title { max-height: 3em; font-size: .78rem; }
  .viewer-actions {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  .viewer-actions button { padding: 8px; }
  #viewer-scale { grid-column: 1 / -1; font-size: .75rem; line-height: 1.2; }
  .viewer-help { padding: 6px 8px; margin: 0; }
}
@media (max-height: 480px) and (min-width: 600px) {
  .viewer-bar { grid-template-columns: minmax(0, 1fr) auto auto; padding: 6px 8px; gap: 8px; }
  #viewer-close { grid-column: 3; }
  .viewer-actions { grid-row: 1; grid-column: 2; flex-wrap: nowrap; }
  #viewer-title { max-height: 3em; font-size: .75rem; }
  #viewer-scale { min-width: 3.8em; font-size: .75rem; }
  .viewer-help { padding: 4px 8px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #photo-viewer, :is(.photo, .zoomable):target { animation: none; transition: none; }
  .viewer-stage { scroll-behavior: auto; }
}
@media print {
  #photo-viewer, .fallback-close, .fallback-backdrop { display: none !important; }
  html.viewer-open, body.viewer-open { overflow: visible !important; }
  body.viewer-open { position: static !important; width: auto !important; padding-right: 0 !important; }
}

/* Scope the dark viewer independently of a chapter's light palette. */
#photo-viewer{--ink:#f4f7fa;--muted:#c5d3dc;--line:#4d6271;color:#f4f7fa;height:calc(100% - var(--viewer-top) - var(--viewer-bottom))}
.zoomable > a[data-zoom]{display:block;position:relative;touch-action:manipulation}
.zoomable > a[data-zoom] > img{display:block;width:100%;height:auto;border-radius:1.6rem}
:is(.photo,.zoomable):target > a[data-zoom] > img{border-radius:0}
.zoom-hint{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:24px;background:#08131e;color:#f4f7fa;font-size:.8rem}
@media screen{:is(.photo,.zoomable):target{height:auto}}