/* Hit Studio move editor (#/build/move/:id). Studio tokens only: the strip
   slides under one fixed red line, the bell. */
.mv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mv-unsaved{color:var(--amber);font-size:.82rem;font-weight:600}
.mv-h1{font-size:1.6rem !important;overflow-wrap:anywhere}
.mv-warn{margin-top:12px;border:1px solid rgba(224,138,60,.45);background:rgba(224,138,60,.08);color:var(--ink);
  border-radius:12px;padding:12px 14px;font-size:.88rem;line-height:1.45}
.mv-warn b{color:var(--amber);font-family:var(--display);font-weight:700}

.mved{margin-top:14px}
.mv-head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"frame side" "play play";gap:14px;align-items:start}
.mv-frame{grid-area:frame}
.mv-side{grid-area:side}
.mv-play{grid-area:play}
.mv-frame{position:relative;height:min(36vh,330px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--hair)}
.mv-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.mv-hud{position:absolute;left:8px;top:8px;display:flex;align-items:baseline;gap:6px;padding:5px 9px;border-radius:9px;
  background:rgba(8,8,15,.78);font-family:var(--display);font-variant-numeric:tabular-nums}
.mv-hud span{font-weight:700;font-size:.72rem;color:var(--muted)}
.mv-hud b{font-weight:800;font-size:1.05rem;color:var(--ink)}
.mv-hud[data-k="work"] span{color:var(--red-ink)}
.mv-flash{position:absolute;inset:auto 0 18% 0;margin:auto;width:max-content;padding:6px 16px;border-radius:12px;
  font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.5px;background:var(--red);color:#fff}
.mv-flash[data-k="buzzer"]{background:var(--ink);color:var(--paper)}
.mv-vidmsg{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:var(--muted);font-size:.85rem}

.mv-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.mv-side .segm{margin-top:0}
.mv-read{display:flex;flex-direction:column;gap:2px}
.mv-read span{color:var(--muted);font-size:.82rem;font-weight:600}
.mv-read b{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,7vw,2.4rem);line-height:1;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.mv-sub{color:var(--muted);font-size:.82rem;line-height:1.4}
.mv-play{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mv-play .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;flex:1 1 auto;white-space:nowrap}
.mv-play .cta svg.ic{width:16px;height:16px}
.mv-play #mvPlay svg.ic{fill:currentColor;stroke:none}
.mv-play .iconb{display:grid;place-items:center}
.mv-play .iconb[aria-pressed="true"]{color:var(--amber);border-color:rgba(224,138,60,.5)}

/* the whole clip at a glance: what rest shows, what work shows, where the strip is */
.mv-over{position:relative;height:10px;border-radius:5px;background:var(--mat);margin:18px 0 0;overflow:hidden}
.mv-over i{position:absolute;top:0;bottom:0;display:block}
.mv-o-rest{background:rgba(244,242,236,.22)}
.mv-o-work{background:rgba(255,59,47,.55)}
.mv-o-tick{width:2px;background:var(--ink);margin-left:-1px}
.mv-o-view{border:1.5px solid rgba(244,242,236,.75);border-radius:5px;box-sizing:border-box}

.mv-hint{color:var(--muted);font-size:.82rem;margin:12px 0 6px}
.mv-strip{position:relative;height:82px;border-radius:12px;overflow:hidden;background:var(--mat);
  border:1px solid var(--hair);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;overscroll-behavior:contain}
.mv-strip.dragging{cursor:grabbing}
.mv-strip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.mv-strip canvas{display:block;pointer-events:none}
.mv-band{position:absolute;top:0;height:64px;pointer-events:none}
.mv-band[data-k="rest"]{background:linear-gradient(to right,rgba(8,8,15,0),rgba(8,8,15,.28))}
.mv-band[data-k="work"]{background:rgba(255,59,47,.14);box-shadow:inset 0 -3px 0 var(--red)}
.mv-band[data-k="after"]{background:rgba(8,8,15,.5)}
.mv-band span{position:absolute;top:5px;padding:2px 6px;border-radius:6px;background:rgba(8,8,15,.78);
  font-family:var(--display);font-weight:700;font-size:.66rem;color:var(--ink);white-space:nowrap}
.mv-band.before span{right:8px}
.mv-band.after span{left:8px}
.mv-band[data-k="rest"]{box-shadow:inset 0 -3px 0 rgba(244,242,236,.4)}
.mv-line{position:absolute;top:0;left:50%;width:2px;height:64px;margin-left:-1px;background:var(--red);pointer-events:none}
.mv-line span{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);padding:2px 6px;border-radius:6px;
  background:var(--red);color:#fff;font-family:var(--display);font-weight:800;font-size:.62rem;white-space:nowrap}
.mv-strip.previewing{opacity:.7}

.mv-err{margin-top:8px;color:#FF8F80;font-size:.86rem;line-height:1.4}
.mv-nudge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.mv-nudge .tkbtn{min-height:44px;font-family:var(--display);font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums}
.mv-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.segm.mini{margin-top:0}
.segm.mini button{min-height:40px;font-size:.76rem}
.mv-frames{color:var(--faint);font-size:.76rem;min-height:1.2em;margin-top:6px;font-variant-numeric:tabular-nums}
.mv-save{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.mv-save .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 200px}
.mv-save .cta svg.ic{width:18px;height:18px}
.mv-save .cta.notyet{opacity:.55}
.mv-save .tkbtn{min-height:44px;min-width:150px}
.mv-save .tkbtn.armed{color:var(--red-ink);border-color:rgba(255,59,47,.5)}

/* the move card and the preview carry the sync state and the door in */
.clip .bd .csync{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:.72rem;font-weight:600;color:var(--green)}
.clip .bd .csync svg.ic{width:13px;height:13px;stroke-width:2.4}
#clipPrev .cp-align{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;color:var(--ink);border-color:var(--hair)}
#clipPrev .cp-align svg.ic{width:16px;height:16px}

@media (min-width:640px){
  .mv-frame{height:min(48vh,420px)}
  .mv-head{gap:22px;grid-template-rows:auto 1fr;grid-template-areas:"frame side" "frame play"}
  .mv-play .cta{flex:0 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .mv-flash{transition:none}
}