/* Screenshots of operator pages inside a review (templates/review.php: review_figures).
   Loaded only by a review that has them. A figure is never wider than 390 px, the width the pages
   were captured at; two stand side by side where the column allows. A tall capture is folded.
   A desktop capture (.shot--wide) takes the whole row and scrolls sideways inside its own box at
   87.5rem, a size its text can be read at (tools/build-screenshot-images.cjs: WIDE_SIZES). */
.shots{display:grid;grid-template-columns:minmax(0,24.375rem);gap:var(--s-3);align-items:start;margin-top:var(--s-4)}
.shot{min-width:0;margin:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.shot__img{display:block;width:100%;height:auto;background:var(--surface-3)}
.shot__cap{padding:var(--s-3) var(--s-4);font-size:var(--fs-sm);line-height:1.45;color:var(--text-3);overflow-wrap:anywhere}
.shot__img+.shot__cap,.shot__fold[open]+.shot__cap{border-top:1px solid var(--border)}
.shot__sum{display:flex;align-items:center;gap:var(--s-3);min-height:3rem;padding:var(--s-2) var(--s-4);font-size:var(--fs-md);font-weight:700;line-height:1.35;color:var(--text);cursor:pointer;list-style:none}
.shot__sum::-webkit-details-marker{display:none}
.shot__sum::after{content:"";flex:none;width:0.5rem;height:0.5rem;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-0.125rem) rotate(45deg)}
.shot__fold[open]>.shot__sum{border-bottom:1px solid var(--border)}
.shot__fold[open]>.shot__sum::after{transform:translateY(0.125rem) rotate(-135deg)}
.shot__sum:hover{background:var(--surface-2)}
.shot__sum:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.shot__fold:not([open])+.shot__cap{padding-top:0}
@media (min-width:40rem){.shots{grid-template-columns:repeat(2,minmax(0,24.375rem));gap:var(--s-4)}}
@media print{.shot__fold>.shot__img,.shot__fold>.shot__scroll{display:none}.shot__scroll{overflow:visible}.shot__scroll>.shot__img{width:100%}}
.shot__src{white-space:nowrap}
.shot__src a{color:var(--link);text-decoration:underline;text-underline-offset:0.15em}
.shot__src a:hover{color:var(--link-hover)}
.shot--wide{grid-column:1/-1}
.shot__scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;background:var(--surface-3)}
.shot__scroll>.shot__img{width:87.5rem;max-width:none}
.shot__scroll+.shot__cap{border-top:1px solid var(--border)}
.shot__scroll:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.shot__full{display:block;width:fit-content;margin-top:0.25rem;padding-block:0.25rem;color:var(--link);text-decoration:underline;text-underline-offset:0.15em}
.shot__full:hover{color:var(--link-hover)}