@layer components {
  /* ── Generic skeleton primitives ─────────────────────────
     Composable building blocks for per-widget skeletons that live in
     `templates/components/<feature>/skeleton/`. All primitives inherit
     the shimmer animation via `.skeleton-shimmer`. Size via inline
     width/height or modifier classes. Wrap a group in any container with
     `role="status" aria-busy="true" aria-live="polite"` for a11y.
  */
  .skeleton-bar {
    height: 12px;
    border-radius: 4px;
  }

  .skeleton-bar--sm {
    height: 10px;
  }

  .skeleton-bar--md {
    height: 14px;
  }

  .skeleton-bar--lg {
    height: 18px;
  }

  .skeleton-bar--xl {
    height: 24px;
  }

  .skeleton-circle {
    border-radius: 50%;
    flex-shrink: 0;
  }

  .skeleton-circle--sm {
    width: 20px;
    height: 20px;
  }

  .skeleton-circle--md {
    width: 32px;
    height: 32px;
  }

  .skeleton-circle--lg {
    width: 48px;
    height: 48px;
  }

  .skeleton-circle--xl {
    width: 64px;
    height: 64px;
  }

  .skeleton-square {
    border-radius: 6px;
    flex-shrink: 0;
  }

  .skeleton-square--sm {
    width: 20px;
    height: 20px;
  }

  .skeleton-square--md {
    width: 32px;
    height: 32px;
  }

  .skeleton-square--lg {
    width: 48px;
    height: 48px;
  }

  /* Container that holds skeleton siblings, with a card-like chrome. */
  .skeleton-card-wrap {
    padding: 16px;
    background: var(--color-surface);
    border-radius: 10px;
    border: 1px solid var(--color-border);
  }

  .skeleton-card-wrap + .skeleton-card-wrap {
    margin-top: 12px;
  }

  .skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .skeleton-row + .skeleton-row {
    margin-top: 12px;
  }

  .skeleton-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  /* Section title placeholder (for card headers). */
  .skeleton-title {
    width: 120px;
    height: 14px;
    margin-bottom: 14px;
    border-radius: 4px;
  }

  .skeleton-list {
    padding: 0 16px;
  }

  /* Shimmer block — GPU-accelerated background-position sweep */
  .skeleton-shimmer {
    background: linear-gradient(
      90deg,
      var(--color-surface) 0%,
      var(--color-surface-hover) 40%,
      var(--color-surface-hover) 60%,
      var(--color-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
  }

  /* will-change creates a permanent compositor layer in memory. Apply it ONLY
   * while the skeleton is actually visible. Both selectors scope to the
   * explicit a11y state (`aria-busy="true"` on async wrappers, `.is-hidden`
   * flipped on home skeleton root) so the compositor layer clears on swap. */
  [aria-busy="true"] .skeleton-shimmer,
  .skeleton-list:not(.is-hidden) .skeleton-shimmer {
    will-change: background-position;
  }

  /* League group skeleton */
  .skeleton-group {
    margin-bottom: 12px;
  }

  .skeleton-group__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-radius: 8px 8px 0 0;
  }

  .skeleton-group__logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .skeleton-group__name {
    width: 140px;
    height: 14px;
  }

  .skeleton-group__matches {
    display: flex;
    flex-direction: column;
  }

  /* Match card skeleton */
  .skeleton-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }

  .skeleton-card:last-child {
    border-radius: 0 0 8px 8px;
  }

  .skeleton-card__time {
    width: 40px;
    height: 16px;
    flex-shrink: 0;
  }

  .skeleton-card__teams {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .skeleton-card__team {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .skeleton-card__logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  .skeleton-card__name {
    width: 120px;
    height: 14px;
  }

  .skeleton-card__team:last-child .skeleton-card__name {
    width: 100px;
  }

  .skeleton-card__score {
    width: 28px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer {
      animation: none;
      background: var(--color-surface-hover);
    }
  }
}