/* ════════════════════════════════════════════════════════════════════════
   DS Timeline Item — activity / comms entry (Lead detail, My Day).
   Macro: ds_timeline_item, rendered inside <ul class="ds-timeline">. Tokens only.
   kind: note|call|sms|email|showing|system|offer ; direction: in|out (comms tint).
   ════════════════════════════════════════════════════════════════════════ */
.ds-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ds-timeline-item {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
}
/* vertical rail */
.ds-timeline-item::before {
  content: '';
  position: absolute;
  left: 5px; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.ds-timeline-item:first-child::before { top: var(--sp-3); }
.ds-timeline-item:last-child::before  { bottom: calc(100% - var(--sp-3) - 12px); }

.ds-timeline-dot {
  position: absolute;
  left: 0; top: var(--sp-3);
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--muted);
  border: 2px solid var(--card);
}
.kind-call .ds-timeline-dot    { background: var(--success); }
.kind-sms .ds-timeline-dot     { background: var(--accent); }
.kind-email .ds-timeline-dot   { background: var(--accent-soft); }
.kind-showing .ds-timeline-dot { background: var(--warning); }
.kind-offer .ds-timeline-dot   { background: var(--success); }
.kind-system .ds-timeline-dot  { background: var(--border); }

.ds-timeline-body { flex: 1 1 auto; min-width: 0; }
.ds-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.ds-timeline-title { font-size: var(--text-base); font-weight: 600; }
.ds-timeline-time  { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.ds-timeline-text  { font-size: var(--text-sm); color: var(--text); margin-top: 2px; }
.ds-timeline-actor { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* inbound vs outbound comms subtle tint */
.dir-in  .ds-timeline-text { border-left: 2px solid var(--border); padding-left: var(--sp-2); }
.dir-out .ds-timeline-text { color: var(--muted); }