/* CivLink skeleton loader, shared by every page on this site.

   Put a <div class="sk" aria-hidden="true"> inside any positioned block (a bar, main, a card)
   and fill it with <i> bones. Each bone takes the page's part coordinates (--x/--y/--w/--h in
   design px, --r for the corner) plus the same L / C / R anchoring classes as the real parts,
   so it sits exactly where the thing it stands in for will appear. skeleton.js fades the
   overlay out once the page's images and fonts are in. */
.sk { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0b0b0c;
      box-shadow: inset 0 0 0 calc(var(--s) * .5) #212222; transition: opacity .25s ease; }
.ready .sk { opacity: 0; }
main .sk { background: #0c0c0c; box-shadow: none; }

.sk i { position: absolute; top: calc(var(--s) * var(--y)); width: calc(var(--s) * var(--w)); height: calc(var(--s) * var(--h));
        border-radius: calc(var(--s) * var(--r, 4)); background: #1a1a1b; overflow: hidden; }
.sk i.M { top: calc(50% + (var(--y) - 390) * var(--s)); }
.sk i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
               background: linear-gradient(90deg, transparent, #27272a, transparent);
               animation: sweep 1.6s ease-in-out infinite; animation-delay: calc(var(--x) / 1440 * .8s); }

/* Stand-in for a soft glow: a faint round haze that breathes instead of a shimmer bar. */
.sk i.glow { border-radius: 50%; background: radial-gradient(closest-side, #12171c, rgba(12, 12, 12, 0)); animation: haze 1.6s ease-in-out infinite; }
.sk i.glow::after { display: none; }

@keyframes sweep { to { transform: translateX(100%); } }
@keyframes haze { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .sk i::after, .sk i.glow { animation: none; } .sk i::after { opacity: 0; } .sk { transition: none; } }