Update styles to support collapsible nav (#9095)

In preparation for adding collapsible sections, cleans up the CSS
styling we apply to the nav.

The differences here are very subtle without collapsible sections
enabled. Note these screenshots show an increase in the secondary nav
font size (table of contents) which I subsequently fixed.

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 49 PM"
src="https://github.com/user-attachments/assets/10ea345f-73d3-430c-a6f0-8448e2471b60">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 29 PM"
src="https://github.com/user-attachments/assets/6c1af159-1684-4d00-b33d-c0a88b5e0aa9">

However, with collapsible sections you can see the bugs we're addressing

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 48 19 PM"
src="https://github.com/user-attachments/assets/7902791f-6c4d-4c84-b366-ba9c4bd96214">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 47 30 PM"
src="https://github.com/user-attachments/assets/6e0c4c7c-4a41-4dd5-a9f1-beabff965dbb">

docs/stylesheets/extra.css

@@ -117,59 +117,53 @@ the nav title is needed for backwards navigation in the collapsible
 nav variant.
 
 See https://github.com/astral-sh/uv/issues/5130 */
-.md-nav__title {
-  display: none;
-}
-@media screen and (max-width: 1219px) {
+@media screen and (min-width: 76.25em) {
   .md-nav__title {
-    display: flex ;
+    display: none;
   }
 }
 
-
-/* Reducing spacing between nav items to fit more content */
-.md-nav__link {
-  margin-top: 0.25em;
-}
-.md-nav__item--section {
-  margin: 0.75em 0;
-}
-/* Retain larger spacing for each top-level section in the nav */
-.md-nav__item--nested {
-  margin-top: 1em;
-}
-/* Retain larger spacing for the right-side table-of-contents nav */
-.md-nav--secondary .md-nav__link {
-  margin-top: 0.5em;
-}
-/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
-.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
-    user-select: none;
-}
-
-/* Increase the size of the sections headings, remove the bold */
-.md-nav__container > .md-nav__link:first-child {
-  font-size: 17.5px;
-  font-weight: normal;
-  margin-bottom: 0.1em;
-}
-
-/* Increase the size of the index nav item to match the sections */
-.md-nav--primary .md-nav__item:first-child {
-  font-size: 17.5px;
-  font-weight: normal;
-}
-/* But do not increase the size of other nav items */
-.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
-  font-size: 15px;
-  font-weight: normal;
+/* Tweak the formatting of the primary nav on a large screen */
+@media screen and (min-width: 76.25em) {
+  .md-nav--primary .md-nav {
+    font-size: 0.75rem;
+  }
+  /* Remove the bold from the section headings, use a larger font instead */
+  .md-nav__item--section > .md-nav__link {
+      font-weight: normal;
+      font-size: 0.85rem;
+  }
+  /* Reducing spacing between nav items to fit more content 
+  First, disable `nav__link` spacing then use `nav__item` to enforce margins this reduces inconsistencies in the spacing. */
+  .md-nav--primary .md-nav__link {
+    margin: 0;
+  }
+  .md-nav--primary .md-nav__item {
+    margin-top: 0.35em;
+  }
+  /* Use larger spacing for the sections headings */
+  .md-nav--primary .md-nav__item--section {
+    margin-bottom: 0.75em;
+    margin-top: 1em;
+  }
+  /* Increase the size of the first nav item to match the sections 
+  It has no children, so it is not considered a section */
+  .md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
+    font-size: 0.85rem;
+    margin-bottom: 0.75em; 
+  }
 }
 
 /* Bold the active nav link for accessibility */
 .md-nav__link--active {
   font-weight: bold;
 }
 
+/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
+.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
+  user-select: none;
+}
+
 /* Styling for the generated CLI reference page */
 .cli-reference dd {
   margin-top: 0.1em;