/* Zirva – moments, set 2. Same motion vocabulary as app7 (zpop, rise, drawcheck, swipe.anim). */

/* the wave mark draws itself */
.m-mark{width:96px;height:66px;color:var(--color-text)}
.m-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 900ms var(--ease-out) 100ms forwards}
.m-mark.sm{width:72px;height:50px}

/* icon in a soft disc (time's up, sent) */
.m-disc{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface-sunken);margin:0 auto}
.m-disc i{font-size:44px;color:var(--color-text)}
.m-disc.ink{background:var(--color-text)}
.m-disc.ink i{color:var(--color-text-inverse)}
.m-fly i{animation:fly 620ms var(--ease-out) 250ms both}
@keyframes fly{from{opacity:0;transform:translate(-22px,22px) scale(.85)}to{opacity:1;transform:none}}

/* left-aligned moment body (welcome, recap) */
.moment .center.m-left{text-align:left;align-items:flex-start}
.m-left h1{margin-top:28px}
.moment .m-left .human{max-width:34ch}

/* joined-group row */
.m-row{width:100%;display:flex;align-items:center;gap:14px;margin-top:28px;padding:16px;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);text-align:left}
.m-row .av{width:44px;height:44px;flex:none}
.m-row b{display:block;font:600 16px/22px var(--font-family-ui)}
.m-row span.s{display:block;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:2px}

/* week recap: days tick in one by one */
.m-week{width:100%;margin-top:28px}
.m-week .w2-days .dd{animation:pop 380ms var(--ease-spring) both}
.m-week .w2-days div:nth-child(1) .dd{animation-delay:500ms}
.m-week .w2-days div:nth-child(2) .dd{animation-delay:580ms}
.m-week .w2-days div:nth-child(3) .dd{animation-delay:660ms}
.m-week .w2-days div:nth-child(4) .dd{animation-delay:740ms}
.m-week .w2-days div:nth-child(5) .dd{animation-delay:820ms}
.m-week .w2-days div:nth-child(6) .dd{animation-delay:900ms}
.m-week .w2-days div:nth-child(7) .dd{animation-delay:980ms}
.m-vs{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font:var(--type-label-md);color:var(--color-success)}

/* time's up facts */
.m-facts{width:100%;margin-top:32px;border-top:1px solid var(--color-border)}
.m-facts div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border);font:var(--type-body-md)}
.m-facts span{color:var(--color-text-secondary)}
.m-facts b{font:600 16px/22px var(--font-family-ui);font-variant-numeric:tabular-nums}

/* offline toast slides down from the top */
.m-toast{position:relative;z-index:5;width:calc(100% - 32px);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--color-text);color:var(--color-text-inverse);box-shadow:var(--elevation-e2);animation:drop 420ms var(--ease-out) 300ms both;max-width:520px;margin:8px auto 0}
.m-toast i{font-size:22px;flex:none;margin-top:1px}
.m-toast b{display:block;font:600 15px/20px var(--font-family-ui)}
.m-toast span{display:block;font:var(--type-body-sm);opacity:.78;margin-top:2px}
@keyframes drop{from{opacity:0;transform:translateY(-120%)}to{opacity:1;transform:none}}
.qz.offline{position:relative}
.m-saved{display:inline-flex;align-items:center;gap:6px;font:var(--type-label-sm);color:var(--color-text-secondary)}

/* grade arrived */
.m-score{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.m-score b{font:600 64px/1 var(--font-family-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.m-score span{font:500 22px/1 var(--font-family-ui);color:var(--color-text-secondary)}
.m-praise{font:600 20px/28px var(--font-family-ui);margin-top:12px}

/* teacher first run: three steps */
.m-steps{width:100%;margin-top:28px;display:flex;flex-direction:column;gap:2px;text-align:left}
.m-step{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--color-border)}
.m-step:first-child{border-top:1px solid var(--color-border)}
.m-step .n{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--font-family-ui);background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.m-step.now .n{background:var(--color-accent);color:var(--color-on-accent)}
.m-step b{display:block;font:600 16px/22px var(--font-family-ui)}
.m-step.later b{color:var(--color-text-secondary)}
.m-step span.s{display:block;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .m-mark path{animation:none;stroke-dashoffset:0}
  .m-fly i,.m-week .w2-days .dd,.m-toast{animation:fade 200ms ease both}
}

/* chosen, not yet checked */
.ans.sel{box-shadow:inset 0 0 0 2px var(--color-text);transform:translateY(2px)}
.ans.sel .k{background:var(--color-text);color:var(--color-text-inverse)}