/* ==========================================================================
   COMPONENTS · SKELETON — loading placeholders set in the stock, with a slow
   ink-wash sweep. The sweep is disabled under prefers-reduced-motion, leaving a
   calm static block. Sizes mirror the things they stand in for.
   ========================================================================== */

.op-skeleton {
  --sk-base: var(--surface-sunken);
  background: var(--sk-base);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.op-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in oklab, var(--surface-raised) 70%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: op-skeleton-sweep 1.6s var(--ease-standard) infinite;
}

@keyframes op-skeleton-sweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .op-skeleton::after { animation: none; display: none; }
}

/* — Shapes — */
.op-skeleton--line  { block-size: 0.85em; margin-block: 0.35em; }
.op-skeleton--line.is-short { inline-size: 60%; }
.op-skeleton--title { block-size: 1.6em; inline-size: 70%; }
.op-skeleton--badge { block-size: 1.6em; inline-size: 6.5em; border-radius: var(--radius-xs); }
.op-skeleton--block { block-size: 8rem; }
.op-skeleton--seal  { inline-size: 6rem; block-size: 6rem; border-radius: var(--radius-seal); }