/* Skeleton loading placeholder (one shared component: {% skeleton %} tag and static/js/skeleton.js).
   Plain shapes in the colours of the final layout; the shimmer is off when the visitor asks for reduced motion. */
.bh-skeleton {
  display: grid;
  gap: 0.65rem;
  padding: 0.25rem 0;
}
.bh-skeleton-shapes {
  display: grid;
  gap: 0.65rem;
}
.bh-skeleton-line {
  position: relative;
  overflow: hidden;
  height: 0.95rem;
  border-radius: 0.4rem;
  background: var(--bh-surface-inset);
}
.bh-skeleton-line:nth-child(3n + 2) {
  width: 82%;
}
.bh-skeleton-line:nth-child(3n) {
  width: 64%;
}
.bh-skeleton--table .bh-skeleton-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1.5fr 1fr;
  gap: 0.75rem;
}
.bh-skeleton--table .bh-skeleton-line {
  width: 100%;
}
.bh-skeleton--card .bh-skeleton-line:first-child {
  height: 1.4rem;
  width: 55%;
}
.bh-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--bh-surface-sheen), transparent);
  animation: bh-skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes bh-skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bh-skeleton-line::after {
    animation: none;
    display: none;
  }
}
@media (forced-colors: active) {
  .bh-skeleton-line {
    border: 1px solid CanvasText;
  }
}