/* trad.css — the Traditional editor layout (TRADITIONAL-LAYOUT-PLAN.md).
   Its own stylesheet on purpose: nothing here may restyle the current layout,
   and nothing in app.css should have to change for it.

   The house rules apply from line one: surfaces step tonally, no 1px outlines,
   states are fills, the arrow cursor everywhere, ~120ms on controls. */

.trad-tl {
  --tt-left: 452px; --tt-pad: 10px;
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--text2);
  font: 400 var(--fs-control)/1.3 var(--f-body);
  user-select: none;
}
.trad-tl .tt-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }


/* every row is the same two cells: the layer columns, then its lane */
.trad-tl .tt-head, .trad-tl .tt-row { display: flex; align-items: stretch; flex: 0 0 auto; }
.trad-tl .tt-left { flex: 0 0 var(--tt-left); min-width: 0; display: grid; align-items: center;
  grid-template-columns: 22px 22px 18px 24px minmax(0, 1fr) 84px; }
.trad-tl .tt-lane { flex: 1 1 auto; min-width: 0; background: var(--well); overflow: hidden; }
/* zoom: the time scale is --tt-zoom lanes wide and slid left by --tt-x px; every lane reads the
   same two numbers off the panel, so they move as one (trad_timeline.js) */
.trad-tl .tt-in { position: relative; height: 100%; margin: 0 var(--tt-pad);
  width: calc((100% - 2 * var(--tt-pad)) * var(--tt-zoom, 1)); transform: translateX(calc(var(--tt-x, 0) * -1px)); }
.trad-tl .tt-head .tt-grow { flex: 1 1 auto; }
/* the tools beside the timecode (the lane timeline's own buttons, by class), and the column's grip */
.trad-tl .tt-head .tt-left { position: relative; gap: 4px; overflow: hidden; }
.trad-tl .tt-tool { flex: 0 0 auto; height: 20px; padding: 0 6px; white-space: nowrap; }
.trad-tl .tt-head .cs-wordcount { height: 20px; padding: 0 2px; }
.trad-tl .tt-grip { position: absolute; top: 0; bottom: 0; right: 0; width: 5px; cursor: ew-resize; }
.trad-tl .tt-grip:hover { background: var(--raise-hi); }
/* the word preview: a strip under a video row's bar, its words written at the playhead */
.trad-tl .tt-word { display: none; position: absolute; bottom: 0; left: calc(var(--tt-t, 0) * 100%); height: 13px; padding-left: 4px; white-space: nowrap;
  color: var(--text2); font: 400 var(--fs-label)/13px var(--f-body); font-style: normal; pointer-events: none; z-index: 2; }
.trad-tl.tt-words .tt-word { display: block; }
.trad-tl.tt-words .tt-vid { height: calc(var(--tt-rowh, 22px) + 13px); }
.trad-tl.tt-words .tt-vid .tt-bar { bottom: 16px; }
.trad-tl.tt-words .tt-vid .tt-clip { bottom: 18px; }
.trad-tl.tt-words .tt-vid .tt-band { bottom: 13px; }
/* the playhead: each lane draws its own stretch of the line from one inherited
   number, so it needs no overlay, no measuring, and it scrolls with the rows */
.trad-tl .tt-in::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tt-t, 0) * 100%);
  width: 1.5px; margin-left: -.75px; background: var(--lime); pointer-events: none; z-index: 3; }

.trad-tl .tt-head { height: 26px; background: var(--card); }
.trad-tl .tt-head .tt-left { display: flex; align-items: center; padding: 0 9px; }
.trad-tl .tt-tc { color: var(--lime); font: 500 var(--fs-body) var(--f-mono); letter-spacing: -.01em; }
.trad-tl .tt-ruler { background: var(--card); }
.trad-tl .tt-tick { position: absolute; top: 0; bottom: 0; padding: 6px 0 0 4px; color: var(--muted); font: 400 var(--fs-label) var(--f-mono); white-space: nowrap; }
/* the zoom button names the span on screen (0:01.0 to 1:02:03), so it holds its width as that changes */
.trad-tl #tt_zoom_lbl { min-width: 56px; text-align: center; }
.trad-tl .tt-tick::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 7px; background: var(--faint); }
.trad-tl .tt-ruler .tt-in::before { content: ""; position: absolute; top: 0; left: calc(var(--tt-t, 0) * 100%); margin-left: -6px;
  border: 6px solid transparent; border-top: 8px solid var(--lime); z-index: 4; }

.trad-tl .tt-cols { height: 20px; background: var(--chip); color: var(--muted); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; }
.trad-tl .tt-cols .tt-left { display: grid; padding: 0; }
.trad-tl .tt-cols .tt-lane { background: var(--chip); }
.trad-tl .tt-cols .tt-mode { padding-left: 6px; }

.trad-tl .tt-rows { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; background: var(--well); }
/* The rows scroll and the head does not, so with enough rows for a scroll bar every lane was
   that bar narrower than the ruler, and a time was drawn further left in the lanes than on the
   ruler by up to its width: the playhead's head did not sit over its line (owner, 2026-10-10).
   The rows that do not scroll give up the same width (--tt-sb, measured by ttRender). */
