/*
 * timeline.css — 时间轴组件样式（第五章案例）
 * 对应 JS：js/main.js → tgl()
 */

.tl {
  position: relative;
  padding-left: 28px;
  margin: 18px 0;
}

/* 竖线 */
.tl::before {
  content: '';
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}

/* 时间轴条目 */
.tli { position: relative; margin-bottom: 20px; cursor: pointer; }

/* 圆点 */
.tli::before {
  content: '';
  position: absolute;
  left: -24px; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: all .2s;
}
.tli:hover::before,
.tli.open::before {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* 文字层 */
.tt { font-size: 11px; color: var(--green); margin-bottom: 4px; letter-spacing: 1px; }
.ti { font-size: 14px; color: var(--text); margin-bottom: 3px; }

/* 展开详情 */
.td {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
  display: none;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}
.tli.open .td { display: block; }