/* ════════════════════════════════════════════════════════════
   TRACKING TERMINAL v53 — full track-page redesign
   Layout + skin + motion. The console DOM, every ID, the 12s
   polling and all failure states are untouched underneath.
   ════════════════════════════════════════════════════════════ */

/* ── SHELL LAYOUT ─────────────────────────────────── */
.tk-shell {
  padding: calc(96px + 34px) 0 110px;
  min-height: 100dvh;
  position: relative;
  overflow: clip;
}
.tk-head { max-width: 720px; margin-bottom: 44px; }
.tk-title {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem) !important;
  line-height: 1.02;
  margin: 0 0 18px !important;
}
.tk-title .tk-volt, .tk-title .hl {
  background: none !important;
  -webkit-text-fill-color: var(--volt) !important;
  color: var(--volt) !important;
  animation: hlGlowPulse 3.2s ease-in-out infinite;
}
@keyframes hlGlowPulse {
  0%, 100% { text-shadow: 0 0 24px rgba(201, 255, 61, 0.35); }
  50% { text-shadow: 0 0 46px rgba(201, 255, 61, 0.65); }
}
.tk-lede { margin: 0; }
.tk-lede::after { content: '▏'; color: var(--volt); animation: caretBlink 1.2s step-end infinite; }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.tk-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
  align-items: start;
}
.tk-side { position: sticky; top: 104px; display: grid; gap: 12px; }
@media (max-width: 960px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-side { position: static; }
  .tk-shell { padding-top: calc(84px + 26px); }
}

/* ── QUERY PANEL ──────────────────────────────────── */
.tk-panel {
  background: rgba(240, 240, 238, 0.025);
  border: 1px solid var(--hair);
  border-radius: 22px;
  padding: 7px;
  animation: panelIn 0.8s var(--ease-out) 0.15s both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.tk-panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--fg-3);
}
.tk-live { display: inline-flex; align-items: center; gap: 7px; color: var(--volt); }
.tk-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--volt);
  position: relative;
  animation: dotThrob 1.8s ease-in-out infinite;
}
.tk-live i::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--volt);
  animation: liveRipple 2s var(--ease-out) infinite;
}
@keyframes dotThrob { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes liveRipple { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } }
.tk-panel-body {
  background: linear-gradient(175deg, #151514, #101010);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(240, 240, 238, 0.05);
  padding: 20px 18px 18px;
}
.tk-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.tk-panel .rx-track-form { flex-direction: column !important; gap: 10px !important; margin-bottom: 0 !important; }
.tk-panel .rx-track-form input {
  width: 100%;
  background: rgba(10, 10, 10, 0.6) !important;
  border: 1px solid rgba(201, 255, 61, 0.28) !important;
  border-radius: 13px !important;
  padding: 16px 16px !important;
  font-size: 1.02rem !important;
  animation: inShimmer 6s ease-in-out infinite;
  caret-color: var(--volt);
}
@keyframes inShimmer { 0%,86%,100% { border-color: rgba(201,255,61,.28) !important; } 93% { border-color: rgba(201,255,61,.75) !important; } }
.tk-panel .rx-track-form input:focus { animation: inFocusBloom 1.8s ease-in-out infinite !important; }
@keyframes inFocusBloom {
  0%,100% { box-shadow: 0 0 0 4px rgba(201,255,61,.12), 0 0 40px -8px rgba(201,255,61,.5) !important; }
  50% { box-shadow: 0 0 0 7px rgba(201,255,61,.16), 0 0 60px -8px rgba(201,255,61,.7) !important; }
}
.tk-panel #tn-btn { width: 100%; padding: 17px !important; border-radius: 999px !important; font-size: 1rem !important; }
#tn-btn:hover { animation: tnPulse 2.4s ease-in-out infinite, tnHop 0.45s var(--ease-pop); }
@keyframes tnHop { 40% { transform: translateY(-4px) scale(1.02); } 100% { transform: translateY(-2px); } }

.tk-feats { list-style: none; margin: 20px 0 0; padding: 0; }
.tk-feats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-top: 1px dashed var(--hair);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  animation: featIn 0.7s var(--ease-out) both;
}
.tk-feats li:nth-child(1) { animation-delay: 0.35s; }
.tk-feats li:nth-child(2) { animation-delay: 0.48s; }
.tk-feats li:nth-child(3) { animation-delay: 0.61s; }
@keyframes featIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.tk-feats li i {
  font-style: normal;
  color: var(--volt);
  font-size: 0.64rem;
  animation: dotThrob 3s ease-in-out infinite;
}
.tk-feats li:nth-child(2) i { animation-delay: 1s; }
.tk-feats li:nth-child(3) i { animation-delay: 2s; }

