/* Zirva – pass 7: group page, new grade, quiz results, adding students.
   Fewer lines and dots: one fact per line, rows are tiles, no hairline dividers. */

/* ---------- attached work: a tile instead of a ruled row ---------- */
.prev{margin-top:16px;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border:0;border-radius:14px;background:var(--color-surface-sunken);font:var(--type-label-md);color:var(--color-text)}
.prev>i{font-size:22px;color:var(--color-text-secondary)}
.prev span{margin-left:auto;font:var(--type-body-sm);color:var(--color-text-secondary)}
.prev .chev{margin-left:4px;font-size:18px;color:var(--color-text-tertiary)}

/* ---------- teacher speech bubble (group feed, grade, returned work) ---------- */
.say{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:end;margin-top:14px}
.say .av{width:40px;height:40px}
.say-b{position:relative;padding:14px 16px 12px;border-radius:20px 20px 20px 6px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border),inset 0 -3px 0 var(--color-surface-sunken)}
.say-b p{font:var(--type-body-md);color:var(--color-text)}
.say-b time{display:block;margin-top:6px;font:var(--type-caption);color:var(--color-text-secondary)}
.say-n{grid-column:2;font:var(--type-label-sm);color:var(--color-text-secondary);margin:6px 0 -8px 6px}
.say-pin{position:absolute;top:-9px;right:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);color:var(--color-text);font-size:14px;box-shadow:0 0 0 3px var(--color-canvas)}
.say-file{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--color-surface-sunken);font:var(--type-label-md);color:var(--color-text)}
.say-file i{font-size:20px;color:var(--color-danger)}

/* ---------- student group page ---------- */
.gx{position:relative;padding:22px 22px 20px;border-radius:28px;background:var(--gt);color:var(--gi);overflow:hidden}
.gx::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:var(--g);opacity:.1}
.gx-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--g);color:#fff;font-size:28px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.gx h1{margin-top:18px;font:600 30px/36px var(--font-family-display);letter-spacing:-.02em;color:var(--color-text)}
.gx-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.gx-next{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--color-surface);font:var(--type-label-md);color:var(--color-text)}
.gx-next i{font-size:18px;color:var(--gi)}
.mates{display:flex;align-items:center}
.mates .av{width:32px;height:32px;font-size:11px;box-shadow:0 0 0 2px var(--gt)}
.mates .av+.av{margin-left:-8px}
.mates b{margin-left:8px;font:var(--type-label-md);color:var(--gi)}
.gx-task{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px;border-radius:20px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken);color:var(--color-text);text-decoration:none}
.gx-tic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--color-accent);font-size:24px;color:var(--color-text)}
.gx-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gx-tt b{font:600 17px/22px var(--font-family-ui)}
.gx-tt small{font:var(--type-body-sm);color:var(--color-text-secondary)}
.gx-task .btn{flex:none;pointer-events:none}
.gx-feed{margin-top:28px}
.gx-mats{display:flex;flex-direction:column;gap:8px}
.gx-mats .mat{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border-radius:14px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);font:var(--type-label-md);color:var(--color-text)}
.gx-mats .mat i{font-size:22px}
.gx-grid{display:grid;gap:0 40px}
@media (min-width:900px){
  .gx-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .gx-grid .sec-h:first-child{margin-top:0}
}

/* ---------- new grade ---------- */
.gn{display:flex;flex-direction:column}
.gn-top{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:4px}
.gn-ring{width:168px;height:168px}
.gn-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gn-ring circle{fill:none;stroke-width:14;stroke-linecap:round}
.gn-ring .trk{stroke:var(--color-surface-sunken)}
.gn-ring .val{stroke:var(--color-success);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v));animation:gnfill 900ms var(--ease-out) 150ms both}
@keyframes gnfill{from{stroke-dashoffset:100}}
.gn-num{position:relative;display:flex;align-items:baseline;gap:4px}
.gn-num b{font:600 64px/1 var(--font-family-display);letter-spacing:-.03em;color:var(--color-success);font-variant-numeric:tabular-nums}
.gn-num span{font:500 20px/1 var(--font-family-ui);color:var(--color-text-secondary)}
.gn-ring .burst i{animation-name:ray2;--rd:1000ms}
@keyframes ray2{0%{opacity:0;transform:rotate(var(--a)) translateY(-78px) scaleY(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-112px) scaleY(1)}}
.gn h1{margin-top:20px;font:600 22px/28px var(--font-family-ui);letter-spacing:-.01em}
.up-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--color-success-tint);color:var(--color-success);font:var(--type-label-md)}
.gn .say{margin-top:28px}
.gn .btn-block{margin-top:24px}

