/* Four primary destinations; everything else is a native keyboard disclosure. */
.nav-more { min-width: 0; }
.nav-more-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: 9px;
  color: #91a0b4; background: transparent; font-size: 13px; cursor: pointer; list-style: none;
}
.nav-more-toggle::-webkit-details-marker { display: none; }
.nav-more-toggle:hover, .nav-more[open] > .nav-more-toggle { color: #e6e4f5; background: #171b2a; }
.nav-more-toggle.active { color: #e6deff; background: linear-gradient(90deg, #6a4cff28, #6a4cff08); }
.nav-more-toggle:focus-visible, #nav .nav-button:focus-visible { outline: 2px solid #a89aeb; outline-offset: 2px; }
.nav-more-chevron { color: #a495cf; transition: transform .15s ease; }
.nav-more[open] .nav-more-chevron { transform: rotate(180deg); }
.nav-more-panel {
  max-height: min(64vh, 590px); overflow-y: auto; overscroll-behavior: contain;
  margin-top: 7px; padding: 5px 6px; border: 1px solid #2c2f43;
  border-radius: 12px; background: linear-gradient(150deg, #131a28, #101720);
  scrollbar-width: thin; scrollbar-color: #47405f transparent;
}
.nav-more-group { padding: 9px 0; border-bottom: 1px solid #293041; }
.nav-group-empty { display: none; }
.nav-group-title { margin: 2px 9px 7px; color: #78839a; font-size: 9px; font-weight: 600; letter-spacing: .06em; }
.nav-more-panel .nav-button { display: block; width: 100%; min-height: 36px; padding: 9px 10px; font-size: 11px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.nav-more-panel .space-pin { padding-left: 21px; }
.nav-more-footer { padding: 7px 0 3px; }

@media (max-width: 620px) {
  .sidebar { position: relative; z-index: 20; overflow: visible; }
  .sidebar #nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; overflow: visible; padding: 2px 0; }
  #nav > .nav-button, .nav-more-toggle { width: 100%; min-height: 41px; padding: 10px 4px; font-size: 11px; text-align: center; }
  .nav-more-toggle { justify-content: center; gap: 8px; }
  .nav-more-panel { position: absolute; top: calc(100% + 7px); right: 0; left: 0; max-height: min(65vh, 510px); margin: 0; padding: 6px 9px; box-shadow: 0 16px 45px #0009; }
  .nav-more-panel .nav-button { min-height: 42px; padding: 11px 10px; font-size: 12px; }
  .nav-more-panel .space-pin { padding-left: 10px; }
  .nav-group-title { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .nav-more-chevron { transition: none; } }