[data-fui-comp="ui-timeline"] {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
[data-fui-comp="ui-timeline"] .ui-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--spacing-lg, 24px) 1fr;
  gap: var(--spacing-md, 12px);
  padding-block-end: var(--spacing-lg, 24px);
}
[data-fui-comp="ui-timeline"] .ui-timeline__item:last-child {
  padding-block-end: 0;
}
/* Vertical rail — drawn under the dot column. Stops at the last item
   so the rail doesn't run past the final dot. */
[data-fui-comp="ui-timeline"] .ui-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing-lg, 24px) / 2 - 1px);
  top: var(--spacing-md, 12px);
  bottom: 0;
  width: 2px;
  background: var(--color-border, #E4E4E7);
}
[data-fui-comp="ui-timeline"] .ui-timeline__item:last-child::before {
  display: none;
}
[data-fui-comp="ui-timeline"] .ui-timeline__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-text-muted, #52525B);
  border: 2px solid var(--color-background, #FFFFFF);
  margin-top: var(--spacing-xs, 6px);
  align-self: start;
  justify-self: center;
  position: relative;
  z-index: 1;
}
[data-fui-comp="ui-timeline"] .ui-timeline__content {
  display: grid;
  gap: var(--spacing-xs, 4px);
  min-width: 0;
}
[data-fui-comp="ui-timeline"] .ui-timeline__header {
  display: flex;
  gap: var(--spacing-md, 12px);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
[data-fui-comp="ui-timeline"] .ui-timeline__title {
  font-weight: 600;
  color: var(--color-text, #18181B);
}
[data-fui-comp="ui-timeline"] .ui-timeline__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted, #52525B);
}
[data-fui-comp="ui-timeline"] .ui-timeline__body {
  color: var(--color-text-muted, #52525B);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Variant dots — colored highlights for state changes. */
.ui-timeline__item--success .ui-timeline__dot { background: var(--color-success, #16A34A); }
.ui-timeline__item--warn .ui-timeline__dot { background: var(--color-warning, #D97706); }
.ui-timeline__item--danger .ui-timeline__dot { background: var(--color-danger, #DC2626); }
.ui-timeline__item--info .ui-timeline__dot { background: var(--color-info, #3B82F6); }