diff --git a/patches/README.md b/patches/README.md
index db4332bda085b43ca15fe23dce244fef98d00f72..3eb12e269a8fd8909c4f6515f91d95b582977376 100644
--- a/patches/README.md
+++ b/patches/README.md
@@ -86,6 +86,15 @@ So a rule added to `nav.scss` reaches nobody without changing how ten packages are built. The markup is the one channel both halves already share, so an inline `<style>` travels with the panel — the same block, declaration for declaration, in `srht/templates/nav.html` here and in `sr-ht-ecore`'s `chrome.tmpl`. Each colour is annotated with the scss variable it was compiled from, so putting it back into `nav.scss` for an upstream submission is mechanical. (`html/template` strips CSS comments on the way out and Jinja does not, so the two *pages* differ by exactly those annotations while the rules are identical — diff the declarations, not the markup.)
 
 If the instance ever builds core.sr.ht itself, delete both blocks and let the scss do its job.
 
+**What the first styled version got wrong**, since all four defects came out of looking at the rendered page rather than at the code, and none of them would have shown up in a test:
+
+- The counter sat *above* the row. Its siblings are `.nav-link`, which `.navbar-expand-sm` gives `padding: .5rem`; the `<summary>` had `0 .5rem`.
+- A mouse click drew a focus ring, so a text label read as a form control parked in the navbar. `:focus` was styled where only `:focus-visible` should have been.
+- The panel came out one column and thirteen rows tall. Its containing block is that narrow `<li>`, so shrink-to-fit sized it to one service and `flex-wrap` never had room to wrap — `width: max-content` plus a cap is what lets the groups stand side by side.
+- It borrowed the *page's* vocabulary — blue underlined links, a bright border, headings brighter than the links themselves — and read as a document fragment glued into the chrome. It borrows the navbar's now: muted links that go white on hover, no underlines, and the group label a step below them.
+
+One more, on the dark half: the panel was filled with `darken($gray-900, 6)`, which is the tone this theme *recesses* with (`.event` cards, the active tab). A menu floating over the page painted with it reads as a hole cut into the navbar. On a dark UI "above" is lighter, so it is `$gray-800` now.
+
 **Verify it still applies cleanly:**
 
 ```bash
diff --git a/patches/core-nav-groups.patch b/patches/core-nav-groups.patch
index 73e2985000be6fbc4d4ac487ace26eb11bf0b207..e24e60cf25688b8d53535a40f43e83665a8f5a7d 100644
--- a/patches/core-nav-groups.patch
+++ b/patches/core-nav-groups.patch
@@ -20,7 +20,7 @@                  'coalesce_search_terms': coalesce_search_terms,
                  'to_rid': to_rid,
 --- a/srht/templates/nav.html
 +++ b/srht/templates/nav.html
-@@ -14,21 +14,127 @@
+@@ -14,21 +14,169 @@
    </a>
  </span>
  {% endif %}
@@ -76,67 +76,109 @@ +    .navbar .nav-item.nav-more summary {
 +      display: block; /* with list-style:none, this is what hides the triangle */
 +      list-style: none;
 +      cursor: pointer;
-+      padding: 0 .5rem;
++      /* The padding .navbar-expand-sm gives .nav-link, so the counter sits on
++         the row instead of riding above it. */
++      padding: .5rem;
 +      color: dimgray; /* $navbar-light-color */
 +      white-space: nowrap;
 +    }
 +    .navbar .nav-item.nav-more summary::-webkit-details-marker { display: none; }
-+    .navbar .nav-item.nav-more summary::after { content: " \25be"; }
-+    .navbar .nav-item.nav-more details[open] > summary::after { content: " \25b4"; }
++    .navbar .nav-item.nav-more summary::after {
++      content: "\25be";
++      font-size: .7em;
++      margin-left: .25rem;
++    }
++    .navbar .nav-item.nav-more details[open] > summary::after { content: "\25b4"; }
 +    .navbar .nav-item.nav-more summary:hover {
-+      color: #000;
++      color: #000; /* $navbar-light-active-color */
 +      text-decoration: underline;
 +    }
-+    .navbar .nav-item.nav-more summary:focus,
++    /* Keyboard only. Styling :focus as well drew this ring on every mouse
++       click, which turned a text label into something that reads as a form
++       control parked in the middle of the navbar. */
++    .navbar .nav-item.nav-more summary:focus { outline: none; }
 +    .navbar .nav-item.nav-more summary:focus-visible {
-+      outline: 2px solid #0242f2; /* $link-color */
-+      outline-offset: -2px;
-+      color: #000;
++      outline: 1px solid #0242f2; /* $link-color */
++      outline-offset: 2px;
 +    }
 +    .navbar .nav-item.nav-more .nav-more-panel {
 +      position: absolute; /* out of flow, or opening it shoves the page down */
 +      z-index: 1030;
 +      left: 0;
-+      min-width: 12rem;
-+      padding: .5rem 0;
-+      background: #f8f9fa; /* $gray-100 */
-+      border: 1px solid #dee2e6; /* $gray-300 */
++      /* The containing block is that narrow <li>, so a shrink-to-fit panel
++         came out one service wide and as tall as the instance — a column of
++         thirteen rows hanging off the navbar. max-content lets the groups
++         stand side by side, and the cap is what folds them back on a phone. */
++      width: max-content;
++      max-width: min(88vw, 44rem);
 +      display: flex;
 +      flex-wrap: wrap;
 +      align-items: flex-start;
++      gap: .25rem 1.75rem;
++      padding: .75rem 1rem;
++      background: #f8f9fa; /* $gray-100, the tone .event already raises with */
++      border: 1px solid #dee2e6; /* $gray-300 */
++      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); /* bootstrap's own $box-shadow */
 +    }
-+    .navbar .nav-item.nav-more .nav-more-group { padding: 0 1rem; min-width: 8rem; }
++    .navbar .nav-item.nav-more .nav-more-group { min-width: 6rem; }
 +    .navbar .nav-item.nav-more .nav-more-group ul {
 +      list-style: none;
 +      margin: 0;
 +      padding: 0;
 +    }
++    /* A navbar link, not a body link. Left to the page's own anchor styling
++       these came out blue and underlined, and the panel read as a fragment of
++       a document glued into the chrome rather than as part of it. */
 +    .navbar .nav-item.nav-more .nav-more-group a {
 +      display: block;
-+      padding: .1rem 0;
++      padding: .15rem 0;
 +      white-space: nowrap;
++      color: dimgray; /* $navbar-light-color */
++      text-decoration: none;
 +    }
++    .navbar .nav-item.nav-more .nav-more-group a:hover,
++    .navbar .nav-item.nav-more .nav-more-group a:focus {
++      color: #000; /* $navbar-light-active-color */
++      text-decoration: underline;
++    }
++    /* The only thing in the panel that is not a link, and the reason the panel
++       is a taxonomy rather than a list. Small, spaced and quiet, so the shape
++       reads first and the eye still lands on the services. */
 +    .navbar .nav-item.nav-more .nav-more-title {
 +      color: #6c757d; /* $gray-600 */
-+      font-size: .85rem;
++      font-size: .7rem;
++      letter-spacing: .08em;
 +      text-transform: uppercase;
-+      padding-bottom: .1rem;
++      padding-bottom: .25rem;
 +    }
 +    @media (max-width: 575.98px) {
 +      .navbar .nav-item.nav-more { position: static; }
-+      .navbar .nav-item.nav-more .nav-more-panel { width: 100%; }
++      .navbar .nav-item.nav-more .nav-more-panel { width: 100%; max-width: none; }
 +    }
 +    @media (prefers-color-scheme: dark) {
 +      .navbar-light .navbar-nav .nav-item.nav-more summary { color: #78828a; }
-+      .navbar-light .navbar-nav .nav-item.nav-more summary:hover,
-+      .navbar-light .navbar-nav .nav-item.nav-more summary:focus,
-+      .navbar-light .navbar-nav .nav-item.nav-more summary:focus-visible { color: #fff; }
++      .navbar-light .navbar-nav .nav-item.nav-more summary:hover { color: #fff; }
++      .navbar-light .navbar-nav .nav-item.nav-more summary:focus-visible {
++        outline-color: #3395ff; /* $link-dark */
++      }
++      /* Lighter than the page, not darker. darken($gray-900, 6) is the tone
++         this theme recesses with — .event cards, the active tab — and a menu
++         floating over the page painted with it reads as a hole cut into the
++         navbar. On a dark UI "above" is lighter, so $gray-800 fills and
++         $gray-700 draws the hairline. */
 +      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-panel {
-+        background: #131618; /* darken($gray-900, 6) */
++        background: #343a40; /* $gray-800 */
 +        border-color: #495057; /* $gray-700 */
++        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
 +      }
-+      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-title { color: #ced4da; }
-+      .navbar-light .navbar-nav .nav-item.nav-more a { color: #3395ff; }
++      /* A step below the services under it: the label is structure, not a
++         destination. Both tones are picked against the $gray-800 fill above —
++         $gray-600 sat at 3.1:1 on it, and the size and letter-spacing already
++         carry the distinction without spending contrast on it. */
++      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-title { color: #adb5bd; /* $gray-500 */ }
++      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-group a { color: #ced4da; /* $gray-400 */ }
++      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-group a:hover,
++      .navbar-light .navbar-nav .nav-item.nav-more .nav-more-group a:focus { color: #fff; }
 +    }
 +    </style>
 +    <details>