/* ============================================================
   API layer — async UI states (loading skeletons, error, retry)
   Shared visual language for any module wired through window.api.
   ============================================================ */

/* ---- shimmer skeleton card (matches a 9:16 vault card) ---- */
.vw-skel{
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(255,255,255,.06));
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.06) 50%,
      rgba(255,255,255,0) 70%) ,
    var(--surf-2, rgba(255,255,255,.03));
  background-size: 220% 100%, 100% 100%;
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes skel-shimmer{
  0%   { background-position: 180% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .vw-skel{ animation: none; }
}

/* ---- generic async-error panel ---- */
.api-error{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  min-height: 280px; padding: 40px;
  margin: 0 auto;
}
.api-error .ring{
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--st-rev, #ffb454);
  background: color-mix(in oklab, var(--st-rev, #ffb454) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--st-rev, #ffb454) 38%, transparent);
}
.api-error .t{ font-size: 16px; font-weight: 650; color: var(--ink, #eef); letter-spacing: -.01em; }
.api-error .s{ font-size: 13px; color: var(--ink-3, #8b90a3); max-width: 320px; line-height: 1.5; }
.api-error .s code{ font-family: var(--mono, ui-monospace, monospace); font-size: 12px; opacity: .85; }
.api-retry{
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink, #eef);
  background: var(--surf-3, rgba(255,255,255,.06));
  border: 1px solid var(--line, rgba(255,255,255,.1));
  transition: background .15s ease, transform .12s ease;
}
.api-retry:hover{ background: var(--surf-4, rgba(255,255,255,.1)); }
.api-retry:active{ transform: translateY(1px); }

/* ---- full-module gate (ApiBoundary) ---- */
.api-boundary{
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.api-spin{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--ink-3, #8b90a3);
  font-size: 13px; font-weight: 550; letter-spacing: .01em;
}
.api-spin .wz-spinner{ color: var(--acc, #16c0d8); }