/* ============================================================
   states.css
   Loading and error states. The skeleton matches the real layout
   shape rather than using a generic spinner.
   ============================================================ */

.skeleton{
  border-radius:8px;
  color:transparent !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.11) 40%,
    rgba(255,255,255,.05) 80%
  );
  background-size:280% 100%;
}

@media (prefers-reduced-motion: no-preference){
  .skeleton{ animation:shimmer 1.5s linear infinite }
}

@keyframes shimmer{ to{ background-position:-280% 0 } }

[data-state="loading"] .names h1{ width:9rem; height:1.35rem }
[data-state="loading"] .names p { width:6rem; height:.85rem; margin-top:.4rem }
[data-state="loading"] .avatar  { filter:grayscale(1) brightness(.4) }

/* Error state. Says what happened and what to do, in one line. */
.fallback{
  display:none;
  margin-top:1.1rem;
  padding:.9rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--r-inner);
  background:var(--surface-2);
  font-size:.85rem;
  color:var(--text-dim);
}
.fallback.is-on{ display:block }

.fallback button{
  margin-top:.6rem;
  padding:.4rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  color:var(--text);
  font-size:.78rem;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.fallback button:hover{ background:rgba(255,255,255,.1) }
.fallback button:active{ transform:translateY(1px) }