/* Lista punktowana z kropkami połączonymi linią (przeglądy rozdziałów).
   Użycie w Markdown: lista wewnątrz <div class="timeline">, pierwszy akapit
   pozycji to tytuł (plakietka), kolejne akapity to opis. */
.timeline > ul {
  list-style: none;
  margin: 1.5em 0;
  padding: 0 0 0 2.6em;
  position: relative;
}

.timeline > ul > li {
  position: relative;
  padding-bottom: 1.4em;
}

/* linia łącząca kropki: od kropki bieżącej do kropki następnej */
.timeline > ul > li::before {
  content: "";
  position: absolute;
  left: -1.85em;
  top: 1.1em;
  bottom: -1.1em;
  width: 2px;
  background: var(--searchbar-border-color);
  opacity: 0.6;
}

.timeline > ul > li:last-child::before {
  display: none;
}

/* kropka z pierścieniem */
.timeline > ul > li::after {
  content: "";
  position: absolute;
  left: calc(-1.85em - 7px);
  top: calc(1.1em - 8px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--links);
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 2px var(--links);
}

/* tytuł pozycji jako plakietka */
.timeline > ul > li > p:first-child {
  display: inline-block;
  margin: 0 0 0.5em 0;
  padding: 0.2em 1em;
  border: 1px solid var(--searchbar-border-color);
  border-radius: 999px;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}

.timeline > ul > li > p:first-child a {
  text-decoration: none;
}

.timeline > ul > li > p:not(:first-child) {
  margin: 0 0 0.5em 0;
}

@media print {
  .timeline > ul > li {
    break-inside: avoid;
  }
}

/* wariant zwarty: <div class="timeline compact"> z listą bez pustych linii,
   każda pozycja to jedna linia bez plakietki */
.timeline.compact > ul {
  margin: 1em 0;
}

.timeline.compact > ul > li {
  padding-bottom: 0.45em;
}

.timeline.compact > ul > li::before {
  top: 0.75em;
  bottom: -0.75em;
}

.timeline.compact > ul > li::after {
  top: calc(0.75em - 8px);
}