/* Search's dropdown (shared/_search).  On desktop it opens under the top bar's search box, at least 400px wide and
   lined up with its right edge.  On phones the search button swaps the header's logo bar for the navy search box and
   Cancel, and the dropdown spans the screen under it. */

.search { position: relative; min-width: 0; }
.search .search-field { max-width: none; }
.search-drop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: max(100%, 400px); max-height: 70vh;
  overflow-y: auto; background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); box-shadow: var(--shadow-selected);
}
.search-drop[hidden] { display: none; }
.search-drop-empty { padding: 14px 16px; font-size: var(--type-body-sm); color: var(--ink-500); line-height: 1.5; }

.app-header-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px 16px; }
.app-header-search[hidden], .app-header-bar[hidden] { display: none; }
.app-header-search .search { position: static; flex-grow: 1; }
.app-header-search .search-drop { left: 8px; right: 8px; width: auto; top: calc(100% - 4px); max-height: calc(100vh - 160px); }
.app-header-cancel {
  min-height: 44px; display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--gold-200);
}
.app-header-cancel:hover { color: var(--gold-100); }

.search-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--ink-900); text-decoration: none;
}
.search-row + .search-row { border-top: 1px solid var(--paper-150); }
.search-row:hover, .search-row[aria-selected='true'] { color: var(--ink-900); background: var(--paper-50); }
.search-row-avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: var(--navy-50); color: var(--navy-900);
}
.search-row-avatar-household { background: var(--walnut-100); color: var(--walnut-900); }
.search-row-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.search-row-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.search-row-detail { font-size: 13px; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row mark { background: var(--gold-150); color: inherit; }