.tk-help {
  border: 1px dashed var(--hair-2);
  border-radius: 16px;
  padding: 16px 18px;
  animation: panelIn 0.8s var(--ease-out) 0.45s both;
  transition: border-color 0.3s, transform 0.35s var(--ease-snap);
}
.tk-help:hover { border-color: rgba(201, 255, 61, 0.4); transform: translateY(-2px); }
.tk-help-lab {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.tk-help a { font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; color: var(--fg); transition: color 0.2s; }
.tk-help a:hover { color: var(--volt); }

/* ── IDLE STATE ───────────────────────────────────── */
.tk-idle {
  border: 1px dashed var(--hair-2);
  border-radius: 22px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  animation: panelIn 0.8s var(--ease-out) 0.3s both;
}
.tk-main:has(.rx-radar-wrap.show) .tk-idle,
.tk-main:has(.rx-track-error.show) .tk-idle,
.tk-main:has(.rx-track-result.show) .tk-idle { display: none; }
.tk-idle-scan {
  position: absolute;
  left: 0; right: 0;
  height: 60px; top: -80px;
  background: linear-gradient(180deg, transparent, rgba(201, 255, 61, 0.05), transparent);
  animation: idleScan 4s ease-in-out infinite;
}
@keyframes idleScan { 0%, 15% { top: -80px; } 85%, 100% { top: 110%; } }
.tk-idle-code {
  font-family: var(--f-mono);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0.1em;
  color: var(--fg-3);
  animation: idleFlicker 2.4s step-end infinite;
}
@keyframes idleFlicker { 0%,100% { opacity: 0.75; } 50% { opacity: 0.35; } }
.tk-idle-lab {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
  animation: dotThrob 2s ease-in-out infinite;
}
.tk-idle-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.tk-idle-bars i {
  width: 3px;
  background: rgba(201, 255, 61, 0.35);
  animation: idleEq 1.2s ease-in-out infinite alternate;
}
.tk-idle-bars i:nth-child(1) { height: 40%; }
.tk-idle-bars i:nth-child(2) { height: 70%; animation-delay: .1s; }
.tk-idle-bars i:nth-child(3) { height: 30%; animation-delay: .2s; }
.tk-idle-bars i:nth-child(4) { height: 85%; animation-delay: .3s; }
.tk-idle-bars i:nth-child(5) { height: 55%; animation-delay: .4s; }
.tk-idle-bars i:nth-child(6) { height: 95%; animation-delay: .5s; }
.tk-idle-bars i:nth-child(7) { height: 45%; animation-delay: .6s; }
.tk-idle-bars i:nth-child(8) { height: 75%; animation-delay: .7s; }
.tk-idle-bars i:nth-child(9) { height: 35%; animation-delay: .8s; }
.tk-idle-bars i:nth-child(10) { height: 65%; animation-delay: .9s; }
.tk-idle-bars i:nth-child(11) { height: 50%; animation-delay: 1s; }
.tk-idle-bars i:nth-child(12) { height: 80%; animation-delay: 1.1s; }
@keyframes idleEq { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }

/* ── TITLE LETTER WAVE ────────────────────────────── */
.tk-title .tl { display: inline-block; animation: tlWave 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes tlWave { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-5px); } 20% { transform: translateY(0); } }

/* ── RADAR ────────────────────────────────────────── */
.rx-radar-wrap { margin-top: 0 !important; padding: 70px 0; border: 1px dashed var(--hair-2); border-radius: 22px; }
.rx-radar::before { animation: rxBlip2 1.4s ease-in-out infinite 0.5s; background: var(--volt); border: none; width: 4px; height: 4px; border-radius: 50%; inset: auto; top: 62%; left: 30%; }
.rx-radar::after { animation: rxBlip2 1.4s ease-in-out infinite 0.9s; background: var(--volt); border: none; width: 3px; height: 3px; border-radius: 50%; inset: auto; top: 42%; left: 74%; }
@keyframes rxBlip2 { 0%,100% { opacity: 0; } 40%,55% { opacity: 1; } }
.rx-radar { animation: radarRing 2.8s ease-in-out infinite; }
@keyframes radarRing { 0%,100% { box-shadow: 0 0 0 0 rgba(201,255,61,0); } 50% { box-shadow: 0 0 0 12px rgba(201,255,61,.06); } }
.rx-radar-label { animation: labelPulse 1.6s ease-in-out infinite; }
@keyframes labelPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── ERROR ────────────────────────────────────────── */
.rx-track-error { margin-top: 0 !important; border-radius: 16px !important; }
.rx-track-error.show { animation: rxShake 0.4s ease-out both, errSimmer 3s ease-in-out infinite 0.6s; }
@keyframes errSimmer { 0%,100% { border-color: var(--stamp); } 50% { border-color: rgba(255,106,69,.55); } }

