/* ---------- Snaps ---------- */
/* Snaps (app-review-snaps.js drawSnapsPicks): the slider first, the buttons (the dice) under it, then the picks all
   together, five across, then the album -- roll after roll, the picks stay on one screen. */
.review-snaps #review-film-content { display: flex; flex-direction: column; }
.review-snaps #review-film-content > * { order: 6; }
.review-snaps #review-film-content > .legend { order: 0; }
.review-snaps #review-film-content > .shape-row:has(#review-length-slider-top) { order: 1; }
.review-snaps #review-film-content > .review-toolbar { order: 2; }
.review-snaps #review-film-content > #snaps-picks { order: 3; }
.review-snaps #review-film-content > #snaps-see-all { order: 3; }
.review-snaps #review-film-content > #review-grid { order: 4; }
.review-snaps #review-film-content > .shape-row:has(#review-length-slider) { order: 5; }
/* Snaps' "Photo shape" (app-review-snaps.js chooseSnapShape) in the shape section, where the film and the photo dump
   show their "Video shape" (review/step1.html, macros.shape_switch). */
#review-panel:not(.review-snaps) #review-photo-shape { display: none; }
.snaps-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
.snaps-picks[hidden] { display: none; }
/* "See all 303 photos" / "Only my 10 picks" (drawSnapsSeeAll): the album beyond the picks, said in words. */
.snaps-see-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0 6px;
  padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px dashed var(--gold); background: rgba(240, 177, 85, .08);
  color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
.snaps-see-all.showing-all { border-style: solid; background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.snaps-see-all[hidden] { display: none; }
.snaps-pick { padding: 0; border: 2px solid var(--gold); border-radius: 8px; overflow: hidden; background: #000; cursor: pointer;
  aspect-ratio: 1; min-width: 0; }
.snaps-pick img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* the whole photo, as in the grid */
.review-snaps .teaser-quick-select button.active { color: #0b0b0f; background: var(--gold); border-color: var(--gold); }   /* Snaps' faces toggle, on */