/* ============================================================
   changelog.css — What's New / Roadmap page
   Uses design tokens from global.css
   ============================================================ */

.cl-hero {
  background: var(--c-white);
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.cl-hero .hero-blob {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  filter: blur(80px); background: rgba(234,88,12,0.10); top: -120px; left: 8%;
  pointer-events: none; z-index: 0;
}

/* Entry list */
.cl-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cl-entry {
  background: var(--c-white); border: 1px solid var(--c-slate-200);
  border-radius: 1rem; padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem;
}
.cl-entry .cl-meta { }
.cl-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; border-radius: 999px; padding: 0.25rem 0.6rem;
}
.cl-tag.shipped { color: #15803d; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); }
.cl-tag.shipped .clt-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.cl-tag.soon { color: var(--c-orange-700); background: rgba(234,88,12,0.08); border: 1px solid rgba(234,88,12,0.2); }
.cl-tag.soon .clt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange-500); }
.cl-area { font-size: 0.75rem; color: var(--c-slate-500); margin-top: 0.6rem; font-family: var(--ff-mono); letter-spacing: 0.04em; }
.cl-entry h3 { font-family: var(--ff-display); font-weight: 800; font-size: 1.0625rem; color: var(--c-slate-900); }
.cl-entry p { font-size: 0.9rem; color: var(--c-slate-600); margin-top: 0.4rem; line-height: 1.6; }
.cl-entry ul { list-style: none; margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cl-entry li { font-size: 0.85rem; color: var(--c-slate-700); padding-left: 1.3rem; position: relative; line-height: 1.4; }
.cl-entry li::before { content: "✓"; position: absolute; left: 0; color: var(--c-orange-600); font-weight: 800; font-size: 0.75rem; }
.cl-entry.roadmap li::before { content: "○"; color: var(--c-slate-400); }

.cl-section-label {
  font-family: var(--ff-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-orange-600); font-weight: 700; margin: 2.5rem 0 0;
  display: flex; align-items: center; gap: 0.6rem;
}
.cl-section-label::before { content: ""; width: 1.75rem; height: 2px; border-radius: 1px; background: var(--c-orange-600); }

@media (max-width: 640px) {
  .cl-entry { grid-template-columns: 1fr; gap: 0.75rem; }
}