/* Status: one PIS implementation, recolored only through V3 track tokens. */

.rt-pis {
  overflow: hidden;
  border: var(--rt-border-sign) solid var(--rt-color-rail);
  border-radius: var(--rt-radius-panel);
  background: var(--rt-color-screen);
  box-shadow: var(--rt-shadow-screen);
  color: var(--rt-color-on-screen);
}

.rt-pis__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-bottom: 1px solid var(--rt-v3-white);
}

.rt-pis__line {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rt-radius-badge);
  background: var(--rt-line-color, var(--rt-track-accent, var(--rt-v3-orange)));
  color: var(--rt-line-ink, var(--rt-track-accent-ink, var(--rt-v3-ink)));
  font-family: var(--rt-font-data);
  font-weight: 600;
}

.rt-pis__title { min-width: 0; font-weight: 700; }

.rt-pis__title small {
  display: block;
  color: var(--rt-v3-white);
  font-family: var(--rt-font-data);
  font-size: var(--rt-text-micro);
  font-weight: 400;
}

.rt-pis__direction {
  color: var(--rt-v3-white);
  font-size: var(--rt-text-small);
  text-align: right;
}

.rt-pis__body { padding: var(--rt-space-4); }

.rt-pis__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--rt-space-4);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-top: 1px solid var(--rt-v3-white);
  color: var(--rt-v3-white);
  font-size: var(--rt-text-small);
}

.rt-route-progress { display: grid; gap: var(--rt-space-2); }

.rt-route-progress__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--rt-space-1);
}

.rt-route-progress__track::before {
  position: absolute;
  right: var(--rt-space-1);
  left: var(--rt-space-1);
  height: 2px;
  background: var(--rt-v3-white);
  content: "";
}

.rt-route-progress__stop {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--rt-v3-white);
  border-radius: 50%;
  background: var(--rt-color-screen);
}

.rt-route-progress__stop[data-state="done"] {
  border-color: var(--rt-line-color, var(--rt-track-accent, var(--rt-v3-orange)));
  background: var(--rt-line-color, var(--rt-track-accent, var(--rt-v3-orange)));
}

.rt-route-progress__stop[data-state="current"] {
  width: 1.125rem;
  height: 1.125rem;
  border: 3px solid var(--rt-line-color, var(--rt-track-accent, var(--rt-v3-orange)));
  background: var(--rt-v3-white);
}

.rt-route-progress__names {
  display: grid;
  grid-template-columns: repeat(var(--rt-stop-count, 4), minmax(0, 1fr));
  gap: var(--rt-space-1);
  color: var(--rt-v3-white);
  font-size: var(--rt-text-micro);
  text-align: center;
}

.rt-route-progress__names [data-state="current"] {
  border-radius: var(--rt-radius-panel);
  background: var(--rt-v3-white);
  color: var(--rt-color-screen);
  font-weight: 700;
}

.rt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  border: 1px solid currentColor;
  padding: 0.125rem var(--rt-space-2);
  color: var(--rt-status-color, var(--rt-track-link, var(--rt-v3-ink)));
  font-family: var(--rt-font-data);
  font-size: var(--rt-text-small);
  font-weight: 600;
}

.rt-status-badge::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rt-track-accent, currentColor);
  content: "";
}

.rt-status-badge--screen { color: var(--rt-v3-white); }
.rt-status-badge--active,
.rt-status-badge--building,
.rt-status-badge--planned { --rt-status-color: var(--rt-track-link, var(--rt-v3-ink)); }

.rt-arrival {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  color: var(--rt-track-link, var(--rt-v3-ink));
  font-family: var(--rt-font-data);
  font-size: var(--rt-text-small);
  font-weight: 600;
}

.rt-arrival--screen { color: var(--rt-v3-white); }

.rt-arrival::before,
.rt-arrival::after {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rt-track-accent, currentColor);
  content: "";
  animation: rt-arrival-pulse 1.6s var(--rt-ease-sign) 1;
}

.rt-arrival::after { animation-delay: 0.32s; }

@keyframes rt-arrival-pulse {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

@media (max-width: 640px) {
  .rt-pis__header { grid-template-columns: auto 1fr; }
  .rt-pis__direction { grid-column: 1 / -1; text-align: left; }
  .rt-route-progress__names { font-size: 0.625rem; }
}