feat(search): refresh global search UI and align qa/docs updates

web/css/components/app-dialog.css

@@ -50,20 +50,28 @@
   /* ── Close icon ──────────────────────────────────────────────────────── */
   dialog > article .close,
   dialog > article :is(a, button)[rel="prev"] {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    margin-top: calc(var(--app-spacing) * -1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    min-height: 2rem;
+    width: 2rem;
+    height: 2rem;
+    margin-top: calc(var(--app-spacing) * -0.5);
     margin-bottom: var(--app-spacing);
     margin-left: auto;
     border: none;
+    border-radius: var(--app-border-radius);
     background-image: var(--app-icon-close);
     background-position: center;
     background-size: auto 1rem;
     background-repeat: no-repeat;
     background-color: transparent;
     opacity: 0.5;
-    transition: opacity var(--app-transition);
+    cursor: pointer;
+    transition:
+      opacity var(--app-transition),
+      background var(--app-transition);
   }
 
   dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
@@ -71,6 +79,18 @@
     opacity: 1;
   }
 
+  dialog > article .close:hover,
+  dialog > article :is(a, button)[rel="prev"]:hover {
+    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+  }
+
+  dialog > article .close:focus-visible,
+  dialog > article :is(a, button)[rel="prev"]:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+    opacity: 1;
+  }
+
   /* ── Mobile: stack buttons vertically ────────────────────────────────── */
   @media (max-width: 576px) {
     dialog > article > footer,

web/css/components/app-list-tabs.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--app-spacing);
-  border-bottom: 1px solid var(--list-tabs-border);
+  border-bottom: 1px solid var(--app-list-tabs-border);
 }
 
 .app-list-tabs button,
@@ -12,7 +12,7 @@
   background: transparent;
   border: 0;
   padding: 5px 10px 5px 10px;
-  color: var(--list-tabs-muted);
+  color: var(--app-list-tabs-muted);
   cursor: pointer;
   font-weight: var(--font-medium);
   border-bottom: 2px solid transparent;
@@ -29,6 +29,6 @@
 .app-list-tabs button.is-active,
 .app-list-tabs a.is-active {
   color: var(--app-color);
-  border-color: var(--list-tabs-active);
+  border-color: var(--app-list-tabs-active);
 }
 }

web/css/components/app-search.css

@@ -30,10 +30,6 @@
     gap: 0.5rem;
   }
 
-  .app-search-dialog-header h2 {
-    margin: 0;
-  }
-
   .app-search-dialog-form {
     display: flex;
     align-items: center;
@@ -66,18 +62,6 @@
     border-color: transparent;
   }
 
-  .app-search-dialog-shortcut {
-    border: 1px solid var(--app-border);
-    border-radius: 4px;
-    background: var(--app-card-background-color);
-    color: var(--app-muted-color);
-    font-size: var(--text-xs);
-    line-height: var(--leading-none);
-    padding: 0.15rem 0.35rem;
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-
   .app-search-dialog-header .close {
     flex-shrink: 0;
   }
@@ -107,10 +91,6 @@
     margin: 0 0 0.25rem;
   }
 
-  .app-search-dialog-empty-state small {
-    display: block;
-  }
-
   /* ── Results list ────────────────────────────────────────────────────── */
 
   .app-search-dialog-results {
@@ -129,31 +109,20 @@
   .app-search-dialog-category-heading {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
     font-size: var(--text-xs);
     font-weight: var(--font-semibold);
     color: var(--app-muted-color);
     text-transform: uppercase;
     letter-spacing: var(--tracking-wide);
-    margin-bottom: 5px;
+    padding: 0.25rem 0.75rem;
   }
 
-  .app-search-dialog-category-heading .bi {
-    font-size: var(--text-sm);
-  }
-
-  .app-search-dialog-category-count {
-    margin-left: auto;
-    font-size: 10px; /* icon-font metric — intentional px */
-    padding: 1px 4px;
-    min-width: 18px;
-    text-align: center;
-    border-radius: 999px;
-    background: var(--app-accordion-border-color);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    height: 18px;
+  .app-search-dialog-category-heading::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--app-border);
   }
 
   /* ── Individual result items ─────────────────────────────────────────── */
