/* Teacher Desk and the student "join my class" pieces. Builds on pb.css tokens. */
.desk{margin:calc(var(--u)*4) 0}
.desk.narrow{max-width:34rem;margin-left:auto;margin-right:auto}
.deskbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.field{display:grid;gap:.25rem;margin:0 0 .9rem}
.field label{font-weight:700}
.field .search{width:100%}
.msg{color:var(--skill);font-weight:700;min-height:1.2em}
.muted{color:var(--ink-soft)}.small{font-size:.85rem}
.ccards{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
.ccard{display:grid;gap:.25rem;padding:1rem;border:2px solid var(--line);border-top:6px solid var(--knowledge);border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none}
.ccard:hover{border-color:var(--ink);border-top-color:var(--knowledge)}
.ccard strong{font:600 1.2rem var(--head)}
.code{font:700 1.1rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:.25rem .5rem;justify-self:start}
.code.big{font-size:clamp(2.2rem,8vw,4rem);padding:.4rem 1rem;justify-self:center}
.joinbox{display:grid;justify-items:center;text-align:center;gap:.2rem;background:var(--raised);border:2px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin:1rem 0}
.joinbox p{margin:0}.joinbox .where{font:600 1.3rem var(--head)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.results{border-collapse:collapse;min-width:100%}
.results th,.results td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.92rem}
.results td.score{text-align:center;font-weight:700}
.results .lab{min-height:32px;padding:.15rem .5rem;font-size:.85rem;width:12rem;margin-top:.25rem}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.8rem}
.picker fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem}
.picker legend{font:600 1rem var(--head);padding:0 .3rem}
.pick{display:block;padding:.15rem 0;font-size:.95rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}
/* student side */
.classbar{background:var(--ink);color:var(--on-ink)}
.classbar .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:center;padding-top:.5rem;padding-bottom:.5rem;font-weight:700}
.classbar button{font:700 .85rem var(--sans);background:transparent;color:var(--on-ink);border:2px solid var(--on-ink);border-radius:999px;padding:.2rem .7rem;cursor:pointer;min-height:36px}
.joinbtn{font:700 .85rem var(--sans);background:var(--luck);color:var(--ink);border:0;border-radius:999px;padding:.35rem .9rem;cursor:pointer;min-height:40px}
dialog.joind{border:2px solid var(--ink);border-radius:var(--radius);padding:1.2rem;max-width:min(30rem,92vw)}
dialog.joind::backdrop{background:rgba(20,18,15,.55)}
.seatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem;max-height:50vh;overflow:auto;margin:.8rem 0}
.seatgrid button{font:700 1rem var(--sans);padding:.6rem;border:2px solid var(--line);border-radius:var(--radius);background:var(--card);cursor:pointer;min-height:48px}
.seatgrid button:hover,.seatgrid button:focus-visible{border-color:var(--ink)}
.codein{font:700 1.8rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3em;text-transform:uppercase;width:100%;padding:.4rem .6rem;border:2px solid var(--line);border-radius:var(--radius);text-align:center}
section.assigned{padding:calc(var(--u)*4) 0 calc(var(--u)*2);border-bottom:1px solid var(--line)}
section.assigned > h2{text-align:center}
.teachart{display:block;width:100%;height:auto;max-height:17rem;object-fit:cover;object-position:50% 12%;border-radius:var(--radius);border:2px solid var(--line);margin-top:1rem}