/* =====================================================================
 * skeleton.css — placeholder shimmer for loading states.
 *
 * Use:
 *   <div class="skeleton skeleton-line"></div>           one-line bar
 *   <div class="skeleton skeleton-line skeleton-w-50"></div>  50% width
 *   <div class="skeleton skeleton-block"></div>          tall block
 *   <ul class="skeleton-list"><li></li><li></li><li></li></ul>
 *
 * Animation honors prefers-reduced-motion.
 * =====================================================================*/

.skeleton {
    display: block;
    background-color: rgba(148,163,184,0.12);
    background-image: linear-gradient(
        90deg,
        rgba(148,163,184,0)   0%,
        rgba(148,163,184,0.22) 50%,
        rgba(148,163,184,0)   100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
    animation: rtg-skeleton-shimmer 1.2s infinite linear;
    color: transparent !important;
}

.skeleton-line  { height: 12px; margin: var(--space-2) 0; }
.skeleton-block { height: 80px; margin: var(--space-3) 0; border-radius: var(--radius-md); }

.skeleton-w-25 { width: 25%; }
.skeleton-w-50 { width: 50%; }
.skeleton-w-75 { width: 75%; }
.skeleton-w-100, .skeleton-w-full { width: 100%; }

/* Simple list — three lines of varying widths. */
.skeleton-list { list-style: none; margin: 0; padding: 0; }
.skeleton-list > li {
    display: block;
    height: 12px;
    margin: var(--space-3) 0;
    background-color: rgba(148,163,184,0.12);
    background-image: linear-gradient(
        90deg,
        rgba(148,163,184,0)   0%,
        rgba(148,163,184,0.22) 50%,
        rgba(148,163,184,0)   100%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: rtg-skeleton-shimmer 1.2s infinite linear;
}
.skeleton-list > li:nth-child(1) { width: 80%; }
.skeleton-list > li:nth-child(2) { width: 60%; }
.skeleton-list > li:nth-child(3) { width: 90%; }

@keyframes rtg-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton-list > li { animation: none; }
}