/* ═══════════════════════════════════════════════════════════════════════
   Timeline — toolbar, ruler, lanes, keyframes, tween bars, playhead.
   ═══════════════════════════════════════════════════════════════════════ */

.tl { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tl__toolbar { display: flex; align-items: center; gap: 6px; height: 42px; flex: none; padding: 0 12px; border-bottom: 1px solid var(--app-border); }
.tl__time-wrap { display: flex; align-items: center; padding: 0 8px; }
.tl__time { font-family: var(--app-mono); font-size: 12px; color: var(--app-fg-muted); min-width: 48px; }
.tl__zoom { display: flex; gap: 2px; }
.loop.is-active, .app-btn.is-active { color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); }

.tl__scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }

.tl__grid {
  display: grid;
  grid-template-columns: var(--label-w, 176px) var(--lane-w, 800px);
  position: relative;
  align-content: start;
  --row-h: 26px;
  --ruler-h: 30px;
}

/* Ruler row (sticky top) */
.tl__corner {
  position: sticky; top: 0; left: 0; z-index: 5;
  height: var(--ruler-h); display: flex; align-items: center; padding: 0 12px;
  background: var(--app-bg); border-bottom: 1px solid var(--app-border); border-right: 1px solid var(--app-border);
}
.tl__corner-label { font-size: 11px; font-weight: 600; color: var(--app-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__ruler {
  position: sticky; top: 0; z-index: 3;
  height: var(--ruler-h); background: var(--app-bg); border-bottom: 1px solid var(--app-border);
  cursor: ew-resize;
}
.tl__tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--app-border); }
.tl__tick-label { position: absolute; top: 7px; left: 4px; font-family: var(--app-mono); font-size: 10px; color: var(--app-fg-muted); white-space: nowrap; }

/* Element group header */
.tl__group-head {
  position: sticky; left: 0; z-index: 4;
  min-height: var(--row-h); display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--app-surface); border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border);
  cursor: pointer;
}
.tl__group-head.is-selected { box-shadow: inset 2px 0 0 var(--app-accent); }
.tl__group-name { font-size: 12px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__addprop { height: 20px; font-size: 11px; border: 1px solid var(--app-border); border-radius: 5px; background: var(--app-bg); color: var(--app-fg-muted); cursor: pointer; }
.tl__group-lane { min-height: var(--row-h); background: var(--app-surface); border-bottom: 1px solid var(--app-border); }

/* Track row */
.tl__row-label {
  position: sticky; left: 0; z-index: 4;
  height: var(--row-h); display: flex; align-items: center; gap: 4px; padding: 0 10px 0 20px;
  background: var(--app-bg); border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border);
}
.tl__row-name { font-size: 12px; color: var(--app-fg-muted); flex: 1; }
.tl__row-del { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--app-fg-muted); cursor: pointer; opacity: 0; }
.tl__row-del svg { width: 12px; height: 12px; }
.tl__row-label:hover .tl__row-del { opacity: 1; }
.tl__row-del:hover { background: var(--app-surface); color: var(--app-danger); }

.tl__lane { position: relative; height: var(--row-h); border-bottom: 1px solid var(--app-border); }
.tl__lane:hover { background: color-mix(in srgb, var(--app-accent) 4%, transparent); }

.tl__tween {
  position: absolute; top: 50%; height: 3px; transform: translateY(-50%);
  background: color-mix(in srgb, var(--app-accent) 55%, var(--app-border)); border-radius: 2px; pointer-events: none;
}

.kf {
  position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px;
  transform: translateY(-50%); padding: 0; border: 0; background: transparent; cursor: ew-resize; color: var(--app-accent);
  display: flex; align-items: center; justify-content: center;
}
.kf svg { width: 10px; height: 10px; transition: transform .1s; }
.kf:hover svg { transform: scale(1.25); }
.kf.is-selected { color: var(--app-fg); }
.kf.is-selected svg { transform: scale(1.35); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--app-accent) 60%, transparent)); }

/* Playhead — absolute child of the scrollable grid */
.tl__playhead {
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: var(--app-accent); pointer-events: none; z-index: 6;
}
.tl__playhead::before {
  content: ''; position: absolute; top: 0; left: -5px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--app-accent);
}