/* Map look: each choice is a card that opens a resizable popup of large thumbnails (not the look step's style cards, which have data-style). */
.look-card:not([data-style]) { box-shadow: 0 0 16px -6px rgba(240, 177, 85, .4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%;
  text-align: start; padding: 14px 18px; position: relative; min-width: 0; font: inherit; cursor: pointer; color: var(--ink, #f4f1ea); border-radius: var(--r-md, 14px);
  border: 1px solid var(--line-strong, #3a4150); background: linear-gradient(120deg, rgba(var(--wash-rgb), .05), rgba(var(--wash-rgb), .015));
  transition: border-color .2s, box-shadow .2s, transform .15s; }
.look-card:not([data-style]):hover { border-color: rgba(240, 177, 85, .7); box-shadow: 0 10px 30px -16px rgba(240, 177, 85, .6); transform: translateY(-1px); }
.look-card:not([data-style]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.look-card-name { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9aa3b2); }
.look-card-value { min-width: 0; overflow-wrap: anywhere; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.look-card-change { color: var(--accent); font-weight: 700; }
.look-dialog { width: min(1400px, 98vw); height: 96vh; min-width: 360px; min-height: 300px; max-width: 98vw; max-height: 98vh;
  resize: both; overflow: auto; padding: 12px 16px; color: var(--ink, #f4f1ea); background: var(--bg-2, #12151c);
  border: 1px solid var(--line-strong, #3a4150); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
.look-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.look-dialog::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px); }
.look-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.look-header h3 { margin: 0; font-size: 1.2rem; }
.look-header .look-hint { flex: 1; font-size: .9rem; }
.look-close { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--ink, #f4f1ea); background: rgba(var(--wash-rgb), .07); border: 1px solid var(--line-strong, #3a4150); border-radius: 50%; }
.look-close:hover { background: rgba(var(--wash-rgb), .16); }
.look-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.look-option { position: relative; display: grid; gap: 8px; padding: 8px; font-size: 1rem; cursor: pointer;
  border: 2px solid rgba(240, 177, 85, .22); border-radius: 12px; background: rgba(var(--wash-rgb), .03);
  box-shadow: 0 0 14px -4px rgba(240, 177, 85, .28);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.look-option:hover { border-color: rgba(240, 177, 85, .65); background: rgba(240, 177, 85, .06);
  box-shadow: 0 0 22px -2px rgba(240, 177, 85, .5); transform: translateY(-2px); }
.look-option:has(input:checked) { border-color: var(--accent); background: rgba(240, 177, 85, .12);
  box-shadow: 0 0 0 1px rgba(240, 177, 85, .6), 0 0 26px 2px rgba(240, 177, 85, .65), 0 0 70px 6px rgba(141, 123, 245, .35);
  animation: look-glow 2.4s ease-in-out infinite; }
@keyframes look-glow { 50% { box-shadow: 0 0 0 1px rgba(240, 177, 85, .8), 0 0 36px 5px rgba(240, 177, 85, .85), 0 0 90px 10px rgba(141, 123, 245, .45); } }
@media (prefers-reduced-motion: reduce) { .look-option:has(input:checked) { animation: none; } }
.look-option img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0a0c10; border-radius: 8px; }
.look-none { aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 12px; border-radius: 8px;
  border: 2px dashed var(--line-strong, #3a4150); color: var(--muted, #9aa3b2); font-size: 1.05rem; }
.look-option input { position: absolute; top: 18px; inset-inline-start: 18px; width: 24px; height: 24px; accent-color: var(--gold); }
.look-actions { display: flex; justify-content: flex-end; gap: 12px; }
.look-cancel { padding: 12px 22px; cursor: pointer; color: var(--ink, #f4f1ea); background: none; border: 1px solid var(--line-strong, #3a4150); border-radius: var(--r-pill, 999px); }
@media (max-width: 700px) { .look-grid { --cols: 2 !important; } }

/* A day marker's question (dialogs.html #review-day-dialog, app-review-days.js): one full-width button per answer. */
.day-dialog { width: min(420px, 94vw); }
.day-dialog h3 { margin: 0 0 6px; }
.day-dialog-actions { display: grid; gap: 8px; margin-top: 14px; }
.day-dialog-actions button { width: 100%; padding: 12px 14px; font-size: .95rem; text-align: center; }
.day-dialog-actions .day-dialog-cancel { background: none; border-color: transparent; color: var(--ink-dim); }
/* One photo's motion (app-review-motion.js): a chip on the tile (bottom left, where only a video has its badge), and a picker where each choice plays on the photo. */
.review-tile .motion-chip {
  position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 2; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: rgba(10, 10, 14, .8); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.review-tile .motion-chip.customized { border-color: var(--gold); color: var(--gold); }   /* a chip over the photo: fixed */
#review-grid.no-motion .motion-chip { display: none; }
/* A tile is its photo and its tick (a video's mark, a stack's count): its tools are in the photo opened large
   (app-review-view.js). The chips stay on the tile, hidden: they hold each photo's choices for the rest of the review. */
#review-grid .review-tile :is(.tile-number, .alike-chip, .clip-trim-chip, .motion-chip, .review-grip) { display: none; }
#review-grid .review-tile .video-badge > span { display: none; }
.motion-dialog { width: min(520px, 96vw); }
.motion-dialog h3 { margin: 0 0 12px; }
.motion-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .motion-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.motion-option { display: grid; gap: 4px; min-width: 0; padding: 6px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.motion-option.chosen { border-color: var(--accent); color: var(--accent); }
.motion-caption { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.motion-glyph { display: inline-flex; font-size: 1rem; line-height: 1; opacity: .85; }
.motion-svg { width: 1em; height: 1em; display: block; }
.review-tile .motion-chip .motion-svg { width: 15px; height: 15px; margin: auto; }
.motion-frame { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; }
/* The photo whole, in its own shape: the film moves over the frame with the whole photo in it, so the
   preview shows it the same way instead of cropping every photo to 16:9. */
.motion-frame img { width: 100%; height: 100%; object-fit: contain; display: block;
  animation: 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
[data-effect="auto"] .motion-frame img { animation-name: motion-auto; }
[data-effect="zoom_in"] .motion-frame img { animation-name: motion-zoom-in; }
[data-effect="zoom_out"] .motion-frame img { animation-name: motion-zoom-out; }
[data-effect="pan_left"] .motion-frame img { animation-name: motion-pan-left; }
[data-effect="pan_right"] .motion-frame img { animation-name: motion-pan-right; }
[data-effect="pan_up"] .motion-frame img { animation-name: motion-pan-up; }
[data-effect="pan_down"] .motion-frame img { animation-name: motion-pan-down; }
/* Forward only, like the film: each photo moves one way (with `alternate` every other pass plays backwards -- a
   zoom in reads as a zoom out, a pan left as a pan right). The move runs to 86%, the
   last frame holds, and a fade out/in at the loop point reads as the cut to the next photo, not a jump back. */
@keyframes motion-auto { 0% { transform: scale(1); opacity: 0; } 8% { opacity: .75; } 86% { transform: scale(1.1); opacity: .75; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes motion-zoom-in { 0% { transform: scale(1); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes motion-zoom-out { 0% { transform: scale(1.22); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes motion-pan-left { 0% { transform: scale(1.22) translateX(8%); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1.22) translateX(-8%); opacity: 1; } 100% { transform: scale(1.22) translateX(-8%); opacity: 0; } }
@keyframes motion-pan-right { 0% { transform: scale(1.22) translateX(-8%); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1.22) translateX(8%); opacity: 1; } 100% { transform: scale(1.22) translateX(8%); opacity: 0; } }
@keyframes motion-pan-up { 0% { transform: scale(1.22) translateY(8%); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1.22) translateY(-8%); opacity: 1; } 100% { transform: scale(1.22) translateY(-8%); opacity: 0; } }
@keyframes motion-pan-down { 0% { transform: scale(1.22) translateY(-8%); opacity: 0; } 8% { opacity: 1; } 86% { transform: scale(1.22) translateY(8%); opacity: 1; } 100% { transform: scale(1.22) translateY(8%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .motion-frame img { animation-duration: 6s; } }
/* The photo picker (review/photo_picker.html), the same on the Film photos and Photo dump tabs: its note line keeps
   its height when there is nothing to say (the film's "coloured frames" appear only with groups), so switching tabs
   never moves the toolbar, slider or grid. The quick-select row sits in the toolbar, which already has the gutter.
   Hidden, it keeps one line, not its text's height: the film's unsaid note runs to four lines on a phone, a blank
   block above the slider. Snaps has no second tab to line up with, so there it takes no room at all. */
.picker-note { min-height: 1.5em; }
.picker-note[hidden] { display: block !important; visibility: hidden; height: 1.5em; overflow: hidden; }   /* on purpose: reserves the line */
.review-snaps .picker-note[hidden] { display: none !important; }
.property-page .review-toolbar .teaser-quick-select, .property-page .property-page .review-toolbar .teaser-quick-select { padding: 0; margin: 0; }
/* The two Pace pages alike: the film's (review/step1.html) and the photo dump's (macros.html
   cadence_panel) both read slider row, preview, one line -- plain, no box, and the preview frame the same height
   whatever its shape (a portrait dump frame would otherwise stand three times taller than the film's). */
.property-page .property-page .review-shape { display: block; margin-top: 0; padding: 0; background: none; border: 0; }
.property-page .property-page .pace-preview { width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 0 12px; align-items: stretch; }
.property-page .property-page .still-pace-frame,
.property-page .property-page .dump-preview-frame { height: 180px; width: auto; max-width: 100%; }
.property-page .property-page .pace-preview .cadence-viz { margin: 6px 0 0; height: 20px; }
.property-page .property-page .pace-preview .cadence-viz::after { content: none; }
.property-page .property-page .pace-preview .dump-preview-note { max-width: 320px; }

/* A press of the dice, Faces or Auto (app-review-flourish.js): the button's own move, then the photos it took in popping
   in one after the other and the ones it took out fading. */
/* The dice grow much larger as they roll, casino red with white pips (the owner), then settle back. */
.review-dice.flourish-dice { position: relative; z-index: 3; animation: flourish-dice-pop .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes flourish-dice-pop { 0% { transform: scale(1); }
  25%, 70% { transform: scale(1.7); background: #c8102e; border-color: #8e0b20; color: #fff; box-shadow: 0 8px 22px rgba(200, 16, 46, .55); }
  100% { transform: scale(1); } }
.review-dice.flourish-dice svg { animation: flourish-tumble .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes flourish-tumble { 0% { transform: rotate(0) translateY(0); } 35% { transform: rotate(280deg) translateY(-7px) scale(1.15); }
  70% { transform: rotate(520deg) translateY(0) scale(.95); } 100% { transform: rotate(720deg); } }
/* Faces and No faces: a large pop that looks one way and the other, ringed in gold, then back (the owner: "a lot
   larger when pressing"). */
.flourish-faces { position: relative; z-index: 3; animation: flourish-look .9s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes flourish-look { 0% { transform: scale(1); box-shadow: none; }
  20% { transform: scale(1.8) rotate(-12deg); box-shadow: 0 0 0 8px rgba(240, 177, 85, .45); }
  45% { transform: scale(1.8) rotate(12deg); box-shadow: 0 0 0 14px rgba(240, 177, 85, .2); }
  70% { transform: scale(1.5) rotate(0); box-shadow: 0 0 0 4px rgba(240, 177, 85, .35); }
  100% { transform: scale(1); box-shadow: none; } }
/* Under the finger at once, before the press is done: the button grows. */
.teaser-quick-select button:active { transform: scale(1.3); transition: transform .08s ease-out; }
.flourish-auto svg { animation: flourish-sparkle .7s ease-out; }
@keyframes flourish-sparkle { 0% { transform: rotate(0) scale(1); filter: none; }
  50% { transform: rotate(200deg) scale(1.35); filter: drop-shadow(0 0 6px var(--gold)); } 100% { transform: rotate(360deg) scale(1); filter: none; } }
#review-grid .review-tile.flourish-in { animation: flourish-in .5s ease-out var(--flourish-delay, 0ms) both; }
@keyframes flourish-in { 0% { transform: scale(.86); box-shadow: 0 0 0 0 rgba(240, 177, 85, 0); }
  55% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(240, 177, 85, .65); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 177, 85, 0); } }
#review-grid .review-tile.flourish-out { animation: flourish-out .45s ease-in var(--flourish-delay, 0ms) both; }
@keyframes flourish-out { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.95); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .review-dice.flourish-dice, .review-dice.flourish-dice svg, .flourish-faces, .flourish-auto svg { animation: none; }
  .review-dice:active, .teaser-quick-select button:active { transform: none; }
  #review-grid .review-tile.flourish-in, #review-grid .review-tile.flourish-out { animation-duration: .2s; transform: none; }
}

/* Start over with other settings (app-review-back.js): at the review's foot, a quiet line, not a button among the page's own. */
.review-start-over { margin: 32px 0 0; text-align: center; }
.review-start-over-btn { min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-start-over-btn:hover { color: var(--ink); }

/* A plain pair as the film lays it (app-review-pile.js): prints on a table, in the frame style the film drew for the page.
   Without .pile-play they lie as they end; with it they land one after the other (pile_layout.TOP_DELAY). */
.pile-print { position: absolute; transform: rotate(var(--rot)); background: #f4f2ec; box-shadow: 0 .6% 1.6% rgba(0, 0, 0, .55); }
.pile-print img { position: absolute; display: block; object-fit: cover; max-width: none; }
.pile-film { background: #18181a; }
.pile-film::before, .pile-film::after { content: ""; position: absolute; inset-inline-start: 3%; inset-inline-end: 3%; height: calc(var(--band, 8%) * .32);
  background: repeating-linear-gradient(90deg, #2b2824 0 1.6%, transparent 1.6% 3.4%); }
.pile-film::before { top: calc(var(--band, 8%) * .34); }
.pile-film::after { bottom: calc(var(--band, 8%) * .34); }
.pile-etched { background: #eee6d6; }
.pile-etched::before { content: ""; position: absolute; inset: 7%; border: 1px solid #806f58; pointer-events: none; }
.pile-taped::before, .pile-taped::after { content: ""; position: absolute; top: -4%; width: 22%; height: 8%; background: rgba(236, 224, 176, .7); }
.pile-taped::before { inset-inline-start: -5%; transform: rotate(38deg); }
.pile-taped::after { inset-inline-end: -5%; transform: rotate(-38deg); }
.pile-play .pile-print { animation: .5s cubic-bezier(.2, .7, .3, 1) var(--delay) both; }
.pile-play .pile-print[data-arrival="slide_left"] { animation-name: pile-slide-left; }
.pile-play .pile-print[data-arrival="slide_right"] { animation-name: pile-slide-right; }
.pile-play .pile-print[data-arrival="slide_up"] { animation-name: pile-slide-up; }
.pile-play .pile-print[data-arrival="slide_down"] { animation-name: pile-slide-down; }
.pile-play .pile-print[data-arrival="drop"] { animation-name: pile-drop; }
.pile-play .pile-print[data-arrival="pop"] { animation-name: pile-pop; }
.pile-play .pile-print[data-arrival="swing"] { animation-name: pile-swing; }
.pile-play .pile-print[data-arrival="fade"] { animation-name: pile-fade; }
@keyframes pile-slide-left { from { transform: translateX(-60%) rotate(var(--rot)); opacity: 0; } }
@keyframes pile-slide-right { from { transform: translateX(60%) rotate(var(--rot)); opacity: 0; } }
@keyframes pile-slide-up { from { transform: translateY(70%) rotate(var(--rot)); opacity: 0; } }
@keyframes pile-slide-down { from { transform: translateY(-70%) rotate(var(--rot)); opacity: 0; } }
@keyframes pile-drop { from { transform: translateY(-55%) rotate(calc(var(--rot) + 9deg * var(--sign))); opacity: 0; } }
@keyframes pile-pop { from { transform: scale(.5) rotate(var(--rot)); opacity: 0; } }
@keyframes pile-swing { from { transform: translateX(calc(25% * var(--sign))) rotate(calc(var(--rot) + 20deg * var(--sign))); opacity: 0; } }
@keyframes pile-fade { from { transform: scale(.94) rotate(var(--rot)); opacity: 0; } }
/* The film's ground under the prints: the first photo blurred and dimmed (photo_pile._ground). */
.pile-frame::before { content: ""; position: absolute; inset: -6%; background: var(--photo) center / cover; filter: blur(14px) brightness(.38); }
/* A shared page's card stands for photos that are in the film: it carries the tick a tile of the film carries. */
:is(.review-slide, .review-compound)::after { content: "\2713"; position: absolute; top: 6px; inset-inline-end: 6px; width: 18px; height: 18px; z-index: 1; display: grid; place-items: center;
  border-radius: 5px; background: var(--gold); color: #2b1a00; font: 700 13px/1 system-ui, sans-serif; pointer-events: none; }

/* What the CUSTOMER said about this clip's sound: the sounding speaker where he kept it, the slashed one where he
   muted it, in the tile's lower corner, clear of the tick and the scissors. A clip left to the film wears nothing,
   because that choice is made when the film is built (CLAUDE.md: icons are WYSIWYG). */
.review-tile .clip-sound-badge { position: absolute; bottom: 5px; inset-inline-start: 5px; z-index: 1; padding: 1px 3px;
  border-radius: 5px; background: rgba(10, 10, 14, .62); font-size: 13px; line-height: 1; pointer-events: none; }
.review-tile .clip-speed-badge { position: absolute; bottom: 5px; inset-inline-start: 30px; z-index: 1; padding: 1px 4px;
  border-radius: 5px; background: rgba(10, 10, 14, .62); color: var(--gold); font-size: 12px; font-weight: 600;
  line-height: 1.3; pointer-events: none; }
/* The trimmer's speed slider: its stops are 0.5x to 2x, and the line under it says what that does to this part. */
.clip-dialog .clip-speed { margin: 12px 0 0; }
.clip-dialog .clip-speed-step { margin-bottom: 6px; }
.clip-dialog .clip-speed-range { width: 100%; height: 36px; accent-color: var(--gold); cursor: pointer; }
.clip-dialog .clip-speed-readout { margin: 2px 0 0; text-align: center; font-size: .9rem; color: var(--ink-dim, #9aa3b2); }
/* "This clip's sound": three stops under the preview they change -- the film's own choice, the whole clip, or
   silence. The sliding thumb of .mode-switch-3 has to be told where each of them sits. */
.clip-dialog .clip-sound { margin: 10px 0 0; }
.clip-dialog .clip-sound[hidden] { display: none; }
.clip-dialog .clip-sound-step { margin-bottom: 6px; }
.clip-dialog .clip-sound-off-note { margin: 0 2px 6px; font-size: .9rem; color: var(--ink-dim, #9aa3b2); }
/* What the chosen stop does, in one line under the row: the stops themselves carry a glyph and a name only. */
.clip-dialog .clip-sound-says { margin: 6px 2px 0; font-size: .9rem; color: var(--ink-dim, #9aa3b2); }
.clip-dialog .clip-sound-says[hidden] { display: none; }
/* What he answered, while the film plays music only and the stops are off the page: his answer, not a control. */
.clip-dialog .clip-sound-saved { display: flex; align-items: center; gap: 8px; margin: 0 2px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-dim, #9aa3b2); }
.clip-dialog .clip-sound-saved[hidden] { display: none; }
.clip-dialog .clip-sound-saved .mode-ico { width: 20px; height: 20px; opacity: .7; filter: none; }
/* Stacked on a phone, the three stops line their glyphs up at the top of the row rather than floating at each
   stop's own middle, where a row of glyphs at three heights reads as three different kinds of control. The
   padding is what keeps a stop a finger tall now that it carries one line of words instead of three. */
@media (max-width: 480px) {
  .clip-sound-modes .mode-opt { justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; }
}
/* The chosen stop, calm: the knob's showpiece gradient and its pulsing glow belong to the screen's one big
   choice, and inside this dialog they pulled the eye off the clip the choice is about. A translucent wash with
   its own edge says "this one" without shouting; the words and the glyph keep the dialog's own colours, because
   the dark text the bright gradient needs is unreadable over a wash. */
.clip-dialog .clip-sound-modes::before {
  background: linear-gradient(100deg, rgba(240, 177, 85, .20), rgba(141, 123, 245, .20));
  box-shadow: inset 0 0 0 1px rgba(240, 177, 85, .55); animation: none;
}
.clip-dialog .clip-sound-modes .mode-opt:has(input:checked) strong { color: var(--ink); }
.clip-dialog .clip-sound-modes .mode-opt:has(input:checked) .mode-ico { stroke: url(#ico-grad); filter: none; }
/* The focus ring follows the stop's own corner, not the pill's: .mode-switch-3 is a segmented box, not a stadium. */
.clip-sound-modes .mode-opt:has(input:focus-visible) { border-radius: var(--r-md); }
/* Each selector carries .clip-dialog so it outweighs .mode-switch::before, which app-mode.css sets at the same
   specificity and later in the page's own stylesheet order. */
.clip-dialog .clip-sound-modes:has(input[value="keep"]:checked)::before { transform: translateX(calc(100% * var(--flow))); }
.clip-dialog .clip-sound-modes:has(input[value="mute"]:checked)::before { transform: translateX(calc(200% * var(--flow))); }
/* "Sound from your videos": the film's own three stops, beside its settings. The same row as the clip dialog's,
   because it is the same decision one scale up, and the sliding thumb has to be told where each stop sits. */
.review-film-sound { margin: 14px 0 0; }
.review-film-sound[hidden] { display: none; }
.review-film-sound .film-sound-step { margin: 0 2px 6px; font-weight: 600; }
.review-film-sound .film-sound-says { margin: 6px 2px 0; font-size: .9rem; color: var(--ink-dim, #9aa3b2); }
/* Calm, like the dialog's: the pulsing gradient belongs to the screen's one big choice, not to a settings row. */
.review-film-sound .film-sound-modes::before {
  background: linear-gradient(100deg, rgba(240, 177, 85, .20), rgba(141, 123, 245, .20));
  box-shadow: inset 0 0 0 1px rgba(240, 177, 85, .55); animation: none;
}
.review-film-sound .film-sound-modes .mode-opt:has(input:checked) strong { color: var(--ink); }
.review-film-sound .film-sound-modes .mode-opt:has(input:checked) .mode-ico { stroke: url(#ico-grad); filter: none; }
.film-sound-modes .mode-opt:has(input:focus-visible) { border-radius: var(--r-md); }
/* Each selector carries .review-film-sound so it outweighs .mode-switch::before, which app-mode.css sets at the
   same specificity and later in the page's own stylesheet order. */
.review-film-sound .film-sound-modes:has(input[value="all"]:checked)::before { transform: translateX(calc(100% * var(--flow))); }
.review-film-sound .film-sound-modes:has(input[value="off"]:checked)::before { transform: translateX(calc(200% * var(--flow))); }
@media (max-width: 480px) {
  .film-sound-modes .mode-opt { justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; }
}
/* A clip the film plays end to end (review_clips.plays_whole): the same dialog with nothing of the trimming in it,
   so what the customer is offered is the clip's own sound and how fast it plays, and nothing that cannot be done. */
.clip-dialog.clip-no-trim .clip-step:not(.clip-speed-step):not(.clip-sound-step),
.clip-dialog.clip-no-trim .clip-lengths,
.clip-dialog.clip-no-trim .clip-track,
.clip-dialog.clip-no-trim .clip-nudge { display: none; }

/* The clip edits inherited from the last film, and the one button that puts them back. A line that wraps and a button
   that is at least a finger high; the [hidden] line is its own because the display below would beat the attribute. */
.review-inherited { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--border, rgba(127, 127, 127, .35)); border-radius: 10px; }
.review-inherited p { margin: 0; flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.review-inherited .review-inherited-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  min-width: 0; max-width: 100%; padding: 6px 14px; text-align: left; }
.review-inherited .review-inherited-reset .mode-ico { flex: 0 0 auto; width: 22px; height: 22px; }
#review-inherited[hidden] { display: none; }
.review-inherited-done { margin: 0 0 12px; }
.review-inherited-done[hidden] { display: none; }