.trad-tl .tt-head, .trad-tl .tt-scroll { padding-right: var(--tt-sb, 0px); box-sizing: border-box; }
/* the scroll bar along the time scale: under the lanes only, and only while zoomed in. The lanes
   are slid, not scrolled, so this is drawn; its thumb is placed by _ttApplyZoom. */
.trad-tl .tt-scroll { display: none; flex: 0 0 12px; background: var(--panel); }
.trad-tl.tt-zoomed .tt-scroll { display: flex; }
.trad-tl .tt-sbar { position: relative; height: 100%; margin: 0 var(--tt-pad); }
.trad-tl .tt-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-sm,3px); background: var(--control); transition: background .12s; }
.trad-tl .tt-thumb:hover, .trad-tl.tt-sbar-drag .tt-thumb { background: var(--raise-hi); }
.trad-tl.tt-panning, .trad-tl.tt-panning * { cursor: grabbing; }
/* a drag is extending the composition: the time scale keeps its colour and what is past its end
   is a step darker, in every lane and the ruler */
.trad-tl.tt-ext .tt-rows .tt-lane, .trad-tl.tt-ext .tt-ruler { background: color-mix(in srgb, var(--well) 55%, black); }
.trad-tl.tt-ext .tt-rows .tt-in { background: var(--well); }
.trad-tl.tt-ext .tt-ruler .tt-in { background: var(--card); }
.trad-tl .tt-row { background: var(--panel); transition: background .12s; }
.trad-tl .tt-layer { height: var(--tt-rowh, 22px); }
.trad-tl .tt-group, .trad-tl .tt-prop { height: 20px; }
.trad-tl .tt-row:hover .tt-left { background: var(--card); }
.trad-tl .tt-row.sel .tt-left { background: var(--card-sel); color: var(--text); }
.trad-tl .tt-row.sel .tt-lane { background: rgba(var(--lime-rgb), .05); }
.trad-tl .tt-row.off .tt-bar, .trad-tl .tt-row.off .tt-nm { opacity: .45; }
/* restacking: where the dragged layer will land. A transient drag mark, not a state. */
.trad-tl .tt-layer.tt-drop-a .tt-left { box-shadow: inset 0 2px 0 var(--lime); }
.trad-tl .tt-layer.tt-drop-b .tt-left { box-shadow: inset 0 -2px 0 var(--lime); }
.trad-tl .tt-layer.tt-lift .tt-left { opacity: .55; }
/* a group's row (groups.js): a heading over its members, or - folded - all of them on one line */
.trad-tl .tt-lgroup { height: var(--tt-rowh, 22px); }
.trad-tl .tt-lgroup .tt-left { background: var(--card); color: var(--text); }
.trad-tl .tt-lgroup.sel .tt-left { background: var(--card-sel); }
.trad-tl .tt-lgroup .tt-tw[data-gt]:hover, .trad-tl .tt-lgroup .tt-eye:hover, .trad-tl .tt-lgroup .tt-lock:hover { color: var(--text); }
.trad-tl .tt-lgroup.tt-drop-a .tt-left { box-shadow: inset 0 2px 0 var(--lime); }
.trad-tl .tt-lgroup.tt-drop-b .tt-left { box-shadow: inset 0 -2px 0 var(--lime); }
.trad-tl .tt-lgroup.tt-drop-in .tt-left { background: rgba(var(--lime-rgb), .22); }
.trad-tl .tt-lgroup.tt-lift .tt-left { opacity: .55; }
.trad-tl .tt-lgroup.off .tt-clip, .trad-tl .tt-lgroup.off .tt-nm { opacity: .45; }
.trad-tl .tt-clip.gm.off { opacity: .45; }
.trad-tl .tt-member .tt-name { padding-left: 12px; }
/* open: the row is only a heading, so the band is one bar and not two edges with nothing between them */
.trad-tl .tt-lgroup.open .tt-band-t { top: 8px; height: 6px; border-radius: var(--radius-sm,3px); }
.trad-tl .tt-lgroup.open .tt-band-b { display: none; }

.trad-tl .tt-c { display: flex; align-items: center; justify-content: center; height: 100%; }
.trad-tl .tt-eye.off, .trad-tl .tt-lock:not(.on) { color: var(--faint); }
.trad-tl .tt-layer .tt-eye:hover, .trad-tl .tt-layer .tt-lock:hover { color: var(--text); }
.trad-tl .tt-mode i { transition: background .12s; }
.trad-tl .tt-mode i:hover { background: var(--raise-hi); color: var(--text); }
.trad-tl .tt-sw { width: 9px; height: 9px; border-radius: var(--radius-sm,3px); display: block; }
.trad-tl .tt-num { color: var(--muted); font: 400 var(--fs-label) var(--f-mono); }
.trad-tl .tt-name { display: flex; align-items: center; gap: 5px; min-width: 0; height: 100%; }
.trad-tl .tt-tw { flex: 0 0 13px; height: 100%; display: flex; align-items: center; color: var(--muted); }
.trad-tl .tt-tw[data-tw]:hover { color: var(--text); }
.trad-tl .tt-kind { flex: 0 0 16px; text-align: center; color: var(--muted); font-size: var(--fs-label); }
.trad-tl .tt-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-tl .tt-mode { display: flex; align-items: center; height: 100%; padding: 0 6px; }
.trad-tl .tt-mode i { font-style: normal; width: 100%; height: 17px; border-radius: var(--radius-sm,3px); background: var(--well); padding: 0 6px;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden; }

