/* One dialog and control layout for story and gallery photographs. */
#photo-dialog.photo-viewer { width:min(1120px,calc(100vw - 32px)); max-width:none; height:min(94dvh,1000px); max-height:94dvh; margin:auto; padding:0; border:0; border-radius:6px; background:var(--paper); color:var(--ink); overflow:hidden; box-shadow:0 20px 80px #10251f55; }
#photo-dialog.photo-viewer[open] { display:grid; grid-template-rows:minmax(120px,1fr) auto auto; }
#photo-dialog::backdrop { background:#132e28ed; }
.viewer-open { overflow:hidden; }
.photo-viewport { position:relative; display:flex; overflow:auto; min-height:0; padding:12px; background:#e8e4d9; overscroll-behavior:contain; }
.photo-viewport img { display:block; flex:none; margin:auto; max-width:none; max-height:none; object-fit:contain; }
#photo-status { position:absolute; left:16px; right:16px; top:16px; font-size:17px; background:var(--paper); }
#photo-status:empty { display:none; }
.photo-copy { padding:14px 22px 8px; max-height:29dvh; overflow:auto; overscroll-behavior:contain; }
#photo-title { font:26px/1.2 var(--serif); margin:0 0 8px; }
#photo-caption { font-size:17px; line-height:1.65; margin:0; }
.larger-text #photo-caption { font-size:21px; }
.photo-copy .photo-credit { margin:0; }
.photo-copy .photo-credit summary { font-size:15px; }
.photo-copy .photo-credit p { font-size:16px; }
#photo-credit:empty,#photo-share-status:empty { display:none; }
#photo-sources a { display:flex; align-items:center; min-height:44px; font-size:16px; }
.photo-links { display:flex; align-items:center; flex-wrap:wrap; gap:4px 20px; }
.photo-links :is(a,button) { display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
.photo-links button { border:0; padding:0; background:transparent; color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.photo-toolbar { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:7px 12px; padding-bottom:max(7px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); }
.photo-toolbar button { min-height:44px; min-width:44px; padding:8px 12px; border:1px solid #a6b29f; border-radius:4px; background:transparent; color:var(--green); font:16px var(--sans); }
.photo-toolbar button:hover { background:#e8eddf; }
.photo-toolbar button:disabled { opacity:.45; cursor:default; }
.photo-step { display:flex; align-items:center; gap:2px; min-width:0; }
.photo-step button { font-size:22px; line-height:1; padding:7px; }
#photo-position { font:14px var(--sans); font-variant-numeric:tabular-nums; min-width:50px; text-align:center; }
#photo-close { background:var(--green); color:var(--paper); border-color:var(--green); }
#photo-close:hover { background:#35584b; }
#photo-zoom-controls { position:absolute; bottom:calc(100% + 6px); right:10px; display:flex; align-items:center; gap:6px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--paper); box-shadow:0 3px 18px #253e3426; }
#photo-zoom-level { font:15px var(--sans); min-width:46px; text-align:center; }
@media (max-width:560px) {
  #photo-dialog.photo-viewer { width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .photo-copy { padding:12px 16px 4px; max-height:30dvh; }
  #photo-title { font-size:24px; }
  .photo-toolbar { padding:6px; padding-bottom:max(6px,env(safe-area-inset-bottom)); gap:4px; }
  .photo-toolbar button { padding-inline:10px; }
  #photo-position { min-width:48px; font-size:13px; }
}