/* Split for the 300-line cap — order matters, keep sequence. */

.fn-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 34px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14);
  animation: fn-bar-enter var(--fn-dur-slow) var(--fn-ease);
}

.fn-overlay__title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.fn-overlay__hint {
  font-size: 13px;
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   8. Busy states
   -------------------------------------------------------------------------- */

/* Any control can declare itself busy. Kept separate from :disabled so the
   disabled styling of a specific theme is not clobbered. */
[aria-busy='true'] {
  cursor: progress;
}

.fn-busy-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   9. Reduced motion

   Loading feedback must survive, so the sweep is replaced with a static
   placeholder rather than removing the animation entirely.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fn-progress {
    transition: opacity var(--fn-dur-fast) linear;
  }

  .fn-spinner {
    animation-duration: 1.4s;
  }

  .fn-dots > i {
    animation: none;
    opacity: 0.55;
  }

  .fn-dots > i:nth-child(2) {
    opacity: 0.8;
  }

  .fn-dots > i:nth-child(3) {
    opacity: 1;
  }

  .fn-skeleton,
  .fn-skeleton > .fn-skeleton-line,
  .fn-skeleton-line,
  .gh-shim-block {
    animation: none;
    background-image: none;
    background-color: var(--fn-surface);
  }

  .fn-overlay__card {
    animation: none;
  }
}