/* Your film, the compact first page of a Movie's review (review/simple.html; look: docs/design/mocks/review_simplified.html).
   One column. Every grid track is minmax(0, 1fr) and every grid item has min-width: 0, so no label pushes the page wider than a
   320 px phone. Body text is 15 px, nothing is under 14 px, every control is 44 px or more, and a text wraps and never truncates.
   Colours come from theme.css, so the page follows the light and dark themes with it. */

.review-simple {
  --yf-track: color-mix(in srgb, var(--ink) 38%, var(--bg-2));
  --yf-fill: var(--accent);
  --yf-fill-manual: var(--violet);
  --yf-thumb: var(--ink);
  --yf-thumb-ring: var(--bg-2);
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
}
.review-simple[hidden] { display: none; }
.review-simple *, .review-simple *::before, .review-simple *::after { box-sizing: border-box; }
.review-simple :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[dir="rtl"] .yf-mirror, [dir="rtl"] .yf-mirror { transform: scaleX(-1); }

.yf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.yf-top { padding: 6px 0 4px; min-width: 0; }
.yf-top h1 { margin: 0; font-size: 1.2rem; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.yf-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 10px 0 20px; min-width: 0; align-content: start; }
.yf-block { min-width: 0; }
.yf-lbl { margin: 0; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* The strip's heading row: the title and, at the end of the same row, how many moments the thumbnails show, baseline to baseline.
   The row does not wrap: the title takes the room that is left and wraps inside its own box, the count keeps its words. The type
   scales with the width (12 px at 320 to 14 px from 390). The count is just "{shown} of {total}", short enough to stay beside the
   title at 320 px; at doubled text the title wraps inside its own box and the count stays at the row's end side. */
.yf-lblrow { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: 12px; margin: 0 0 6px; min-width: 0; }
.yf-lblrow > * { min-width: 0; overflow-wrap: anywhere; }
.yf-lblrow .yf-lbl { flex: 1 1 auto; font-size: clamp(12px, 3.6vw, 14px); }
.yf-aside { flex: 0 1 auto; margin-inline-start: auto; text-align: end; font-size: clamp(12px, 3.6vw, 14px); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; unicode-bidi: isolate; transition: opacity .2s; }
.yf-aside[hidden] { display: none; }
.yf-aside.is-stale { opacity: .55; }

/* Film length: the readout once, Auto as a status chip or, after a hand change, Back to Auto. */
.yf-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 4px; min-width: 0; }
.yf-hero > * { min-width: 0; }
.yf-val { font-size: 40px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; unicode-bidi: isolate; overflow-wrap: anywhere; }
.yf-val small { display: block; font-size: 15px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.yf-chip-auto, .yf-back-auto { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 8px 16px; min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; max-width: 100%; }
.yf-chip-auto { background: var(--gold); color: var(--on-accent); border: 1px solid var(--gold); }
.yf-back-auto { border: 2px solid var(--accent); background: var(--surface-2); color: var(--accent); cursor: pointer; }
.yf-back-auto:hover { background: var(--surface-hover); }
.yf-chip-auto svg, .yf-back-auto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.yf-chip-auto[hidden], .yf-back-auto[hidden] { display: none; }

/* The slider: a track that stands 3:1 against the page, the part up to the thumb filled, and a 44 px thumb. --yf-pct and
   --yf-auto (0 to 1) are set by the page script. */
.yf-slider { position: relative; height: 44px; margin: 6px 0 0; --yf-pct: .5; --yf-auto: .5; --yf-dir: to right; }
:root[dir="rtl"] .yf-slider, [dir="rtl"] .yf-slider { --yf-dir: to left; }
.yf-slider input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; touch-action: pan-y; }
.yf-slider input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(var(--yf-dir), var(--yf-fillc, var(--yf-fill)) calc(var(--yf-pct) * 100%), var(--yf-track) calc(var(--yf-pct) * 100%)); }
.yf-slider input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: var(--yf-track); }
.yf-slider input[type=range]::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--yf-fillc, var(--yf-fill)); }
.yf-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -17px; border-radius: 50%; background: var(--yf-thumb); border: 6px solid var(--yf-thumb-ring); box-shadow: 0 0 0 2px var(--yf-thumb); }
.yf-slider input[type=range]::-moz-range-thumb { box-sizing: content-box; width: 32px; height: 32px; border-radius: 50%; background: var(--yf-thumb); border: 6px solid var(--yf-thumb-ring); box-shadow: 0 0 0 2px var(--yf-thumb); }
.yf-slider input[type=range]:focus-visible { outline: none; }
.yf-slider input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 3px; }
.yf-slider input[type=range]:focus-visible::-moz-range-thumb { outline: 3px solid var(--accent); outline-offset: 3px; }
.yf-slider[data-mode="manual"] { --yf-fillc: var(--yf-fill-manual); }
/* Auto's place on the track: a tick that stands clear of the track, so the recommended length is found by eye. */
.yf-automark { position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--ink); opacity: .85; inset-inline-start: calc(22px + (100% - 44px) * var(--yf-auto) - 2px); pointer-events: none; }
.yf-automark[hidden] { display: none; }
/* Manual length only: the recommended length written above the track, centred on the mark. Above the track it can never meet the
   thumb or the end labels below; --yf-mark-shift (0, .5 or 1 of its own width) keeps it inside the row near either end, and the
   short form (the time alone) takes over on a narrow phone. The row grows with the label, so large text pushes the track down. */
