/*
  routing-card.css
  SIGNATURE ELEMENT of this design.
  Manufacturing floors route physical work through stations using a
  "traveler card" that gets stamped at each stop. This mirrors that
  artifact for the supplier's application: one card, punched/stamped
  as it moves Registration -> Screening -> Evaluation -> Decision -
  which is literally the real workflow in the D9 diagram, not a
  decorative numbered list.
*/

.routing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}

.routing-card__strip {
  background: var(--navy-950);
  color: #fff;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.routing-card__ids { display: flex; gap: 26px; flex-wrap: wrap; }
.routing-card__id-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}
.routing-card__id-value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-400);
  letter-spacing: 0.03em;
}

.routing-card__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  padding: 40px 28px 30px;
}

.routing-card__track::before {
  content: "";
  position: absolute;
  top: 66px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: var(--line);
  z-index: 0;
}
.routing-card__track-fill {
  position: absolute;
  top: 66px;
  left: 60px;
  height: 3px;
  background: var(--gold-500);
  z-index: 1;
  transition: width 0.5s ease;
}

.routing-stop {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.routing-stop__stamp {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-muted);
  transition: all 0.2s ease;
}

.routing-stop.is-done .routing-stop__stamp {
  border-color: var(--d8-green);
  color: var(--d8-green);
  background: var(--d8-green-light);
  transform: rotate(-8deg);
}
.routing-stop.is-current .routing-stop__stamp {
  border-color: var(--gold-500);
  color: var(--gold-600);
  background: #fff8e8;
  box-shadow: 0 0 0 6px rgba(212,160,23,0.15);
}
.routing-stop.is-rejected .routing-stop__stamp {
  border-color: var(--red-flag);
  color: var(--red-flag);
  background: #fdf3f3;
  transform: rotate(6deg);
}

.routing-stop__label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy-900);
}
.routing-stop__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-muted);
}

.routing-card__result {
  margin: 0 28px 28px;
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.routing-card__result-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.routing-card__result-value { font-family: var(--font-display); font-size: 1.3rem; margin-top: 4px; }

@media (max-width: 720px) {
  .routing-card__track { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .routing-card__track::before, .routing-card__track-fill { display: none; }
}