/* ============================================================
   Timeline — 時間軸
============================================================ */
.tl {
  grid-area: tl;
  background: var(--bg-1); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.tl-head {
  height: 34px; padding: 0 14px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.transport { display: flex; gap: 2px; }
.transport button {
  width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; color: var(--text-1);
}
.transport button:hover { background: var(--bg-3); color: var(--text-0); }

.time-disp { font-family: var(--mono); font-size: 12px; display: flex; gap: 4px; align-items: baseline; }
.time-disp .now { color: var(--accent); font-weight: 600; }
.time-disp .sep, .time-disp .tot { color: var(--text-2); font-size: 11px; }

.limit-note {
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
  background: var(--bg-2); padding: 3px 8px; border-radius: 10px;
}
.limit-note b { color: var(--accent-2); }
.limit-note input {
  width: 38px; background: transparent; border: none;
  color: var(--accent-2); font-family: var(--mono); font-size: 10px;
  text-align: right;
}
.limit-note input:focus { outline: none; }

.tl-body {
  flex: 1; display: grid; grid-template-columns: 220px 1fr;
  overflow: hidden; min-height: 0;
}
.tl-labels {
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg-1);
}
.tl-labels-inner { padding-top: 22px; }
.tl-label {
  height: 26px; padding: 0 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-1);
  border-bottom: 1px solid var(--bg-2); cursor: pointer;
}
.tl-label:hover { background: var(--bg-2); }
.tl-label.sel { background: var(--bg-3); color: var(--text-0); }

/* AE 風格：屬性展開列（子列） */
.tl-label.sub {
  padding-left: 28px;
  color: var(--text-2);
  font-size: 10px;
  font-family: var(--mono);
  background: rgba(0,0,0,0.15);
}
.tl-label.sub:hover { background: var(--bg-2); }
.tl-label.sub .prop-diamond {
  color: var(--accent); font-size: 9px; flex-shrink: 0;
}
.tl-label .twirl {
  display: inline-block; width: 10px;
  color: var(--text-2); font-size: 9px;
  transform-origin: center; transition: transform 0.15s;
}
.tl-label .twirl.open { transform: rotate(90deg); color: var(--accent); }

.tl-grid {
  overflow-x: auto; overflow-y: auto;
  position: relative; background: var(--bg-0); min-width: 0;
}
.tl-inner { position: relative; min-height: 100%; }
.ruler { height: 22px; position: sticky; top: 0; z-index: 3; background: var(--bg-1); border-bottom: 1px solid var(--line); }
#rulerC { display: block; position: absolute; top: 0; left: 0; }

.tracks { position: relative; }
.track {
  height: 26px;
  border-bottom: 1px solid var(--bg-2);
  position: relative;
}
.track.sub-row {
  background: rgba(0,0,0,0.15);
}

.clip {
  position: absolute; top: 3px; height: 20px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line-2);
  border-radius: 3px; cursor: grab;
  display: flex; align-items: center; padding: 0 6px;
  font-size: 10px; color: var(--text-1); overflow: hidden;
}
.clip:active { cursor: grabbing; }
.clip.sel {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(34, 211, 184, 0.22), rgba(34, 211, 184, 0.06));
  color: var(--text-0);
}
.clip-h { position: absolute; top: 0; bottom: 0; width: 4px; cursor: ew-resize; }
.clip-h.l { left: 0; } .clip-h.r { right: 0; }

.kf-mark {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 1px solid rgba(0,0,0,0.6);
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.1s;
}
.kf-mark:hover { background: var(--accent-hover); }
.kf-mark.sel { background: #fff; box-shadow: 0 0 4px var(--accent-glow); }

.playhead {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--accent);
  pointer-events: none; z-index: 4;
}
.playhead::before {
  content: ''; position: absolute; top: 0; left: -5px;
  width: 11px; height: 8px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}