.backlog-page {
  margin-bottom: 56px;
}

.backlog-page__empty {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
}

.backlog-entry {
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
  scroll-margin-top: 88px;
}

.backlog-entry:last-of-type {
  border-bottom: 0;
}

.backlog-entry__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 8px;
}

.backlog-entry__body {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.65;
}

.backlog-entry__body p {
  margin-bottom: 8px;
  font-size: 13px;
}

.backlog-entry__body ul,
.backlog-entry__body ol {
  margin: 4px 0 8px 22px;
}

.backlog-entry__body li {
  margin-bottom: 2px;
}

.backlog-entry__body code {
  padding: 1px 6px;
  color: var(--accent);
  background: rgb(0 255 156 / 10%);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.backlog-entry__body h1,
.backlog-entry__body h2 {
  margin: 10px 0 6px;
  color: var(--bright);
  font-size: 16px;
}

.backlog-entry__body a {
  color: var(--accent);
}

/* TODO/Note paragraphs authored with the `//TODO` or `// TODO`
   prefix are dim-styled at build time by src/lib/remark-backlog-todo.mjs
   (scoped to files under */
backlog/*). Keep this rule next to the
   other `.backlog-entry__body` selectors so any future restyle of
   the body surfaces (font size, line height, link color) stays
   coherent across the dim and fg tracks. */
.backlog-entry__body p.backlog-todo {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: italic;
}