/* ── CONSOLE ──────────────────────────────────────── */
.rx-track-result { margin-top: 0 !important; }
.rx-track-result.show .rx-console { animation: consoleIn 0.8s var(--ease-out) both; }
@keyframes consoleIn { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
.rx-console {
  border-radius: 22px !important;
  background-image: linear-gradient(rgba(201,255,61,.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(201,255,61,.02) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  background-color: #101010 !important;
  animation: consoleGlow 6s ease-in-out infinite, gridDrift 16s linear infinite !important;
}
@keyframes consoleGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(201,255,61,.06), 0 30px 80px -30px rgba(201,255,61,.3) !important; }
  50% { box-shadow: 0 0 0 1px rgba(201,255,61,.14), 0 34px 90px -28px rgba(201,255,61,.5) !important; }
}
@keyframes gridDrift { to { background-position: 42px 42px, 42px 42px; } }
@media (hover: hover) and (pointer: fine) {
  .rx-console {
    transform: perspective(1100px) rotateX(var(--ctx, 0deg)) rotateY(var(--cty, 0deg));
    transition: transform 0.3s var(--ease-out);
  }
}
.rx-console-bar { position: relative; }
.rx-console-bar::before, .rx-console-bar::after {
  content: '+';
  font-family: var(--f-mono);
  color: var(--volt);
  position: absolute;
  font-size: 12px;
  animation: cornerBlink 2.4s step-end infinite;
}
.rx-console-bar::before { left: 8px; top: 6px; }
.rx-console-bar::after { right: 8px; top: 6px; animation-delay: 1.2s; }
@keyframes cornerBlink { 0%,100% { opacity: 0.8; } 50% { opacity: 0.15; } }
.rx-console-live .dot { position: relative; }
.rx-console-live .dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--volt);
  animation: liveRipple 1.8s var(--ease-out) infinite;
}

/* ── STATUS ───────────────────────────────────────── */
.rx-status-value.lime { animation: statusBreathe 3s ease-in-out infinite !important; }
@keyframes statusBreathe {
  0%,100% { text-shadow: 0 0 30px rgba(201,255,61,.5); }
  50% { text-shadow: 0 0 55px rgba(201,255,61,.85), 0 0 20px rgba(201,255,61,.4); }
}
.rx-status-value.amber { animation: amberBreathe 2.4s ease-in-out infinite; }
@keyframes amberBreathe { 0%,100% { text-shadow: 0 0 42px rgba(255,193,77,.3); } 50% { text-shadow: 0 0 60px rgba(255,193,77,.6); } }
.rx-status-value.red { animation: redBreathe 1.9s ease-in-out infinite; }
@keyframes redBreathe { 0%,100% { text-shadow: 0 0 42px rgba(255,107,107,.3); } 50% { text-shadow: 0 0 64px rgba(255,107,107,.65); } }
.rx-status-eta b { animation: etaBlink 2.6s ease-in-out infinite; }
@keyframes etaBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.rx-status-label, .rx-meter-info span:first-child, .rx-eta-l { animation: descFade 4.4s ease-in-out infinite; }

/* ── FAIL / RTO ───────────────────────────────────── */
.rx-fail-banner.show { animation: rxFadeIn 0.4s ease-out both, failPulse 2.6s ease-in-out infinite 0.5s; }
@keyframes failPulse { 0%,100% { border-color: rgba(255,193,77,.3); } 50% { border-color: rgba(255,193,77,.65); } }
.rx-fail-banner.show.rto { animation: rxFadeIn 0.4s ease-out both, rtoPulse 2.2s ease-in-out infinite 0.5s; }
@keyframes rtoPulse { 0%,100% { border-color: rgba(255,107,107,.32); } 50% { border-color: rgba(255,107,107,.7); } }
.rx-fail-banner .fb-tag { animation: labelPulse 1.8s ease-in-out infinite; }

