.track-main { padding-bottom: 72px; background: #f3f6f7; }
.track-breadcrumb { display: flex; min-height: 68px; align-items: center; gap: 11px; color: #81919a; font-size: .79rem; }
.track-breadcrumb a:hover { color: var(--orange); }
.track-breadcrumb strong { color: #506774; }

.track-shell { overflow: hidden; border: 1px solid #d9e2e6; background: #fff; box-shadow: 0 10px 34px rgba(4,37,61,.07); }
.track-intro { padding: 38px 44px 32px; border-bottom: 1px solid #e0e7ea; }
.track-intro h1 { margin: 0 0 7px; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.track-intro > p:last-child { margin: 0; color: var(--muted); }
.eyebrow { color: var(--teal); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.track-search { padding: 0 44px 38px; }
.track-search-fields { display: flex; gap: 12px; max-width: 560px; }
.track-search-fields input {
  flex: 1; padding: 14px 16px; border: 1px solid #cfdbe0; border-radius: 3px;
  color: var(--ink); font: inherit; font-size: .95rem;
}
.track-search-fields input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(32,174,229,.1); outline: 0; }
.track-search-fields button { flex: 0 0 auto; }

#track-result:empty { display: none; }
.track-panel { padding: 0 44px 46px; }
.track-panel--loading, .track-panel--error, .track-panel--info {
  margin: 0 44px 46px; padding: 19px 22px; border-left: 4px solid var(--orange); background: #fff4eb; color: #677b86;
}
.track-panel--error { border-left-color: #b83c3c; background: #fff0ef; }
.track-panel--info { border-left-color: var(--cyan); background: #eaf7fc; }

.track-summary { margin-bottom: 27px; padding: 23px 25px; border: 1px solid #cfe2e4; background: #f1f8f8; }
.track-summary__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-bottom: 14px; }
.track-summary__label { display: block; margin-bottom: 4px; color: #607580; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.track-summary__row strong { color: var(--navy-dark); font-size: 1rem; }
.track-route { color: var(--ink); font-size: 1.05rem; font-weight: 500; }
.track-route span { color: var(--orange); margin: 0 6px; }

.track-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.track-badge--info { color: var(--navy-dark); background: #e2ecee; }
.track-badge--success { color: #1b6e3d; background: #dcf3e4; }
.track-badge--warn { color: #a05a00; background: #ffedd6; }

.track-steps { display: flex; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: step; }
.track-steps li {
  position: relative; flex: 1; padding-top: 46px; text-align: center; color: var(--muted); font-size: .82rem; font-weight: 600;
}
.track-steps li::before {
  content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: #dfe7ea; z-index: 0;
}
.track-steps li:first-child::before { display: none; }
.track-steps__icon {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%;
  border: 2px solid #dfe7ea; background: #fff; color: var(--muted); font-size: .85rem; font-weight: 700; z-index: 1;
}
.track-steps li.is-complete { color: var(--teal); }
.track-steps li.is-complete::before { background: var(--teal); }
.track-steps li.is-complete .track-steps__icon { border-color: var(--teal); background: var(--teal); color: #fff; }
.track-steps li.is-active { color: var(--orange); }
.track-steps li.is-active .track-steps__icon { border-color: var(--orange); background: var(--orange); color: #fff; }

.track-alert { margin-bottom: 40px; padding: 18px 22px; border-left: 4px solid #b83c3c; background: #fff0ef; color: #7a2c2c; font-weight: 600; }

.track-timeline-heading { margin: 0 0 18px; font-size: 1.2rem; color: var(--navy-dark); }
.track-timeline__group { margin-bottom: 24px; }
.track-timeline__group h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #e0e7ea; font-size: .88rem; color: #506774; }
.track-timeline__group ul { margin: 0; padding: 0; list-style: none; }
.track-timeline__group li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef2f3; }
.track-timeline__group li:last-child { border-bottom: 0; }
.track-timeline__time { flex: 0 0 60px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.track-timeline__location { margin: 6px 0 2px; color: var(--navy-dark); font-weight: 600; font-size: .88rem; }
.track-timeline__group p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }

.track-note { margin: 0; color: var(--muted); font-size: .88rem; }

@media (max-width: 760px) {
  .track-intro, .track-search, .track-panel, .track-panel--loading, .track-panel--error, .track-panel--info { padding-left: 22px; padding-right: 22px; }
  .track-search-fields { flex-direction: column; }
  .track-steps { flex-wrap: wrap; }
  .track-steps li { flex: 0 0 50%; margin-bottom: 24px; }
}