/* Zirva – pass 6: loading and empty states. */

/* ---------- skeletons: same shapes as the real content, one soft sweep ---------- */
.sk{position:relative;overflow:hidden;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:sweep 1400ms var(--ease-out) var(--sd,0ms) infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.sk-l{display:block;height:12px;border-radius:6px;background:var(--color-surface-sunken)}
.sk-l+.sk-l{margin-top:10px}
.sk-xl{height:26px;border-radius:8px}
.sk-s{height:10px}
.sk-card{padding:20px;display:flex;flex-direction:column}
.sk-week{margin-top:16px;padding:18px 20px}
.sk-dots{display:flex;justify-content:space-between;margin-top:16px}
.sk-dots i{width:36px;height:36px;border-radius:50%;background:var(--color-surface-sunken)}
.sk-rows{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.sk-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px}
.sk-ic{width:44px;height:44px;border-radius:12px;background:var(--color-surface-sunken)}

/* ---------- quiz not open yet: a calm countdown ---------- */
.cd{display:flex;justify-content:center;gap:10px;margin-top:28px}
.cd div{min-width:84px;padding:14px 10px 12px;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken);display:flex;flex-direction:column;align-items:center;gap:4px}
.cd b{font:600 40px/1 var(--font-family-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd span{font:var(--type-label-sm);color:var(--color-text-secondary)}
.remind[aria-pressed="true"]{background:var(--color-success);box-shadow:none}
.remind i{margin-right:8px}

/* ---------- quiet empty states inside a shell ---------- */
.alldone.quiet{padding-top:72px;margin:0 auto;max-width:420px}
.alldone.quiet h2{margin-top:24px}
.bellrest i{transform-origin:50% 8px;animation:rest 900ms var(--ease-out) 500ms both}
@keyframes rest{0%{transform:rotate(0)}25%{transform:rotate(14deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(5deg)}100%{transform:rotate(0)}}

/* empty gradebook: the grid it will become, waiting */
.gb-ghost{display:grid;grid-template-columns:repeat(4,28px);gap:6px;padding:16px;border-radius:20px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.gb-ghost i{width:28px;height:20px;border-radius:5px;background:var(--color-surface-sunken)}
.gb-ghost i.hot{background:var(--color-accent);animation:pop 420ms var(--ease-spring) 700ms both}

@media (prefers-reduced-motion:reduce){
  .sk::after,.bellrest i,.gb-ghost i.hot{animation:none}
}
.d-main .sk-card{margin-top:20px}
.sk-side{padding:20px;display:flex;flex-direction:column}
.sk-side+.sk-side{margin-top:16px}
.d-side .sk-side:first-child{margin-top:0}