/* Class work (v11-classwork.js): pieces of work in a class, each / shared / groups. */
.cw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px}
.cw-head p{margin:0}
.cw-empty .btn{margin-top:6px}
.cw-piece{padding:16px 18px;margin:0 0 14px}
.cw-piece-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cw-piece-head h3{margin:0 0 6px;font-size:16px}
.cw-tags{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:12.5px;color:var(--muted,#5b6878);align-items:center}
.cw-tags>span:not(.cw-type)::before{content:"·";margin-right:10px;opacity:.6}
.cw-tags>.cw-mode::before{display:none}
.cw-type{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line2,#eef2f8);color:var(--text,#10213c)}
.cw-type.t-qip{background:color-mix(in srgb,#6d4fd8 13%,var(--surface,#fff));color:#4b36a8}
.cw-type.t-audit{background:color-mix(in srgb,#00a99d 14%,var(--surface,#fff));color:#00776e}
.cw-type.t-deal{background:color-mix(in srgb,#d9822b 15%,var(--surface,#fff));color:#9a5714}
.cw-type.t-custom{background:color-mix(in srgb,#d64f86 13%,var(--surface,#fff));color:#a32f61}
.cw-mode{font-weight:600;color:var(--text,#10213c)}
.cw-brief{margin:10px 0 0;white-space:pre-wrap;color:var(--text,#10213c);font-size:14px;line-height:1.5}
.cw-count{margin:12px 0 6px;font-size:13px;color:var(--muted,#5b6878)}
.cw-roster{display:grid;gap:2px;max-height:420px;overflow:auto}
.cw-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,1fr) auto;align-items:center;gap:10px;padding:6px 4px;border-top:1px solid var(--line,#e3e8ef)}
.cw-who{display:flex;flex-direction:column;min-width:0}
.cw-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-who small{color:var(--muted,#5b6878)}
.cw-prog{display:flex;align-items:center;gap:8px;min-width:0}
.cw-bar{flex:1;max-width:160px;height:6px;border-radius:99px;background:var(--line2,#eef2f8);overflow:hidden}
.cw-bar i{display:block;height:100%;background:var(--accent,#1e86c8);border-radius:inherit}
.cw-prog small{color:var(--muted,#5b6878);font-variant-numeric:tabular-nums}
.cw-shared{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:12px}
.cw-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0 10px}
.cw-group{border:1px solid var(--line,#e3e8ef);border-radius:12px;padding:10px 12px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:8px}
.cw-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cw-group ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px}
.cw-group li{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cw-move{font-size:12px;max-width:110px;padding:2px 4px;border-radius:6px;border:1px solid var(--line,#e3e8ef);background:var(--surface,#fff);color:var(--text,#10213c)}
.cw-group .btn{align-self:flex-start}
.cw-list{display:grid;gap:0}
.cw-mine .cw-piece-head .btn{flex:none}
.cw-mates{margin:10px 0 0;font-size:13.5px;color:var(--muted,#5b6878)}
.cw-form .cw-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px}
.cw-form .cw-src{margin-top:6px}
.cw-form small{color:var(--muted,#5b6878);font-weight:400}
.cls-start small{width:100%;color:var(--muted,#5b6878);font-weight:400;margin-left:26px}
@media (max-width:640px){
  .cw-row{grid-template-columns:1fr auto}
  .cw-row .cw-prog{grid-column:1/-1}
  .cw-head{flex-direction:column;align-items:flex-start}
}
.cw-form [hidden]{display:none!important}
.cw-group select.cw-move{height:auto!important;min-height:0!important;width:auto!important;max-width:110px;font-size:12px!important;padding:2px 6px!important;margin:0!important;line-height:1.3}
.cw-group li{min-height:26px}
/* step 2: parts and own topic */
.cw-parts{margin-top:4px}
.cw-acts{display:flex;gap:6px;align-items:center;flex:none}
.cw-focus{margin:0 0 12px}
/* step 3: comments on class work */
.cw-cbadge{display:inline-block;margin-right:6px;font-size:11.5px;font-weight:750;padding:2px 8px;border-radius:999px;background:#fde8ef;color:#a3214f;white-space:nowrap}
.cw-gacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cw-waiting{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:#fff4dc;color:#7a5200;font-size:13.5px}
.cw-pcomments{padding:14px 16px;margin:0 0 14px;border-left:4px solid #ed0f68}
.cw-pcomments h3{margin:0 0 8px;font-size:16px}
.cw-pcomments h3 span{font-size:12px;font-weight:700;color:#a3214f;margin-left:6px}
.cw-pc{border-top:1px solid var(--line,#e3e8ef);padding:8px 0}
.cw-pc.fixed{opacity:.75}
.cw-pc-meta{margin:0;font-size:12.5px;color:var(--muted,#5b6878)}
.cw-pc-part{display:inline-block;font-weight:750;font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--line2,#eef2f8);margin-right:4px}
.cw-pc-body{margin:3px 0;white-space:pre-wrap}
.cw-pc-reply{padding-left:12px;border-left:2px solid var(--line,#e3e8ef)}
.cw-pc-acts{display:flex;gap:6px;margin:4px 0 0}
.cw-pc-replyform{display:grid;gap:6px;margin-top:6px}
.cw-pc-replyform[hidden]{display:none}
.cw-pc-replyform textarea{font:inherit;padding:8px;border:1px solid var(--line,#d4dde8);border-radius:8px;background:var(--surface,#fff);color:inherit}
/* step 4: steps per type */
.cw-dots{display:inline-flex;gap:3px;flex-wrap:wrap;align-items:center;margin-right:8px}
.cw-dots i{width:9px;height:9px;border-radius:3px;background:var(--line2,#e6ecf3);border:1px solid var(--line,#d9e1ea)}
.cw-dots i.on{background:var(--accent,#1e86c8);border-color:var(--accent,#1e86c8)}
.cw-sum{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 6px;font-size:13.5px;color:var(--muted,#5b6878)}
.cw-sum b{color:var(--text,#10213c);font-size:15px}
.cw-stuck{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;font-size:12.5px}
.cw-stuck>b{color:var(--muted,#5b6878);font-weight:650;margin-right:2px}
.cw-stuck span{padding:2px 9px;border-radius:999px;background:#fff4dc;color:#7a5200}
.cw-stuck em{font-style:normal;font-weight:700;margin-left:3px}
.cw-group>.cw-dots{margin:0}
.cw-mine-prog{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--muted,#5b6878)}

/* "Add class work", redone (F2, 5 Oct): steps, cards, a colour per type, chips */
.cw-new .modal-body{display:grid;gap:18px}
.cw-sec{display:grid;gap:10px}
.cw-sec[hidden]{display:none!important}
.cw-step{display:flex;align-items:center;gap:10px}
.cw-step>div{display:grid;gap:1px}
.cw-step b{font-size:14.5px;color:var(--text,#10213c)}
.cw-step small{font-size:12.5px;color:var(--muted,#5b6878);font-weight:400}
.cw-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12.5px;font-weight:800;color:#fff;background:var(--accent,#1e86c8);box-shadow:0 4px 10px -5px var(--accent,#1e86c8)}
.cw-num:empty{width:10px;height:10px;box-shadow:none;margin:0 8px}
.cw-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.cw-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cw-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cw-form .cw-card{position:relative;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;
  padding:12px 13px;border-radius:14px;border:1.5px solid var(--line,#e3e8ef);background:var(--surface,#fff);cursor:pointer;
  transition:border-color .5s cubic-bezier(.16,.84,.3,1),box-shadow .5s cubic-bezier(.16,.84,.3,1),transform .5s cubic-bezier(.16,.84,.3,1)}
.cw-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px -10px rgba(16,32,58,.35)}
.cw-card input{position:absolute!important;opacity:0;width:1px!important;height:1px!important;pointer-events:none;margin:0}
.cw-card>b{font-size:13.5px;font-weight:700;color:var(--text,#10213c);align-self:end}
.cw-card>small{grid-column:2;font-size:12px;line-height:1.4;color:var(--muted,#5b6878);font-weight:400}
.cw-card>.cw-ico,.cw-card>.cw-tdot{grid-row:1/3}
.cw-card.on{--k2:var(--k,var(--accent,#1e86c8));border-color:var(--k2);box-shadow:0 0 0 3px color-mix(in srgb,var(--k2) 18%,transparent);background:color-mix(in srgb,var(--k2) 6%,var(--surface,#fff))}
.cw-card:has(input:focus-visible){outline:2px solid var(--accent,#1e86c8);outline-offset:2px}
.cw-card.off{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cw-card[hidden]{display:none!important}
/* the circles */
.cw-tdot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:radial-gradient(circle at 30% 28%,color-mix(in srgb,var(--k) 70%,#fff),var(--k));box-shadow:0 5px 12px -6px var(--k)}
.cw-ico{display:flex;align-items:center;justify-content:center;gap:3px;width:38px;height:38px;border-radius:50%;font-size:16px;font-weight:700;
  color:var(--accent,#1e86c8);background:color-mix(in srgb,var(--accent,#1e86c8) 12%,var(--surface,#fff))}
.cw-ico i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent,#1e86c8)}
.cw-ico i.big{width:18px;height:18px}
.cw-ico i.gap{width:3px;background:none}
.cw-ico.m-group{gap:2px}
.cw-ico.m-group i{width:5px;height:5px}
/* parts as chips in the type's colour */
.cw-chips{display:flex;flex-wrap:wrap;gap:7px}
.cw-form .cw-chip{display:inline-flex!important;cursor:pointer;font-weight:600!important}
.cw-chip input{position:absolute!important;opacity:0;width:1px!important;height:1px!important;pointer-events:none}
.cw-chip span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;border:1.5px solid var(--line,#e3e8ef);
  color:var(--muted,#5b6878);background:var(--surface,#fff);transition:background .5s cubic-bezier(.16,.84,.3,1),color .5s cubic-bezier(.16,.84,.3,1),border-color .5s cubic-bezier(.16,.84,.3,1)}
.cw-chip span::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.cw-chip input:checked+span{color:#fff;background:var(--k,#1e86c8);border-color:var(--k,#1e86c8)}
.cw-chip input:checked+span::before{background:#fff;border-color:#fff}
.cw-chip input:focus-visible+span{outline:2px solid var(--accent,#1e86c8);outline-offset:2px}
/* the rest */
.cw-new .cw-src{margin-top:2px}
.cw-more{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent,#1e86c8) 5%,var(--surface,#fff));border:1px solid var(--line,#e3e8ef)}
.cw-mini{display:block;font-size:13px;margin:0 0 8px}
.cw-form .cw-toggle{display:flex!important;align-items:flex-start;gap:10px;cursor:pointer}
.cw-toggle input{width:auto!important;margin-top:3px}
.cw-toggle span{display:grid;gap:1px}
.cw-num-in input{max-width:110px}
@media (max-width:640px){
  .cw-cards.three,.cw-cards.two{grid-template-columns:1fr}
}
/* F4: the tutor's feedback on the part it is about (student's project page) */
.cw-inplace{margin:8px 0 10px;padding:8px 12px;border-radius:10px;border-left:4px solid #ed0f68;background:color-mix(in srgb,#ed0f68 6%,var(--surface,#fff))}
.cw-inplace.fixed{border-left-color:#1f9d61;background:color-mix(in srgb,#1f9d61 6%,var(--surface,#fff));opacity:.85}
.cw-inplace .cw-pc-meta a{color:var(--accent,#1e86c8);font-weight:650}
.cw-inplace .cw-pc-body{margin:2px 0 0}