/* One marker geometry for the historical rail, writing tracks and book rail. */
.connection-dot {
  position: absolute;
  z-index: 5;
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--acc);
  box-shadow: var(--glow);
  pointer-events: none;
}
.connected .connection-dot::after,
.prophetic .connection-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--acc);
  border-color: color-mix(in srgb, var(--acc) 72%, var(--ink));
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
}
.earlier .connection-dot::after,
.fulfillment .connection-dot::after { border-left-width: 3px; }
.later .connection-dot::after,
.prophecy .connection-dot::after { border-right-width: 3px; }
.both .connection-dot::after { border-left-width: 3px; border-right-width: 3px; }
.ev .connection-dot { top: 0; }
.book-point::before,
.book-point.connected::after,
.writing-connection.writing-connection::before,
.writing-connection.writing-connection.connected::after { content: none; }
.book-point .connection-dot {
  left: -16px;
  top: 11px;
  transform: translateX(-50%);
}
.book-point.related .connection-dot,
.ev.undated .connection-dot { background: var(--acc2); }
.writing-items.writing-items { grid-template-rows: repeat(2, 96px); grid-auto-columns: 210px; }
.writing-connection.writing-connection { display: flex; flex-direction: column; width: 210px; min-height: 96px; padding-left: 36px; }
.writing-connection .connection-dot {
  left: 16px;
  top: 9px;
  /* Scale the historical marker as a whole, including its weighted ring. */
  transform: translateX(-50%) scale(.82);
}
.writing-ref.writing-ref,
.writing-label.writing-label { margin-left: 0; }
.writing-label.writing-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 560px) {
  .writing-items.writing-items { grid-auto-columns: 190px; }
  .writing-connection.writing-connection { width: 190px; }
}
@keyframes connection-ring-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
.book-point.connected[aria-current="true"] .connection-dot::after {
  animation: connection-ring-pulse 1.15s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .book-point.connected[aria-current="true"] .connection-dot::after { animation: none; }
}