/* ── Skeleton loading animations ── */

@keyframes skeleton-pulse {
    0%   { background-color: var(--surface-secondary); }
    50%  { background-color: var(--surface-tertiary); }
    100% { background-color: var(--surface-secondary); }
}

/* Base skeleton element */
.skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--sp-radius-sm);
    pointer-events: none;
    user-select: none;
}

/* Text placeholder — standard */
.skeleton-text {
    height: 12px;
    width: 80%;
    border-radius: var(--sp-radius-sm);
}

/* Text placeholder — small */
.skeleton-text-sm {
    height: 10px;
    width: 60%;
    border-radius: var(--sp-radius-sm);
}

/* Card placeholder (mimics .grid-item dimensions) */
.skeleton-card {
    height: 120px;
    width: 100%;
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-surface-2);
    border: 1px solid var(--sp-border-subtle);
}

/* Row placeholder (for list rows) */
.skeleton-row {
    height: 35px;
    width: 100%;
    margin-bottom: 4px;
    border-radius: var(--sp-radius-sm);
}

/* Grid container for skeleton cards (matches setup grid layout) */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 5), 1fr);
    gap: 8px;
}

/* Side panel item placeholder */
.skeleton-panel-row {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid var(--sp-border-subtle);
    border-radius: 0;
}