/* ---------- zoom ---------- */
/* Zoom (app-review-zoom.js): the grid at 2, 3, 4, 5, 6 and 8 across; from 5 the film's photos stay bright, the rest recede. A
   finger held on a photo lifts the loupe, at any size. The chrome a small photo cannot carry goes. */
/* The photo size on a line of its own, under a thin rule and its title: beside the ticks' buttons it read as a choice
   of photos (the owner). */
.review-zoom { display: flex; flex-basis: 100%; align-items: center; gap: 6px; margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.review-zoom-title { margin-right: auto; color: var(--muted); font-size: .8rem; font-weight: 600; }
.review-zoom .review-toolbar-btn { min-width: 44px; padding: 0 8px; font-size: 1.1rem; font-weight: 700; }
#review-grid { touch-action: pan-y; }   /* a pinch on the grid zooms it, not the page */
/* --zoom-across: the level's photos across, set with it (drawReviewZoom); the gap narrows as the photos do. */
#review-grid.zoom-even { grid-template-columns: repeat(var(--zoom-across), minmax(0, 1fr)); gap: 6px; }
#review-grid.zoom-even[data-zoom="1"] { gap: 8px; }
#review-grid.zoom-even:is([data-zoom="3"], [data-zoom="4"]) { gap: 4px; }
#review-grid.zoom-even:is([data-zoom="5"], [data-zoom="6"]) { gap: 3px; }
#review-grid.zoom-even .review-tile { padding: 1px; border-width: 2px; }
/* Zoomed, every photo is a square of one size: an even mosaic, rows as tall as they are wide (a photo of no known
   shape kept its 130 px height at any width, and a landscape one two columns: rows ran tall and ragged). */
#review-grid.zoom-even .review-tile { grid-column: span 1; }
#review-grid.zoom-even .review-tile :is(img, .noimg) { height: auto; aspect-ratio: 1; object-fit: contain; background: var(--bg-2); border-radius: 4px; }   /* the whole photo, its own shape, in an even square: cropped, a landscape lost its sides */
/* At 3 and 4 across a photo is about 70-110 px wide: the full-size tick box, a stack's pill and the likeness marker
   covered most of it. They shrink with the photo, the pill and the marker kept a finger's height. */
#review-grid.zoom-even:is([data-zoom="2"], [data-zoom="3"]) .review-tile input { width: 16px; height: 16px; top: 4px; right: 4px; margin: 0; }
#review-grid.zoom-even:is([data-zoom="2"], [data-zoom="3"]) .review-tile .stack-pill { min-height: 24px; padding: 0 8px; font-size: .7rem; bottom: 4px; }
#review-grid.zoom-even:is([data-zoom="2"], [data-zoom="3"]) .review-tile .alike-chip { left: 3px; min-height: 22px; padding: 0 5px; font-size: 10px; }
#review-grid.zoom-dense .review-tile.stack-top::before, #review-grid.zoom-dense .review-tile.stack-top::after { display: none; }
#review-grid.zoom-dense .review-tile .stack-pill { min-height: 24px; padding: 0 6px; font-size: .62rem; bottom: 2px; }   /* still a finger's size */
#review-grid.zoom-dense .review-tile :is(.tile-number, .alike-chip, .clip-trim-chip, .motion-chip,
  .video-badge, .review-grip) { display: none; }
#review-grid.zoom-dense .review-tile input { width: 14px; height: 14px; top: 4px; right: 4px; }
#review-grid.zoom-dense .review-tile:not(.selected) { opacity: .42; transform: scale(.86); transition: opacity .2s ease, transform .2s ease; }
#review-grid.zoom-dense .review-tile.selected { box-shadow: 0 0 0 1px rgba(240, 177, 85, .7), 0 4px 14px -4px rgba(240, 177, 85, .8); }
/* At 8 across the box stays, smaller and in the very corner: it is how a photo is ticked (a tap on the photo opens it
   large), and the start of a run of ticks slid along the boxes. On a photo about 31 px wide a larger box reached its
   middle, where a finger held means the loupe. */
#review-grid.zoom-tiny .review-tile input { width: 10px; height: 10px; top: 1px; right: 1px; margin: 0; }
#review-grid.zoom-tiny :is(.review-day, .review-note) { padding: 2px; }
/* A note or a day card zoomed out is its card alone: its words cannot be read at that size (the note opens on a tap). */
#review-grid.zoom-dense .sticky-preview { display: none; }
#review-grid.zoom-dense .review-day .sheet-head { font-size: 0; padding: 3px 0; }
#review-grid.zoom-dense .review-day .sheet-number { font-size: 1rem; }
/* The day's badge stays, smaller, at its corner: it is the only way to take the day in or out. */
#review-grid.zoom-dense .review-day .day-toggle { top: 2px; right: 2px; width: 16px; height: 16px; font-size: 10px; }
#review-grid.zoom-dense .review-day .day-toggle::before { top: -3px; right: -3px; }
.review-loupe { position: fixed; z-index: 60; pointer-events: none; border-radius: var(--r-md); overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 18px 50px rgba(0, 0, 0, .7); background: #000; }
.review-loupe[hidden] { display: none; }
.review-loupe.ticked { border-color: var(--gold); }
.review-loupe img { display: block; width: 100%; height: auto; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.3, 1, .4, 1); }