/* Sidebar on desktop; one accessible drawer on phones and narrow tablets. */
.shell{grid-template-columns:clamp(220px,calc(22vw - 60px),260px) minmax(0,1fr)}
.side{height:100dvh;padding:28px 24px}
.side-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.side-header .brand{min-width:0}
.side-header .mark{flex-shrink:0}
.mobile-header,.navigation-toggle,.navigation-close{display:none}
.navigation-overlay{position:fixed;inset:0;z-index:30;background:rgba(23,36,60,.58)}
.course-navigation{margin:0;padding:0;border:0;min-width:0}
.course-navigation>summary{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:center;gap:6px;list-style:none;padding:11px 12px;border-radius:12px;color:var(--nav-text);font-size:.9375rem;font-weight:750;min-height:48px}
.course-navigation>summary::-webkit-details-marker{display:none}
.course-navigation>summary .ico{width:22px}
.course-navigation>summary:hover,.course-navigation:has(button.active)>summary{background:var(--nav-soft);color:var(--nav-accent)}
.course-navigation>summary:focus-visible,.navigation-close:focus-visible{outline:3px solid var(--nav-accent);outline-offset:2px}
.course-navigation-chevron{width:16px;height:16px;transition:transform .2s ease}
.course-navigation[open] .course-navigation-chevron{transform:rotate(180deg)}
.course-navigation-links{display:grid;gap:3px;margin:6px 0 8px 10px;padding-left:8px;border-left:1px solid var(--nav-soft)}
.course-navigation-links button{width:100%;min-width:0;min-height:44px;font-size:.875rem}

@media(max-width:820px){
  body.navigation-open{overflow:hidden}
  .shell{display:block}
  .side{position:fixed;inset:0 auto 0 0;z-index:40;width:min(320px,calc(100vw - 24px));height:100dvh;padding:24px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border-radius:0 22px 22px 0;box-shadow:14px 0 48px rgba(23,36,60,.22);visibility:hidden;pointer-events:none;transform:translateX(-100%);transition:transform .2s ease,visibility .2s ease}
  .side.is-open{visibility:visible;pointer-events:auto;transform:translateX(0)}
  .side .brand{display:flex;font-size:1.125rem}
  .side .streak{display:block;margin-top:24px}
  .side .nav{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:24px;width:100%;justify-content:normal}
  .side .nav button{display:flex;align-items:center;gap:4px;flex:none;width:100%;min-width:0;min-height:46px;padding:11px 12px;font-size:.9375rem;text-align:left;white-space:normal}
  .side .nav .ico{display:inline-block;flex-shrink:0;width:22px;font-size:1rem}
  .side .nav button.active{box-shadow:inset 3px 0 var(--brand)}
  .side .nav-caption{width:auto;margin:16px 12px 5px}
  .side .course-navigation-links button{font-size:.875rem}
  .navigation-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--nav-soft);border-radius:12px;background:var(--nav-soft);color:var(--nav-text);cursor:pointer}
  .navigation-close svg,.navigation-toggle svg{width:24px;height:24px;flex-shrink:0}
  .mobile-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}
  .mobile-brand{display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font-size:1.125rem;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}
  .mobile-brand .mark{width:40px;height:40px;flex-shrink:0;color:white;font-size:26px}
  .mobile-brand strong{color:var(--accent);font-weight:850}
  .mobile-brand:focus-visible{border-radius:8px}
  .navigation-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);cursor:pointer}
  .navigation-toggle:hover{background:var(--accent-soft)}
  .account-topbar{position:static;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 20px}
  .account-topbar-label{display:block;min-width:0;flex:1;font-size:.8125rem}
  .topbar-account{display:flex;align-items:center;justify-content:flex-end;gap:12px;width:auto;min-width:0}
  .account-topbar .save-status{font-size:.8125rem;line-height:1.4;max-width:min(45vw,240px)}
  .account-menu>summary{min-width:44px;justify-content:flex-end;gap:7px}
  .account-menu-label{display:none}
  .account-panel{max-height:calc(100dvh - 160px)}
  main{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
}

@media(max-width:480px){
  .mobile-header{padding-left:16px;padding-right:16px}
  .account-topbar{padding-left:16px;padding-right:16px}
  .account-topbar-label{display:none}
  .topbar-account{width:100%;justify-content:space-between}
  .account-topbar .save-status{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .side,.course-navigation-chevron{transition:none}
}