/* A full-page photographic record, shared by archive and cover viewers. */
#lightbox[data-record-viewer], #viewer {
  --viewer-rule:1px solid var(--line);
  color:var(--ink); background:var(--paper); border:0; border-radius:0;
  padding:20px; gap:16px; font-family:var(--sans); letter-spacing:0;
  width:100%; height:100dvh; max-width:100%; max-height:100dvh;
  margin:0; overflow:hidden; box-sizing:border-box; animation:none;
}
#lightbox[data-record-viewer], #viewer[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:64px minmax(0,1fr) auto auto; }
#lightbox[data-record-viewer][hidden] { display:none; }
#viewer:not([open]) { display:none; }
#viewer::backdrop { background:var(--paper); }

#lightbox[data-record-viewer] .lightbox-bar, #viewer .viewer-bar {
  display:grid; grid-column:1/-1; grid-row:1; grid-template-columns:64px minmax(0,1fr) 112px 112px;
  align-items:stretch; min-width:0; min-height:64px; gap:0; padding:0;
  border:var(--rule); color:var(--ink); font:400 14px/1.5 var(--sans); letter-spacing:0;
}
.viewer-symbol { display:grid; place-items:center; min-width:0; color:var(--paper); background:var(--ink); }
.viewer-symbol svg { width:28px; height:28px; fill:currentColor; }
.viewer-heading { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; padding:8px 16px; }
.viewer-heading>small { font:400 11px/1.5 var(--sans); color:var(--ink-soft); }
#lightbox[data-record-viewer] #lightbox-title, #viewer #viewer-label { display:block; min-width:0; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:500 18px/1.4 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] #lightbox-count { display:flex; align-items:center; justify-content:center; padding:0 12px; margin:0; border-left:var(--viewer-rule); color:var(--ink-soft); font:400 13px/1.4 var(--mono); white-space:nowrap; }
#lightbox[data-record-viewer] #lightbox-close, #viewer #close-viewer { position:static; display:grid; grid-template-columns:1fr 40px; align-items:stretch; justify-content:normal; width:auto; min-width:0; min-height:0; padding:0; gap:0; border:0; border-left:var(--rule); border-radius:0; color:var(--ink); background:transparent; font:500 14px/1.5 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] #lightbox-close>span, #viewer #close-viewer>span { display:grid; place-items:center; min-width:0; font:inherit; white-space:nowrap; }
#lightbox[data-record-viewer] #lightbox-close .viewer-close-symbol, #viewer #close-viewer .viewer-close-symbol { border-left:var(--viewer-rule); font:400 26px/1 var(--sans); }
#viewer .viewer-bar { grid-template-columns:64px minmax(0,1fr) 112px; }

#lightbox[data-record-viewer] .lightbox-stage {
  grid-column:1; grid-row:2; align-self:stretch; width:100%; height:100%; min-width:0; min-height:0;
  padding:16px; border:var(--viewer-rule); background:var(--paper); box-sizing:border-box;
}
#lightbox[data-record-viewer] .lightbox-stage img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
#viewer #viewer-image { grid-column:1; grid-row:2; min-height:0; width:100%; height:100%; padding:16px; border:var(--viewer-rule); object-fit:contain; box-sizing:border-box; }
#lightbox[data-record-viewer] #lightbox-note, #viewer #viewer-caption { display:block; grid-column:1/-1; grid-row:3; justify-self:stretch; align-self:start; width:100%; max-width:none; min-height:0; margin:0; padding:0; color:var(--ink-soft); font:400 12px/1.6 var(--sans); letter-spacing:0; opacity:1; text-align:left; }
#lightbox[data-record-viewer] #lightbox-note:empty, #viewer #viewer-caption:empty { display:none; }
#lightbox[data-record-viewer] .lightbox-caption { max-height:15dvh; margin:0 0 10px; padding:0; color:var(--ink); font:400 14px/1.8 var(--sans); text-align:left; }
#lightbox[data-record-viewer] .lightbox-hint { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; opacity:1; }
#lightbox[data-record-viewer] .viewer-photo-context { color:var(--ink); }
#lightbox[data-record-viewer] .viewer-keyboard-hint { font-size:11px; }

