/* ============================================================
   Canonical skeleton primitive — UX_STANDARD §4 ("Loading /
   Skeleton — MISSING — build canonical"). Replaces per-page
   shimmer + keyframe reinventions across the codebase.

   Usage:
     <div class="ro-skel" data-w="100%" data-h="64px"></div>
     <div class="ro-skel ro-skel-block"></div>     // default 64px
     <div class="ro-skel ro-skel-line"></div>      // single text line
     <div class="ro-skel ro-skel-title"></div>     // bigger headline line

   Animation honors prefers-reduced-motion automatically.

   Note: this is the FIRST canonical primitive in this family. New
   pages should consume this; legacy pages migrate opportunistically
   as they're edited. Drift script enforcement comes later once
   migration is complete.
   ============================================================ */
.ro-skel {
  display: block;
  /* Token-only (UX_STANDARD §2 / THEME RULE 1). The canonical
     tokens carry both light- and dark-mode values, set in
     packages/shared/global.css. */
  background: linear-gradient(
    90deg,
    var(--bg-card) 0%,
    var(--cyan-bg-faint) 50%,
    var(--bg-card) 100%
  );
  background-size: 200% 100%;
  border-radius: 14px;
  animation: ro-skel-shimmer 1.6s ease-in-out infinite;
  will-change: background-position;
}

.ro-skel-block { height: 64px; }
.ro-skel-line  { height: 14px; border-radius: 6px; margin: 6px 0; }
.ro-skel-title { height: 22px; border-radius: 8px; margin: 10px 0; max-width: 60%; }

@keyframes ro-skel-shimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ro-skel { animation: none; }
}