/* Analytics loading skeletons (js/analytics-loading.js): content-shaped placeholders with a shimmer, a racing-stripe
   progress bar and a status line. Colours only from tokens.css. Reduced motion: no shimmer, no sweep, still readable. */
.an-skel{display:grid;gap:14px;margin:4px 0 16px;animation:sk-in .25s ease-out both}
@keyframes sk-in{from{opacity:0}to{opacity:1}}
.an-skel .sk-head{display:grid;gap:8px}
.sk-race{height:4px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.sk-race i{position:absolute;inset:0 auto 0 0;width:38%;border-radius:99px;background:var(--grad-red,var(--primary));
  box-shadow:0 0 12px var(--primary-glow,transparent);animation:sk-race 1.5s cubic-bezier(.45,.05,.35,1) infinite}
.sk-race i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 5px,transparent 5px 10px);
  background-size:14px 14px;animation:pc-stripes .6s linear infinite}
@keyframes sk-race{0%{left:-38%}100%{left:100%}}
.sk-msg{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.9rem}
.sk-msg b{font-weight:600;color:var(--ink)}
.sk-step{color:var(--muted);font-size:.84rem}
.sk-step.in{animation:sk-step .35s ease-out}
@keyframes sk-step{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.an-skel.slow .sk-step{color:var(--ink)}
.sk-dots{display:inline-flex;gap:3px;align-self:center}
.sk-dots i{width:4px;height:4px;border-radius:50%;background:var(--muted);animation:sk-dot 1.2s ease-in-out infinite}
.sk-dots i:nth-child(2){animation-delay:.15s}.sk-dots i:nth-child(3){animation-delay:.3s}
@keyframes sk-dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}

/* placeholder blocks + the shimmer sweep */
.an-skel .sk,.sk-num,.an-skel .sk-cols span,.an-skel .sk-ring{
  --sk-a:var(--raised);--sk-b:color-mix(in srgb,var(--line-2) 70%,var(--raised));
  background:linear-gradient(100deg,var(--sk-a) 30%,var(--sk-b) 50%,var(--sk-a) 70%) 0 0/250% 100%;
  animation:sk-shine 1.6s ease-in-out infinite}
@keyframes sk-shine{from{background-position:120% 0}to{background-position:-120% 0}}
.an-skel .sk{display:block;border-radius:7px;max-width:100%}
.sk-body{display:grid;gap:14px}
.sk-card{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:16px;display:grid;gap:9px;align-content:start;min-width:0}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sk-tiles.three{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sk-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.sk-chart svg{width:100%;height:140px;display:block;margin-top:6px}
.sk-chart .sk-grid{stroke:var(--line);stroke-width:1;fill:none}
.sk-chart .sk-line{fill:none;stroke:var(--line-2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;animation:sk-draw 2.4s ease-in-out infinite}
@keyframes sk-draw{0%{stroke-dashoffset:620}55%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-620}}
.sk-cols{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px;border-bottom:1px solid var(--line)}
.sk-cols span{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;transform-origin:bottom;
  animation:sk-grow 2.2s ease-in-out var(--d) infinite,sk-shine 1.6s ease-in-out infinite}
@keyframes sk-grow{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sk-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.sk-row:first-child{border-top:0}
.sk-row>div{display:grid;gap:6px}
.an-skel .sk-thumb{width:40px;height:54px;border-radius:7px}
.sk-donut{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.an-skel .sk-ring{width:110px;height:110px;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%);
  animation:sk-shine 1.6s ease-in-out infinite,sk-spin 3s linear infinite}
@keyframes sk-spin{to{transform:rotate(360deg)}}
.sk-donut>div{display:grid;gap:8px}
.sk-persona{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center}
.sk-persona>div{display:grid;gap:8px}
.an-skel .sk-avatar{width:56px;height:56px;border-radius:16px}
.sk-num{display:inline-block;width:3.2em;height:.9em;border-radius:6px;vertical-align:middle}

/* reloading over numbers already on screen: the stripe bar runs along the top, the old numbers dim */
#anBody{position:relative}
#anBody.loading::before{content:"";position:absolute;z-index:2;left:0;right:0;top:-8px;height:3px;border-radius:99px;
  background:repeating-linear-gradient(-45deg,var(--primary) 0 6px,color-mix(in srgb,var(--primary) 35%,transparent) 6px 12px);
  background-size:17px 17px;animation:pc-stripes .6s linear infinite}

/* Pit Crew's read while it's coming */
.an-read.loading .sk-lines{display:grid;gap:8px;margin-top:10px}
.an-read.loading .sk-lines .sk{display:block;height:16px;border-radius:7px;
  background:linear-gradient(100deg,var(--raised) 30%,color-mix(in srgb,var(--line-2) 70%,var(--raised)) 50%,var(--raised) 70%) 0 0/250% 100%;
  animation:sk-shine 1.6s ease-in-out infinite}

@media (max-width:560px){
  .sk-tiles{grid-template-columns:1fr 1fr}
  .sk-grid2{grid-template-columns:1fr}
  .sk-donut{grid-template-columns:84px minmax(0,1fr)}
  .an-skel .sk-ring{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
  .an-skel,.an-skel *,.sk-num,#anBody.loading::before,.an-read.loading .sk{animation:none!important}
  .sk-race i{left:0;width:100%;opacity:.5}
  .sk-chart .sk-line{stroke-dashoffset:0}
}