for-humanity 0.4.3 → 0.5.0

package/dist/cli.css

@@ -295,13 +295,55 @@
   }
 }
 
-/* src/component/widget/shell/_wg-shell-nav-list.css */
-.wg_shellNavList__root {
+/* src/component/widget/cursor-face/wg-cursor-face.css */
+.wg_cursorFace__root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--app-z-index-popper);
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+  image-rendering: pixelated;
+}
+.wg_cursorFace__root--visible {
+  visibility: visible;
+}
+
+/* src/component/widget/navigation/_wg-navigation-branch-toggle.css */
+.wg_navigationBranchToggle__root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--app-size-tree-toggle);
+  height: calc(var(--app-font-size-dense) * var(--app-line-height-tight) + var(--app-space-tree-row) * 2);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--app-color-border-soft);
+  font-family: var(--app-font-mono);
+  font-size: var(--app-font-size-body);
+  line-height: 1;
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+    color: var(--app-color-text-strong);
+  }
+  &:focus-visible {
+    background: var(--app-color-accent-soft);
+    color: var(--app-color-text-strong);
+    outline: var(--app-outline-focus);
+    outline-offset: calc(0px - var(--app-outline-focus-offset));
+  }
+}
+
+/* src/component/widget/navigation/_wg-navigation-nav-list.css */
+.wg_navigationNavList__root {
   margin: 0 0 0 var(--app-space-tree-inset);
   padding: 0;
   list-style: none;
 }
-.wg_shellNavList__branch {
+.wg_navigationNavList__branch {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -319,7 +361,7 @@
     pointer-events: none;
   }
 }
