/* ==========================================================================
   THE SEARCH AS A MENU — Jetpack Instant Search in the theme's clothes.

   Ported 2026-08-03 from lab/the-search-as-a-menu.html, the variant the review
   chose (2026-08-02) — a command palette in our own clothes: the search
   field on top, and beneath it ONLY the titles, each behind an arrow,
   wearing the hover pill our rail and colour menu rows wear. The close
   button goes (Esc and the scrim already close), the filters go, the
   excerpts go, the count-and-sort line goes, everything else goes.

   HOW FAR WE CAN GO, measured not guessed: all of it. Every removal is one
   display:none on Jetpack's own class — the plugin keeps rendering the
   close button, the filter column, the excerpts, and the stylesheet simply
   never shows them. Esc and the outside click are Jetpack's own behaviors,
   not the close button's, so nothing is lost with it. The one true limit
   stands unchanged: this is their DOM, so the ROOM cannot gain elements
   either — no keycap hints, no footer of keyboard help, nothing cmdk shows
   that Jetpack does not render.

   THE TRANSLATION: the room is .quire-command-palette's exact clothes at
   the dialog width; the field row is the command field; the list is a MENU
   — the rail's row grammar: --layout-row-min-height rows on
   --radius-control, hover = --surface-hover pill, titles in the SANS at
   --text-base (a menu row, not an article page), one line, ellipsis. The
   arrow ahead of each title is the system's Lucide arrow-right as a mask
   (the registry-debt dodge all three search lab pages share), muted, at
   --icon-control. Matched words keep the mark on --surface-selected — in
   the title now, since the title is all there is.

   HOW THIS FILE WINS (the port's whole second job): the lab page never
   loaded Jetpack's shipped stylesheet, so its skin never had to fight one.
   The live site does — inc/jetpack-search.php enqueues this file AFTER
   Jetpack's, so every tie in specificity falls to us, and any rule theirs
   states with MORE weight gets its selector doubled here rather than an
   !important (the card-skin lab page's own porting rule). The doubling
   class is .jetpack-instant-search, which Jetpack renders on the overlay
   root itself, so ".jetpack-instant-search .thing" is two of THEIR classes
   and still zero invented elements. Rules marked "PORT:" below exist only
   for this fight — they neutralize literals Jetpack's sheet would
   otherwise leak (a 2em row margin, a 60px clear button, a -50px focus
   margin) through properties the lab skin never needed to state.

   TOKENS: everything reads the vendored system (assets/css/quire.css) plus
   style.css's :root; nothing is restated here. Two resolutions differ from
   the lab and are DEBTS, not decisions:
   - --layout-row-min-height: the lab reads rail.css's trialled 40 at
     :root; the theme declares 36 only on the rail's own scope and the
     overlay is a body-level sibling, so here the rows read quire.css's
     root 30 until the trial (or the 36) is adopted at a scope the overlay
     can see. Same story for --icon-control (trial 18, root 16) and
     --radius-control (trial 12, style.css :root 10 — this one the overlay
     DOES see). The room's corner is derived (pill + inset), so the
     geometry stays coherent at whatever the tokens say.
   - --layout-glyph-label-gap exists only in the trial; the fallback
     --space-2 written in the lab carries here and resolves.
   One thing this file cannot win: Jetpack states the clear button's
   :focus outline with !important, and the house rule is no !important, so
   keyboard focus on "clear" shows the native ring, not --focus. Debt.
   ======================================================================= */

.jetpack-instant-search__overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  /* stated here, not inherited: on the live site the page around the
     overlay guarantees nothing */
  font-family: var(--font-sans);
  /* PORT: size and ink stated too — Jetpack's sheet puts font-size:16px
     and its own near-black on this element, and an undeclared property
     is a lost property. */
  font-size: var(--text-base);
  color: var(--text-primary);
  /* PORT: theirs scrolls the overlay itself (overflow-y:auto); ours
     scrolls inside the room, and two scrollbars is one too many. */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--layout-dialog-drop) var(--space-5) var(--space-6);
  background: var(--scrim);
  opacity: 1;
  /* NO REVEAL, ON THE ASK (2026-08-10). The overlay used to fade in and out
     over --motion-duration-reveal. 180ms is nothing on its own, but it does
     not arrive on its own: Jetpack fetches the overlay, mounts React and
     waits on an API round trip, and the fade is the LAST thing stacked on
     top of all of it. A transition that reads as polish on an instant panel
     reads as lag on a slow one, and this panel is slow for reasons no
     stylesheet can reach. So it opens and shuts at once, and every
     millisecond that is ours to give back is given back. */
  transition: none;
}
.jetpack-instant-search__overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* The room IS the command palette: its width, its clothes.
   Doubled: Jetpack pads the wrapper's bottom 40px whenever it carries
   .has-colophon (0,2,0) — the colophon is hidden below, its padding must
   go with it. The doubled selector also lets us flatten their height:100%
   room-as-sheet geometry with declarations instead of weight tricks. */
