/* The site search: the home page's box (landing/main.html) and the search window every other page
   opens from the sidebar's Search button or Ctrl+K (layouts/base.html, landing_search.js).
   Moved out of landing.css 2026-11-02 so both use one copy; base variables only (landing.css's
   --orange/--green/--red are aliases of --color-brand/-positive/-negative). */

/* ── Search Bar ── */
.landing-search {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.landing-search .landing-search-bar {
  flex: 1;
  min-width: 16rem;
}

/* Accented at rest, not only on focus: after the hero's key button it is the page's
   second way in. Focus (below) stays the stronger state. */
.landing-search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: var(--border-hairline) solid var(--color-brand);
  box-shadow: 0 0 0.75rem var(--color-brand-dim);
  border-radius: 0.625rem;
  padding: 0 1rem;
  height: 2.875rem;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.landing-search-bar:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 0.1875rem var(--color-brand-dim);
}

.landing-search-bar .icon {
  color: var(--color-brand);
  font-size: 1.25rem;
  margin-right: var(--space-1-5);
}

.landing-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: 'JetBrains Mono', monospace;
}

.landing-search-bar input::placeholder {
  color: var(--text-muted);
}

.landing-search-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: hsl(220 18% 18%);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
  white-space: nowrap;
}
/* A phone has no Ctrl+K, and the hint overlapped the placeholder at 390 px (checked live 2026-11-01). */
@media (max-width: 48rem), (pointer: coarse) {
  .landing-search-hint { display: none; }
}
.landing-search-bar input { min-width: 0; }

/* ── Autocomplete dropdown ── */
.landing-search-dropdown {
  display: none;
  flex-basis: 100%;
  margin-top: 0.375rem;
  max-height: 28rem;
  overflow-y: auto;
  background: var(--bg-card, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
}
.landing-search-dropdown.open { display: block; }

.landing-search-section {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.625rem 0.75rem 0.375rem;
}

.landing-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.1s;
  cursor: pointer;
}
/* Not --bg-secondary: in the ai-mist preset it is the dropdown's own #161b22, so the row the arrow keys
   reached looked like every other one. */
.landing-search-row:hover,
.landing-search-row.cursor {
  background: var(--color-brand-dim, rgba(255, 106, 0, 0.15));
}

.landing-search-logo,
.landing-search-logo-placeholder {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(220 18% 18%);
  font-size: 0.75rem;
}

