/* Лента событий (история задачи, этапы разбора, журнал): <ol class="timeline"><li class="e-status">…</li></ol>.
   Точка — цвет и форма события: создано/выполнено — сплошная зелёная, просрочка/эскалация — квадрат, комментарий — кольцо.
   Вынесено из claude-me pages/tasks.css (frontend.md §14.9). */
.timeline { --tl-dot: 10px; --tl-gutter: var(--s5); --tl-line: var(--border-w);
  list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { --tl-color: var(--fg-muted); position: relative; padding: 0 0 var(--s4) var(--tl-gutter); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: calc(var(--tl-dot) / 2 - var(--tl-line) / 2);
  top: calc(var(--tl-dot) + var(--s2)); bottom: 0; width: var(--tl-line); background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: var(--s1h); box-sizing: border-box;
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; background: var(--tl-color); }
.timeline li.e-created, .timeline li.e-done, .timeline li.v-done { --tl-color: var(--success); }
.timeline li.e-status, .timeline li.e-assignee, .timeline li.e-deadline, .timeline li.e-project, .timeline li.e-priority,
.timeline li.e-title, .timeline li.e-description { --tl-color: var(--info); }
.timeline li.e-comment, .timeline li.e-watcher_added, .timeline li.e-watcher_removed { --tl-color: var(--accent); }
.timeline li.e-comment::after, .timeline li.e-watcher_added::after, .timeline li.e-watcher_removed::after {
  background: transparent; border: calc(var(--border-w) + 1px) solid var(--tl-color); }
.timeline li.e-reminder { --tl-color: var(--warn); }
.timeline li.e-overdue, .timeline li.e-escalated, .timeline li.v-failed { --tl-color: var(--danger); }
.timeline li.e-overdue::after, .timeline li.e-escalated::after, .timeline li.v-failed::after { border-radius: var(--r-xs); }
.timeline .who { font-weight: var(--fw-semibold); }
.timeline .tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.timeline .tl-time { color: var(--fg-muted); font-size: var(--fs-xs); }
.timeline .tl-body { margin-top: var(--s1); overflow-wrap: anywhere; line-height: var(--lh-body); }
.timeline details { margin-top: var(--s2); }
.timeline pre { margin: var(--s2) 0 0; max-height: 280px; }