/* =============================================================================
   Changelog. Loaded only on /changelog — shared tokens live in site.css.
   ========================================================================== */

/* clip, NOT hidden. overflow-x:hidden forces overflow-y to compute as auto,
   which makes this element a scroll container — and a sticky descendant then
   positions against THIS box instead of the viewport. The box never scrolls, so
   the version rail never stuck. clip does the same defensive job without
   creating a scroll container. */
.changelog { color: var(--ink); background: var(--bg); overflow-x: clip; }
.cl-wrap { max-width: 940px; margin: 0 auto; }

/* ------------------------------------------------------------------ hero -- */
.cl-hero { padding: 76px 32px 24px; }
.cl-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cl-eyebrow__rule { width: 26px; height: 2px; background: #05a558; }
.cl-eyebrow__text {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #05a558; font-weight: 600;
}
.cl-hero__title {
  margin: 0; font-size: 52px; line-height: 1.04; letter-spacing: -.03em;
  font-weight: 700; max-width: 680px;
}
.cl-hero__lede {
  max-width: 560px; margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: #565a4f;
}

/* --------------------------------------------------------------- releases -- */
.cl-list { padding: 20px 32px 90px; }
.cl-list__inner { display: flex; flex-direction: column; gap: 14px; }

.cl-rel {
  background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 18px;
  padding: 26px 28px; display: grid; grid-template-columns: 164px 1fr; gap: 0;
  box-shadow: 0 18px 40px -38px rgba(18,40,28,.3);
}
/* The rail and the note read as one block of text without something between
   them. The rule lives on the BODY, not the rail: the rail is sticky and only as
   tall as its chip, so a border on it would be a 40px stub floating in the gap.
   On the body it runs the height of the note, which is what separates them. */
.cl-rel__body { min-width: 0; border-left: 1px solid var(--line); padding-left: 28px; }
/* Sticky within the card: the version stays beside the note it belongs to while
   that note scrolls past, and stops at the card's end rather than carrying on
   into the next release. 68px of header, plus air.
   align-self:start is what makes it move at all — stretched, the rail would fill
   its grid area and have nowhere to travel. */
.cl-rel__meta {
  position: sticky; top: calc(68px + 20px); align-self: start;
  padding-right: 24px;
}
.cl-rel__version {
  display: inline-block; font-size: 14px; font-weight: 600; color: #14160f;
  background: #eef1ec; border-radius: 8px; padding: 5px 11px;
}
.cl-rel__date { font-size: 13px; color: #8b8f82; margin-top: 8px; }
.cl-rel__latest {
  display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: #05a558; background: rgba(0,214,119,.14);
  padding: 4px 10px; border-radius: 999px;
}

.cl-rel__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cl-changes { display: flex; flex-direction: column; gap: 10px; }
.cl-change { display: flex; align-items: flex-start; gap: 11px; }
.cl-change__text { font-size: 14.5px; line-height: 1.5; color: #3d4136; padding-top: 1px; }

.cl-tag {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 6px;
}
.cl-tag--new      { background: rgba(0,214,119,.14);  color: #05a558; }
.cl-tag--improved { background: rgba(43,127,208,.14); color: #2b7fd0; }
.cl-tag--fixed    { background: rgba(20,22,15,.08);   color: #6b6f63; }

.cl-empty { font-size: 16px; line-height: 1.6; color: #6b6f63; margin: 0; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 760px) {
  .cl-rel { grid-template-columns: 1fr; gap: 6px; }
  /* Stacked, so a vertical rule would divide nothing, and there is no room
     beside the note for the version to stick to. */
  .cl-rel__meta { position: static; padding-right: 0; }
  .cl-rel__body { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .cl-hero, .cl-list { padding-left: 20px; padding-right: 20px; }
  .cl-hero__title { font-size: 40px; }
}