/* ============================================================
   Teacher panel — desktop-first, works down to phone width.
   Deliberately calmer than the kids app: this is a work tool.
   ============================================================ */
:root{
  --tink:#22252B; --tink2:#6A7180; --tline:#E3E7EE;
  --tbg:#F4F6FA; --tcard:#FFFFFF;
  --tgreen:#2C3E2A; --tgreen2:#3D5A3A; --tacc:#1F6C8F;
  --tok:#1F7A50; --twarn:#B8860B; --tbad:#C0392B;
}
body.tbody{background:var(--tbg);display:block;height:auto;min-height:100dvh;
  overflow:auto;place-items:initial;color:var(--tink);user-select:text}
#tapp{max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,26px) 60px}

#thead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 0 12px;position:sticky;top:0;background:var(--tbg);z-index:20;
  border-bottom:1px solid var(--tline);margin-bottom:18px}
.tbrand{display:flex;align-items:center;gap:11px}
.tlogo{width:42px;height:42px;border-radius:13px;background:linear-gradient(160deg,#3D5A3A,#2C3E2A);
  color:#fff;display:grid;place-items:center;font-size:21px}
.tname{font-weight:900;font-size:17px;letter-spacing:-.2px}
.tmuted{color:var(--tink2);font-weight:700}
.tsub{font-size:12px;font-weight:800;color:var(--tink2);margin-top:1px;font-variant-numeric:tabular-nums}
#tnav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.tnb{border:1px solid var(--tline);background:#fff;border-radius:11px;padding:9px 14px;
  font-family:var(--font);font-weight:800;font-size:13.5px;color:var(--tink2);cursor:pointer;
  display:flex;align-items:center;gap:7px;transition:all .16s}
.tnb:hover{border-color:#C9D2E0;color:var(--tink)}
.tnb.on{background:var(--tgreen);border-color:var(--tgreen);color:#fff}

.tgrid{display:grid;gap:16px}
.tgrid.k2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tgrid.k4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.tcard{background:var(--tcard);border:1px solid var(--tline);border-radius:16px;padding:18px}
.tcard.pad0{padding:0;overflow:hidden}
.th{font-weight:900;font-size:15px;margin:0 0 3px;display:flex;align-items:center;gap:8px}
.thelp{font-size:12.5px;color:var(--tink2);font-weight:700;line-height:1.5;margin-bottom:12px}
.tkpi{font-size:29px;font-weight:900;letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1}
.tkpi.ok{color:var(--tok)} .tkpi.acc{color:var(--tacc)} .tkpi.warn{color:var(--twarn)}
.tkl{font-size:11.5px;font-weight:800;color:var(--tink2);margin-top:5px;text-transform:uppercase;
  letter-spacing:.6px}

label.tl{display:block;font-size:11.5px;font-weight:900;color:var(--tink2);
  text-transform:uppercase;letter-spacing:.6px;margin:12px 0 5px}
.ti,.ts,.tta{width:100%;font-family:var(--font);font-weight:700;font-size:14px;color:var(--tink);
  background:#FCFDFF;border:1.5px solid var(--tline);border-radius:10px;padding:10px 12px;outline:none}
.ti:focus,.ts:focus,.tta:focus{border-color:var(--tacc);background:#fff}
.tta{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;resize:vertical}
.trow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.trow>*{flex:1;min-width:130px}
.tb{border:0;border-radius:10px;padding:11px 17px;font-family:var(--font);font-weight:900;
  font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  background:var(--tgreen);color:#fff;transition:filter .15s}
.tb:hover{filter:brightness(1.12)}
.tb:disabled{opacity:.45;cursor:default}
.tb.alt{background:#fff;color:var(--tink);border:1.5px solid var(--tline)}
.tb.acc{background:var(--tacc)} .tb.bad{background:var(--tbad)}
.tb.sm{padding:7px 11px;font-size:12px}

/* word picker */
.wsearch{position:relative}
.wres{max-height:290px;overflow:auto;border:1.5px solid var(--tline);border-radius:12px;
  margin-top:8px;background:#fff}
.wr{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid #F1F4F8;
  cursor:pointer}
.wr:last-child{border-bottom:0}
.wr:hover{background:#F7FAFF}
.wr.in{background:#EAF7F0}
.wr .we{font-weight:900;font-size:13.5px;min-width:96px}
.wr .wu{font-weight:800;font-size:12.5px;color:#C2410C;min-width:104px}
.wr .wru{font-weight:800;font-size:12.5px;color:#1D4ED8;min-width:104px}
.wr .wsc{font-size:11px;color:var(--tink2);font-weight:700;margin-left:auto}
.wr .wtick{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--tline);
  display:grid;place-items:center;font-size:12px;color:#fff;flex:0 0 auto}
.wr.in .wtick{background:var(--tok);border-color:var(--tok)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:8px}
.wchip{background:#EEF4FF;border:1px solid #D6E2F7;border-radius:999px;padding:5px 10px;
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.wchip b{font-weight:900}
.wchip .x{cursor:pointer;color:var(--tbad);font-weight:900}

/* tables */
.ttab{width:100%;border-collapse:collapse;font-size:13px}
.ttab th{text-align:left;font-size:11px;font-weight:900;color:var(--tink2);text-transform:uppercase;
  letter-spacing:.5px;padding:11px 13px;border-bottom:1.5px solid var(--tline);
  background:#FAFBFD;position:sticky;top:0}
.ttab td{padding:11px 13px;border-bottom:1px solid #F1F4F8;font-weight:700;
  font-variant-numeric:tabular-nums}
.ttab tr:last-child td{border-bottom:0}
.ttab tr:hover td{background:#FAFCFF}
.ttab td.nm{font-weight:900}
.tnum{text-align:right}
.tbar{height:7px;border-radius:99px;background:#EDF1F7;overflow:hidden;min-width:74px}
.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7FD1B9,#1F7A50)}
.tbar.low i{background:linear-gradient(90deg,#FFD08A,#E08B1F)}
.tbar.bad i{background:linear-gradient(90deg,#F5A79B,#C0392B)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:900}
.pill.ok{background:#E6F6ED;color:var(--tok)}
.pill.no{background:#FDECEA;color:var(--tbad)}
.pill.mid{background:#FFF6E0;color:var(--twarn)}
.medal{font-size:16px}

.alist{display:grid;gap:10px}
.ai{border:1.5px solid var(--tline);border-radius:13px;padding:13px;background:#fff}
.ai.off{opacity:.55}
.aih{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ait{font-weight:900;font-size:14.5px}
.aim{font-size:12px;color:var(--tink2);font-weight:800}
.aiw{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.aiw span{background:#F4F7FC;border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:800}
.aiact{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}

.code{background:#0F1720;color:#8BE9C8;border-radius:11px;padding:12px;font-size:11px;
  font-family:ui-monospace,Menlo,monospace;word-break:break-all;line-height:1.55;
  max-height:150px;overflow:auto;user-select:all}
.tnote{background:#FFF9E6;border:1px solid #F2E2B0;border-radius:11px;padding:11px 13px;
  font-size:12.5px;font-weight:700;color:#6B5610;line-height:1.55}
.tnote.info{background:#EEF6FF;border-color:#CFE2F7;color:#14476E}
#ttoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--tgreen);color:#fff;font-weight:900;font-size:13.5px;padding:12px 20px;
  border-radius:12px;opacity:0;transition:all .28s;pointer-events:none;z-index:99}
#ttoast.on{opacity:1;transform:translateX(-50%)}
.empty{text-align:center;padding:34px 16px;color:var(--tink2);font-weight:800;font-size:13.5px}
.empty .eb{font-size:34px;display:block;margin-bottom:9px}
@media(max-width:640px){
  #tnav{width:100%;margin-left:0}
  .tnb{flex:1;justify-content:center;padding:9px 8px;font-size:12.5px}
  .wr{flex-wrap:wrap;gap:5px}
  .wr .we,.wr .wu,.wr .wru{min-width:0}
}

/* roster + moderation rows */
.prow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid #ECE9F4}
.prow .pn{font-weight:800;font-size:14px;min-width:150px;display:flex;align-items:center;gap:7px}
.prow .pm{font-size:12.5px;color:#6B6880;flex:1;min-width:120px}
.prow .pa{margin-left:auto;display:flex;flex-wrap:wrap;gap:0}
.prow.dim{opacity:.55}
/* softer versions, INSIDE a roster row only. Unscoped, these two
   repainted every accent button in the panel. */
.prow .tb.bad{background:#F3D2CC;color:#7A2A18}
.prow .tb.acc{background:#CFE9DC;color:#14503A}

/* a row of sibling actions under a form */
.trow2{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.trow2 .tb{ margin-top:0 }


/* ---------- assignment builder: autosave, own words, attachments ---------- */
.thead2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dsaved{font-size:11.5px;font-weight:800;color:var(--tok);margin-left:auto;
  font-variant-numeric:tabular-nums}
.sect{margin-top:16px;padding-top:13px;border-top:1.5px solid var(--tline)}
.wnew{border:1.5px dashed var(--tacc);border-radius:12px;padding:11px 12px;margin-top:9px;
  background:#FAFCFF}
.frow{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--tline);
  border-radius:10px;margin-top:7px;background:#fff}
.frow .fn{font-weight:800;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.frow .fs{font-size:11px;font-weight:800;color:var(--tink2);margin-left:auto;flex:0 0 auto}
.fthumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--tline);display:grid;place-items:center;background:#F7FAFF}
.bud{font-size:11px;font-weight:800;color:var(--tink2);margin-top:7px}
.fqrow{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--tline);
  border-radius:10px;margin-top:7px;background:#fff}
.fqrow .qn{width:20px;height:20px;border-radius:6px;background:#EEF4FF;color:#1D4ED8;
  font-size:11px;font-weight:900;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.fqrow .qt{font-weight:800;font-size:12.5px;line-height:1.45}
.fqrow .qh{font-size:11px;font-weight:700;color:var(--tink2);margin-top:2px}
.fqrow .x{margin-left:auto;cursor:pointer;color:var(--tbad);font-weight:900;flex:0 0 auto}

/* ---------- the panel running inside the kids app ---------- */
/* Same markup as the standalone page, so every panel rule applies; the
   phone frame just has to stop being a phone-shaped box while it shows. */
body.panelon #frame{width:100dvw;height:100dvh;max-width:none;border-radius:0;
  background:var(--tbg)}
body.panelon #bg,body.panelon #fxLayer{display:none}
.panelscr{padding:0;overflow:hidden;color:var(--tink);user-select:text}
.panelscr #tapp{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 clamp(12px,3vw,26px) 60px}
.panelscr #thead{background:var(--tbg)}

/* ---------- typing in the panel ---------- */
body.kbon.panelon #frame,body.typing.panelon #frame{height:var(--vvh,100dvh)}
/* The assignment builder is a long form and its last field used to be
   unreachable: the column ended 60px below it, so there was nowhere to
   scroll it up to. A screenful of slack while typing fixes that. */
body.typing .panelscr #tapp{padding-bottom:82vh}
body.typing.tbody #tapp{padding-bottom:82vh}
/* the sticky header is a third of the space left once the keyboard is up */
body.typing .panelscr #thead,body.typing.tbody #thead{position:static}
/* On a phone the nav is three rows of buttons — a third of what is left
   once the keyboard is up. It comes straight back when typing stops, and
   the draft is saved every second, so nothing is at risk. */
@media(max-width:640px){
  body.kbon #tnav,body.typing #tnav{display:none}
  body.kbon #thead,body.typing #thead{padding:8px 0 6px;margin-bottom:10px}
  body.kbon .thelp,body.typing .thelp{display:none}
}

/* ---------- panel dialog ---------- */
.tsheet{position:fixed;inset:0;background:rgba(20,24,32,.44);z-index:60;
  display:grid;place-items:center;padding:20px}
.tsheetcard{background:#fff;border-radius:16px;padding:20px 22px;max-width:420px;width:100%;
  box-shadow:0 24px 60px rgba(20,24,32,.3)}
.tsheetcard .trow2{margin-top:16px}
.tsheetcard .trow2 .tb{flex:1;justify-content:center}