/* Version-history TIMELINE — restyles the .kw-changelog list (agent detail +
 * public catalog "What's new") from flat boxed cards into a vertical timeline:
 * a 2px rail down the left with a node dot per release. The current/installed
 * release node glows indigo; an upgrade-target (--newer) node glows teal.
 *
 * Loaded AFTER update_banner.css so these rules win over the old boxed-card
 * styles. The version body / tag / ver / date / downgrade rules still live in
 * update_banner.css — this file only owns the timeline structure + the .vpill
 * status pills. Brand tokens only; light is the base, html.dark overrides
 * (matching the repo convention). */

/* ---- Rail ---- */
.kw-changelog { position: relative; }
.kw-changelog::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--kw-border-color);
}

/* ---- Item + node dot ---- */
.kw-changelog__item {
  position: relative;
  padding: 0 0 1.375rem 1.875rem;  /* room for the rail/node on the inline-start */
}
.kw-changelog__item:last-child { padding-bottom: 0; }
.kw-changelog__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kw-bg-elevated);
  border: 2px solid var(--kw-border-color);
}

/* Current / installed release — glowing indigo node. */
.kw-changelog__item--current::before {
  border-color: var(--kw-electric-indigo);
  background: var(--kw-electric-indigo);
  box-shadow: 0 0 0 3px rgba(77, 96, 251, 0.18);
}

/* Upgrade target ("what you'll get by upgrading") — glowing teal node + a
 * faint, translucent teal band so the rail still reads through it. */
.kw-changelog__item--newer {
  background: rgba(43, 182, 115, 0.06);
  border: 1px solid rgba(43, 182, 115, 0.28);
  border-radius: var(--kw-radius-md);
  margin-bottom: 0.625rem;
  padding-block: 0.625rem;
  padding-inline-end: 0.875rem;
}
html.dark .kw-changelog__item--newer {
  background: rgba(43, 182, 115, 0.08);
  border-color: rgba(43, 182, 115, 0.40);
}
.kw-changelog__item--newer::before {
  top: 0.875rem;  /* nudge node down to clear the band's top padding */
  border-color: var(--kw-teal);
  background: var(--kw-teal);
  box-shadow: 0 0 0 3px rgba(43, 182, 115, 0.18);
}

/* ---- Version status pills (.vpill) ---- */
.vpill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--kw-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--kw-radius-pill);
  border: 1px solid;
}
.vpill .kw-ico { width: 11px; height: 11px; }

/* Light is the base; html.dark overrides — same green/violet/gold/red family
 * as the kw-pill primitives, just sized for the timeline head. */
.vpill--stable     { background: #E6F7EF; color: #1B8E5A; border-color: #B6E6CF; }
.vpill--beta       { background: #F1ECFB; color: #6B43C9; border-color: #DDD0F4; }
.vpill--breaking   { background: #FEF6DC; color: var(--kw-yellow-ink); border-color: #F6E0A0; }
.vpill--yanked     { background: #FDECEC; color: #C23434; border-color: #F4C4C4; }
.vpill--deprecated { background: var(--kw-bg-subtle); color: var(--kw-fg-muted); border-color: var(--kw-border-color); }

html.dark .vpill--stable   { background: rgba(43, 182, 115, 0.12); color: #36C588; border-color: rgba(43, 182, 115, 0.32); }
html.dark .vpill--beta     { background: rgba(131, 82, 232, 0.14); color: #B79AF2; border-color: rgba(131, 82, 232, 0.34); }
html.dark .vpill--breaking { background: rgba(253, 202, 19, 0.12); color: var(--kw-signal-gold); border-color: rgba(253, 202, 19, 0.32); }
html.dark .vpill--yanked   { background: rgba(229, 69, 69, 0.12); color: #FF8484; border-color: rgba(229, 69, 69, 0.34); }