/* Release notes (lotzy.ai/changelog). Built from src/changelog.json by scripts/changelog/build.cjs, which copies this file
   into website/. The page uses the guide layout (.guide, .guide-toc, .guide-body) from styles.css. */
.cl-toc { max-height:calc(100vh - 100px); overflow:auto; overscroll-behavior:contain; scrollbar-width:none; }
.cl-toc::-webkit-scrollbar { display:none; }
.cl-month + .cl-month { margin-top:12px; }
.cl-month > span { display:block; padding:2px 10px 4px; font-size:12px; color:var(--text-2); }
.cl-toc ol { margin:0; counter-reset:none; }
.cl-toc ol a::before { content:none; }
.cl-toc a { padding:3px 10px; font-variant-numeric:tabular-nums; }

.cl-body { gap:0; }
.cl-entry { position:relative; scroll-margin-top:80px; padding:0 0 48px 32px; border-left:1px solid var(--line); }
.cl-entry:last-child { padding-bottom:8px; }
.cl-entry::before { content:""; position:absolute; left:-6px; top:12px; width:11px; height:11px; border-radius:50%; background:var(--line); }
.cl-entry.latest::before { background:#ff4b3e; box-shadow:0 0 0 5px rgba(255, 75, 62, .18), 0 0 18px rgba(255, 75, 62, .45); }
.cl-entry header { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:16px; }
.cl-entry h2 { font-size:clamp(24px, 3vw, 30px); }
.cl-entry time { font-size:14px; color:var(--text-2); }
.cl-badge { align-self:center; padding:3px 10px; border-radius:980px; background:var(--red-grad, var(--accent)); color:#fff; font-size:12px; font-weight:600; letter-spacing:0; }
.cl-list { margin:0; padding-left:20px; display:grid; gap:10px; max-width:72ch; color:var(--text-2); }
.cl-list li::marker { color:#ff4b3e; }
.cl-list b { color:var(--text); font-weight:600; }

.cl-cta { margin-top:88px; text-align:center; display:grid; justify-items:center; gap:4px; }
.cl-cta h2 { font-size:clamp(30px, 4.4vw, 46px); line-height:1.06; }
.cl-cta .lead { margin:10px auto 22px; }

@media (max-width: 960px) {
  .cl-toc { max-height:none; overflow:visible; padding-right:16px; }
  .cl-month { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
  .cl-month > span { width:100%; padding-left:2px; }
  .cl-toc ol { display:flex; flex-wrap:wrap; gap:4px; }
  .cl-toc a { padding:4px 10px; background:var(--surface); }
}
@media (max-width: 640px) {
  .cl-entry { padding-left:22px; }
  .cl-cta { margin-top:64px; }
}