/* Journey Navigation Bar
   Persistent stage progress indicator shown to authenticated users below the site header.
   Status modifiers: --complete, --in_progress, --not_started
*/

.journey-nav {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.journey-nav__stages {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  /* Allow horizontal scroll on narrow viewports without showing a scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}

.journey-nav__stages::-webkit-scrollbar {
  display: none;
}

/* Each stage item */
.journey-nav__stage {
  flex: 0 0 auto;
  position: relative;
}

/* Chevron divider between stages */
.journey-nav__stage + .journey-nav__stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--border);
}

/* Inner content — both <a> and <span> use the same layout */
.journey-nav__stage-inner {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .9rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  transition: background .15s, color .15s;
}

a.journey-nav__stage-inner:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: inherit;
  text-decoration: none;
}

/* Badge — number, checkmark, or dot */
.journey-nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--border);
  color: var(--muted);
}

/* Not started — default, already styled above */

/* In progress */
.journey-nav__stage--in_progress .journey-nav__stage-inner {
  color: var(--primary);
}

.journey-nav__stage--in_progress .journey-nav__badge {
  background: var(--primary);
  color: #fff;
}

.journey-nav__stage--in_progress .journey-nav__name {
  font-weight: 600;
}

/* Complete */
.journey-nav__stage--complete .journey-nav__stage-inner {
  color: var(--success);
}

.journey-nav__stage--complete .journey-nav__badge {
  background: var(--success);
  color: #fff;
}

/* Focus ring for keyboard navigation */
a.journey-nav__stage-inner:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Mobile: badges only — hide names, distribute stages evenly across full width */
@media (max-width: 640px) {
  .journey-nav__stages {
    overflow-x: visible;
  }

  .journey-nav__stage {
    flex: 1 1 0;
  }

  .journey-nav__stage-inner {
    justify-content: center;
    padding: .5rem .25rem;
  }

  .journey-nav__name {
    display: none;
  }
}