/* Classes & school spaces: private posts, responsive forms and member-only lists. */
.classroom-hub{min-width:0}
.classroom-heading{display:flex;justify-content:space-between;gap:12px;align-items:start;flex-wrap:wrap}
.classroom-heading h2{margin:5px 0 7px;font-size:20px;color:var(--study-text)}
.classroom-heading p{margin:0;max-width:720px;font-size:13px;color:var(--study-muted)}
.classroom-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:15px}
.classroom-start form,.classroom-content>section,#classroomPostForm{
 padding:15px;border-radius:14px;border:1px solid var(--study-border);
 background:var(--study-surface-soft);min-width:0;
}
.classroom-start h3,.classroom-content h3{font-size:15px;color:var(--study-text);margin:0 0 11px}
.classroom-start label,#classroomPostForm label{display:grid;gap:5px;font-size:12px;color:var(--study-muted);font-weight:750;margin-bottom:10px}
.classroom-start input,.classroom-start select,#classroomPostForm input,#classroomPostForm select,#classroomPostForm textarea{
 width:100%;min-height:42px;box-sizing:border-box;padding:9px 10px;
 background:var(--study-surface);border:1px solid var(--study-border-strong);
 border-radius:9px;color:var(--study-text);font:inherit;
}
.classroom-start form>button,#classroomPostForm>button,.classroom-actions button,
.classroom-invite button,.classroom-list-button{
 border-radius:9px;border:1px solid var(--study-border-strong);
 background:var(--study-surface);color:var(--study-text);
 padding:9px 12px;cursor:pointer;min-height:42px;font-weight:700;
}
.classroom-start form>button,#classroomPostForm>button{
 background:var(--study-accent);border-color:transparent;color:white;width:100%;
}
.classroom-start small{display:block;margin:10px 0 0;font-size:11px;color:var(--study-muted);line-height:1.5}
#classroomStatus{min-height:22px;margin:12px 0}
.classroom-content{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,2fr);align-items:start;gap:12px;margin-top:9px}
.classroom-content>section h4{font-size:14px;margin:14px 0 9px}
.classroom-content>section[hidden],#classroomPostForm[hidden],#classroomInviteBlock[hidden],#classroomLeave[hidden],
#classroomDueField[hidden],#classroomWhenField[hidden]{display:none!important}
.classroom-list{display:grid;gap:8px}
.classroom-list-button{display:grid;gap:5px;text-align:left;width:100%;font-size:13px;overflow-wrap:anywhere}
.classroom-list-button[aria-pressed=true]{border-color:var(--study-accent);background:var(--study-surface)}
.classroom-list-button small{font-size:11px;font-weight:500;color:var(--study-muted)}
#classroomDetailMeta{margin:5px 0 10px;color:var(--study-muted);font-size:12px}
.classroom-invite{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-radius:10px;padding:9px 11px;background:var(--study-surface);border:1px solid var(--study-border);margin:11px 0}
.classroom-invite code{font:bold 15px ui-monospace,monospace;letter-spacing:2px;color:var(--study-accent)}
.classroom-posts{display:grid;gap:10px}
.classroom-post{padding:13px;background:var(--study-surface);border:1px solid var(--study-border);border-radius:12px;display:grid;gap:5px;overflow-wrap:anywhere}
.classroom-post strong{font-size:14px;color:var(--study-text)}
.classroom-post small,.classroom-post p{font-size:12px;color:var(--study-muted);margin:0}
.classroom-post-type{font-size:10px;color:var(--study-accent);font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.classroom-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.classroom-actions button{min-height:36px;font-size:12px}
.classroom-actions .classroom-finished{border-color:#16a46c;color:#087c52}
.classroom-actions .classroom-remove{color:#bf3853}
@media(max-width:840px){.classroom-content{grid-template-columns:1fr}}
@media(max-width:620px){.classroom-start{grid-template-columns:1fr}.classroom-heading h2{font-size:18px}}

/* V4: gentle, small-screen usability enhancements without extra panels. */
@media (max-width: 640px) {
  .classroom-hub, .classroom-heading, .classroom-heading > *, .classroom-hub input, .classroom-hub select, .classroom-hub textarea { min-width: 0; max-width: 100%; }
  .classroom-heading { gap: 8px; }
  .classroom-hub button { min-height: 42px; }
}