.mobile-menu-toggle{display:none}body>aside{overflow-y:auto;height:100dvh}#learner-navigation{flex-shrink:0}#learner-navigation a{min-height:44px;align-items:center}#learner-navigation a span{min-width:0;line-height:1.4}body>aside .brand{flex-shrink:0;margin-bottom:24px}body>aside .aside-bottom{padding-top:24px}main{min-width:0}button,a.button{touch-action:manipulation}
@media(max-width:700px){body>aside{height:auto;min-height:64px;position:sticky;top:0;padding:12px 18px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;overflow:visible;border-right:0;z-index:10;background:#fff}body>aside .brand{margin:0;gap:9px}body>aside .brand b{width:36px;height:36px;font-size:24px}body>aside .brand span{font-size:23px}.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;white-space:nowrap;font-size:14px}body>aside #learner-navigation{display:none;position:absolute;left:0;right:0;top:100%;width:auto;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;grid-template-columns:1fr;gap:4px;padding:12px 18px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px #2d254a18}body>aside.menu-open #learner-navigation{display:grid}body>aside #learner-navigation a{display:flex;gap:13px;padding:12px 14px;font-size:15px;white-space:normal;min-width:0}body>aside #learner-navigation a span{display:inline;font-size:14px}.shell{margin-left:0}.shell header{position:static;height:auto;min-height:54px;padding:12px 18px;gap:10px}#breadcrumb{font-size:12px;min-width:0}header .sync-badge{display:none}main{padding:24px 18px}.welcome>aside{display:none}.account-profile h2{font-size:23px;line-height:1.3}.section-head .pill{max-width:100%}}

/* Consistent navigation pictograms stay crisp at any device pixel ratio. */
#learner-navigation{gap:5px}
#learner-navigation a{gap:11px;padding:9px 10px;min-height:50px;border-radius:13px;transition:background-color .18s,color .18s}
#learner-navigation .nav-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--icon-bg,#f0eafa);color:var(--icon-color,#7552b8)}
#learner-navigation .nav-icon svg{display:block;width:20px;height:20px;flex:none}
#learner-navigation .nav-label{display:block;flex:1;min-width:0;line-height:1.45;font-size:12.5px;font-weight:600;white-space:normal}
.nav-icon-violet{--icon-bg:#f0eafa;--icon-color:#7552b8}
.nav-icon-blue{--icon-bg:#eaf1fc;--icon-color:#4977b6}
.nav-icon-teal{--icon-bg:#e6f4ef;--icon-color:#267b66}
.nav-icon-amber{--icon-bg:#fff2df;--icon-color:#a46c23}
.nav-icon-coral{--icon-bg:#ffede6;--icon-color:#b96d4e}
.nav-icon-rose{--icon-bg:#fbeaf1;--icon-color:#ad5b82}
.nav-icon-slate{--icon-bg:#eef0f5;--icon-color:#66748b}
#learner-navigation a:hover{background:#f8f6fc;color:#514065}
#learner-navigation a.active{background:#f0ebfa;color:#6545a9;box-shadow:inset 3px 0 #8663ce}
#learner-navigation a.active .nav-icon{background:#fff;box-shadow:0 2px 5px #5b39850a}
@media(max-width:700px){body>aside #learner-navigation a{gap:12px;padding:10px 12px}body>aside #learner-navigation .nav-icon{display:grid;width:36px;height:36px;flex-basis:36px;border-radius:11px}body>aside #learner-navigation .nav-icon svg{width:21px;height:21px}body>aside #learner-navigation .nav-label{display:block;font-size:14px}}