/* Changelog page: a vertical timeline of releases (release rows styled in download.css). */

.changelog { padding-top: 48px; padding-bottom: 80px; }
.changelog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.timeline { list-style: none; margin-top: 48px; position: relative; padding-left: 34px; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 6px; width: 1px; background: var(--line2); }
.timeline .loading { display: grid; place-items: center; padding: 40px 0; }
.timeline .release { padding: 20px 0 22px; }
.entry { position: relative; }
.entry .dot { position: absolute; left: -32px; top: 25px; width: 11px; height: 11px; background: var(--void); border: 1px solid var(--line2); }
.entry .dot.latest { background: var(--lumen); border-color: var(--lumen); }
.changelog .more { margin: 28px auto 0; display: flex; }

@media (max-width: 640px) {
  .timeline { padding-left: 24px; }
  .timeline::before { left: 4px; }
  .entry .dot { left: -24px; width: 9px; height: 9px; }
}