/* ==========================================================================
   SKELETON placeholders (Destiny-style): muted grey blocks with a diagonal
   shimmer, shown where a list or thumbnail is still arriving. One system:
     .skel            base block: tone + sweep
     .skel-card       card shell (add .skel too: the shell sweeps, its bars stay still)
     .skel-line       text line; width from --w, or the .sm / .md helpers
     .skel-thumb      square thumbnail
     .skel-dot        round marker (lobby rows)
     .skel-row        a list row made of skeleton bits (use with .lp in the lobby)
     .skel-ld         an <img> still loading. Its onload drops the class, so the
                      real picture replaces the shimmer (js/iconlib.js, skel option)
   The sweep moves a diagonal highlight band across with background-position over
   1.4 s, linear, infinite. prefers-reduced-motion keeps the flat grey and stops it.
   Loads last (after splash.css) so it can refine rows it shares a class with.
   ========================================================================== */
:root {
  --skel-base: rgba(255, 255, 255, .06);
  --skel-hi: rgba(255, 255, 255, .14);
  --skel-bar: rgba(0, 0, 0, .28);
  --skel-edge: var(--line2, rgba(255, 255, 255, .08));
  --skel-r: 12px;
}

.skel, .skel-line, .skel-thumb, .skel-dot, .skel-ld {
  background-color: var(--skel-base);
  background-image: linear-gradient(105deg, transparent 0 40%, var(--skel-hi) 50%, transparent 60% 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  animation: skelSweep 1.4s linear infinite;
}
@keyframes skelSweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.skel-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 150px; padding: 16px; border-radius: var(--skel-r); border: 1px solid var(--skel-edge); }
.skel-line { display: block; height: 10px; width: var(--w, 100%); border-radius: 5px; }
.skel-line.sm { --w: 40%; } .skel-line.md { --w: 68%; }
.skel-card > .skel-line { background-color: var(--skel-bar); background-image: none; animation: none; }
.skel-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--skel-r); }
.skel-dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.skel-row .skel-line { flex: 1 1 auto; height: 12px; }
.skel-row .skel-line.sm { flex: 0 0 22%; margin-left: auto; }

/* an image that is still loading: the shimmer shows through until its load event removes .skel-ld */
.skel-ld { border-radius: var(--skel-r); }

@media (prefers-reduced-motion: reduce) {
  .skel, .skel-line, .skel-thumb, .skel-dot, .skel-ld { animation: none; background-image: none; }
}