/* Djaunt skeleton — shimmering "bone" placeholders shown in place of content
   that hasn't loaded yet. Unlike the rest of components/, this one wasn't
   blended from an existing duplicate in two sites: it's built ahead of need,
   for real-data screens (starting with mealeo's restyle) that don't have a
   loading state yet. Same rule still applies going forward — once two sites
   have their own hand-rolled skeleton, fold what's different back in here.

   Swap a piece for its real content by removing the .dj-skeleton-* element
   (or toggling it with the `hidden` attribute, same contract as
   components/empty-state) once the data arrives. Nothing here is
   JS-driven; it's pure CSS placeholders. */

@keyframes dj-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dj-skeleton {
  display: block;
  background: linear-gradient(
    100deg,
    var(--dj-surface-raised) 35%,
    var(--dj-border) 50%,
    var(--dj-surface-raised) 65%
  );
  background-size: 250% 100%;
  animation: dj-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--dj-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .dj-skeleton {
    animation: none;
    background: var(--dj-surface-raised);
  }
}

/* ---- Text lines ---- */

.dj-skeleton-title {
  height: 1.3em;
  width: 45%;
  margin: 0 0 var(--dj-space-3);
}

.dj-skeleton-text {
  height: 0.85em;
  width: 100%;
  margin: 0 0 var(--dj-space-2);
}

.dj-skeleton-text:last-child {
  width: 70%;
  margin-bottom: 0;
}

/* ---- Shapes ---- */

.dj-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--dj-radius-full);
  flex-shrink: 0;
}

.dj-skeleton-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--dj-radius-md);
}

.dj-skeleton-badge {
  width: 4.5em;
  height: 1.4em;
  border-radius: var(--dj-radius-sm);
}

.dj-skeleton-button {
  width: 6.5em;
  height: 2.25em;
  border-radius: var(--dj-radius-sm);
}

/* ---- Compositions ---- */

.dj-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--dj-space-3);
}

.dj-skeleton-row .dj-skeleton-text {
  margin: 0;
}

.dj-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--dj-space-3);
  padding: var(--dj-space-5);
  border: var(--dj-border-width) solid var(--dj-border);
  border-radius: var(--dj-radius-md);
  background: var(--dj-surface);
}