/*
 * Site search — the magnifier in the nav and the panel it opens.
 *
 * Lives in its own file because the two families of page that carry the nav
 * keep their CSS in different places: the marketing root styles inline, the
 * conditions pages use conditions.css. One shared file is the only way to
 * define this once, and a rule defined twice is a rule that drifts.
 *
 * Palette variables are declared by whichever stylesheet the host page already
 * loads, so nothing is redefined here. The fallbacks after each var() are for
 * the case where this file loads before those definitions exist — the widget
 * degrades to legible rather than to invisible-on-invisible.
 */

.search-wrap { position: relative; display: flex; align-items: center; }

.search-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink2, #c2cdda);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.search-btn:hover { color: var(--ink, #e9f0f9); background: var(--lift, #142338); }
.search-btn[aria-expanded="true"] {
  color: var(--ink, #e9f0f9);
  background: var(--lift, #142338);
  border-color: var(--line-hot, #2a4062);
}
/* Keyboard users must be able to see where they are; :focus-visible keeps the
   ring off mouse clicks, which is what makes it acceptable to show at all. */
.search-btn:focus-visible,
.search-panel input:focus-visible { outline: 2px solid var(--apex, #3b8ff5); outline-offset: 2px; }

.search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(440px, calc(100vw - 32px));
  background: var(--navy, #0e1a2c);
  border: 1px solid var(--line-hot, #2a4062);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  padding: 10px;
  z-index: 200;
}
.search-panel[hidden] { display: none; }

.search-panel input {
  width: 100%;
  font: 400 16px var(--sans, system-ui);
  color: var(--ink, #e9f0f9);
  background: var(--void, #080f1c);
  border: 1px solid var(--line, #1c2c45);
  border-radius: 7px;
  padding: 11px 13px;
}
.search-panel input::placeholder { color: var(--ink4, #97a4b6); }

.search-results { list-style: none; margin: 9px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.search-results:empty { display: none; }

.search-results a {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink2, #c2cdda);
}
.search-results a:hover,
.search-results li[aria-selected="true"] a { background: var(--lift, #142338); color: var(--ink, #e9f0f9); }

.search-results .r-head { display: block; font-weight: 600; color: var(--ink, #e9f0f9); }
.search-results .r-page { display: block; font-size: 12.5px; color: var(--apex-tx, #7cb2fa); margin-top: 2px; }
.search-results .r-text { display: block; font-size: 13px; color: var(--ink4, #97a4b6); margin-top: 3px; }
.search-results mark { background: rgba(59, 143, 245, .26); color: inherit; border-radius: 2px; }

.search-empty { padding: 11px; font-size: 14px; color: var(--ink4, #97a4b6); }
.search-hint { padding: 7px 11px 2px; font-size: 12px; color: var(--ink4, #97a4b6); }

@media (max-width: 640px) {
  /* The nav collapses hard on small screens; anchoring to the button would push
     the panel off the right edge. Centre it under the bar instead. */
  .search-panel { position: fixed; top: 74px; left: 16px; right: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .search-btn { transition: none; }
}