/* Local to this course: replace the timeline dots with linked layout previews. */
#taskTimeline.course-layout-outline {list-style:none;margin:0;padding:0;}
.course-layout-outline > li {display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:center;padding-left:0;cursor:pointer;}
.course-layout-outline > li:focus-visible {outline:3px solid #ffc368;outline-offset:4px;}
.course-layout-outline .course-task-details {grid-column:2;min-width:0;}
.course-layout-thumbnails {display:flex;gap:8px;align-items:center;grid-column:1;grid-row:1;}
.course-layout-thumbnails {width:80px;flex-shrink:0;}
.course-layout-thumbnails img {display:block;width:100%;height:auto;border:0;border-radius:0;background:transparent;}
/* Fit both portrait and landscape lightboxes to their images without side gutters. */
.course-image-dialog {width:calc(100% - 2rem);max-width:var(--course-image-width);margin-left:auto;margin-right:auto;}
.course-image-dialog .modal-content {border:0;overflow:hidden;}
.course-image-dialog .modal-header {flex-shrink:0;}
.course-image-dialog .modal-title {min-width:0;overflow-wrap:anywhere;}
.course-image-dialog .modal-body {padding:0;}
.course-image-dialog .modal-body img {display:block;width:100%;height:auto;max-height:none;border-radius:0!important;}
@media(max-width:575px) {
  .course-layout-outline > li {grid-template-columns:55px minmax(0,1fr);gap:12px;}
  .course-layout-thumbnails {gap:6px;}
  .course-layout-thumbnails {width:55px;}
}