/*
 * skeleton.css — flight-list / policy-card skeleton states (Sec 4.5).
 * Soft --color-cloud-dim rounded rectangles in the shape of the final
 * card, a single shimmer pass limited to 1 loop/second. Used only for the
 * rare slow re-fetch after a filter change needs new data — Step 5's own
 * scripted sequence is the PRIMARY loader, this is the fallback skeleton
 * for everything else.
 *
 * Markup: add class="skeleton" to a placeholder box shaped like the real
 * card (same border-radius / height) while data is in flight.
 */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-cloud-dim, #E7F2FC);
  border-radius: var(--radius-md, 18px);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-100%);
  animation: skeletonShimmer 1s linear infinite;
}

@keyframes skeletonShimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    display: none; /* static skeleton only, per Sec 4.5 */
  }
}