docs(pages): tighten demo cleanup

Follow-up to 1440849 — fixes flagged by code review:

- Drop unused `--paper-4` CSS variable.
- Remove empty `.demo__readout:not(:empty):not(:has(*))` ruleset (the
  comment was its only content).
- Cache `$('#autocomplete-ajax-x')` as `$ghost` in demo.js so the per-
  keystroke `onHint` callback doesn't re-query the DOM.
- Drop duplicate `aria-label="Suggestions render here"` on
  `#suggestions-container` — the visible `<span>` text already conveys
  it, so the label was causing duplicate screen-reader announcements.
- Replace sub-pixel `1.5px` border / `0.5px` padding on the match-
  highlight `<strong>` with whole-pixel values (browsers were rounding
  the sub-pixels inconsistently across rows).
- Drop the redundant `color` transition on `.autocomplete-suggestion`
  (selected and default both resolve to `--ink`, so it was a no-op).
- Derive `.ghost-stack` height from `1lh + padding + border` rather
  than a hardcoded `3.5rem`, with `min-height` as a fallback — keeps
  the ghost field in sync with the input's actual line metrics
  including on narrow viewports where font-size drops.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tkirda-bison

docs/content/styles.css

@@ -9,7 +9,6 @@
     --paper:        #f4eee2;
     --paper-2:      #faf6ec;
     --paper-3:      #ebe3d0;
-    --paper-4:      #e0d5bb;
     --ink:          #1c1a16;
     --ink-2:        #524c43;
     --ink-3:        #8a8275;
@@ -320,7 +319,6 @@ p, h1, h2, h3 { margin: 0; }
     line-height: 1.45;
     transition: border-color 0.2s ease, color 0.2s ease;
 }
-.demo__readout:not(:empty):not(:has(*)) { /* default empty state */ }
 .demo__readout.has-selection {
     border-left-color: var(--accent);
     color: var(--ink);
@@ -361,7 +359,8 @@ p, h1, h2, h3 { margin: 0; }
 /* ghost (#01) */
 .ghost-stack {
     position: relative;
-    height: 3.5rem;
+    min-height: 3.5rem;
+    height: calc(1lh + 1.4em + 2px); /* font line + 2× 0.7em padding + 1px border */
 }
 .ghost-stack__main,
 .ghost-stack__ghost {
@@ -455,7 +454,7 @@ p, h1, h2, h3 { margin: 0; }
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    transition: background 0.08s ease, color 0.08s ease;
+    transition: background 0.08s ease;
     line-height: 1.35;
 }
 .autocomplete-no-suggestion {
@@ -469,11 +468,11 @@ p, h1, h2, h3 { margin: 0; }
     color: var(--ink);
 }
 .autocomplete-suggestions strong {
+    /* match highlight rendered as an editor's underline, not bold-only */
     font-weight: 600;
     color: var(--accent-2);
-    border-bottom: 1.5px solid var(--accent);
-    padding-bottom: 0.5px;
-    /* a printer's editorial underline, not a bold-only emphasis */
+    border-bottom: 1px solid var(--accent);
+    padding-bottom: 1px;
 }
 .autocomplete-group {
     padding: 0.6em 0.95em 0.5em;

docs/index.htm

@@ -152,8 +152,7 @@ <h2 class="demo__title">Custom suggestion container</h2>
                         <input class="demo__input demo__input--narrow" type="text"
                             id="autocomplete-custom-append" autocomplete="off"
                             placeholder="country">
-                        <div id="suggestions-container" class="inline-stack__sink"
-                            aria-label="Suggestions render here">
+                        <div id="suggestions-container" class="inline-stack__sink">
                             <span class="inline-stack__hint">Suggestions render here &rarr;</span>
                         </div>
                     </div>

docs/scripts/demo.js

@@ -38,6 +38,7 @@ $(function () {
     // 01 — Ajax lookup with ghost completion
     // -----------------------------------------------------------------
     var $selectionAjax = $('#selection-ajax');
+    var $ghost = $('#autocomplete-ajax-x');
 
     $('#autocomplete-ajax').devbridgeAutocomplete({
         serviceUrl: '/api/countries',
@@ -50,7 +51,7 @@ $(function () {
                 );
         },
         onHint: function (hint) {
-            $('#autocomplete-ajax-x').val(hint);
+            $ghost.val(hint);
         },
         onInvalidateSelection: function () {
             $selectionAjax.removeClass('has-selection').text('No selection.');