.yf-markrow { margin-top: 2px; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--ink-dim); --yf-mark-shift: .5; }
.yf-markrow[hidden] { display: none; }
.yf-marklabel { display: block; position: relative; width: max-content; max-width: 100%; unicode-bidi: isolate; font-weight: 600; overflow-wrap: anywhere;
  inset-inline-start: calc(22px + (100% - 44px) * var(--yf-auto, .5)); transform: translateX(calc(var(--yf-mark-shift) * -100%)); }
:root[dir="rtl"] .yf-marklabel, [dir="rtl"] .yf-marklabel { transform: translateX(calc(var(--yf-mark-shift) * 100%)); }
.yf-mark-short { display: none; }
@media (max-width: 359px) { .yf-mark-long { display: none; } .yf-mark-short { display: inline; } }
.yf-ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; font-size: 14px; color: var(--muted); margin-top: 2px; }
.yf-ends > * { min-width: 0; unicode-bidi: isolate; overflow-wrap: anywhere; }
.yf-end-max { text-align: end; }
.yf-hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); min-height: 1.3em; }

.yf-note { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-dim); font-size: 15px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.yf-note[hidden] { display: none; }
.yf-act { justify-self: start; max-width: 100%; border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: var(--r-pill); padding: 8px 14px; min-height: 44px; font: inherit; font-weight: 700; cursor: pointer; }

/* In your film: six moments, the counts, how the moments are chosen. A plan being worked out dims the strip and the counts. */
.yf-sample { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.yf-sample > li { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; min-width: 0; background: var(--surface-2); margin: 0; }
.yf-sample img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yf-counts { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 15px; color: var(--ink); min-width: 0; transition: opacity .2s; overflow-wrap: anywhere; }
.yf-counts > * { min-width: 0; display: block; }
.yf-counts .yf-sub { color: var(--muted); }
.yf-counts.is-stale, .yf-sample.is-stale { opacity: .55; }
.yf-glance { margin: 0; font-size: 14px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.yf-glance[hidden] { display: none; }
.yf-glance.is-stale { opacity: .55; }
.yf-hero.is-estimate .yf-val, .yf-foot-len.is-estimate { opacity: .55; }   /* the length is the page's estimate until the plan answers */
.yf-why > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-dim); list-style: none; }
.yf-why > summary::-webkit-details-marker { display: none; }
.yf-why > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-start: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.yf-why[open] > summary::after { transform: rotate(-135deg); }
.yf-why p { margin: 0 0 6px; color: var(--ink-dim); min-width: 0; overflow-wrap: anywhere; }
.yf-why p:empty { display: none; }

