/* ============================================================
   Vauraa — Track Application page.
   ============================================================ */
.track-shell{ max-width:880px; margin:0 auto; padding:0 clamp(18px,4vw,44px); }

/* ---- Lookup form ---- */
.track-form{ margin:-24px 0 34px; }
.track-form-grid{
  display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px; box-shadow:0 10px 30px rgba(20,20,30,0.08);
}
.track-form .field label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.track-form .field input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:9px;
  font-size:0.95rem; font-family:inherit; background:#fff; color:var(--ink);
}
.track-form .field input:focus{ outline:none; border-color:var(--gold); }
.track-submit{ white-space:nowrap; padding:12px 22px; height:46px; }

@media (max-width:720px){
  .track-form-grid{ grid-template-columns:1fr; }
  .track-submit{ width:100%; }
}

/* ---- Not-found alert ---- */
.track-alert{
  border:1px solid #E3B7AE; background:#FBEEEC; color:#7A2E24; border-radius:10px;
  padding:16px 20px; margin-bottom:24px; font-size:0.94rem;
}
.track-alert a{ color:#7A2E24; font-weight:600; }

/* ---- Result ---- */
.track-result{ margin-bottom:30px; }

.timeline{
  display:flex; align-items:flex-start; overflow-x:auto; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 20px; margin-bottom:22px;
}
.tl-step{ display:flex; flex-direction:column; align-items:center; min-width:110px; text-align:center; flex-shrink:0; }
.tl-dot{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; border:2px solid var(--line); color:var(--ink-soft); background:#fff; font-weight:600;
}
.tl-step.done .tl-dot{ border-color:#3E8E5A; color:#fff; background:#3E8E5A; }
.tl-step.active .tl-dot{ border-color:var(--gold); color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(231,196,128,0.25); }
.tl-label{ font-size:0.78rem; color:var(--ink-soft); margin-top:10px; max-width:110px; line-height:1.3; }
.tl-step.done .tl-label{ color:var(--ink); }
.tl-step.active .tl-label{ color:var(--ink); font-weight:600; }
.tl-current{ display:block; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin-top:3px; }
.tl-connector{ flex:1; height:2px; background:var(--line); margin-top:17px; min-width:16px; }
.tl-connector.done{ background:#3E8E5A; }

@media (max-width:720px){
  .timeline{ flex-direction:column; align-items:flex-start; gap:0; padding:22px; }
  .tl-step{ flex-direction:row; align-items:center; min-width:0; text-align:left; gap:12px; }
  .tl-label{ margin-top:0; max-width:none; }
  .tl-connector{ width:2px; height:22px; margin:2px 0 2px 16px; }
}

.track-info-card{
  border:1px solid var(--line); border-radius:14px; background:#fff; padding:24px;
}
.track-info-card h3{ font-size:1.05rem; margin:0 0 16px; }

.track-info-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:0; }
.track-info-list .full{ grid-column:1 / -1; }
.track-info-list dt{
  font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.track-info-list dd{ margin:4px 0 0; font-weight:500; color:var(--ink); }

@media (max-width:560px){
  .track-info-list{ grid-template-columns:1fr; }
}

.track-support{ border-top:1px solid var(--line); margin-top:20px; padding-top:18px; }
.track-support .lbl{ font-size:0.85rem; color:var(--ink-soft); margin-bottom:10px; }
.track-support .chan{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.track-support .chan a{ color:var(--ink); text-decoration:none; font-weight:500; font-size:0.92rem; }
.track-support .chan a:hover{ color:var(--gold); }

/* ---- Notice ---- */
.track-notice{
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px;
  padding:16px 20px; background:var(--surface); margin:30px 0 40px; font-size:0.9rem; color:var(--ink-soft);
}
.track-notice b{ color:var(--ink); display:block; margin-bottom:4px; }
.track-notice p{ margin:0; }