/* V104 — the "My class" panel in Settings.
 *
 * Sits under the invite-code field: which class you are in, and what homework
 * that class has. Quiet by default - it only appears once the server has
 * answered that you really are in a class.
 */

.myClassPanel { margin-top: 10px; }

.myClassCard {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #f8fafc;
}
.myClassCard > b { display: block; font-size: 13px; margin-bottom: 2px; text-transform: none; }

.myClassMuted { font-size: 11.5px; color: var(--muted, #64748b); line-height: 1.5; margin: 4px 0 0; }

.myClassHw { list-style: none; margin: 8px 0 0; padding: 0; }
.myClassHw li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; border-top: 1px dashed rgba(100, 116, 139, .28);
}
.myClassHw li:first-child { border-top: 0; }
.myClassHw .hwTitle { font-size: 12.5px; font-weight: 700; color: var(--ink, #1e293b); }
.myClassHw .hwMeta { font-size: 11px; color: var(--muted, #64748b); }
.myClassHw .hwStart {
  align-self: flex-start; margin: 6px 0 0; padding: 5px 12px;
  width: auto; font-size: 11.5px;
}

.v104-teacherLink { margin-top: 10px; width: 100%; font-size: 11.5px; }

html[data-ial-theme="dark"] .myClassCard {
  background: var(--d-raise, #16233a);
  border-color: rgba(255, 255, 255, .12);
}
html[data-ial-theme="dark"] .myClassHw .hwTitle { color: var(--d-ink, #e6edf7); }
html[data-ial-theme="dark"] .myClassMuted,
html[data-ial-theme="dark"] .myClassHw .hwMeta { color: var(--d-muted, #93a4bd); }