/* Canonical owner: theme/assets/design-system/quick-access.css. */
.dttt-canonical-quick-access {
  width: min(var(--dttt-content-max), calc(100% - 2 * var(--dttt-gutter-desktop)));
  height: var(--dttt-quick-height);
  min-height: var(--dttt-quick-height);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  padding: 6px;
  overflow: visible;
  background: var(--dttt-color-surface);
  border: 1px solid var(--dttt-color-border-strong);
  border-radius: var(--dttt-radius-card);
  box-shadow: var(--dttt-shadow-floating);
  z-index: var(--dttt-z-sticky);
}
.dttt-canonical-quick-access[data-variant] { display: grid; position: relative; }
.dttt-quick-link:focus-visible,
.dttt-more-sheet a:focus-visible,
.dttt-more-sheet button:focus-visible { outline: 3px solid var(--dttt-color-primary); outline-offset: -3px; }
.dttt-more-sheet {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: calc(var(--dttt-z-sticky) + 2);
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 480px);
  overflow: auto;
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid var(--dttt-color-border);
  border-radius: var(--dttt-radius-modal);
  background: var(--dttt-color-surface);
  box-shadow: var(--dttt-shadow-floating);
  text-align: left;
}
.dttt-more-sheet[hidden] { display: none; }
.dttt-more-sheet__list strong { font-size: 14px; line-height: 1.25; }
.dttt-more-sheet__list small { color: var(--dttt-color-muted); font-size: 12px; line-height: 1.35; }
.dttt-more-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dttt-space-3); padding: 6px 8px 10px; color: var(--dttt-color-ink); }
.dttt-more-sheet__head strong { font-size: 16px; }
.dttt-more-sheet__close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--dttt-color-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.dttt-more-sheet__list { display: grid; gap: 3px; }
.dttt-modal,
.dttt-drawer,
.dttt-more-sheet { background: white; border: 1px solid var(--dttt-color-border); border-radius: var(--dttt-radius-modal); box-shadow: var(--dttt-shadow-floating); }
@media (max-width: 1023px) {
.dttt-canonical-quick-access {
    width: calc(100% - 2 * var(--dttt-gutter-tablet));
  }
}
:root {
  --dttt-quick-max: 1180px;
  --dttt-quick-gutter: 16px;
  --dttt-quick-height: 64px;
  --dttt-quick-mobile-inset: 8px;
  --dttt-quick-radius: 16px;
  --dttt-quick-color: var(--dttt-role, #0876b6);
  --dttt-quick-soft: var(--dttt-role-soft, #edf7fb);
}
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] {
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(var(--dttt-quick-slots, 4), minmax(0, 1fr));
  gap: 4px;
  width: min(var(--dttt-quick-max), calc(100% - 2 * var(--dttt-quick-gutter)));
  max-width: var(--dttt-quick-max);
  min-width: 0;
  height: var(--dttt-quick-height);
  min-height: var(--dttt-quick-height);
  max-height: var(--dttt-quick-height);
  margin: -12px auto 20px;
  padding: 5px;
  overflow: visible;
  border: 1px solid #cfdee7;
  border-radius: var(--dttt-quick-radius);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 30px rgba(8, 35, 58, .12);
  isolation: isolate;
}
html body nav.dttt-canonical-quick-access > :where(a, .dttt-quick-item, .dttt-quick-more) {
  box-sizing: border-box;
  position: relative;
  display: block;
  min-width: 0;
  width: auto;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 11px;
  background: transparent;
}
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] > a,
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-link,
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-trigger,
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-more-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  margin: 0;
  padding: 6px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #315b70;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] > a,
