/* Course sidebar — modern scrolling */
#portal .p-list{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(18,184,134,.35) transparent;
  --fade:28px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),transparent);
  transition:scrollbar-color .2s;
}
#portal .p-list.is-end,#portal .p-list:not(.is-scroll){-webkit-mask-image:none;mask-image:none}
#portal .p-list:hover{scrollbar-color:rgba(18,184,134,.7) transparent}
#portal .p-list::-webkit-scrollbar{width:8px}
#portal .p-list::-webkit-scrollbar-track{background:transparent}
#portal .p-list::-webkit-scrollbar-thumb{background:rgba(18,184,134,.35);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
#portal .p-list:hover::-webkit-scrollbar-thumb{background-color:rgba(18,184,134,.7)}

/* Sticky module headers: you always see which module you're in */
#portal .p-mod > button{position:sticky;top:0;z-index:2;background:rgba(248,250,253,.985);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
#portal .p-mod > button:hover{background:rgba(255,255,255,.96)}
#portal .p-mod > button[aria-expanded="true"]{box-shadow:0 1px 0 #E9EDF4,0 6px 12px -10px rgba(23,32,51,.25)}
#portal .p-list:not(.is-top) .p-mod > button[aria-expanded="true"]{box-shadow:0 1px 0 #E9EDF4,0 8px 14px -10px rgba(23,32,51,.35)}

/* Active lesson & touch */
#portal .p-les{scroll-margin-block:56px;-webkit-tap-highlight-color:transparent}
#portal .p-les.on{box-shadow:inset 3px 0 0 #12B886}
@media (prefers-reduced-motion:reduce){#portal .p-list{transition:none}}