/* Год двенадцатью месяцами: шторка выбора месяца (ui/sale-year.js).

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

.year {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Год со стрелками — та же строка, что в шапке календаря: одно место
   в продукте, один вид.

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

   Прилипает к самому краю шторки, а не к началу содержимого: у тела
   шторки свои поля (sheet.css), и строка, прилипшая внутри них,
   оставляла над собой щель — в ней проезжали месяцы. Поля забираем
   отрицательным полем и возвращаем своим отступом, а фон растягиваем
   на всю ширину: месяцы должны уходить под строку, а не сквозь неё. */
.year__head {
  position: sticky;
  top: calc(var(--sp-5) * -1);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: calc(var(--sp-5) * -1) calc(var(--sp-3) * -1) 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  background: var(--surface);
}

.year__title {
  flex: 1;
  text-align: center;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.year__head .cal__turn:disabled {
  opacity: .35;
  pointer-events: none;
}

.year__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* Месяц — плашка со своим названием и сеткой чисел. */
.year__month {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.year__month:active { background: var(--plate-lit); }

@media (hover: hover) {
  .year__month:hover { background: var(--plate-lit); }
}

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

.year__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3cqw;
}

/* Числа мелкие нарочно: месяц здесь — не для чтения по дням, а чтобы
   узнать его в лицо и попасть пальцем. */
.year__day {
  text-align: center;
  color: var(--text-faint);
  font-size: 2.6cqw;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.year__day--today {
  color: var(--accent-text);
  font-weight: 700;
}

/* Месяц, в котором были продажи, назван золотом: год открывают
   не «посмотреть на числа», а найти, где искать. */
.year__month--has .year__name { color: var(--accent-text); }

/* Тот месяц, что сейчас открыт в календаре, обведён. */
.year__month.is-open {
  border-color: var(--accent);
  background: var(--plate-lit);
}