/* CLAUDE 11-03: stacked video tracks (app-tracks.js). A lane per track above the main Video lane, its header on the left
   (V2, V3 ...; drawn icons, Graphite: no fill on lanes, only the clips are shapes), and the thin "+ Track" row on top. */
main .tl-track.tl-vt,
main .tl-labels > span.tl-vt-label {
  height: 34px;
  line-height: 34px;
}
main .tl-track.tl-vt-new,
main .tl-labels > span.tl-vt-add {
  height: 18px;
  line-height: 18px;
}
.tl-track.tl-vt-new {
  border-radius: var(--r-xs);
  transition: background-color var(--d-ui) ease;
}
/* while a layer is being moved: "+ Track" says what a drop there does */
body.tl-layer-drag .tl-track.tl-vt-new::after {
  content: 'Drop for a new track';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: var(--t-meta);
  color: var(--c-fg-3);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-xs);
  pointer-events: none;
}
.tl-track.tl-drop-target {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.tl-labels > span.tl-vt-label b {
  font-weight: 600;
  font-size: var(--t-meta);
  color: var(--c-fg-2, var(--c-fg-3));
  letter-spacing: 0.02em;
}
.tl-labels > span.tl-vt-label[data-vt] {
  cursor: grab;
  touch-action: none;
}
.tl-labels > span.tl-vt-lift {
  position: relative;
  z-index: 6;
  cursor: grabbing;
  background: var(--c-raised);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.tl-labels > span.tl-vt-target {
  box-shadow: inset 0 2px 0 var(--c-fg);
}
.tl-vt-plus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  height: 18px;
  padding: 0 6px 0 3px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1;
  cursor: pointer;
}
.tl-vt-plus:hover,
.tl-vt-plus:focus-visible {
  background: var(--c-raised);
  color: var(--c-fg);
}
.tl-vt-plus i,
.tl-vt-btn i {
  display: block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.tl-vt-plus i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
}
.tl-vt-btn {
  display: grid;
  place-items: center;
  width: 18px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-fg-3);
  flex: none;
  cursor: pointer;
}
.tl-vt-btn:hover,
.tl-vt-btn:focus-visible {
  background: var(--c-raised);
  color: var(--c-fg);
}
.tl-vt-btn.on {
  color: var(--c-fg);
}
.tl-vt-label .tl-lock {
  width: 18px;
}
.tl-vt-btn.hide i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E");
}
.tl-vt-btn.hide.on i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z'/%3E%3Cpath d='M2.5 13.5 13.5 2.5'/%3E%3C/svg%3E");
}
.tl-vt-btn.mute i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.5 6h2.5l3.5-3v10L5 10H2.5Z'/%3E%3Cpath d='M11 5.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
.tl-vt-btn.mute.on i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.5 6h2.5l3.5-3v10L5 10H2.5Z'/%3E%3Cpath d='M11 6l3 4M14 6l-3 4'/%3E%3C/svg%3E");
}
.tl-vt-btn.delete i {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}
/* a track's clips: its frames, the name in a chip over them */
.tl-block.tl-vt-clip {
  padding: 0;
  overflow: hidden;
  background-color: var(--c-surface-2);
  background-repeat: repeat-x;
  background-size: auto 100%;
  border-color: rgba(255, 255, 255, 0.08);
}
.tl-block.tl-vt-clip > .tl-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tl-block.tl-vt-clip > span {
  position: relative;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(0, 0, 0, 0.58);
  color: var(--c-fg);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.tl-block.tl-vt-clip > span em {
  font-style: normal;
  opacity: 0.75;
}
.tl-block.tl-vt-clip.selected {
  border-color: var(--c-fg);
}
.tl-track.tl-vt-off .tl-block {
  opacity: 0.4;
}
/* the phone (phonescreen.css): tracks are frames lanes like its main track; a track is added from Overlay */
body.pe-on .tl-track.tl-vt-new,
body.pe-on .tl-labels > .tl-vt-add {
  display: none;
}
body.pe-on .tl-track.tl-vt {
  height: 44px;
  line-height: 44px;
}