/* Scoped extension of the existing light studio. No preset or canvas changes. */
.opencut-captions .caption-generation-card{display:block;padding:22px 18px 18px;background:#fff;border:1px solid #e3e5e8;border-radius:14px;box-shadow:0 3px 12px #202b3805;color:#252a32}
.caption-generation-intro{text-align:center}
.caption-generation-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:2px auto 13px;border-radius:14px;background:var(--gold);color:#463411;box-shadow:inset 0 1px 0 #ffffff80}
.caption-generation-icon svg{width:27px;height:27px;stroke-width:1.6}
.caption-generation-intro h2{font-size:19px;font-weight:650;letter-spacing:-.4px;line-height:1.3;margin:0 0 7px}
.caption-generation-intro p{font-size:12px;line-height:1.6;color:#727985;margin:0}
.caption-generation-card hr{border:0;border-top:1px solid #eceef0;margin:20px 0 18px}
.opencut-captions .caption-generation-card .opencut-language{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 14px}
.opencut-captions .caption-generation-card .opencut-language label{font-size:12px;font-weight:550;line-height:1.4;color:#505865;margin:0;text-align:left}
.opencut-captions .caption-generation-card select{width:100%;min-width:0;max-width:100%;height:40px;padding:0 10px;border:1px solid #dfe3e8;border-radius:8px;background:#f9fafb;color:#303844;font-size:12px;color-scheme:light}
.opencut-captions .caption-generation-card .opencut-generate{display:flex;align-items:center;justify-content:center;min-height:43px;width:100%;height:auto;padding:11px 10px;border:1px solid #d3ac50;border-radius:8px;background:var(--gold);color:#35280f;font-size:13px;line-height:1.4;font-weight:700;white-space:normal;overflow-wrap:anywhere;box-shadow:inset 0 1px 0 #ffffff65,0 1px 3px #00000009}
.opencut-captions .caption-generation-card .opencut-generate:hover:not(:disabled){filter:brightness(1.035)}
.opencut-captions .caption-generation-card .opencut-generate:disabled{opacity:.58;cursor:default}
.caption-generation-card .caption-clear-option{display:flex;align-items:flex-start;gap:8px;margin:17px 0 0;color:#535c69;font-size:12px;line-height:1.5;cursor:pointer;text-align:left}
.caption-generation-card .caption-clear-option input{appearance:auto;flex:0 0 15px;width:15px;height:15px;margin:2px 0 0;accent-color:#b78223}
.caption-generation-card .caption-clear-help{margin:7px 0 0 23px;color:#858b95;font-size:10px;line-height:1.5}
.caption-generation-card .caption-audio-hint{margin:8px 0 0;color:#7b6844;font-size:11px;line-height:1.5}
.opencut-captions .opencut-feedback{margin-top:12px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px;line-height:1.5}
.opencut-captions .caption-cancel{margin-top:9px;border:1px solid #d9cba8;border-radius:7px;padding:7px 12px;color:#66532c;background:#fffaf0;font-size:12px}
/* Hairline contours are half the previous idle width (1px -> .5px).
   Selection remains real, but does not reveal every selected clip's handles.
   Keep inset paint and unchanged hit areas: short clips must not grow. */
.caption-clip{border:0;min-width:0;padding-inline:0;box-shadow:inset 0 0 0 .5px #111;background:var(--gold)}
.caption-clip>svg{margin-left:6px}
.caption-clip>span:first-child{margin-left:6px}
.caption-clip.selected{outline:0;box-shadow:inset 0 0 0 .5px #111}
.caption-clip[data-timeline-clip]>.trim-handle{opacity:0}
@media(hover:hover) and (pointer:fine){
 .caption-clip:hover{box-shadow:inset 0 0 0 1px #111}
 .caption-clip[data-timeline-clip]:hover>.trim-handle{opacity:1}
}
/* Keep only the actively dragged clip's handles visible under pointer capture,
   including touch drags, even when the pointer briefly leaves the clip. */
.caption-clip.trimming{box-shadow:inset 0 0 0 1px #111}
.caption-clip[data-timeline-clip].trimming>.trim-handle{opacity:1}
.caption-clip:focus-visible{outline:1px solid #111;outline-offset:-1px}
@media(max-width:1180px){.opencut-captions .caption-generation-card{padding:18px 14px 16px}.caption-generation-intro h2{font-size:18px}.caption-generation-card .caption-clear-help{margin-left:0}}

/* Video timeline clips: persistent gold hairline; stronger hover, never group handles.
   Paint inside the existing clip without changing positioning or hit areas. */
.video-clip,
.video-clip.selected,
.video-clip.moving{
  border:0;
  min-width:0;
  padding:0;
  outline:0;
  box-shadow:none;
}
.video-clip::after{
  --video-clip-edge:.5px;
  content:'';
  position:absolute;
  inset:0;
  box-sizing:border-box;
  border-radius:inherit;
  border:var(--video-clip-edge) solid #c28a24;
  opacity:1;
  pointer-events:none;
  z-index:2;
}
/* Keep a thin solid fallback where layered masks are unavailable. */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .video-clip::after{
    border:0;
    padding:var(--video-clip-edge);
    background:var(--gold);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
}
.video-clip[data-timeline-clip]>.trim-handle{opacity:0}
@media(hover:hover) and (pointer:fine){
  .video-clip:hover::after{--video-clip-edge:1px}
  .video-clip[data-timeline-clip]:hover>.trim-handle{opacity:1}
}
/* An active gesture retains its edge even outside the clip under capture. */
.video-clip.trimming::after,
.video-clip.moving::after{--video-clip-edge:1px}
.video-clip[data-timeline-clip].trimming>.trim-handle{opacity:1}
/* Keyboard focus is distinct from selection; do not hide accessibility focus. */
.video-clip:focus-visible{outline:1px solid #c28a24;outline-offset:-1px}

/* The visible playhead is 50% thicker: 1.5px -> 2.25px.
   Keep its existing time coordinate and do not add an invisible clip-sized hitbox. */
#playhead{width:2.25px}
.playhead-handle{left:50%;transform:translateX(-50%)}
#ruler{cursor:default}