/* Square contact sheet; original proportions in the full-image dialog. */
.salve-photo-header { margin: 0 0 18px; padding-top: 14px; color: #333; }
.salve-photo-heading { margin-bottom: 10px; font-size: 12px; font-weight: bold; }
.salve-photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.salve-photo { display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; background: #eee; flex: 0 0 calc((100% - 64px) / 9); scroll-snap-align: start; }
.salve-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.salve-photo:hover img { opacity: .85; }
.salve-photo:focus-visible,
.salve-photo-strip:focus-visible,
.salve-photo-dialog button:focus-visible { outline: 3px solid #16648b; outline-offset: 2px; }
/* Native modal semantics, Escape, inert background and explicit keyboard cycling. */
.salve-photo-dialog { box-sizing: border-box; width: min(1100px, calc(100vw - 24px)); max-width: none; height: min(900px, calc(100dvh - 24px)); max-height: none; padding: 16px; border: 0; background: #fafafa; color: #222; margin: auto; }
.salve-photo-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.salve-photo-dialog::backdrop { background: rgb(0 0 0 / .85); }
.salve-photo-dialog-bar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; font-size: 13px; }
.salve-photo-dialog button { min-height: 44px; padding: 8px 12px; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #222; cursor: pointer; font: inherit; }
.salve-photo-dialog figure { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.salve-photo-full { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.salve-photo-caption { flex: 0 0 auto; max-height: 20%; overflow: auto; text-align: center; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.salve-photo-caption:empty { display: none; }
.salve-photo-dialog-controls { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
body.salve-photo-modal-open { overflow: hidden; }
@media (max-width: 600px) {
    .salve-photo { flex-basis: 84px; }
    .salve-photo-dialog { padding: 10px; gap: 8px; }
    .salve-photo-dialog-controls { font-size: 12px; }
    .salve-photo-dialog-controls button { padding: 8px; }
}
@media print {
    .salve-photo-header, .salve-photo-dialog { display: none; }
}