/* Where something is on its way (fragments/progress-path.html, controller/support/ProgressPath; mocks .fj-path in
   docs/mocks/app/assets/css/first-steps.css): stops on one rail, gold up to the current stop. User: the dashboard's
   card for an invoice on its way to paid. Unlayered.

   .pp-stop.is-done     passed: gold dot with a check, gold rail to the next stop
   .pp-stop.is-now      where it is: ringed, breathing gently (still, under reduced motion)
   .pp-stop.is-ahead    still to come
   .pp-stop.is-skipped  can't happen here (an invoice sent outside BillGrid has no opening to watch)
   .pp-stop.is-alert    where it is, and it needs the owner (overdue) */

.progress-path {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: calc(var(--path-dot) + var(--space-2)) var(--space-3) 0 0;
}

.pp-stop::before {
  content: "";
  position: absolute;
  top: calc((var(--path-dot) - var(--path-rail)) / 2);
  left: var(--path-dot);
  right: 0;
  height: var(--path-rail);
  border-radius: var(--r-pill);
  background: var(--border);
}

.pp-stop:last-child::before {
  display: none;
}

.pp-stop.is-done::before {
  background: var(--gold);
}

.pp-dot {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--path-dot);
  height: var(--path-dot);
  border: 1.5px solid var(--sand-300);
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--on-accent);
}

.pp-dot .bg-icon {
  width: var(--path-glyph);
  height: var(--path-glyph);
}

.pp-stop.is-done .pp-dot {
  border-color: var(--gold);
  background: var(--gold);
}

.pp-stop.is-now .pp-dot {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-wash);
  animation: pp-wait 2.4s ease-in-out infinite;
}

.pp-stop.is-alert .pp-dot {
  border-color: var(--overdue-fg);
  background: var(--overdue-fg);
}

.pp-stop.is-skipped .pp-dot {
  border-style: dashed;
  color: var(--text-soft);
}

.pp-title {
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 600;
}

.pp-stop:is(.is-ahead, .is-skipped) .pp-title {
  color: var(--text-muted);
  font-weight: 500;
}

.pp-meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.pp-stop.is-alert .pp-meta {
  color: var(--overdue-fg);
  font-weight: 600;
}

@keyframes pp-wait {
  50% { box-shadow: 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-stop.is-now .pp-dot {
    animation: none;
  }
}

/* A phone: one stop a row, the rail running down. */
@media (max-width: 560px) {
  .progress-path {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: var(--space-3);
  }

  .pp-stop {
    padding: 0 0 0 calc(var(--path-dot) + var(--space-3));
  }

  .pp-stop::before {
    top: calc(var(--path-dot) + 2px);
    bottom: calc(-1 * var(--space-3) - 2px);
    left: calc((var(--path-dot) - var(--path-rail)) / 2);
    right: auto;
    width: var(--path-rail);
    height: auto;
  }
}