/* ── Skeleton shimmer loading ──────────────────────────────── */

@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

.skeleton-line {
    background: linear-gradient(
        90deg,
        var(--skeleton-base, #e8e6dc) 25%,
        var(--skeleton-highlight, #d8d5c8) 50%,
        var(--skeleton-base, #e8e6dc) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 3px;
    display: block;
    height: 13px;
    margin-bottom: 8px;
}

.skeleton-line.sk-short  { width: 40%; }
.skeleton-line.sk-medium { width: 65%; }
.skeleton-line.sk-long   { width: 90%; }
.skeleton-line.sk-full   { width: 100%; }
.skeleton-line.sk-title  { height: 18px; width: 55%; margin-bottom: 12px; }

[data-theme="dark"] {
    --skeleton-base:      #2a2a2a;
    --skeleton-highlight: #383838;
}

.grid-cell[data-skeleton] {
    padding: 16px;
}

/* thin top-stripe progress indicator when skeleton is active */
.skeleton-stripe {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--fg-3);
    opacity: 0.4;
    z-index: 300;
    animation: skeleton-stripe-pulse 2s ease-in-out infinite;
}

@keyframes skeleton-stripe-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}