.supervision { padding: 20px 0; min-width: 0; }
.supervision h3 { font-size: 22px; margin: 0 0 16px; }
.supervision h4 { font-size: 17px; margin: 22px 0 12px; }
.supervision-heading, .supervision-actions, .supervision-bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.supervision-heading { justify-content: space-between; }
.supervision label { display: grid; min-width: 0; gap: 6px; font-size: 14px; }
.supervision input, .supervision select, .supervision textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--field-bg); color: var(--ink); }
.supervision textarea { min-height: 90px; resize: vertical; }
.supervision .supervision-check { display: flex; align-items: center; gap: 8px; }
.supervision input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; }
.supervision-filters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 12px; margin: 12px 0; }
.supervision-filters select { height: 96px; }
.supervision-totals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; border-block: 1px solid var(--line); padding: 16px 0; margin: 18px 0; }
.supervision-totals div { display: grid; gap: 4px; }
.supervision-totals strong { font-size: 24px; }
.supervision-totals span { font-size: 13px; color: var(--muted); }
.supervision-table-wrap { overflow-x: auto; }
.supervision-table { width: 100%; border-collapse: collapse; text-align: left; }
.supervision-table th, .supervision-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.supervision-link { border: 0; background: none; color: var(--ink); text-decoration: underline; text-align: left; cursor: pointer; padding: 4px 0; }
.supervision-assign { display: grid; grid-template-columns: minmax(0,2fr) minmax(180px,1fr) auto; gap: 12px; align-items: end; margin: 20px 0; }
.supervision-bulk { padding: 12px 0; border-bottom: 1px solid var(--line); }
.supervision-bulk input[type="number"] { width: 80px; }
.supervision-assignment { padding: 18px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.supervision-assignment.is-overdue { border-left: 3px solid #bd3c48; padding-left: 12px; }
.supervision-assignment p { font-size: 14px; }
.supervision-review { display: grid; gap: 12px; margin-top: 12px; }
.supervision-review input[type="datetime-local"] { max-width: 280px; }
.supervision-history { border-bottom: 1px solid var(--line); padding: 12px 0; }
.supervision-history summary { cursor: pointer; overflow-wrap: anywhere; }
.supervision-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.supervision-announcement { display: grid; gap: 12px; margin: 20px 0; }
.supervision-preview { padding: 16px 0; border-block: 1px solid var(--line); }
.supervision-error { color: #bd3c48; }
.supervision-group-assignments > summary { padding: 16px 0; cursor: pointer; font-weight: 600; }
.supervision .btn { white-space: normal; }
.learner-section { padding: 20px 0; min-width: 0; }
.learner-section h3 { font-size: 22px; margin: 0 0 16px; }
.learner-section .detail-block { padding: 16px 0; border: 0; border-radius: 0; background: none; }
.learner-section .list { grid-template-columns: minmax(0, 1fr); }
.learner-section .item { min-width: 0; border-radius: 8px; overflow-wrap: anywhere; }
.learning-question { min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.learning-question-media, .supervision-question-media { margin: 10px 0; }
.learning-question-media img, .supervision-question-media img { display: block; width: auto; max-width: 100%; max-height: 560px; object-fit: contain; border-radius: 6px; }
.self-quiz-form, .learning-answer-editor { min-width: 0; }
.learning-answer-editor textarea { box-sizing: border-box; min-width: 0; padding: 10px; color: var(--ink); background: var(--field-bg); border: 1px solid var(--line); border-radius: 6px; }
.learner-section .btn { max-width: 100%; white-space: normal; }
.topic-files { margin: 16px 0; }
.topic-files figure { margin: 12px 0; }
.topic-files video, .topic-files img { display: block; max-width: 100%; max-height: 480px; object-fit: contain; }
.topic-sections { display: grid; gap: 8px; margin: 16px 0; }
.topic-section { border-top: 1px solid var(--line); }
.topic-section:last-child { border-bottom: 1px solid var(--line); }
.topic-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 2px; cursor: pointer; font-weight: 700; }
.topic-section > summary::before { content: "›"; flex: 0 0 auto; font-size: 24px; line-height: 1; transition: transform 0.15s ease; }
.topic-section[open] > summary::before { transform: rotate(90deg); }
.topic-section > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.topic-section .topic-files { margin: 0 0 14px; padding-left: 12px; }
.learning-answer-editor textarea { width: 100%; min-height: 100px; }
.learning-answer-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.learning-answer-actions label { min-width: 0; display: grid; gap: 4px; }
.learning-answer-actions input { width: 100%; min-width: 0; max-width: 100%; }
.learning-answer-editor audio, .supervision audio { display: block; max-width: 100%; margin: 8px 0; }
@media (max-width: 760px) {
  .supervision-filters, .supervision-assign { grid-template-columns: minmax(0,1fr); }
  .supervision-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .supervision-table { min-width: 550px; }
  .supervision-heading { align-items: flex-start; }
}