/* =============================================================
   JOURNEY BAR V2 — Brand-Confident treatment
   Single-tier: PhaseBar only. StepCrumb removed.
   Spec: docs/superpowers/specs/2026-05-26-progress-system-design.md §8
   ============================================================= */

.jb-host { font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #0F172A; }

.jb-shell {
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 14px;
  overflow: hidden;
}

/* ─── TIER 1 — PHASE BAR ─────────────────────────────────── */
.jb-tier1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}

.jb-back, .jb-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F172A;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.jb-back:disabled, .jb-next:disabled { opacity: 0.35; cursor: not-allowed; }
.jb-next.is-ready {
  background: #FACC15;
  border-color: #CA8A04;
  color: #0F172A;
  box-shadow: 0 2px 0 #CA8A04;
}
.jb-next.is-ready:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #CA8A04; }

.jb-phases {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;       /* horizontal scroll as last resort */
  scrollbar-width: none;  /* hide scrollbar on Firefox */
}
.jb-phases::-webkit-scrollbar { display: none; }  /* hide on Safari/Chrome */

.jb-phase {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;        /* never shrink; bar handles overflow via media query */
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.jb-phase.is-done { background: #DCFCE7; color: #166534; }
.jb-phase.is-done::before { content: "\2713\00a0"; color: #166534; }
.jb-phase.is-now {
  background: #FACC15;
  color: #0F172A;
  border: 1.5px solid #0F172A;
  padding: 2.5px 7px;
  flex-shrink: 0;
}
.jb-phase.is-next { background: #F1F5F9; color: #94A3B8; }

.jb-value {
  padding: 5px 10px;
  border-radius: 999px;
  background: #0F172A;
  color: #FACC15;
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jb-value.is-muted { background: transparent; color: #94A3B8; font-style: italic; font-weight: 400; font-family: 'Fraunces', Georgia, serif; max-width: 220px; }
.jb-value.is-live { background: #166534; color: #DCFCE7; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */

/* Narrow container — keep full bar visible by converting non-current phases to dots. */
@media (max-width: 720px) {
  .jb-back, .jb-next { padding: 4px 8px; font-size: 10px; }
  .jb-value { max-width: 140px; font-size: 10px; padding: 4px 8px; }
}

/* Truly narrow — non-current phases become dots (1ch wide), only current keeps its label. */
@media (max-width: 560px) {
  .jb-phase { padding: 4px 6px; }
  .jb-phase.is-done, .jb-phase.is-next {
    font-size: 0;                /* hide the label */
    padding: 6px;                /* keep the chip a circle-ish dot */
    min-width: 6px;
    line-height: 0;
  }
  .jb-phase.is-done::before {
    content: "\2713";            /* keep the checkmark as the dot */
    font-size: 9px;
    line-height: 1;
    color: #166534;
  }
  .jb-phase.is-next::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94A3B8;
  }
  .jb-phase.is-now {
    padding: 2px 8px;
    font-size: 10px;             /* keep current chip readable */
  }
  .jb-value { max-width: 120px; font-size: 9px; }
}

/* Very narrow — drop value pill entirely, current phase only */
@media (max-width: 420px) {
  .jb-value { display: none; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jb-phase, .jb-next { transition: none; }
}