/* Сжатие календаря продаж и лента дат под ним.

   Окно с обрезкой, в котором лежат оба слоя: свиток — подписи столбцов
   вместе с сеткой месяца — и лента дат. Высоту окна и сдвиг свитка
   задаёт ui/sale-fold.js по тому, насколько прокручен список; здесь
   только то, что должно быть верно в любом кадре этого сжатия.

   Лента лежит поверх свитка и проявляется, когда сжатие дошло до
   конца. Она идёт по одному дню, и день недели вписан в саму плашку:
   общая строка «пн вт ср…» при сдвиге на день начинала бы врать. */

.salecal__view {
  position: relative;
  overflow: hidden;
}

/* Свиток едет вверх по мере сжатия. Обещаем браузеру движение
   заранее: сдвиг считается на каждом кадре прокрутки, и слой лучше
   держать отдельным.

   Края размываем: строки уезжают вверх, а нижняя упирается в край
   карточки, и обе обрывались на полчисле. Восемь точек затухания —
   и строка не обрывается, а тает. На раскрытом календаре они
   приходятся на пустое поле клетки: числа стоят по её середине.

   Маске важна не краска, а плотность, и цвет для неё берём тот,
   что уже есть под рукой: свой был бы литералом там, где литералов
   не держим. */
.salecal__roll {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  will-change: transform;
  transition: opacity var(--fast) var(--ease);
  mask-image: linear-gradient(to bottom, transparent 0, currentColor 8px,
                              currentColor calc(100% - 8px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, currentColor 8px,
                                      currentColor calc(100% - 8px), transparent 100%);
}

/* Сжался до конца — свиток убираем: дальше показывает лента, и держать
   под ней второй слой незачем. Пока сетка догоняет уехавшую ленту, они
   и вовсе про разное: под лентой оказывалась чужая строка, и числа
   читались вдвойне. */
.salecal[data-open="0"] .salecal__roll {
  opacity: 0;
  pointer-events: none;
}

/* Листнули месяц — сетка приезжает с той стороны, куда листали.
   Мгновенная подмена читается как перерисовка, а не как движение. */
@keyframes salecal-from-left {
  from { opacity: 0; transform: translateX(-4cqw); }
  to { opacity: 1; transform: none; }
}

@keyframes salecal-from-right {
  from { opacity: 0; transform: translateX(4cqw); }
  to { opacity: 1; transform: none; }
}

.salecal__roll--back { animation: salecal-from-left var(--base) var(--ease); }
.salecal__roll--next { animation: salecal-from-right var(--base) var(--ease); }

/* Лента дат: плашки по одному дню, привязка ставит день ровно к краю.
   Маски у неё нет — контур плашки должен быть виден целиком, а не
   срезан сверху и снизу.

   Горизонталь забираем себе: у экрана свайп вправо означает «назад»
   (ui/swipe.js), и на ленте это движение должно листать дни, а не
   уводить с экрана. */
.salecal__strip {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  gap: 1cqw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease);
}

.salecal__strip::-webkit-scrollbar { display: none; }

/* Мышью ленту тянут за неё саму, и выделять текст при этом не нужно:
   браузер иначе тянет выделение вместе с рукой и подсвечивает числа. */
.salecal__strip,
.salecal__pick {
  user-select: none;
  -webkit-user-select: none;
}

.salecal[data-open="0"] .salecal__strip {
  opacity: 1;
  pointer-events: auto;
}

/* Пока ленту тянут мышью, привязку снимаем: с ней день дёргается
   к ближайшему прямо под курсором. Доводит до дня уже отпускание
   (ui/sale-drag.js). */
.salecal__strip.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

/* Плашка дня: день недели сверху, число под ним. Семь штук в ширину
   окна — ровно столько же, сколько столбцов у сетки, и та же доля
   на промежутки. */
.salecal__pick {
  position: relative;
  flex: 0 0 calc((100% - 6cqw) / 7);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4cqw;
  padding: var(--sp-2) 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--plate-lit);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

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

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

.salecal__wd {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
}

.salecal__nd {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* День соседнего месяца приглушён: так видно, где месяц кончился,
   а лента при этом не обрывается — крутить её можно сколько угодно. */
.salecal__pick--other .salecal__nd { color: var(--text-dim); }

/* Сегодня — обведён, выбранный — залит золотом. Два разных знака,
   потому что это два разных вопроса: «какой сегодня день» и «что
   я выбрал». */
.salecal__pick--today { border-color: var(--accent-dim); }

.salecal__pick.is-picked {
  background: var(--accent);
  border-color: var(--accent);
}

.salecal__pick.is-picked .salecal__wd,
.salecal__pick.is-picked .salecal__nd { color: var(--on-accent); }

@media (hover: hover) {
  .salecal__pick.is-picked:hover { background: var(--accent-hi); }
}

/* Точка под числом: в этот день были продажи. */
.salecal__dot {
  position: absolute;
  left: 50%;
  bottom: 1cqw;
  width: 1.3cqw;
  height: 1.3cqw;
  margin-left: -0.65cqw;
  border-radius: 100px;
  background: var(--accent);
}

.salecal__pick.is-picked .salecal__dot { background: var(--on-accent); }