/* Loading skeletons — grey blocks shaped like the content they stand in for, with a slow sheen crossing them.
   They stand in only while the FIRST data of a page is missing; a refresh never paints them again.
   Blocks:  .sk (base) + a shape: .sk-t text line · .sk-h heading · .sk-c circle · .sk-pill · .sk-btn · .sk-card · .sk-chart
   Layout:  .sk-row (a table row: grid, pass columns through style="grid-template-columns:…") · .sk-rows (rows fade down the list)
            .sk-stack (vertical gap) · .sk-line (horizontal gap) · .sk-wN width in % (10…90) · .sk-end (aligns to the row's end)
   Reveal:  add .sk-in to the real content's container when it replaces a skeleton (a short fade so the swap reads as one motion). */
.sk{position:relative;display:block;border-radius:6px;background:var(--sk-a,rgba(255,255,255,.055));overflow:hidden;color:transparent!important;pointer-events:none;user-select:none;flex:none}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,var(--sk-b,rgba(255,255,255,.07)) 50%,transparent 75%);transform:translateX(-100%);animation:skSheen 1.9s ease-in-out infinite}
@keyframes skSheen{to{transform:translateX(100%)}}
.sk-t{height:12px;border-radius:4px;width:60%} .sk-t.sm{height:10px} .sk-t.lg{height:15px}
.sk-h{height:22px;border-radius:5px;width:40%} .sk-h.lg{height:34px}
.sk-c{border-radius:50%;width:28px;height:28px} .sk-c.sm{width:20px;height:20px} .sk-c.lg{width:40px;height:40px}
.sk-pill{height:24px;width:72px;border-radius:999px} .sk-btn{height:34px;width:110px;border-radius:8px}
.sk-card{border-radius:12px;min-height:88px;width:100%} .sk-chart{border-radius:10px;min-height:220px;width:100%}
.sk-w10{width:10%} .sk-w20{width:20%} .sk-w30{width:30%} .sk-w40{width:40%} .sk-w50{width:50%} .sk-w60{width:60%} .sk-w70{width:70%} .sk-w80{width:80%} .sk-w90{width:90%} .sk-w100{width:100%}
.sk-row{display:grid;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hairline,var(--line,rgba(255,255,255,.06)));min-height:44px}
.sk-row:last-child{border-bottom:0} .sk-row .sk-end{justify-self:end}
.sk-rows>*:nth-child(n+2){opacity:.92} .sk-rows>*:nth-child(n+4){opacity:.8} .sk-rows>*:nth-child(n+6){opacity:.66} .sk-rows>*:nth-child(n+8){opacity:.5} .sk-rows>*:nth-child(n+10){opacity:.36} .sk-rows>*:nth-child(n+12){opacity:.24}
.sk-stack{display:flex;flex-direction:column;gap:8px} .sk-line{display:flex;align-items:center;gap:10px}
.sk-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.sk-in{animation:skIn .24s ease both} @keyframes skIn{from{opacity:.35}to{opacity:1}}
/* the two palettes: the deck design is a touch lighter than the page, the light theme a touch darker */
html[data-design=m2] .sk{--sk-a:#141418;--sk-b:#1f1f25}
html[data-theme=light]:not([data-design=m2]) .sk,body.light .sk{--sk-a:rgba(0,0,0,.06);--sk-b:rgba(0,0,0,.04)}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none} .sk-in{animation:none}}