.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--color-border, #E5E7EB) 0%,
    color-mix(in oklab, var(--color-border, #E5E7EB) 60%, var(--color-surface, #FFFFFF) 40%) 50%,
    var(--color-border, #E5E7EB) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radii-sm, 4px);
}
.skeleton-line {
  block-size: 0.85rem;
  inline-size: 100%;
  border-radius: var(--radii-full, 9999px);
}
.skeleton-block {
  block-size: 6rem;
  inline-size: 100%;
}
.skeleton-circle {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radii-full, 9999px);
}
.skeleton-stack {
  display: grid;
  gap: var(--spacing-sm, 4px);
}
.skeleton-line--short {
  /* Shorter last line in a multi-line stack — replaces a previous
     inline style="inline-size:65%" so strict CSP stays clean. */
  inline-size: 65%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}