/* The photo step by moment (review/photo_picker.html, app-review-moments.js): a counter on top, then a row for each moment of the
   trip with a strip of its photographs and one control. Phone first; logical sides throughout so it reads right to left. */

.moments { min-width: 0; }
.moments[hidden] { display: none; }
.moments-loading { margin: 12px 0; }
/* The moments could not be had (showMomentsFailed): a card in the photo step's place, and no forward action until they are
   there, because the page behind it is a picker that never finished. */
.moments-failed { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.moments-failed[hidden] { display: none; }
.moments-failed p { margin: 0; flex: 1 1 14em; font-weight: 600; }
.moments-failed button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
#review-panel.moments-failed .review-bar, #review-panel.moments-failed [data-rnext], #review-panel.moments-failed #review-continue-top,
#review-panel.moments-failed .film-length[data-film-length="float"] { display: none; }

/* ---------- the counter ---------- */
/* z 5: its More options panel opens over the film's length anchored under it (z 4, below). */
.moments-counter { position: relative; z-index: 5; margin: 0 0 8px; padding: 10px 2px 8px; background: var(--surface);
  border-block-end: 1px solid var(--line); }
.moments-says { margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; transition: opacity .15s; }
.moments.is-asking .moments-says { opacity: .55; }
.moments-facts, .moments-warn { margin: 2px 0 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.moments-warn { color: var(--warning); }
.moments-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.moments-why { min-height: 44px; padding: 4px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: transparent;
  color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.moments-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.moments-all input { width: 22px; height: 22px; margin: 0; }
.moments-why-says { margin: 8px 0 0; }
.moments-why-says[hidden] { display: none; }

/* ---------- a day, a row ---------- */
/* Rows far from the screen are not laid out or painted: 84 open moments cost the layout of a few. The intrinsic height is a face with its controls. */
.moment-row { content-visibility: auto; contain-intrinsic-size: auto 380px; }
.moment-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 0 10px; border-block-end: 1px solid var(--line); }
.moment-row[data-state="skip"] { opacity: .72; }
.moment-row.is-taken-out { opacity: .72; }   /* a moment taken out (by the filter, the length or the customer) stays, dimmed, with its chips */
.moment-row.is-taken-out .moment-strip:empty { display: none; }
.moment-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.moment-name { display: flex; align-items: flex-start; gap: 0; margin: 0; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.moment-name .moment-rename { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-block: -10px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.moment-name .moment-details { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-block: -10px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.moment-time { flex: 0 0 auto; font-size: .8rem; color: var(--muted); unicode-bidi: isolate; }
.moment-plays, .moment-left { margin: 0; font-size: .85rem; color: var(--muted); }
.moment-left { color: var(--warning); }

/* ---------- the strip: it scrolls inside itself, never the page ---------- */
.moment-strip { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; margin: 0; padding: 2px 2px 6px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.moment-strip[hidden] { display: none; }
.moment-cell { position: relative; flex: 0 0 auto; height: calc(var(--moment-size, 76px) * 1.15); aspect-ratio: var(--moment-aspect, 4 / 3); scroll-snap-align: start; }
/* A photograph is shown whole in its own shape (a portrait tall, a landscape wide; 4:3 until its orientation is known). A moment of one or two
   photographs has room for them large, as far as most of the width goes. */
.moment-row[data-few="true"] .moment-cell { height: min(calc(var(--moment-size, 76px) * 2.6), 58vw); }
/* A wide screen: a lone photograph is no larger than 280 px tall and 360 px wide (about a third of the content), so several moments
   share a screen; the picture inside keeps its shape (object-fit: contain). The phone is unchanged. */
@media (min-width: 700px) {
  .moment-row[data-few="true"] .moment-cell { height: min(calc(var(--moment-size, 76px) * 2.6), 280px); max-width: 360px; }
  .moment-cell { max-width: 360px; }
}
.moment-photo { display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px;
  background: var(--bg-2); cursor: pointer; }
.moment-photo { -webkit-touch-callout: none; user-select: none; touch-action: pan-x pan-y; }   /* a hold opens the photo large, not the browser's menu */
.moments-list { touch-action: pan-y pan-x; }
.moment-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.moment-cell.is-best .moment-photo { border-color: var(--gold); }
.moment-cell.is-out .moment-photo { border-style: dashed; border-color: var(--muted); }
.moment-cell.is-out .moment-photo img { opacity: .3; filter: grayscale(1); }
/* Available but left out by the film's length: dimmed, its frame solid (not Skip's dashes), and the length's clock painted in
   its corner -- a picture, not a control: no ring, no button's shape; the tap is the photograph's own and puts it in. */
.moment-cell.is-idle .moment-photo img { opacity: .4; }
.moment-cell.is-idle::before { content: ""; position: absolute; z-index: 1; inset-block-end: 6px; inset-inline-end: 6px; width: 18px; height: 18px;
  background: var(--gold); pointer-events: none; -webkit-mask: var(--length-out-glyph) center / contain no-repeat; mask: var(--length-out-glyph) center / contain no-repeat; }
#review-moments { --length-out-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 9.6V12l1.7 1'/%3E%3C/svg%3E"); }
/* A skipped moment's pictures stay: gray and dimmed (a pinned photograph inside it is not out, so it keeps its colour). */
.moment-strip.is-skipped .moment-cell.is-out .moment-photo img { opacity: .6; filter: grayscale(1); }
.moment-skipped-label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.moment-pin { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.moment-pin svg { width: 18px; height: 18px; }
.moment-pin[aria-pressed="true"] { background: var(--gold); color: #14100a; }
.moment-pin:disabled { opacity: .85; cursor: default; }
.moment-stack { position: absolute; inset-block-end: 2px; inset-inline-start: 2px; min-width: 30px; min-height: 28px; padding: 0 7px; border: 0;
  border-radius: var(--r-pill); background: rgba(0, 0, 0, .65); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }

/* ---------- the control: three shapes, one tap ---------- */
.moment-controls { display: flex; gap: 6px; min-width: 0; }
.moment-ctl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 4px 8px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: .9rem;
  overflow-wrap: anywhere; text-align: center; cursor: pointer; }
.moment-ctl { flex: 1 1 0; }
.moment-ctl svg { flex: 0 0 auto; }
.moment-ctl[aria-pressed="true"] { border-color: transparent; background: var(--gold); color: #14100a; font-weight: 700; }

@media (max-width: 380px) {
  .moment-ctl { font-size: .82rem; }
}

/* ---------- the two tabs, Moments and All photos, and the quick choices both share ---------- */
.picker-view { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 10px; min-width: 0; }
.picker-view[hidden] { display: none; }
/* Two tabs sharing the row: the chosen one is filled gold with bold dark text (the same look as a pressed All | Best | Skip), the other
   has a visible border and the normal text colour, so it reads as a tab to tap and never as a disabled one. */
.picker-view-switch { display: flex; gap: 6px; min-width: 0; }
.picker-view-switch button { flex: 1 1 0; min-width: 0; justify-content: center; }
.picker-view-switch button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-view-switch button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer;
  transition: transform .08s ease, background-color .08s ease; touch-action: manipulation; }
.picker-view-switch button:active { transform: scale(.96); background: var(--surface-2); }
.picker-view-switch button[aria-pressed="true"] { border-color: transparent; background: var(--gold); color: #14100a; font-weight: 700; }
/* While the other view is made: the pressed button shows a turning ring and both views dim, so the tap is seen at once. */
.picker-view.is-busy .picker-view-switch button[aria-pressed="true"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: picker-view-turn .7s linear infinite; }
#review-moments[aria-busy="true"], #review-film-content[aria-busy="true"] { opacity: .55; transition: opacity .1s ease; }
@keyframes picker-view-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .picker-view.is-busy .picker-view-switch button[aria-pressed="true"]::after { animation-duration: 2s; } }
/* The quick choices under the tabs (app-review-moments-tools.js): one row of pills, a glyph and its word each, scrolling sideways
   on a narrow phone rather than wrapping. The ids win over the grid toolbar's and the first-film labels' own sizes. */
#picker-tools { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 2px 4px; }
#picker-tools:empty { display: none; }
#picker-tools .teaser-quick-select { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0; }
#picker-tools .teaser-quick-select button { flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; height: auto;
  min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-dim); }
#picker-tools .teaser-quick-select button[hidden] { display: none; }
#picker-tools .tool-label { display: inline; font-size: .85rem; font-weight: 600; line-height: 1.2; color: inherit; white-space: nowrap; }
/* The choice the screen stands at (Auto when the review opens): filled gold, its glyph filled, and the dark check in its corner a
   switch that is on wears, so it has a shape of its own and not only a colour. */
#picker-tools .teaser-quick-select button.is-current { position: relative; color: #0b0b0f; background: var(--gold); border-color: var(--gold-deep, var(--gold)); }
#picker-tools .teaser-quick-select button.is-current svg path, #picker-tools .teaser-quick-select button.is-current svg rect { fill: currentColor; fill-opacity: .25; }
#picker-tools .teaser-quick-select button.is-current::after { content: "\2713"; position: absolute; top: -6px; inset-inline-end: -6px; width: 16px; height: 16px;
  border-radius: 50%; background: #0b0b0f; color: var(--gold); font-size: 11px; line-height: 16px; text-align: center; font-weight: 700; }
#picker-tools .teaser-quick-select button.is-current .tool-label { color: #0b0b0f; }
#picker-tools { padding-block-start: 8px; }   /* room for a lit choice's corner check */

/* ---------- how this moment arrives: the small picture of its graphic (in the moment's card) ---------- */
.moment-entrance-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.moment-entrance-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* The strips' size buttons wear the grid's zoom look (app-review-zoom.css .review-zoom); the strips scroll sideways at every size. */
.moments-zoom { margin-top: 0; margin-bottom: 8px; }

/* ---------- a card to a day: the date and weekday, how many, a chevron; the body is the moments ---------- */
.moments-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 8px; min-width: 0; }
.moments-open-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; font-size: .9rem; cursor: pointer; }
.moments-open-all input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--gold); }
.moments-open-all-glyph { flex: none; }
.moments-open-all:active { transform: scale(.97); }
.moments-open-all.is-on { font-weight: 700; }
.moments-list { overflow-anchor: none; }   /* the page is placed by revealMomentDay, not by the browser holding a lower element still */
.moments-day-card { scroll-margin-top: calc(var(--header-h, 0px) + 8px); }
.moments-bar .moments-zoom { margin: 0; }
.moments-day-card { min-width: 0; margin: 0 0 10px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.moments-day-card[data-open="true"] { border-color: var(--gold-deep, var(--gold)); }
.moments-day-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 56px;
  padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
/* The finger's press shows at once, before the tap's work has run. */
.moments-day-head, .moment-ctl, .moment-chip { touch-action: manipulation; }
.moments-day-head:active { background: var(--surface-2); }
.moment-ctl:active { transform: scale(.96); }
.moments-day-words { display: flex; flex-direction: column; min-width: 0; }
.moments-day-title { font-size: 1rem; overflow-wrap: anywhere; }
.moments-day-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.moments-day-chevron { display: inline-flex; flex: none; }
.moments-day-body { min-width: 0; padding: 0 12px 6px; }
.moment-row[hidden], .moment-cell[hidden] { display: none; }

/* A name is a button: a tap opens the moment's card. */
.moment-name .moment-open { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: unset; overflow: visible; max-width: 100%; margin: 0; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: start; text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; overflow-wrap: break-word; }   /* the whole name wraps, cut at a word: a break inside a word only where one word is wider than the line */
.moment-name .moment-open[hidden] { display: none; }
.moment-name-state { display: block; font-size: .8em; color: var(--muted); }   /* the state on its own line: never glued to a caption of the other direction */
.moment-arrives { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; margin: 6px 0 0; padding: 6px 12px 6px 6px; box-sizing: border-box;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.moment-arrives[hidden] { display: none; }
.moment-arrives[data-entrance]:not([data-entrance="auto"]) { border-color: var(--gold-deep, var(--gold)); }
.moment-arrives-words { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.moment-arrives-words small { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.moment-arrives-words strong { font-size: .9rem; overflow-wrap: anywhere; }
.moment-arrives-go { flex: none; }
[dir="rtl"] .moment-arrives-go { transform: scaleX(-1); }
.moment-entrance-thumb { color: var(--gold); }

/* ---------- More options: a panel over the top of the list ---------- */
.moments-more-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; margin-top: 8px; padding: 6px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.moments-more-btn[aria-expanded="false"] .more-chevron-open, .moments-more-btn[aria-expanded="true"] .more-chevron-closed { display: none; }
.moments-more-panel { position: absolute; inset-inline: 0; top: 100%; z-index: 5; max-height: min(72svh, 36rem); overflow-y: auto; overscroll-behavior: contain;
  margin-top: 4px; padding: 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 32px rgba(0, 0, 0, .28); }
.moments-more-panel[hidden] { display: none; }
.moments-more-panel .review-toolbar { margin-top: 0; }
.moments-more-panel .review-zoom, .moments-more-panel #review-duration { display: none; }   /* the size pair below is the one for the strips */
.moments-more-panel .tool-label { display: block; font-size: .72rem; font-weight: 600; line-height: 1.1; color: var(--muted); white-space: normal; text-align: center; }
.moments-more-panel .teaser-quick-select button, .moments-more-panel .review-dice, .moments-more-panel .review-filter-btn,
.moments-more-panel .moments-size-row .review-toolbar-btn { width: auto; height: auto; min-height: 52px; padding: 6px 4px 4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; }
.moments-more-panel .review-filter-btn { flex: 0 0 64px; }
.moments-size-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.moments-size-label { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: .9rem; }
.moments-options-slot { min-width: 0; }
.moments-options-slot .review-teaser-switch { margin-inline: 0; }
.moments-more-panel .moments-meta { margin-top: 10px; }

/* ---------- a moment's card ---------- */
html.moment-card-open { overflow: hidden; }
.moment-card-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(20, 16, 10, .5); }
/* Bounded by the smallest visible height (svh: the phone's screen with the address bar shown), so the Done button is never below the
   screen; the grip, the head and Done stay, the body scrolls inside. */
.moment-card { position: fixed; z-index: 51; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100svh - 24px); overflow: hidden;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
@media (min-width: 700px) { .moment-card { inset-inline: 0; margin-inline: auto; width: 480px; inset-block-end: 24px; border-radius: 22px; } }
.moment-card-grip { flex: none; align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.moment-card-head { flex: none; display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-height: 34svh; }
.moment-card-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.moment-card-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -4px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; }
.moment-card-x[hidden] { display: none; }
.moment-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The body scrolls; its children keep their own height. As shrinkable flex items they were squeezed to fit the sheet: the photograph strip to
   a thin band and the form grid clipped under Done, with nothing to scroll. */
.moment-card-body > * { flex: none; }
.moment-card-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
/* The name and its pencil share a line; the pencil is a 44px target that wraps below a long name's last line rather than overflowing. */
.moment-card-titlerow { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.moment-card-titlerow .moment-card-title { flex: 1 1 auto; min-width: 0; padding-block: 8px; }
.moment-card-rename, .moment-card-title-save { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; }
.moment-card-title-save { background: var(--gold); color: #14100a; }
.moment-card-title-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--gold); border-radius: 12px; background: transparent; color: var(--ink);
  font: inherit; font-size: 1rem; }   /* 16px: a phone does not zoom the page on focus */
.moment-card-title-hint { margin: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
/* The name's edit mode: the editable pane above the original on a phone, side by side (editable left, original right in any page direction) on a wide landscape screen. */
.moment-card-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; direction: ltr; }
html[dir="rtl"] .moment-card-panes > * { direction: rtl; }
.moment-card-pane, .moment-card-original { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.moment-card-pane h4, .moment-card-original h4 { margin: 0; font-size: .85rem; color: var(--muted); }
.moment-card-original-text { margin: 0; max-height: 20svh; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.moment-card-title-reset { align-self: flex-start; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.moment-card-title-reset:disabled { opacity: .4; cursor: default; }
.moment-card.is-naming .moment-card-body { display: none; }   /* only the two panes and Done while the name is written */
@media (min-width: 700px) and (orientation: landscape) {
  .moment-card.is-naming { width: min(760px, calc(100vw - 32px)); }
  .moment-card-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.moment-card-time { margin: 0; font-size: .85rem; color: var(--muted); }
.moment-card-done { flex: none; min-height: 52px; border: 0; border-radius: var(--r-pill); background: var(--gold); color: #14100a; font: inherit; font-weight: 700; cursor: pointer; }
.moment-graphic-badge { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; padding: 6px 10px; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.moment-graphic-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.moment-graphic-text small { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.moment-graphic-text strong { font-size: .9rem; overflow-wrap: anywhere; }
.moment-graphic-go { flex: none; }
[dir="rtl"] .moment-graphic-go { transform: scaleX(-1); }

/* the look sheet for this moment only (the sheet and its tiles are the look step's own classes) */
.moment-only { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0 0 10px; padding: 10px 14px; border: 1.5px solid var(--gold-deep, var(--gold)); border-radius: 14px;
  background: var(--selected-bg, var(--surface-2)); overflow-wrap: anywhere; }
.moment-only strong { font-size: 1.05rem; }
.moment-only span { font-size: .85rem; color: var(--muted); }
.moment-auto-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border: 2px solid var(--line-strong);
  border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.moment-auto-row.is-on { border-color: var(--accent); background: var(--selected-bg); }
.moment-auto-words { display: flex; flex-direction: column; min-width: 0; }
.moment-auto-words small { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.moment-auto-row input { width: 24px; height: 24px; margin: 0; accent-color: var(--gold); }
/* The order of the photos: the line above the list (a list glyph for the album's order, a clock for the time taken) and the
   two-way choice in More options. A busy choice shows the turning ring on the pressed button, as the view switch does. */
.moments-order-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; min-width: 0; font-size: .85rem; color: var(--muted); }
.moments-order-line .order-glyph { flex: 0 0 auto; }
.moments-order-line .order-glyph[hidden] { display: none; }
.moments-order-says { min-width: 0; }
.moments-order-change { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.moments-order-line[hidden], .moments-order-change[hidden] { display: none; }
.moments-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.moments-order-row[hidden] { display: none; }
.moments-order-choice { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.moments-order-choice button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; touch-action: manipulation; }
.moments-order-choice button[aria-pressed="true"] { border-color: transparent; background: var(--gold); color: #14100a; font-weight: 700; }
.moments-order-choice button:disabled { cursor: progress; }
.moments-order-row.is-busy .moments-order-choice button[aria-pressed="true"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: picker-view-turn .7s linear infinite; }
.moments-order-note { flex: 1 1 100%; margin: 0; font-size: .8rem; color: var(--muted); }

/* ---------- the film's length (app-review-length.js): one slider, floating over the photo step's foot bar and at the top of
   the Pace and length sheet. Logical sides throughout: in Hebrew and Arabic the range mirrors and so do its words. ---------- */
.film-length { min-width: 0; margin: 10px 0 2px; }
.film-length[hidden] { display: none; }
.film-length-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.film-length-head label { font-size: .9rem; color: var(--ink-dim); }
.film-length.is-estimate .film-length-out { opacity: .55; }   /* the page's estimate until the ladder answers */
.film-length-updating { font-size: .7rem; color: var(--ink-dim); margin-inline-start: 6px; }
.film-length-updating[hidden] { display: none; }
.film-length.is-estimate .film-length-counts { opacity: .55; }
.film-length-out { font-size: 1.25rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.film-length-counts { margin: 2px 0 0; min-width: 0; font-size: .85rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; unicode-bidi: isolate; overflow-wrap: anywhere; }
.film-length-counts:empty { display: none; }
.film-length-track { position: relative; min-width: 0; }
.film-length-slider { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; }   /* 44 px: a finger's target */
.film-length-marks { position: relative; height: 16px; font-size: .72rem; color: var(--muted); overflow: hidden; }
.film-length-tick { position: absolute; inset-block-start: 3px; transform: translateX(-50%); white-space: nowrap; unicode-bidi: isolate; }
[dir="rtl"] .film-length-tick { transform: translateX(50%); }
.film-length-tick[hidden] { display: none; }
.film-length-tick::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: -4px; width: 1px; height: 4px; background: var(--muted); }
.film-length-full { position: absolute; inset-block-start: 3px; inset-inline-end: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-length-ends { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.film-length-ends span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-length-note, .film-length-offer { margin: 6px 0 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.film-length-note[hidden], .film-length-offer[hidden] { display: none; }
.film-length-offer { color: var(--warning); }
.film-length-make { min-height: 36px; margin-inline-start: 4px; padding: 4px 12px; border: 1.5px solid var(--gold); border-radius: var(--r-pill);
  background: transparent; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
/* Floating: on the photo step the length is ONE control, the pill that says it and the slider that changes it (the owner's
   order: the toast that said the length becomes the slider itself, no second bar anchored under the header). Fixed over
   the foot bar, the width of the bar, on both tabs; it stays put as the page scrolls. The length and what plays at it
   are written across the top, and under them a slider with a visible groove, a gold fill from the start side as far as the thumb
   (--length-share, app-review-length.js) and a round thumb at the current length; the label is for a screen reader. The whole pill is the slider's pad (fewer-more-slider.js accelerateSlider).
   The note and the offer ("Make it 3:40") rise above it as a bubble. While it shows, the foot bar's running total gives way
   to it and the toasts and the page's foot make room. */
.film-length[data-film-length="float"] { position: fixed; inset-inline: 12px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 60px); z-index: 40;
  max-width: 560px; height: 90px; margin: 0 auto; box-sizing: border-box; border: 1.5px solid var(--gold); border-radius: 28px;   /* 28: the thumb at either end clears the corner's arc */
  background: var(--surface-2); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65); }
.film-length[data-film-length="float"][hidden] { display: none; }
.film-length[data-film-length="float"]:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The pill is two bands: the length and the counts line on top, a real slider under them (a groove, the gold fill to the thumb,
   a round thumb at the current length). The thumb is an exact 22 px in a 22 px runnable track, so no browser's own vertical
   centring or margin moves it: with a transparent track and a 28 px thumb pushed down by a margin, Chrome's centring added to the
   margin and what showed was a stub at the pill's edge. 20 px is the thumb's centre at either end of its travel, which the
   groove and the fill share. */
[data-film-length="float"] .film-length-head { position: absolute; inset: 8px 0 auto; height: 20px; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
[data-film-length="float"] .film-length-head label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The word has no room beside the number in the pill: it stays for a screen reader and the dimmed figures show the wait. */
[data-film-length="float"] .film-length-updating { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-film-length="float"] .film-length-out { font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
[data-film-length="float"] .film-length-counts { position: absolute; inset-inline: 14px; top: 28px; z-index: 2; margin: 0; font-size: .75rem; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-dim); pointer-events: none; }
[data-film-length="float"] .film-length-track { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 28px; }
[data-film-length="float"] .film-length-track::before, [data-film-length="float"] .film-length-track::after { content: ""; position: absolute; inset-block-end: 19px; height: 6px; border-radius: 3px; pointer-events: none; }
[data-film-length="float"] .film-length-track::after { z-index: 0; inset-inline: 20px; background: var(--line-strong); }
[data-film-length="float"] .film-length-track::before { z-index: 1; inset-inline-start: 20px; width: calc(var(--length-share, .5) * (100% - 40px)); background: var(--gold); }
[data-film-length="float"] .film-length-slider { position: absolute; z-index: 2; inset-inline: 9px; inset-block-end: 0; width: calc(100% - 18px); height: 44px; margin: 0; border: 0; outline: 0; box-shadow: none; background: transparent; -webkit-appearance: none; appearance: none; }   /* 44 px: a finger's target */
[data-film-length="float"] .film-length-slider::-webkit-slider-runnable-track { height: 22px; background: transparent; border: 0; }
[data-film-length="float"] .film-length-slider::-moz-range-track { height: 22px; background: transparent; border: 0; }
[data-film-length="float"] .film-length-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin: 0;
  border: 3px solid var(--surface-2); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
[data-film-length="float"] .film-length-slider::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 3px solid var(--surface-2); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
[data-film-length="float"] .film-length-marks, [data-film-length="float"] .film-length-ends { display: none; }
[data-film-length="float"] .film-length-note, [data-film-length="float"] .film-length-offer { position: absolute; inset-inline: 0; bottom: calc(100% + 8px);
  margin: 0; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
/* The photo step's foot while the length floats: the bar holds only the way on, full width, and what is under both scrolls clear. */
body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar .review-bar-summary { display: none; }
body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar .next { flex: 1 1 auto; }
body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar { padding-inline: 4px; }
body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) #review-panel { padding-bottom: 170px; }
html:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) { scroll-padding-bottom: 170px; }
body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-toasts { bottom: 162px; }

/* A moment the length leaves out: its strip greys like a skipped one, under its own mark (a frame with a clock's hands,
   never Skip's dashed frame). Its controls stay: All, Best or In bring it back by hand. */
.moment-row.is-length-out .moment-open { color: var(--muted); }
.moment-row.is-length-out .moment-photo img { opacity: .3; filter: grayscale(1); }
.moment-length-mark { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 700; color: var(--gold); }
.moment-length-mark svg { flex: 0 0 auto; }
/* All photos: the same mark painted small in a tile's corner. It is a picture, not a control: no ring, no button's shape. */
#review-grid .review-tile.is-length-out img, #review-grid .review-tile.is-length-out video { opacity: .3; filter: grayscale(1); }
#review-grid .review-tile.is-length-out::before { content: ""; position: absolute; z-index: 2; inset-block-end: 8px; inset-inline-start: 8px;
  width: 18px; height: 18px; background: var(--gold); pointer-events: none;
  -webkit-mask: var(--length-out-glyph) center / contain no-repeat; mask: var(--length-out-glyph) center / contain no-repeat; }
/* The Left out view lists every tile that is not in the film, whatever the reason: they all look alike there (plain, unticked), so the
   length's dimming and clock stay for the other views, where they tell a tile apart from the ticked ones. */
#review-grid[data-filter-view="out"] .review-tile.is-length-out img, #review-grid[data-filter-view="out"] .review-tile.is-length-out video { opacity: 1; filter: none; }
#review-grid[data-filter-view="out"] .review-tile.is-length-out::before { content: none; }
#review-grid { --length-out-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 9.6V12l1.7 1'/%3E%3C/svg%3E"); }
/* The foot bar's length, while the slider decides it, is a way back to the slider. */
.review-duration[role="button"] { cursor: pointer; }

/* ---------- a wide screen (a PC): a day's moments side by side, one bar at the foot ---------- */
/* The phone's single column leaves the right of a PC empty and one moment fills the screen: a day is a grid of cards, each moment
   the width of its column, so its In / Skip buttons are the card's and several moments show at once. Reading and tab order is the
   DOM's (the row after the row), and the columns start on the reading side, so Hebrew and Arabic run right to left. The gap
   marks (shown only while something is carried) are out of the flow and take no cell. */
@media (min-width: 900px) {
  .moments-day-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px 10px; align-items: start; padding-block-end: 8px; }
  .moments-day-body > .moment-row { min-width: 0; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; }
  /* Compact card: the picture is capped to 200 px tall by its width (16:9 is 356 px wide, 4:5 is 160), so it keeps its shape; the width is
     explicit because auto margins stop a flex column item stretching, and a face without a width is 0 wide and 0 tall. */
  .moments-day-body .moment-face { width: min(100%, 356px); max-width: none; border-radius: 10px; }
  .moments-day-body .moment-face[data-shape="portrait"] { width: min(100%, 160px); max-width: none; }
  /* Title and time on one line: the title shortens, the time keeps its words. */
  .moments-day-body .moment-head { flex-wrap: nowrap; align-items: baseline; gap: 8px; }
  .moments-day-body .moment-name { flex: 1 1 auto; font-size: .88rem; }
  .moments-day-body .moment-name .moment-open { -webkit-line-clamp: 1; padding: 0; }
  .moments-day-body .moment-time { font-size: .75rem; }
  .moments-day-body .moment-plays, .moments-day-body .moment-left { font-size: .78rem; }
  .moments-day-body .moment-controls { flex-wrap: nowrap; gap: 4px; }
  .moments-day-body .moment-ctl { min-height: 30px; padding: 2px 6px; gap: 4px; border-radius: 8px; font-size: .78rem; }
  .moments-day-body .moment-ctl svg { width: 16px; height: 16px; }
  .moments-day-body .moment-photos-btn { width: 36px; height: 32px; border-radius: 9px; }
  .moments-day-body .moment-photos-btn svg { width: 20px; height: 20px; }
  .moments-day-body .moment-seam::before { height: 4px; }
  .moments-day-body .moment-seam-btn, .moments-day-body .moment-seam-mark { min-height: 28px; gap: 5px; padding-block: 1px; padding-inline: 6px 10px; font-size: .75rem; }
  .moments-day-body .moment-seam svg { width: 16px; height: 16px; }
  /* The strip wraps in its card instead of scrolling inside itself: one scrollbar on the page, none inside the cards. */
  .moment-strip { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
  .moment-row[data-few="true"] .moment-cell { height: calc(var(--moment-size, 76px) * 1.6); }
  /* The page keeps its scrollbar's room, so opening a moment's card (which stops the page scrolling) does not shift the layout. */
  html:has(#review-moments:not([hidden])) { scrollbar-gutter: stable; }

  /* The foot: the length pill on the start side and the way on (Next) on the end side of one line, at the width of the content
     column; the toasts are a single line just above it and never lie over the pill. */
  .film-length[data-film-length="float"] { inset-inline-start: max(12px, calc(50% - 380px)); inset-inline-end: auto; width: min(480px, calc(100% - 24px));
    margin: 0; bottom: max(8px, env(safe-area-inset-bottom)); }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar {
    inset-inline-start: auto; inset-inline-end: max(12px, calc(50% - 380px)); margin: 0; }
  .review-toasts, body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-toasts { bottom: 76px; gap: 6px; }
  .review-toast { padding: 8px 14px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) #review-panel { padding-bottom: 96px; }
}

/* Below the PC layout the review's foot is one band at a time: while a toast shows (its Undo, its message) the length pill gives
   its place to it and the toast sits just above the Next bar, so header, toast and Next are the most that can stack. The pill is
   back as soon as the toast is dismissed or times out. The sticky header is slimmer on this page: it keeps its way back to a blank
   wizard, with less padding under the logo. */
@media (max-width: 899px) {
  /* The phone's foot is ONE bar of one row: the length (its number, then its slider, the photo and video counts as a small line over
     the slider) fills the start side and the way on shrinks to a round arrow button at the end side, so the foot takes one band of
     about 60 px instead of two stacked panels of 150. --len-start is the room the number takes before the slider; --len-lift
     the slider's rise from the pill's foot; the groove and the fill of the base rules shift by them. */
  .film-length[data-film-length="float"] { --len-start: 60px; --len-lift: 8px; inset-inline: 12px 80px; max-width: none; margin: 0; height: 60px;
    bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 30px; }
  [data-film-length="float"] .film-length-head { inset: 0; inset-inline-end: auto; width: var(--len-start); height: auto; }
  [data-film-length="float"] .film-length-out { font-size: 1.1rem; }
  [data-film-length="float"] .film-length-counts { inset-inline: calc(var(--len-start) + 2px) 14px; top: 3px; font-size: .7rem; line-height: 1; text-align: start; }
  [data-film-length="float"] .film-length-track::after { inset-inline: calc(20px + var(--len-start)) 20px; inset-block-end: calc(var(--len-lift) + 19px); }
  [data-film-length="float"] .film-length-track::before { inset-inline-start: calc(20px + var(--len-start)); inset-block-end: calc(var(--len-lift) + 19px);
    width: calc(var(--length-share, .5) * (100% - 40px - var(--len-start))); }
  [data-film-length="float"] .film-length-slider { inset-inline: calc(9px + var(--len-start)) 9px; inset-block-end: var(--len-lift); width: calc(100% - 18px - var(--len-start)); }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar { inset-inline: auto 12px; margin: 0; padding: 3px; }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar .next { position: relative; flex: none; width: 52px; min-height: 52px; padding: 0; font-size: 0; }   /* the words stay in the button for a screen reader; the arrow is what shows */
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar .next::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; background: currentColor;
    -webkit-mask: var(--next-arrow) center / contain no-repeat; mask: var(--next-arrow) center / contain no-repeat; --next-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  [dir="rtl"] body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-bar .next::after { transform: scaleX(-1); }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) #review-panel { padding-bottom: 84px; }
  html:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) { scroll-padding-bottom: 84px; }
  body:has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]:not([hidden])) .review-toasts { bottom: 76px; }
  body:has(.review-toasts .review-toast.show) .film-length[data-film-length="float"] { display: none; }
  body:has(.review-toasts .review-toast.show):has(.review-step:not([hidden]) [data-sheet-page="film"]:not([hidden]) .film-length[data-film-length="float"]) .review-toasts { bottom: 76px; }
  body:has(.review-step:not([hidden])) .brand { padding: 6px 0 8px; }
}

/* The floating stack gives way while the page scrolls down (app-review-foot-hide.js): a transform only, so nothing reflows. */
.review-bar, .film-length[data-film-length="float"] { transition: transform .22s ease, opacity .22s ease; }
html[data-foot-away] .review-bar { transform: translateY(calc(100% + 24px)); pointer-events: none; }
html[data-foot-away] .film-length[data-film-length="float"] { transform: translateY(calc(100% + 120px)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-foot-away] .review-bar, html[data-foot-away] .film-length[data-film-length="float"] { transform: none; opacity: 0; }
}