/* a group and a property row drop the layer columns for one indented line */
.trad-tl .tt-group .tt-left, .trad-tl .tt-prop .tt-left { display: flex; align-items: center; gap: 5px; }
.trad-tl .tt-ind { flex: 0 0 86px; }
.trad-tl .tt-ind.d2 { flex-basis: 104px; }
.trad-tl .tt-note { margin-left: 7px; color: var(--muted); font: 400 var(--fs-label) var(--f-mono); }
.trad-tl .tt-watch { flex: 0 0 13px; height: 100%; display: flex; align-items: center; color: var(--faint); transition: color .12s; }
.trad-tl .tt-watch.can:hover { color: var(--text); }
.trad-tl .tt-watch.on, .trad-tl .tt-watch.on.can:hover { color: var(--lime); }
.trad-tl .tt-pl { flex: 1 1 auto; min-width: 0; }
/* previous key / key here / next key */
.trad-tl .tt-kn { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; margin-right: 10px; color: var(--muted); }
.trad-tl .tt-kn i { display: flex; align-items: center; height: 18px; padding: 0 1px; border-radius: var(--radius-sm,3px); transition: background .12s, color .12s; }
.trad-tl .tt-kn i:hover { background: var(--raise-hi); color: var(--text); }
.trad-tl .tt-kn i.on { color: var(--lime); }
.trad-tl .tt-kn .tt-ico { width: 11px; height: 11px; }
.trad-tl .tt-kn i.on .tt-ico { fill: currentColor; }
/* A FIXED column, right-aligned: the value used to size itself, so going from
   100 % to 60 % pulled the key arrows beside it sideways (owner, 2026-10-01).
   Wide enough for the longest thing a row shows, a negative two-number position. */
.trad-tl .tt-val { flex: 0 0 112px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font: 400 var(--fs-label) var(--f-mono); letter-spacing: -.01em; white-space: nowrap; }
.trad-tl .tt-f { color: var(--text2); padding: 1px 3px; border-radius: var(--radius-sm,3px); }
.trad-tl .tt-fs { color: var(--muted); margin: 0 1px 0 -3px; }   /* the comma sits against the number before it */
/* a number that can be dragged is the accent colour; one that is only shown is not */
.trad-tl .tt-f.scrub { color: var(--lime); cursor: ew-resize; transition: background .12s; }
.trad-tl .tt-f.scrub:hover { background: var(--raise-hi); }
/* a locked layer's number: there, and not live (trad_timeline.js) */
.trad-tl .tt-f.lk { color: var(--faint); }
.trad-tl .tt-lock.pulse { animation: tt-lock-pulse .5s ease-out 2; }
@keyframes tt-lock-pulse { 0%, 100% { color: inherit; } 50% { color: var(--amber); } }

/* lanes */
/* A bar is its layer's hue MUTED, with light text - the composer's timeline in the other
   layout already was. At full strength a stack of layers was a block of poster colour with
   dark labels on it, and the brightest thing in the window. Selected steps the fill up. */
.trad-tl .tt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-sm,3px); background: color-mix(in srgb, var(--bc) 40%, var(--well)); overflow: hidden; }
/* A layer holding several clips. The BAND - a thin strip along the top and one
   along the bottom, the layer's full length - is the layer: drag it and every
   clip and key moves. Each rectangle between them is ONE clip, dragged and
   trimmed by itself. Clips alternate two shades of the layer's colour so their
   edges read without a line between them; a stretch where two are on at once
   takes a colour of its own. */
.trad-tl .tt-band { position: absolute; top: 0; bottom: 0; pointer-events: none; }
/* darker than either clip shade at rest, so it reads as a frame around the clips
   and not as part of the first one; it comes up to full strength under the pointer */
