/* Skeleton loaders.
 *
 * Replaces "Loading…" with a grey outline of the content that is coming. The
 * point is not decoration: a bare word gives no sense of whether one row or
 * thirty is arriving, so the page jumps when it lands. A skeleton reserves
 * roughly the right shape, so the layout settles once instead of twice.
 *
 * Rules this file follows:
 *
 *   - Skeletons are ARIA-hidden and the live region announces "Loading" once.
 *     A screen reader should hear that something is loading, not a
 *     description of twelve grey rectangles.
 *
 *   - The shimmer respects prefers-reduced-motion. An animated gradient
 *     sweeping the screen is exactly the kind of motion that triggers
 *     vestibular symptoms, and it carries no information.
 *
 *   - Nothing here changes what loads or when. Purely the placeholder shown
 *     while a fetch is in flight.
 */

.bpc-skel {
  position: relative;
  overflow: hidden;
  background: var(--border, #23262d);
  border-radius: 6px;
  /* Slightly transparent so it reads as absence rather than as content. */
  opacity: 0.55;
}

.bpc-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  animation: bpc-skel-sweep 1.4s ease-in-out infinite;
}

@keyframes bpc-skel-sweep {
  100% { transform: translateX(100%); }
}

/* Motion is decorative here — the grey block already communicates "pending". */
@media (prefers-reduced-motion: reduce) {
  .bpc-skel::after { animation: none; }
}

/* ── Shapes ───────────────────────────────────────────────────────────── */

.bpc-skel-line   { height: 12px; margin-bottom: 8px; }
.bpc-skel-line.sm { height: 9px; }
.bpc-skel-line.lg { height: 18px; }
.bpc-skel-line.w25 { width: 25%; }
.bpc-skel-line.w40 { width: 40%; }
.bpc-skel-line.w60 { width: 60%; }
.bpc-skel-line.w80 { width: 80%; }

.bpc-skel-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.bpc-skel-chip   { height: 24px; width: 84px; border-radius: 999px; }

/* A row: avatar + two lines + a trailing value. Matches the shape most of
   the platform's lists actually take. */
.bpc-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border, #23262d);
  border-radius: 12px;
  margin-bottom: 8px;
}
.bpc-skel-row-main { flex: 1; min-width: 0; }

/* A card: title then a few lines. */
.bpc-skel-card {
  border: 1px solid var(--border, #23262d);
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 10px;
}

/* A stat tile grid, for the numbers that head most pages. */
.bpc-skel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
}
.bpc-skel-stat {
  border: 1px solid var(--border, #23262d);
  border-radius: 12px;
  padding: 12px;
}