[data-fui-comp="ui-spinner"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 4px);
  --ui-spinner-size: 1.5rem;
}
[data-fui-comp="ui-spinner"].ui-spinner--sm { --ui-spinner-size: 1rem; }
[data-fui-comp="ui-spinner"].ui-spinner--lg { --ui-spinner-size: 2.5rem; }
[data-fui-comp="ui-spinner"].ui-spinner--inline { display: inline-flex; }
[data-fui-comp="ui-spinner"] .ui-spinner__ring {
  display: inline-block;
  inline-size: var(--ui-spinner-size);
  block-size:  var(--ui-spinner-size);
  border-radius: 50%;
  border: 2px solid var(--color-border, #E4E4E7);
  border-top-color: var(--color-primary, #4F46E5);
  animation: ui-spinner-rotate var(--duration-slow, 800ms) linear infinite;
}
[data-fui-comp="ui-spinner"] .ui-spinner__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-fui-comp="ui-spinner"] .ui-spinner__dot {
  display: inline-block;
  inline-size: calc(var(--ui-spinner-size) * 0.28);
  block-size:  calc(var(--ui-spinner-size) * 0.28);
  border-radius: 50%;
  background: var(--color-primary, #4F46E5);
  animation: ui-spinner-pulse 1.2s ease-in-out infinite both;
}
[data-fui-comp="ui-spinner"] .ui-spinner__dot:nth-child(1) { animation-delay: -0.32s; }
[data-fui-comp="ui-spinner"] .ui-spinner__dot:nth-child(2) { animation-delay: -0.16s; }

/* SpinnerGrid — 3×3 cells with a diagonal-ripple delay schedule. */
[data-fui-comp="ui-spinner"] .ui-spinner__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ui-spinner-size) * 0.08);
  inline-size: var(--ui-spinner-size);
  block-size:  var(--ui-spinner-size);
}
[data-fui-comp="ui-spinner"] .ui-spinner__cell {
  display: block;
  background: var(--color-primary, #4F46E5);
  border-radius: 2px;
  animation: ui-spinner-grid 1.3s ease-in-out infinite both;
}
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(1) { animation-delay: 0.0s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(2) { animation-delay: 0.1s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(3) { animation-delay: 0.2s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(4) { animation-delay: 0.1s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(5) { animation-delay: 0.2s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(6) { animation-delay: 0.3s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(7) { animation-delay: 0.2s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(8) { animation-delay: 0.3s; }
[data-fui-comp="ui-spinner"] .ui-spinner__cell:nth-child(9) { animation-delay: 0.4s; }

@keyframes ui-spinner-rotate {
  to { transform: rotate(360deg); }
}
@keyframes ui-spinner-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1); }
}
@keyframes ui-spinner-grid {
  0%, 70%, 100% { opacity: 0.2; transform: scale(0.7); }
  35%           { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-spinner"] .ui-spinner__ring,
  [data-fui-comp="ui-spinner"] .ui-spinner__dot,
  [data-fui-comp="ui-spinner"] .ui-spinner__cell {
    animation-duration: 2.4s;
  }
}

.ui-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}