/* ============================================================
   URBINO · SKELETON
   Atomic loading primitive. Layout-preserving placeholder.
   One base + shape + width modifiers. Composes into row/card/list patterns.
   ============================================================ */

.u-skel {
  background: var(--u-surface-sunk);
  border-radius: var(--u-radius-xs);
  animation: u-skel-pulse 1.6s ease-in-out infinite;
  display: block;
}
@keyframes u-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Reduced-motion: civic tools respect the user preference */
@media (prefers-reduced-motion: reduce) {
  .u-skel { animation: none; opacity: 0.7; }
}

/* ---------- SHAPES ---------- */
.u-skel--line       { height: 12px; border-radius: 4px; }
.u-skel--line-sm    { height: 10px; border-radius: 3px; }
.u-skel--line-lg    { height: 16px; border-radius: 4px; }
.u-skel--heading    { height: 22px; border-radius: 5px; }
.u-skel--heading-lg { height: 28px; border-radius: 6px; }

.u-skel--block      { border-radius: 8px; }
.u-skel--block-lg   { border-radius: 14px; }
.u-skel--circle     { border-radius: 50%; }

/* Component-shaped (match the size of the real thing) */
.u-skel--chip       { height: 22px; width: 88px; border-radius: 999px; }
.u-skel--chip-sq    { height: 18px; width: 80px; border-radius: 6px; }
.u-skel--btn-mgr    { height: 36px; width: 110px; border-radius: 8px; }
.u-skel--btn-cit    { height: 48px; width: 160px; border-radius: 999px; }
.u-skel--btn-cit-xl { height: 64px; border-radius: 999px; }
.u-skel--avatar-sm  { width: 20px; height: 20px; border-radius: 50%; }
.u-skel--avatar-md  { width: 28px; height: 28px; border-radius: 50%; }
.u-skel--avatar-lg  { width: 40px; height: 40px; border-radius: 50%; }
.u-skel--icon       { width: 16px; height: 16px; border-radius: 3px; }
.u-skel--input-mgr  { height: 36px; border-radius: 8px; }
.u-skel--input-cit  { height: 56px; border-radius: 14px; }

/* ---------- WIDTH HELPERS ---------- */
.u-skel--w-15  { width: 15%; }
.u-skel--w-25  { width: 25%; }
.u-skel--w-33  { width: 33%; }
.u-skel--w-50  { width: 50%; }
.u-skel--w-66  { width: 66%; }
.u-skel--w-75  { width: 75%; }
.u-skel--w-85  { width: 85%; }
.u-skel--w-100 { width: 100%; }

/* ---------- STAGGER ---------- */
/* Slight phase shift so rows don't pulse in lockstep — less mechanical. */
.u-skel--delay-1 { animation-delay: -0.2s; }
.u-skel--delay-2 { animation-delay: -0.4s; }
.u-skel--delay-3 { animation-delay: -0.6s; }
.u-skel--delay-4 { animation-delay: -0.8s; }


/* ============================================================
   COMPOSITION HELPERS — opt-in containers for common patterns
   ============================================================ */

/* Stacks several lines vertically */
.u-skel-lines { display: flex; flex-direction: column; gap: var(--u-space-2); }

/* Inline row of skeleton elements (avatar + line, chip + chip) */
.u-skel-row { display: flex; align-items: center; gap: var(--u-space-3); }