/* ════════════════════════════════════════════════════════════════════
   Palmelle hero search · shared between /directory and home page.
   The /directory page has its own inline copy of these styles in
   pages/directory-v2.html (locked per the search-bar standards memo).
   This file is the *home-page* copy — kept lean: input, autosuggest,
   ghost suggestion, locate-me, submit. No chips, no welcome popup,
   no voice (those live on /directory).
   ════════════════════════════════════════════════════════════════════ */

/* Font + colour fallbacks · index-v2.html names some vars differently
   (--sans vs --font-sans). Local fallbacks so this file is portable. */
.search-wrap {
  --sh-font-sans:  var(--font-sans, var(--sans, 'Inter', system-ui, sans-serif));
  --sh-font-mono:  var(--font-mono, var(--mono, 'DM Mono', 'JetBrains Mono', monospace));
  --sh-gold:       var(--gold,       #D2B34C);
  --sh-gold-soft:  var(--gold-soft,  #E5C97A);
  --sh-gold-deep:  var(--gold-deep,  #B8961F);
  --sh-navy-deep:  var(--navy-deep,  #071528);
  --sh-navy-light: var(--navy-light, #5B6877);
  --sh-navy-mid:   var(--navy-mid,   #1B2E4A);
  --sh-parchment:  var(--parchment,  #F4F0E2);
  --sh-ink-soft:   var(--ink-soft,   #5B6877);
  --sh-rule:       var(--rule,       rgba(7, 21, 40, 0.10));
  --sh-white:      var(--white,      #FFFFFF);
  --sh-r-search:   14px;
  position: relative;
}

.search-form {
  display: flex;
  align-items: stretch;
  background: var(--sh-white);
  border-radius: var(--sh-r-search);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), 0 6px 18px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  border: 2px solid var(--sh-gold);
}
.search-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font-family: var(--sh-font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--sh-navy-deep);
  padding: 24px 24px;
  outline: none;
  min-width: 0;
  position: relative;
  z-index: 2;
  width: 100%;
}
.search-input::placeholder { color: var(--sh-ink-soft); font-weight: 400; }

.search-input-shell {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  display: flex;
}

.search-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 24px 24px;
  font-family: var(--sh-font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: normal;
  white-space: pre;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1;
}
.search-ghost .ghost-prefix { color: transparent; }
.search-ghost .ghost-suffix { color: var(--sh-ink-soft); opacity: 0.55; }

.search-loc {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--sh-navy-light);
  padding: 0 18px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: var(--sh-font-sans);
  font-size: 13px;
  font-weight: 500;
  border-left: 1px solid var(--sh-rule);
  transition: color 0.12s, background 0.12s;
}
.search-loc:hover { color: var(--sh-gold-deep); background: var(--sh-parchment); }
.search-loc svg { width: 16px; height: 16px; }
.search-loc[data-busy="true"] svg { animation: search-loc-spin 0.8s linear infinite; }
.search-loc[data-busy="true"] span { opacity: 0.6; }
@keyframes search-loc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.search-submit {
  flex: 0 0 auto;
  border: 0;
  background: var(--sh-gold);
  color: var(--sh-navy-deep);
  padding: 0 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.search-submit:hover { background: var(--sh-gold-soft); }
.search-submit svg { width: 22px; height: 22px; stroke-width: 2.4; }

.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--sh-white);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 30;
}
.search-suggest[hidden] { display: none; }
.search-suggest li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--sh-navy-deep);
  font-family: var(--sh-font-sans);
}
.search-suggest li[aria-selected="true"],
.search-suggest li:hover { background: var(--sh-parchment); }
.search-suggest .ss-score {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sh-parchment);
  color: var(--sh-gold-deep);
  font-family: var(--sh-font-mono);
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.search-suggest .ss-info { flex: 1 1 auto; min-width: 0; }
.search-suggest .ss-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest .ss-meta {
  font-size: 12px;
  color: var(--sh-ink-soft);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest .ss-empty {
  padding: 14px 12px;
  color: var(--sh-ink-soft);
  font-family: var(--sh-font-sans);
  font-size: 13px;
}
.search-suggest .ss-name mark {
  background: rgba(210, 179, 76, 0.30);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.search-suggest .ss-loading {
  padding: 12px 12px;
  color: var(--sh-ink-soft);
  font-family: var(--sh-font-sans);
  font-size: 13px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-suggest .ss-loading::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.10);
  border-top-color: var(--sh-gold-deep);
  animation: search-loc-spin 0.7s linear infinite;
}
.search-suggest .ss-viewall {
  padding: 10px 12px;
  margin-top: 4px;
  border-top: 1px solid var(--sh-rule);
  color: var(--sh-gold-deep);
  font-family: var(--sh-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 0 8px 8px;
}
.search-suggest .ss-viewall:hover,
.search-suggest .ss-viewall[aria-selected="true"] { background: var(--sh-parchment); color: var(--sh-navy-deep); }
.search-suggest .ss-viewall::after { content: ' →'; }

.search-suggest .ss-state-hint {
  padding: 8px 12px;
  background: rgba(210, 179, 76, 0.10);
  border-radius: 8px;
  margin-bottom: 4px;
  font-family: var(--sh-font-sans);
  font-size: 13px;
  color: var(--sh-navy-deep);
  display: flex; align-items: center; gap: 10px;
}
.search-suggest .ss-state-hint strong { color: var(--sh-gold-deep); }

@media (max-width: 600px) {
  .search-input { padding: 20px 18px; font-size: 16px; }
  .search-ghost { padding: 20px 18px; font-size: 16px; }
  .search-loc span { display: none; }
  .search-loc { padding: 0 14px; }
}

/* Night mode */
[data-theme="night"] .search-form { background: var(--sh-navy-mid); border-color: var(--sh-gold); }
[data-theme="night"] .search-input { color: var(--sh-parchment); }
[data-theme="night"] .search-input::placeholder { color: rgba(244,240,226,0.50); }
[data-theme="night"] .search-ghost .ghost-suffix { color: rgba(244,240,226,0.45); }
[data-theme="night"] .search-loc { color: var(--sh-gold-soft); border-left-color: rgba(244,240,226,0.14); }
[data-theme="night"] .search-loc:hover { background: rgba(244,240,226,0.06); color: var(--sh-gold); }
[data-theme="night"] .search-suggest { background: var(--sh-navy-mid); }
[data-theme="night"] .search-suggest li { color: var(--sh-parchment); }
[data-theme="night"] .search-suggest li[aria-selected="true"],
[data-theme="night"] .search-suggest li:hover { background: rgba(244,240,226,0.08); }
[data-theme="night"] .search-suggest .ss-meta { color: rgba(244,240,226,0.55); }
[data-theme="night"] .search-suggest .ss-empty { color: rgba(244,240,226,0.65); }
[data-theme="night"] .search-suggest .ss-name mark { background: rgba(210, 179, 76, 0.40); color: var(--sh-gold-soft); }
[data-theme="night"] .search-suggest .ss-viewall { color: var(--sh-gold-soft); border-top-color: rgba(244,240,226,0.16); }
[data-theme="night"] .search-suggest .ss-viewall:hover,
[data-theme="night"] .search-suggest .ss-viewall[aria-selected="true"] { background: rgba(244,240,226,0.08); color: var(--sh-gold); }
[data-theme="night"] .search-suggest .ss-state-hint { background: rgba(210,179,76,0.18); color: var(--sh-parchment); }