/* ══════════════════════════════════════════════════════════════
   PATTERN — Timeline
   Vertical timeline with marker dots and content blocks. Used for
   version history, audit log, etc.

   Markup:
     <div class="timeline">
       <div class="timeline-item">
         <div class="timeline-marker"></div>
         <div class="timeline-content">
           <h4>Version 3</h4>
           <p>2026-04-11 — added baseline percentile</p>
         </div>
       </div>
       <div class="timeline-item timeline-item-last">…</div>
     </div>

   Used by: STRATEGIANALYS (version history)
   Candidates: any app showing chronological events vertically
   ══════════════════════════════════════════════════════════════ */

.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}

.timeline-item-last {
    border-left-color: transparent;
}

.timeline-marker {
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--fg);
    border: 2px solid var(--bg);
}

.timeline-content {
    padding-top: 0;
}