/* Keep text navigation in its own column on compact screens. */
@media(max-width:1100px){
  :root #app .app-shell{display:grid;--side-w:218px;grid-template-columns:var(--side-w) minmax(0,1fr)}
  :root #app .app-shell>.sidebar{position:sticky;top:0;left:auto;align-self:start;width:auto;min-width:0;height:100dvh;padding:14px 10px;visibility:visible;transform:none;transition:none;z-index:30}
  :root #app .app-shell>.content-column{min-width:0}
  :root #app .app-shell .voucher-list button,:root #app .app-shell .voucher-list span{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  :root #app .app-shell .mobile-menu,:root #app .app-shell .drawer-close,:root #app .app-shell .mobile-scrim{display:none}
  :root #app .app-shell .sidebar .brand-row{justify-content:flex-start;padding-inline:2px}
  :root #app .app-shell .sidebar .home-link{justify-content:flex-start;padding-inline:8px}
  :root #app .app-shell .sidebar .home-link b,:root #app .app-shell .sidebar .nav-group__trigger b{display:block;min-width:0;white-space:normal;line-height:1.45}
  :root #app .app-shell .sidebar .nav-group__trigger{display:grid;grid-template-columns:24px minmax(0,1fr) 12px;gap:8px;padding-inline:8px;text-align:left}
  :root #app .app-shell .sidebar .nav-group__trigger small{display:none}
  :root #app .app-shell .sidebar .nav-icon{width:24px;min-width:24px;height:30px;flex-basis:24px}
  :root #app .app-shell .sidebar .nav-group__items{padding-left:30px}
  :root #app .app-shell .sidebar .nav-group__items:before{left:16px}
  :root #app .app-shell .sidebar .nav-link{min-width:0;grid-template-columns:5px minmax(0,1fr) 10px;gap:6px;padding:8px 5px}
  :root #app .app-shell .sidebar .nav-link b{min-width:0;white-space:normal;line-height:1.5;overflow-wrap:anywhere}
  :root #app .app-shell .sidebar .nav-link.is-active:before{left:-29px}
  :root #app .app-shell .sidebar .nav-sub-items{margin-left:4px}
  :root #app .app-shell .sidebar .nav-sub-link{white-space:normal;line-height:1.5}
  :root #app .app-shell .sidebar .brand-mark{gap:8px}
  :root #app .app-shell .sidebar .brand-mark__logo{width:34px;height:34px}
  :root #app .app-shell .sidebar .brand-mark__copy strong{font-size:14px;white-space:normal}
  :root #app .app-shell .sidebar .brand-mark__copy span{font-size:9px;white-space:normal}
}
@media(max-width:720px){
  :root #app .app-shell{--side-w:176px}
  :root #app .app-shell .workspace-main{padding-inline:10px}
  :root #app .app-shell .sidebar .nav-group__trigger b{font-size:13px}
}
@media(max-width:520px){
  :root #app .app-shell{--side-w:148px}
  :root #app .app-shell>.sidebar{padding:10px 8px}
  :root #app .app-shell .workspace-main{padding-inline:8px}
  :root #app .app-shell .topbar{padding-inline:8px}
  :root #app .app-shell .sidebar .brand-mark{gap:5px}
  :root #app .app-shell .sidebar .brand-mark__logo{width:26px;height:26px}
  :root #app .app-shell .sidebar .brand-mark__copy strong{font-size:12px}
  :root #app .app-shell .sidebar .brand-mark__copy span{font-size:8px}
  :root #app .app-shell .sidebar .nav-group__trigger{grid-template-columns:22px minmax(0,1fr) 10px;gap:5px;padding-inline:4px}
  :root #app .app-shell .sidebar .nav-group__trigger b,:root #app .app-shell .sidebar .home-link b{font-size:12px}
  :root #app .app-shell .sidebar .nav-link b,:root #app .app-shell .sidebar .nav-sub-link{font-size:11px}
  :root #app .app-shell .sidebar .side-user{grid-template-columns:24px minmax(0,1fr) 26px;gap:5px;padding:6px 4px}
  :root #app .app-shell .sidebar .side-user>span{width:24px;height:28px;font-size:12px}
  :root #app .app-shell .sidebar .side-user strong{font-size:11px;white-space:normal}
  :root #app .app-shell .sidebar .side-user small{font-size:9px;white-space:normal;overflow-wrap:anywhere}
  :root #app .app-shell .sidebar .side-settings{width:26px;height:28px}
  :root #app .app-shell .sidebar .drawer-signout{font-size:12px}
}