/* =========================================================
   LW RAIL — STANDARD SEARCH BOX (v0.4.2)
   The single visual/behavioral standard for every search box
   on LopoRail. Apply via class="lwsearch" + data-lwsearch,
   or use lwrail_search_box() to render.
   Element-specific results: the picker fires a JS event
   (document dispatch of 'lwsearch:pick'); the consuming page
   decides what to do with the selected item.
   ========================================================= */

:root{
  --lwsearch-radius:12px;
  --lwsearch-border:#c9d2e0;
  --lwsearch-border-focus:#1e6fcc;
  --lwsearch-ring:rgba(30,111,204,.18);
  --lwsearch-bg:#ffffff;
  --lwsearch-ink:#15202b;
  --lwsearch-muted:#5b6b7b;
  --lwsearch-menu-bg:#ffffff;
  --lwsearch-menu-border:#dfe6ec;
  --lwsearch-hover:#f2f6fb;
  --lwsearch-accent:#1e6fcc;
  --lwsearch-shadow:0 1px 2px rgba(21,32,43,.06),0 8px 22px -8px rgba(21,32,43,.18);
}

.lwsearch{position:relative;margin:0;font-family:inherit;max-width:620px}

.lwsearch__field{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--lwsearch-bg);
  border:1px solid var(--lwsearch-border);
  border-radius:var(--lwsearch-radius);
  padding:6px 12px;
  box-shadow:var(--lwsearch-shadow);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lwsearch--focused .lwsearch__field,
.lwsearch__field:focus-within{
  border-color:var(--lwsearch-border-focus);
  box-shadow:0 0 0 3px var(--lwsearch-ring);
}

.lwsearch__icon{
  flex:0 0 auto;
  width:16px;height:16px;
  color:var(--lwsearch-muted);
  pointer-events:none;
}

.lwsearch__input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--lwsearch-ink);
  font:inherit;
  font-size:.95rem;
  padding:7px 0;
  margin:0;
  outline:none;
}
.lwsearch__input::placeholder{color:var(--lwsearch-muted);opacity:.8}

.lwsearch__clear{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border:0;border-radius:50%;
  background:transparent;
  color:var(--lwsearch-muted);
  font-size:14px;line-height:1;
  cursor:pointer;
  padding:0;
  transition:background .15s ease,color .15s ease;
}
.lwsearch__clear:hover{background:#eef1f5;color:var(--lwsearch-ink)}
.lwsearch__clear[hidden]{display:none}

.lwsearch__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  z-index:40;
  margin:0;padding:6px;
  list-style:none;
  background:var(--lwsearch-menu-bg);
  border:1px solid var(--lwsearch-menu-border);
  border-radius:var(--lwsearch-radius);
  box-shadow:var(--lwsearch-shadow);
  max-height:320px;
  overflow:auto;
}
.lwsearch__menu[hidden]{display:none}

.lwsearch__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;border-radius:8px;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:var(--lwsearch-ink);
}
.lwsearch__item:hover,
.lwsearch__item.is-active{background:var(--lwsearch-hover)}
.lwsearch__item-main{flex:1 1 auto;min-width:0}
.lwsearch__item-name{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lwsearch__item-sub{display:block;font-size:.78rem;color:var(--lwsearch-muted)}
.lwsearch__item-code{
  flex:0 0 auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem;
  color:var(--lwsearch-muted);
  background:#f0f3f7;
  border-radius:6px;
  padding:2px 7px;
}
.lwsearch__flag{flex:0 0 auto;font-size:1.05rem;line-height:1}

.lwsearch__empty{padding:12px 10px;font-size:.86rem;color:var(--lwsearch-muted)}

.lwsearch__status{font-size:.78rem;color:var(--lwsearch-muted);margin-top:4px}

@media (prefers-color-scheme:dark){
  :root{
    --lwsearch-border:#2c3a49;
    --lwsearch-ring:rgba(30,111,204,.35);
    --lwsearch-bg:#223044;
    --lwsearch-ink:#e8edf3;
    --lwsearch-muted:#94a3b3;
    --lwsearch-menu-bg:#223044;
    --lwsearch-menu-border:#2c3a49;
    --lwsearch-hover:#2b3a4e;
    --lwsearch-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px -8px rgba(0,0,0,.6);
  }
  .lwsearch__item-code{background:#2b3a4e;color:#b8c4d1}
}