/* Custom overrides on top of Tailwind. Tailwind itself is currently served
   from the Play CDN in base.html; swap to the standalone CLI before going
   to production (see README). */

/* Loader for live-API fragments — see _partials/api_loading.html. */
.api-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
}
.api-loading__spinner {
  /* `display: inline-block` is load-bearing — the element is an empty
     <span> (default `display: inline`), and inline elements ignore
     width/height. Without this the spinner has zero size and the user
     just sees "載入中…" with no animation. */
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #cbd5e1;
  border-top-color: #0f172a;
  border-radius: 9999px;
  animation: api-loading-spin 0.8s linear infinite;
}
@keyframes api-loading-spin {
  to { transform: rotate(360deg); }
}