.trad-tl .tt-band-t, .trad-tl .tt-band-b { position: absolute; left: 0; right: 0; height: 4px; background: var(--bc); filter: brightness(.5); pointer-events: auto; cursor: move; transition: filter .12s; }
.trad-tl .tt-band-t { top: 0; border-radius: var(--radius-sm,3px) var(--radius-sm,3px) 0 0; }
.trad-tl .tt-band-b { bottom: 0; border-radius: 0 0 var(--radius-sm,3px) var(--radius-sm,3px); }
.trad-tl .tt-band.sel i { filter: brightness(.72); }
.trad-tl .tt-band:has(i:hover) i { filter: brightness(1.25); }
.trad-tl .tt-clip { position: absolute; top: 5px; bottom: 5px; border-radius: var(--radius-sm,3px); background: color-mix(in srgb, var(--bc) 40%, var(--well)); overflow: hidden; font-style: normal; }
.trad-tl .tt-clip.b { filter: brightness(.74); }
.trad-tl .tt-clip.cap { box-shadow: inset 0 -3px 0 var(--hue-amber); }
.trad-tl .tt-clip.sel { background: color-mix(in srgb, var(--bc) 74%, var(--well)); filter: none; }
.trad-tl .tt-clip.hl { filter: brightness(1.22); }
.trad-tl .tt-clip.b.hl { filter: brightness(.95); }
.trad-tl .tt-clip::before, .trad-tl .tt-clip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; max-width: 33%; cursor: ew-resize; z-index: 2; }
.trad-tl .tt-clip::before { left: 0; }
.trad-tl .tt-clip::after { right: 0; }
.trad-tl .tt-ovl { position: absolute; top: 5px; bottom: 5px; background: var(--text); opacity: .62; pointer-events: none; z-index: 1; }
/* the stretch of a bar a full-frame layer above hides (covered.js): the bar steps back toward the lane */
.trad-tl .tt-cov { position: absolute; top: 0; bottom: 0; background: var(--well); opacity: .55; pointer-events: none; }
/* a folded row's member that sits inside another: a band of its parent's colour along its top, as a captioned clip carries one along its bottom */
.trad-tl .tt-clip.gm.in { box-shadow: inset 0 3px 0 var(--pc); }
.trad-tl .tt-clip.gm.in > .tt-cov { top: 3px; }   /* the band stays its colour over a dimmed bar */
/* a scene cut of the footage, mapped onto the layer (cutmarks.js): the marker bar's sky, over the bar */
.trad-tl .tt-cut { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: var(--hue-sky); opacity: .85; pointer-events: none; z-index: 2; }
.trad-tl .tt-bar.sel { background: color-mix(in srgb, var(--bc) 74%, var(--well)); }
/* the two ends are the trim handles; a bar that cannot move offers neither */
.trad-tl .tt-bar:not(.fix)::before, .trad-tl .tt-bar:not(.fix)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; max-width: 33%; cursor: ew-resize; z-index: 2; }
.trad-tl .tt-bar:not(.fix)::before { left: 0; }
.trad-tl .tt-bar:not(.fix)::after { right: 0; }
.trad-tl .tt-bar.fix { opacity: .8; }
.trad-tl .tt-lbl { position: absolute; left: 6px; right: 4px; top: 0; bottom: 0; display: flex; align-items: center;
  color: var(--text); font-weight: 600; font-size: var(--fs-label); white-space: nowrap; overflow: hidden; }
.trad-tl .tt-fade { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent); }
.trad-tl .tt-fade.r { left: auto; right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent); }
.trad-tl .tt-fade { pointer-events: none; }
/* an Enter / Exit effect's ramp and handle are amber, a plain fade's lime: as in the lanes */
.trad-tl .tt-fade.fx { background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 50%, transparent), transparent); }
.trad-tl .tt-fade.r.fx { background: linear-gradient(270deg, color-mix(in srgb, var(--amber) 50%, transparent), transparent); }
/* the handle: on the bar's top edge, shown while the pointer is on the row or the layer is selected */
.trad-tl .tt-fh { position: absolute; top: 0; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--lime);
  border-radius: var(--radius-sm,3px); cursor: ew-resize; z-index: 4; opacity: 0; transition: opacity .12s; }
.trad-tl .tt-fh.fx { background: var(--amber); transform: none; width: 4px; height: 9px; margin-left: -2px; }
.trad-tl .tt-fh.in { margin-left: 1px; } .trad-tl .tt-fh.out { margin-left: -8px; }
.trad-tl .tt-row:hover .tt-fh, .trad-tl .tt-row.sel .tt-fh { opacity: 1; }
.trad-tl .tt-fh:hover { background: var(--text); }
/* a waveform in a bar or a clip (the lanes' canvas): under the label, the fades and the handles */
/* a bar's waveform covers the part of the bar on screen and a screen each side, placed in px by
   _waveCanvas (lanegestures.js): the bar may be millions of pixels wide */
