/* CodeGrove: Grade a whole class (J5c, 2026-10-17). It loads after codegrove.css and uses its colors, panels (.isl,
   .ihead), buttons (.btn, .mini, .theme), dialog (.scrim, .picker) and toast. This page scrolls like a normal page,
   so its pop-ups are fixed to the window. Page state classes on <html>: gradep (always), grading (a check is running),
   light, booting and bootfail (boot.js). No colored stripes down the side of any box. */
html.gradep,html.gradep body{height:auto;min-height:100%}
.gpage{min-height:100vh;display:flex;flex-direction:column}
a.btn{text-decoration:none}
a.btn:focus-visible,.gvcode:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gtop{min-height:56px}
.gtitle{margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gmain{width:100%;max-width:1240px;margin:0 auto;padding:6px 16px 40px;display:flex;flex-direction:column;gap:14px;flex:1}
.gintro{display:flex;flex-direction:column;gap:6px}
.gintro p{margin:0;font-size:14px;line-height:1.5;max-width:860px}
.gintro .gsafe{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px}
.gsafe svg{width:15px;height:15px;color:var(--ok)}

/* the two ways to add work */
.gadd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:stretch}
.gbody{display:flex;flex-direction:column;gap:10px;padding:12px;flex:1;min-height:0}
.ghelp{font-size:13px;line-height:1.45;color:var(--dim)}
.gbox{width:100%;min-height:210px;flex:1;resize:vertical;padding:10px 12px;border:1px solid var(--border);border-radius:5px;background:var(--raise);
  color:var(--text);font:12.5px/1.5 var(--mono);font-variant-ligatures:none;white-space:pre;overflow:auto;tab-size:12}
.gbox:focus{outline:2px solid var(--accent);outline-offset:-1px}
.gbox::placeholder{color:var(--dim);font-family:var(--ui)}
.gcount{margin:0;font-size:13px;line-height:1.45;color:var(--dim)}
.gdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:16px;text-align:center;
  border:1.5px dashed var(--handle);border-radius:5px;background:var(--raise)}
