/* clips.css - the Clips panel's list (DESIGN-2.0-PLAN.md, batch 4).
   A clip is one of the kit's list rows: grip, mark, name, range, length. The selected clip opens
   in place and shows what the old card showed for every clip at once - thumbnail, Start and End,
   its actions. States are fills: selected steps the surface, ticked shows a check, playing tints
   the row. Nothing here draws an outline or a bar down the side. */

#clips { container-type:inline-size; display:flex; flex-direction:column; gap:1px; }
.cl-cols > .cl-range, .cl-titlerow > .cl-range { flex:0 0 84px; text-align:right; }
.cl-cols > .cl-dur, .cl-titlerow > .cl-dur { flex:0 0 46px; text-align:right; }
.cl-cols.gg-list-cols { padding:0 8px 0 23px; }   /* its first caption sits over the marks */

.clip { border-radius:var(--radius,5px); }
.clip.dropped { opacity:.5; }
.clip.dragging { opacity:.5; }
.clip[draggable="true"] { cursor:grab; }

.cl-titlerow.gg-list-row { padding:0 8px 0 4px; gap:7px; }
.cl-grip { flex:0 0 12px; display:flex; justify-content:center; color:var(--muted); --gg-icon-size:12px;
           opacity:0; cursor:grab; transition:opacity .12s; }
.clip:hover .cl-grip, .clip.sel .cl-grip { opacity:1; }
.cl-grip:active { cursor:grabbing; }
#clips .clip .title { flex:1 1 auto; min-width:0; height:22px; padding:0; background:transparent; border:none; box-shadow:none;
               border-radius:var(--radius-sm,3px); color:inherit; font-family:var(--f-body); font-size:var(--fs-body);
               font-weight:600; text-overflow:ellipsis; cursor:inherit; }
#clips .clip:not(.sel) .title { pointer-events:none; }   /* a click on a row selects it; the open clip's name is the field */
#clips .clip.sel .title { cursor:text; }
#clips .clip.sel .title:focus { background:var(--well); padding:0 5px; }
.cl-range, .cl-dur { font-family:var(--f-mono); font-size:var(--fs-data); color:var(--text2); white-space:nowrap; }
.cl-titlerow > .cl-dur { color:var(--text); }
.cl-src { flex:0 0 auto; font-family:var(--f-mono); font-size:var(--fs-label); border-radius:var(--radius-sm,3px); padding:1px 5px; }
.cl-parts { flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono);
            font-size:var(--fs-label); color:var(--text2); --gg-icon-size:11px; }
.cl-tick { flex:0 0 auto; display:none; color:var(--lime); --gg-icon-size:13px; }
.clip.ticked .cl-tick { display:inline-flex; }
.clip.playing > .cl-titlerow, .clip.playing > .cl-titlerow:hover { background:color-mix(in srgb, var(--lime) 16%, transparent); }

/* the open clip */
.clip.sel { background:var(--card); margin:2px 0; }
.clip.sel > .cl-titlerow, .clip.sel > .cl-titlerow:hover { background:var(--card-sel); border-radius:var(--radius,5px) var(--radius,5px) 0 0; }
.clip.sel.playing > .cl-titlerow, .clip.sel.playing > .cl-titlerow:hover { background:color-mix(in srgb, var(--lime) 16%, var(--card-sel)); }
.cl-body, .cl-actions { display:none; }
.clip.sel > .cl-body { display:flex; align-items:flex-start; gap:10px; padding:9px 10px 0; }
.cl-thumb { flex:0 0 auto; width:80px; height:45px; object-fit:cover; border-radius:var(--radius-sm,3px); background:var(--well); }
.cl-body:has(.segs) .cl-thumb { display:none; }
.cl-main { flex:1 1 auto; min-width:0; }
.cl-times { display:flex; gap:8px; }
.cl-chip { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cl-chip .lbl { font-size:var(--fs-data); color:var(--text2); }
#clips .cl-chip input { width:100%; height:24px; box-sizing:border-box; padding:0 6px; background:var(--well); border:none;
                 border-radius:var(--radius-sm,3px); color:var(--text); font-family:var(--f-mono); font-size:var(--fs-data); }
.clip.sel > .cl-actions { display:flex; flex-wrap:wrap; gap:6px; padding:9px 10px 10px; }
.cl-btn { flex:1 1 auto; min-width:0; }   /* a label that is long in another language takes a row of its own */
.cl-btn.icon { flex:0 0 30px; }

/* a clip made of several ranges */
.seg-head { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:5px;
            font-family:var(--f-mono); font-size:var(--fs-data); color:var(--text2); }
.seg-head .grow { flex:1; }
.seg-row { display:flex; gap:5px; align-items:center; margin:3px 0; }
.seg-row .seg-idx { flex:0 0 14px; text-align:center; font-family:var(--f-mono); font-size:var(--fs-data); color:var(--muted); }
#clips .seg-row input { flex:1 1 0; min-width:0; height:24px; box-sizing:border-box; padding:0 6px; background:var(--well); border:none;
                 border-radius:var(--radius-sm,3px); color:var(--text); font-family:var(--f-mono); font-size:var(--fs-data); }

/* a narrow panel keeps the name and the length, and lets the range go */
@container (max-width: 300px) {
  .cl-cols > .cl-range, .cl-titlerow > .cl-range { display:none; }
}

/* the Clips header's one Export button */
#exportmenu { --gg-icon-size:11px; }