/* оболочка: боковая панель и страница; прокрутка — у окна, панель липнет к его верху */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
/* у элемента сетки с margin-inline:auto ширина — по содержимому; явная 100% держит страницу в своей дорожке */
.shell>.page{width:100%;box-sizing:border-box}
.sidebar{
  position:sticky;top:0;height:100vh;height:100dvh;width:240px;box-sizing:border-box;z-index:20;
  display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);
  border-right:1px solid var(--color-border-default);background:var(--color-bg-surface);
}
.sidebar.is-collapsed{width:64px;padding-inline:var(--space-2);align-items:center}
.sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h)}
.sidebar__brand{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;color:var(--color-text-primary);white-space:nowrap;padding-left:var(--space-2)}
.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1);align-self:stretch}
.sidebar__link{
  display:flex;align-items:center;gap:var(--space-3);height:var(--control-h-lg);padding:0 var(--space-3);box-sizing:border-box;
  border-radius:var(--control-radius);color:var(--color-text-secondary);text-decoration:none;font-weight:600;white-space:nowrap;
}
.sidebar__link:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
.sidebar__link[aria-current="page"]{background:var(--color-bg-selected);color:var(--color-action-primary)}
.sidebar__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.is-collapsed .sidebar__nav{align-items:center}
.is-collapsed .sidebar__link{width:var(--control-h-lg);padding:0;justify-content:center}
.sidebar__spacer{flex:1 1 auto}
.sidebar__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);align-self:stretch;
  padding-top:var(--space-3);border-top:1px solid var(--color-border-default);
}
.is-collapsed .sidebar__foot{flex-direction:column}
/* узкий экран (<640 px): закреплённая строка с «Меню» и выезжающая панель поверх страницы */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-2);height:56px;box-sizing:border-box;
  padding:0 var(--space-4) 0 var(--space-2);border-bottom:1px solid var(--color-border-default);background:var(--color-bg-surface);
}
.topbar .sidebar__brand{padding-left:0}
.sidebar-backdrop{position:fixed;inset:0;z-index:30;background:var(--color-overlay)}
.sidebar.is-drawer{position:fixed;left:0;top:0;bottom:0;z-index:31;width:min(300px,85vw);height:auto;box-shadow:var(--shadow-popover)}
/* --topbar-h: липкие элементы страницы ставь на top:var(--topbar-h,0) — на телефоне они встанут под строку */
@media (max-width:639px){
  .shell{display:block}
  :root{--topbar-h:56px}
}