Keep the hero wash inside the screen on phones

site/src/styles/starlight/03-shell-layout-base.css

@@ -103,17 +103,14 @@
   position: relative;
 }
 
-.main-pane > .content-panel:first-of-type::before,
-.main-pane > .content-panel:first-child::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 0 0, rgba(var(--netscli-accent-rgb), 0.1), transparent 26rem),
-    linear-gradient(125deg, rgba(var(--netscli-accent-rgb), 0.04), rgba(255, 255, 255, 0.018) 38%, transparent 72%);
-}
+/* The hero band's corner wash is not declared here.
+ *
+ * It used to be, and the declaration was dead: 11-docs-chrome-consistency.css
+ * redeclares every property of it -- content, position, inset, z-index and
+ * both gradients -- with a selector list that is a superset of this one, and
+ * loads later. Nothing here ever painted. Both copies had also drifted to
+ * different opacities, angles and radii, so it was not even the same wash
+ * twice. 11 is the only definition now. */
 
 .main-pane > .content-panel:first-of-type > .sl-container,
 .main-pane > .content-panel:first-child > .sl-container {
@@ -134,12 +131,6 @@ html[data-theme='light'] .main-pane {
   background: var(--sl-color-bg);
 }
 
-html[data-theme='light'] .main-pane > .content-panel:first-of-type::before,
-html[data-theme='light'] .main-pane > .content-panel:first-child::before {
-  background:
-    radial-gradient(circle at 0 0, rgba(0, 122, 84, 0.08), transparent 25rem),
-    linear-gradient(125deg, rgba(0, 122, 84, 0.035), rgba(255, 255, 255, 0.38) 38%, transparent 72%);
-}
 
 .sl-markdown-content a {
   color: var(--netscli-accent);

site/src/styles/starlight/11-docs-chrome-consistency.css

@@ -46,8 +46,15 @@ html[data-theme='light'][data-docs-scrolled='true'] header.header {
   inset: 0;
   z-index: 0;
   pointer-events: none;
+  /* The radius is capped against the viewport as well.
+   *
+   * A fixed rem radius is a soft corner accent on a desktop-width band, but
+   * on a 375px phone the falloff runs off the right edge, so the whole band
+   * reads as tinted and the fade looks cut off rather than finished. 70vw
+   * brings it back inside the screen at phone widths; min() leaves desktop
+   * untouched, where the rem value is always the smaller of the two. */
   background:
-    radial-gradient(circle at 0 0, rgba(var(--netscli-accent-rgb), 0.11), transparent 25rem),
+    radial-gradient(circle at 0 0, rgba(var(--netscli-accent-rgb), 0.11), transparent min(25rem, 70vw)),
     linear-gradient(128deg, rgba(var(--netscli-accent-rgb), 0.045), rgba(30, 220, 255, 0.016) 38%, transparent 72%);
 }
 
@@ -77,7 +84,7 @@ html[data-theme='light'] .main-pane > .content-panel:first-child::before,
 html[data-theme='light'] .main-pane > main > .content-panel:first-of-type::before,
 html[data-theme='light'] .main-pane > main > .content-panel:first-child::before {
   background:
-    radial-gradient(circle at 0 0, rgba(0, 122, 84, 0.08), transparent 24rem),
+    radial-gradient(circle at 0 0, rgba(0, 122, 84, 0.08), transparent min(24rem, 70vw)),
     linear-gradient(128deg, rgba(0, 122, 84, 0.035), rgba(30, 220, 255, 0.024) 38%, transparent 72%);
 }
 

site/src/styles/starlight/22-mobile-docs-correction.css

@@ -61,14 +61,23 @@
     box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
   }
 
+  /* The current heading keeps its marker.
+     This listed every state including aria-current and forced the border
+     transparent for all of them, so the entry you are reading was the only
+     one in the dropdown with nothing to distinguish it but its text colour.
+     The reset now covers the resting and hover states only. */
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a,
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a:hover,
-  .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a:focus-visible,
+  .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a:focus-visible {
+    border-inline-start-color: transparent !important;
+    background: transparent !important;
+  }
+
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a[aria-current='true'],
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a[aria-current='true']:hover,
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a[aria-current='true']:focus-visible {
-    border-inline-start-color: transparent !important;
-    background: transparent !important;
+    border-inline-start-color: var(--netscli-accent) !important;
+    background: rgba(var(--netscli-accent-rgb), 0.07) !important;
   }
 
   .netscli-mobile-toc-wrapper mobile-starlight-toc .dropdown a:hover,

site/src/styles/starlight/24-mobile-regression-guardrails.css

@@ -28,24 +28,19 @@
 
   .docs-header-search {
     margin-inline-end: .35rem !important;
-  }.mobile-docs-trigger,
-  .mobile-toc-trigger,
-  .mobile-docs-bar,
-  .mobile-toc-bar {
-    cursor: pointer !important;
-  }
-
-  .mobile-toc-trigger,
-  .mobile-toc-trigger:hover,
-  .mobile-toc-trigger[aria-expanded="true"],
-  .right-sidebar .mobile-toc-trigger,
-  .right-sidebar .mobile-toc-trigger:hover {
-
-    border-inline-start: 0 !important;
-    color: var(--sl-color-white) !important;
-  }
-
-  .right-sidebar :where(a:hover, a[aria-current="true"], a[aria-current="page"]) {
+  }  
+
+  /* Not the section menu.
+     PageSidebar renders the mobile section dropdown inside .right-sidebar, so
+     this rule -- written to flatten the ToC rail -- also stripped the marker
+     off the current page in that menu. Every other entry there reserves 2px
+     for a border, so the one item that should have been marked was the only
+     one with no border at all. */
+  .right-sidebar
+    :where(a:hover, a[aria-current="true"], a[aria-current="page"]):not(
+      .docs-mobile-section-menu a,
+      mobile-starlight-toc .dropdown a
+    ) {
     background: transparent !important;
 
   }

site/src/styles/starlight/25-mobile-overrides-final.css

@@ -4,15 +4,26 @@
   html,
   body {
 
-    overflow-x: hidden !important;
+    /* Same reason as .main-frame below: `hidden` on one axis computes the
+       other to `auto`, which makes <body> its own scroll container. The
+       viewport is what scrolls, so a sticky descendant gets a scrollport that
+       never moves. */
+    overflow-x: clip !important;
   }
 
   .main-frame {
 
     max-width: 100vw !important;
     min-width: 0 !important;
     padding-inline-start: 0 !important;
-    overflow-x: hidden !important;
+    /* `clip`, not `hidden`. `overflow-x: hidden` makes this element a scroll
+       container -- the other axis computes to `auto` with it -- and the
+       document, not this box, is what actually scrolls. Any `position: sticky`
+       inside then has a scrollport that never moves, which is why the mobile
+       contents bar scrolled away with the page instead of pinning under the
+       header. `clip` contains the same horizontal overflow without creating a
+       scroll container. */
+    overflow-x: clip !important;
   }
 
   .main-pane,

site/src/styles/starlight/26-mobile-containment.css

@@ -4,15 +4,26 @@
   html,
   body {
     max-width: 100vw !important;
-    overflow-x: hidden !important;
+    /* Same reason as .main-frame below: `hidden` on one axis computes the
+       other to `auto`, which makes <body> its own scroll container. The
+       viewport is what scrolls, so a sticky descendant gets a scrollport that
+       never moves. */
+    overflow-x: clip !important;
   }
 
   .main-frame {
     width: 100vw !important;
     max-width: 100vw !important;
     min-width: 0 !important;
     padding-inline-start: 0 !important;
-    overflow-x: hidden !important;
+    /* `clip`, not `hidden`. `overflow-x: hidden` makes this element a scroll
+       container -- the other axis computes to `auto` with it -- and the
+       document, not this box, is what actually scrolls. Any `position: sticky`
+       inside then has a scrollport that never moves, which is why the mobile
+       contents bar scrolled away with the page instead of pinning under the
+       header. `clip` contains the same horizontal overflow without creating a
+       scroll container. */
+    overflow-x: clip !important;
   }
 
   .main-pane,

site/src/styles/starlight/28-final-interaction-guardrails.css

@@ -166,29 +166,20 @@ a.download-count:focus-visible,
   .starlight-menu-button,
   .starlight-menu-button button {
     margin-inline-start: .15rem !important;
-  }
-
-  .mobile-docs-trigger,
-  .mobile-toc-trigger,
-  .mobile-docs-bar,
-  .mobile-toc-bar,
-  .mobile-docs-trigger *,
-  .mobile-toc-trigger * {
-    cursor: pointer !important;
-  }
-
-  .mobile-toc-trigger,
-  .mobile-toc-trigger:hover,
-  .mobile-toc-trigger:focus-visible,
-  .right-sidebar .mobile-toc-trigger,
-  .right-sidebar .mobile-toc-trigger:hover,
-  .right-sidebar .mobile-toc-trigger:focus-visible {
-    background: transparent !important;
-    background-image: none !important;
-    border-inline-start: 0 !important;
-  }
-
-  .right-sidebar :where(a:hover, a[aria-current="true"], a[aria-current="page"]) {
+  }    
+
+  /* Not the section menu.
+     PageSidebar renders the mobile section dropdown inside .right-sidebar, so
+     this rule -- written to flatten the ToC rail -- also stripped the marker
+     off the current page in that menu. Every other entry there reserves 2px
+     for a border, so the one item that should have been marked was the only
+     one with no border at all. The contents dropdown, which lives in the same
+     component, had lost its marker the same way. */
+  .right-sidebar
+    :where(a:hover, a[aria-current="true"], a[aria-current="page"]):not(
+      .docs-mobile-section-menu a,
+      mobile-starlight-toc .dropdown a
+    ) {
     background: transparent !important;
     border-inline-start: 0 !important;
   }

site/src/styles/starlight/30-toc-under-hero.css

@@ -59,19 +59,23 @@
    border on the <ul> was the rail; laid out in columns it would mark only the
    first column and leave the other two floating. A border per link gives each
    column its own continuous rail, and the active link still lights it green. */
-/* Doubled class deliberately. These compete with `.right-sidebar-panel ...`
-   rules in 20-docs-shell-closeout.css that sit at the same specificity, and
-   the bundler does not emit these files in filename order -- both classes are
-   on the same element, so the extra class wins the tie regardless of order. */
-.docs-toc-under-hero.right-sidebar-panel :where(nav ul) {
+/* These compete with `.right-sidebar-panel ...` rules in
+   20-docs-shell-closeout.css. An earlier version of this comment claimed the
+   doubled class was needed because the bundler does not emit these files in
+   filename order; that was measured and is wrong for this pair -- 30 is
+   emitted after 20, and the rule it competes with carries no !important, so
+   these win on either count. (Emission order is not always filename order --
+   24 is emitted before 23 -- but that is not what was happening here; the
+   symptom that prompted it was a stale deployed stylesheet.) */
+.docs-toc-under-hero :where(nav ul) {
   border-inline-start: 0 !important;
 }
 
-.docs-toc-under-hero.right-sidebar-panel :where(a) {
+.docs-toc-under-hero :where(a) {
   margin-inline: 0 !important;
   border-inline-start: 2px solid var(--sl-color-hairline) !important;
 }
 
-.docs-toc-under-hero.right-sidebar-panel :where(a[aria-current='true']) {
+.docs-toc-under-hero :where(a[aria-current='true']) {
   border-inline-start-color: var(--netscli-accent) !important;
 }