/* The still grabber (review/app-review-frame-grab.js): the picture, a scrub bar under it, and what to do with the frame. */
.frame-grab[open] { display: flex; flex-direction: column; }
.frame-grab .look-header { margin-bottom: 10px; }
.frame-grab-picture { display: flex; justify-content: center; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.frame-grab-frame { display: block; width: 100%; max-height: 52vh; max-height: 52dvh; object-fit: contain; }
.frame-grab-frame.exact { outline: 2px solid var(--gold); outline-offset: -2px; }
.frame-grab-range { width: 100%; height: 44px; margin: 10px 0 0; accent-color: var(--gold); cursor: pointer; }
.frame-grab-readout { min-width: 0; font-variant-numeric: tabular-nums; text-align: center; }
.frame-grab-status { min-height: 1.3em; margin: 8px 0; text-align: center; }
.frame-grab-result { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.frame-grab-result[hidden] { display: none; }   /* the flex above would otherwise beat [hidden] */
.frame-grab-result > * { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 44px; }
.frame-grab-result a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.frame-grab-take, .frame-grab-add, .frame-grab-save, .photo-view-frame { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.frame-grab-take { width: 100%; min-height: 44px; }
.frame-grab-add[data-state="done"] { border-color: var(--gold); color: var(--gold); }
.grab-spin { transform-origin: 12px 12px; animation: grab-spin 1s linear infinite; }
@keyframes grab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .grab-spin { animation: none; } }