/* ============================================================
   CHANGELOG — /changelog/ and /changelog/v<version>/
   Generated by .github/scripts/build_changelog.js
   ============================================================ */

.section.changelog {
  padding-top: calc(var(--nav-height) + var(--space-xl));
  max-width: 1100px;
  margin: 0 auto;
}

.changelog-head { margin-bottom: var(--space-lg); }
.changelog-head p { color: var(--color-text-dim); font-weight: 300; }

.changelog-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Left rail: versions, newest first */
.changelog-rail { position: sticky; top: calc(var(--nav-height) + var(--space-sm)); }
.changelog-rail ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.changelog-rail a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--color-text-dim);
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.changelog-rail a:hover { color: var(--color-text); }
.changelog-rail a.is-selected { color: var(--color-text); border-left-color: var(--color-text); }
.changelog-rail-version { display: block; font-size: 1.05rem; }
.changelog-rail time { font-size: var(--fs-small); color: var(--color-text-dim); }

.changelog-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: var(--fs-tiny);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Notes */
.changelog-notes-head { padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: var(--space-md); }
.changelog-notes-head h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h2); margin: 0 0 var(--space-xs); }
.changelog-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); color: var(--color-text-dim); font-size: var(--fs-small); letter-spacing: 0.04em; }
.changelog-meta a { color: var(--color-cyan-light); text-decoration: none; }
.changelog-meta a:hover { text-decoration: underline; }

.changelog-body { color: var(--color-text-dim); line-height: var(--lh-body); font-weight: 300; }
.changelog-body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: var(--space-lg) 0 var(--space-sm);
}
.changelog-body h2:first-child { margin-top: 0; }
.changelog-body h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1rem; color: var(--color-text); margin: var(--space-md) 0 var(--space-xs); }
.changelog-body ul { list-style: none; margin: 0; padding: 0; }
.changelog-body li { position: relative; padding-left: 1.1em; margin-bottom: 0.5em; overflow-wrap: anywhere; }
.changelog-body li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 5px; height: 1px; background: var(--color-text-dim); }
.changelog-body strong { color: var(--color-text); font-weight: 500; }
.changelog-body code { font-family: var(--font-mono); font-size: 0.9em; }

@media (max-width: 768px) {
  .section.changelog { padding-top: calc(var(--nav-height) + var(--space-lg)); }
  .changelog-layout { grid-template-columns: 1fr; gap: var(--space-md); }
  .changelog-rail { position: static; }
  .changelog-rail ul { display: flex; gap: var(--space-xs); overflow-x: auto; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: var(--space-xs); scrollbar-width: none; }
  .changelog-rail a { margin: 0; border-left: 0; border-bottom: 1px solid transparent; white-space: nowrap; }
  .changelog-rail a.is-selected { border-bottom-color: var(--color-text); }
}