.jetpack-instant-search .jetpack-instant-search__search-results-wrapper {
  /* THE ROOM'S ONE INSET DIAL. The colour menu's true inset is 8 —
     measured on the rendered flyout after the red-square check
     caught a wrong 6 read from the generic menu rule — and 8 is exactly
     what read as "a little bit tight" here. So this room DEPARTS from
     the menu by one rung, deliberately: search results are LONGER than
     the menu's short words — a full title fills its pill where "Oat"
     leaves air — so the same 8 reads tighter here and the room pays it
     back outside. */
  --search-room-inset: var(--space-4); /* the panel family's inset, 16 (2026-09-11); was 12 */
  /* WIDER THAN A DIALOG (2026-09-08, 1.1.627, judged on
     lab/the-search-in-two-cards.html against Spotlight: "take the width").
     The dialog's 560 cut every second title; Spotlight is wider than its
     dialogs too. 640 is the room's own number, not the dialog's. */
  /* THE COLUMN'S WIDTH (Manuel, 2026-09-10: "always as wide as the main
     content of the posts actually is"). The room was its own 640; the
     reading column is a measure in ch, resolved in the article's face at
     the article's size, and it changes with the style and the reading
     size. So the room's box is measured in that face and size, and the
     content inside steps back out to the interface's, below. */
  --search-room-width: var(--layout-content-width-reading);
  font-family: var(--font-reading);
  font-size: var(--text-reading-body);
  width: min(100%, var(--search-room-width));
  max-height: 100%;
  /* PORT: Jetpack sizes the room as a full-height sheet capped at 1080px
     (95% under a breakpoint) with the colophon padding above. All of it
     unlearned by declaration. */
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-default) solid var(--border-strong);
  /* THE ROOM'S CORNER IS DERIVED, not chosen (the rail-chunk rule, read
     outward): the pill inside wears --radius-control and sits the room's
     inset from the wall, so the wall wears pill + inset — 12 + 12 = 24 in
     the lab, which IS the scale's own --radius-4xl: the derivation and
     the ladder agree there. */
  border-radius: calc(var(--radius-control) + var(--search-room-inset));
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  /* The room's own arrival went with the scrim's, and for the same reason:
     it used to drop --space-2 and fade. Nothing moves now. */
  transition: none;
}

.jetpack-instant-search__search-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  /* PORT: theirs paints this white, sizes it 100% and scrolls it; the
     room's surface is the wrapper's, the scroll is the content's. */
  background: transparent;
  height: auto;
  overflow: visible;
}

/* The head: the rail's own search field, sitting in the room with the
   SAME 8 of air the pills get (2026-08-02), and no hairline under
   it (the review, same day) — the field and the list share one room, and the
   space between them is the same seam the pills keep between themselves,
   just without the line. */
/* The room's box is measured in the article's face (above); its rows and
   field are the interface's. */
.jetpack-instant-search .jetpack-instant-search__search-results-wrapper > * {
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.jetpack-instant-search__search-results-controls {
  display: flex;
  align-items: center;
  padding: var(--search-room-inset) var(--search-room-inset) 0;
}
.jetpack-instant-search__search-results-search-form {
  flex: 1;
  min-width: 0;
  /* PORT: theirs shrinks the whole form to .8em; the field's type is
     stated on the input, but nothing else here should ride their em. */
  font-size: inherit;
}
.jetpack-instant-search__search-form { display: block; }
/* PORT: Jetpack hairlines the box's bottom and right edges — the field's
   only border is the label's own, below. */
.jetpack-instant-search .jetpack-instant-search__box { border: 0; }
/* .quire-search-field's grammar, restated on Jetpack's label — bordered
   box, control height and corner, muted glyph tier, the system focus ring
   on the WRAPPER (DS-145: a composed field acts like a bare input; the
   inner one stays ringless). */
.jetpack-instant-search__box-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--layout-control-height);
  /* trailing inset steps to the clear pill's own air (the command
     launcher's DS-177 move: the trailing pad matches the nested control's
     vertical surround, so it sits evenly) */
  padding-inline: var(--space-2-5) var(--space-1-5);
  border: var(--border-width-default) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-muted);
  cursor: text;
}
/* The ring stays (2026-08-02, overruling the first pass): the
   rail's own search wears the system ring while active, and this field is
   that field — one focus grammar for every input (DS-145: the composed
   field carries the ring on its wrapper). */
.jetpack-instant-search__box-label:focus-within {
  outline: var(--focus-ring-width) solid var(--focus);
  outline-offset: var(--focus-ring-offset);
}
.jetpack-instant-search__box-gridicon {
  width: var(--icon-control);
  height: var(--icon-control);
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}
.jetpack-instant-search__box-gridicon svg { display: none; }
/* Doubled: Jetpack dresses this input through three-class chains — 18px
   type 60px tall indented 32, then un-indented again one rule later — so
   the single-class lab selector loses. The root class in front ties their
   heaviest chain, and this file comes after. */
