/* Changelog styles — shared by the /changelog page, the docs sidebar block and the
   dashboard card, so an entry looks the same wherever it is rendered. Built only on
   the existing tokens (no new colours) so it inherits any theme change for free. */

.x-cl-main { max-width: 760px; margin: 0 auto; padding: 56px 20px 96px; }
.x-cl-head h1 { margin: 0 0 10px; }
.x-cl-head p { color: var(--x-fg-soft); max-width: 60ch; margin: 0 0 36px; }
.x-cl-loading { color: var(--x-fg-muted); }

.x-cl-list { list-style: none; margin: 0; padding: 0; }

.x-cl-entry {
  padding: 22px 0;
  border-top: 1px solid var(--x-line);
}
.x-cl-entry:first-child { border-top: 0; padding-top: 0; }

.x-cl-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 12px; color: var(--x-fg-muted);
}

.x-cl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid currentColor;
  /* Colour carries meaning, but every badge also states its word, so the scheme
     never has to be decoded and it survives a colour-blind reader. */
}
.x-cl-added      { color: #3ecf8e; }
.x-cl-changed    { color: #6ea8fe; }
.x-cl-fixed      { color: #c99bff; }
.x-cl-deprecated { color: #ffb454; }
.x-cl-removed    { color: #ff6b8a; }

.x-cl-title { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.x-cl-body  { margin: 0 0 10px; color: var(--x-fg-soft); line-height: 1.6; }

.x-cl-link {
  color: var(--x-accent); text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.x-cl-link:hover { text-decoration: underline; }

/* Compact variant: title + meta only, used in the docs block and dashboard card. */
.x-cl-compact { padding: 12px 0; }
.x-cl-compact .x-cl-title { font-size: 14px; margin: 0; }
.x-cl-compact .x-cl-meta  { margin-bottom: 5px; }

/* ── docs sidebar block ───────────────────────────────────────────────────── */
.x-cl-docs {
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--x-line);
  border-radius: 12px;
  background: transparent;
}
.x-cl-docs-head {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--x-fg-muted); margin-bottom: 6px;
}

/* ── dashboard card ───────────────────────────────────────────────────────── */
.x-cl-card { margin-top: 24px; }
.x-cl-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 4px;
}
.x-cl-card-head h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }

/* Unread marker. A changelog nobody is told about is a changelog nobody reads. */
.x-cl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--x-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-accent) 25%, transparent);
  display: inline-block; flex: none;
}

@media (max-width: 620px) {
  .x-cl-main { padding: 36px 16px 72px; }
  .x-cl-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}