html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-trigger,
html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-more-trigger {
  border-radius: 11px;
}
html body nav.dttt-canonical-quick-access :where(.dttt-quick-link, .dttt-quick-trigger, .dttt-quick-more-trigger):is(:hover, :focus-visible),
html body nav.dttt-canonical-quick-access :where(.is-active, .is-primary, .is-open) > :where(.dttt-quick-trigger, .dttt-quick-more-trigger),
html body nav.dttt-canonical-quick-access > :where(a.is-active, a.is-primary) {
  background: var(--dttt-quick-soft);
  color: var(--dttt-quick-color);
  outline: 0;
}
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-icon {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 0;
}
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body nav.dttt-canonical-quick-access .dttt-toolbar-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 18px;
}
html body .dttt-quick-popover,
html body .dttt-more-sheet {
  box-sizing: border-box;
  top: calc(100% + 8px);
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 12050;
  width: min(360px, calc(100vw - 24px));
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: min(60vh, 430px);
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d5e4ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(8, 35, 58, .22);
  transform: none;
}
html body .dttt-quick-popover[hidden], html body .dttt-more-sheet[hidden] { display: none; }
html body nav.dttt-canonical-quick-access > :nth-child(n+3) > :where(.dttt-quick-popover, .dttt-more-sheet) { right: 0; left: auto; }
html body :where(.dttt-quick-popover, .dttt-more-sheet) a,
html body .dttt-more-sheet__list > [data-dttt-quick-item] {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 9px;
  color: #234f66;
  text-decoration: none;
}
html body :where(.dttt-quick-popover, .dttt-more-sheet) a:is(:hover, :focus-visible),
html body .dttt-more-sheet__list > [data-dttt-quick-item]:is(:hover, :focus-visible) {
  background: var(--dttt-quick-soft);
  outline: 0;
}
html body :where(.dttt-quick-popover, .dttt-more-sheet) a strong { font-size: 14px; line-height: 1.25; }
html body :where(.dttt-quick-popover, .dttt-more-sheet) a small { color: #718995; font-size: 12px; line-height: 1.35; }
html body .dttt-more-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px 9px;
  color: #173e57;
}
html body .dttt-more-sheet__head strong { font-size: 16px; }
html body .dttt-more-sheet__close {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #718995;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
html body .dttt-more-sheet__list { display: grid; gap: 3px; }
@media (prefers-reduced-motion: reduce) {
html body nav.dttt-canonical-quick-access *, html body .dttt-quick-popover, html body .dttt-more-sheet { transition: none; }
}
html body .dttt-canonical-quick-access .dttt-more-sheet[hidden]{display:none}
html body .dttt-canonical-quick-access .dttt-more-sheet{
  top:calc(100% + 8px);
  bottom:auto;
  height:auto;
  min-height:0;
}
@media(max-width:740px) {
.dttt-mobile-nav{padding:9px 6px}
.dttt-mobile-nav a{font-size:11px;text-align:center}
}
html body nav.dttt-canonical-quick-access[data-variant]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;
  height:var(--dttt-quick-height);
  min-height:var(--dttt-quick-height);
  margin-left:auto;
  margin-right:auto;
  padding:6px;
}
html body nav.dttt-canonical-quick-access[data-visible-count="1"]{ --dttt-quick-slots: 1;grid-template-columns:minmax(0,1fr)}
html body nav.dttt-canonical-quick-access[data-visible-count="2"]{ --dttt-quick-slots: 2;grid-template-columns:repeat(2,minmax(0,1fr))}
html body nav.dttt-canonical-quick-access[data-visible-count="3"]{ --dttt-quick-slots: 3;grid-template-columns:repeat(3,minmax(0,1fr))}
html body nav.dttt-canonical-quick-access[data-visible-count="4"]{ --dttt-quick-slots: 4;grid-template-columns:repeat(4,minmax(0,1fr))}
html body nav.dttt-canonical-quick-access[data-visible-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
html body nav.dttt-canonical-quick-access[data-visible-count="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
html body .dttt-site-header.dttt-quick-header-active .dttt-header-quick-host > nav.dttt-canonical-quick-access {
  width: 100% ;
  max-width: var(--dttt-quick-max) ;
  margin: 0 auto ;
  box-shadow: none ;
}
.dttt-quick-icon,
.dttt-toolbar-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: currentColor;
}
:where(.dttt-quick-icon, .dttt-toolbar-icon) svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dttt-quick-icon svg { width:21px;height:21px;flex:0 0 21px; }
.dttt-toolbar-label { min-width: 0; font-size: 14px; font-weight: 750; line-height:1.15; }
.dttt-toolbar-badge { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--dttt-radius-pill); font-size: 11px; line-height: 20px; flex:0 0 auto; }
html body .dttt-header-quick-host { display: none; }
html body .dttt-site-header.dttt-quick-header-active .dttt-header-quick-host {
  box-sizing: border-box ;
  display: block ;
  width: 100% ;
  padding: 5px max(16px, calc((100% - var(--dttt-quick-max)) / 2)) 7px ;
  border-top: 1px solid #dbe7ed ;
  background: rgba(255, 255, 255, .98) ;
}
html body nav.dttt-canonical-quick-access :where(.dttt-quick-copy, .dttt-toolbar-label) {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
html body nav.dttt-canonical-quick-access .dttt-quick-copy :where(strong, small) {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body nav.dttt-canonical-quick-access .dttt-quick-copy strong { font-size: 13px; font-weight: 850; }
html body nav.dttt-canonical-quick-access .dttt-quick-copy small { color: #718995; font-size: 11px; font-weight: 500; }

/* Canonical dock context: spacing and sentinel belong to Quick Access. */
body:has(.dttt-canonical-quick-access) .dttt-quick-sticky-sentinel { height: 1px; }

/* Public Home Quick Access intentionally overlaps the Hero by 12px on mobile. */
@media (max-width: 767px) {
.dttt-canonical-quick-access {
    position: fixed;
    inset: auto var(--dttt-dock-inset) calc(var(--dttt-dock-inset) + env(safe-area-inset-bottom));
    width: auto;
    height: var(--dttt-dock-height);
    min-height: var(--dttt-dock-height);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px;
    z-index: var(--dttt-z-dock);
  }
.dttt-canonical-quick-access[data-variant] {
    display: grid;
    position: fixed;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
.dttt-more-sheet.is-mobile-open {
    position: fixed;
    inset: auto 12px calc(var(--dttt-dock-height) + 2 * var(--dttt-dock-inset) + env(safe-area-inset-bottom)) 12px;
    top: auto;
    left: auto;
    width: auto;
    max-height: min(72vh, 560px);
    transform: none;
    z-index: calc(var(--dttt-z-dock) + 2); padding: 10px; }
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] {
    position: fixed;
    top: auto;
    right: var(--dttt-quick-mobile-inset);
    bottom: max(var(--dttt-quick-mobile-inset), env(safe-area-inset-bottom));
    left: var(--dttt-quick-mobile-inset);
    width: calc(100% - 2 * var(--dttt-quick-mobile-inset));
    max-width: none;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    margin: 0;
    padding: 3px;
  }
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] > a,
  html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-link,
  html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-trigger,
  html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-more-trigger {
    flex-direction: column;
    gap: 1px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 3px 2px;
    border-radius: 11px;
    text-align: center;
  }
html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] > a,
  html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-trigger,
  html body nav.dttt-quick-access.dttt-unified-nav-shell.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-quick-more-trigger {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 3px 2px;
    border-radius: 11px;
  }
html body nav.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] > :where(a, .dttt-quick-item, .dttt-quick-more) {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
html body > :where(.dttt-quick-popover, .dttt-more-sheet).is-mobile-open {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-height: min(58vh, 430px);
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }
html body.dttt-quick-overlay-open::before {
    position: fixed;
    inset: 0;
    z-index: 12040;
    background: rgba(4, 24, 39, .36);
    content: "";
  }
html body>.dttt-more-sheet.is-mobile-open,
 html body .dttt-canonical-quick-access .dttt-more-sheet.is-mobile-open{
  top:auto;
  bottom:calc(var(--dttt-dock-height) + 2 * var(--dttt-dock-inset) + env(safe-area-inset-bottom));
  height:auto;
  opacity:1;
  pointer-events:auto;
  transform:none;
  visibility:visible;
  z-index:12050;
 }
body:has(.dttt-home-hero) > .dttt-more-sheet.is-mobile-open {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: max-content;
    max-height: min(58vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    z-index: 12050;
  }
html body nav.dttt-canonical-quick-access[data-variant]{
  grid-template-columns:repeat(4,minmax(0,1fr));
  height:var(--dttt-dock-height);
  min-height:var(--dttt-dock-height);
  margin:0;
  padding:4px;
 }
.dttt-toolbar-label { max-width: 100%; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dttt-toolbar-badge { position: absolute; top: 2px; right: 6px; }
.dttt-quick-icon, .dttt-toolbar-icon { width: 22px; height: 22px; flex-basis: 22px; }
:where(.dttt-quick-icon, .dttt-toolbar-icon) svg { width: 20px; height: 20px; }
html body .dttt-site-header.dttt-quick-header-active .dttt-header-quick-host { display: none ; }
html body .dttt-canonical-quick-access .dttt-quick-copy strong{
  max-height:22px;
  overflow:hidden;
  overflow-wrap:anywhere;
  font-size:10px;
  line-height:11px;
  text-overflow:clip;
  white-space:normal;
 }
html body .dttt-canonical-quick-access .dttt-quick-copy small{display:none}
html body nav.dttt-canonical-quick-access :where(.dttt-quick-copy, .dttt-toolbar-label) {
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
html body nav.dttt-canonical-quick-access .dttt-quick-copy strong { font-size: 11px; line-height: 1.1; }
html body nav.dttt-canonical-quick-access .dttt-quick-copy small { display: none; }
  body:has(.dttt-canonical-quick-access) { padding-bottom: calc(var(--dttt-dock-h-mobile, 56px) + env(safe-area-inset-bottom) + 24px); }
  html body nav.dttt-public-quick-access[data-dttt-component="QuickAccess"] {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: calc(100% - 16px);
    margin: -12px 8px 20px;
  }
  html body nav.dttt-role-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] {
    position: relative;
    inset: auto;
    width: min(var(--dttt-shell-max), calc(100% - 2 * var(--dttt-shell-gutter)));
    max-width: var(--dttt-shell-max);
    height: var(--dttt-dock-height);
    min-height: var(--dttt-dock-height);
    max-height: var(--dttt-dock-height);
    margin: -12px auto 20px;
  }
  body:has(nav.dttt-role-quick-access.dttt-canonical-quick-access) { padding-bottom: 0; }
}

/* Student dashboard Quick Access shares the dashboard shell axis on desktop. */
@media (min-width: 681px) {
  html body main.dttt-canonical-page > .dttt-student-dashboard > nav.dttt-student-quick-access {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Live Classroom variant: the canonical QuickAccess component is embedded in the right rail. */
@media (min-width:681px){
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;height:var(--dttt-dock-height);min-height:var(--dttt-dock-height);max-height:var(--dttt-dock-height);margin:0;padding:4px;border:1px solid var(--live-border,#d6e6ee);border-radius:999px;box-shadow:0 8px 20px rgba(18,48,70,.06);background:#fff}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]>a{display:flex;align-items:center;flex-direction:row;justify-content:center;gap:9px;width:100%;height:auto;min-height:42px;max-height:none;padding:8px 10px;border:0;border-radius:999px;text-align:center}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]>a.is-active{background:var(--live-canvas,#f7f7f7);color:var(--live-blue,#111)}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-toolbar-label{overflow-wrap:anywhere;text-align:center;white-space:normal}
}
@media (max-width:680px){
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;height:auto;min-height:56px;max-height:none;margin:0;padding:4px;border:1px solid var(--live-border,#d6e6ee);border-radius:16px;box-shadow:0 6px 16px rgba(18,48,70,.05);background:#fff}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]>a{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:3px;width:100%;height:auto;min-height:52px;max-height:none;padding:7px 3px;border:0;border-radius:11px;text-align:center}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"]>a.is-active{background:var(--live-canvas,#f7f7f7);color:var(--live-blue,#111)}
html body nav.dttt-live-quick-access.dttt-canonical-quick-access[data-dttt-component="QuickAccess"] .dttt-toolbar-label{overflow-wrap:anywhere;text-align:center;white-space:normal}
}