Refine collapsed sidebar spacing

css/style.css

@@ -4,7 +4,7 @@
     --color-page keeps the primary content surface neutral while --color-surface
     powers the dark shells (sidebar, dialogs, cards).
   */
-  --color-page: #f8fafc;
+  --color-page: #ffffff;
   --color-surface: #0f172a;
   --color-bg: var(--color-surface);
   --color-card: #1e293b;
@@ -1475,7 +1475,11 @@ footer a:hover {
   width: var(--sidebar-width);
   height: 100vh;
   height: 100dvh;
-  background-color: var(--color-surface);
+  /*
+    Keep the rail container aligned with the primary page background so the
+    dark navigation panel feels like it floats above a neutral canvas.
+  */
+  background-color: var(--color-page);
   color: var(--color-text);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -1584,6 +1588,7 @@ footer a:hover {
 }
 
 .sidebar-icon {
+  /* Lock icon sizing so the glyphs remain steady during collapse/expand. */
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
@@ -1735,27 +1740,16 @@ body.sidebar-open #sidebarOverlay {
 
   body.sidebar-collapsed #sidebar .sidebar-nav-link,
   #sidebar.sidebar-collapsed .sidebar-nav-link {
+    /*
+      Center the icon rail in collapsed mode without altering icon sizing so
+      the glyphs remain consistent between states.
+    */
     justify-content: center;
-    padding-inline: 0.5rem;
-    gap: 0.25rem;
   }
 
   body.sidebar-expanded #sidebar .sidebar-nav-link,
   #sidebar.sidebar-expanded .sidebar-nav-link {
     justify-content: flex-start;
-    padding-inline: 0.875rem;
-  }
-
-  body.sidebar-collapsed #sidebar .sidebar-nav-link .sidebar-icon,
-  #sidebar.sidebar-collapsed .sidebar-nav-link .sidebar-icon {
-    margin-right: 0;
-    margin-inline-end: 0;
-  }
-
-  body.sidebar-expanded #sidebar .sidebar-nav-link .sidebar-icon,
-  #sidebar.sidebar-expanded .sidebar-nav-link .sidebar-icon {
-    margin-right: 0.75rem;
-    margin-inline-end: 0.75rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-text,
@@ -1766,15 +1760,19 @@ body.sidebar-open #sidebarOverlay {
   body.sidebar-collapsed #sidebar .sidebar__inner,
   #sidebar.sidebar-collapsed .sidebar__inner {
     /*
-      Reduce horizontal padding when collapsed so icon rails remain visible
-      instead of being clipped by the fixed 4rem rail width.
+      Trim horizontal padding aggressively enough for the icon rail to remain
+      visible inside the 4rem track while still giving the panel breathing room.
     */
-    padding-inline: 0.75rem;
+    padding-inline: 0.625rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-panel,
   #sidebar.sidebar-collapsed .sidebar-panel {
-    padding-inline: 0.5rem;
+    /*
+      Match the outer adjustment while keeping the rounded gradient card
+      intact. This spacing ensures 1.5rem icons can render without being clipped.
+    */
+    padding-inline: 0.375rem;
   }
 
   #sidebar .sidebar-toggle-icon--rotated {
@@ -1787,8 +1785,12 @@ body.sidebar-open #sidebarOverlay {
   }
 
   body.sidebar-collapsed #sidebar .sidebar-dropup-trigger {
+    /*
+      Align the "More" control with the centered icon rail while keeping its
+      padding consistent so the glyph does not scale between states.
+    */
     justify-content: center;
-    padding-inline: 0.5rem;
+    padding-inline: 0.875rem;
   }
 
   body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,