/* The canvas timeline: an axis strip, a scrolling body with a DOM gutter of row
   labels on the left and sticky canvases on the right. */

.tl { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; background: var(--bg); outline: none; }
.tl-axis { height: 22px; flex: none; position: relative; border-bottom: 1px solid var(--line); background: var(--panel); cursor: crosshair; user-select: none; }
.tl-select { position: absolute; top: 0; bottom: 0; z-index: 3; background: var(--accent); opacity: 0.15; border-left: 1px solid var(--sel); border-right: 1px solid var(--sel); pointer-events: none; }
.tl-axis canvas { position: absolute; left: var(--gutter-w); top: 0; }
.tl-axis .tl-corner { position: absolute; left: 0; top: 0; width: var(--gutter-w); height: 100%; padding: 2px 6px; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.tl-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.tl-canvases { position: sticky; top: 0; left: var(--gutter-w); }
.tl-canvases canvas { position: absolute; left: 0; top: 0; }
.tl-canvases canvas.overlay { pointer-events: none; }
.tl-gutter { position: absolute; left: 0; top: 0; width: var(--gutter-w); z-index: 2; background: var(--panel); border-right: 1px solid var(--line); }
.tl-sizer { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; }
.tl-row {
  position: absolute; left: 0; width: 100%; display: flex; align-items: center; gap: 4px;
  padding: 0 4px 0 6px; font-size: 11px; white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--line-soft); color: var(--fg); cursor: default;
}
.tl-row.chip { color: var(--fg-strong); font-weight: 600; background: var(--panel-2); }
.tl-row.d1 { padding-left: 14px; }
.tl-row.d2 { padding-left: 30px; color: var(--dim); }
.tl-row.d3 { padding-left: 46px; color: var(--dim); }
.tl-row.sub { color: var(--dim); }
.tl-row.host { color: var(--dim); }
.tl-row:not(.expandable) .lbl { margin-left: 0; }
.tl-row .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tl-row.expandable { cursor: pointer; }
.tl-row .tog { width: 18px; height: 18px; line-height: 18px; font-size: 13px; color: var(--fg); text-align: center; cursor: pointer; flex: none; border-radius: 3px; }
.tl-row .tog:hover, .tl-row.expandable:hover .tog { background: var(--hi); color: var(--fg-strong); }
.tl-row .mini { display: flex; gap: 2px; }
.tl-row .mini button { padding: 0 4px; font-size: 10px; line-height: 14px; border-radius: 3px; }
.tl-row .mini button.on { background: var(--hi); border-color: var(--accent); }
.tl-row.hl { background: var(--hi); }
.tl-row .badge { margin-left: 2px; }
.tl-empty { position: absolute; left: var(--gutter-w); top: 40px; right: 0; text-align: center; color: var(--dim); }