/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton
   Варіанти:  skel-text (skel-xs · sm · md · lg · xl)
              skel-avatar (+ skel-sm · skel-lg)
              skel-rect
   Composites: skel-card · skel-metric
   JS: відсутній
   A11y: aria-hidden="true" на кожному :is(.skeleton, .skel); aria-busy="true" на контейнері
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shimmer keyframe ──────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  to { transform: translateX(200%); }
}

/* ── Base ─────────────────────────────────────────────────────────────── */
:is(.skeleton, .skel) {
  display: block;
  position: relative;
  overflow: hidden;
  /* surface-hover замість surface-muted: shimmer було ледь видно на білому (аудит #15, 2026-07-02) */
  background-color: var(--uris-color-semantic-surface-hover);
  border-radius: var(--uris-radius-sm);
  flex-shrink: 0;
}

/* Shimmer overlay — sweeps from left to right */
:is(.skeleton, .skel)::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    var(--uris-color-semantic-surface-hover) 0%,
    var(--uris-color-semantic-surface)       50%,
    var(--uris-color-semantic-surface-hover) 100%
  );
  animation: skeleton-shimmer var(--uris-duration-skeleton) linear infinite;
}

/* Static fallback — reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :is(.skeleton, .skel)::after { animation: none; }
}

/* ── Text line ─────────────────────────────────────────────────────────── */
/* Default: md height; pill shape (radius-full mirrors typical text baselines) */
:is(.skeleton-text, .skel-text) {
  height: var(--uris-component-skeleton-line-md);
  width:  100%;
  border-radius: var(--uris-radius-full);
}

:is(.skeleton-text, .skel-text):is(.skeleton-xs, .skel-xs) { height: var(--uris-component-skeleton-line-xs); }
:is(.skeleton-text, .skel-text):is(.skeleton-sm, .skel-sm) { height: var(--uris-component-skeleton-line-sm); }
:is(.skeleton-text, .skel-text):is(.skeleton-md, .skel-md) { height: var(--uris-component-skeleton-line-md); }
:is(.skeleton-text, .skel-text):is(.skeleton-lg, .skel-lg) { height: var(--uris-component-skeleton-line-lg); }
:is(.skeleton-text, .skel-text):is(.skeleton-xl, .skel-xl) { height: var(--uris-component-skeleton-line-xl); }

/* ── Avatar (circle) ──────────────────────────────────────────────────── */
/* Default: md size = 32px (matches avatar md)                             */
:is(.skeleton-avatar, .skel-avatar) {
  width:  var(--uris-component-avatar-size-md);
  height: var(--uris-component-avatar-size-md);
  border-radius: var(--uris-radius-full);
}

:is(.skeleton-avatar, .skel-avatar):is(.skeleton-sm, .skel-sm) {
  width:  var(--uris-component-avatar-size-sm);
  height: var(--uris-component-avatar-size-sm);
}

:is(.skeleton-avatar, .skel-avatar):is(.skeleton-lg, .skel-lg) {
  width:  var(--uris-component-avatar-size-lg);
  height: var(--uris-component-avatar-size-lg);
}

/* ── Rectangle ────────────────────────────────────────────────────────── */
/* Generic block placeholder; set width/height via inline style or context  */
:is(.skeleton-rect, .skel-rect) {
  width:  100%;
  height: var(--uris-component-skeleton-rect-height);
  border-radius: var(--uris-radius-sm);
}

/* ── Card composite ───────────────────────────────────────────────────── */
/* Mirrors the structure of a typical content card:                         */
/*   head (avatar + 2 text lines) / body (3 text lines) / foot (action)    */
:is(.skeleton-card, .skel-card) {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-4);
  padding: var(--uris-spacing-4);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  background: var(--uris-color-semantic-surface);
}

:is(.skeleton-card__head, .skel-card__head) {
  display: flex;
  align-items: flex-start;
  gap: var(--uris-spacing-3);
}

:is(.skeleton-card__head-text, .skel-card__head-text) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
  padding-block-start: var(--uris-spacing-1); /* align first line with avatar top */
}

:is(.skeleton-card__body, .skel-card__body) {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
}

:is(.skeleton-card__foot, .skel-card__foot) {
  display: flex;
  gap: var(--uris-spacing-2);
}

/* ── Metric composite ─────────────────────────────────────────────────── */
/* Mirrors .metric dashboard block: label / value / delta                   */
:is(.skeleton-metric, .skel-metric) {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
  padding: var(--uris-spacing-4);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  background: var(--uris-color-semantic-surface);
}