/* The navigation has one desktop rail and one mobile drawer. */
.mobile-nav-toggle, .mobile-nav-close, .mobile-workspace-actions, .sidebar-scrim { display: none; }
.sidebar .nav, .sidebar-help, .sidebar #lock-panel { white-space: normal; overflow-wrap: anywhere; }
.sidebar .nav-icon { flex: 0 0 18px; }
.sidebar .language-pick, .sidebar .language-select { min-width: 0; max-width: 100%; }
.sidebar .language-pick { display: flex; gap: 8px; flex: 1 1 100%; }
.sidebar .language-pick select { width: 100%; flex: 1 1 0; }
.sidebar .preferences { flex-wrap: wrap; min-width: 0; }
@media (min-width: 1280px) { :root { --rail: 240px; } }
@media (min-width: 768px) and (max-width: 1279px) {
  :root { --rail: 200px; }
  .sidebar { width: var(--rail); padding: 18px 10px; }
  .sidebar .brand { font-size: 19px; }
  .sidebar .nav { font-size: 13px; gap: 9px; }
  .sidebar-help, .sidebar #lock-panel { font-size: 12px; gap: 8px; }
  .content { padding: 20px; }
  .topbar { padding: 10px 20px; gap: 10px; }
}
@media (max-width: 767px) {
  :root { --rail: 0px; }
  .workspace { display: block; }
  .workspace > main { margin: 0; min-width: 0; width: 100%; }
  .workspace > .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 48px)); height: 100dvh;
    z-index: 120; padding: 20px 16px; display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(-100%);
  }
  [dir="rtl"] .workspace > .sidebar { inset: 0 0 0 auto; transform: translateX(100%); }
  .workspace.navigation-open > .sidebar { visibility: visible; transform: none; }
  .sidebar .brand { margin: 0 40px 20px 0; font-size: 20px; }
  .sidebar .brand img { height: 32px; width: 32px; }
  .sidebar .quick-open { display: flex; margin-bottom: 12px; }
  .sidebar nav { display: flex; flex-direction: column; gap: 3px; }
  .sidebar nav .nav { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .sidebar .nav-section { display: block; }
  .sidebar-bottom { position: static; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rail-border); }
  .sidebar-bottom > :not(.preferences) { display: flex; }
  .sidebar-bottom .preferences { flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  .sidebar-bottom .language-pick { display: flex; align-items: center; }
  .sidebar-bottom .language-pick > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .sidebar-bottom .language-pick select { max-width: 100%; min-height: 40px; }
  .sidebar .sidebar-version { display: block; margin-top: 12px; }
  .mobile-nav-close { display: inline-flex; position: absolute; inset-block-start: 14px; inset-inline-end: 12px; color: var(--rail-text); }
  .mobile-workspace-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rail-border); }
  .sidebar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 119; background: rgb(0 0 0 / .45); }
  .mobile-nav-toggle { display: inline-flex; flex: 0 0 40px; width: 40px; min-height: 40px; padding: 8px; }
  .workspace .topbar { display: flex; flex-wrap: nowrap; position: sticky; top: 0; gap: 6px; padding: 8px; min-height: 56px; z-index: 30; }
  .topbar .profile-switch { min-width: 0; flex: 1 1 0; gap: 0; }
  .topbar .profile-switch select { min-width: 0; width: 100%; max-width: none; margin: 0; font-size: 13px; }
  .topbar .profile-switch > :not(select), .topbar #top-lock { display: none; }
  .topbar .top-actions { flex: 0 0 auto; width: auto; justify-content: flex-end; gap: 2px; }
  .topbar .quick-mobile { display: inline-flex; }
  .topbar .quiet { min-width: 40px; min-height: 40px; }
  .content { padding: 14px 12px; }
  .workspace[data-current-view="connection"][data-connection-settings="false"] .topbar { display: flex; }
}