docs(ui): add animated underline for nav tabs (#21912)

Add a responsive, animated underline indicator for navigation tabs to
improve visual focus and active-state feedback.

- Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline
  element, including transitions, positioning, and dark mode color.
- Hide default first h1 in #content to keep header layout consistent.
- Add docs/nav-tabs-underline.js to create and manage the underline
  element, observe DOM mutations, and update underline position/width on
  changes, resize, and when fonts load.
- Preserve last known underline position/width across re-initializations
  to avoid visual jumps.

This change makes active tab state visible with smooth movement and
ensures the underline stays synchronized with dynamic content.

docs/style.css

@@ -1,3 +1,34 @@
 #content > h1:first-of-type {
   display: none !important;
 }
+
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs-item > div {
+  opacity: 0;
+}
+
+.nav-tabs-underline {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 1.5px;
+  width: var(--nav-tab-underline-width, 0);
+  transform: translateX(var(--nav-tab-underline-x, 0));
+  background-color: rgb(var(--primary));
+  border-radius: 999px;
+  pointer-events: none;
+  opacity: 0;
+  transition: transform 260ms ease-in-out, width 260ms ease-in-out, opacity 160ms ease-in-out;
+  will-change: transform, width;
+}
+
+html.dark .nav-tabs-underline {
+  background-color: rgb(var(--primary-light));
+}
+
+.nav-tabs-underline-ready .nav-tabs-underline {
+  opacity: 1;
+}