@import '../../network-basics/css/style.css?v=20260920-032225';

.JourneyChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.JourneyChoice:hover, .JourneyChoice:focus-visible, .JourneyChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.JourneyChoice:focus-visible, #TraceButton:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.JourneyStage { padding:30px 0 10px; overflow:hidden; }
.JourneyPath { position:relative; height:2px; background:var(--academy-line); }
.JourneyPath > span { position:absolute; top:50%; left:0; padding:5px 7px; transform:translate(-50%, -50%); background:var(--academy-coral); color:var(--academy-ink); font-size:.65rem; font-weight:700; }
.JourneyPath > span.is-moving { animation:journey-packet 3s ease-in-out; }
.JourneyStations { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:23px; }
.JourneyStation { display:grid; gap:7px; color:var(--academy-muted); }
.JourneyStation > span { width:max-content; padding:5px 7px; border:1px solid var(--academy-cyan); color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.62rem; }
.JourneyStation.is-active > span { border-color:var(--academy-lime); color:var(--academy-lime); }
.JourneyStation strong { font-size:.9rem; font-weight:400; }
.JourneyStation small { line-height:1.4; }
#TraceButton { margin-top:25px; border:0; font:inherit; cursor:pointer; }

@keyframes journey-packet { 0% { left:0; } 25% { left:33.33%; } 50% { left:66.66%; } 75%, 100% { left:100%; } }

@media (max-width:560px) {
  .JourneyPath { display:none; }
  .JourneyStations { grid-template-columns:1fr; gap:15px; }
}