/* ============ Set up your videos ============
   Checklist, one video's setup, shot timeline, step tracker and the editor's shot sheet.
   Uses the shared tokens in styles.css; primary buttons come from buttons.css. */

/* Choose videos: format chips */
.format-row{display:flex;flex-wrap:wrap;gap:6px}
.format-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--surface);font:inherit;font-size:var(--t-xs);font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.format-chip.is-on{box-shadow:inset 0 0 0 2px var(--selection,#326fbd);color:var(--selection-text,#244c7f)}
.format-chip:disabled{color:var(--text-3);background:transparent;box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}

/* Checklist */
.setup-page{max-width:880px;margin-inline:auto}
/* One card, one row per video, divided by a single line. */
.setup-list{display:grid;margin:0;padding:0;list-style:none;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.setup-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:var(--s-4);padding:10px var(--s-4) 10px 10px}
.setup-row+.setup-row{border-top:1px solid var(--line)}
.setup-thumb{position:relative;display:block;width:88px;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--inset)}
.setup-thumb .photo{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.setup-thumb-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms ease}
.setup-thumb-still.is-ready{opacity:1}
.setup-thumb-map{display:grid;place-items:center;width:100%;height:100%;color:var(--accent);background:linear-gradient(135deg,#eaf1fb,#dfe9f7)}
.setup-row-body{display:grid;gap:2px;min-width:0}
.setup-row-body h2{font-size:var(--t-lg);font-weight:700;line-height:22px}
.setup-row-body p{font-size:var(--t-sm);color:var(--text-2)}
.setup-row-body .status{margin-top:4px}
.setup-row-action{display:flex;gap:var(--s-2);align-items:center}
.setup-row-steps{grid-column:2/-1}
.status-ready-to-create{color:var(--accent)}

/* Step tracker */
.job-steps{display:grid;gap:var(--s-2)}
.progress.is-bare{padding-top:0}
.job-step-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.job-step{display:flex;align-items:flex-start;gap:var(--s-2);min-height:24px;font-size:var(--t-sm);line-height:20px;color:var(--ink)}
.job-step-mark{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:999px}
.job-step.is-succeeded .job-step-mark{background:var(--success);color:#fff}
.job-step.is-succeeded .job-step-mark .icon{width:12px;height:12px;stroke-width:3}
.job-step.is-queued{color:var(--text-3)}
.job-step-dot{width:6px;height:6px;border-radius:999px;background:var(--line-strong)}
.job-step-spin{width:16px;height:16px;border-radius:999px;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.job-step.is-running{font-weight:700}
.job-step.is-failed .job-step-mark{color:var(--danger)}
.job-step-text{display:grid;flex:1;min-width:0}
.job-step-error{color:var(--danger);font-weight:500}
.job-step .btn.small{min-height:30px;padding:4px 12px}

/* One video's setup */
.setup-item{display:grid;gap:var(--s-4)}
.setup-reels{margin:0 0 var(--s-4)}
.setup-player{position:relative;justify-self:center;width:min(100%,calc(44vh * 16 / 9));aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#111;box-shadow:var(--shadow-sm)}
.setup-player.is-portrait{width:auto;height:min(62vh,520px);aspect-ratio:9/16}
.setup-player video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.setup-play{position:absolute;left:var(--s-3);bottom:var(--s-3);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--ink);box-shadow:0 2px 10px #0003;cursor:pointer;transition:transform var(--ease)}
.setup-play:hover{transform:scale(1.06)}
.setup-play:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.setup-sample{position:absolute;top:var(--s-3);left:var(--s-3);padding:2px 8px;border-radius:999px;background:rgb(0 0 0 / .5);color:#fff;font-size:var(--t-xs);font-weight:600}
.setup-hint{display:flex;align-items:center;gap:6px;margin-top:calc(var(--s-2) * -1);font-size:var(--t-sm);color:var(--text-2)}
.setup-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.setup-fields .field{margin:0}
/* On a wide screen the action row is just a row; on a phone it becomes a sticky bar (below). */
.setup-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:var(--s-5) 0 0}
.setup-bar-note{font-size:var(--t-sm);color:var(--text-2)}
.setup-bar-note.is-warning{color:var(--warning)}
.setup-bar .btn{flex:none;min-height:48px;padding-inline:22px}

/* Shot timeline (setup and editor) */
.tl{--tl-pos:0%;position:relative;padding-top:20px;user-select:none;touch-action:pan-y}
.tl-ruler{position:absolute;top:0;left:0;right:0;height:18px;border-radius:6px;background:var(--inset);cursor:ew-resize}
.tl-ruler:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.tl-tick{position:absolute;bottom:3px;width:1px;height:5px;background:var(--line-strong)}
.tl-tick.is-major{height:9px;background:var(--text-3)}
.tl-track{position:relative;height:72px}
.tl-cube{position:absolute;top:0;bottom:0;padding:0 2px;border:0;background:none;cursor:pointer}
.tl-cube-inner{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);container-type:inline-size}
.tl-cube .photo{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.tl-cube .photo img{pointer-events:none}
.tl-cube.is-active .tl-cube-inner{box-shadow:0 0 0 2px var(--selection,#326fbd),0 3px 8px #00000024}
.tl-cube:hover .tl-cube-inner{box-shadow:0 0 0 2px var(--accent-line),0 3px 8px #0000001a}
.tl-cube.is-active:hover .tl-cube-inner{box-shadow:0 0 0 2px var(--selection,#326fbd),0 3px 8px #00000024}
.tl-cube:focus-visible{outline:none}
.tl-cube:focus-visible .tl-cube-inner{box-shadow:0 0 0 3px var(--focus,#326fbd)}
.tl-fx{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);padding:1px 6px;border-radius:999px;background:rgb(0 0 0 / .62);color:#fff;font-size:10px;font-weight:600;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A shot too narrow for its effect name drops the label; the name stays in the tooltip and the shot sheet. */
@container (max-width:84px){.tl-fx{display:none}}
.tl-badge{position:absolute;inset:0;display:grid;place-items:center;padding:4px;background:rgb(255 255 255 / .8);color:var(--accent);font-size:var(--t-xs);font-weight:700;text-align:center}
.tl-cube.is-selected .tl-cube-inner,.tl-cube.is-selected:hover .tl-cube-inner{box-shadow:0 0 0 3px var(--accent),0 3px 8px #00000024}
.tl-check{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.tl-check::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Multi-select toolbar above the shot timeline (bulk redo) */
.shot-select{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-2);min-height:32px}
.shot-select-count{font-size:var(--t-sm);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shot-select-hint{flex:1 1 160px;min-width:0;font-size:var(--t-xs)}
.shot-select-hint[data-pick-limit]{color:var(--danger,#b42318)}
.shot-select [data-bulk-redo]{margin-left:auto}
.tl-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3)}
.tl-playhead{position:absolute;top:0;bottom:-4px;left:var(--tl-pos);width:2px;margin-left:-1px;background:#e5322d;border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px #fff8}
.tl-playhead::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:3px 3px 6px 6px;background:#e5322d}

/* Local Tour */
.setup-city{display:grid;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.setup-city .field{margin:0}
.setup-city .btn{justify-self:start}
.setup-city-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.setup-voice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:var(--s-3) 0 0}
.setup-voice-label{font-weight:600;font-size:var(--t-sm)}
.setup-voice .link-button{display:inline-flex;align-items:center;gap:4px}
.place-photo-fix{display:grid;gap:var(--s-3);margin:var(--s-3) 0;padding:0;list-style:none}
.place-photo-fix li{display:grid;gap:4px}
.place-photo-fix label{font-weight:600}
.research{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.research-top{display:flex;align-items:center;gap:var(--s-3)}
.research-progress .progress-bar{animation:research-fill 2.8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes research-fill{from{width:4%}to{width:96%}}
.research-tip{min-height:20px;font-size:var(--t-sm);color:var(--text-2)}
.setup-item>.section-head{margin:0}
.setup-item>.section-head h2{font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em}
.place-list{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.place-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);cursor:grab}
.place-card.is-chosen{box-shadow:0 0 0 2px var(--accent),var(--shadow-lg)}
.place-card.is-ghost{opacity:.35;background:var(--accent-soft)}
.place-head{display:flex;align-items:center;gap:var(--s-2)}
.place-grip{display:grid;place-items:center;color:var(--text-3)}
.place-n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--t-xs);font-weight:700}
.place-copy{display:grid;flex:1;min-width:0}
.place-name{min-height:36px;padding:4px 8px;margin-left:-8px;border:1px solid transparent;border-radius:8px;background:transparent;font:inherit;font-size:var(--t-lg);font-weight:700;color:var(--ink);box-shadow:none}
.place-name:hover{border-color:var(--line)}
.place-name:focus{border-color:var(--selection,#326fbd);background:var(--surface);outline:none}
.place-copy small{font-size:var(--t-sm);color:var(--text-2)}
.place-photos{display:grid;grid-template-columns:repeat(3,96px);gap:6px}
.place-photo{position:relative}
.place-photo label{display:grid;place-items:center;align-content:center;gap:4px;aspect-ratio:4/3;padding:4px;border:1.5px dashed var(--line-strong);border-radius:var(--r-md);color:var(--text-2);font-size:11px;line-height:13px;font-weight:600;text-align:center;cursor:pointer;overflow:hidden;transition:border-color var(--ease),background var(--ease)}
.place-photo label:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.place-photo input:focus-visible+label{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.place-photo.has-photo label{border-style:solid;border-color:var(--line)}
.place-photo img{width:100%;height:100%;object-fit:cover}
.place-photo .btn{position:absolute;top:3px;right:3px;min-height:24px;width:24px;padding:0;background:rgb(255 255 255 / .9)}
.setup-script{display:grid;gap:var(--s-2);margin:0}
.setup-script textarea{min-height:150px;line-height:1.55}
.setup-script.is-sections textarea{min-height:0}
.setup-script-head{margin:var(--s-2) 0 0}
.setup-script-head h3{margin:0;font-size:var(--t-md)}
.script-part{margin:0}
.script-part label{font-size:var(--t-sm);color:var(--text-2)}
.place-side{display:grid;gap:var(--s-2);justify-items:start}
.place-sig{margin:0;width:100%}
.place-sig label{font-size:var(--t-xs);font-weight:600;color:var(--text-2)}
.place-sig input{min-height:36px}
.place-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.place-rating{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--ink)}
.place-rating .icon{color:#e8a317;fill:#e8a317}
.place-why{margin:2px 0 0;font-size:var(--t-sm);line-height:1.4;color:var(--text-2)}
.place-sources{margin:2px 0 0;font-size:var(--t-xs);color:var(--text-3)}
.place-sources a{color:var(--text-2)}
.place-card.is-busy{opacity:.7}
.search-suggestions{margin:var(--s-2) 0 0}
.search-suggestions iframe{display:block;width:100%;height:56px;border:0;color-scheme:light}
.place-name{width:100%;min-width:0;text-overflow:ellipsis}

/* Listing page */
.group-action{margin-left:auto}

/* Editor timeline and shot sheet */
.ed-timeline-wrap{margin-top:var(--s-4);padding:var(--s-3) var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.shot-sheet{display:grid;gap:var(--s-3)}
.shot-sheet-media .photo,.shot-sheet-media .tpl-map{aspect-ratio:16/9;border-radius:var(--r-md)}
.shot-sheet-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.glitch{border-top:1px solid var(--line);padding-top:var(--s-3)}
.glitch summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.glitch[open] summary{margin-bottom:var(--s-3);color:var(--ink)}
.glitch-reasons{margin-bottom:var(--s-3)}
.glitch-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm)}
.tl-tag{position:absolute;top:4px;right:4px;z-index:1;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;line-height:16px}
.shot-sheet-media{position:relative}
.shot-sheet-media .tl-tag{top:8px;right:8px;font-size:var(--t-xs);line-height:20px;padding:0 8px}
.redo-form{display:grid;gap:var(--s-3)}
.redo-form .field{margin:0}
.redo-label{margin:0 0 var(--s-2);font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.redo-q .glitch-reasons{margin:0}
/* Redo sheet: camera moves as looping preview tiles on the shot's own photo.
   Motion is keyed by CAMERA_MOVES[].preview (video-library.js) and stands in for real clips (previewVideo).
   Tiles only exist while the "Redo this shot" sheet is open, so nothing animates otherwise. */
.cam-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.cam-tile{position:relative;display:grid;align-content:start;gap:6px;min-width:0;padding:4px 4px 8px;border:0;border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;text-align:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--ease),background-color var(--ease)}
.cam-tile:hover{background:var(--hover)}
.cam-tile:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.cam-tile[aria-checked=true]{background:var(--selection-wash,#f3f7fd);box-shadow:inset 0 0 0 2px var(--selection,#326fbd)}
.cam-tile[aria-checked=true] .cam-label{color:var(--selection-text,#244c7f)}
.cam-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r-md) - 4px);background:var(--ink);isolation:isolate}
.cam-grid.is-portrait .cam-media{aspect-ratio:9/16}
.cam-media img,.cam-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.cam-label{font-size:var(--t-xs);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.cam-tag{position:absolute;top:4px;left:4px;z-index:2;padding:0 6px;border-radius:999px;background:rgb(0 0 0 / .6);color:#fff;font-size:10px;font-weight:700;line-height:16px}
.cam-check{position:absolute;top:8px;right:8px;z-index:3;display:none;place-items:center;width:18px;height:18px;border-radius:999px;background:var(--selection,#326fbd);color:#fff;box-shadow:0 0 0 2px #fff}
.cam-tile[aria-checked=true] .cam-check{display:grid}
.cam-glyph{position:absolute;right:4px;bottom:4px;z-index:2;display:none;min-width:18px;padding:0 5px;border-radius:999px;background:rgb(0 0 0 / .6);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.cam-media img{animation:3.2s ease-in-out infinite both;will-change:transform,opacity}
.cam-push-in img{animation-name:cam-push-in}
.cam-pull-out img{animation-name:cam-pull-out}
.cam-pan-left img{animation-name:cam-pan-left}
.cam-pan-right img{animation-name:cam-pan-right}
.cam-rise img{animation-name:cam-rise}
.cam-orbit{perspective:420px}
.cam-orbit img{animation:cam-orbit 3s ease-in-out infinite alternate}
.cam-still::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .22) 50%,transparent 65%);transform:translateX(-100%);animation:cam-shimmer 3.2s ease-in-out infinite;pointer-events:none}
/* Directional moves fade through at the loop seam so the direction stays readable (no ping-pong). */
@keyframes cam-push-in{0%{transform:scale(1);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:scale(1.18);opacity:0}}
@keyframes cam-pull-out{0%{transform:scale(1.18);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes cam-pan-left{0%{transform:translateX(-6%) scale(1.15);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(6%) scale(1.15);opacity:0}}
@keyframes cam-pan-right{0%{transform:translateX(6%) scale(1.15);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(-6%) scale(1.15);opacity:0}}
@keyframes cam-rise{0%{transform:translateY(-6%) scale(1.15);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(6%) scale(1.15);opacity:0}}
@keyframes cam-orbit{from{transform:translateX(-3%) rotateY(-7deg) scale(1.15)}to{transform:translateX(3%) rotateY(7deg) scale(1.15)}}
@keyframes cam-shimmer{0%,25%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (max-width:480px){
  .cam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cam-grid.is-portrait .cam-media{aspect-ratio:3/4}
}
/* Reduced motion: a still frame plus a small arrow for the direction. */
@media (prefers-reduced-motion:reduce){
  .cam-media img,.cam-still::after{animation:none!important;opacity:1}
  .cam-still::after{display:none}
  .cam-glyph{display:block}
  .cam-current .cam-glyph{display:none}
  .cam-push-in .cam-glyph::before{content:"\2295"}
  .cam-pull-out .cam-glyph::before{content:"\2296"}
  .cam-pan-left .cam-glyph::before{content:"\2190"}
  .cam-pan-right .cam-glyph::before{content:"\2192"}
  .cam-orbit .cam-glyph::before{content:"\21BB"}
  .cam-rise .cam-glyph::before{content:"\2191"}
  .cam-still .cam-glyph::before{content:"\2022"}
}

/* Editor: the video on stage, tracks under the shots on one time axis */
.ed-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111;cursor:pointer}
.ed-player .ed-overlay{pointer-events:none}
.ed-stage-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border:0;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--ink);box-shadow:0 4px 18px #0004;cursor:pointer;transition:transform var(--ease)}
.ed-stage-play:hover{transform:scale(1.06)}
.ed-stage-play:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:3px}
.ed-stage-play[hidden]{display:none}
.ed-stage-chip{position:absolute;top:var(--s-3);left:var(--s-3);padding:2px 10px;border-radius:999px;background:rgb(0 0 0 / .55);color:#fff;font-size:var(--t-xs);font-weight:600;pointer-events:none}
.ed-clock{font-variant-numeric:tabular-nums}
.ed-update{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3);padding:10px 10px 10px var(--s-4);border-radius:var(--r-lg);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.ed-update p{margin:0;font-size:var(--t-sm);color:var(--ink)}
.ed-update small{display:block;color:var(--text-2);font-size:var(--t-xs)}
.ed-update .btn{flex:none}
.ed-update.is-rendering{display:block;padding:var(--s-3) var(--s-4)}
.ed-timeline-wrap{display:grid;gap:var(--s-2);--tl-pos:0%}
.ed-lane{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:var(--s-2)}
.ed-lane-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:var(--t-xs);font-weight:600;color:var(--text-2)}
.ed-lane-shots .ed-lane-head{align-self:start;padding-top:44px}
.ed-tracks{display:grid;gap:var(--s-2)}
.ed-track-bar{position:relative;display:block;width:100%;height:40px;padding:0;border:0;border-radius:10px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;cursor:pointer;font:inherit;text-align:left}
.ed-track-bar:hover{box-shadow:inset 0 0 0 2px var(--accent-line)}
.ed-track-bar:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.ed-track-bar::after{content:"";position:absolute;top:0;bottom:0;left:var(--tl-pos);width:2px;margin-left:-1px;background:#e5322d;pointer-events:none}
.ed-track-bar .waveform{position:absolute;inset:6px 4px;height:auto;gap:1px}
.ed-track-bar .waveform span{min-width:1px;background:var(--accent);opacity:.5}
.ed-track-bar .waveform span.outside-trim{background:var(--line-strong);opacity:1}
.ed-vo-seg{position:absolute;top:8px;bottom:8px;border-left:2px solid var(--surface);border-radius:6px;background:var(--accent-line)}
.ed-vo-seg.is-place{display:flex;align-items:center;overflow:hidden;padding:0 6px}
.ed-vo-label{overflow:hidden;font-size:10px;font-weight:600;line-height:1;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.ed-track-name{position:absolute;left:6px;top:50%;max-width:calc(100% - 12px);padding:0 8px;border-radius:999px;background:rgb(255 255 255 / .92);color:var(--ink);font-size:var(--t-xs);font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(-50%);box-shadow:var(--shadow-xs)}
.ed-track.is-off .waveform span,.ed-track.is-off .ed-vo-seg{background:var(--line-strong);opacity:1}
.ed-track.is-off .ed-track-name{color:var(--text-3)}
.ed-track.is-busy .ed-track-bar{background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .7) 50%,transparent 70%) 0 0/200% 100%,var(--accent-soft);animation:shimmer 1.4s linear infinite}
.ed-track.is-busy .ed-track-name{color:var(--accent)}
.ios-switch{position:relative;flex:none;width:40px;height:24px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:background var(--ease)}
.ios-switch span{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:#fff;box-shadow:0 1px 3px #0003;transition:transform var(--ease)}
.ios-switch[aria-checked=true]{background:var(--selection,#326fbd)}
.ios-switch[aria-checked=true] span{transform:translateX(16px)}
.ios-switch:disabled{opacity:.5;cursor:not-allowed}
.ios-switch:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}

/* Pick lists in sheets: music and voices */
.pick-list{display:grid;gap:6px;margin-bottom:var(--s-4)}
.pick-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;min-height:48px;padding:8px var(--s-4);border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.pick-row[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--selection,#326fbd);color:var(--selection-text,#244c7f)}
.vo-row{padding:0 8px 0 0;cursor:default}
.vo-row:has([aria-checked=true]){box-shadow:inset 0 0 0 2px var(--selection,#326fbd)}
.pick-main{display:grid;flex:1;min-width:0;gap:1px;padding:8px var(--s-4);border:0;background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.pick-main span{font-weight:700}
.pick-main small{font-size:var(--t-xs);font-weight:500;line-height:1.4;color:var(--text-2)}
.pick-main[aria-checked=true] span{color:var(--selection-text,#244c7f)}
.vo-play{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:999px;background:var(--inset);color:var(--ink);cursor:pointer}
.vo-play:hover{background:var(--accent-soft);color:var(--accent)}
.vo-sheet .field{margin:0}
.vo-sheet textarea{min-height:120px;line-height:1.5}
.vo-count{margin:6px 0 0;font-size:var(--t-xs)}
.vo-free{margin-right:auto;font-size:var(--t-xs)}
.ed-export{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0}
.ed-export p{display:grid;margin:0}
.ed-export small{color:var(--text-2);font-size:var(--t-sm)}

@media (max-width:700px){
  .setup-row{grid-template-columns:64px minmax(0,1fr);gap:var(--s-3);padding:10px}
  .setup-thumb{width:64px}
  .setup-row-action{grid-column:1/-1}
  .setup-row-action .btn{flex:1}
  .setup-row-steps{grid-column:1/-1}
  .setup-fields{grid-template-columns:1fr}
  .setup-player.is-portrait{height:min(56vh,460px)}
  .tl-track{height:56px}
  .tl-fx{font-size:9px;padding:0 4px;left:2px;bottom:2px}
  .setup-bar{position:sticky;bottom:var(--s-2);flex-direction:column;align-items:stretch;gap:var(--s-2);padding:10px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);background:rgb(255 255 255 / .96)}
  .setup-bar .btn{width:100%}
  .place-card{grid-template-columns:1fr}
  .search-suggestions iframe{height:96px}
  .place-photos{grid-template-columns:repeat(3,1fr)}
  .place-photo label span{font-size:10px}
  .glitch-foot{flex-direction:column;align-items:stretch}
  .ed-lane{grid-template-columns:56px minmax(0,1fr);gap:6px}
  .ed-lane-shots .ed-lane-head{padding-top:36px}
  .ed-update{flex-direction:column;align-items:stretch}
  .shot-select [data-bulk-redo]{flex:1 1 100%;margin-left:0}
  .shot-select .btn{min-height:44px}
}

/* Shot effects (src/effects.js): "How it's made" as small pictures of the shot's own photo — as is, restyled, moving —
   with arrows between, plus notes for shared photos, effect groups and chained shots. */
.fx-info{display:grid;gap:var(--s-2)}
.fx-info .redo-label{margin:0}
.fx-steps{display:flex;align-items:flex-start;gap:18px;margin:0;padding:0;list-style:none}
.fx-step{position:relative;display:grid;gap:6px;flex:1 1 0;min-width:0;max-width:132px}
.fx-step+.fx-step::before{content:"\2192";position:absolute;left:-17px;top:calc(50% - 20px);width:16px;color:var(--text-3);font-size:13px;line-height:16px;text-align:center}
.fx-step-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r-md) - 4px);background:var(--ink);isolation:isolate}
.fx-step-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.fx-step-media.is-restyle img,.fx-step-media.is-restyled img{filter:saturate(1.35) contrast(1.05) hue-rotate(-12deg)}
.fx-step-media.is-restyle::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgb(255 255 255 / .18),transparent 55%);pointer-events:none}
.fx-step-media.is-still img{filter:grayscale(.15)}
.fx-step-glyph{position:absolute;right:4px;bottom:4px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:rgb(0 0 0 / .62);color:#fff}
.fx-step-label{font-size:var(--t-xs);font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.fx-note{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--t-sm);color:var(--text-2)}
.fx-note svg{flex:none;margin-top:2px}
.fx-note.is-chain{padding:var(--s-2) var(--s-3);border-radius:var(--r-md);background:var(--surface-soft);color:var(--ink)}

/* Revision targets (src/revision-targets.js): pick the shots a human revision is about, optionally a moment. */
.rev-targets{display:grid;gap:var(--s-2);min-width:0;margin:0 0 var(--s-3);padding:0;border:0}
.rev-targets legend{padding:0}
.rev-targets legend .muted{font-weight:400}
.rev-shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s-2);max-height:260px;overflow:auto;padding:2px}
.rev-shot{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:var(--s-2);min-width:0;padding:4px 8px 4px 4px;border:0;border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong)}
.rev-shot:hover{background:var(--hover)}
.rev-shot:focus-visible{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.rev-shot[aria-pressed=true]{background:var(--selection-wash,#f3f7fd);box-shadow:inset 0 0 0 2px var(--selection,#326fbd)}
.rev-shot.is-auto{box-shadow:inset 0 0 0 2px var(--selection,#326fbd);background:var(--surface)}
.rev-shot-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r-md) - 4px);background:var(--ink)}
.rev-shot-media .photo,.rev-shot-media .tpl-map{width:100%;height:100%;border-radius:0}
.rev-shot-media .photo img{width:100%;height:100%;object-fit:cover}
.rev-shot-media .tpl-map span{display:none}
.rev-shot-check{position:absolute;top:4px;right:4px;display:none;place-items:center;width:16px;height:16px;border-radius:999px;background:var(--selection,#326fbd);color:#fff;box-shadow:0 0 0 2px #fff}
.rev-shot[aria-pressed=true] .rev-shot-check{display:grid}
.rev-shot-text{display:grid;gap:1px;min-width:0}
.rev-shot-text strong,.rev-target-list strong{font-size:var(--t-sm);font-weight:600;line-height:1.3}
.rev-shot-fx{font-size:var(--t-xs);color:var(--text-2)}
.rev-shot-time{font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.rev-moment summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.rev-moment[open] summary{margin-bottom:var(--s-2);color:var(--ink)}
.rev-moment-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-2)}
.rev-moment-row .field{flex:0 1 96px;margin:0}
.rev-moment-row input{font-variant-numeric:tabular-nums}
.rev-summary{margin:0;font-size:var(--t-sm)}
.rev-target-view{margin-top:var(--s-3)}
.rev-target-list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.rev-target-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-md);background:var(--surface-soft)}
.rev-target-list strong{white-space:normal}
@media (max-width:700px){
  .revision-type{flex-direction:column;align-items:stretch;gap:var(--s-1)}
  .ed-revision-fee{height:auto}
  .rev-shot-grid{grid-template-columns:1fr 1fr;max-height:220px}
  .rev-shot{grid-template-columns:44px minmax(0,1fr);padding-right:4px}
  .rev-moment-row .field{flex:1 1 80px}
  .rev-moment-row .btn{width:100%}
}