.jetpack-instant-search .jetpack-instant-search__box input.search-field {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-line-height);
  appearance: none;
  /* PORT: every geometry literal their chains state, returned to the
     label's own layout. */
  height: 100%;
  margin: 0;
  padding: 0;
  text-indent: 0;
  letter-spacing: inherit;
}
/* PORT: their :focus rule shoves the input -50px left and 60px of
   padding in (their icon-overlap trick, on a field that no longer has
   one) and draws a dotted outline. One state-matched rule at the same
   weight puts the geometry back. */
.jetpack-instant-search .jetpack-instant-search__box input.search-field:is(:hover, :focus) {
  background: transparent;
  color: var(--text);
  margin: 0;
  padding: 0;
  border-radius: 0;
  outline: 0;
}
.jetpack-instant-search .jetpack-instant-search__box input.search-field::placeholder {
  color: var(--text-subtle);
}
.jetpack-instant-search .jetpack-instant-search__box input.search-field::-webkit-search-cancel-button,
.jetpack-instant-search .jetpack-instant-search__box input.search-field::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* THE CLEAR IS A NESTED PILL (2026-08-02): a real button sitting
   concentrically in the field — --space-1-5 of air on all sides, so
   height and corner both DERIVE: 40 − 2×6 = 28 tall in the lab, corner =
   the field's 12 − 6 = 6, the ladder's own --radius-sm. Hover is the
   surface pill, the words keep their ink (DS-055). */
.jetpack-instant-search__box input[type="button"] {
  flex: 0 0 auto;
  height: calc(var(--layout-row-min-height) - 2 * var(--space-1-5));
  /* PORT: theirs makes this a 60px square with a trailing .25em — the
     pill's size is its padding's. */
  width: auto;
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: calc(var(--radius-control) - var(--space-1-5));
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm-contextual);
  line-height: var(--text-sm-line-height);
  cursor: pointer;
  transition: background-color var(--motion-duration-feedback) var(--motion-easing-standard);
}
@media (hover: hover) {
	.jetpack-instant-search__box input[type="button"]:hover {
	  background: var(--surface-hover);
	}
}
.jetpack-instant-search__box input[type="button"]:active {
  background: var(--surface-selected);
  color: var(--text-primary);
}

/* GONE, on the ask — the plugin renders them, the room never shows
   them. Esc and the outside click are the app's, not the button's.
   Doubled: their close button is styled element-first (button.…, 0,1,1)
   and the filter column returns as a modal under a two-class chain, so
   the hide must carry two classes to hold everywhere. */
.jetpack-instant-search .jetpack-instant-search__overlay-close,
.jetpack-instant-search .jetpack-instant-search__search-results-header,
.jetpack-instant-search .jetpack-instant-search__search-results-secondary,
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-content,
/* A ROW IS A TITLE AND NOTHING ELSE (the ask, again, 2026-08-10 — the live
   overlay showed it). Minimal does not mean title-only: Jetpack also renders
   the MATCHING COMMENTS beside the post, each behind a Gridicon, and a row of
   categories and tags under it. On this skin the row is a flex line so the
   title's growth pushes the trailing arrow right — which means a second item
   in that line does not sit under the title, it takes the title's width, and
   the titles came out as "Das n…" and "10…" beside a full-width comment.
   Hiding these two is the same edit as un-truncating the titles. */
.jetpack-instant-search .jetpack-instant-search__search-result-comments,
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-cats-and-tags,
/* THE GLYPH IN FRONT OF A TITLE IS JETPACK'S, AND IT IS NOT ALL-OR-NOTHING
   (2026-08-10). Their minimal title renders a Gridicon for the result's post
   type — a document mark on pages, nothing on posts — so a mixed list draws a
   glyph in front of some rows and not others, and the labels start at two
   different places. DS-045 is exactly this: icons in one list are all or none.
   The rail's rows carry no leading glyph, this menu is the rail's grammar, so
   the glyph goes. The trailing arrow stays — it is the row's own mark, drawn
   by this sheet, on every row alike. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-title .gridicon,
.jetpack-instant-search .jetpack-instant-search__search-results-pagination,
.jetpack-instant-search .jetpack-instant-search__jetpack-colophon {
  display: none;
}

/* The list: THE COLOUR MENU'S OWN AIR, exactly (the review, on its
   screenshot, 2026-08-02). That menu's rows touch, and the space between
   them belongs to the SEAM — separator-air above and below the hairline.
   Jetpack gives us no <hr>, so the same geometry is restated: the list's
   gap is the seam's full room (air + line + air) and the hairline hangs
   centered in it. Around the pills, the menu's own panel padding. */
