/* The course detail side panel, its drag-to-resize handle, and the
   per-section table rendered inside it. */

#panel {
  position: relative;
  width: 420px; flex: none; border-left: 1px solid var(--gridline);
  background: var(--surface-1);
  display: none;
}
/* #panel itself never scrolls, so #panelResizer (a direct child, positioned
   top:0/bottom:0 against it) stays put at a fixed screen position the whole
   height of the panel, "sticky", even while #panelBody scrolls beneath it. */
#panel.open { display: flex; flex-direction: column; }
#panelResizer {
  position: absolute; top: 0; bottom: 0; left: -6px; width: 12px;
  cursor: col-resize; z-index: 5; touch-action: none;
}
#panelResizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px;
  background: var(--border-strong); opacity: 0.35;
}
#panelResizer:hover::after, #panelResizer.dragging::after { opacity: 0.9; }
#panelResizer.dragging { background: var(--border-strong); opacity: 0.15; }
#panel .code { font-size: 15px; font-weight: 700; }
#panel .title { font-size: 13.5px; color: var(--text-secondary); margin: 2px 0 10px; }
#panel .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#panel .meta span {
  font-size: 11px; color: var(--text-secondary); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 2px 8px;
}
#panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin: 16px 0 6px; }
#panel .desc { font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; }
#panel .req-line { font-size: 12.5px; margin-bottom: 6px; }
#panel .req-line .note { color: var(--muted); font-size: 11px; display: block; }
#panel a.course-link { color: var(--link); text-decoration: none; cursor: pointer; }
#panel a.course-link:hover { text-decoration: underline; }
#panel #closePanel {
  flex: none; align-self: flex-end; margin: 12px 12px 0 0;
  border: none; background: none; color: var(--muted); font-size: 16px; cursor: pointer;
  line-height: 1;
}
#panelBody { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
#panel .empty { color: var(--muted); font-size: 12.5px; }
#panel .termlist { font-size: 12px; color: var(--text-secondary); }
#panel .table-scroll { overflow-x: auto; }
#panel table.sections { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12px; }
#panel table.sections th, #panel table.sections td {
  text-align: left; padding: 3px 6px 3px 0; border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
#panel table.sections th {
  color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em;
}
#panel table.sections td { color: var(--text-secondary); }
#panel table.sections td.section-term { color: var(--text-primary); font-weight: 600; white-space: normal; }
#panel table.sections td.section-instructors { white-space: normal; }