/* ── 学习时间轴 ── */

.timeline-section { margin-bottom: 2rem; }

.timeline-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.timeline-pill {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(155, 141, 127, 0.2);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
.timeline-pill:hover { border-color: var(--color-brand); }
.timeline-pill.active {
  color: #fff;
  font-weight: 600;
  border-color: transparent;
}
.timeline-pill.active.all-pill { background: var(--color-brand); }
.timeline-pill.active.english-pill { background: var(--color-english); }
.timeline-pill.active.math-pill { background: var(--color-math); }
.timeline-pill.active.history-pill { background: var(--color-history); }

/* 时间轴容器 */
.timeline-container {
  position: relative;
  padding: 0 0 0 60px;
}
.timeline-container::before {
  content: '';
  position: absolute;
  left: 19px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(212, 165, 116, 0.3);
}
[data-theme="dark"] .timeline-container::before {
  background: rgba(255, 255, 255, 0.08);
}

/* 事件卡片 */
.tl-event {
  position: relative;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 16px;
  max-width: 640px;
  transition: background var(--transition-slow), border-color var(--transition-slow), transform var(--transition-fast);
  animation: tlFadeIn 0.3s ease;
}
.tl-event:hover {
  border-color: var(--color-brand);
  transform: translateY(-1px);
}
@keyframes tlFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 时间线节点 */
.tl-event::before {
  content: '';
  position: absolute;
  left: -50px; top: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-green);
}
.tl-event.type-evaluation::before { border-color: var(--color-brand); }
.tl-event.type-milestone::before {
  border-color: var(--color-blue);
  border-radius: 2px;
  transform: rotate(45deg);
  width: 8px; height: 8px;
  top: 15px; left: -49px;
}
.tl-event.type-lesson::before { border-color: var(--color-green); }

/* 评价卡片左侧竖条 */
.tl-event.type-evaluation {
  border-left: 3px solid var(--color-english);
}
.tl-event.type-evaluation.english-eval { border-left-color: var(--color-english); }
.tl-event.type-evaluation.math-eval { border-left-color: var(--color-math); }
.tl-event.type-evaluation.history-eval { border-left-color: var(--color-history); }

/* 里程碑卡片背景 */
.tl-event.type-milestone {
  background: linear-gradient(135deg, #FFFBF5, #FFF8EE);
}
[data-theme="dark"] .tl-event.type-milestone {
  background: rgba(255, 255, 255, 0.04);
}

/* 时间标记 */
.tl-date-label {
  position: absolute;
  left: -55px;
  top: 12px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  transform: translateX(-100%);
  padding-right: 8px;
}

/* 卡片内容 */
.tl-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.tl-body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tl-body blockquote {
  border-left: 3px solid var(--border-card);
  padding-left: 12px;
  color: var(--text-primary);
  font-style: italic;
}
.tl-footer {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-card);
}

/* 加载更多 */
.tl-load-more {
  text-align: center;
  margin-top: 1rem;
}
.tl-load-btn {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
}
.tl-load-btn:hover { text-decoration: underline; }
.tl-load-btn.loading { pointer-events: none; opacity: 0.6; }
.tl-info {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  text-align: center;
}
.tl-sentinel { height: 1px; }

/* 空状态 */
.tl-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

/* Skeleton */
.tl-skeleton .sk-card {
  height: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-skeleton .sk-line {
  height: 12px;
  background: #E8E0D5;
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.tl-skeleton .sk-line.w40 { width: 40%; }
.tl-skeleton .sk-line.w60 { width: 60%; }
.tl-skeleton .sk-line.w30 { width: 30%; }
[data-theme="dark"] .tl-skeleton .sk-line {
  background: rgba(255, 255, 255, 0.04);
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@media (max-width: 640px) {
  .timeline-container { padding-left: 48px; }
  .tl-event::before { left: -38px; }
  .tl-date-label { left: -43px; font-size: 0.6875rem; }
  .tl-event.type-milestone::before { left: -37px; }
}