.trad-tl .tt-bar .cs-wave, .trad-tl .tt-clip .cs-wave { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: .85; }
.trad-tl .tt-bar .tt-lbl, .trad-tl .tt-clip .tt-lbl { z-index: 1; }
/* a looping layer's mark, at the right end of its bar */
.trad-tl .tt-loop { position: absolute; right: 5px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--text); opacity: .8; pointer-events: none; --gg-icon-size: 11px; }
/* a content switch on a text or image bar: a line with a grip, as in the lanes */
.trad-tl .tt-segb { position: absolute; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; cursor: ew-resize; z-index: 3; }
.trad-tl .tt-segb::after { content: ""; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .75; }
.trad-tl .tt-segb:hover::after, .trad-tl .tt-segb.kill::after { opacity: 1; }
.trad-tl .tt-segb.kill::after { background: var(--danger); }
/* a name dragged onto the middle of a layer's row: the two become one row */
.trad-tl .tt-layer.tt-drop-in .tt-left { background: rgba(var(--lime-rgb), .22); }
.trad-tl .tt-nm.editing { background: var(--well); outline: 2px solid var(--lime); border-radius: var(--radius-sm,3px); padding: 0 3px; }
/* the snap guide: one line through every lane, where a dragged edge has caught (--tt-snap) */
.trad-tl.tt-snapping .tt-rows .tt-in::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tt-snap, 0) * 100%);
  width: 1px; background: var(--lime); box-shadow: 0 0 4px var(--lime); pointer-events: none; z-index: 6; }
.trad-tl .tt-piece { position: absolute; top: 4px; bottom: 4px; border-radius: var(--radius-sm,3px); background: var(--pc); opacity: .85; }
.trad-tl .tt-piece.cap { box-shadow: inset 0 -3px 0 var(--hue-amber); }
/* the Captions row: every clip, lit where it is captioned; a click switches that clip's */
.trad-tl .tt-piece.capi.off { opacity: .22; box-shadow: none; }
.trad-tl .tt-piece.capi:hover { opacity: 1; }
.trad-tl .tt-piece.capi.off:hover { opacity: .5; }
.trad-tl .tt-group .tt-grow { flex: 1 1 auto; }
.trad-tl .tt-top { display: flex; align-items: center; justify-content: center; width: 20px; height: 16px; margin-right: 6px; border-radius: var(--radius-sm,3px); color: var(--faint); --gg-icon-size: 12px; }
.trad-tl .tt-top:hover { color: var(--text); background: var(--raise-hi); }
.trad-tl .tt-top.on { background: var(--lime); color: var(--on-lime); }
/* enlarged past its source (srcscale.js): the timeline's mark (Properties shows it on the Size row) */
.trad-tl .tt-up { flex: 0 0 auto; margin-left: auto; padding: 0 4px; border-radius: var(--radius-sm,3px); background: var(--amber); color: var(--on-amber);
  font: 600 var(--fs-label)/15px var(--f-mono); white-space: nowrap; }
.trad-tl .tt-up + .tt-cc { margin-left: 4px; }
/* CC on a video layer's name: lit while its captions are on */
.trad-tl .tt-cc { flex: 0 0 auto; margin-left: auto; margin-right: 4px; padding: 0 4px; border-radius: var(--radius-sm,3px); background: var(--control); color: var(--muted);
  font: 600 var(--fs-label)/15px var(--f-mono); letter-spacing: .04em; transition: background .12s, color .12s; }
.trad-tl .tt-cc:hover { background: var(--raise-hi); color: var(--text); }
.trad-tl .tt-cc.on, .trad-tl .tt-cc.on:hover { background: var(--lime); color: var(--on-lime); }
.trad-tl .tt-kf { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--lime); transform: rotate(45deg); border-radius: var(--radius-sm,3px); z-index: 2; }
.trad-tl .tt-kf.ease { border-radius: var(--radius,5px) var(--radius-sm,3px); }
/* a keyframe takes the shade of the clip it sits under, as the clips alternate;
   one under no clip at all is dimmed. Pointing at a clip rings its keys. */
.trad-tl .tt-kf.cb { background: var(--amber); }
.trad-tl .tt-kf.cx { background: var(--muted); }
.trad-tl .tt-kf.hl { box-shadow: 0 0 0 2px var(--text); }
.trad-tl .tt-empty { padding: 22px; color: var(--muted); background: var(--panel); }

/* ============================ the shell (trad_shell.js) ============================
   Docks of tabbed panels: left | viewer | a right stack, and the timeline under all
   three. The app's one layout (DOCKING-PLAN step 3): every panel's nodes are placed
   in a pane at boot. So most rules below are of two kinds: the docks themselves, and
   the handful of things a panel's nodes have to be told now that a pane holds them
   (fill it; a title the tab already says). Nothing here applies unless the node is
   inside .trad-shell. */
.trad-shell { display: none; }
body:not(.on-start) .trad-shell {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 0 5px 5px; background: var(--bg); color: var(--text2);
}
#menubar #renderwrap { align-self: center; margin: 0 4px 0 8px; }

