.slide-frame { position: relative; width: 100%; background: #111318; overflow: hidden; border-radius: 4px; }
.slide-frame.tall { width: auto; height: 100%; }
.slide-cell { position: absolute; overflow: hidden; }
.slide-cell::before { content: ""; position: absolute; inset: -12%; background: var(--photo) center / cover; filter: blur(5px) brightness(.38); }
.slide-cell img { position: relative; display: block; width: 100%; height: 100%; padding: 3%; box-sizing: border-box; object-fit: contain; }
/* Placed as the film draws it once loaded (app-review-slide-edit.js placeSlidePhoto): its own box, framed and turned. */
.slide-cell img.placed { position: absolute; padding: 0; max-width: none; object-fit: cover; transform-origin: 50% 50%; }
/* The slide's editor: the whole screen, the slide as large as fits above its tools. */
.slide-editor { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
                border: 0; box-sizing: border-box; background: var(--bg); color: var(--ink); }
.slide-editor[open] { display: flex; flex-direction: column; gap: 10px; }
.slide-editor::backdrop { background: rgba(0, 0, 0, .85); }
.slide-editor h2 { margin: 0; font-size: 18px; }
.slide-editor-hint { margin: 0; color: var(--muted); font-size: 13px; }
.slide-editor-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
                      overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.slide-editor-stage .slide-frame { width: auto; height: 100%; max-width: 100%; transform-origin: 0 0; }
.slide-editor-stage .slide-frame:not(.tall) { width: 100%; height: auto; }
.slide-editor-stage .slide-cell { cursor: grab; }
/* The chosen photo's frame is drawn over its picture: an outline of the cell itself is hidden under the photo. */
.slide-editor-stage .slide-cell.chosen { z-index: 1; }
.slide-editor-stage .slide-cell.chosen::after, .slide-editor-stage .slide-cell:focus-visible::after {
  content: ""; position: absolute; inset: 0; border: 3px solid var(--accent); pointer-events: none; }
.slide-editor-stage .slide-cell:focus-visible { outline: none; }
.slide-editor-stage.turning .slide-cell:not(.chosen) { opacity: .2; }
.slide-turn-handle { position: absolute; z-index: 2; width: 44px; height: 44px; margin-block: -22px 0; margin-left: -22px; /* physical: the script places it with style.left, in any reading direction */ border-radius: 50%;
                     display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: grab; touch-action: none;
                     background: var(--gold); color: var(--on-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.slide-editor-tools, .slide-editor-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.slide-editor-tools[hidden] { display: none; }
.slide-editor-tools button, .slide-editor-actions button { min-height: 44px; min-width: 44px; }
.slide-editor-actions button { flex: 1 1 0; min-width: 0; }
.slide-edit-layout.rolling { animation: slide-dice-roll .6s ease-out; }
@keyframes slide-dice-roll { 0% { transform: rotate(0); } 60% { transform: rotate(380deg) scale(1.1); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .slide-edit-layout.rolling { animation-duration: .2s; } }
.slide-dialog .slide-edit-open { min-height: 44px; }
#review-grid .review-tile.in-slide { display: none; }   /* shown as its slide's card alone */
.slide-dialog { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: hidden; }
.slide-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* A photo inside an opened slide: it is the film's own drawing of it, and it carries its own number, its cross and
   the tap that makes it the cover -- there is no second row of the same photos under it. */
.slide-photo { cursor: pointer; }
.slide-member-number { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 20px; padding: 2px 6px; border-radius: var(--r-pill);
                       background: rgba(10, 10, 14, .78); color: #fff; font-size: 11px; font-weight: 700; text-align: center; z-index: 2; }
.slide-member-number:empty { display: none; }
/* The cross that takes one photo of a shared page out of the film: on the photo it removes, in the corner the
   grid's own tick uses, and red because it takes something away. 28 px, which a finger finds on a 64 px photo. */
.slide-take-out { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 3; width: 30px; height: 30px; padding: 0;
                  display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--surface-1);
                  background: var(--danger); color: var(--on-danger); font-size: 14px; line-height: 1; font-weight: 700; cursor: pointer; }
.slide-take-out:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* A slide's photo is tapped to make it the film's cover: a photo a slide holds is hidden from the grid, so this is
   the only way to it. The picture is the control, so it says so by the hand it takes and the mark it then wears. */
.slide-members-hint { max-width: 46ch; margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.slide-photo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.slide-dialog::backdrop { background: rgba(0, 0, 0, .85); }
.slide-dialog .slide-frame { width: min(96vw, calc(62vh * 16 / 9)); }
.slide-dialog .slide-frame.tall { width: auto; height: min(62vh, calc(96vw * 16 / 9)); }   /* room under it for its photos */