/* Changelog page styles for The Color of Time. Linked only by changelog.html.
   Pairs with the shared motion engine (css/motion.css + js/motion.js): the reveal
   fade-in for [data-reveal] lives in motion.css; this file only styles the timeline
   itself. Tokens come from motion.css (:root --color-*). */

.cl-list {
  position: relative;
  padding-left: 30px;
}

/* The rail reads like the site's own "% aged" gauge stood on end: fresh accent at
   the newest (top) entry, warming, then fading toward the oldest — newest-first. */
.cl-list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius:3px;
  background: linear-gradient(
    to bottom,
    var(--color-accent),
    var(--color-warn) 52%,
    rgba(34, 29, 23, 0.14)
  );
}

.cl-entry {
  position: relative;
  padding: 26px 0;
}
.cl-entry + .cl-entry {
  border-top: 1px solid rgba(34, 29, 23, 0.12);
}

/* Date checkpoint (2026-07-13): one per calendar day, sitting on the same rail as the
   entry dots but as a small square marker so a "day" reads as a different kind of mark
   than a "release". groupCountLabel only shows when more than one entry shares the day. */
.cl-date-head {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 6px;
}
.cl-list > .cl-date-head:first-child {
  margin-top: 0;
}
.cl-date-head::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  corner-shape: squircle;
  background: rgba(34, 29, 23, 0.4);
  box-shadow: 0 0 0 4px var(--color-bg);
}
.cl-date-label {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(34, 29, 23, 0.58);
}
.cl-date-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  background: rgba(200, 69, 59, 0.09);
  padding: 3px 9px;
  border-radius: 999px;
  corner-shape: squircle;
}

/* Subtle entrance stagger: when several entries cross the reveal threshold in the same
   pass (e.g. already in view on load), they settle in with a slight cascade rather than
   snapping into place in unison. Capped so a longer changelog doesn't back up the queue. */
.cl-entry[data-reveal]:nth-child(2) { transition-delay: 60ms; }
.cl-entry[data-reveal]:nth-child(3) { transition-delay: 120ms; }
.cl-entry[data-reveal]:nth-child(4) { transition-delay: 180ms; }
.cl-entry[data-reveal]:nth-child(n+5) { transition-delay: 240ms; }

.cl-entry::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 32px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  corner-shape: squircle;
  background: var(--cl-dot, var(--color-accent));
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 5px rgba(34, 29, 23, 0.12);
}

.cl-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cl-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-dot, var(--color-accent));
  border: 1px solid var(--cl-dot, var(--color-accent));
  border-radius: 999px;
  corner-shape: squircle;
  padding: 3px 10px;
}

.cl-headline {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-ink);
}

.cl-body {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(34, 29, 23, 0.76);
  margin: 11px 0 0;
  max-width: 62ch;
}

/* The intro column (title/lede/stats card) is `position:sticky` inline so it stays
   pinned beside the timeline on wide screens. Below ~800px the <main> flex row wraps
   and this column stacks above the timeline instead of sitting beside it — sticky then
   pins it over the entries as they scroll underneath, so headline/body text overlaps.
   Measured breakpoint (headless Chrome, changelog.html): wraps at <800px, side-by-side
   at >=800px. Desktop and tablet-width screens above that are untouched.
   !important is required to beat the inline `position:sticky` style attribute. */
@media (max-width: 799px) {
  .cl-sidebar {
    position: static !important;
    top: auto !important;
  }
}