@@ -162,8 +131,9 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 2px;
   }
 
   .app-search-dialog-item {
@@ -174,14 +144,45 @@
   }
 
   .app-search-dialog-item a {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
     color: var(--app-color);
     text-decoration: none;
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--app-border-radius);
+  }
+
+  .app-search-dialog-item-icon {
+    color: var(--app-muted-color);
+    font-size: var(--text-base);
+    flex-shrink: 0;
+  }
+
+  .app-search-dialog-item-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .app-search-dialog-item-title {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    border-radius: var(--app-border-radius);
+  }
+
+  .app-search-dialog-item-subtitle {
+    font-size: var(--text-sm);
+    color: var(--app-muted-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .app-search-dialog-item mark {
+    padding: 0;
+    border-radius: 2px;
   }
 
   .app-search-dialog-item:hover,
@@ -193,16 +194,19 @@
     color: var(--app-primary);
   }
 
-  /* ── Category "view all" link ────────────────────────────────────────── */
+  /* ── "View all" item (last item in category) ─────────────────────────── */
 
-  .app-search-dialog-category-view-all {
-    font-size: var(--text-xs);
-    color: var(--app-primary);
-    text-decoration: none;
+  .app-search-dialog-item-view-all a {
+    color: var(--app-muted-color);
   }
 
-  .app-search-dialog-category-view-all:hover {
-    text-decoration: underline;
+  .app-search-dialog-item-view-all .app-search-dialog-item-title {
+    font-size: var(--text-sm);
+  }
+
+  .app-search-dialog-item-view-all:hover a,
+  .app-search-dialog-item-view-all.app-search-dialog-item-active a {
+    color: var(--app-primary);
   }
 
   /* ── Footer ──────────────────────────────────────────────────────────── */
@@ -223,6 +227,14 @@
     text-decoration: underline;
   }
 
+  .app-search-dialog-footer-hint kbd {
+    margin-right: 0.15rem;
+  }
+
+  .app-search-dialog-footer-hint kbd:not(:first-child) {
+    margin-left: 0.5rem;
+  }
+
   /* ── Mobile ──────────────────────────────────────────────────────────── */
 
   @media (max-width: 576px) {

web/css/components/app-tabs.css

@@ -27,7 +27,7 @@
     position: relative;
     display: flex;
     align-items: stretch;
-    border-bottom: 1px solid var(--tabs-border);
+    border-bottom: 1px solid var(--app-tabs-border);
   }
 
   /* Chevron scroll buttons — ghost icons, visible only on overflow.
@@ -36,7 +36,7 @@
   .app-tabs-nav-wrap > .app-tabs-chevron {
     --app-background-color: transparent;
     --app-border-color: transparent;
-    --app-color: var(--tabs-muted);
+    --app-color: var(--app-tabs-muted);
     --app-box-shadow: none;
     flex: 0 0 auto;
     display: none;
@@ -45,7 +45,7 @@
     border: none;
     border-radius: 50%;
     background: transparent;
-    color: var(--tabs-muted);
+    color: var(--app-tabs-muted);
     font-size: var(--text-xs);
     line-height: var(--leading-none);
     width: 24px;
@@ -119,7 +119,7 @@
   /* ------------------------------------------------------------------ */
   .app-tabs-nav {
     display: flex;
-    border-bottom: 1px solid var(--tabs-border); /* No-JS fallback border */
+    border-bottom: 1px solid var(--app-tabs-border); /* No-JS fallback border */
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     padding-block-start: 2px;
@@ -148,7 +148,7 @@
     background: transparent;
     border: 0;
     padding: 5px 10px 5px 10px;
-    color: var(--tabs-muted) !important;
+    color: var(--app-tabs-muted) !important;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     text-decoration: none;
@@ -169,7 +169,7 @@
   .app-tabs-nav a.is-active {
     --app-color: inherit;
     color: var(--app-color) !important;
-    border-color: var(--tabs-active);
+    border-color: var(--app-tabs-active);
   }
 
   .app-tabs-nav button.has-invalid,

web/css/components/app-tooltips.css

@@ -17,11 +17,11 @@
 
 [data-tooltip]::after {
   content: attr(data-tooltip);
-  background: var(--tooltip-bg);
-  color: var(--tooltip-color);
-  border: 1px solid var(--tooltip-border);
-  border-radius: var(--tooltip-radius);
-  box-shadow: var(--tooltip-shadow);
+  background: var(--app-tooltip-bg);
+  color: var(--app-tooltip-color);
+  border: 1px solid var(--app-tooltip-border);
+  border-radius: var(--app-tooltip-radius);
+  box-shadow: var(--app-tooltip-shadow);
   font-size: var(--text-xs);
   padding: 0.35rem 0.6rem;
   white-space: nowrap;
@@ -31,9 +31,9 @@
   content: '';
   width: 8px;
   height: 8px;
-  background: var(--tooltip-bg);
-  border-left: 1px solid var(--tooltip-border);
-  border-top: 1px solid var(--tooltip-border);
+  background: var(--app-tooltip-bg);
+  border-left: 1px solid var(--app-tooltip-border);
+  border-top: 1px solid var(--app-tooltip-border);
   transform: rotate(45deg);
 }
 
@@ -51,11 +51,11 @@
 }
 
 [data-tooltip]::after {
-  transform: translate(var(--tooltip-offset), -50%);
+  transform: translate(var(--app-tooltip-offset), -50%);
 }
 
 [data-tooltip]::before {
-  transform: translate(calc(var(--tooltip-offset) - 4px), -50%) rotate(45deg);
+  transform: translate(calc(var(--app-tooltip-offset) - 4px), -50%) rotate(45deg);
 }
 
 [data-tooltip][data-tooltip-pos="top"]::after,
@@ -63,7 +63,7 @@
   bottom: 100%;
   left: 50%;
   top: auto;
-  transform: translate(-50%, calc(-1 * var(--tooltip-offset)));
+  transform: translate(-50%, calc(-1 * var(--app-tooltip-offset)));
 }
 
 [data-tooltip][data-tooltip-pos="top"]::before,
@@ -71,33 +71,33 @@
   bottom: 100%;
   left: 50%;
   top: auto;
-  transform: translate(-50%, calc(-1 * (var(--tooltip-offset) - 2px))) rotate(45deg);
+  transform: translate(-50%, calc(-1 * (var(--app-tooltip-offset) - 2px))) rotate(45deg);
 }
 
 [data-tooltip][data-tooltip-pos="bottom"]::after {
   top: 100%;
   left: 50%;
-  transform: translate(-50%, var(--tooltip-offset));
+  transform: translate(-50%, var(--app-tooltip-offset));
 }
 
 [data-tooltip][data-tooltip-pos="bottom"]::before {
   top: 100%;
   left: 50%;
-  transform: translate(-50%, calc(var(--tooltip-offset) - 2px)) rotate(45deg);
+  transform: translate(-50%, calc(var(--app-tooltip-offset) - 2px)) rotate(45deg);
 }
 
 [data-tooltip][data-tooltip-pos="left"]::after {
   top: 50%;
   right: 100%;
   left: auto;
-  transform: translate(calc(-1 * var(--tooltip-offset)), -50%);
+  transform: translate(calc(-1 * var(--app-tooltip-offset)), -50%);
 }
 
 [data-tooltip][data-tooltip-pos="left"]::before {
   top: 50%;
   right: 100%;
   left: auto;
-  transform: translate(calc(-1 * (var(--tooltip-offset) - 2px)), -50%) rotate(45deg);
+  transform: translate(calc(-1 * (var(--app-tooltip-offset) - 2px)), -50%) rotate(45deg);
 }
 
 @media (prefers-reduced-motion: reduce) {