/* ================================================================
   RETINEL — skeleton.css
   Skeleton screen loading states.
   Import only on pages with live data / loading states.
   Usage: <link rel="stylesheet" href="/styles/skeleton.css">
================================================================ */

/* ── SHIMMER ANIMATION ── */
@keyframes retinel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── BASE SKELETON ATOM ── */
.sk {
  display: block;
  background-color: rgba(255,255,255,0.04);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0)    100%
  );
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: retinel-shimmer 1.5s infinite linear;
  border-radius: 2px;
}

/* ── ATOM CLASSES ── */

/* Thin tracked-out eyebrow placeholder — 8px */
.sk-eyebrow {
  height: 8px;
  width: 72px;
  border-radius: 2px;
}

/* Header text placeholder — Cormorant Garamond scale */
.sk-title {
  height: 22px;
  border-radius: 2px;
}
.sk-title.lg {
  height: 28px;
}

/* Body copy lines — stack multiple, last at 60% */
.sk-body-line {
  height: 12px;
  border-radius: 2px;
}
.sk-body-line.short {
  width: 60%;
}

/* Key performance number block — boxy, uppercase-proportioned */
.sk-metric {
  height: 40px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Icon / avatar placeholder */
.sk-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Horizontal rule separator — no shimmer */
.sk-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 14px 0;
  animation: none;
  border-radius: 0;
}

/* ── LAYOUT HELPERS ── */

.sk-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── TOGGLE PATTERN ── */
/* Add .is-loading to parent to show skeletons, remove when data ready */

.is-loading .sk            { display: block; }
.is-loading .live-content  { display: none;  }

.resolution-grid:not(.is-loading) .sk           { display: none;  }
.resolution-grid:not(.is-loading) .live-content { display: block; }