/* The rows at the foot: one grouped list, hairlines, no boxes. Fine-tune and Shape and other settings. */
.yf-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.yf-list > * { border-bottom: 1px solid var(--line); min-width: 0; }
.yf-entry { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px; text-align: start; border: 0; background: none; padding: 10px 0; min-height: 56px; cursor: pointer; font: inherit; color: inherit; }
.yf-entry:has(> svg:first-child) { grid-template-columns: 28px minmax(0, 1fr) 20px; }
.yf-entry svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yf-entry .yf-chev { justify-self: end; width: 20px; }
.yf-words { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
/* The Fine-tune title and its sentence wrap; they are never cut off at 320, 360 or 390 px. */
.yf-t { font-weight: 700; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.yf-s { font-size: 15px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; white-space: normal; }
/* Your journey: the last section before Create. The picture is the closing map as the build draws it, shown whole (contain). The
   frame takes the picture's own aspect ratio (--yf-r, set by the page script from the film's shape before the picture comes and
   from its natural size once it has), capped by --yf-max so it stays 200 to 240 px tall for a landscape map and at most 300 px
   for a portrait one: the card is a preview, and the dialog below shows the map at full size. The image is absolutely placed in the frame: a percentage height on an in-flow image
   inside a grid cell does not resolve, which let the picture overflow and be cropped by the frame. A tap opens it larger in the
   dialog below. */
.yf-journey { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 4px 0 6px; }
.yf-journey[hidden] { display: none; }
.yf-journey .yf-lbl { margin: 0; }
.yf-journey .yf-s { margin: 0; }
.yf-map { --yf-r: 1.7778; --yf-max: 240px; position: relative; display: block; min-width: 0; width: min(100%, calc(var(--yf-max) * var(--yf-r))); aspect-ratio: var(--yf-r); min-height: 200px; margin-inline: auto; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; cursor: zoom-in; font: inherit; color: inherit; }
/* A portrait map would be a narrow strip (about 170 px wide): the card is a wider 6:5 box across the available width, no taller than
   300 px (it is 216 to 300 px tall from 320 to 390 px wide, never taller than the strip it replaces), and the picture covers it so the
   route, which lies in the middle of the map, fills the box. The crop is fixed (centre): the server's answer carries no route box.
   Only the card is cropped; the dialog shows the whole map. */
.yf-map[data-shape="portrait"] { --yf-max: 300px; width: min(100%, calc(var(--yf-max) * 1.2)); aspect-ratio: 6 / 5; min-height: 0; }   /* not --yf-r: the page script sets that inline to the picture's own ratio */
.yf-map img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.yf-map[data-shape="portrait"] img, .yf-map[data-shape="portrait"] .yf-route-movie { object-fit: cover; object-position: 50% 50%; }
.yf-map img[hidden] { display: none; }
/* The animation of the same map over the still: same frame, same fit, fading in once it plays. */
.yf-route-movie { display: block; width: 100%; object-fit: contain; object-position: center; animation: yf-route-movie-in 400ms ease both; }
.yf-map .yf-route-movie { position: absolute; inset: 0; height: 100%; }
.yf-route-dialog .yf-route-movie { height: auto; max-height: 80vh; max-height: 80dvh; border-radius: var(--r-md); }
.yf-route-movie[hidden], .yf-route-dialog img[hidden] { display: none; }
@keyframes yf-route-movie-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .yf-route-movie { animation: none; } }
.yf-route-dialog { width: min(720px, 96vw); }
.yf-route-dialog .look-header { margin-bottom: 10px; }
.yf-route-dialog .look-close { width: 44px; height: 44px; }
.yf-route-dialog .look-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.yf-route-dialog img { display: block; width: 100%; height: auto; max-height: 80vh; max-height: 80dvh; object-fit: contain; border-radius: var(--r-md); }
.yf-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; font-weight: 700; overflow-wrap: anywhere; }
.yf-row > summary::-webkit-details-marker { display: none; }
.yf-row > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-inline-end: 4px; transition: transform .2s; }
.yf-row[open] > summary::after { transform: rotate(-135deg); }
.yf-row-body { padding: 0 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.yf-row-body > * { min-width: 0; }
.yf-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 15px; color: var(--ink-dim); padding: 10px 0 14px; }
.yf-kv > * { min-width: 0; overflow-wrap: anywhere; }
.yf-kv b { color: var(--ink); font-weight: 600; text-align: end; }
.yf-kv[hidden] { display: none; }