.trad-shell .ts-top { flex: 1 1 auto; min-height: 0; display: flex; }
.trad-shell .ts-stack { flex: 0 0 var(--ts-right, 430px); min-width: 0; display: flex; flex-direction: column; }
.trad-shell .ts-dock { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius-lg,9px); overflow: hidden; }
.trad-shell .ts-dock[data-dock="left"] { flex: 0 0 var(--ts-left, 340px); }
.trad-shell .ts-dock[data-dock="view"] { flex: 1 1 auto; }
.trad-shell .ts-dock[data-dock="rtop"] { flex: 0 0 var(--ts-rtop, 50%); }
.trad-shell .ts-dock[data-dock="rbot"] { flex: 1 1 auto; }
.trad-shell .ts-dock[data-dock="tl"] { flex: 0 0 var(--ts-tl, 300px); }
/* an empty dock is absent, its divider with it (trad_dock.js); a stack with one dock gives it the height */
.trad-shell .ts-dock.empty, .trad-shell .ts-gut.off, .trad-shell .ts-stack.empty { display: none; }
.trad-shell .ts-stack.one .ts-dock { flex: 1 1 auto; }
/* a tab on its way to another dock: the chip under the pointer, the dock it would land in */
.ts-dragchip { position: fixed; z-index: 100070; pointer-events: none; padding: 4px 10px; border-radius: var(--radius,5px);
               background: var(--raise-hi); color: var(--text); font-size: var(--fs-control); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.trad-shell.ts-dragging .ts-tab { cursor: grabbing; }
.trad-shell .ts-dock.ts-drop { background: color-mix(in srgb, var(--lime) 14%, var(--panel)); }
/* while a tab is on its way, an empty dock is a strip it can be dropped into */
.trad-shell.ts-dragging .ts-dock.empty { display: flex; flex: 0 0 56px; background: var(--well); }
.trad-shell.ts-dragging .ts-stack.empty { display: flex; flex: 0 0 56px; }
.trad-shell.ts-dragging .ts-stack.empty .ts-dock.empty { flex: 1 1 auto; }
.trad-shell.ts-dragging .ts-stack.one .ts-dock.empty { flex: 0 0 56px; }
.trad-shell.ts-dragging .ts-dock.empty .ts-tabs { display: none; }
.trad-shell.ts-dragging .ts-dock.empty .ts-body::before { content: ""; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--lime) 35%, var(--well)); }
/* the dividers are the kit's; only their resting colour differs - they sit on the
   window's own background here, between rounded panels */
.trad-shell .ts-gut { flex: 0 0 5px; background: transparent; border-radius: var(--radius-sm,3px); }
.trad-shell .ts-gut:hover, .trad-shell .ts-gut.dragging { background: var(--lime); }

.trad-shell .ts-tabs { flex: 0 0 26px; display: flex; align-items: stretch; background: var(--bg); padding-left: 2px; min-width: 0; }
/* a strip too narrow for its tabs AND its actions clips the tabs at the actions' edge; they
   used to run on underneath (a tab's name read through the Templates button) */
