/* The Film / Photo dump knob (app-mode.js) and the form reshaped around it. */
.mode-knob { border: 0; padding: 0; margin: 26px 0 8px; }
.mode-knob legend { width: 100%; }
.mode-switch {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 5px; gap: 0;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong);
}
.mode-switch[hidden] { display: none; }   /* its own display would otherwise win over [hidden] -- #review-dump-orientation is toggled this way */
.mode-switch::before {  /* the sliding thumb; it glows because this is the choice the rest of the form follows */
  content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--gold), var(--violet));
  box-shadow: 0 0 22px rgba(240, 177, 85, .6), 0 0 44px rgba(141, 123, 245, .35);
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); animation: mode-glow 2.6s ease-in-out infinite;
}
.mode-switch:has(input[value="dump"]:checked)::before { transform: translateX(100%); }
/* The review screen's 3-way film/dump/teaser picker (review/step1.html): the same knob, one more stop.
   --r-pill (999px) is sized for a short, single-line 2-way switch; three longer labels wrap onto several
   lines even stacked, and that radius on a tall box balloons into a melted stadium/blob shape instead of a
   segmented control -- both the fieldset and its sliding thumb need a normal, more modest corner instead. */
.mode-switch-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); }
.mode-switch-3::before { width: calc(33.333% - 5px); border-radius: var(--r-md); }
.mode-switch-3:has(input[value="dump"]:checked)::before { transform: translateX(100%); }
.mode-switch-3:has(input[value="teaser"]:checked)::before { transform: translateX(200%); }
.mode-switch-3 .mode-opt { padding: 8px 4px; gap: 4px; border-radius: var(--r-md); }
.mode-switch-3 .mode-ico { width: 20px; height: 20px; }
.mode-switch-3 .mode-opt strong { font-size: .92rem; }
.mode-switch-3 .mode-opt small { font-size: .7rem; }
@media (max-width: 480px) {  /* three side-by-side icon+text pairs don't fit a phone's width -- stack each */
  .mode-switch-3 .mode-opt { flex-direction: column; gap: 2px; }
  .mode-switch-3 .mode-opt span { text-align: center; }
  /* Portrait | Landscape too: "Landscape" beside its icon ran past its half of a 360 px screen. */
  .mode-switch.review-orientation .mode-opt { flex-direction: column; gap: 2px; padding: 8px 6px; }
  .mode-switch.review-orientation .mode-opt span { text-align: center; }
}
/* min-width: 0 on the item and its own children too -- a grid item's default min-width: auto ignores the
   track's own minmax(0, ...) and still refuses to shrink below its content's min-content size, which is what
   pushed "Landscape / Computers & televisions · 16:9" past the card's right edge on a phone. */
.mode-opt { position: relative; min-width: 0; margin: 0; padding: 12px 16px; cursor: pointer; text-align: center; z-index: 1; }
.mode-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-opt span { display: grid; min-width: 0; gap: 2px; }
.mode-opt strong { font-size: 1.05rem; color: var(--ink); }
.mode-opt small { color: var(--muted); font-size: .78rem; }
.mode-opt:has(input:checked) strong, .mode-opt:has(input:checked) small { color: #0b0b0f; }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-pill); }
.mode-opt:has(input:disabled) { cursor: not-allowed; opacity: .5; filter: grayscale(.4); }
/* Same "long wrapped label" fix as .mode-switch-3 above: --r-pill (999px) is sized for a short, single-line
   2-way switch, and "Portrait / Phones & social · 9:16" / "Landscape / Computers & televisions · 16:9" wrap
   onto two lines like the 3-way switch's labels do -- left at the stadium radius, the corners balloon into a
   blob that eats into the second line instead of framing it, which read as "Landscape" overflowing its pill. */
.review-orientation { border: 1px solid var(--line-strong); margin: 0 0 14px; border-radius: var(--r-lg); }
.review-orientation::before { border-radius: var(--r-md); }
.review-orientation:has(input[value="landscape"]:checked)::before { transform: translateX(100%); }
.review-orientation:has(input[value="both"]:checked)::before { transform: translateX(200%); }   /* Snaps' third stop */
/* The shape section under "Choose your format" (macros.shape_switch): its name above the switch. */
.shape-block { margin: 16px 0 0; }
.shape-label { margin: 0 2px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); }
.review-orientation .mode-opt { padding: 8px 14px; }
/* The wizard's own Film/Photo dump knob (step2.html): "A story: days, maps, captions" and "A fast reel of
   photos on the beat" are exactly the same kind of long, wrap-prone hint text -- same fix, same reason. */