/* Create: the last row of the page, so the page never ends behind it, pinned while the page scrolls, clear of the phone's
   bottom edge. The bar is solid in the card's own surface colour (nothing shows through it), with a hairline and no tint or shadow. The button is the page's #review-continue, moved in by the page script. */
.yf-foot { position: sticky; bottom: 0; z-index: 5; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.yf-foot:not(:has(#review-continue)) { display: none; }
.yf-foot .yf-note { margin: 0 0 8px; }
.yf-wait { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.yf-spin { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; animation: yf-spin 1s linear infinite; }
@keyframes yf-spin { to { transform: rotate(360deg); } }
.yf-foot #review-continue { width: 100%; min-height: 52px; margin: 0; }
/* Held Create is paler by colour, not by opacity: a translucent button would show what is behind its label. */
.yf-foot #review-continue:disabled { opacity: 1; background: color-mix(in srgb, var(--accent) 35%, var(--surface)); color: color-mix(in srgb, var(--ink) 65%, var(--surface)); }
/* The length beside Create: the page's one live length (the hero's value), so the foot says it while the page scrolls. */
.yf-foot-len { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 14px; color: var(--muted); min-width: 0; }
.yf-foot-len[hidden] { display: none; }
.yf-foot-len b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  .yf-counts, .yf-row > summary::after { transition: none; }
  .yf-spin { animation: none; }
}

/* Fine-tune's header: the moments screen's one h1 while it is open (app-review-simple-fine.js). The panel's own step headings are
   not shown then, so the page has one heading. Text wraps: min-width 0 on the grid item, no ellipsis. */
.yf-fine-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 4px 0 8px; }
.yf-fine-head[hidden] { display: none; }
.yf-fine-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.35rem; }
.yf-fine-head .create { min-height: 44px; }
/* Your film is the first page: its own h1 is the one heading, so the panel's eyebrow and title row are not shown (Keep and Back stay). */
#review-panel.yf-film .review-header .eyebrow, #review-panel.yf-film .review-title-row { display: none; }
#review-panel.yf-fine .review-title-row h2, #review-panel.yf-fine .review-step h3 { display: none; }
/* Done is Fine-tune's one way on: the wizard's Next would walk the old pages instead of returning to Your film. */
#review-panel.yf-fine .review-bar [data-rnext] { display: none; }

/* Fine-tune's foot is the film length with Create beside it (app-review-bar.js moves the real Create into the review bar, and
   app-review-steps.js shows it): one Create on screen, the same button Your film's foot holds when Fine-tune is closed.
   On a phone the length pill and the Create bar stack, two rows of the same width; on a wide screen they stand on one line. */
#review-panel.yf-fine .review-bar .review-continue-top { flex: 1 1 auto; min-height: 48px; }
@media (max-width: 899px) {
  #review-panel.yf-fine .review-bar { inset-inline: 12px; padding: 3px; }
  #review-panel.yf-fine .film-length[data-film-length="float"] { inset-inline: 12px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px); }
  body:has(#review-panel.yf-fine .review-bar:not([hidden])) #review-panel { padding-bottom: 150px; }
  html:has(#review-panel.yf-fine .review-bar:not([hidden])) { scroll-padding-bottom: 150px; }
  body:has(#review-panel.yf-fine .review-bar:not([hidden])) .review-toasts { bottom: 140px; }
}