.semantic-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.semantic-timeline li {
  display: grid;
  grid-template-columns: minmax(7rem, .28fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0 0 2rem;
}

.semantic-timeline time {
  position: relative;
  padding-right: 1.5rem;
  border-right: 1px solid color-mix(in srgb, var(--accent, #d6ff73) 45%, transparent);
  color: var(--accent, #d6ff73);
  font: 500 .72rem/1.5 "JetBrains Mono", monospace;
}

.semantic-timeline time::after {
  content: "";
  position: absolute;
  top: .3rem;
  right: -4px;
  width: 7px;
  height: 7px;
  background: var(--accent, #d6ff73);
}

.semantic-timeline strong { font-size: 1rem; }
.semantic-timeline p { margin: .35rem 0 0; color: var(--muted, #9aa2ac); }

@media (max-width: 640px) {
  .semantic-timeline li { grid-template-columns: 1fr; gap: .45rem; padding-left: 1.25rem; }
  .semantic-timeline time { padding: 0; border-right: 0; }
  .semantic-timeline time::before { content: ""; position: absolute; top: .35rem; bottom: -2.5rem; left: -1.25rem; border-left: 1px solid color-mix(in srgb, var(--accent, #d6ff73) 45%, transparent); }
  .semantic-timeline time::after { top: .35rem; right: auto; left: calc(-1.25rem - 3px); }
}

@media print {
  .semantic-timeline time { color: #222; border-color: #777; }
  .semantic-timeline time::after { background: #222; }
}

html[data-theme="light"] .semantic-timeline time {
  color: #3b5314;
  border-right-color: #3b5314;
}
html[data-theme="light"] .semantic-timeline time::after {
  background: #3b5314;
}
html[data-theme="light"] .semantic-timeline time::before {
  border-left-color: #3b5314;
}
html[data-theme="light"] .semantic-timeline p {
  color: var(--ink-dim);
}


/* Era-grouped timeline: compact rows, with the gap between eras spelled out. */
.has-eras .timeline-era h3 { margin: 0 0 .6rem; padding: 0; border: 0; color: var(--amber); font: 500 .8rem/1.5 var(--font-sans); }
.has-eras .semantic-timeline li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 0 0 .85rem; }
.has-eras .semantic-timeline time { padding-right: 1rem; }
.has-eras .semantic-timeline strong { font-size: .92rem; font-weight: 600; }
.has-eras .semantic-timeline p { margin-top: .15rem; font-size: .84rem; line-height: 1.65; }
.semantic-block .timeline-gap { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 1.1rem; color: var(--ink-faint, var(--muted)); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.timeline-gap::before, .timeline-gap::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.timeline-gap::before { flex: 0 0 4.5rem; }

@media (max-width: 640px) {
  /* Rows with a detail stack; date-and-label rows keep one line. */
  .has-eras .semantic-timeline li:has(p) { grid-template-columns: 1fr; gap: .1rem; padding: 0 0 .75rem 1.25rem; }
  .has-eras .semantic-timeline li:has(p) time { padding: 0; }
  .has-eras .semantic-timeline li:has(p) time::before { bottom: -1.1rem; }
  .timeline-gap::before { flex-basis: 1rem; }
}