/* ── METER ────────────────────────────────────────── */
.rx-meter-fill {
  background: repeating-linear-gradient(90deg, #a8e000 0 14px, #d4ff4a 14px 28px) !important;
  background-size: 28px 100% !important;
  animation: meterFlow 1.1s linear infinite;
  position: relative;
}
@keyframes meterFlow { to { background-position: 28px 0; } }
.rx-meter-fill::after {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #d4ff4a;
  box-shadow: 0 0 14px 4px rgba(201,255,61,.7);
  animation: headThrob 1.4s ease-in-out infinite;
}
@keyframes headThrob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.rx-meter-info b { animation: etaBlink 2.2s ease-in-out infinite 0.4s; }

/* ── STEPS ────────────────────────────────────────── */
.rx-steps-fill { overflow: visible; }
.rx-steps-fill::after {
  content: '';
  position: absolute;
  left: -2px;
  width: 5px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, rgba(201,255,61,.9));
  animation: railDrip 3.2s ease-in infinite;
}
@keyframes railDrip { 0% { top: -8%; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
.rx-steps-rail { animation: railShimmer 4.6s ease-in-out infinite; }
@keyframes railShimmer { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.rx-step.done .rx-step-dot { animation: dotPop 0.5s var(--ease-pop) both; }
@keyframes dotPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.rx-step.done .rx-step-dot::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(201,255,61,.5);
  animation: doneRipple 3.6s var(--ease-out) infinite;
}
.rx-step:nth-child(odd).done .rx-step-dot::before { animation-delay: 1.8s; }
@keyframes doneRipple { 0% { transform: scale(1); opacity: .6; } 55%,100% { transform: scale(1.9); opacity: 0; } }
.rx-step.current .rx-step-dot { animation: curNumPulse 1.6s ease-in-out infinite; }
@keyframes curNumPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.rx-step { transition: transform 0.35s var(--ease-snap); }
.rx-step:hover { transform: translateX(5px); }
.rx-step-time { animation: etaBlink 3.4s ease-in-out infinite; }
.rx-step:nth-child(odd) .rx-step-time { animation-delay: 1.7s; }
.rx-step-desc { animation: descFade 5s ease-in-out infinite; }
.rx-step:nth-child(2) .rx-step-desc { animation-delay: 1.2s; }
.rx-step:nth-child(3) .rx-step-desc { animation-delay: 2.4s; }
.rx-step:nth-child(4) .rx-step-desc { animation-delay: 3.6s; }
@keyframes descFade { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }
.rx-step.done#step-delivered .rx-step-title { animation: statusBreathe 3.4s ease-in-out infinite; color: var(--volt) !important; }

/* ── LIVE MAP BAR ─────────────────────────────────── */
.rx-rider-av { animation: avBob 1.1s ease-in-out infinite, avGlow 3s ease-in-out infinite; }
@keyframes avBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes avGlow { 0%,100% { border-color: rgba(201,255,61,.35); } 50% { border-color: rgba(201,255,61,.8); box-shadow: 0 0 16px -4px rgba(201,255,61,.6); } }
.rx-eta-v { animation: etaThrob 2.4s ease-in-out infinite; }
@keyframes etaThrob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.rx-contact a { transition: transform 0.3s var(--ease-pop), border-color 0.2s, background 0.2s !important; }
.rx-contact a:hover { transform: translateY(-2.5px); }
.rx-contact a:hover svg { animation: waWiggle 0.5s var(--ease-pop); }
@keyframes waWiggle { 30% { transform: rotate(-12deg); } 65% { transform: rotate(9deg); } 100% { transform: rotate(0); } }

/* ── ISLAND ───────────────────────────────────────── */
.rx-island.on { animation: islandBreathe 4s ease-in-out infinite; }
@keyframes islandBreathe {
  0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 24px rgba(201,255,61,.08); }
  50% { box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 34px rgba(201,255,61,.22); }
}

/* ── REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tk-shell *, .tk-shell *::before, .tk-shell *::after,
  .rx-island.on { animation: none !important; }
  .rx-console { transform: none !important; }
  .tk-panel, .tk-help, .tk-idle, .tk-feats li { opacity: 1; transform: none; }
}


/* free OSM tiles re-inked to match the dark console (Carto now needs an API key) */
.rx-dark-tiles {
  filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.25);
}