/* Four stable entry points. Context links wrap in the page, never a hidden strip. */
.sidebar.app-navigation {
  width: 246px; position: fixed; inset: 0 auto 0 0; display: flex;
  flex-direction: column; padding: 24px 16px 16px; background: #202330;
  color: #c1c5d7; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; z-index: 10;
}
.app-navigation[hidden], .navigation-mobile-bar[hidden],
.navigation-backdrop[hidden], .navigation-close[hidden] { display: none; }
.app-navigation > * { flex-shrink: 0; }
.app-navigation .brand { width: 186px; max-width: 100%; margin: 0 0 28px; padding: 8px 12px; gap: 3px; border-radius: 12px; }
.app-navigation .brand .brand-wordmark { width: 159px; height: auto; }
.app-navigation .brand .brand-caption { font-size: 11px; line-height: 16px; margin-left: 2px; }
.app-navigation .navigation-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 22px; padding: 0; overflow: visible; }
.app-navigation .navigation-link { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; min-height: 66px; padding: 12px; border-radius: 12px; font-size: 15px; line-height: 22px; font-weight: 650; white-space: normal; transition: background .18s, color .18s; }
.app-navigation .navigation-link span { min-width: 0; overflow-wrap: anywhere; }
.app-navigation .navigation-link small { display: block; margin-top: 3px; font-size: 10px; line-height: 15px; font-weight: 400; color: #adb3c8; }
.app-navigation .navigation-link .icon { width: 21px; height: 21px; flex-shrink: 0; }
.app-navigation .navigation-link:hover { background: #2e3044; color: #fff; }
.app-navigation .navigation-link[aria-current="page"] { background: #3d3459; color: #efe6ff; box-shadow: inset 3px 0 #b399ff; }
.app-navigation .navigation-link[aria-current="page"] small { color: #d0c1ec; }
.navigation-account { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 12px; border: 1px solid #4a465b; border-radius: 12px; font-size: 14px; color: #eee8fd; }
.navigation-account .icon:last-child { margin-left: auto; width: 17px; }
.navigation-account:hover, .navigation-account[aria-current] { background: #39304e; }
.app-navigation .navigation-footer { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 10px; margin-top: auto; padding: 16px 10px 0; color: #b8bed1; font-size: 11px; line-height: 18px; }
.app-navigation .navigation-footer a { padding: 5px 0; }
.app-navigation .navigation-footer a:hover { color: #fff; }
.app-navigation a:focus-visible, .app-navigation button:focus-visible,
.navigation-mobile-bar a:focus-visible, .navigation-mobile-bar button:focus-visible { outline: 3px solid #b7a5ff; outline-offset: 2px; }
.workspace.navigation-workspace { margin-left: 246px; }
.navigation-mobile-bar, .navigation-backdrop, .navigation-close { display: none; }
.navigation-workspace > .topbar { height: auto; min-height: 84px; gap: 18px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.navigation-workspace .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12px; min-width: 0; line-height: 1.6; }
.breadcrumbs a { color: #68627a; }
.breadcrumbs a:hover { color: #6b3ee7; text-decoration: underline; }
.navigation-workspace .breadcrumbs span { padding: 0; }
.breadcrumbs [aria-current] { color: #292438; }
.navigation-workspace .topbar-meta { gap: 12px; flex-wrap: wrap; max-width: 100%; }
.human-nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; background: #f1ecfd; border: 1px solid #e7ddfa; border-radius: 10px; }
.section-navigation { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 22px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-navigation a { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: #615976; }
.section-navigation a:hover { background: #f0ebfa; color: #4d28b1; }
.section-navigation a[aria-current] { background: #ede5fd; color: #5b2dcc; font-weight: 650; }
.section-navigation a:focus-visible, .breadcrumbs a:focus-visible, .human-nav-link:focus-visible { outline: 3px solid #8f6bde; outline-offset: 2px; }
.platform-footer { align-items: flex-start; gap: 24px; }
.platform-footer p { flex: 1 1 230px; }
.platform-footer nav { display: flex; flex: 2 1 380px; flex-wrap: wrap; gap: 2px 22px; }
.platform-footer nav a { font-size: 12px; }
@media (min-width: 721px) and (max-height: 640px) {
  .sidebar.app-navigation { padding-top: 14px; }
  .app-navigation .brand { margin-bottom: 15px; padding-top: 5px; padding-bottom: 5px; }
  .app-navigation .brand .brand-wordmark { width: 139px; }
  .app-navigation .navigation-groups { gap: 5px; margin-bottom: 12px; }
  .app-navigation .navigation-link { min-height: 56px; padding: 8px 12px; }
  .app-navigation .navigation-footer { padding-top: 9px; }
}
@media (min-width: 721px) and (max-height: 520px) {
  .app-navigation .brand .brand-caption { display: none; }
  .app-navigation .brand { margin-bottom: 10px; }
}
@media (max-width: 720px) {
  .workspace.navigation-workspace { margin-left: 0; }
  .navigation-workspace > .topbar { min-height: 68px; padding-top: 10px; padding-bottom: 10px; gap: 8px 14px; }
  .navigation-workspace .breadcrumbs { flex: 1 1 170px; font-size: 11px; gap: 5px; }
  .navigation-workspace .topbar-meta { gap: 8px; }
  .human-nav-link { font-size: 12px; padding: 8px 10px; }
  .section-navigation { gap: 4px; padding-bottom: 16px; }
  .section-navigation a { padding: 9px 11px; font-size: 12px; }
  /* All destinations remain usable without JavaScript. */
  .sidebar.app-navigation { position: relative; inset: auto; width: auto; max-height: none; padding: 17px 16px 15px; overflow: visible; }
  .app-navigation .brand { width: 154px; margin-bottom: 18px; padding: 5px 10px; }
  .app-navigation .brand .brand-wordmark { width: 134px; }
  .app-navigation .brand .brand-caption { display: none; }
  .app-navigation .navigation-groups { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
  .app-navigation .navigation-link { min-height: 75px; padding: 11px 8px; gap: 8px; font-size: 13px; line-height: 20px; }
  .app-navigation .navigation-link small { font-size: 10px; }
  .app-navigation .navigation-link .icon { width: 18px; height: 18px; }
  .navigation-account { min-height: 44px; font-size: 13px; padding: 10px; }
  .app-navigation .navigation-footer { padding-top: 10px; margin-top: 0; }
  .navigation-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); }
  .navigation-mobile-brand { display: block; flex: 0 1 136px; min-width: 80px; }
  .navigation-mobile-brand img { display: block; width: 136px; height: auto; }
  .navigation-toggle { display: flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid #dedbe7; border-radius: 10px; background: #fff; color: #59457c; font-size: 13px; line-height: 20px; }
  .navigation-toggle .icon { width: 18px; height: 18px; }
  .navigation-enhanced .app-navigation { position: fixed; z-index: 50; inset: 12px 12px auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; border-radius: 16px; box-shadow: 0 15px 50px #20233040; }
  .navigation-backdrop { display: block; position: fixed; inset: 0; z-index: 49; background: #14132685; }
  .navigation-close { display: grid; place-items: center; position: absolute; top: 20px; right: 16px; width: 40px; height: 40px; padding: 0; border: 1px solid #59566d; border-radius: 9px; background: #2b2b40; color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .app-navigation .navigation-link { transition: none; } }