/* Календарь продаж: то же, что календарь выбора даты, но раскрытый
   прямо в разделе.

   Сам вид сетки, чисел и стрелок живёт в components/calendar.css —
   он один на оба календаря. Здесь только разница: плашка вместо
   содержимого шторки и точка под днём, в который были продажи. */

/* Раскрыт в разделе, а не в шторке: даём ему плашку, чтобы он читался
   как блок раздела, а не как кусок фона. */
.cal--flat {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* День с продажами: точка под числом. Не цвет и не рамка — цветом
   уже сказано «сегодня», рамкой «выбран», и третий такой же знак
   спорил бы с ними. Точка стоит ниже числа и ничего не перекрывает. */
.cal__day--has { position: relative; }

.cal__dot {
  position: absolute;
  left: 50%;
  bottom: 1.2cqw;
  width: 1.3cqw;
  height: 1.3cqw;
  margin-left: -0.65cqw;
  border-radius: 100px;
  background: var(--accent);
  transition: background var(--fast) var(--ease);
}

/* На выбранном дне фон золотой, и золотая точка на нём пропала бы.
   Перекрашиваем её в цвет самой плашки — так она остаётся видна
   и на выбранном дне. */
.cal__day.is-picked .cal__dot { background: var(--on-accent); }

/* Середина отрезка: мягкая заливка без рамки. Края отрезка помечены
   как выбранный день, и если бы середина выглядела так же, отрезок
   читался бы как россыпь отдельных дней. */
.cal__day--inside {
  background: var(--plate-lit);
  color: var(--text);
  border-radius: var(--r-sm);
}

/* Строка под сеткой: что выбрано и чем это снять. */
.cal__said {
  margin: var(--sp-3) 0 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 {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

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