style(docs): polish sidebar, header, focus, and code block UX

- Sidebar: purple highlight on active/hover, remove left border
- Header: full-width on docs pages, constrained on homepage
- Header: Docs link non-clickable when already on docs pages
- Focus: strip background-color changes on focus, only show
  purple outline ring on keyboard focus-visible
- Skip to content: purple background on focus
- Code blocks: reduce header padding for less dead space
- Copy button: focus ring tightly wraps icon only (Copied! text
  positioned absolutely so it doesn't inflate button size)

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

Author: sergical

docs/src/components/Header.astro

@@ -12,14 +12,15 @@ const baseUrl = import.meta.env.BASE_URL;
 const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
 ---
 
-<div class="header sl-flex">
+<div class:list={["header", "sl-flex", { "header-homepage": isHomepage }]}>
   <div class="sl-flex header-left">
     <SiteTitle {...Astro.props} />
   </div>
 
   <div class="sl-flex header-right">
     {!isHomepage && <Search {...Astro.props} />}
-    <a href={`${base}getting-started/`} class="header-nav-link">Docs</a>
+    {isHomepage && <a href={`${base}getting-started/`} class="header-nav-link">Docs</a>}
+    {!isHomepage && <span class="header-nav-link header-nav-active">Docs</span>}
     <SocialIcons {...Astro.props} />
   </div>
 </div>
@@ -31,9 +32,12 @@ const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
     align-items: center;
     height: 100%;
     width: 100%;
+    padding: 0;
+  }
+
+  .header-homepage {
     max-width: var(--sl-content-width);
     margin: 0 auto;
-    padding: 0;
   }
 
   .header-left {
@@ -62,4 +66,13 @@ const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
   }
+
+  .header-nav-active {
+    opacity: 1;
+    cursor: default;
+  }
+
+  .header-nav-active:hover {
+    background: none;
+  }
 </style>

docs/src/components/PackageManagerCode.astro

@@ -40,7 +40,7 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
     overflow: hidden;
     margin: 1rem 0;
     background: rgba(255, 255, 255, 0.04);
-    padding: 0.5rem;
+    padding: 0 0.5rem 0.5rem;
   }
 
   .pm-header {
@@ -56,7 +56,7 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
   }
 
   .pm-tab {
-    padding: 0.5rem 0.75rem;
+    padding: 0.35rem 0.75rem;
     font-size: 0.8rem;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.4);
@@ -87,9 +87,9 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
   }
 
   .pm-copy {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
     background: none;
     border: none;
     color: rgba(255, 255, 255, 0.4);
@@ -102,12 +102,23 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
     color: rgba(255, 255, 255, 0.8);
   }
 
+  .pm-copy:focus-visible {
+    color: rgba(255, 255, 255, 0.8);
+    outline: 2px solid rgba(139, 92, 246, 0.5);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
   .pm-copied {
+    position: absolute;
+    right: 100%;
+    margin-right: 0.5rem;
     font-size: 0.75rem;
     color: #22c55e;
     opacity: 0;
     transform: translateY(0.25rem);
     transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+    white-space: nowrap;
   }
 
   .pm-copy.copied .pm-copied {

docs/src/styles/custom.css

@@ -62,6 +62,26 @@ body {
   background: var(--sl-color-bg);
 }
 
+/* Strip all focus side effects — only our outline should show */
+:focus {
+  outline: none !important;
+  background-color: inherit !important;
+}
+
+/* Re-add purple outline for keyboard focus */
+:focus-visible {
+  outline: 2px solid rgba(139, 92, 246, 0.5) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px;
+}
+
+/* Skip to content link — visible on any focus (keyboard only element) */
+a[href="#_top"]:focus {
+  background: rgba(139, 92, 246, 0.9) !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
 /* Subtle background gradient */
 .sl-layout::before {
   content: "";
@@ -1059,7 +1079,7 @@ code {
 /* Header */
 .expressive-code .header {
   background: rgba(255, 255, 255, 0.03) !important;
-  padding: 0.7rem 1rem !important;
+  padding: 0.35rem 1rem !important;
   border: none !important;
 }
 
@@ -1250,6 +1270,13 @@ code {
   color: rgba(255, 255, 255, 0.8) !important;
 }
 
+.expressive-code .copy button:focus-visible {
+  color: rgba(255, 255, 255, 0.8) !important;
+  outline: 2px solid rgba(139, 92, 246, 0.5) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}
+
 /* Hide the default div background effect */
 .expressive-code .copy button div {
   display: none !important;
@@ -1569,21 +1596,20 @@ starlight-toc nav h2 {
 
 nav.sidebar a {
   color: rgba(255, 255, 255, 0.75);
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background 0.15s ease;
   padding: 0.5rem 0.75rem;
   border-radius: 6px;
   margin: 1px 0;
 }
 
 nav.sidebar a:hover {
   color: #fff;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(139, 92, 246, 0.1);
 }
 
 nav.sidebar a[aria-current="page"] {
   color: #fff;
   background: rgba(139, 92, 246, 0.2);
-  border-left: 2px solid var(--sl-color-accent);
 }
 
 /* Sidebar group labels - "GETTING STARTED", "COMMANDS", etc. */