.trad-shell .ts-tabset { display: flex; align-items: stretch; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.trad-shell .ts-tab { display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: var(--radius,5px) var(--radius,5px) 0 0; color: var(--muted);
  font: 600 var(--fs-data) var(--f-body); white-space: nowrap; transition: background .12s, color .12s; user-select: none; }
.trad-shell .ts-tab .tt-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.trad-shell .ts-tab:not(.on):hover { background: var(--chip); color: var(--text2); }
.trad-shell .ts-tab.on { background: var(--panel); color: var(--text); }
.trad-shell .ts-grow { flex: 1 1 auto; }
.trad-shell .ts-acts { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; }
.trad-shell .ts-act { display: none; align-items: center; gap: 4px; padding-right: 4px; }
/* The + adders ride the tab strip, which is 26px tall. The kit gives every <button> a 30px
   minimum height (gg-components.css), so they were 30px: they filled the strip top to bottom,
   stretched it to 30px, and had 4px between them - no air above or below, plenty at the sides.
   Here they are 18px, with the same 4px on every side of each one. */
.trad-shell .ts-act .cs-toolbtn { height: 18px; min-height: 0; padding: 0 7px; border: none; }
/* a kit button on a strip (Templates, on the Composition tab's) is the same 18px, by the kit's
   own height variable: at 30px it made that ONE dock's strip 30px beside its neighbours' 26px */
.trad-shell .ts-act gg-button { --gg-btn-h: 18px; --gg-btn-pad: 0 8px; }
.trad-shell .ts-act .cs-addgrp { gap: 4px; padding-left: 0; margin-left: 0; border-left: none; }
.trad-shell .ts-act.on { display: flex; }
.trad-shell .ts-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
.trad-shell .ts-pane { display: none; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.trad-shell .ts-pane.on { display: flex; }
.trad-shell .ts-hold { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.trad-shell .ts-bar { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--panel); }

/* ---- what a moved node is told ---- */
/* widths and heights a gutter in the other layout wrote onto the node itself */
/* the work area, on the ruler (workarea.js): a band with an end to drag at each side */
/* a composition marker on the ruler (compmarkers.js): a small flag to press, drag or right-click */
.tt-mk { position: absolute; bottom: 0; width: 9px; height: 9px; margin-left: -4px; background: var(--lime); border-radius: var(--radius-sm,3px) var(--radius-sm,3px) 0 0; z-index: 3; }
.tt-mk:hover { background: var(--text); }
/* a plugin's mark (pluginrows.js): a diamond in its lane colour, where the user's own marker is a tab */
.tt-pmk { position: absolute; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--pmc, var(--text2)); transform: rotate(45deg); z-index: 3; }
.tt-pmk:hover { background: var(--text); }
/* not the playhead's colour: at the playhead the two would read as one thing */
.tt-work { position: absolute; top: 0; height: 5px; background: var(--text2); opacity: .7; border-radius: var(--radius-sm,3px); z-index: 2; }
.tt-work-h { position: absolute; top: -1px; width: 7px; height: 12px; background: var(--text); border-radius: var(--radius-sm,3px); cursor: ew-resize; }
.tt-work-h[data-side="in"] { left: -2px; }
.tt-work-h[data-side="out"] { right: -2px; }
.trad-shell #inspector, .trad-shell .comp-layers { width: auto !important; flex: 1 1 auto !important; min-width: 0; }
.trad-shell #inspector { padding: 8px 8px 0; }
.trad-shell #inspector .insp-title { display: none; }   /* the tab says Properties here */
.trad-shell .comp-layers { padding: 10px; }
/* the transcript's empty state offers the Traditional layout, except in it */
.tr-empty-trad { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
body[data-preset="traditional"] .tr-empty-trad { display: none; }
.trad-shell #playerarea { flex: 1 1 auto; height: auto !important; }
.trad-shell .timeline { flex: 1 1 auto; height: auto; border-top: none; }
/* the tab is the panel's title, and there is nothing to fold */
.trad-shell .timeline .tl-head > gg-icon, .trad-shell .timeline .tl-head > .tl-title,
.trad-shell .src-head > gg-icon, .trad-shell .src-head > .panel-title,
.trad-shell .clips-head > gg-icon, .trad-shell .clips-head > .panel-title,
.trad-shell .tr-headrow > gg-icon, .trad-shell .tr-headrow > h2 { display: none; }   /* the tab is the title */
.trad-shell .clips-head { flex: 0 0 auto; }
.trad-shell .clips-head > .pt-count { display: none; }   /* the count is on the Project panel's row; alone before New clip it read as a stray digit */
.trad-shell .clips-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.trad-shell .src-head { flex: 0 0 auto; flex-wrap: nowrap; }   /* one row: what does not fit folds into More (panelhead.js); a wrapped row was cut off by the head's height */
/* "...settings are on the right": true of the other layout. The line cannot be cut in two, so it goes. */
.trad-shell .insp-nosel .ehint { display: none; }
/* the transcript dock's head is ONE row: search, its count, the timing nudge */
.trad-shell .sticky-head { padding: 7px 8px; }
.trad-shell .tr-headrow { flex-wrap: nowrap; margin: 0; }
.trad-shell .tr-headrow > .grow { display: none; }
.trad-shell .tr-headrow .tr-search { order: 1; flex: 1 1 auto; width: auto; max-width: none; min-width: 80px; }
.trad-shell .tr-headrow .tr-count { order: 2; }
.trad-shell .tr-headrow #tr_timing { order: 3; }
.trad-shell .comp-canvaswrap { margin: 8px 8px 0; }
.trad-shell #tplbanner { flex: 0 0 auto; }

/* the timeline is a panel of the shell */
.trad-shell .trad-tl { flex: 1 1 auto; }

/* ============================ the Project panel (trad_project.js) ============================ */
.trad-shell .clips-subhead { flex: 0 0 auto; }
/* (the Clips panel keeps its Auto-Gen / Manual tabs: they filter its cards; the Project panel's list shows every clip) */
.trad-proj { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; color: var(--text2); font: 400 var(--fs-control)/1.3 var(--f-body); user-select: none; }
.trad-proj .tt-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex: 0 0 auto; }
/* the selected row, with what its card had */
/* ONE height whatever is selected: the rows below must not move when a click changes it */
.trad-proj .tp-head { flex: 0 0 128px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 9px; background: var(--card); }
.trad-proj .tp-acts { margin-top: auto; }
.trad-proj .tp-note { color: var(--muted); font-size: var(--fs-data); align-items: center; min-height: 22px; }
.trad-proj .tp-top { display: flex; gap: 9px; align-items: center; min-width: 0; }
.trad-proj .tp-thumb { flex: 0 0 74px; width: 74px; height: 42px; border-radius: var(--radius,5px); object-fit: cover; background: var(--well); }
.trad-proj .tp-kind, .trad-proj .tp-swatch { flex: 0 0 42px; height: 42px; border-radius: var(--radius,5px); display: grid; place-items: center; background: var(--well); color: var(--muted); }
.trad-proj .tp-kind .tt-ico { width: 18px; height: 18px; }
.trad-proj .tp-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trad-proj .tp-namerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.trad-proj .tp-namerow .title { flex: 1 1 auto; min-width: 0; height: 22px; padding: 0 7px; border: none; border-radius: var(--radius,5px); background: var(--well); color: var(--text); font: 600 var(--fs-control) var(--f-body); }
.trad-proj .tp-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-proj .tp-sub { color: var(--muted); font: 400 var(--fs-label) var(--f-mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-proj .tp-times { display: flex; gap: 8px; }
.trad-proj .tp-times .ce-f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 6px; }   /* clips.css stacks the same chip; here it is a row */
.trad-proj .tp-times .ce-f .lbl { color: var(--muted); font: 400 var(--fs-label) var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.trad-proj .tp-times input { flex: 1 1 auto; min-width: 0; height: 22px; padding: 0 6px; border: none; border-radius: var(--radius,5px); background: var(--well); color: var(--text); font: 400 var(--fs-data) var(--f-mono); }
.trad-proj .tp-acts { display: flex; gap: 5px; flex-wrap: nowrap; }
.trad-proj .tp-segs { flex: 0 0 auto; max-height: 170px; overflow-y: auto; padding: 6px 9px; background: var(--card); }
/* the list */
.trad-proj .tp-cols, .trad-proj .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 50px; align-items: center; padding: 0 9px; }
.trad-proj .tp-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 9px; }
.trad-proj .tp-cols { flex: 0 0 20px; background: var(--chip); color: var(--muted); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; }
.trad-proj .tp-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.trad-proj .tp-row { height: 22px; transition: background .12s; }
.trad-proj .tp-row:hover { background: var(--card); }
.trad-proj .tp-row.sel { background: var(--card-sel); color: var(--text); }
.trad-proj .tp-row.ticked { background: rgba(var(--lime-rgb), .14); }
.trad-proj .tp-row.ticked.sel { background: rgba(var(--lime-rgb), .24); }
.trad-proj .tp-row.off .tp-n b { opacity: .45; text-decoration: line-through; }
.trad-proj .tp-row.dragging { opacity: .5; }
.trad-proj .tp-n { display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 8px; }
.trad-proj .tp-n b { font-weight: 400; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-proj .tp-n b.editing { flex: 1 1 auto; background: var(--well); outline: 2px solid var(--lime); border-radius: var(--radius-sm,3px); padding: 0 3px; text-overflow: clip; user-select: text; cursor: text; }   /* a clip's name being typed (inplace.js) */
.trad-proj .tp-row.in .tp-n { padding-left: 17px; }
.trad-proj .tp-folder { color: var(--text2); }
.trad-proj .tp-fold { color: var(--muted); }
.trad-proj .tp-sw { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-sm,3px); }
.trad-proj .tp-n .clip-id { width: 10px; height: 10px; }
.trad-proj .tp-live { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }   /* the footage in the viewer */
.trad-proj .tp-n gg-icon { flex: 0 0 13px; width: 13px; height: 13px; color: var(--text2); }   /* an asset row's kind (assets.js) */
.trad-proj .tp-uses { margin-left: auto; color: var(--muted); font: 400 var(--fs-label) var(--f-mono); letter-spacing: -.01em; white-space: nowrap; font-style: normal; }   /* how many layers show the file */
.trad-proj .tp-kind gg-icon { width: 18px; height: 18px; }
.trad-proj .tp-k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-proj .tp-l { color: var(--muted); font: 400 var(--fs-label) var(--f-mono); letter-spacing: -.01em; text-align: right; }
.trad-proj .tp-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--card); color: var(--text2); font-size: var(--fs-data); }
.trad-proj .tp-grow { flex: 1 1 auto; }
.trad-proj.tp-filedrop .tp-rows { background: rgba(var(--lime-rgb), .05); }   /* a picture or a sound held over the panel: it becomes a row (assetdrop.js) */

