/* ─── SEARCH FIELD ────────────────────────────────────────────────────────────
   The wallet/question field, shared by the landing hero, the sign-in screen and
   the dashboard. All three grew their own copy of this and drifted apart, which
   is how the sign-in page ended up rejecting questions the others accepted.

   Structure (class names are additive — each page keeps its own hooks for JS):

     form.search-field
       └ div.search-field-row          ← border, background, focus ring
           ├ svg.search-field-pre      ← leading glyph
           ├ input.search-field-input  ← transparent; the row is the visible pill
           ├ span.search-field-ph      ← typed placeholder overlay
           │   ├ span.search-field-ph-text
           │   └ span.search-field-ph-caret
           └ button.search-field-go    ← appears once there is something to send

   State classes on the row, set by each page's script: `has-value`,
   `is-focused`, and `is-swap` on the placeholder while it cross-fades.

   Size comes from custom properties, so a page picks a scale instead of
   redeclaring the component. Defaults are the compact dashboard size.
   ─────────────────────────────────────────────────────────────────────────── */

.search-field {
  --sf-h: 46px;
  --sf-radius: 14px;
  --sf-pad-y: 11px;
  --sf-pad-l: 40px;
  --sf-pad-r: 42px;
  --sf-font: 0.84rem;
  --sf-ico: 16px;
  --sf-ico-x: 14px;
  --sf-ph-font: 0.76rem;
  --sf-ph-l: var(--sf-pad-l);
  --sf-ph-r: 16px;
  --sf-go: 28px;
  --sf-go-x: 7px;
  --sf-go-radius: 9px;
  --sf-go-svg: 15px;
}

/* Sign-in screen: roomier than the dashboard, tighter than the hero. */
.search-field--md {
  --sf-h: 58px;
  --sf-radius: 16px;
  --sf-pad-y: 18px;
  --sf-pad-l: 52px;
  --sf-pad-r: 54px;
  --sf-font: 1.05rem;
  --sf-ico: 20px;
  --sf-ico-x: 18px;
  --sf-ph-font: 0.92rem;
  --sf-ph-r: 54px;
  --sf-go: 34px;
  --sf-go-x: 9px;
  --sf-go-radius: 11px;
  --sf-go-svg: 17px;
}

/* Landing hero: the largest instance, the first thing on the page. */
.search-field--lg {
  --sf-h: 64px;
  --sf-radius: 18px;
  --sf-pad-y: 20px;
  --sf-pad-l: 52px;
  --sf-pad-r: 54px;
  --sf-font: 1.08rem;
  --sf-ico: 22px;
  --sf-ico-x: 18px;
  --sf-ph-font: 0.95rem;
  --sf-ph-r: 54px;
  --sf-go: 38px;
  --sf-go-x: 10px;
  --sf-go-radius: 12px;
  --sf-go-svg: 18px;
}

.search-field-row {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  min-height: var(--sf-h);
  border-radius: var(--sf-radius);
  border: 1px solid rgba(29, 233, 198, 0.34);
  background: rgba(6, 16, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(29, 233, 198, 0.06), 0 8px 24px rgba(29, 233, 198, 0.08);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.search-field-row:focus-within {
  border-color: rgba(29, 233, 198, 0.55);
  background: rgba(8, 20, 18, 0.82);
  box-shadow: 0 0 0 4px rgba(29, 233, 198, 0.1), 0 8px 24px rgba(29, 233, 198, 0.14);
}
.search-field.invalid .search-field-row {
  border-color: rgba(240, 85, 106, 0.6);
  box-shadow: 0 0 0 4px rgba(240, 85, 106, 0.1);
}

.search-field-pre {
  position: absolute;
  left: var(--sf-ico-x);
  width: var(--sf-ico);
  height: var(--sf-ico);
  color: var(--muted);
  pointer-events: none;
}

.search-field-input {
  width: 100%;
  min-width: 0;
  min-height: var(--sf-h);
  padding: var(--sf-pad-y) var(--sf-pad-r) var(--sf-pad-y) var(--sf-pad-l);
  border: 0;
  border-radius: var(--sf-radius);
  background: transparent;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--sf-font);
  letter-spacing: -0.01em;
  /* The typed placeholder draws its own caret, so hide the real one until the
     visitor actually focuses the field. */
  caret-color: transparent;
  outline: none;
}
.search-field-input::placeholder { color: transparent; }
.search-field-input:focus { caret-color: var(--accent); }

.search-field-ph {
  position: absolute;
  left: var(--sf-ph-l);
  right: var(--sf-ph-r);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--sf-ph-font);
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  transition: padding-left 0.16s, color 0.16s, opacity 0.2s;
}
.search-field-ph-text { transition: opacity 0.2s; }
.search-field-ph.is-swap .search-field-ph-text { opacity: 0; }
.search-field-ph-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 2px;
  flex: none;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(29, 233, 198, 0.7);
  animation: search-field-caret 1.05s steps(1) infinite;
}
@keyframes search-field-caret { 50% { opacity: 0; } }

.search-field-row.has-value .search-field-ph { opacity: 0; visibility: hidden; }
/* Focused with nothing typed: the placeholder becomes a suggestion. */
.search-field-row.is-focused .search-field-ph { padding-left: 0.75em; color: var(--muted-dim); }
.search-field-row.is-focused .search-field-ph::before {
  content: "e.g. ";
  color: var(--muted-dim);
  opacity: 0.72;
}
.search-field-input:focus + .search-field-ph .search-field-ph-caret,
.search-field-row.is-focused .search-field-ph-caret,
.search-field-row.has-value .search-field-ph-caret { display: none; }

.search-field-go {
  position: absolute;
  right: var(--sf-go-x);
  top: 50%;
  transform: translateY(-50%);
  width: var(--sf-go);
  height: var(--sf-go);
  padding: 0;
  border: 0;
  border-radius: var(--sf-go-radius);
  cursor: pointer;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s, color 0.16s, background 0.16s;
}
.search-field-go svg { width: var(--sf-go-svg); height: var(--sf-go-svg); }
.search-field-row.has-value .search-field-go { opacity: 1; pointer-events: auto; }
.search-field-go:hover,
.search-field-go:focus-visible {
  color: var(--accent);
  background: rgba(29, 233, 198, 0.1);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .search-field-ph-caret { animation: none; opacity: 0.65; }
  .search-field-row,
  .search-field-ph,
  .search-field-go { transition: none; }
}