/* Shared segmented progress bar component (MC-323)
 * Used by milestone groups, potentially reusable for other segmented displays.
 * See: app/views/shared/_segmented_progress_bar.html.erb
 */
@layer components {
.segmented-progress-bar {
  --segmented-bar-track-inline-size: 240px;
  --segmented-bar-track-block-size: 6px;
  --segmented-bar-dot-size: 8px;
  --segmented-bar-dot-radius: 2px;
  /* Segment colours: component-level semantic aliases over palette tokens.
   * indigo-500 = Linear "Done" colour; amber-500 = in-progress warmth.
   * Update these props to re-theme without touching segment rules. */
  --segmented-bar-completed-bg: var(--color-indigo-500);
  --segmented-bar-in-progress-bg: var(--color-amber-500);
  --segmented-bar-todo-bg: var(--color-border-muted);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  cursor: help;
}

.segmented-progress-bar__track {
  inline-size: var(--segmented-bar-track-inline-size);
  block-size: var(--segmented-bar-track-block-size);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
}

.segmented-progress-bar__segment {
  block-size: 100%;
}

.segmented-progress-bar__segment--completed {
  background: var(--segmented-bar-completed-bg);
}

.segmented-progress-bar__segment--in-progress {
  background: var(--segmented-bar-in-progress-bg);
}

.segmented-progress-bar__segment--todo {
  background: var(--segmented-bar-todo-bg);
}

.segmented-progress-bar--empty .segmented-progress-bar__track {
  opacity: 0.5;
}

.segmented-progress-bar__empty-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.segmented-progress-bar__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.segmented-progress-bar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.segmented-progress-bar__legend-dot {
  inline-size: var(--segmented-bar-dot-size);
  block-size: var(--segmented-bar-dot-size);
  border-radius: var(--segmented-bar-dot-radius);
}

.segmented-progress-bar__legend-item--completed .segmented-progress-bar__legend-dot {
  background: var(--segmented-bar-completed-bg);
}

.segmented-progress-bar__legend-item--in-progress .segmented-progress-bar__legend-dot {
  background: var(--segmented-bar-in-progress-bg);
}

.segmented-progress-bar__legend-item--todo .segmented-progress-bar__legend-dot {
  background: var(--segmented-bar-todo-bg);
}

} /* @layer components */