/* Shimmer skeletons for async data loads (initial bootstrap, editor spec fetch).
   Theme-aware via design tokens; respects reduced-motion. */

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--card-bg) 65%, transparent),
        transparent
    );
    animation: skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes skeleton-sweep {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}

.skeleton-line { height: 11px; margin: 8px 0; border-radius: 4px; }
.skeleton-line.sk-lg { height: 16px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-85 { width: 85%; }

/* project-card-shaped skeleton */
.skeleton-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 18px;
}
.skeleton-card-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.skeleton-chip { width: 62px; height: 20px; border-radius: 99px; }
.skeleton-row { display: flex; gap: 10px; margin-top: 14px; }
.skeleton-btn { width: 92px; height: 26px; border-radius: var(--radius-sm); }

/* editor viewport placeholder (an A3-ish sheet) */
.skeleton-sheet {
    width: min(78%, 560px);
    aspect-ratio: 297 / 210;
    margin: 40px auto;
    border-radius: 6px;
    box-shadow: var(--shadow);
}