.gdrop svg{width:26px;height:26px;color:var(--accent)}
.gdrop b{font-size:14px;font-weight:650}
.gdrop small{font-size:12.5px;color:var(--dim);line-height:1.4}
.gdrop .btn{margin-top:6px}
.gdrop .btn svg{width:15px;height:15px;color:inherit}
.gflist{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.gflist li{display:flex;align-items:flex-start;gap:8px;padding:5px 6px;border-radius:5px;font-size:13px;line-height:1.4}
.gflist li svg{width:15px;height:15px;margin-top:2px;color:var(--dim)}
.gflist li img.ft{width:15px;height:15px;margin-top:2px}
.gflist .fn{font-weight:600;overflow-wrap:anywhere}
.gflist .fs{color:var(--dim)}
.gflist li.bad .fs{color:var(--bad)}

/* checking */
.grun{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.grun .btn.pri svg{width:13px;height:13px}
.gstop svg{color:var(--bad);width:13px;height:13px}
.gprog{display:flex;flex-direction:column;gap:5px;min-width:200px;flex:0 1 320px}
.gprog span{font-size:13.5px;font-weight:600}
.gbar{height:6px;border-radius:3px;background:var(--raise);border:1px solid var(--border);overflow:hidden}
.gbar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.gpy{margin-left:auto;font-size:12.5px;color:var(--dim)}
html.bootfail .gpy{color:var(--bad);font-weight:600}
.btn[disabled]{opacity:.55;cursor:default;filter:none;transform:none}

/* results */
.gresh .note{margin-left:4px}
.gtools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.gtools .gtip{margin-left:auto;font-size:12.5px;color:var(--dim)}
.gcopy{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border)}
.gcopy textarea{width:100%;height:90px;padding:6px 8px;border:1px solid var(--border);border-radius:5px;background:var(--raise);color:var(--text);font:12px/1.4 var(--mono);resize:vertical}
.gcopy small{font-size:12.5px;color:var(--dim)}
.gtable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13.5px}
.gtable th{height:34px;padding:0 12px;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--border);background:var(--band)}
.gtable .c-name{width:24%}.gtable .c-task{width:20%}.gtable .c-pass{width:13%}.gtable .c-hint{width:10%}.gtable .c-note{width:33%}
.gtable td{padding:9px 12px;vertical-align:top;border-bottom:1px solid var(--border);line-height:1.45;overflow-wrap:anywhere}
.gtable tbody tr{cursor:pointer;height:46px}
.gtable tbody tr:hover{background:var(--soft)}
.gtable tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gtable tbody tr:last-child td{border-bottom:0}
.gtable tr.now{background:var(--soft-2)}
.gnm{font-weight:600}
.gfrom{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.gnoname{display:block;color:var(--dim);font-style:italic}
.gnamein{width:100%;max-width:220px;height:32px;margin-top:4px;padding:0 8px;border:1px solid var(--border);border-radius:5px;background:var(--island);color:var(--text);font:13.5px var(--ui)}
.gnamein:focus{outline:2px solid var(--accent);outline-offset:-1px}
.gtask{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.gtask .chip{font-size:11.5px}
.gpass{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gpass svg{width:16px;height:16px}
.gpass.ok svg{color:var(--ok)}
.gpass.no svg{color:var(--bad)}
.gdim{color:var(--dim)}
.gnotes{margin:0;padding:0;list-style:none}
.gnotes li{line-height:1.45}
.gnotes li.warn{color:var(--bad)}
.gwait{color:var(--dim);font-style:italic}

/* one student's code */
html.gradep .scrim,html.gradep .dropzone,html.gradep .toast{position:fixed}
.gviewbox{width:min(880px,calc(100vw - 24px));max-height:calc(100vh - 24px);display:flex;flex-direction:column}
.gviewbox .pk-head h3{overflow-wrap:anywhere;min-width:0}
.gvsub{margin:6px 22px 0;color:var(--dim);font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.gvchecks{margin:10px 16px 8px;display:flex;flex-direction:column;gap:2px}
.gvchecks .crow{min-height:28px;align-items:flex-start;padding:4px 6px;font-weight:400}
.gvchecks .crow svg{margin-top:1px}
.gvchecks .crow b{font-weight:600;margin-right:6px}
/* CG9: the result list scrolls inside the box, so the student's code keeps its room */
.gvchecks{flex:none;max-height:40vh;overflow:auto;overscroll-behavior:contain}
.gvchecks .cfold{align-items:center}
.gvchecks .cfoldlist{display:flex;flex-direction:column;gap:2px}
.gvchecks .gvhead{margin:6px 6px 2px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.gvchecks .gvnone{margin:2px 6px;color:var(--dim);font-size:13.5px}
.gvcode{flex:1 1 auto;min-height:120px;margin:0 16px;white-space:pre}
.gvcode .ln{display:inline-block;width:2.6em;padding-right:12px;text-align:right;color:var(--ln);user-select:none;-webkit-user-select:none}
.gvfoot{align-items:center;flex-wrap:wrap}
.gvlong{margin-right:auto;font-size:12.5px;color:var(--dim)}
.gvlong:empty{display:none}

/* touch screens and narrow windows (the same rule the student page uses) */
@media (max-width:900px),(pointer:coarse){
  .gnamein{height:44px;font-size:15px}
  .gtable tbody tr{height:52px}
  .gflist li{min-height:36px}
}
@media (max-width:900px){
  .gtop{flex-wrap:nowrap;padding:8px 10px 8px 14px}
  .gtop .acts{order:0;width:auto;margin-left:auto;gap:8px}
  .gadd{grid-template-columns:minmax(0,1fr)}
  .gbox{min-height:170px}
  .gdrop{min-height:130px}
  .gmain{padding:6px 12px 32px}
  .gtable{font-size:13px}
  .gtable th,.gtable td{padding-left:8px;padding-right:8px}
  .gtable .c-name{width:25%}.gtable .c-task{width:20%}.gtable .c-pass{width:14%}.gtable .c-hint{width:10%}.gtable .c-note{width:31%}
  .gtools .gtip{margin-left:0;width:100%}
  .gviewbox{width:calc(100vw - 24px)}
}
/* phones: the page still works, so it does not hide like the lab does */
@media (max-width:560px){
  .gtitle{display:none}
}