/* SearchField (forms/SearchField.jsx) and EmptyState (feedback/EmptyState.jsx, EmptyStatesPhone), shared by
   Search, Members and the chrome.  The light field is the paper one in the desktop TopBar and list toolbars; the navy
   one sits in the phone's navy header.  Search draws both focused, so the focus look comes from :focus-within. */

.search-field { display: flex; flex-grow: 1; min-width: 0; max-width: 520px; }
.search-field-box {
  flex-grow: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: var(--radius-control); cursor: text;
}
.search-field-icon { flex-shrink: 0; }
.search-field-input {
  flex-grow: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; outline: none;
}
.search-field-input:focus-visible { box-shadow: none; }
.search-field-input::-webkit-search-cancel-button { cursor: pointer; }

.search-field-light .search-field-box { border: 1px solid var(--paper-500); background: var(--paper-25); color: var(--ink-500); }
.search-field-light .search-field-input { color: var(--ink-900); }
.search-field-light .search-field-box:focus-within {
  border: 1.5px solid var(--navy-700); background: #FFFFFF; color: var(--navy-700);
  box-shadow: 0 0 0 4px rgba(30,58,120,0.12);
}

.search-field-navy { max-width: none; }
.search-field-navy .search-field-box {
  height: 46px; border-radius: 12px; background: var(--navy-850); color: var(--gold-300);
  box-shadow: inset 0 0 0 1px var(--navy-600);
}
.search-field-navy .search-field-input { font-size: 16px; color: #FFFFFF; }
.search-field-navy .search-field-input::placeholder { color: var(--navy-200); }
.search-field-navy .search-field-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold-400); }

.empty-state {
  background: #FFFFFF; border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 26px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.empty-state-glyph {
  width: 52px; height: 52px; border-radius: 50%; background: var(--paper-100); color: var(--walnut-900);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.empty-state-title { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-display); color: var(--navy-950); }
.empty-state-body { max-width: 46ch; font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.empty-state-action { font-size: 14px; font-weight: 700; text-decoration: none; }
.empty-state-button { margin-top: 4px; }