/* Keep navigation accessible without scrolling the whole workspace. */
@media (min-width: 621px) {
  .app-shell > .sidebar { height: 100dvh; overflow: hidden; }
  .sidebar > .brand, .sidebar > .sidebar-user { flex-shrink: 0; }
  .sidebar > nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #617cba #ffffff0a;
    padding: 3px 5px 8px 0;
    margin-bottom: 10px;
  }
  .sidebar > nav > button { flex: 0 0 45px; }
  .sidebar > nav::-webkit-scrollbar { width: 6px; }
  .sidebar > nav::-webkit-scrollbar-track { background: #ffffff0a; border-radius: 8px; }
  .sidebar > nav::-webkit-scrollbar-thumb { background: #617cba; border-radius: 8px; }
  .sidebar > nav::-webkit-scrollbar-thumb:hover { background: #94b2f4; }
  .sidebar > nav > button:focus-visible { outline: 2px solid #88b5ff; outline-offset: -2px; }
}
@media (max-width: 620px) {
  .sidebar > nav { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 6px; scrollbar-width: thin; scrollbar-color: #617cba transparent; }
  .sidebar > nav > button { flex: 0 0 70px; }
}