/* Fisher screenshots: fit first; readable detail is available on request.
   Only this component is affected. No image data or page-wide zoom is changed. */
.shot { min-width: 0; }
.shot .shot-link { cursor: zoom-in; }
.shot .shot-frame { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.shot .shot-frame picture { display: block; width: 100%; max-width: 100%; }
.shot .shot-frame img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; object-fit: contain; border-radius: 13px; }
.shot .shot-hint { display: block; margin: 10px 0 0; font: 500 14px/1.5 'Hanken Grotesk', sans-serif; color: #5f5866; }
html[data-theme="dark"] .shot .shot-hint, .dark .shot .shot-hint { color: #c5bcb5; }
.shot figcaption .shot-tag { display: block; margin: 0 0 4px; }
.shot figcaption a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Native dialog supplies modal focus handling and an Escape dismissal. */
.mace-shot-viewer { box-sizing: border-box; width: calc(100% - 40px); max-width: 1440px; height: 88vh; height: 88dvh; max-height: 960px; padding: 0; margin: auto; border: 1px solid var(--line, #39303f); border-radius: 16px; background: var(--paper, #faf8f4); color: var(--ink, #241f2b); box-shadow: 0 24px 90px #0008; font-family: 'Hanken Grotesk', sans-serif; overflow: hidden; }
.mace-shot-viewer:not([open]) { display: none; }
.mace-shot-viewer[open] { display: flex; flex-direction: column; }
.mace-shot-viewer::backdrop { background: rgba(10, 8, 16, .82); }
.mace-shot-viewer .msv-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 2px; flex: none; }
.mace-shot-viewer .msv-title { color: inherit; font: 600 17px/1.3 'Hanken Grotesk', sans-serif; margin: 0; max-width: none; letter-spacing: 0; }
.mace-shot-viewer .msv-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 14px 10px; flex: none; }
.mace-shot-viewer button { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line, #bcb4c3); border-radius: 8px; background: var(--card, #fff); color: var(--ink, #241f2b); cursor: pointer; font: 600 14px/1 'Hanken Grotesk', sans-serif; }
.mace-shot-viewer button:hover { border-color: #3988ed; }
.mace-shot-viewer button:disabled { opacity: .5; cursor: default; }
.mace-shot-viewer .msv-zoom { min-width: 48px; text-align: center; font-size: 14px; }
.mace-shot-viewer .msv-guide { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.4; color: inherit; }
.mace-shot-viewer .msv-stage { min-height: 0; flex: 1 1 auto; overflow: auto; background: #f1f3f7; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; cursor: grab; scroll-behavior: auto; }
.mace-shot-viewer .msv-stage.is-dragging { cursor: grabbing; }
.mace-shot-viewer .msv-canvas { box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; width: max-content; min-width: 100%; min-height: 100%; padding: 16px; }
.mace-shot-viewer .msv-image { flex: none; display: block; max-width: none; height: auto; margin: 0; background: white; user-select: none; -webkit-user-drag: none; }
.mace-shot-viewer .msv-foot { flex: none; padding: 8px 14px; }
.mace-shot-viewer .msv-foot a { display: inline-flex; align-items: center; min-height: 44px; color: #235ec7; font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
html[data-theme="dark"] .mace-shot-viewer .msv-foot a { color: #9bb8ff; }
.mace-shot-viewer button:focus-visible, .mace-shot-viewer a:focus-visible, .mace-shot-viewer .msv-stage:focus-visible { outline: 3px solid #3988ed; outline-offset: -3px; }
@media (max-width: 640px) {
  .mace-shot-viewer { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100%; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .mace-shot-viewer .msv-heading { padding-left: 12px; padding-right: 12px; }
  .mace-shot-viewer .msv-controls { padding-left: 12px; padding-right: 12px; }
  .mace-shot-viewer .msv-title { font-size: 16px; }
}