.jetpack-instant-search__search-results-content {
  /* PORT: theirs lays primary and secondary out as flex columns side by
     side; the secondary is hidden, and the primary below is told to stop
     reserving its 320px. */
  display: block;
  padding: var(--search-room-inset);
  /* field → first pill = the RAIL's own distance from its search to its
     first item (2026-08-02) — measured on index: 24, --space-6.
     The field stands off the list the way it does in the rail, not as
     one of its rows. */
  padding-block-start: var(--space-6);
  overflow-y: auto;
  min-height: 0;
}
/* THE EMPTY FIELD SHOWS THE EIGHT LATEST (Manuel, 2026-08-14 — reversing
   his own 2026-08-12 "an empty field shows nothing"). Both calls were
   about the same list at different times: on the 12th the resting list
   was index order — arbitrary mid-archive posts offered as the site's
   front door — and hiding it was right. On the 13th
   search-resting-order.js made that list the eight NEWEST, but the hide
   rule (a `:placeholder-shown` gate on the results content) stayed and
   kept the fixed list invisible — a field alone over the dimmed page,
   reported as "the eight posts are gone." They were never gone; they
   were fetched, rendered, and hidden. The gate is deleted, not
   inverted: the room at rest now simply shows what Jetpack drew. */

/* PORT: Jetpack reserves the filter column's width on the primary
   (max-width: calc(100% - 320px)) — the column is hidden above, the
   reservation goes with it. The lab never needed this rule; the fight
   with the shipped sheet does. */
.jetpack-instant-search .jetpack-instant-search__search-results-primary {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.jetpack-instant-search__search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* PORT: theirs inks the list directly (near-white in one media block);
     the rows below choose their own. */
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--layout-menu-separator-air) + var(--border-width-default));
}

/* A result IS the rail's row — same rulers, read from the same tokens the
   rail reads, same muted ink that holds its colour under the pill
   (DS-055), same active/selected pair. */
.jetpack-instant-search__search-result-minimal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--layout-glyph-label-gap, var(--space-2));
  min-height: var(--layout-row-min-height);
  /* PORT: margin stated because Jetpack gives every .…__search-result —
     this same li, by its other class — 2em below. */
  margin: 0;
  padding: 0 var(--layout-row-padding-inline);
  border-radius: var(--radius-control);
  /* MAIN INK (2026-09-08, 1.1.590, the search round of the sweep): Spotlight's
     rows are the full label; muted read as a list of afterthoughts. */
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--motion-duration-feedback) var(--motion-easing-standard);
}
.jetpack-instant-search__search-result-minimal:focus-within {
  background: var(--surface-hover);
}
@media (hover: hover) {
	.jetpack-instant-search__search-result-minimal:hover {
	  background: var(--surface-hover);
	}
}
.jetpack-instant-search__search-result-minimal:active {
  background: var(--surface-selected);
  color: var(--text-primary);
}
/* THE SEAM BETWEEN RESULTS (2026-08-02): the colour menu's
   hairline — inset by the row's own inline padding so it runs SHORTER
   than the hover pills, in the subtle tone — drawn in the middle of the
   pills' 8 of air, on the following row's ::before (the rows are all the
   DOM we have). */
.jetpack-instant-search__search-result-minimal
  + .jetpack-instant-search__search-result-minimal::before {
  content: "";
  position: absolute;
  /* separator-air above the row = the hairline's seat in the seam */
  top: calc(-1 * (var(--layout-menu-separator-air) + var(--border-width-default)));
  inset-inline: var(--layout-menu-item-padding-inline);
  border-top: var(--border-width-default) solid var(--border-subtle);
  /* PORT: Jetpack puts a 1×1 zero-width-space ::before on every list li
     (a screen-reader pause). Its width:1px would collapse this hairline
     to a dot; the size is put back under the inset-inline above. */
  width: auto;
  height: 0;
}

/* THE MARK SITS WHERE THE EXTERNAL MARK SITS (the review): trailing, far
   edge, inheriting the row's ink — but STRAIGHT, because this arrow stays
   on our own site. Lucide's arrow-right for now; the registry is owed the
   external mark's internal cousin. The title becomes the row's flex line
   so its growth pushes the mark right.
   Doubled: Jetpack styles the title through its two classes together
   (margin-bottom: .4em) and the link through parent-and-child chains. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-title {
  margin: 0;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--layout-glyph-label-gap, var(--space-2));
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-line-height);
  font-weight: var(--font-weight-body);
  color: inherit;
}
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-title::after {
  content: "";
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: var(--icon-control);
  height: var(--icon-control);
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}
.jetpack-instant-search .jetpack-instant-search__search-result-title-link {
  color: inherit;
  text-decoration: none;
  /* PORT: display stated — Jetpack makes the anchor a flex row, and a
     flex container never ellipsizes its own text. */
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* PORT: their hover underlines and re-inks the anchor (two chains, one
   of them generic ".jetpack-instant-search a:hover"); the row's pill is
   the hover, the words hold still (DS-055). */
.jetpack-instant-search .jetpack-instant-search__search-result-title-link:is(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}
.jetpack-instant-search .jetpack-instant-search__search-result-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* PORT, and the one place source order is not enough. Jetpack's own
   `.jetpack-instant-search__search-results mark { background: #ffc }` lives in
   jp-search.chunk-main-payload.css, which their SCRIPT loads at runtime — so
   it arrives AFTER our stylesheet however late we enqueue, and an equal
   specificity loses the tie every time. That is why the live overlay stayed
   yellow on 2026-08-10 while every other rule in this file held.

   Their dark variant carries two classes, so this carries three. The repeated
   class is the house pattern for winning without !important; no invented
   element, no new selector, just weight. Yellow is not one of the eight modes'
   colours, and `--surface-selected` is the mode's own answer to "this word is
   the one you asked for". */
