@font-face {
  font-family: Workbench;
  src: url(workbench.woff) format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --purple: #57068c;
  --deep-purple: #220337;
  font-family: Arial, sans-serif;
  color: #000;
}
* { box-sizing: border-box; }
body { margin: 0; }

header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 4px 25px 4px 39px;
  background: var(--purple);
  color: #fff;
}
.logo { display: block; width: 170px; height: auto; transform: translateY(1px); }
.university { padding: 0 10px; font: 18px/24px "Century Gothic", Arial, sans-serif; }
.logout {
  margin-left: auto;
  width: 55px;
  min-height: 30px;
  transform: translateY(-2px);
  border: 0;
  border-radius: 5px;
  background: var(--deep-purple);
  color: #fff;
  padding: 2px 8px 3px;
  font: 12px Arial, sans-serif;
  opacity: 1;
}

.layout { display: flex; }
aside { position: relative; min-width: 5px; background: var(--purple); color: #fff; flex: 0 0 auto; }
aside nav { width: 280px; padding-right: 5px; }
.menu-toggle {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 1;
  padding: 0;
  width: 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle img { display: block; width: 100%; }
.menu-toggle[aria-expanded="false"] { right: auto; left: 0; }
#menu-search {
  display: block;
  width: calc(100% - 20px);
  margin: 2px 10px 4px;
  border: 2px solid #999;
  border-radius: 8px;
  padding: 5px 8px 5px 27px;
  font: 14px/17px Arial, sans-serif;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='m12 12 5 5' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat 5px center / 17px;
}
nav details { margin: 2px 2px 0; }
nav summary {
  position: relative;
  list-style: none;
  background: var(--deep-purple);
  padding: 7px 6px;
  border-radius: 5px;
  font: bold 12px/16px Arial, sans-serif;
  cursor: pointer;
}
nav summary::-webkit-details-marker { display: none; }
nav summary::after { content: '▼'; position: absolute; right: 5px; color: #999; font-size: 11px; }
nav details[open] summary::after { content: '▲'; }
.favorite { position: absolute; top: 2px; width: 20px; height: 20px; margin-left: 2px; }
.menu-item { margin: 0; padding-left: 30px; line-height: 24px; }
nav details:last-child .menu-item { padding-left: 6px; }
.empty { text-align: center; margin: 0; padding: 2px; color: #999; font-style: italic; line-height: 24px; }

main { flex: 1; min-width: 0; padding: 0 5px 0 0; text-align: center; }
h1 { margin: 0; padding: 10px 0; color: var(--purple); font: bold 18px/21px Arial, sans-serif; }
.mobile-logo, .mobile-footer, .mobile-view-link { display: none; }
article {
  width: min(350px, calc(100% - 8px));
  margin: 4px auto;
  box-shadow: 1px 1px 2px #444, 0 0 2px #e6e6e6;
  font-size: 20px;
}
#clock {
  padding: 5px;
  color: var(--purple);
  font: 500 28px/29px Workbench, monospace;
  letter-spacing: 5px;
  white-space: nowrap;
}
.portrait { display: block; margin: 5px auto; height: 200px; width: auto; }
article p { margin: 0; padding: 3px; line-height: 23px; }
.expiry { color: #2e8540; }
#edit-expiry {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}
#expiry-dialog {
  width: min(360px, calc(100% - 32px));
  padding: 20px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 24px #0004;
}
#expiry-dialog::backdrop { background: #0006; }
#expiry-dialog h2 { margin: 0 0 16px; font-size: 20px; }
#expiry-input { display: block; width: 100%; min-height: 44px; margin-top: 6px; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-actions button { min-height: 44px; padding: 0 14px; font: inherit; }
.credential {
  position: relative;
  isolation: isolate;
  width: min(250px, calc(100% - 16px));
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 8px 0;
  box-sizing: content-box;
}
.credential img { width: 100%; position: relative; display: block; }
.globe { position: absolute; inset: 9px 0 7px; transform: translateX(-5px); opacity: .4; overflow: hidden; }
.globe::before {
  content: "";
  display: block;
  width: 4900%;
  height: 100%;
  background: url(rotatingearthsprite-h.webp) no-repeat 0 0 / 100% 100%;
  animation: rotatingearth 4s steps(49) infinite;
}
@keyframes rotatingearth { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .globe::before { animation: none; } }
.demo { display: block; margin: 4px 0; color: var(--purple); font: bold 10px/12px Arial, sans-serif; letter-spacing: .12em; }
footer { text-align: center; font-size: 13px; line-height: 17px; padding: 4px 12px; margin-bottom: 20px; }
footer span { margin: 0 .55em; }

@media (width < 800px) {
  aside nav { position: absolute; background: var(--purple); z-index: 2; }
  .menu-toggle { z-index: 3; }
  .menu-toggle[aria-expanded="true"] { left: 269px; }

  body:not(.full-site) header { display: none; }
  body:not(.full-site) main { padding: 0; }
  body:not(.full-site) aside { min-width: 0; }
  body:not(.full-site) aside nav { top: 36px; }
  body:not(.full-site) .menu-toggle {
    inset: 0 auto auto 0;
    width: 40px;
    height: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M2 4h18M2 11h18M2 18h18' stroke='%2357068c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  }
  body:not(.full-site) .menu-toggle img { display: none; }
  .page-heading { position: relative; }
  body:not(.full-site) h1 { padding: 0; font-size: clamp(25px, 9vw, 32px); line-height: 36px; }
  body:not(.full-site) .mobile-logo {
    display: block;
    position: absolute;
    top: 0;
    right: 4px;
    width: clamp(72px, 26vw, 102px);
    height: auto;
  }
  body:not(.full-site) article { margin-top: 0; }
  body:not(.full-site) article p { line-height: 25px; }
  body:not(.full-site) .credential { padding: 6px 0 10px; }
  body:not(.full-site) .globe { inset: 7px 0 9px; }
  body:not(.full-site) footer { padding-top: 20px; font-size: 12px; color: #555; }
  body:not(.full-site) .desktop-footer { display: none; }
  body:not(.full-site) .mobile-footer { display: block; }
  .mobile-footer a { color: inherit; text-decoration: none; }

  .full-site header { gap: 4px; padding: 4px 10px; }
  .full-site .logo { width: min(170px, 30vw); }
  .full-site .university { padding: 0 4px; font-size: 16px; }
  .full-site .mobile-view-link { display: inline; }
}