/* =============================================================
   FLOWLY — SKELETON LOADING
   ============================================================= */

@keyframes flowly-skeleton-shimmer {
    0%   { background-position: -240px 0; }
    100% { background-position: 240px 0; }
}

.flowly-skeleton-card {
    padding: 18px 16px;
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--flowly-border-subtle, rgba(255, 255, 255, 0.04));
    border-radius: calc(12px * var(--flowly-radius-k));
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 110px;
}
.flowly-skeleton-card--tall { min-height: 160px; }

.flowly-skeleton-line {
    height: 12px;
    /* Shimmer travels dark→light→dark through the row — em light, o token
       glass já é escuro, então as 3 paradas viram degradê inverso: ok. */
    background: linear-gradient(
        90deg,
        var(--flowly-bg-glass, rgba(255, 255, 255, 0.04)) 0%,
        var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.08)) 50%,
        var(--flowly-bg-glass, rgba(255, 255, 255, 0.04)) 100%
    );
    background-size: 240px 100%;
    background-repeat: no-repeat;
    border-radius: calc(4px * var(--flowly-radius-k));
    animation: flowly-skeleton-shimmer 1.4s ease-in-out infinite;
}

.flowly-skeleton-line--title {
    height: 16px;
    width: 60%;
    margin-bottom: 4px;
}
.flowly-skeleton-line--bar {
    height: 8px;
    width: 100%;
    border-radius: calc(99px * var(--flowly-radius-k));
    margin-top: 6px;
}
.flowly-skeleton-line--meta {
    height: 10px;
    width: 40%;
    margin-top: auto;
}

.flowly-skeleton-line--mid   { width: 55%; }
.flowly-skeleton-line--long  { width: 80%; }

@media (prefers-reduced-motion: reduce) {
    .flowly-skeleton-line { animation: none; opacity: 0.5; }
}