/* ============================================================================
   Varelyno v10 — Classes (v10-class.js) and the tutor's page for one student
   (v10-class-view.js). Violet is the class colour, as it is the QIP's.
   ========================================================================== */
.cls-page{--cv:#6d4fd8;--cv-wash:color-mix(in srgb,#6d4fd8 9%,var(--surface,#fff));padding-bottom:40px}
.cls-muted{color:var(--muted,#6b7a8c);font-size:13px;margin:0}
.cls-note{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,#E07B00 10%,var(--surface,#fff));border:1px solid color-mix(in srgb,#E07B00 30%,var(--line,#e3e8ef));font-size:13.5px}
.cls-fine{margin:18px 0 0;font-size:12.5px;color:var(--muted,#6b7a8c)}
.cls-h2{font-size:16px;margin:26px 0 10px}
.cls-lead{margin:0 0 14px;font-size:14.5px}

/* the list of classes */
.cls-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cls-card{all:unset;box-sizing:border-box;display:grid;gap:4px;padding:16px 18px;cursor:pointer;border-radius:16px}
.cls-card b{font-size:16px}
.cls-card small{color:var(--muted,#6b7a8c);font-size:13px}
.cls-role{justify-self:start;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--cv-wash);color:var(--cv)}
.cls-role.student{background:color-mix(in srgb,#1D9E75 12%,var(--surface,#fff));color:#0F6E56}

/* tabs, chips, pills */
.cls-tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line,#e3e8ef)}
.cls-tabs button{font:inherit;font-size:14px;font-weight:650;padding:9px 14px;border:0;background:none;color:var(--muted,#6b7a8c);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.cls-tabs button.on{color:var(--text,#16202c);border-bottom-color:var(--cv)}
.cls-tabs button span{font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--cv-wash);color:var(--cv);margin-left:4px}
.cls-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--line2,#eef2f8);margin:0 0 12px}
.cls-seg button{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border:0;border-radius:8px;background:none;color:var(--muted,#6b7a8c);cursor:pointer}
.cls-seg button.on{background:var(--surface,#fff);color:var(--text,#16202c);box-shadow:0 1px 3px rgba(20,30,50,.12)}
.cls-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.cls-chips button{font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line,#e3e8ef);background:var(--surface,#fff);color:var(--muted,#6b7a8c);cursor:pointer}
.cls-chips button.on{background:var(--cv-wash);border-color:color-mix(in srgb,var(--cv) 40%,transparent);color:var(--cv)}
.cls-pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:1px}
.cls-pill.case{background:color-mix(in srgb,#6d4fd8 12%,var(--surface,#fff));color:#4b36a8}
.cls-pill.own{background:var(--line2,#eef2f8);color:var(--muted,#5b6878)}
.cls-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--cv);color:#fff;font-size:12px;font-weight:700;text-align:center}

/* dashboard */
.cls-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.cls-stats>div{padding:12px 14px;border-radius:14px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef)}
.cls-stats small{display:block;font-size:12px;color:var(--muted,#6b7a8c)}
.cls-stats b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.cls-stuck,.cls-roster,.cls-wall,.cls-box,.cls-mine,.cls-empty-join{padding:16px 18px;margin:0 0 14px;border-radius:16px}
.cls-stuck h3,.cls-box h3{margin:0 0 4px;font-size:15px}
.cls-stuck-list{display:grid;gap:2px;margin-top:10px}
.cls-stuck-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 36px;gap:12px;align-items:center;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13.5px}
.cls-stuck-btn:hover,.cls-stuck-row.open .cls-stuck-btn{background:var(--cv-wash)}
.cls-stuck-btn b{text-align:right;font-size:14px}
.cls-bar{height:9px;border-radius:5px;background:var(--line2,#eef2f8);overflow:hidden}
.cls-bar i{display:block;height:100%;border-radius:5px;background:#E0A030}
.cls-stuck-open{padding:8px 10px 12px}
.cls-who{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.cls-who a{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--line2,#eef2f8);color:var(--text,#16202c);text-decoration:none}
.cls-who a:hover{background:var(--cv-wash);color:var(--cv)}
.cls-bulk{display:grid;gap:8px}
.cls-bulk label{font-size:13px}
.cls-bulk>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cls-page textarea,.cls-page input:not([type=checkbox]),.cls-page select,.cls-compose textarea,.cls-replyform textarea{font:inherit;font-size:14px;width:100%;box-sizing:border-box;padding:9px 11px;border-radius:10px;border:1px solid var(--line,#d7dee8);background:var(--surface,#fff);color:var(--text,#16202c)}
.cls-roster-head,.cls-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.5fr) 56px 76px minmax(0,1fr);gap:12px;align-items:center}
.cls-roster-head{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7a8c);padding:0 8px 8px}
.cls-row{padding:8px;border-radius:10px}
.cls-row:hover{background:var(--cv-wash)}
.cls-name{display:grid;gap:1px;text-decoration:none;color:inherit;min-width:0}
.cls-name-line{display:flex;align-items:center;gap:7px;min-width:0}
.cls-name b{font-size:14px}
.cls-name small{font-size:12px;color:var(--muted,#6b7a8c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cls-num{text-align:center;font-size:13.5px;font-weight:650}
.cls-when{font-size:12.5px;color:var(--muted,#6b7a8c);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cls-grp{width:auto!important;padding:3px 6px!important;font-size:12px!important}
.cls-dots{display:inline-flex;gap:3px;vertical-align:middle}
.cls-dots i,.cls-k{display:inline-block;width:15px;height:9px;border-radius:3px;background:var(--line,#dde3eb)}
.cls-dots i.d,.cls-k.d{background:var(--cv,#6d4fd8)}
.cls-dots i.n,.cls-k.n{background:#E0A030}
.cls-key{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cls-empty-join b{font-size:16px}
.cls-empty-join p{margin:6px 0 12px;font-size:14px}
.cls-url{font-weight:700;color:var(--cv)}

/* the wall */
.cls-post{padding:12px 0;border-top:1px solid var(--line2,#eef2f8)}
.cls-post.mine{box-shadow:inset 3px 0 0 var(--cv);padding-left:12px}
.cls-post-meta{margin:0 0 6px;font-size:12.5px;color:var(--muted,#6b7a8c)}
.cls-sec{font-weight:700;color:var(--text,#16202c);margin-right:4px}
.cls-post-reply{margin:4px 0 0 14px!important;color:var(--muted,#4b5868)}
.cls-post-foot{margin:6px 0 0;font-size:12px;color:var(--muted,#6b7a8c)}
.cls-post-foot a{color:var(--cv)}
.cls-quote{margin:0 0 8px;padding:7px 11px;border-radius:9px;background:var(--line2,#f1f4f8);font-size:13.5px;color:var(--text,#16202c);border-left:0}
.cls-body{margin:0;font-size:14px;line-height:1.5}
.cls-fixed{color:#0F6E56;font-weight:650;font-size:12.5px}

/* setup */
.cls-setup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cls-setup .cls-box{margin:0}
.cls-wide{grid-column:1/-1}
.cls-box p{margin:8px 0 6px;font-size:13.5px}
.cls-code-sm{font-weight:800;letter-spacing:.12em;color:var(--cv)}
.cls-copy{display:flex;gap:8px}
.cls-copy input{flex:1;min-width:0;font-size:13px!important}
.cls-tutors{display:grid;gap:6px;margin:8px 0 10px}
.cls-tutors>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cls-tutors small{color:var(--muted,#6b7a8c);font-size:12.5px}
.cls-form{display:grid;gap:12px}
.cls-form label,.cls-choice label{display:grid;gap:5px;font-size:13px;font-weight:650}
.cls-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
.cls-check{display:flex!important;align-items:center;gap:8px;font-weight:500!important;flex-wrap:wrap}
.cls-check input{width:auto!important}
.cls-check small{color:var(--muted,#6b7a8c);font-weight:400}

/* the join code, for the big screen */
.cls-code-box{text-align:center;padding:26px 20px 30px!important}
.cls-code-box p{margin:6px 0;color:var(--muted,#6b7a8c)}
.cls-code-url{font-size:clamp(20px,3.4vw,34px);font-weight:600;letter-spacing:-.01em;margin:4px 0 14px;word-break:break-all}
.cls-code-url b{color:var(--cv,#6d4fd8)}
.cls-code-big{font-size:clamp(54px,11vw,120px);font-weight:800;letter-spacing:.14em;color:var(--cv,#6d4fd8);line-height:1.05;margin:6px 0 16px;font-variant-numeric:tabular-nums}

/* the student */
.cls-choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.cls-choice{display:grid;gap:10px;align-content:start;padding:18px 20px;border-radius:16px}
.cls-choice.rec{border:2px solid var(--cv)}
.cls-choice h3{margin:0;font-size:17px}
.cls-choice .cls-pill{justify-self:start}
.cls-choice button[type=submit]{justify-self:start}
.cls-choice-title{margin:0;font-weight:650}
.cls-case-text{max-height:220px;overflow:auto;font-size:13.5px;color:var(--muted,#4b5868);padding:10px 12px;border-radius:10px;background:var(--line2,#f4f6fa)}
.cls-case-text p,.cls-case p{margin:0 0 6px}
.cls-mine-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cls-mine-head h3{margin:6px 0 0;font-size:18px}
.cls-mine-steps{display:flex;align-items:center;gap:10px;margin:12px 0 8px;font-size:13px;color:var(--muted,#6b7a8c)}
.cls-mine .cls-check{margin-top:10px;font-size:13px}
.cls-case{padding:12px 18px;border-radius:16px;margin:0 0 14px}
.cls-case summary{cursor:pointer;font-weight:650;font-size:14px}
.cls-case[open] summary{margin-bottom:10px}

/* on the student's QIP tab */
.cls-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;margin:0 0 12px;border-radius:12px;background:color-mix(in srgb,#6d4fd8 8%,var(--surface,#fff));border:1px solid color-mix(in srgb,#6d4fd8 22%,var(--line,#e3e8ef));font-size:13.5px}
.cls-strip .btn{margin-left:auto}

/* threads: in the app and on the tutor's page */
.cls-threads{display:grid;gap:8px;margin:10px 0 12px}
.cls-thread{padding:11px 13px;border-radius:12px;background:color-mix(in srgb,#6d4fd8 7%,var(--surface,#fff));border:1px solid color-mix(in srgb,#6d4fd8 24%,var(--line,#e3e8ef))}
.cls-thread.fixed{background:var(--surface,#fff);border-color:var(--line,#e3e8ef);opacity:.85}
.cls-thread.fixed .cls-body{color:var(--muted,#6b7a8c)}
.cls-msg{display:flex;align-items:baseline;gap:8px;margin:0 0 3px;font-size:12.5px}
.cls-msg b{font-size:13px}
.cls-msg span{color:var(--muted,#6b7a8c)}
.cls-x{margin-left:auto;font:inherit;font-size:12px;border:0;background:none;color:var(--muted,#6b7a8c);cursor:pointer}
.cls-x:hover{color:#b3261e}
.cls-reply{margin:8px 0 0 12px;padding-left:10px;border-left:2px solid color-mix(in srgb,#6d4fd8 30%,transparent)}
.cls-acts{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.cls-replyform{display:grid;gap:6px;margin-top:8px}
.cls-replyform[hidden]{display:none}
.cls-replyform>div{display:flex;gap:8px;align-items:center}
.cls-lost{padding:10px 12px;border-radius:12px;border:1px dashed var(--line,#d7dee8)}
.cls-lost-h{margin:0;font-size:12.5px;font-weight:650;color:var(--muted,#6b7a8c)}

@media (max-width:760px){
  .cls-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cls-roster-head{display:none}
  .cls-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .cls-row>span:nth-child(3),.cls-row>span:nth-child(4){display:none}
  .cls-row .cls-when{grid-column:1/-1}
  .cls-setup,.cls-2{grid-template-columns:1fr}
  .cls-stuck-btn{grid-template-columns:minmax(0,1fr) 70px 30px}
}

/* ---------------------------------------------------- the tutor's page */
.sv-class .cls-muted{color:#6b7a8c}
.sv-back{text-decoration:none}
.sv-back:hover{text-decoration:underline}
.sv-live{font-size:12.5px;font-weight:650;color:#0F6E56;display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.sv-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#1D9E75;box-shadow:0 0 0 3px color-mix(in srgb,#1D9E75 25%,transparent)}
.sv-live.off{color:#9b2454}
.sv-live.off::before{background:#c2567f}
.sv-class .qip-sheet>section>header,.sv-class .qip-measure-head{position:relative}
.cls-add{font:inherit;font-size:12.5px;font-weight:650;margin-left:auto;padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,#6d4fd8 35%,#dde3eb);background:#fff;color:#4b36a8;cursor:pointer}
.qip-sheet>section>header .cls-add{margin-left:12px}
.cls-add:hover{background:#f3effe}
.qip-measure-head .cls-add{align-self:flex-start}
.cls-general p{margin:4px 0 0}
.cls-compose{display:grid;gap:8px;margin:10px 0 12px;padding:12px 14px;border-radius:12px;background:#f7f5fe;border:1px solid #d9d0fa}
.cls-compose-h{margin:0;font-size:13px}
.cls-canned{display:flex;flex-wrap:wrap;gap:6px}
.cls-canned button{font:inherit;font-size:12.5px;text-align:left;padding:5px 10px;border-radius:10px;border:1px solid #d9d0fa;background:#fff;color:#3c2f86;cursor:pointer;line-height:1.35}
.cls-canned button:hover{background:#efeafd}
.cls-compose-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cls-compose-foot .cls-muted{font-size:12px}
.sv-class .btn{font:inherit;font-size:13px;font-weight:650;padding:6px 12px;border-radius:9px;border:1px solid #d7dee8;background:#fff;color:#16202c;cursor:pointer}
.sv-class .btn.primary{background:#6d4fd8;border-color:#6d4fd8;color:#fff}
.sv-class .btn.link{border:0;background:none;color:#4b36a8;padding:6px 4px}
.sv-class .btn:disabled{opacity:.6}
.sv-toc .cls-n{margin-left:auto;align-self:center;font-size:11px;min-width:18px;padding:1px 6px;border-radius:999px;background:#6d4fd8;color:#fff;text-align:center}
@media print{.cls-add,.cls-compose,.cls-acts,.cls-replyform,.sv-live{display:none!important}}
.cls-pick{border:1px solid #e5dcfa;border-radius:11px;padding:10px 13px 12px;margin:0 0 4px;background:#faf8ff}
.cls-pick legend{font-weight:700;color:#4a3aa0;padding:0 4px}
.cls-pick .cls-muted{margin:2px 0 9px}
.cls-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px}
.cls-pick-grid .cls-check{margin:0}
.cls-export{display:flex;gap:9px;flex-wrap:wrap}
.cls-export .btn{text-decoration:none}
/* Class mode: a student's class project shows only the title, the case and the QIP. */
#mainContent.cls-mode > :not(.project-accent-bar):not(.page-head):not(.project-workspace){display:none!important}
#mainContent.cls-mode .project-workspace > :not(.hero):not(.detail-tabs):not(#projectTabBody){display:none!important}
#mainContent.cls-mode .detail-tabs .detail-tab:not(.qip-tab),
#mainContent.cls-mode .page-actions,
#mainContent.cls-mode .hero-actions,
#mainContent.cls-mode .hero .meta,
#mainContent.cls-mode .v8-next-action,
#mainContent.cls-mode .milestone-journey,
#mainContent.cls-mode .qip-foot{display:none!important}

/* find a student in the roster */
.cls-search{position:relative;display:block;margin:0 0 12px}
.cls-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-52%);font-size:17px;color:var(--muted,#6b7a8c);pointer-events:none}
.cls-page .cls-search .cls-search-in{width:100%;box-sizing:border-box;padding:10px 12px 10px 36px;border:1px solid var(--line,#e3e8ef);border-radius:10px;background:var(--surface,#fff);color:inherit;font:inherit;font-size:14px}
.cls-search-in:focus{outline:none;border-color:var(--cv);box-shadow:0 0 0 3px color-mix(in srgb,var(--cv) 18%,transparent)}
.cls-row[hidden],.cls-nomatch[hidden]{display:none}
.cls-nomatch{padding:10px 8px}
@media (max-width:760px){.cls-search .cls-search-in,.cls-joincode input,.cls-page textarea,.cls-page input:not([type=checkbox]),.cls-page select,.cls-compose textarea,.cls-replyform textarea,.cls-form input:not([type=checkbox]),.cls-form textarea{font-size:16px!important}}  /* iOS zooms into inputs under 16px */
.sv-home{color:inherit;text-decoration:none}
.sv-home:hover{opacity:.8}
/* join with a code */
.cls-joincode{display:grid;gap:6px;font-weight:600}
.cls-joincode input{padding:11px 12px;border:1px solid var(--line,#e3e8ef);border-radius:10px;font:inherit;font-size:18px;letter-spacing:.14em;text-transform:uppercase;background:var(--surface,#fff);color:inherit}
.cls-noactive a{color:#6d4fd8;font-weight:600}

/* ---- our own dialogs (ask / tell), replacing the browser's grey box ---- */
.cls-ask{display:flex;gap:14px;align-items:flex-start}
.cls-ask p{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.cls-ask p:last-child{margin-bottom:0}
.cls-ask-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-size:20px;background:color-mix(in srgb,#6d4fd8 11%,var(--surface,#fff))}
.cls-ask-ico.warn{background:color-mix(in srgb,#d64545 11%,var(--surface,#fff))}

/* ---- class cards: status, and a clear way in ---- */
.cls-card{transition:box-shadow .15s,transform .15s}
.cls-card:hover{box-shadow:0 6px 20px rgba(20,30,60,.10);transform:translateY(-1px)}
.cls-card:focus-visible{outline:2px solid #6d4fd8;outline-offset:2px}
.cls-card.is-closed b{color:var(--muted,#5b6878)}
.cls-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cls-card-go{margin-top:8px;font-size:13px;font-weight:650;color:#6d4fd8}
.cls-state{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--line2,#eef2f8);color:var(--muted,#5b6878);white-space:nowrap}
.cls-state.live{background:color-mix(in srgb,#1D9E75 13%,var(--surface,#fff));color:#0F6E56}
.cls-state.fb{background:color-mix(in srgb,#E0A030 18%,var(--surface,#fff));color:#8a5a00}

/* ---- a closed class, for the student ---- */
.cls-closedbar{display:flex;gap:12px;align-items:center;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:var(--line2,#eef2f8);border:1px solid var(--line,#e3e8ef)}
.cls-closedbar p{margin:0;font-size:14px}
.cls-finish{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px}
.cls-finish>div{flex:1 1 280px}
.cls-parts{margin:-4px 0 14px;font-size:13.5px;color:var(--muted,#5b6878);display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---- session feedback: the student's form ---- */
.cls-fb{display:grid;gap:14px;padding:18px 20px;margin:0 0 16px;border-radius:16px;border:1px solid color-mix(in srgb,#E0A030 40%,var(--line,#e3e8ef));background:color-mix(in srgb,#E0A030 5%,var(--surface,#fff))}
.cls-fb>.cls-state{justify-self:start}
.cls-fb h3{margin:0;font-size:18px}
.cls-fb.done{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-color:color-mix(in srgb,#1D9E75 35%,var(--line,#e3e8ef));background:color-mix(in srgb,#1D9E75 5%,var(--surface,#fff))}
.cls-fb.done>div{flex:1 1 220px}
.cls-fb.done h3{font-size:16px}
.cls-fb-tick{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1D9E75;color:#fff;font-weight:800;font-size:18px}
.cls-fbq{display:grid;gap:8px;border:0;margin:0;padding:0;font-size:14.5px;font-weight:600}
.cls-fbq legend{padding:0;margin-bottom:8px}
.cls-scale{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:8px}
.cls-scale label{position:relative;cursor:pointer}
.cls-scale input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cls-scale span{display:grid;place-items:center;height:46px;border-radius:12px;border:1px solid var(--line,#d7dee8);background:var(--surface,#fff);font-size:16px;font-weight:700;transition:background .12s,border-color .12s}
.cls-scale label:hover span{border-color:#6d4fd8}
.cls-scale input:checked+span{background:#6d4fd8;border-color:#6d4fd8;color:#fff}
.cls-scale input:focus-visible+span{outline:2px solid #6d4fd8;outline-offset:2px}
.cls-scale-ends{display:flex;justify-content:space-between;max-width:352px;font-size:12px;font-weight:500;color:var(--muted,#6b7a8c)}
.cls-fb-send{display:flex;gap:10px;align-items:center}

/* ---- session feedback: the tutor's view and the question editor ---- */
.cls-fb-head{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cls-fb-head .cls-export{margin:0}
.cls-fb-q h3{font-size:15px}
.cls-fb-scale{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:18px;align-items:center;margin-top:10px}
.cls-fb-row{display:grid;grid-template-columns:18px minmax(0,1fr) 30px;gap:10px;align-items:center;font-size:13px;margin:0 0 5px}
.cls-fb-row small{text-align:right;color:var(--muted,#6b7a8c)}
.cls-fb-row .cls-bar i{background:linear-gradient(90deg,#6d4fd8,#00b9ad)}
.cls-fb-mean{text-align:center;border-radius:14px;padding:12px;background:color-mix(in srgb,#6d4fd8 9%,var(--surface,#fff))}
.cls-fb-mean b{display:block;font-size:28px;color:#6d4fd8;line-height:1.1}
.cls-fb-mean span{font-size:12px;color:var(--muted,#6b7a8c)}
.cls-fb-answers{display:grid;gap:8px;margin-top:10px}
.cls-fb-answers p{margin:0;padding:9px 12px;border-radius:10px;background:var(--line2,#eef2f8);border-left:3px solid #00b9ad;font-size:13.5px;white-space:pre-wrap}
.cls-fbed-list{display:grid;gap:8px;margin:12px 0}
.cls-fbed-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px;align-items:center}
.cls-fbed-none{margin:12px 0;font-size:13.5px;color:var(--muted,#6b7a8c);font-style:italic}
.cls-fbed-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cls-fbed-acts .spacer{flex:1}

@media (max-width:760px){
  .cls-fbed-row{grid-template-columns:1fr auto}
  .cls-fbed-row select{grid-column:1/-1}
  .cls-fb-scale{grid-template-columns:1fr}
  .cls-scale{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cls-fbq textarea,.cls-fbed-row input,.cls-fbed-row select{font-size:16px!important}
  .cls-ask{flex-direction:column}
}

/* ---- the feedback question editor: order, kinds, options, required ---- */
.cls-fbed-list{gap:10px}
.cls-fbed-q{padding:10px 12px;border-radius:12px;border:1px solid var(--line,#e3e8ef);background:var(--surface,#fff);display:grid;gap:8px}
.cls-fbed-q .cls-fbed-row{grid-template-columns:26px 170px minmax(0,1fr) auto}
.cls-fbed-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,#0e67b3 10%,var(--surface,#fff));color:#0e67b3;font-size:12px;font-weight:800}
.cls-fbed-move{display:flex;gap:2px}
.cls-fbed-move .btn[disabled]{opacity:.35;cursor:default}
.cls-fbed-more{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;padding-left:34px}
.cls-fbed-more>label:not(.cls-check){display:grid;gap:3px;font-size:12px;color:var(--muted,#6b7a8c);flex:1 1 150px}
.cls-fbed-opts{align-items:center}
.cls-fbed-opt{display:flex;gap:4px;align-items:center;flex:1 1 180px}
.cls-fbed-req{padding-left:34px;font-size:13px}
.cls-fbed-copy{width:auto!important;padding:6px 10px!important;font-size:13px!important}
.cls-req{color:#d23a5a;font-weight:800}

/* ---- the student's choices, and the start-of-session question ---- */
.cls-choices{display:flex;flex-wrap:wrap;gap:8px}
.cls-choices label{position:relative;cursor:pointer}
.cls-choices input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cls-choices span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid var(--line,#d7dee8);background:var(--surface,#fff);font-size:14px;font-weight:600;transition:background .12s,border-color .12s}
.cls-choices label:hover span{border-color:#6d4fd8}
.cls-choices input:checked+span{background:#6d4fd8;border-color:#6d4fd8;color:#fff}
.cls-choices input:focus-visible+span{outline:2px solid #6d4fd8;outline-offset:2px}
.cls-fb-before{border-color:color-mix(in srgb,#1D9E75 40%,var(--line,#e3e8ef));background:color-mix(in srgb,#1D9E75 5%,var(--surface,#fff))}
.cls-fb-note{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,#1D9E75 8%,var(--surface,#fff));font-size:13.5px}
.cls-fb-preview{margin:0}
.cls-fb-ends{margin-top:4px}
.cls-fb-row.wide{grid-template-columns:minmax(0,180px) minmax(0,1fr) 70px}
.cls-fb-row.wide span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cls-fb-choice{margin-top:10px}
.cls-fb-mean em{display:block;margin-top:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--muted,#6b7a8c)}
.cls-fb-mean em.up{color:#0F6E56}
.cls-fb-mean em.down{color:#b3261e}
@media (max-width:760px){
  .cls-fbed-q .cls-fbed-row{grid-template-columns:26px 1fr auto}
  .cls-fbed-q .cls-fbed-row select{grid-column:2/-1}
  .cls-fbed-q .cls-fbed-row input{grid-column:1/-1}
  .cls-fbed-more,.cls-fbed-req{padding-left:0}
  .cls-fbed-more input,.cls-fbed-opt input{font-size:16px!important}
  .cls-fb-row.wide{grid-template-columns:minmax(0,1fr) 70px}
  .cls-fb-row.wide .cls-bar{grid-column:1/-1;grid-row:2}
}
.cls-fbed-more .cls-check{font-size:13px}

/* ---- who said what: comments with names, picking for the PDF, one card per person ---- */
.cls-fb-ans{display:flex;gap:8px;align-items:flex-start}
.cls-fb-ans p{flex:1}
.cls-fb-ans p small{display:block;margin-top:4px;font-size:12px;color:var(--muted,#6b7a8c)}
.cls-fb-ans.picked p{background:color-mix(in srgb,#f6b33a 14%,var(--surface,#fff));border-left-color:#f6b33a}
.cls-star{all:unset;cursor:pointer;flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;font-size:18px;color:#b8c2cf;margin-top:2px}
.cls-star:hover{background:var(--line2,#eef2f8);color:#e0a030}
.cls-star[aria-pressed=true]{color:#e0a030}
.cls-star:focus-visible{outline:2px solid #6d4fd8}
.cls-anon{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--line2,#eef2f8);color:var(--muted,#5b6878)}
.cls-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}
.cls-person{padding:12px 14px;border-radius:12px;border:1px solid var(--line,#e3e8ef);background:var(--surface,#fff)}
.cls-person header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.cls-person header small{font-size:12px;color:var(--muted,#6b7a8c)}
.cls-person dl{margin:0;display:grid;gap:2px}
.cls-person dt{font-size:12px;color:var(--muted,#6b7a8c);margin-top:6px}
.cls-person dd{margin:0;font-size:13.5px;white-space:pre-wrap}
.cls-fb-anon{font-size:14px;padding:10px 12px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ef)}
.cls-fb-anon small{display:block;margin-left:24px;font-size:12px;color:var(--muted,#6b7a8c)}
.cls-pdfopts fieldset{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px}
.cls-pdfopts legend{font-weight:700;margin-bottom:8px}
.cls-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#e3e8ef);cursor:pointer}
.cls-radio:has(input:checked){border-color:#0e67b3;background:color-mix(in srgb,#0e67b3 6%,var(--surface,#fff))}
.cls-radio:has(input:disabled){opacity:.55;cursor:default}
.cls-radio input{margin-top:3px}
.cls-radio small{display:block;color:var(--muted,#6b7a8c);font-size:12.5px}
.cls-radio input[type=radio]{width:auto!important;flex:none;padding:0!important;margin-top:4px;accent-color:#0e67b3}
.cls-form .cls-radio,.cls-pdfopts .cls-radio{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;text-align:left}

/* Classes for someone not teaching yet */
.cls-intro{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding:22px 24px}
.cls-intro h3{margin:0 0 12px;font-size:16px}
.cls-intro-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px}
.cls-intro-steps li{display:flex;gap:12px;align-items:flex-start}
.cls-intro-steps b{display:block;font-size:13px}
.cls-intro-steps small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.cls-intro-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--accent-soft,#e8f1fa);color:var(--accent,#0e67b3)}
.cls-intro-side{display:flex;flex-direction:column;gap:8px;align-self:start;padding:16px;border:1px solid var(--line,#dce5eb);border-radius:14px;background:var(--surface-soft,#f6f9fc)}
.cls-intro-side small{color:var(--muted);font-size:12px;line-height:1.5}
.cls-intro-side .btn{justify-content:center;text-align:center}
.cls-intro-or{font-size:11px;color:var(--muted);line-height:1.5;margin-top:4px}
@media (max-width:760px){.cls-intro{grid-template-columns:1fr}}
.cls-intro-side a.btn{text-decoration:none}
/* parts of the class forms that only a class with a QIP has */
.cls-qiponly{display:grid;gap:12px}
.cls-qiponly[hidden],.cls-blankonly[hidden]{display:none!important}
.cls-more{white-space:nowrap}
.cls-more .btn.link{padding:0 4px}

/* "New class" and the other class forms sit outside .field, so their boxes had
   browser-default styling on desktop (night test, 13 Oct). Same look as .field. */
.cls-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.cls-form select,.cls-form textarea{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--text);padding:10px 12px;font:inherit;font-size:13px;font-weight:500;outline:none}
.cls-form input:focus,.cls-form select:focus,.cls-form textarea:focus{border-color:#9FC8EC;box-shadow:0 0 0 3px rgba(14,103,179,.12)}