docs: expand navigation and full-stack guides

app/styles/global.css

@@ -11,6 +11,52 @@
   align-items: start;
   padding-top: clamp(1.5rem, 4vw, 3rem);
 }
+.docs-layout--navigation {
+  grid-template-columns: 14rem minmax(0, 1fr) 13rem;
+  width: min(1440px, calc(100% - 2rem));
+  max-width: 1440px;
+}
+.docs-reading-column {
+  min-width: 0;
+}
+.docs-reading-column .documentation.standalone {
+  width: 100%;
+  margin: 0;
+}
+.docs-section-menu {
+  position: sticky;
+  top: 6.5rem;
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+  padding-right: 1.25rem;
+  border-right: 1px solid var(--border);
+}
+.docs-section-menu nav,
+.docs-section-menu section {
+  display: grid;
+}
+.docs-section-menu nav {
+  gap: 1.4rem;
+}
+.docs-section-menu section {
+  gap: 0.5rem;
+}
+.docs-section-menu strong {
+  margin-bottom: 0.2rem;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.docs-section-menu a {
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+  text-decoration: none;
+}
+.docs-section-menu a:hover,
+.docs-section-menu a:focus-visible {
+  color: var(--brand);
+}
 .package-document,
 .component-detail-page .documentation {
   width: 100%;
@@ -134,6 +180,9 @@
   .docs-layout .on-this-page {
     display: none;
   }
+  .docs-layout--navigation {
+    grid-template-columns: 13rem minmax(0, 1fr);
+  }
 }
 @media (max-width: 640px) {
   .component-grid {
@@ -145,6 +194,13 @@
   .doc-intro {
     border-radius: 18px;
   }
+  .docs-layout--navigation {
+    width: min(100% - 1.25rem, 100%);
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .docs-section-menu {
+    display: none;
+  }
 }
 
 /* Documentation v3: editorial hierarchy, not a dashboard of cards. */