/* The moment card's preview: the stage that plays the moment's own animation, the chips that pick it, the line that says what the film does. */
.moment-preview { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9; max-height: 42svh; border-radius: 16px; overflow: hidden; background: #14100a; }
/* The box is the film's own shape: a portrait film's preview is a portrait box, centred, not a landscape box with a strip of picture in it. The
   script sets data-shape (the film's, or a lone landscape photograph's own while only the still shows). */
@media (max-width: 899px) { .moment-preview[data-shape="portrait"] { width: auto; height: min(42svh, 120vw); max-height: none; aspect-ratio: 9 / 16; align-self: center; max-width: 100%; } }
/* The bottom 14 px belong to the progress line, so it sits below the picture and never over it. */
.moment-preview-media { position: absolute; inset: 0 0 14px 0; display: flex; align-items: center; justify-content: center; }
.moment-preview[aria-busy="true"] .moment-preview-media { opacity: .6; }
.moment-preview-media video, .moment-preview-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.moment-preview-still { opacity: .96; }
.moment-preview[aria-busy="true"] .moment-preview-still { animation: moment-preview-breathe 1.6s ease-in-out infinite; }
@keyframes moment-preview-breathe { 50% { opacity: .7; } }
.moment-preview-busy { position: absolute; inset-inline: 0; inset-block-end: 24px; margin: 0 auto; width: max-content; max-width: 90%; padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(20, 16, 10, .7); color: #fff; font-size: .8rem; }
.moment-preview-busy[hidden] { display: none; }
.moment-preview-pause { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(20, 16, 10, .72); color: #fff; cursor: pointer; }
.moment-preview-pause[hidden] { display: none; }
.moment-preview-bar { position: absolute; inset-inline: 12px; inset-block-end: 5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.moment-preview-bar i { display: block; width: 0; height: 100%; background: var(--gold); }
.moment-preview[data-state="still"] .moment-preview-bar, .moment-preview[data-state="clip"][data-playing="false"] .moment-preview-bar { opacity: .5; }
/* Three to a row: six to a row left a chip's name 44 px on a 360 px phone, and "Filmstreifen", "Tira de pelicula" or the Hebrew and
   Arabic filmstrip were cut; at three every language's name is whole on a 360 px phone, and a name of two words may take two lines. */
.moment-chips { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.moment-chips[hidden] { display: none; }
.moment-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 2px; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: .68rem; cursor: pointer; }
.moment-chip svg { flex: none; }
.moment-chip-name { max-width: 100%; overflow: hidden; text-align: center; line-height: 1.15; }
.moment-chip.is-on { background: var(--gold); border-color: var(--gold); color: #14100a; font-weight: 700; }
.moment-chip.is-dim { opacity: .4; }
/* Auto picked: the animation the stage plays as a sample wears a dashed ring, so the clip is never taken for the pick. */
.moment-chip.is-showing { border-style: dashed; border-color: var(--gold); }
.moment-preview-note { margin: 0; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.moment-preview-note[hidden] { display: none; }
.moment-film-line { flex: none; margin: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: .86rem; overflow-wrap: anywhere; }
.moment-film-line[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .moment-preview[aria-busy="true"] .moment-preview-still { animation: none; } }