/* Полка поиска над списком: поле во всю ширину и, если нужно,
   знак действия справа.

   Общая на весь продукт: ею ищут клиентов в базе и заказы в истории
   операций. Раньше она жила в стилях одного раздела — второй такой же
   пришлось бы описывать заново.

   Держится над списком: во всю ширину колонки, отрицательными полями
   по бокам, фон непрозрачный — иначе строки просвечивают под ней,
   проезжая мимо. */

.searchbar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(var(--sp-4) * -1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  /* Не линия, а тень: линия рисует шов и делит экран надвое, тень же
     просто говорит, что полка выше списка. */
  box-shadow: 0 6px 14px var(--shelf-shadow);
}


/* Строка над найденным: сколько нашлось и как вернуться ко всему
   списку. Не заголовок и не итог — служебная пометка, поэтому мелкая
   и приглушённая. */
.foundbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.foundbar__count {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* «Сбросить» — словом и золотым: это единственная дорога обратно
   ко всему списку. */
.foundbar__off {
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  margin-right: calc(var(--sp-2) * -1);
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.foundbar__off:active { background: var(--surface-2); }

@media (hover: hover) {
  .foundbar__off:hover { background: var(--surface-2); }
}