/* ── Collapsible ──────────────────────────────────────────────── */
.collapsible-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer; user-select: none;
}
.collapsible-toggle .arrow {
  transition: transform var(--transition); font-size: 0.75rem;
}
.collapsible-toggle.open .arrow { transform: rotate(90deg); }
.collapsible-body { overflow: hidden; transition: max-height 0.3s ease; }

/* ── Loading Spinner ──────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-center {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; flex-direction: column; gap: 1rem;
  color: var(--text-dim);
}

/* ── Skeleton Loaders (T3-05) ─────────────────────────────────── */
.skeleton-card {
  min-height: 7rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  pointer-events: none;
}
.skeleton-line {
  height: 0.85rem; border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 0%, var(--surface-elevated, #2a2a36) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
.skeleton-line-title { height: 1.1rem; width: 70%; }
.skeleton-line-meta { width: 100%; }
.skeleton-line-short { width: 45%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; opacity: 0.5; }
}

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 2rem;
  color: var(--text-dim); font-size: 0.9rem;
}
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; }