#lightbox[data-record-viewer] .viewer-toolbar { display:flex; grid-column:1/-1; grid-row:4; justify-content:space-between; align-items:stretch; gap:0; min-width:0; min-height:50px; border:var(--rule); }
#lightbox[data-record-viewer] .viewer-navigation { display:flex; flex:0 0 auto; align-items:stretch; }
#lightbox[data-record-viewer] .lightbox-arrow { display:flex; position:static; align-items:center; justify-content:space-between; align-self:stretch; gap:0; width:120px; min-height:48px; padding:0; border:0; border-right:var(--rule); border-radius:0; color:var(--ink); background:transparent; font:500 14px/1.5 var(--sans); transform:none; opacity:1; }
#lightbox[data-record-viewer] .lightbox-arrow span { flex:1; padding:12px 10px; }
#lightbox[data-record-viewer] .lightbox-arrow svg { box-sizing:content-box; flex-shrink:0; width:20px; height:20px; padding:14px 10px; }
#lightbox[data-record-viewer] .lightbox-previous svg { border-right:var(--viewer-rule); }
#lightbox[data-record-viewer] .lightbox-next svg { border-left:var(--viewer-rule); }
#lightbox[data-record-viewer] .lightbox-arrow:disabled { visibility:visible; opacity:.35; cursor:default; pointer-events:none; }
#lightbox[data-record-viewer] .lightbox-actions { display:flex; position:relative; inset:auto; align-items:stretch; justify-content:flex-end; width:auto; min-width:0; min-height:0; gap:0; padding:0; border:0; background:transparent; backdrop-filter:none; box-shadow:none; overflow:visible; transform:none; }
#lightbox[data-record-viewer] .lightbox-secondary-actions { display:flex; position:static; align-items:stretch; gap:0; padding:0; border:0; background:var(--paper); box-shadow:none; }
#lightbox[data-record-viewer] .lightbox-secondary-actions[hidden] { display:none; }
#lightbox[data-record-viewer] .lightbox-actions button { display:flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; width:auto; min-width:48px; min-height:48px; padding:10px 16px; border:0; border-left:var(--viewer-rule); border-radius:0; color:var(--ink); background:transparent; font:500 13px/1.5 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] :is(#lightbox-zoom-out,#lightbox-zoom-in) { padding-inline:12px; font-size:22px; }
#lightbox[data-record-viewer] #lightbox-zoom-reset { min-width:64px; font:400 12px/1.5 var(--mono); }
#lightbox[data-record-viewer] #lightbox-more, #lightbox[data-record-viewer] .lightbox-gesture-hint { display:none; }
#lightbox[data-record-viewer] .lightbox-actions button[aria-expanded="true"] { color:var(--paper); background:var(--ink); }
#lightbox[data-record-viewer] button:hover:not(:disabled), #viewer #close-viewer:hover { color:var(--paper); background:var(--ink); }
#lightbox[data-record-viewer] button:focus-visible, #viewer button:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }

/* Capture data occupies a real column, without covering the photograph. */
#lightbox[data-record-viewer]:has(#lightbox-exif-panel:not([hidden])) { grid-template-columns:minmax(0,1fr) 300px; }
#lightbox[data-record-viewer] .lightbox-exif-panel { position:static; grid-column:2; grid-row:2; align-self:stretch; width:auto; height:auto; min-width:0; min-height:0; max-width:none; max-height:none; margin:0; padding:0 16px 16px; overflow:auto; color:var(--ink); background:var(--paper); border:var(--rule); box-shadow:none; }
#lightbox[data-record-viewer] .lightbox-exif-panel>p:first-child { position:sticky; top:0; margin:0; padding:16px 0; background:var(--paper); border-bottom:var(--rule); color:var(--ink); font:500 16px/1.5 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] .lightbox-exif-panel>div { grid-template-columns:86px minmax(0,1fr); gap:12px; padding:12px 0; border:0; border-bottom:var(--viewer-rule); font:400 13px/1.65 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] .lightbox-exif-panel span { color:var(--ink-soft); }
#lightbox[data-record-viewer] .lightbox-exif-panel b { color:var(--ink); font-weight:400; }
#lightbox[data-record-viewer] .lightbox-exif-panel .photo-description { margin:0; padding:16px 0; border-bottom:var(--viewer-rule); color:var(--ink); font:400 14px/1.8 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] .lightbox-exif-panel .photo-description>span { display:block; margin-bottom:8px; font:400 12px/1.5 var(--sans); color:var(--ink-soft); }
#lightbox[data-record-viewer] .lightbox-exif-panel .photo-series { margin:0; padding:16px 0 0; font:500 14px/1.7 var(--sans); letter-spacing:0; }
#lightbox[data-record-viewer] .photo-series a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
#lightbox[data-record-viewer] #lightbox-feedback { color:var(--ink); background:var(--paper); border:var(--rule); font:13px/1.6 var(--sans); }
#lightbox[data-record-viewer] #lightbox-feedback[data-state="loading"] { bottom:140px; }
#lightbox[data-record-viewer] #lightbox-feedback button { border-top:var(--viewer-rule); color:var(--ink); }

