/* ============================================================
   css/components/timeline.css
   Zolto v8.1.0 — Timeline & History Components
   ============================================================
   Purpose:
   - .zolto-diagram-timeline — rendered timeline diagram SVG
   - .zolto-timeline         — prose timeline (non-diagram)
   - Layout variants: vertical centre, left-aligned, alternating
   - Event types: default, milestone, current, completed
   - Gantt chart progress bar override styles
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Diagram Timeline SVG Wrapper
      Output of <diagram type="timeline">
   ───────────────────────────────────────────────────────────── */

.zolto-diagram-timeline {
  background:    var(--diagram-bg);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
}

.zolto-diagram-timeline .zolto-diagram-canvas {
  overflow-y: auto;
  max-height: 600px;
}

/* SVG track line */
.zolto-diagram-timeline .zolto-timeline-track {
  stroke:       var(--border-normal);
  stroke-width: 2;
  fill:         none;
}

/* Event circle on track */
.zolto-diagram-timeline .zolto-timeline-dot {
  fill:   var(--bg-surface-2);
  stroke: var(--accent-primary);
  stroke-width: 2;
  transition: fill var(--duration-fast) var(--ease-out);
  cursor: default;
}

.zolto-diagram-timeline .zolto-timeline-dot.milestone {
  fill:         var(--accent-primary);
  stroke:       var(--accent-primary);
}

.zolto-diagram-timeline .zolto-timeline-dot.current {
  fill:         var(--accent-primary);
  stroke:       var(--accent-primary);
  filter:       drop-shadow(0 0 6px rgba(99, 102, 241, 0.6));
  animation:    zolto-timeline-pulse 2s ease-in-out infinite;
}

.zolto-diagram-timeline .zolto-timeline-dot.completed {
  fill:   var(--intent-success);
  stroke: var(--intent-success);
}

.zolto-diagram-timeline .zolto-timeline-dot.future {
  fill:   var(--bg-surface);
  stroke: var(--border-normal);
}

@keyframes zolto-timeline-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }
  50%       { filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.8)); }
}

/* Event label text */
.zolto-diagram-timeline .zolto-timeline-label {
  font-family: var(--font-sans);
  font-size:   13px;
  font-weight: 500;
  fill:        var(--text-main);
}

/* Event date text */
.zolto-diagram-timeline .zolto-timeline-date {
  font-family: var(--font-mono);
  font-size:   11px;
  fill:        var(--text-faint);
}

/* Event description text */
.zolto-diagram-timeline .zolto-timeline-desc {
  font-family: var(--font-sans);
  font-size:   11px;
  fill:        var(--text-mute);
}

/* Connector line from dot to label box */
.zolto-diagram-timeline .zolto-timeline-connector {
  stroke:       var(--border-subtle);
  stroke-width: 1;
  fill:         none;
  stroke-dasharray: 3 3;
}

/* Label background box */
.zolto-diagram-timeline .zolto-timeline-box {
  fill:         var(--bg-surface);
  stroke:       var(--border-subtle);
  stroke-width: 1;
  rx:           4;
}

.zolto-diagram-timeline .zolto-timeline-box.milestone {
  fill:   var(--accent-primary-subtle);
  stroke: var(--accent-primary-border);
}

.zolto-diagram-timeline .zolto-timeline-box.completed {
  fill:   var(--intent-success-bg);
  stroke: var(--intent-success-border);
}

