/* Q800 — loading skeletons, ONE canonical pattern (SECTION4-REDLINES §4.1). Block fill --surface-sunken;
   radius mirrors the element it replaces; geometry mirrors the loaded layout 1:1 so load causes zero shift
   (CLS). Shimmer = one overlay sweep, white at 40%, --dur-skeleton linear infinite, background-position only
   (no transforms). Reduced-motion: shimmer OFF, static blocks. Announce in markup: container aria-busy="true"
   + one sr-only role="status" "Loading". NEVER spinners, never pulsing opacity. */

.sk{
  position:relative;overflow:hidden;
  background:var(--surface-sunken,#EFECE2);
  border-radius:var(--r,12px);
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.40) 50%,transparent 100%);
  background-size:200% 100%;background-repeat:no-repeat;
  animation:sk-shimmer var(--dur-skeleton,1.4s) linear infinite;
}
@keyframes sk-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* radius variants — mirror the element being replaced */
.sk--pill{border-radius:var(--r-pill,999px)}
.sk--lg{border-radius:var(--r-lg,16px)}
.sk--xl{border-radius:var(--r-xl,22px)}
.sk--circle{border-radius:50%}

/* atomic block sizes */
.sk-line{height:14px;width:100%}
.sk-line--60{width:60%}
.sk-line--40{width:40%}
.sk-num{height:26px;width:64px;border-radius:var(--r,12px)}
.sk-chip{height:24px;width:84px;border-radius:var(--r-pill,999px)}
.sk-check{height:22px;width:22px;border-radius:var(--r-sm,7px)}
.sk-avatar{height:44px;width:44px;border-radius:50%}

/* row-card skeleton (voters / CRM / tasks): check square + 60% line + 40% line + chip pill */
.sk-rowcard{display:flex;gap:14px;align-items:flex-start;background:var(--surface,#fff);border:1.5px solid var(--line,#E3E7ED);border-radius:var(--r-lg,16px);padding:16px}
.sk-rowcard__body{flex:1 1 auto;display:flex;flex-direction:column;gap:10px}

/* person/card skeleton (explore / leaders / team): circle + 2 lines */
.sk-person{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}

/* tile skeleton (impact / stats / pulse): numeral-height block over a short label */
.sk-tile{background:var(--surface,#fff);border:1.5px solid var(--tile-bd,var(--line,#E3E7ED));border-radius:var(--r,12px);padding:14px;display:flex;flex-direction:column;gap:8px}

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

@media (prefers-reduced-motion:reduce){
  .sk::after{animation:none;display:none}
}