/* the transcript's actions, under the transcript */
/* a footer: the panel's own surface, a divider over it, its buttons flat */
.trad-tract { flex: 0 0 auto; display: flex; gap: 5px; flex-wrap: wrap; padding: 6px 8px; background: var(--panel); border-top: 1px solid var(--divider); }
.trad-shell #addsel, .trad-shell #addsellayers { display: none; }   /* said in this layout's words by the strip below */
.trad-shell .ts-tab span:last-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* a row, or selected words, held over the timeline: where the layer will start */
.trad-tl { position: relative; }
.trad-tl .tt-dropline { position: absolute; top: 26px; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; z-index: 6; }
.trad-tl.tt-dropping .tt-rows { background: rgba(var(--lime-rgb), .05); }
.trad-tl .tt-droprow { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--text); pointer-events: none; z-index: 6; }   /* where in the stack a dropped row lands */

/* ============================ the switch, and a docked plugin panel ============================ */
/* the layout's name, as a quiet button in the bar's corner: Prepare / Compose / Both is the
   bar's one switch, and this is a preference beside it */
#menubar #layout_btn { flex: 0 0 auto; align-self: center; margin-left: 6px; }
body.on-start #layout_btn { display: none; }
/* on a narrow window it gives way; the View menu and Settings still have it */
@media (max-width: 860px) { #menubar #layout_btn { display: none; } }
.trad-shell .ts-plug { display: none; }
.trad-shell .ts-plug.on { display: block; flex: 0 0 var(--ts-plug, 380px); min-width: 0; margin-left: 5px; border-radius: var(--radius-lg,9px); background: var(--panel); }