/* Section heading on track */
.zolto-diagram-timeline .zolto-timeline-section {
  font-family:    var(--font-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill:           var(--text-faint);
}


/* ─────────────────────────────────────────────────────────────
   2. Prose Timeline (non-diagram, rendered from markup)
      Used for narrative/history timelines in documents
   ───────────────────────────────────────────────────────────── */

.zolto-timeline {
  position:      relative;
  margin-bottom: var(--prose-block-gap);
  padding-left:  0;
  list-style:    none;
}

/* Central track line */
.zolto-timeline::before {
  content:    '';
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      2px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

/* Left-aligned: track on left */
.zolto-timeline,
.zolto-timeline.zolto-timeline-left {
  padding-left: var(--space-10);
}

.zolto-timeline::before,
.zolto-timeline.zolto-timeline-left::before {
  left: calc(var(--space-4) - 1px);
}

/* Alternating: track in centre */
.zolto-timeline.zolto-timeline-alternating {
  padding-left: 0;
}

.zolto-timeline.zolto-timeline-alternating::before {
  left: 50%;
  transform: translateX(-50%);
}


/* ─────────────────────────────────────────────────────────────
   3. Timeline Item
   ───────────────────────────────────────────────────────────── */

.zolto-timeline-item {
  position:      relative;
  margin-bottom: var(--space-6);
}

.zolto-timeline-item:last-child {
  margin-bottom: 0;
}

/* Dot on the track */
.zolto-timeline-item::before {
  content:       '';
  position:      absolute;
  width:         12px;
  height:        12px;
  border-radius: var(--radius-full);
  background:    var(--bg-surface-2);
  border:        2px solid var(--accent-primary);
  top:           var(--space-1-5);
  z-index:       var(--z-raised);
  transition:    background   var(--duration-fast) var(--ease-out),
                 border-color var(--duration-fast) var(--ease-out);
}

/* Left-aligned dot */
.zolto-timeline::before,
.zolto-timeline.zolto-timeline-left::before { left: calc(var(--space-4) - 1px); }
.zolto-timeline .zolto-timeline-item::before,
.zolto-timeline.zolto-timeline-left .zolto-timeline-item::before {
  left: calc(var(--space-4) - 6px);
}

/* Alternating dot */
.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item::before {
  left: calc(50% - 6px);
}

/* Milestone dot — larger, filled */
.zolto-timeline-item.milestone::before {
  width:      16px;
  height:     16px;
  background: var(--accent-primary);
  top:        var(--space-1);
}

.zolto-timeline.zolto-timeline-left .zolto-timeline-item.milestone::before {
  left: calc(var(--space-4) - 8px);
}

/* Completed dot */
.zolto-timeline-item.completed::before {
  background:   var(--intent-success);
  border-color: var(--intent-success);
}

/* Current item dot — pulsing */
.zolto-timeline-item.current::before {
  background:   var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow:   0 0 0 4px var(--accent-primary-subtle);
  animation:    zolto-timeline-dot-pulse 2s ease-in-out infinite;
}

@keyframes zolto-timeline-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-primary-subtle); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

/* Future item */
.zolto-timeline-item.future::before {
  background:   var(--bg-surface);
  border-color: var(--border-normal);
}


/* ─────────────────────────────────────────────────────────────
   4. Timeline Item Content
   ───────────────────────────────────────────────────────────── */

.zolto-timeline-content {
  background:    var(--bg-surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  position:      relative;
  transition:    box-shadow var(--duration-fast) var(--ease-out);
}

.zolto-timeline-content:hover {
  box-shadow: var(--shadow-sm);
}

/* Arrow pointing to track */
.zolto-timeline-content::before {
  content:      '';
  position:     absolute;
  top:          var(--space-3);
  width:        8px;
  height:       8px;
  background:   var(--bg-surface);
  border:       1px solid var(--border-subtle);
  border-right: none;
  border-bottom: none;
  transform:    rotate(-45deg);
}

/* Left-aligned arrow */
.zolto-timeline .zolto-timeline-content::before,
.zolto-timeline.zolto-timeline-left .zolto-timeline-content::before {
  left: calc(-1 * var(--space-2) - 1px);
}

/* Alternating — even items on right, odd on left */
.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item {
  display: grid;
  grid-template-columns: 1fr var(--space-10) 1fr;
  align-items: start;
  gap: 0;
}

.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(odd) .zolto-timeline-content {
  grid-column: 1;
  text-align:  right;
}

.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(odd) .zolto-timeline-content::before {
  right:        calc(-1 * var(--space-2) - 1px);
  left:         auto;
  border:       1px solid var(--border-subtle);
  border-left:  none;
  border-top:   none;
  transform:    rotate(-45deg);
}

.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(even) .zolto-timeline-content {
  grid-column: 3;
}

.zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(even) .zolto-timeline-content::before {
  left: calc(-1 * var(--space-2) - 1px);
}


/* ─────────────────────────────────────────────────────────────
   5. Timeline Content Elements
   ───────────────────────────────────────────────────────────── */

.zolto-timeline-date-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--accent-primary);
  font-weight:    var(--weight-medium);
  margin-bottom:  var(--space-1);
  letter-spacing: var(--tracking-wide);
}

.zolto-timeline-title {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--text-heading);
  margin-bottom: var(--space-1-5);
  line-height:   var(--leading-snug);
}

.zolto-timeline-body {
  font-size:   var(--text-sm);
  color:       var(--text-mute);
  line-height: var(--leading-relaxed);
}