/* AND HEAVIER AGAIN (2026-09-06): the plugin's payload now carries
   `.jetpack-instant-search .…__search-results .…__search-results-primary
   .…__search-result mark` (0,4,1), and the yellow was back on the live
   site. The same pattern, one class deeper than theirs. */
.jetpack-instant-search
  .jetpack-instant-search__search-results.jetpack-instant-search__search-results
  .jetpack-instant-search__search-results-primary
  .jetpack-instant-search__search-result
  mark {
    /* BOLD, AND NOTHING BEHIND IT (2026-09-08, 1.1.590): Spotlight sets the
       matched word in bold and draws no box. The surface it wore since
       2026-08-10 is gone; the weight carries the match. */
    background: transparent;
    color: inherit;
    font-weight: var(--font-weight-semibold, 600);
  }

.jetpack-instant-search__search-results-unused-query {
  margin: var(--space-8) var(--space-4);
  color: var(--text-muted);
  text-align: center;
  font-size: var(--text-sm-contextual);
  line-height: var(--text-sm-line-height);
  /* PORT: theirs bolds this line along with the results title. */
  font-weight: var(--font-weight-body);
  /* The overlay root's sans does not reach this <p> on the live site:
     WordPress's global styles print `:where(p){font-family:…serif}`, and a
     direct element rule beats inheritance at any specificity. Stated here. */
  font-family: var(--font-sans);
}

.jetpack-instant-search :is(button, a, input:not(.search-field)):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus);
  outline-offset: var(--focus-ring-offset);
}
.jetpack-instant-search .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jetpack-instant-search #jetpack-instant-search__overlay-focus-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  padding: 0;
}

/* ==========================================================================
   THE SECOND PASS, 2026-08-09 — ported from lab/the-bar-that-grows.html, where
   the panel was rebuilt over the real page rather than on a specimen.

   Written as a later block over the skin above rather than edited into it,
   because that is how it was designed: the first pass settled what the panel
   IS — a command palette in our clothes — and this one settles how it sits
   once the square stepped to 36 and the whole page went with it. Reading the
   two in order is reading the argument in order.

   The four changes, each with the ask that produced it:

   1. THE HEAD IS THE FORM. The field kept its own outline inside the panel, so
      the top of the search was a box inside a box — two edges, which is the
      one thing DS-052 exists to stop. The whole head is the form now: no
      border, no fill, no corner of its own, and a single hairline where it
      meets the results.
   2. THE ROWS STAND ON THE FIELD'S LINE. The field set its words at one place
      and the rows at another, so every title sat 9px left of the word in the
      box above it. One column for both.
   3. THE ARROW LEADS AND ONLY UNDER THE POINTER. It trailed every title,
      always on. It belongs in front of the row and only where the pointer is
      — the same as the contents panel, which is the other list on this site.
   4. THE ROOM TAKES THE MORE MENU'S INSET. Both are a panel holding rows and
      both derive their corner as inset + the row's; this was written at a 12
      inset and the rail's menu at 8, and with the control corner now 10 the
      search came out at 22 — on neither the scale nor beside the menu it
      should match. One inset, one corner: 8 + 10 = 18.
   ========================================================================== */

/* (4) One inset for both panels. The corner derives from it, so nothing else
   here has to be told. */
.jetpack-instant-search__search-results-wrapper {
  --search-room-inset: var(--space-2);
}

/* THE SCRIM STEPS BACK. At the modal value the page behind went almost black,
   and this is not a modal moment — it is a field opening over the reading, and
   the reading should stay legible underneath it. Measured at 20% on the
   default palette, which is what was asked for.

   Mixed off the token rather than typed, so the relationship between the
   palettes survives: every mode's scrim comes back at the same fraction of
   itself, and a dark mode — where the token is nearly twice as strong — stays
   proportionally heavier, as it has to be against a dark page. */
/* THE SAME VEIL AS THE PICKER'S (2026-09-06, Manuel: the page went darker
   behind the settings than behind the search). The picker draws the
   system's scrim whole; this drew 62% of it. One veil for the two modal
   surfaces, on the desk as on the phone. */
.jetpack-instant-search__overlay {
  background: var(--scrim);
}

/* ---- (1) THE HEAD IS THE FORM -------------------------------------------- */

/* The row that holds it gives up its own inset — the head pays its own below
   — and gains the seam. `--border-subtle`, because this line divides two parts
   of one panel rather than two objects. */
.jetpack-instant-search__search-results-controls {
  padding: 0;
  border-block-end: var(--border-width-default) solid var(--border-subtle);
}