/* ---------- teacher quiz results ---------- */
.qx-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.qx-k{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border),inset 0 -4px 0 var(--color-surface-sunken)}
.qx-k b{display:flex;align-items:baseline;gap:4px;font:600 30px/1 var(--font-family-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qx-k b small{font:500 16px/1 var(--font-family-ui);color:var(--color-text-secondary)}
.qx-k>span{font:var(--type-body-sm);color:var(--color-text-secondary)}
.qx-k.up b{color:var(--color-success)}
.qx-k.up b i{font-size:22px;align-self:center}
.qx-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qb{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:0;padding:16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);overflow:hidden}
.qb-l{display:flex;align-items:center;gap:6px;font:var(--type-label-md);color:var(--c)}
.qb-l i{font-size:18px}
.qb>b{font:600 32px/1 var(--font-family-display);letter-spacing:-.02em}
.qb .mates .av{box-shadow:0 0 0 2px var(--color-surface)}
.qb .mates b{color:var(--color-text-secondary)}
.qb::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--c);transform-origin:left;transform:scaleX(var(--s));animation:qbgrow 700ms var(--ease-out) 300ms both}
@keyframes qbgrow{from{transform:scaleX(0)}}
.qb.ok{--c:var(--color-success)} .qb.mid{--c:var(--color-warning)} .qb.low{--c:var(--color-danger)} .qb.none{--c:var(--color-text-secondary)}
.qb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.qq{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.qq+.qq{margin-top:10px}
.qn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--color-surface-sunken);font:600 15px/1 var(--font-family-display)}
.qq p{font:500 16px/24px var(--font-family-ui);color:var(--color-text)}
.qwa{display:flex;align-items:center;gap:8px;margin-top:6px;font:var(--type-body-sm)!important}
.qwa s{color:var(--color-danger)}
.qwa b{color:var(--color-success);font-weight:600}
.qwa i{color:var(--color-text-tertiary)}
.qp{display:flex;flex-direction:column;align-items:flex-end;font:var(--type-caption);color:var(--color-text-secondary)}
.qp b{font:600 20px/24px var(--font-family-display);color:var(--color-warning)}
.qx-cta{margin-top:28px}
@media (max-width:899px){ .qx-cta{width:100%} .qx-k{padding:14px 12px} .qx-k b{font-size:26px} }
@media (min-width:900px){ .qx-bands{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- add students ---------- */
.ad-seg{margin-top:20px}
.ad-grid{display:grid;gap:16px;margin-top:16px}
@media (min-width:900px){ .ad-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} }
.ad-area{min-height:168px;padding:16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-border-strong);font:500 15px/26px var(--font-family-ui);color:var(--color-text);white-space:pre-line}
.ad-area mark{background:none;color:var(--color-danger);text-decoration:underline wavy;text-underline-offset:4px}
.ad-hint{display:block;margin-top:8px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.ad-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ad-list li{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);transition:box-shadow 200ms ease}
.ad-st{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:18px}
.ad-list .ok .ad-st{background:var(--color-success-tint);color:var(--color-success)}
.ad-list .known .ad-st{background:var(--color-info-tint);color:var(--color-info)}
.ad-list .fix{box-shadow:inset 0 0 0 2px var(--color-danger)}
.ad-list .fix .ad-st{background:var(--color-danger-tint);color:var(--color-danger)}
.ad-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ad-nm b{font:var(--type-label-lg)}
.ad-nm small{font:var(--type-body-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}
.ad-list .fix small{color:var(--color-danger)}
.ad-list .just-fixed{animation:pop 380ms var(--ease-spring) both}
.ad-foot{margin-top:20px}
@media (max-width:899px){ .ad-foot .btn{width:100%} }
.adone h1{margin-top:28px;font:600 28px/34px var(--font-family-ui);letter-spacing:-.015em}
.adone .btn{margin-top:28px}
.adone .link{margin-top:8px}
.ad-stack{display:flex;justify-content:center}
.ad-stack .av{width:64px;height:64px;font-size:20px;box-shadow:0 0 0 4px var(--color-canvas)}
.ad-stack .av+.av{margin-left:-14px}

@media (prefers-reduced-motion:reduce){
  .gn-ring .val,.qb::after,.ad-list .just-fixed{animation:none}
}

/* fixes after first look */
.prev,.say-file,.gx-mats .mat,.gx-task{text-decoration:none}
.mates .av{width:34px;height:34px;font-size:11px;letter-spacing:-.02em}
.mates .av+.av{margin-left:-6px}
.ad-nm b{color:var(--color-text)}
.mates .av{font-size:12px}
.gx-grid .sec-h a{min-width:48px;padding:0 6px;justify-content:flex-end}