. Expected DOM (shell.js injects the aside and header; the page author writes

themselves):

...page content...

============================================================ */ /* ------------------------------------------------------------ Sidebar — fixed rail on the left, 288px on desktop. ------------------------------------------------------------ */ .sidebar { position: fixed; inset-block: 0; left: 0; z-index: 50; width: var(--sidebar-width); display: flex; flex-direction: column; padding-top: var(--stack-lg); background-color: var(--color-surface-container-low); box-shadow: 0 1px 8px rgba(60, 42, 33, 0.08); overflow-x: hidden; overflow-y: auto; transition: width var(--transition); } /* Logo block: */ .sidebar-nav { display: flex; flex-direction: column; gap: var(--stack-sm); padding: 0 var(--stack-md); flex: 1 1 auto; } /* Nav item: svg… */ .nav-item { display: flex; align-items: center; gap: var(--gutter); padding: var(--stack-md) var(--gutter); border-radius: var(--radius-md); color: var(--color-on-surface-variant); background-color: transparent; font-family: var(--font-ui); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); font-weight: 500; white-space: nowrap; transition: background-color var(--transition), color var(--transition); } .nav-item-icon { display: inline-flex; flex-shrink: 0; width: 24px; height: 24px; } .nav-item:hover { background-color: var(--color-surface-container); color: var(--color-on-surface); } .nav-item[aria-current="page"] { background-color: var(--color-secondary-container); color: var(--color-on-secondary-container); font-weight: 600; } /* Bottom sprint widget: */ .sidebar-footer { margin-top: auto; padding: var(--stack-lg) var(--gutter); flex-shrink: 0; } .sprint-status { display: flex; align-items: center; justify-content: space-between; gap: var(--stack-md); padding: var(--gutter); border-radius: var(--radius-lg); background-color: var(--color-primary-container); color: var(--color-on-primary-container); box-shadow: var(--shadow-sm); } .sprint-status-body { display: flex; flex-direction: column; gap: var(--stack-sm); min-width: 0; } .sprint-status-label { font-family: var(--font-mono); font-size: var(--text-label-caps-size); line-height: var(--text-label-caps-line); font-weight: var(--text-label-caps-weight); letter-spacing: var(--text-label-caps-tracking); text-transform: uppercase; color: var(--color-on-primary-container); } .sprint-status-meta { font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--color-primary-fixed-dim); white-space: nowrap; } .sprint-status .progress { width: 96px; background-color: rgba(255, 255, 255, 0.16); } .sprint-status-icon { flex-shrink: 0; color: var(--color-on-primary-container); } /* ------------------------------------------------------------ Header — fixed, starts to the right of the sidebar. ------------------------------------------------------------ */ .app-header { position: fixed; top: 0; right: 0; left: var(--sidebar-width); z-index: 40; height: var(--header-height); display: flex; align-items: center; justify-content: flex-end; gap: var(--gutter); padding: 0 var(--container-padding); background-color: rgba(251, 249, 245, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 8px rgba(60, 42, 33, 0.08); transition: left var(--transition); } /* Account chip + its dropdown menu: */ .user-menu-wrap { position: relative; } .user-chip { display: flex; align-items: center; gap: var(--stack-md); padding: var(--stack-sm); border-radius: var(--radius-full); color: var(--color-on-surface); transition: background-color var(--transition); } .user-chip:hover { background-color: var(--color-surface-container); } .user-chip-name { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: 500; white-space: nowrap; } /* The menu sits above the sidebar (z-index 50) and everything else in the header stack, anchored to the bottom-right of the chip. */ .user-menu { position: absolute; top: calc(100% + var(--stack-sm)); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: var(--stack-sm); gap: 2px; border-radius: var(--radius-md); border: 1px solid var(--color-outline-variant); background-color: var(--color-surface-container-lowest); box-shadow: var(--shadow-lg); } .user-menu[hidden] { display: none; } .user-menu-header { display: flex; flex-direction: column; padding: var(--stack-sm) var(--stack-md); margin-bottom: 2px; border-bottom: 1px solid var(--color-outline-variant); } .user-menu-name { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: 500; color: var(--color-on-surface); } .user-menu-meta { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--color-on-surface-variant); } .user-menu-item { appearance: none; border: 0; background: none; text-align: left; width: 100%; font-family: var(--font-ui); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--color-on-surface); padding: var(--stack-sm) var(--stack-md); border-radius: var(--radius-sm); cursor: pointer; } .user-menu-item:hover { background-color: var(--color-surface-container-high); } .user-menu-item:focus-visible { background-color: var(--color-surface-container-high); outline: 2.5px solid var(--color-secondary); outline-offset: -2px; } /* ------------------------------------------------------------ Main — authored by each page. "Table-top" margins. ------------------------------------------------------------ */ .app-main { display: block; margin-left: calc(var(--sidebar-width) + var(--main-margin)); margin-right: var(--main-margin); margin-top: calc(var(--header-height) + var(--main-margin)); margin-bottom: var(--main-margin); min-height: calc(100vh - var(--header-height) - (var(--main-margin) * 2)); min-width: 0; } /* Modifier for full-bleed canvases (kanban lanes, sketch board):

— no outer margins, fixed viewport height. */ .app-main--flush { margin: 0 0 0 var(--sidebar-width); padding-top: var(--header-height); height: 100vh; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* Optional centred reading column inside main:

*/ .page-shell { width: 100%; max-width: 1280px; margin-inline: auto; min-width: 0; } /* Page header block: */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--stack-lg); margin-bottom: var(--stack-lg); } .page-header-actions { display: flex; align-items: center; gap: var(--stack-md); flex-wrap: wrap; } /* ------------------------------------------------------------ Responsive: <=1024px the sidebar collapses to a 72px icon rail. Labels hide; icons centre; tooltips come from the title attr. ------------------------------------------------------------ */ @media (max-width: 1024px) { :root { --sidebar-width: var(--sidebar-rail-width); --main-margin: 16px; } .sidebar { padding-top: var(--gutter); align-items: center; } .sidebar-brand { padding: 0 0 var(--gutter); justify-content: center; } .sidebar-brand-text, .nav-item-label, .sprint-status-body, .user-chip-name { display: none; } .sidebar-nav { padding: 0 var(--stack-sm); width: 100%; } .nav-item { justify-content: center; padding: var(--stack-md) 0; border-radius: var(--radius-md); } .sidebar-footer { padding: var(--gutter) var(--stack-sm); width: 100%; } .sprint-status { justify-content: center; padding: var(--stack-md) 0; border-radius: var(--radius-lg); } } /* ------------------------------------------------------------ Responsive: <=768px keeps the rail (main stays scrollable), margins shrink, header tightens. ------------------------------------------------------------ */ @media (max-width: 768px) { .app-header { padding: 0 var(--gutter); gap: var(--stack-sm); } .page-header { align-items: flex-start; gap: var(--gutter); margin-bottom: var(--gutter); } } @media (max-width: 480px) { :root { --main-margin: 12px; --container-padding: 16px; } }