.jetpack-instant-search__box-label {
  /* THE HEAD DOES NOT MOVE WHEN CLEAR APPEARS. Left to its contents it stood
     38 empty and 52 the moment the button showed up, so typing one letter
     shifted the whole list down. It is the clear button's height plus its air,
     always: 8 + 36 + 8. */
  height: calc(var(--layout-row-min-height) + 2 * var(--space-2));
  padding-block: var(--space-2);
  /* (2) The panel's inset plus a row's own padding — the arrows' column. It
     used to pay the inset twice while the list carried one of its own. */
  padding-inline: calc(var(--search-room-inset) + var(--space-2-5))
    var(--search-room-inset);
  border: 0;
  border-radius: 0;
  background: transparent;
  column-gap: var(--space-2);
}

/* WITH THE CARET IN IT, THE HEAD IS LIT. It has no outline of its own any
   more, so a focused field looked exactly like an empty one. The same light
   step the rows take under the pointer says where the typing goes — and the
   ring goes with the outline it belonged to, because a ring drawn on a
   borderless full-width head is a rectangle across the top of the panel. */
.jetpack-instant-search__box-label:focus-within {
  outline: none;
  background: color-mix(in srgb, var(--surface-track) 50%, var(--surface-raised));
  box-shadow: none;
}

/* And the glyph is the arrows' size, in the arrows' column, in their ink: it
   labels the field, it is not a control in it. It was --icon-control (18) and
   the tier meant for a control, so it read as the heaviest mark in the panel
   while standing beside the lightest words. */
.jetpack-instant-search__box-gridicon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--icon-sm);
  height: auto;
  width: var(--icon-sm);
  color: var(--text-subtle);
  background: none;
  mask-image: none;
}

/* The mask moves onto a child box at the inline size, so the COLUMN can stay
   18 while the drawing is 14 — the same arrangement the rows use below. */
.jetpack-instant-search__box-gridicon::before {
  content: "";
  inline-size: var(--icon-inline);
  block-size: var(--icon-inline);
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}

/* THE CLEAR CONTROL was sized against the field it used to sit inside — a 24
   box with a 4 corner, derived from a pill that no longer exists. The head is
   the form now, so it is simply the system's ghost button at the row height,
   and the head's own 8 of padding is what puts its hover pill 8 from the
   panel's wall. */
.jetpack-instant-search .jetpack-instant-search__box input[type="button"] {
  height: var(--layout-row-min-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: var(--text-sm-contextual);
}

@media (hover: hover) {
	.jetpack-instant-search .jetpack-instant-search__box input[type="button"]:hover {
	  background: var(--surface-hover);
	  color: var(--text-primary);
	}
}

/* ---- (2) AND (3) THE RESULTS --------------------------------------------- */

/* The skin stood the field off the list by a --space-6, which was right when
   the field was a pill floating in the room. It is the head with a hairline
   under it now, so the only air below is the room's own. */
.jetpack-instant-search__search-results,
.jetpack-instant-search__search-results-primary,
.jetpack-instant-search__search-results-content,
.jetpack-instant-search__search-results-container {
  padding-block-start: 0;
}

/* The room already pays the inset — adding it again here put the pills 17 from
   the walls against 9 at the foot. The air under the hairline is the only
   thing this list adds, and it is the same air the last row already had
   beneath it: the list opens and closes on one distance. */
.jetpack-instant-search__search-results-list {
  margin-block-start: 0;
  padding-inline: 0;
  padding-block-start: var(--search-room-inset);
  /* NO RULE BETWEEN ROWS. The pills already separate them, and a line between
     two things that each carry their own surface is the second edge DS-052
     warns about. They close up to the row-stack gap the rail uses. */
  gap: var(--layout-row-stack-gap);
}

.jetpack-instant-search__search-result-minimal
  + .jetpack-instant-search__search-result-minimal::before {
  content: none;
}

/* A RESULT AT REST IS QUIETER THAN THE ONE UNDER THE POINTER — the same two
   steps the rail's rows use, and the same two the contents panel uses: subtle
   at rest, full ink for the row you are pointing at. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal {
  /* THE PICKER'S REST TONE (2026-09-06, Manuel: "make the font colours
     more like the settings panel", desk included). Subtle sat one rung
     below the menu rows beside it; muted is what a menu row rests at. */
  color: var(--text-muted);
  /* (2) The row's words start where the field's words start: the panel's inset
     is already paid by the list's container, so the row adds a row's own
     padding and the mark column follows. */
  padding-inline-start: var(--space-2-5);
  column-gap: var(--space-2);
}

.jetpack-instant-search
  .jetpack-instant-search__search-result-minimal:focus-within {
  color: var(--text-primary);
}

@media (hover: hover) {
	.jetpack-instant-search .jetpack-instant-search__search-result-minimal:hover {
	  color: var(--text-primary);
	}
}

