/* ==========================================================================
   Progress Bar Component - Segmented style
   Used in: Projects list, Plans detail, Challenge progress
   ========================================================================== */

.progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.progress-bar__segments {
  display: flex;
  gap: var(--spacing-1);
}

.progress-bar__segment {
  flex: 1;
  height: var(--spacing-1);
  background: var(--color-border-soft);
  border-radius: 2px;
}

.progress-bar__segment--filled {
  background: var(--color-text-secondary);
}

.progress-bar__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-tight);
  text-align: right;
}

/* Max width variant for constrained layouts */
.progress-bar--constrained {
  max-width: 200px;
}

/* ---------------------------------------------------------------------------
   Continuous Progress Bar - percentage based fill
   Used in: Image upload, project cards
   --------------------------------------------------------------------------- */
.progress-bar--continuous {
  height: 6px;
  background: var(--color-border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition: width 0.15s ease-out;
}

.progress-bar__fill--purple {
  background: var(--color-project-purple);
}