.landing-search-primary {
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.landing-search-secondary {
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.landing-search-spacer { flex: 1; }

/* A market question: one line on a desktop; on a phone the end date goes and the question wraps,
   or five "Bitcoin Up or Down - November 2, …" rows all read "Bitc…" (live check 2026-11-02, 390 px). */
.landing-search-question { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.landing-search-end { flex-shrink: 0; }
@media (max-width: 48rem) {
  .landing-search-question {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .landing-search-end { display: none; }
}

.landing-search-price {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.landing-search-chg {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: hsl(220 18% 18%);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.landing-search-chg.up {
  color: var(--color-positive);
  background: var(--color-positive-dim);
}
.landing-search-chg.down {
  color: var(--color-negative);
  background: var(--color-negative-dim);
}

.landing-search-chain {
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.landing-search-flag {
  color: var(--color-negative);
  font-size: 0.8125rem;
}
.landing-search-empty {
  padding: 1rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* ── The search window (every page but the home page): the sidebar's Search button or Ctrl+K opens it,
   Esc / a click outside / Ctrl+K again close it ── */
.search-window {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 1rem 1rem;
  background: rgba(0, 0, 0, 0.6);
}
.search-window[hidden] { display: none; }
.search-window .landing-search { width: min(45rem, 100%); margin: 0; }
.search-window .landing-search-dropdown { max-height: 60vh; }

/* The sidebar's Search button: an input look, so it reads as a search box. */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 var(--space-2) var(--space-2);
  padding: 0.4375rem 0.625rem;
  background: var(--bg-input);
  border: var(--border-hairline) solid hsl(from var(--color-positive) h s l / 0.45);
  border-radius: 0.5rem;
  color: var(--text-muted);
  font: 500 0.75rem 'JetBrains Mono', monospace;
  cursor: pointer;
  text-align: left;
}
/* Noticeable but quiet at rest (a green magnifier, a faint green border); the full green while hovered, focused or open
   (owner, 2026-11-02). The green of "Free" and of the mode buttons. */
.sidebar-search:hover,
.sidebar-search:focus-visible,
body:has(#search-window:not([hidden])) .sidebar-search {
  border-color: var(--color-positive);
  background: hsl(from var(--color-positive) h s l / 0.08);
  color: var(--text-primary);
  outline: none;
}
.sidebar-search .icon { color: var(--color-positive); font-size: 1rem; }
.sidebar-search kbd {
  margin-left: auto;
  font: inherit;
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background: hsl(220 18% 18%);
}
/* The 64 px rail: the icon alone, centred. */
@media (width <= 48rem) {
  .sidebar-search { justify-content: center; padding: 0.4375rem 0; }
  .sidebar-search span,
  .sidebar-search kbd { display: none; }
}

/* The typed words, in the brand colour. */
.landing-search-hit { background: none; color: var(--color-brand); font-weight: 700; }
/* A closed Polymarket market (shown only when no open one matched) or a closed Hyperliquid vault. */
.landing-search-closed {
  flex-shrink: 0;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  color: var(--text-muted);
  border: var(--border-hairline) solid var(--border);
}
/* "Show more": the section had a full page of rows; this one asks for up to 20. */
.landing-search-more {
  display: block;
  margin: 0 0 0.25rem auto;
  padding: 0.125rem 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font: 500 0.6875rem 'JetBrains Mono', monospace;
  cursor: pointer;
}
.landing-search-more:hover { color: var(--color-brand); }

/* A cohort or type badge: "whale", "consistent winner", "🎯 Top 1%", "cex". */
.landing-search-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  color: var(--color-brand);
  background: var(--color-brand-dim, rgba(255, 106, 0, 0.15));
  white-space: nowrap;
}
/* The address card: what we know about a pasted 0x address, one block above the results. */
.landing-search-profile {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border: var(--border-hairline) solid var(--color-brand);
  border-radius: 0.375rem;
}
/* The filter words the server understood ("chain:base", "pnl>1m"), as badges over the results. */
.landing-search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
/* Type tabs over the results (All / Tokens / Wallets / Traders / Markets / Pages). */
.landing-search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem 0.25rem;
  border-bottom: var(--border-hairline) solid var(--border);
  margin-bottom: 0.25rem;
}
.landing-search-tab {
  padding: 0.1875rem 0.625rem;
  border-radius: 0.375rem;
  border: var(--border-hairline) solid transparent;
  background: none;
  color: var(--text-muted);
  font: 500 0.6875rem 'JetBrains Mono', monospace;
  cursor: pointer;
}
.landing-search-tab:hover { color: var(--text-primary); }
.landing-search-tab.active { color: var(--color-brand); border-color: var(--color-brand); }

/* The dropdown's last row: "See all results" opens the results page. */
.landing-search-all {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-top: var(--border-hairline) solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: none;
}
.landing-search-all:hover { color: var(--color-brand); }

/* ── The results page, /search/all (search/all.html): the same rows, the whole list on the page ── */
.search-page { margin: 0 0.75rem 1.5rem; }
.search-page .landing-search-dropdown { max-height: none; box-shadow: none; }

/* What a result row is ("Token", "Vault", "Entity": landing_search.js tagOf), quiet small caps at its end, before its
   buttons: "Best matches" mixes kinds (owner, 2026-11-02). Never wraps or shrinks: the name and address give way. */
.landing-search-row[data-kind]::after {
  content: attr(data-kind);
  order: 1;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 0 0.3125rem;
  border-radius: 0.25rem;
  border: var(--border-hairline) solid var(--border);
  color: var(--text-muted);
}
.landing-search-row .landing-search-primary { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Row actions on an address row (landing_search.js addActions): copy the address, follow it. */
.landing-search-acts { display: inline-flex; gap: 0.25rem; flex-shrink: 0; margin-left: auto; order: 2; }
.landing-search-note { order: 2; }
.landing-search-act {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: var(--border-hairline) solid var(--border);
  background: none;
  color: var(--text-muted);
  font: 500 0.75rem 'JetBrains Mono', monospace;
  cursor: pointer;
}
.landing-search-act:hover,
.landing-search-act:focus-visible { color: var(--color-brand); border-color: var(--color-brand); outline: none; }
.landing-search-act[data-state="on"] { color: var(--color-positive); border-color: var(--color-positive); }
/* "Copied", or why a follow failed. */
.landing-search-note { min-width: 0; font-size: 0.625rem; color: var(--text-secondary); }
/* A phone: a row is ONE line and its NAME is whole (owner, 2026-11-02: at 390 px 15 of 27 "eth" rows took 2-3 lines,
   then "vitali…" sat beside "Vitalik …" and "ETHEREUM"). Only the name, the number, the buttons and, in "Best matches"
   (where kinds mix; a section's title already names its kind), the kind tag stay: badges, the chain and any side text
   the typed words did not hit (an address, a pseudonym, a sub-label) give way; a side text that IS the match
   ("@wlfi4700") stays. Measured in a 390 px frame on 8 queries: 1 name of 117 cut (a 40-character vault name), 0 rows
   on two lines, 0 buttons cut. */
@media (max-width: 48rem) {
  .landing-search-row .landing-search-chain,
  .landing-search-row .landing-search-badge,
  .landing-search-row .landing-search-secondary:not(:has(.landing-search-hit)) { display: none; }
  .landing-search-row .landing-search-primary { min-width: 3.5rem; flex-shrink: 0.05; }
  .landing-search-row:not([data-best])::after { display: none; }
  .landing-search-row[data-kind="Polymarket trader"]::after { content: "PM trader"; }
}
@media (pointer: coarse) {
  .landing-search-act { min-width: 2rem; height: 2rem; }
}