/* Календарь: месяц сеткой, стрелки листания, выбранный день.

   Свой, а не системный: тот рисуется цветами системы и в тёмной теме
   читается как чужая белая коробка. Здесь те же поверхности, те же
   скругления и то же золото, что во всём продукте.

   Живёт в шторке снизу, поэтому своей рамки и подложки у него нет:
   подложка уже под ним. */

.cal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Месяц посередине, стрелки по краям: так их находят, не читая. */
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.cal__month {
  flex: 1;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Стрелка — тот же круг, что «ещё» в списках: приглушённая до
   нажатия, подсвеченная под пальцем. */
.cal__turn {
  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);
}

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

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

/* Дни недели и сами дни — одна сетка на семь столбцов: подписи
   обязаны стоять ровно над числами. */
.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1cqw;
}

.cal__wday {
  padding-bottom: var(--sp-1);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--text-faint);
}

/* Клетка дня — квадрат: сетка из шести недель не должна прыгать
   в высоту при листании, иначе кнопка под ней уезжает из-под пальца. */
.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

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

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

/* Дни соседних месяцев не выбрасываем, а гасим: пустые клетки по краям
   читаются как дыры, а серые числа помогают попасть в «тридцать первое
   прошлого». */
.cal__day--other { color: var(--text-faint); }

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

.cal__day.is-picked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

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