/* =========================================================================
   Search shell — the sitewide search input.
   Extracted from home-band.css 2026-08-17 when the 404 page needed the same
   input; keep this the single definition rather than restyling a copy.
   Attach via attach_library('ngf/search-shell').
   ========================================================================= */

.ngf-search-shell {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ngf-white);
  border: 1.5px solid var(--ngf-white);
  border-radius: var(--ngf-r-md);
  padding: 4px 22px;
  position: relative;
  box-shadow: 0 10px 30px rgba(11,22,26,0.18), 0 2px 6px rgba(11,22,26,0.10);
}
.ngf-search-shell__icon { color: var(--ngf-fg-2); display: flex; flex-shrink: 0; }

.ngf-search-shell__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-base);
  color: var(--ngf-ink-900);
  height: 53px;
}
.ngf-search-shell__input::placeholder { color: var(--ngf-fg-3); }

.ngf-search-shell__kbd {
  font-family: var(--ngf-font-mono);
  font-size: 0.6875rem;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ngf-white);
  border: 1px solid var(--ngf-border-strong);
  color: var(--ngf-fg-2);
}

/* On the homepage this sits on a dark photo band, where a white border and a
   deep shadow read as a raised card. On a light page background that same
   treatment floats. Same shape and sizing, contrast supplied by a real border
   instead. */
.ngf-search-shell--onlight {
  border-color: var(--ngf-border-strong);
  box-shadow: var(--ngf-shadow-1);
}
.ngf-search-shell--onlight:focus-within {
  border-color: var(--ngf-seismic-400);
  box-shadow: 0 0 0 3px var(--ngf-seismic-50);
}