fix: space stacked buttons and align site tables

Wrapped buttons get a row gap, the copy button fits a one-line code block, tables line up with the text, four counters share one row, the sticky sidebar label gets a rule, and a phone table no longer squeezes its first column to one letter per line.

docs_assets/extra.css

@@ -200,11 +200,12 @@
   background: #fff;
 }
 
-/* Headline figures, read as one line of numbers */
+/* Headline figures, read as one line of numbers: four fit on one row of
+   the text column. */
 .rb-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-  gap: 0.6rem 1.5rem;
+  gap: 0.6rem 1rem;
   margin: 1rem 0 1.5rem;
   padding: 0.8rem 1rem;
   border: 1px solid var(--rb-border);
@@ -277,6 +278,18 @@
   margin: 1rem 0;
 }
 
+/* A table lines up with the text around it. Material indents the table
+   by 0.8rem and offsets that with a negative margin on the wrapper, which
+   the margin above removes, and the table's own margin doubled the space
+   above it. */
+.md-typeset .md-typeset__table {
+  padding: 0;
+}
+
+.md-typeset .md-typeset__table > table {
+  margin: 0;
+}
+
 .rb-timestamp {
   font-size: 0.8rem;
   color: var(--rb-text-secondary);
@@ -343,10 +356,6 @@
 
 /* Key and value cards: the header row is empty, so it is not drawn and
    not announced. */
-.rb-meta-card table {
-  margin: 1rem 0 !important;
-}
-
 .rb-meta-card thead,
 .md-typeset table thead:not(:has(th:not(:empty))) {
   display: none;
@@ -410,6 +419,24 @@
   min-height: 44px;
 }
 
+/* Buttons that wrap onto a second line keep a gap between the rows. */
+.md-typeset .md-button {
+  margin-block: 0.25rem;
+}
+
+/* The copy button stays inside a one-line code block: at 44 px it hung
+   below the block and covered the end of the line. 24 px is the minimum
+   target size of WCAG 2.2. */
+.md-typeset .md-code__button {
+  min-height: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.md-typeset pre > code {
+  padding-right: 2.6rem;
+}
+
 .rb-visually-hidden {
   position: absolute !important;
   width: 1px !important;
@@ -760,13 +787,21 @@
   }
 }
 
-/* The sidebar title stays legible over the list scrolling under it. */
+/* The sidebar title stays legible over the list scrolling under it. With
+   tabs the title shown is the active section's label, held at the top of
+   the sidebar: a rule under it ends the list cleanly instead of a half
+   line of text touching the label. */
 @media (min-width: 76.25em) {
   .md-nav--primary > .md-nav__title,
-  .md-nav--secondary > .md-nav__title {
+  .md-nav--secondary > .md-nav__title,
+  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
     background: var(--md-default-bg-color);
     border-bottom: 1px solid var(--rb-border);
   }
+
+  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
+    padding-bottom: 0.4rem;
+  }
 }
 
 /* Material's compact footer defaults sit just below WCAG AA on the dark bar. */
@@ -853,8 +888,15 @@
   .md-typeset table:not([class]):not([data-rb-stack]) :is(td, th):first-child {
     position: sticky;
     left: 0;
+    min-width: min(6rem, 30vw);
     max-width: 40vw;
     background: var(--md-default-bg-color);
+    overflow-wrap: break-word;
+  }
+
+  /* A long link or path breaks anywhere, so it never squeezes the first
+     column down to one letter per line. */
+  .md-typeset table:not([class]):not([data-rb-stack]) td:not(:first-child) :is(a, code) {
     overflow-wrap: anywhere;
   }
 
@@ -868,7 +910,6 @@
   .md-typeset pre > code {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
-    padding-right: 2.6rem;
   }
 
   .md-typeset :is(.rb-terminal, .language-text) pre > code {