/* ─────────────────────────────────────────────────────────────────────────
   "What's New" changelog timeline — /app/whats-new
   Renders inside .p-shell, so it inherits the platform design tokens
   (--accent #e3a948, --tile, --line, --text/--muted/--faint, --serif/--sans/
   --mono). Page-local blue for the "improved" tag (platform has no info token).
   ───────────────────────────────────────────────────────────────────────── */

.cl-wrap {
  --cl-info: #5b9bd5;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 64px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cl-head { margin-bottom: 24px; }

.cl-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 4px;
}

.cl-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.cl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.cl-filter {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--tile);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.cl-filter:hover { color: var(--text); border-color: var(--line-soft); }

.cl-filter.is-active {
  border-color: var(--accent);
  color: var(--acc-bright);
  background: var(--acc-dim);
}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.cl-timeline {
  position: relative;
  padding-left: 24px;
}

.cl-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.cl-release-group { margin-bottom: 30px; }
.cl-release-group:last-child { margin-bottom: 0; }

.cl-release-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.cl-rel-ver {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--acc-bright);
}

.cl-rel-date {
  font-size: 12px;
  color: var(--faint);
}

.cl-narrative {
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
}

/* ── Entry card ─────────────────────────────────────────────────────────── */
.cl-entry {
  position: relative;
  padding: 0 0 18px 4px;
  border-left: 2px solid transparent;
  margin-left: -4px;
  padding-left: 8px;
  transition: border-color .15s ease, padding-left .15s ease, opacity .15s ease, max-height .15s ease;
}

.cl-entry:hover {
  border-left-color: var(--acc-line);
  padding-left: 12px;
}

.cl-entry.is-hidden {
  display: none;
}

.cl-dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--faint);
  border: 2px solid var(--shell);
}

/* Unread entries (above the caught-up line) pulse in the accent colour. */
.cl-entry.is-unread .cl-dot {
  background: var(--accent);
  animation: cl-pulse 2s infinite;
}

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

.cl-tag {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.cl-tag--new      { background: color-mix(in oklab, var(--ok) 14%, transparent);      color: var(--ok);      border-color: color-mix(in oklab, var(--ok) 32%, transparent); }
.cl-tag--improved { background: color-mix(in oklab, var(--cl-info) 14%, transparent); color: var(--cl-info); border-color: color-mix(in oklab, var(--cl-info) 32%, transparent); }
.cl-tag--fixed    { background: color-mix(in oklab, var(--danger) 14%, transparent);  color: var(--danger);  border-color: color-mix(in oklab, var(--danger) 32%, transparent); }
.cl-tag--beta     { background: var(--acc-dim);                                       color: var(--acc-bright); border-color: var(--acc-line); }

.cl-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 2px 8px 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
}

.cl-tool-ic {
  width: 13px;
  height: 13px;
  color: var(--faint);
}

.cl-entry-head {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 3px;
}

.cl-entry-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* ── "Caught up" divider (inserted by whats-new.js) ─────────────────────── */
.cl-caught-up {
  position: relative;
  text-align: center;
  margin: 8px 0 26px -24px;
  border-top: 1px dashed var(--line-soft);
}

.cl-caught-up span {
  position: relative;
  top: -9px;
  background: var(--shell);
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--faint);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.cl-empty {
  text-align: center;
  margin-top: 4rem;
  color: var(--faint);
}

.cl-empty svg { width: 32px; height: 32px; color: var(--faint); }

.cl-empty h2 {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  margin: 14px 0 4px;
}

.cl-empty p { font-size: 13px; color: var(--faint); margin: 0; }

@keyframes cl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--acc-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-entry.is-unread .cl-dot { animation: none; }
}