.root {
  display: flex;
  flex-direction: column;
  gap: var(--su-space-4);
  list-style: none;
}

.item {
  position: relative;
  display: flex;
  gap: var(--su-space-3);
}

/* 连接线：从标记下方连到下一条 */
.item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 26px;
  bottom: calc(-1 * var(--su-space-4));
  left: 11px;
  width: 1px;
  background-color: var(--su-border);
}

.marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--su-border-strong);
  border-radius: var(--su-radius-pill);
  background-color: var(--su-bg-card);
  font-size: var(--su-font-size-xs);
  color: var(--su-text-muted);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.title {
  font-size: var(--su-font-size-md);
  line-height: var(--su-line-height-md);
  color: var(--su-text-main);
}

.description {
  font-size: var(--su-font-size-sm);
  line-height: var(--su-line-height-sm);
  color: var(--su-text-muted);
}

/* 已完成 */
.done .marker {
  border-color: var(--su-color-primary);
  background-color: var(--su-color-primary);
  color: var(--su-white);
}

/* 进行中 */
.active .marker {
  border-color: var(--su-color-primary);
  color: var(--su-color-primary);
  font-weight: var(--su-font-weight-bold);
}

.active .title {
  font-weight: var(--su-font-weight-bold);
}