/* Foldable sidebar. >=1100px: folded = icon rail. 768-1099px: folded = hidden. Plain CSS, loaded after app.css. */
.nav-fold-btn { display: none; }
@media (min-width: 768px) {
  .nav-fold-btn { display: inline-grid; }
  .app-main, .bottom-nav { transition: padding .18s ease, width .18s ease, transform .18s ease; }
  html.nav-folded .app-main { padding-left: 0; }
  html.nav-folded .bottom-nav { transform: translateX(-100%); }
}
@media (min-width: 1100px) {
  html.nav-folded .app-main { padding-left: var(--rail-w); }
  html.nav-folded .bottom-nav { transform: none; width: var(--rail-w); padding: calc(.75rem + env(safe-area-inset-top)) .25rem .75rem; }
  html.nav-folded .nav-brand { display: grid; place-items: center; padding: 0; }
  html.nav-folded .nav-brand-name, html.nav-folded .nav-groups, html.nav-folded .nav-label-short { display: none; }
  html.nav-folded .nav-item { justify-content: center; padding: 0; min-height: 3.25rem; }
  html.nav-folded .nav-item .nav-badge { position: absolute; top: .3rem; right: .6rem; margin: 0; }
  html.nav-folded .nav-item[aria-current="page"]::before { left: 0; }
}