/* Align's 320px charcoal slide-out navigation. Native dialog owns modality. */
.workspace.menu-is-open { overflow: hidden; }
.workspace .workspace-header .menu-trigger { justify-self: start; width: max(2.75em, 44px); min-width: max(2.75em, 44px); padding: .75rem; border: 0; color: var(--ink); background: transparent; }
.workspace .workspace-header .menu-trigger:hover { background: var(--canvas); }
.workspace .menu-icon { position: relative; display: block; width: 1.125rem; height: .875rem; border-block: 2px solid currentColor; }
.workspace .menu-icon::after { position: absolute; top: calc(50% - 1px); left: 0; width: 100%; border-top: 2px solid currentColor; content: ""; }
.workspace .workspace-drawer { position: fixed; inset: 0 auto 0 0; width: min(20rem, 100%); max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; margin: 0; padding: 0; border: 0; color: #fff; background: var(--drawer); box-shadow: 2px 2px 4px rgb(0 0 0 / 38%); overflow-y: auto; overscroll-behavior: contain; }
.workspace .workspace-drawer[open] { display: flex; flex-direction: column; }
.workspace .workspace-drawer::backdrop { background: rgb(255 255 255 / 50%); }
.workspace .workspace-drawer :focus-visible { outline-color: #fff; outline-offset: -4px; }
.workspace .workspace-drawer a, .workspace .workspace-drawer button { color: #fff; }
.workspace .drawer-heading { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.125rem .5rem; }
.workspace .drawer-heading h2 { margin: 0; color: #fff; font-size: .9375rem; letter-spacing: .0625rem; }
.workspace .workspace-drawer .menu-close { flex-shrink: 0; width: 2.75rem; padding: .75rem; border: 0; background: transparent; }
.workspace .workspace-drawer .menu-close:hover { background: var(--drawer-hover); }
.workspace .back-icon { display: block; width: .75rem; height: .75rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.workspace .drawer-identity { margin-inline: 1.875rem; padding: 1rem 0 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 31%); }
.workspace .drawer-school { margin: 0 0 .375rem; font-size: .9375rem; font-weight: 700; }
.workspace .drawer-account { margin: 0; color: #c8cacc; font-size: .8125rem; }
.workspace .drawer-navigation { padding-block: .625rem; }
.workspace .drawer-link, .workspace .drawer-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 1rem 1.875rem; color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.workspace .drawer-link:hover, .workspace .drawer-section > summary:hover, .workspace .drawer-links a:hover { color: #fff; background: var(--drawer-hover); }
.workspace .drawer-section > summary { list-style: none; }
.workspace .drawer-section > summary::-webkit-details-marker { display: none; }
.workspace .drawer-section > summary::after { flex: 0 0 .5rem; width: .5rem; height: .5rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); content: ""; }
.workspace .drawer-section[open] > summary::after { transform: rotate(225deg); }
.workspace .drawer-links { margin: 0; padding: .5rem 0 .625rem; list-style: none; }
.workspace .drawer-links a { display: flex; align-items: center; min-height: 2.75rem; padding: .625rem 1.875rem .625rem 3.125rem; font-size: .8125rem; text-decoration: none; }
.workspace .drawer-navigation a[aria-current="page"] { background: var(--drawer-hover); box-shadow: inset 3px 0 #fff; font-weight: 700; text-decoration: underline; }
.workspace .drawer-footer { margin-top: auto; padding: 1.25rem 1.875rem; border-top: 1px solid rgb(255 255 255 / 31%); }
.workspace .drawer-footer a, .workspace .drawer-footer button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 0; border: 0; background: transparent; font: inherit; letter-spacing: normal; text-transform: none; text-decoration: underline; }
.workspace .drawer-footer a:hover, .workspace .drawer-footer button:hover { color: #fff; background: transparent; text-decoration-thickness: 2px; }
.workspace .drawer-footer p { margin: 1rem 0 0; color: #c8cacc; font-size: .8125rem; }

@media (prefers-reduced-motion: no-preference) {
  .workspace .workspace-drawer[open] { animation: workspace-drawer-enter 200ms ease-out; }
  @keyframes workspace-drawer-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}

@media (max-width: 35rem) {
  .workspace .drawer-identity { margin-inline: 1.25rem; }
  .workspace .drawer-link, .workspace .drawer-section > summary, .workspace .drawer-footer { padding-inline: 1.25rem; }
  .workspace .drawer-links a { padding-inline: 2rem 1.25rem; }
}