/*
 * EQ Spinner — hand-port of the `bars` variant from @eq-solutions/ui v1.11.1.
 *
 * Field is a vanilla app and can't import the React component, so the visual is
 * reproduced here as plain CSS on the same --eq-* tokens.
 *
 * PARTIAL PORT, not kept in sync automatically (no drift guard, unlike
 * styles/tokens.css): ported from eq-ui commit fec683f (#16, the original
 * `bars`-only Spinner). eq-ui has since added `ring`/`dots`/`trail` variants
 * and an `inverted` prop (commit c05e042, #18) — NOT ported here, because
 * Field only ever renders `bars` (see index.html, one usage, no variant prop).
 * If Field ever needs another variant or `inverted`, port it from
 * eq-ui/src/Spinner/Spinner.css at that point — don't assume this file matches
 * current eq-ui just because the class names look familiar.
 *
 * No CI check enforces this pin — if @eq-solutions/ui's Spinner changes (props,
 * variants, markup), a human has to notice and re-port by hand. When you bump
 * this file, bump the version number above too.
 *
 * Markup:
 *   <span class="eq-spinner eq-spinner--bars eq-spinner--lg" role="status" aria-label="Loading">
 *     <span class="eq-spinner__pieces" aria-hidden="true">
 *       <span class="eq-spinner__piece"></span>   (×5)
 *     </span>
 *   </span>
 */

.eq-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* Sizes — component-internal geometry */
.eq-spinner--sm { --sp-size: 16px; --sp-thick: 3px; --sp-gap: 2px; }
.eq-spinner--md { --sp-size: 28px; --sp-thick: 4px; --sp-gap: 3px; }
.eq-spinner--lg { --sp-size: 40px; --sp-thick: 5px; --sp-gap: 4px; }

/* Bars (default) — EQ equalizer */
.eq-spinner--bars .eq-spinner__pieces {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-gap);
  height: var(--sp-size);
}

.eq-spinner--bars .eq-spinner__piece {
  width: var(--sp-thick);
  height: 100%;
  border-radius: var(--eq-radius-full, 9999px);
  background-color: var(--eq-sky);
  transform-origin: bottom;
  animation: eq-spinner-bars var(--eq-duration-spinner, 0.9s) ease-in-out infinite;
}

.eq-spinner--bars .eq-spinner__piece:nth-child(2) { background-color: var(--eq-deep); animation-delay: calc(var(--eq-duration-spinner, 0.9s) * 0.2); }
.eq-spinner--bars .eq-spinner__piece:nth-child(3) { animation-delay: calc(var(--eq-duration-spinner, 0.9s) * 0.4); }
.eq-spinner--bars .eq-spinner__piece:nth-child(4) { background-color: var(--eq-deep); animation-delay: calc(var(--eq-duration-spinner, 0.9s) * 0.15); }
.eq-spinner--bars .eq-spinner__piece:nth-child(5) { animation-delay: calc(var(--eq-duration-spinner, 0.9s) * 0.3); }

@keyframes eq-spinner-bars {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* Reduced motion — freeze to a static, legible glyph */
@media (prefers-reduced-motion: reduce) {
  .eq-spinner--bars .eq-spinner__piece { animation: none; transform: scaleY(1); }
}