feat(sidebar): update CSS for composable compound component

Add collapsed state styles (sidebarCollapsed, collapseToggle), icon-rail
mode (sectionRailItem, sectionIcon), and width transition. Remove old
monolithic classes (navArea, section, items, item, navIcon, routeArrow,
all starred-section styles). Pin footer with margin-top: auto.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/layout/Sidebar/Sidebar.module.css

@@ -5,6 +5,36 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
+  transition: width 200ms ease;
+}
+
+.sidebarCollapsed {
+  width: 48px;
+}
+
+/* Collapse toggle */
+.collapseToggle {
+  position: absolute;
+  top: 8px;
+  right: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--sidebar-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  padding: 0;
+  z-index: 1;
+  transition: color 0.12s;
+}
+
+.collapseToggle:hover {
+  color: var(--sidebar-text);
 }
 
 /* Logo */
@@ -15,6 +45,12 @@
   gap: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebarCollapsed .logo {
+  padding: 16px 0;
+  justify-content: center;
 }
 
 .logoImg {
@@ -106,71 +142,40 @@
   background: rgba(255, 255, 255, 0.08);
 }
 
-/* Scrollable nav area */
+/* Section icon (collapsed rail) */
-.navArea {
+.sectionIcon {
-  flex: 1;
+  display: flex;
-  overflow-y: auto;
+  align-items: center;
-  min-height: 0;
+  justify-content: center;
-}
+  width: 16px;
-
-/* Section headers */
-.section {
-  padding: 14px 12px 5px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
   color: var(--sidebar-muted);
 }
 
-/* Items container */
+/* Rail item (collapsed sidebar section) */
-.items {
+.sectionRailItem {
-  padding: 0 6px;
-}
-
-/* Nav item (flat links like Dashboards) */
-.item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
-  padding: 7px 12px;
+  padding: 10px 0;
-  border-radius: var(--radius-sm);
-  color: var(--sidebar-text);
-  font-size: 13px;
   cursor: pointer;
-  transition: all 0.12s;
   border-left: 3px solid transparent;
-  margin-bottom: 1px;
+  transition: background 0.12s;
-  user-select: none;
 }
 
-.item:hover {
+.sectionRailItem:hover {
   background: var(--sidebar-hover);
-  color: #e8dfd4;
 }
 
-.item.active {
+.sectionRailItemActive {
-  background: var(--sidebar-active);
-  color: var(--amber);
   border-left-color: var(--amber);
 }
 
-.navIcon {
+.sectionRailItemActive .sectionIcon {
-  font-size: 14px;
-  width: 18px;
-  text-align: center;
-  color: var(--sidebar-muted);
-  flex-shrink: 0;
-}
-
-.item.active .navIcon {
   color: var(--amber);
 }
 
-.routeArrow {
+.treeSectionActive {
-  color: var(--sidebar-muted);
+  border-left-color: var(--amber);
-  font-size: 10px;
-  flex-shrink: 0;
 }
 
 /* Item sub-elements */
@@ -383,100 +388,13 @@
   color: var(--amber);
 }
 
-/* ── Starred section ─────────────────────────────────────────────────────── */
-
-.starredSection {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  margin-top: 4px;
-}
-
-.starredHeader {
-  color: var(--amber);
-}
-
-.starredList {
-  padding: 0 6px 6px;
-}
-
-.starredGroup {
-  margin-bottom: 4px;
-}
-
-.starredGroupLabel {
-  padding: 4px 12px 2px;
-  font-size: 10px;
-  color: var(--sidebar-muted);
-  font-weight: 500;
-}
-
-.starredItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 12px;
-  border-radius: var(--radius-sm);
-  color: var(--sidebar-text);
-  font-size: 12px;
-  cursor: pointer;
-  transition: background 0.12s;
-  user-select: none;
-}
-
-.starredItem:hover {
-  background: var(--sidebar-hover);
-}
-
-.starredItemInfo {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.starredItemName {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 500;
-}
-
-.starredItemContext {
-  font-size: 10px;
-  color: var(--sidebar-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Remove button */
-.starredRemove {
-  background: none;
-  border: none;
-  padding: 2px;
-  margin: 0;
-  color: var(--sidebar-muted);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, color 0.15s;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.starredItem:hover .starredRemove {
-  opacity: 1;
-}
-
-.starredRemove:hover {
-  color: var(--error);
-}
-
 /* ── Bottom links ────────────────────────────────────────────────────────── */
 
 .bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 6px;
   flex-shrink: 0;
+  margin-top: auto;
 }
 
 .bottomItem {