/* ============================================================
   GistKE — Skeleton Loading
   Animated placeholder cards shown while content loads
   Defined in comments.css but this file extends for other uses
   ============================================================ */

/* Sidebar skeleton */
.skeleton-sidebar-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.skeleton-rank {
    width: 22px;
    height: 22px;
    background: var(--bg-raised);
    border-radius: 2px;
    flex-shrink: 0;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line {
    height: 12px;
    background: var(--bg-raised);
    border-radius: 2px;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line--full   { width: 100%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--short  { width: 40%; height: 9px; }

/* Mobile bottom bar skeleton */
.skeleton-bar {
    height: 56px;
    background: var(--bg-raised);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0%, 100% { opacity: .4; }
    50%       { opacity: .8; }
}