/* Yolt v11 · D-N67-polish-bundle Item 2 — uk-skeleton CSS shimmer (D-N67c followup #5).
 *
 * Loading placeholders с oklch-tokenized shimmer animation. Used as page-level
 * fallback while data provider's refresh() resolves.
 *
 * Variants:
 *   .uk-skeleton          — base placeholder
 *   .uk-skeleton-host     — container slot (defines layout context)
 *   .uk-skeleton-text     — single line of text (~16px)
 *   .uk-skeleton-card     — KPI scorecard placeholder
 *   .uk-skeleton-table-row — row у traffic-tbl
 *   .uk-skeleton-chart    — line/bar chart area
 *
 * Tokens used (oklch only, ZERO hex):
 *   --bg-1, --bg-2, --bg-3 (gradient stops)
 *   --line-soft (border-radius accents)
 *   --space-* (gap tokens)
 *
 * Linked from pwa/shell.html alongside skeletons.css. Coexist: legacy file uses
 * .skel-* prefix; this file uses canonical .uk-skeleton-* per UIKit nomenclature.
 */

/* ════════ §1 base + shimmer animation ════════ */

@keyframes uk-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.uk-skeleton {
  display: block;
  position: relative;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-1) 0%,
    color-mix(in oklch, var(--bg-2) 70%, var(--bg-1)) 50%,
    var(--bg-1) 100%
  );
  background-size: 200% 100%;
  animation: uk-skeleton-shimmer 1.6s linear infinite;
  pointer-events: none;
  user-select: none;
}

/* Host container — vertical stack для multiple skeletons. */
.uk-skeleton-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 12px);
}

/* ════════ §2 text variants ════════ */

.uk-skeleton-text {
  height: 14px;
  width: 100%;
  border-radius: 3px;
}

.uk-skeleton-text--sm    { height: 10px; width: 60%; }
.uk-skeleton-text--lg    { height: 24px; width: 50%; }
.uk-skeleton-text--xl    { height: 32px; width: 35%; }
.uk-skeleton-text--full  { width: 100%; }
.uk-skeleton-text--short { width: 30%; }

/* ════════ §3 KPI card placeholder ════════ */

.uk-skeleton-card {
  height: 110px;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--bg-1) 0%,
    color-mix(in oklch, var(--bg-2) 65%, var(--bg-1)) 50%,
    var(--bg-1) 100%
  );
  background-size: 200% 100%;
  animation: uk-skeleton-shimmer 1.6s linear infinite;
  border: 1px solid var(--line-soft, color-mix(in oklch, var(--bg-2) 80%, transparent));
}

/* ════════ §4 table row placeholder ════════ */

.uk-skeleton-table-row {
  height: 38px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-1) 0%,
    color-mix(in oklch, var(--bg-2) 70%, var(--bg-1)) 50%,
    var(--bg-1) 100%
  );
  background-size: 200% 100%;
  animation: uk-skeleton-shimmer 1.6s linear infinite;
  margin-bottom: var(--space-xs, 4px);
}

.uk-skeleton-table-row + .uk-skeleton-table-row {
  margin-top: var(--space-xs, 4px);
}

/* ════════ §5 chart placeholder ════════ */

.uk-skeleton-chart {
  height: 240px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-1) 0%,
    color-mix(in oklch, var(--bg-2) 60%, var(--bg-1)) 50%,
    var(--bg-1) 100%
  );
  background-size: 200% 100%;
  animation: uk-skeleton-shimmer 1.8s linear infinite;
  border: 1px solid var(--line-soft, color-mix(in oklch, var(--bg-2) 80%, transparent));
}

/* ════════ §6 a11y · reduced motion respects user preference ════════ */

@media (prefers-reduced-motion: reduce) {
  .uk-skeleton,
  .uk-skeleton-card,
  .uk-skeleton-table-row,
  .uk-skeleton-chart {
    animation: none;
    background: var(--bg-2);
    opacity: 0.65;
  }
}