/*
 * Loader (README "Loader", S-04, S-12, M-09): the Capstone flower rotating 360° every 1.6s with
 * cubic-bezier(.45,.05,.55,.95). 56px desktop, 36px mobile. The flower appears only here.
 * With prefers-reduced-motion it does not spin.
 */
@layer components {
  .loader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px;
  }

  .loader__flower {
    width: 56px;
    height: 56px;
    flex: none;
    animation: loader-spin 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
  .loader--sm .loader__flower { width: 48px; height: 48px; }

  .loader__text { display: flex; flex-direction: column; gap: 2px; }
  .loader__label { font-size: 15px; font-weight: 700; }
  .loader__hint { font-size: 13px; color: var(--color-neutral-700); }

  .loading { display: flex; flex-direction: column; gap: 28px; }
  /* S-12: with KPI card skeletons the loader lines up with the cards (no inset). */
  .loading:has(.skeleton-cards) .loader { padding: 0; }

  @keyframes loader-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .loader__flower { animation: none; }
  }

  @media (max-width: 767px) {
    .loader { gap: 12px; }
    .loader__flower,
    .loader--sm .loader__flower { width: 36px; height: 36px; }
    .loader__label { font-size: 14px; }
    .loading { gap: 16px; }
  }
}