/* Native-size vectors match 12 px prose; narrow screens scroll instead of shrinking labels. */
.course-figure {
  max-width: 100%;
  margin: 22px 0;
  padding: 8px 0 14px;
  border: 0;
  box-shadow: none;
}
.course-figure > .diagram-scroll {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 0 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border: 0;
  background: transparent;
}
.course-figure img,
.course-figure > .diagram-scroll img {
  display: block;
  width: var(--diagram-width, auto);
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0 auto;
  border: 0;
}
.course-body .lab-topology { width: 850px; min-width: 0; max-width: none; }
.course-body svg.network-diagram { width: 800px; min-width: 0; max-width: none; margin: auto; }
.course-body svg.network-diagram text { font-size: 12px; }
.course-body svg.network-diagram text[font-size="11"] { font-size: 11px; }
.course-body svg.tcp-diagram { width: 620px; min-width: 0; max-width: none; }
.network-lecture #tcp-prefix-plot { width: 560px; min-width: 0; max-width: none; margin: auto; }
.course-figure figcaption {
  max-width: 760px;
  margin: 10px auto 0;
  color: #52616d;
  font-size: 11px;
  line-height: 1.65;
  text-align: left;
}
.course-figure .diagram-open {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 6px;
  border: 0;
  border-radius: 4px;
  color: #315f80;
  box-shadow: none;
}
.course-figure .diagram-open:hover { background: #edf2f6; }
.course-figure .diagram-open svg { width: 14px; height: 14px; }
.course-figure .diagram-scroll:focus-visible,
.course-figure .diagram-open:focus-visible { outline: 2px solid #315f80; outline-offset: 2px; }
@media print {
  .course-figure { break-inside: avoid; padding: 0; }
  .course-figure > .diagram-scroll { width: auto; overflow: visible; padding: 0; }
  .course-figure > .diagram-scroll img,
  .course-body svg.network-diagram,
  .course-body svg.tcp-diagram,
  .network-lecture #tcp-prefix-plot,
  .course-body .lab-topology { width: 100%; min-width: 0; max-width: 100%; max-height: 225mm; object-fit: contain; }
  .course-figure .diagram-open { display: none; }
}