/* ═══════════════════════════════════════════════════════════
   Shipment Tracking — page-scoped styles (locked tokens only)
   Content is visible by default; JS only unhides the result
   and error blocks after a lookup.
   ═══════════════════════════════════════════════════════════ */

.trk-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:22px;align-items:start;margin-top:26px}
.trk-grid [hidden]{display:none!important}

.trk-panel{background:var(--surface-1);border:var(--line-soft);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px)}
.trk-panel form{display:flex;flex-direction:column;gap:14px}
.trk-help{font-size:12.5px;line-height:1.7;color:var(--text-faint);margin:0}
.trk-help a{color:var(--gold2);text-decoration:none;border-bottom:1px solid var(--tint-4)}
.trk-help a:hover{color:var(--gold)}
.trk-panel .btn-p{justify-content:center;width:100%;min-height:48px}

.trk-feedback{margin-top:16px}
.trk-status{font-size:13px;line-height:1.6;color:var(--text-mute);margin:0}
.trk-status:empty{display:none}
.trk-error{background:var(--surface-1);border:var(--line-soft);border-left:3px solid var(--red);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.trk-error p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-body)}
.trk-error strong{color:var(--text-hi)}
.trk-error-links{display:flex;flex-wrap:wrap;gap:10px}
.trk-error-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:var(--line-soft);border-radius:999px;color:var(--gold2);font-family:var(--font-accent);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;text-decoration:none;transition:border-color var(--dur-state) var(--ease),color var(--dur-state) var(--ease)}
.trk-error-links a:hover{border-color:var(--tint-5);color:var(--gold)}
.trk-error .btn-o{align-self:flex-start}

.trk-result{background:var(--surface-1);border:var(--line-soft);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px)}
.trk-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.trk-kicker{font-family:var(--font-accent);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin:0 0 6px}
.trk-ref{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);color:var(--text-hi);margin:0;line-height:1.15;overflow-wrap:anywhere}
.trk-status-pill{font-family:var(--font-accent);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--gold);background:var(--tint-2);border:var(--line-soft);border-radius:999px;padding:8px 14px;white-space:nowrap}
.trk-route{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 20px;font-family:var(--font-display);font-size:clamp(19px,2.4vw,24px);color:var(--text-hi)}
.trk-route-arrow{color:var(--gold)}
.trk-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:0 0 24px;padding:18px 0;border-top:var(--line-hair);border-bottom:var(--line-hair)}
.trk-meta dt{font-family:var(--font-accent);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin-bottom:4px}
.trk-meta dd{margin:0;font-size:14.5px;color:var(--text-body);overflow-wrap:anywhere}

.trk-tl-title{font-family:var(--font-accent);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 16px}
.trk-timeline{list-style:none;margin:0;padding:0}
.trk-ms{position:relative;padding:0 0 20px 32px}
.trk-ms:last-child{padding-bottom:0}
.trk-ms::before{content:"";position:absolute;left:7px;top:18px;bottom:-2px;width:1px;background:var(--tint-3)}
.trk-ms:last-child::before{display:none}
.trk-ms-dot{position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;border:2px solid var(--tint-4);background:var(--navy2)}
.trk-ms--completed .trk-ms-dot{background:var(--gold);border-color:var(--gold)}
.trk-ms--current .trk-ms-dot{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 0 6px var(--tint-2)}
.trk-ms-label{display:block;font-size:14.5px;line-height:1.5;color:var(--text-body);overflow-wrap:anywhere}
.trk-ms--current .trk-ms-label{color:var(--text-hi);font-weight:600}
.trk-ms--upcoming .trk-ms-label{color:var(--text-mute)}
.trk-ms-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--text-faint)}
.trk-ms-state{font-family:var(--font-accent);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700}
.trk-ms--completed .trk-ms-state{color:var(--green)}
.trk-ms--current .trk-ms-state{color:var(--gold)}
.trk-ms--upcoming .trk-ms-state{color:var(--text-faint)}

.trk-actions{display:flex;gap:12px;margin-top:24px}
.trk-note{margin:20px 0 0;padding-top:16px;border-top:var(--line-hair);font-size:12.5px;line-height:1.75;color:var(--text-faint)}

@media(max-width:860px){
  .trk-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .trk-meta{grid-template-columns:1fr}
  .trk-panel,.trk-result{padding:20px 18px}
}

@media(prefers-reduced-motion:no-preference){
  .trk-ms--current .trk-ms-dot{animation:trkPulse 2.2s var(--ease) infinite}
}
@keyframes trkPulse{0%,100%{box-shadow:0 0 0 4px var(--tint-2)}50%{box-shadow:0 0 0 9px var(--tint-1)}}