/* оболочка: боковая панель и страница (#69, design 1–3); прокрутка — у окна, панель липнет к его верху */ .shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh} .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{font-size:16px;line-height:24px;font-weight:700;color:var(--color-text-primary);white-space:nowrap;padding-left:var(--space-2)} .sidebar__project-tag{ max-width:100%;padding:2px;border:1px solid var(--color-border-default);border-radius:var(--radius-xs); background:var(--color-bg-subtle);color:var(--color-text-secondary);font:inherit;font-size:var(--fs-caption);line-height:var(--lh-caption); font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer; } .sidebar__project-tag:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)} .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,.sidebar__project-tag: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} /* блок данных Jira: в развёрнутой панели — колонкой, событие пакета под кнопкой с переносом */ .data-status{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);align-self:stretch;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)} .data-status .ui-btn{width:100%;justify-content:center} .data-status__agent{display:inline-flex;align-items:center;gap:6px} .data-status__dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-warning);flex:0 0 auto} .data-status__dot.is-online{background:var(--color-status-success)} .data-status__event{font-weight:600;overflow-wrap:anywhere} .data-status__event:empty{position:absolute} /* живой регион всегда в DOM; пустой не занимает места */ .data-status__event--info{color:var(--color-text-secondary)} .data-status__event--success{color:var(--color-status-success)} .data-status__event--warning{color:color-mix(in srgb, var(--color-status-warning) 55%, var(--color-text-primary))} .data-status__event--error{color:var(--color-status-error)} .data-status--compact{position:relative;align-items:center;align-self:center} .data-status--compact .data-status__dot{position:absolute;top:2px;right:2px;pointer-events:none;box-shadow:0 0 0 2px var(--color-bg-surface)} .crash{max-width:640px;margin:48px auto} .crash h2{margin:0;font:inherit} /* узкий экран (<640 px): закреплённая строка с «Меню» и выезжающая панель поверх страницы (design 4) */ .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)} @media (max-width:639px){ .shell{display:block} :root{--topbar-h:56px} }