/*
 * Docs search command menu (app/views/shared/_command_menu.html.erb) — the panel
 * the search trigger opens. Its own file for the same reason search_trigger.css
 * is: the panel is a shared component rendered from the layout for every public
 * docs page, not part of any one page's layout.
 *
 * Plain token-consuming CSS, the same pattern as prose.css/editor.css/docs.css,
 * so it tracks the active Ekosystem theme and survives Tailwind purge — which
 * matters more here than elsewhere, since every class below lands on an element
 * the command-menu Stimulus controller builds in the browser rather than on
 * anything Tailwind could see in a template.
 *
 * eko-command-menu supplies the panel, the field frame and the results box; this
 * file sizes them and lays out what goes inside a hit. Two seams are used to
 * reach past the shadow boundary: the custom properties the components expose
 * (they inherit from .command-menu down into every shadow root beneath it) and
 * the ::part() hooks on an item's link and icon.
 */
.command-menu {
  /* Taller than the component's 417px default: at the default the results box
   * shows barely three of our three-line hits before scrolling. */
  --eko-command-menu-max-height: 480px;
  /* The results box is a fixed 265px tall by default, which leaves a half-empty
   * scroll area under a single hit and under the "no results" note. `auto` lets
   * it size to its hits instead; the panel's max-height above still caps it, and
   * it keeps its own overflow, so a long list scrolls exactly as before. */
  --eko-command-menu-body-height: auto;
}

/* ── The field ────────────────────────────────────────────────────────────────
 * The header lays its slotted children out in a row and stretches the input to
 * fill it, so the magnifier has to refuse to shrink or the input squeezes it to
 * nothing. */
.command-menu__icon {
  flex: 0 0 auto;
  color: oklch(var(--eko-t-color-icon));
}

/* ── A hit ────────────────────────────────────────────────────────────────────
 * Three stacked lines (title, excerpt, trail) beside the item's icon, with an
 * endpoint's verb badge pinned to the trailing edge. */
.command-menu__hit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.command-menu__hit-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  /* Without this the flex item takes its content's width and the excerpt's
   * ellipsis never kicks in. */
  min-width: 0;
}

/* The item centres its icon against the whole hit, which floats it beside the
 * middle line of three. Both parts move to the top so the icon reads as the
 * title's, with the icon nudged onto the title's baseline. */
.command-menu eko-command-menu-item::part(item) {
  align-items: flex-start;
}

.command-menu eko-command-menu-item::part(icon) {
  margin-top: 2px;
}

.command-menu__hit-title {
  color: oklch(var(--eko-t-color-text));
  font-weight: var(--eko-t-font-weight-medium);
}

/* One line of excerpt: search snippets are a sentence or two, and a hit that
 * grew to three lines of prose would push the rest of the results out of view. */
.command-menu__hit-snippet {
  color: oklch(var(--eko-t-color-text-weaker));
  font-size: var(--eko-t-font-size-text-sm);
  font-weight: var(--eko-t-font-weight-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-menu__hit-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: oklch(var(--eko-t-color-text-weaker));
  font-size: var(--eko-t-font-size-text-sm);
  font-weight: var(--eko-t-font-weight-regular);
}

/* The separator is generated rather than marked up, so the controller emits one
 * span per ancestor title and nothing else. */
.command-menu__hit-crumb + .command-menu__hit-crumb::before {
  content: "\203A";
  margin-right: 6px;
}

/* The section the hit actually sits in — the deepest crumb — carries the accent,
 * as the page's own breadcrumb does.
 *
 * text-accent, not accent: the two are the same colour in the light theme (both
 * oklch(.5236 .1448 143.32) = #297E2A), but accent is a brand/surface green whose
 * dark value goes *darker* (#225923), which on the menu's dark surface (#182229)
 * was 1.94:1 — a green you could see was there and couldn't read. text-accent is
 * the text-role token, so its dark value is a light green (#59C45A) at 7.28:1.
 * That's why this needs no .dark override, unlike the mark below: the role token
 * already carries the per-scheme value. */
.command-menu__hit-crumb:last-child {
  color: oklch(var(--eko-t-color-text-accent));
}

.command-menu__hit-verb {
  flex: 0 0 auto;
}

/* Matches, in the crumbs, the title and the excerpt alike: a tinted, rounded chip
 * behind the matched run. Padding is in em so the chip tracks whichever line it
 * lands on; being inline, the vertical padding overflows the line box rather than
 * reflowing the row.
 *
 * The tint is the brand green at 20%, which is what the design's swatch (#D7E4D5)
 * is — and that green is --eko-t-color-accent itself in the light theme
 * (oklch(.5236 .1448 143.32) = #297E2A), so this reads #D4E5D4, within three units
 * of the mock. The dark theme overrides it below.
 *
 * `color: inherit` is doing work, not padding the rule out: the UA stylesheet sets
 * `mark { color: black }`, which does not inherit and would otherwise paint black
 * text on the dark theme's chip. Inheriting also leaves the deepest crumb's accent
 * colour alone where a match falls inside it. */
.command-menu mark {
  padding: 0.2em 0.15em;
  border-radius: var(--eko-t-border-radius-sm);
  background-color: oklch(var(--eko-t-color-accent) / 0.2);
  color: inherit;
}

/* The dark theme needs a lighter green, not the same recipe: its accent token is a
 * *darker* green (#225923), so 20% of it over the dark surface computes to #1A2D28
 * against #182229 — an 11/255 lift, too quiet to register as a highlight. The
 * theme's own light green (--eko-t-color-text-success, oklch(.7599 .1833 144.41)
 * under .dark) at 30% lands on #2C5639 instead: a ~52/255 lift, and still 6.4:1
 * against the near-white text it sits behind.
 *
 * `.dark` on <html> is exactly the hook ekosystem.css uses to swap every token —
 * it ships no prefers-color-scheme block, and the gateway's inline bootstrap
 * resolves an "auto" preference to that same class — so this override fires when
 * and only when the dark tokens do. First use of the class in this app's CSS;
 * anything else that needs a per-scheme value belongs here in the same shape. */
.dark .command-menu mark {
  background-color: oklch(var(--eko-t-color-text-success) / 0.3);
}

/* "No results", and the note shown when search itself is unreachable. */
.command-menu__message {
  color: oklch(var(--eko-t-color-text-weaker));
  font-size: var(--eko-t-font-size-text-sm);
  padding: 8px 10px;
}