/* Search: the find-friends field (home and search page) and the list of citizens it finds. Tokens
   and shared components only (docs/DESIGN.md). */
@layer pages {
  .find-friends { width: min(360px, 100%); text-align: left; }
  .search-field { position: relative; display: block; }
  .search-field input { width: 100%; padding-right: calc(var(--h-sm) + var(--sp-2)); }
  .search-field .btn { position: absolute; top: 50%; right: var(--sp-1); transform: translateY(-50%); }

  .search-skeleton { display: flex; flex-direction: column; gap: var(--sp-4); }
  .search-skeleton .skeleton { height: 44px; border-radius: var(--r-md); }

  .search-table .friend-cell { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .search-table .who-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .search-table a.who { font-weight: var(--fw-semibold); color: var(--text); }
  .search-table a.who:hover { color: var(--brand-text); }
  .search-table .place-cell { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-2); }
  .search-table .only-phone { display: none; }
  .search-table td.col-xp { white-space: nowrap; }
  .search-table td.col-xp b { display: block; font-weight: var(--fw-semibold); color: var(--text); }
  .search-table td.col-xp small { color: var(--text-3); font-size: var(--fs-xs); }
  .search-table td.act, .search-table th:last-child { text-align: right; }
  .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
  .search-table tbody tr:hover { background: var(--surface-2); }

  @media (max-width: 720px) {
    .search-table .col-country, .search-table th.col-xp, .search-table td.col-xp { display: none; }
    .search-table .only-phone { display: inline-flex; font-size: var(--fs-xs); color: var(--text-2); }
    .search-table th, .search-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .row-actions .btn-text { display: none; }
  }
}