/* The same field treatment applies to right-click actions and status notices. */
:root[data-layout="records"] .photo-context-menu { padding:0; background:var(--paper); border:var(--rule); border-radius:0; box-shadow:none; backdrop-filter:none; font:400 13px/1.6 var(--sans); letter-spacing:0; }
:root[data-layout="records"] .photo-context-menu-head { padding:16px; }
:root[data-layout="records"] .photo-context-menu-head strong { font:500 16px/1.5 var(--sans); }
:root[data-layout="records"] .photo-context-menu-head small { color:var(--ink-soft); font:11px/1.5 var(--mono); }
:root[data-layout="records"] .photo-context-menu :is(button,a,[role="menuitem"]) { min-height:48px; padding:12px 16px; border-bottom:1px solid var(--line); font:500 13px/1.5 var(--sans); }
:root[data-layout="records"] .photo-context-menu :is(button,a,[role="menuitem"]):hover { background:var(--ink); color:var(--paper); }
:root[data-layout="records"] .site-notice { padding:14px 16px; color:var(--ink); background:var(--paper); border:var(--rule); box-shadow:none; font:13px/1.6 var(--sans); letter-spacing:0; }

@media(max-width:1000px) and (min-width:761px) {
  #lightbox[data-record-viewer] .lightbox-arrow { width:120px; }
  #lightbox[data-record-viewer] .lightbox-actions button { padding-inline:12px; }
  #lightbox[data-record-viewer]:has(#lightbox-exif-panel:not([hidden])) { grid-template-columns:minmax(0,1fr) 280px; }
}
@media(max-width:760px) {
  #lightbox[data-record-viewer], #viewer { padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); gap:12px; }
  #lightbox[data-record-viewer], #lightbox[data-record-viewer]:has(#lightbox-exif-panel:not([hidden])), #viewer[open] { grid-template-columns:minmax(0,1fr); grid-template-rows:58px minmax(0,1fr) auto auto; }
  #lightbox[data-record-viewer] .lightbox-bar, #viewer .viewer-bar { min-height:58px; grid-template-columns:minmax(0,1fr) 72px 72px; opacity:1; pointer-events:auto; }
  #lightbox[data-record-viewer] .viewer-symbol, #viewer .viewer-symbol { display:none; }
  .viewer-heading { padding:8px 10px; gap:2px; }
  .viewer-heading>small { font-size:10px; }
  #lightbox[data-record-viewer] #lightbox-title, #viewer #viewer-label { font-size:15px; }
  #lightbox[data-record-viewer] #lightbox-count { padding:0 6px; font-size:11px; }
  #lightbox[data-record-viewer] #lightbox-close, #viewer #close-viewer { grid-template-columns:1fr 24px; font-size:12px; }
  #lightbox[data-record-viewer] #lightbox-close .viewer-close-symbol, #viewer #close-viewer .viewer-close-symbol { font-size:22px; }
  #viewer .viewer-bar { grid-template-columns:minmax(0,1fr) 72px; }
  #lightbox[data-record-viewer] .lightbox-stage, #viewer #viewer-image { padding:8px; }
  #lightbox[data-record-viewer] #lightbox-note { font-size:11px; }
  #lightbox[data-record-viewer] .lightbox-caption { max-height:12dvh; font-size:13px; }
  #lightbox[data-record-viewer] .viewer-keyboard-hint { display:none; }
  #lightbox[data-record-viewer] .viewer-toolbar { display:grid; grid-template-columns:1fr; min-height:0; }
  #lightbox[data-record-viewer] .viewer-navigation { display:grid; grid-template-columns:1fr 1fr; border-bottom:var(--rule); }
  #lightbox[data-record-viewer] .lightbox-arrow { width:100%; min-width:0; min-height:44px; font-size:13px; }
  #lightbox[data-record-viewer] .lightbox-next { border-right:0; }
  #lightbox[data-record-viewer] .lightbox-arrow svg { width:18px; height:18px; padding:13px 14px; }
  #lightbox[data-record-viewer] .lightbox-arrow span { padding:10px; }
  #lightbox[data-record-viewer] .lightbox-actions { display:grid; grid-template-columns:minmax(0,1fr) 82px 92px; min-height:48px; }
  #lightbox[data-record-viewer] .lightbox-gesture-hint { display:flex; align-items:center; visibility:visible; padding:8px 10px; color:var(--ink-soft); font:11px/1.5 var(--sans); }
  #lightbox[data-record-viewer] #lightbox-more { display:flex; }
  #lightbox[data-record-viewer] .lightbox-actions button { min-width:0; width:100%; padding:8px; min-height:48px; font-size:12px; }
  #lightbox[data-record-viewer] .lightbox-secondary-actions { position:absolute; z-index:8; left:-1px; right:-1px; bottom:calc(100% + 57px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; border:var(--rule); background:var(--paper); }
  #lightbox[data-record-viewer] .lightbox-secondary-actions button { border:0; border-right:var(--viewer-rule); }
  #lightbox[data-record-viewer] #lightbox-copy-link { grid-column:1; border-top:var(--viewer-rule); }
  #lightbox[data-record-viewer] #lightbox-download { grid-column:2/-1; border-top:var(--viewer-rule); }
  #lightbox[data-record-viewer] :is(#lightbox-zoom-in,#lightbox-download) { border-right:0; }
  #lightbox[data-record-viewer] #lightbox-zoom-reset { min-width:0; }
  #lightbox[data-record-viewer] .lightbox-exif-panel { position:absolute; grid-column:auto; grid-row:auto; z-index:7; left:12px; right:12px; top:auto; bottom:calc(140px + env(safe-area-inset-bottom)); width:auto; max-height:calc(100dvh - 232px - env(safe-area-inset-top)); padding:0 16px 16px; }
  #lightbox[data-record-viewer] .lightbox-exif-panel>div { grid-template-columns:90px minmax(0,1fr); }
  /* A tap may hide the reading aids, while close and tools stay reachable. */
  #lightbox[data-record-viewer].chrome-hidden .lightbox-bar>span { visibility:visible; }
  #lightbox[data-record-viewer].chrome-hidden .viewer-heading, #lightbox[data-record-viewer].chrome-hidden #lightbox-count { visibility:hidden; }
  #lightbox[data-record-viewer].chrome-hidden .lightbox-arrow { visibility:visible; opacity:1; pointer-events:auto; }
  #lightbox[data-record-viewer].chrome-hidden .lightbox-actions { opacity:1; transform:none; pointer-events:auto; }
  #lightbox[data-record-viewer].chrome-hidden .lightbox-gesture-hint { visibility:visible; }
}
@media(max-height:520px) and (orientation:landscape) {
  #lightbox[data-record-viewer], #viewer { padding:8px; gap:8px; grid-template-rows:48px minmax(0,1fr) auto; }
  #lightbox[data-record-viewer] .lightbox-bar, #viewer .viewer-bar { min-height:48px; }
  #lightbox[data-record-viewer] #lightbox-note { display:none; }
  #lightbox[data-record-viewer] .viewer-toolbar { grid-row:3; display:flex; }
  #lightbox[data-record-viewer] .viewer-navigation { width:208px; border-bottom:0; }
  #lightbox[data-record-viewer] .lightbox-next { border-right:var(--rule); }
  #lightbox[data-record-viewer] .lightbox-actions { flex:1; }
  #lightbox[data-record-viewer] .lightbox-secondary-actions { bottom:calc(100% + 8px); }
  #lightbox[data-record-viewer] .lightbox-exif-panel { bottom:68px; max-height:calc(100dvh - 132px); }
}