/* "Your choice" on the progress screen (status/app-status-choice.js): the photos chosen, six across in the film's
   order, their count and length, and the way back to choosing them. Six columns at any width: a 360 px phone draws
   each about 50 px, and two rows show before "and N more". */
.choice-summary { margin: 18px 0; padding: 16px 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); }
.choice-summary[hidden] { display: none; }
.choice-title { margin: 0 0 2px; font-size: 1.15rem; }
.choice-figures { margin: 0 0 12px; color: var(--ink-dim); }
.choice-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px; max-width: 480px; }
.choice-thumb { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); }
.choice-thumb[hidden] { display: none; }
.choice-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A video: a small play mark in its corner. */
.choice-thumb.video::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.choice-more { display: block; min-height: 44px; margin: 6px 0 0; padding: 8px 4px; border: 0; background: none;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.choice-more[hidden] { display: none; }
.choice-summary .rereview-btn { margin-top: 14px; }
.choice-restart { display: grid; gap: 8px; margin: 10px 0 0; padding: 12px; border: 1px solid var(--line-strong);
  border-radius: 12px; }
.choice-restart[hidden] { display: none; }
.choice-restart .legend { margin: 0; }
.choice-restart button { min-height: 44px; }
#choice-status:empty { display: none; }