/* Students / Lecturers switch, sitting inside each page's header.
   The highlight slides to the tab you pick, then the page changes with a
   cross-document view transition where the browser supports one. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

.aud {
  --aud-w: 168px;
  position: relative; flex: none;
  display: grid; grid-template-columns: 1fr 1fr;
  width: var(--aud-w); height: 34px; padding: 3px; border-radius: 999px;
  background: rgba(118, 118, 128, .14);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  isolation: isolate;
}
/* the sliding highlight; in RTL the first tab is on the right */
.aud::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px;
  inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: #177e89; box-shadow: 0 2px 6px -2px rgba(23, 126, 137, .6);
  transition: transform .32s cubic-bezier(.3, 1.4, .5, 1);
}
.aud[data-on="2"]::before { transform: translateX(100%); }
[dir="rtl"] .aud[data-on="2"]::before, .aud[dir="rtl"][data-on="2"]::before { transform: translateX(-100%); }

.aud a {
  display: grid; place-items: center; border-radius: 999px; white-space: nowrap;
  color: inherit; opacity: .72; text-decoration: none; transition: color .25s, opacity .25s;
}
.aud a:hover { opacity: 1; }
.aud a[aria-current="page"], .aud a.going { color: #fff; opacity: 1; }
.aud[data-going] a[aria-current="page"]:not(.going) { color: inherit; opacity: .72; }
.aud a:focus-visible { outline: 2px solid #5cc6cf; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .aud::before { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}