.progress-bar {
  position: relative;
  width: 100%;

  /* Tick settings (customizable via inline CSS variables) */
  --tick-color: #BDBDBD;
  --tick-width: 2px;
  --tick-height: 4px;
  --tick-spacing: 67px;
  --tick-opacity: 1;
  --tick-offset-y: 7px; /* distance of ticks above/below the bar */
  --tick-offset-x: 0px; /* horizontal offset from the left edge (0 to start at left) */
  --tick-guard-right: var(--tick-spacing); /* keep the last repeating tick this far away from the right edge */
}

/* Top and bottom grey tick rows */
.progress-bar.progress-bar--ticks::before,
.progress-bar.progress-bar--ticks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tick-height);
  opacity: var(--tick-opacity);
  /* Draw repeating ticks across most of the width + explicit ticks at both ends */
  background-image:
    repeating-linear-gradient(
      to right,
      var(--tick-color),
      var(--tick-color) var(--tick-width),
      transparent var(--tick-width),
      transparent var(--tick-spacing)
    ),
    linear-gradient(to right, var(--tick-color), var(--tick-color)), /* left end tick */
    linear-gradient(to right, var(--tick-color), var(--tick-color)); /* right end tick */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: calc(100% - var(--tick-guard-right)) var(--tick-height), var(--tick-width) var(--tick-height), var(--tick-width) var(--tick-height);
  background-position: var(--tick-offset-x) 0, left 0, right 0; /* phase shift + lock ticks to both ends */
  pointer-events: none;
}

.progress-bar.progress-bar--ticks::before {
  top: calc(0px - var(--tick-offset-y));
}

.progress-bar.progress-bar--ticks::after {
  bottom: calc(0px - var(--tick-offset-y));
}

/* The rounded track */
.progress-bar__track {
  position: relative;
  height: 16px; /* can be overridden inline */
  border-radius: 9999px;
  overflow: hidden;
  background: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Subtle inner glow/shadow to match the visual depth in the mock */
.progress-bar__track::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 -1px 2px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* Segments */
.progress-bar__segment {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Do not round here to avoid rounding the center split */
}

/* Left (green) segment */
.progress-bar__segment--green {
  left: 0;
  background: linear-gradient(2.72deg, #1EBA18 2.26%, #8BE887 71.13%);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Right (red) segment */
.progress-bar__segment--red {
  right: 0;
  background: linear-gradient(341.72deg, #FFBD73 19.96%, #FF8A0B 93.8%);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}