/* Лента заказов под календарём: кнопки отчёта, сводка, сами заказы.

   Отдельно от components/sale-strip.css: там окно календаря, его слои
   и сжатие, здесь — то, что стоит под ним. Вместе они переросли двести
   строк. */

/* Лента заказов под календарём: кнопки, сводка, сами заказы. Свой
   ритм, потому что колонка внутри колонки (решение №98). */
.salefeed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Пока открыт календарь, сводка не липнет. Она прилипает под тем же
   краем, что и он (tally.css), и на этом экране они спорили: сводка
   стоит в разметке ниже и наезжала на неделю, закрывая её целиком.

   Уступает сводка, а не календарь: за сводкой возвращаются глазами,
   а по календарю ходят руками. Да и полок у верха уже две — поиск
   и календарь, — третья съела бы половину экрана. */
.salecal__place:not([hidden]) ~ .salefeed .tally {
  position: static;
  /* Слой сводки снимаем вместе с прилипанием. Одного position: static
     мало: сводка — прямой ребёнок колонки на flex, а у таких z-index
     работает и без позиционирования. С прежней четвёркой она вставала
     ровно поверх недели и закрывала её целиком. */
  z-index: auto;
  /* И стекло ей здесь ни к чему: размытие нужно было, чтобы сквозь
     стоящую сводку читался едущий под ней список. Сводка едет вместе
     со списком — размывать нечего. Заодно уходит и лишний слой:
     с размытием сводка вставала поверх календаря, хотя тот выше
     по порядку. */
  background: var(--surface-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Три кнопки под календарём: поровну и в одну строку.

   Ростом с одну строку: под ними стоит сам отчёт, ради которого сюда
   и пришли, и высокая полоса кнопок отодвигала бы его вниз. Высоту
   задаём числом, а не оставляем на усмотрение содержимого: у трёх
   кнопок с разными словами она разъезжалась на десяток точек. */
.cal__feet {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Отступ сверху гасим намеренно: общее правило ритма экрана
   раздвигает соседей по вертикали, и второй с третьей кнопкой оно
   опускало на шаг ниже первой — ряд выходил ступенькой. Здесь дети
   стоят в строку, и вертикальный ритм им не нужен. */
.cal__feet .btn {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 10cqw;
  margin: 0;
  padding: 0 var(--sp-1);
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* Знак у кнопки мельче подписи: он находит кнопку глазом, а читают
   всё равно слово. */
.cal__feet .icon {
  flex: none;
  width: var(--fs-md);
  height: var(--fs-md);
}

/* Строка над кнопками: чего сейчас ждут от человека. */
.cal__said {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 8cqw;
}

.cal__said--hint {
  justify-content: center;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.cal__pick {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Что показано под кнопками — день и его заказы. Заголовок дня
   отделяет календарь от списка: без него список читается как
   продолжение сетки. */
.saleday {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.saleday__name {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
}