/* =====================================================
   METEOR DEVELOPERS — Changelog (timeline sobre tokens del DS)
   ===================================================== */

.cl-list { display: flex; flex-direction: column; gap: var(--space-10); }

.cl-entry { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6);
  align-items: start; }
@media (max-width: 720px) { .cl-entry { grid-template-columns: 1fr; gap: var(--space-3); } }

.cl-meta { position: sticky; top: 80px; display: flex; flex-direction: column;
  gap: var(--space-2); align-items: flex-start; }
@media (max-width: 720px) { .cl-meta { position: static; flex-direction: row; align-items: center; } }
.cl-meta time { font-size: var(--fs-body-md); font-weight: 600; color: var(--text-primary); }
.cl-ver { font-family: var(--font-mono); font-size: var(--fs-body-xs); color: var(--text-brand);
  background: var(--action-primary-subtle); border: 1px solid var(--border-brand);
  padding: 2px 8px; border-radius: var(--radius-full); }

.cl-body { border-left: 2px solid var(--border-subtle); padding: 0 0 var(--space-2) var(--space-6);
  position: relative; }
@media (max-width: 720px) { .cl-body { border-left: none; padding-left: 0; } }
.cl-body::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
  border-radius: var(--radius-full); background: var(--action-primary);
  box-shadow: 0 0 0 4px var(--surface-canvas); }
@media (max-width: 720px) { .cl-body::before { display: none; } }

.cl-body h2 { font-size: var(--fs-h-lg); letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3); line-height: var(--lh-snug); }
.cl-body p { margin: 0 0 var(--space-3); color: var(--text-secondary);
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.cl-body ul { margin: 0 0 var(--space-3); padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2); }
.cl-body li { color: var(--text-secondary); font-size: var(--fs-body-md); line-height: var(--lh-normal); }
.cl-body strong { color: var(--text-primary); font-weight: 600; }
.cl-body code { font-family: var(--font-mono); font-size: .92em; color: var(--text-brand);
  background: var(--action-primary-subtle); padding: 1px 6px; border-radius: var(--radius-sm); }
.cl-body p:last-child, .cl-body ul:last-child { margin-bottom: 0; }