/* ================================================================
   SKELETON COMPONENT — loading placeholder with shimmer
   Budget: < 500 bytes minified
   ================================================================ */

.skeleton {
    background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-surface-sunken) 50%, var(--bg-surface) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
    display: block;
}
.skeleton--text { height: 1em; border-radius: var(--radius-sm); }
.skeleton--circle { border-radius: 50%; }
.skeleton--card { height: 120px; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; opacity: 0.5; }
}