.film-dump-switch { border-radius: var(--r-lg); }
.film-dump-switch::before { border-radius: var(--r-md); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.review-dump-landscape .dump-preview-frame { aspect-ratio: 16 / 9; width: min(100%, 360px); }
.mode-ico, .feat-ico { stroke: url(#ico-grad); flex: none; filter: drop-shadow(0 0 5px rgba(240, 177, 85, .45)); }
.mode-ico { width: 28px; height: 28px; stroke-width: 1.8; }
.feat-ico { width: 38px; height: 38px; }
.feat-ico.small { width: 22px; height: 22px; vertical-align: -5px; margin-right: 8px; }
.mode-opt { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mode-opt:has(input:checked) .mode-ico { stroke: #0b0b0f; filter: none; }
.mode-opt span { text-align: left; }
/* One second of the reel at the chosen cadence: a bar for every photo. */
.cadence-viz { display: flex; gap: 3px; height: 34px; margin: 6px 0 10px; padding: 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); position: relative; }
.cadence-viz i { flex: 1 1 0; min-width: 2px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--violet)); }
.cadence-viz::after { content: "1 second"; position: absolute; right: 8px; top: -18px; font-size: .7rem; color: var(--muted); }
.cadence-viz { margin-top: 22px; }
.mode-note { margin: 10px 4px 0; font-size: .85rem; color: var(--ink-dim); }
@keyframes mode-glow { 50% { box-shadow: 0 0 30px rgba(240, 177, 85, .85), 0 0 60px rgba(141, 123, 245, .5); } }
@media (prefers-reduced-motion: reduce) { .mode-switch::before { transition: none; animation: none; } }

.dump-only { display: none; }
.dump-mode .dump-only { display: revert; }
.dump-mode .film-only, .dump-mode [data-film-only] { display: none !important; }
/* Snaps (app-mode.js): photos to download, no film -- no film text; the shape cards say which photos to take
   (Snaps has a shape picker too): both, any photo; one, photos of that shape. */
.snaps-only { display: none; }
.snaps-mode .snaps-only { display: revert; }
.snaps-mode .not-snaps { display: none; }
.snaps-mode .film-only, .snaps-mode [data-film-only], .snaps-mode .dump-only { display: none !important; }
.mode-switch-3:has(input[value="snaps"]:checked)::before { transform: translateX(200%); }
/* Three choices side by side on a phone: the name and its picture; the note under them says what the chosen one is. */
@media (max-width: 600px) { .film-dump-switch.mode-switch-3 .mode-opt small { display: none; } }
.mode-opt[hidden] { display: none; }   /* .mode-opt's own display would otherwise win over [hidden] */
/* The review's picker: Film, Photo dump and (with an order for them) Snaps; the teaser is Film's own switch below it
   (four stops are too busy). A film with its teaser is still Film on the picker. */
#review-photo-mode:has(input[value="teaser"]:checked)::before { transform: none; }
#review-photo-mode:has(input[value="teaser"]:checked) .mode-opt:has(input[value="film"]) :is(strong, small) { color: #0b0b0f; }
#review-photo-mode:has(input[value="teaser"]:checked) .mode-opt:has(input[value="film"]) .mode-ico { stroke: #0b0b0f; filter: none; }
.review-teaser-switch { display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; min-height: 40px; cursor: pointer; }
.review-teaser-switch[hidden] { display: none; }
.review-teaser-switch input { width: 22px; height: 22px; flex: none; accent-color: var(--gold); cursor: pointer; }
.review-teaser-switch span { display: flex; flex-direction: column; min-width: 0; }
.review-teaser-switch strong { font-size: .92rem; }
.review-teaser-switch small { font-size: .78rem; color: var(--ink-dim); }