-.wg_shellNavList__link {
+.wg_navigationNavList__link {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -351,16 +393,22 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellNavList__link--active {
+.wg_navigationNavList__link--active {
   color: var(--app-color-link);
   font-weight: var(--app-font-weight-active);
   &::before {
     border-top-color: currentcolor;
   }
 }
-.wg_shellNavList__item {
+.wg_navigationNavList__item {
   display: flow-root;
   position: relative;
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__link {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__branch {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
   &::before {
     position: absolute;
     top: 0;
@@ -389,90 +437,99 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-link);
   }
-  &:where(:has(~ .wg_shellNavList__item:hover))::before {
+  &:where(:has(~ .wg_navigationNavList__item:hover))::before {
     border-left-color: var(--app-color-link);
   }
-  &:where(:has(~ .wg_shellNavList__item :focus-visible))::before {
+  &:where(:has(~ .wg_navigationNavList__item :focus-visible))::before {
     border-left-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__root {
+  & > .wg_navigationNavList__root {
     margin-left: var(--app-space-tree-indent);
   }
-  &:where(:hover) > .wg_shellNavList__branch::before {
+  &:where(:hover) > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:has(:focus-visible)) > .wg_shellNavList__branch::before {
+  &:where(:has(:focus-visible)) > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:hover) > .wg_shellNavList__link::before {
+  &:where(:hover) > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
-  &:where(:has(:focus-visible)) > .wg_shellNavList__link::before {
+  &:where(:has(:focus-visible)) > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
 }
-.wg_shellNavList__item--trail {
+.wg_navigationNavList__item--trail {
   &::before {
     border-left-color: var(--app-color-link);
   }
 }
-.wg_shellNavList__item--current {
+.wg_navigationNavList__item--current {
   &::after {
     border-left-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__branch::before {
+  & > .wg_navigationNavList__branch::before {
     border-top-color: var(--app-color-link);
   }
-  & > .wg_shellNavList__link::before {
+  & > .wg_navigationNavList__link::before {
     border-top-color: var(--app-color-link);
   }
 }
 
-/* src/component/widget/shell/_wg-shell-nav.css */
-.wg_shellNav__root {
+/* src/component/widget/navigation/_wg-navigation-nav.css */
+.wg_navigationNav__root {
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
 }
-.wg_shellNav__docs {
+.wg_navigationNav__docs {
   display: flex;
   flex-direction: column;
   gap: var(--app-space-stack);
 }
-.wg_shellNav__group {
+.wg_navigationNav__group {
+  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
   margin: 0 0 4px;
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
   text-box: trim-start cap alphabetic;
 }
+.wg_navigationNav__docGroup {
+  position: relative;
+}
 
-/* src/component/widget/shell/_wg-shell-toc.css */
-.wg_shellToc__root {
-  margin-top: var(--app-space-group);
-  padding-top: var(--app-space-group);
-  border-top: 1px solid var(--app-color-border-soft);
+/* src/component/widget/navigation/_wg-navigation-toc.css */
+.wg_navigationToc__root {
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
 }
-.wg_shellToc__label {
+.wg_navigationToc__label {
   margin-bottom: var(--app-space-inline);
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-label);
   font-weight: var(--app-font-weight-strong);
   letter-spacing: var(--app-letter-spacing-label);
 }
-.wg_shellToc__group {
-  margin: var(--app-space-stack) 0 4px;
+.wg_navigationToc__group {
+  margin: 0 0 4px;
+  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
 }
-.wg_shellToc__list {
+.wg_navigationToc__groupSection {
+  position: relative;
+  display: flow-root;
+}
+.wg_navigationToc__groupSection--named {
+  margin-top: var(--app-space-stack);
+}
+.wg_navigationToc__list {
   margin: 0 0 0 var(--app-space-tree-inset);
   padding: 0;
   list-style: none;
 }
-.wg_shellToc__link {
+.wg_navigationToc__link {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -505,16 +562,19 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__link--active {
+.wg_navigationToc__link--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
   &::before {
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__item {
+.wg_navigationToc__item {
   display: flow-root;
   position: relative;
+  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationToc__link {
+    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  }
   &::before {
     position: absolute;
     top: 0;
@@ -543,35 +603,38 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__item:hover))::before {
+  &:where(:has(~ .wg_navigationToc__item:hover))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__item :focus-visible))::before {
+  &:where(:has(~ .wg_navigationToc__item :focus-visible))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:hover) > .wg_shellToc__link::before {
+  &:where(:hover) > .wg_navigationToc__link::before {
     border-top-color: var(--app-color-text-strong);
   }
-  &:where(:has(:focus-visible)) > .wg_shellToc__link::before {
+  &:where(:has(:focus-visible)) > .wg_navigationToc__link::before {
     border-top-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__item--trail {
+.wg_navigationToc__item--trail {
   &::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__item--current {
+.wg_navigationToc__item--current {
   &::after {
     border-left-color: var(--app-color-text-strong);
   }
+  & > .wg_navigationToc__link::before {
+    border-top-color: var(--app-color-text-strong);
+  }
 }
-.wg_shellToc__sub {
+.wg_navigationToc__sub {
   margin: var(--app-space-tree-row) 0 4px var(--app-space-tree-indent);
   padding: 0;
   list-style: none;
 }
-.wg_shellToc__subItem {
+.wg_navigationToc__subItem {
   position: relative;
   &::before {
     position: absolute;
@@ -601,24 +664,24 @@
   &:where(:has(:focus-visible))::after {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__subItem:hover))::before {
+  &:where(:has(~ .wg_navigationToc__subItem:hover))::before {
     border-left-color: var(--app-color-text-strong);
   }
-  &:where(:has(~ .wg_shellToc__subItem :focus-visible))::before {
+  &:where(:has(~ .wg_navigationToc__subItem :focus-visible))::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subItem--trail {
+.wg_navigationToc__subItem--trail {
   &::before {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subItem--current {
+.wg_navigationToc__subItem--current {
   &::after {
     border-left-color: var(--app-color-text-strong);
   }
 }
-.wg_shellToc__subLink {
+.wg_navigationToc__subLink {
   position: relative;
   display: block;
   padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
@@ -651,7 +714,7 @@
     border-top-color: currentcolor;
   }
 }
-.wg_shellToc__subLink--active {
+.wg_navigationToc__subLink--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
   &::before {
@@ -659,6 +722,259 @@
   }
 }
 
+/* src/component/widget/navigation/wg-navigation.css */
+.wg_navigation__brandRow {
+  display: flex;
+  position: sticky;
+  top: 0;
+  z-index: var(--app-z-index-sticky);
+  align-self: start;
+  min-width: 0;
+  height: var(--app-size-brand);
+  padding-block: var(--app-space-page-top) var(--app-space-group);
+  background: var(--app-color-ground);
+  gap: var(--app-space-inline);
+  align-items: start;
+}
+.wg_navigation__brand {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--app-color-text-strong);
+  font-family: var(--app-font-brand);
+  font-size: var(--app-font-size-title);
+  font-weight: var(--app-font-weight-mark);
+  line-height: var(--app-line-height-title);
+  letter-spacing: var(--app-letter-spacing-brand);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline;
+  }
+}
+.wg_navigation__menuIcon {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 1.5;
+}
+.wg_navigation__menuToggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--app-size-menu-button);
+  height: var(--app-size-menu-button);
+  padding: 0;
+  border: 0;
+  border-radius: var(--app-radius-box);
+  background: transparent;
+  color: var(--app-color-text-strong);
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+  }
+  &:focus-visible {
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+}
+.wg_navigation__menuToggle--visible {
+  display: flex;
+}
+.wg_navigation__sidebar {
+  grid-area: nav;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  min-width: 0;
+  height: 100dvh;
+  margin-inline-end: var(--app-space-sidebar-gap);
+}
+.wg_navigation__documents {
+  flex: 1;
+  min-height: 0;
+}
+.wg_navigation__outline {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  &:where(:has(.wg_navigation__headings:empty)) {
+    display: none;
+  }
+}
+.wg_navigation__headings {
+  flex: 1;
+  min-height: 0;
+}
+.wg_navigation__navigation {
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--app-size-brand));
+  min-width: 0;
+  min-height: 0;
+}
+.wg_navigation__tocRail {
+  grid-area: outline;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  min-width: 0;
+  height: 100dvh;
+  margin-inline-start: var(--app-space-sidebar-gap);
+  padding-top: var(--app-size-brand);
+  & > .wg_navigation__outline {
+    height: 100%;
+  }
+  &:where(:has(.wg_navigation__headings:empty)) {
+    display: none;
+  }
+}
+.wg_navigation__scroll {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-padding-block: var(--app-size-navigation-fade);
+}
+.wg_navigation__scroll--ready {
+  scrollbar-width: none;
+}
+.wg_navigation__scroll--above {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent,
+      #000 var(--app-size-navigation-fade));
+}
+.wg_navigation__scroll--below {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      #000 calc(100% - var(--app-size-navigation-fade)),
+      transparent);
+}
+.wg_navigation__scroll--above.wg_navigation__scroll--below {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent,
+      #000 var(--app-size-navigation-fade),
+      #000 calc(100% - var(--app-size-navigation-fade)),
+      transparent);
+}
+.wg_navigation__drawer {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: min(var(--app-size-drawer), calc(100% - var(--app-space-gutter) * 2));
+  max-width: none;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin: 0;
+  padding: 0 var(--app-space-gutter) var(--app-space-group);
+  border: 0;
+  border-right: 1px solid var(--app-color-border-layout);
+  background: var(--app-color-ground);
+  color: var(--app-color-text);
+  overflow: hidden;
+  &::backdrop {
+    background: var(--app-color-backdrop);
+  }
+}
+.wg_navigation__drawerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--app-space-inline);
+  min-height: var(--app-size-mobile-header);
+  margin-bottom: var(--app-space-block);
+  background: var(--app-color-ground);
+}
+.wg_navigation__drawerTitle {
+  margin: 0;
+  font-size: var(--app-font-size-part);
+  font-weight: var(--app-font-weight-strong);
+}
+.wg_navigation__drawerClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--app-size-menu-button);
+  height: var(--app-size-menu-button);
+  padding: 0;
+  border: 0;
+  border-radius: var(--app-radius-box);
+  background: transparent;
+  color: var(--app-color-text-strong);
+  cursor: pointer;
+  &:hover {
+    background: var(--app-color-accent-soft);
+  }
+  &:focus-visible {
+    outline: var(--app-outline-focus);
+    outline-offset: var(--app-outline-focus-offset);
+  }
+}
+.wg_navigation__drawerContent {
+  min-width: 0;
+  height: calc(100% - var(--app-size-mobile-header) - var(--app-space-block));
+  & > .wg_navigation__navigation {
+    height: 100%;
+  }
+}
+@media (forced-colors: active) {
+  .wg_navigation__scroll {
+    mask-image: none;
+    scrollbar-width: thin;
+    scrollbar-color: auto;
+  }
+}
+@media (width < 1536px) {
+  .wg_navigation__tocRail {
+    display: none;
+  }
+}
+@media (width < 1024px) {
+  .wg_navigation__sidebar {
+    position: static;
+    height: auto;
+    margin-block-end: var(--app-space-block);
+    margin-inline-end: 0;
+    border-bottom: 1px solid var(--app-color-border-layout);
+  }
+  .wg_navigation__sidebar > .wg_navigation__navigation {
+    height: auto;
+  }
+  .wg_navigation__sidebar > .wg_navigation__navigation > .wg_navigation__documents {
+    max-height: none;
+  }
+  .wg_navigation__sidebar--navigationReady {
+    position: sticky;
+    top: 0;
+    z-index: var(--app-z-index-sticky);
+    background: var(--app-color-ground);
+  }
+  .wg_navigation__brandRow {
+    position: static;
+    height: var(--app-size-mobile-header);
+    padding-block: 0;
+    align-items: center;
+  }
+}
+
+/* src/component/widget/shell-controls/wg-shell-controls.css */
+.wg_shellControls__navigation {
+  display: contents;
+}
+
 /* src/style/base.css */
 * {
   box-sizing: border-box;
@@ -747,13 +1063,15 @@
   --app-space-gutter: 28px;
   --app-space-column: 32px;
   --app-space-sidebar-gap: 32px;
-  --app-size-sidebar: 200px;
+  --app-size-sidebar: 240px;
   --app-size-main: 900px;
   --app-size-page: calc(var(--app-size-main) + (var(--app-size-sidebar) + var(--app-space-sidebar-gap) + var(--app-space-gutter)) * 2);
   --app-size-brand: calc(var(--app-font-size-title) * var(--app-line-height-title) + var(--app-space-page-top) + var(--app-space-group));
   --app-size-mobile-header: 56px;
   --app-size-menu-button: 44px;
   --app-size-drawer: 320px;
+  --app-size-navigation-fade: 28px;
+  --app-size-tree-toggle: 24px;
   --app-space-anchor: 80px;
   --app-radius-pill: 0;
   --app-radius-card: 0;
@@ -797,7 +1115,7 @@
   max-width: var(--app-size-page);
   margin: 0 auto;
   padding: 0 var(--app-space-gutter);
-  grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
+  grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
   background: var(--app-color-ground);
   color: var(--app-color-text);
   font-family: var(--app-font-sans);
@@ -811,107 +1129,8 @@
 .wg_shell__root--drawerOpen {
   overflow: hidden;
 }
-.wg_shell__brandRow {
-  display: flex;
-  position: sticky;
-  top: 0;
-  z-index: var(--app-z-index-sticky);
-  align-self: start;
-  min-width: 0;
-  height: var(--app-size-brand);
-  padding-block: var(--app-space-page-top) var(--app-space-group);
-  background: var(--app-color-ground);
-  gap: var(--app-space-inline);
-  align-items: start;
-}
-.wg_shell__brand {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--app-color-text-strong);
-  font-family: var(--app-font-brand);
-  font-size: var(--app-font-size-title);
-  font-weight: var(--app-font-weight-mark);
-  line-height: var(--app-line-height-title);
-  letter-spacing: var(--app-letter-spacing-brand);
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  &:hover {
-    text-decoration: underline;
-  }
-  &:focus-visible {
-    outline: none;
-    text-decoration: underline;
-  }
-}
-.wg_shell__menuIcon {
-  width: 20px;
-  height: 20px;
-  fill: none;
-  stroke: currentcolor;
-  stroke-linecap: round;
-  stroke-width: 1.5;
-}
-.wg_shell__menuToggle {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--app-size-menu-button);
-  height: var(--app-size-menu-button);
-  padding: 0;
-  border: 0;
-  border-radius: var(--app-radius-box);
-  background: transparent;
-  color: var(--app-color-text-strong);
-  cursor: pointer;
-  &:hover {
-    background: var(--app-color-accent-soft);
-  }
-  &:focus-visible {
-    outline: var(--app-outline-focus);
-    outline-offset: var(--app-outline-focus-offset);
-  }
-}
-.wg_shell__menuToggle--visible {
-  display: flex;
-}
-.wg_shell__sidebar {
-  grid-area: nav;
-  position: sticky;
-  top: 0;
-  align-self: start;
-  min-width: 0;
-  min-height: 100vh;
-  max-height: 100vh;
-  margin-inline-end: var(--app-space-sidebar-gap);
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scrollbar-gutter: stable;
-  scrollbar-width: auto;
-  scrollbar-color: auto;
-  scroll-padding-block: var(--app-size-brand) var(--app-space-block);
-  &::-webkit-scrollbar {
-    width: 3px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: transparent;
-  }
-  &:hover::-webkit-scrollbar-thumb {
-    background: var(--app-color-border-soft);
-  }
-  &:focus-within::-webkit-scrollbar-thumb {
-    background: var(--app-color-border-soft);
-  }
-}
-.wg_shell__navigation {
-  min-width: 0;
+.wg_shell__browserRoot {
+  display: contents;
 }
 .wg_shell__main {
   grid-area: main;
@@ -921,134 +1140,9 @@
   padding-block: var(--app-size-brand) calc(100vh - var(--app-space-anchor));
   padding-inline: var(--app-space-column);
 }
-.wg_shell__drawer {
-  position: fixed;
-  inset: 0 auto 0 0;
-  width: min(var(--app-size-drawer), calc(100% - var(--app-space-gutter) * 2));
-  max-width: none;
-  height: 100dvh;
-  max-height: 100dvh;
-  margin: 0;
-  padding: 0 var(--app-space-gutter) var(--app-space-group);
-  border: 0;
-  border-right: 1px solid var(--app-color-border-layout);
-  background: var(--app-color-ground);
-  color: var(--app-color-text);
-  scrollbar-gutter: stable;
-  scrollbar-width: auto;
-  scrollbar-color: auto;
-  overscroll-behavior: contain;
-  scroll-padding-block: var(--app-size-mobile-header) var(--app-space-group);
-  &::-webkit-scrollbar {
-    width: 3px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: transparent;
-  }
-  &:hover::-webkit-scrollbar-thumb {
-    background: var(--app-color-border-soft);
-  }
-  &:focus-within::-webkit-scrollbar-thumb {
-    background: var(--app-color-border-soft);
-  }
-  &::backdrop {
-    background: var(--app-color-backdrop);
-  }
-}
-.wg_shell__drawerHeader {
-  position: sticky;
-  top: 0;
-  z-index: var(--app-z-index-sticky);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--app-space-inline);
-  min-height: var(--app-size-mobile-header);
-  margin-bottom: var(--app-space-block);
-  background: var(--app-color-ground);
-}
-.wg_shell__drawerTitle {
-  margin: 0;
-  font-size: var(--app-font-size-part);
-  font-weight: var(--app-font-weight-strong);
-}
-.wg_shell__drawerClose {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--app-size-menu-button);
-  height: var(--app-size-menu-button);
-  padding: 0;
-  border: 0;
-  border-radius: var(--app-radius-box);
-  background: transparent;
-  color: var(--app-color-text-strong);
-  cursor: pointer;
-  &:hover {
-    background: var(--app-color-accent-soft);
-  }
-  &:focus-visible {
-    outline: var(--app-outline-focus);
-    outline-offset: var(--app-outline-focus-offset);
-  }
-}
-.wg_shell__drawerContent {
-  min-width: 0;
-}
-.wg_shell__cursorFace {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--app-z-index-popper);
-  visibility: hidden;
-  pointer-events: none;
-  user-select: none;
-  image-rendering: pixelated;
-}
-.wg_shell__cursorFace--visible {
-  visibility: visible;
-}
-@supports not selector(::-webkit-scrollbar) {
-  .wg_shell__sidebar {
-    scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
-    &:hover {
-      scrollbar-color: var(--app-color-border-soft) transparent;
-    }
-    &:focus-within {
-      scrollbar-color: var(--app-color-border-soft) transparent;
-    }
-  }
-  .wg_shell__drawer {
-    scrollbar-width: thin;
-    scrollbar-color: var(--app-color-border-soft) transparent;
-  }
-}
-@media (forced-colors: active) {
-  .wg_shell__sidebar {
-    scrollbar-width: thin;
-    scrollbar-color: auto;
-    &:hover {
-      scrollbar-color: auto;
-    }
-    &:focus-within {
-      scrollbar-color: auto;
-    }
-  }
-  .wg_shell__drawer {
-    scrollbar-width: thin;
-    scrollbar-color: auto;
-    &:hover {
-      scrollbar-color: auto;
-    }
-    &:focus-within {
-      scrollbar-color: auto;
-    }
+@media (width < 1536px) {
+  .wg_shell__root {
+    grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
   }
 }
 @media (width < 1024px) {
@@ -1056,27 +1150,6 @@
     max-width: calc(var(--app-size-main) + var(--app-space-gutter) * 2);
     grid-template: "nav" auto "main" 1fr / minmax(0, 1fr);
   }
-  .wg_shell__sidebar {
-    position: static;
-    min-height: 0;
-    max-height: none;
-    overflow-y: visible;
-    margin-block-end: var(--app-space-block);
-    margin-inline-end: 0;
-    border-bottom: 1px solid var(--app-color-border-layout);
-  }
-  .wg_shell__sidebar--navigationReady {
-    position: sticky;
-    top: 0;
-    z-index: var(--app-z-index-sticky);
-    background: var(--app-color-ground);
-  }
-  .wg_shell__brandRow {
-    position: static;
-    height: var(--app-size-mobile-header);
-    padding-block: 0;
-    align-items: center;
-  }
   .wg_shell__main {
     padding-block-start: var(--app-space-page-top);
     padding-inline: 0;