/* ============================================================
   STATE LAYER v1.0 — skeleton / empty / error / stale / offline
   Requires tokens.css. Every data region must own 4 states.
   ============================================================ */

/* ---- 1. SKELETON ---- */
.sk{position:relative;overflow:hidden;background:var(--skeleton-a);border-radius:var(--r-sm);display:block}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--skeleton-b),transparent);
  animation:skShimmer 1.4s var(--ease-standard) infinite}
@keyframes skShimmer{100%{transform:translateX(100%)}}
.sk-text{height:11px;margin:7px 0}
.sk-title{height:16px;width:48%;margin:0 0 12px}
.sk-line-70{width:70%}.sk-line-45{width:45%}.sk-line-90{width:90%}
.sk-chip{height:22px;width:64px;border-radius:var(--r-pill)}
.sk-kpi{height:64px;border-radius:var(--r-lg)}
.sk-chart{height:180px;border-radius:var(--r-lg)}
.sk-row{display:flex;gap:var(--s-3);align-items:center;padding:10px 0;border-bottom:1px solid var(--b1)}
.sk-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.sk-grow{flex:1}

/* ---- 2. EMPTY / 3. ERROR (shared shell) ---- */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s-7) var(--s-4);gap:var(--s-3);min-height:180px}
.state-ic{width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;
  font-size:19px;background:var(--card);border:1px solid var(--b1)}
.state-empty .state-ic{color:var(--tx2)}
.state-error .state-ic{color:var(--rd);background:rgba(var(--rdr),.10);border-color:rgba(var(--rdr),.28)}
.state-t{font-size:var(--fs-base);font-weight:var(--w-semi);color:var(--tx)}
.state-s{font-size:var(--fs-small);color:var(--tx2);max-width:34ch;line-height:var(--lh-normal)}
.state-act{display:flex;gap:var(--s-2);margin-top:var(--s-1);flex-wrap:wrap;justify-content:center}
.btn-state{min-height:34px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--b2);
  background:var(--card);color:var(--tx);font:var(--w-semi) var(--fs-small)/34px var(--font-sans);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.btn-state:hover{background:var(--card-hover)}
.btn-state.primary{background:var(--ac);border-color:transparent;color:#fff}

/* ---- 4. STALE / LIVE / OFFLINE BADGES ---- */
.dbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-pill);
  font:var(--w-bold) var(--fs-caption)/1.5 var(--font-sans);letter-spacing:.5px;white-space:nowrap}
.dbadge .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dbadge-live{color:var(--gr);background:rgba(var(--grr),.10);border:1px solid rgba(var(--grr),.25)}
.dbadge-live .dot{background:var(--gr);animation:dbPulse 1.5s var(--ease-standard) infinite}
.dbadge-stale{color:var(--gold);background:rgba(var(--gol),.10);border:1px solid rgba(var(--gol),.28)}
.dbadge-stale .dot{background:var(--gold)}
.dbadge-offline{color:var(--tx2);background:var(--card);border:1px solid var(--b2)}
.dbadge-offline .dot{background:var(--tx3)}
.dbadge-error{color:var(--rd);background:rgba(var(--rdr),.10);border:1px solid rgba(var(--rdr),.28)}
.dbadge-error .dot{background:var(--rd)}
.dbadge-mock{color:var(--ac);background:var(--ac-soft);border:1px solid rgba(var(--acr),.3)}
.dbadge-mock .dot{background:var(--ac)}
@keyframes dbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* ---- 5. DISCLAIMER STRIP (fintech compliance) ---- */
.legal-strip{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:10px var(--s-4);border-top:1px solid var(--b1);background:var(--bg-sunken);
  font-size:var(--fs-caption);color:var(--tx3);line-height:1.5}
.legal-strip strong{color:var(--tx2);font-weight:var(--w-bold)}