/* ETL Tracking Skeleton v1 — placeholder while waiting for status response */
.etl-trk-skeleton {
  display: block;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85));
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
  margin-top: 16px;
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
}
.etl-trk-skeleton__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.etl-trk-skeleton__row:last-child { margin-bottom: 0; }
.etl-trk-skel-bar {
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: etl-trk-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.etl-trk-skel-bar--xs { height: 10px; width: 60px; }
.etl-trk-skel-bar--sm { height: 12px; width: 100px; }
.etl-trk-skel-bar--md { height: 18px; width: 200px; }
.etl-trk-skel-bar--lg { height: 28px; width: 280px; }
.etl-trk-skel-bar--block { height: 14px; width: 100%; }
.etl-trk-skel-bar--block-narrow { height: 14px; width: 75%; }
.etl-trk-skel-pill {
  height: 26px; width: 110px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: etl-trk-shimmer 1.4s linear infinite;
}
.etl-trk-skel-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.etl-trk-skel-stage {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: etl-trk-shimmer 1.4s linear infinite;
}
.etl-trk-skel-stage:nth-child(2) { animation-delay: 0.1s; }
.etl-trk-skel-stage:nth-child(3) { animation-delay: 0.2s; }
.etl-trk-skel-stage:nth-child(4) { animation-delay: 0.3s; }
.etl-trk-skel-stage:nth-child(5) { animation-delay: 0.4s; }

.etl-trk-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.etl-trk-skel-card {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.6);
}

@keyframes etl-trk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 640px) {
  .etl-trk-skel-grid { grid-template-columns: 1fr; }
  .etl-trk-skel-bar--lg { width: 80%; }
  .etl-trk-skel-bar--md { width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .etl-trk-skel-bar, .etl-trk-skel-pill, .etl-trk-skel-stage {
    animation: none !important;
    background: #ececec;
  }
}

html[data-theme="dark"] .etl-trk-skeleton {
  background: linear-gradient(180deg, rgba(28,28,32,0.6), rgba(28,28,32,0.85));
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .etl-trk-skel-bar,
html[data-theme="dark"] .etl-trk-skel-pill,
html[data-theme="dark"] .etl-trk-skel-stage {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%);
  background-size: 200% 100%;
}
html[data-theme="dark"] .etl-trk-skel-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}