/* Keep long result collections inside their own panel instead of stretching the whole page. */
.table-wrap,
.cards,
.attention-list,
.finance-priority-list,
.counseling-case-list,
.homework-card-grid,
.homework-student-grid,
.attendance-student-grid,
.portfolio-card-grid,
.portfolio-compact-list,
.portfolio-class-grid,
.portfolio-student-summary-grid,
.teacher-person-grid,
.task-day-agenda,
.task-modal-list,
.family-message-recipient-table,
.library-table-wrap,
.library-rank-list,
.library-recommendations {
  max-height: min(62vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.table-wrap thead th,
.library-table-wrap thead th,
.family-message-recipient-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fafbf9;
  box-shadow: 0 1px 0 var(--line);
}

.cards,
.homework-card-grid,
.homework-student-grid,
.attendance-student-grid,
.portfolio-card-grid,
.portfolio-compact-list,
.portfolio-class-grid,
.portfolio-student-summary-grid,
.teacher-person-grid,
.counseling-case-list,
.library-rank-list,
.library-recommendations,
.attention-list,
.finance-priority-list,
.task-day-agenda,
.task-modal-list {
  padding-inline-end: 4px;
}

@media (max-width: 760px) {
  .table-wrap,
  .cards,
  .attention-list,
  .finance-priority-list,
  .counseling-case-list,
  .homework-card-grid,
  .homework-student-grid,
  .attendance-student-grid,
  .portfolio-card-grid,
  .portfolio-compact-list,
  .portfolio-class-grid,
  .portfolio-student-summary-grid,
  .teacher-person-grid,
  .task-day-agenda,
  .task-modal-list,
  .family-message-recipient-table,
  .library-table-wrap,
  .library-rank-list,
  .library-recommendations {
    max-height: 68vh;
  }
}

@media print {
  .table-wrap,
  .cards,
  .attention-list,
  .finance-priority-list,
  .counseling-case-list,
  .homework-card-grid,
  .homework-student-grid,
  .attendance-student-grid,
  .portfolio-card-grid,
  .portfolio-compact-list,
  .portfolio-class-grid,
  .portfolio-student-summary-grid,
  .teacher-person-grid,
  .task-day-agenda,
  .task-modal-list,
  .family-message-recipient-table,
  .library-table-wrap,
  .library-rank-list,
  .library-recommendations {
    max-height: none;
    overflow: visible;
  }

  .table-wrap thead th,
  .library-table-wrap thead th,
  .family-message-recipient-table thead th {
    position: static;
    box-shadow: none;
  }
}