/* (3) THE ARROW LEADS. The trailing one goes — same doubled selector as the
   rule that drew it, or Jetpack's own chain wins the tie. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal-title::after {
  content: none;
}

/* And it arrives in front of the row, under the pointer only. The column is
   held whether the mark is drawn or not, so the titles do not shift sideways
   as the pointer travels down them — 18 wide around a 14 glyph, the same
   column the head's magnifier stands in. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal::after {
  content: "";
  order: -1;
  flex: 0 0 auto;
  inline-size: var(--icon-inline);
  block-size: var(--icon-inline);
  margin-inline-end: calc(var(--icon-sm) - var(--icon-inline));
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  opacity: 0;
  transition: opacity var(--motion-duration-feedback) var(--motion-easing-standard);
}

.jetpack-instant-search
  .jetpack-instant-search__search-result-minimal:focus-within::after {
  opacity: 1;
}

@media (hover: hover) {
	.jetpack-instant-search
  .jetpack-instant-search__search-result-minimal:hover::after {
	  opacity: 1;
	}
}

/* ==========================================================================
   NO HOVER, NO INTENT (Manuel, 2026-08-28)
   ==========================================================================
   The arrow in front of a result is drawn only under the pointer: it is the
   mark for the row you are ABOUT to open, and the column is held whether it
   is drawn or not so the titles never shift sideways as the pointer travels.
   All of that is a pointer's grammar and a finger has none of it. Worse, it
   does not simply go unused — a tap leaves `:hover` standing on the row it
   landed on, so the arrow appears on one result and stays there while the
   reader scrolls past it, pointing at nothing.

   So on a device that cannot hover the mark goes, and the column with it. The
   row is still the whole target, the press still answers, and the title starts
   where the field's words start. Desktop is untouched.

   `hover: none` and not a width: this is about the input device, and a narrow
   window on a desk still has a pointer in it. */
@media (hover: none) {
  .jetpack-instant-search .jetpack-instant-search__search-result-minimal::after {
    content: none;
  }
}


/* ==========================================================================
   THE ROOM IS THE PICKER, ON EVERY SCREEN (2026-09-06, Manuel: first "the
   settings panel looks better — adjust the search as well", then, once the
   phone had it, "I like our mobile search more than our desktop search")
   ==========================================================================
   The picker is the system's floating menu: an 8px inset, a corner derived
   from it, the floating elevation and no border, muted rows on one surface
   that light up on the press. The room had its own frame — a strong border,
   a lit field box, a 12px inset, subtle ink, a labelled clear pill and an
   arrow that appeared on hover — designed before the picker existed, and
   beside it the two read as two dialects. The picker's grammar now, at
   every width:

   1. ONE SURFACE. The field is a row on the room, not a box in it; the
      lit-when-focused box goes, and the head is parted from the list by the
      seam the picker draws under its back row — mixed from the raised
      surface, as the picker's is.
   2. THE PICKER'S FRAME: its inset, its corner, its shadow, no border.
   3. THE PICKER'S ROWS: muted at rest, primary on the press, the same pill,
      16 at each side — a tall pill with the pointer's 8 read cramped — and
      one line always, cut where the room's width says so.
   4. NO CLEAR. Backspace clears a field; a labelled pill beside the words
      was a second control the picker does not have.
   5. NO HOVER ARROW. A row is its title; the pill under the pointer already
      says it is a row.
   6. THE PLACEHOLDER AND THE GLYPH in the rows' muted ink, the glyph at the
      emphasis size the takeover's field already uses.

   What stays the screen's: the width (the desk keeps the dialog's 560, the
   phone takes the screen) and the row's height — the pointer's, the bar's
   touch square (40), on a desk; the thumb's 52 on a phone — and the X in
   the head, which a desk does not need because Escape and the scrim close. */
.jetpack-instant-search .jetpack-instant-search__search-results-wrapper {
  --search-room-inset: var(--space-4); /* the panel family's inset (2026-09-11) */
  --layout-menu-item-padding-inline: var(--space-4);
  --layout-row-min-height: var(--layout-control-height-large);
  border: 1px solid transparent; /* the hairline of 2026-09-07 gave way to the floating shadow (2026-09-08) */
  box-shadow: var(--elevation-overlay);
  border-radius: calc(var(--search-room-inset) + var(--radius-row, var(--radius-control-base))); /* the menus' sum (2026-09-26, the nesting audit) */
  background: var(--surface-raised);
  box-shadow: var(--elevation-floating);
}

.jetpack-instant-search__search-results-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--search-room-inset) var(--search-room-inset) 0;
  border-block-end: 0;
}

.jetpack-instant-search__search-results-search-form {
  /* A basis of 0, not auto: the form is 100% wide by its own rule, and at
     `auto` that width was the basis, so the X wrapped under it. */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.jetpack-instant-search__search-results-controls::after {
  content: "";
  flex-basis: 100%;
  height: 0;
  margin: var(--layout-menu-separator-air) var(--layout-menu-item-padding-inline) 0;
  border-block-start: var(--border-width-default) solid
    color-mix(in oklab, var(--surface-raised), var(--text-primary) 12%);
}

.jetpack-instant-search__box-label,
.jetpack-instant-search__box-label:focus-within {
  height: var(--layout-row-min-height);
  padding: 0 var(--layout-menu-item-padding-inline);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--text-muted);
  column-gap: var(--layout-menu-item-gap);
}

