/* groups.css — a group's row in the composer timeline, and its strip in the
   inspector (GROUPS-PLAN.md, phase A). Its own sheet: app.css is at its ceiling.
   Restyles nothing that is not a group's. Tonal, like the rest of def2: the
   surface ramp says what is a heading and what is under it; nothing here has an
   outline at rest, and hover and selected step a fill. */

/* ---- the heading row ------------------------------------------------------ */
.cs-row-group.open { height: 20px; }
.cs-row-group.open .cs-lane { height: 18px; }
.cs-rlabel.grp { background: var(--panel); color: var(--text); gap: 4px; }
.cs-rlabel.grp::before { display: none; }   /* the twirl stands where a layer's colour chip is */
.cs-gtwirl { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; --gg-icon-size: 11px; width: 15px; height: 17px; padding: 0; border: none; border-radius: 4px; background: none;
             color: var(--text2); font-size: 10px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.cs-gtwirl:hover { background: var(--raise-hi); color: var(--text); }
.cs-rlabel.grp .cs-rname.editing { flex: 1 1 auto; padding: 1px 4px; border-radius: 3px; background: var(--well); color: var(--text);
                                   outline: none; box-shadow: 0 0 0 2px rgba(var(--lime-rgb), .4); text-overflow: clip; cursor: text; user-select: text; }
.cs-row-group.hidden .cs-gband, .cs-row-group.hidden .cs-gmem { opacity: .4; }
/* a row dropped INTO the group: the heading fills, where above / below draw an edge */
.cs-row-group.dragover-into .cs-rlabel { background: rgba(var(--lime-rgb), .22); box-shadow: none; }

/* ---- members' rows, while the group is open -------------------------------- */
.cs-row.in-group .cs-rlabel { padding-left: 12px; background: var(--bg); }
.cs-row.in-group.multisel .cs-rlabel { background: rgba(var(--frame-rgb), .3); }

/* ---- the band: the group itself ------------------------------------------------
   Two thin strips along the top and bottom of the group's span. Dragging either
   moves every member; a member's block between them is that member alone. */
.cs-gband { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 4; }
.cs-gband i { position: absolute; left: 0; right: 0; height: 4px; background: var(--text2); opacity: .5; pointer-events: auto; cursor: grab;
              transition: opacity .12s; }
.cs-gband i.t { top: 1px; border-radius: 2px 2px 0 0; }
.cs-gband i.b { bottom: 1px; border-radius: 0 0 2px 2px; }
.cs-gband:has(i:hover) i { opacity: .8; }
.cs-gband.sel i { background: var(--frame-blue); opacity: .95; }
.cs-gband.locked i { opacity: .25; cursor: default; }
/* open: the row is only a heading, so the band is one bar */
.cs-row-group.open .cs-gband i.t { top: 5px; height: 8px; border-radius: 2px; }
.cs-row-group.open .cs-gband i.b { display: none; }

/* ---- a plain clip's start-trim handle (tracks.js): the twin of the end one ------------ */
.cs-block .cs-trim.l { right: auto; left: 0; border-radius: 3px 0 0 3px; }

/* ---- a member's block on the folded row ----------------------------------------- */
.cs-gmem { position: absolute; top: 6px; bottom: 6px; border-radius: 2px; overflow: hidden; cursor: grab; z-index: 3;
           display: flex; align-items: center;
           background: color-mix(in srgb, var(--mc) 36%, var(--well));
           box-shadow: inset 1px 0 0 color-mix(in srgb, var(--mc) 80%, transparent), inset -1px 0 0 color-mix(in srgb, var(--mc) 80%, transparent); }
.cs-gmem:hover { background: color-mix(in srgb, var(--mc) 48%, var(--well)); }
.cs-gmem.sel { background: color-mix(in srgb, var(--mc) 62%, var(--well));
               box-shadow: inset 2px 0 0 var(--mc), inset -2px 0 0 var(--mc); }
.cs-gmem.locked, .cs-gmem.off { opacity: .45; }
.cs-gmlabel { margin: 0 7px; font-family: var(--f-mono); font-size: 10px; color: var(--text); white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; pointer-events: none; }

/* ---- the inspector strip ------------------------------------------------------------ */
#inspector .insp-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; padding: 7px 9px; margin-bottom: 10px;
                         border-radius: 6px; background: var(--well); }
#inspector .insp-group .ig-title { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#inspector .insp-group .ig-name { flex: 1 1 90px; min-width: 0; min-height: 0; height: 24px; padding: 2px 7px; border: none; border-radius: 5px;
                                  background: var(--card); color: var(--text); font-size: 12px; }
#inspector .insp-group .ig-count { font-family: var(--f-mono); font-size: 10px; color: var(--text2); white-space: nowrap; }
/* the group's own animation: a second and third row of the strip */
#inspector .insp-group .ig-row { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
#inspector .insp-group .ig-row .ig-count { color: var(--lime); }
/* the slider is the inspector's own (.tgroup); only its box and its label column are fitted to the strip */
#inspector .insp-group .tgroup.ig-row { display: block; border: none; background: none; padding: 0; margin: 0; }
#inspector .insp-group .tgroup.ig-row label { grid-template-columns: 92px 1fr 34px; font-size: 12px; color: var(--text2); }
#inspector .insp-group.recording { background: color-mix(in srgb, var(--danger) 14%, var(--well)); }   /* as a layer's panel does while it records */