.zolto-timeline-body > *:last-child {
  margin-bottom: 0;
}

/* Tag chips on timeline item */
.zolto-timeline-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-1);
  margin-top: var(--space-2);
}

.zolto-timeline-tag {
  font-size:     var(--text-xs);
  padding:       0.2em 0.55em;
  border-radius: var(--radius-full);
  background:    var(--bg-surface-2);
  color:         var(--text-mute);
  border:        1px solid var(--border-subtle);
}


/* ─────────────────────────────────────────────────────────────
   6. Gantt Chart SVG Styles
      <diagram type="gantt"> specific overrides
   ───────────────────────────────────────────────────────────── */

.zolto-diagram.zolto-diagram-gantt .zolto-gantt-header-bg {
  fill: var(--bg-panel);
}

.zolto-diagram.zolto-diagram-gantt .zolto-gantt-section-label {
  font-family:    var(--font-sans);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill:           var(--text-faint);
}

.zolto-diagram.zolto-diagram-gantt .zolto-gantt-task-label {
  font-family: var(--font-sans);
  font-size:   12px;
  fill:        var(--text-main);
}

.zolto-diagram.zolto-diagram-gantt .zolto-gantt-date-label {
  font-family: var(--font-mono);
  font-size:   10px;
  fill:        var(--text-faint);
}

/* Task bar base */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-task {
  fill:           var(--intent-primary-bg);
  stroke:         var(--intent-primary-border);
  stroke-width:   1;
  rx:             3;
  cursor:         default;
  transition:     opacity var(--duration-fast) var(--ease-out);
}

.zolto-diagram.zolto-diagram-gantt .zolto-gantt-task:hover {
  opacity: 0.85;
}

/* Done task */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-done {
  fill:   var(--intent-success-bg);
  stroke: var(--intent-success-border);
}

/* Active task */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-active {
  fill:   var(--accent-primary-subtle);
  stroke: var(--accent-primary-border);
}

/* Critical path task */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-crit {
  fill:   var(--intent-danger-bg);
  stroke: var(--intent-danger-border);
}

/* Milestone diamond */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-milestone {
  fill:   var(--accent-primary);
  stroke: none;
}

/* Progress fill bar (% complete overlay) */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-progress {
  fill:    var(--intent-success);
  opacity: 0.35;
  rx:      3;
}

/* Today vertical line */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-today {
  stroke:           var(--accent-primary);
  stroke-width:     1.5;
  stroke-dasharray: 4 4;
  opacity:          0.7;
}

/* Weekend shading */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-weekend {
  fill:    var(--border-faint);
  opacity: 0.5;
}

/* Row alternating stripe */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-row-stripe {
  fill:    rgba(255, 255, 255, 0.015);
}

/* Grid lines */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-grid-line {
  stroke:       var(--border-faint);
  stroke-width: 1;
}

/* Dependency arrow */
.zolto-diagram.zolto-diagram-gantt .zolto-gantt-dep-arrow {
  stroke:       var(--text-faint);
  stroke-width: 1;
  fill:         none;
  marker-end:   url(#gantt-arrow);
}


/* ─────────────────────────────────────────────────────────────
   7. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Alternating collapses to left-aligned */
  .zolto-timeline.zolto-timeline-alternating {
    padding-left: var(--space-10);
  }

  .zolto-timeline.zolto-timeline-alternating::before {
    left:      calc(var(--space-4) - 1px);
    transform: none;
  }

  .zolto-timeline.zolto-timeline-alternating .zolto-timeline-item {
    display: block;
  }

  .zolto-timeline.zolto-timeline-alternating .zolto-timeline-item::before {
    left: calc(var(--space-4) - 6px);
  }

  .zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(odd) .zolto-timeline-content,
  .zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(even) .zolto-timeline-content {
    grid-column: auto;
    text-align:  left;
  }

  .zolto-timeline.zolto-timeline-alternating .zolto-timeline-item:nth-child(odd) .zolto-timeline-content::before {
    left:         calc(-1 * var(--space-2) - 1px);
    right:        auto;
    border:       1px solid var(--border-subtle);
    border-right: none;
    border-bottom: none;
    transform:    rotate(-45deg);
  }

  .zolto-timeline-content {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  .zolto-timeline,
  .zolto-timeline.zolto-timeline-left {
    padding-left: var(--space-8);
  }

  .zolto-timeline-title {
    font-size: var(--text-sm);
  }
}