.jetpack-instant-search__box-gridicon {
  inline-size: var(--icon-emphasis);
  width: var(--icon-emphasis);
  color: var(--text-muted);
}

.jetpack-instant-search__box-gridicon::before {
  inline-size: var(--icon-emphasis);
  block-size: var(--icon-emphasis);
}

.jetpack-instant-search .jetpack-instant-search__box input.search-field::placeholder {
  color: var(--text-muted);
}

.jetpack-instant-search .jetpack-instant-search__box input[type="button"] {
  display: none;
}

.jetpack-instant-search__search-results-list {
  padding-block-start: var(--layout-menu-separator-air);
}

/* THE MENU'S ROW GRAMMAR (Manuel, 2026-09-10, the contents menu beside
   the search: "could we make them more coherent?"). Measured live: the
   search's rows stood 44 high in muted ink while the menu's stand 36 in
   full ink, and the row rule above that says "main ink" was losing to
   this one. Spotlight's rows are the full label; the palette keeps its
   width and its field, and its rows are the menu's rows. */
.jetpack-instant-search .jetpack-instant-search__search-result-minimal {
  --layout-row-min-height: var(--layout-row-medium);
  min-height: var(--layout-row-min-height);
  padding: 0 var(--layout-menu-item-padding-inline);
  color: var(--text-primary);
}

.jetpack-instant-search .jetpack-instant-search__search-result-minimal:active,
.jetpack-instant-search .jetpack-instant-search__search-result-minimal:has(.is-pressed) {
  background: var(--surface-selected);
  color: var(--text-primary);
}

.jetpack-instant-search .jetpack-instant-search__search-result-minimal::after {
  content: none;
}

/* ---- and what the phone keeps for itself ---------------------------------
   The screen's width, the thumb's row, the X in the head (Jetpack's own
   close button, unhidden and dressed as the bar's square), and the field at
   16 so iOS does not zoom into it. `hover: none`, the skin's own test for a
   device that cannot hover. */
@media (hover: none) {
  .jetpack-instant-search__overlay {
    padding-inline: var(--space-6);
  }

  .jetpack-instant-search .jetpack-instant-search__search-results-wrapper {
    --layout-row-min-height: var(--layout-row-comfortable);
    width: 100%;
  }

  .jetpack-instant-search .jetpack-instant-search__box input.search-field {
    font-size: var(--text-lg);
  }

  .jetpack-instant-search .jetpack-instant-search__overlay-close {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--layout-row-min-height);
    height: var(--layout-row-min-height);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }

  .jetpack-instant-search .jetpack-instant-search__overlay-close svg {
    width: var(--icon-emphasis);
    height: var(--icon-emphasis);
    fill: currentColor;
  }

  .jetpack-instant-search .jetpack-instant-search__overlay-close:active {
    background: var(--surface-selected);
    color: var(--text-primary);
  }
}

/* CENTRED ON THE PAPER, NOT THE WINDOW (Manuel, 2026-09-10: "it's always
   centred, the same with the main content column"). The overlay is fixed
   to the window and centred there; under the frame the paper begins a
   gap, a rail and a gap in from the left, so a window-centred room stood
   off the column's centre by half a rail. The overlay's inline padding is
   the paper's own offset while the rail is out, the frame's gap alone
   while it is away. */
@media (min-width: 1010px) {
  body.has-frame .jetpack-instant-search__overlay {
    padding-inline: calc(var(--frame-gap) + var(--layout-rail-width) + var(--frame-gap)) var(--frame-gap);
  }
  :root[data-rail-collapsed] body.has-frame .jetpack-instant-search__overlay {
    padding-inline: var(--frame-gap);
  }
}

/* THE LAST FOUR OF THE SEARCH JOIN OBERFLÄCHE (Manuel, 2026-09-17). Six of
   this file's rules were filed already; these four were missed, so the overlay's
   own ground, its form, its buttons and the "no results for" line sat outside
   every role.

   The overlay carries the size the results inherit, so it is gated like the
   rest: at rest it is the base and nothing has moved.

   Wired here because this file loads after style.css. */
:is(.jetpack-instant-search__overlay, .jetpack-instant-search__search-results-unused-query, .jetpack-instant-search__box input[type="button"]) {
	font-family: var(--font-sans);
	letter-spacing: var(--ui-tracking, normal);
	word-spacing: var(--ui-words, normal);
	text-transform: var(--ui-case, none);
	font-style: var(--ui-style, normal);
}
:root[data-ui-weight] :is(.jetpack-instant-search__overlay, .jetpack-instant-search__search-results-unused-query, .jetpack-instant-search__box input[type="button"]) { font-weight: var(--ui-weight); }
:root[data-ui-size] .jetpack-instant-search__overlay { font-size: max(var(--text-floor-ui), calc(var(--text-base) * var(--ui-size))); }
:root[data-ui-size] :is(.jetpack-instant-search__search-results-unused-query, .jetpack-instant-search__box input[type="button"]) { font-size: max(var(--text-floor-ui), calc(var(--text-sm-contextual) * var(--ui-size))); }