/* Панель управления историей: лупа, период, порядок — одной строкой.

   Закреплена под шапкой и идёт тем же фоном: это её продолжение,
   а не блок поверх списка. Заказы проезжают под ней, а инструменты
   остаются под рукой.

   Поиск раскрывается вправо, забирая место у вкладок периода:
   плавно, потому что резкая подмена одного другим читается как
   поломка, а не как переход. */

.salebar {
  /* Не сжимается: экран — колонка на flex, и без этого полоса
     отдавала свою высоту списку и обрезалась пополам. */
  flex: none;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 calc(var(--sp-4) * -1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  /* Не линия, а тень: линия рисует шов и делит экран надвое, тень же
     просто говорит, что полоса выше списка. */
  box-shadow: 0 6px 14px var(--shelf-shadow);
}

/* Круглая кнопка знака: лупа слева, порядок справа. Тот же круг,
   что у «ещё» в списках, — знаки одного веса выглядят одинаково. */
.salebar__act {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.salebar__act .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.salebar__act:active { background: var(--plate-lit); color: var(--text); }

@media (hover: hover) {
  .salebar__act:hover { background: var(--plate-lit); color: var(--text); }
}

/* Вкладки в панели ростом со знаками: полоса — одна строка
   инструментов, а полный рост переключателя разделов поднимал её
   вдвое выше кнопок и оставлял списку меньше экрана. Высота
   у всех троих теперь одна.

   Слова не переносим: «Всё время» в две строки растягивало вкладку,
   а за ней и всю полосу. */
.salebar .tabs { padding: var(--sp-1); }

.salebar .tabs__item {
  display: grid;
  place-items: center;
  height: var(--sp-8);
  padding: 0 var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
}

/* Вкладки периода занимают всё, что осталось между знаками, и уходят,
   когда раскрывается поиск. Ширину гасим не display: none, а нулевой
   долей — исчезнувший разом блок не с чем анимировать. */
.salebar__tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow var(--base) var(--ease),
              opacity var(--base) var(--ease),
              padding var(--base) var(--ease);
}

.salebar.is-finding .salebar__tabs {
  flex-grow: 0;
  flex-basis: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* Поле поиска — зеркально вкладкам: свёрнуто в ноль, пока не нужно,
   и разворачивается на их место. */
.salebar__find {
  flex: 0 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  height: var(--sp-10);
  border-radius: var(--r-md);
  background: var(--surface-2);
  opacity: 0;
  overflow: hidden;
  transition: flex-grow var(--base) var(--ease),
              opacity var(--base) var(--ease),
              padding var(--base) var(--ease);
}

.salebar.is-finding .salebar__find {
  flex-grow: 1;
  padding: 0 var(--sp-3);
  opacity: 1;
}

.salebar__input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
}

.salebar__input::placeholder { color: var(--text-faint); }

/* Свёрнутое поле не должно ловить нажатия и клавиатуру: пока его
   не видно, его как будто нет. */
.salebar:not(.is-finding) .salebar__find { pointer-events: none; }

/* Вкладки в полосе теснее, чем сами по себе: их зажали между двумя
   круглыми кнопками, и «Всё время» переносилось на вторую строку,
   раздувая полосу вдвое. */
.salebar .tabs { padding: 0.8cqw; }

.salebar .tabs__item {
  padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  white-space: nowrap;
}