/*
 * sota-skeleton.css — Loading skeleton shimmer system
 * Trading Hub v2 — prefix: .sota-skeleton | .thv2-skeleton | .sota-grid-
 * Colors: --bg:#06090F --gold:#D4A853 --accent:#4CC2FF --text:#E8EDF5
 * Additive only — does NOT clobber existing styles
 * Companion to engine/sota-skeleton.js (window.THV2Skeleton)
 */

/* ============================================================
   1. KEYFRAMES
   ============================================================ */

@keyframes sota-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes sota-skeleton-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes sota-shimmer {
    0%, 100% { background-position: 0% center; }
  }
  @keyframes sota-skeleton-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}


/* ============================================================
   2. BASE SHIMMER BONE
   ============================================================ */

.sota-skeleton {
  --sk-base:    #1a1f28;
  --sk-shine:   rgba(255, 255, 255, 0.06);
  --sk-radius:  4px;
  --sk-dur:     1.6s;

  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius);
  background:
    linear-gradient(
      90deg,
      var(--sk-base)   0%,
      var(--sk-shine)  40%,
      var(--sk-base)   60%,
      var(--sk-base)   100%
    );
  background-size: 200% 100%;
  animation: sota-shimmer var(--sk-dur) linear infinite;

  /* block-level by default; inline variant handled separately */
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .sota-skeleton {
    animation-duration: 4s;
    --sk-shine: rgba(255, 255, 255, 0.03);
  }
}


/* ============================================================
   3. SKELETON WRAPPER — entry animation
   ============================================================ */

.sota-skeleton-wrap {
  animation: sota-skeleton-fade-in 180ms var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .sota-skeleton-wrap {
    animation: none;
  }
}


/* ============================================================
   4. LAYOUT ATOMS — shared across all layout types
   ============================================================ */

/* Line: narrow text stand-in */
.sota-sk-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.sota-sk-line:last-child {
  margin-bottom: 0;
}

/* Short heading line */
.sota-sk-line--heading {
  height: 16px;
  border-radius: 6px;
}

/* Large display block (hero numbers) */
.sota-sk-line--display {
  height: 40px;
  border-radius: 8px;
}

/* Subtitle / sub-label */
.sota-sk-line--sub {
  height: 10px;
  border-radius: 5px;
}

/* Rect: chart area, image placeholder, etc. */
.sota-sk-rect {
  width: 100%;
  border-radius: 6px;
}

/* Circle: avatar / list bullet */
.sota-sk-circle {
  border-radius: 50%;
  flex-shrink: 0;
}


/* ============================================================
   5. LAYOUT: CARD
   ============================================================ */

.sota-sk-layout--card {
  padding: 16px;
  background: rgba(26, 31, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sota-sk-card-header {
  width: 60%;
  height: 16px;
  border-radius: 6px;
}

.sota-sk-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sota-sk-card-body .sota-sk-line:nth-child(1) { width: 100%; }
.sota-sk-card-body .sota-sk-line:nth-child(2) { width: 88%; }
.sota-sk-card-body .sota-sk-line:nth-child(3) { width: 72%; }


/* ============================================================
   6. LAYOUT: CHART
   ============================================================ */

.sota-sk-layout--chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sota-sk-chart-area {
  width: 100%;
  height: 200px;
  border-radius: 6px;
}

.sota-sk-chart-stats {
  display: flex;
  gap: 16px;
}

.sota-sk-chart-stat {
  flex: 1;
  height: 12px;
  border-radius: 6px;
}


/* ============================================================
   7. LAYOUT: TABLE
   ============================================================ */

.sota-sk-layout--table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}

.sota-sk-table-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sota-sk-table-row:last-child {
  border-bottom: none;
}

.sota-sk-table-cell {
  height: 11px;
  border-radius: 4px;
}

.sota-sk-table-cell:nth-child(1) { width: 90%; }
.sota-sk-table-cell:nth-child(2) { width: 70%; }
.sota-sk-table-cell:nth-child(3) { width: 80%; }
.sota-sk-table-cell:nth-child(4) { width: 60%; }


/* ============================================================
   8. LAYOUT: STAT
   ============================================================ */

.sota-sk-layout--stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: rgba(26, 31, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.sota-sk-stat-number {
  width: 72px;
  height: 40px;
  border-radius: 6px;
}

.sota-sk-stat-label {
  width: 88px;
  height: 11px;
  border-radius: 5px;
}


/* ============================================================
   9. LAYOUT: LIST
   ============================================================ */

.sota-sk-layout--list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sota-sk-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sota-sk-list-item:last-child {
  border-bottom: none;
}

.sota-sk-list-bullet {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sota-sk-list-text {
  flex: 1;
  height: 13px;
  border-radius: 6px;
}

.sota-sk-list-item:nth-child(1) .sota-sk-list-text { width: 80%; }
.sota-sk-list-item:nth-child(2) .sota-sk-list-text { width: 65%; }
.sota-sk-list-item:nth-child(3) .sota-sk-list-text { width: 90%; }
.sota-sk-list-item:nth-child(4) .sota-sk-list-text { width: 70%; }
.sota-sk-list-item:nth-child(5) .sota-sk-list-text { width: 55%; }
.sota-sk-list-item:nth-child(6) .sota-sk-list-text { width: 85%; }


/* ============================================================
   10. LAYOUT: HERO
   ============================================================ */

.sota-sk-layout--hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: rgba(26, 31, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.sota-sk-hero-title {
  width: 55%;
  height: 36px;
  border-radius: 8px;
}

.sota-sk-hero-subtitle {
  width: 75%;
  height: 14px;
  border-radius: 6px;
}

.sota-sk-hero-stats {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}

.sota-sk-hero-stat {
  width: 80px;
  height: 32px;
  border-radius: 6px;
}


/* ============================================================
   11. GRID WRAPPER
   ============================================================ */

.sota-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .sota-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sota-grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   12. INLINE SKELETON (showInline)
   ============================================================ */

.sota-sk-inline {
  display: inline-block;
  height: 0.85em;
  vertical-align: middle;
  border-radius: 3px;
  /* width supplied via style attr (40%–80%) */
  min-width: 40px;
}


/* ============================================================
   13. LOADED STATE — fade out skeleton, fade in real content
   ============================================================ */

.sota-loaded > .sota-skeleton-wrap {
  display: none;
}

/* Optional: animate real content in once .sota-loaded is added */
.sota-loaded > *:not(.sota-skeleton-wrap) {
  animation: sota-skeleton-fade-in 220ms var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .sota-loaded > *:not(.sota-skeleton-wrap) {
    animation: none;
  }
}