/* Shared, geometry-based placeholders. No page-wide visibility gate. */
.skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(100deg, var(--color-surface-3, #eaeef2) 20%, color-mix(in srgb, var(--color-text-muted, #8b949e) 18%, transparent) 40%, var(--color-surface-3, #eaeef2) 60%);
    /* Static fill: offscreen pending charts must not repaint the whole page. */
    color: transparent;
    pointer-events: none;
    user-select: none;
}
.skeleton-line { height: 1em; width: 65%; }
.skeleton-line--short { width: 36%; }
.skeleton-line--title { width: min(100%, 390px); height: 0.85em; }
.skeleton-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; }
.skeleton-row { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.skeleton-row > .skeleton-line { flex: 1; max-width: 260px; }
.skeleton-chart { min-height: 360px; width: 100%; }
.skeleton-stats-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.skeleton-stat { min-height: 118px; padding: 20px; display: grid; align-content: center; gap: 16px; border-radius: 14px; background: var(--color-surface-2); }
[data-state="loading"] { cursor: progress; }
[data-state="loading"] :is(button, a, input, select)[inert], [inert] :is(button, a, input, select) { cursor: default; }
@media (max-width: 900px) { .skeleton-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .skeleton-stats-grid { gap: 9px; } .skeleton-stat { min-height: 100px; padding: 16px; } }
@media (max-width: 420px) { .skeleton-stats-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }