/*
 * Skeleton placeholders — light grey shapes that hold a module's final size
 * while its data loads, so nothing below it shifts (CLS).
 *
 *   .rb-skel            grey block; size it per module
 *   .rb-skel--shimmer   adds a light sweep (motion = "still loading")
 *   .rb-skel-text       inline bar that sits on a text line without
 *                       changing the line's height
 *
 * Users: NFL + MLB Rankings rail widgets (api/rbapps/includes/partials/
 * rank_widget_skeleton.php).
 */
.rb-skel {
    position: relative;
    overflow: hidden;
    background: #ececec;
    border-radius: 3px;
}

.rb-skel--shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, #f6f6f6, transparent);
    animation: rb-skel-shimmer 1.4s ease-in-out infinite;
}

@keyframes rb-skel-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb-skel--shimmer::after {
        animation: none;
    }
}

/* Bar inside a text line: the parent's line-height still sets the row height. */
.rb-skel-text {
    display: inline-block;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    font-style: normal;
    vertical-align: middle;
    color: transparent;
}

/* Rail Rankings widgets: grey disc in the 31px team-logo slot. */
.pitem .rb-skel-logo {
    flex: none;
    width: 31px;
    height: 31px;
    margin-right: 10px;
    border-radius: 50%;
}